From 831725d3a90c8c99da6b11530b16b8373c6a1434 Mon Sep 17 00:00:00 2001
From: NikoHelle <niko.helle@hyperactive.fi>
Date: Fri, 27 Oct 2023 14:18:36 +0300
Subject: [PATCH] main HDS-1817 docs

---
 .../hds-1817-stepbystep-docs/about/index.html |  2 +-
 .../about/releases/index.html                 |  2 +-
 .../about/resources/index.html                |  2 +-
 .../app-20033eb70b2caf24e830.js               |  8 ++++
 .../app-20033eb70b2caf24e830.js.LICENSE.txt   | 37 +++++++++++++++++++
 .../b123bb55-73388f463f51189e5870.js          |  2 +
 ...23bb55-73388f463f51189e5870.js.LICENSE.txt |  1 +
 ...-accessibility-mdx-2d600c846f83f5259de1.js |  1 +
 ...accordion-code-mdx-ee2418ec85b8653bba26.js |  1 +
 ...-customisation-mdx-57e8811d082cf9e65d84.js |  1 +
 ...ccordion-index-mdx-fd8a3c41cd86641ad2f9.js |  1 +
 ...accordion-tabs-mdx-964ab68c8cbe69db4a36.js |  1 +
 ...-accessibility-mdx-c29db5ea73fef9ffbad7.js |  1 +
 ...readcrumb-code-mdx-823b5b268a1e4b6c21df.js |  1 +
 ...-customisation-mdx-056818ca5baea2516dc3.js |  1 +
 ...eadcrumb-index-mdx-679117619f6885e3d2fc.js |  1 +
 ...readcrumb-tabs-mdx-fee2c2763290a354e310.js |  1 +
 ...-accessibility-mdx-26f0df0885e580f26a39.js |  1 +
 ...s-buttons-code-mdx-fb6949b2d38e1b97b673.js |  1 +
 ...-customisation-mdx-aad900d3f10e2d745c68.js |  1 +
 ...-buttons-index-mdx-87b2da23a0923d27cfe5.js |  1 +
 ...s-buttons-tabs-mdx-cd46fdc2009425fae19e.js |  1 +
 ...-accessibility-mdx-3bb0e67c26ae23674fc2.js |  1 +
 ...ents-card-code-mdx-b8ba56226c3f22a1cd50.js |  1 +
 ...-customisation-mdx-b09b840bea7366669e84.js |  1 +
 ...nts-card-index-mdx-352fbad1dc2b65901a7d.js |  1 +
 ...ents-card-tabs-mdx-a3420096c837975e0721.js |  1 +
 ...-accessibility-mdx-85bf8a499b94a6020682.js |  1 +
 ...-checkbox-code-mdx-b55bb52441b6f2aaa262.js |  1 +
 ...-customisation-mdx-89fc13f983456262e82f.js |  1 +
 ...checkbox-index-mdx-87268f0ebf26c7581711.js |  1 +
 ...-checkbox-tabs-mdx-bf8fd04b07ef1ff2be21.js |  1 +
 ...-accessibility-mdx-6dc8a978256393ab3556.js |  1 +
 ...ie-consent-api-mdx-2f85b9ab59b456a272cb.js |  1 +
 ...e-consent-code-mdx-59226ca090fda1c505c3.js |  1 +
 ...-consent-index-mdx-e539e10bee02de9fe7af.js |  1 +
 ...e-consent-tabs-mdx-46255b8dbf76459e0c65.js |  1 +
 ...-accessibility-mdx-dfa81df2f8badb5be261.js |  1 +
 ...ate-input-code-mdx-5351cb0b41fba022b084.js |  1 +
 ...te-input-index-mdx-55b0753e837fbc90c993.js |  1 +
 ...ate-input-tabs-mdx-48b5a1f56d2f89619665.js |  1 +
 ...-accessibility-mdx-d372732094ab19775b42.js |  1 +
 ...ts-dialog-code-mdx-f12b1f7bfd7382b5d33b.js |  1 +
 ...-customisation-mdx-2f40bcfe758a28669b24.js |  1 +
 ...s-dialog-index-mdx-ecb967e43f7048fb128d.js |  1 +
 ...ts-dialog-tabs-mdx-72a4bd9691e003de9e05.js |  1 +
 ...-accessibility-mdx-fd916ac3793f5e79062f.js |  1 +
 ...-dropdown-code-mdx-20c39054bafa0f3a0f1c.js |  1 +
 ...-customisation-mdx-2804aba885c47e989972.js |  1 +
 ...dropdown-index-mdx-23f7572fdb6c20007d82.js |  1 +
 ...-dropdown-tabs-mdx-5386e0b7c1774dae3239.js |  1 +
 ...-accessibility-mdx-853e7c84d150d8d6b165.js |  1 +
 ...-fieldset-code-mdx-6de86d7d500160a87ae8.js |  1 +
 ...fieldset-index-mdx-1ee096092d1f6fa88f17.js |  1 +
 ...-fieldset-tabs-mdx-0bc05792c89bbb9ffb2b.js |  1 +
 ...-accessibility-mdx-cb5929d6e7acc9074e4a.js |  1 +
 ...ile-input-code-mdx-27937b20aa4ddfd28fc6.js |  1 +
 ...le-input-index-mdx-02335fc112a408ca1d0b.js |  1 +
 ...input-security-mdx-25028be6a8c6b2887220.js |  1 +
 ...ile-input-tabs-mdx-c6bbffabae8144a29e19.js |  1 +
 ...-accessibility-mdx-98232604165254f65c5b.js |  1 +
 ...ts-footer-code-mdx-55b9823f4a7f6567fb79.js |  1 +
 ...-customisation-mdx-7a9a78f8d1a538f63ad4.js |  1 +
 ...s-footer-index-mdx-3dfb5aa9719f31603352.js |  1 +
 ...ts-footer-tabs-mdx-04d6453ba70a5d91ca08.js |  1 +
 ...-accessibility-mdx-30f50becfde708c94cb6.js |  1 +
 ...ts-header-code-mdx-cddb16dd87adbbc7f3c6.js |  1 +
 ...s-header-index-mdx-977359c9187b2489f566.js |  1 +
 ...ts-header-tabs-mdx-e296284a31b64f02f630.js |  1 +
 ...-accessibility-mdx-d6db9703b8a1c4068b9e.js |  1 +
 ...ents-hero-code-mdx-09de62be2348ed264be4.js |  1 +
 ...-customisation-mdx-570db8e0c8d7e0d9a63a.js |  1 +
 ...nts-hero-index-mdx-0a1c95c57d7ddbbc7ea4.js |  1 +
 ...ents-hero-tabs-mdx-e2e494c73555e7efb725.js |  1 +
 ...-accessibility-mdx-25792d7ec08a56555a5c.js |  1 +
 ...highlight-code-mdx-336b7ef939e4e9856398.js |  1 +
 ...-customisation-mdx-e65d914e751283f4e684.js |  1 +
 ...ighlight-index-mdx-f899ecdb3e789b65f195.js |  1 +
 ...highlight-tabs-mdx-62b00cdc5af80915cf11.js |  1 +
 ...-accessibility-mdx-d647bce5e2ea82a6a8b0.js |  1 +
 ...ents-icon-code-mdx-6d62697d568f0841e2d8.js |  1 +
 ...-customisation-mdx-d3c4900073d9b3081b05.js |  1 +
 ...nts-icon-index-mdx-3ca1a10ae69d919facdc.js |  1 +
 ...ents-icon-tabs-mdx-b50236435e5bcca0d28b.js |  1 +
 ...-accessibility-mdx-14688330bea14d22ebe4.js |  1 +
 ...nts-koros-code-mdx-94b36bd444522e7e62ea.js |  1 +
 ...-customisation-mdx-7e6bc8d932947dc1d2b7.js |  1 +
 ...ts-koros-index-mdx-3c13cd869bcb5507d276.js |  1 +
 ...nts-koros-tabs-mdx-33cd1d9ccdfad6075f07.js |  1 +
 ...-accessibility-mdx-470a31f6af432d37a8e7.js |  1 +
 ...ents-link-code-mdx-b12bbc38300893378aeb.js |  1 +
 ...nts-link-index-mdx-ad8615f3fe019db7b0ff.js |  1 +
 ...ents-link-tabs-mdx-c19b97c7b74eaebb68de.js |  1 +
 ...-accessibility-mdx-e50ed38f2cae42e43c46.js |  1 +
 ...s-linkbox-code-mdx-be15f5a1db16db2f0902.js |  1 +
 ...-linkbox-index-mdx-b7dc38ddf301199aaeee.js |  1 +
 ...s-linkbox-tabs-mdx-05d110462d65a9cb1b85.js |  1 +
 ...-accessibility-mdx-babe224836b244e251f1.js |  1 +
 ...g-spinner-code-mdx-65191ad2cbd04d5e8349.js |  1 +
 ...-customisation-mdx-f30f95a548442fb1b82e.js |  1 +
 ...-spinner-index-mdx-18636b85d38f0830659e.js |  1 +
 ...g-spinner-tabs-mdx-c3d588c37579fbd35dfd.js |  1 +
 ...-accessibility-mdx-3445c03d9f5e2d4d239b.js |  1 +
 ...ents-logo-code-mdx-d0cdbd45f0d1a52e5a59.js |  1 +
 ...-customisation-mdx-3274e1826421da1ef866.js |  1 +
 ...nts-logo-index-mdx-5166603a8e5a241d0601.js |  1 +
 ...ents-logo-tabs-mdx-119154cafc54a421d304.js |  1 +
 ...-accessibility-mdx-258cc9b160dfc59efde1.js |  1 +
 ...ification-code-mdx-c3b30ea9e9636c4d0501.js |  1 +
 ...fication-index-mdx-0fbdbe9fb7787b697f58.js |  1 +
 ...ification-tabs-mdx-2bf54cf9a0316852189f.js |  1 +
 ...-accessibility-mdx-d24e3b3737341ad00370.js |  1 +
 ...ber-input-code-mdx-d1f7ea026176c4955c5a.js |  1 +
 ...er-input-index-mdx-98791155329a577e5e88.js |  1 +
 ...ber-input-tabs-mdx-3eadc8cc203869f43551.js |  1 +
 ...-accessibility-mdx-11d5627154c9c6a9d408.js |  1 +
 ...agination-code-mdx-8d0a5b2d0f615a61d2e5.js |  1 +
 ...-customisation-mdx-a62e3e65aef79bddea7c.js |  1 +
 ...gination-index-mdx-1731dbeb41318cdfdded.js |  1 +
 ...agination-tabs-mdx-9a722e4d8436c9376fa5.js |  1 +
 ...-accessibility-mdx-e5ade55fd3f84033da91.js |  1 +
 ...ord-input-code-mdx-95447e1fa1b962d32445.js |  1 +
 ...rd-input-index-mdx-b68f9f18b964f6b5f21d.js |  1 +
 ...input-security-mdx-96a4352b3d8e6114ee8d.js |  1 +
 ...ord-input-tabs-mdx-851cef695b43c7e90b26.js |  1 +
 ...-accessibility-mdx-c215ec57e23dfa8f9e9a.js |  1 +
 ...one-input-code-mdx-62f6c51179f66ba584a4.js |  1 +
 ...ne-input-index-mdx-54968bef4866d6aee90b.js |  1 +
 ...one-input-tabs-mdx-d648ebcc20832dba9301.js |  1 +
 ...-accessibility-mdx-8adc96e274231a4100e8.js |  1 +
 ...io-button-code-mdx-b0d613eb5f42eddf8af2.js |  1 +
 ...-customisation-mdx-d505420946831f1692f0.js |  1 +
 ...o-button-index-mdx-102fd9f1d4937e3879f6.js |  1 +
 ...io-button-tabs-mdx-b3cabd376f8765451c20.js |  1 +
 ...-accessibility-mdx-6a0bd2f56d0b6b0045dd.js |  1 +
 ...rch-input-code-mdx-e82316afb5b7ff03a913.js |  1 +
 ...ch-input-index-mdx-e3e961e1ed7141f5652f.js |  1 +
 ...rch-input-tabs-mdx-3feb0982dacb4376e011.js |  1 +
 ...-accessibility-mdx-5c398654d8a316a5ce75.js |  1 +
 ...ion-group-code-mdx-1ac1d57bdabaa673db84.js |  1 +
 ...on-group-index-mdx-f61a79e5815595bb210f.js |  1 +
 ...ion-group-tabs-mdx-fecc0d9ca66d7324e72b.js |  1 +
 ...-accessibility-mdx-1798eaf70cc8af6ecd78.js |  1 +
 ...avigation-code-mdx-fd7025e87ed55b429189.js |  1 +
 ...-customisation-mdx-e44dd3ada4a40fce64e6.js |  1 +
 ...vigation-index-mdx-6b0058724b5260487127.js |  1 +
 ...avigation-tabs-mdx-c26b05d39a47011f85ca.js |  1 +
 ...-accessibility-mdx-01089f21663f4019779e.js |  1 +
 ...tus-label-code-mdx-040c6e1eb351a22b76d0.js |  1 +
 ...us-label-index-mdx-ced499d8706f162fe755.js |  1 +
 ...tus-label-tabs-mdx-d8c239d36f6a193de0e1.js |  1 +
 ...-accessibility-mdx-b09ed3b674e32ffd3167.js |  1 +
 ...p-by-step-code-mdx-7852d84171a184ece306.js |  1 +
 ...-by-step-index-mdx-f333ef34817be266858a.js |  1 +
 ...p-by-step-tabs-mdx-786b11a2b8fcbd547796.js |  1 +
 ...-accessibility-mdx-13c4800e70fa24d2b836.js |  1 +
 ...s-stepper-code-mdx-c9939bc02af03f12bc15.js |  1 +
 ...-customisation-mdx-daa4feb96b55d6e1671a.js |  1 +
 ...-stepper-index-mdx-6ff34e81c1651e65531f.js |  1 +
 ...s-stepper-tabs-mdx-c15571dc8d9b7cd53380.js |  1 +
 ...-accessibility-mdx-1c7a19df24e5a59f47d3.js |  1 +
 ...nts-table-code-mdx-be0e6d2a8e9800302b59.js |  1 +
 ...-customisation-mdx-e2c837c267de3a745e6f.js |  1 +
 ...ts-table-index-mdx-87fc955581f4b14d0ded.js |  1 +
 ...nts-table-tabs-mdx-763625a9deea99710da9.js |  1 +
 ...-accessibility-mdx-f1a18c8969414ada9019.js |  1 +
 ...ents-tabs-code-mdx-4b171782325aadb7d4c7.js |  1 +
 ...-customisation-mdx-0059209907b7636e727a.js |  1 +
 ...nts-tabs-index-mdx-8782ff503ef92732b123.js |  1 +
 ...ents-tabs-tabs-mdx-cfa726333d859683b4a0.js |  1 +
 ...-accessibility-mdx-afcd8ceeaea9b34ab588.js |  1 +
 ...nents-tag-code-mdx-b967625ec20fe2894f94.js |  1 +
 ...-customisation-mdx-f1ff9dc9e9a41545d8d5.js |  1 +
 ...ents-tag-index-mdx-d6bb1662e2ba27e2632b.js |  1 +
 ...nents-tag-tabs-mdx-15c6e1e156d18d68fd24.js |  1 +
 ...-accessibility-mdx-364d7aa3269d4ef667f7.js |  1 +
 ...text-area-code-mdx-5b87d908305ccc103b0c.js |  1 +
 ...ext-area-index-mdx-cd72c17638193c051f15.js |  1 +
 ...text-area-tabs-mdx-539fb0ddf9270349e94f.js |  1 +
 ...-accessibility-mdx-e1395c517162e5b3f97c.js |  1 +
 ...ext-input-code-mdx-5b7c91fa9a15bda3673c.js |  1 +
 ...xt-input-index-mdx-8fa395ef09bc1151b6af.js |  1 +
 ...ext-input-tabs-mdx-11983b3b3153be014b29.js |  1 +
 ...-accessibility-mdx-0f511b6045e1df9fb7d5.js |  1 +
 ...ime-input-code-mdx-33b0f9ccf83f665a60fa.js |  1 +
 ...me-input-index-mdx-206b1227bcd550ed3586.js |  1 +
 ...ime-input-tabs-mdx-c00e66b91d296ca87027.js |  1 +
 ...-accessibility-mdx-9ee0e61d8f2ebcdd6b6b.js |  1 +
 ...le-button-code-mdx-37b09a6dd33ce1be5b49.js |  1 +
 ...-customisation-mdx-e9fc540ba000b22d3f0a.js |  1 +
 ...e-button-index-mdx-b9a9febc66e456514d0f.js |  1 +
 ...le-button-tabs-mdx-4194c23478e22682f5ee.js |  1 +
 ...-accessibility-mdx-feaf6711dd9ce70f939f.js |  1 +
 ...s-tooltip-code-mdx-750d33168d5ac1f44e2e.js |  1 +
 ...-tooltip-index-mdx-b6b32a144ad268de98cd.js |  1 +
 ...s-tooltip-tabs-mdx-d366b5790aae1902bc71.js |  1 +
 ...ets-icons-list-mdx-d056be11b6d5144d24be.js |  2 +
 ...st-mdx-d056be11b6d5144d24be.js.LICENSE.txt |  6 +++
 .../accordion/accessibility/index.html        |  2 +-
 .../accordion/customisation/index.html        |  2 +-
 .../components/accordion/tabs/index.html      |  2 +-
 .../components/breadcrumb/code/index.html     |  2 +-
 .../breadcrumb/customisation/index.html       |  2 +-
 .../components/breadcrumb/index.html          |  2 +-
 .../components/breadcrumb/tabs/index.html     |  2 +-
 .../buttons/accessibility/index.html          |  2 +-
 .../components/buttons/code/index.html        |  2 +-
 .../components/buttons/index.html             |  2 +-
 .../components/buttons/tabs/index.html        |  2 +-
 .../components/card/accessibility/index.html  |  2 +-
 .../components/card/customisation/index.html  |  2 +-
 .../components/card/tabs/index.html           |  2 +-
 .../checkbox/accessibility/index.html         |  2 +-
 .../components/checkbox/code/index.html       |  2 +-
 .../components/cookie-consent/code/index.html |  2 +-
 .../components/cookie-consent/index.html      |  2 +-
 .../dialog/accessibility/index.html           |  2 +-
 .../dialog/customisation/index.html           |  2 +-
 .../components/dialog/index.html              |  2 +-
 .../components/dialog/tabs/index.html         |  2 +-
 .../components/dropdown/code/index.html       |  2 +-
 .../dropdown/customisation/index.html         |  2 +-
 .../fieldset/accessibility/index.html         |  2 +-
 .../components/fieldset/code/index.html       |  2 +-
 .../components/file-input/code/index.html     |  2 +-
 .../footer/accessibility/index.html           |  2 +-
 .../footer/customisation/index.html           |  2 +-
 .../header/accessibility/index.html           |  2 +-
 .../components/hero/accessibility/index.html  |  2 +-
 .../components/hero/code/index.html           |  2 +-
 .../components/hero/customisation/index.html  |  2 +-
 .../components/hero/index.html                | 12 +++---
 .../components/hero/tabs/index.html           |  2 +-
 .../highlight/accessibility/index.html        |  2 +-
 .../components/highlight/code/index.html      |  2 +-
 .../highlight/customisation/index.html        |  2 +-
 .../components/highlight/index.html           | 16 ++++----
 .../components/highlight/tabs/index.html      |  2 +-
 .../components/icon/index.html                |  2 +-
 .../components/index.html                     |  2 +-
 .../components/linkbox/code/index.html        |  2 +-
 .../components/linkbox/index.html             |  2 +-
 .../loading-spinner/accessibility/index.html  |  2 +-
 .../components/notification/code/index.html   |  2 +-
 .../components/notification/index.html        |  2 +-
 .../components/notification/tabs/index.html   |  2 +-
 .../number-input/accessibility/index.html     |  2 +-
 .../components/number-input/code/index.html   |  2 +-
 .../components/number-input/index.html        |  2 +-
 .../components/number-input/tabs/index.html   |  2 +-
 .../password-input/accessibility/index.html   |  2 +-
 .../components/password-input/code/index.html |  2 +-
 .../components/password-input/index.html      |  2 +-
 .../components/password-input/tabs/index.html |  2 +-
 .../components/phone-input/code/index.html    |  2 +-
 .../components/phone-input/index.html         |  2 +-
 .../components/phone-input/tabs/index.html    |  2 +-
 .../components/search-input/code/index.html   |  2 +-
 .../components/search-input/index.html        |  2 +-
 .../components/search-input/tabs/index.html   |  2 +-
 .../selection-group/code/index.html           |  2 +-
 .../components/side-navigation/index.html     |  2 +-
 .../status-label/accessibility/index.html     |  2 +-
 .../components/status-label/code/index.html   |  2 +-
 .../components/status-label/tabs/index.html   |  2 +-
 .../step-by-step/accessibility/index.html     |  2 +-
 .../components/stepper/index.html             |  2 +-
 .../components/table/accessibility/index.html |  2 +-
 .../components/table/code/index.html          |  2 +-
 .../components/tabs/tabs/index.html           |  2 +-
 .../components/tag/accessibility/index.html   |  2 +-
 .../text-area/accessibility/index.html        |  2 +-
 .../text-input/accessibility/index.html       |  2 +-
 .../components/text-input/index.html          |  2 +-
 .../time-input/accessibility/index.html       |  2 +-
 .../tooltip/accessibility/index.html          |  2 +-
 .../components/tooltip/index.html             |  2 +-
 .../components/tooltip/tabs/index.html        |  2 +-
 .../design-tokens/breakpoints/index.html      |  2 +-
 .../design-tokens/colour/tabs/index.html      |  2 +-
 .../design-tokens/colour/tokens/index.html    |  2 +-
 .../design-tokens/spacing/index.html          |  2 +-
 .../design-tokens/spacing/tabs/index.html     |  2 +-
 .../design-tokens/spacing/tokens/index.html   |  2 +-
 .../design-tokens/typography/index.html       |  2 +-
 .../typography/tokens/index.html              |  2 +-
 .../guidelines/photography/index.html         |  2 +-
 .../visual-assets/favicon/index.html          |  2 +-
 .../foundation/visual-assets/icons/index.html |  2 +-
 .../foundation/visual-assets/logo/index.html  |  2 +-
 .../visual-assets/placeholders/index.html     |  2 +-
 .../visual-assets/wave-motifs/index.html      |  2 +-
 .../contributing/design/index.html            |  2 +-
 .../getting-started/index.html                |  2 +-
 .../tutorials/abstract-tutorial/index.html    |  2 +-
 .../tutorials/migrate-to-3.0.0/index.html     |  2 +-
 .../getting-started/versioning/index.html     |  2 +-
 .../patterns/cookies/basics/index.html        |  2 +-
 .../patterns/forms/form-building/index.html   |  2 +-
 .../patterns/forms/form-multi-page/index.html |  2 +-
 .../patterns/index.html                       |  2 +-
 .../webpack-runtime-fff134004fb7c0f7023b.js   |  1 +
 302 files changed, 364 insertions(+), 118 deletions(-)
 create mode 100644 docs/hds-1817-stepbystep-docs/app-20033eb70b2caf24e830.js
 create mode 100644 docs/hds-1817-stepbystep-docs/app-20033eb70b2caf24e830.js.LICENSE.txt
 create mode 100644 docs/hds-1817-stepbystep-docs/b123bb55-73388f463f51189e5870.js
 create mode 100644 docs/hds-1817-stepbystep-docs/b123bb55-73388f463f51189e5870.js.LICENSE.txt
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-accordion-accessibility-mdx-2d600c846f83f5259de1.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-accordion-code-mdx-ee2418ec85b8653bba26.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-accordion-customisation-mdx-57e8811d082cf9e65d84.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-accordion-index-mdx-fd8a3c41cd86641ad2f9.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-accordion-tabs-mdx-964ab68c8cbe69db4a36.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-breadcrumb-accessibility-mdx-c29db5ea73fef9ffbad7.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-breadcrumb-code-mdx-823b5b268a1e4b6c21df.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-breadcrumb-customisation-mdx-056818ca5baea2516dc3.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-breadcrumb-index-mdx-679117619f6885e3d2fc.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-breadcrumb-tabs-mdx-fee2c2763290a354e310.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-buttons-accessibility-mdx-26f0df0885e580f26a39.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-buttons-code-mdx-fb6949b2d38e1b97b673.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-buttons-customisation-mdx-aad900d3f10e2d745c68.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-buttons-index-mdx-87b2da23a0923d27cfe5.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-buttons-tabs-mdx-cd46fdc2009425fae19e.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-card-accessibility-mdx-3bb0e67c26ae23674fc2.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-card-code-mdx-b8ba56226c3f22a1cd50.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-card-customisation-mdx-b09b840bea7366669e84.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-card-index-mdx-352fbad1dc2b65901a7d.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-card-tabs-mdx-a3420096c837975e0721.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-checkbox-accessibility-mdx-85bf8a499b94a6020682.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-checkbox-code-mdx-b55bb52441b6f2aaa262.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-checkbox-customisation-mdx-89fc13f983456262e82f.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-checkbox-index-mdx-87268f0ebf26c7581711.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-checkbox-tabs-mdx-bf8fd04b07ef1ff2be21.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-cookie-consent-accessibility-mdx-6dc8a978256393ab3556.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-cookie-consent-api-mdx-2f85b9ab59b456a272cb.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-cookie-consent-code-mdx-59226ca090fda1c505c3.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-cookie-consent-index-mdx-e539e10bee02de9fe7af.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-cookie-consent-tabs-mdx-46255b8dbf76459e0c65.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-date-input-accessibility-mdx-dfa81df2f8badb5be261.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-date-input-code-mdx-5351cb0b41fba022b084.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-date-input-index-mdx-55b0753e837fbc90c993.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-date-input-tabs-mdx-48b5a1f56d2f89619665.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-dialog-accessibility-mdx-d372732094ab19775b42.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-dialog-code-mdx-f12b1f7bfd7382b5d33b.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-dialog-customisation-mdx-2f40bcfe758a28669b24.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-dialog-index-mdx-ecb967e43f7048fb128d.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-dialog-tabs-mdx-72a4bd9691e003de9e05.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-dropdown-accessibility-mdx-fd916ac3793f5e79062f.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-dropdown-code-mdx-20c39054bafa0f3a0f1c.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-dropdown-customisation-mdx-2804aba885c47e989972.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-dropdown-index-mdx-23f7572fdb6c20007d82.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-dropdown-tabs-mdx-5386e0b7c1774dae3239.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-fieldset-accessibility-mdx-853e7c84d150d8d6b165.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-fieldset-code-mdx-6de86d7d500160a87ae8.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-fieldset-index-mdx-1ee096092d1f6fa88f17.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-fieldset-tabs-mdx-0bc05792c89bbb9ffb2b.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-file-input-accessibility-mdx-cb5929d6e7acc9074e4a.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-file-input-code-mdx-27937b20aa4ddfd28fc6.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-file-input-index-mdx-02335fc112a408ca1d0b.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-file-input-security-mdx-25028be6a8c6b2887220.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-file-input-tabs-mdx-c6bbffabae8144a29e19.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-footer-accessibility-mdx-98232604165254f65c5b.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-footer-code-mdx-55b9823f4a7f6567fb79.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-footer-customisation-mdx-7a9a78f8d1a538f63ad4.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-footer-index-mdx-3dfb5aa9719f31603352.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-footer-tabs-mdx-04d6453ba70a5d91ca08.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-header-accessibility-mdx-30f50becfde708c94cb6.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-header-code-mdx-cddb16dd87adbbc7f3c6.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-header-index-mdx-977359c9187b2489f566.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-header-tabs-mdx-e296284a31b64f02f630.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-hero-accessibility-mdx-d6db9703b8a1c4068b9e.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-hero-code-mdx-09de62be2348ed264be4.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-hero-customisation-mdx-570db8e0c8d7e0d9a63a.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-hero-index-mdx-0a1c95c57d7ddbbc7ea4.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-hero-tabs-mdx-e2e494c73555e7efb725.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-highlight-accessibility-mdx-25792d7ec08a56555a5c.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-highlight-code-mdx-336b7ef939e4e9856398.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-highlight-customisation-mdx-e65d914e751283f4e684.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-highlight-index-mdx-f899ecdb3e789b65f195.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-highlight-tabs-mdx-62b00cdc5af80915cf11.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-icon-accessibility-mdx-d647bce5e2ea82a6a8b0.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-icon-code-mdx-6d62697d568f0841e2d8.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-icon-customisation-mdx-d3c4900073d9b3081b05.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-icon-index-mdx-3ca1a10ae69d919facdc.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-icon-tabs-mdx-b50236435e5bcca0d28b.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-koros-accessibility-mdx-14688330bea14d22ebe4.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-koros-code-mdx-94b36bd444522e7e62ea.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-koros-customisation-mdx-7e6bc8d932947dc1d2b7.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-koros-index-mdx-3c13cd869bcb5507d276.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-koros-tabs-mdx-33cd1d9ccdfad6075f07.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-link-accessibility-mdx-470a31f6af432d37a8e7.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-link-code-mdx-b12bbc38300893378aeb.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-link-index-mdx-ad8615f3fe019db7b0ff.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-link-tabs-mdx-c19b97c7b74eaebb68de.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-linkbox-accessibility-mdx-e50ed38f2cae42e43c46.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-linkbox-code-mdx-be15f5a1db16db2f0902.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-linkbox-index-mdx-b7dc38ddf301199aaeee.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-linkbox-tabs-mdx-05d110462d65a9cb1b85.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-loading-spinner-accessibility-mdx-babe224836b244e251f1.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-loading-spinner-code-mdx-65191ad2cbd04d5e8349.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-loading-spinner-customisation-mdx-f30f95a548442fb1b82e.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-loading-spinner-index-mdx-18636b85d38f0830659e.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-loading-spinner-tabs-mdx-c3d588c37579fbd35dfd.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-logo-accessibility-mdx-3445c03d9f5e2d4d239b.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-logo-code-mdx-d0cdbd45f0d1a52e5a59.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-logo-customisation-mdx-3274e1826421da1ef866.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-logo-index-mdx-5166603a8e5a241d0601.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-logo-tabs-mdx-119154cafc54a421d304.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-notification-accessibility-mdx-258cc9b160dfc59efde1.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-notification-code-mdx-c3b30ea9e9636c4d0501.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-notification-index-mdx-0fbdbe9fb7787b697f58.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-notification-tabs-mdx-2bf54cf9a0316852189f.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-number-input-accessibility-mdx-d24e3b3737341ad00370.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-number-input-code-mdx-d1f7ea026176c4955c5a.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-number-input-index-mdx-98791155329a577e5e88.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-number-input-tabs-mdx-3eadc8cc203869f43551.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-pagination-accessibility-mdx-11d5627154c9c6a9d408.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-pagination-code-mdx-8d0a5b2d0f615a61d2e5.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-pagination-customisation-mdx-a62e3e65aef79bddea7c.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-pagination-index-mdx-1731dbeb41318cdfdded.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-pagination-tabs-mdx-9a722e4d8436c9376fa5.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-password-input-accessibility-mdx-e5ade55fd3f84033da91.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-password-input-code-mdx-95447e1fa1b962d32445.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-password-input-index-mdx-b68f9f18b964f6b5f21d.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-password-input-security-mdx-96a4352b3d8e6114ee8d.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-password-input-tabs-mdx-851cef695b43c7e90b26.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-phone-input-accessibility-mdx-c215ec57e23dfa8f9e9a.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-phone-input-code-mdx-62f6c51179f66ba584a4.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-phone-input-index-mdx-54968bef4866d6aee90b.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-phone-input-tabs-mdx-d648ebcc20832dba9301.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-radio-button-accessibility-mdx-8adc96e274231a4100e8.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-radio-button-code-mdx-b0d613eb5f42eddf8af2.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-radio-button-customisation-mdx-d505420946831f1692f0.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-radio-button-index-mdx-102fd9f1d4937e3879f6.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-radio-button-tabs-mdx-b3cabd376f8765451c20.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-search-input-accessibility-mdx-6a0bd2f56d0b6b0045dd.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-search-input-code-mdx-e82316afb5b7ff03a913.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-search-input-index-mdx-e3e961e1ed7141f5652f.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-search-input-tabs-mdx-3feb0982dacb4376e011.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-selection-group-accessibility-mdx-5c398654d8a316a5ce75.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-selection-group-code-mdx-1ac1d57bdabaa673db84.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-selection-group-index-mdx-f61a79e5815595bb210f.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-selection-group-tabs-mdx-fecc0d9ca66d7324e72b.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-side-navigation-accessibility-mdx-1798eaf70cc8af6ecd78.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-side-navigation-code-mdx-fd7025e87ed55b429189.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-side-navigation-customisation-mdx-e44dd3ada4a40fce64e6.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-side-navigation-index-mdx-6b0058724b5260487127.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-side-navigation-tabs-mdx-c26b05d39a47011f85ca.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-status-label-accessibility-mdx-01089f21663f4019779e.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-status-label-code-mdx-040c6e1eb351a22b76d0.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-status-label-index-mdx-ced499d8706f162fe755.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-status-label-tabs-mdx-d8c239d36f6a193de0e1.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-step-by-step-accessibility-mdx-b09ed3b674e32ffd3167.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-step-by-step-code-mdx-7852d84171a184ece306.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-step-by-step-index-mdx-f333ef34817be266858a.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-step-by-step-tabs-mdx-786b11a2b8fcbd547796.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-stepper-accessibility-mdx-13c4800e70fa24d2b836.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-stepper-code-mdx-c9939bc02af03f12bc15.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-stepper-customisation-mdx-daa4feb96b55d6e1671a.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-stepper-index-mdx-6ff34e81c1651e65531f.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-stepper-tabs-mdx-c15571dc8d9b7cd53380.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-table-accessibility-mdx-1c7a19df24e5a59f47d3.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-table-code-mdx-be0e6d2a8e9800302b59.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-table-customisation-mdx-e2c837c267de3a745e6f.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-table-index-mdx-87fc955581f4b14d0ded.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-table-tabs-mdx-763625a9deea99710da9.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-tabs-accessibility-mdx-f1a18c8969414ada9019.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-tabs-code-mdx-4b171782325aadb7d4c7.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-tabs-customisation-mdx-0059209907b7636e727a.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-tabs-index-mdx-8782ff503ef92732b123.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-tabs-tabs-mdx-cfa726333d859683b4a0.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-tag-accessibility-mdx-afcd8ceeaea9b34ab588.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-tag-code-mdx-b967625ec20fe2894f94.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-tag-customisation-mdx-f1ff9dc9e9a41545d8d5.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-tag-index-mdx-d6bb1662e2ba27e2632b.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-tag-tabs-mdx-15c6e1e156d18d68fd24.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-text-area-accessibility-mdx-364d7aa3269d4ef667f7.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-text-area-code-mdx-5b87d908305ccc103b0c.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-text-area-index-mdx-cd72c17638193c051f15.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-text-area-tabs-mdx-539fb0ddf9270349e94f.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-text-input-accessibility-mdx-e1395c517162e5b3f97c.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-text-input-code-mdx-5b7c91fa9a15bda3673c.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-text-input-index-mdx-8fa395ef09bc1151b6af.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-text-input-tabs-mdx-11983b3b3153be014b29.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-time-input-accessibility-mdx-0f511b6045e1df9fb7d5.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-time-input-code-mdx-33b0f9ccf83f665a60fa.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-time-input-index-mdx-206b1227bcd550ed3586.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-time-input-tabs-mdx-c00e66b91d296ca87027.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-toggle-button-accessibility-mdx-9ee0e61d8f2ebcdd6b6b.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-toggle-button-code-mdx-37b09a6dd33ce1be5b49.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-toggle-button-customisation-mdx-e9fc540ba000b22d3f0a.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-toggle-button-index-mdx-b9a9febc66e456514d0f.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-toggle-button-tabs-mdx-4194c23478e22682f5ee.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-tooltip-accessibility-mdx-feaf6711dd9ce70f939f.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-tooltip-code-mdx-750d33168d5ac1f44e2e.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-tooltip-index-mdx-b6b32a144ad268de98cd.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-components-tooltip-tabs-mdx-d366b5790aae1902bc71.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-foundation-visual-assets-icons-list-mdx-d056be11b6d5144d24be.js
 create mode 100644 docs/hds-1817-stepbystep-docs/component---src-docs-foundation-visual-assets-icons-list-mdx-d056be11b6d5144d24be.js.LICENSE.txt
 create mode 100644 docs/hds-1817-stepbystep-docs/webpack-runtime-fff134004fb7c0f7023b.js

diff --git a/docs/hds-1817-stepbystep-docs/about/index.html b/docs/hds-1817-stepbystep-docs/about/index.html
index b5d3c428f20..66dea74eff5 100644
--- a/docs/hds-1817-stepbystep-docs/about/index.html
+++ b/docs/hds-1817-stepbystep-docs/about/index.html
@@ -69,7 +69,7 @@ <h3 id="feature-requests" style="position:relative" class="page-heading-3 headin
 <h3 id="contributing" style="position:relative" class="page-heading-3 heading-m">Contributing<a href="#contributing" aria-label="contributing permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h3>
 <p>See <a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute">Contributing.</a></p>
 <h2 id="hds-v1-documentation" style="position:relative" class="page-heading-2 heading-l">HDS V1 documentation<a href="#hds-v1-documentation" aria-label="hds v1 documentation permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h2>
-<p>Looking for HDS V1 documentation? Find it here: <a aria-label="HDS V1 documentation. Opens in a new tab. Opens a different website." class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="https://hds.hel.fi/v1" target="_blank" rel="noopener">HDS V1 documentation<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Link-module_icon__3ReCc link_icon__i_HqN Link-module_verticalAlignMediumIcon__12PVa link_vertical-align-medium-icon__3IWi1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="link-external" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z" fill="currentColor"></path></svg></a>.</p></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-120" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-120)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a aria-current="page" class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<p>Looking for HDS V1 documentation? Find it here: <a aria-label="HDS V1 documentation. Opens in a new tab. Opens a different website." class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="https://hds.hel.fi/v1" target="_blank" rel="noopener">HDS V1 documentation<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Link-module_icon__3ReCc link_icon__i_HqN Link-module_verticalAlignMediumIcon__12PVa link_vertical-align-medium-icon__3IWi1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="link-external" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z" fill="currentColor"></path></svg></a>.</p></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-122" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-122)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a aria-current="page" class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/about/releases/index.html b/docs/hds-1817-stepbystep-docs/about/releases/index.html
index 07940ca6b4d..a58bd7a0a76 100644
--- a/docs/hds-1817-stepbystep-docs/about/releases/index.html
+++ b/docs/hds-1817-stepbystep-docs/about/releases/index.html
@@ -85,7 +85,7 @@ <h2 id="latest-release" style="position:relative" class="page-heading-2 heading-
 </li>
 </ul>
 <h2 id="all-previous-releases" style="position:relative" class="page-heading-2 heading-l">All previous releases<a href="#all-previous-releases" aria-label="all previous releases permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h2>
-<p>See previous releases and their release notes in <a aria-label="GitHub . Opens in a new tab. Opens a different website." class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="https://github.com/City-of-Helsinki/helsinki-design-system/releases" target="_blank" rel="noopener">GitHub <svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Link-module_icon__3ReCc link_icon__i_HqN Link-module_verticalAlignMediumIcon__12PVa link_vertical-align-medium-icon__3IWi1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="link-external" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z" fill="currentColor"></path></svg></a></p></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-118" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-118)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<p>See previous releases and their release notes in <a aria-label="GitHub . Opens in a new tab. Opens a different website." class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="https://github.com/City-of-Helsinki/helsinki-design-system/releases" target="_blank" rel="noopener">GitHub <svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Link-module_icon__3ReCc link_icon__i_HqN Link-module_verticalAlignMediumIcon__12PVa link_vertical-align-medium-icon__3IWi1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="link-external" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z" fill="currentColor"></path></svg></a></p></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-117" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-117)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/about/resources/index.html b/docs/hds-1817-stepbystep-docs/about/resources/index.html
index 0d09d0d2a2f..64e734cdf0f 100644
--- a/docs/hds-1817-stepbystep-docs/about/resources/index.html
+++ b/docs/hds-1817-stepbystep-docs/about/resources/index.html
@@ -115,7 +115,7 @@ <h2 id="hds-repositories" style="position:relative" class="page-heading-2 headin
 <li>
 <a aria-label="HDS Documentation site. Opens a different website." class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/site">HDS Documentation site<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Link-module_icon__3ReCc link_icon__i_HqN Link-module_verticalAlignMediumIcon__12PVa link_vertical-align-medium-icon__3IWi1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="link-external" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z" fill="currentColor"></path></svg></a>
 </li>
-</ul></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-116" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-116)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+</ul></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-118" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-118)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/app-20033eb70b2caf24e830.js b/docs/hds-1817-stepbystep-docs/app-20033eb70b2caf24e830.js
new file mode 100644
index 00000000000..d7d51bb4470
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/app-20033eb70b2caf24e830.js
@@ -0,0 +1,8 @@
+/*! For license information please see app-20033eb70b2caf24e830.js.LICENSE.txt */
+(self.webpackChunksite=self.webpackChunksite||[]).push([[2143],{62671:function(e,t,n){"use strict";e=n.nmd(e);const a=n(27821),r=(e,t)=>function(){return`[${e.apply(a,arguments)+t}m`},i=(e,t)=>function(){const n=e.apply(a,arguments);return`[${38+t};5;${n}m`},o=(e,t)=>function(){const n=e.apply(a,arguments);return`[${38+t};2;${n[0]};${n[1]};${n[2]}m`};Object.defineProperty(e,"exports",{enumerable:!0,get:function(){const e=new Map,t={modifier:{reset:[0,0],bold:[1,22],dim:[2,22],italic:[3,23],underline:[4,24],inverse:[7,27],hidden:[8,28],strikethrough:[9,29]},color:{black:[30,39],red:[31,39],green:[32,39],yellow:[33,39],blue:[34,39],magenta:[35,39],cyan:[36,39],white:[37,39],gray:[90,39],redBright:[91,39],greenBright:[92,39],yellowBright:[93,39],blueBright:[94,39],magentaBright:[95,39],cyanBright:[96,39],whiteBright:[97,39]},bgColor:{bgBlack:[40,49],bgRed:[41,49],bgGreen:[42,49],bgYellow:[43,49],bgBlue:[44,49],bgMagenta:[45,49],bgCyan:[46,49],bgWhite:[47,49],bgBlackBright:[100,49],bgRedBright:[101,49],bgGreenBright:[102,49],bgYellowBright:[103,49],bgBlueBright:[104,49],bgMagentaBright:[105,49],bgCyanBright:[106,49],bgWhiteBright:[107,49]}};t.color.grey=t.color.gray;for(const a of Object.keys(t)){const n=t[a];for(const a of Object.keys(n)){const r=n[a];t[a]={open:`[${r[0]}m`,close:`[${r[1]}m`},n[a]=t[a],e.set(r[0],r[1])}Object.defineProperty(t,a,{value:n,enumerable:!1}),Object.defineProperty(t,"codes",{value:e,enumerable:!1})}const n=e=>e,d=(e,t,n)=>[e,t,n];t.color.close="",t.bgColor.close="",t.color.ansi={ansi:r(n,0)},t.color.ansi256={ansi256:i(n,0)},t.color.ansi16m={rgb:o(d,0)},t.bgColor.ansi={ansi:r(n,10)},t.bgColor.ansi256={ansi256:i(n,10)},t.bgColor.ansi16m={rgb:o(d,10)};for(let s of Object.keys(a)){if("object"!=typeof a[s])continue;const e=a[s];"ansi16"===s&&(s="ansi"),"ansi16"in e&&(t.color.ansi[s]=r(e.ansi16,0),t.bgColor.ansi[s]=r(e.ansi16,10)),"ansi256"in e&&(t.color.ansi256[s]=i(e.ansi256,0),t.bgColor.ansi256[s]=i(e.ansi256,10)),"rgb"in e&&(t.color.ansi16m[s]=o(e.rgb,0),t.bgColor.ansi16m[s]=o(e.rgb,10))}return t}})},50949:function(e,t,n){"use strict";var a=n(27061);const r=n(29873),i=n(62671),o=n(55805).stdout,d=n(99126),s="win32"===a.platform&&!({}.TERM||"").toLowerCase().startsWith("xterm"),c=["ansi","ansi","ansi256","ansi16m"],u=new Set(["gray"]),l=Object.create(null);function g(e,t){t=t||{};const n=o?o.level:0;e.level=void 0===t.level?n:t.level,e.enabled="enabled"in t?t.enabled:e.level>0}function h(e){if(!this||!(this instanceof h)||this.template){const t={};return g(t,e),t.template=function(){const e=[].slice.call(arguments);return R.apply(null,[t.template].concat(e))},Object.setPrototypeOf(t,h.prototype),Object.setPrototypeOf(t.template,t),t.template.constructor=h,t.template}g(this,e)}s&&(i.blue.open="");for(const b of Object.keys(i))i[b].closeRe=new RegExp(r(i[b].close),"g"),l[b]={get(){const e=i[b];return p.call(this,this._styles?this._styles.concat(e):[e],this._empty,b)}};l.visible={get(){return p.call(this,this._styles||[],!0,"visible")}},i.color.closeRe=new RegExp(r(i.color.close),"g");for(const b of Object.keys(i.color.ansi))u.has(b)||(l[b]={get(){const e=this.level;return function(){const t={open:i.color[c[e]][b].apply(null,arguments),close:i.color.close,closeRe:i.color.closeRe};return p.call(this,this._styles?this._styles.concat(t):[t],this._empty,b)}}});i.bgColor.closeRe=new RegExp(r(i.bgColor.close),"g");for(const b of Object.keys(i.bgColor.ansi)){if(u.has(b))continue;l["bg"+b[0].toUpperCase()+b.slice(1)]={get(){const e=this.level;return function(){const t={open:i.bgColor[c[e]][b].apply(null,arguments),close:i.bgColor.close,closeRe:i.bgColor.closeRe};return p.call(this,this._styles?this._styles.concat(t):[t],this._empty,b)}}}}const f=Object.defineProperties((()=>{}),l);function p(e,t,n){const a=function(){return m.apply(a,arguments)};a._styles=e,a._empty=t;const r=this;return Object.defineProperty(a,"level",{enumerable:!0,get(){return r.level},set(e){r.level=e}}),Object.defineProperty(a,"enabled",{enumerable:!0,get(){return r.enabled},set(e){r.enabled=e}}),a.hasGrey=this.hasGrey||"gray"===n||"grey"===n,a.__proto__=f,a}function m(){const e=arguments,t=e.length;let n=String(arguments[0]);if(0===t)return"";if(t>1)for(let r=1;r<t;r++)n+=" "+e[r];if(!this.enabled||this.level<=0||!n)return this._empty?"":n;const a=i.dim.open;s&&this.hasGrey&&(i.dim.open="");for(const r of this._styles.slice().reverse())n=r.open+n.replace(r.closeRe,r.open)+r.close,n=n.replace(/\r?\n/g,`${r.close}$&${r.open}`);return i.dim.open=a,n}function R(e,t){if(!Array.isArray(t))return[].slice.call(arguments,1).join(" ");const n=[].slice.call(arguments,2),a=[t.raw[0]];for(let r=1;r<t.length;r++)a.push(String(n[r-1]).replace(/[{}\\]/g,"\\$&")),a.push(String(t.raw[r]));return d(e,a.join(""))}Object.defineProperties(h.prototype,l),e.exports=h(),e.exports.supportsColor=o,e.exports.default=e.exports},99126:function(e){"use strict";const t=/(?:\\(u[a-f\d]{4}|x[a-f\d]{2}|.))|(?:\{(~)?(\w+(?:\([^)]*\))?(?:\.\w+(?:\([^)]*\))?)*)(?:[ \t]|(?=\r?\n)))|(\})|((?:.|[\r\n\f])+?)/gi,n=/(?:^|\.)(\w+)(?:\(([^)]*)\))?/g,a=/^(['"])((?:\\.|(?!\1)[^\\])*)\1$/,r=/\\(u[a-f\d]{4}|x[a-f\d]{2}|.)|([^\\])/gi,i=new Map([["n","\n"],["r","\r"],["t","\t"],["b","\b"],["f","\f"],["v","\v"],["0","\0"],["\\","\\"],["e",""],["a",""]]);function o(e){return"u"===e[0]&&5===e.length||"x"===e[0]&&3===e.length?String.fromCharCode(parseInt(e.slice(1),16)):i.get(e)||e}function d(e,t){const n=[],i=t.trim().split(/\s*,\s*/g);let d;for(const s of i)if(isNaN(s)){if(!(d=s.match(a)))throw new Error(`Invalid Chalk template style argument: ${s} (in style '${e}')`);n.push(d[2].replace(r,((e,t,n)=>t?o(t):n)))}else n.push(Number(s));return n}function s(e){n.lastIndex=0;const t=[];let a;for(;null!==(a=n.exec(e));){const e=a[1];if(a[2]){const n=d(e,a[2]);t.push([e].concat(n))}else t.push([e])}return t}function c(e,t){const n={};for(const r of t)for(const e of r.styles)n[e[0]]=r.inverse?null:e.slice(1);let a=e;for(const r of Object.keys(n))if(Array.isArray(n[r])){if(!(r in a))throw new Error(`Unknown Chalk style: ${r}`);a=n[r].length>0?a[r].apply(a,n[r]):a[r]}return a}e.exports=(e,n)=>{const a=[],r=[];let i=[];if(n.replace(t,((t,n,d,u,l,g)=>{if(n)i.push(o(n));else if(u){const t=i.join("");i=[],r.push(0===a.length?t:c(e,a)(t)),a.push({inverse:d,styles:s(u)})}else if(l){if(0===a.length)throw new Error("Found extraneous } in Chalk template literal");r.push(c(e,a)(i.join(""))),i=[],a.pop()}else i.push(g)})),r.push(i.join("")),a.length>0){const e=`Chalk template literal is missing ${a.length} closing bracket${1===a.length?"":"s"} (\`}\`)`;throw new Error(e)}return r.join("")}},23691:function(e,t,n){var a=n(58859),r={};for(var i in a)a.hasOwnProperty(i)&&(r[a[i]]=i);var o=e.exports={rgb:{channels:3,labels:"rgb"},hsl:{channels:3,labels:"hsl"},hsv:{channels:3,labels:"hsv"},hwb:{channels:3,labels:"hwb"},cmyk:{channels:4,labels:"cmyk"},xyz:{channels:3,labels:"xyz"},lab:{channels:3,labels:"lab"},lch:{channels:3,labels:"lch"},hex:{channels:1,labels:["hex"]},keyword:{channels:1,labels:["keyword"]},ansi16:{channels:1,labels:["ansi16"]},ansi256:{channels:1,labels:["ansi256"]},hcg:{channels:3,labels:["h","c","g"]},apple:{channels:3,labels:["r16","g16","b16"]},gray:{channels:1,labels:["gray"]}};for(var d in o)if(o.hasOwnProperty(d)){if(!("channels"in o[d]))throw new Error("missing channels property: "+d);if(!("labels"in o[d]))throw new Error("missing channel labels property: "+d);if(o[d].labels.length!==o[d].channels)throw new Error("channel and label counts mismatch: "+d);var s=o[d].channels,c=o[d].labels;delete o[d].channels,delete o[d].labels,Object.defineProperty(o[d],"channels",{value:s}),Object.defineProperty(o[d],"labels",{value:c})}o.rgb.hsl=function(e){var t,n,a=e[0]/255,r=e[1]/255,i=e[2]/255,o=Math.min(a,r,i),d=Math.max(a,r,i),s=d-o;return d===o?t=0:a===d?t=(r-i)/s:r===d?t=2+(i-a)/s:i===d&&(t=4+(a-r)/s),(t=Math.min(60*t,360))<0&&(t+=360),n=(o+d)/2,[t,100*(d===o?0:n<=.5?s/(d+o):s/(2-d-o)),100*n]},o.rgb.hsv=function(e){var t,n,a,r,i,o=e[0]/255,d=e[1]/255,s=e[2]/255,c=Math.max(o,d,s),u=c-Math.min(o,d,s),l=function(e){return(c-e)/6/u+.5};return 0===u?r=i=0:(i=u/c,t=l(o),n=l(d),a=l(s),o===c?r=a-n:d===c?r=1/3+t-a:s===c&&(r=2/3+n-t),r<0?r+=1:r>1&&(r-=1)),[360*r,100*i,100*c]},o.rgb.hwb=function(e){var t=e[0],n=e[1],a=e[2];return[o.rgb.hsl(e)[0],100*(1/255*Math.min(t,Math.min(n,a))),100*(a=1-1/255*Math.max(t,Math.max(n,a)))]},o.rgb.cmyk=function(e){var t,n=e[0]/255,a=e[1]/255,r=e[2]/255;return[100*((1-n-(t=Math.min(1-n,1-a,1-r)))/(1-t)||0),100*((1-a-t)/(1-t)||0),100*((1-r-t)/(1-t)||0),100*t]},o.rgb.keyword=function(e){var t=r[e];if(t)return t;var n,i,o,d=1/0;for(var s in a)if(a.hasOwnProperty(s)){var c=a[s],u=(i=e,o=c,Math.pow(i[0]-o[0],2)+Math.pow(i[1]-o[1],2)+Math.pow(i[2]-o[2],2));u<d&&(d=u,n=s)}return n},o.keyword.rgb=function(e){return a[e]},o.rgb.xyz=function(e){var t=e[0]/255,n=e[1]/255,a=e[2]/255;return[100*(.4124*(t=t>.04045?Math.pow((t+.055)/1.055,2.4):t/12.92)+.3576*(n=n>.04045?Math.pow((n+.055)/1.055,2.4):n/12.92)+.1805*(a=a>.04045?Math.pow((a+.055)/1.055,2.4):a/12.92)),100*(.2126*t+.7152*n+.0722*a),100*(.0193*t+.1192*n+.9505*a)]},o.rgb.lab=function(e){var t=o.rgb.xyz(e),n=t[0],a=t[1],r=t[2];return a/=100,r/=108.883,n=(n/=95.047)>.008856?Math.pow(n,1/3):7.787*n+16/116,[116*(a=a>.008856?Math.pow(a,1/3):7.787*a+16/116)-16,500*(n-a),200*(a-(r=r>.008856?Math.pow(r,1/3):7.787*r+16/116))]},o.hsl.rgb=function(e){var t,n,a,r,i,o=e[0]/360,d=e[1]/100,s=e[2]/100;if(0===d)return[i=255*s,i,i];t=2*s-(n=s<.5?s*(1+d):s+d-s*d),r=[0,0,0];for(var c=0;c<3;c++)(a=o+1/3*-(c-1))<0&&a++,a>1&&a--,i=6*a<1?t+6*(n-t)*a:2*a<1?n:3*a<2?t+(n-t)*(2/3-a)*6:t,r[c]=255*i;return r},o.hsl.hsv=function(e){var t=e[0],n=e[1]/100,a=e[2]/100,r=n,i=Math.max(a,.01);return n*=(a*=2)<=1?a:2-a,r*=i<=1?i:2-i,[t,100*(0===a?2*r/(i+r):2*n/(a+n)),100*((a+n)/2)]},o.hsv.rgb=function(e){var t=e[0]/60,n=e[1]/100,a=e[2]/100,r=Math.floor(t)%6,i=t-Math.floor(t),o=255*a*(1-n),d=255*a*(1-n*i),s=255*a*(1-n*(1-i));switch(a*=255,r){case 0:return[a,s,o];case 1:return[d,a,o];case 2:return[o,a,s];case 3:return[o,d,a];case 4:return[s,o,a];case 5:return[a,o,d]}},o.hsv.hsl=function(e){var t,n,a,r=e[0],i=e[1]/100,o=e[2]/100,d=Math.max(o,.01);return a=(2-i)*o,n=i*d,[r,100*(n=(n/=(t=(2-i)*d)<=1?t:2-t)||0),100*(a/=2)]},o.hwb.rgb=function(e){var t,n,a,r,i,o,d,s=e[0]/360,c=e[1]/100,u=e[2]/100,l=c+u;switch(l>1&&(c/=l,u/=l),a=6*s-(t=Math.floor(6*s)),0!=(1&t)&&(a=1-a),r=c+a*((n=1-u)-c),t){default:case 6:case 0:i=n,o=r,d=c;break;case 1:i=r,o=n,d=c;break;case 2:i=c,o=n,d=r;break;case 3:i=c,o=r,d=n;break;case 4:i=r,o=c,d=n;break;case 5:i=n,o=c,d=r}return[255*i,255*o,255*d]},o.cmyk.rgb=function(e){var t=e[0]/100,n=e[1]/100,a=e[2]/100,r=e[3]/100;return[255*(1-Math.min(1,t*(1-r)+r)),255*(1-Math.min(1,n*(1-r)+r)),255*(1-Math.min(1,a*(1-r)+r))]},o.xyz.rgb=function(e){var t,n,a,r=e[0]/100,i=e[1]/100,o=e[2]/100;return n=-.9689*r+1.8758*i+.0415*o,a=.0557*r+-.204*i+1.057*o,t=(t=3.2406*r+-1.5372*i+-.4986*o)>.0031308?1.055*Math.pow(t,1/2.4)-.055:12.92*t,n=n>.0031308?1.055*Math.pow(n,1/2.4)-.055:12.92*n,a=a>.0031308?1.055*Math.pow(a,1/2.4)-.055:12.92*a,[255*(t=Math.min(Math.max(0,t),1)),255*(n=Math.min(Math.max(0,n),1)),255*(a=Math.min(Math.max(0,a),1))]},o.xyz.lab=function(e){var t=e[0],n=e[1],a=e[2];return n/=100,a/=108.883,t=(t/=95.047)>.008856?Math.pow(t,1/3):7.787*t+16/116,[116*(n=n>.008856?Math.pow(n,1/3):7.787*n+16/116)-16,500*(t-n),200*(n-(a=a>.008856?Math.pow(a,1/3):7.787*a+16/116))]},o.lab.xyz=function(e){var t,n,a,r=e[0];t=e[1]/500+(n=(r+16)/116),a=n-e[2]/200;var i=Math.pow(n,3),o=Math.pow(t,3),d=Math.pow(a,3);return n=i>.008856?i:(n-16/116)/7.787,t=o>.008856?o:(t-16/116)/7.787,a=d>.008856?d:(a-16/116)/7.787,[t*=95.047,n*=100,a*=108.883]},o.lab.lch=function(e){var t,n=e[0],a=e[1],r=e[2];return(t=360*Math.atan2(r,a)/2/Math.PI)<0&&(t+=360),[n,Math.sqrt(a*a+r*r),t]},o.lch.lab=function(e){var t,n=e[0],a=e[1];return t=e[2]/360*2*Math.PI,[n,a*Math.cos(t),a*Math.sin(t)]},o.rgb.ansi16=function(e){var t=e[0],n=e[1],a=e[2],r=1 in arguments?arguments[1]:o.rgb.hsv(e)[2];if(0===(r=Math.round(r/50)))return 30;var i=30+(Math.round(a/255)<<2|Math.round(n/255)<<1|Math.round(t/255));return 2===r&&(i+=60),i},o.hsv.ansi16=function(e){return o.rgb.ansi16(o.hsv.rgb(e),e[2])},o.rgb.ansi256=function(e){var t=e[0],n=e[1],a=e[2];return t===n&&n===a?t<8?16:t>248?231:Math.round((t-8)/247*24)+232:16+36*Math.round(t/255*5)+6*Math.round(n/255*5)+Math.round(a/255*5)},o.ansi16.rgb=function(e){var t=e%10;if(0===t||7===t)return e>50&&(t+=3.5),[t=t/10.5*255,t,t];var n=.5*(1+~~(e>50));return[(1&t)*n*255,(t>>1&1)*n*255,(t>>2&1)*n*255]},o.ansi256.rgb=function(e){if(e>=232){var t=10*(e-232)+8;return[t,t,t]}var n;return e-=16,[Math.floor(e/36)/5*255,Math.floor((n=e%36)/6)/5*255,n%6/5*255]},o.rgb.hex=function(e){var t=(((255&Math.round(e[0]))<<16)+((255&Math.round(e[1]))<<8)+(255&Math.round(e[2]))).toString(16).toUpperCase();return"000000".substring(t.length)+t},o.hex.rgb=function(e){var t=e.toString(16).match(/[a-f0-9]{6}|[a-f0-9]{3}/i);if(!t)return[0,0,0];var n=t[0];3===t[0].length&&(n=n.split("").map((function(e){return e+e})).join(""));var a=parseInt(n,16);return[a>>16&255,a>>8&255,255&a]},o.rgb.hcg=function(e){var t,n=e[0]/255,a=e[1]/255,r=e[2]/255,i=Math.max(Math.max(n,a),r),o=Math.min(Math.min(n,a),r),d=i-o;return t=d<=0?0:i===n?(a-r)/d%6:i===a?2+(r-n)/d:4+(n-a)/d+4,t/=6,[360*(t%=1),100*d,100*(d<1?o/(1-d):0)]},o.hsl.hcg=function(e){var t=e[1]/100,n=e[2]/100,a=1,r=0;return(a=n<.5?2*t*n:2*t*(1-n))<1&&(r=(n-.5*a)/(1-a)),[e[0],100*a,100*r]},o.hsv.hcg=function(e){var t=e[1]/100,n=e[2]/100,a=t*n,r=0;return a<1&&(r=(n-a)/(1-a)),[e[0],100*a,100*r]},o.hcg.rgb=function(e){var t=e[0]/360,n=e[1]/100,a=e[2]/100;if(0===n)return[255*a,255*a,255*a];var r,i=[0,0,0],o=t%1*6,d=o%1,s=1-d;switch(Math.floor(o)){case 0:i[0]=1,i[1]=d,i[2]=0;break;case 1:i[0]=s,i[1]=1,i[2]=0;break;case 2:i[0]=0,i[1]=1,i[2]=d;break;case 3:i[0]=0,i[1]=s,i[2]=1;break;case 4:i[0]=d,i[1]=0,i[2]=1;break;default:i[0]=1,i[1]=0,i[2]=s}return r=(1-n)*a,[255*(n*i[0]+r),255*(n*i[1]+r),255*(n*i[2]+r)]},o.hcg.hsv=function(e){var t=e[1]/100,n=t+e[2]/100*(1-t),a=0;return n>0&&(a=t/n),[e[0],100*a,100*n]},o.hcg.hsl=function(e){var t=e[1]/100,n=e[2]/100*(1-t)+.5*t,a=0;return n>0&&n<.5?a=t/(2*n):n>=.5&&n<1&&(a=t/(2*(1-n))),[e[0],100*a,100*n]},o.hcg.hwb=function(e){var t=e[1]/100,n=t+e[2]/100*(1-t);return[e[0],100*(n-t),100*(1-n)]},o.hwb.hcg=function(e){var t=e[1]/100,n=1-e[2]/100,a=n-t,r=0;return a<1&&(r=(n-a)/(1-a)),[e[0],100*a,100*r]},o.apple.rgb=function(e){return[e[0]/65535*255,e[1]/65535*255,e[2]/65535*255]},o.rgb.apple=function(e){return[e[0]/255*65535,e[1]/255*65535,e[2]/255*65535]},o.gray.rgb=function(e){return[e[0]/100*255,e[0]/100*255,e[0]/100*255]},o.gray.hsl=o.gray.hsv=function(e){return[0,0,e[0]]},o.gray.hwb=function(e){return[0,100,e[0]]},o.gray.cmyk=function(e){return[0,0,0,e[0]]},o.gray.lab=function(e){return[e[0],0,0]},o.gray.hex=function(e){var t=255&Math.round(e[0]/100*255),n=((t<<16)+(t<<8)+t).toString(16).toUpperCase();return"000000".substring(n.length)+n},o.rgb.gray=function(e){return[(e[0]+e[1]+e[2])/3/255*100]}},27821:function(e,t,n){var a=n(23691),r=n(86396),i={};Object.keys(a).forEach((function(e){i[e]={},Object.defineProperty(i[e],"channels",{value:a[e].channels}),Object.defineProperty(i[e],"labels",{value:a[e].labels});var t=r(e);Object.keys(t).forEach((function(n){var a=t[n];i[e][n]=function(e){var t=function(t){if(null==t)return t;arguments.length>1&&(t=Array.prototype.slice.call(arguments));var n=e(t);if("object"==typeof n)for(var a=n.length,r=0;r<a;r++)n[r]=Math.round(n[r]);return n};return"conversion"in e&&(t.conversion=e.conversion),t}(a),i[e][n].raw=function(e){var t=function(t){return null==t?t:(arguments.length>1&&(t=Array.prototype.slice.call(arguments)),e(t))};return"conversion"in e&&(t.conversion=e.conversion),t}(a)}))})),e.exports=i},86396:function(e,t,n){var a=n(23691);function r(e){var t=function(){for(var e={},t=Object.keys(a),n=t.length,r=0;r<n;r++)e[t[r]]={distance:-1,parent:null};return e}(),n=[e];for(t[e].distance=0;n.length;)for(var r=n.pop(),i=Object.keys(a[r]),o=i.length,d=0;d<o;d++){var s=i[d],c=t[s];-1===c.distance&&(c.distance=t[r].distance+1,c.parent=r,n.unshift(s))}return t}function i(e,t){return function(n){return t(e(n))}}function o(e,t){for(var n=[t[e].parent,e],r=a[t[e].parent][e],o=t[e].parent;t[o].parent;)n.unshift(t[o].parent),r=i(a[t[o].parent][o],r),o=t[o].parent;return r.conversion=n,r}e.exports=function(e){for(var t=r(e),n={},a=Object.keys(t),i=a.length,d=0;d<i;d++){var s=a[d];null!==t[s].parent&&(n[s]=o(s,t))}return n}},58859:function(e){"use strict";e.exports={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,134,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,250,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,221],powderblue:[176,224,230],purple:[128,0,128],rebeccapurple:[102,51,153],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[112,128,144],slategrey:[112,128,144],snow:[255,250,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,50]}},29873:function(e){"use strict";var t=/[|\\{}()[\]^$+*?.]/g;e.exports=function(e){if("string"!=typeof e)throw new TypeError("Expected a string");return e.replace(t,"\\$&")}},55805:function(e){"use strict";e.exports={stdout:!1,stderr:!1}},68194:function(e,t,n){"use strict";const a=(this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}})(n(2500));e.exports=a.default},78367:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.Severity=void 0,function(e){e[e.OFF=0]="OFF",e[e.WARN=1]="WARN",e[e.ERROR=2]="ERROR"}(t.Severity||(t.Severity={}))},2500:function(e,t,n){"use strict";var a=this&&this.__createBinding||(Object.create?function(e,t,n,a){void 0===a&&(a=n),Object.defineProperty(e,a,{enumerable:!0,get:function(){return t[n]}})}:function(e,t,n,a){void 0===a&&(a=n),e[a]=t[n]}),r=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),i=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&a(t,e,n);return r(t,e),t},o=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});const d=i(n(44012)),s=o(n(42662)),c=n(78367);function u(e,t){return 1===t?e:`${e}s`}function l(e){return e.replace(/(\d+)\s+(\d+)/u,((e,t,n)=>d.dim(`${t}:${n}`)))}t.default=function(e){let t="\n",n=0,a=0,r=0,i=0,o=d.yellow;e.forEach((e=>{const u=e.messages;if(0===u.length)return;n+=e.errorCount,a+=e.warningCount,r+=e.fixableErrorCount,i+=e.fixableWarningCount;const g=u.map((e=>{let t;return e.fatal||e.severity===c.Severity.ERROR?(t=d.red("error"),o=d.red):t=d.yellow("warning"),["",e.line||0,e.column||0,t,e.message.replace(/([^ ])\.$/u,"$1"),e.ruleId?d.dim(e.ruleId):""]})),h={align:["l","r","l"],stringLength(e){return(t=e,t.replace(/\u001B\[[0-9;]*m/g,"")).length;var t}},f=s.default(g,h).split("\n").map(l).join("\n");t+=`${d.underline(e.filePath)}\n`,t+=`${f}\n\n`}));const g=n+a;return g>0&&(t+=o(d.bold(["✖ ",g,u(" problem",g)," (",n,u(" error",n),", ",a,u(" warning",a),")\n"].join(""))),(r>0||i>0)&&(t+=o(d.bold(["  ",r,u(" error",r)," and ",i,u(" warning",i)," potentially fixable with the `--fix` option.\n"].join(""))))),g>0?d.reset(t):""}},97548:function(e,t,n){"use strict";n.d(t,{He:function(){return s},Ld:function(){return _},eC:function(){return l},f3:function(){return d},iG:function(){return u},rS:function(){return h},sb:function(){return m},ys:function(){return o}});var a=n(72804),r=n(67294);const i=Symbol.for("Animated:node"),o=e=>e&&e[i],d=(e,t)=>(0,a.dE)(e,i,t),s=e=>e&&e[i]&&e[i].getPayload();class c{constructor(){this.payload=void 0,d(this,this)}getPayload(){return this.payload||[]}}class u extends c{constructor(e){super(),this.done=!0,this.elapsedTime=void 0,this.lastPosition=void 0,this.lastVelocity=void 0,this.v0=void 0,this.durationProgress=0,this._value=e,a.is.num(this._value)&&(this.lastPosition=this._value)}static create(e){return new u(e)}getPayload(){return[this]}getValue(){return this._value}setValue(e,t){return a.is.num(e)&&(this.lastPosition=e,t&&(e=Math.round(e/t)*t,this.done&&(this.lastPosition=e))),this._value!==e&&(this._value=e,!0)}reset(){const{done:e}=this;this.done=!1,a.is.num(this._value)&&(this.elapsedTime=0,this.durationProgress=0,this.lastPosition=this._value,e&&(this.lastVelocity=null),this.v0=null)}}class l extends u{constructor(e){super(0),this._string=null,this._toString=void 0,this._toString=(0,a.mD)({output:[e,e]})}static create(e){return new l(e)}getValue(){let e=this._string;return null==e?this._string=this._toString(this._value):e}setValue(e){if(a.is.str(e)){if(e==this._string)return!1;this._string=e,this._value=1}else{if(!super.setValue(e))return!1;this._string=null}return!0}reset(e){e&&(this._toString=(0,a.mD)({output:[this.getValue(),e]})),this._value=0,super.reset()}}const g={dependencies:null};class h extends c{constructor(e){super(),this.source=e,this.setValue(e)}getValue(e){const t={};return(0,a.rU)(this.source,((n,r)=>{var o;(o=n)&&o[i]===o?t[r]=n.getValue(e):(0,a.j$)(n)?t[r]=(0,a.je)(n):e||(t[r]=n)})),t}setValue(e){this.source=e,this.payload=this._makePayload(e)}reset(){this.payload&&(0,a.S6)(this.payload,(e=>e.reset()))}_makePayload(e){if(e){const t=new Set;return(0,a.rU)(e,this._addToPayload,t),Array.from(t)}}_addToPayload(e){g.dependencies&&(0,a.j$)(e)&&g.dependencies.add(e);const t=s(e);t&&(0,a.S6)(t,(e=>this.add(e)))}}class f extends h{constructor(e){super(e)}static create(e){return new f(e)}getValue(){return this.source.map((e=>e.getValue()))}setValue(e){const t=this.getPayload();return e.length==t.length?t.map(((t,n)=>t.setValue(e[n]))).some(Boolean):(super.setValue(e.map(p)),!0)}}function p(e){return((0,a.Df)(e)?l:u).create(e)}function m(e){const t=o(e);return t?t.constructor:a.is.arr(e)?f:(0,a.Df)(e)?l:u}function R(){return R=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},R.apply(this,arguments)}const b=(e,t)=>{const n=!a.is.fun(e)||e.prototype&&e.prototype.isReactComponent;return(0,r.forwardRef)(((i,o)=>{const d=(0,r.useRef)(null),s=n&&(0,r.useCallback)((e=>{d.current=function(e,t){e&&(a.is.fun(e)?e(t):e.current=t);return t}(o,e)}),[o]),[c,u]=function(e,t){const n=new Set;g.dependencies=n,e.style&&(e=R({},e,{style:t.createAnimatedStyle(e.style)}));return e=new h(e),g.dependencies=null,[e,n]}(i,t),l=(0,a.NW)(),f=()=>{const e=d.current;if(n&&!e)return;!1===(!!e&&t.applyAnimatedValues(e,c.getValue(!0)))&&l()},p=new y(f,u),m=(0,r.useRef)();(0,a.bt)((()=>{const e=m.current;m.current=p,(0,a.S6)(u,(e=>(0,a.UI)(e,p))),e&&((0,a.S6)(e.deps,(t=>(0,a.iL)(t,e))),a.Wn.cancel(e.update))})),(0,r.useEffect)(f,[]),(0,a.tf)((()=>()=>{const e=m.current;(0,a.S6)(e.deps,(t=>(0,a.iL)(t,e)))}));const b=t.getComponentProps(c.getValue());return r.createElement(e,R({},b,{ref:s}))}))};class y{constructor(e,t){this.update=e,this.deps=t}eventObserved(e){"change"==e.type&&a.Wn.write(this.update)}}const v=Symbol.for("AnimatedComponent"),_=(e,{applyAnimatedValues:t=(()=>!1),createAnimatedStyle:n=(e=>new h(e)),getComponentProps:r=(e=>e)}={})=>{const i={applyAnimatedValues:t,createAnimatedStyle:n,getComponentProps:r},o=e=>{const t=w(e)||"Anonymous";return(e=a.is.str(e)?o[e]||(o[e]=b(e,i)):e[v]||(e[v]=b(e,i))).displayName=`Animated(${t})`,e};return(0,a.rU)(e,((t,n)=>{a.is.arr(e)&&(n=w(t)),o[n]=o(t)})),{animated:o}},w=e=>a.is.str(e)?e:e&&a.is.str(e.displayName)?e.displayName:a.is.fun(e)&&e.name||null},72351:function(e,t,n){"use strict";n.d(t,{Globals:function(){return a.OH},useSpring:function(){return Re}});var a=n(72804),r=n(67294),i=n(97548);function o(){return o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},o.apply(this,arguments)}function d(e,...t){return a.is.fun(e)?e(...t):e}const s=(e,t)=>!0===e||!!(t&&e&&(a.is.fun(e)?e(t):(0,a.qo)(e).includes(t))),c=(e,t)=>a.is.obj(e)?t&&e[t]:e,u=(e,t)=>!0===e.default?e[t]:e.default?e.default[t]:void 0,l=e=>e,g=(e,t=l)=>{let n=h;e.default&&!0!==e.default&&(e=e.default,n=Object.keys(e));const r={};for(const i of n){const n=t(e[i],i);a.is.und(n)||(r[i]=n)}return r},h=["config","onProps","onStart","onChange","onPause","onResume","onRest"],f={config:1,from:1,to:1,ref:1,loop:1,reset:1,pause:1,cancel:1,reverse:1,immediate:1,default:1,delay:1,onProps:1,onStart:1,onChange:1,onPause:1,onResume:1,onRest:1,onResolve:1,items:1,trail:1,sort:1,expires:1,initial:1,enter:1,update:1,leave:1,children:1,onDestroyed:1,keys:1,callId:1,parentId:1};function p(e){const t=function(e){const t={};let n=0;if((0,a.rU)(e,((e,a)=>{f[a]||(t[a]=e,n++)})),n)return t}(e);if(t){const n={to:t};return(0,a.rU)(e,((e,a)=>a in t||(n[a]=e))),n}return o({},e)}function m(e){return e=(0,a.je)(e),a.is.arr(e)?e.map(m):(0,a.Df)(e)?a.OH.createStringInterpolator({range:[0,1],output:[e,e]})(1):e}function R(e){for(const t in e)return!0;return!1}function b(e){return a.is.fun(e)||a.is.arr(e)&&a.is.obj(e[0])}function y(e,t){var n;null==(n=e.ref)||n.delete(e),null==t||t.delete(e)}function v(e,t){var n;t&&e.ref!==t&&(null==(n=e.ref)||n.delete(e),t.add(e),e.ref=t)}const _=o({},{tension:170,friction:26},{mass:1,damping:1,easing:e=>e,clamp:!1});class w{constructor(){this.tension=void 0,this.friction=void 0,this.frequency=void 0,this.damping=void 0,this.mass=void 0,this.velocity=0,this.restVelocity=void 0,this.precision=void 0,this.progress=void 0,this.duration=void 0,this.easing=void 0,this.clamp=void 0,this.bounce=void 0,this.decay=void 0,this.round=void 0,Object.assign(this,_)}}function M(e,t){if(a.is.und(t.decay)){const n=!a.is.und(t.tension)||!a.is.und(t.friction);!n&&a.is.und(t.frequency)&&a.is.und(t.damping)&&a.is.und(t.mass)||(e.duration=void 0,e.decay=void 0),n&&(e.frequency=void 0)}else e.duration=void 0}const x=[];class E{constructor(){this.changed=!1,this.values=x,this.toValues=null,this.fromValues=x,this.to=void 0,this.from=void 0,this.config=new w,this.immediate=!1}}function S(e,{key:t,props:n,defaultProps:r,state:i,actions:c}){return new Promise(((u,l)=>{var g;let h,f,p=s(null!=(g=n.cancel)?g:null==r?void 0:r.cancel,t);if(p)b();else{a.is.und(n.pause)||(i.paused=s(n.pause,t));let e=null==r?void 0:r.pause;!0!==e&&(e=i.paused||s(e,t)),h=d(n.delay||0,t),e?(i.resumeQueue.add(R),c.pause()):(c.resume(),R())}function m(){i.resumeQueue.add(R),i.timeouts.delete(f),f.cancel(),h=f.time-a.Wn.now()}function R(){h>0&&!a.OH.skipAnimation?(f=a.Wn.setTimeout(b,h),i.pauseQueue.add(m),i.timeouts.add(f)):b()}function b(){i.pauseQueue.delete(m),i.timeouts.delete(f),e<=(i.cancelId||0)&&(p=!0);try{c.start(o({},n,{callId:e,cancel:p}),u)}catch(t){l(t)}}}))}const k=(e,t)=>1==t.length?t[0]:t.some((e=>e.cancelled))?A(e.get()):t.every((e=>e.noop))?N(e.get()):D(e.get(),t.every((e=>e.finished))),N=e=>({value:e,noop:!0,finished:!0,cancelled:!1}),D=(e,t,n=!1)=>({value:e,finished:t,cancelled:n}),A=e=>({value:e,cancelled:!0,finished:!1});function j(e,t,n,r){const{callId:i,parentId:d,onRest:s}=t,{asyncTo:c,promise:u}=n;return d||e!==c||t.reset?n.promise=(async()=>{n.asyncId=i,n.asyncTo=e;const l=g(t,((e,t)=>"onRest"===t?void 0:e));let h,f;const p=new Promise(((e,t)=>(h=e,f=t))),m=e=>{const t=i<=(n.cancelId||0)&&A(r)||i!==n.asyncId&&D(r,!1);if(t)throw e.result=t,f(e),e},R=(e,t)=>{const d=new L,s=new I;return(async()=>{if(a.OH.skipAnimation)throw T(n),s.result=D(r,!1),f(s),s;m(d);const c=a.is.obj(e)?o({},e):o({},t,{to:e});c.parentId=i,(0,a.rU)(l,((e,t)=>{a.is.und(c[t])&&(c[t]=e)}));const u=await r.start(c);return m(d),n.paused&&await new Promise((e=>{n.resumeQueue.add(e)})),u})()};let b;if(a.OH.skipAnimation)return T(n),D(r,!1);try{let t;t=a.is.arr(e)?(async e=>{for(const t of e)await R(t)})(e):Promise.resolve(e(R,r.stop.bind(r))),await Promise.all([t.then(h),p]),b=D(r.get(),!0,!1)}catch(y){if(y instanceof L)b=y.result;else{if(!(y instanceof I))throw y;b=y.result}}finally{i==n.asyncId&&(n.asyncId=d,n.asyncTo=d?c:void 0,n.promise=d?u:void 0)}return a.is.fun(s)&&a.Wn.batchedUpdates((()=>{s(b,r,r.item)})),b})():u}function T(e,t){(0,a.yl)(e.timeouts,(e=>e.cancel())),e.pauseQueue.clear(),e.resumeQueue.clear(),e.asyncId=e.asyncTo=e.promise=void 0,t&&(e.cancelId=t)}class L extends Error{constructor(){super("An async animation has been interrupted. You see this error because you forgot to use `await` or `.catch(...)` on its returned promise."),this.result=void 0}}class I extends Error{constructor(){super("SkipAnimationSignal"),this.result=void 0}}const C=e=>e instanceof P;let O=1;class P extends a.B0{constructor(...e){super(...e),this.id=O++,this.key=void 0,this._priority=0}get priority(){return this._priority}set priority(e){this._priority!=e&&(this._priority=e,this._onPriorityChange(e))}get(){const e=(0,i.ys)(this);return e&&e.getValue()}to(...e){return a.OH.to(this,e)}interpolate(...e){return(0,a.LW)(),a.OH.to(this,e)}toJSON(){return this.get()}observerAdded(e){1==e&&this._attach()}observerRemoved(e){0==e&&this._detach()}_attach(){}_detach(){}_onChange(e,t=!1){(0,a.k0)(this,{type:"change",parent:this,value:e,idle:t})}_onPriorityChange(e){this.idle||a.fT.sort(this),(0,a.k0)(this,{type:"priority",parent:this,priority:e})}}const z=Symbol.for("SpringPhase"),B=e=>(1&e[z])>0,F=e=>(2&e[z])>0,U=e=>(4&e[z])>0,$=(e,t)=>t?e[z]|=3:e[z]&=-3,H=(e,t)=>t?e[z]|=4:e[z]&=-5;class q extends P{constructor(e,t){if(super(),this.key=void 0,this.animation=new E,this.queue=void 0,this.defaultProps={},this._state={paused:!1,pauseQueue:new Set,resumeQueue:new Set,timeouts:new Set},this._pendingCalls=new Set,this._lastCallId=0,this._lastToId=0,this._memoizedDuration=0,!a.is.und(e)||!a.is.und(t)){const n=a.is.obj(e)?o({},e):o({},t,{from:e});a.is.und(n.default)&&(n.default=!0),this.start(n)}}get idle(){return!(F(this)||this._state.asyncTo)||U(this)}get goal(){return(0,a.je)(this.animation.to)}get velocity(){const e=(0,i.ys)(this);return e instanceof i.iG?e.lastVelocity||0:e.getPayload().map((e=>e.lastVelocity||0))}get hasAnimated(){return B(this)}get isAnimating(){return F(this)}get isPaused(){return U(this)}advance(e){let t=!0,n=!1;const r=this.animation;let{config:o,toValues:d}=r;const s=(0,i.He)(r.to);!s&&(0,a.j$)(r.to)&&(d=(0,a.qo)((0,a.je)(r.to))),r.values.forEach(((c,u)=>{if(c.done)return;const l=c.constructor==i.eC?1:s?s[u].lastPosition:d[u];let g=r.immediate,h=l;if(!g){if(h=c.lastPosition,o.tension<=0)return void(c.done=!0);let t=c.elapsedTime+=e;const n=r.fromValues[u],i=null!=c.v0?c.v0:c.v0=a.is.arr(o.velocity)?o.velocity[u]:o.velocity;let d;if(a.is.und(o.duration))if(o.decay){const e=!0===o.decay?.998:o.decay,a=Math.exp(-(1-e)*t);h=n+i/(1-e)*(1-a),g=Math.abs(c.lastPosition-h)<.1,d=i*a}else{d=null==c.lastVelocity?i:c.lastVelocity;const t=o.precision||(n==l?.005:Math.min(1,.001*Math.abs(l-n))),r=o.restVelocity||t/10,s=o.clamp?0:o.bounce,u=!a.is.und(s),f=n==l?c.v0>0:n<l;let p,m=!1;const R=1,b=Math.ceil(e/R);for(let e=0;e<b&&(p=Math.abs(d)>r,p||(g=Math.abs(l-h)<=t,!g));++e){u&&(m=h==l||h>l==f,m&&(d=-d*s,h=l));d+=(1e-6*-o.tension*(h-l)+.001*-o.friction*d)/o.mass*R,h+=d*R}}else{let a=1;o.duration>0&&(this._memoizedDuration!==o.duration&&(this._memoizedDuration=o.duration,c.durationProgress>0&&(c.elapsedTime=o.duration*c.durationProgress,t=c.elapsedTime+=e)),a=(o.progress||0)+t/this._memoizedDuration,a=a>1?1:a<0?0:a,c.durationProgress=a),h=n+o.easing(a)*(l-n),d=(h-c.lastPosition)/e,g=1==a}c.lastVelocity=d,Number.isNaN(h)&&(console.warn("Got NaN while animating:",this),g=!0)}s&&!s[u].done&&(g=!1),g?c.done=!0:t=!1,c.setValue(h,o.round)&&(n=!0)}));const c=(0,i.ys)(this),u=c.getValue();if(t){const e=(0,a.je)(r.to);u===e&&!n||o.decay?n&&o.decay&&this._onChange(u):(c.setValue(e),this._onChange(e)),this._stop()}else n&&this._onChange(u)}set(e){return a.Wn.batchedUpdates((()=>{this._stop(),this._focus(e),this._set(e)})),this}pause(){this._update({pause:!0})}resume(){this._update({pause:!1})}finish(){if(F(this)){const{to:e,config:t}=this.animation;a.Wn.batchedUpdates((()=>{this._onStart(),t.decay||this._set(e,!1),this._stop()}))}return this}update(e){return(this.queue||(this.queue=[])).push(e),this}start(e,t){let n;return a.is.und(e)?(n=this.queue||[],this.queue=[]):n=[a.is.obj(e)?e:o({},t,{to:e})],Promise.all(n.map((e=>this._update(e)))).then((e=>k(this,e)))}stop(e){const{to:t}=this.animation;return this._focus(this.get()),T(this._state,e&&this._lastCallId),a.Wn.batchedUpdates((()=>this._stop(t,e))),this}reset(){this._update({reset:!0})}eventObserved(e){"change"==e.type?this._start():"priority"==e.type&&(this.priority=e.priority+1)}_prepareNode(e){const t=this.key||"";let{to:n,from:r}=e;n=a.is.obj(n)?n[t]:n,(null==n||b(n))&&(n=void 0),r=a.is.obj(r)?r[t]:r,null==r&&(r=void 0);const o={to:n,from:r};return B(this)||(e.reverse&&([n,r]=[r,n]),r=(0,a.je)(r),a.is.und(r)?(0,i.ys)(this)||this._set(n):this._set(r)),o}_update(e,t){let n=o({},e);const{key:r,defaultProps:i}=this;n.default&&Object.assign(i,g(n,((e,t)=>/^on/.test(t)?c(e,r):e))),Z(this,n,"onProps"),X(this,"onProps",n,this);const d=this._prepareNode(n);if(Object.isFrozen(this))throw Error("Cannot animate a `SpringValue` object that is frozen. Did you forget to pass your component to `animated(...)` before animating its props?");const s=this._state;return S(++this._lastCallId,{key:r,props:n,defaultProps:i,state:s,actions:{pause:()=>{U(this)||(H(this,!0),(0,a.bl)(s.pauseQueue),X(this,"onPause",D(this,Y(this,this.animation.to)),this))},resume:()=>{U(this)&&(H(this,!1),F(this)&&this._resume(),(0,a.bl)(s.resumeQueue),X(this,"onResume",D(this,Y(this,this.animation.to)),this))},start:this._merge.bind(this,d)}}).then((e=>{if(n.loop&&e.finished&&(!t||!e.noop)){const e=G(n);if(e)return this._update(e,!0)}return e}))}_merge(e,t,n){if(t.cancel)return this.stop(!0),n(A(this));const r=!a.is.und(e.to),c=!a.is.und(e.from);if(r||c){if(!(t.callId>this._lastToId))return n(A(this));this._lastToId=t.callId}const{key:u,defaultProps:l,animation:g}=this,{to:h,from:f}=g;let{to:p=h,from:R=f}=e;!c||r||t.default&&!a.is.und(p)||(p=R),t.reverse&&([p,R]=[R,p]);const y=!(0,a.Xy)(R,f);y&&(g.from=R),R=(0,a.je)(R);const v=!(0,a.Xy)(p,h);v&&this._focus(p);const w=b(t.to),{config:x}=g,{decay:E,velocity:S}=x;(r||c)&&(x.velocity=0),t.config&&!w&&function(e,t,n){n&&(M(n=o({},n),t),t=o({},n,t)),M(e,t),Object.assign(e,t);for(const a in _)null==e[a]&&(e[a]=_[a]);let{mass:r,frequency:i,damping:d}=e;a.is.und(i)||(i<.01&&(i=.01),d<0&&(d=0),e.tension=Math.pow(2*Math.PI/i,2)*r,e.friction=4*Math.PI*d*r/i)}(x,d(t.config,u),t.config!==l.config?d(l.config,u):void 0);let k=(0,i.ys)(this);if(!k||a.is.und(p))return n(D(this,!0));const T=a.is.und(t.reset)?c&&!t.default:!a.is.und(R)&&s(t.reset,u),L=T?R:this.get(),I=m(p),C=a.is.num(I)||a.is.arr(I)||(0,a.Df)(I),O=!w&&(!C||s(l.immediate||t.immediate,u));if(v){const e=(0,i.sb)(p);if(e!==k.constructor){if(!O)throw Error(`Cannot animate between ${k.constructor.name} and ${e.name}, as the "to" prop suggests`);k=this._set(I)}}const P=k.constructor;let z=(0,a.j$)(p),U=!1;if(!z){const e=T||!B(this)&&y;(v||e)&&(U=(0,a.Xy)(m(L),I),z=!U),((0,a.Xy)(g.immediate,O)||O)&&(0,a.Xy)(x.decay,E)&&(0,a.Xy)(x.velocity,S)||(z=!0)}if(U&&F(this)&&(g.changed&&!T?z=!0:z||this._stop(h)),!w&&((z||(0,a.j$)(h))&&(g.values=k.getPayload(),g.toValues=(0,a.j$)(p)?null:P==i.eC?[1]:(0,a.qo)(I)),g.immediate!=O&&(g.immediate=O,O||T||this._set(h)),z)){const{onRest:e}=g;(0,a.S6)(K,(e=>Z(this,t,e)));const r=D(this,Y(this,h));(0,a.bl)(this._pendingCalls,r),this._pendingCalls.add(n),g.changed&&a.Wn.batchedUpdates((()=>{g.changed=!T,null==e||e(r,this),T?d(l.onRest,r):null==g.onStart||g.onStart(r,this)}))}T&&this._set(L),w?n(j(t.to,t,this._state,this)):z?this._start():F(this)&&!v?this._pendingCalls.add(n):n(N(L))}_focus(e){const t=this.animation;e!==t.to&&((0,a.Ll)(this)&&this._detach(),t.to=e,(0,a.Ll)(this)&&this._attach())}_attach(){let e=0;const{to:t}=this.animation;(0,a.j$)(t)&&((0,a.UI)(t,this),C(t)&&(e=t.priority+1)),this.priority=e}_detach(){const{to:e}=this.animation;(0,a.j$)(e)&&(0,a.iL)(e,this)}_set(e,t=!0){const n=(0,a.je)(e);if(!a.is.und(n)){const e=(0,i.ys)(this);if(!e||!(0,a.Xy)(n,e.getValue())){const r=(0,i.sb)(n);e&&e.constructor==r?e.setValue(n):(0,i.f3)(this,r.create(n)),e&&a.Wn.batchedUpdates((()=>{this._onChange(n,t)}))}}return(0,i.ys)(this)}_onStart(){const e=this.animation;e.changed||(e.changed=!0,X(this,"onStart",D(this,Y(this,e.to)),this))}_onChange(e,t){t||(this._onStart(),d(this.animation.onChange,e,this)),d(this.defaultProps.onChange,e,this),super._onChange(e,t)}_start(){const e=this.animation;(0,i.ys)(this).reset((0,a.je)(e.to)),e.immediate||(e.fromValues=e.values.map((e=>e.lastPosition))),F(this)||($(this,!0),U(this)||this._resume())}_resume(){a.OH.skipAnimation?this.finish():a.fT.start(this)}_stop(e,t){if(F(this)){$(this,!1);const n=this.animation;(0,a.S6)(n.values,(e=>{e.done=!0})),n.toValues&&(n.onChange=n.onPause=n.onResume=void 0),(0,a.k0)(this,{type:"idle",parent:this});const r=t?A(this.get()):D(this.get(),Y(this,null!=e?e:n.to));(0,a.bl)(this._pendingCalls,r),n.changed&&(n.changed=!1,X(this,"onRest",r,this))}}}function Y(e,t){const n=m(t),r=m(e.get());return(0,a.Xy)(r,n)}function G(e,t=e.loop,n=e.to){let a=d(t);if(a){const r=!0!==a&&p(a),i=(r||e).reverse,d=!r||r.reset;return V(o({},e,{loop:t,default:!1,pause:void 0,to:!i||b(n)?n:void 0,from:d?e.from:void 0,reset:d},r))}}function V(e){const{to:t,from:n}=e=p(e),r=new Set;return a.is.obj(t)&&W(t,r),a.is.obj(n)&&W(n,r),e.keys=r.size?Array.from(r):null,e}function Q(e){const t=V(e);return a.is.und(t.default)&&(t.default=g(t)),t}function W(e,t){(0,a.rU)(e,((e,n)=>null!=e&&t.add(n)))}const K=["onStart","onRest","onChange","onPause","onResume"];function Z(e,t,n){e.animation[n]=t[n]!==u(t,n)?c(t[n],e.key):void 0}function X(e,t,...n){var a,r,i,o;null==(a=(r=e.animation)[t])||a.call(r,...n),null==(i=(o=e.defaultProps)[t])||i.call(o,...n)}const J=["onStart","onChange","onRest"];let ee=1;class te{constructor(e,t){this.id=ee++,this.springs={},this.queue=[],this.ref=void 0,this._flush=void 0,this._initialProps=void 0,this._lastAsyncId=0,this._active=new Set,this._changed=new Set,this._started=!1,this._item=void 0,this._state={paused:!1,pauseQueue:new Set,resumeQueue:new Set,timeouts:new Set},this._events={onStart:new Map,onChange:new Map,onRest:new Map},this._onFrame=this._onFrame.bind(this),t&&(this._flush=t),e&&this.start(o({default:!0},e))}get idle(){return!this._state.asyncTo&&Object.values(this.springs).every((e=>e.idle))}get item(){return this._item}set item(e){this._item=e}get(){const e={};return this.each(((t,n)=>e[n]=t.get())),e}set(e){for(const t in e){const n=e[t];a.is.und(n)||this.springs[t].set(n)}}update(e){return e&&this.queue.push(V(e)),this}start(e){let{queue:t}=this;return e?t=(0,a.qo)(e).map(V):this.queue=[],this._flush?this._flush(this,t):(se(this,t),ne(this,t))}stop(e,t){if(e!==!!e&&(t=e),t){const n=this.springs;(0,a.S6)((0,a.qo)(t),(t=>n[t].stop(!!e)))}else T(this._state,this._lastAsyncId),this.each((t=>t.stop(!!e)));return this}pause(e){if(a.is.und(e))this.start({pause:!0});else{const t=this.springs;(0,a.S6)((0,a.qo)(e),(e=>t[e].pause()))}return this}resume(e){if(a.is.und(e))this.start({pause:!1});else{const t=this.springs;(0,a.S6)((0,a.qo)(e),(e=>t[e].resume()))}return this}each(e){(0,a.rU)(this.springs,e)}_onFrame(){const{onStart:e,onChange:t,onRest:n}=this._events,r=this._active.size>0,i=this._changed.size>0;(r&&!this._started||i&&!this._started)&&(this._started=!0,(0,a.yl)(e,(([e,t])=>{t.value=this.get(),e(t,this,this._item)})));const o=!r&&this._started,d=i||o&&n.size?this.get():null;i&&t.size&&(0,a.yl)(t,(([e,t])=>{t.value=d,e(t,this,this._item)})),o&&(this._started=!1,(0,a.yl)(n,(([e,t])=>{t.value=d,e(t,this,this._item)})))}eventObserved(e){if("change"==e.type)this._changed.add(e.parent),e.idle||this._active.add(e.parent);else{if("idle"!=e.type)return;this._active.delete(e.parent)}a.Wn.onFrame(this._onFrame)}}function ne(e,t){return Promise.all(t.map((t=>ae(e,t)))).then((t=>k(e,t)))}async function ae(e,t,n){const{keys:r,to:i,from:o,loop:d,onRest:s,onResolve:c}=t,l=a.is.obj(t.default)&&t.default;d&&(t.loop=!1),!1===i&&(t.to=null),!1===o&&(t.from=null);const g=a.is.arr(i)||a.is.fun(i)?i:void 0;g?(t.to=void 0,t.onRest=void 0,l&&(l.onRest=void 0)):(0,a.S6)(J,(n=>{const r=t[n];if(a.is.fun(r)){const a=e._events[n];t[n]=({finished:e,cancelled:t})=>{const n=a.get(r);n?(e||(n.finished=!1),t&&(n.cancelled=!0)):a.set(r,{value:null,finished:e||!1,cancelled:t||!1})},l&&(l[n]=t[n])}}));const h=e._state;t.pause===!h.paused?(h.paused=t.pause,(0,a.bl)(t.pause?h.pauseQueue:h.resumeQueue)):h.paused&&(t.pause=!0);const f=(r||Object.keys(e.springs)).map((n=>e.springs[n].start(t))),p=!0===t.cancel||!0===u(t,"cancel");(g||p&&h.asyncId)&&f.push(S(++e._lastAsyncId,{props:t,state:h,actions:{pause:a.ZT,resume:a.ZT,start(t,n){p?(T(h,e._lastAsyncId),n(A(e))):(t.onRest=s,n(j(g,t,h,e)))}}})),h.paused&&await new Promise((e=>{h.resumeQueue.add(e)}));const m=k(e,await Promise.all(f));if(d&&m.finished&&(!n||!m.noop)){const n=G(t,d,i);if(n)return se(e,[n]),ae(e,n,!0)}return c&&a.Wn.batchedUpdates((()=>c(m,e,e.item))),m}function re(e,t){const n=o({},e.springs);return t&&(0,a.S6)((0,a.qo)(t),(e=>{a.is.und(e.keys)&&(e=V(e)),a.is.obj(e.to)||(e=o({},e,{to:void 0})),de(n,e,(e=>oe(e)))})),ie(e,n),n}function ie(e,t){(0,a.rU)(t,((t,n)=>{e.springs[n]||(e.springs[n]=t,(0,a.UI)(t,e))}))}function oe(e,t){const n=new q;return n.key=e,t&&(0,a.UI)(n,t),n}function de(e,t,n){t.keys&&(0,a.S6)(t.keys,(a=>{(e[a]||(e[a]=n(a)))._prepareNode(t)}))}function se(e,t){(0,a.S6)(t,(t=>{de(e.springs,t,(t=>oe(t,e)))}))}function ce(e,t){if(null==e)return{};var n,a,r={},i=Object.keys(e);for(a=0;a<i.length;a++)n=i[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}const ue=["children"],le=e=>{let{children:t}=e,n=ce(e,ue);const i=(0,r.useContext)(ge),o=n.pause||!!i.pause,d=n.immediate||!!i.immediate;n=(0,a.Pr)((()=>({pause:o,immediate:d})),[o,d]);const{Provider:s}=ge;return r.createElement(s,{value:n},t)},ge=(he=le,fe={},Object.assign(he,r.createContext(fe)),he.Provider._context=he,he.Consumer._context=he,he);var he,fe;le.Provider=ge.Provider,le.Consumer=ge.Consumer;const pe=()=>{const e=[],t=function(t){(0,a.ZR)();const r=[];return(0,a.S6)(e,((e,i)=>{if(a.is.und(t))r.push(e.start());else{const a=n(t,e,i);a&&r.push(e.start(a))}})),r};t.current=e,t.add=function(t){e.includes(t)||e.push(t)},t.delete=function(t){const n=e.indexOf(t);~n&&e.splice(n,1)},t.pause=function(){return(0,a.S6)(e,(e=>e.pause(...arguments))),this},t.resume=function(){return(0,a.S6)(e,(e=>e.resume(...arguments))),this},t.set=function(t){(0,a.S6)(e,(e=>e.set(t)))},t.start=function(t){const n=[];return(0,a.S6)(e,((e,r)=>{if(a.is.und(t))n.push(e.start());else{const a=this._getProps(t,e,r);a&&n.push(e.start(a))}})),n},t.stop=function(){return(0,a.S6)(e,(e=>e.stop(...arguments))),this},t.update=function(t){return(0,a.S6)(e,((e,n)=>e.update(this._getProps(t,e,n)))),this};const n=function(e,t,n){return a.is.fun(e)?e(n,t):e};return t._getProps=n,t};function me(e,t,n){const i=a.is.fun(t)&&t;i&&!n&&(n=[]);const d=(0,r.useMemo)((()=>i||3==arguments.length?pe():void 0),[]),s=(0,r.useRef)(0),c=(0,a.NW)(),u=(0,r.useMemo)((()=>({ctrls:[],queue:[],flush(e,t){const n=re(e,t);return s.current>0&&!u.queue.length&&!Object.keys(n).some((t=>!e.springs[t]))?ne(e,t):new Promise((a=>{ie(e,n),u.queue.push((()=>{a(ne(e,t))})),c()}))}})),[]),l=(0,r.useRef)([...u.ctrls]),g=[],h=(0,a.zH)(e)||0;function f(e,n){for(let a=e;a<n;a++){const e=l.current[a]||(l.current[a]=new te(null,u.flush)),n=i?i(a,e):t[a];n&&(g[a]=Q(n))}}(0,r.useMemo)((()=>{(0,a.S6)(l.current.slice(e,h),(e=>{y(e,d),e.stop(!0)})),l.current.length=e,f(h,e)}),[e]),(0,r.useMemo)((()=>{f(0,Math.min(h,e))}),n);const p=l.current.map(((e,t)=>re(e,g[t]))),m=(0,r.useContext)(le),b=(0,a.zH)(m),_=m!==b&&R(m);(0,a.bt)((()=>{s.current++,u.ctrls=l.current;const{queue:e}=u;e.length&&(u.queue=[],(0,a.S6)(e,(e=>e()))),(0,a.S6)(l.current,((e,t)=>{null==d||d.add(e),_&&e.start({default:m});const n=g[t];n&&(v(e,n.ref),e.ref?e.queue.push(n):e.start(n))}))})),(0,a.tf)((()=>()=>{(0,a.S6)(u.ctrls,(e=>e.stop(!0)))}));const w=p.map((e=>o({},e)));return d?[w,d]:w}function Re(e,t){const n=a.is.fun(e),[[r],i]=me(1,n?e:[e],n?t||[]:t);return n||2==arguments.length?[r,i]:r}let be;!function(e){e.MOUNT="mount",e.ENTER="enter",e.UPDATE="update",e.LEAVE="leave"}(be||(be={}));class ye extends P{constructor(e,t){super(),this.key=void 0,this.idle=!0,this.calc=void 0,this._active=new Set,this.source=e,this.calc=(0,a.mD)(...t);const n=this._get(),r=(0,i.sb)(n);(0,i.f3)(this,r.create(n))}advance(e){const t=this._get(),n=this.get();(0,a.Xy)(t,n)||((0,i.ys)(this).setValue(t),this._onChange(t,this.idle)),!this.idle&&_e(this._active)&&we(this)}_get(){const e=a.is.arr(this.source)?this.source.map(a.je):(0,a.qo)((0,a.je)(this.source));return this.calc(...e)}_start(){this.idle&&!_e(this._active)&&(this.idle=!1,(0,a.S6)((0,i.He)(this),(e=>{e.done=!1})),a.OH.skipAnimation?(a.Wn.batchedUpdates((()=>this.advance())),we(this)):a.fT.start(this))}_attach(){let e=1;(0,a.S6)((0,a.qo)(this.source),(t=>{(0,a.j$)(t)&&(0,a.UI)(t,this),C(t)&&(t.idle||this._active.add(t),e=Math.max(e,t.priority+1))})),this.priority=e,this._start()}_detach(){(0,a.S6)((0,a.qo)(this.source),(e=>{(0,a.j$)(e)&&(0,a.iL)(e,this)})),this._active.clear(),we(this)}eventObserved(e){"change"==e.type?e.idle?this.advance():(this._active.add(e.parent),this._start()):"idle"==e.type?this._active.delete(e.parent):"priority"==e.type&&(this.priority=(0,a.qo)(this.source).reduce(((e,t)=>Math.max(e,(C(t)?t.priority:0)+1)),0))}}function ve(e){return!1!==e.idle}function _e(e){return!e.size||Array.from(e).every(ve)}function we(e){e.idle||(e.idle=!0,(0,a.S6)((0,i.He)(e),(e=>{e.done=!0})),(0,a.k0)(e,{type:"idle",parent:e}))}a.OH.assign({createStringInterpolator:a.qS,to:(e,t)=>new ye(e,t)});a.fT.advance},72804:function(e,t,n){"use strict";n.d(t,{B0:function(){return ye},OH:function(){return O},UI:function(){return _e},k0:function(){return be},O9:function(){return G},mD:function(){return le},qS:function(){return Ae},dE:function(){return M},ZR:function(){return Oe},LW:function(){return Ie},S6:function(){return S},rU:function(){return k},yl:function(){return D},bl:function(){return A},fT:function(){return U},Ll:function(){return Re},je:function(){return me},j$:function(){return pe},is:function(){return x},Df:function(){return Pe},Xy:function(){return E},ZT:function(){return w},Wn:function(){return r},iL:function(){return we},qo:function(){return N},NW:function(){return Fe},bt:function(){return qe},Pr:function(){return $e},tf:function(){return ze},zH:function(){return He}});let a=b();const r=e=>f(e,a);let i=b();r.write=e=>f(e,i);let o=b();r.onStart=e=>f(e,o);let d=b();r.onFrame=e=>f(e,d);let s=b();r.onFinish=e=>f(e,s);let c=[];r.setTimeout=(e,t)=>{let n=r.now()+t,a=()=>{let e=c.findIndex((e=>e.cancel==a));~e&&c.splice(e,1),v.count-=~e?1:0},i={time:n,handler:e,cancel:a};return c.splice(u(n),0,i),v.count+=1,p(),i};let u=e=>~(~c.findIndex((t=>t.time>e))||~c.length);r.cancel=e=>{a.delete(e),i.delete(e)},r.sync=e=>{h=!0,r.batchedUpdates(e),h=!1},r.throttle=e=>{let t;function n(){try{e(...t)}finally{t=null}}function a(...e){t=e,r.onStart(n)}return a.handler=e,a.cancel=()=>{o.delete(n),t=null},a};let l="undefined"!=typeof window?window.requestAnimationFrame:()=>{};r.use=e=>l=e,r.now="undefined"!=typeof performance?()=>performance.now():Date.now,r.batchedUpdates=e=>e(),r.catch=console.error,r.frameLoop="always",r.advance=()=>{"demand"!==r.frameLoop?console.warn("Cannot call the manual advancement of rafz whilst frameLoop is not set as demand"):R()};let g=-1,h=!1;function f(e,t){h?(t.delete(e),e(0)):(t.add(e),p())}function p(){g<0&&(g=0,"demand"!==r.frameLoop&&l(m))}function m(){~g&&(l(m),r.batchedUpdates(R))}function R(){let e=g;g=r.now();let t=u(g);t&&(y(c.splice(0,t),(e=>e.handler())),v.count-=t),o.flush(),a.flush(e?Math.min(64,g-e):16.667),d.flush(),i.flush(),s.flush()}function b(){let e=new Set,t=e;return{add(n){v.count+=t!=e||e.has(n)?0:1,e.add(n)},delete(n){return v.count-=t==e&&e.has(n)?1:0,e.delete(n)},flush(n){t.size&&(e=new Set,v.count-=t.size,y(t,(t=>t(n)&&e.add(t))),v.count+=e.size,t=e)}}}function y(e,t){e.forEach((e=>{try{t(e)}catch(n){r.catch(n)}}))}const v={count:0,clear(){g=-1,c=[],o=b(),a=b(),d=b(),i=b(),s=b(),v.count=0}};var _=n(67294);function w(){}const M=(e,t,n)=>Object.defineProperty(e,t,{value:n,writable:!0,configurable:!0}),x={arr:Array.isArray,obj:e=>!!e&&"Object"===e.constructor.name,fun:e=>"function"==typeof e,str:e=>"string"==typeof e,num:e=>"number"==typeof e,und:e=>void 0===e};function E(e,t){if(x.arr(e)){if(!x.arr(t)||e.length!==t.length)return!1;for(let n=0;n<e.length;n++)if(e[n]!==t[n])return!1;return!0}return e===t}const S=(e,t)=>e.forEach(t);function k(e,t,n){if(x.arr(e))for(let a=0;a<e.length;a++)t.call(n,e[a],`${a}`);else for(const a in e)e.hasOwnProperty(a)&&t.call(n,e[a],a)}const N=e=>x.und(e)?[]:x.arr(e)?e:[e];function D(e,t){if(e.size){const n=Array.from(e);e.clear(),S(n,t)}}const A=(e,...t)=>D(e,(e=>e(...t)));let j,T,L=null,I=!1,C=w;var O=Object.freeze({__proto__:null,get createStringInterpolator(){return j},get to(){return T},get colors(){return L},get skipAnimation(){return I},get willAdvance(){return C},assign:e=>{e.to&&(T=e.to),e.now&&(r.now=e.now),void 0!==e.colors&&(L=e.colors),null!=e.skipAnimation&&(I=e.skipAnimation),e.createStringInterpolator&&(j=e.createStringInterpolator),e.requestAnimationFrame&&r.use(e.requestAnimationFrame),e.batchedUpdates&&(r.batchedUpdates=e.batchedUpdates),e.willAdvance&&(C=e.willAdvance),e.frameLoop&&(r.frameLoop=e.frameLoop)}});const P=new Set;let z=[],B=[],F=0;const U={get idle(){return!P.size&&!z.length},start(e){F>e.priority?(P.add(e),r.onStart($)):(H(e),r(Y))},advance:Y,sort(e){if(F)r.onFrame((()=>U.sort(e)));else{const t=z.indexOf(e);~t&&(z.splice(t,1),q(e))}},clear(){z=[],P.clear()}};function $(){P.forEach(H),P.clear(),r(Y)}function H(e){z.includes(e)||q(e)}function q(e){z.splice(function(e,t){const n=e.findIndex(t);return n<0?e.length:n}(z,(t=>t.priority>e.priority)),0,e)}function Y(e){const t=B;for(let n=0;n<z.length;n++){const a=z[n];F=a.priority,a.idle||(C(a),a.advance(e),a.idle||t.push(a))}return F=0,B=z,B.length=0,z=t,z.length>0}const G={transparent:0,aliceblue:4042850303,antiquewhite:4209760255,aqua:16777215,aquamarine:2147472639,azure:4043309055,beige:4126530815,bisque:4293182719,black:255,blanchedalmond:4293643775,blue:65535,blueviolet:2318131967,brown:2771004159,burlywood:3736635391,burntsienna:3934150143,cadetblue:1604231423,chartreuse:2147418367,chocolate:3530104575,coral:4286533887,cornflowerblue:1687547391,cornsilk:4294499583,crimson:3692313855,cyan:16777215,darkblue:35839,darkcyan:9145343,darkgoldenrod:3095792639,darkgray:2846468607,darkgreen:6553855,darkgrey:2846468607,darkkhaki:3182914559,darkmagenta:2332068863,darkolivegreen:1433087999,darkorange:4287365375,darkorchid:2570243327,darkred:2332033279,darksalmon:3918953215,darkseagreen:2411499519,darkslateblue:1211993087,darkslategray:793726975,darkslategrey:793726975,darkturquoise:13554175,darkviolet:2483082239,deeppink:4279538687,deepskyblue:12582911,dimgray:1768516095,dimgrey:1768516095,dodgerblue:512819199,firebrick:2988581631,floralwhite:4294635775,forestgreen:579543807,fuchsia:4278255615,gainsboro:3705462015,ghostwhite:4177068031,gold:4292280575,goldenrod:3668254975,gray:2155905279,green:8388863,greenyellow:2919182335,grey:2155905279,honeydew:4043305215,hotpink:4285117695,indianred:3445382399,indigo:1258324735,ivory:4294963455,khaki:4041641215,lavender:3873897215,lavenderblush:4293981695,lawngreen:2096890111,lemonchiffon:4294626815,lightblue:2916673279,lightcoral:4034953471,lightcyan:3774873599,lightgoldenrodyellow:4210742015,lightgray:3553874943,lightgreen:2431553791,lightgrey:3553874943,lightpink:4290167295,lightsalmon:4288707327,lightseagreen:548580095,lightskyblue:2278488831,lightslategray:2005441023,lightslategrey:2005441023,lightsteelblue:2965692159,lightyellow:4294959359,lime:16711935,limegreen:852308735,linen:4210091775,magenta:4278255615,maroon:2147483903,mediumaquamarine:1724754687,mediumblue:52735,mediumorchid:3126187007,mediumpurple:2473647103,mediumseagreen:1018393087,mediumslateblue:2070474495,mediumspringgreen:16423679,mediumturquoise:1221709055,mediumvioletred:3340076543,midnightblue:421097727,mintcream:4127193855,mistyrose:4293190143,moccasin:4293178879,navajowhite:4292783615,navy:33023,oldlace:4260751103,olive:2155872511,olivedrab:1804477439,orange:4289003775,orangered:4282712319,orchid:3664828159,palegoldenrod:4008225535,palegreen:2566625535,paleturquoise:2951671551,palevioletred:3681588223,papayawhip:4293907967,peachpuff:4292524543,peru:3448061951,pink:4290825215,plum:3718307327,powderblue:2967529215,purple:2147516671,rebeccapurple:1714657791,red:4278190335,rosybrown:3163525119,royalblue:1097458175,saddlebrown:2336560127,salmon:4202722047,sandybrown:4104413439,seagreen:780883967,seashell:4294307583,sienna:2689740287,silver:3233857791,skyblue:2278484991,slateblue:1784335871,slategray:1887473919,slategrey:1887473919,snow:4294638335,springgreen:16744447,steelblue:1182971135,tan:3535047935,teal:8421631,thistle:3636451583,tomato:4284696575,turquoise:1088475391,violet:4001558271,wheat:4125012991,white:4294967295,whitesmoke:4126537215,yellow:4294902015,yellowgreen:2597139199},V="[-+]?\\d*\\.?\\d+",Q=V+"%";function W(...e){return"\\(\\s*("+e.join(")\\s*,\\s*(")+")\\s*\\)"}const K=new RegExp("rgb"+W(V,V,V)),Z=new RegExp("rgba"+W(V,V,V,V)),X=new RegExp("hsl"+W(V,Q,Q)),J=new RegExp("hsla"+W(V,Q,Q,V)),ee=/^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,te=/^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,ne=/^#([0-9a-fA-F]{6})$/,ae=/^#([0-9a-fA-F]{8})$/;function re(e,t,n){return n<0&&(n+=1),n>1&&(n-=1),n<1/6?e+6*(t-e)*n:n<.5?t:n<2/3?e+(t-e)*(2/3-n)*6:e}function ie(e,t,n){const a=n<.5?n*(1+t):n+t-n*t,r=2*n-a,i=re(r,a,e+1/3),o=re(r,a,e),d=re(r,a,e-1/3);return Math.round(255*i)<<24|Math.round(255*o)<<16|Math.round(255*d)<<8}function oe(e){const t=parseInt(e,10);return t<0?0:t>255?255:t}function de(e){return(parseFloat(e)%360+360)%360/360}function se(e){const t=parseFloat(e);return t<0?0:t>1?255:Math.round(255*t)}function ce(e){const t=parseFloat(e);return t<0?0:t>100?1:t/100}function ue(e){let t=function(e){let t;return"number"==typeof e?e>>>0===e&&e>=0&&e<=4294967295?e:null:(t=ne.exec(e))?parseInt(t[1]+"ff",16)>>>0:L&&void 0!==L[e]?L[e]:(t=K.exec(e))?(oe(t[1])<<24|oe(t[2])<<16|oe(t[3])<<8|255)>>>0:(t=Z.exec(e))?(oe(t[1])<<24|oe(t[2])<<16|oe(t[3])<<8|se(t[4]))>>>0:(t=ee.exec(e))?parseInt(t[1]+t[1]+t[2]+t[2]+t[3]+t[3]+"ff",16)>>>0:(t=ae.exec(e))?parseInt(t[1],16)>>>0:(t=te.exec(e))?parseInt(t[1]+t[1]+t[2]+t[2]+t[3]+t[3]+t[4]+t[4],16)>>>0:(t=X.exec(e))?(255|ie(de(t[1]),ce(t[2]),ce(t[3])))>>>0:(t=J.exec(e))?(ie(de(t[1]),ce(t[2]),ce(t[3]))|se(t[4]))>>>0:null}(e);return null===t?e:(t=t||0,`rgba(${(4278190080&t)>>>24}, ${(16711680&t)>>>16}, ${(65280&t)>>>8}, ${(255&t)/255})`)}const le=(e,t,n)=>{if(x.fun(e))return e;if(x.arr(e))return le({range:e,output:t,extrapolate:n});if(x.str(e.output[0]))return j(e);const a=e,r=a.output,i=a.range||[0,1],o=a.extrapolateLeft||a.extrapolate||"extend",d=a.extrapolateRight||a.extrapolate||"extend",s=a.easing||(e=>e);return e=>{const t=function(e,t){for(var n=1;n<t.length-1&&!(t[n]>=e);++n);return n-1}(e,i);return function(e,t,n,a,r,i,o,d,s){let c=s?s(e):e;if(c<t){if("identity"===o)return c;"clamp"===o&&(c=t)}if(c>n){if("identity"===d)return c;"clamp"===d&&(c=n)}if(a===r)return a;if(t===n)return e<=t?a:r;t===-1/0?c=-c:n===1/0?c-=t:c=(c-t)/(n-t);c=i(c),a===-1/0?c=-c:r===1/0?c+=a:c=c*(r-a)+a;return c}(e,i[t],i[t+1],r[t],r[t+1],s,o,d,a.map)}};function ge(){return ge=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},ge.apply(this,arguments)}const he=Symbol.for("FluidValue.get"),fe=Symbol.for("FluidValue.observers"),pe=e=>Boolean(e&&e[he]),me=e=>e&&e[he]?e[he]():e,Re=e=>e[fe]||null;function be(e,t){let n=e[fe];n&&n.forEach((e=>{!function(e,t){e.eventObserved?e.eventObserved(t):e(t)}(e,t)}))}class ye{constructor(e){if(this[he]=void 0,this[fe]=void 0,!e&&!(e=this.get))throw Error("Unknown getter");ve(this,e)}}const ve=(e,t)=>Me(e,he,t);function _e(e,t){if(e[he]){let n=e[fe];n||Me(e,fe,n=new Set),n.has(t)||(n.add(t),e.observerAdded&&e.observerAdded(n.size,t))}return t}function we(e,t){let n=e[fe];if(n&&n.has(t)){const a=n.size-1;a?n.delete(t):e[fe]=null,e.observerRemoved&&e.observerRemoved(a,t)}}const Me=(e,t,n)=>Object.defineProperty(e,t,{value:n,writable:!0,configurable:!0}),xe=/[+\-]?(?:0|[1-9]\d*)(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,Ee=/(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d\.]+%?\))/gi,Se=new RegExp(`(${xe.source})(%|[a-z]+)`,"i");let ke;const Ne=/rgba\(([0-9\.-]+), ([0-9\.-]+), ([0-9\.-]+), ([0-9\.-]+)\)/gi,De=(e,t,n,a,r)=>`rgba(${Math.round(t)}, ${Math.round(n)}, ${Math.round(a)}, ${r})`,Ae=e=>{ke||(ke=L?new RegExp(`(${Object.keys(L).join("|")})(?!\\w)`,"g"):/^\b$/);const t=e.output.map((e=>me(e).replace(Ee,ue).replace(ke,ue))),n=t.map((e=>e.match(xe).map(Number))),a=n[0].map(((e,t)=>n.map((e=>{if(!(t in e))throw Error('The arity of each "output" value must be equal');return e[t]})))).map((t=>le(ge({},e,{output:t}))));return e=>{var n;const r=!Se.test(t[0])&&(null==(n=t.find((e=>Se.test(e))))?void 0:n.replace(xe,""));let i=0;return t[0].replace(xe,(()=>`${a[i++](e)}${r||""}`)).replace(Ne,De)}},je="react-spring: ",Te=e=>{const t=e;let n=!1;if("function"!=typeof t)throw new TypeError(`${je}once requires a function parameter`);return(...e)=>{n||(t(...e),n=!0)}},Le=Te(console.warn);function Ie(){Le(`${je}The "interpolate" function is deprecated in v9 (use "to" instead)`)}const Ce=Te(console.warn);function Oe(){Ce(`${je}Directly calling start instead of using the api object is deprecated in v9 (use ".start" instead), this will be removed in later 0.X.0 versions`)}function Pe(e){return x.str(e)&&("#"==e[0]||/\d/.test(e)||e in(L||{}))}const ze=e=>(0,_.useEffect)(e,Be),Be=[];function Fe(){const e=(0,_.useState)()[1],t=(0,_.useState)(Ue)[0];return ze(t.unmount),()=>{t.current&&e({})}}function Ue(){const e={current:!0,unmount:()=>()=>{e.current=!1}};return e}function $e(e,t){const[n]=(0,_.useState)((()=>({inputs:t,result:e()}))),a=(0,_.useRef)(),r=a.current;let i=r;if(i){Boolean(t&&i.inputs&&function(e,t){if(e.length!==t.length)return!1;for(let n=0;n<e.length;n++)if(e[n]!==t[n])return!1;return!0}(t,i.inputs))||(i={inputs:t,result:e()})}else i=n;return(0,_.useEffect)((()=>{a.current=i,r==n&&(n.inputs=n.result=void 0)}),[i]),i.result}function He(e){const t=(0,_.useRef)();return(0,_.useEffect)((()=>{t.current=e})),t.current}const qe="undefined"!=typeof window&&window.document&&window.document.createElement?_.useLayoutEffect:_.useEffect},39998:function(e,t,n){"use strict";n.d(t,{animated:function(){return M},useSpring:function(){return a.useSpring}});var a=n(72351),r=n(73935),i=n(72804),o=n(97548);function d(e,t){if(null==e)return{};var n,a,r={},i=Object.keys(e);for(a=0;a<i.length;a++)n=i[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}const s=["style","children","scrollTop","scrollLeft"],c=/^--/;function u(e,t){return null==t||"boolean"==typeof t||""===t?"":"number"!=typeof t||0===t||c.test(e)||g.hasOwnProperty(e)&&g[e]?(""+t).trim():t+"px"}const l={};let g={animationIterationCount:!0,borderImageOutset:!0,borderImageSlice:!0,borderImageWidth:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,columns:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridRow:!0,gridRowEnd:!0,gridRowSpan:!0,gridRowStart:!0,gridColumn:!0,gridColumnEnd:!0,gridColumnSpan:!0,gridColumnStart:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,floodOpacity:!0,stopOpacity:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0};const h=["Webkit","Ms","Moz","O"];g=Object.keys(g).reduce(((e,t)=>(h.forEach((n=>e[((e,t)=>e+t.charAt(0).toUpperCase()+t.substring(1))(n,t)]=e[t])),e)),g);const f=["x","y","z"],p=/^(matrix|translate|scale|rotate|skew)/,m=/^(translate)/,R=/^(rotate|skew)/,b=(e,t)=>i.is.num(e)&&0!==e?e+t:e,y=(e,t)=>i.is.arr(e)?e.every((e=>y(e,t))):i.is.num(e)?e===t:parseFloat(e)===t;class v extends o.rS{constructor(e){let{x:t,y:n,z:a}=e,r=d(e,f);const o=[],s=[];(t||n||a)&&(o.push([t||0,n||0,a||0]),s.push((e=>[`translate3d(${e.map((e=>b(e,"px"))).join(",")})`,y(e,0)]))),(0,i.rU)(r,((e,t)=>{if("transform"===t)o.push([e||""]),s.push((e=>[e,""===e]));else if(p.test(t)){if(delete r[t],i.is.und(e))return;const n=m.test(t)?"px":R.test(t)?"deg":"";o.push((0,i.qo)(e)),s.push("rotate3d"===t?([e,t,a,r])=>[`rotate3d(${e},${t},${a},${b(r,n)})`,y(r,0)]:e=>[`${t}(${e.map((e=>b(e,n))).join(",")})`,y(e,t.startsWith("scale")?1:0)])}})),o.length&&(r.transform=new _(o,s)),super(r)}}class _ extends i.B0{constructor(e,t){super(),this._value=null,this.inputs=e,this.transforms=t}get(){return this._value||(this._value=this._get())}_get(){let e="",t=!0;return(0,i.S6)(this.inputs,((n,a)=>{const r=(0,i.je)(n[0]),[o,d]=this.transforms[a](i.is.arr(r)?r:n.map(i.je));e+=" "+o,t=t&&d})),t?"none":e}observerAdded(e){1==e&&(0,i.S6)(this.inputs,(e=>(0,i.S6)(e,(e=>(0,i.j$)(e)&&(0,i.UI)(e,this)))))}observerRemoved(e){0==e&&(0,i.S6)(this.inputs,(e=>(0,i.S6)(e,(e=>(0,i.j$)(e)&&(0,i.iL)(e,this)))))}eventObserved(e){"change"==e.type&&(this._value=null),(0,i.k0)(this,e)}}const w=["scrollTop","scrollLeft"];a.Globals.assign({batchedUpdates:r.unstable_batchedUpdates,createStringInterpolator:i.qS,colors:i.O9});const M=(0,o.Ld)(["a","abbr","address","area","article","aside","audio","b","base","bdi","bdo","big","blockquote","body","br","button","canvas","caption","cite","code","col","colgroup","data","datalist","dd","del","details","dfn","dialog","div","dl","dt","em","embed","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","img","input","ins","kbd","keygen","label","legend","li","link","main","map","mark","menu","menuitem","meta","meter","nav","noscript","object","ol","optgroup","option","output","p","param","picture","pre","progress","q","rp","rt","ruby","s","samp","script","section","select","small","source","span","strong","style","sub","summary","sup","table","tbody","td","textarea","tfoot","th","thead","time","title","tr","track","u","ul","var","video","wbr","circle","clipPath","defs","ellipse","foreignObject","g","image","line","linearGradient","mask","path","pattern","polygon","polyline","radialGradient","rect","stop","svg","text","tspan"],{applyAnimatedValues:function(e,t){if(!e.nodeType||!e.setAttribute)return!1;const n="filter"===e.nodeName||e.parentNode&&"filter"===e.parentNode.nodeName,a=t,{style:r,children:i,scrollTop:o,scrollLeft:g}=a,h=d(a,s),f=Object.values(h),p=Object.keys(h).map((t=>n||e.hasAttribute(t)?t:l[t]||(l[t]=t.replace(/([A-Z])/g,(e=>"-"+e.toLowerCase())))));void 0!==i&&(e.textContent=i);for(let d in r)if(r.hasOwnProperty(d)){const t=u(d,r[d]);c.test(d)?e.style.setProperty(d,t):e.style[d]=t}p.forEach(((t,n)=>{e.setAttribute(t,f[n])})),void 0!==o&&(e.scrollTop=o),void 0!==g&&(e.scrollLeft=g)},createAnimatedStyle:e=>new v(e),getComponentProps:e=>d(e,w)}).animated},17370:function(e,t,n){"use strict";const a=n(59787),r=/^[\da-fA-F]+$/,i=/^\d+$/,o=new WeakMap;function d(e){e=e.Parser.acorn||e;let t=o.get(e);if(!t){const n=e.tokTypes,a=e.TokContext,r=e.TokenType,i=new a("<tag",!1),d=new a("</tag",!1),s=new a("<tag>...</tag>",!0,!0),c={tc_oTag:i,tc_cTag:d,tc_expr:s},u={jsxName:new r("jsxName"),jsxText:new r("jsxText",{beforeExpr:!0}),jsxTagStart:new r("jsxTagStart",{startsExpr:!0}),jsxTagEnd:new r("jsxTagEnd")};u.jsxTagStart.updateContext=function(){this.context.push(s),this.context.push(i),this.exprAllowed=!1},u.jsxTagEnd.updateContext=function(e){let t=this.context.pop();t===i&&e===n.slash||t===d?(this.context.pop(),this.exprAllowed=this.curContext()===s):this.exprAllowed=!0},t={tokContexts:c,tokTypes:u},o.set(e,t)}return t}function s(e){return e?"JSXIdentifier"===e.type?e.name:"JSXNamespacedName"===e.type?e.namespace.name+":"+e.name.name:"JSXMemberExpression"===e.type?s(e.object)+"."+s(e.property):void 0:e}e.exports=function(e){return e=e||{},function(t){return function(e,t){const o=t.acorn||n(81597),c=d(o),u=o.tokTypes,l=c.tokTypes,g=o.tokContexts,h=c.tokContexts.tc_oTag,f=c.tokContexts.tc_cTag,p=c.tokContexts.tc_expr,m=o.isNewLine,R=o.isIdentifierStart,b=o.isIdentifierChar;return class extends t{static get acornJsx(){return c}jsx_readToken(){let e="",t=this.pos;for(;;){this.pos>=this.input.length&&this.raise(this.start,"Unterminated JSX contents");let n=this.input.charCodeAt(this.pos);switch(n){case 60:case 123:return this.pos===this.start?60===n&&this.exprAllowed?(++this.pos,this.finishToken(l.jsxTagStart)):this.getTokenFromCode(n):(e+=this.input.slice(t,this.pos),this.finishToken(l.jsxText,e));case 38:e+=this.input.slice(t,this.pos),e+=this.jsx_readEntity(),t=this.pos;break;case 62:case 125:this.raise(this.pos,"Unexpected token `"+this.input[this.pos]+"`. Did you mean `"+(62===n?"&gt;":"&rbrace;")+'` or `{"'+this.input[this.pos]+'"}`?');default:m(n)?(e+=this.input.slice(t,this.pos),e+=this.jsx_readNewLine(!0),t=this.pos):++this.pos}}}jsx_readNewLine(e){let t,n=this.input.charCodeAt(this.pos);return++this.pos,13===n&&10===this.input.charCodeAt(this.pos)?(++this.pos,t=e?"\n":"\r\n"):t=String.fromCharCode(n),this.options.locations&&(++this.curLine,this.lineStart=this.pos),t}jsx_readString(e){let t="",n=++this.pos;for(;;){this.pos>=this.input.length&&this.raise(this.start,"Unterminated string constant");let a=this.input.charCodeAt(this.pos);if(a===e)break;38===a?(t+=this.input.slice(n,this.pos),t+=this.jsx_readEntity(),n=this.pos):m(a)?(t+=this.input.slice(n,this.pos),t+=this.jsx_readNewLine(!1),n=this.pos):++this.pos}return t+=this.input.slice(n,this.pos++),this.finishToken(u.string,t)}jsx_readEntity(){let e,t="",n=0,o=this.input[this.pos];"&"!==o&&this.raise(this.pos,"Entity must start with an ampersand");let d=++this.pos;for(;this.pos<this.input.length&&n++<10;){if(o=this.input[this.pos++],";"===o){"#"===t[0]?"x"===t[1]?(t=t.substr(2),r.test(t)&&(e=String.fromCharCode(parseInt(t,16)))):(t=t.substr(1),i.test(t)&&(e=String.fromCharCode(parseInt(t,10)))):e=a[t];break}t+=o}return e||(this.pos=d,"&")}jsx_readWord(){let e,t=this.pos;do{e=this.input.charCodeAt(++this.pos)}while(b(e)||45===e);return this.finishToken(l.jsxName,this.input.slice(t,this.pos))}jsx_parseIdentifier(){let e=this.startNode();return this.type===l.jsxName?e.name=this.value:this.type.keyword?e.name=this.type.keyword:this.unexpected(),this.next(),this.finishNode(e,"JSXIdentifier")}jsx_parseNamespacedName(){let t=this.start,n=this.startLoc,a=this.jsx_parseIdentifier();if(!e.allowNamespaces||!this.eat(u.colon))return a;var r=this.startNodeAt(t,n);return r.namespace=a,r.name=this.jsx_parseIdentifier(),this.finishNode(r,"JSXNamespacedName")}jsx_parseElementName(){if(this.type===l.jsxTagEnd)return"";let t=this.start,n=this.startLoc,a=this.jsx_parseNamespacedName();for(this.type!==u.dot||"JSXNamespacedName"!==a.type||e.allowNamespacedObjects||this.unexpected();this.eat(u.dot);){let e=this.startNodeAt(t,n);e.object=a,e.property=this.jsx_parseIdentifier(),a=this.finishNode(e,"JSXMemberExpression")}return a}jsx_parseAttributeValue(){switch(this.type){case u.braceL:let e=this.jsx_parseExpressionContainer();return"JSXEmptyExpression"===e.expression.type&&this.raise(e.start,"JSX attributes must only be assigned a non-empty expression"),e;case l.jsxTagStart:case u.string:return this.parseExprAtom();default:this.raise(this.start,"JSX value should be either an expression or a quoted JSX text")}}jsx_parseEmptyExpression(){let e=this.startNodeAt(this.lastTokEnd,this.lastTokEndLoc);return this.finishNodeAt(e,"JSXEmptyExpression",this.start,this.startLoc)}jsx_parseExpressionContainer(){let e=this.startNode();return this.next(),e.expression=this.type===u.braceR?this.jsx_parseEmptyExpression():this.parseExpression(),this.expect(u.braceR),this.finishNode(e,"JSXExpressionContainer")}jsx_parseAttribute(){let e=this.startNode();return this.eat(u.braceL)?(this.expect(u.ellipsis),e.argument=this.parseMaybeAssign(),this.expect(u.braceR),this.finishNode(e,"JSXSpreadAttribute")):(e.name=this.jsx_parseNamespacedName(),e.value=this.eat(u.eq)?this.jsx_parseAttributeValue():null,this.finishNode(e,"JSXAttribute"))}jsx_parseOpeningElementAt(e,t){let n=this.startNodeAt(e,t);n.attributes=[];let a=this.jsx_parseElementName();for(a&&(n.name=a);this.type!==u.slash&&this.type!==l.jsxTagEnd;)n.attributes.push(this.jsx_parseAttribute());return n.selfClosing=this.eat(u.slash),this.expect(l.jsxTagEnd),this.finishNode(n,a?"JSXOpeningElement":"JSXOpeningFragment")}jsx_parseClosingElementAt(e,t){let n=this.startNodeAt(e,t),a=this.jsx_parseElementName();return a&&(n.name=a),this.expect(l.jsxTagEnd),this.finishNode(n,a?"JSXClosingElement":"JSXClosingFragment")}jsx_parseElementAt(e,t){let n=this.startNodeAt(e,t),a=[],r=this.jsx_parseOpeningElementAt(e,t),i=null;if(!r.selfClosing){e:for(;;)switch(this.type){case l.jsxTagStart:if(e=this.start,t=this.startLoc,this.next(),this.eat(u.slash)){i=this.jsx_parseClosingElementAt(e,t);break e}a.push(this.jsx_parseElementAt(e,t));break;case l.jsxText:a.push(this.parseExprAtom());break;case u.braceL:a.push(this.jsx_parseExpressionContainer());break;default:this.unexpected()}s(i.name)!==s(r.name)&&this.raise(i.start,"Expected corresponding JSX closing tag for <"+s(r.name)+">")}let o=r.name?"Element":"Fragment";return n["opening"+o]=r,n["closing"+o]=i,n.children=a,this.type===u.relational&&"<"===this.value&&this.raise(this.start,"Adjacent JSX elements must be wrapped in an enclosing tag"),this.finishNode(n,"JSX"+o)}jsx_parseText(){let e=this.parseLiteral(this.value);return e.type="JSXText",e}jsx_parseElement(){let e=this.start,t=this.startLoc;return this.next(),this.jsx_parseElementAt(e,t)}parseExprAtom(e){return this.type===l.jsxText?this.jsx_parseText():this.type===l.jsxTagStart?this.jsx_parseElement():super.parseExprAtom(e)}readToken(e){let t=this.curContext();if(t===p)return this.jsx_readToken();if(t===h||t===f){if(R(e))return this.jsx_readWord();if(62==e)return++this.pos,this.finishToken(l.jsxTagEnd);if((34===e||39===e)&&t==h)return this.jsx_readString(e)}return 60===e&&this.exprAllowed&&33!==this.input.charCodeAt(this.pos+1)?(++this.pos,this.finishToken(l.jsxTagStart)):super.readToken(e)}updateContext(e){if(this.type==u.braceL){var t=this.curContext();t==h?this.context.push(g.b_expr):t==p?this.context.push(g.b_tmpl):super.updateContext(e),this.exprAllowed=!0}else{if(this.type!==u.slash||e!==l.jsxTagStart)return super.updateContext(e);this.context.length-=2,this.context.push(f),this.exprAllowed=!1}}}}({allowNamespaces:!1!==e.allowNamespaces,allowNamespacedObjects:!!e.allowNamespacedObjects},t)}},Object.defineProperty(e.exports,"tokTypes",{get:function(){return d(n(81597)).tokTypes},configurable:!0,enumerable:!0})},59787:function(e){e.exports={quot:'"',amp:"&",apos:"'",lt:"<",gt:">",nbsp:" ",iexcl:"¡",cent:"¢",pound:"£",curren:"¤",yen:"¥",brvbar:"¦",sect:"§",uml:"¨",copy:"©",ordf:"ª",laquo:"«",not:"¬",shy:"­",reg:"®",macr:"¯",deg:"°",plusmn:"±",sup2:"²",sup3:"³",acute:"´",micro:"µ",para:"¶",middot:"·",cedil:"¸",sup1:"¹",ordm:"º",raquo:"»",frac14:"¼",frac12:"½",frac34:"¾",iquest:"¿",Agrave:"À",Aacute:"Á",Acirc:"Â",Atilde:"Ã",Auml:"Ä",Aring:"Å",AElig:"Æ",Ccedil:"Ç",Egrave:"È",Eacute:"É",Ecirc:"Ê",Euml:"Ë",Igrave:"Ì",Iacute:"Í",Icirc:"Î",Iuml:"Ï",ETH:"Ð",Ntilde:"Ñ",Ograve:"Ò",Oacute:"Ó",Ocirc:"Ô",Otilde:"Õ",Ouml:"Ö",times:"×",Oslash:"Ø",Ugrave:"Ù",Uacute:"Ú",Ucirc:"Û",Uuml:"Ü",Yacute:"Ý",THORN:"Þ",szlig:"ß",agrave:"à",aacute:"á",acirc:"â",atilde:"ã",auml:"ä",aring:"å",aelig:"æ",ccedil:"ç",egrave:"è",eacute:"é",ecirc:"ê",euml:"ë",igrave:"ì",iacute:"í",icirc:"î",iuml:"ï",eth:"ð",ntilde:"ñ",ograve:"ò",oacute:"ó",ocirc:"ô",otilde:"õ",ouml:"ö",divide:"÷",oslash:"ø",ugrave:"ù",uacute:"ú",ucirc:"û",uuml:"ü",yacute:"ý",thorn:"þ",yuml:"ÿ",OElig:"Œ",oelig:"œ",Scaron:"Š",scaron:"š",Yuml:"Ÿ",fnof:"ƒ",circ:"ˆ",tilde:"˜",Alpha:"Α",Beta:"Β",Gamma:"Γ",Delta:"Δ",Epsilon:"Ε",Zeta:"Ζ",Eta:"Η",Theta:"Θ",Iota:"Ι",Kappa:"Κ",Lambda:"Λ",Mu:"Μ",Nu:"Ν",Xi:"Ξ",Omicron:"Ο",Pi:"Π",Rho:"Ρ",Sigma:"Σ",Tau:"Τ",Upsilon:"Υ",Phi:"Φ",Chi:"Χ",Psi:"Ψ",Omega:"Ω",alpha:"α",beta:"β",gamma:"γ",delta:"δ",epsilon:"ε",zeta:"ζ",eta:"η",theta:"θ",iota:"ι",kappa:"κ",lambda:"λ",mu:"μ",nu:"ν",xi:"ξ",omicron:"ο",pi:"π",rho:"ρ",sigmaf:"ς",sigma:"σ",tau:"τ",upsilon:"υ",phi:"φ",chi:"χ",psi:"ψ",omega:"ω",thetasym:"ϑ",upsih:"ϒ",piv:"ϖ",ensp:" ",emsp:" ",thinsp:" ",zwnj:"‌",zwj:"‍",lrm:"‎",rlm:"‏",ndash:"–",mdash:"—",lsquo:"‘",rsquo:"’",sbquo:"‚",ldquo:"“",rdquo:"”",bdquo:"„",dagger:"†",Dagger:"‡",bull:"•",hellip:"…",permil:"‰",prime:"′",Prime:"″",lsaquo:"‹",rsaquo:"›",oline:"‾",frasl:"⁄",euro:"€",image:"ℑ",weierp:"℘",real:"ℜ",trade:"™",alefsym:"ℵ",larr:"←",uarr:"↑",rarr:"→",darr:"↓",harr:"↔",crarr:"↵",lArr:"⇐",uArr:"⇑",rArr:"⇒",dArr:"⇓",hArr:"⇔",forall:"∀",part:"∂",exist:"∃",empty:"∅",nabla:"∇",isin:"∈",notin:"∉",ni:"∋",prod:"∏",sum:"∑",minus:"−",lowast:"∗",radic:"√",prop:"∝",infin:"∞",ang:"∠",and:"∧",or:"∨",cap:"∩",cup:"∪",int:"∫",there4:"∴",sim:"∼",cong:"≅",asymp:"≈",ne:"≠",equiv:"≡",le:"≤",ge:"≥",sub:"⊂",sup:"⊃",nsub:"⊄",sube:"⊆",supe:"⊇",oplus:"⊕",otimes:"⊗",perp:"⊥",sdot:"⋅",lceil:"⌈",rceil:"⌉",lfloor:"⌊",rfloor:"⌋",lang:"〈",rang:"〉",loz:"◊",spades:"♠",clubs:"♣",hearts:"♥",diams:"♦"}},48854:function(e,t,n){"use strict";e=n.nmd(e);const a=(e,t)=>(...n)=>`[${e(...n)+t}m`,r=(e,t)=>(...n)=>{const a=e(...n);return`[${38+t};5;${a}m`},i=(e,t)=>(...n)=>{const a=e(...n);return`[${38+t};2;${a[0]};${a[1]};${a[2]}m`},o=e=>e,d=(e,t,n)=>[e,t,n],s=(e,t,n)=>{Object.defineProperty(e,t,{get:()=>{const a=n();return Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0}),a},enumerable:!0,configurable:!0})};let c;const u=(e,t,a,r)=>{void 0===c&&(c=n(31642));const i=r?10:0,o={};for(const[n,d]of Object.entries(c)){const r="ansi16"===n?"ansi":n;n===t?o[r]=e(a,i):"object"==typeof d&&(o[r]=e(d[t],i))}return o};Object.defineProperty(e,"exports",{enumerable:!0,get:function(){const e=new Map,t={modifier:{reset:[0,0],bold:[1,22],dim:[2,22],italic:[3,23],underline:[4,24],inverse:[7,27],hidden:[8,28],strikethrough:[9,29]},color:{black:[30,39],red:[31,39],green:[32,39],yellow:[33,39],blue:[34,39],magenta:[35,39],cyan:[36,39],white:[37,39],blackBright:[90,39],redBright:[91,39],greenBright:[92,39],yellowBright:[93,39],blueBright:[94,39],magentaBright:[95,39],cyanBright:[96,39],whiteBright:[97,39]},bgColor:{bgBlack:[40,49],bgRed:[41,49],bgGreen:[42,49],bgYellow:[43,49],bgBlue:[44,49],bgMagenta:[45,49],bgCyan:[46,49],bgWhite:[47,49],bgBlackBright:[100,49],bgRedBright:[101,49],bgGreenBright:[102,49],bgYellowBright:[103,49],bgBlueBright:[104,49],bgMagentaBright:[105,49],bgCyanBright:[106,49],bgWhiteBright:[107,49]}};t.color.gray=t.color.blackBright,t.bgColor.bgGray=t.bgColor.bgBlackBright,t.color.grey=t.color.blackBright,t.bgColor.bgGrey=t.bgColor.bgBlackBright;for(const[n,a]of Object.entries(t)){for(const[n,r]of Object.entries(a))t[n]={open:`[${r[0]}m`,close:`[${r[1]}m`},a[n]=t[n],e.set(r[0],r[1]);Object.defineProperty(t,n,{value:a,enumerable:!1})}return Object.defineProperty(t,"codes",{value:e,enumerable:!1}),t.color.close="",t.bgColor.close="",s(t.color,"ansi",(()=>u(a,"ansi16",o,!1))),s(t.color,"ansi256",(()=>u(r,"ansi256",o,!1))),s(t.color,"ansi16m",(()=>u(i,"rgb",d,!1))),s(t.bgColor,"ansi",(()=>u(a,"ansi16",o,!0))),s(t.bgColor,"ansi256",(()=>u(r,"ansi256",o,!0))),s(t.bgColor,"ansi16m",(()=>u(i,"rgb",d,!0))),t}})},99840:function(e,t,n){"use strict";const a=t;a.bignum=n(63785),a.define=n(79234).define,a.base=n(29913),a.constants=n(57624),a.decoders=n(50375),a.encoders=n(43886)},79234:function(e,t,n){"use strict";const a=n(43886),r=n(50375),i=n(70087);function o(e,t){this.name=e,this.body=t,this.decoders={},this.encoders={}}t.define=function(e,t){return new o(e,t)},o.prototype._createNamed=function(e){const t=this.name;function n(e){this._initNamed(e,t)}return i(n,e),n.prototype._initNamed=function(t,n){e.call(this,t,n)},new n(this)},o.prototype._getDecoder=function(e){return e=e||"der",this.decoders.hasOwnProperty(e)||(this.decoders[e]=this._createNamed(r[e])),this.decoders[e]},o.prototype.decode=function(e,t,n){return this._getDecoder(t).decode(e,n)},o.prototype._getEncoder=function(e){return e=e||"der",this.encoders.hasOwnProperty(e)||(this.encoders[e]=this._createNamed(a[e])),this.encoders[e]},o.prototype.encode=function(e,t,n){return this._getEncoder(t).encode(e,n)}},33370:function(e,t,n){"use strict";const a=n(70087),r=n(97298).b,i=n(21788).Buffer;function o(e,t){r.call(this,t),i.isBuffer(e)?(this.base=e,this.offset=0,this.length=e.length):this.error("Input not Buffer")}function d(e,t){if(Array.isArray(e))this.length=0,this.value=e.map((function(e){return d.isEncoderBuffer(e)||(e=new d(e,t)),this.length+=e.length,e}),this);else if("number"==typeof e){if(!(0<=e&&e<=255))return t.error("non-byte EncoderBuffer value");this.value=e,this.length=1}else if("string"==typeof e)this.value=e,this.length=i.byteLength(e);else{if(!i.isBuffer(e))return t.error("Unsupported type: "+typeof e);this.value=e,this.length=e.length}}a(o,r),t.C=o,o.isDecoderBuffer=function(e){if(e instanceof o)return!0;return"object"==typeof e&&i.isBuffer(e.base)&&"DecoderBuffer"===e.constructor.name&&"number"==typeof e.offset&&"number"==typeof e.length&&"function"==typeof e.save&&"function"==typeof e.restore&&"function"==typeof e.isEmpty&&"function"==typeof e.readUInt8&&"function"==typeof e.skip&&"function"==typeof e.raw},o.prototype.save=function(){return{offset:this.offset,reporter:r.prototype.save.call(this)}},o.prototype.restore=function(e){const t=new o(this.base);return t.offset=e.offset,t.length=this.offset,this.offset=e.offset,r.prototype.restore.call(this,e.reporter),t},o.prototype.isEmpty=function(){return this.offset===this.length},o.prototype.readUInt8=function(e){return this.offset+1<=this.length?this.base.readUInt8(this.offset++,!0):this.error(e||"DecoderBuffer overrun")},o.prototype.skip=function(e,t){if(!(this.offset+e<=this.length))return this.error(t||"DecoderBuffer overrun");const n=new o(this.base);return n._reporterState=this._reporterState,n.offset=this.offset,n.length=this.offset+e,this.offset+=e,n},o.prototype.raw=function(e){return this.base.slice(e?e.offset:this.offset,this.length)},t.R=d,d.isEncoderBuffer=function(e){if(e instanceof d)return!0;return"object"==typeof e&&"EncoderBuffer"===e.constructor.name&&"number"==typeof e.length&&"function"==typeof e.join},d.prototype.join=function(e,t){return e||(e=i.alloc(this.length)),t||(t=0),0===this.length||(Array.isArray(this.value)?this.value.forEach((function(n){n.join(e,t),t+=n.length})):("number"==typeof this.value?e[t]=this.value:"string"==typeof this.value?e.write(this.value,t):i.isBuffer(this.value)&&this.value.copy(e,t),t+=this.length)),e}},29913:function(e,t,n){"use strict";const a=t;a.Reporter=n(97298).b,a.DecoderBuffer=n(33370).C,a.EncoderBuffer=n(33370).R,a.Node=n(78718)},78718:function(e,t,n){"use strict";const a=n(97298).b,r=n(33370).R,i=n(33370).C,o=n(77859),d=["seq","seqof","set","setof","objid","bool","gentime","utctime","null_","enum","int","objDesc","bitstr","bmpstr","charstr","genstr","graphstr","ia5str","iso646str","numstr","octstr","printstr","t61str","unistr","utf8str","videostr"],s=["key","obj","use","optional","explicit","implicit","def","choice","any","contains"].concat(d);function c(e,t,n){const a={};this._baseState=a,a.name=n,a.enc=e,a.parent=t||null,a.children=null,a.tag=null,a.args=null,a.reverseArgs=null,a.choice=null,a.optional=!1,a.any=!1,a.obj=!1,a.use=null,a.useDecoder=null,a.key=null,a.default=null,a.explicit=null,a.implicit=null,a.contains=null,a.parent||(a.children=[],this._wrap())}e.exports=c;const u=["enc","parent","children","tag","args","reverseArgs","choice","optional","any","obj","use","alteredUse","key","default","explicit","implicit","contains"];c.prototype.clone=function(){const e=this._baseState,t={};u.forEach((function(n){t[n]=e[n]}));const n=new this.constructor(t.parent);return n._baseState=t,n},c.prototype._wrap=function(){const e=this._baseState;s.forEach((function(t){this[t]=function(){const n=new this.constructor(this);return e.children.push(n),n[t].apply(n,arguments)}}),this)},c.prototype._init=function(e){const t=this._baseState;o(null===t.parent),e.call(this),t.children=t.children.filter((function(e){return e._baseState.parent===this}),this),o.equal(t.children.length,1,"Root node can have only one child")},c.prototype._useArgs=function(e){const t=this._baseState,n=e.filter((function(e){return e instanceof this.constructor}),this);e=e.filter((function(e){return!(e instanceof this.constructor)}),this),0!==n.length&&(o(null===t.children),t.children=n,n.forEach((function(e){e._baseState.parent=this}),this)),0!==e.length&&(o(null===t.args),t.args=e,t.reverseArgs=e.map((function(e){if("object"!=typeof e||e.constructor!==Object)return e;const t={};return Object.keys(e).forEach((function(n){n==(0|n)&&(n|=0);const a=e[n];t[a]=n})),t})))},["_peekTag","_decodeTag","_use","_decodeStr","_decodeObjid","_decodeTime","_decodeNull","_decodeInt","_decodeBool","_decodeList","_encodeComposite","_encodeStr","_encodeObjid","_encodeTime","_encodeNull","_encodeInt","_encodeBool"].forEach((function(e){c.prototype[e]=function(){const t=this._baseState;throw new Error(e+" not implemented for encoding: "+t.enc)}})),d.forEach((function(e){c.prototype[e]=function(){const t=this._baseState,n=Array.prototype.slice.call(arguments);return o(null===t.tag),t.tag=e,this._useArgs(n),this}})),c.prototype.use=function(e){o(e);const t=this._baseState;return o(null===t.use),t.use=e,this},c.prototype.optional=function(){return this._baseState.optional=!0,this},c.prototype.def=function(e){const t=this._baseState;return o(null===t.default),t.default=e,t.optional=!0,this},c.prototype.explicit=function(e){const t=this._baseState;return o(null===t.explicit&&null===t.implicit),t.explicit=e,this},c.prototype.implicit=function(e){const t=this._baseState;return o(null===t.explicit&&null===t.implicit),t.implicit=e,this},c.prototype.obj=function(){const e=this._baseState,t=Array.prototype.slice.call(arguments);return e.obj=!0,0!==t.length&&this._useArgs(t),this},c.prototype.key=function(e){const t=this._baseState;return o(null===t.key),t.key=e,this},c.prototype.any=function(){return this._baseState.any=!0,this},c.prototype.choice=function(e){const t=this._baseState;return o(null===t.choice),t.choice=e,this._useArgs(Object.keys(e).map((function(t){return e[t]}))),this},c.prototype.contains=function(e){const t=this._baseState;return o(null===t.use),t.contains=e,this},c.prototype._decode=function(e,t){const n=this._baseState;if(null===n.parent)return e.wrapResult(n.children[0]._decode(e,t));let a,r=n.default,o=!0,d=null;if(null!==n.key&&(d=e.enterKey(n.key)),n.optional){let a=null;if(null!==n.explicit?a=n.explicit:null!==n.implicit?a=n.implicit:null!==n.tag&&(a=n.tag),null!==a||n.any){if(o=this._peekTag(e,a,n.any),e.isError(o))return o}else{const a=e.save();try{null===n.choice?this._decodeGeneric(n.tag,e,t):this._decodeChoice(e,t),o=!0}catch(s){o=!1}e.restore(a)}}if(n.obj&&o&&(a=e.enterObject()),o){if(null!==n.explicit){const t=this._decodeTag(e,n.explicit);if(e.isError(t))return t;e=t}const a=e.offset;if(null===n.use&&null===n.choice){let t;n.any&&(t=e.save());const a=this._decodeTag(e,null!==n.implicit?n.implicit:n.tag,n.any);if(e.isError(a))return a;n.any?r=e.raw(t):e=a}if(t&&t.track&&null!==n.tag&&t.track(e.path(),a,e.length,"tagged"),t&&t.track&&null!==n.tag&&t.track(e.path(),e.offset,e.length,"content"),n.any||(r=null===n.choice?this._decodeGeneric(n.tag,e,t):this._decodeChoice(e,t)),e.isError(r))return r;if(n.any||null!==n.choice||null===n.children||n.children.forEach((function(n){n._decode(e,t)})),n.contains&&("octstr"===n.tag||"bitstr"===n.tag)){const a=new i(r);r=this._getUse(n.contains,e._reporterState.obj)._decode(a,t)}}return n.obj&&o&&(r=e.leaveObject(a)),null===n.key||null===r&&!0!==o?null!==d&&e.exitKey(d):e.leaveKey(d,n.key,r),r},c.prototype._decodeGeneric=function(e,t,n){const a=this._baseState;return"seq"===e||"set"===e?null:"seqof"===e||"setof"===e?this._decodeList(t,e,a.args[0],n):/str$/.test(e)?this._decodeStr(t,e,n):"objid"===e&&a.args?this._decodeObjid(t,a.args[0],a.args[1],n):"objid"===e?this._decodeObjid(t,null,null,n):"gentime"===e||"utctime"===e?this._decodeTime(t,e,n):"null_"===e?this._decodeNull(t,n):"bool"===e?this._decodeBool(t,n):"objDesc"===e?this._decodeStr(t,e,n):"int"===e||"enum"===e?this._decodeInt(t,a.args&&a.args[0],n):null!==a.use?this._getUse(a.use,t._reporterState.obj)._decode(t,n):t.error("unknown tag: "+e)},c.prototype._getUse=function(e,t){const n=this._baseState;return n.useDecoder=this._use(e,t),o(null===n.useDecoder._baseState.parent),n.useDecoder=n.useDecoder._baseState.children[0],n.implicit!==n.useDecoder._baseState.implicit&&(n.useDecoder=n.useDecoder.clone(),n.useDecoder._baseState.implicit=n.implicit),n.useDecoder},c.prototype._decodeChoice=function(e,t){const n=this._baseState;let a=null,r=!1;return Object.keys(n.choice).some((function(i){const o=e.save(),d=n.choice[i];try{const n=d._decode(e,t);if(e.isError(n))return!1;a={type:i,value:n},r=!0}catch(s){return e.restore(o),!1}return!0}),this),r?a:e.error("Choice not matched")},c.prototype._createEncoderBuffer=function(e){return new r(e,this.reporter)},c.prototype._encode=function(e,t,n){const a=this._baseState;if(null!==a.default&&a.default===e)return;const r=this._encodeValue(e,t,n);return void 0===r||this._skipDefault(r,t,n)?void 0:r},c.prototype._encodeValue=function(e,t,n){const r=this._baseState;if(null===r.parent)return r.children[0]._encode(e,t||new a);let i=null;if(this.reporter=t,r.optional&&void 0===e){if(null===r.default)return;e=r.default}let o=null,d=!1;if(r.any)i=this._createEncoderBuffer(e);else if(r.choice)i=this._encodeChoice(e,t);else if(r.contains)o=this._getUse(r.contains,n)._encode(e,t),d=!0;else if(r.children)o=r.children.map((function(n){if("null_"===n._baseState.tag)return n._encode(null,t,e);if(null===n._baseState.key)return t.error("Child should have a key");const a=t.enterKey(n._baseState.key);if("object"!=typeof e)return t.error("Child expected, but input is not object");const r=n._encode(e[n._baseState.key],t,e);return t.leaveKey(a),r}),this).filter((function(e){return e})),o=this._createEncoderBuffer(o);else if("seqof"===r.tag||"setof"===r.tag){if(!r.args||1!==r.args.length)return t.error("Too many args for : "+r.tag);if(!Array.isArray(e))return t.error("seqof/setof, but data is not Array");const n=this.clone();n._baseState.implicit=null,o=this._createEncoderBuffer(e.map((function(n){const a=this._baseState;return this._getUse(a.args[0],e)._encode(n,t)}),n))}else null!==r.use?i=this._getUse(r.use,n)._encode(e,t):(o=this._encodePrimitive(r.tag,e),d=!0);if(!r.any&&null===r.choice){const e=null!==r.implicit?r.implicit:r.tag,n=null===r.implicit?"universal":"context";null===e?null===r.use&&t.error("Tag could be omitted only for .use()"):null===r.use&&(i=this._encodeComposite(e,d,n,o))}return null!==r.explicit&&(i=this._encodeComposite(r.explicit,!1,"context",i)),i},c.prototype._encodeChoice=function(e,t){const n=this._baseState,a=n.choice[e.type];return a||o(!1,e.type+" not found in "+JSON.stringify(Object.keys(n.choice))),a._encode(e.value,t)},c.prototype._encodePrimitive=function(e,t){const n=this._baseState;if(/str$/.test(e))return this._encodeStr(t,e);if("objid"===e&&n.args)return this._encodeObjid(t,n.reverseArgs[0],n.args[1]);if("objid"===e)return this._encodeObjid(t,null,null);if("gentime"===e||"utctime"===e)return this._encodeTime(t,e);if("null_"===e)return this._encodeNull();if("int"===e||"enum"===e)return this._encodeInt(t,n.args&&n.reverseArgs[0]);if("bool"===e)return this._encodeBool(t);if("objDesc"===e)return this._encodeStr(t,e);throw new Error("Unsupported tag: "+e)},c.prototype._isNumstr=function(e){return/^[0-9 ]*$/.test(e)},c.prototype._isPrintstr=function(e){return/^[A-Za-z0-9 '()+,-./:=?]*$/.test(e)}},97298:function(e,t,n){"use strict";const a=n(70087);function r(e){this._reporterState={obj:null,path:[],options:e||{},errors:[]}}function i(e,t){this.path=e,this.rethrow(t)}t.b=r,r.prototype.isError=function(e){return e instanceof i},r.prototype.save=function(){const e=this._reporterState;return{obj:e.obj,pathLen:e.path.length}},r.prototype.restore=function(e){const t=this._reporterState;t.obj=e.obj,t.path=t.path.slice(0,e.pathLen)},r.prototype.enterKey=function(e){return this._reporterState.path.push(e)},r.prototype.exitKey=function(e){const t=this._reporterState;t.path=t.path.slice(0,e-1)},r.prototype.leaveKey=function(e,t,n){const a=this._reporterState;this.exitKey(e),null!==a.obj&&(a.obj[t]=n)},r.prototype.path=function(){return this._reporterState.path.join("/")},r.prototype.enterObject=function(){const e=this._reporterState,t=e.obj;return e.obj={},t},r.prototype.leaveObject=function(e){const t=this._reporterState,n=t.obj;return t.obj=e,n},r.prototype.error=function(e){let t;const n=this._reporterState,a=e instanceof i;if(t=a?e:new i(n.path.map((function(e){return"["+JSON.stringify(e)+"]"})).join(""),e.message||e,e.stack),!n.options.partial)throw t;return a||n.errors.push(t),t},r.prototype.wrapResult=function(e){const t=this._reporterState;return t.options.partial?{result:this.isError(e)?null:e,errors:t.errors}:e},a(i,Error),i.prototype.rethrow=function(e){if(this.message=e+" at: "+(this.path||"(shallow)"),Error.captureStackTrace&&Error.captureStackTrace(this,i),!this.stack)try{throw new Error(this.message)}catch(t){this.stack=t.stack}return this}},60643:function(e,t){"use strict";function n(e){const t={};return Object.keys(e).forEach((function(n){(0|n)==n&&(n|=0);const a=e[n];t[a]=n})),t}t.tagClass={0:"universal",1:"application",2:"context",3:"private"},t.tagClassByName=n(t.tagClass),t.tag={0:"end",1:"bool",2:"int",3:"bitstr",4:"octstr",5:"null_",6:"objid",7:"objDesc",8:"external",9:"real",10:"enum",11:"embed",12:"utf8str",13:"relativeOid",16:"seq",17:"set",18:"numstr",19:"printstr",20:"t61str",21:"videostr",22:"ia5str",23:"utctime",24:"gentime",25:"graphstr",26:"iso646str",27:"genstr",28:"unistr",29:"charstr",30:"bmpstr"},t.tagByName=n(t.tag)},57624:function(e,t,n){"use strict";const a=t;a._reverse=function(e){const t={};return Object.keys(e).forEach((function(n){(0|n)==n&&(n|=0);const a=e[n];t[a]=n})),t},a.der=n(60643)},38306:function(e,t,n){"use strict";const a=n(70087),r=n(63785),i=n(33370).C,o=n(78718),d=n(60643);function s(e){this.enc="der",this.name=e.name,this.entity=e,this.tree=new c,this.tree._init(e.body)}function c(e){o.call(this,"der",e)}function u(e,t){let n=e.readUInt8(t);if(e.isError(n))return n;const a=d.tagClass[n>>6],r=0==(32&n);if(31==(31&n)){let a=n;for(n=0;128==(128&a);){if(a=e.readUInt8(t),e.isError(a))return a;n<<=7,n|=127&a}}else n&=31;return{cls:a,primitive:r,tag:n,tagStr:d.tag[n]}}function l(e,t,n){let a=e.readUInt8(n);if(e.isError(a))return a;if(!t&&128===a)return null;if(0==(128&a))return a;const r=127&a;if(r>4)return e.error("length octect is too long");a=0;for(let i=0;i<r;i++){a<<=8;const t=e.readUInt8(n);if(e.isError(t))return t;a|=t}return a}e.exports=s,s.prototype.decode=function(e,t){return i.isDecoderBuffer(e)||(e=new i(e,t)),this.tree._decode(e,t)},a(c,o),c.prototype._peekTag=function(e,t,n){if(e.isEmpty())return!1;const a=e.save(),r=u(e,'Failed to peek tag: "'+t+'"');return e.isError(r)?r:(e.restore(a),r.tag===t||r.tagStr===t||r.tagStr+"of"===t||n)},c.prototype._decodeTag=function(e,t,n){const a=u(e,'Failed to decode tag of "'+t+'"');if(e.isError(a))return a;let r=l(e,a.primitive,'Failed to get length of "'+t+'"');if(e.isError(r))return r;if(!n&&a.tag!==t&&a.tagStr!==t&&a.tagStr+"of"!==t)return e.error('Failed to match tag: "'+t+'"');if(a.primitive||null!==r)return e.skip(r,'Failed to match body of: "'+t+'"');const i=e.save(),o=this._skipUntilEnd(e,'Failed to skip indefinite length body: "'+this.tag+'"');return e.isError(o)?o:(r=e.offset-i.offset,e.restore(i),e.skip(r,'Failed to match body of: "'+t+'"'))},c.prototype._skipUntilEnd=function(e,t){for(;;){const n=u(e,t);if(e.isError(n))return n;const a=l(e,n.primitive,t);if(e.isError(a))return a;let r;if(r=n.primitive||null!==a?e.skip(a):this._skipUntilEnd(e,t),e.isError(r))return r;if("end"===n.tagStr)break}},c.prototype._decodeList=function(e,t,n,a){const r=[];for(;!e.isEmpty();){const t=this._peekTag(e,"end");if(e.isError(t))return t;const i=n.decode(e,"der",a);if(e.isError(i)&&t)break;r.push(i)}return r},c.prototype._decodeStr=function(e,t){if("bitstr"===t){const t=e.readUInt8();return e.isError(t)?t:{unused:t,data:e.raw()}}if("bmpstr"===t){const t=e.raw();if(t.length%2==1)return e.error("Decoding of string type: bmpstr length mismatch");let n="";for(let e=0;e<t.length/2;e++)n+=String.fromCharCode(t.readUInt16BE(2*e));return n}if("numstr"===t){const t=e.raw().toString("ascii");return this._isNumstr(t)?t:e.error("Decoding of string type: numstr unsupported characters")}if("octstr"===t)return e.raw();if("objDesc"===t)return e.raw();if("printstr"===t){const t=e.raw().toString("ascii");return this._isPrintstr(t)?t:e.error("Decoding of string type: printstr unsupported characters")}return/str$/.test(t)?e.raw().toString():e.error("Decoding of string type: "+t+" unsupported")},c.prototype._decodeObjid=function(e,t,n){let a;const r=[];let i=0,o=0;for(;!e.isEmpty();)o=e.readUInt8(),i<<=7,i|=127&o,0==(128&o)&&(r.push(i),i=0);128&o&&r.push(i);const d=r[0]/40|0,s=r[0]%40;if(a=n?r:[d,s].concat(r.slice(1)),t){let e=t[a.join(" ")];void 0===e&&(e=t[a.join(".")]),void 0!==e&&(a=e)}return a},c.prototype._decodeTime=function(e,t){const n=e.raw().toString();let a,r,i,o,d,s;if("gentime"===t)a=0|n.slice(0,4),r=0|n.slice(4,6),i=0|n.slice(6,8),o=0|n.slice(8,10),d=0|n.slice(10,12),s=0|n.slice(12,14);else{if("utctime"!==t)return e.error("Decoding "+t+" time is not supported yet");a=0|n.slice(0,2),r=0|n.slice(2,4),i=0|n.slice(4,6),o=0|n.slice(6,8),d=0|n.slice(8,10),s=0|n.slice(10,12),a=a<70?2e3+a:1900+a}return Date.UTC(a,r-1,i,o,d,s,0)},c.prototype._decodeNull=function(){return null},c.prototype._decodeBool=function(e){const t=e.readUInt8();return e.isError(t)?t:0!==t},c.prototype._decodeInt=function(e,t){const n=e.raw();let a=new r(n);return t&&(a=t[a.toString(10)]||a),a},c.prototype._use=function(e,t){return"function"==typeof e&&(e=e(t)),e._getDecoder("der").tree}},50375:function(e,t,n){"use strict";const a=t;a.der=n(38306),a.pem=n(98033)},98033:function(e,t,n){"use strict";const a=n(70087),r=n(21788).Buffer,i=n(38306);function o(e){i.call(this,e),this.enc="pem"}a(o,i),e.exports=o,o.prototype.decode=function(e,t){const n=e.toString().split(/[\r\n]+/g),a=t.label.toUpperCase(),o=/^-----(BEGIN|END) ([^-]+)-----$/;let d=-1,s=-1;for(let r=0;r<n.length;r++){const e=n[r].match(o);if(null!==e&&e[2]===a){if(-1!==d){if("END"!==e[1])break;s=r;break}if("BEGIN"!==e[1])break;d=r}}if(-1===d||-1===s)throw new Error("PEM section not found for: "+a);const c=n.slice(d+1,s).join("");c.replace(/[^a-z0-9+/=]+/gi,"");const u=r.from(c,"base64");return i.prototype.decode.call(this,u,t)}},91584:function(e,t,n){"use strict";const a=n(70087),r=n(21788).Buffer,i=n(78718),o=n(60643);function d(e){this.enc="der",this.name=e.name,this.entity=e,this.tree=new s,this.tree._init(e.body)}function s(e){i.call(this,"der",e)}function c(e){return e<10?"0"+e:e}e.exports=d,d.prototype.encode=function(e,t){return this.tree._encode(e,t).join()},a(s,i),s.prototype._encodeComposite=function(e,t,n,a){const i=function(e,t,n,a){let r;"seqof"===e?e="seq":"setof"===e&&(e="set");if(o.tagByName.hasOwnProperty(e))r=o.tagByName[e];else{if("number"!=typeof e||(0|e)!==e)return a.error("Unknown tag: "+e);r=e}if(r>=31)return a.error("Multi-octet tag encoding unsupported");t||(r|=32);return r|=o.tagClassByName[n||"universal"]<<6,r}(e,t,n,this.reporter);if(a.length<128){const e=r.alloc(2);return e[0]=i,e[1]=a.length,this._createEncoderBuffer([e,a])}let d=1;for(let r=a.length;r>=256;r>>=8)d++;const s=r.alloc(2+d);s[0]=i,s[1]=128|d;for(let r=1+d,o=a.length;o>0;r--,o>>=8)s[r]=255&o;return this._createEncoderBuffer([s,a])},s.prototype._encodeStr=function(e,t){if("bitstr"===t)return this._createEncoderBuffer([0|e.unused,e.data]);if("bmpstr"===t){const t=r.alloc(2*e.length);for(let n=0;n<e.length;n++)t.writeUInt16BE(e.charCodeAt(n),2*n);return this._createEncoderBuffer(t)}return"numstr"===t?this._isNumstr(e)?this._createEncoderBuffer(e):this.reporter.error("Encoding of string type: numstr supports only digits and space"):"printstr"===t?this._isPrintstr(e)?this._createEncoderBuffer(e):this.reporter.error("Encoding of string type: printstr supports only latin upper and lower case letters, digits, space, apostrophe, left and rigth parenthesis, plus sign, comma, hyphen, dot, slash, colon, equal sign, question mark"):/str$/.test(t)||"objDesc"===t?this._createEncoderBuffer(e):this.reporter.error("Encoding of string type: "+t+" unsupported")},s.prototype._encodeObjid=function(e,t,n){if("string"==typeof e){if(!t)return this.reporter.error("string objid given, but no values map found");if(!t.hasOwnProperty(e))return this.reporter.error("objid not found in values map");e=t[e].split(/[\s.]+/g);for(let t=0;t<e.length;t++)e[t]|=0}else if(Array.isArray(e)){e=e.slice();for(let t=0;t<e.length;t++)e[t]|=0}if(!Array.isArray(e))return this.reporter.error("objid() should be either array or string, got: "+JSON.stringify(e));if(!n){if(e[1]>=40)return this.reporter.error("Second objid identifier OOB");e.splice(0,2,40*e[0]+e[1])}let a=0;for(let r=0;r<e.length;r++){let t=e[r];for(a++;t>=128;t>>=7)a++}const i=r.alloc(a);let o=i.length-1;for(let r=e.length-1;r>=0;r--){let t=e[r];for(i[o--]=127&t;(t>>=7)>0;)i[o--]=128|127&t}return this._createEncoderBuffer(i)},s.prototype._encodeTime=function(e,t){let n;const a=new Date(e);return"gentime"===t?n=[c(a.getUTCFullYear()),c(a.getUTCMonth()+1),c(a.getUTCDate()),c(a.getUTCHours()),c(a.getUTCMinutes()),c(a.getUTCSeconds()),"Z"].join(""):"utctime"===t?n=[c(a.getUTCFullYear()%100),c(a.getUTCMonth()+1),c(a.getUTCDate()),c(a.getUTCHours()),c(a.getUTCMinutes()),c(a.getUTCSeconds()),"Z"].join(""):this.reporter.error("Encoding "+t+" time is not supported yet"),this._encodeStr(n,"octstr")},s.prototype._encodeNull=function(){return this._createEncoderBuffer("")},s.prototype._encodeInt=function(e,t){if("string"==typeof e){if(!t)return this.reporter.error("String int or enum given, but no values map");if(!t.hasOwnProperty(e))return this.reporter.error("Values map doesn't contain: "+JSON.stringify(e));e=t[e]}if("number"!=typeof e&&!r.isBuffer(e)){const t=e.toArray();!e.sign&&128&t[0]&&t.unshift(0),e=r.from(t)}if(r.isBuffer(e)){let t=e.length;0===e.length&&t++;const n=r.alloc(t);return e.copy(n),0===e.length&&(n[0]=0),this._createEncoderBuffer(n)}if(e<128)return this._createEncoderBuffer(e);if(e<256)return this._createEncoderBuffer([0,e]);let n=1;for(let r=e;r>=256;r>>=8)n++;const a=new Array(n);for(let r=a.length-1;r>=0;r--)a[r]=255&e,e>>=8;return 128&a[0]&&a.unshift(0),this._createEncoderBuffer(r.from(a))},s.prototype._encodeBool=function(e){return this._createEncoderBuffer(e?255:0)},s.prototype._use=function(e,t){return"function"==typeof e&&(e=e(t)),e._getEncoder("der").tree},s.prototype._skipDefault=function(e,t,n){const a=this._baseState;let r;if(null===a.default)return!1;const i=e.join();if(void 0===a.defaultBuffer&&(a.defaultBuffer=this._encodeValue(a.default,t,n).join()),i.length!==a.defaultBuffer.length)return!1;for(r=0;r<i.length;r++)if(i[r]!==a.defaultBuffer[r])return!1;return!0}},43886:function(e,t,n){"use strict";const a=t;a.der=n(91584),a.pem=n(46927)},46927:function(e,t,n){"use strict";const a=n(70087),r=n(91584);function i(e){r.call(this,e),this.enc="pem"}a(i,r),e.exports=i,i.prototype.encode=function(e,t){const n=r.prototype.encode.call(this,e).toString("base64"),a=["-----BEGIN "+t.label+"-----"];for(let r=0;r<n.length;r+=64)a.push(n.slice(r,r+64));return a.push("-----END "+t.label+"-----"),a.join("\n")}},24782:function(e,t){"use strict";t.byteLength=function(e){var t=d(e),n=t[0],a=t[1];return 3*(n+a)/4-a},t.toByteArray=function(e){var t,n,i=d(e),o=i[0],s=i[1],c=new r(function(e,t,n){return 3*(t+n)/4-n}(0,o,s)),u=0,l=s>0?o-4:o;for(n=0;n<l;n+=4)t=a[e.charCodeAt(n)]<<18|a[e.charCodeAt(n+1)]<<12|a[e.charCodeAt(n+2)]<<6|a[e.charCodeAt(n+3)],c[u++]=t>>16&255,c[u++]=t>>8&255,c[u++]=255&t;2===s&&(t=a[e.charCodeAt(n)]<<2|a[e.charCodeAt(n+1)]>>4,c[u++]=255&t);1===s&&(t=a[e.charCodeAt(n)]<<10|a[e.charCodeAt(n+1)]<<4|a[e.charCodeAt(n+2)]>>2,c[u++]=t>>8&255,c[u++]=255&t);return c},t.fromByteArray=function(e){for(var t,a=e.length,r=a%3,i=[],o=16383,d=0,c=a-r;d<c;d+=o)i.push(s(e,d,d+o>c?c:d+o));1===r?(t=e[a-1],i.push(n[t>>2]+n[t<<4&63]+"==")):2===r&&(t=(e[a-2]<<8)+e[a-1],i.push(n[t>>10]+n[t>>4&63]+n[t<<2&63]+"="));return i.join("")};for(var n=[],a=[],r="undefined"!=typeof Uint8Array?Uint8Array:Array,i="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",o=0;o<64;++o)n[o]=i[o],a[i.charCodeAt(o)]=o;function d(e){var t=e.length;if(t%4>0)throw new Error("Invalid string. Length must be a multiple of 4");var n=e.indexOf("=");return-1===n&&(n=t),[n,n===t?0:4-n%4]}function s(e,t,a){for(var r,i,o=[],d=t;d<a;d+=3)r=(e[d]<<16&16711680)+(e[d+1]<<8&65280)+(255&e[d+2]),o.push(n[(i=r)>>18&63]+n[i>>12&63]+n[i>>6&63]+n[63&i]);return o.join("")}a["-".charCodeAt(0)]=62,a["_".charCodeAt(0)]=63},63785:function(e,t,n){!function(e,t){"use strict";function a(e,t){if(!e)throw new Error(t||"Assertion failed")}function r(e,t){e.super_=t;var n=function(){};n.prototype=t.prototype,e.prototype=new n,e.prototype.constructor=e}function i(e,t,n){if(i.isBN(e))return e;this.negative=0,this.words=null,this.length=0,this.red=null,null!==e&&("le"!==t&&"be"!==t||(n=t,t=10),this._init(e||0,t||10,n||"be"))}var o;"object"==typeof e?e.exports=i:t.BN=i,i.BN=i,i.wordSize=26;try{o="undefined"!=typeof window&&void 0!==window.Buffer?window.Buffer:n(45545).Buffer}catch(E){}function d(e,t){var n=e.charCodeAt(t);return n>=65&&n<=70?n-55:n>=97&&n<=102?n-87:n-48&15}function s(e,t,n){var a=d(e,n);return n-1>=t&&(a|=d(e,n-1)<<4),a}function c(e,t,n,a){for(var r=0,i=Math.min(e.length,n),o=t;o<i;o++){var d=e.charCodeAt(o)-48;r*=a,r+=d>=49?d-49+10:d>=17?d-17+10:d}return r}i.isBN=function(e){return e instanceof i||null!==e&&"object"==typeof e&&e.constructor.wordSize===i.wordSize&&Array.isArray(e.words)},i.max=function(e,t){return e.cmp(t)>0?e:t},i.min=function(e,t){return e.cmp(t)<0?e:t},i.prototype._init=function(e,t,n){if("number"==typeof e)return this._initNumber(e,t,n);if("object"==typeof e)return this._initArray(e,t,n);"hex"===t&&(t=16),a(t===(0|t)&&t>=2&&t<=36);var r=0;"-"===(e=e.toString().replace(/\s+/g,""))[0]&&(r++,this.negative=1),r<e.length&&(16===t?this._parseHex(e,r,n):(this._parseBase(e,t,r),"le"===n&&this._initArray(this.toArray(),t,n)))},i.prototype._initNumber=function(e,t,n){e<0&&(this.negative=1,e=-e),e<67108864?(this.words=[67108863&e],this.length=1):e<4503599627370496?(this.words=[67108863&e,e/67108864&67108863],this.length=2):(a(e<9007199254740992),this.words=[67108863&e,e/67108864&67108863,1],this.length=3),"le"===n&&this._initArray(this.toArray(),t,n)},i.prototype._initArray=function(e,t,n){if(a("number"==typeof e.length),e.length<=0)return this.words=[0],this.length=1,this;this.length=Math.ceil(e.length/3),this.words=new Array(this.length);for(var r=0;r<this.length;r++)this.words[r]=0;var i,o,d=0;if("be"===n)for(r=e.length-1,i=0;r>=0;r-=3)o=e[r]|e[r-1]<<8|e[r-2]<<16,this.words[i]|=o<<d&67108863,this.words[i+1]=o>>>26-d&67108863,(d+=24)>=26&&(d-=26,i++);else if("le"===n)for(r=0,i=0;r<e.length;r+=3)o=e[r]|e[r+1]<<8|e[r+2]<<16,this.words[i]|=o<<d&67108863,this.words[i+1]=o>>>26-d&67108863,(d+=24)>=26&&(d-=26,i++);return this.strip()},i.prototype._parseHex=function(e,t,n){this.length=Math.ceil((e.length-t)/6),this.words=new Array(this.length);for(var a=0;a<this.length;a++)this.words[a]=0;var r,i=0,o=0;if("be"===n)for(a=e.length-1;a>=t;a-=2)r=s(e,t,a)<<i,this.words[o]|=67108863&r,i>=18?(i-=18,o+=1,this.words[o]|=r>>>26):i+=8;else for(a=(e.length-t)%2==0?t+1:t;a<e.length;a+=2)r=s(e,t,a)<<i,this.words[o]|=67108863&r,i>=18?(i-=18,o+=1,this.words[o]|=r>>>26):i+=8;this.strip()},i.prototype._parseBase=function(e,t,n){this.words=[0],this.length=1;for(var a=0,r=1;r<=67108863;r*=t)a++;a--,r=r/t|0;for(var i=e.length-n,o=i%a,d=Math.min(i,i-o)+n,s=0,u=n;u<d;u+=a)s=c(e,u,u+a,t),this.imuln(r),this.words[0]+s<67108864?this.words[0]+=s:this._iaddn(s);if(0!==o){var l=1;for(s=c(e,u,e.length,t),u=0;u<o;u++)l*=t;this.imuln(l),this.words[0]+s<67108864?this.words[0]+=s:this._iaddn(s)}this.strip()},i.prototype.copy=function(e){e.words=new Array(this.length);for(var t=0;t<this.length;t++)e.words[t]=this.words[t];e.length=this.length,e.negative=this.negative,e.red=this.red},i.prototype.clone=function(){var e=new i(null);return this.copy(e),e},i.prototype._expand=function(e){for(;this.length<e;)this.words[this.length++]=0;return this},i.prototype.strip=function(){for(;this.length>1&&0===this.words[this.length-1];)this.length--;return this._normSign()},i.prototype._normSign=function(){return 1===this.length&&0===this.words[0]&&(this.negative=0),this},i.prototype.inspect=function(){return(this.red?"<BN-R: ":"<BN: ")+this.toString(16)+">"};var u=["","0","00","000","0000","00000","000000","0000000","00000000","000000000","0000000000","00000000000","000000000000","0000000000000","00000000000000","000000000000000","0000000000000000","00000000000000000","000000000000000000","0000000000000000000","00000000000000000000","000000000000000000000","0000000000000000000000","00000000000000000000000","000000000000000000000000","0000000000000000000000000"],l=[0,0,25,16,12,11,10,9,8,8,7,7,7,7,6,6,6,6,6,6,6,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5],g=[0,0,33554432,43046721,16777216,48828125,60466176,40353607,16777216,43046721,1e7,19487171,35831808,62748517,7529536,11390625,16777216,24137569,34012224,47045881,64e6,4084101,5153632,6436343,7962624,9765625,11881376,14348907,17210368,20511149,243e5,28629151,33554432,39135393,45435424,52521875,60466176];function h(e,t,n){n.negative=t.negative^e.negative;var a=e.length+t.length|0;n.length=a,a=a-1|0;var r=0|e.words[0],i=0|t.words[0],o=r*i,d=67108863&o,s=o/67108864|0;n.words[0]=d;for(var c=1;c<a;c++){for(var u=s>>>26,l=67108863&s,g=Math.min(c,t.length-1),h=Math.max(0,c-e.length+1);h<=g;h++){var f=c-h|0;u+=(o=(r=0|e.words[f])*(i=0|t.words[h])+l)/67108864|0,l=67108863&o}n.words[c]=0|l,s=0|u}return 0!==s?n.words[c]=0|s:n.length--,n.strip()}i.prototype.toString=function(e,t){var n;if(t=0|t||1,16===(e=e||10)||"hex"===e){n="";for(var r=0,i=0,o=0;o<this.length;o++){var d=this.words[o],s=(16777215&(d<<r|i)).toString(16);n=0!==(i=d>>>24-r&16777215)||o!==this.length-1?u[6-s.length]+s+n:s+n,(r+=2)>=26&&(r-=26,o--)}for(0!==i&&(n=i.toString(16)+n);n.length%t!=0;)n="0"+n;return 0!==this.negative&&(n="-"+n),n}if(e===(0|e)&&e>=2&&e<=36){var c=l[e],h=g[e];n="";var f=this.clone();for(f.negative=0;!f.isZero();){var p=f.modn(h).toString(e);n=(f=f.idivn(h)).isZero()?p+n:u[c-p.length]+p+n}for(this.isZero()&&(n="0"+n);n.length%t!=0;)n="0"+n;return 0!==this.negative&&(n="-"+n),n}a(!1,"Base should be between 2 and 36")},i.prototype.toNumber=function(){var e=this.words[0];return 2===this.length?e+=67108864*this.words[1]:3===this.length&&1===this.words[2]?e+=4503599627370496+67108864*this.words[1]:this.length>2&&a(!1,"Number can only safely store up to 53 bits"),0!==this.negative?-e:e},i.prototype.toJSON=function(){return this.toString(16)},i.prototype.toBuffer=function(e,t){return a(void 0!==o),this.toArrayLike(o,e,t)},i.prototype.toArray=function(e,t){return this.toArrayLike(Array,e,t)},i.prototype.toArrayLike=function(e,t,n){var r=this.byteLength(),i=n||Math.max(1,r);a(r<=i,"byte array longer than desired length"),a(i>0,"Requested array length <= 0"),this.strip();var o,d,s="le"===t,c=new e(i),u=this.clone();if(s){for(d=0;!u.isZero();d++)o=u.andln(255),u.iushrn(8),c[d]=o;for(;d<i;d++)c[d]=0}else{for(d=0;d<i-r;d++)c[d]=0;for(d=0;!u.isZero();d++)o=u.andln(255),u.iushrn(8),c[i-d-1]=o}return c},Math.clz32?i.prototype._countBits=function(e){return 32-Math.clz32(e)}:i.prototype._countBits=function(e){var t=e,n=0;return t>=4096&&(n+=13,t>>>=13),t>=64&&(n+=7,t>>>=7),t>=8&&(n+=4,t>>>=4),t>=2&&(n+=2,t>>>=2),n+t},i.prototype._zeroBits=function(e){if(0===e)return 26;var t=e,n=0;return 0==(8191&t)&&(n+=13,t>>>=13),0==(127&t)&&(n+=7,t>>>=7),0==(15&t)&&(n+=4,t>>>=4),0==(3&t)&&(n+=2,t>>>=2),0==(1&t)&&n++,n},i.prototype.bitLength=function(){var e=this.words[this.length-1],t=this._countBits(e);return 26*(this.length-1)+t},i.prototype.zeroBits=function(){if(this.isZero())return 0;for(var e=0,t=0;t<this.length;t++){var n=this._zeroBits(this.words[t]);if(e+=n,26!==n)break}return e},i.prototype.byteLength=function(){return Math.ceil(this.bitLength()/8)},i.prototype.toTwos=function(e){return 0!==this.negative?this.abs().inotn(e).iaddn(1):this.clone()},i.prototype.fromTwos=function(e){return this.testn(e-1)?this.notn(e).iaddn(1).ineg():this.clone()},i.prototype.isNeg=function(){return 0!==this.negative},i.prototype.neg=function(){return this.clone().ineg()},i.prototype.ineg=function(){return this.isZero()||(this.negative^=1),this},i.prototype.iuor=function(e){for(;this.length<e.length;)this.words[this.length++]=0;for(var t=0;t<e.length;t++)this.words[t]=this.words[t]|e.words[t];return this.strip()},i.prototype.ior=function(e){return a(0==(this.negative|e.negative)),this.iuor(e)},i.prototype.or=function(e){return this.length>e.length?this.clone().ior(e):e.clone().ior(this)},i.prototype.uor=function(e){return this.length>e.length?this.clone().iuor(e):e.clone().iuor(this)},i.prototype.iuand=function(e){var t;t=this.length>e.length?e:this;for(var n=0;n<t.length;n++)this.words[n]=this.words[n]&e.words[n];return this.length=t.length,this.strip()},i.prototype.iand=function(e){return a(0==(this.negative|e.negative)),this.iuand(e)},i.prototype.and=function(e){return this.length>e.length?this.clone().iand(e):e.clone().iand(this)},i.prototype.uand=function(e){return this.length>e.length?this.clone().iuand(e):e.clone().iuand(this)},i.prototype.iuxor=function(e){var t,n;this.length>e.length?(t=this,n=e):(t=e,n=this);for(var a=0;a<n.length;a++)this.words[a]=t.words[a]^n.words[a];if(this!==t)for(;a<t.length;a++)this.words[a]=t.words[a];return this.length=t.length,this.strip()},i.prototype.ixor=function(e){return a(0==(this.negative|e.negative)),this.iuxor(e)},i.prototype.xor=function(e){return this.length>e.length?this.clone().ixor(e):e.clone().ixor(this)},i.prototype.uxor=function(e){return this.length>e.length?this.clone().iuxor(e):e.clone().iuxor(this)},i.prototype.inotn=function(e){a("number"==typeof e&&e>=0);var t=0|Math.ceil(e/26),n=e%26;this._expand(t),n>0&&t--;for(var r=0;r<t;r++)this.words[r]=67108863&~this.words[r];return n>0&&(this.words[r]=~this.words[r]&67108863>>26-n),this.strip()},i.prototype.notn=function(e){return this.clone().inotn(e)},i.prototype.setn=function(e,t){a("number"==typeof e&&e>=0);var n=e/26|0,r=e%26;return this._expand(n+1),this.words[n]=t?this.words[n]|1<<r:this.words[n]&~(1<<r),this.strip()},i.prototype.iadd=function(e){var t,n,a;if(0!==this.negative&&0===e.negative)return this.negative=0,t=this.isub(e),this.negative^=1,this._normSign();if(0===this.negative&&0!==e.negative)return e.negative=0,t=this.isub(e),e.negative=1,t._normSign();this.length>e.length?(n=this,a=e):(n=e,a=this);for(var r=0,i=0;i<a.length;i++)t=(0|n.words[i])+(0|a.words[i])+r,this.words[i]=67108863&t,r=t>>>26;for(;0!==r&&i<n.length;i++)t=(0|n.words[i])+r,this.words[i]=67108863&t,r=t>>>26;if(this.length=n.length,0!==r)this.words[this.length]=r,this.length++;else if(n!==this)for(;i<n.length;i++)this.words[i]=n.words[i];return this},i.prototype.add=function(e){var t;return 0!==e.negative&&0===this.negative?(e.negative=0,t=this.sub(e),e.negative^=1,t):0===e.negative&&0!==this.negative?(this.negative=0,t=e.sub(this),this.negative=1,t):this.length>e.length?this.clone().iadd(e):e.clone().iadd(this)},i.prototype.isub=function(e){if(0!==e.negative){e.negative=0;var t=this.iadd(e);return e.negative=1,t._normSign()}if(0!==this.negative)return this.negative=0,this.iadd(e),this.negative=1,this._normSign();var n,a,r=this.cmp(e);if(0===r)return this.negative=0,this.length=1,this.words[0]=0,this;r>0?(n=this,a=e):(n=e,a=this);for(var i=0,o=0;o<a.length;o++)i=(t=(0|n.words[o])-(0|a.words[o])+i)>>26,this.words[o]=67108863&t;for(;0!==i&&o<n.length;o++)i=(t=(0|n.words[o])+i)>>26,this.words[o]=67108863&t;if(0===i&&o<n.length&&n!==this)for(;o<n.length;o++)this.words[o]=n.words[o];return this.length=Math.max(this.length,o),n!==this&&(this.negative=1),this.strip()},i.prototype.sub=function(e){return this.clone().isub(e)};var f=function(e,t,n){var a,r,i,o=e.words,d=t.words,s=n.words,c=0,u=0|o[0],l=8191&u,g=u>>>13,h=0|o[1],f=8191&h,p=h>>>13,m=0|o[2],R=8191&m,b=m>>>13,y=0|o[3],v=8191&y,_=y>>>13,w=0|o[4],M=8191&w,x=w>>>13,E=0|o[5],S=8191&E,k=E>>>13,N=0|o[6],D=8191&N,A=N>>>13,j=0|o[7],T=8191&j,L=j>>>13,I=0|o[8],C=8191&I,O=I>>>13,P=0|o[9],z=8191&P,B=P>>>13,F=0|d[0],U=8191&F,$=F>>>13,H=0|d[1],q=8191&H,Y=H>>>13,G=0|d[2],V=8191&G,Q=G>>>13,W=0|d[3],K=8191&W,Z=W>>>13,X=0|d[4],J=8191&X,ee=X>>>13,te=0|d[5],ne=8191&te,ae=te>>>13,re=0|d[6],ie=8191&re,oe=re>>>13,de=0|d[7],se=8191&de,ce=de>>>13,ue=0|d[8],le=8191&ue,ge=ue>>>13,he=0|d[9],fe=8191&he,pe=he>>>13;n.negative=e.negative^t.negative,n.length=19;var me=(c+(a=Math.imul(l,U))|0)+((8191&(r=(r=Math.imul(l,$))+Math.imul(g,U)|0))<<13)|0;c=((i=Math.imul(g,$))+(r>>>13)|0)+(me>>>26)|0,me&=67108863,a=Math.imul(f,U),r=(r=Math.imul(f,$))+Math.imul(p,U)|0,i=Math.imul(p,$);var Re=(c+(a=a+Math.imul(l,q)|0)|0)+((8191&(r=(r=r+Math.imul(l,Y)|0)+Math.imul(g,q)|0))<<13)|0;c=((i=i+Math.imul(g,Y)|0)+(r>>>13)|0)+(Re>>>26)|0,Re&=67108863,a=Math.imul(R,U),r=(r=Math.imul(R,$))+Math.imul(b,U)|0,i=Math.imul(b,$),a=a+Math.imul(f,q)|0,r=(r=r+Math.imul(f,Y)|0)+Math.imul(p,q)|0,i=i+Math.imul(p,Y)|0;var be=(c+(a=a+Math.imul(l,V)|0)|0)+((8191&(r=(r=r+Math.imul(l,Q)|0)+Math.imul(g,V)|0))<<13)|0;c=((i=i+Math.imul(g,Q)|0)+(r>>>13)|0)+(be>>>26)|0,be&=67108863,a=Math.imul(v,U),r=(r=Math.imul(v,$))+Math.imul(_,U)|0,i=Math.imul(_,$),a=a+Math.imul(R,q)|0,r=(r=r+Math.imul(R,Y)|0)+Math.imul(b,q)|0,i=i+Math.imul(b,Y)|0,a=a+Math.imul(f,V)|0,r=(r=r+Math.imul(f,Q)|0)+Math.imul(p,V)|0,i=i+Math.imul(p,Q)|0;var ye=(c+(a=a+Math.imul(l,K)|0)|0)+((8191&(r=(r=r+Math.imul(l,Z)|0)+Math.imul(g,K)|0))<<13)|0;c=((i=i+Math.imul(g,Z)|0)+(r>>>13)|0)+(ye>>>26)|0,ye&=67108863,a=Math.imul(M,U),r=(r=Math.imul(M,$))+Math.imul(x,U)|0,i=Math.imul(x,$),a=a+Math.imul(v,q)|0,r=(r=r+Math.imul(v,Y)|0)+Math.imul(_,q)|0,i=i+Math.imul(_,Y)|0,a=a+Math.imul(R,V)|0,r=(r=r+Math.imul(R,Q)|0)+Math.imul(b,V)|0,i=i+Math.imul(b,Q)|0,a=a+Math.imul(f,K)|0,r=(r=r+Math.imul(f,Z)|0)+Math.imul(p,K)|0,i=i+Math.imul(p,Z)|0;var ve=(c+(a=a+Math.imul(l,J)|0)|0)+((8191&(r=(r=r+Math.imul(l,ee)|0)+Math.imul(g,J)|0))<<13)|0;c=((i=i+Math.imul(g,ee)|0)+(r>>>13)|0)+(ve>>>26)|0,ve&=67108863,a=Math.imul(S,U),r=(r=Math.imul(S,$))+Math.imul(k,U)|0,i=Math.imul(k,$),a=a+Math.imul(M,q)|0,r=(r=r+Math.imul(M,Y)|0)+Math.imul(x,q)|0,i=i+Math.imul(x,Y)|0,a=a+Math.imul(v,V)|0,r=(r=r+Math.imul(v,Q)|0)+Math.imul(_,V)|0,i=i+Math.imul(_,Q)|0,a=a+Math.imul(R,K)|0,r=(r=r+Math.imul(R,Z)|0)+Math.imul(b,K)|0,i=i+Math.imul(b,Z)|0,a=a+Math.imul(f,J)|0,r=(r=r+Math.imul(f,ee)|0)+Math.imul(p,J)|0,i=i+Math.imul(p,ee)|0;var _e=(c+(a=a+Math.imul(l,ne)|0)|0)+((8191&(r=(r=r+Math.imul(l,ae)|0)+Math.imul(g,ne)|0))<<13)|0;c=((i=i+Math.imul(g,ae)|0)+(r>>>13)|0)+(_e>>>26)|0,_e&=67108863,a=Math.imul(D,U),r=(r=Math.imul(D,$))+Math.imul(A,U)|0,i=Math.imul(A,$),a=a+Math.imul(S,q)|0,r=(r=r+Math.imul(S,Y)|0)+Math.imul(k,q)|0,i=i+Math.imul(k,Y)|0,a=a+Math.imul(M,V)|0,r=(r=r+Math.imul(M,Q)|0)+Math.imul(x,V)|0,i=i+Math.imul(x,Q)|0,a=a+Math.imul(v,K)|0,r=(r=r+Math.imul(v,Z)|0)+Math.imul(_,K)|0,i=i+Math.imul(_,Z)|0,a=a+Math.imul(R,J)|0,r=(r=r+Math.imul(R,ee)|0)+Math.imul(b,J)|0,i=i+Math.imul(b,ee)|0,a=a+Math.imul(f,ne)|0,r=(r=r+Math.imul(f,ae)|0)+Math.imul(p,ne)|0,i=i+Math.imul(p,ae)|0;var we=(c+(a=a+Math.imul(l,ie)|0)|0)+((8191&(r=(r=r+Math.imul(l,oe)|0)+Math.imul(g,ie)|0))<<13)|0;c=((i=i+Math.imul(g,oe)|0)+(r>>>13)|0)+(we>>>26)|0,we&=67108863,a=Math.imul(T,U),r=(r=Math.imul(T,$))+Math.imul(L,U)|0,i=Math.imul(L,$),a=a+Math.imul(D,q)|0,r=(r=r+Math.imul(D,Y)|0)+Math.imul(A,q)|0,i=i+Math.imul(A,Y)|0,a=a+Math.imul(S,V)|0,r=(r=r+Math.imul(S,Q)|0)+Math.imul(k,V)|0,i=i+Math.imul(k,Q)|0,a=a+Math.imul(M,K)|0,r=(r=r+Math.imul(M,Z)|0)+Math.imul(x,K)|0,i=i+Math.imul(x,Z)|0,a=a+Math.imul(v,J)|0,r=(r=r+Math.imul(v,ee)|0)+Math.imul(_,J)|0,i=i+Math.imul(_,ee)|0,a=a+Math.imul(R,ne)|0,r=(r=r+Math.imul(R,ae)|0)+Math.imul(b,ne)|0,i=i+Math.imul(b,ae)|0,a=a+Math.imul(f,ie)|0,r=(r=r+Math.imul(f,oe)|0)+Math.imul(p,ie)|0,i=i+Math.imul(p,oe)|0;var Me=(c+(a=a+Math.imul(l,se)|0)|0)+((8191&(r=(r=r+Math.imul(l,ce)|0)+Math.imul(g,se)|0))<<13)|0;c=((i=i+Math.imul(g,ce)|0)+(r>>>13)|0)+(Me>>>26)|0,Me&=67108863,a=Math.imul(C,U),r=(r=Math.imul(C,$))+Math.imul(O,U)|0,i=Math.imul(O,$),a=a+Math.imul(T,q)|0,r=(r=r+Math.imul(T,Y)|0)+Math.imul(L,q)|0,i=i+Math.imul(L,Y)|0,a=a+Math.imul(D,V)|0,r=(r=r+Math.imul(D,Q)|0)+Math.imul(A,V)|0,i=i+Math.imul(A,Q)|0,a=a+Math.imul(S,K)|0,r=(r=r+Math.imul(S,Z)|0)+Math.imul(k,K)|0,i=i+Math.imul(k,Z)|0,a=a+Math.imul(M,J)|0,r=(r=r+Math.imul(M,ee)|0)+Math.imul(x,J)|0,i=i+Math.imul(x,ee)|0,a=a+Math.imul(v,ne)|0,r=(r=r+Math.imul(v,ae)|0)+Math.imul(_,ne)|0,i=i+Math.imul(_,ae)|0,a=a+Math.imul(R,ie)|0,r=(r=r+Math.imul(R,oe)|0)+Math.imul(b,ie)|0,i=i+Math.imul(b,oe)|0,a=a+Math.imul(f,se)|0,r=(r=r+Math.imul(f,ce)|0)+Math.imul(p,se)|0,i=i+Math.imul(p,ce)|0;var xe=(c+(a=a+Math.imul(l,le)|0)|0)+((8191&(r=(r=r+Math.imul(l,ge)|0)+Math.imul(g,le)|0))<<13)|0;c=((i=i+Math.imul(g,ge)|0)+(r>>>13)|0)+(xe>>>26)|0,xe&=67108863,a=Math.imul(z,U),r=(r=Math.imul(z,$))+Math.imul(B,U)|0,i=Math.imul(B,$),a=a+Math.imul(C,q)|0,r=(r=r+Math.imul(C,Y)|0)+Math.imul(O,q)|0,i=i+Math.imul(O,Y)|0,a=a+Math.imul(T,V)|0,r=(r=r+Math.imul(T,Q)|0)+Math.imul(L,V)|0,i=i+Math.imul(L,Q)|0,a=a+Math.imul(D,K)|0,r=(r=r+Math.imul(D,Z)|0)+Math.imul(A,K)|0,i=i+Math.imul(A,Z)|0,a=a+Math.imul(S,J)|0,r=(r=r+Math.imul(S,ee)|0)+Math.imul(k,J)|0,i=i+Math.imul(k,ee)|0,a=a+Math.imul(M,ne)|0,r=(r=r+Math.imul(M,ae)|0)+Math.imul(x,ne)|0,i=i+Math.imul(x,ae)|0,a=a+Math.imul(v,ie)|0,r=(r=r+Math.imul(v,oe)|0)+Math.imul(_,ie)|0,i=i+Math.imul(_,oe)|0,a=a+Math.imul(R,se)|0,r=(r=r+Math.imul(R,ce)|0)+Math.imul(b,se)|0,i=i+Math.imul(b,ce)|0,a=a+Math.imul(f,le)|0,r=(r=r+Math.imul(f,ge)|0)+Math.imul(p,le)|0,i=i+Math.imul(p,ge)|0;var Ee=(c+(a=a+Math.imul(l,fe)|0)|0)+((8191&(r=(r=r+Math.imul(l,pe)|0)+Math.imul(g,fe)|0))<<13)|0;c=((i=i+Math.imul(g,pe)|0)+(r>>>13)|0)+(Ee>>>26)|0,Ee&=67108863,a=Math.imul(z,q),r=(r=Math.imul(z,Y))+Math.imul(B,q)|0,i=Math.imul(B,Y),a=a+Math.imul(C,V)|0,r=(r=r+Math.imul(C,Q)|0)+Math.imul(O,V)|0,i=i+Math.imul(O,Q)|0,a=a+Math.imul(T,K)|0,r=(r=r+Math.imul(T,Z)|0)+Math.imul(L,K)|0,i=i+Math.imul(L,Z)|0,a=a+Math.imul(D,J)|0,r=(r=r+Math.imul(D,ee)|0)+Math.imul(A,J)|0,i=i+Math.imul(A,ee)|0,a=a+Math.imul(S,ne)|0,r=(r=r+Math.imul(S,ae)|0)+Math.imul(k,ne)|0,i=i+Math.imul(k,ae)|0,a=a+Math.imul(M,ie)|0,r=(r=r+Math.imul(M,oe)|0)+Math.imul(x,ie)|0,i=i+Math.imul(x,oe)|0,a=a+Math.imul(v,se)|0,r=(r=r+Math.imul(v,ce)|0)+Math.imul(_,se)|0,i=i+Math.imul(_,ce)|0,a=a+Math.imul(R,le)|0,r=(r=r+Math.imul(R,ge)|0)+Math.imul(b,le)|0,i=i+Math.imul(b,ge)|0;var Se=(c+(a=a+Math.imul(f,fe)|0)|0)+((8191&(r=(r=r+Math.imul(f,pe)|0)+Math.imul(p,fe)|0))<<13)|0;c=((i=i+Math.imul(p,pe)|0)+(r>>>13)|0)+(Se>>>26)|0,Se&=67108863,a=Math.imul(z,V),r=(r=Math.imul(z,Q))+Math.imul(B,V)|0,i=Math.imul(B,Q),a=a+Math.imul(C,K)|0,r=(r=r+Math.imul(C,Z)|0)+Math.imul(O,K)|0,i=i+Math.imul(O,Z)|0,a=a+Math.imul(T,J)|0,r=(r=r+Math.imul(T,ee)|0)+Math.imul(L,J)|0,i=i+Math.imul(L,ee)|0,a=a+Math.imul(D,ne)|0,r=(r=r+Math.imul(D,ae)|0)+Math.imul(A,ne)|0,i=i+Math.imul(A,ae)|0,a=a+Math.imul(S,ie)|0,r=(r=r+Math.imul(S,oe)|0)+Math.imul(k,ie)|0,i=i+Math.imul(k,oe)|0,a=a+Math.imul(M,se)|0,r=(r=r+Math.imul(M,ce)|0)+Math.imul(x,se)|0,i=i+Math.imul(x,ce)|0,a=a+Math.imul(v,le)|0,r=(r=r+Math.imul(v,ge)|0)+Math.imul(_,le)|0,i=i+Math.imul(_,ge)|0;var ke=(c+(a=a+Math.imul(R,fe)|0)|0)+((8191&(r=(r=r+Math.imul(R,pe)|0)+Math.imul(b,fe)|0))<<13)|0;c=((i=i+Math.imul(b,pe)|0)+(r>>>13)|0)+(ke>>>26)|0,ke&=67108863,a=Math.imul(z,K),r=(r=Math.imul(z,Z))+Math.imul(B,K)|0,i=Math.imul(B,Z),a=a+Math.imul(C,J)|0,r=(r=r+Math.imul(C,ee)|0)+Math.imul(O,J)|0,i=i+Math.imul(O,ee)|0,a=a+Math.imul(T,ne)|0,r=(r=r+Math.imul(T,ae)|0)+Math.imul(L,ne)|0,i=i+Math.imul(L,ae)|0,a=a+Math.imul(D,ie)|0,r=(r=r+Math.imul(D,oe)|0)+Math.imul(A,ie)|0,i=i+Math.imul(A,oe)|0,a=a+Math.imul(S,se)|0,r=(r=r+Math.imul(S,ce)|0)+Math.imul(k,se)|0,i=i+Math.imul(k,ce)|0,a=a+Math.imul(M,le)|0,r=(r=r+Math.imul(M,ge)|0)+Math.imul(x,le)|0,i=i+Math.imul(x,ge)|0;var Ne=(c+(a=a+Math.imul(v,fe)|0)|0)+((8191&(r=(r=r+Math.imul(v,pe)|0)+Math.imul(_,fe)|0))<<13)|0;c=((i=i+Math.imul(_,pe)|0)+(r>>>13)|0)+(Ne>>>26)|0,Ne&=67108863,a=Math.imul(z,J),r=(r=Math.imul(z,ee))+Math.imul(B,J)|0,i=Math.imul(B,ee),a=a+Math.imul(C,ne)|0,r=(r=r+Math.imul(C,ae)|0)+Math.imul(O,ne)|0,i=i+Math.imul(O,ae)|0,a=a+Math.imul(T,ie)|0,r=(r=r+Math.imul(T,oe)|0)+Math.imul(L,ie)|0,i=i+Math.imul(L,oe)|0,a=a+Math.imul(D,se)|0,r=(r=r+Math.imul(D,ce)|0)+Math.imul(A,se)|0,i=i+Math.imul(A,ce)|0,a=a+Math.imul(S,le)|0,r=(r=r+Math.imul(S,ge)|0)+Math.imul(k,le)|0,i=i+Math.imul(k,ge)|0;var De=(c+(a=a+Math.imul(M,fe)|0)|0)+((8191&(r=(r=r+Math.imul(M,pe)|0)+Math.imul(x,fe)|0))<<13)|0;c=((i=i+Math.imul(x,pe)|0)+(r>>>13)|0)+(De>>>26)|0,De&=67108863,a=Math.imul(z,ne),r=(r=Math.imul(z,ae))+Math.imul(B,ne)|0,i=Math.imul(B,ae),a=a+Math.imul(C,ie)|0,r=(r=r+Math.imul(C,oe)|0)+Math.imul(O,ie)|0,i=i+Math.imul(O,oe)|0,a=a+Math.imul(T,se)|0,r=(r=r+Math.imul(T,ce)|0)+Math.imul(L,se)|0,i=i+Math.imul(L,ce)|0,a=a+Math.imul(D,le)|0,r=(r=r+Math.imul(D,ge)|0)+Math.imul(A,le)|0,i=i+Math.imul(A,ge)|0;var Ae=(c+(a=a+Math.imul(S,fe)|0)|0)+((8191&(r=(r=r+Math.imul(S,pe)|0)+Math.imul(k,fe)|0))<<13)|0;c=((i=i+Math.imul(k,pe)|0)+(r>>>13)|0)+(Ae>>>26)|0,Ae&=67108863,a=Math.imul(z,ie),r=(r=Math.imul(z,oe))+Math.imul(B,ie)|0,i=Math.imul(B,oe),a=a+Math.imul(C,se)|0,r=(r=r+Math.imul(C,ce)|0)+Math.imul(O,se)|0,i=i+Math.imul(O,ce)|0,a=a+Math.imul(T,le)|0,r=(r=r+Math.imul(T,ge)|0)+Math.imul(L,le)|0,i=i+Math.imul(L,ge)|0;var je=(c+(a=a+Math.imul(D,fe)|0)|0)+((8191&(r=(r=r+Math.imul(D,pe)|0)+Math.imul(A,fe)|0))<<13)|0;c=((i=i+Math.imul(A,pe)|0)+(r>>>13)|0)+(je>>>26)|0,je&=67108863,a=Math.imul(z,se),r=(r=Math.imul(z,ce))+Math.imul(B,se)|0,i=Math.imul(B,ce),a=a+Math.imul(C,le)|0,r=(r=r+Math.imul(C,ge)|0)+Math.imul(O,le)|0,i=i+Math.imul(O,ge)|0;var Te=(c+(a=a+Math.imul(T,fe)|0)|0)+((8191&(r=(r=r+Math.imul(T,pe)|0)+Math.imul(L,fe)|0))<<13)|0;c=((i=i+Math.imul(L,pe)|0)+(r>>>13)|0)+(Te>>>26)|0,Te&=67108863,a=Math.imul(z,le),r=(r=Math.imul(z,ge))+Math.imul(B,le)|0,i=Math.imul(B,ge);var Le=(c+(a=a+Math.imul(C,fe)|0)|0)+((8191&(r=(r=r+Math.imul(C,pe)|0)+Math.imul(O,fe)|0))<<13)|0;c=((i=i+Math.imul(O,pe)|0)+(r>>>13)|0)+(Le>>>26)|0,Le&=67108863;var Ie=(c+(a=Math.imul(z,fe))|0)+((8191&(r=(r=Math.imul(z,pe))+Math.imul(B,fe)|0))<<13)|0;return c=((i=Math.imul(B,pe))+(r>>>13)|0)+(Ie>>>26)|0,Ie&=67108863,s[0]=me,s[1]=Re,s[2]=be,s[3]=ye,s[4]=ve,s[5]=_e,s[6]=we,s[7]=Me,s[8]=xe,s[9]=Ee,s[10]=Se,s[11]=ke,s[12]=Ne,s[13]=De,s[14]=Ae,s[15]=je,s[16]=Te,s[17]=Le,s[18]=Ie,0!==c&&(s[19]=c,n.length++),n};function p(e,t,n){return(new m).mulp(e,t,n)}function m(e,t){this.x=e,this.y=t}Math.imul||(f=h),i.prototype.mulTo=function(e,t){var n,a=this.length+e.length;return n=10===this.length&&10===e.length?f(this,e,t):a<63?h(this,e,t):a<1024?function(e,t,n){n.negative=t.negative^e.negative,n.length=e.length+t.length;for(var a=0,r=0,i=0;i<n.length-1;i++){var o=r;r=0;for(var d=67108863&a,s=Math.min(i,t.length-1),c=Math.max(0,i-e.length+1);c<=s;c++){var u=i-c,l=(0|e.words[u])*(0|t.words[c]),g=67108863&l;d=67108863&(g=g+d|0),r+=(o=(o=o+(l/67108864|0)|0)+(g>>>26)|0)>>>26,o&=67108863}n.words[i]=d,a=o,o=r}return 0!==a?n.words[i]=a:n.length--,n.strip()}(this,e,t):p(this,e,t),n},m.prototype.makeRBT=function(e){for(var t=new Array(e),n=i.prototype._countBits(e)-1,a=0;a<e;a++)t[a]=this.revBin(a,n,e);return t},m.prototype.revBin=function(e,t,n){if(0===e||e===n-1)return e;for(var a=0,r=0;r<t;r++)a|=(1&e)<<t-r-1,e>>=1;return a},m.prototype.permute=function(e,t,n,a,r,i){for(var o=0;o<i;o++)a[o]=t[e[o]],r[o]=n[e[o]]},m.prototype.transform=function(e,t,n,a,r,i){this.permute(i,e,t,n,a,r);for(var o=1;o<r;o<<=1)for(var d=o<<1,s=Math.cos(2*Math.PI/d),c=Math.sin(2*Math.PI/d),u=0;u<r;u+=d)for(var l=s,g=c,h=0;h<o;h++){var f=n[u+h],p=a[u+h],m=n[u+h+o],R=a[u+h+o],b=l*m-g*R;R=l*R+g*m,m=b,n[u+h]=f+m,a[u+h]=p+R,n[u+h+o]=f-m,a[u+h+o]=p-R,h!==d&&(b=s*l-c*g,g=s*g+c*l,l=b)}},m.prototype.guessLen13b=function(e,t){var n=1|Math.max(t,e),a=1&n,r=0;for(n=n/2|0;n;n>>>=1)r++;return 1<<r+1+a},m.prototype.conjugate=function(e,t,n){if(!(n<=1))for(var a=0;a<n/2;a++){var r=e[a];e[a]=e[n-a-1],e[n-a-1]=r,r=t[a],t[a]=-t[n-a-1],t[n-a-1]=-r}},m.prototype.normalize13b=function(e,t){for(var n=0,a=0;a<t/2;a++){var r=8192*Math.round(e[2*a+1]/t)+Math.round(e[2*a]/t)+n;e[a]=67108863&r,n=r<67108864?0:r/67108864|0}return e},m.prototype.convert13b=function(e,t,n,r){for(var i=0,o=0;o<t;o++)i+=0|e[o],n[2*o]=8191&i,i>>>=13,n[2*o+1]=8191&i,i>>>=13;for(o=2*t;o<r;++o)n[o]=0;a(0===i),a(0==(-8192&i))},m.prototype.stub=function(e){for(var t=new Array(e),n=0;n<e;n++)t[n]=0;return t},m.prototype.mulp=function(e,t,n){var a=2*this.guessLen13b(e.length,t.length),r=this.makeRBT(a),i=this.stub(a),o=new Array(a),d=new Array(a),s=new Array(a),c=new Array(a),u=new Array(a),l=new Array(a),g=n.words;g.length=a,this.convert13b(e.words,e.length,o,a),this.convert13b(t.words,t.length,c,a),this.transform(o,i,d,s,a,r),this.transform(c,i,u,l,a,r);for(var h=0;h<a;h++){var f=d[h]*u[h]-s[h]*l[h];s[h]=d[h]*l[h]+s[h]*u[h],d[h]=f}return this.conjugate(d,s,a),this.transform(d,s,g,i,a,r),this.conjugate(g,i,a),this.normalize13b(g,a),n.negative=e.negative^t.negative,n.length=e.length+t.length,n.strip()},i.prototype.mul=function(e){var t=new i(null);return t.words=new Array(this.length+e.length),this.mulTo(e,t)},i.prototype.mulf=function(e){var t=new i(null);return t.words=new Array(this.length+e.length),p(this,e,t)},i.prototype.imul=function(e){return this.clone().mulTo(e,this)},i.prototype.imuln=function(e){a("number"==typeof e),a(e<67108864);for(var t=0,n=0;n<this.length;n++){var r=(0|this.words[n])*e,i=(67108863&r)+(67108863&t);t>>=26,t+=r/67108864|0,t+=i>>>26,this.words[n]=67108863&i}return 0!==t&&(this.words[n]=t,this.length++),this},i.prototype.muln=function(e){return this.clone().imuln(e)},i.prototype.sqr=function(){return this.mul(this)},i.prototype.isqr=function(){return this.imul(this.clone())},i.prototype.pow=function(e){var t=function(e){for(var t=new Array(e.bitLength()),n=0;n<t.length;n++){var a=n/26|0,r=n%26;t[n]=(e.words[a]&1<<r)>>>r}return t}(e);if(0===t.length)return new i(1);for(var n=this,a=0;a<t.length&&0===t[a];a++,n=n.sqr());if(++a<t.length)for(var r=n.sqr();a<t.length;a++,r=r.sqr())0!==t[a]&&(n=n.mul(r));return n},i.prototype.iushln=function(e){a("number"==typeof e&&e>=0);var t,n=e%26,r=(e-n)/26,i=67108863>>>26-n<<26-n;if(0!==n){var o=0;for(t=0;t<this.length;t++){var d=this.words[t]&i,s=(0|this.words[t])-d<<n;this.words[t]=s|o,o=d>>>26-n}o&&(this.words[t]=o,this.length++)}if(0!==r){for(t=this.length-1;t>=0;t--)this.words[t+r]=this.words[t];for(t=0;t<r;t++)this.words[t]=0;this.length+=r}return this.strip()},i.prototype.ishln=function(e){return a(0===this.negative),this.iushln(e)},i.prototype.iushrn=function(e,t,n){var r;a("number"==typeof e&&e>=0),r=t?(t-t%26)/26:0;var i=e%26,o=Math.min((e-i)/26,this.length),d=67108863^67108863>>>i<<i,s=n;if(r-=o,r=Math.max(0,r),s){for(var c=0;c<o;c++)s.words[c]=this.words[c];s.length=o}if(0===o);else if(this.length>o)for(this.length-=o,c=0;c<this.length;c++)this.words[c]=this.words[c+o];else this.words[0]=0,this.length=1;var u=0;for(c=this.length-1;c>=0&&(0!==u||c>=r);c--){var l=0|this.words[c];this.words[c]=u<<26-i|l>>>i,u=l&d}return s&&0!==u&&(s.words[s.length++]=u),0===this.length&&(this.words[0]=0,this.length=1),this.strip()},i.prototype.ishrn=function(e,t,n){return a(0===this.negative),this.iushrn(e,t,n)},i.prototype.shln=function(e){return this.clone().ishln(e)},i.prototype.ushln=function(e){return this.clone().iushln(e)},i.prototype.shrn=function(e){return this.clone().ishrn(e)},i.prototype.ushrn=function(e){return this.clone().iushrn(e)},i.prototype.testn=function(e){a("number"==typeof e&&e>=0);var t=e%26,n=(e-t)/26,r=1<<t;return!(this.length<=n)&&!!(this.words[n]&r)},i.prototype.imaskn=function(e){a("number"==typeof e&&e>=0);var t=e%26,n=(e-t)/26;if(a(0===this.negative,"imaskn works only with positive numbers"),this.length<=n)return this;if(0!==t&&n++,this.length=Math.min(n,this.length),0!==t){var r=67108863^67108863>>>t<<t;this.words[this.length-1]&=r}return this.strip()},i.prototype.maskn=function(e){return this.clone().imaskn(e)},i.prototype.iaddn=function(e){return a("number"==typeof e),a(e<67108864),e<0?this.isubn(-e):0!==this.negative?1===this.length&&(0|this.words[0])<e?(this.words[0]=e-(0|this.words[0]),this.negative=0,this):(this.negative=0,this.isubn(e),this.negative=1,this):this._iaddn(e)},i.prototype._iaddn=function(e){this.words[0]+=e;for(var t=0;t<this.length&&this.words[t]>=67108864;t++)this.words[t]-=67108864,t===this.length-1?this.words[t+1]=1:this.words[t+1]++;return this.length=Math.max(this.length,t+1),this},i.prototype.isubn=function(e){if(a("number"==typeof e),a(e<67108864),e<0)return this.iaddn(-e);if(0!==this.negative)return this.negative=0,this.iaddn(e),this.negative=1,this;if(this.words[0]-=e,1===this.length&&this.words[0]<0)this.words[0]=-this.words[0],this.negative=1;else for(var t=0;t<this.length&&this.words[t]<0;t++)this.words[t]+=67108864,this.words[t+1]-=1;return this.strip()},i.prototype.addn=function(e){return this.clone().iaddn(e)},i.prototype.subn=function(e){return this.clone().isubn(e)},i.prototype.iabs=function(){return this.negative=0,this},i.prototype.abs=function(){return this.clone().iabs()},i.prototype._ishlnsubmul=function(e,t,n){var r,i,o=e.length+n;this._expand(o);var d=0;for(r=0;r<e.length;r++){i=(0|this.words[r+n])+d;var s=(0|e.words[r])*t;d=((i-=67108863&s)>>26)-(s/67108864|0),this.words[r+n]=67108863&i}for(;r<this.length-n;r++)d=(i=(0|this.words[r+n])+d)>>26,this.words[r+n]=67108863&i;if(0===d)return this.strip();for(a(-1===d),d=0,r=0;r<this.length;r++)d=(i=-(0|this.words[r])+d)>>26,this.words[r]=67108863&i;return this.negative=1,this.strip()},i.prototype._wordDiv=function(e,t){var n=(this.length,e.length),a=this.clone(),r=e,o=0|r.words[r.length-1];0!==(n=26-this._countBits(o))&&(r=r.ushln(n),a.iushln(n),o=0|r.words[r.length-1]);var d,s=a.length-r.length;if("mod"!==t){(d=new i(null)).length=s+1,d.words=new Array(d.length);for(var c=0;c<d.length;c++)d.words[c]=0}var u=a.clone()._ishlnsubmul(r,1,s);0===u.negative&&(a=u,d&&(d.words[s]=1));for(var l=s-1;l>=0;l--){var g=67108864*(0|a.words[r.length+l])+(0|a.words[r.length+l-1]);for(g=Math.min(g/o|0,67108863),a._ishlnsubmul(r,g,l);0!==a.negative;)g--,a.negative=0,a._ishlnsubmul(r,1,l),a.isZero()||(a.negative^=1);d&&(d.words[l]=g)}return d&&d.strip(),a.strip(),"div"!==t&&0!==n&&a.iushrn(n),{div:d||null,mod:a}},i.prototype.divmod=function(e,t,n){return a(!e.isZero()),this.isZero()?{div:new i(0),mod:new i(0)}:0!==this.negative&&0===e.negative?(d=this.neg().divmod(e,t),"mod"!==t&&(r=d.div.neg()),"div"!==t&&(o=d.mod.neg(),n&&0!==o.negative&&o.iadd(e)),{div:r,mod:o}):0===this.negative&&0!==e.negative?(d=this.divmod(e.neg(),t),"mod"!==t&&(r=d.div.neg()),{div:r,mod:d.mod}):0!=(this.negative&e.negative)?(d=this.neg().divmod(e.neg(),t),"div"!==t&&(o=d.mod.neg(),n&&0!==o.negative&&o.isub(e)),{div:d.div,mod:o}):e.length>this.length||this.cmp(e)<0?{div:new i(0),mod:this}:1===e.length?"div"===t?{div:this.divn(e.words[0]),mod:null}:"mod"===t?{div:null,mod:new i(this.modn(e.words[0]))}:{div:this.divn(e.words[0]),mod:new i(this.modn(e.words[0]))}:this._wordDiv(e,t);var r,o,d},i.prototype.div=function(e){return this.divmod(e,"div",!1).div},i.prototype.mod=function(e){return this.divmod(e,"mod",!1).mod},i.prototype.umod=function(e){return this.divmod(e,"mod",!0).mod},i.prototype.divRound=function(e){var t=this.divmod(e);if(t.mod.isZero())return t.div;var n=0!==t.div.negative?t.mod.isub(e):t.mod,a=e.ushrn(1),r=e.andln(1),i=n.cmp(a);return i<0||1===r&&0===i?t.div:0!==t.div.negative?t.div.isubn(1):t.div.iaddn(1)},i.prototype.modn=function(e){a(e<=67108863);for(var t=(1<<26)%e,n=0,r=this.length-1;r>=0;r--)n=(t*n+(0|this.words[r]))%e;return n},i.prototype.idivn=function(e){a(e<=67108863);for(var t=0,n=this.length-1;n>=0;n--){var r=(0|this.words[n])+67108864*t;this.words[n]=r/e|0,t=r%e}return this.strip()},i.prototype.divn=function(e){return this.clone().idivn(e)},i.prototype.egcd=function(e){a(0===e.negative),a(!e.isZero());var t=this,n=e.clone();t=0!==t.negative?t.umod(e):t.clone();for(var r=new i(1),o=new i(0),d=new i(0),s=new i(1),c=0;t.isEven()&&n.isEven();)t.iushrn(1),n.iushrn(1),++c;for(var u=n.clone(),l=t.clone();!t.isZero();){for(var g=0,h=1;0==(t.words[0]&h)&&g<26;++g,h<<=1);if(g>0)for(t.iushrn(g);g-- >0;)(r.isOdd()||o.isOdd())&&(r.iadd(u),o.isub(l)),r.iushrn(1),o.iushrn(1);for(var f=0,p=1;0==(n.words[0]&p)&&f<26;++f,p<<=1);if(f>0)for(n.iushrn(f);f-- >0;)(d.isOdd()||s.isOdd())&&(d.iadd(u),s.isub(l)),d.iushrn(1),s.iushrn(1);t.cmp(n)>=0?(t.isub(n),r.isub(d),o.isub(s)):(n.isub(t),d.isub(r),s.isub(o))}return{a:d,b:s,gcd:n.iushln(c)}},i.prototype._invmp=function(e){a(0===e.negative),a(!e.isZero());var t=this,n=e.clone();t=0!==t.negative?t.umod(e):t.clone();for(var r,o=new i(1),d=new i(0),s=n.clone();t.cmpn(1)>0&&n.cmpn(1)>0;){for(var c=0,u=1;0==(t.words[0]&u)&&c<26;++c,u<<=1);if(c>0)for(t.iushrn(c);c-- >0;)o.isOdd()&&o.iadd(s),o.iushrn(1);for(var l=0,g=1;0==(n.words[0]&g)&&l<26;++l,g<<=1);if(l>0)for(n.iushrn(l);l-- >0;)d.isOdd()&&d.iadd(s),d.iushrn(1);t.cmp(n)>=0?(t.isub(n),o.isub(d)):(n.isub(t),d.isub(o))}return(r=0===t.cmpn(1)?o:d).cmpn(0)<0&&r.iadd(e),r},i.prototype.gcd=function(e){if(this.isZero())return e.abs();if(e.isZero())return this.abs();var t=this.clone(),n=e.clone();t.negative=0,n.negative=0;for(var a=0;t.isEven()&&n.isEven();a++)t.iushrn(1),n.iushrn(1);for(;;){for(;t.isEven();)t.iushrn(1);for(;n.isEven();)n.iushrn(1);var r=t.cmp(n);if(r<0){var i=t;t=n,n=i}else if(0===r||0===n.cmpn(1))break;t.isub(n)}return n.iushln(a)},i.prototype.invm=function(e){return this.egcd(e).a.umod(e)},i.prototype.isEven=function(){return 0==(1&this.words[0])},i.prototype.isOdd=function(){return 1==(1&this.words[0])},i.prototype.andln=function(e){return this.words[0]&e},i.prototype.bincn=function(e){a("number"==typeof e);var t=e%26,n=(e-t)/26,r=1<<t;if(this.length<=n)return this._expand(n+1),this.words[n]|=r,this;for(var i=r,o=n;0!==i&&o<this.length;o++){var d=0|this.words[o];i=(d+=i)>>>26,d&=67108863,this.words[o]=d}return 0!==i&&(this.words[o]=i,this.length++),this},i.prototype.isZero=function(){return 1===this.length&&0===this.words[0]},i.prototype.cmpn=function(e){var t,n=e<0;if(0!==this.negative&&!n)return-1;if(0===this.negative&&n)return 1;if(this.strip(),this.length>1)t=1;else{n&&(e=-e),a(e<=67108863,"Number is too big");var r=0|this.words[0];t=r===e?0:r<e?-1:1}return 0!==this.negative?0|-t:t},i.prototype.cmp=function(e){if(0!==this.negative&&0===e.negative)return-1;if(0===this.negative&&0!==e.negative)return 1;var t=this.ucmp(e);return 0!==this.negative?0|-t:t},i.prototype.ucmp=function(e){if(this.length>e.length)return 1;if(this.length<e.length)return-1;for(var t=0,n=this.length-1;n>=0;n--){var a=0|this.words[n],r=0|e.words[n];if(a!==r){a<r?t=-1:a>r&&(t=1);break}}return t},i.prototype.gtn=function(e){return 1===this.cmpn(e)},i.prototype.gt=function(e){return 1===this.cmp(e)},i.prototype.gten=function(e){return this.cmpn(e)>=0},i.prototype.gte=function(e){return this.cmp(e)>=0},i.prototype.ltn=function(e){return-1===this.cmpn(e)},i.prototype.lt=function(e){return-1===this.cmp(e)},i.prototype.lten=function(e){return this.cmpn(e)<=0},i.prototype.lte=function(e){return this.cmp(e)<=0},i.prototype.eqn=function(e){return 0===this.cmpn(e)},i.prototype.eq=function(e){return 0===this.cmp(e)},i.red=function(e){return new M(e)},i.prototype.toRed=function(e){return a(!this.red,"Already a number in reduction context"),a(0===this.negative,"red works only with positives"),e.convertTo(this)._forceRed(e)},i.prototype.fromRed=function(){return a(this.red,"fromRed works only with numbers in reduction context"),this.red.convertFrom(this)},i.prototype._forceRed=function(e){return this.red=e,this},i.prototype.forceRed=function(e){return a(!this.red,"Already a number in reduction context"),this._forceRed(e)},i.prototype.redAdd=function(e){return a(this.red,"redAdd works only with red numbers"),this.red.add(this,e)},i.prototype.redIAdd=function(e){return a(this.red,"redIAdd works only with red numbers"),this.red.iadd(this,e)},i.prototype.redSub=function(e){return a(this.red,"redSub works only with red numbers"),this.red.sub(this,e)},i.prototype.redISub=function(e){return a(this.red,"redISub works only with red numbers"),this.red.isub(this,e)},i.prototype.redShl=function(e){return a(this.red,"redShl works only with red numbers"),this.red.shl(this,e)},i.prototype.redMul=function(e){return a(this.red,"redMul works only with red numbers"),this.red._verify2(this,e),this.red.mul(this,e)},i.prototype.redIMul=function(e){return a(this.red,"redMul works only with red numbers"),this.red._verify2(this,e),this.red.imul(this,e)},i.prototype.redSqr=function(){return a(this.red,"redSqr works only with red numbers"),this.red._verify1(this),this.red.sqr(this)},i.prototype.redISqr=function(){return a(this.red,"redISqr works only with red numbers"),this.red._verify1(this),this.red.isqr(this)},i.prototype.redSqrt=function(){return a(this.red,"redSqrt works only with red numbers"),this.red._verify1(this),this.red.sqrt(this)},i.prototype.redInvm=function(){return a(this.red,"redInvm works only with red numbers"),this.red._verify1(this),this.red.invm(this)},i.prototype.redNeg=function(){return a(this.red,"redNeg works only with red numbers"),this.red._verify1(this),this.red.neg(this)},i.prototype.redPow=function(e){return a(this.red&&!e.red,"redPow(normalNum)"),this.red._verify1(this),this.red.pow(this,e)};var R={k256:null,p224:null,p192:null,p25519:null};function b(e,t){this.name=e,this.p=new i(t,16),this.n=this.p.bitLength(),this.k=new i(1).iushln(this.n).isub(this.p),this.tmp=this._tmp()}function y(){b.call(this,"k256","ffffffff ffffffff ffffffff ffffffff ffffffff ffffffff fffffffe fffffc2f")}function v(){b.call(this,"p224","ffffffff ffffffff ffffffff ffffffff 00000000 00000000 00000001")}function _(){b.call(this,"p192","ffffffff ffffffff ffffffff fffffffe ffffffff ffffffff")}function w(){b.call(this,"25519","7fffffffffffffff ffffffffffffffff ffffffffffffffff ffffffffffffffed")}function M(e){if("string"==typeof e){var t=i._prime(e);this.m=t.p,this.prime=t}else a(e.gtn(1),"modulus must be greater than 1"),this.m=e,this.prime=null}function x(e){M.call(this,e),this.shift=this.m.bitLength(),this.shift%26!=0&&(this.shift+=26-this.shift%26),this.r=new i(1).iushln(this.shift),this.r2=this.imod(this.r.sqr()),this.rinv=this.r._invmp(this.m),this.minv=this.rinv.mul(this.r).isubn(1).div(this.m),this.minv=this.minv.umod(this.r),this.minv=this.r.sub(this.minv)}b.prototype._tmp=function(){var e=new i(null);return e.words=new Array(Math.ceil(this.n/13)),e},b.prototype.ireduce=function(e){var t,n=e;do{this.split(n,this.tmp),t=(n=(n=this.imulK(n)).iadd(this.tmp)).bitLength()}while(t>this.n);var a=t<this.n?-1:n.ucmp(this.p);return 0===a?(n.words[0]=0,n.length=1):a>0?n.isub(this.p):void 0!==n.strip?n.strip():n._strip(),n},b.prototype.split=function(e,t){e.iushrn(this.n,0,t)},b.prototype.imulK=function(e){return e.imul(this.k)},r(y,b),y.prototype.split=function(e,t){for(var n=4194303,a=Math.min(e.length,9),r=0;r<a;r++)t.words[r]=e.words[r];if(t.length=a,e.length<=9)return e.words[0]=0,void(e.length=1);var i=e.words[9];for(t.words[t.length++]=i&n,r=10;r<e.length;r++){var o=0|e.words[r];e.words[r-10]=(o&n)<<4|i>>>22,i=o}i>>>=22,e.words[r-10]=i,0===i&&e.length>10?e.length-=10:e.length-=9},y.prototype.imulK=function(e){e.words[e.length]=0,e.words[e.length+1]=0,e.length+=2;for(var t=0,n=0;n<e.length;n++){var a=0|e.words[n];t+=977*a,e.words[n]=67108863&t,t=64*a+(t/67108864|0)}return 0===e.words[e.length-1]&&(e.length--,0===e.words[e.length-1]&&e.length--),e},r(v,b),r(_,b),r(w,b),w.prototype.imulK=function(e){for(var t=0,n=0;n<e.length;n++){var a=19*(0|e.words[n])+t,r=67108863&a;a>>>=26,e.words[n]=r,t=a}return 0!==t&&(e.words[e.length++]=t),e},i._prime=function(e){if(R[e])return R[e];var t;if("k256"===e)t=new y;else if("p224"===e)t=new v;else if("p192"===e)t=new _;else{if("p25519"!==e)throw new Error("Unknown prime "+e);t=new w}return R[e]=t,t},M.prototype._verify1=function(e){a(0===e.negative,"red works only with positives"),a(e.red,"red works only with red numbers")},M.prototype._verify2=function(e,t){a(0==(e.negative|t.negative),"red works only with positives"),a(e.red&&e.red===t.red,"red works only with red numbers")},M.prototype.imod=function(e){return this.prime?this.prime.ireduce(e)._forceRed(this):e.umod(this.m)._forceRed(this)},M.prototype.neg=function(e){return e.isZero()?e.clone():this.m.sub(e)._forceRed(this)},M.prototype.add=function(e,t){this._verify2(e,t);var n=e.add(t);return n.cmp(this.m)>=0&&n.isub(this.m),n._forceRed(this)},M.prototype.iadd=function(e,t){this._verify2(e,t);var n=e.iadd(t);return n.cmp(this.m)>=0&&n.isub(this.m),n},M.prototype.sub=function(e,t){this._verify2(e,t);var n=e.sub(t);return n.cmpn(0)<0&&n.iadd(this.m),n._forceRed(this)},M.prototype.isub=function(e,t){this._verify2(e,t);var n=e.isub(t);return n.cmpn(0)<0&&n.iadd(this.m),n},M.prototype.shl=function(e,t){return this._verify1(e),this.imod(e.ushln(t))},M.prototype.imul=function(e,t){return this._verify2(e,t),this.imod(e.imul(t))},M.prototype.mul=function(e,t){return this._verify2(e,t),this.imod(e.mul(t))},M.prototype.isqr=function(e){return this.imul(e,e.clone())},M.prototype.sqr=function(e){return this.mul(e,e)},M.prototype.sqrt=function(e){if(e.isZero())return e.clone();var t=this.m.andln(3);if(a(t%2==1),3===t){var n=this.m.add(new i(1)).iushrn(2);return this.pow(e,n)}for(var r=this.m.subn(1),o=0;!r.isZero()&&0===r.andln(1);)o++,r.iushrn(1);a(!r.isZero());var d=new i(1).toRed(this),s=d.redNeg(),c=this.m.subn(1).iushrn(1),u=this.m.bitLength();for(u=new i(2*u*u).toRed(this);0!==this.pow(u,c).cmp(s);)u.redIAdd(s);for(var l=this.pow(u,r),g=this.pow(e,r.addn(1).iushrn(1)),h=this.pow(e,r),f=o;0!==h.cmp(d);){for(var p=h,m=0;0!==p.cmp(d);m++)p=p.redSqr();a(m<f);var R=this.pow(l,new i(1).iushln(f-m-1));g=g.redMul(R),l=R.redSqr(),h=h.redMul(l),f=m}return g},M.prototype.invm=function(e){var t=e._invmp(this.m);return 0!==t.negative?(t.negative=0,this.imod(t).redNeg()):this.imod(t)},M.prototype.pow=function(e,t){if(t.isZero())return new i(1).toRed(this);if(0===t.cmpn(1))return e.clone();var n=new Array(16);n[0]=new i(1).toRed(this),n[1]=e;for(var a=2;a<n.length;a++)n[a]=this.mul(n[a-1],e);var r=n[0],o=0,d=0,s=t.bitLength()%26;for(0===s&&(s=26),a=t.length-1;a>=0;a--){for(var c=t.words[a],u=s-1;u>=0;u--){var l=c>>u&1;r!==n[0]&&(r=this.sqr(r)),0!==l||0!==o?(o<<=1,o|=l,(4===++d||0===a&&0===u)&&(r=this.mul(r,n[o]),d=0,o=0)):d=0}s=26}return r},M.prototype.convertTo=function(e){var t=e.umod(this.m);return t===e?t.clone():t},M.prototype.convertFrom=function(e){var t=e.clone();return t.red=null,t},i.mont=function(e){return new x(e)},r(x,M),x.prototype.convertTo=function(e){return this.imod(e.ushln(this.shift))},x.prototype.convertFrom=function(e){var t=this.imod(e.mul(this.rinv));return t.red=null,t},x.prototype.imul=function(e,t){if(e.isZero()||t.isZero())return e.words[0]=0,e.length=1,e;var n=e.imul(t),a=n.maskn(this.shift).mul(this.minv).imaskn(this.shift).mul(this.m),r=n.isub(a).iushrn(this.shift),i=r;return r.cmp(this.m)>=0?i=r.isub(this.m):r.cmpn(0)<0&&(i=r.iadd(this.m)),i._forceRed(this)},x.prototype.mul=function(e,t){if(e.isZero()||t.isZero())return new i(0)._forceRed(this);var n=e.mul(t),a=n.maskn(this.shift).mul(this.minv).imaskn(this.shift).mul(this.m),r=n.isub(a).iushrn(this.shift),o=r;return r.cmp(this.m)>=0?o=r.isub(this.m):r.cmpn(0)<0&&(o=r.iadd(this.m)),o._forceRed(this)},x.prototype.invm=function(e){return this.imod(e._invmp(this.m).mul(this.r2))._forceRed(this)}}(e=n.nmd(e),this)},59154:function(e,t,n){var a;function r(e){this.rand=e}if(e.exports=function(e){return a||(a=new r(null)),a.generate(e)},e.exports.Rand=r,r.prototype.generate=function(e){return this._rand(e)},r.prototype._rand=function(e){if(this.rand.getBytes)return this.rand.getBytes(e);for(var t=new Uint8Array(e),n=0;n<t.length;n++)t[n]=this.rand.getByte();return t},"object"==typeof self)self.crypto&&self.crypto.getRandomValues?r.prototype._rand=function(e){var t=new Uint8Array(e);return self.crypto.getRandomValues(t),t}:self.msCrypto&&self.msCrypto.getRandomValues?r.prototype._rand=function(e){var t=new Uint8Array(e);return self.msCrypto.getRandomValues(t),t}:"object"==typeof window&&(r.prototype._rand=function(){throw new Error("Not implemented yet")});else try{var i=n(46047);if("function"!=typeof i.randomBytes)throw new Error("Not supported");r.prototype._rand=function(e){return i.randomBytes(e)}}catch(o){}},10238:function(e,t,n){var a=n(27172).Buffer;function r(e){a.isBuffer(e)||(e=a.from(e));for(var t=e.length/4|0,n=new Array(t),r=0;r<t;r++)n[r]=e.readUInt32BE(4*r);return n}function i(e){for(;0<e.length;e++)e[0]=0}function o(e,t,n,a,r){for(var i,o,d,s,c=n[0],u=n[1],l=n[2],g=n[3],h=e[0]^t[0],f=e[1]^t[1],p=e[2]^t[2],m=e[3]^t[3],R=4,b=1;b<r;b++)i=c[h>>>24]^u[f>>>16&255]^l[p>>>8&255]^g[255&m]^t[R++],o=c[f>>>24]^u[p>>>16&255]^l[m>>>8&255]^g[255&h]^t[R++],d=c[p>>>24]^u[m>>>16&255]^l[h>>>8&255]^g[255&f]^t[R++],s=c[m>>>24]^u[h>>>16&255]^l[f>>>8&255]^g[255&p]^t[R++],h=i,f=o,p=d,m=s;return i=(a[h>>>24]<<24|a[f>>>16&255]<<16|a[p>>>8&255]<<8|a[255&m])^t[R++],o=(a[f>>>24]<<24|a[p>>>16&255]<<16|a[m>>>8&255]<<8|a[255&h])^t[R++],d=(a[p>>>24]<<24|a[m>>>16&255]<<16|a[h>>>8&255]<<8|a[255&f])^t[R++],s=(a[m>>>24]<<24|a[h>>>16&255]<<16|a[f>>>8&255]<<8|a[255&p])^t[R++],[i>>>=0,o>>>=0,d>>>=0,s>>>=0]}var d=[0,1,2,4,8,16,32,64,128,27,54],s=function(){for(var e=new Array(256),t=0;t<256;t++)e[t]=t<128?t<<1:t<<1^283;for(var n=[],a=[],r=[[],[],[],[]],i=[[],[],[],[]],o=0,d=0,s=0;s<256;++s){var c=d^d<<1^d<<2^d<<3^d<<4;c=c>>>8^255&c^99,n[o]=c,a[c]=o;var u=e[o],l=e[u],g=e[l],h=257*e[c]^16843008*c;r[0][o]=h<<24|h>>>8,r[1][o]=h<<16|h>>>16,r[2][o]=h<<8|h>>>24,r[3][o]=h,h=16843009*g^65537*l^257*u^16843008*o,i[0][c]=h<<24|h>>>8,i[1][c]=h<<16|h>>>16,i[2][c]=h<<8|h>>>24,i[3][c]=h,0===o?o=d=1:(o=u^e[e[e[g^u]]],d^=e[e[d]])}return{SBOX:n,INV_SBOX:a,SUB_MIX:r,INV_SUB_MIX:i}}();function c(e){this._key=r(e),this._reset()}c.blockSize=16,c.keySize=32,c.prototype.blockSize=c.blockSize,c.prototype.keySize=c.keySize,c.prototype._reset=function(){for(var e=this._key,t=e.length,n=t+6,a=4*(n+1),r=[],i=0;i<t;i++)r[i]=e[i];for(i=t;i<a;i++){var o=r[i-1];i%t==0?(o=o<<8|o>>>24,o=s.SBOX[o>>>24]<<24|s.SBOX[o>>>16&255]<<16|s.SBOX[o>>>8&255]<<8|s.SBOX[255&o],o^=d[i/t|0]<<24):t>6&&i%t==4&&(o=s.SBOX[o>>>24]<<24|s.SBOX[o>>>16&255]<<16|s.SBOX[o>>>8&255]<<8|s.SBOX[255&o]),r[i]=r[i-t]^o}for(var c=[],u=0;u<a;u++){var l=a-u,g=r[l-(u%4?0:4)];c[u]=u<4||l<=4?g:s.INV_SUB_MIX[0][s.SBOX[g>>>24]]^s.INV_SUB_MIX[1][s.SBOX[g>>>16&255]]^s.INV_SUB_MIX[2][s.SBOX[g>>>8&255]]^s.INV_SUB_MIX[3][s.SBOX[255&g]]}this._nRounds=n,this._keySchedule=r,this._invKeySchedule=c},c.prototype.encryptBlockRaw=function(e){return o(e=r(e),this._keySchedule,s.SUB_MIX,s.SBOX,this._nRounds)},c.prototype.encryptBlock=function(e){var t=this.encryptBlockRaw(e),n=a.allocUnsafe(16);return n.writeUInt32BE(t[0],0),n.writeUInt32BE(t[1],4),n.writeUInt32BE(t[2],8),n.writeUInt32BE(t[3],12),n},c.prototype.decryptBlock=function(e){var t=(e=r(e))[1];e[1]=e[3],e[3]=t;var n=o(e,this._invKeySchedule,s.INV_SUB_MIX,s.INV_SBOX,this._nRounds),i=a.allocUnsafe(16);return i.writeUInt32BE(n[0],0),i.writeUInt32BE(n[3],4),i.writeUInt32BE(n[2],8),i.writeUInt32BE(n[1],12),i},c.prototype.scrub=function(){i(this._keySchedule),i(this._invKeySchedule),i(this._key)},e.exports.AES=c},28587:function(e,t,n){var a=n(10238),r=n(27172).Buffer,i=n(73081),o=n(70087),d=n(11219),s=n(57752),c=n(73480);function u(e,t,n,o){i.call(this);var s=r.alloc(4,0);this._cipher=new a.AES(t);var u=this._cipher.encryptBlock(s);this._ghash=new d(u),n=function(e,t,n){if(12===t.length)return e._finID=r.concat([t,r.from([0,0,0,1])]),r.concat([t,r.from([0,0,0,2])]);var a=new d(n),i=t.length,o=i%16;a.update(t),o&&(o=16-o,a.update(r.alloc(o,0))),a.update(r.alloc(8,0));var s=8*i,u=r.alloc(8);u.writeUIntBE(s,0,8),a.update(u),e._finID=a.state;var l=r.from(e._finID);return c(l),l}(this,n,u),this._prev=r.from(n),this._cache=r.allocUnsafe(0),this._secCache=r.allocUnsafe(0),this._decrypt=o,this._alen=0,this._len=0,this._mode=e,this._authTag=null,this._called=!1}o(u,i),u.prototype._update=function(e){if(!this._called&&this._alen){var t=16-this._alen%16;t<16&&(t=r.alloc(t,0),this._ghash.update(t))}this._called=!0;var n=this._mode.encrypt(this,e);return this._decrypt?this._ghash.update(e):this._ghash.update(n),this._len+=e.length,n},u.prototype._final=function(){if(this._decrypt&&!this._authTag)throw new Error("Unsupported state or unable to authenticate data");var e=s(this._ghash.final(8*this._alen,8*this._len),this._cipher.encryptBlock(this._finID));if(this._decrypt&&function(e,t){var n=0;e.length!==t.length&&n++;for(var a=Math.min(e.length,t.length),r=0;r<a;++r)n+=e[r]^t[r];return n}(e,this._authTag))throw new Error("Unsupported state or unable to authenticate data");this._authTag=e,this._cipher.scrub()},u.prototype.getAuthTag=function(){if(this._decrypt||!r.isBuffer(this._authTag))throw new Error("Attempting to get auth tag in unsupported state");return this._authTag},u.prototype.setAuthTag=function(e){if(!this._decrypt)throw new Error("Attempting to set auth tag in unsupported state");this._authTag=e},u.prototype.setAAD=function(e){if(this._called)throw new Error("Attempting to set AAD in unsupported state");this._ghash.update(e),this._alen+=e.length},e.exports=u},98901:function(e,t,n){var a=n(13615),r=n(82576),i=n(74923);t.createCipher=t.Cipher=a.createCipher,t.createCipheriv=t.Cipheriv=a.createCipheriv,t.createDecipher=t.Decipher=r.createDecipher,t.createDecipheriv=t.Decipheriv=r.createDecipheriv,t.listCiphers=t.getCiphers=function(){return Object.keys(i)}},82576:function(e,t,n){var a=n(28587),r=n(27172).Buffer,i=n(33834),o=n(42385),d=n(73081),s=n(10238),c=n(55883);function u(e,t,n){d.call(this),this._cache=new l,this._last=void 0,this._cipher=new s.AES(t),this._prev=r.from(n),this._mode=e,this._autopadding=!0}function l(){this.cache=r.allocUnsafe(0)}function g(e,t,n){var d=i[e.toLowerCase()];if(!d)throw new TypeError("invalid suite type");if("string"==typeof n&&(n=r.from(n)),"GCM"!==d.mode&&n.length!==d.iv)throw new TypeError("invalid iv length "+n.length);if("string"==typeof t&&(t=r.from(t)),t.length!==d.key/8)throw new TypeError("invalid key length "+t.length);return"stream"===d.type?new o(d.module,t,n,!0):"auth"===d.type?new a(d.module,t,n,!0):new u(d.module,t,n)}n(70087)(u,d),u.prototype._update=function(e){var t,n;this._cache.add(e);for(var a=[];t=this._cache.get(this._autopadding);)n=this._mode.decrypt(this,t),a.push(n);return r.concat(a)},u.prototype._final=function(){var e=this._cache.flush();if(this._autopadding)return function(e){var t=e[15];if(t<1||t>16)throw new Error("unable to decrypt data");var n=-1;for(;++n<t;)if(e[n+(16-t)]!==t)throw new Error("unable to decrypt data");if(16===t)return;return e.slice(0,16-t)}(this._mode.decrypt(this,e));if(e)throw new Error("data not multiple of block length")},u.prototype.setAutoPadding=function(e){return this._autopadding=!!e,this},l.prototype.add=function(e){this.cache=r.concat([this.cache,e])},l.prototype.get=function(e){var t;if(e){if(this.cache.length>16)return t=this.cache.slice(0,16),this.cache=this.cache.slice(16),t}else if(this.cache.length>=16)return t=this.cache.slice(0,16),this.cache=this.cache.slice(16),t;return null},l.prototype.flush=function(){if(this.cache.length)return this.cache},t.createDecipher=function(e,t){var n=i[e.toLowerCase()];if(!n)throw new TypeError("invalid suite type");var a=c(t,!1,n.key,n.iv);return g(e,a.key,a.iv)},t.createDecipheriv=g},13615:function(e,t,n){var a=n(33834),r=n(28587),i=n(27172).Buffer,o=n(42385),d=n(73081),s=n(10238),c=n(55883);function u(e,t,n){d.call(this),this._cache=new g,this._cipher=new s.AES(t),this._prev=i.from(n),this._mode=e,this._autopadding=!0}n(70087)(u,d),u.prototype._update=function(e){var t,n;this._cache.add(e);for(var a=[];t=this._cache.get();)n=this._mode.encrypt(this,t),a.push(n);return i.concat(a)};var l=i.alloc(16,16);function g(){this.cache=i.allocUnsafe(0)}function h(e,t,n){var d=a[e.toLowerCase()];if(!d)throw new TypeError("invalid suite type");if("string"==typeof t&&(t=i.from(t)),t.length!==d.key/8)throw new TypeError("invalid key length "+t.length);if("string"==typeof n&&(n=i.from(n)),"GCM"!==d.mode&&n.length!==d.iv)throw new TypeError("invalid iv length "+n.length);return"stream"===d.type?new o(d.module,t,n):"auth"===d.type?new r(d.module,t,n):new u(d.module,t,n)}u.prototype._final=function(){var e=this._cache.flush();if(this._autopadding)return e=this._mode.encrypt(this,e),this._cipher.scrub(),e;if(!e.equals(l))throw this._cipher.scrub(),new Error("data not multiple of block length")},u.prototype.setAutoPadding=function(e){return this._autopadding=!!e,this},g.prototype.add=function(e){this.cache=i.concat([this.cache,e])},g.prototype.get=function(){if(this.cache.length>15){var e=this.cache.slice(0,16);return this.cache=this.cache.slice(16),e}return null},g.prototype.flush=function(){for(var e=16-this.cache.length,t=i.allocUnsafe(e),n=-1;++n<e;)t.writeUInt8(e,n);return i.concat([this.cache,t])},t.createCipheriv=h,t.createCipher=function(e,t){var n=a[e.toLowerCase()];if(!n)throw new TypeError("invalid suite type");var r=c(t,!1,n.key,n.iv);return h(e,r.key,r.iv)}},11219:function(e,t,n){var a=n(27172).Buffer,r=a.alloc(16,0);function i(e){var t=a.allocUnsafe(16);return t.writeUInt32BE(e[0]>>>0,0),t.writeUInt32BE(e[1]>>>0,4),t.writeUInt32BE(e[2]>>>0,8),t.writeUInt32BE(e[3]>>>0,12),t}function o(e){this.h=e,this.state=a.alloc(16,0),this.cache=a.allocUnsafe(0)}o.prototype.ghash=function(e){for(var t=-1;++t<e.length;)this.state[t]^=e[t];this._multiply()},o.prototype._multiply=function(){for(var e,t,n,a=[(e=this.h).readUInt32BE(0),e.readUInt32BE(4),e.readUInt32BE(8),e.readUInt32BE(12)],r=[0,0,0,0],o=-1;++o<128;){for(0!=(this.state[~~(o/8)]&1<<7-o%8)&&(r[0]^=a[0],r[1]^=a[1],r[2]^=a[2],r[3]^=a[3]),n=0!=(1&a[3]),t=3;t>0;t--)a[t]=a[t]>>>1|(1&a[t-1])<<31;a[0]=a[0]>>>1,n&&(a[0]=a[0]^225<<24)}this.state=i(r)},o.prototype.update=function(e){var t;for(this.cache=a.concat([this.cache,e]);this.cache.length>=16;)t=this.cache.slice(0,16),this.cache=this.cache.slice(16),this.ghash(t)},o.prototype.final=function(e,t){return this.cache.length&&this.ghash(a.concat([this.cache,r],16)),this.ghash(i([0,e,0,t])),this.state},e.exports=o},73480:function(e){e.exports=function(e){for(var t,n=e.length;n--;){if(255!==(t=e.readUInt8(n))){t++,e.writeUInt8(t,n);break}e.writeUInt8(0,n)}}},16280:function(e,t,n){var a=n(57752);t.encrypt=function(e,t){var n=a(t,e._prev);return e._prev=e._cipher.encryptBlock(n),e._prev},t.decrypt=function(e,t){var n=e._prev;e._prev=t;var r=e._cipher.decryptBlock(t);return a(r,n)}},60392:function(e,t,n){var a=n(27172).Buffer,r=n(57752);function i(e,t,n){var i=t.length,o=r(t,e._cache);return e._cache=e._cache.slice(i),e._prev=a.concat([e._prev,n?t:o]),o}t.encrypt=function(e,t,n){for(var r,o=a.allocUnsafe(0);t.length;){if(0===e._cache.length&&(e._cache=e._cipher.encryptBlock(e._prev),e._prev=a.allocUnsafe(0)),!(e._cache.length<=t.length)){o=a.concat([o,i(e,t,n)]);break}r=e._cache.length,o=a.concat([o,i(e,t.slice(0,r),n)]),t=t.slice(r)}return o}},95739:function(e,t,n){var a=n(27172).Buffer;function r(e,t,n){for(var a,r,o=-1,d=0;++o<8;)a=t&1<<7-o?128:0,d+=(128&(r=e._cipher.encryptBlock(e._prev)[0]^a))>>o%8,e._prev=i(e._prev,n?a:r);return d}function i(e,t){var n=e.length,r=-1,i=a.allocUnsafe(e.length);for(e=a.concat([e,a.from([t])]);++r<n;)i[r]=e[r]<<1|e[r+1]>>7;return i}t.encrypt=function(e,t,n){for(var i=t.length,o=a.allocUnsafe(i),d=-1;++d<i;)o[d]=r(e,t[d],n);return o}},12228:function(e,t,n){var a=n(27172).Buffer;function r(e,t,n){var r=e._cipher.encryptBlock(e._prev)[0]^t;return e._prev=a.concat([e._prev.slice(1),a.from([n?t:r])]),r}t.encrypt=function(e,t,n){for(var i=t.length,o=a.allocUnsafe(i),d=-1;++d<i;)o[d]=r(e,t[d],n);return o}},62751:function(e,t,n){var a=n(57752),r=n(27172).Buffer,i=n(73480);function o(e){var t=e._cipher.encryptBlockRaw(e._prev);return i(e._prev),t}t.encrypt=function(e,t){var n=Math.ceil(t.length/16),i=e._cache.length;e._cache=r.concat([e._cache,r.allocUnsafe(16*n)]);for(var d=0;d<n;d++){var s=o(e),c=i+16*d;e._cache.writeUInt32BE(s[0],c+0),e._cache.writeUInt32BE(s[1],c+4),e._cache.writeUInt32BE(s[2],c+8),e._cache.writeUInt32BE(s[3],c+12)}var u=e._cache.slice(0,t.length);return e._cache=e._cache.slice(t.length),a(t,u)}},72437:function(e,t){t.encrypt=function(e,t){return e._cipher.encryptBlock(t)},t.decrypt=function(e,t){return e._cipher.decryptBlock(t)}},33834:function(e,t,n){var a={ECB:n(72437),CBC:n(16280),CFB:n(60392),CFB8:n(12228),CFB1:n(95739),OFB:n(68494),CTR:n(62751),GCM:n(62751)},r=n(74923);for(var i in r)r[i].module=a[r[i].mode];e.exports=r},68494:function(e,t,n){var a=n(57752);function r(e){return e._prev=e._cipher.encryptBlock(e._prev),e._prev}t.encrypt=function(e,t){for(;e._cache.length<t.length;)e._cache=Buffer.concat([e._cache,r(e)]);var n=e._cache.slice(0,t.length);return e._cache=e._cache.slice(t.length),a(t,n)}},42385:function(e,t,n){var a=n(10238),r=n(27172).Buffer,i=n(73081);function o(e,t,n,o){i.call(this),this._cipher=new a.AES(t),this._prev=r.from(n),this._cache=r.allocUnsafe(0),this._secCache=r.allocUnsafe(0),this._decrypt=o,this._mode=e}n(70087)(o,i),o.prototype._update=function(e){return this._mode.encrypt(this,e,this._decrypt)},o.prototype._final=function(){this._cipher.scrub()},e.exports=o},11240:function(e,t,n){var a=n(35681),r=n(98901),i=n(33834),o=n(71035),d=n(55883);function s(e,t,n){if(e=e.toLowerCase(),i[e])return r.createCipheriv(e,t,n);if(o[e])return new a({key:t,iv:n,mode:e});throw new TypeError("invalid suite type")}function c(e,t,n){if(e=e.toLowerCase(),i[e])return r.createDecipheriv(e,t,n);if(o[e])return new a({key:t,iv:n,mode:e,decrypt:!0});throw new TypeError("invalid suite type")}t.createCipher=t.Cipher=function(e,t){var n,a;if(e=e.toLowerCase(),i[e])n=i[e].key,a=i[e].iv;else{if(!o[e])throw new TypeError("invalid suite type");n=8*o[e].key,a=o[e].iv}var r=d(t,!1,n,a);return s(e,r.key,r.iv)},t.createCipheriv=t.Cipheriv=s,t.createDecipher=t.Decipher=function(e,t){var n,a;if(e=e.toLowerCase(),i[e])n=i[e].key,a=i[e].iv;else{if(!o[e])throw new TypeError("invalid suite type");n=8*o[e].key,a=o[e].iv}var r=d(t,!1,n,a);return c(e,r.key,r.iv)},t.createDecipheriv=t.Decipheriv=c,t.listCiphers=t.getCiphers=function(){return Object.keys(o).concat(r.getCiphers())}},35681:function(e,t,n){var a=n(73081),r=n(27191),i=n(70087),o=n(27172).Buffer,d={"des-ede3-cbc":r.CBC.instantiate(r.EDE),"des-ede3":r.EDE,"des-ede-cbc":r.CBC.instantiate(r.EDE),"des-ede":r.EDE,"des-cbc":r.CBC.instantiate(r.DES),"des-ecb":r.DES};function s(e){a.call(this);var t,n=e.mode.toLowerCase(),r=d[n];t=e.decrypt?"decrypt":"encrypt";var i=e.key;o.isBuffer(i)||(i=o.from(i)),"des-ede"!==n&&"des-ede-cbc"!==n||(i=o.concat([i,i.slice(0,8)]));var s=e.iv;o.isBuffer(s)||(s=o.from(s)),this._des=r.create({key:i,iv:s,type:t})}d.des=d["des-cbc"],d.des3=d["des-ede3-cbc"],e.exports=s,i(s,a),s.prototype._update=function(e){return o.from(this._des.update(e))},s.prototype._final=function(){return o.from(this._des.final())}},71035:function(e,t){t["des-ecb"]={key:8,iv:0},t["des-cbc"]=t.des={key:8,iv:8},t["des-ede3-cbc"]=t.des3={key:24,iv:8},t["des-ede3"]={key:24,iv:0},t["des-ede-cbc"]={key:16,iv:8},t["des-ede"]={key:16,iv:0}},17354:function(e,t,n){var a=n(25647),r=n(52830);function i(e){var t,n=e.modulus.byteLength();do{t=new a(r(n))}while(t.cmp(e.modulus)>=0||!t.umod(e.prime1)||!t.umod(e.prime2));return t}function o(e,t){var n=function(e){var t=i(e);return{blinder:t.toRed(a.mont(e.modulus)).redPow(new a(e.publicExponent)).fromRed(),unblinder:t.invm(e.modulus)}}(t),r=t.modulus.byteLength(),o=new a(e).mul(n.blinder).umod(t.modulus),d=o.toRed(a.mont(t.prime1)),s=o.toRed(a.mont(t.prime2)),c=t.coefficient,u=t.prime1,l=t.prime2,g=d.redPow(t.exponent1).fromRed(),h=s.redPow(t.exponent2).fromRed(),f=g.isub(h).imul(c).umod(u).imul(l);return h.iadd(f).imul(n.unblinder).umod(t.modulus).toArrayLike(Buffer,"be",r)}o.getr=i,e.exports=o},25647:function(e,t,n){!function(e,t){"use strict";function a(e,t){if(!e)throw new Error(t||"Assertion failed")}function r(e,t){e.super_=t;var n=function(){};n.prototype=t.prototype,e.prototype=new n,e.prototype.constructor=e}function i(e,t,n){if(i.isBN(e))return e;this.negative=0,this.words=null,this.length=0,this.red=null,null!==e&&("le"!==t&&"be"!==t||(n=t,t=10),this._init(e||0,t||10,n||"be"))}var o;"object"==typeof e?e.exports=i:t.BN=i,i.BN=i,i.wordSize=26;try{o="undefined"!=typeof window&&void 0!==window.Buffer?window.Buffer:n(78028).Buffer}catch(N){}function d(e,t){var n=e.charCodeAt(t);return n>=48&&n<=57?n-48:n>=65&&n<=70?n-55:n>=97&&n<=102?n-87:void a(!1,"Invalid character in "+e)}function s(e,t,n){var a=d(e,n);return n-1>=t&&(a|=d(e,n-1)<<4),a}function c(e,t,n,r){for(var i=0,o=0,d=Math.min(e.length,n),s=t;s<d;s++){var c=e.charCodeAt(s)-48;i*=r,o=c>=49?c-49+10:c>=17?c-17+10:c,a(c>=0&&o<r,"Invalid character"),i+=o}return i}function u(e,t){e.words=t.words,e.length=t.length,e.negative=t.negative,e.red=t.red}if(i.isBN=function(e){return e instanceof i||null!==e&&"object"==typeof e&&e.constructor.wordSize===i.wordSize&&Array.isArray(e.words)},i.max=function(e,t){return e.cmp(t)>0?e:t},i.min=function(e,t){return e.cmp(t)<0?e:t},i.prototype._init=function(e,t,n){if("number"==typeof e)return this._initNumber(e,t,n);if("object"==typeof e)return this._initArray(e,t,n);"hex"===t&&(t=16),a(t===(0|t)&&t>=2&&t<=36);var r=0;"-"===(e=e.toString().replace(/\s+/g,""))[0]&&(r++,this.negative=1),r<e.length&&(16===t?this._parseHex(e,r,n):(this._parseBase(e,t,r),"le"===n&&this._initArray(this.toArray(),t,n)))},i.prototype._initNumber=function(e,t,n){e<0&&(this.negative=1,e=-e),e<67108864?(this.words=[67108863&e],this.length=1):e<4503599627370496?(this.words=[67108863&e,e/67108864&67108863],this.length=2):(a(e<9007199254740992),this.words=[67108863&e,e/67108864&67108863,1],this.length=3),"le"===n&&this._initArray(this.toArray(),t,n)},i.prototype._initArray=function(e,t,n){if(a("number"==typeof e.length),e.length<=0)return this.words=[0],this.length=1,this;this.length=Math.ceil(e.length/3),this.words=new Array(this.length);for(var r=0;r<this.length;r++)this.words[r]=0;var i,o,d=0;if("be"===n)for(r=e.length-1,i=0;r>=0;r-=3)o=e[r]|e[r-1]<<8|e[r-2]<<16,this.words[i]|=o<<d&67108863,this.words[i+1]=o>>>26-d&67108863,(d+=24)>=26&&(d-=26,i++);else if("le"===n)for(r=0,i=0;r<e.length;r+=3)o=e[r]|e[r+1]<<8|e[r+2]<<16,this.words[i]|=o<<d&67108863,this.words[i+1]=o>>>26-d&67108863,(d+=24)>=26&&(d-=26,i++);return this._strip()},i.prototype._parseHex=function(e,t,n){this.length=Math.ceil((e.length-t)/6),this.words=new Array(this.length);for(var a=0;a<this.length;a++)this.words[a]=0;var r,i=0,o=0;if("be"===n)for(a=e.length-1;a>=t;a-=2)r=s(e,t,a)<<i,this.words[o]|=67108863&r,i>=18?(i-=18,o+=1,this.words[o]|=r>>>26):i+=8;else for(a=(e.length-t)%2==0?t+1:t;a<e.length;a+=2)r=s(e,t,a)<<i,this.words[o]|=67108863&r,i>=18?(i-=18,o+=1,this.words[o]|=r>>>26):i+=8;this._strip()},i.prototype._parseBase=function(e,t,n){this.words=[0],this.length=1;for(var a=0,r=1;r<=67108863;r*=t)a++;a--,r=r/t|0;for(var i=e.length-n,o=i%a,d=Math.min(i,i-o)+n,s=0,u=n;u<d;u+=a)s=c(e,u,u+a,t),this.imuln(r),this.words[0]+s<67108864?this.words[0]+=s:this._iaddn(s);if(0!==o){var l=1;for(s=c(e,u,e.length,t),u=0;u<o;u++)l*=t;this.imuln(l),this.words[0]+s<67108864?this.words[0]+=s:this._iaddn(s)}this._strip()},i.prototype.copy=function(e){e.words=new Array(this.length);for(var t=0;t<this.length;t++)e.words[t]=this.words[t];e.length=this.length,e.negative=this.negative,e.red=this.red},i.prototype._move=function(e){u(e,this)},i.prototype.clone=function(){var e=new i(null);return this.copy(e),e},i.prototype._expand=function(e){for(;this.length<e;)this.words[this.length++]=0;return this},i.prototype._strip=function(){for(;this.length>1&&0===this.words[this.length-1];)this.length--;return this._normSign()},i.prototype._normSign=function(){return 1===this.length&&0===this.words[0]&&(this.negative=0),this},"undefined"!=typeof Symbol&&"function"==typeof Symbol.for)try{i.prototype[Symbol.for("nodejs.util.inspect.custom")]=l}catch(N){i.prototype.inspect=l}else i.prototype.inspect=l;function l(){return(this.red?"<BN-R: ":"<BN: ")+this.toString(16)+">"}var g=["","0","00","000","0000","00000","000000","0000000","00000000","000000000","0000000000","00000000000","000000000000","0000000000000","00000000000000","000000000000000","0000000000000000","00000000000000000","000000000000000000","0000000000000000000","00000000000000000000","000000000000000000000","0000000000000000000000","00000000000000000000000","000000000000000000000000","0000000000000000000000000"],h=[0,0,25,16,12,11,10,9,8,8,7,7,7,7,6,6,6,6,6,6,6,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5],f=[0,0,33554432,43046721,16777216,48828125,60466176,40353607,16777216,43046721,1e7,19487171,35831808,62748517,7529536,11390625,16777216,24137569,34012224,47045881,64e6,4084101,5153632,6436343,7962624,9765625,11881376,14348907,17210368,20511149,243e5,28629151,33554432,39135393,45435424,52521875,60466176];i.prototype.toString=function(e,t){var n;if(t=0|t||1,16===(e=e||10)||"hex"===e){n="";for(var r=0,i=0,o=0;o<this.length;o++){var d=this.words[o],s=(16777215&(d<<r|i)).toString(16);i=d>>>24-r&16777215,(r+=2)>=26&&(r-=26,o--),n=0!==i||o!==this.length-1?g[6-s.length]+s+n:s+n}for(0!==i&&(n=i.toString(16)+n);n.length%t!=0;)n="0"+n;return 0!==this.negative&&(n="-"+n),n}if(e===(0|e)&&e>=2&&e<=36){var c=h[e],u=f[e];n="";var l=this.clone();for(l.negative=0;!l.isZero();){var p=l.modrn(u).toString(e);n=(l=l.idivn(u)).isZero()?p+n:g[c-p.length]+p+n}for(this.isZero()&&(n="0"+n);n.length%t!=0;)n="0"+n;return 0!==this.negative&&(n="-"+n),n}a(!1,"Base should be between 2 and 36")},i.prototype.toNumber=function(){var e=this.words[0];return 2===this.length?e+=67108864*this.words[1]:3===this.length&&1===this.words[2]?e+=4503599627370496+67108864*this.words[1]:this.length>2&&a(!1,"Number can only safely store up to 53 bits"),0!==this.negative?-e:e},i.prototype.toJSON=function(){return this.toString(16,2)},o&&(i.prototype.toBuffer=function(e,t){return this.toArrayLike(o,e,t)}),i.prototype.toArray=function(e,t){return this.toArrayLike(Array,e,t)};function p(e,t,n){n.negative=t.negative^e.negative;var a=e.length+t.length|0;n.length=a,a=a-1|0;var r=0|e.words[0],i=0|t.words[0],o=r*i,d=67108863&o,s=o/67108864|0;n.words[0]=d;for(var c=1;c<a;c++){for(var u=s>>>26,l=67108863&s,g=Math.min(c,t.length-1),h=Math.max(0,c-e.length+1);h<=g;h++){var f=c-h|0;u+=(o=(r=0|e.words[f])*(i=0|t.words[h])+l)/67108864|0,l=67108863&o}n.words[c]=0|l,s=0|u}return 0!==s?n.words[c]=0|s:n.length--,n._strip()}i.prototype.toArrayLike=function(e,t,n){this._strip();var r=this.byteLength(),i=n||Math.max(1,r);a(r<=i,"byte array longer than desired length"),a(i>0,"Requested array length <= 0");var o=function(e,t){return e.allocUnsafe?e.allocUnsafe(t):new e(t)}(e,i);return this["_toArrayLike"+("le"===t?"LE":"BE")](o,r),o},i.prototype._toArrayLikeLE=function(e,t){for(var n=0,a=0,r=0,i=0;r<this.length;r++){var o=this.words[r]<<i|a;e[n++]=255&o,n<e.length&&(e[n++]=o>>8&255),n<e.length&&(e[n++]=o>>16&255),6===i?(n<e.length&&(e[n++]=o>>24&255),a=0,i=0):(a=o>>>24,i+=2)}if(n<e.length)for(e[n++]=a;n<e.length;)e[n++]=0},i.prototype._toArrayLikeBE=function(e,t){for(var n=e.length-1,a=0,r=0,i=0;r<this.length;r++){var o=this.words[r]<<i|a;e[n--]=255&o,n>=0&&(e[n--]=o>>8&255),n>=0&&(e[n--]=o>>16&255),6===i?(n>=0&&(e[n--]=o>>24&255),a=0,i=0):(a=o>>>24,i+=2)}if(n>=0)for(e[n--]=a;n>=0;)e[n--]=0},Math.clz32?i.prototype._countBits=function(e){return 32-Math.clz32(e)}:i.prototype._countBits=function(e){var t=e,n=0;return t>=4096&&(n+=13,t>>>=13),t>=64&&(n+=7,t>>>=7),t>=8&&(n+=4,t>>>=4),t>=2&&(n+=2,t>>>=2),n+t},i.prototype._zeroBits=function(e){if(0===e)return 26;var t=e,n=0;return 0==(8191&t)&&(n+=13,t>>>=13),0==(127&t)&&(n+=7,t>>>=7),0==(15&t)&&(n+=4,t>>>=4),0==(3&t)&&(n+=2,t>>>=2),0==(1&t)&&n++,n},i.prototype.bitLength=function(){var e=this.words[this.length-1],t=this._countBits(e);return 26*(this.length-1)+t},i.prototype.zeroBits=function(){if(this.isZero())return 0;for(var e=0,t=0;t<this.length;t++){var n=this._zeroBits(this.words[t]);if(e+=n,26!==n)break}return e},i.prototype.byteLength=function(){return Math.ceil(this.bitLength()/8)},i.prototype.toTwos=function(e){return 0!==this.negative?this.abs().inotn(e).iaddn(1):this.clone()},i.prototype.fromTwos=function(e){return this.testn(e-1)?this.notn(e).iaddn(1).ineg():this.clone()},i.prototype.isNeg=function(){return 0!==this.negative},i.prototype.neg=function(){return this.clone().ineg()},i.prototype.ineg=function(){return this.isZero()||(this.negative^=1),this},i.prototype.iuor=function(e){for(;this.length<e.length;)this.words[this.length++]=0;for(var t=0;t<e.length;t++)this.words[t]=this.words[t]|e.words[t];return this._strip()},i.prototype.ior=function(e){return a(0==(this.negative|e.negative)),this.iuor(e)},i.prototype.or=function(e){return this.length>e.length?this.clone().ior(e):e.clone().ior(this)},i.prototype.uor=function(e){return this.length>e.length?this.clone().iuor(e):e.clone().iuor(this)},i.prototype.iuand=function(e){var t;t=this.length>e.length?e:this;for(var n=0;n<t.length;n++)this.words[n]=this.words[n]&e.words[n];return this.length=t.length,this._strip()},i.prototype.iand=function(e){return a(0==(this.negative|e.negative)),this.iuand(e)},i.prototype.and=function(e){return this.length>e.length?this.clone().iand(e):e.clone().iand(this)},i.prototype.uand=function(e){return this.length>e.length?this.clone().iuand(e):e.clone().iuand(this)},i.prototype.iuxor=function(e){var t,n;this.length>e.length?(t=this,n=e):(t=e,n=this);for(var a=0;a<n.length;a++)this.words[a]=t.words[a]^n.words[a];if(this!==t)for(;a<t.length;a++)this.words[a]=t.words[a];return this.length=t.length,this._strip()},i.prototype.ixor=function(e){return a(0==(this.negative|e.negative)),this.iuxor(e)},i.prototype.xor=function(e){return this.length>e.length?this.clone().ixor(e):e.clone().ixor(this)},i.prototype.uxor=function(e){return this.length>e.length?this.clone().iuxor(e):e.clone().iuxor(this)},i.prototype.inotn=function(e){a("number"==typeof e&&e>=0);var t=0|Math.ceil(e/26),n=e%26;this._expand(t),n>0&&t--;for(var r=0;r<t;r++)this.words[r]=67108863&~this.words[r];return n>0&&(this.words[r]=~this.words[r]&67108863>>26-n),this._strip()},i.prototype.notn=function(e){return this.clone().inotn(e)},i.prototype.setn=function(e,t){a("number"==typeof e&&e>=0);var n=e/26|0,r=e%26;return this._expand(n+1),this.words[n]=t?this.words[n]|1<<r:this.words[n]&~(1<<r),this._strip()},i.prototype.iadd=function(e){var t,n,a;if(0!==this.negative&&0===e.negative)return this.negative=0,t=this.isub(e),this.negative^=1,this._normSign();if(0===this.negative&&0!==e.negative)return e.negative=0,t=this.isub(e),e.negative=1,t._normSign();this.length>e.length?(n=this,a=e):(n=e,a=this);for(var r=0,i=0;i<a.length;i++)t=(0|n.words[i])+(0|a.words[i])+r,this.words[i]=67108863&t,r=t>>>26;for(;0!==r&&i<n.length;i++)t=(0|n.words[i])+r,this.words[i]=67108863&t,r=t>>>26;if(this.length=n.length,0!==r)this.words[this.length]=r,this.length++;else if(n!==this)for(;i<n.length;i++)this.words[i]=n.words[i];return this},i.prototype.add=function(e){var t;return 0!==e.negative&&0===this.negative?(e.negative=0,t=this.sub(e),e.negative^=1,t):0===e.negative&&0!==this.negative?(this.negative=0,t=e.sub(this),this.negative=1,t):this.length>e.length?this.clone().iadd(e):e.clone().iadd(this)},i.prototype.isub=function(e){if(0!==e.negative){e.negative=0;var t=this.iadd(e);return e.negative=1,t._normSign()}if(0!==this.negative)return this.negative=0,this.iadd(e),this.negative=1,this._normSign();var n,a,r=this.cmp(e);if(0===r)return this.negative=0,this.length=1,this.words[0]=0,this;r>0?(n=this,a=e):(n=e,a=this);for(var i=0,o=0;o<a.length;o++)i=(t=(0|n.words[o])-(0|a.words[o])+i)>>26,this.words[o]=67108863&t;for(;0!==i&&o<n.length;o++)i=(t=(0|n.words[o])+i)>>26,this.words[o]=67108863&t;if(0===i&&o<n.length&&n!==this)for(;o<n.length;o++)this.words[o]=n.words[o];return this.length=Math.max(this.length,o),n!==this&&(this.negative=1),this._strip()},i.prototype.sub=function(e){return this.clone().isub(e)};var m=function(e,t,n){var a,r,i,o=e.words,d=t.words,s=n.words,c=0,u=0|o[0],l=8191&u,g=u>>>13,h=0|o[1],f=8191&h,p=h>>>13,m=0|o[2],R=8191&m,b=m>>>13,y=0|o[3],v=8191&y,_=y>>>13,w=0|o[4],M=8191&w,x=w>>>13,E=0|o[5],S=8191&E,k=E>>>13,N=0|o[6],D=8191&N,A=N>>>13,j=0|o[7],T=8191&j,L=j>>>13,I=0|o[8],C=8191&I,O=I>>>13,P=0|o[9],z=8191&P,B=P>>>13,F=0|d[0],U=8191&F,$=F>>>13,H=0|d[1],q=8191&H,Y=H>>>13,G=0|d[2],V=8191&G,Q=G>>>13,W=0|d[3],K=8191&W,Z=W>>>13,X=0|d[4],J=8191&X,ee=X>>>13,te=0|d[5],ne=8191&te,ae=te>>>13,re=0|d[6],ie=8191&re,oe=re>>>13,de=0|d[7],se=8191&de,ce=de>>>13,ue=0|d[8],le=8191&ue,ge=ue>>>13,he=0|d[9],fe=8191&he,pe=he>>>13;n.negative=e.negative^t.negative,n.length=19;var me=(c+(a=Math.imul(l,U))|0)+((8191&(r=(r=Math.imul(l,$))+Math.imul(g,U)|0))<<13)|0;c=((i=Math.imul(g,$))+(r>>>13)|0)+(me>>>26)|0,me&=67108863,a=Math.imul(f,U),r=(r=Math.imul(f,$))+Math.imul(p,U)|0,i=Math.imul(p,$);var Re=(c+(a=a+Math.imul(l,q)|0)|0)+((8191&(r=(r=r+Math.imul(l,Y)|0)+Math.imul(g,q)|0))<<13)|0;c=((i=i+Math.imul(g,Y)|0)+(r>>>13)|0)+(Re>>>26)|0,Re&=67108863,a=Math.imul(R,U),r=(r=Math.imul(R,$))+Math.imul(b,U)|0,i=Math.imul(b,$),a=a+Math.imul(f,q)|0,r=(r=r+Math.imul(f,Y)|0)+Math.imul(p,q)|0,i=i+Math.imul(p,Y)|0;var be=(c+(a=a+Math.imul(l,V)|0)|0)+((8191&(r=(r=r+Math.imul(l,Q)|0)+Math.imul(g,V)|0))<<13)|0;c=((i=i+Math.imul(g,Q)|0)+(r>>>13)|0)+(be>>>26)|0,be&=67108863,a=Math.imul(v,U),r=(r=Math.imul(v,$))+Math.imul(_,U)|0,i=Math.imul(_,$),a=a+Math.imul(R,q)|0,r=(r=r+Math.imul(R,Y)|0)+Math.imul(b,q)|0,i=i+Math.imul(b,Y)|0,a=a+Math.imul(f,V)|0,r=(r=r+Math.imul(f,Q)|0)+Math.imul(p,V)|0,i=i+Math.imul(p,Q)|0;var ye=(c+(a=a+Math.imul(l,K)|0)|0)+((8191&(r=(r=r+Math.imul(l,Z)|0)+Math.imul(g,K)|0))<<13)|0;c=((i=i+Math.imul(g,Z)|0)+(r>>>13)|0)+(ye>>>26)|0,ye&=67108863,a=Math.imul(M,U),r=(r=Math.imul(M,$))+Math.imul(x,U)|0,i=Math.imul(x,$),a=a+Math.imul(v,q)|0,r=(r=r+Math.imul(v,Y)|0)+Math.imul(_,q)|0,i=i+Math.imul(_,Y)|0,a=a+Math.imul(R,V)|0,r=(r=r+Math.imul(R,Q)|0)+Math.imul(b,V)|0,i=i+Math.imul(b,Q)|0,a=a+Math.imul(f,K)|0,r=(r=r+Math.imul(f,Z)|0)+Math.imul(p,K)|0,i=i+Math.imul(p,Z)|0;var ve=(c+(a=a+Math.imul(l,J)|0)|0)+((8191&(r=(r=r+Math.imul(l,ee)|0)+Math.imul(g,J)|0))<<13)|0;c=((i=i+Math.imul(g,ee)|0)+(r>>>13)|0)+(ve>>>26)|0,ve&=67108863,a=Math.imul(S,U),r=(r=Math.imul(S,$))+Math.imul(k,U)|0,i=Math.imul(k,$),a=a+Math.imul(M,q)|0,r=(r=r+Math.imul(M,Y)|0)+Math.imul(x,q)|0,i=i+Math.imul(x,Y)|0,a=a+Math.imul(v,V)|0,r=(r=r+Math.imul(v,Q)|0)+Math.imul(_,V)|0,i=i+Math.imul(_,Q)|0,a=a+Math.imul(R,K)|0,r=(r=r+Math.imul(R,Z)|0)+Math.imul(b,K)|0,i=i+Math.imul(b,Z)|0,a=a+Math.imul(f,J)|0,r=(r=r+Math.imul(f,ee)|0)+Math.imul(p,J)|0,i=i+Math.imul(p,ee)|0;var _e=(c+(a=a+Math.imul(l,ne)|0)|0)+((8191&(r=(r=r+Math.imul(l,ae)|0)+Math.imul(g,ne)|0))<<13)|0;c=((i=i+Math.imul(g,ae)|0)+(r>>>13)|0)+(_e>>>26)|0,_e&=67108863,a=Math.imul(D,U),r=(r=Math.imul(D,$))+Math.imul(A,U)|0,i=Math.imul(A,$),a=a+Math.imul(S,q)|0,r=(r=r+Math.imul(S,Y)|0)+Math.imul(k,q)|0,i=i+Math.imul(k,Y)|0,a=a+Math.imul(M,V)|0,r=(r=r+Math.imul(M,Q)|0)+Math.imul(x,V)|0,i=i+Math.imul(x,Q)|0,a=a+Math.imul(v,K)|0,r=(r=r+Math.imul(v,Z)|0)+Math.imul(_,K)|0,i=i+Math.imul(_,Z)|0,a=a+Math.imul(R,J)|0,r=(r=r+Math.imul(R,ee)|0)+Math.imul(b,J)|0,i=i+Math.imul(b,ee)|0,a=a+Math.imul(f,ne)|0,r=(r=r+Math.imul(f,ae)|0)+Math.imul(p,ne)|0,i=i+Math.imul(p,ae)|0;var we=(c+(a=a+Math.imul(l,ie)|0)|0)+((8191&(r=(r=r+Math.imul(l,oe)|0)+Math.imul(g,ie)|0))<<13)|0;c=((i=i+Math.imul(g,oe)|0)+(r>>>13)|0)+(we>>>26)|0,we&=67108863,a=Math.imul(T,U),r=(r=Math.imul(T,$))+Math.imul(L,U)|0,i=Math.imul(L,$),a=a+Math.imul(D,q)|0,r=(r=r+Math.imul(D,Y)|0)+Math.imul(A,q)|0,i=i+Math.imul(A,Y)|0,a=a+Math.imul(S,V)|0,r=(r=r+Math.imul(S,Q)|0)+Math.imul(k,V)|0,i=i+Math.imul(k,Q)|0,a=a+Math.imul(M,K)|0,r=(r=r+Math.imul(M,Z)|0)+Math.imul(x,K)|0,i=i+Math.imul(x,Z)|0,a=a+Math.imul(v,J)|0,r=(r=r+Math.imul(v,ee)|0)+Math.imul(_,J)|0,i=i+Math.imul(_,ee)|0,a=a+Math.imul(R,ne)|0,r=(r=r+Math.imul(R,ae)|0)+Math.imul(b,ne)|0,i=i+Math.imul(b,ae)|0,a=a+Math.imul(f,ie)|0,r=(r=r+Math.imul(f,oe)|0)+Math.imul(p,ie)|0,i=i+Math.imul(p,oe)|0;var Me=(c+(a=a+Math.imul(l,se)|0)|0)+((8191&(r=(r=r+Math.imul(l,ce)|0)+Math.imul(g,se)|0))<<13)|0;c=((i=i+Math.imul(g,ce)|0)+(r>>>13)|0)+(Me>>>26)|0,Me&=67108863,a=Math.imul(C,U),r=(r=Math.imul(C,$))+Math.imul(O,U)|0,i=Math.imul(O,$),a=a+Math.imul(T,q)|0,r=(r=r+Math.imul(T,Y)|0)+Math.imul(L,q)|0,i=i+Math.imul(L,Y)|0,a=a+Math.imul(D,V)|0,r=(r=r+Math.imul(D,Q)|0)+Math.imul(A,V)|0,i=i+Math.imul(A,Q)|0,a=a+Math.imul(S,K)|0,r=(r=r+Math.imul(S,Z)|0)+Math.imul(k,K)|0,i=i+Math.imul(k,Z)|0,a=a+Math.imul(M,J)|0,r=(r=r+Math.imul(M,ee)|0)+Math.imul(x,J)|0,i=i+Math.imul(x,ee)|0,a=a+Math.imul(v,ne)|0,r=(r=r+Math.imul(v,ae)|0)+Math.imul(_,ne)|0,i=i+Math.imul(_,ae)|0,a=a+Math.imul(R,ie)|0,r=(r=r+Math.imul(R,oe)|0)+Math.imul(b,ie)|0,i=i+Math.imul(b,oe)|0,a=a+Math.imul(f,se)|0,r=(r=r+Math.imul(f,ce)|0)+Math.imul(p,se)|0,i=i+Math.imul(p,ce)|0;var xe=(c+(a=a+Math.imul(l,le)|0)|0)+((8191&(r=(r=r+Math.imul(l,ge)|0)+Math.imul(g,le)|0))<<13)|0;c=((i=i+Math.imul(g,ge)|0)+(r>>>13)|0)+(xe>>>26)|0,xe&=67108863,a=Math.imul(z,U),r=(r=Math.imul(z,$))+Math.imul(B,U)|0,i=Math.imul(B,$),a=a+Math.imul(C,q)|0,r=(r=r+Math.imul(C,Y)|0)+Math.imul(O,q)|0,i=i+Math.imul(O,Y)|0,a=a+Math.imul(T,V)|0,r=(r=r+Math.imul(T,Q)|0)+Math.imul(L,V)|0,i=i+Math.imul(L,Q)|0,a=a+Math.imul(D,K)|0,r=(r=r+Math.imul(D,Z)|0)+Math.imul(A,K)|0,i=i+Math.imul(A,Z)|0,a=a+Math.imul(S,J)|0,r=(r=r+Math.imul(S,ee)|0)+Math.imul(k,J)|0,i=i+Math.imul(k,ee)|0,a=a+Math.imul(M,ne)|0,r=(r=r+Math.imul(M,ae)|0)+Math.imul(x,ne)|0,i=i+Math.imul(x,ae)|0,a=a+Math.imul(v,ie)|0,r=(r=r+Math.imul(v,oe)|0)+Math.imul(_,ie)|0,i=i+Math.imul(_,oe)|0,a=a+Math.imul(R,se)|0,r=(r=r+Math.imul(R,ce)|0)+Math.imul(b,se)|0,i=i+Math.imul(b,ce)|0,a=a+Math.imul(f,le)|0,r=(r=r+Math.imul(f,ge)|0)+Math.imul(p,le)|0,i=i+Math.imul(p,ge)|0;var Ee=(c+(a=a+Math.imul(l,fe)|0)|0)+((8191&(r=(r=r+Math.imul(l,pe)|0)+Math.imul(g,fe)|0))<<13)|0;c=((i=i+Math.imul(g,pe)|0)+(r>>>13)|0)+(Ee>>>26)|0,Ee&=67108863,a=Math.imul(z,q),r=(r=Math.imul(z,Y))+Math.imul(B,q)|0,i=Math.imul(B,Y),a=a+Math.imul(C,V)|0,r=(r=r+Math.imul(C,Q)|0)+Math.imul(O,V)|0,i=i+Math.imul(O,Q)|0,a=a+Math.imul(T,K)|0,r=(r=r+Math.imul(T,Z)|0)+Math.imul(L,K)|0,i=i+Math.imul(L,Z)|0,a=a+Math.imul(D,J)|0,r=(r=r+Math.imul(D,ee)|0)+Math.imul(A,J)|0,i=i+Math.imul(A,ee)|0,a=a+Math.imul(S,ne)|0,r=(r=r+Math.imul(S,ae)|0)+Math.imul(k,ne)|0,i=i+Math.imul(k,ae)|0,a=a+Math.imul(M,ie)|0,r=(r=r+Math.imul(M,oe)|0)+Math.imul(x,ie)|0,i=i+Math.imul(x,oe)|0,a=a+Math.imul(v,se)|0,r=(r=r+Math.imul(v,ce)|0)+Math.imul(_,se)|0,i=i+Math.imul(_,ce)|0,a=a+Math.imul(R,le)|0,r=(r=r+Math.imul(R,ge)|0)+Math.imul(b,le)|0,i=i+Math.imul(b,ge)|0;var Se=(c+(a=a+Math.imul(f,fe)|0)|0)+((8191&(r=(r=r+Math.imul(f,pe)|0)+Math.imul(p,fe)|0))<<13)|0;c=((i=i+Math.imul(p,pe)|0)+(r>>>13)|0)+(Se>>>26)|0,Se&=67108863,a=Math.imul(z,V),r=(r=Math.imul(z,Q))+Math.imul(B,V)|0,i=Math.imul(B,Q),a=a+Math.imul(C,K)|0,r=(r=r+Math.imul(C,Z)|0)+Math.imul(O,K)|0,i=i+Math.imul(O,Z)|0,a=a+Math.imul(T,J)|0,r=(r=r+Math.imul(T,ee)|0)+Math.imul(L,J)|0,i=i+Math.imul(L,ee)|0,a=a+Math.imul(D,ne)|0,r=(r=r+Math.imul(D,ae)|0)+Math.imul(A,ne)|0,i=i+Math.imul(A,ae)|0,a=a+Math.imul(S,ie)|0,r=(r=r+Math.imul(S,oe)|0)+Math.imul(k,ie)|0,i=i+Math.imul(k,oe)|0,a=a+Math.imul(M,se)|0,r=(r=r+Math.imul(M,ce)|0)+Math.imul(x,se)|0,i=i+Math.imul(x,ce)|0,a=a+Math.imul(v,le)|0,r=(r=r+Math.imul(v,ge)|0)+Math.imul(_,le)|0,i=i+Math.imul(_,ge)|0;var ke=(c+(a=a+Math.imul(R,fe)|0)|0)+((8191&(r=(r=r+Math.imul(R,pe)|0)+Math.imul(b,fe)|0))<<13)|0;c=((i=i+Math.imul(b,pe)|0)+(r>>>13)|0)+(ke>>>26)|0,ke&=67108863,a=Math.imul(z,K),r=(r=Math.imul(z,Z))+Math.imul(B,K)|0,i=Math.imul(B,Z),a=a+Math.imul(C,J)|0,r=(r=r+Math.imul(C,ee)|0)+Math.imul(O,J)|0,i=i+Math.imul(O,ee)|0,a=a+Math.imul(T,ne)|0,r=(r=r+Math.imul(T,ae)|0)+Math.imul(L,ne)|0,i=i+Math.imul(L,ae)|0,a=a+Math.imul(D,ie)|0,r=(r=r+Math.imul(D,oe)|0)+Math.imul(A,ie)|0,i=i+Math.imul(A,oe)|0,a=a+Math.imul(S,se)|0,r=(r=r+Math.imul(S,ce)|0)+Math.imul(k,se)|0,i=i+Math.imul(k,ce)|0,a=a+Math.imul(M,le)|0,r=(r=r+Math.imul(M,ge)|0)+Math.imul(x,le)|0,i=i+Math.imul(x,ge)|0;var Ne=(c+(a=a+Math.imul(v,fe)|0)|0)+((8191&(r=(r=r+Math.imul(v,pe)|0)+Math.imul(_,fe)|0))<<13)|0;c=((i=i+Math.imul(_,pe)|0)+(r>>>13)|0)+(Ne>>>26)|0,Ne&=67108863,a=Math.imul(z,J),r=(r=Math.imul(z,ee))+Math.imul(B,J)|0,i=Math.imul(B,ee),a=a+Math.imul(C,ne)|0,r=(r=r+Math.imul(C,ae)|0)+Math.imul(O,ne)|0,i=i+Math.imul(O,ae)|0,a=a+Math.imul(T,ie)|0,r=(r=r+Math.imul(T,oe)|0)+Math.imul(L,ie)|0,i=i+Math.imul(L,oe)|0,a=a+Math.imul(D,se)|0,r=(r=r+Math.imul(D,ce)|0)+Math.imul(A,se)|0,i=i+Math.imul(A,ce)|0,a=a+Math.imul(S,le)|0,r=(r=r+Math.imul(S,ge)|0)+Math.imul(k,le)|0,i=i+Math.imul(k,ge)|0;var De=(c+(a=a+Math.imul(M,fe)|0)|0)+((8191&(r=(r=r+Math.imul(M,pe)|0)+Math.imul(x,fe)|0))<<13)|0;c=((i=i+Math.imul(x,pe)|0)+(r>>>13)|0)+(De>>>26)|0,De&=67108863,a=Math.imul(z,ne),r=(r=Math.imul(z,ae))+Math.imul(B,ne)|0,i=Math.imul(B,ae),a=a+Math.imul(C,ie)|0,r=(r=r+Math.imul(C,oe)|0)+Math.imul(O,ie)|0,i=i+Math.imul(O,oe)|0,a=a+Math.imul(T,se)|0,r=(r=r+Math.imul(T,ce)|0)+Math.imul(L,se)|0,i=i+Math.imul(L,ce)|0,a=a+Math.imul(D,le)|0,r=(r=r+Math.imul(D,ge)|0)+Math.imul(A,le)|0,i=i+Math.imul(A,ge)|0;var Ae=(c+(a=a+Math.imul(S,fe)|0)|0)+((8191&(r=(r=r+Math.imul(S,pe)|0)+Math.imul(k,fe)|0))<<13)|0;c=((i=i+Math.imul(k,pe)|0)+(r>>>13)|0)+(Ae>>>26)|0,Ae&=67108863,a=Math.imul(z,ie),r=(r=Math.imul(z,oe))+Math.imul(B,ie)|0,i=Math.imul(B,oe),a=a+Math.imul(C,se)|0,r=(r=r+Math.imul(C,ce)|0)+Math.imul(O,se)|0,i=i+Math.imul(O,ce)|0,a=a+Math.imul(T,le)|0,r=(r=r+Math.imul(T,ge)|0)+Math.imul(L,le)|0,i=i+Math.imul(L,ge)|0;var je=(c+(a=a+Math.imul(D,fe)|0)|0)+((8191&(r=(r=r+Math.imul(D,pe)|0)+Math.imul(A,fe)|0))<<13)|0;c=((i=i+Math.imul(A,pe)|0)+(r>>>13)|0)+(je>>>26)|0,je&=67108863,a=Math.imul(z,se),r=(r=Math.imul(z,ce))+Math.imul(B,se)|0,i=Math.imul(B,ce),a=a+Math.imul(C,le)|0,r=(r=r+Math.imul(C,ge)|0)+Math.imul(O,le)|0,i=i+Math.imul(O,ge)|0;var Te=(c+(a=a+Math.imul(T,fe)|0)|0)+((8191&(r=(r=r+Math.imul(T,pe)|0)+Math.imul(L,fe)|0))<<13)|0;c=((i=i+Math.imul(L,pe)|0)+(r>>>13)|0)+(Te>>>26)|0,Te&=67108863,a=Math.imul(z,le),r=(r=Math.imul(z,ge))+Math.imul(B,le)|0,i=Math.imul(B,ge);var Le=(c+(a=a+Math.imul(C,fe)|0)|0)+((8191&(r=(r=r+Math.imul(C,pe)|0)+Math.imul(O,fe)|0))<<13)|0;c=((i=i+Math.imul(O,pe)|0)+(r>>>13)|0)+(Le>>>26)|0,Le&=67108863;var Ie=(c+(a=Math.imul(z,fe))|0)+((8191&(r=(r=Math.imul(z,pe))+Math.imul(B,fe)|0))<<13)|0;return c=((i=Math.imul(B,pe))+(r>>>13)|0)+(Ie>>>26)|0,Ie&=67108863,s[0]=me,s[1]=Re,s[2]=be,s[3]=ye,s[4]=ve,s[5]=_e,s[6]=we,s[7]=Me,s[8]=xe,s[9]=Ee,s[10]=Se,s[11]=ke,s[12]=Ne,s[13]=De,s[14]=Ae,s[15]=je,s[16]=Te,s[17]=Le,s[18]=Ie,0!==c&&(s[19]=c,n.length++),n};function R(e,t,n){n.negative=t.negative^e.negative,n.length=e.length+t.length;for(var a=0,r=0,i=0;i<n.length-1;i++){var o=r;r=0;for(var d=67108863&a,s=Math.min(i,t.length-1),c=Math.max(0,i-e.length+1);c<=s;c++){var u=i-c,l=(0|e.words[u])*(0|t.words[c]),g=67108863&l;d=67108863&(g=g+d|0),r+=(o=(o=o+(l/67108864|0)|0)+(g>>>26)|0)>>>26,o&=67108863}n.words[i]=d,a=o,o=r}return 0!==a?n.words[i]=a:n.length--,n._strip()}function b(e,t,n){return R(e,t,n)}function y(e,t){this.x=e,this.y=t}Math.imul||(m=p),i.prototype.mulTo=function(e,t){var n=this.length+e.length;return 10===this.length&&10===e.length?m(this,e,t):n<63?p(this,e,t):n<1024?R(this,e,t):b(this,e,t)},y.prototype.makeRBT=function(e){for(var t=new Array(e),n=i.prototype._countBits(e)-1,a=0;a<e;a++)t[a]=this.revBin(a,n,e);return t},y.prototype.revBin=function(e,t,n){if(0===e||e===n-1)return e;for(var a=0,r=0;r<t;r++)a|=(1&e)<<t-r-1,e>>=1;return a},y.prototype.permute=function(e,t,n,a,r,i){for(var o=0;o<i;o++)a[o]=t[e[o]],r[o]=n[e[o]]},y.prototype.transform=function(e,t,n,a,r,i){this.permute(i,e,t,n,a,r);for(var o=1;o<r;o<<=1)for(var d=o<<1,s=Math.cos(2*Math.PI/d),c=Math.sin(2*Math.PI/d),u=0;u<r;u+=d)for(var l=s,g=c,h=0;h<o;h++){var f=n[u+h],p=a[u+h],m=n[u+h+o],R=a[u+h+o],b=l*m-g*R;R=l*R+g*m,m=b,n[u+h]=f+m,a[u+h]=p+R,n[u+h+o]=f-m,a[u+h+o]=p-R,h!==d&&(b=s*l-c*g,g=s*g+c*l,l=b)}},y.prototype.guessLen13b=function(e,t){var n=1|Math.max(t,e),a=1&n,r=0;for(n=n/2|0;n;n>>>=1)r++;return 1<<r+1+a},y.prototype.conjugate=function(e,t,n){if(!(n<=1))for(var a=0;a<n/2;a++){var r=e[a];e[a]=e[n-a-1],e[n-a-1]=r,r=t[a],t[a]=-t[n-a-1],t[n-a-1]=-r}},y.prototype.normalize13b=function(e,t){for(var n=0,a=0;a<t/2;a++){var r=8192*Math.round(e[2*a+1]/t)+Math.round(e[2*a]/t)+n;e[a]=67108863&r,n=r<67108864?0:r/67108864|0}return e},y.prototype.convert13b=function(e,t,n,r){for(var i=0,o=0;o<t;o++)i+=0|e[o],n[2*o]=8191&i,i>>>=13,n[2*o+1]=8191&i,i>>>=13;for(o=2*t;o<r;++o)n[o]=0;a(0===i),a(0==(-8192&i))},y.prototype.stub=function(e){for(var t=new Array(e),n=0;n<e;n++)t[n]=0;return t},y.prototype.mulp=function(e,t,n){var a=2*this.guessLen13b(e.length,t.length),r=this.makeRBT(a),i=this.stub(a),o=new Array(a),d=new Array(a),s=new Array(a),c=new Array(a),u=new Array(a),l=new Array(a),g=n.words;g.length=a,this.convert13b(e.words,e.length,o,a),this.convert13b(t.words,t.length,c,a),this.transform(o,i,d,s,a,r),this.transform(c,i,u,l,a,r);for(var h=0;h<a;h++){var f=d[h]*u[h]-s[h]*l[h];s[h]=d[h]*l[h]+s[h]*u[h],d[h]=f}return this.conjugate(d,s,a),this.transform(d,s,g,i,a,r),this.conjugate(g,i,a),this.normalize13b(g,a),n.negative=e.negative^t.negative,n.length=e.length+t.length,n._strip()},i.prototype.mul=function(e){var t=new i(null);return t.words=new Array(this.length+e.length),this.mulTo(e,t)},i.prototype.mulf=function(e){var t=new i(null);return t.words=new Array(this.length+e.length),b(this,e,t)},i.prototype.imul=function(e){return this.clone().mulTo(e,this)},i.prototype.imuln=function(e){var t=e<0;t&&(e=-e),a("number"==typeof e),a(e<67108864);for(var n=0,r=0;r<this.length;r++){var i=(0|this.words[r])*e,o=(67108863&i)+(67108863&n);n>>=26,n+=i/67108864|0,n+=o>>>26,this.words[r]=67108863&o}return 0!==n&&(this.words[r]=n,this.length++),t?this.ineg():this},i.prototype.muln=function(e){return this.clone().imuln(e)},i.prototype.sqr=function(){return this.mul(this)},i.prototype.isqr=function(){return this.imul(this.clone())},i.prototype.pow=function(e){var t=function(e){for(var t=new Array(e.bitLength()),n=0;n<t.length;n++){var a=n/26|0,r=n%26;t[n]=e.words[a]>>>r&1}return t}(e);if(0===t.length)return new i(1);for(var n=this,a=0;a<t.length&&0===t[a];a++,n=n.sqr());if(++a<t.length)for(var r=n.sqr();a<t.length;a++,r=r.sqr())0!==t[a]&&(n=n.mul(r));return n},i.prototype.iushln=function(e){a("number"==typeof e&&e>=0);var t,n=e%26,r=(e-n)/26,i=67108863>>>26-n<<26-n;if(0!==n){var o=0;for(t=0;t<this.length;t++){var d=this.words[t]&i,s=(0|this.words[t])-d<<n;this.words[t]=s|o,o=d>>>26-n}o&&(this.words[t]=o,this.length++)}if(0!==r){for(t=this.length-1;t>=0;t--)this.words[t+r]=this.words[t];for(t=0;t<r;t++)this.words[t]=0;this.length+=r}return this._strip()},i.prototype.ishln=function(e){return a(0===this.negative),this.iushln(e)},i.prototype.iushrn=function(e,t,n){var r;a("number"==typeof e&&e>=0),r=t?(t-t%26)/26:0;var i=e%26,o=Math.min((e-i)/26,this.length),d=67108863^67108863>>>i<<i,s=n;if(r-=o,r=Math.max(0,r),s){for(var c=0;c<o;c++)s.words[c]=this.words[c];s.length=o}if(0===o);else if(this.length>o)for(this.length-=o,c=0;c<this.length;c++)this.words[c]=this.words[c+o];else this.words[0]=0,this.length=1;var u=0;for(c=this.length-1;c>=0&&(0!==u||c>=r);c--){var l=0|this.words[c];this.words[c]=u<<26-i|l>>>i,u=l&d}return s&&0!==u&&(s.words[s.length++]=u),0===this.length&&(this.words[0]=0,this.length=1),this._strip()},i.prototype.ishrn=function(e,t,n){return a(0===this.negative),this.iushrn(e,t,n)},i.prototype.shln=function(e){return this.clone().ishln(e)},i.prototype.ushln=function(e){return this.clone().iushln(e)},i.prototype.shrn=function(e){return this.clone().ishrn(e)},i.prototype.ushrn=function(e){return this.clone().iushrn(e)},i.prototype.testn=function(e){a("number"==typeof e&&e>=0);var t=e%26,n=(e-t)/26,r=1<<t;return!(this.length<=n)&&!!(this.words[n]&r)},i.prototype.imaskn=function(e){a("number"==typeof e&&e>=0);var t=e%26,n=(e-t)/26;if(a(0===this.negative,"imaskn works only with positive numbers"),this.length<=n)return this;if(0!==t&&n++,this.length=Math.min(n,this.length),0!==t){var r=67108863^67108863>>>t<<t;this.words[this.length-1]&=r}return this._strip()},i.prototype.maskn=function(e){return this.clone().imaskn(e)},i.prototype.iaddn=function(e){return a("number"==typeof e),a(e<67108864),e<0?this.isubn(-e):0!==this.negative?1===this.length&&(0|this.words[0])<=e?(this.words[0]=e-(0|this.words[0]),this.negative=0,this):(this.negative=0,this.isubn(e),this.negative=1,this):this._iaddn(e)},i.prototype._iaddn=function(e){this.words[0]+=e;for(var t=0;t<this.length&&this.words[t]>=67108864;t++)this.words[t]-=67108864,t===this.length-1?this.words[t+1]=1:this.words[t+1]++;return this.length=Math.max(this.length,t+1),this},i.prototype.isubn=function(e){if(a("number"==typeof e),a(e<67108864),e<0)return this.iaddn(-e);if(0!==this.negative)return this.negative=0,this.iaddn(e),this.negative=1,this;if(this.words[0]-=e,1===this.length&&this.words[0]<0)this.words[0]=-this.words[0],this.negative=1;else for(var t=0;t<this.length&&this.words[t]<0;t++)this.words[t]+=67108864,this.words[t+1]-=1;return this._strip()},i.prototype.addn=function(e){return this.clone().iaddn(e)},i.prototype.subn=function(e){return this.clone().isubn(e)},i.prototype.iabs=function(){return this.negative=0,this},i.prototype.abs=function(){return this.clone().iabs()},i.prototype._ishlnsubmul=function(e,t,n){var r,i,o=e.length+n;this._expand(o);var d=0;for(r=0;r<e.length;r++){i=(0|this.words[r+n])+d;var s=(0|e.words[r])*t;d=((i-=67108863&s)>>26)-(s/67108864|0),this.words[r+n]=67108863&i}for(;r<this.length-n;r++)d=(i=(0|this.words[r+n])+d)>>26,this.words[r+n]=67108863&i;if(0===d)return this._strip();for(a(-1===d),d=0,r=0;r<this.length;r++)d=(i=-(0|this.words[r])+d)>>26,this.words[r]=67108863&i;return this.negative=1,this._strip()},i.prototype._wordDiv=function(e,t){var n=(this.length,e.length),a=this.clone(),r=e,o=0|r.words[r.length-1];0!==(n=26-this._countBits(o))&&(r=r.ushln(n),a.iushln(n),o=0|r.words[r.length-1]);var d,s=a.length-r.length;if("mod"!==t){(d=new i(null)).length=s+1,d.words=new Array(d.length);for(var c=0;c<d.length;c++)d.words[c]=0}var u=a.clone()._ishlnsubmul(r,1,s);0===u.negative&&(a=u,d&&(d.words[s]=1));for(var l=s-1;l>=0;l--){var g=67108864*(0|a.words[r.length+l])+(0|a.words[r.length+l-1]);for(g=Math.min(g/o|0,67108863),a._ishlnsubmul(r,g,l);0!==a.negative;)g--,a.negative=0,a._ishlnsubmul(r,1,l),a.isZero()||(a.negative^=1);d&&(d.words[l]=g)}return d&&d._strip(),a._strip(),"div"!==t&&0!==n&&a.iushrn(n),{div:d||null,mod:a}},i.prototype.divmod=function(e,t,n){return a(!e.isZero()),this.isZero()?{div:new i(0),mod:new i(0)}:0!==this.negative&&0===e.negative?(d=this.neg().divmod(e,t),"mod"!==t&&(r=d.div.neg()),"div"!==t&&(o=d.mod.neg(),n&&0!==o.negative&&o.iadd(e)),{div:r,mod:o}):0===this.negative&&0!==e.negative?(d=this.divmod(e.neg(),t),"mod"!==t&&(r=d.div.neg()),{div:r,mod:d.mod}):0!=(this.negative&e.negative)?(d=this.neg().divmod(e.neg(),t),"div"!==t&&(o=d.mod.neg(),n&&0!==o.negative&&o.isub(e)),{div:d.div,mod:o}):e.length>this.length||this.cmp(e)<0?{div:new i(0),mod:this}:1===e.length?"div"===t?{div:this.divn(e.words[0]),mod:null}:"mod"===t?{div:null,mod:new i(this.modrn(e.words[0]))}:{div:this.divn(e.words[0]),mod:new i(this.modrn(e.words[0]))}:this._wordDiv(e,t);var r,o,d},i.prototype.div=function(e){return this.divmod(e,"div",!1).div},i.prototype.mod=function(e){return this.divmod(e,"mod",!1).mod},i.prototype.umod=function(e){return this.divmod(e,"mod",!0).mod},i.prototype.divRound=function(e){var t=this.divmod(e);if(t.mod.isZero())return t.div;var n=0!==t.div.negative?t.mod.isub(e):t.mod,a=e.ushrn(1),r=e.andln(1),i=n.cmp(a);return i<0||1===r&&0===i?t.div:0!==t.div.negative?t.div.isubn(1):t.div.iaddn(1)},i.prototype.modrn=function(e){var t=e<0;t&&(e=-e),a(e<=67108863);for(var n=(1<<26)%e,r=0,i=this.length-1;i>=0;i--)r=(n*r+(0|this.words[i]))%e;return t?-r:r},i.prototype.modn=function(e){return this.modrn(e)},i.prototype.idivn=function(e){var t=e<0;t&&(e=-e),a(e<=67108863);for(var n=0,r=this.length-1;r>=0;r--){var i=(0|this.words[r])+67108864*n;this.words[r]=i/e|0,n=i%e}return this._strip(),t?this.ineg():this},i.prototype.divn=function(e){return this.clone().idivn(e)},i.prototype.egcd=function(e){a(0===e.negative),a(!e.isZero());var t=this,n=e.clone();t=0!==t.negative?t.umod(e):t.clone();for(var r=new i(1),o=new i(0),d=new i(0),s=new i(1),c=0;t.isEven()&&n.isEven();)t.iushrn(1),n.iushrn(1),++c;for(var u=n.clone(),l=t.clone();!t.isZero();){for(var g=0,h=1;0==(t.words[0]&h)&&g<26;++g,h<<=1);if(g>0)for(t.iushrn(g);g-- >0;)(r.isOdd()||o.isOdd())&&(r.iadd(u),o.isub(l)),r.iushrn(1),o.iushrn(1);for(var f=0,p=1;0==(n.words[0]&p)&&f<26;++f,p<<=1);if(f>0)for(n.iushrn(f);f-- >0;)(d.isOdd()||s.isOdd())&&(d.iadd(u),s.isub(l)),d.iushrn(1),s.iushrn(1);t.cmp(n)>=0?(t.isub(n),r.isub(d),o.isub(s)):(n.isub(t),d.isub(r),s.isub(o))}return{a:d,b:s,gcd:n.iushln(c)}},i.prototype._invmp=function(e){a(0===e.negative),a(!e.isZero());var t=this,n=e.clone();t=0!==t.negative?t.umod(e):t.clone();for(var r,o=new i(1),d=new i(0),s=n.clone();t.cmpn(1)>0&&n.cmpn(1)>0;){for(var c=0,u=1;0==(t.words[0]&u)&&c<26;++c,u<<=1);if(c>0)for(t.iushrn(c);c-- >0;)o.isOdd()&&o.iadd(s),o.iushrn(1);for(var l=0,g=1;0==(n.words[0]&g)&&l<26;++l,g<<=1);if(l>0)for(n.iushrn(l);l-- >0;)d.isOdd()&&d.iadd(s),d.iushrn(1);t.cmp(n)>=0?(t.isub(n),o.isub(d)):(n.isub(t),d.isub(o))}return(r=0===t.cmpn(1)?o:d).cmpn(0)<0&&r.iadd(e),r},i.prototype.gcd=function(e){if(this.isZero())return e.abs();if(e.isZero())return this.abs();var t=this.clone(),n=e.clone();t.negative=0,n.negative=0;for(var a=0;t.isEven()&&n.isEven();a++)t.iushrn(1),n.iushrn(1);for(;;){for(;t.isEven();)t.iushrn(1);for(;n.isEven();)n.iushrn(1);var r=t.cmp(n);if(r<0){var i=t;t=n,n=i}else if(0===r||0===n.cmpn(1))break;t.isub(n)}return n.iushln(a)},i.prototype.invm=function(e){return this.egcd(e).a.umod(e)},i.prototype.isEven=function(){return 0==(1&this.words[0])},i.prototype.isOdd=function(){return 1==(1&this.words[0])},i.prototype.andln=function(e){return this.words[0]&e},i.prototype.bincn=function(e){a("number"==typeof e);var t=e%26,n=(e-t)/26,r=1<<t;if(this.length<=n)return this._expand(n+1),this.words[n]|=r,this;for(var i=r,o=n;0!==i&&o<this.length;o++){var d=0|this.words[o];i=(d+=i)>>>26,d&=67108863,this.words[o]=d}return 0!==i&&(this.words[o]=i,this.length++),this},i.prototype.isZero=function(){return 1===this.length&&0===this.words[0]},i.prototype.cmpn=function(e){var t,n=e<0;if(0!==this.negative&&!n)return-1;if(0===this.negative&&n)return 1;if(this._strip(),this.length>1)t=1;else{n&&(e=-e),a(e<=67108863,"Number is too big");var r=0|this.words[0];t=r===e?0:r<e?-1:1}return 0!==this.negative?0|-t:t},i.prototype.cmp=function(e){if(0!==this.negative&&0===e.negative)return-1;if(0===this.negative&&0!==e.negative)return 1;var t=this.ucmp(e);return 0!==this.negative?0|-t:t},i.prototype.ucmp=function(e){if(this.length>e.length)return 1;if(this.length<e.length)return-1;for(var t=0,n=this.length-1;n>=0;n--){var a=0|this.words[n],r=0|e.words[n];if(a!==r){a<r?t=-1:a>r&&(t=1);break}}return t},i.prototype.gtn=function(e){return 1===this.cmpn(e)},i.prototype.gt=function(e){return 1===this.cmp(e)},i.prototype.gten=function(e){return this.cmpn(e)>=0},i.prototype.gte=function(e){return this.cmp(e)>=0},i.prototype.ltn=function(e){return-1===this.cmpn(e)},i.prototype.lt=function(e){return-1===this.cmp(e)},i.prototype.lten=function(e){return this.cmpn(e)<=0},i.prototype.lte=function(e){return this.cmp(e)<=0},i.prototype.eqn=function(e){return 0===this.cmpn(e)},i.prototype.eq=function(e){return 0===this.cmp(e)},i.red=function(e){return new S(e)},i.prototype.toRed=function(e){return a(!this.red,"Already a number in reduction context"),a(0===this.negative,"red works only with positives"),e.convertTo(this)._forceRed(e)},i.prototype.fromRed=function(){return a(this.red,"fromRed works only with numbers in reduction context"),this.red.convertFrom(this)},i.prototype._forceRed=function(e){return this.red=e,this},i.prototype.forceRed=function(e){return a(!this.red,"Already a number in reduction context"),this._forceRed(e)},i.prototype.redAdd=function(e){return a(this.red,"redAdd works only with red numbers"),this.red.add(this,e)},i.prototype.redIAdd=function(e){return a(this.red,"redIAdd works only with red numbers"),this.red.iadd(this,e)},i.prototype.redSub=function(e){return a(this.red,"redSub works only with red numbers"),this.red.sub(this,e)},i.prototype.redISub=function(e){return a(this.red,"redISub works only with red numbers"),this.red.isub(this,e)},i.prototype.redShl=function(e){return a(this.red,"redShl works only with red numbers"),this.red.shl(this,e)},i.prototype.redMul=function(e){return a(this.red,"redMul works only with red numbers"),this.red._verify2(this,e),this.red.mul(this,e)},i.prototype.redIMul=function(e){return a(this.red,"redMul works only with red numbers"),this.red._verify2(this,e),this.red.imul(this,e)},i.prototype.redSqr=function(){return a(this.red,"redSqr works only with red numbers"),this.red._verify1(this),this.red.sqr(this)},i.prototype.redISqr=function(){return a(this.red,"redISqr works only with red numbers"),this.red._verify1(this),this.red.isqr(this)},i.prototype.redSqrt=function(){return a(this.red,"redSqrt works only with red numbers"),this.red._verify1(this),this.red.sqrt(this)},i.prototype.redInvm=function(){return a(this.red,"redInvm works only with red numbers"),this.red._verify1(this),this.red.invm(this)},i.prototype.redNeg=function(){return a(this.red,"redNeg works only with red numbers"),this.red._verify1(this),this.red.neg(this)},i.prototype.redPow=function(e){return a(this.red&&!e.red,"redPow(normalNum)"),this.red._verify1(this),this.red.pow(this,e)};var v={k256:null,p224:null,p192:null,p25519:null};function _(e,t){this.name=e,this.p=new i(t,16),this.n=this.p.bitLength(),this.k=new i(1).iushln(this.n).isub(this.p),this.tmp=this._tmp()}function w(){_.call(this,"k256","ffffffff ffffffff ffffffff ffffffff ffffffff ffffffff fffffffe fffffc2f")}function M(){_.call(this,"p224","ffffffff ffffffff ffffffff ffffffff 00000000 00000000 00000001")}function x(){_.call(this,"p192","ffffffff ffffffff ffffffff fffffffe ffffffff ffffffff")}function E(){_.call(this,"25519","7fffffffffffffff ffffffffffffffff ffffffffffffffff ffffffffffffffed")}function S(e){if("string"==typeof e){var t=i._prime(e);this.m=t.p,this.prime=t}else a(e.gtn(1),"modulus must be greater than 1"),this.m=e,this.prime=null}function k(e){S.call(this,e),this.shift=this.m.bitLength(),this.shift%26!=0&&(this.shift+=26-this.shift%26),this.r=new i(1).iushln(this.shift),this.r2=this.imod(this.r.sqr()),this.rinv=this.r._invmp(this.m),this.minv=this.rinv.mul(this.r).isubn(1).div(this.m),this.minv=this.minv.umod(this.r),this.minv=this.r.sub(this.minv)}_.prototype._tmp=function(){var e=new i(null);return e.words=new Array(Math.ceil(this.n/13)),e},_.prototype.ireduce=function(e){var t,n=e;do{this.split(n,this.tmp),t=(n=(n=this.imulK(n)).iadd(this.tmp)).bitLength()}while(t>this.n);var a=t<this.n?-1:n.ucmp(this.p);return 0===a?(n.words[0]=0,n.length=1):a>0?n.isub(this.p):void 0!==n.strip?n.strip():n._strip(),n},_.prototype.split=function(e,t){e.iushrn(this.n,0,t)},_.prototype.imulK=function(e){return e.imul(this.k)},r(w,_),w.prototype.split=function(e,t){for(var n=4194303,a=Math.min(e.length,9),r=0;r<a;r++)t.words[r]=e.words[r];if(t.length=a,e.length<=9)return e.words[0]=0,void(e.length=1);var i=e.words[9];for(t.words[t.length++]=i&n,r=10;r<e.length;r++){var o=0|e.words[r];e.words[r-10]=(o&n)<<4|i>>>22,i=o}i>>>=22,e.words[r-10]=i,0===i&&e.length>10?e.length-=10:e.length-=9},w.prototype.imulK=function(e){e.words[e.length]=0,e.words[e.length+1]=0,e.length+=2;for(var t=0,n=0;n<e.length;n++){var a=0|e.words[n];t+=977*a,e.words[n]=67108863&t,t=64*a+(t/67108864|0)}return 0===e.words[e.length-1]&&(e.length--,0===e.words[e.length-1]&&e.length--),e},r(M,_),r(x,_),r(E,_),E.prototype.imulK=function(e){for(var t=0,n=0;n<e.length;n++){var a=19*(0|e.words[n])+t,r=67108863&a;a>>>=26,e.words[n]=r,t=a}return 0!==t&&(e.words[e.length++]=t),e},i._prime=function(e){if(v[e])return v[e];var t;if("k256"===e)t=new w;else if("p224"===e)t=new M;else if("p192"===e)t=new x;else{if("p25519"!==e)throw new Error("Unknown prime "+e);t=new E}return v[e]=t,t},S.prototype._verify1=function(e){a(0===e.negative,"red works only with positives"),a(e.red,"red works only with red numbers")},S.prototype._verify2=function(e,t){a(0==(e.negative|t.negative),"red works only with positives"),a(e.red&&e.red===t.red,"red works only with red numbers")},S.prototype.imod=function(e){return this.prime?this.prime.ireduce(e)._forceRed(this):(u(e,e.umod(this.m)._forceRed(this)),e)},S.prototype.neg=function(e){return e.isZero()?e.clone():this.m.sub(e)._forceRed(this)},S.prototype.add=function(e,t){this._verify2(e,t);var n=e.add(t);return n.cmp(this.m)>=0&&n.isub(this.m),n._forceRed(this)},S.prototype.iadd=function(e,t){this._verify2(e,t);var n=e.iadd(t);return n.cmp(this.m)>=0&&n.isub(this.m),n},S.prototype.sub=function(e,t){this._verify2(e,t);var n=e.sub(t);return n.cmpn(0)<0&&n.iadd(this.m),n._forceRed(this)},S.prototype.isub=function(e,t){this._verify2(e,t);var n=e.isub(t);return n.cmpn(0)<0&&n.iadd(this.m),n},S.prototype.shl=function(e,t){return this._verify1(e),this.imod(e.ushln(t))},S.prototype.imul=function(e,t){return this._verify2(e,t),this.imod(e.imul(t))},S.prototype.mul=function(e,t){return this._verify2(e,t),this.imod(e.mul(t))},S.prototype.isqr=function(e){return this.imul(e,e.clone())},S.prototype.sqr=function(e){return this.mul(e,e)},S.prototype.sqrt=function(e){if(e.isZero())return e.clone();var t=this.m.andln(3);if(a(t%2==1),3===t){var n=this.m.add(new i(1)).iushrn(2);return this.pow(e,n)}for(var r=this.m.subn(1),o=0;!r.isZero()&&0===r.andln(1);)o++,r.iushrn(1);a(!r.isZero());var d=new i(1).toRed(this),s=d.redNeg(),c=this.m.subn(1).iushrn(1),u=this.m.bitLength();for(u=new i(2*u*u).toRed(this);0!==this.pow(u,c).cmp(s);)u.redIAdd(s);for(var l=this.pow(u,r),g=this.pow(e,r.addn(1).iushrn(1)),h=this.pow(e,r),f=o;0!==h.cmp(d);){for(var p=h,m=0;0!==p.cmp(d);m++)p=p.redSqr();a(m<f);var R=this.pow(l,new i(1).iushln(f-m-1));g=g.redMul(R),l=R.redSqr(),h=h.redMul(l),f=m}return g},S.prototype.invm=function(e){var t=e._invmp(this.m);return 0!==t.negative?(t.negative=0,this.imod(t).redNeg()):this.imod(t)},S.prototype.pow=function(e,t){if(t.isZero())return new i(1).toRed(this);if(0===t.cmpn(1))return e.clone();var n=new Array(16);n[0]=new i(1).toRed(this),n[1]=e;for(var a=2;a<n.length;a++)n[a]=this.mul(n[a-1],e);var r=n[0],o=0,d=0,s=t.bitLength()%26;for(0===s&&(s=26),a=t.length-1;a>=0;a--){for(var c=t.words[a],u=s-1;u>=0;u--){var l=c>>u&1;r!==n[0]&&(r=this.sqr(r)),0!==l||0!==o?(o<<=1,o|=l,(4===++d||0===a&&0===u)&&(r=this.mul(r,n[o]),d=0,o=0)):d=0}s=26}return r},S.prototype.convertTo=function(e){var t=e.umod(this.m);return t===e?t.clone():t},S.prototype.convertFrom=function(e){var t=e.clone();return t.red=null,t},i.mont=function(e){return new k(e)},r(k,S),k.prototype.convertTo=function(e){return this.imod(e.ushln(this.shift))},k.prototype.convertFrom=function(e){var t=this.imod(e.mul(this.rinv));return t.red=null,t},k.prototype.imul=function(e,t){if(e.isZero()||t.isZero())return e.words[0]=0,e.length=1,e;var n=e.imul(t),a=n.maskn(this.shift).mul(this.minv).imaskn(this.shift).mul(this.m),r=n.isub(a).iushrn(this.shift),i=r;return r.cmp(this.m)>=0?i=r.isub(this.m):r.cmpn(0)<0&&(i=r.iadd(this.m)),i._forceRed(this)},k.prototype.mul=function(e,t){if(e.isZero()||t.isZero())return new i(0)._forceRed(this);var n=e.mul(t),a=n.maskn(this.shift).mul(this.minv).imaskn(this.shift).mul(this.m),r=n.isub(a).iushrn(this.shift),o=r;return r.cmp(this.m)>=0?o=r.isub(this.m):r.cmpn(0)<0&&(o=r.iadd(this.m)),o._forceRed(this)},k.prototype.invm=function(e){return this.imod(e._invmp(this.m).mul(this.r2))._forceRed(this)}}(e=n.nmd(e),this)},14905:function(e,t,n){e.exports=n(17536)},7545:function(e,t,n){var a=n(27172).Buffer,r=n(57266),i=n(79649),o=n(70087),d=n(61528),s=n(71566),c=n(17536);function u(e){i.Writable.call(this);var t=c[e];if(!t)throw new Error("Unknown message digest");this._hashType=t.hash,this._hash=r(t.hash),this._tag=t.id,this._signType=t.sign}function l(e){i.Writable.call(this);var t=c[e];if(!t)throw new Error("Unknown message digest");this._hash=r(t.hash),this._tag=t.id,this._signType=t.sign}function g(e){return new u(e)}function h(e){return new l(e)}Object.keys(c).forEach((function(e){c[e].id=a.from(c[e].id,"hex"),c[e.toLowerCase()]=c[e]})),o(u,i.Writable),u.prototype._write=function(e,t,n){this._hash.update(e),n()},u.prototype.update=function(e,t){return"string"==typeof e&&(e=a.from(e,t)),this._hash.update(e),this},u.prototype.sign=function(e,t){this.end();var n=this._hash.digest(),a=d(n,e,this._hashType,this._signType,this._tag);return t?a.toString(t):a},o(l,i.Writable),l.prototype._write=function(e,t,n){this._hash.update(e),n()},l.prototype.update=function(e,t){return"string"==typeof e&&(e=a.from(e,t)),this._hash.update(e),this},l.prototype.verify=function(e,t,n){"string"==typeof t&&(t=a.from(t,n)),this.end();var r=this._hash.digest();return s(t,r,e,this._signType,this._tag)},e.exports={Sign:g,Verify:h,createSign:g,createVerify:h}},61528:function(e,t,n){var a=n(27172).Buffer,r=n(12873),i=n(17354),o=n(29749).ec,d=n(40660),s=n(71463),c=n(87330);function u(e,t,n,i){if((e=a.from(e.toArray())).length<t.byteLength()){var o=a.alloc(t.byteLength()-e.length);e=a.concat([o,e])}var d=n.length,s=function(e,t){e=l(e,t),e=e.mod(t);var n=a.from(e.toArray());if(n.length<t.byteLength()){var r=a.alloc(t.byteLength()-n.length);n=a.concat([r,n])}return n}(n,t),c=a.alloc(d);c.fill(1);var u=a.alloc(d);return u=r(i,u).update(c).update(a.from([0])).update(e).update(s).digest(),c=r(i,u).update(c).digest(),{k:u=r(i,u).update(c).update(a.from([1])).update(e).update(s).digest(),v:c=r(i,u).update(c).digest()}}function l(e,t){var n=new d(e),a=(e.length<<3)-t.bitLength();return a>0&&n.ishrn(a),n}function g(e,t,n){var i,o;do{for(i=a.alloc(0);8*i.length<e.bitLength();)t.v=r(n,t.k).update(t.v).digest(),i=a.concat([i,t.v]);o=l(i,e),t.k=r(n,t.k).update(t.v).update(a.from([0])).digest(),t.v=r(n,t.k).update(t.v).digest()}while(-1!==o.cmp(e));return o}function h(e,t,n,a){return e.toRed(d.mont(n)).redPow(t).fromRed().mod(a)}e.exports=function(e,t,n,r,f){var p=s(t);if(p.curve){if("ecdsa"!==r&&"ecdsa/rsa"!==r)throw new Error("wrong private key type");return function(e,t){var n=c[t.curve.join(".")];if(!n)throw new Error("unknown curve "+t.curve.join("."));var r=new o(n).keyFromPrivate(t.privateKey),i=r.sign(e);return a.from(i.toDER())}(e,p)}if("dsa"===p.type){if("dsa"!==r)throw new Error("wrong private key type");return function(e,t,n){var r,i=t.params.priv_key,o=t.params.p,s=t.params.q,c=t.params.g,f=new d(0),p=l(e,s).mod(s),m=!1,R=u(i,s,e,n);for(;!1===m;)f=h(c,r=g(s,R,n),o,s),0===(m=r.invm(s).imul(p.add(i.mul(f))).mod(s)).cmpn(0)&&(m=!1,f=new d(0));return function(e,t){e=e.toArray(),t=t.toArray(),128&e[0]&&(e=[0].concat(e));128&t[0]&&(t=[0].concat(t));var n=e.length+t.length+4,r=[48,n,2,e.length];return r=r.concat(e,[2,t.length],t),a.from(r)}(f,m)}(e,p,n)}if("rsa"!==r&&"ecdsa/rsa"!==r)throw new Error("wrong private key type");e=a.concat([f,e]);for(var m=p.modulus.byteLength(),R=[0,1];e.length+R.length+1<m;)R.push(255);R.push(0);for(var b=-1;++b<e.length;)R.push(e[b]);return i(R,p)},e.exports.getKey=u,e.exports.makeKey=g},71566:function(e,t,n){var a=n(27172).Buffer,r=n(40660),i=n(29749).ec,o=n(71463),d=n(87330);function s(e,t){if(e.cmpn(0)<=0)throw new Error("invalid sig");if(e.cmp(t)>=t)throw new Error("invalid sig")}e.exports=function(e,t,n,c,u){var l=o(n);if("ec"===l.type){if("ecdsa"!==c&&"ecdsa/rsa"!==c)throw new Error("wrong public key type");return function(e,t,n){var a=d[n.data.algorithm.curve.join(".")];if(!a)throw new Error("unknown curve "+n.data.algorithm.curve.join("."));var r=new i(a),o=n.data.subjectPrivateKey.data;return r.verify(t,e,o)}(e,t,l)}if("dsa"===l.type){if("dsa"!==c)throw new Error("wrong public key type");return function(e,t,n){var a=n.data.p,i=n.data.q,d=n.data.g,c=n.data.pub_key,u=o.signature.decode(e,"der"),l=u.s,g=u.r;s(l,i),s(g,i);var h=r.mont(a),f=l.invm(i),p=d.toRed(h).redPow(new r(t).mul(f).mod(i)).fromRed().mul(c.toRed(h).redPow(g.mul(f).mod(i)).fromRed()).mod(a).mod(i);return 0===p.cmp(g)}(e,t,l)}if("rsa"!==c&&"ecdsa/rsa"!==c)throw new Error("wrong public key type");t=a.concat([u,t]);for(var g=l.modulus.byteLength(),h=[1],f=0;t.length+h.length+2<g;)h.push(255),f++;h.push(0);for(var p=-1;++p<t.length;)h.push(t[p]);h=a.from(h);var m=r.mont(l.modulus);e=(e=new r(e).toRed(m)).redPow(new r(l.publicExponent)),e=a.from(e.fromRed().toArray());var R=f<8?1:0;for(g=Math.min(e.length,h.length),e.length!==h.length&&(R=1),p=-1;++p<g;)R|=e[p]^h[p];return 0===R}},40660:function(e,t,n){!function(e,t){"use strict";function a(e,t){if(!e)throw new Error(t||"Assertion failed")}function r(e,t){e.super_=t;var n=function(){};n.prototype=t.prototype,e.prototype=new n,e.prototype.constructor=e}function i(e,t,n){if(i.isBN(e))return e;this.negative=0,this.words=null,this.length=0,this.red=null,null!==e&&("le"!==t&&"be"!==t||(n=t,t=10),this._init(e||0,t||10,n||"be"))}var o;"object"==typeof e?e.exports=i:t.BN=i,i.BN=i,i.wordSize=26;try{o="undefined"!=typeof window&&void 0!==window.Buffer?window.Buffer:n(50695).Buffer}catch(N){}function d(e,t){var n=e.charCodeAt(t);return n>=48&&n<=57?n-48:n>=65&&n<=70?n-55:n>=97&&n<=102?n-87:void a(!1,"Invalid character in "+e)}function s(e,t,n){var a=d(e,n);return n-1>=t&&(a|=d(e,n-1)<<4),a}function c(e,t,n,r){for(var i=0,o=0,d=Math.min(e.length,n),s=t;s<d;s++){var c=e.charCodeAt(s)-48;i*=r,o=c>=49?c-49+10:c>=17?c-17+10:c,a(c>=0&&o<r,"Invalid character"),i+=o}return i}function u(e,t){e.words=t.words,e.length=t.length,e.negative=t.negative,e.red=t.red}if(i.isBN=function(e){return e instanceof i||null!==e&&"object"==typeof e&&e.constructor.wordSize===i.wordSize&&Array.isArray(e.words)},i.max=function(e,t){return e.cmp(t)>0?e:t},i.min=function(e,t){return e.cmp(t)<0?e:t},i.prototype._init=function(e,t,n){if("number"==typeof e)return this._initNumber(e,t,n);if("object"==typeof e)return this._initArray(e,t,n);"hex"===t&&(t=16),a(t===(0|t)&&t>=2&&t<=36);var r=0;"-"===(e=e.toString().replace(/\s+/g,""))[0]&&(r++,this.negative=1),r<e.length&&(16===t?this._parseHex(e,r,n):(this._parseBase(e,t,r),"le"===n&&this._initArray(this.toArray(),t,n)))},i.prototype._initNumber=function(e,t,n){e<0&&(this.negative=1,e=-e),e<67108864?(this.words=[67108863&e],this.length=1):e<4503599627370496?(this.words=[67108863&e,e/67108864&67108863],this.length=2):(a(e<9007199254740992),this.words=[67108863&e,e/67108864&67108863,1],this.length=3),"le"===n&&this._initArray(this.toArray(),t,n)},i.prototype._initArray=function(e,t,n){if(a("number"==typeof e.length),e.length<=0)return this.words=[0],this.length=1,this;this.length=Math.ceil(e.length/3),this.words=new Array(this.length);for(var r=0;r<this.length;r++)this.words[r]=0;var i,o,d=0;if("be"===n)for(r=e.length-1,i=0;r>=0;r-=3)o=e[r]|e[r-1]<<8|e[r-2]<<16,this.words[i]|=o<<d&67108863,this.words[i+1]=o>>>26-d&67108863,(d+=24)>=26&&(d-=26,i++);else if("le"===n)for(r=0,i=0;r<e.length;r+=3)o=e[r]|e[r+1]<<8|e[r+2]<<16,this.words[i]|=o<<d&67108863,this.words[i+1]=o>>>26-d&67108863,(d+=24)>=26&&(d-=26,i++);return this._strip()},i.prototype._parseHex=function(e,t,n){this.length=Math.ceil((e.length-t)/6),this.words=new Array(this.length);for(var a=0;a<this.length;a++)this.words[a]=0;var r,i=0,o=0;if("be"===n)for(a=e.length-1;a>=t;a-=2)r=s(e,t,a)<<i,this.words[o]|=67108863&r,i>=18?(i-=18,o+=1,this.words[o]|=r>>>26):i+=8;else for(a=(e.length-t)%2==0?t+1:t;a<e.length;a+=2)r=s(e,t,a)<<i,this.words[o]|=67108863&r,i>=18?(i-=18,o+=1,this.words[o]|=r>>>26):i+=8;this._strip()},i.prototype._parseBase=function(e,t,n){this.words=[0],this.length=1;for(var a=0,r=1;r<=67108863;r*=t)a++;a--,r=r/t|0;for(var i=e.length-n,o=i%a,d=Math.min(i,i-o)+n,s=0,u=n;u<d;u+=a)s=c(e,u,u+a,t),this.imuln(r),this.words[0]+s<67108864?this.words[0]+=s:this._iaddn(s);if(0!==o){var l=1;for(s=c(e,u,e.length,t),u=0;u<o;u++)l*=t;this.imuln(l),this.words[0]+s<67108864?this.words[0]+=s:this._iaddn(s)}this._strip()},i.prototype.copy=function(e){e.words=new Array(this.length);for(var t=0;t<this.length;t++)e.words[t]=this.words[t];e.length=this.length,e.negative=this.negative,e.red=this.red},i.prototype._move=function(e){u(e,this)},i.prototype.clone=function(){var e=new i(null);return this.copy(e),e},i.prototype._expand=function(e){for(;this.length<e;)this.words[this.length++]=0;return this},i.prototype._strip=function(){for(;this.length>1&&0===this.words[this.length-1];)this.length--;return this._normSign()},i.prototype._normSign=function(){return 1===this.length&&0===this.words[0]&&(this.negative=0),this},"undefined"!=typeof Symbol&&"function"==typeof Symbol.for)try{i.prototype[Symbol.for("nodejs.util.inspect.custom")]=l}catch(N){i.prototype.inspect=l}else i.prototype.inspect=l;function l(){return(this.red?"<BN-R: ":"<BN: ")+this.toString(16)+">"}var g=["","0","00","000","0000","00000","000000","0000000","00000000","000000000","0000000000","00000000000","000000000000","0000000000000","00000000000000","000000000000000","0000000000000000","00000000000000000","000000000000000000","0000000000000000000","00000000000000000000","000000000000000000000","0000000000000000000000","00000000000000000000000","000000000000000000000000","0000000000000000000000000"],h=[0,0,25,16,12,11,10,9,8,8,7,7,7,7,6,6,6,6,6,6,6,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5],f=[0,0,33554432,43046721,16777216,48828125,60466176,40353607,16777216,43046721,1e7,19487171,35831808,62748517,7529536,11390625,16777216,24137569,34012224,47045881,64e6,4084101,5153632,6436343,7962624,9765625,11881376,14348907,17210368,20511149,243e5,28629151,33554432,39135393,45435424,52521875,60466176];i.prototype.toString=function(e,t){var n;if(t=0|t||1,16===(e=e||10)||"hex"===e){n="";for(var r=0,i=0,o=0;o<this.length;o++){var d=this.words[o],s=(16777215&(d<<r|i)).toString(16);i=d>>>24-r&16777215,(r+=2)>=26&&(r-=26,o--),n=0!==i||o!==this.length-1?g[6-s.length]+s+n:s+n}for(0!==i&&(n=i.toString(16)+n);n.length%t!=0;)n="0"+n;return 0!==this.negative&&(n="-"+n),n}if(e===(0|e)&&e>=2&&e<=36){var c=h[e],u=f[e];n="";var l=this.clone();for(l.negative=0;!l.isZero();){var p=l.modrn(u).toString(e);n=(l=l.idivn(u)).isZero()?p+n:g[c-p.length]+p+n}for(this.isZero()&&(n="0"+n);n.length%t!=0;)n="0"+n;return 0!==this.negative&&(n="-"+n),n}a(!1,"Base should be between 2 and 36")},i.prototype.toNumber=function(){var e=this.words[0];return 2===this.length?e+=67108864*this.words[1]:3===this.length&&1===this.words[2]?e+=4503599627370496+67108864*this.words[1]:this.length>2&&a(!1,"Number can only safely store up to 53 bits"),0!==this.negative?-e:e},i.prototype.toJSON=function(){return this.toString(16,2)},o&&(i.prototype.toBuffer=function(e,t){return this.toArrayLike(o,e,t)}),i.prototype.toArray=function(e,t){return this.toArrayLike(Array,e,t)};function p(e,t,n){n.negative=t.negative^e.negative;var a=e.length+t.length|0;n.length=a,a=a-1|0;var r=0|e.words[0],i=0|t.words[0],o=r*i,d=67108863&o,s=o/67108864|0;n.words[0]=d;for(var c=1;c<a;c++){for(var u=s>>>26,l=67108863&s,g=Math.min(c,t.length-1),h=Math.max(0,c-e.length+1);h<=g;h++){var f=c-h|0;u+=(o=(r=0|e.words[f])*(i=0|t.words[h])+l)/67108864|0,l=67108863&o}n.words[c]=0|l,s=0|u}return 0!==s?n.words[c]=0|s:n.length--,n._strip()}i.prototype.toArrayLike=function(e,t,n){this._strip();var r=this.byteLength(),i=n||Math.max(1,r);a(r<=i,"byte array longer than desired length"),a(i>0,"Requested array length <= 0");var o=function(e,t){return e.allocUnsafe?e.allocUnsafe(t):new e(t)}(e,i);return this["_toArrayLike"+("le"===t?"LE":"BE")](o,r),o},i.prototype._toArrayLikeLE=function(e,t){for(var n=0,a=0,r=0,i=0;r<this.length;r++){var o=this.words[r]<<i|a;e[n++]=255&o,n<e.length&&(e[n++]=o>>8&255),n<e.length&&(e[n++]=o>>16&255),6===i?(n<e.length&&(e[n++]=o>>24&255),a=0,i=0):(a=o>>>24,i+=2)}if(n<e.length)for(e[n++]=a;n<e.length;)e[n++]=0},i.prototype._toArrayLikeBE=function(e,t){for(var n=e.length-1,a=0,r=0,i=0;r<this.length;r++){var o=this.words[r]<<i|a;e[n--]=255&o,n>=0&&(e[n--]=o>>8&255),n>=0&&(e[n--]=o>>16&255),6===i?(n>=0&&(e[n--]=o>>24&255),a=0,i=0):(a=o>>>24,i+=2)}if(n>=0)for(e[n--]=a;n>=0;)e[n--]=0},Math.clz32?i.prototype._countBits=function(e){return 32-Math.clz32(e)}:i.prototype._countBits=function(e){var t=e,n=0;return t>=4096&&(n+=13,t>>>=13),t>=64&&(n+=7,t>>>=7),t>=8&&(n+=4,t>>>=4),t>=2&&(n+=2,t>>>=2),n+t},i.prototype._zeroBits=function(e){if(0===e)return 26;var t=e,n=0;return 0==(8191&t)&&(n+=13,t>>>=13),0==(127&t)&&(n+=7,t>>>=7),0==(15&t)&&(n+=4,t>>>=4),0==(3&t)&&(n+=2,t>>>=2),0==(1&t)&&n++,n},i.prototype.bitLength=function(){var e=this.words[this.length-1],t=this._countBits(e);return 26*(this.length-1)+t},i.prototype.zeroBits=function(){if(this.isZero())return 0;for(var e=0,t=0;t<this.length;t++){var n=this._zeroBits(this.words[t]);if(e+=n,26!==n)break}return e},i.prototype.byteLength=function(){return Math.ceil(this.bitLength()/8)},i.prototype.toTwos=function(e){return 0!==this.negative?this.abs().inotn(e).iaddn(1):this.clone()},i.prototype.fromTwos=function(e){return this.testn(e-1)?this.notn(e).iaddn(1).ineg():this.clone()},i.prototype.isNeg=function(){return 0!==this.negative},i.prototype.neg=function(){return this.clone().ineg()},i.prototype.ineg=function(){return this.isZero()||(this.negative^=1),this},i.prototype.iuor=function(e){for(;this.length<e.length;)this.words[this.length++]=0;for(var t=0;t<e.length;t++)this.words[t]=this.words[t]|e.words[t];return this._strip()},i.prototype.ior=function(e){return a(0==(this.negative|e.negative)),this.iuor(e)},i.prototype.or=function(e){return this.length>e.length?this.clone().ior(e):e.clone().ior(this)},i.prototype.uor=function(e){return this.length>e.length?this.clone().iuor(e):e.clone().iuor(this)},i.prototype.iuand=function(e){var t;t=this.length>e.length?e:this;for(var n=0;n<t.length;n++)this.words[n]=this.words[n]&e.words[n];return this.length=t.length,this._strip()},i.prototype.iand=function(e){return a(0==(this.negative|e.negative)),this.iuand(e)},i.prototype.and=function(e){return this.length>e.length?this.clone().iand(e):e.clone().iand(this)},i.prototype.uand=function(e){return this.length>e.length?this.clone().iuand(e):e.clone().iuand(this)},i.prototype.iuxor=function(e){var t,n;this.length>e.length?(t=this,n=e):(t=e,n=this);for(var a=0;a<n.length;a++)this.words[a]=t.words[a]^n.words[a];if(this!==t)for(;a<t.length;a++)this.words[a]=t.words[a];return this.length=t.length,this._strip()},i.prototype.ixor=function(e){return a(0==(this.negative|e.negative)),this.iuxor(e)},i.prototype.xor=function(e){return this.length>e.length?this.clone().ixor(e):e.clone().ixor(this)},i.prototype.uxor=function(e){return this.length>e.length?this.clone().iuxor(e):e.clone().iuxor(this)},i.prototype.inotn=function(e){a("number"==typeof e&&e>=0);var t=0|Math.ceil(e/26),n=e%26;this._expand(t),n>0&&t--;for(var r=0;r<t;r++)this.words[r]=67108863&~this.words[r];return n>0&&(this.words[r]=~this.words[r]&67108863>>26-n),this._strip()},i.prototype.notn=function(e){return this.clone().inotn(e)},i.prototype.setn=function(e,t){a("number"==typeof e&&e>=0);var n=e/26|0,r=e%26;return this._expand(n+1),this.words[n]=t?this.words[n]|1<<r:this.words[n]&~(1<<r),this._strip()},i.prototype.iadd=function(e){var t,n,a;if(0!==this.negative&&0===e.negative)return this.negative=0,t=this.isub(e),this.negative^=1,this._normSign();if(0===this.negative&&0!==e.negative)return e.negative=0,t=this.isub(e),e.negative=1,t._normSign();this.length>e.length?(n=this,a=e):(n=e,a=this);for(var r=0,i=0;i<a.length;i++)t=(0|n.words[i])+(0|a.words[i])+r,this.words[i]=67108863&t,r=t>>>26;for(;0!==r&&i<n.length;i++)t=(0|n.words[i])+r,this.words[i]=67108863&t,r=t>>>26;if(this.length=n.length,0!==r)this.words[this.length]=r,this.length++;else if(n!==this)for(;i<n.length;i++)this.words[i]=n.words[i];return this},i.prototype.add=function(e){var t;return 0!==e.negative&&0===this.negative?(e.negative=0,t=this.sub(e),e.negative^=1,t):0===e.negative&&0!==this.negative?(this.negative=0,t=e.sub(this),this.negative=1,t):this.length>e.length?this.clone().iadd(e):e.clone().iadd(this)},i.prototype.isub=function(e){if(0!==e.negative){e.negative=0;var t=this.iadd(e);return e.negative=1,t._normSign()}if(0!==this.negative)return this.negative=0,this.iadd(e),this.negative=1,this._normSign();var n,a,r=this.cmp(e);if(0===r)return this.negative=0,this.length=1,this.words[0]=0,this;r>0?(n=this,a=e):(n=e,a=this);for(var i=0,o=0;o<a.length;o++)i=(t=(0|n.words[o])-(0|a.words[o])+i)>>26,this.words[o]=67108863&t;for(;0!==i&&o<n.length;o++)i=(t=(0|n.words[o])+i)>>26,this.words[o]=67108863&t;if(0===i&&o<n.length&&n!==this)for(;o<n.length;o++)this.words[o]=n.words[o];return this.length=Math.max(this.length,o),n!==this&&(this.negative=1),this._strip()},i.prototype.sub=function(e){return this.clone().isub(e)};var m=function(e,t,n){var a,r,i,o=e.words,d=t.words,s=n.words,c=0,u=0|o[0],l=8191&u,g=u>>>13,h=0|o[1],f=8191&h,p=h>>>13,m=0|o[2],R=8191&m,b=m>>>13,y=0|o[3],v=8191&y,_=y>>>13,w=0|o[4],M=8191&w,x=w>>>13,E=0|o[5],S=8191&E,k=E>>>13,N=0|o[6],D=8191&N,A=N>>>13,j=0|o[7],T=8191&j,L=j>>>13,I=0|o[8],C=8191&I,O=I>>>13,P=0|o[9],z=8191&P,B=P>>>13,F=0|d[0],U=8191&F,$=F>>>13,H=0|d[1],q=8191&H,Y=H>>>13,G=0|d[2],V=8191&G,Q=G>>>13,W=0|d[3],K=8191&W,Z=W>>>13,X=0|d[4],J=8191&X,ee=X>>>13,te=0|d[5],ne=8191&te,ae=te>>>13,re=0|d[6],ie=8191&re,oe=re>>>13,de=0|d[7],se=8191&de,ce=de>>>13,ue=0|d[8],le=8191&ue,ge=ue>>>13,he=0|d[9],fe=8191&he,pe=he>>>13;n.negative=e.negative^t.negative,n.length=19;var me=(c+(a=Math.imul(l,U))|0)+((8191&(r=(r=Math.imul(l,$))+Math.imul(g,U)|0))<<13)|0;c=((i=Math.imul(g,$))+(r>>>13)|0)+(me>>>26)|0,me&=67108863,a=Math.imul(f,U),r=(r=Math.imul(f,$))+Math.imul(p,U)|0,i=Math.imul(p,$);var Re=(c+(a=a+Math.imul(l,q)|0)|0)+((8191&(r=(r=r+Math.imul(l,Y)|0)+Math.imul(g,q)|0))<<13)|0;c=((i=i+Math.imul(g,Y)|0)+(r>>>13)|0)+(Re>>>26)|0,Re&=67108863,a=Math.imul(R,U),r=(r=Math.imul(R,$))+Math.imul(b,U)|0,i=Math.imul(b,$),a=a+Math.imul(f,q)|0,r=(r=r+Math.imul(f,Y)|0)+Math.imul(p,q)|0,i=i+Math.imul(p,Y)|0;var be=(c+(a=a+Math.imul(l,V)|0)|0)+((8191&(r=(r=r+Math.imul(l,Q)|0)+Math.imul(g,V)|0))<<13)|0;c=((i=i+Math.imul(g,Q)|0)+(r>>>13)|0)+(be>>>26)|0,be&=67108863,a=Math.imul(v,U),r=(r=Math.imul(v,$))+Math.imul(_,U)|0,i=Math.imul(_,$),a=a+Math.imul(R,q)|0,r=(r=r+Math.imul(R,Y)|0)+Math.imul(b,q)|0,i=i+Math.imul(b,Y)|0,a=a+Math.imul(f,V)|0,r=(r=r+Math.imul(f,Q)|0)+Math.imul(p,V)|0,i=i+Math.imul(p,Q)|0;var ye=(c+(a=a+Math.imul(l,K)|0)|0)+((8191&(r=(r=r+Math.imul(l,Z)|0)+Math.imul(g,K)|0))<<13)|0;c=((i=i+Math.imul(g,Z)|0)+(r>>>13)|0)+(ye>>>26)|0,ye&=67108863,a=Math.imul(M,U),r=(r=Math.imul(M,$))+Math.imul(x,U)|0,i=Math.imul(x,$),a=a+Math.imul(v,q)|0,r=(r=r+Math.imul(v,Y)|0)+Math.imul(_,q)|0,i=i+Math.imul(_,Y)|0,a=a+Math.imul(R,V)|0,r=(r=r+Math.imul(R,Q)|0)+Math.imul(b,V)|0,i=i+Math.imul(b,Q)|0,a=a+Math.imul(f,K)|0,r=(r=r+Math.imul(f,Z)|0)+Math.imul(p,K)|0,i=i+Math.imul(p,Z)|0;var ve=(c+(a=a+Math.imul(l,J)|0)|0)+((8191&(r=(r=r+Math.imul(l,ee)|0)+Math.imul(g,J)|0))<<13)|0;c=((i=i+Math.imul(g,ee)|0)+(r>>>13)|0)+(ve>>>26)|0,ve&=67108863,a=Math.imul(S,U),r=(r=Math.imul(S,$))+Math.imul(k,U)|0,i=Math.imul(k,$),a=a+Math.imul(M,q)|0,r=(r=r+Math.imul(M,Y)|0)+Math.imul(x,q)|0,i=i+Math.imul(x,Y)|0,a=a+Math.imul(v,V)|0,r=(r=r+Math.imul(v,Q)|0)+Math.imul(_,V)|0,i=i+Math.imul(_,Q)|0,a=a+Math.imul(R,K)|0,r=(r=r+Math.imul(R,Z)|0)+Math.imul(b,K)|0,i=i+Math.imul(b,Z)|0,a=a+Math.imul(f,J)|0,r=(r=r+Math.imul(f,ee)|0)+Math.imul(p,J)|0,i=i+Math.imul(p,ee)|0;var _e=(c+(a=a+Math.imul(l,ne)|0)|0)+((8191&(r=(r=r+Math.imul(l,ae)|0)+Math.imul(g,ne)|0))<<13)|0;c=((i=i+Math.imul(g,ae)|0)+(r>>>13)|0)+(_e>>>26)|0,_e&=67108863,a=Math.imul(D,U),r=(r=Math.imul(D,$))+Math.imul(A,U)|0,i=Math.imul(A,$),a=a+Math.imul(S,q)|0,r=(r=r+Math.imul(S,Y)|0)+Math.imul(k,q)|0,i=i+Math.imul(k,Y)|0,a=a+Math.imul(M,V)|0,r=(r=r+Math.imul(M,Q)|0)+Math.imul(x,V)|0,i=i+Math.imul(x,Q)|0,a=a+Math.imul(v,K)|0,r=(r=r+Math.imul(v,Z)|0)+Math.imul(_,K)|0,i=i+Math.imul(_,Z)|0,a=a+Math.imul(R,J)|0,r=(r=r+Math.imul(R,ee)|0)+Math.imul(b,J)|0,i=i+Math.imul(b,ee)|0,a=a+Math.imul(f,ne)|0,r=(r=r+Math.imul(f,ae)|0)+Math.imul(p,ne)|0,i=i+Math.imul(p,ae)|0;var we=(c+(a=a+Math.imul(l,ie)|0)|0)+((8191&(r=(r=r+Math.imul(l,oe)|0)+Math.imul(g,ie)|0))<<13)|0;c=((i=i+Math.imul(g,oe)|0)+(r>>>13)|0)+(we>>>26)|0,we&=67108863,a=Math.imul(T,U),r=(r=Math.imul(T,$))+Math.imul(L,U)|0,i=Math.imul(L,$),a=a+Math.imul(D,q)|0,r=(r=r+Math.imul(D,Y)|0)+Math.imul(A,q)|0,i=i+Math.imul(A,Y)|0,a=a+Math.imul(S,V)|0,r=(r=r+Math.imul(S,Q)|0)+Math.imul(k,V)|0,i=i+Math.imul(k,Q)|0,a=a+Math.imul(M,K)|0,r=(r=r+Math.imul(M,Z)|0)+Math.imul(x,K)|0,i=i+Math.imul(x,Z)|0,a=a+Math.imul(v,J)|0,r=(r=r+Math.imul(v,ee)|0)+Math.imul(_,J)|0,i=i+Math.imul(_,ee)|0,a=a+Math.imul(R,ne)|0,r=(r=r+Math.imul(R,ae)|0)+Math.imul(b,ne)|0,i=i+Math.imul(b,ae)|0,a=a+Math.imul(f,ie)|0,r=(r=r+Math.imul(f,oe)|0)+Math.imul(p,ie)|0,i=i+Math.imul(p,oe)|0;var Me=(c+(a=a+Math.imul(l,se)|0)|0)+((8191&(r=(r=r+Math.imul(l,ce)|0)+Math.imul(g,se)|0))<<13)|0;c=((i=i+Math.imul(g,ce)|0)+(r>>>13)|0)+(Me>>>26)|0,Me&=67108863,a=Math.imul(C,U),r=(r=Math.imul(C,$))+Math.imul(O,U)|0,i=Math.imul(O,$),a=a+Math.imul(T,q)|0,r=(r=r+Math.imul(T,Y)|0)+Math.imul(L,q)|0,i=i+Math.imul(L,Y)|0,a=a+Math.imul(D,V)|0,r=(r=r+Math.imul(D,Q)|0)+Math.imul(A,V)|0,i=i+Math.imul(A,Q)|0,a=a+Math.imul(S,K)|0,r=(r=r+Math.imul(S,Z)|0)+Math.imul(k,K)|0,i=i+Math.imul(k,Z)|0,a=a+Math.imul(M,J)|0,r=(r=r+Math.imul(M,ee)|0)+Math.imul(x,J)|0,i=i+Math.imul(x,ee)|0,a=a+Math.imul(v,ne)|0,r=(r=r+Math.imul(v,ae)|0)+Math.imul(_,ne)|0,i=i+Math.imul(_,ae)|0,a=a+Math.imul(R,ie)|0,r=(r=r+Math.imul(R,oe)|0)+Math.imul(b,ie)|0,i=i+Math.imul(b,oe)|0,a=a+Math.imul(f,se)|0,r=(r=r+Math.imul(f,ce)|0)+Math.imul(p,se)|0,i=i+Math.imul(p,ce)|0;var xe=(c+(a=a+Math.imul(l,le)|0)|0)+((8191&(r=(r=r+Math.imul(l,ge)|0)+Math.imul(g,le)|0))<<13)|0;c=((i=i+Math.imul(g,ge)|0)+(r>>>13)|0)+(xe>>>26)|0,xe&=67108863,a=Math.imul(z,U),r=(r=Math.imul(z,$))+Math.imul(B,U)|0,i=Math.imul(B,$),a=a+Math.imul(C,q)|0,r=(r=r+Math.imul(C,Y)|0)+Math.imul(O,q)|0,i=i+Math.imul(O,Y)|0,a=a+Math.imul(T,V)|0,r=(r=r+Math.imul(T,Q)|0)+Math.imul(L,V)|0,i=i+Math.imul(L,Q)|0,a=a+Math.imul(D,K)|0,r=(r=r+Math.imul(D,Z)|0)+Math.imul(A,K)|0,i=i+Math.imul(A,Z)|0,a=a+Math.imul(S,J)|0,r=(r=r+Math.imul(S,ee)|0)+Math.imul(k,J)|0,i=i+Math.imul(k,ee)|0,a=a+Math.imul(M,ne)|0,r=(r=r+Math.imul(M,ae)|0)+Math.imul(x,ne)|0,i=i+Math.imul(x,ae)|0,a=a+Math.imul(v,ie)|0,r=(r=r+Math.imul(v,oe)|0)+Math.imul(_,ie)|0,i=i+Math.imul(_,oe)|0,a=a+Math.imul(R,se)|0,r=(r=r+Math.imul(R,ce)|0)+Math.imul(b,se)|0,i=i+Math.imul(b,ce)|0,a=a+Math.imul(f,le)|0,r=(r=r+Math.imul(f,ge)|0)+Math.imul(p,le)|0,i=i+Math.imul(p,ge)|0;var Ee=(c+(a=a+Math.imul(l,fe)|0)|0)+((8191&(r=(r=r+Math.imul(l,pe)|0)+Math.imul(g,fe)|0))<<13)|0;c=((i=i+Math.imul(g,pe)|0)+(r>>>13)|0)+(Ee>>>26)|0,Ee&=67108863,a=Math.imul(z,q),r=(r=Math.imul(z,Y))+Math.imul(B,q)|0,i=Math.imul(B,Y),a=a+Math.imul(C,V)|0,r=(r=r+Math.imul(C,Q)|0)+Math.imul(O,V)|0,i=i+Math.imul(O,Q)|0,a=a+Math.imul(T,K)|0,r=(r=r+Math.imul(T,Z)|0)+Math.imul(L,K)|0,i=i+Math.imul(L,Z)|0,a=a+Math.imul(D,J)|0,r=(r=r+Math.imul(D,ee)|0)+Math.imul(A,J)|0,i=i+Math.imul(A,ee)|0,a=a+Math.imul(S,ne)|0,r=(r=r+Math.imul(S,ae)|0)+Math.imul(k,ne)|0,i=i+Math.imul(k,ae)|0,a=a+Math.imul(M,ie)|0,r=(r=r+Math.imul(M,oe)|0)+Math.imul(x,ie)|0,i=i+Math.imul(x,oe)|0,a=a+Math.imul(v,se)|0,r=(r=r+Math.imul(v,ce)|0)+Math.imul(_,se)|0,i=i+Math.imul(_,ce)|0,a=a+Math.imul(R,le)|0,r=(r=r+Math.imul(R,ge)|0)+Math.imul(b,le)|0,i=i+Math.imul(b,ge)|0;var Se=(c+(a=a+Math.imul(f,fe)|0)|0)+((8191&(r=(r=r+Math.imul(f,pe)|0)+Math.imul(p,fe)|0))<<13)|0;c=((i=i+Math.imul(p,pe)|0)+(r>>>13)|0)+(Se>>>26)|0,Se&=67108863,a=Math.imul(z,V),r=(r=Math.imul(z,Q))+Math.imul(B,V)|0,i=Math.imul(B,Q),a=a+Math.imul(C,K)|0,r=(r=r+Math.imul(C,Z)|0)+Math.imul(O,K)|0,i=i+Math.imul(O,Z)|0,a=a+Math.imul(T,J)|0,r=(r=r+Math.imul(T,ee)|0)+Math.imul(L,J)|0,i=i+Math.imul(L,ee)|0,a=a+Math.imul(D,ne)|0,r=(r=r+Math.imul(D,ae)|0)+Math.imul(A,ne)|0,i=i+Math.imul(A,ae)|0,a=a+Math.imul(S,ie)|0,r=(r=r+Math.imul(S,oe)|0)+Math.imul(k,ie)|0,i=i+Math.imul(k,oe)|0,a=a+Math.imul(M,se)|0,r=(r=r+Math.imul(M,ce)|0)+Math.imul(x,se)|0,i=i+Math.imul(x,ce)|0,a=a+Math.imul(v,le)|0,r=(r=r+Math.imul(v,ge)|0)+Math.imul(_,le)|0,i=i+Math.imul(_,ge)|0;var ke=(c+(a=a+Math.imul(R,fe)|0)|0)+((8191&(r=(r=r+Math.imul(R,pe)|0)+Math.imul(b,fe)|0))<<13)|0;c=((i=i+Math.imul(b,pe)|0)+(r>>>13)|0)+(ke>>>26)|0,ke&=67108863,a=Math.imul(z,K),r=(r=Math.imul(z,Z))+Math.imul(B,K)|0,i=Math.imul(B,Z),a=a+Math.imul(C,J)|0,r=(r=r+Math.imul(C,ee)|0)+Math.imul(O,J)|0,i=i+Math.imul(O,ee)|0,a=a+Math.imul(T,ne)|0,r=(r=r+Math.imul(T,ae)|0)+Math.imul(L,ne)|0,i=i+Math.imul(L,ae)|0,a=a+Math.imul(D,ie)|0,r=(r=r+Math.imul(D,oe)|0)+Math.imul(A,ie)|0,i=i+Math.imul(A,oe)|0,a=a+Math.imul(S,se)|0,r=(r=r+Math.imul(S,ce)|0)+Math.imul(k,se)|0,i=i+Math.imul(k,ce)|0,a=a+Math.imul(M,le)|0,r=(r=r+Math.imul(M,ge)|0)+Math.imul(x,le)|0,i=i+Math.imul(x,ge)|0;var Ne=(c+(a=a+Math.imul(v,fe)|0)|0)+((8191&(r=(r=r+Math.imul(v,pe)|0)+Math.imul(_,fe)|0))<<13)|0;c=((i=i+Math.imul(_,pe)|0)+(r>>>13)|0)+(Ne>>>26)|0,Ne&=67108863,a=Math.imul(z,J),r=(r=Math.imul(z,ee))+Math.imul(B,J)|0,i=Math.imul(B,ee),a=a+Math.imul(C,ne)|0,r=(r=r+Math.imul(C,ae)|0)+Math.imul(O,ne)|0,i=i+Math.imul(O,ae)|0,a=a+Math.imul(T,ie)|0,r=(r=r+Math.imul(T,oe)|0)+Math.imul(L,ie)|0,i=i+Math.imul(L,oe)|0,a=a+Math.imul(D,se)|0,r=(r=r+Math.imul(D,ce)|0)+Math.imul(A,se)|0,i=i+Math.imul(A,ce)|0,a=a+Math.imul(S,le)|0,r=(r=r+Math.imul(S,ge)|0)+Math.imul(k,le)|0,i=i+Math.imul(k,ge)|0;var De=(c+(a=a+Math.imul(M,fe)|0)|0)+((8191&(r=(r=r+Math.imul(M,pe)|0)+Math.imul(x,fe)|0))<<13)|0;c=((i=i+Math.imul(x,pe)|0)+(r>>>13)|0)+(De>>>26)|0,De&=67108863,a=Math.imul(z,ne),r=(r=Math.imul(z,ae))+Math.imul(B,ne)|0,i=Math.imul(B,ae),a=a+Math.imul(C,ie)|0,r=(r=r+Math.imul(C,oe)|0)+Math.imul(O,ie)|0,i=i+Math.imul(O,oe)|0,a=a+Math.imul(T,se)|0,r=(r=r+Math.imul(T,ce)|0)+Math.imul(L,se)|0,i=i+Math.imul(L,ce)|0,a=a+Math.imul(D,le)|0,r=(r=r+Math.imul(D,ge)|0)+Math.imul(A,le)|0,i=i+Math.imul(A,ge)|0;var Ae=(c+(a=a+Math.imul(S,fe)|0)|0)+((8191&(r=(r=r+Math.imul(S,pe)|0)+Math.imul(k,fe)|0))<<13)|0;c=((i=i+Math.imul(k,pe)|0)+(r>>>13)|0)+(Ae>>>26)|0,Ae&=67108863,a=Math.imul(z,ie),r=(r=Math.imul(z,oe))+Math.imul(B,ie)|0,i=Math.imul(B,oe),a=a+Math.imul(C,se)|0,r=(r=r+Math.imul(C,ce)|0)+Math.imul(O,se)|0,i=i+Math.imul(O,ce)|0,a=a+Math.imul(T,le)|0,r=(r=r+Math.imul(T,ge)|0)+Math.imul(L,le)|0,i=i+Math.imul(L,ge)|0;var je=(c+(a=a+Math.imul(D,fe)|0)|0)+((8191&(r=(r=r+Math.imul(D,pe)|0)+Math.imul(A,fe)|0))<<13)|0;c=((i=i+Math.imul(A,pe)|0)+(r>>>13)|0)+(je>>>26)|0,je&=67108863,a=Math.imul(z,se),r=(r=Math.imul(z,ce))+Math.imul(B,se)|0,i=Math.imul(B,ce),a=a+Math.imul(C,le)|0,r=(r=r+Math.imul(C,ge)|0)+Math.imul(O,le)|0,i=i+Math.imul(O,ge)|0;var Te=(c+(a=a+Math.imul(T,fe)|0)|0)+((8191&(r=(r=r+Math.imul(T,pe)|0)+Math.imul(L,fe)|0))<<13)|0;c=((i=i+Math.imul(L,pe)|0)+(r>>>13)|0)+(Te>>>26)|0,Te&=67108863,a=Math.imul(z,le),r=(r=Math.imul(z,ge))+Math.imul(B,le)|0,i=Math.imul(B,ge);var Le=(c+(a=a+Math.imul(C,fe)|0)|0)+((8191&(r=(r=r+Math.imul(C,pe)|0)+Math.imul(O,fe)|0))<<13)|0;c=((i=i+Math.imul(O,pe)|0)+(r>>>13)|0)+(Le>>>26)|0,Le&=67108863;var Ie=(c+(a=Math.imul(z,fe))|0)+((8191&(r=(r=Math.imul(z,pe))+Math.imul(B,fe)|0))<<13)|0;return c=((i=Math.imul(B,pe))+(r>>>13)|0)+(Ie>>>26)|0,Ie&=67108863,s[0]=me,s[1]=Re,s[2]=be,s[3]=ye,s[4]=ve,s[5]=_e,s[6]=we,s[7]=Me,s[8]=xe,s[9]=Ee,s[10]=Se,s[11]=ke,s[12]=Ne,s[13]=De,s[14]=Ae,s[15]=je,s[16]=Te,s[17]=Le,s[18]=Ie,0!==c&&(s[19]=c,n.length++),n};function R(e,t,n){n.negative=t.negative^e.negative,n.length=e.length+t.length;for(var a=0,r=0,i=0;i<n.length-1;i++){var o=r;r=0;for(var d=67108863&a,s=Math.min(i,t.length-1),c=Math.max(0,i-e.length+1);c<=s;c++){var u=i-c,l=(0|e.words[u])*(0|t.words[c]),g=67108863&l;d=67108863&(g=g+d|0),r+=(o=(o=o+(l/67108864|0)|0)+(g>>>26)|0)>>>26,o&=67108863}n.words[i]=d,a=o,o=r}return 0!==a?n.words[i]=a:n.length--,n._strip()}function b(e,t,n){return R(e,t,n)}function y(e,t){this.x=e,this.y=t}Math.imul||(m=p),i.prototype.mulTo=function(e,t){var n=this.length+e.length;return 10===this.length&&10===e.length?m(this,e,t):n<63?p(this,e,t):n<1024?R(this,e,t):b(this,e,t)},y.prototype.makeRBT=function(e){for(var t=new Array(e),n=i.prototype._countBits(e)-1,a=0;a<e;a++)t[a]=this.revBin(a,n,e);return t},y.prototype.revBin=function(e,t,n){if(0===e||e===n-1)return e;for(var a=0,r=0;r<t;r++)a|=(1&e)<<t-r-1,e>>=1;return a},y.prototype.permute=function(e,t,n,a,r,i){for(var o=0;o<i;o++)a[o]=t[e[o]],r[o]=n[e[o]]},y.prototype.transform=function(e,t,n,a,r,i){this.permute(i,e,t,n,a,r);for(var o=1;o<r;o<<=1)for(var d=o<<1,s=Math.cos(2*Math.PI/d),c=Math.sin(2*Math.PI/d),u=0;u<r;u+=d)for(var l=s,g=c,h=0;h<o;h++){var f=n[u+h],p=a[u+h],m=n[u+h+o],R=a[u+h+o],b=l*m-g*R;R=l*R+g*m,m=b,n[u+h]=f+m,a[u+h]=p+R,n[u+h+o]=f-m,a[u+h+o]=p-R,h!==d&&(b=s*l-c*g,g=s*g+c*l,l=b)}},y.prototype.guessLen13b=function(e,t){var n=1|Math.max(t,e),a=1&n,r=0;for(n=n/2|0;n;n>>>=1)r++;return 1<<r+1+a},y.prototype.conjugate=function(e,t,n){if(!(n<=1))for(var a=0;a<n/2;a++){var r=e[a];e[a]=e[n-a-1],e[n-a-1]=r,r=t[a],t[a]=-t[n-a-1],t[n-a-1]=-r}},y.prototype.normalize13b=function(e,t){for(var n=0,a=0;a<t/2;a++){var r=8192*Math.round(e[2*a+1]/t)+Math.round(e[2*a]/t)+n;e[a]=67108863&r,n=r<67108864?0:r/67108864|0}return e},y.prototype.convert13b=function(e,t,n,r){for(var i=0,o=0;o<t;o++)i+=0|e[o],n[2*o]=8191&i,i>>>=13,n[2*o+1]=8191&i,i>>>=13;for(o=2*t;o<r;++o)n[o]=0;a(0===i),a(0==(-8192&i))},y.prototype.stub=function(e){for(var t=new Array(e),n=0;n<e;n++)t[n]=0;return t},y.prototype.mulp=function(e,t,n){var a=2*this.guessLen13b(e.length,t.length),r=this.makeRBT(a),i=this.stub(a),o=new Array(a),d=new Array(a),s=new Array(a),c=new Array(a),u=new Array(a),l=new Array(a),g=n.words;g.length=a,this.convert13b(e.words,e.length,o,a),this.convert13b(t.words,t.length,c,a),this.transform(o,i,d,s,a,r),this.transform(c,i,u,l,a,r);for(var h=0;h<a;h++){var f=d[h]*u[h]-s[h]*l[h];s[h]=d[h]*l[h]+s[h]*u[h],d[h]=f}return this.conjugate(d,s,a),this.transform(d,s,g,i,a,r),this.conjugate(g,i,a),this.normalize13b(g,a),n.negative=e.negative^t.negative,n.length=e.length+t.length,n._strip()},i.prototype.mul=function(e){var t=new i(null);return t.words=new Array(this.length+e.length),this.mulTo(e,t)},i.prototype.mulf=function(e){var t=new i(null);return t.words=new Array(this.length+e.length),b(this,e,t)},i.prototype.imul=function(e){return this.clone().mulTo(e,this)},i.prototype.imuln=function(e){var t=e<0;t&&(e=-e),a("number"==typeof e),a(e<67108864);for(var n=0,r=0;r<this.length;r++){var i=(0|this.words[r])*e,o=(67108863&i)+(67108863&n);n>>=26,n+=i/67108864|0,n+=o>>>26,this.words[r]=67108863&o}return 0!==n&&(this.words[r]=n,this.length++),t?this.ineg():this},i.prototype.muln=function(e){return this.clone().imuln(e)},i.prototype.sqr=function(){return this.mul(this)},i.prototype.isqr=function(){return this.imul(this.clone())},i.prototype.pow=function(e){var t=function(e){for(var t=new Array(e.bitLength()),n=0;n<t.length;n++){var a=n/26|0,r=n%26;t[n]=e.words[a]>>>r&1}return t}(e);if(0===t.length)return new i(1);for(var n=this,a=0;a<t.length&&0===t[a];a++,n=n.sqr());if(++a<t.length)for(var r=n.sqr();a<t.length;a++,r=r.sqr())0!==t[a]&&(n=n.mul(r));return n},i.prototype.iushln=function(e){a("number"==typeof e&&e>=0);var t,n=e%26,r=(e-n)/26,i=67108863>>>26-n<<26-n;if(0!==n){var o=0;for(t=0;t<this.length;t++){var d=this.words[t]&i,s=(0|this.words[t])-d<<n;this.words[t]=s|o,o=d>>>26-n}o&&(this.words[t]=o,this.length++)}if(0!==r){for(t=this.length-1;t>=0;t--)this.words[t+r]=this.words[t];for(t=0;t<r;t++)this.words[t]=0;this.length+=r}return this._strip()},i.prototype.ishln=function(e){return a(0===this.negative),this.iushln(e)},i.prototype.iushrn=function(e,t,n){var r;a("number"==typeof e&&e>=0),r=t?(t-t%26)/26:0;var i=e%26,o=Math.min((e-i)/26,this.length),d=67108863^67108863>>>i<<i,s=n;if(r-=o,r=Math.max(0,r),s){for(var c=0;c<o;c++)s.words[c]=this.words[c];s.length=o}if(0===o);else if(this.length>o)for(this.length-=o,c=0;c<this.length;c++)this.words[c]=this.words[c+o];else this.words[0]=0,this.length=1;var u=0;for(c=this.length-1;c>=0&&(0!==u||c>=r);c--){var l=0|this.words[c];this.words[c]=u<<26-i|l>>>i,u=l&d}return s&&0!==u&&(s.words[s.length++]=u),0===this.length&&(this.words[0]=0,this.length=1),this._strip()},i.prototype.ishrn=function(e,t,n){return a(0===this.negative),this.iushrn(e,t,n)},i.prototype.shln=function(e){return this.clone().ishln(e)},i.prototype.ushln=function(e){return this.clone().iushln(e)},i.prototype.shrn=function(e){return this.clone().ishrn(e)},i.prototype.ushrn=function(e){return this.clone().iushrn(e)},i.prototype.testn=function(e){a("number"==typeof e&&e>=0);var t=e%26,n=(e-t)/26,r=1<<t;return!(this.length<=n)&&!!(this.words[n]&r)},i.prototype.imaskn=function(e){a("number"==typeof e&&e>=0);var t=e%26,n=(e-t)/26;if(a(0===this.negative,"imaskn works only with positive numbers"),this.length<=n)return this;if(0!==t&&n++,this.length=Math.min(n,this.length),0!==t){var r=67108863^67108863>>>t<<t;this.words[this.length-1]&=r}return this._strip()},i.prototype.maskn=function(e){return this.clone().imaskn(e)},i.prototype.iaddn=function(e){return a("number"==typeof e),a(e<67108864),e<0?this.isubn(-e):0!==this.negative?1===this.length&&(0|this.words[0])<=e?(this.words[0]=e-(0|this.words[0]),this.negative=0,this):(this.negative=0,this.isubn(e),this.negative=1,this):this._iaddn(e)},i.prototype._iaddn=function(e){this.words[0]+=e;for(var t=0;t<this.length&&this.words[t]>=67108864;t++)this.words[t]-=67108864,t===this.length-1?this.words[t+1]=1:this.words[t+1]++;return this.length=Math.max(this.length,t+1),this},i.prototype.isubn=function(e){if(a("number"==typeof e),a(e<67108864),e<0)return this.iaddn(-e);if(0!==this.negative)return this.negative=0,this.iaddn(e),this.negative=1,this;if(this.words[0]-=e,1===this.length&&this.words[0]<0)this.words[0]=-this.words[0],this.negative=1;else for(var t=0;t<this.length&&this.words[t]<0;t++)this.words[t]+=67108864,this.words[t+1]-=1;return this._strip()},i.prototype.addn=function(e){return this.clone().iaddn(e)},i.prototype.subn=function(e){return this.clone().isubn(e)},i.prototype.iabs=function(){return this.negative=0,this},i.prototype.abs=function(){return this.clone().iabs()},i.prototype._ishlnsubmul=function(e,t,n){var r,i,o=e.length+n;this._expand(o);var d=0;for(r=0;r<e.length;r++){i=(0|this.words[r+n])+d;var s=(0|e.words[r])*t;d=((i-=67108863&s)>>26)-(s/67108864|0),this.words[r+n]=67108863&i}for(;r<this.length-n;r++)d=(i=(0|this.words[r+n])+d)>>26,this.words[r+n]=67108863&i;if(0===d)return this._strip();for(a(-1===d),d=0,r=0;r<this.length;r++)d=(i=-(0|this.words[r])+d)>>26,this.words[r]=67108863&i;return this.negative=1,this._strip()},i.prototype._wordDiv=function(e,t){var n=(this.length,e.length),a=this.clone(),r=e,o=0|r.words[r.length-1];0!==(n=26-this._countBits(o))&&(r=r.ushln(n),a.iushln(n),o=0|r.words[r.length-1]);var d,s=a.length-r.length;if("mod"!==t){(d=new i(null)).length=s+1,d.words=new Array(d.length);for(var c=0;c<d.length;c++)d.words[c]=0}var u=a.clone()._ishlnsubmul(r,1,s);0===u.negative&&(a=u,d&&(d.words[s]=1));for(var l=s-1;l>=0;l--){var g=67108864*(0|a.words[r.length+l])+(0|a.words[r.length+l-1]);for(g=Math.min(g/o|0,67108863),a._ishlnsubmul(r,g,l);0!==a.negative;)g--,a.negative=0,a._ishlnsubmul(r,1,l),a.isZero()||(a.negative^=1);d&&(d.words[l]=g)}return d&&d._strip(),a._strip(),"div"!==t&&0!==n&&a.iushrn(n),{div:d||null,mod:a}},i.prototype.divmod=function(e,t,n){return a(!e.isZero()),this.isZero()?{div:new i(0),mod:new i(0)}:0!==this.negative&&0===e.negative?(d=this.neg().divmod(e,t),"mod"!==t&&(r=d.div.neg()),"div"!==t&&(o=d.mod.neg(),n&&0!==o.negative&&o.iadd(e)),{div:r,mod:o}):0===this.negative&&0!==e.negative?(d=this.divmod(e.neg(),t),"mod"!==t&&(r=d.div.neg()),{div:r,mod:d.mod}):0!=(this.negative&e.negative)?(d=this.neg().divmod(e.neg(),t),"div"!==t&&(o=d.mod.neg(),n&&0!==o.negative&&o.isub(e)),{div:d.div,mod:o}):e.length>this.length||this.cmp(e)<0?{div:new i(0),mod:this}:1===e.length?"div"===t?{div:this.divn(e.words[0]),mod:null}:"mod"===t?{div:null,mod:new i(this.modrn(e.words[0]))}:{div:this.divn(e.words[0]),mod:new i(this.modrn(e.words[0]))}:this._wordDiv(e,t);var r,o,d},i.prototype.div=function(e){return this.divmod(e,"div",!1).div},i.prototype.mod=function(e){return this.divmod(e,"mod",!1).mod},i.prototype.umod=function(e){return this.divmod(e,"mod",!0).mod},i.prototype.divRound=function(e){var t=this.divmod(e);if(t.mod.isZero())return t.div;var n=0!==t.div.negative?t.mod.isub(e):t.mod,a=e.ushrn(1),r=e.andln(1),i=n.cmp(a);return i<0||1===r&&0===i?t.div:0!==t.div.negative?t.div.isubn(1):t.div.iaddn(1)},i.prototype.modrn=function(e){var t=e<0;t&&(e=-e),a(e<=67108863);for(var n=(1<<26)%e,r=0,i=this.length-1;i>=0;i--)r=(n*r+(0|this.words[i]))%e;return t?-r:r},i.prototype.modn=function(e){return this.modrn(e)},i.prototype.idivn=function(e){var t=e<0;t&&(e=-e),a(e<=67108863);for(var n=0,r=this.length-1;r>=0;r--){var i=(0|this.words[r])+67108864*n;this.words[r]=i/e|0,n=i%e}return this._strip(),t?this.ineg():this},i.prototype.divn=function(e){return this.clone().idivn(e)},i.prototype.egcd=function(e){a(0===e.negative),a(!e.isZero());var t=this,n=e.clone();t=0!==t.negative?t.umod(e):t.clone();for(var r=new i(1),o=new i(0),d=new i(0),s=new i(1),c=0;t.isEven()&&n.isEven();)t.iushrn(1),n.iushrn(1),++c;for(var u=n.clone(),l=t.clone();!t.isZero();){for(var g=0,h=1;0==(t.words[0]&h)&&g<26;++g,h<<=1);if(g>0)for(t.iushrn(g);g-- >0;)(r.isOdd()||o.isOdd())&&(r.iadd(u),o.isub(l)),r.iushrn(1),o.iushrn(1);for(var f=0,p=1;0==(n.words[0]&p)&&f<26;++f,p<<=1);if(f>0)for(n.iushrn(f);f-- >0;)(d.isOdd()||s.isOdd())&&(d.iadd(u),s.isub(l)),d.iushrn(1),s.iushrn(1);t.cmp(n)>=0?(t.isub(n),r.isub(d),o.isub(s)):(n.isub(t),d.isub(r),s.isub(o))}return{a:d,b:s,gcd:n.iushln(c)}},i.prototype._invmp=function(e){a(0===e.negative),a(!e.isZero());var t=this,n=e.clone();t=0!==t.negative?t.umod(e):t.clone();for(var r,o=new i(1),d=new i(0),s=n.clone();t.cmpn(1)>0&&n.cmpn(1)>0;){for(var c=0,u=1;0==(t.words[0]&u)&&c<26;++c,u<<=1);if(c>0)for(t.iushrn(c);c-- >0;)o.isOdd()&&o.iadd(s),o.iushrn(1);for(var l=0,g=1;0==(n.words[0]&g)&&l<26;++l,g<<=1);if(l>0)for(n.iushrn(l);l-- >0;)d.isOdd()&&d.iadd(s),d.iushrn(1);t.cmp(n)>=0?(t.isub(n),o.isub(d)):(n.isub(t),d.isub(o))}return(r=0===t.cmpn(1)?o:d).cmpn(0)<0&&r.iadd(e),r},i.prototype.gcd=function(e){if(this.isZero())return e.abs();if(e.isZero())return this.abs();var t=this.clone(),n=e.clone();t.negative=0,n.negative=0;for(var a=0;t.isEven()&&n.isEven();a++)t.iushrn(1),n.iushrn(1);for(;;){for(;t.isEven();)t.iushrn(1);for(;n.isEven();)n.iushrn(1);var r=t.cmp(n);if(r<0){var i=t;t=n,n=i}else if(0===r||0===n.cmpn(1))break;t.isub(n)}return n.iushln(a)},i.prototype.invm=function(e){return this.egcd(e).a.umod(e)},i.prototype.isEven=function(){return 0==(1&this.words[0])},i.prototype.isOdd=function(){return 1==(1&this.words[0])},i.prototype.andln=function(e){return this.words[0]&e},i.prototype.bincn=function(e){a("number"==typeof e);var t=e%26,n=(e-t)/26,r=1<<t;if(this.length<=n)return this._expand(n+1),this.words[n]|=r,this;for(var i=r,o=n;0!==i&&o<this.length;o++){var d=0|this.words[o];i=(d+=i)>>>26,d&=67108863,this.words[o]=d}return 0!==i&&(this.words[o]=i,this.length++),this},i.prototype.isZero=function(){return 1===this.length&&0===this.words[0]},i.prototype.cmpn=function(e){var t,n=e<0;if(0!==this.negative&&!n)return-1;if(0===this.negative&&n)return 1;if(this._strip(),this.length>1)t=1;else{n&&(e=-e),a(e<=67108863,"Number is too big");var r=0|this.words[0];t=r===e?0:r<e?-1:1}return 0!==this.negative?0|-t:t},i.prototype.cmp=function(e){if(0!==this.negative&&0===e.negative)return-1;if(0===this.negative&&0!==e.negative)return 1;var t=this.ucmp(e);return 0!==this.negative?0|-t:t},i.prototype.ucmp=function(e){if(this.length>e.length)return 1;if(this.length<e.length)return-1;for(var t=0,n=this.length-1;n>=0;n--){var a=0|this.words[n],r=0|e.words[n];if(a!==r){a<r?t=-1:a>r&&(t=1);break}}return t},i.prototype.gtn=function(e){return 1===this.cmpn(e)},i.prototype.gt=function(e){return 1===this.cmp(e)},i.prototype.gten=function(e){return this.cmpn(e)>=0},i.prototype.gte=function(e){return this.cmp(e)>=0},i.prototype.ltn=function(e){return-1===this.cmpn(e)},i.prototype.lt=function(e){return-1===this.cmp(e)},i.prototype.lten=function(e){return this.cmpn(e)<=0},i.prototype.lte=function(e){return this.cmp(e)<=0},i.prototype.eqn=function(e){return 0===this.cmpn(e)},i.prototype.eq=function(e){return 0===this.cmp(e)},i.red=function(e){return new S(e)},i.prototype.toRed=function(e){return a(!this.red,"Already a number in reduction context"),a(0===this.negative,"red works only with positives"),e.convertTo(this)._forceRed(e)},i.prototype.fromRed=function(){return a(this.red,"fromRed works only with numbers in reduction context"),this.red.convertFrom(this)},i.prototype._forceRed=function(e){return this.red=e,this},i.prototype.forceRed=function(e){return a(!this.red,"Already a number in reduction context"),this._forceRed(e)},i.prototype.redAdd=function(e){return a(this.red,"redAdd works only with red numbers"),this.red.add(this,e)},i.prototype.redIAdd=function(e){return a(this.red,"redIAdd works only with red numbers"),this.red.iadd(this,e)},i.prototype.redSub=function(e){return a(this.red,"redSub works only with red numbers"),this.red.sub(this,e)},i.prototype.redISub=function(e){return a(this.red,"redISub works only with red numbers"),this.red.isub(this,e)},i.prototype.redShl=function(e){return a(this.red,"redShl works only with red numbers"),this.red.shl(this,e)},i.prototype.redMul=function(e){return a(this.red,"redMul works only with red numbers"),this.red._verify2(this,e),this.red.mul(this,e)},i.prototype.redIMul=function(e){return a(this.red,"redMul works only with red numbers"),this.red._verify2(this,e),this.red.imul(this,e)},i.prototype.redSqr=function(){return a(this.red,"redSqr works only with red numbers"),this.red._verify1(this),this.red.sqr(this)},i.prototype.redISqr=function(){return a(this.red,"redISqr works only with red numbers"),this.red._verify1(this),this.red.isqr(this)},i.prototype.redSqrt=function(){return a(this.red,"redSqrt works only with red numbers"),this.red._verify1(this),this.red.sqrt(this)},i.prototype.redInvm=function(){return a(this.red,"redInvm works only with red numbers"),this.red._verify1(this),this.red.invm(this)},i.prototype.redNeg=function(){return a(this.red,"redNeg works only with red numbers"),this.red._verify1(this),this.red.neg(this)},i.prototype.redPow=function(e){return a(this.red&&!e.red,"redPow(normalNum)"),this.red._verify1(this),this.red.pow(this,e)};var v={k256:null,p224:null,p192:null,p25519:null};function _(e,t){this.name=e,this.p=new i(t,16),this.n=this.p.bitLength(),this.k=new i(1).iushln(this.n).isub(this.p),this.tmp=this._tmp()}function w(){_.call(this,"k256","ffffffff ffffffff ffffffff ffffffff ffffffff ffffffff fffffffe fffffc2f")}function M(){_.call(this,"p224","ffffffff ffffffff ffffffff ffffffff 00000000 00000000 00000001")}function x(){_.call(this,"p192","ffffffff ffffffff ffffffff fffffffe ffffffff ffffffff")}function E(){_.call(this,"25519","7fffffffffffffff ffffffffffffffff ffffffffffffffff ffffffffffffffed")}function S(e){if("string"==typeof e){var t=i._prime(e);this.m=t.p,this.prime=t}else a(e.gtn(1),"modulus must be greater than 1"),this.m=e,this.prime=null}function k(e){S.call(this,e),this.shift=this.m.bitLength(),this.shift%26!=0&&(this.shift+=26-this.shift%26),this.r=new i(1).iushln(this.shift),this.r2=this.imod(this.r.sqr()),this.rinv=this.r._invmp(this.m),this.minv=this.rinv.mul(this.r).isubn(1).div(this.m),this.minv=this.minv.umod(this.r),this.minv=this.r.sub(this.minv)}_.prototype._tmp=function(){var e=new i(null);return e.words=new Array(Math.ceil(this.n/13)),e},_.prototype.ireduce=function(e){var t,n=e;do{this.split(n,this.tmp),t=(n=(n=this.imulK(n)).iadd(this.tmp)).bitLength()}while(t>this.n);var a=t<this.n?-1:n.ucmp(this.p);return 0===a?(n.words[0]=0,n.length=1):a>0?n.isub(this.p):void 0!==n.strip?n.strip():n._strip(),n},_.prototype.split=function(e,t){e.iushrn(this.n,0,t)},_.prototype.imulK=function(e){return e.imul(this.k)},r(w,_),w.prototype.split=function(e,t){for(var n=4194303,a=Math.min(e.length,9),r=0;r<a;r++)t.words[r]=e.words[r];if(t.length=a,e.length<=9)return e.words[0]=0,void(e.length=1);var i=e.words[9];for(t.words[t.length++]=i&n,r=10;r<e.length;r++){var o=0|e.words[r];e.words[r-10]=(o&n)<<4|i>>>22,i=o}i>>>=22,e.words[r-10]=i,0===i&&e.length>10?e.length-=10:e.length-=9},w.prototype.imulK=function(e){e.words[e.length]=0,e.words[e.length+1]=0,e.length+=2;for(var t=0,n=0;n<e.length;n++){var a=0|e.words[n];t+=977*a,e.words[n]=67108863&t,t=64*a+(t/67108864|0)}return 0===e.words[e.length-1]&&(e.length--,0===e.words[e.length-1]&&e.length--),e},r(M,_),r(x,_),r(E,_),E.prototype.imulK=function(e){for(var t=0,n=0;n<e.length;n++){var a=19*(0|e.words[n])+t,r=67108863&a;a>>>=26,e.words[n]=r,t=a}return 0!==t&&(e.words[e.length++]=t),e},i._prime=function(e){if(v[e])return v[e];var t;if("k256"===e)t=new w;else if("p224"===e)t=new M;else if("p192"===e)t=new x;else{if("p25519"!==e)throw new Error("Unknown prime "+e);t=new E}return v[e]=t,t},S.prototype._verify1=function(e){a(0===e.negative,"red works only with positives"),a(e.red,"red works only with red numbers")},S.prototype._verify2=function(e,t){a(0==(e.negative|t.negative),"red works only with positives"),a(e.red&&e.red===t.red,"red works only with red numbers")},S.prototype.imod=function(e){return this.prime?this.prime.ireduce(e)._forceRed(this):(u(e,e.umod(this.m)._forceRed(this)),e)},S.prototype.neg=function(e){return e.isZero()?e.clone():this.m.sub(e)._forceRed(this)},S.prototype.add=function(e,t){this._verify2(e,t);var n=e.add(t);return n.cmp(this.m)>=0&&n.isub(this.m),n._forceRed(this)},S.prototype.iadd=function(e,t){this._verify2(e,t);var n=e.iadd(t);return n.cmp(this.m)>=0&&n.isub(this.m),n},S.prototype.sub=function(e,t){this._verify2(e,t);var n=e.sub(t);return n.cmpn(0)<0&&n.iadd(this.m),n._forceRed(this)},S.prototype.isub=function(e,t){this._verify2(e,t);var n=e.isub(t);return n.cmpn(0)<0&&n.iadd(this.m),n},S.prototype.shl=function(e,t){return this._verify1(e),this.imod(e.ushln(t))},S.prototype.imul=function(e,t){return this._verify2(e,t),this.imod(e.imul(t))},S.prototype.mul=function(e,t){return this._verify2(e,t),this.imod(e.mul(t))},S.prototype.isqr=function(e){return this.imul(e,e.clone())},S.prototype.sqr=function(e){return this.mul(e,e)},S.prototype.sqrt=function(e){if(e.isZero())return e.clone();var t=this.m.andln(3);if(a(t%2==1),3===t){var n=this.m.add(new i(1)).iushrn(2);return this.pow(e,n)}for(var r=this.m.subn(1),o=0;!r.isZero()&&0===r.andln(1);)o++,r.iushrn(1);a(!r.isZero());var d=new i(1).toRed(this),s=d.redNeg(),c=this.m.subn(1).iushrn(1),u=this.m.bitLength();for(u=new i(2*u*u).toRed(this);0!==this.pow(u,c).cmp(s);)u.redIAdd(s);for(var l=this.pow(u,r),g=this.pow(e,r.addn(1).iushrn(1)),h=this.pow(e,r),f=o;0!==h.cmp(d);){for(var p=h,m=0;0!==p.cmp(d);m++)p=p.redSqr();a(m<f);var R=this.pow(l,new i(1).iushln(f-m-1));g=g.redMul(R),l=R.redSqr(),h=h.redMul(l),f=m}return g},S.prototype.invm=function(e){var t=e._invmp(this.m);return 0!==t.negative?(t.negative=0,this.imod(t).redNeg()):this.imod(t)},S.prototype.pow=function(e,t){if(t.isZero())return new i(1).toRed(this);if(0===t.cmpn(1))return e.clone();var n=new Array(16);n[0]=new i(1).toRed(this),n[1]=e;for(var a=2;a<n.length;a++)n[a]=this.mul(n[a-1],e);var r=n[0],o=0,d=0,s=t.bitLength()%26;for(0===s&&(s=26),a=t.length-1;a>=0;a--){for(var c=t.words[a],u=s-1;u>=0;u--){var l=c>>u&1;r!==n[0]&&(r=this.sqr(r)),0!==l||0!==o?(o<<=1,o|=l,(4===++d||0===a&&0===u)&&(r=this.mul(r,n[o]),d=0,o=0)):d=0}s=26}return r},S.prototype.convertTo=function(e){var t=e.umod(this.m);return t===e?t.clone():t},S.prototype.convertFrom=function(e){var t=e.clone();return t.red=null,t},i.mont=function(e){return new k(e)},r(k,S),k.prototype.convertTo=function(e){return this.imod(e.ushln(this.shift))},k.prototype.convertFrom=function(e){var t=this.imod(e.mul(this.rinv));return t.red=null,t},k.prototype.imul=function(e,t){if(e.isZero()||t.isZero())return e.words[0]=0,e.length=1,e;var n=e.imul(t),a=n.maskn(this.shift).mul(this.minv).imaskn(this.shift).mul(this.m),r=n.isub(a).iushrn(this.shift),i=r;return r.cmp(this.m)>=0?i=r.isub(this.m):r.cmpn(0)<0&&(i=r.iadd(this.m)),i._forceRed(this)},k.prototype.mul=function(e,t){if(e.isZero()||t.isZero())return new i(0)._forceRed(this);var n=e.mul(t),a=n.maskn(this.shift).mul(this.minv).imaskn(this.shift).mul(this.m),r=n.isub(a).iushrn(this.shift),o=r;return r.cmp(this.m)>=0?o=r.isub(this.m):r.cmpn(0)<0&&(o=r.iadd(this.m)),o._forceRed(this)},k.prototype.invm=function(e){return this.imod(e._invmp(this.m).mul(this.r2))._forceRed(this)}}(e=n.nmd(e),this)},66244:function(e){"use strict";var t={};function n(e,n,a){a||(a=Error);var r=function(e){var t,a;function r(t,a,r){return e.call(this,function(e,t,a){return"string"==typeof n?n:n(e,t,a)}(t,a,r))||this}return a=e,(t=r).prototype=Object.create(a.prototype),t.prototype.constructor=t,t.__proto__=a,r}(a);r.prototype.name=a.name,r.prototype.code=e,t[e]=r}function a(e,t){if(Array.isArray(e)){var n=e.length;return e=e.map((function(e){return String(e)})),n>2?"one of ".concat(t," ").concat(e.slice(0,n-1).join(", "),", or ")+e[n-1]:2===n?"one of ".concat(t," ").concat(e[0]," or ").concat(e[1]):"of ".concat(t," ").concat(e[0])}return"of ".concat(t," ").concat(String(e))}n("ERR_INVALID_OPT_VALUE",(function(e,t){return'The value "'+t+'" is invalid for option "'+e+'"'}),TypeError),n("ERR_INVALID_ARG_TYPE",(function(e,t,n){var r,i,o,d;if("string"==typeof t&&(i="not ",t.substr(!o||o<0?0:+o,i.length)===i)?(r="must not be",t=t.replace(/^not /,"")):r="must be",function(e,t,n){return(void 0===n||n>e.length)&&(n=e.length),e.substring(n-t.length,n)===t}(e," argument"))d="The ".concat(e," ").concat(r," ").concat(a(t,"type"));else{var s=function(e,t,n){return"number"!=typeof n&&(n=0),!(n+t.length>e.length)&&-1!==e.indexOf(t,n)}(e,".")?"property":"argument";d='The "'.concat(e,'" ').concat(s," ").concat(r," ").concat(a(t,"type"))}return d+=". Received type ".concat(typeof n)}),TypeError),n("ERR_STREAM_PUSH_AFTER_EOF","stream.push() after EOF"),n("ERR_METHOD_NOT_IMPLEMENTED",(function(e){return"The "+e+" method is not implemented"})),n("ERR_STREAM_PREMATURE_CLOSE","Premature close"),n("ERR_STREAM_DESTROYED",(function(e){return"Cannot call "+e+" after a stream was destroyed"})),n("ERR_MULTIPLE_CALLBACK","Callback called multiple times"),n("ERR_STREAM_CANNOT_PIPE","Cannot pipe, not readable"),n("ERR_STREAM_WRITE_AFTER_END","write after end"),n("ERR_STREAM_NULL_VALUES","May not write null values to stream",TypeError),n("ERR_UNKNOWN_ENCODING",(function(e){return"Unknown encoding: "+e}),TypeError),n("ERR_STREAM_UNSHIFT_AFTER_END_EVENT","stream.unshift() after end event"),e.exports.q=t},51278:function(e,t,n){"use strict";var a=n(27061),r=Object.keys||function(e){var t=[];for(var n in e)t.push(n);return t};e.exports=u;var i=n(84581),o=n(60003);n(70087)(u,i);for(var d=r(o.prototype),s=0;s<d.length;s++){var c=d[s];u.prototype[c]||(u.prototype[c]=o.prototype[c])}function u(e){if(!(this instanceof u))return new u(e);i.call(this,e),o.call(this,e),this.allowHalfOpen=!0,e&&(!1===e.readable&&(this.readable=!1),!1===e.writable&&(this.writable=!1),!1===e.allowHalfOpen&&(this.allowHalfOpen=!1,this.once("end",l)))}function l(){this._writableState.ended||a.nextTick(g,this)}function g(e){e.end()}Object.defineProperty(u.prototype,"writableHighWaterMark",{enumerable:!1,get:function(){return this._writableState.highWaterMark}}),Object.defineProperty(u.prototype,"writableBuffer",{enumerable:!1,get:function(){return this._writableState&&this._writableState.getBuffer()}}),Object.defineProperty(u.prototype,"writableLength",{enumerable:!1,get:function(){return this._writableState.length}}),Object.defineProperty(u.prototype,"destroyed",{enumerable:!1,get:function(){return void 0!==this._readableState&&void 0!==this._writableState&&(this._readableState.destroyed&&this._writableState.destroyed)},set:function(e){void 0!==this._readableState&&void 0!==this._writableState&&(this._readableState.destroyed=e,this._writableState.destroyed=e)}})},48825:function(e,t,n){"use strict";e.exports=r;var a=n(68133);function r(e){if(!(this instanceof r))return new r(e);a.call(this,e)}n(70087)(r,a),r.prototype._transform=function(e,t,n){n(null,e)}},84581:function(e,t,n){"use strict";var a,r=n(27061);e.exports=E,E.ReadableState=x;n(50343).EventEmitter;var i=function(e,t){return e.listeners(t).length},o=n(56284),d=n(30816).Buffer,s=(void 0!==n.g?n.g:"undefined"!=typeof window?window:"undefined"!=typeof self?self:{}).Uint8Array||function(){};var c,u=n(47021);c=u&&u.debuglog?u.debuglog("stream"):function(){};var l,g,h,f=n(80077),p=n(94602),m=n(53189).getHighWaterMark,R=n(66244).q,b=R.ERR_INVALID_ARG_TYPE,y=R.ERR_STREAM_PUSH_AFTER_EOF,v=R.ERR_METHOD_NOT_IMPLEMENTED,_=R.ERR_STREAM_UNSHIFT_AFTER_END_EVENT;n(70087)(E,o);var w=p.errorOrDestroy,M=["error","close","destroy","pause","resume"];function x(e,t,r){a=a||n(51278),e=e||{},"boolean"!=typeof r&&(r=t instanceof a),this.objectMode=!!e.objectMode,r&&(this.objectMode=this.objectMode||!!e.readableObjectMode),this.highWaterMark=m(this,e,"readableHighWaterMark",r),this.buffer=new f,this.length=0,this.pipes=null,this.pipesCount=0,this.flowing=null,this.ended=!1,this.endEmitted=!1,this.reading=!1,this.sync=!0,this.needReadable=!1,this.emittedReadable=!1,this.readableListening=!1,this.resumeScheduled=!1,this.paused=!0,this.emitClose=!1!==e.emitClose,this.autoDestroy=!!e.autoDestroy,this.destroyed=!1,this.defaultEncoding=e.defaultEncoding||"utf8",this.awaitDrain=0,this.readingMore=!1,this.decoder=null,this.encoding=null,e.encoding&&(l||(l=n(34361).s),this.decoder=new l(e.encoding),this.encoding=e.encoding)}function E(e){if(a=a||n(51278),!(this instanceof E))return new E(e);var t=this instanceof a;this._readableState=new x(e,this,t),this.readable=!0,e&&("function"==typeof e.read&&(this._read=e.read),"function"==typeof e.destroy&&(this._destroy=e.destroy)),o.call(this)}function S(e,t,n,a,r){c("readableAddChunk",t);var i,o=e._readableState;if(null===t)o.reading=!1,function(e,t){if(c("onEofChunk"),t.ended)return;if(t.decoder){var n=t.decoder.end();n&&n.length&&(t.buffer.push(n),t.length+=t.objectMode?1:n.length)}t.ended=!0,t.sync?A(e):(t.needReadable=!1,t.emittedReadable||(t.emittedReadable=!0,j(e)))}(e,o);else if(r||(i=function(e,t){var n;a=t,d.isBuffer(a)||a instanceof s||"string"==typeof t||void 0===t||e.objectMode||(n=new b("chunk",["string","Buffer","Uint8Array"],t));var a;return n}(o,t)),i)w(e,i);else if(o.objectMode||t&&t.length>0)if("string"==typeof t||o.objectMode||Object.getPrototypeOf(t)===d.prototype||(t=function(e){return d.from(e)}(t)),a)o.endEmitted?w(e,new _):k(e,o,t,!0);else if(o.ended)w(e,new y);else{if(o.destroyed)return!1;o.reading=!1,o.decoder&&!n?(t=o.decoder.write(t),o.objectMode||0!==t.length?k(e,o,t,!1):T(e,o)):k(e,o,t,!1)}else a||(o.reading=!1,T(e,o));return!o.ended&&(o.length<o.highWaterMark||0===o.length)}function k(e,t,n,a){t.flowing&&0===t.length&&!t.sync?(t.awaitDrain=0,e.emit("data",n)):(t.length+=t.objectMode?1:n.length,a?t.buffer.unshift(n):t.buffer.push(n),t.needReadable&&A(e)),T(e,t)}Object.defineProperty(E.prototype,"destroyed",{enumerable:!1,get:function(){return void 0!==this._readableState&&this._readableState.destroyed},set:function(e){this._readableState&&(this._readableState.destroyed=e)}}),E.prototype.destroy=p.destroy,E.prototype._undestroy=p.undestroy,E.prototype._destroy=function(e,t){t(e)},E.prototype.push=function(e,t){var n,a=this._readableState;return a.objectMode?n=!0:"string"==typeof e&&((t=t||a.defaultEncoding)!==a.encoding&&(e=d.from(e,t),t=""),n=!0),S(this,e,t,!1,n)},E.prototype.unshift=function(e){return S(this,e,null,!0,!1)},E.prototype.isPaused=function(){return!1===this._readableState.flowing},E.prototype.setEncoding=function(e){l||(l=n(34361).s);var t=new l(e);this._readableState.decoder=t,this._readableState.encoding=this._readableState.decoder.encoding;for(var a=this._readableState.buffer.head,r="";null!==a;)r+=t.write(a.data),a=a.next;return this._readableState.buffer.clear(),""!==r&&this._readableState.buffer.push(r),this._readableState.length=r.length,this};var N=1073741824;function D(e,t){return e<=0||0===t.length&&t.ended?0:t.objectMode?1:e!=e?t.flowing&&t.length?t.buffer.head.data.length:t.length:(e>t.highWaterMark&&(t.highWaterMark=function(e){return e>=N?e=N:(e--,e|=e>>>1,e|=e>>>2,e|=e>>>4,e|=e>>>8,e|=e>>>16,e++),e}(e)),e<=t.length?e:t.ended?t.length:(t.needReadable=!0,0))}function A(e){var t=e._readableState;c("emitReadable",t.needReadable,t.emittedReadable),t.needReadable=!1,t.emittedReadable||(c("emitReadable",t.flowing),t.emittedReadable=!0,r.nextTick(j,e))}function j(e){var t=e._readableState;c("emitReadable_",t.destroyed,t.length,t.ended),t.destroyed||!t.length&&!t.ended||(e.emit("readable"),t.emittedReadable=!1),t.needReadable=!t.flowing&&!t.ended&&t.length<=t.highWaterMark,P(e)}function T(e,t){t.readingMore||(t.readingMore=!0,r.nextTick(L,e,t))}function L(e,t){for(;!t.reading&&!t.ended&&(t.length<t.highWaterMark||t.flowing&&0===t.length);){var n=t.length;if(c("maybeReadMore read 0"),e.read(0),n===t.length)break}t.readingMore=!1}function I(e){var t=e._readableState;t.readableListening=e.listenerCount("readable")>0,t.resumeScheduled&&!t.paused?t.flowing=!0:e.listenerCount("data")>0&&e.resume()}function C(e){c("readable nexttick read 0"),e.read(0)}function O(e,t){c("resume",t.reading),t.reading||e.read(0),t.resumeScheduled=!1,e.emit("resume"),P(e),t.flowing&&!t.reading&&e.read(0)}function P(e){var t=e._readableState;for(c("flow",t.flowing);t.flowing&&null!==e.read(););}function z(e,t){return 0===t.length?null:(t.objectMode?n=t.buffer.shift():!e||e>=t.length?(n=t.decoder?t.buffer.join(""):1===t.buffer.length?t.buffer.first():t.buffer.concat(t.length),t.buffer.clear()):n=t.buffer.consume(e,t.decoder),n);var n}function B(e){var t=e._readableState;c("endReadable",t.endEmitted),t.endEmitted||(t.ended=!0,r.nextTick(F,t,e))}function F(e,t){if(c("endReadableNT",e.endEmitted,e.length),!e.endEmitted&&0===e.length&&(e.endEmitted=!0,t.readable=!1,t.emit("end"),e.autoDestroy)){var n=t._writableState;(!n||n.autoDestroy&&n.finished)&&t.destroy()}}function U(e,t){for(var n=0,a=e.length;n<a;n++)if(e[n]===t)return n;return-1}E.prototype.read=function(e){c("read",e),e=parseInt(e,10);var t=this._readableState,n=e;if(0!==e&&(t.emittedReadable=!1),0===e&&t.needReadable&&((0!==t.highWaterMark?t.length>=t.highWaterMark:t.length>0)||t.ended))return c("read: emitReadable",t.length,t.ended),0===t.length&&t.ended?B(this):A(this),null;if(0===(e=D(e,t))&&t.ended)return 0===t.length&&B(this),null;var a,r=t.needReadable;return c("need readable",r),(0===t.length||t.length-e<t.highWaterMark)&&c("length less than watermark",r=!0),t.ended||t.reading?c("reading or ended",r=!1):r&&(c("do read"),t.reading=!0,t.sync=!0,0===t.length&&(t.needReadable=!0),this._read(t.highWaterMark),t.sync=!1,t.reading||(e=D(n,t))),null===(a=e>0?z(e,t):null)?(t.needReadable=t.length<=t.highWaterMark,e=0):(t.length-=e,t.awaitDrain=0),0===t.length&&(t.ended||(t.needReadable=!0),n!==e&&t.ended&&B(this)),null!==a&&this.emit("data",a),a},E.prototype._read=function(e){w(this,new v("_read()"))},E.prototype.pipe=function(e,t){var n=this,a=this._readableState;switch(a.pipesCount){case 0:a.pipes=e;break;case 1:a.pipes=[a.pipes,e];break;default:a.pipes.push(e)}a.pipesCount+=1,c("pipe count=%d opts=%j",a.pipesCount,t);var o=(!t||!1!==t.end)&&e!==r.stdout&&e!==r.stderr?s:m;function d(t,r){c("onunpipe"),t===n&&r&&!1===r.hasUnpiped&&(r.hasUnpiped=!0,c("cleanup"),e.removeListener("close",f),e.removeListener("finish",p),e.removeListener("drain",u),e.removeListener("error",h),e.removeListener("unpipe",d),n.removeListener("end",s),n.removeListener("end",m),n.removeListener("data",g),l=!0,!a.awaitDrain||e._writableState&&!e._writableState.needDrain||u())}function s(){c("onend"),e.end()}a.endEmitted?r.nextTick(o):n.once("end",o),e.on("unpipe",d);var u=function(e){return function(){var t=e._readableState;c("pipeOnDrain",t.awaitDrain),t.awaitDrain&&t.awaitDrain--,0===t.awaitDrain&&i(e,"data")&&(t.flowing=!0,P(e))}}(n);e.on("drain",u);var l=!1;function g(t){c("ondata");var r=e.write(t);c("dest.write",r),!1===r&&((1===a.pipesCount&&a.pipes===e||a.pipesCount>1&&-1!==U(a.pipes,e))&&!l&&(c("false write response, pause",a.awaitDrain),a.awaitDrain++),n.pause())}function h(t){c("onerror",t),m(),e.removeListener("error",h),0===i(e,"error")&&w(e,t)}function f(){e.removeListener("finish",p),m()}function p(){c("onfinish"),e.removeListener("close",f),m()}function m(){c("unpipe"),n.unpipe(e)}return n.on("data",g),function(e,t,n){if("function"==typeof e.prependListener)return e.prependListener(t,n);e._events&&e._events[t]?Array.isArray(e._events[t])?e._events[t].unshift(n):e._events[t]=[n,e._events[t]]:e.on(t,n)}(e,"error",h),e.once("close",f),e.once("finish",p),e.emit("pipe",n),a.flowing||(c("pipe resume"),n.resume()),e},E.prototype.unpipe=function(e){var t=this._readableState,n={hasUnpiped:!1};if(0===t.pipesCount)return this;if(1===t.pipesCount)return e&&e!==t.pipes||(e||(e=t.pipes),t.pipes=null,t.pipesCount=0,t.flowing=!1,e&&e.emit("unpipe",this,n)),this;if(!e){var a=t.pipes,r=t.pipesCount;t.pipes=null,t.pipesCount=0,t.flowing=!1;for(var i=0;i<r;i++)a[i].emit("unpipe",this,{hasUnpiped:!1});return this}var o=U(t.pipes,e);return-1===o||(t.pipes.splice(o,1),t.pipesCount-=1,1===t.pipesCount&&(t.pipes=t.pipes[0]),e.emit("unpipe",this,n)),this},E.prototype.on=function(e,t){var n=o.prototype.on.call(this,e,t),a=this._readableState;return"data"===e?(a.readableListening=this.listenerCount("readable")>0,!1!==a.flowing&&this.resume()):"readable"===e&&(a.endEmitted||a.readableListening||(a.readableListening=a.needReadable=!0,a.flowing=!1,a.emittedReadable=!1,c("on readable",a.length,a.reading),a.length?A(this):a.reading||r.nextTick(C,this))),n},E.prototype.addListener=E.prototype.on,E.prototype.removeListener=function(e,t){var n=o.prototype.removeListener.call(this,e,t);return"readable"===e&&r.nextTick(I,this),n},E.prototype.removeAllListeners=function(e){var t=o.prototype.removeAllListeners.apply(this,arguments);return"readable"!==e&&void 0!==e||r.nextTick(I,this),t},E.prototype.resume=function(){var e=this._readableState;return e.flowing||(c("resume"),e.flowing=!e.readableListening,function(e,t){t.resumeScheduled||(t.resumeScheduled=!0,r.nextTick(O,e,t))}(this,e)),e.paused=!1,this},E.prototype.pause=function(){return c("call pause flowing=%j",this._readableState.flowing),!1!==this._readableState.flowing&&(c("pause"),this._readableState.flowing=!1,this.emit("pause")),this._readableState.paused=!0,this},E.prototype.wrap=function(e){var t=this,n=this._readableState,a=!1;for(var r in e.on("end",(function(){if(c("wrapped end"),n.decoder&&!n.ended){var e=n.decoder.end();e&&e.length&&t.push(e)}t.push(null)})),e.on("data",(function(r){(c("wrapped data"),n.decoder&&(r=n.decoder.write(r)),n.objectMode&&null==r)||(n.objectMode||r&&r.length)&&(t.push(r)||(a=!0,e.pause()))})),e)void 0===this[r]&&"function"==typeof e[r]&&(this[r]=function(t){return function(){return e[t].apply(e,arguments)}}(r));for(var i=0;i<M.length;i++)e.on(M[i],this.emit.bind(this,M[i]));return this._read=function(t){c("wrapped _read",t),a&&(a=!1,e.resume())},this},"function"==typeof Symbol&&(E.prototype[Symbol.asyncIterator]=function(){return void 0===g&&(g=n(72349)),g(this)}),Object.defineProperty(E.prototype,"readableHighWaterMark",{enumerable:!1,get:function(){return this._readableState.highWaterMark}}),Object.defineProperty(E.prototype,"readableBuffer",{enumerable:!1,get:function(){return this._readableState&&this._readableState.buffer}}),Object.defineProperty(E.prototype,"readableFlowing",{enumerable:!1,get:function(){return this._readableState.flowing},set:function(e){this._readableState&&(this._readableState.flowing=e)}}),E._fromList=z,Object.defineProperty(E.prototype,"readableLength",{enumerable:!1,get:function(){return this._readableState.length}}),"function"==typeof Symbol&&(E.from=function(e,t){return void 0===h&&(h=n(5677)),h(E,e,t)})},68133:function(e,t,n){"use strict";e.exports=u;var a=n(66244).q,r=a.ERR_METHOD_NOT_IMPLEMENTED,i=a.ERR_MULTIPLE_CALLBACK,o=a.ERR_TRANSFORM_ALREADY_TRANSFORMING,d=a.ERR_TRANSFORM_WITH_LENGTH_0,s=n(51278);function c(e,t){var n=this._transformState;n.transforming=!1;var a=n.writecb;if(null===a)return this.emit("error",new i);n.writechunk=null,n.writecb=null,null!=t&&this.push(t),a(e);var r=this._readableState;r.reading=!1,(r.needReadable||r.length<r.highWaterMark)&&this._read(r.highWaterMark)}function u(e){if(!(this instanceof u))return new u(e);s.call(this,e),this._transformState={afterTransform:c.bind(this),needTransform:!1,transforming:!1,writecb:null,writechunk:null,writeencoding:null},this._readableState.needReadable=!0,this._readableState.sync=!1,e&&("function"==typeof e.transform&&(this._transform=e.transform),"function"==typeof e.flush&&(this._flush=e.flush)),this.on("prefinish",l)}function l(){var e=this;"function"!=typeof this._flush||this._readableState.destroyed?g(this,null,null):this._flush((function(t,n){g(e,t,n)}))}function g(e,t,n){if(t)return e.emit("error",t);if(null!=n&&e.push(n),e._writableState.length)throw new d;if(e._transformState.transforming)throw new o;return e.push(null)}n(70087)(u,s),u.prototype.push=function(e,t){return this._transformState.needTransform=!1,s.prototype.push.call(this,e,t)},u.prototype._transform=function(e,t,n){n(new r("_transform()"))},u.prototype._write=function(e,t,n){var a=this._transformState;if(a.writecb=n,a.writechunk=e,a.writeencoding=t,!a.transforming){var r=this._readableState;(a.needTransform||r.needReadable||r.length<r.highWaterMark)&&this._read(r.highWaterMark)}},u.prototype._read=function(e){var t=this._transformState;null===t.writechunk||t.transforming?t.needTransform=!0:(t.transforming=!0,this._transform(t.writechunk,t.writeencoding,t.afterTransform))},u.prototype._destroy=function(e,t){s.prototype._destroy.call(this,e,(function(e){t(e)}))}},60003:function(e,t,n){"use strict";var a,r=n(27061);function i(e){var t=this;this.next=null,this.entry=null,this.finish=function(){!function(e,t,n){var a=e.entry;e.entry=null;for(;a;){var r=a.callback;t.pendingcb--,r(n),a=a.next}t.corkedRequestsFree.next=e}(t,e)}}e.exports=E,E.WritableState=x;var o={deprecate:n(17451)},d=n(56284),s=n(30816).Buffer,c=(void 0!==n.g?n.g:"undefined"!=typeof window?window:"undefined"!=typeof self?self:{}).Uint8Array||function(){};var u,l=n(94602),g=n(53189).getHighWaterMark,h=n(66244).q,f=h.ERR_INVALID_ARG_TYPE,p=h.ERR_METHOD_NOT_IMPLEMENTED,m=h.ERR_MULTIPLE_CALLBACK,R=h.ERR_STREAM_CANNOT_PIPE,b=h.ERR_STREAM_DESTROYED,y=h.ERR_STREAM_NULL_VALUES,v=h.ERR_STREAM_WRITE_AFTER_END,_=h.ERR_UNKNOWN_ENCODING,w=l.errorOrDestroy;function M(){}function x(e,t,o){a=a||n(51278),e=e||{},"boolean"!=typeof o&&(o=t instanceof a),this.objectMode=!!e.objectMode,o&&(this.objectMode=this.objectMode||!!e.writableObjectMode),this.highWaterMark=g(this,e,"writableHighWaterMark",o),this.finalCalled=!1,this.needDrain=!1,this.ending=!1,this.ended=!1,this.finished=!1,this.destroyed=!1;var d=!1===e.decodeStrings;this.decodeStrings=!d,this.defaultEncoding=e.defaultEncoding||"utf8",this.length=0,this.writing=!1,this.corked=0,this.sync=!0,this.bufferProcessing=!1,this.onwrite=function(e){!function(e,t){var n=e._writableState,a=n.sync,i=n.writecb;if("function"!=typeof i)throw new m;if(function(e){e.writing=!1,e.writecb=null,e.length-=e.writelen,e.writelen=0}(n),t)!function(e,t,n,a,i){--t.pendingcb,n?(r.nextTick(i,a),r.nextTick(j,e,t),e._writableState.errorEmitted=!0,w(e,a)):(i(a),e._writableState.errorEmitted=!0,w(e,a),j(e,t))}(e,n,a,t,i);else{var o=D(n)||e.destroyed;o||n.corked||n.bufferProcessing||!n.bufferedRequest||N(e,n),a?r.nextTick(k,e,n,o,i):k(e,n,o,i)}}(t,e)},this.writecb=null,this.writelen=0,this.bufferedRequest=null,this.lastBufferedRequest=null,this.pendingcb=0,this.prefinished=!1,this.errorEmitted=!1,this.emitClose=!1!==e.emitClose,this.autoDestroy=!!e.autoDestroy,this.bufferedRequestCount=0,this.corkedRequestsFree=new i(this)}function E(e){var t=this instanceof(a=a||n(51278));if(!t&&!u.call(E,this))return new E(e);this._writableState=new x(e,this,t),this.writable=!0,e&&("function"==typeof e.write&&(this._write=e.write),"function"==typeof e.writev&&(this._writev=e.writev),"function"==typeof e.destroy&&(this._destroy=e.destroy),"function"==typeof e.final&&(this._final=e.final)),d.call(this)}function S(e,t,n,a,r,i,o){t.writelen=a,t.writecb=o,t.writing=!0,t.sync=!0,t.destroyed?t.onwrite(new b("write")):n?e._writev(r,t.onwrite):e._write(r,i,t.onwrite),t.sync=!1}function k(e,t,n,a){n||function(e,t){0===t.length&&t.needDrain&&(t.needDrain=!1,e.emit("drain"))}(e,t),t.pendingcb--,a(),j(e,t)}function N(e,t){t.bufferProcessing=!0;var n=t.bufferedRequest;if(e._writev&&n&&n.next){var a=t.bufferedRequestCount,r=new Array(a),o=t.corkedRequestsFree;o.entry=n;for(var d=0,s=!0;n;)r[d]=n,n.isBuf||(s=!1),n=n.next,d+=1;r.allBuffers=s,S(e,t,!0,t.length,r,"",o.finish),t.pendingcb++,t.lastBufferedRequest=null,o.next?(t.corkedRequestsFree=o.next,o.next=null):t.corkedRequestsFree=new i(t),t.bufferedRequestCount=0}else{for(;n;){var c=n.chunk,u=n.encoding,l=n.callback;if(S(e,t,!1,t.objectMode?1:c.length,c,u,l),n=n.next,t.bufferedRequestCount--,t.writing)break}null===n&&(t.lastBufferedRequest=null)}t.bufferedRequest=n,t.bufferProcessing=!1}function D(e){return e.ending&&0===e.length&&null===e.bufferedRequest&&!e.finished&&!e.writing}function A(e,t){e._final((function(n){t.pendingcb--,n&&w(e,n),t.prefinished=!0,e.emit("prefinish"),j(e,t)}))}function j(e,t){var n=D(t);if(n&&(function(e,t){t.prefinished||t.finalCalled||("function"!=typeof e._final||t.destroyed?(t.prefinished=!0,e.emit("prefinish")):(t.pendingcb++,t.finalCalled=!0,r.nextTick(A,e,t)))}(e,t),0===t.pendingcb&&(t.finished=!0,e.emit("finish"),t.autoDestroy))){var a=e._readableState;(!a||a.autoDestroy&&a.endEmitted)&&e.destroy()}return n}n(70087)(E,d),x.prototype.getBuffer=function(){for(var e=this.bufferedRequest,t=[];e;)t.push(e),e=e.next;return t},function(){try{Object.defineProperty(x.prototype,"buffer",{get:o.deprecate((function(){return this.getBuffer()}),"_writableState.buffer is deprecated. Use _writableState.getBuffer instead.","DEP0003")})}catch(e){}}(),"function"==typeof Symbol&&Symbol.hasInstance&&"function"==typeof Function.prototype[Symbol.hasInstance]?(u=Function.prototype[Symbol.hasInstance],Object.defineProperty(E,Symbol.hasInstance,{value:function(e){return!!u.call(this,e)||this===E&&(e&&e._writableState instanceof x)}})):u=function(e){return e instanceof this},E.prototype.pipe=function(){w(this,new R)},E.prototype.write=function(e,t,n){var a,i=this._writableState,o=!1,d=!i.objectMode&&(a=e,s.isBuffer(a)||a instanceof c);return d&&!s.isBuffer(e)&&(e=function(e){return s.from(e)}(e)),"function"==typeof t&&(n=t,t=null),d?t="buffer":t||(t=i.defaultEncoding),"function"!=typeof n&&(n=M),i.ending?function(e,t){var n=new v;w(e,n),r.nextTick(t,n)}(this,n):(d||function(e,t,n,a){var i;return null===n?i=new y:"string"==typeof n||t.objectMode||(i=new f("chunk",["string","Buffer"],n)),!i||(w(e,i),r.nextTick(a,i),!1)}(this,i,e,n))&&(i.pendingcb++,o=function(e,t,n,a,r,i){if(!n){var o=function(e,t,n){e.objectMode||!1===e.decodeStrings||"string"!=typeof t||(t=s.from(t,n));return t}(t,a,r);a!==o&&(n=!0,r="buffer",a=o)}var d=t.objectMode?1:a.length;t.length+=d;var c=t.length<t.highWaterMark;c||(t.needDrain=!0);if(t.writing||t.corked){var u=t.lastBufferedRequest;t.lastBufferedRequest={chunk:a,encoding:r,isBuf:n,callback:i,next:null},u?u.next=t.lastBufferedRequest:t.bufferedRequest=t.lastBufferedRequest,t.bufferedRequestCount+=1}else S(e,t,!1,d,a,r,i);return c}(this,i,d,e,t,n)),o},E.prototype.cork=function(){this._writableState.corked++},E.prototype.uncork=function(){var e=this._writableState;e.corked&&(e.corked--,e.writing||e.corked||e.bufferProcessing||!e.bufferedRequest||N(this,e))},E.prototype.setDefaultEncoding=function(e){if("string"==typeof e&&(e=e.toLowerCase()),!(["hex","utf8","utf-8","ascii","binary","base64","ucs2","ucs-2","utf16le","utf-16le","raw"].indexOf((e+"").toLowerCase())>-1))throw new _(e);return this._writableState.defaultEncoding=e,this},Object.defineProperty(E.prototype,"writableBuffer",{enumerable:!1,get:function(){return this._writableState&&this._writableState.getBuffer()}}),Object.defineProperty(E.prototype,"writableHighWaterMark",{enumerable:!1,get:function(){return this._writableState.highWaterMark}}),E.prototype._write=function(e,t,n){n(new p("_write()"))},E.prototype._writev=null,E.prototype.end=function(e,t,n){var a=this._writableState;return"function"==typeof e?(n=e,e=null,t=null):"function"==typeof t&&(n=t,t=null),null!=e&&this.write(e,t),a.corked&&(a.corked=1,this.uncork()),a.ending||function(e,t,n){t.ending=!0,j(e,t),n&&(t.finished?r.nextTick(n):e.once("finish",n));t.ended=!0,e.writable=!1}(this,a,n),this},Object.defineProperty(E.prototype,"writableLength",{enumerable:!1,get:function(){return this._writableState.length}}),Object.defineProperty(E.prototype,"destroyed",{enumerable:!1,get:function(){return void 0!==this._writableState&&this._writableState.destroyed},set:function(e){this._writableState&&(this._writableState.destroyed=e)}}),E.prototype.destroy=l.destroy,E.prototype._undestroy=l.undestroy,E.prototype._destroy=function(e,t){t(e)}},72349:function(e,t,n){"use strict";var a,r=n(27061);function i(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var a=n.call(e,t||"default");if("object"!=typeof a)return a;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var o=n(53311),d=Symbol("lastResolve"),s=Symbol("lastReject"),c=Symbol("error"),u=Symbol("ended"),l=Symbol("lastPromise"),g=Symbol("handlePromise"),h=Symbol("stream");function f(e,t){return{value:e,done:t}}function p(e){var t=e[d];if(null!==t){var n=e[h].read();null!==n&&(e[l]=null,e[d]=null,e[s]=null,t(f(n,!1)))}}function m(e){r.nextTick(p,e)}var R=Object.getPrototypeOf((function(){})),b=Object.setPrototypeOf((i(a={get stream(){return this[h]},next:function(){var e=this,t=this[c];if(null!==t)return Promise.reject(t);if(this[u])return Promise.resolve(f(void 0,!0));if(this[h].destroyed)return new Promise((function(t,n){r.nextTick((function(){e[c]?n(e[c]):t(f(void 0,!0))}))}));var n,a=this[l];if(a)n=new Promise(function(e,t){return function(n,a){e.then((function(){t[u]?n(f(void 0,!0)):t[g](n,a)}),a)}}(a,this));else{var i=this[h].read();if(null!==i)return Promise.resolve(f(i,!1));n=new Promise(this[g])}return this[l]=n,n}},Symbol.asyncIterator,(function(){return this})),i(a,"return",(function(){var e=this;return new Promise((function(t,n){e[h].destroy(null,(function(e){e?n(e):t(f(void 0,!0))}))}))})),a),R);e.exports=function(e){var t,n=Object.create(b,(i(t={},h,{value:e,writable:!0}),i(t,d,{value:null,writable:!0}),i(t,s,{value:null,writable:!0}),i(t,c,{value:null,writable:!0}),i(t,u,{value:e._readableState.endEmitted,writable:!0}),i(t,g,{value:function(e,t){var a=n[h].read();a?(n[l]=null,n[d]=null,n[s]=null,e(f(a,!1))):(n[d]=e,n[s]=t)},writable:!0}),t));return n[l]=null,o(e,(function(e){if(e&&"ERR_STREAM_PREMATURE_CLOSE"!==e.code){var t=n[s];return null!==t&&(n[l]=null,n[d]=null,n[s]=null,t(e)),void(n[c]=e)}var a=n[d];null!==a&&(n[l]=null,n[d]=null,n[s]=null,a(f(void 0,!0))),n[u]=!0})),e.on("readable",m.bind(null,n)),n}},80077:function(e,t,n){"use strict";function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function r(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function i(e,t,n){return(t=d(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,d(a.key),a)}}function d(e){var t=function(e,t){if("object"!=typeof e||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var a=n.call(e,t||"default");if("object"!=typeof a)return a;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:String(t)}var s=n(30816).Buffer,c=n(84215).inspect,u=c&&c.custom||"inspect";e.exports=function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.head=null,this.tail=null,this.length=0}var t,n,a;return t=e,(n=[{key:"push",value:function(e){var t={data:e,next:null};this.length>0?this.tail.next=t:this.head=t,this.tail=t,++this.length}},{key:"unshift",value:function(e){var t={data:e,next:this.head};0===this.length&&(this.tail=t),this.head=t,++this.length}},{key:"shift",value:function(){if(0!==this.length){var e=this.head.data;return 1===this.length?this.head=this.tail=null:this.head=this.head.next,--this.length,e}}},{key:"clear",value:function(){this.head=this.tail=null,this.length=0}},{key:"join",value:function(e){if(0===this.length)return"";for(var t=this.head,n=""+t.data;t=t.next;)n+=e+t.data;return n}},{key:"concat",value:function(e){if(0===this.length)return s.alloc(0);for(var t,n,a,r=s.allocUnsafe(e>>>0),i=this.head,o=0;i;)t=i.data,n=r,a=o,s.prototype.copy.call(t,n,a),o+=i.data.length,i=i.next;return r}},{key:"consume",value:function(e,t){var n;return e<this.head.data.length?(n=this.head.data.slice(0,e),this.head.data=this.head.data.slice(e)):n=e===this.head.data.length?this.shift():t?this._getString(e):this._getBuffer(e),n}},{key:"first",value:function(){return this.head.data}},{key:"_getString",value:function(e){var t=this.head,n=1,a=t.data;for(e-=a.length;t=t.next;){var r=t.data,i=e>r.length?r.length:e;if(i===r.length?a+=r:a+=r.slice(0,e),0==(e-=i)){i===r.length?(++n,t.next?this.head=t.next:this.head=this.tail=null):(this.head=t,t.data=r.slice(i));break}++n}return this.length-=n,a}},{key:"_getBuffer",value:function(e){var t=s.allocUnsafe(e),n=this.head,a=1;for(n.data.copy(t),e-=n.data.length;n=n.next;){var r=n.data,i=e>r.length?r.length:e;if(r.copy(t,t.length-e,0,i),0==(e-=i)){i===r.length?(++a,n.next?this.head=n.next:this.head=this.tail=null):(this.head=n,n.data=r.slice(i));break}++a}return this.length-=a,t}},{key:u,value:function(e,t){return c(this,r(r({},t),{},{depth:0,customInspect:!1}))}}])&&o(t.prototype,n),a&&o(t,a),Object.defineProperty(t,"prototype",{writable:!1}),e}()},94602:function(e,t,n){"use strict";var a=n(27061);function r(e,t){o(e,t),i(e)}function i(e){e._writableState&&!e._writableState.emitClose||e._readableState&&!e._readableState.emitClose||e.emit("close")}function o(e,t){e.emit("error",t)}e.exports={destroy:function(e,t){var n=this,d=this._readableState&&this._readableState.destroyed,s=this._writableState&&this._writableState.destroyed;return d||s?(t?t(e):e&&(this._writableState?this._writableState.errorEmitted||(this._writableState.errorEmitted=!0,a.nextTick(o,this,e)):a.nextTick(o,this,e)),this):(this._readableState&&(this._readableState.destroyed=!0),this._writableState&&(this._writableState.destroyed=!0),this._destroy(e||null,(function(e){!t&&e?n._writableState?n._writableState.errorEmitted?a.nextTick(i,n):(n._writableState.errorEmitted=!0,a.nextTick(r,n,e)):a.nextTick(r,n,e):t?(a.nextTick(i,n),t(e)):a.nextTick(i,n)})),this)},undestroy:function(){this._readableState&&(this._readableState.destroyed=!1,this._readableState.reading=!1,this._readableState.ended=!1,this._readableState.endEmitted=!1),this._writableState&&(this._writableState.destroyed=!1,this._writableState.ended=!1,this._writableState.ending=!1,this._writableState.finalCalled=!1,this._writableState.prefinished=!1,this._writableState.finished=!1,this._writableState.errorEmitted=!1)},errorOrDestroy:function(e,t){var n=e._readableState,a=e._writableState;n&&n.autoDestroy||a&&a.autoDestroy?e.destroy(t):e.emit("error",t)}}},53311:function(e,t,n){"use strict";var a=n(66244).q.ERR_STREAM_PREMATURE_CLOSE;function r(){}e.exports=function e(t,n,i){if("function"==typeof n)return e(t,null,n);n||(n={}),i=function(e){var t=!1;return function(){if(!t){t=!0;for(var n=arguments.length,a=new Array(n),r=0;r<n;r++)a[r]=arguments[r];e.apply(this,a)}}}(i||r);var o=n.readable||!1!==n.readable&&t.readable,d=n.writable||!1!==n.writable&&t.writable,s=function(){t.writable||u()},c=t._writableState&&t._writableState.finished,u=function(){d=!1,c=!0,o||i.call(t)},l=t._readableState&&t._readableState.endEmitted,g=function(){o=!1,l=!0,d||i.call(t)},h=function(e){i.call(t,e)},f=function(){var e;return o&&!l?(t._readableState&&t._readableState.ended||(e=new a),i.call(t,e)):d&&!c?(t._writableState&&t._writableState.ended||(e=new a),i.call(t,e)):void 0},p=function(){t.req.on("finish",u)};return!function(e){return e.setHeader&&"function"==typeof e.abort}(t)?d&&!t._writableState&&(t.on("end",s),t.on("close",s)):(t.on("complete",u),t.on("abort",f),t.req?p():t.on("request",p)),t.on("end",g),t.on("finish",u),!1!==n.error&&t.on("error",h),t.on("close",f),function(){t.removeListener("complete",u),t.removeListener("abort",f),t.removeListener("request",p),t.req&&t.req.removeListener("finish",u),t.removeListener("end",s),t.removeListener("close",s),t.removeListener("finish",u),t.removeListener("end",g),t.removeListener("error",h),t.removeListener("close",f)}}},5677:function(e){e.exports=function(){throw new Error("Readable.from is not available in the browser")}},36192:function(e,t,n){"use strict";var a;var r=n(66244).q,i=r.ERR_MISSING_ARGS,o=r.ERR_STREAM_DESTROYED;function d(e){if(e)throw e}function s(e){e()}function c(e,t){return e.pipe(t)}e.exports=function(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];var u,l=function(e){return e.length?"function"!=typeof e[e.length-1]?d:e.pop():d}(t);if(Array.isArray(t[0])&&(t=t[0]),t.length<2)throw new i("streams");var g=t.map((function(e,r){var i=r<t.length-1;return function(e,t,r,i){i=function(e){var t=!1;return function(){t||(t=!0,e.apply(void 0,arguments))}}(i);var d=!1;e.on("close",(function(){d=!0})),void 0===a&&(a=n(53311)),a(e,{readable:t,writable:r},(function(e){if(e)return i(e);d=!0,i()}));var s=!1;return function(t){if(!d&&!s)return s=!0,function(e){return e.setHeader&&"function"==typeof e.abort}(e)?e.abort():"function"==typeof e.destroy?e.destroy():void i(t||new o("pipe"))}}(e,i,r>0,(function(e){u||(u=e),e&&g.forEach(s),i||(g.forEach(s),l(u))}))}));return t.reduce(c)}},53189:function(e,t,n){"use strict";var a=n(66244).q.ERR_INVALID_OPT_VALUE;e.exports={getHighWaterMark:function(e,t,n,r){var i=function(e,t,n){return null!=e.highWaterMark?e.highWaterMark:t?e[n]:null}(t,r,n);if(null!=i){if(!isFinite(i)||Math.floor(i)!==i||i<0)throw new a(r?n:"highWaterMark",i);return Math.floor(i)}return e.objectMode?16:16384}}},56284:function(e,t,n){e.exports=n(50343).EventEmitter},79649:function(e,t,n){(t=e.exports=n(84581)).Stream=t,t.Readable=t,t.Writable=n(60003),t.Duplex=n(51278),t.Transform=n(68133),t.PassThrough=n(48825),t.finished=n(53311),t.pipeline=n(36192)},57752:function(e){e.exports=function(e,t){for(var n=Math.min(e.length,t.length),a=new Buffer(n),r=0;r<n;++r)a[r]=e[r]^t[r];return a}},30816:function(e,t,n){"use strict";var a=n(24782),r=n(78898),i=n(55182);function o(){return s.TYPED_ARRAY_SUPPORT?2147483647:1073741823}function d(e,t){if(o()<t)throw new RangeError("Invalid typed array length");return s.TYPED_ARRAY_SUPPORT?(e=new Uint8Array(t)).__proto__=s.prototype:(null===e&&(e=new s(t)),e.length=t),e}function s(e,t,n){if(!(s.TYPED_ARRAY_SUPPORT||this instanceof s))return new s(e,t,n);if("number"==typeof e){if("string"==typeof t)throw new Error("If encoding is specified then the first argument must be a string");return l(this,e)}return c(this,e,t,n)}function c(e,t,n,a){if("number"==typeof t)throw new TypeError('"value" argument must not be a number');return"undefined"!=typeof ArrayBuffer&&t instanceof ArrayBuffer?function(e,t,n,a){if(t.byteLength,n<0||t.byteLength<n)throw new RangeError("'offset' is out of bounds");if(t.byteLength<n+(a||0))throw new RangeError("'length' is out of bounds");t=void 0===n&&void 0===a?new Uint8Array(t):void 0===a?new Uint8Array(t,n):new Uint8Array(t,n,a);s.TYPED_ARRAY_SUPPORT?(e=t).__proto__=s.prototype:e=g(e,t);return e}(e,t,n,a):"string"==typeof t?function(e,t,n){"string"==typeof n&&""!==n||(n="utf8");if(!s.isEncoding(n))throw new TypeError('"encoding" must be a valid string encoding');var a=0|f(t,n);e=d(e,a);var r=e.write(t,n);r!==a&&(e=e.slice(0,r));return e}(e,t,n):function(e,t){if(s.isBuffer(t)){var n=0|h(t.length);return 0===(e=d(e,n)).length||t.copy(e,0,0,n),e}if(t){if("undefined"!=typeof ArrayBuffer&&t.buffer instanceof ArrayBuffer||"length"in t)return"number"!=typeof t.length||(a=t.length)!=a?d(e,0):g(e,t);if("Buffer"===t.type&&i(t.data))return g(e,t.data)}var a;throw new TypeError("First argument must be a string, Buffer, ArrayBuffer, Array, or array-like object.")}(e,t)}function u(e){if("number"!=typeof e)throw new TypeError('"size" argument must be a number');if(e<0)throw new RangeError('"size" argument must not be negative')}function l(e,t){if(u(t),e=d(e,t<0?0:0|h(t)),!s.TYPED_ARRAY_SUPPORT)for(var n=0;n<t;++n)e[n]=0;return e}function g(e,t){var n=t.length<0?0:0|h(t.length);e=d(e,n);for(var a=0;a<n;a+=1)e[a]=255&t[a];return e}function h(e){if(e>=o())throw new RangeError("Attempt to allocate Buffer larger than maximum size: 0x"+o().toString(16)+" bytes");return 0|e}function f(e,t){if(s.isBuffer(e))return e.length;if("undefined"!=typeof ArrayBuffer&&"function"==typeof ArrayBuffer.isView&&(ArrayBuffer.isView(e)||e instanceof ArrayBuffer))return e.byteLength;"string"!=typeof e&&(e=""+e);var n=e.length;if(0===n)return 0;for(var a=!1;;)switch(t){case"ascii":case"latin1":case"binary":return n;case"utf8":case"utf-8":case void 0:return U(e).length;case"ucs2":case"ucs-2":case"utf16le":case"utf-16le":return 2*n;case"hex":return n>>>1;case"base64":return $(e).length;default:if(a)return U(e).length;t=(""+t).toLowerCase(),a=!0}}function p(e,t,n){var a=!1;if((void 0===t||t<0)&&(t=0),t>this.length)return"";if((void 0===n||n>this.length)&&(n=this.length),n<=0)return"";if((n>>>=0)<=(t>>>=0))return"";for(e||(e="utf8");;)switch(e){case"hex":return A(this,t,n);case"utf8":case"utf-8":return S(this,t,n);case"ascii":return N(this,t,n);case"latin1":case"binary":return D(this,t,n);case"base64":return E(this,t,n);case"ucs2":case"ucs-2":case"utf16le":case"utf-16le":return j(this,t,n);default:if(a)throw new TypeError("Unknown encoding: "+e);e=(e+"").toLowerCase(),a=!0}}function m(e,t,n){var a=e[t];e[t]=e[n],e[n]=a}function R(e,t,n,a,r){if(0===e.length)return-1;if("string"==typeof n?(a=n,n=0):n>2147483647?n=2147483647:n<-2147483648&&(n=-2147483648),n=+n,isNaN(n)&&(n=r?0:e.length-1),n<0&&(n=e.length+n),n>=e.length){if(r)return-1;n=e.length-1}else if(n<0){if(!r)return-1;n=0}if("string"==typeof t&&(t=s.from(t,a)),s.isBuffer(t))return 0===t.length?-1:b(e,t,n,a,r);if("number"==typeof t)return t&=255,s.TYPED_ARRAY_SUPPORT&&"function"==typeof Uint8Array.prototype.indexOf?r?Uint8Array.prototype.indexOf.call(e,t,n):Uint8Array.prototype.lastIndexOf.call(e,t,n):b(e,[t],n,a,r);throw new TypeError("val must be string, number or Buffer")}function b(e,t,n,a,r){var i,o=1,d=e.length,s=t.length;if(void 0!==a&&("ucs2"===(a=String(a).toLowerCase())||"ucs-2"===a||"utf16le"===a||"utf-16le"===a)){if(e.length<2||t.length<2)return-1;o=2,d/=2,s/=2,n/=2}function c(e,t){return 1===o?e[t]:e.readUInt16BE(t*o)}if(r){var u=-1;for(i=n;i<d;i++)if(c(e,i)===c(t,-1===u?0:i-u)){if(-1===u&&(u=i),i-u+1===s)return u*o}else-1!==u&&(i-=i-u),u=-1}else for(n+s>d&&(n=d-s),i=n;i>=0;i--){for(var l=!0,g=0;g<s;g++)if(c(e,i+g)!==c(t,g)){l=!1;break}if(l)return i}return-1}function y(e,t,n,a){n=Number(n)||0;var r=e.length-n;a?(a=Number(a))>r&&(a=r):a=r;var i=t.length;if(i%2!=0)throw new TypeError("Invalid hex string");a>i/2&&(a=i/2);for(var o=0;o<a;++o){var d=parseInt(t.substr(2*o,2),16);if(isNaN(d))return o;e[n+o]=d}return o}function v(e,t,n,a){return H(U(t,e.length-n),e,n,a)}function _(e,t,n,a){return H(function(e){for(var t=[],n=0;n<e.length;++n)t.push(255&e.charCodeAt(n));return t}(t),e,n,a)}function w(e,t,n,a){return _(e,t,n,a)}function M(e,t,n,a){return H($(t),e,n,a)}function x(e,t,n,a){return H(function(e,t){for(var n,a,r,i=[],o=0;o<e.length&&!((t-=2)<0);++o)a=(n=e.charCodeAt(o))>>8,r=n%256,i.push(r),i.push(a);return i}(t,e.length-n),e,n,a)}function E(e,t,n){return 0===t&&n===e.length?a.fromByteArray(e):a.fromByteArray(e.slice(t,n))}function S(e,t,n){n=Math.min(e.length,n);for(var a=[],r=t;r<n;){var i,o,d,s,c=e[r],u=null,l=c>239?4:c>223?3:c>191?2:1;if(r+l<=n)switch(l){case 1:c<128&&(u=c);break;case 2:128==(192&(i=e[r+1]))&&(s=(31&c)<<6|63&i)>127&&(u=s);break;case 3:i=e[r+1],o=e[r+2],128==(192&i)&&128==(192&o)&&(s=(15&c)<<12|(63&i)<<6|63&o)>2047&&(s<55296||s>57343)&&(u=s);break;case 4:i=e[r+1],o=e[r+2],d=e[r+3],128==(192&i)&&128==(192&o)&&128==(192&d)&&(s=(15&c)<<18|(63&i)<<12|(63&o)<<6|63&d)>65535&&s<1114112&&(u=s)}null===u?(u=65533,l=1):u>65535&&(u-=65536,a.push(u>>>10&1023|55296),u=56320|1023&u),a.push(u),r+=l}return function(e){var t=e.length;if(t<=k)return String.fromCharCode.apply(String,e);var n="",a=0;for(;a<t;)n+=String.fromCharCode.apply(String,e.slice(a,a+=k));return n}(a)}t.Buffer=s,t.SlowBuffer=function(e){+e!=e&&(e=0);return s.alloc(+e)},t.INSPECT_MAX_BYTES=50,s.TYPED_ARRAY_SUPPORT=void 0!==n.g.TYPED_ARRAY_SUPPORT?n.g.TYPED_ARRAY_SUPPORT:function(){try{var e=new Uint8Array(1);return e.__proto__={__proto__:Uint8Array.prototype,foo:function(){return 42}},42===e.foo()&&"function"==typeof e.subarray&&0===e.subarray(1,1).byteLength}catch(t){return!1}}(),t.kMaxLength=o(),s.poolSize=8192,s._augment=function(e){return e.__proto__=s.prototype,e},s.from=function(e,t,n){return c(null,e,t,n)},s.TYPED_ARRAY_SUPPORT&&(s.prototype.__proto__=Uint8Array.prototype,s.__proto__=Uint8Array,"undefined"!=typeof Symbol&&Symbol.species&&s[Symbol.species]===s&&Object.defineProperty(s,Symbol.species,{value:null,configurable:!0})),s.alloc=function(e,t,n){return function(e,t,n,a){return u(t),t<=0?d(e,t):void 0!==n?"string"==typeof a?d(e,t).fill(n,a):d(e,t).fill(n):d(e,t)}(null,e,t,n)},s.allocUnsafe=function(e){return l(null,e)},s.allocUnsafeSlow=function(e){return l(null,e)},s.isBuffer=function(e){return!(null==e||!e._isBuffer)},s.compare=function(e,t){if(!s.isBuffer(e)||!s.isBuffer(t))throw new TypeError("Arguments must be Buffers");if(e===t)return 0;for(var n=e.length,a=t.length,r=0,i=Math.min(n,a);r<i;++r)if(e[r]!==t[r]){n=e[r],a=t[r];break}return n<a?-1:a<n?1:0},s.isEncoding=function(e){switch(String(e).toLowerCase()){case"hex":case"utf8":case"utf-8":case"ascii":case"latin1":case"binary":case"base64":case"ucs2":case"ucs-2":case"utf16le":case"utf-16le":return!0;default:return!1}},s.concat=function(e,t){if(!i(e))throw new TypeError('"list" argument must be an Array of Buffers');if(0===e.length)return s.alloc(0);var n;if(void 0===t)for(t=0,n=0;n<e.length;++n)t+=e[n].length;var a=s.allocUnsafe(t),r=0;for(n=0;n<e.length;++n){var o=e[n];if(!s.isBuffer(o))throw new TypeError('"list" argument must be an Array of Buffers');o.copy(a,r),r+=o.length}return a},s.byteLength=f,s.prototype._isBuffer=!0,s.prototype.swap16=function(){var e=this.length;if(e%2!=0)throw new RangeError("Buffer size must be a multiple of 16-bits");for(var t=0;t<e;t+=2)m(this,t,t+1);return this},s.prototype.swap32=function(){var e=this.length;if(e%4!=0)throw new RangeError("Buffer size must be a multiple of 32-bits");for(var t=0;t<e;t+=4)m(this,t,t+3),m(this,t+1,t+2);return this},s.prototype.swap64=function(){var e=this.length;if(e%8!=0)throw new RangeError("Buffer size must be a multiple of 64-bits");for(var t=0;t<e;t+=8)m(this,t,t+7),m(this,t+1,t+6),m(this,t+2,t+5),m(this,t+3,t+4);return this},s.prototype.toString=function(){var e=0|this.length;return 0===e?"":0===arguments.length?S(this,0,e):p.apply(this,arguments)},s.prototype.equals=function(e){if(!s.isBuffer(e))throw new TypeError("Argument must be a Buffer");return this===e||0===s.compare(this,e)},s.prototype.inspect=function(){var e="",n=t.INSPECT_MAX_BYTES;return this.length>0&&(e=this.toString("hex",0,n).match(/.{2}/g).join(" "),this.length>n&&(e+=" ... ")),"<Buffer "+e+">"},s.prototype.compare=function(e,t,n,a,r){if(!s.isBuffer(e))throw new TypeError("Argument must be a Buffer");if(void 0===t&&(t=0),void 0===n&&(n=e?e.length:0),void 0===a&&(a=0),void 0===r&&(r=this.length),t<0||n>e.length||a<0||r>this.length)throw new RangeError("out of range index");if(a>=r&&t>=n)return 0;if(a>=r)return-1;if(t>=n)return 1;if(this===e)return 0;for(var i=(r>>>=0)-(a>>>=0),o=(n>>>=0)-(t>>>=0),d=Math.min(i,o),c=this.slice(a,r),u=e.slice(t,n),l=0;l<d;++l)if(c[l]!==u[l]){i=c[l],o=u[l];break}return i<o?-1:o<i?1:0},s.prototype.includes=function(e,t,n){return-1!==this.indexOf(e,t,n)},s.prototype.indexOf=function(e,t,n){return R(this,e,t,n,!0)},s.prototype.lastIndexOf=function(e,t,n){return R(this,e,t,n,!1)},s.prototype.write=function(e,t,n,a){if(void 0===t)a="utf8",n=this.length,t=0;else if(void 0===n&&"string"==typeof t)a=t,n=this.length,t=0;else{if(!isFinite(t))throw new Error("Buffer.write(string, encoding, offset[, length]) is no longer supported");t|=0,isFinite(n)?(n|=0,void 0===a&&(a="utf8")):(a=n,n=void 0)}var r=this.length-t;if((void 0===n||n>r)&&(n=r),e.length>0&&(n<0||t<0)||t>this.length)throw new RangeError("Attempt to write outside buffer bounds");a||(a="utf8");for(var i=!1;;)switch(a){case"hex":return y(this,e,t,n);case"utf8":case"utf-8":return v(this,e,t,n);case"ascii":return _(this,e,t,n);case"latin1":case"binary":return w(this,e,t,n);case"base64":return M(this,e,t,n);case"ucs2":case"ucs-2":case"utf16le":case"utf-16le":return x(this,e,t,n);default:if(i)throw new TypeError("Unknown encoding: "+a);a=(""+a).toLowerCase(),i=!0}},s.prototype.toJSON=function(){return{type:"Buffer",data:Array.prototype.slice.call(this._arr||this,0)}};var k=4096;function N(e,t,n){var a="";n=Math.min(e.length,n);for(var r=t;r<n;++r)a+=String.fromCharCode(127&e[r]);return a}function D(e,t,n){var a="";n=Math.min(e.length,n);for(var r=t;r<n;++r)a+=String.fromCharCode(e[r]);return a}function A(e,t,n){var a=e.length;(!t||t<0)&&(t=0),(!n||n<0||n>a)&&(n=a);for(var r="",i=t;i<n;++i)r+=F(e[i]);return r}function j(e,t,n){for(var a=e.slice(t,n),r="",i=0;i<a.length;i+=2)r+=String.fromCharCode(a[i]+256*a[i+1]);return r}function T(e,t,n){if(e%1!=0||e<0)throw new RangeError("offset is not uint");if(e+t>n)throw new RangeError("Trying to access beyond buffer length")}function L(e,t,n,a,r,i){if(!s.isBuffer(e))throw new TypeError('"buffer" argument must be a Buffer instance');if(t>r||t<i)throw new RangeError('"value" argument is out of bounds');if(n+a>e.length)throw new RangeError("Index out of range")}function I(e,t,n,a){t<0&&(t=65535+t+1);for(var r=0,i=Math.min(e.length-n,2);r<i;++r)e[n+r]=(t&255<<8*(a?r:1-r))>>>8*(a?r:1-r)}function C(e,t,n,a){t<0&&(t=4294967295+t+1);for(var r=0,i=Math.min(e.length-n,4);r<i;++r)e[n+r]=t>>>8*(a?r:3-r)&255}function O(e,t,n,a,r,i){if(n+a>e.length)throw new RangeError("Index out of range");if(n<0)throw new RangeError("Index out of range")}function P(e,t,n,a,i){return i||O(e,0,n,4),r.write(e,t,n,a,23,4),n+4}function z(e,t,n,a,i){return i||O(e,0,n,8),r.write(e,t,n,a,52,8),n+8}s.prototype.slice=function(e,t){var n,a=this.length;if((e=~~e)<0?(e+=a)<0&&(e=0):e>a&&(e=a),(t=void 0===t?a:~~t)<0?(t+=a)<0&&(t=0):t>a&&(t=a),t<e&&(t=e),s.TYPED_ARRAY_SUPPORT)(n=this.subarray(e,t)).__proto__=s.prototype;else{var r=t-e;n=new s(r,void 0);for(var i=0;i<r;++i)n[i]=this[i+e]}return n},s.prototype.readUIntLE=function(e,t,n){e|=0,t|=0,n||T(e,t,this.length);for(var a=this[e],r=1,i=0;++i<t&&(r*=256);)a+=this[e+i]*r;return a},s.prototype.readUIntBE=function(e,t,n){e|=0,t|=0,n||T(e,t,this.length);for(var a=this[e+--t],r=1;t>0&&(r*=256);)a+=this[e+--t]*r;return a},s.prototype.readUInt8=function(e,t){return t||T(e,1,this.length),this[e]},s.prototype.readUInt16LE=function(e,t){return t||T(e,2,this.length),this[e]|this[e+1]<<8},s.prototype.readUInt16BE=function(e,t){return t||T(e,2,this.length),this[e]<<8|this[e+1]},s.prototype.readUInt32LE=function(e,t){return t||T(e,4,this.length),(this[e]|this[e+1]<<8|this[e+2]<<16)+16777216*this[e+3]},s.prototype.readUInt32BE=function(e,t){return t||T(e,4,this.length),16777216*this[e]+(this[e+1]<<16|this[e+2]<<8|this[e+3])},s.prototype.readIntLE=function(e,t,n){e|=0,t|=0,n||T(e,t,this.length);for(var a=this[e],r=1,i=0;++i<t&&(r*=256);)a+=this[e+i]*r;return a>=(r*=128)&&(a-=Math.pow(2,8*t)),a},s.prototype.readIntBE=function(e,t,n){e|=0,t|=0,n||T(e,t,this.length);for(var a=t,r=1,i=this[e+--a];a>0&&(r*=256);)i+=this[e+--a]*r;return i>=(r*=128)&&(i-=Math.pow(2,8*t)),i},s.prototype.readInt8=function(e,t){return t||T(e,1,this.length),128&this[e]?-1*(255-this[e]+1):this[e]},s.prototype.readInt16LE=function(e,t){t||T(e,2,this.length);var n=this[e]|this[e+1]<<8;return 32768&n?4294901760|n:n},s.prototype.readInt16BE=function(e,t){t||T(e,2,this.length);var n=this[e+1]|this[e]<<8;return 32768&n?4294901760|n:n},s.prototype.readInt32LE=function(e,t){return t||T(e,4,this.length),this[e]|this[e+1]<<8|this[e+2]<<16|this[e+3]<<24},s.prototype.readInt32BE=function(e,t){return t||T(e,4,this.length),this[e]<<24|this[e+1]<<16|this[e+2]<<8|this[e+3]},s.prototype.readFloatLE=function(e,t){return t||T(e,4,this.length),r.read(this,e,!0,23,4)},s.prototype.readFloatBE=function(e,t){return t||T(e,4,this.length),r.read(this,e,!1,23,4)},s.prototype.readDoubleLE=function(e,t){return t||T(e,8,this.length),r.read(this,e,!0,52,8)},s.prototype.readDoubleBE=function(e,t){return t||T(e,8,this.length),r.read(this,e,!1,52,8)},s.prototype.writeUIntLE=function(e,t,n,a){(e=+e,t|=0,n|=0,a)||L(this,e,t,n,Math.pow(2,8*n)-1,0);var r=1,i=0;for(this[t]=255&e;++i<n&&(r*=256);)this[t+i]=e/r&255;return t+n},s.prototype.writeUIntBE=function(e,t,n,a){(e=+e,t|=0,n|=0,a)||L(this,e,t,n,Math.pow(2,8*n)-1,0);var r=n-1,i=1;for(this[t+r]=255&e;--r>=0&&(i*=256);)this[t+r]=e/i&255;return t+n},s.prototype.writeUInt8=function(e,t,n){return e=+e,t|=0,n||L(this,e,t,1,255,0),s.TYPED_ARRAY_SUPPORT||(e=Math.floor(e)),this[t]=255&e,t+1},s.prototype.writeUInt16LE=function(e,t,n){return e=+e,t|=0,n||L(this,e,t,2,65535,0),s.TYPED_ARRAY_SUPPORT?(this[t]=255&e,this[t+1]=e>>>8):I(this,e,t,!0),t+2},s.prototype.writeUInt16BE=function(e,t,n){return e=+e,t|=0,n||L(this,e,t,2,65535,0),s.TYPED_ARRAY_SUPPORT?(this[t]=e>>>8,this[t+1]=255&e):I(this,e,t,!1),t+2},s.prototype.writeUInt32LE=function(e,t,n){return e=+e,t|=0,n||L(this,e,t,4,4294967295,0),s.TYPED_ARRAY_SUPPORT?(this[t+3]=e>>>24,this[t+2]=e>>>16,this[t+1]=e>>>8,this[t]=255&e):C(this,e,t,!0),t+4},s.prototype.writeUInt32BE=function(e,t,n){return e=+e,t|=0,n||L(this,e,t,4,4294967295,0),s.TYPED_ARRAY_SUPPORT?(this[t]=e>>>24,this[t+1]=e>>>16,this[t+2]=e>>>8,this[t+3]=255&e):C(this,e,t,!1),t+4},s.prototype.writeIntLE=function(e,t,n,a){if(e=+e,t|=0,!a){var r=Math.pow(2,8*n-1);L(this,e,t,n,r-1,-r)}var i=0,o=1,d=0;for(this[t]=255&e;++i<n&&(o*=256);)e<0&&0===d&&0!==this[t+i-1]&&(d=1),this[t+i]=(e/o>>0)-d&255;return t+n},s.prototype.writeIntBE=function(e,t,n,a){if(e=+e,t|=0,!a){var r=Math.pow(2,8*n-1);L(this,e,t,n,r-1,-r)}var i=n-1,o=1,d=0;for(this[t+i]=255&e;--i>=0&&(o*=256);)e<0&&0===d&&0!==this[t+i+1]&&(d=1),this[t+i]=(e/o>>0)-d&255;return t+n},s.prototype.writeInt8=function(e,t,n){return e=+e,t|=0,n||L(this,e,t,1,127,-128),s.TYPED_ARRAY_SUPPORT||(e=Math.floor(e)),e<0&&(e=255+e+1),this[t]=255&e,t+1},s.prototype.writeInt16LE=function(e,t,n){return e=+e,t|=0,n||L(this,e,t,2,32767,-32768),s.TYPED_ARRAY_SUPPORT?(this[t]=255&e,this[t+1]=e>>>8):I(this,e,t,!0),t+2},s.prototype.writeInt16BE=function(e,t,n){return e=+e,t|=0,n||L(this,e,t,2,32767,-32768),s.TYPED_ARRAY_SUPPORT?(this[t]=e>>>8,this[t+1]=255&e):I(this,e,t,!1),t+2},s.prototype.writeInt32LE=function(e,t,n){return e=+e,t|=0,n||L(this,e,t,4,2147483647,-2147483648),s.TYPED_ARRAY_SUPPORT?(this[t]=255&e,this[t+1]=e>>>8,this[t+2]=e>>>16,this[t+3]=e>>>24):C(this,e,t,!0),t+4},s.prototype.writeInt32BE=function(e,t,n){return e=+e,t|=0,n||L(this,e,t,4,2147483647,-2147483648),e<0&&(e=4294967295+e+1),s.TYPED_ARRAY_SUPPORT?(this[t]=e>>>24,this[t+1]=e>>>16,this[t+2]=e>>>8,this[t+3]=255&e):C(this,e,t,!1),t+4},s.prototype.writeFloatLE=function(e,t,n){return P(this,e,t,!0,n)},s.prototype.writeFloatBE=function(e,t,n){return P(this,e,t,!1,n)},s.prototype.writeDoubleLE=function(e,t,n){return z(this,e,t,!0,n)},s.prototype.writeDoubleBE=function(e,t,n){return z(this,e,t,!1,n)},s.prototype.copy=function(e,t,n,a){if(n||(n=0),a||0===a||(a=this.length),t>=e.length&&(t=e.length),t||(t=0),a>0&&a<n&&(a=n),a===n)return 0;if(0===e.length||0===this.length)return 0;if(t<0)throw new RangeError("targetStart out of bounds");if(n<0||n>=this.length)throw new RangeError("sourceStart out of bounds");if(a<0)throw new RangeError("sourceEnd out of bounds");a>this.length&&(a=this.length),e.length-t<a-n&&(a=e.length-t+n);var r,i=a-n;if(this===e&&n<t&&t<a)for(r=i-1;r>=0;--r)e[r+t]=this[r+n];else if(i<1e3||!s.TYPED_ARRAY_SUPPORT)for(r=0;r<i;++r)e[r+t]=this[r+n];else Uint8Array.prototype.set.call(e,this.subarray(n,n+i),t);return i},s.prototype.fill=function(e,t,n,a){if("string"==typeof e){if("string"==typeof t?(a=t,t=0,n=this.length):"string"==typeof n&&(a=n,n=this.length),1===e.length){var r=e.charCodeAt(0);r<256&&(e=r)}if(void 0!==a&&"string"!=typeof a)throw new TypeError("encoding must be a string");if("string"==typeof a&&!s.isEncoding(a))throw new TypeError("Unknown encoding: "+a)}else"number"==typeof e&&(e&=255);if(t<0||this.length<t||this.length<n)throw new RangeError("Out of range index");if(n<=t)return this;var i;if(t>>>=0,n=void 0===n?this.length:n>>>0,e||(e=0),"number"==typeof e)for(i=t;i<n;++i)this[i]=e;else{var o=s.isBuffer(e)?e:U(new s(e,a).toString()),d=o.length;for(i=0;i<n-t;++i)this[i+t]=o[i%d]}return this};var B=/[^+\/0-9A-Za-z-_]/g;function F(e){return e<16?"0"+e.toString(16):e.toString(16)}function U(e,t){var n;t=t||1/0;for(var a=e.length,r=null,i=[],o=0;o<a;++o){if((n=e.charCodeAt(o))>55295&&n<57344){if(!r){if(n>56319){(t-=3)>-1&&i.push(239,191,189);continue}if(o+1===a){(t-=3)>-1&&i.push(239,191,189);continue}r=n;continue}if(n<56320){(t-=3)>-1&&i.push(239,191,189),r=n;continue}n=65536+(r-55296<<10|n-56320)}else r&&(t-=3)>-1&&i.push(239,191,189);if(r=null,n<128){if((t-=1)<0)break;i.push(n)}else if(n<2048){if((t-=2)<0)break;i.push(n>>6|192,63&n|128)}else if(n<65536){if((t-=3)<0)break;i.push(n>>12|224,n>>6&63|128,63&n|128)}else{if(!(n<1114112))throw new Error("Invalid code point");if((t-=4)<0)break;i.push(n>>18|240,n>>12&63|128,n>>6&63|128,63&n|128)}}return i}function $(e){return a.toByteArray(function(e){if((e=function(e){return e.trim?e.trim():e.replace(/^\s+|\s+$/g,"")}(e).replace(B,"")).length<2)return"";for(;e.length%4!=0;)e+="=";return e}(e))}function H(e,t,n,a){for(var r=0;r<a&&!(r+n>=t.length||r>=e.length);++r)t[r+n]=e[r];return r}},75479:function(e,t,n){"use strict";const a=n(48854),{stdout:r,stderr:i}=n(37392),{stringReplaceAll:o,stringEncaseCRLFWithFirstIndex:d}=n(49615),{isArray:s}=Array,c=["ansi","ansi","ansi256","ansi16m"],u=Object.create(null);class l{constructor(e){return g(e)}}const g=e=>{const t={};return((e,t={})=>{if(t.level&&!(Number.isInteger(t.level)&&t.level>=0&&t.level<=3))throw new Error("The `level` option should be an integer from 0 to 3");const n=r?r.level:0;e.level=void 0===t.level?n:t.level})(t,e),t.template=(...e)=>v(t.template,...e),Object.setPrototypeOf(t,h.prototype),Object.setPrototypeOf(t.template,t),t.template.constructor=()=>{throw new Error("`chalk.constructor()` is deprecated. Use `new chalk.Instance()` instead.")},t.template.Instance=l,t.template};function h(e){return g(e)}for(const[w,M]of Object.entries(a))u[w]={get(){const e=R(this,m(M.open,M.close,this._styler),this._isEmpty);return Object.defineProperty(this,w,{value:e}),e}};u.visible={get(){const e=R(this,this._styler,!0);return Object.defineProperty(this,"visible",{value:e}),e}};const f=["rgb","hex","keyword","hsl","hsv","hwb","ansi","ansi256"];for(const w of f)u[w]={get(){const{level:e}=this;return function(...t){const n=m(a.color[c[e]][w](...t),a.color.close,this._styler);return R(this,n,this._isEmpty)}}};for(const w of f){u["bg"+w[0].toUpperCase()+w.slice(1)]={get(){const{level:e}=this;return function(...t){const n=m(a.bgColor[c[e]][w](...t),a.bgColor.close,this._styler);return R(this,n,this._isEmpty)}}}}const p=Object.defineProperties((()=>{}),{...u,level:{enumerable:!0,get(){return this._generator.level},set(e){this._generator.level=e}}}),m=(e,t,n)=>{let a,r;return void 0===n?(a=e,r=t):(a=n.openAll+e,r=t+n.closeAll),{open:e,close:t,openAll:a,closeAll:r,parent:n}},R=(e,t,n)=>{const a=(...e)=>s(e[0])&&s(e[0].raw)?b(a,v(a,...e)):b(a,1===e.length?""+e[0]:e.join(" "));return Object.setPrototypeOf(a,p),a._generator=e,a._styler=t,a._isEmpty=n,a},b=(e,t)=>{if(e.level<=0||!t)return e._isEmpty?"":t;let n=e._styler;if(void 0===n)return t;const{openAll:a,closeAll:r}=n;if(-1!==t.indexOf(""))for(;void 0!==n;)t=o(t,n.close,n.open),n=n.parent;const i=t.indexOf("\n");return-1!==i&&(t=d(t,r,a,i)),a+t+r};let y;const v=(e,...t)=>{const[a]=t;if(!s(a)||!s(a.raw))return t.join(" ");const r=t.slice(1),i=[a.raw[0]];for(let n=1;n<a.length;n++)i.push(String(r[n-1]).replace(/[{}\\]/g,"\\$&"),String(a.raw[n]));return void 0===y&&(y=n(81799)),y(e,i.join(""))};Object.defineProperties(h.prototype,u);const _=h();_.supportsColor=r,_.stderr=h({level:i?i.level:0}),_.stderr.supportsColor=i,e.exports=_},81799:function(e){"use strict";const t=/(?:\\(u(?:[a-f\d]{4}|\{[a-f\d]{1,6}\})|x[a-f\d]{2}|.))|(?:\{(~)?(\w+(?:\([^)]*\))?(?:\.\w+(?:\([^)]*\))?)*)(?:[ \t]|(?=\r?\n)))|(\})|((?:.|[\r\n\f])+?)/gi,n=/(?:^|\.)(\w+)(?:\(([^)]*)\))?/g,a=/^(['"])((?:\\.|(?!\1)[^\\])*)\1$/,r=/\\(u(?:[a-f\d]{4}|{[a-f\d]{1,6}})|x[a-f\d]{2}|.)|([^\\])/gi,i=new Map([["n","\n"],["r","\r"],["t","\t"],["b","\b"],["f","\f"],["v","\v"],["0","\0"],["\\","\\"],["e",""],["a",""]]);function o(e){const t="u"===e[0],n="{"===e[1];return t&&!n&&5===e.length||"x"===e[0]&&3===e.length?String.fromCharCode(parseInt(e.slice(1),16)):t&&n?String.fromCodePoint(parseInt(e.slice(2,-1),16)):i.get(e)||e}function d(e,t){const n=[],i=t.trim().split(/\s*,\s*/g);let d;for(const s of i){const t=Number(s);if(Number.isNaN(t)){if(!(d=s.match(a)))throw new Error(`Invalid Chalk template style argument: ${s} (in style '${e}')`);n.push(d[2].replace(r,((e,t,n)=>t?o(t):n)))}else n.push(t)}return n}function s(e){n.lastIndex=0;const t=[];let a;for(;null!==(a=n.exec(e));){const e=a[1];if(a[2]){const n=d(e,a[2]);t.push([e].concat(n))}else t.push([e])}return t}function c(e,t){const n={};for(const r of t)for(const e of r.styles)n[e[0]]=r.inverse?null:e.slice(1);let a=e;for(const[r,i]of Object.entries(n))if(Array.isArray(i)){if(!(r in a))throw new Error(`Unknown Chalk style: ${r}`);a=i.length>0?a[r](...i):a[r]}return a}e.exports=(e,n)=>{const a=[],r=[];let i=[];if(n.replace(t,((t,n,d,u,l,g)=>{if(n)i.push(o(n));else if(u){const t=i.join("");i=[],r.push(0===a.length?t:c(e,a)(t)),a.push({inverse:d,styles:s(u)})}else if(l){if(0===a.length)throw new Error("Found extraneous } in Chalk template literal");r.push(c(e,a)(i.join(""))),i=[],a.pop()}else i.push(g)})),r.push(i.join("")),a.length>0){const e=`Chalk template literal is missing ${a.length} closing bracket${1===a.length?"":"s"} (\`}\`)`;throw new Error(e)}return r.join("")}},49615:function(e){"use strict";e.exports={stringReplaceAll:(e,t,n)=>{let a=e.indexOf(t);if(-1===a)return e;const r=t.length;let i=0,o="";do{o+=e.substr(i,a-i)+t+n,i=a+r,a=e.indexOf(t,i)}while(-1!==a);return o+=e.substr(i),o},stringEncaseCRLFWithFirstIndex:(e,t,n,a)=>{let r=0,i="";do{const o="\r"===e[a-1];i+=e.substr(r,(o?a-1:a)-r)+t+(o?"\r\n":"\n")+n,r=a+1,a=e.indexOf("\n",r)}while(-1!==a);return i+=e.substr(r),i}}},73081:function(e,t,n){var a=n(27172).Buffer,r=n(40512).Transform,i=n(34361).s;function o(e){r.call(this),this.hashMode="string"==typeof e,this.hashMode?this[e]=this._finalOrDigest:this.final=this._finalOrDigest,this._final&&(this.__final=this._final,this._final=null),this._decoder=null,this._encoding=null}n(70087)(o,r),o.prototype.update=function(e,t,n){"string"==typeof e&&(e=a.from(e,t));var r=this._update(e);return this.hashMode?this:(n&&(r=this._toString(r,n)),r)},o.prototype.setAutoPadding=function(){},o.prototype.getAuthTag=function(){throw new Error("trying to get auth tag in unsupported state")},o.prototype.setAuthTag=function(){throw new Error("trying to set auth tag in unsupported state")},o.prototype.setAAD=function(){throw new Error("trying to set aad in unsupported state")},o.prototype._transform=function(e,t,n){var a;try{this.hashMode?this._update(e):this.push(this._update(e))}catch(r){a=r}finally{n(a)}},o.prototype._flush=function(e){var t;try{this.push(this.__final())}catch(n){t=n}e(t)},o.prototype._finalOrDigest=function(e){var t=this.__final()||a.alloc(0);return e&&(t=this._toString(t,e,!0)),t},o.prototype._toString=function(e,t,n){if(this._decoder||(this._decoder=new i(t),this._encoding=t),this._encoding!==t)throw new Error("can't switch encodings");var a=this._decoder.write(e);return n&&(a+=this._decoder.end()),a},e.exports=o},47297:function(e,t,n){const a=n(49552),r={};for(const o of Object.keys(a))r[a[o]]=o;const i={rgb:{channels:3,labels:"rgb"},hsl:{channels:3,labels:"hsl"},hsv:{channels:3,labels:"hsv"},hwb:{channels:3,labels:"hwb"},cmyk:{channels:4,labels:"cmyk"},xyz:{channels:3,labels:"xyz"},lab:{channels:3,labels:"lab"},lch:{channels:3,labels:"lch"},hex:{channels:1,labels:["hex"]},keyword:{channels:1,labels:["keyword"]},ansi16:{channels:1,labels:["ansi16"]},ansi256:{channels:1,labels:["ansi256"]},hcg:{channels:3,labels:["h","c","g"]},apple:{channels:3,labels:["r16","g16","b16"]},gray:{channels:1,labels:["gray"]}};e.exports=i;for(const o of Object.keys(i)){if(!("channels"in i[o]))throw new Error("missing channels property: "+o);if(!("labels"in i[o]))throw new Error("missing channel labels property: "+o);if(i[o].labels.length!==i[o].channels)throw new Error("channel and label counts mismatch: "+o);const{channels:e,labels:t}=i[o];delete i[o].channels,delete i[o].labels,Object.defineProperty(i[o],"channels",{value:e}),Object.defineProperty(i[o],"labels",{value:t})}i.rgb.hsl=function(e){const t=e[0]/255,n=e[1]/255,a=e[2]/255,r=Math.min(t,n,a),i=Math.max(t,n,a),o=i-r;let d,s;i===r?d=0:t===i?d=(n-a)/o:n===i?d=2+(a-t)/o:a===i&&(d=4+(t-n)/o),d=Math.min(60*d,360),d<0&&(d+=360);const c=(r+i)/2;return s=i===r?0:c<=.5?o/(i+r):o/(2-i-r),[d,100*s,100*c]},i.rgb.hsv=function(e){let t,n,a,r,i;const o=e[0]/255,d=e[1]/255,s=e[2]/255,c=Math.max(o,d,s),u=c-Math.min(o,d,s),l=function(e){return(c-e)/6/u+.5};return 0===u?(r=0,i=0):(i=u/c,t=l(o),n=l(d),a=l(s),o===c?r=a-n:d===c?r=1/3+t-a:s===c&&(r=2/3+n-t),r<0?r+=1:r>1&&(r-=1)),[360*r,100*i,100*c]},i.rgb.hwb=function(e){const t=e[0],n=e[1];let a=e[2];const r=i.rgb.hsl(e)[0],o=1/255*Math.min(t,Math.min(n,a));return a=1-1/255*Math.max(t,Math.max(n,a)),[r,100*o,100*a]},i.rgb.cmyk=function(e){const t=e[0]/255,n=e[1]/255,a=e[2]/255,r=Math.min(1-t,1-n,1-a);return[100*((1-t-r)/(1-r)||0),100*((1-n-r)/(1-r)||0),100*((1-a-r)/(1-r)||0),100*r]},i.rgb.keyword=function(e){const t=r[e];if(t)return t;let n,i=1/0;for(const r of Object.keys(a)){const t=a[r],s=(d=t,((o=e)[0]-d[0])**2+(o[1]-d[1])**2+(o[2]-d[2])**2);s<i&&(i=s,n=r)}var o,d;return n},i.keyword.rgb=function(e){return a[e]},i.rgb.xyz=function(e){let t=e[0]/255,n=e[1]/255,a=e[2]/255;t=t>.04045?((t+.055)/1.055)**2.4:t/12.92,n=n>.04045?((n+.055)/1.055)**2.4:n/12.92,a=a>.04045?((a+.055)/1.055)**2.4:a/12.92;return[100*(.4124*t+.3576*n+.1805*a),100*(.2126*t+.7152*n+.0722*a),100*(.0193*t+.1192*n+.9505*a)]},i.rgb.lab=function(e){const t=i.rgb.xyz(e);let n=t[0],a=t[1],r=t[2];n/=95.047,a/=100,r/=108.883,n=n>.008856?n**(1/3):7.787*n+16/116,a=a>.008856?a**(1/3):7.787*a+16/116,r=r>.008856?r**(1/3):7.787*r+16/116;return[116*a-16,500*(n-a),200*(a-r)]},i.hsl.rgb=function(e){const t=e[0]/360,n=e[1]/100,a=e[2]/100;let r,i,o;if(0===n)return o=255*a,[o,o,o];r=a<.5?a*(1+n):a+n-a*n;const d=2*a-r,s=[0,0,0];for(let c=0;c<3;c++)i=t+1/3*-(c-1),i<0&&i++,i>1&&i--,o=6*i<1?d+6*(r-d)*i:2*i<1?r:3*i<2?d+(r-d)*(2/3-i)*6:d,s[c]=255*o;return s},i.hsl.hsv=function(e){const t=e[0];let n=e[1]/100,a=e[2]/100,r=n;const i=Math.max(a,.01);a*=2,n*=a<=1?a:2-a,r*=i<=1?i:2-i;return[t,100*(0===a?2*r/(i+r):2*n/(a+n)),100*((a+n)/2)]},i.hsv.rgb=function(e){const t=e[0]/60,n=e[1]/100;let a=e[2]/100;const r=Math.floor(t)%6,i=t-Math.floor(t),o=255*a*(1-n),d=255*a*(1-n*i),s=255*a*(1-n*(1-i));switch(a*=255,r){case 0:return[a,s,o];case 1:return[d,a,o];case 2:return[o,a,s];case 3:return[o,d,a];case 4:return[s,o,a];case 5:return[a,o,d]}},i.hsv.hsl=function(e){const t=e[0],n=e[1]/100,a=e[2]/100,r=Math.max(a,.01);let i,o;o=(2-n)*a;const d=(2-n)*r;return i=n*r,i/=d<=1?d:2-d,i=i||0,o/=2,[t,100*i,100*o]},i.hwb.rgb=function(e){const t=e[0]/360;let n=e[1]/100,a=e[2]/100;const r=n+a;let i;r>1&&(n/=r,a/=r);const o=Math.floor(6*t),d=1-a;i=6*t-o,0!=(1&o)&&(i=1-i);const s=n+i*(d-n);let c,u,l;switch(o){default:case 6:case 0:c=d,u=s,l=n;break;case 1:c=s,u=d,l=n;break;case 2:c=n,u=d,l=s;break;case 3:c=n,u=s,l=d;break;case 4:c=s,u=n,l=d;break;case 5:c=d,u=n,l=s}return[255*c,255*u,255*l]},i.cmyk.rgb=function(e){const t=e[0]/100,n=e[1]/100,a=e[2]/100,r=e[3]/100;return[255*(1-Math.min(1,t*(1-r)+r)),255*(1-Math.min(1,n*(1-r)+r)),255*(1-Math.min(1,a*(1-r)+r))]},i.xyz.rgb=function(e){const t=e[0]/100,n=e[1]/100,a=e[2]/100;let r,i,o;return r=3.2406*t+-1.5372*n+-.4986*a,i=-.9689*t+1.8758*n+.0415*a,o=.0557*t+-.204*n+1.057*a,r=r>.0031308?1.055*r**(1/2.4)-.055:12.92*r,i=i>.0031308?1.055*i**(1/2.4)-.055:12.92*i,o=o>.0031308?1.055*o**(1/2.4)-.055:12.92*o,r=Math.min(Math.max(0,r),1),i=Math.min(Math.max(0,i),1),o=Math.min(Math.max(0,o),1),[255*r,255*i,255*o]},i.xyz.lab=function(e){let t=e[0],n=e[1],a=e[2];t/=95.047,n/=100,a/=108.883,t=t>.008856?t**(1/3):7.787*t+16/116,n=n>.008856?n**(1/3):7.787*n+16/116,a=a>.008856?a**(1/3):7.787*a+16/116;return[116*n-16,500*(t-n),200*(n-a)]},i.lab.xyz=function(e){let t,n,a;n=(e[0]+16)/116,t=e[1]/500+n,a=n-e[2]/200;const r=n**3,i=t**3,o=a**3;return n=r>.008856?r:(n-16/116)/7.787,t=i>.008856?i:(t-16/116)/7.787,a=o>.008856?o:(a-16/116)/7.787,t*=95.047,n*=100,a*=108.883,[t,n,a]},i.lab.lch=function(e){const t=e[0],n=e[1],a=e[2];let r;r=360*Math.atan2(a,n)/2/Math.PI,r<0&&(r+=360);return[t,Math.sqrt(n*n+a*a),r]},i.lch.lab=function(e){const t=e[0],n=e[1],a=e[2]/360*2*Math.PI;return[t,n*Math.cos(a),n*Math.sin(a)]},i.rgb.ansi16=function(e,t=null){const[n,a,r]=e;let o=null===t?i.rgb.hsv(e)[2]:t;if(o=Math.round(o/50),0===o)return 30;let d=30+(Math.round(r/255)<<2|Math.round(a/255)<<1|Math.round(n/255));return 2===o&&(d+=60),d},i.hsv.ansi16=function(e){return i.rgb.ansi16(i.hsv.rgb(e),e[2])},i.rgb.ansi256=function(e){const t=e[0],n=e[1],a=e[2];if(t===n&&n===a)return t<8?16:t>248?231:Math.round((t-8)/247*24)+232;return 16+36*Math.round(t/255*5)+6*Math.round(n/255*5)+Math.round(a/255*5)},i.ansi16.rgb=function(e){let t=e%10;if(0===t||7===t)return e>50&&(t+=3.5),t=t/10.5*255,[t,t,t];const n=.5*(1+~~(e>50));return[(1&t)*n*255,(t>>1&1)*n*255,(t>>2&1)*n*255]},i.ansi256.rgb=function(e){if(e>=232){const t=10*(e-232)+8;return[t,t,t]}let t;e-=16;return[Math.floor(e/36)/5*255,Math.floor((t=e%36)/6)/5*255,t%6/5*255]},i.rgb.hex=function(e){const t=(((255&Math.round(e[0]))<<16)+((255&Math.round(e[1]))<<8)+(255&Math.round(e[2]))).toString(16).toUpperCase();return"000000".substring(t.length)+t},i.hex.rgb=function(e){const t=e.toString(16).match(/[a-f0-9]{6}|[a-f0-9]{3}/i);if(!t)return[0,0,0];let n=t[0];3===t[0].length&&(n=n.split("").map((e=>e+e)).join(""));const a=parseInt(n,16);return[a>>16&255,a>>8&255,255&a]},i.rgb.hcg=function(e){const t=e[0]/255,n=e[1]/255,a=e[2]/255,r=Math.max(Math.max(t,n),a),i=Math.min(Math.min(t,n),a),o=r-i;let d,s;return d=o<1?i/(1-o):0,s=o<=0?0:r===t?(n-a)/o%6:r===n?2+(a-t)/o:4+(t-n)/o,s/=6,s%=1,[360*s,100*o,100*d]},i.hsl.hcg=function(e){const t=e[1]/100,n=e[2]/100,a=n<.5?2*t*n:2*t*(1-n);let r=0;return a<1&&(r=(n-.5*a)/(1-a)),[e[0],100*a,100*r]},i.hsv.hcg=function(e){const t=e[1]/100,n=e[2]/100,a=t*n;let r=0;return a<1&&(r=(n-a)/(1-a)),[e[0],100*a,100*r]},i.hcg.rgb=function(e){const t=e[0]/360,n=e[1]/100,a=e[2]/100;if(0===n)return[255*a,255*a,255*a];const r=[0,0,0],i=t%1*6,o=i%1,d=1-o;let s=0;switch(Math.floor(i)){case 0:r[0]=1,r[1]=o,r[2]=0;break;case 1:r[0]=d,r[1]=1,r[2]=0;break;case 2:r[0]=0,r[1]=1,r[2]=o;break;case 3:r[0]=0,r[1]=d,r[2]=1;break;case 4:r[0]=o,r[1]=0,r[2]=1;break;default:r[0]=1,r[1]=0,r[2]=d}return s=(1-n)*a,[255*(n*r[0]+s),255*(n*r[1]+s),255*(n*r[2]+s)]},i.hcg.hsv=function(e){const t=e[1]/100,n=t+e[2]/100*(1-t);let a=0;return n>0&&(a=t/n),[e[0],100*a,100*n]},i.hcg.hsl=function(e){const t=e[1]/100,n=e[2]/100*(1-t)+.5*t;let a=0;return n>0&&n<.5?a=t/(2*n):n>=.5&&n<1&&(a=t/(2*(1-n))),[e[0],100*a,100*n]},i.hcg.hwb=function(e){const t=e[1]/100,n=t+e[2]/100*(1-t);return[e[0],100*(n-t),100*(1-n)]},i.hwb.hcg=function(e){const t=e[1]/100,n=1-e[2]/100,a=n-t;let r=0;return a<1&&(r=(n-a)/(1-a)),[e[0],100*a,100*r]},i.apple.rgb=function(e){return[e[0]/65535*255,e[1]/65535*255,e[2]/65535*255]},i.rgb.apple=function(e){return[e[0]/255*65535,e[1]/255*65535,e[2]/255*65535]},i.gray.rgb=function(e){return[e[0]/100*255,e[0]/100*255,e[0]/100*255]},i.gray.hsl=function(e){return[0,0,e[0]]},i.gray.hsv=i.gray.hsl,i.gray.hwb=function(e){return[0,100,e[0]]},i.gray.cmyk=function(e){return[0,0,0,e[0]]},i.gray.lab=function(e){return[e[0],0,0]},i.gray.hex=function(e){const t=255&Math.round(e[0]/100*255),n=((t<<16)+(t<<8)+t).toString(16).toUpperCase();return"000000".substring(n.length)+n},i.rgb.gray=function(e){return[(e[0]+e[1]+e[2])/3/255*100]}},31642:function(e,t,n){const a=n(47297),r=n(77971),i={};Object.keys(a).forEach((e=>{i[e]={},Object.defineProperty(i[e],"channels",{value:a[e].channels}),Object.defineProperty(i[e],"labels",{value:a[e].labels});const t=r(e);Object.keys(t).forEach((n=>{const a=t[n];i[e][n]=function(e){const t=function(...t){const n=t[0];if(null==n)return n;n.length>1&&(t=n);const a=e(t);if("object"==typeof a)for(let e=a.length,r=0;r<e;r++)a[r]=Math.round(a[r]);return a};return"conversion"in e&&(t.conversion=e.conversion),t}(a),i[e][n].raw=function(e){const t=function(...t){const n=t[0];return null==n?n:(n.length>1&&(t=n),e(t))};return"conversion"in e&&(t.conversion=e.conversion),t}(a)}))})),e.exports=i},77971:function(e,t,n){const a=n(47297);function r(e){const t=function(){const e={},t=Object.keys(a);for(let n=t.length,a=0;a<n;a++)e[t[a]]={distance:-1,parent:null};return e}(),n=[e];for(t[e].distance=0;n.length;){const e=n.pop(),r=Object.keys(a[e]);for(let a=r.length,i=0;i<a;i++){const a=r[i],o=t[a];-1===o.distance&&(o.distance=t[e].distance+1,o.parent=e,n.unshift(a))}}return t}function i(e,t){return function(n){return t(e(n))}}function o(e,t){const n=[t[e].parent,e];let r=a[t[e].parent][e],o=t[e].parent;for(;t[o].parent;)n.unshift(t[o].parent),r=i(a[t[o].parent][o],r),o=t[o].parent;return r.conversion=n,r}e.exports=function(e){const t=r(e),n={},a=Object.keys(t);for(let r=a.length,i=0;i<r;i++){const e=a[i];null!==t[e].parent&&(n[e]=o(e,t))}return n}},49552:function(e){"use strict";e.exports={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,134,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,250,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,221],powderblue:[176,224,230],purple:[128,0,128],rebeccapurple:[102,51,153],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[112,128,144],slategrey:[112,128,144],snow:[255,250,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,50]}},45081:function(e,t,n){var a=n(29749),r=n(63785);e.exports=function(e){return new o(e)};var i={secp256k1:{name:"secp256k1",byteLength:32},secp224r1:{name:"p224",byteLength:28},prime256v1:{name:"p256",byteLength:32},prime192v1:{name:"p192",byteLength:24},ed25519:{name:"ed25519",byteLength:32},secp384r1:{name:"p384",byteLength:48},secp521r1:{name:"p521",byteLength:66}};function o(e){this.curveType=i[e],this.curveType||(this.curveType={name:e}),this.curve=new a.ec(this.curveType.name),this.keys=void 0}function d(e,t,n){Array.isArray(e)||(e=e.toArray());var a=new Buffer(e);if(n&&a.length<n){var r=new Buffer(n-a.length);r.fill(0),a=Buffer.concat([r,a])}return t?a.toString(t):a}i.p224=i.secp224r1,i.p256=i.secp256r1=i.prime256v1,i.p192=i.secp192r1=i.prime192v1,i.p384=i.secp384r1,i.p521=i.secp521r1,o.prototype.generateKeys=function(e,t){return this.keys=this.curve.genKeyPair(),this.getPublicKey(e,t)},o.prototype.computeSecret=function(e,t,n){return t=t||"utf8",Buffer.isBuffer(e)||(e=new Buffer(e,t)),d(this.curve.keyFromPublic(e).getPublic().mul(this.keys.getPrivate()).getX(),n,this.curveType.byteLength)},o.prototype.getPublicKey=function(e,t){var n=this.keys.getPublic("compressed"===t,!0);return"hybrid"===t&&(n[n.length-1]%2?n[0]=7:n[0]=6),d(n,e)},o.prototype.getPrivateKey=function(e){return d(this.keys.getPrivate(),e)},o.prototype.setPublicKey=function(e,t){return t=t||"utf8",Buffer.isBuffer(e)||(e=new Buffer(e,t)),this.keys._importPublic(e),this},o.prototype.setPrivateKey=function(e,t){t=t||"utf8",Buffer.isBuffer(e)||(e=new Buffer(e,t));var n=new r(e);return n=n.toString(16),this.keys=this.curve.genKeyPair(),this.keys._importPrivate(n),this}},57266:function(e,t,n){"use strict";var a=n(70087),r=n(79500),i=n(86558),o=n(54458),d=n(73081);function s(e){d.call(this,"digest"),this._hash=e}a(s,d),s.prototype._update=function(e){this._hash.update(e)},s.prototype._final=function(){return this._hash.digest()},e.exports=function(e){return"md5"===(e=e.toLowerCase())?new r:"rmd160"===e||"ripemd160"===e?new i:new s(o(e))}},37401:function(e,t,n){var a=n(79500);e.exports=function(e){return(new a).update(e).digest()}},12873:function(e,t,n){"use strict";var a=n(70087),r=n(83042),i=n(73081),o=n(27172).Buffer,d=n(37401),s=n(86558),c=n(54458),u=o.alloc(128);function l(e,t){i.call(this,"digest"),"string"==typeof t&&(t=o.from(t));var n="sha512"===e||"sha384"===e?128:64;(this._alg=e,this._key=t,t.length>n)?t=("rmd160"===e?new s:c(e)).update(t).digest():t.length<n&&(t=o.concat([t,u],n));for(var a=this._ipad=o.allocUnsafe(n),r=this._opad=o.allocUnsafe(n),d=0;d<n;d++)a[d]=54^t[d],r[d]=92^t[d];this._hash="rmd160"===e?new s:c(e),this._hash.update(a)}a(l,i),l.prototype._update=function(e){this._hash.update(e)},l.prototype._final=function(){var e=this._hash.digest();return("rmd160"===this._alg?new s:c(this._alg)).update(this._opad).update(e).digest()},e.exports=function(e,t){return"rmd160"===(e=e.toLowerCase())||"ripemd160"===e?new l("rmd160",t):"md5"===e?new r(d,t):new l(e,t)}},83042:function(e,t,n){"use strict";var a=n(70087),r=n(27172).Buffer,i=n(73081),o=r.alloc(128),d=64;function s(e,t){i.call(this,"digest"),"string"==typeof t&&(t=r.from(t)),this._alg=e,this._key=t,t.length>d?t=e(t):t.length<d&&(t=r.concat([t,o],d));for(var n=this._ipad=r.allocUnsafe(d),a=this._opad=r.allocUnsafe(d),s=0;s<d;s++)n[s]=54^t[s],a[s]=92^t[s];this._hash=[n]}a(s,i),s.prototype._update=function(e){this._hash.push(e)},s.prototype._final=function(){var e=this._alg(r.concat(this._hash));return this._alg(r.concat([this._opad,e]))},e.exports=s},32337:function(e,t,n){"use strict";t.randomBytes=t.rng=t.pseudoRandomBytes=t.prng=n(52830),t.createHash=t.Hash=n(57266),t.createHmac=t.Hmac=n(12873);var a=n(14905),r=Object.keys(a),i=["sha1","sha224","sha256","sha384","sha512","md5","rmd160"].concat(r);t.getHashes=function(){return i};var o=n(50041);t.pbkdf2=o.pbkdf2,t.pbkdf2Sync=o.pbkdf2Sync;var d=n(11240);t.Cipher=d.Cipher,t.createCipher=d.createCipher,t.Cipheriv=d.Cipheriv,t.createCipheriv=d.createCipheriv,t.Decipher=d.Decipher,t.createDecipher=d.createDecipher,t.Decipheriv=d.Decipheriv,t.createDecipheriv=d.createDecipheriv,t.getCiphers=d.getCiphers,t.listCiphers=d.listCiphers;var s=n(82834);t.DiffieHellmanGroup=s.DiffieHellmanGroup,t.createDiffieHellmanGroup=s.createDiffieHellmanGroup,t.getDiffieHellman=s.getDiffieHellman,t.createDiffieHellman=s.createDiffieHellman,t.DiffieHellman=s.DiffieHellman;var c=n(7545);t.createSign=c.createSign,t.Sign=c.Sign,t.createVerify=c.createVerify,t.Verify=c.Verify,t.createECDH=n(45081);var u=n(79639);t.publicEncrypt=u.publicEncrypt,t.privateEncrypt=u.privateEncrypt,t.publicDecrypt=u.publicDecrypt,t.privateDecrypt=u.privateDecrypt;var l=n(68519);t.randomFill=l.randomFill,t.randomFillSync=l.randomFillSync,t.createCredentials=function(){throw new Error(["sorry, createCredentials is not implemented yet","we accept pull requests","https://github.com/crypto-browserify/crypto-browserify"].join("\n"))},t.constants={DH_CHECK_P_NOT_SAFE_PRIME:2,DH_CHECK_P_NOT_PRIME:1,DH_UNABLE_TO_CHECK_GENERATOR:4,DH_NOT_SUITABLE_GENERATOR:8,NPN_ENABLED:1,ALPN_ENABLED:1,RSA_PKCS1_PADDING:1,RSA_SSLV23_PADDING:2,RSA_NO_PADDING:3,RSA_PKCS1_OAEP_PADDING:4,RSA_X931_PADDING:5,RSA_PKCS1_PSS_PADDING:6,POINT_CONVERSION_COMPRESSED:2,POINT_CONVERSION_UNCOMPRESSED:4,POINT_CONVERSION_HYBRID:6}},21857:function(e){"use strict";var t=function(e){return function(e){return!!e&&"object"==typeof e}(e)&&!function(e){var t=Object.prototype.toString.call(e);return"[object RegExp]"===t||"[object Date]"===t||function(e){return e.$$typeof===n}(e)}(e)};var n="function"==typeof Symbol&&Symbol.for?Symbol.for("react.element"):60103;function a(e,t){return!1!==t.clone&&t.isMergeableObject(e)?s((n=e,Array.isArray(n)?[]:{}),e,t):e;var n}function r(e,t,n){return e.concat(t).map((function(e){return a(e,n)}))}function i(e){return Object.keys(e).concat(function(e){return Object.getOwnPropertySymbols?Object.getOwnPropertySymbols(e).filter((function(t){return Object.propertyIsEnumerable.call(e,t)})):[]}(e))}function o(e,t){try{return t in e}catch(n){return!1}}function d(e,t,n){var r={};return n.isMergeableObject(e)&&i(e).forEach((function(t){r[t]=a(e[t],n)})),i(t).forEach((function(i){(function(e,t){return o(e,t)&&!(Object.hasOwnProperty.call(e,t)&&Object.propertyIsEnumerable.call(e,t))})(e,i)||(o(e,i)&&n.isMergeableObject(t[i])?r[i]=function(e,t){if(!t.customMerge)return s;var n=t.customMerge(e);return"function"==typeof n?n:s}(i,n)(e[i],t[i],n):r[i]=a(t[i],n))})),r}function s(e,n,i){(i=i||{}).arrayMerge=i.arrayMerge||r,i.isMergeableObject=i.isMergeableObject||t,i.cloneUnlessOtherwiseSpecified=a;var o=Array.isArray(n);return o===Array.isArray(e)?o?i.arrayMerge(e,n,i):d(e,n,i):a(n,i)}s.all=function(e,t){if(!Array.isArray(e))throw new Error("first argument should be an array");return e.reduce((function(e,n){return s(e,n,t)}),{})};var c=s;e.exports=c},27191:function(e,t,n){"use strict";t.utils=n(75516),t.Cipher=n(14923),t.DES=n(10225),t.CBC=n(48701),t.EDE=n(26540)},48701:function(e,t,n){"use strict";var a=n(77859),r=n(70087),i={};function o(e){a.equal(e.length,8,"Invalid IV length"),this.iv=new Array(8);for(var t=0;t<this.iv.length;t++)this.iv[t]=e[t]}t.instantiate=function(e){function t(t){e.call(this,t),this._cbcInit()}r(t,e);for(var n=Object.keys(i),a=0;a<n.length;a++){var o=n[a];t.prototype[o]=i[o]}return t.create=function(e){return new t(e)},t},i._cbcInit=function(){var e=new o(this.options.iv);this._cbcState=e},i._update=function(e,t,n,a){var r=this._cbcState,i=this.constructor.super_.prototype,o=r.iv;if("encrypt"===this.type){for(var d=0;d<this.blockSize;d++)o[d]^=e[t+d];i._update.call(this,o,0,n,a);for(d=0;d<this.blockSize;d++)o[d]=n[a+d]}else{i._update.call(this,e,t,n,a);for(d=0;d<this.blockSize;d++)n[a+d]^=o[d];for(d=0;d<this.blockSize;d++)o[d]=e[t+d]}}},14923:function(e,t,n){"use strict";var a=n(77859);function r(e){this.options=e,this.type=this.options.type,this.blockSize=8,this._init(),this.buffer=new Array(this.blockSize),this.bufferOff=0,this.padding=!1!==e.padding}e.exports=r,r.prototype._init=function(){},r.prototype.update=function(e){return 0===e.length?[]:"decrypt"===this.type?this._updateDecrypt(e):this._updateEncrypt(e)},r.prototype._buffer=function(e,t){for(var n=Math.min(this.buffer.length-this.bufferOff,e.length-t),a=0;a<n;a++)this.buffer[this.bufferOff+a]=e[t+a];return this.bufferOff+=n,n},r.prototype._flushBuffer=function(e,t){return this._update(this.buffer,0,e,t),this.bufferOff=0,this.blockSize},r.prototype._updateEncrypt=function(e){var t=0,n=0,a=(this.bufferOff+e.length)/this.blockSize|0,r=new Array(a*this.blockSize);0!==this.bufferOff&&(t+=this._buffer(e,t),this.bufferOff===this.buffer.length&&(n+=this._flushBuffer(r,n)));for(var i=e.length-(e.length-t)%this.blockSize;t<i;t+=this.blockSize)this._update(e,t,r,n),n+=this.blockSize;for(;t<e.length;t++,this.bufferOff++)this.buffer[this.bufferOff]=e[t];return r},r.prototype._updateDecrypt=function(e){for(var t=0,n=0,a=Math.ceil((this.bufferOff+e.length)/this.blockSize)-1,r=new Array(a*this.blockSize);a>0;a--)t+=this._buffer(e,t),n+=this._flushBuffer(r,n);return t+=this._buffer(e,t),r},r.prototype.final=function(e){var t,n;return e&&(t=this.update(e)),n="encrypt"===this.type?this._finalEncrypt():this._finalDecrypt(),t?t.concat(n):n},r.prototype._pad=function(e,t){if(0===t)return!1;for(;t<e.length;)e[t++]=0;return!0},r.prototype._finalEncrypt=function(){if(!this._pad(this.buffer,this.bufferOff))return[];var e=new Array(this.blockSize);return this._update(this.buffer,0,e,0),e},r.prototype._unpad=function(e){return e},r.prototype._finalDecrypt=function(){a.equal(this.bufferOff,this.blockSize,"Not enough data to decrypt");var e=new Array(this.blockSize);return this._flushBuffer(e,0),this._unpad(e)}},10225:function(e,t,n){"use strict";var a=n(77859),r=n(70087),i=n(75516),o=n(14923);function d(){this.tmp=new Array(2),this.keys=null}function s(e){o.call(this,e);var t=new d;this._desState=t,this.deriveKeys(t,e.key)}r(s,o),e.exports=s,s.create=function(e){return new s(e)};var c=[1,1,2,2,2,2,2,2,1,2,2,2,2,2,2,1];s.prototype.deriveKeys=function(e,t){e.keys=new Array(32),a.equal(t.length,this.blockSize,"Invalid key length");var n=i.readUInt32BE(t,0),r=i.readUInt32BE(t,4);i.pc1(n,r,e.tmp,0),n=e.tmp[0],r=e.tmp[1];for(var o=0;o<e.keys.length;o+=2){var d=c[o>>>1];n=i.r28shl(n,d),r=i.r28shl(r,d),i.pc2(n,r,e.keys,o)}},s.prototype._update=function(e,t,n,a){var r=this._desState,o=i.readUInt32BE(e,t),d=i.readUInt32BE(e,t+4);i.ip(o,d,r.tmp,0),o=r.tmp[0],d=r.tmp[1],"encrypt"===this.type?this._encrypt(r,o,d,r.tmp,0):this._decrypt(r,o,d,r.tmp,0),o=r.tmp[0],d=r.tmp[1],i.writeUInt32BE(n,o,a),i.writeUInt32BE(n,d,a+4)},s.prototype._pad=function(e,t){if(!1===this.padding)return!1;for(var n=e.length-t,a=t;a<e.length;a++)e[a]=n;return!0},s.prototype._unpad=function(e){if(!1===this.padding)return e;for(var t=e[e.length-1],n=e.length-t;n<e.length;n++)a.equal(e[n],t);return e.slice(0,e.length-t)},s.prototype._encrypt=function(e,t,n,a,r){for(var o=t,d=n,s=0;s<e.keys.length;s+=2){var c=e.keys[s],u=e.keys[s+1];i.expand(d,e.tmp,0),c^=e.tmp[0],u^=e.tmp[1];var l=i.substitute(c,u),g=d;d=(o^i.permute(l))>>>0,o=g}i.rip(d,o,a,r)},s.prototype._decrypt=function(e,t,n,a,r){for(var o=n,d=t,s=e.keys.length-2;s>=0;s-=2){var c=e.keys[s],u=e.keys[s+1];i.expand(o,e.tmp,0),c^=e.tmp[0],u^=e.tmp[1];var l=i.substitute(c,u),g=o;o=(d^i.permute(l))>>>0,d=g}i.rip(o,d,a,r)}},26540:function(e,t,n){"use strict";var a=n(77859),r=n(70087),i=n(14923),o=n(10225);function d(e,t){a.equal(t.length,24,"Invalid key length");var n=t.slice(0,8),r=t.slice(8,16),i=t.slice(16,24);this.ciphers="encrypt"===e?[o.create({type:"encrypt",key:n}),o.create({type:"decrypt",key:r}),o.create({type:"encrypt",key:i})]:[o.create({type:"decrypt",key:i}),o.create({type:"encrypt",key:r}),o.create({type:"decrypt",key:n})]}function s(e){i.call(this,e);var t=new d(this.type,this.options.key);this._edeState=t}r(s,i),e.exports=s,s.create=function(e){return new s(e)},s.prototype._update=function(e,t,n,a){var r=this._edeState;r.ciphers[0]._update(e,t,n,a),r.ciphers[1]._update(n,a,n,a),r.ciphers[2]._update(n,a,n,a)},s.prototype._pad=o.prototype._pad,s.prototype._unpad=o.prototype._unpad},75516:function(e,t){"use strict";t.readUInt32BE=function(e,t){return(e[0+t]<<24|e[1+t]<<16|e[2+t]<<8|e[3+t])>>>0},t.writeUInt32BE=function(e,t,n){e[0+n]=t>>>24,e[1+n]=t>>>16&255,e[2+n]=t>>>8&255,e[3+n]=255&t},t.ip=function(e,t,n,a){for(var r=0,i=0,o=6;o>=0;o-=2){for(var d=0;d<=24;d+=8)r<<=1,r|=t>>>d+o&1;for(d=0;d<=24;d+=8)r<<=1,r|=e>>>d+o&1}for(o=6;o>=0;o-=2){for(d=1;d<=25;d+=8)i<<=1,i|=t>>>d+o&1;for(d=1;d<=25;d+=8)i<<=1,i|=e>>>d+o&1}n[a+0]=r>>>0,n[a+1]=i>>>0},t.rip=function(e,t,n,a){for(var r=0,i=0,o=0;o<4;o++)for(var d=24;d>=0;d-=8)r<<=1,r|=t>>>d+o&1,r<<=1,r|=e>>>d+o&1;for(o=4;o<8;o++)for(d=24;d>=0;d-=8)i<<=1,i|=t>>>d+o&1,i<<=1,i|=e>>>d+o&1;n[a+0]=r>>>0,n[a+1]=i>>>0},t.pc1=function(e,t,n,a){for(var r=0,i=0,o=7;o>=5;o--){for(var d=0;d<=24;d+=8)r<<=1,r|=t>>d+o&1;for(d=0;d<=24;d+=8)r<<=1,r|=e>>d+o&1}for(d=0;d<=24;d+=8)r<<=1,r|=t>>d+o&1;for(o=1;o<=3;o++){for(d=0;d<=24;d+=8)i<<=1,i|=t>>d+o&1;for(d=0;d<=24;d+=8)i<<=1,i|=e>>d+o&1}for(d=0;d<=24;d+=8)i<<=1,i|=e>>d+o&1;n[a+0]=r>>>0,n[a+1]=i>>>0},t.r28shl=function(e,t){return e<<t&268435455|e>>>28-t};var n=[14,11,17,4,27,23,25,0,13,22,7,18,5,9,16,24,2,20,12,21,1,8,15,26,15,4,25,19,9,1,26,16,5,11,23,8,12,7,17,0,22,3,10,14,6,20,27,24];t.pc2=function(e,t,a,r){for(var i=0,o=0,d=n.length>>>1,s=0;s<d;s++)i<<=1,i|=e>>>n[s]&1;for(s=d;s<n.length;s++)o<<=1,o|=t>>>n[s]&1;a[r+0]=i>>>0,a[r+1]=o>>>0},t.expand=function(e,t,n){var a=0,r=0;a=(1&e)<<5|e>>>27;for(var i=23;i>=15;i-=4)a<<=6,a|=e>>>i&63;for(i=11;i>=3;i-=4)r|=e>>>i&63,r<<=6;r|=(31&e)<<1|e>>>31,t[n+0]=a>>>0,t[n+1]=r>>>0};var a=[14,0,4,15,13,7,1,4,2,14,15,2,11,13,8,1,3,10,10,6,6,12,12,11,5,9,9,5,0,3,7,8,4,15,1,12,14,8,8,2,13,4,6,9,2,1,11,7,15,5,12,11,9,3,7,14,3,10,10,0,5,6,0,13,15,3,1,13,8,4,14,7,6,15,11,2,3,8,4,14,9,12,7,0,2,1,13,10,12,6,0,9,5,11,10,5,0,13,14,8,7,10,11,1,10,3,4,15,13,4,1,2,5,11,8,6,12,7,6,12,9,0,3,5,2,14,15,9,10,13,0,7,9,0,14,9,6,3,3,4,15,6,5,10,1,2,13,8,12,5,7,14,11,12,4,11,2,15,8,1,13,1,6,10,4,13,9,0,8,6,15,9,3,8,0,7,11,4,1,15,2,14,12,3,5,11,10,5,14,2,7,12,7,13,13,8,14,11,3,5,0,6,6,15,9,0,10,3,1,4,2,7,8,2,5,12,11,1,12,10,4,14,15,9,10,3,6,15,9,0,0,6,12,10,11,1,7,13,13,8,15,9,1,4,3,5,14,11,5,12,2,7,8,2,4,14,2,14,12,11,4,2,1,12,7,4,10,7,11,13,6,1,8,5,5,0,3,15,15,10,13,3,0,9,14,8,9,6,4,11,2,8,1,12,11,7,10,1,13,14,7,2,8,13,15,6,9,15,12,0,5,9,6,10,3,4,0,5,14,3,12,10,1,15,10,4,15,2,9,7,2,12,6,9,8,5,0,6,13,1,3,13,4,14,14,0,7,11,5,3,11,8,9,4,14,3,15,2,5,12,2,9,8,5,12,15,3,10,7,11,0,14,4,1,10,7,1,6,13,0,11,8,6,13,4,13,11,0,2,11,14,7,15,4,0,9,8,1,13,10,3,14,12,3,9,5,7,12,5,2,10,15,6,8,1,6,1,6,4,11,11,13,13,8,12,1,3,4,7,10,14,7,10,9,15,5,6,0,8,15,0,14,5,2,9,3,2,12,13,1,2,15,8,13,4,8,6,10,15,3,11,7,1,4,10,12,9,5,3,6,14,11,5,0,0,14,12,9,7,2,7,2,11,1,4,14,1,7,9,4,12,10,14,8,2,13,0,15,6,12,10,9,13,0,15,3,3,5,5,6,8,11];t.substitute=function(e,t){for(var n=0,r=0;r<4;r++){n<<=4,n|=a[64*r+(e>>>18-6*r&63)]}for(r=0;r<4;r++){n<<=4,n|=a[256+64*r+(t>>>18-6*r&63)]}return n>>>0};var r=[16,25,12,11,3,20,4,15,31,17,9,6,27,14,1,22,30,24,8,18,0,5,29,23,13,19,2,26,10,21,28,7];t.permute=function(e){for(var t=0,n=0;n<r.length;n++)t<<=1,t|=e>>>r[n]&1;return t>>>0},t.padSplit=function(e,t,n){for(var a=e.toString(2);a.length<t;)a="0"+a;for(var r=[],i=0;i<t;i+=n)r.push(a.slice(i,i+n));return r.join(" ")}},82834:function(e,t,n){var a=n(55174),r=n(87064),i=n(11554);var o={binary:!0,hex:!0,base64:!0};t.DiffieHellmanGroup=t.createDiffieHellmanGroup=t.getDiffieHellman=function(e){var t=new Buffer(r[e].prime,"hex"),n=new Buffer(r[e].gen,"hex");return new i(t,n)},t.createDiffieHellman=t.DiffieHellman=function e(t,n,r,d){return Buffer.isBuffer(n)||void 0===o[n]?e(t,"binary",n,r):(n=n||"binary",d=d||"binary",r=r||new Buffer([2]),Buffer.isBuffer(r)||(r=new Buffer(r,d)),"number"==typeof t?new i(a(t,r),r,!0):(Buffer.isBuffer(t)||(t=new Buffer(t,n)),new i(t,r,!0)))}},11554:function(e,t,n){var a=n(63785),r=new(n(78773)),i=new a(24),o=new a(11),d=new a(10),s=new a(3),c=new a(7),u=n(55174),l=n(52830);function g(e,t){return t=t||"utf8",Buffer.isBuffer(e)||(e=new Buffer(e,t)),this._pub=new a(e),this}function h(e,t){return t=t||"utf8",Buffer.isBuffer(e)||(e=new Buffer(e,t)),this._priv=new a(e),this}e.exports=p;var f={};function p(e,t,n){this.setGenerator(t),this.__prime=new a(e),this._prime=a.mont(this.__prime),this._primeLen=e.length,this._pub=void 0,this._priv=void 0,this._primeCode=void 0,n?(this.setPublicKey=g,this.setPrivateKey=h):this._primeCode=8}function m(e,t){var n=new Buffer(e.toArray());return t?n.toString(t):n}Object.defineProperty(p.prototype,"verifyError",{enumerable:!0,get:function(){return"number"!=typeof this._primeCode&&(this._primeCode=function(e,t){var n=t.toString("hex"),a=[n,e.toString(16)].join("_");if(a in f)return f[a];var l,g=0;if(e.isEven()||!u.simpleSieve||!u.fermatTest(e)||!r.test(e))return g+=1,g+="02"===n||"05"===n?8:4,f[a]=g,g;switch(r.test(e.shrn(1))||(g+=2),n){case"02":e.mod(i).cmp(o)&&(g+=8);break;case"05":(l=e.mod(d)).cmp(s)&&l.cmp(c)&&(g+=8);break;default:g+=4}return f[a]=g,g}(this.__prime,this.__gen)),this._primeCode}}),p.prototype.generateKeys=function(){return this._priv||(this._priv=new a(l(this._primeLen))),this._pub=this._gen.toRed(this._prime).redPow(this._priv).fromRed(),this.getPublicKey()},p.prototype.computeSecret=function(e){var t=(e=(e=new a(e)).toRed(this._prime)).redPow(this._priv).fromRed(),n=new Buffer(t.toArray()),r=this.getPrime();if(n.length<r.length){var i=new Buffer(r.length-n.length);i.fill(0),n=Buffer.concat([i,n])}return n},p.prototype.getPublicKey=function(e){return m(this._pub,e)},p.prototype.getPrivateKey=function(e){return m(this._priv,e)},p.prototype.getPrime=function(e){return m(this.__prime,e)},p.prototype.getGenerator=function(e){return m(this._gen,e)},p.prototype.setGenerator=function(e,t){return t=t||"utf8",Buffer.isBuffer(e)||(e=new Buffer(e,t)),this.__gen=e,this._gen=new a(e),this}},55174:function(e,t,n){var a=n(52830);e.exports=b,b.simpleSieve=m,b.fermatTest=R;var r=n(63785),i=new r(24),o=new(n(78773)),d=new r(1),s=new r(2),c=new r(5),u=(new r(16),new r(8),new r(10)),l=new r(3),g=(new r(7),new r(11)),h=new r(4),f=(new r(12),null);function p(){if(null!==f)return f;var e=[];e[0]=2;for(var t=1,n=3;n<1048576;n+=2){for(var a=Math.ceil(Math.sqrt(n)),r=0;r<t&&e[r]<=a&&n%e[r]!=0;r++);t!==r&&e[r]<=a||(e[t++]=n)}return f=e,e}function m(e){for(var t=p(),n=0;n<t.length;n++)if(0===e.modn(t[n]))return 0===e.cmpn(t[n]);return!0}function R(e){var t=r.mont(e);return 0===s.toRed(t).redPow(e.subn(1)).fromRed().cmpn(1)}function b(e,t){if(e<16)return new r(2===t||5===t?[140,123]:[140,39]);var n,f;for(t=new r(t);;){for(n=new r(a(Math.ceil(e/8)));n.bitLength()>e;)n.ishrn(1);if(n.isEven()&&n.iadd(d),n.testn(1)||n.iadd(s),t.cmp(s)){if(!t.cmp(c))for(;n.mod(u).cmp(l);)n.iadd(h)}else for(;n.mod(i).cmp(g);)n.iadd(h);if(m(f=n.shrn(1))&&m(n)&&R(f)&&R(n)&&o.test(f)&&o.test(n))return n}}},71069:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.attributeNames=t.elementNames=void 0,t.elementNames=new Map(["altGlyph","altGlyphDef","altGlyphItem","animateColor","animateMotion","animateTransform","clipPath","feBlend","feColorMatrix","feComponentTransfer","feComposite","feConvolveMatrix","feDiffuseLighting","feDisplacementMap","feDistantLight","feDropShadow","feFlood","feFuncA","feFuncB","feFuncG","feFuncR","feGaussianBlur","feImage","feMerge","feMergeNode","feMorphology","feOffset","fePointLight","feSpecularLighting","feSpotLight","feTile","feTurbulence","foreignObject","glyphRef","linearGradient","radialGradient","textPath"].map((function(e){return[e.toLowerCase(),e]}))),t.attributeNames=new Map(["definitionURL","attributeName","attributeType","baseFrequency","baseProfile","calcMode","clipPathUnits","diffuseConstant","edgeMode","filterUnits","glyphRef","gradientTransform","gradientUnits","kernelMatrix","kernelUnitLength","keyPoints","keySplines","keyTimes","lengthAdjust","limitingConeAngle","markerHeight","markerUnits","markerWidth","maskContentUnits","maskUnits","numOctaves","pathLength","patternContentUnits","patternTransform","patternUnits","pointsAtX","pointsAtY","pointsAtZ","preserveAlpha","preserveAspectRatio","primitiveUnits","refX","refY","repeatCount","repeatDur","requiredExtensions","requiredFeatures","specularConstant","specularExponent","spreadMethod","startOffset","stdDeviation","stitchTiles","surfaceScale","systemLanguage","tableValues","targetX","targetY","textLength","viewBox","viewTarget","xChannelSelector","yChannelSelector","zoomAndPan"].map((function(e){return[e.toLowerCase(),e]})))},86398:function(e,t,n){"use strict";var a=this&&this.__assign||function(){return a=Object.assign||function(e){for(var t,n=1,a=arguments.length;n<a;n++)for(var r in t=arguments[n])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e},a.apply(this,arguments)},r=this&&this.__createBinding||(Object.create?function(e,t,n,a){void 0===a&&(a=n);var r=Object.getOwnPropertyDescriptor(t,n);r&&!("get"in r?!t.__esModule:r.writable||r.configurable)||(r={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,a,r)}:function(e,t,n,a){void 0===a&&(a=n),e[a]=t[n]}),i=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),o=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&r(t,e,n);return i(t,e),t};Object.defineProperty(t,"__esModule",{value:!0}),t.render=void 0;var d=o(n(80289)),s=n(93028),c=n(71069),u=new Set(["style","script","xmp","iframe","noembed","noframes","plaintext","noscript"]);function l(e){return e.replace(/"/g,"&quot;")}var g=new Set(["area","base","basefont","br","col","command","embed","frame","hr","img","input","isindex","keygen","link","meta","param","source","track","wbr"]);function h(e,t){void 0===t&&(t={});for(var n=("length"in e?e:[e]),a="",r=0;r<n.length;r++)a+=f(n[r],t);return a}function f(e,t){switch(e.type){case d.Root:return h(e.children,t);case d.Doctype:case d.Directive:return"<".concat(e.data,">");case d.Comment:return function(e){return"\x3c!--".concat(e.data,"--\x3e")}(e);case d.CDATA:return function(e){return"<![CDATA[".concat(e.children[0].data,"]]>")}(e);case d.Script:case d.Style:case d.Tag:return function(e,t){var n;"foreign"===t.xmlMode&&(e.name=null!==(n=c.elementNames.get(e.name))&&void 0!==n?n:e.name,e.parent&&p.has(e.parent.name)&&(t=a(a({},t),{xmlMode:!1})));!t.xmlMode&&m.has(e.name)&&(t=a(a({},t),{xmlMode:"foreign"}));var r="<".concat(e.name),i=function(e,t){var n;if(e){var a=!1===(null!==(n=t.encodeEntities)&&void 0!==n?n:t.decodeEntities)?l:t.xmlMode||"utf8"!==t.encodeEntities?s.encodeXML:s.escapeAttribute;return Object.keys(e).map((function(n){var r,i,o=null!==(r=e[n])&&void 0!==r?r:"";return"foreign"===t.xmlMode&&(n=null!==(i=c.attributeNames.get(n))&&void 0!==i?i:n),t.emptyAttrs||t.xmlMode||""!==o?"".concat(n,'="').concat(a(o),'"'):n})).join(" ")}}(e.attribs,t);i&&(r+=" ".concat(i));0===e.children.length&&(t.xmlMode?!1!==t.selfClosingTags:t.selfClosingTags&&g.has(e.name))?(t.xmlMode||(r+=" "),r+="/>"):(r+=">",e.children.length>0&&(r+=h(e.children,t)),!t.xmlMode&&g.has(e.name)||(r+="</".concat(e.name,">")));return r}(e,t);case d.Text:return function(e,t){var n,a=e.data||"";!1===(null!==(n=t.encodeEntities)&&void 0!==n?n:t.decodeEntities)||!t.xmlMode&&e.parent&&u.has(e.parent.name)||(a=t.xmlMode||"utf8"!==t.encodeEntities?(0,s.encodeXML)(a):(0,s.escapeText)(a));return a}(e,t)}}t.render=h,t.default=h;var p=new Set(["mi","mo","mn","ms","mtext","annotation-xml","foreignObject","desc","title"]),m=new Set(["svg","math"])},91195:function(e,t,n){"use strict";var a=this&&this.__createBinding||(Object.create?function(e,t,n,a){void 0===a&&(a=n);var r=Object.getOwnPropertyDescriptor(t,n);r&&!("get"in r?!t.__esModule:r.writable||r.configurable)||(r={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,a,r)}:function(e,t,n,a){void 0===a&&(a=n),e[a]=t[n]}),r=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),i=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&a(t,e,n);return r(t,e),t},o=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.decodeXML=t.decodeHTMLStrict=t.decodeHTMLAttribute=t.decodeHTML=t.determineBranch=t.EntityDecoder=t.DecodingMode=t.BinTrieFlags=t.fromCodePoint=t.replaceCodePoint=t.decodeCodePoint=t.xmlDecodeTree=t.htmlDecodeTree=void 0;var d=o(n(64707));t.htmlDecodeTree=d.default;var s=o(n(56912));t.xmlDecodeTree=s.default;var c=i(n(89815));t.decodeCodePoint=c.default;var u,l=n(89815);Object.defineProperty(t,"replaceCodePoint",{enumerable:!0,get:function(){return l.replaceCodePoint}}),Object.defineProperty(t,"fromCodePoint",{enumerable:!0,get:function(){return l.fromCodePoint}}),function(e){e[e.NUM=35]="NUM",e[e.SEMI=59]="SEMI",e[e.EQUALS=61]="EQUALS",e[e.ZERO=48]="ZERO",e[e.NINE=57]="NINE",e[e.LOWER_A=97]="LOWER_A",e[e.LOWER_F=102]="LOWER_F",e[e.LOWER_X=120]="LOWER_X",e[e.LOWER_Z=122]="LOWER_Z",e[e.UPPER_A=65]="UPPER_A",e[e.UPPER_F=70]="UPPER_F",e[e.UPPER_Z=90]="UPPER_Z"}(u||(u={}));var g,h,f;function p(e){return e>=u.ZERO&&e<=u.NINE}function m(e){return e===u.EQUALS||function(e){return e>=u.UPPER_A&&e<=u.UPPER_Z||e>=u.LOWER_A&&e<=u.LOWER_Z||p(e)}(e)}!function(e){e[e.VALUE_LENGTH=49152]="VALUE_LENGTH",e[e.BRANCH_LENGTH=16256]="BRANCH_LENGTH",e[e.JUMP_TABLE=127]="JUMP_TABLE"}(g=t.BinTrieFlags||(t.BinTrieFlags={})),function(e){e[e.EntityStart=0]="EntityStart",e[e.NumericStart=1]="NumericStart",e[e.NumericDecimal=2]="NumericDecimal",e[e.NumericHex=3]="NumericHex",e[e.NamedEntity=4]="NamedEntity"}(h||(h={})),function(e){e[e.Legacy=0]="Legacy",e[e.Strict=1]="Strict",e[e.Attribute=2]="Attribute"}(f=t.DecodingMode||(t.DecodingMode={}));var R=function(){function e(e,t,n){this.decodeTree=e,this.emitCodePoint=t,this.errors=n,this.state=h.EntityStart,this.consumed=1,this.result=0,this.treeIndex=0,this.excess=1,this.decodeMode=f.Strict}return e.prototype.startEntity=function(e){this.decodeMode=e,this.state=h.EntityStart,this.result=0,this.treeIndex=0,this.excess=1,this.consumed=1},e.prototype.write=function(e,t){switch(this.state){case h.EntityStart:return e.charCodeAt(t)===u.NUM?(this.state=h.NumericStart,this.consumed+=1,this.stateNumericStart(e,t+1)):(this.state=h.NamedEntity,this.stateNamedEntity(e,t));case h.NumericStart:return this.stateNumericStart(e,t);case h.NumericDecimal:return this.stateNumericDecimal(e,t);case h.NumericHex:return this.stateNumericHex(e,t);case h.NamedEntity:return this.stateNamedEntity(e,t)}},e.prototype.stateNumericStart=function(e,t){return t>=e.length?-1:(32|e.charCodeAt(t))===u.LOWER_X?(this.state=h.NumericHex,this.consumed+=1,this.stateNumericHex(e,t+1)):(this.state=h.NumericDecimal,this.stateNumericDecimal(e,t))},e.prototype.addToNumericResult=function(e,t,n,a){if(t!==n){var r=n-t;this.result=this.result*Math.pow(a,r)+parseInt(e.substr(t,r),a),this.consumed+=r}},e.prototype.stateNumericHex=function(e,t){for(var n,a=t;t<e.length;){var r=e.charCodeAt(t);if(!(p(r)||(n=r,n>=u.UPPER_A&&n<=u.UPPER_F||n>=u.LOWER_A&&n<=u.LOWER_F)))return this.addToNumericResult(e,a,t,16),this.emitNumericEntity(r,3);t+=1}return this.addToNumericResult(e,a,t,16),-1},e.prototype.stateNumericDecimal=function(e,t){for(var n=t;t<e.length;){var a=e.charCodeAt(t);if(!p(a))return this.addToNumericResult(e,n,t,10),this.emitNumericEntity(a,2);t+=1}return this.addToNumericResult(e,n,t,10),-1},e.prototype.emitNumericEntity=function(e,t){var n;if(this.consumed<=t)return null===(n=this.errors)||void 0===n||n.absenceOfDigitsInNumericCharacterReference(this.consumed),0;if(e===u.SEMI)this.consumed+=1;else if(this.decodeMode===f.Strict)return 0;return this.emitCodePoint((0,c.replaceCodePoint)(this.result),this.consumed),this.errors&&(e!==u.SEMI&&this.errors.missingSemicolonAfterCharacterReference(),this.errors.validateNumericCharacterReference(this.result)),this.consumed},e.prototype.stateNamedEntity=function(e,t){for(var n=this.decodeTree,a=n[this.treeIndex],r=(a&g.VALUE_LENGTH)>>14;t<e.length;t++,this.excess++){var i=e.charCodeAt(t);if(this.treeIndex=y(n,a,this.treeIndex+Math.max(1,r),i),this.treeIndex<0)return 0===this.result||this.decodeMode===f.Attribute&&(0===r||m(i))?0:this.emitNotTerminatedNamedEntity();if(0!==(r=((a=n[this.treeIndex])&g.VALUE_LENGTH)>>14)){if(i===u.SEMI)return this.emitNamedEntityData(this.treeIndex,r,this.consumed+this.excess);this.decodeMode!==f.Strict&&(this.result=this.treeIndex,this.consumed+=this.excess,this.excess=0)}}return-1},e.prototype.emitNotTerminatedNamedEntity=function(){var e,t=this.result,n=(this.decodeTree[t]&g.VALUE_LENGTH)>>14;return this.emitNamedEntityData(t,n,this.consumed),null===(e=this.errors)||void 0===e||e.missingSemicolonAfterCharacterReference(),this.consumed},e.prototype.emitNamedEntityData=function(e,t,n){var a=this.decodeTree;return this.emitCodePoint(1===t?a[e]&~g.VALUE_LENGTH:a[e+1],n),3===t&&this.emitCodePoint(a[e+2],n),n},e.prototype.end=function(){var e;switch(this.state){case h.NamedEntity:return 0===this.result||this.decodeMode===f.Attribute&&this.result!==this.treeIndex?0:this.emitNotTerminatedNamedEntity();case h.NumericDecimal:return this.emitNumericEntity(0,2);case h.NumericHex:return this.emitNumericEntity(0,3);case h.NumericStart:return null===(e=this.errors)||void 0===e||e.absenceOfDigitsInNumericCharacterReference(this.consumed),0;case h.EntityStart:return 0}},e}();function b(e){var t="",n=new R(e,(function(e){return t+=(0,c.fromCodePoint)(e)}));return function(e,a){for(var r=0,i=0;(i=e.indexOf("&",i))>=0;){t+=e.slice(r,i),n.startEntity(a);var o=n.write(e,i+1);if(o<0){r=i+n.end();break}r=i+o,i=0===o?r+1:r}var d=t+e.slice(r);return t="",d}}function y(e,t,n,a){var r=(t&g.BRANCH_LENGTH)>>7,i=t&g.JUMP_TABLE;if(0===r)return 0!==i&&a===i?n:-1;if(i){var o=a-i;return o<0||o>=r?-1:e[n+o]-1}for(var d=n,s=d+r-1;d<=s;){var c=d+s>>>1,u=e[c];if(u<a)d=c+1;else{if(!(u>a))return e[c+r];s=c-1}}return-1}t.EntityDecoder=R,t.determineBranch=y;var v=b(d.default),_=b(s.default);t.decodeHTML=function(e,t){return void 0===t&&(t=f.Legacy),v(e,t)},t.decodeHTMLAttribute=function(e){return v(e,f.Attribute)},t.decodeHTMLStrict=function(e){return v(e,f.Strict)},t.decodeXML=function(e){return _(e,f.Strict)}},89815:function(e,t){"use strict";var n;Object.defineProperty(t,"__esModule",{value:!0}),t.replaceCodePoint=t.fromCodePoint=void 0;var a=new Map([[0,65533],[128,8364],[130,8218],[131,402],[132,8222],[133,8230],[134,8224],[135,8225],[136,710],[137,8240],[138,352],[139,8249],[140,338],[142,381],[145,8216],[146,8217],[147,8220],[148,8221],[149,8226],[150,8211],[151,8212],[152,732],[153,8482],[154,353],[155,8250],[156,339],[158,382],[159,376]]);function r(e){var t;return e>=55296&&e<=57343||e>1114111?65533:null!==(t=a.get(e))&&void 0!==t?t:e}t.fromCodePoint=null!==(n=String.fromCodePoint)&&void 0!==n?n:function(e){var t="";return e>65535&&(e-=65536,t+=String.fromCharCode(e>>>10&1023|55296),e=56320|1023&e),t+=String.fromCharCode(e)},t.replaceCodePoint=r,t.default=function(e){return(0,t.fromCodePoint)(r(e))}},31108:function(e,t,n){"use strict";var a=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.encodeNonAsciiHTML=t.encodeHTML=void 0;var r=a(n(94348)),i=n(95085),o=/[\t\n!-,./:-@[-`\f{-}$\x80-\uFFFF]/g;function d(e,t){for(var n,a="",o=0;null!==(n=e.exec(t));){var d=n.index;a+=t.substring(o,d);var s=t.charCodeAt(d),c=r.default.get(s);if("object"==typeof c){if(d+1<t.length){var u=t.charCodeAt(d+1),l="number"==typeof c.n?c.n===u?c.o:void 0:c.n.get(u);if(void 0!==l){a+=l,o=e.lastIndex+=1;continue}}c=c.v}if(void 0!==c)a+=c,o=d+1;else{var g=(0,i.getCodePoint)(t,d);a+="&#x".concat(g.toString(16),";"),o=e.lastIndex+=Number(g!==s)}}return a+t.substr(o)}t.encodeHTML=function(e){return d(o,e)},t.encodeNonAsciiHTML=function(e){return d(i.xmlReplacer,e)}},95085:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.escapeText=t.escapeAttribute=t.escapeUTF8=t.escape=t.encodeXML=t.getCodePoint=t.xmlReplacer=void 0,t.xmlReplacer=/["&'<>$\x80-\uFFFF]/g;var n=new Map([[34,"&quot;"],[38,"&amp;"],[39,"&apos;"],[60,"&lt;"],[62,"&gt;"]]);function a(e){for(var a,r="",i=0;null!==(a=t.xmlReplacer.exec(e));){var o=a.index,d=e.charCodeAt(o),s=n.get(d);void 0!==s?(r+=e.substring(i,o)+s,i=o+1):(r+="".concat(e.substring(i,o),"&#x").concat((0,t.getCodePoint)(e,o).toString(16),";"),i=t.xmlReplacer.lastIndex+=Number(55296==(64512&d)))}return r+e.substr(i)}function r(e,t){return function(n){for(var a,r=0,i="";a=e.exec(n);)r!==a.index&&(i+=n.substring(r,a.index)),i+=t.get(a[0].charCodeAt(0)),r=a.index+1;return i+n.substring(r)}}t.getCodePoint=null!=String.prototype.codePointAt?function(e,t){return e.codePointAt(t)}:function(e,t){return 55296==(64512&e.charCodeAt(t))?1024*(e.charCodeAt(t)-55296)+e.charCodeAt(t+1)-56320+65536:e.charCodeAt(t)},t.encodeXML=a,t.escape=a,t.escapeUTF8=r(/[&<>'"]/g,n),t.escapeAttribute=r(/["&\u00A0]/g,new Map([[34,"&quot;"],[38,"&amp;"],[160,"&nbsp;"]])),t.escapeText=r(/[&<>\u00A0]/g,new Map([[38,"&amp;"],[60,"&lt;"],[62,"&gt;"],[160,"&nbsp;"]]))},64707:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=new Uint16Array('ᵁ<Õıʊҝջאٵ۞ޢߖࠏ੊ઑඡ๭༉༦჊ረዡᐕᒝᓃᓟᔥ\0\0\0\0\0\0ᕫᛍᦍᰒᷝ὾⁠↰⊍⏀⏻⑂⠤⤒ⴈ⹈⿎〖㊺㘹㞬㣾㨨㩱㫠㬮ࠀEMabcfglmnoprstu\\bfms„‹•˜¦³¹ÈÏlig耻Æ䃆P耻&䀦cute耻Á䃁reve;䄂Āiyx}rc耻Â䃂;䐐r;쀀𝔄rave耻À䃀pha;䎑acr;䄀d;橓Āgp¡on;䄄f;쀀𝔸plyFunction;恡ing耻Å䃅Ācs¾Ãr;쀀𝒜ign;扔ilde耻Ã䃃ml耻Ä䃄ЀaceforsuåûþėĜĢħĪĀcrêòkslash;或Ŷöø;櫧ed;挆y;䐑ƀcrtąċĔause;戵noullis;愬a;䎒r;쀀𝔅pf;쀀𝔹eve;䋘còēmpeq;扎܀HOacdefhilorsuōőŖƀƞƢƵƷƺǜȕɳɸɾcy;䐧PY耻©䂩ƀcpyŝŢźute;䄆Ā;iŧŨ拒talDifferentialD;慅leys;愭ȀaeioƉƎƔƘron;䄌dil耻Ç䃇rc;䄈nint;戰ot;䄊ĀdnƧƭilla;䂸terDot;䂷òſi;䎧rcleȀDMPTLJNjǑǖot;抙inus;抖lus;投imes;抗oĀcsǢǸkwiseContourIntegral;戲eCurlyĀDQȃȏoubleQuote;思uote;怙ȀlnpuȞȨɇɕonĀ;eȥȦ户;橴ƀgitȯȶȺruent;扡nt;戯ourIntegral;戮ĀfrɌɎ;愂oduct;成nterClockwiseContourIntegral;戳oss;樯cr;쀀𝒞pĀ;Cʄʅ拓ap;才րDJSZacefiosʠʬʰʴʸˋ˗ˡ˦̳ҍĀ;oŹʥtrahd;椑cy;䐂cy;䐅cy;䐏ƀgrsʿ˄ˇger;怡r;憡hv;櫤Āayː˕ron;䄎;䐔lĀ;t˝˞戇a;䎔r;쀀𝔇Āaf˫̧Ācm˰̢riticalȀADGT̖̜̀̆cute;䂴oŴ̋̍;䋙bleAcute;䋝rave;䁠ilde;䋜ond;拄ferentialD;慆Ѱ̽\0\0\0͔͂\0Ѕf;쀀𝔻ƀ;DE͈͉͍䂨ot;惜qual;扐blèCDLRUVͣͲ΂ϏϢϸontourIntegraìȹoɴ͹\0\0ͻ»͉nArrow;懓Āeo·ΤftƀARTΐΖΡrrow;懐ightArrow;懔eåˊngĀLRΫτeftĀARγιrrow;柸ightArrow;柺ightArrow;柹ightĀATϘϞrrow;懒ee;抨pɁϩ\0\0ϯrrow;懑ownArrow;懕erticalBar;戥ǹABLRTaВЪаўѿͼrrowƀ;BUНОТ憓ar;椓pArrow;懵reve;䌑eft˒к\0ц\0ѐightVector;楐eeVector;楞ectorĀ;Bљњ憽ar;楖ightǔѧ\0ѱeeVector;楟ectorĀ;BѺѻ懁ar;楗eeĀ;A҆҇护rrow;憧ĀctҒҗr;쀀𝒟rok;䄐ࠀNTacdfglmopqstuxҽӀӄӋӞӢӧӮӵԡԯԶՒ՝ՠեG;䅊H耻Ð䃐cute耻É䃉ƀaiyӒӗӜron;䄚rc耻Ê䃊;䐭ot;䄖r;쀀𝔈rave耻È䃈ement;戈ĀapӺӾcr;䄒tyɓԆ\0\0ԒmallSquare;旻erySmallSquare;斫ĀgpԦԪon;䄘f;쀀𝔼silon;䎕uĀaiԼՉlĀ;TՂՃ橵ilde;扂librium;懌Āci՗՚r;愰m;橳a;䎗ml耻Ë䃋Āipժկsts;戃onentialE;慇ʀcfiosօֈ֍ֲ׌y;䐤r;쀀𝔉lledɓ֗\0\0֣mallSquare;旼erySmallSquare;斪Ͱֺ\0ֿ\0\0ׄf;쀀𝔽All;戀riertrf;愱cò׋؀JTabcdfgorstר׬ׯ׺؀ؒؖ؛؝أ٬ٲcy;䐃耻>䀾mmaĀ;d׷׸䎓;䏜reve;䄞ƀeiy؇،ؐdil;䄢rc;䄜;䐓ot;䄠r;쀀𝔊;拙pf;쀀𝔾eater̀EFGLSTصلَٖٛ٦qualĀ;Lؾؿ扥ess;招ullEqual;执reater;檢ess;扷lantEqual;橾ilde;扳cr;쀀𝒢;扫ЀAacfiosuڅڋږڛڞڪھۊRDcy;䐪Āctڐڔek;䋇;䁞irc;䄤r;愌lbertSpace;愋ǰگ\0ڲf;愍izontalLine;攀Āctۃۅòکrok;䄦mpńېۘownHumðįqual;扏܀EJOacdfgmnostuۺ۾܃܇܎ܚܞܡܨ݄ݸދޏޕcy;䐕lig;䄲cy;䐁cute耻Í䃍Āiyܓܘrc耻Î䃎;䐘ot;䄰r;愑rave耻Ì䃌ƀ;apܠܯܿĀcgܴܷr;䄪inaryI;慈lieóϝǴ݉\0ݢĀ;eݍݎ戬Āgrݓݘral;戫section;拂isibleĀCTݬݲomma;恣imes;恢ƀgptݿރވon;䄮f;쀀𝕀a;䎙cr;愐ilde;䄨ǫޚ\0ޞcy;䐆l耻Ï䃏ʀcfosuެ޷޼߂ߐĀiyޱ޵rc;䄴;䐙r;쀀𝔍pf;쀀𝕁ǣ߇\0ߌr;쀀𝒥rcy;䐈kcy;䐄΀HJacfosߤߨ߽߬߱ࠂࠈcy;䐥cy;䐌ppa;䎚Āey߶߻dil;䄶;䐚r;쀀𝔎pf;쀀𝕂cr;쀀𝒦րJTaceflmostࠥࠩࠬࡐࡣ঳সে্਷ੇcy;䐉耻<䀼ʀcmnpr࠷࠼ࡁࡄࡍute;䄹bda;䎛g;柪lacetrf;愒r;憞ƀaeyࡗ࡜ࡡron;䄽dil;䄻;䐛Āfsࡨ॰tԀACDFRTUVarࡾࢩࢱࣦ࣠ࣼयज़ΐ४Ānrࢃ࢏gleBracket;柨rowƀ;BR࢙࢚࢞憐ar;懤ightArrow;懆eiling;挈oǵࢷ\0ࣃbleBracket;柦nǔࣈ\0࣒eeVector;楡ectorĀ;Bࣛࣜ懃ar;楙loor;挊ightĀAV࣯ࣵrrow;憔ector;楎Āerँगeƀ;AVउऊऐ抣rrow;憤ector;楚iangleƀ;BEतथऩ抲ar;槏qual;抴pƀDTVषूौownVector;楑eeVector;楠ectorĀ;Bॖॗ憿ar;楘ectorĀ;B॥०憼ar;楒ightáΜs̀EFGLSTॾঋকঝঢভqualGreater;拚ullEqual;扦reater;扶ess;檡lantEqual;橽ilde;扲r;쀀𝔏Ā;eঽা拘ftarrow;懚idot;䄿ƀnpw৔ਖਛgȀLRlr৞৷ਂਐeftĀAR০৬rrow;柵ightArrow;柷ightArrow;柶eftĀarγਊightáοightáϊf;쀀𝕃erĀLRਢਬeftArrow;憙ightArrow;憘ƀchtਾੀੂòࡌ;憰rok;䅁;扪Ѐacefiosuਗ਼੝੠੷੼અઋ઎p;椅y;䐜Ādl੥੯iumSpace;恟lintrf;愳r;쀀𝔐nusPlus;戓pf;쀀𝕄cò੶;䎜ҀJacefostuણધભીଔଙඑ඗ඞcy;䐊cute;䅃ƀaey઴હાron;䅇dil;䅅;䐝ƀgswે૰଎ativeƀMTV૓૟૨ediumSpace;怋hiĀcn૦૘ë૙eryThiî૙tedĀGL૸ଆreaterGreateòٳessLesóੈLine;䀊r;쀀𝔑ȀBnptଢନଷ଺reak;恠BreakingSpace;䂠f;愕ڀ;CDEGHLNPRSTV୕ୖ୪୼஡௫ఄ౞಄ದ೘ൡඅ櫬Āou୛୤ngruent;扢pCap;扭oubleVerticalBar;戦ƀlqxஃஊ஛ement;戉ualĀ;Tஒஓ扠ilde;쀀≂̸ists;戄reater΀;EFGLSTஶஷ஽௉௓௘௥扯qual;扱ullEqual;쀀≧̸reater;쀀≫̸ess;批lantEqual;쀀⩾̸ilde;扵umpń௲௽ownHump;쀀≎̸qual;쀀≏̸eĀfsఊధtTriangleƀ;BEచఛడ拪ar;쀀⧏̸qual;括s̀;EGLSTవశ఼ౄోౘ扮qual;扰reater;扸ess;쀀≪̸lantEqual;쀀⩽̸ilde;扴estedĀGL౨౹reaterGreater;쀀⪢̸essLess;쀀⪡̸recedesƀ;ESಒಓಛ技qual;쀀⪯̸lantEqual;拠ĀeiಫಹverseElement;戌ghtTriangleƀ;BEೋೌ೒拫ar;쀀⧐̸qual;拭ĀquೝഌuareSuĀbp೨೹setĀ;E೰ೳ쀀⊏̸qual;拢ersetĀ;Eഃആ쀀⊐̸qual;拣ƀbcpഓതൎsetĀ;Eഛഞ쀀⊂⃒qual;抈ceedsȀ;ESTലള഻െ抁qual;쀀⪰̸lantEqual;拡ilde;쀀≿̸ersetĀ;E൘൛쀀⊃⃒qual;抉ildeȀ;EFT൮൯൵ൿ扁qual;扄ullEqual;扇ilde;扉erticalBar;戤cr;쀀𝒩ilde耻Ñ䃑;䎝܀Eacdfgmoprstuvලෂ෉෕ෛ෠෧෼ขภยา฿ไlig;䅒cute耻Ó䃓Āiy෎ීrc耻Ô䃔;䐞blac;䅐r;쀀𝔒rave耻Ò䃒ƀaei෮ෲ෶cr;䅌ga;䎩cron;䎟pf;쀀𝕆enCurlyĀDQฎบoubleQuote;怜uote;怘;橔Āclวฬr;쀀𝒪ash耻Ø䃘iŬื฼de耻Õ䃕es;樷ml耻Ö䃖erĀBP๋๠Āar๐๓r;怾acĀek๚๜;揞et;掴arenthesis;揜Ҁacfhilors๿ງຊຏຒດຝະ໼rtialD;戂y;䐟r;쀀𝔓i;䎦;䎠usMinus;䂱Āipຢອncareplanåڝf;愙Ȁ;eio຺ູ໠໤檻cedesȀ;EST່້໏໚扺qual;檯lantEqual;扼ilde;找me;怳Ādp໩໮uct;戏ortionĀ;aȥ໹l;戝Āci༁༆r;쀀𝒫;䎨ȀUfos༑༖༛༟OT耻"䀢r;쀀𝔔pf;愚cr;쀀𝒬؀BEacefhiorsu༾གྷཇའཱིྦྷྪྭ႖ႩႴႾarr;椐G耻®䂮ƀcnrཎནབute;䅔g;柫rĀ;tཛྷཝ憠l;椖ƀaeyཧཬཱron;䅘dil;䅖;䐠Ā;vླྀཹ愜erseĀEUྂྙĀlq྇ྎement;戋uilibrium;懋pEquilibrium;楯r»ཹo;䎡ghtЀACDFTUVa࿁࿫࿳ဢဨၛႇϘĀnr࿆࿒gleBracket;柩rowƀ;BL࿜࿝࿡憒ar;懥eftArrow;懄eiling;按oǵ࿹\0စbleBracket;柧nǔည\0နeeVector;楝ectorĀ;Bဝသ懂ar;楕loor;挋Āerိ၃eƀ;AVဵံြ抢rrow;憦ector;楛iangleƀ;BEၐၑၕ抳ar;槐qual;抵pƀDTVၣၮၸownVector;楏eeVector;楜ectorĀ;Bႂႃ憾ar;楔ectorĀ;B႑႒懀ar;楓Āpuႛ႞f;愝ndImplies;楰ightarrow;懛ĀchႹႼr;愛;憱leDelayed;槴ڀHOacfhimoqstuფჱჷჽᄙᄞᅑᅖᅡᅧᆵᆻᆿĀCcჩხHcy;䐩y;䐨FTcy;䐬cute;䅚ʀ;aeiyᄈᄉᄎᄓᄗ檼ron;䅠dil;䅞rc;䅜;䐡r;쀀𝔖ortȀDLRUᄪᄴᄾᅉownArrow»ОeftArrow»࢚ightArrow»࿝pArrow;憑gma;䎣allCircle;战pf;쀀𝕊ɲᅭ\0\0ᅰt;戚areȀ;ISUᅻᅼᆉᆯ斡ntersection;抓uĀbpᆏᆞsetĀ;Eᆗᆘ抏qual;抑ersetĀ;Eᆨᆩ抐qual;抒nion;抔cr;쀀𝒮ar;拆ȀbcmpᇈᇛሉላĀ;sᇍᇎ拐etĀ;Eᇍᇕqual;抆ĀchᇠህeedsȀ;ESTᇭᇮᇴᇿ扻qual;檰lantEqual;扽ilde;承Tháྌ;我ƀ;esሒሓሣ拑rsetĀ;Eሜም抃qual;抇et»ሓրHRSacfhiorsሾቄ቉ቕ቞ቱቶኟዂወዑORN耻Þ䃞ADE;愢ĀHc቎ቒcy;䐋y;䐦Ābuቚቜ;䀉;䎤ƀaeyብቪቯron;䅤dil;䅢;䐢r;쀀𝔗Āeiቻ኉Dzኀ\0ኇefore;戴a;䎘Ācn኎ኘkSpace;쀀  Space;怉ldeȀ;EFTካኬኲኼ戼qual;扃ullEqual;扅ilde;扈pf;쀀𝕋ipleDot;惛Āctዖዛr;쀀𝒯rok;䅦ૡዷጎጚጦ\0ጬጱ\0\0\0\0\0ጸጽ፷ᎅ\0᏿ᐄᐊᐐĀcrዻጁute耻Ú䃚rĀ;oጇገ憟cir;楉rǣጓ\0጖y;䐎ve;䅬Āiyጞጣrc耻Û䃛;䐣blac;䅰r;쀀𝔘rave耻Ù䃙acr;䅪Ādiፁ፩erĀBPፈ፝Āarፍፐr;䁟acĀekፗፙ;揟et;掵arenthesis;揝onĀ;P፰፱拃lus;抎Āgp፻፿on;䅲f;쀀𝕌ЀADETadps᎕ᎮᎸᏄϨᏒᏗᏳrrowƀ;BDᅐᎠᎤar;椒ownArrow;懅ownArrow;憕quilibrium;楮eeĀ;AᏋᏌ报rrow;憥ownáϳerĀLRᏞᏨeftArrow;憖ightArrow;憗iĀ;lᏹᏺ䏒on;䎥ing;䅮cr;쀀𝒰ilde;䅨ml耻Ü䃜ҀDbcdefosvᐧᐬᐰᐳᐾᒅᒊᒐᒖash;披ar;櫫y;䐒ashĀ;lᐻᐼ抩;櫦Āerᑃᑅ;拁ƀbtyᑌᑐᑺar;怖Ā;iᑏᑕcalȀBLSTᑡᑥᑪᑴar;戣ine;䁼eparator;杘ilde;所ThinSpace;怊r;쀀𝔙pf;쀀𝕍cr;쀀𝒱dash;抪ʀcefosᒧᒬᒱᒶᒼirc;䅴dge;拀r;쀀𝔚pf;쀀𝕎cr;쀀𝒲Ȁfiosᓋᓐᓒᓘr;쀀𝔛;䎞pf;쀀𝕏cr;쀀𝒳ҀAIUacfosuᓱᓵᓹᓽᔄᔏᔔᔚᔠcy;䐯cy;䐇cy;䐮cute耻Ý䃝Āiyᔉᔍrc;䅶;䐫r;쀀𝔜pf;쀀𝕐cr;쀀𝒴ml;䅸ЀHacdefosᔵᔹᔿᕋᕏᕝᕠᕤcy;䐖cute;䅹Āayᕄᕉron;䅽;䐗ot;䅻Dzᕔ\0ᕛoWidtè૙a;䎖r;愨pf;愤cr;쀀𝒵௡ᖃᖊᖐ\0ᖰᖶᖿ\0\0\0\0ᗆᗛᗫᙟ᙭\0ᚕ᚛ᚲᚹ\0ᚾcute耻á䃡reve;䄃̀;Ediuyᖜᖝᖡᖣᖨᖭ戾;쀀∾̳;房rc耻â䃢te肻´̆;䐰lig耻æ䃦Ā;r²ᖺ;쀀𝔞rave耻à䃠ĀepᗊᗖĀfpᗏᗔsym;愵èᗓha;䎱ĀapᗟcĀclᗤᗧr;䄁g;樿ɤᗰ\0\0ᘊʀ;adsvᗺᗻᗿᘁᘇ戧nd;橕;橜lope;橘;橚΀;elmrszᘘᘙᘛᘞᘿᙏᙙ戠;榤e»ᘙsdĀ;aᘥᘦ戡ѡᘰᘲᘴᘶᘸᘺᘼᘾ;榨;榩;榪;榫;榬;榭;榮;榯tĀ;vᙅᙆ戟bĀ;dᙌᙍ抾;榝Āptᙔᙗh;戢»¹arr;捼Āgpᙣᙧon;䄅f;쀀𝕒΀;Eaeiop዁ᙻᙽᚂᚄᚇᚊ;橰cir;橯;扊d;手s;䀧roxĀ;e዁ᚒñᚃing耻å䃥ƀctyᚡᚦᚨr;쀀𝒶;䀪mpĀ;e዁ᚯñʈilde耻ã䃣ml耻ä䃤Āciᛂᛈoninôɲnt;樑ࠀNabcdefiklnoprsu᛭ᛱᜰ᜼ᝃᝈ᝸᝽០៦ᠹᡐᜍ᤽᥈ᥰot;櫭Ācrᛶ᜞kȀcepsᜀᜅᜍᜓong;扌psilon;䏶rime;怵imĀ;e᜚᜛戽q;拍Ŷᜢᜦee;抽edĀ;gᜬᜭ挅e»ᜭrkĀ;t፜᜷brk;掶Āoyᜁᝁ;䐱quo;怞ʀcmprtᝓ᝛ᝡᝤᝨausĀ;eĊĉptyv;榰séᜌnoõēƀahwᝯ᝱ᝳ;䎲;愶een;扬r;쀀𝔟g΀costuvwឍឝឳេ៕៛៞ƀaiuបពរðݠrc;旯p»፱ƀdptឤឨឭot;樀lus;樁imes;樂ɱឹ\0\0ើcup;樆ar;昅riangleĀdu៍្own;施p;斳plus;樄eåᑄåᒭarow;植ƀako៭ᠦᠵĀcn៲ᠣkƀlst៺֫᠂ozenge;槫riangleȀ;dlr᠒᠓᠘᠝斴own;斾eft;旂ight;斸k;搣Ʊᠫ\0ᠳƲᠯ\0ᠱ;斒;斑4;斓ck;斈ĀeoᠾᡍĀ;qᡃᡆ쀀=⃥uiv;쀀≡⃥t;挐Ȁptwxᡙᡞᡧᡬf;쀀𝕓Ā;tᏋᡣom»Ꮜtie;拈؀DHUVbdhmptuvᢅᢖᢪᢻᣗᣛᣬ᣿ᤅᤊᤐᤡȀLRlrᢎᢐᢒᢔ;敗;敔;敖;敓ʀ;DUduᢡᢢᢤᢦᢨ敐;敦;敩;敤;敧ȀLRlrᢳᢵᢷᢹ;敝;敚;敜;教΀;HLRhlrᣊᣋᣍᣏᣑᣓᣕ救;敬;散;敠;敫;敢;敟ox;槉ȀLRlrᣤᣦᣨᣪ;敕;敒;攐;攌ʀ;DUduڽ᣷᣹᣻᣽;敥;敨;攬;攴inus;抟lus;択imes;抠ȀLRlrᤙᤛᤝ᤟;敛;敘;攘;攔΀;HLRhlrᤰᤱᤳᤵᤷ᤻᤹攂;敪;敡;敞;攼;攤;攜Āevģ᥂bar耻¦䂦Ȁceioᥑᥖᥚᥠr;쀀𝒷mi;恏mĀ;e᜚᜜lƀ;bhᥨᥩᥫ䁜;槅sub;柈Ŭᥴ᥾lĀ;e᥹᥺怢t»᥺pƀ;Eeįᦅᦇ;檮Ā;qۜۛೡᦧ\0᧨ᨑᨕᨲ\0ᨷᩐ\0\0᪴\0\0᫁\0\0ᬡᬮ᭍᭒\0᯽\0ᰌƀcpr᦭ᦲ᧝ute;䄇̀;abcdsᦿᧀᧄ᧊᧕᧙戩nd;橄rcup;橉Āau᧏᧒p;橋p;橇ot;橀;쀀∩︀Āeo᧢᧥t;恁îړȀaeiu᧰᧻ᨁᨅǰ᧵\0᧸s;橍on;䄍dil耻ç䃧rc;䄉psĀ;sᨌᨍ橌m;橐ot;䄋ƀdmnᨛᨠᨦil肻¸ƭptyv;榲t脀¢;eᨭᨮ䂢räƲr;쀀𝔠ƀceiᨽᩀᩍy;䑇ckĀ;mᩇᩈ朓ark»ᩈ;䏇r΀;Ecefms᩟᩠ᩢᩫ᪤᪪᪮旋;槃ƀ;elᩩᩪᩭ䋆q;扗eɡᩴ\0\0᪈rrowĀlr᩼᪁eft;憺ight;憻ʀRSacd᪒᪔᪖᪚᪟»ཇ;擈st;抛irc;抚ash;抝nint;樐id;櫯cir;槂ubsĀ;u᪻᪼晣it»᪼ˬ᫇᫔᫺\0ᬊonĀ;eᫍᫎ䀺Ā;qÇÆɭ᫙\0\0᫢aĀ;t᫞᫟䀬;䁀ƀ;fl᫨᫩᫫戁îᅠeĀmx᫱᫶ent»᫩eóɍǧ᫾\0ᬇĀ;dኻᬂot;橭nôɆƀfryᬐᬔᬗ;쀀𝕔oäɔ脀©;sŕᬝr;愗Āaoᬥᬩrr;憵ss;朗Ācuᬲᬷr;쀀𝒸Ābpᬼ᭄Ā;eᭁᭂ櫏;櫑Ā;eᭉᭊ櫐;櫒dot;拯΀delprvw᭠᭬᭷ᮂᮬᯔ᯹arrĀlr᭨᭪;椸;椵ɰ᭲\0\0᭵r;拞c;拟arrĀ;p᭿ᮀ憶;椽̀;bcdosᮏᮐᮖᮡᮥᮨ截rcap;橈Āauᮛᮞp;橆p;橊ot;抍r;橅;쀀∪︀Ȁalrv᮵ᮿᯞᯣrrĀ;mᮼᮽ憷;椼yƀevwᯇᯔᯘqɰᯎ\0\0ᯒreã᭳uã᭵ee;拎edge;拏en耻¤䂤earrowĀlrᯮ᯳eft»ᮀight»ᮽeäᯝĀciᰁᰇoninôǷnt;戱lcty;挭ঀAHabcdefhijlorstuwz᰸᰻᰿ᱝᱩᱵᲊᲞᲬᲷ᳻᳿ᴍᵻᶑᶫᶻ᷆᷍rò΁ar;楥Ȁglrs᱈ᱍ᱒᱔ger;怠eth;愸òᄳhĀ;vᱚᱛ怐»ऊūᱡᱧarow;椏aã̕Āayᱮᱳron;䄏;䐴ƀ;ao̲ᱼᲄĀgrʿᲁr;懊tseq;橷ƀglmᲑᲔᲘ耻°䂰ta;䎴ptyv;榱ĀirᲣᲨsht;楿;쀀𝔡arĀlrᲳᲵ»ࣜ»သʀaegsv᳂͸᳖᳜᳠mƀ;oș᳊᳔ndĀ;ș᳑uit;晦amma;䏝in;拲ƀ;io᳧᳨᳸䃷de脀÷;o᳧ᳰntimes;拇nø᳷cy;䑒cɯᴆ\0\0ᴊrn;挞op;挍ʀlptuwᴘᴝᴢᵉᵕlar;䀤f;쀀𝕕ʀ;emps̋ᴭᴷᴽᵂqĀ;d͒ᴳot;扑inus;戸lus;戔quare;抡blebarwedgåúnƀadhᄮᵝᵧownarrowóᲃarpoonĀlrᵲᵶefôᲴighôᲶŢᵿᶅkaro÷གɯᶊ\0\0ᶎrn;挟op;挌ƀcotᶘᶣᶦĀryᶝᶡ;쀀𝒹;䑕l;槶rok;䄑Ādrᶰᶴot;拱iĀ;fᶺ᠖斿Āah᷀᷃ròЩaòྦangle;榦Āci᷒ᷕy;䑟grarr;柿ऀDacdefglmnopqrstuxḁḉḙḸոḼṉṡṾấắẽỡἪἷὄ὎὚ĀDoḆᴴoôᲉĀcsḎḔute耻é䃩ter;橮ȀaioyḢḧḱḶron;䄛rĀ;cḭḮ扖耻ê䃪lon;払;䑍ot;䄗ĀDrṁṅot;扒;쀀𝔢ƀ;rsṐṑṗ檚ave耻è䃨Ā;dṜṝ檖ot;檘Ȁ;ilsṪṫṲṴ檙nters;揧;愓Ā;dṹṺ檕ot;檗ƀapsẅẉẗcr;䄓tyƀ;svẒẓẕ戅et»ẓpĀ1;ẝẤijạả;怄;怅怃ĀgsẪẬ;䅋p;怂ĀgpẴẸon;䄙f;쀀𝕖ƀalsỄỎỒrĀ;sỊị拕l;槣us;橱iƀ;lvỚớở䎵on»ớ;䏵ȀcsuvỪỳἋἣĀioữḱrc»Ḯɩỹ\0\0ỻíՈantĀglἂἆtr»ṝess»Ṻƀaeiἒ἖Ἒls;䀽st;扟vĀ;DȵἠD;橸parsl;槥ĀDaἯἳot;打rr;楱ƀcdiἾὁỸr;愯oô͒ĀahὉὋ;䎷耻ð䃰Āmrὓὗl耻ë䃫o;悬ƀcipὡὤὧl;䀡sôծĀeoὬὴctatioîՙnentialåչৡᾒ\0ᾞ\0ᾡᾧ\0\0ῆῌ\0ΐ\0ῦῪ \0 ⁚llingdotseñṄy;䑄male;晀ƀilrᾭᾳ῁lig;耀ffiɩᾹ\0\0᾽g;耀ffig;耀ffl;쀀𝔣lig;耀filig;쀀fjƀaltῙ῜ῡt;晭ig;耀flns;斱of;䆒ǰ΅\0ῳf;쀀𝕗ĀakֿῷĀ;vῼ´拔;櫙artint;樍Āao‌⁕Ācs‑⁒ႉ‸⁅⁈\0⁐β•‥‧‪‬\0‮耻½䂽;慓耻¼䂼;慕;慙;慛Ƴ‴\0‶;慔;慖ʴ‾⁁\0\0⁃耻¾䂾;慗;慜5;慘ƶ⁌\0⁎;慚;慝8;慞l;恄wn;挢cr;쀀𝒻ࢀEabcdefgijlnorstv₂₉₟₥₰₴⃰⃵⃺⃿℃ℒℸ̗ℾ⅒↞Ā;lٍ₇;檌ƀcmpₐₕ₝ute;䇵maĀ;dₜ᳚䎳;檆reve;䄟Āiy₪₮rc;䄝;䐳ot;䄡Ȁ;lqsؾق₽⃉ƀ;qsؾٌ⃄lanô٥Ȁ;cdl٥⃒⃥⃕c;檩otĀ;o⃜⃝檀Ā;l⃢⃣檂;檄Ā;e⃪⃭쀀⋛︀s;檔r;쀀𝔤Ā;gٳ؛mel;愷cy;䑓Ȁ;Eajٚℌℎℐ;檒;檥;檤ȀEaesℛℝ℩ℴ;扩pĀ;p℣ℤ檊rox»ℤĀ;q℮ℯ檈Ā;q℮ℛim;拧pf;쀀𝕘Āci⅃ⅆr;愊mƀ;el٫ⅎ⅐;檎;檐茀>;cdlqr׮ⅠⅪⅮⅳⅹĀciⅥⅧ;檧r;橺ot;拗Par;榕uest;橼ʀadelsↄⅪ←ٖ↛ǰ↉\0↎proø₞r;楸qĀlqؿ↖lesó₈ií٫Āen↣↭rtneqq;쀀≩︀Å↪ԀAabcefkosy⇄⇇⇱⇵⇺∘∝∯≨≽ròΠȀilmr⇐⇔⇗⇛rsðᒄf»․ilôکĀdr⇠⇤cy;䑊ƀ;cwࣴ⇫⇯ir;楈;憭ar;意irc;䄥ƀalr∁∎∓rtsĀ;u∉∊晥it»∊lip;怦con;抹r;쀀𝔥sĀew∣∩arow;椥arow;椦ʀamopr∺∾≃≞≣rr;懿tht;戻kĀlr≉≓eftarrow;憩ightarrow;憪f;쀀𝕙bar;怕ƀclt≯≴≸r;쀀𝒽asè⇴rok;䄧Ābp⊂⊇ull;恃hen»ᱛૡ⊣\0⊪\0⊸⋅⋎\0⋕⋳\0\0⋸⌢⍧⍢⍿\0⎆⎪⎴cute耻í䃭ƀ;iyݱ⊰⊵rc耻î䃮;䐸Ācx⊼⊿y;䐵cl耻¡䂡ĀfrΟ⋉;쀀𝔦rave耻ì䃬Ȁ;inoܾ⋝⋩⋮Āin⋢⋦nt;樌t;戭fin;槜ta;愩lig;䄳ƀaop⋾⌚⌝ƀcgt⌅⌈⌗r;䄫ƀelpܟ⌏⌓inåގarôܠh;䄱f;抷ed;䆵ʀ;cfotӴ⌬⌱⌽⍁are;愅inĀ;t⌸⌹戞ie;槝doô⌙ʀ;celpݗ⍌⍐⍛⍡al;抺Āgr⍕⍙eróᕣã⍍arhk;樗rod;樼Ȁcgpt⍯⍲⍶⍻y;䑑on;䄯f;쀀𝕚a;䎹uest耻¿䂿Āci⎊⎏r;쀀𝒾nʀ;EdsvӴ⎛⎝⎡ӳ;拹ot;拵Ā;v⎦⎧拴;拳Ā;iݷ⎮lde;䄩ǫ⎸\0⎼cy;䑖l耻ï䃯̀cfmosu⏌⏗⏜⏡⏧⏵Āiy⏑⏕rc;䄵;䐹r;쀀𝔧ath;䈷pf;쀀𝕛ǣ⏬\0⏱r;쀀𝒿rcy;䑘kcy;䑔Ѐacfghjos␋␖␢␧␭␱␵␻ppaĀ;v␓␔䎺;䏰Āey␛␠dil;䄷;䐺r;쀀𝔨reen;䄸cy;䑅cy;䑜pf;쀀𝕜cr;쀀𝓀஀ABEHabcdefghjlmnoprstuv⑰⒁⒆⒍⒑┎┽╚▀♎♞♥♹♽⚚⚲⛘❝❨➋⟀⠁⠒ƀart⑷⑺⑼rò৆òΕail;椛arr;椎Ā;gঔ⒋;檋ar;楢ॣ⒥\0⒪\0⒱\0\0\0\0\0⒵Ⓔ\0ⓆⓈⓍ\0⓹ute;䄺mptyv;榴raîࡌbda;䎻gƀ;dlࢎⓁⓃ;榑åࢎ;檅uo耻«䂫rЀ;bfhlpst࢙ⓞⓦⓩ⓫⓮⓱⓵Ā;f࢝ⓣs;椟s;椝ë≒p;憫l;椹im;楳l;憢ƀ;ae⓿─┄檫il;椙Ā;s┉┊檭;쀀⪭︀ƀabr┕┙┝rr;椌rk;杲Āak┢┬cĀek┨┪;䁻;䁛Āes┱┳;榋lĀdu┹┻;榏;榍Ȁaeuy╆╋╖╘ron;䄾Ādi═╔il;䄼ìࢰâ┩;䐻Ȁcqrs╣╦╭╽a;椶uoĀ;rนᝆĀdu╲╷har;楧shar;楋h;憲ʀ;fgqs▋▌উ◳◿扤tʀahlrt▘▤▷◂◨rrowĀ;t࢙□aé⓶arpoonĀdu▯▴own»њp»०eftarrows;懇ightƀahs◍◖◞rrowĀ;sࣴࢧarpoonó྘quigarro÷⇰hreetimes;拋ƀ;qs▋ও◺lanôবʀ;cdgsব☊☍☝☨c;檨otĀ;o☔☕橿Ā;r☚☛檁;檃Ā;e☢☥쀀⋚︀s;檓ʀadegs☳☹☽♉♋pproøⓆot;拖qĀgq♃♅ôউgtò⒌ôছiíলƀilr♕࣡♚sht;楼;쀀𝔩Ā;Eজ♣;檑š♩♶rĀdu▲♮Ā;l॥♳;楪lk;斄cy;䑙ʀ;achtੈ⚈⚋⚑⚖rò◁orneòᴈard;楫ri;旺Āio⚟⚤dot;䅀ustĀ;a⚬⚭掰che»⚭ȀEaes⚻⚽⛉⛔;扨pĀ;p⛃⛄檉rox»⛄Ā;q⛎⛏檇Ā;q⛎⚻im;拦Ѐabnoptwz⛩⛴⛷✚✯❁❇❐Ānr⛮⛱g;柬r;懽rëࣁgƀlmr⛿✍✔eftĀar০✇ightá৲apsto;柼ightá৽parrowĀlr✥✩efô⓭ight;憬ƀafl✶✹✽r;榅;쀀𝕝us;樭imes;樴š❋❏st;戗áፎƀ;ef❗❘᠀旊nge»❘arĀ;l❤❥䀨t;榓ʀachmt❳❶❼➅➇ròࢨorneòᶌarĀ;d྘➃;業;怎ri;抿̀achiqt➘➝ੀ➢➮➻quo;怹r;쀀𝓁mƀ;egল➪➬;檍;檏Ābu┪➳oĀ;rฟ➹;怚rok;䅂萀<;cdhilqrࠫ⟒☹⟜⟠⟥⟪⟰Āci⟗⟙;檦r;橹reå◲mes;拉arr;楶uest;橻ĀPi⟵⟹ar;榖ƀ;ef⠀भ᠛旃rĀdu⠇⠍shar;楊har;楦Āen⠗⠡rtneqq;쀀≨︀Å⠞܀Dacdefhilnopsu⡀⡅⢂⢎⢓⢠⢥⢨⣚⣢⣤ઃ⣳⤂Dot;戺Ȁclpr⡎⡒⡣⡽r耻¯䂯Āet⡗⡙;時Ā;e⡞⡟朠se»⡟Ā;sျ⡨toȀ;dluျ⡳⡷⡻owîҌefôएðᏑker;斮Āoy⢇⢌mma;権;䐼ash;怔asuredangle»ᘦr;쀀𝔪o;愧ƀcdn⢯⢴⣉ro耻µ䂵Ȁ;acdᑤ⢽⣀⣄sôᚧir;櫰ot肻·Ƶusƀ;bd⣒ᤃ⣓戒Ā;uᴼ⣘;横ţ⣞⣡p;櫛ò−ðઁĀdp⣩⣮els;抧f;쀀𝕞Āct⣸⣽r;쀀𝓂pos»ᖝƀ;lm⤉⤊⤍䎼timap;抸ఀGLRVabcdefghijlmoprstuvw⥂⥓⥾⦉⦘⧚⧩⨕⨚⩘⩝⪃⪕⪤⪨⬄⬇⭄⭿⮮ⰴⱧⱼ⳩Āgt⥇⥋;쀀⋙̸Ā;v⥐௏쀀≫⃒ƀelt⥚⥲⥶ftĀar⥡⥧rrow;懍ightarrow;懎;쀀⋘̸Ā;v⥻ే쀀≪⃒ightarrow;懏ĀDd⦎⦓ash;抯ash;抮ʀbcnpt⦣⦧⦬⦱⧌la»˞ute;䅄g;쀀∠⃒ʀ;Eiop඄⦼⧀⧅⧈;쀀⩰̸d;쀀≋̸s;䅉roø඄urĀ;a⧓⧔普lĀ;s⧓ସdz⧟\0⧣p肻 ଷmpĀ;e௹ఀʀaeouy⧴⧾⨃⨐⨓ǰ⧹\0⧻;橃on;䅈dil;䅆ngĀ;dൾ⨊ot;쀀⩭̸p;橂;䐽ash;怓΀;Aadqsxஒ⨩⨭⨻⩁⩅⩐rr;懗rĀhr⨳⨶k;椤Ā;oᏲᏰot;쀀≐̸uiöୣĀei⩊⩎ar;椨í஘istĀ;s஠டr;쀀𝔫ȀEest௅⩦⩹⩼ƀ;qs஼⩭௡ƀ;qs஼௅⩴lanô௢ií௪Ā;rஶ⪁»ஷƀAap⪊⪍⪑rò⥱rr;憮ar;櫲ƀ;svྍ⪜ྌĀ;d⪡⪢拼;拺cy;䑚΀AEadest⪷⪺⪾⫂⫅⫶⫹rò⥦;쀀≦̸rr;憚r;急Ȁ;fqs఻⫎⫣⫯tĀar⫔⫙rro÷⫁ightarro÷⪐ƀ;qs఻⪺⫪lanôౕĀ;sౕ⫴»శiíౝĀ;rవ⫾iĀ;eచథiäඐĀpt⬌⬑f;쀀𝕟膀¬;in⬙⬚⬶䂬nȀ;Edvஉ⬤⬨⬮;쀀⋹̸ot;쀀⋵̸ǡஉ⬳⬵;拷;拶iĀ;vಸ⬼ǡಸ⭁⭃;拾;拽ƀaor⭋⭣⭩rȀ;ast୻⭕⭚⭟lleì୻l;쀀⫽⃥;쀀∂̸lint;樔ƀ;ceಒ⭰⭳uåಥĀ;cಘ⭸Ā;eಒ⭽ñಘȀAait⮈⮋⮝⮧rò⦈rrƀ;cw⮔⮕⮙憛;쀀⤳̸;쀀↝̸ghtarrow»⮕riĀ;eೋೖ΀chimpqu⮽⯍⯙⬄୸⯤⯯Ȁ;cerല⯆ഷ⯉uå൅;쀀𝓃ortɭ⬅\0\0⯖ará⭖mĀ;e൮⯟Ā;q൴൳suĀbp⯫⯭å೸åഋƀbcp⯶ⰑⰙȀ;Ees⯿ⰀഢⰄ抄;쀀⫅̸etĀ;eഛⰋqĀ;qണⰀcĀ;eലⰗñസȀ;EesⰢⰣൟⰧ抅;쀀⫆̸etĀ;e൘ⰮqĀ;qൠⰣȀgilrⰽⰿⱅⱇìௗlde耻ñ䃱çృiangleĀlrⱒⱜeftĀ;eచⱚñదightĀ;eೋⱥñ೗Ā;mⱬⱭ䎽ƀ;esⱴⱵⱹ䀣ro;愖p;怇ҀDHadgilrsⲏⲔⲙⲞⲣⲰⲶⳓⳣash;抭arr;椄p;쀀≍⃒ash;抬ĀetⲨⲬ;쀀≥⃒;쀀>⃒nfin;槞ƀAetⲽⳁⳅrr;椂;쀀≤⃒Ā;rⳊⳍ쀀<⃒ie;쀀⊴⃒ĀAtⳘⳜrr;椃rie;쀀⊵⃒im;쀀∼⃒ƀAan⳰⳴ⴂrr;懖rĀhr⳺⳽k;椣Ā;oᏧᏥear;椧ቓ᪕\0\0\0\0\0\0\0\0\0\0\0\0\0ⴭ\0ⴸⵈⵠⵥ⵲ⶄᬇ\0\0ⶍⶫ\0ⷈⷎ\0ⷜ⸙⸫⸾⹃Ācsⴱ᪗ute耻ó䃳ĀiyⴼⵅrĀ;c᪞ⵂ耻ô䃴;䐾ʀabios᪠ⵒⵗLjⵚlac;䅑v;樸old;榼lig;䅓Ācr⵩⵭ir;榿;쀀𝔬ͯ⵹\0\0⵼\0ⶂn;䋛ave耻ò䃲;槁Ābmⶈ෴ar;榵Ȁacitⶕ⶘ⶥⶨrò᪀Āir⶝ⶠr;榾oss;榻nå๒;槀ƀaeiⶱⶵⶹcr;䅍ga;䏉ƀcdnⷀⷅǍron;䎿;榶pf;쀀𝕠ƀaelⷔ⷗ǒr;榷rp;榹΀;adiosvⷪⷫⷮ⸈⸍⸐⸖戨rò᪆Ȁ;efmⷷⷸ⸂⸅橝rĀ;oⷾⷿ愴f»ⷿ耻ª䂪耻º䂺gof;抶r;橖lope;橗;橛ƀclo⸟⸡⸧ò⸁ash耻ø䃸l;折iŬⸯ⸴de耻õ䃵esĀ;aǛ⸺s;樶ml耻ö䃶bar;挽ૡ⹞\0⹽\0⺀⺝\0⺢⺹\0\0⻋ຜ\0⼓\0\0⼫⾼\0⿈rȀ;astЃ⹧⹲຅脀¶;l⹭⹮䂶leìЃɩ⹸\0\0⹻m;櫳;櫽y;䐿rʀcimpt⺋⺏⺓ᡥ⺗nt;䀥od;䀮il;怰enk;怱r;쀀𝔭ƀimo⺨⺰⺴Ā;v⺭⺮䏆;䏕maô੶ne;明ƀ;tv⺿⻀⻈䏀chfork»´;䏖Āau⻏⻟nĀck⻕⻝kĀ;h⇴⻛;愎ö⇴sҀ;abcdemst⻳⻴ᤈ⻹⻽⼄⼆⼊⼎䀫cir;樣ir;樢Āouᵀ⼂;樥;橲n肻±ຝim;樦wo;樧ƀipu⼙⼠⼥ntint;樕f;쀀𝕡nd耻£䂣Ԁ;Eaceinosu່⼿⽁⽄⽇⾁⾉⾒⽾⾶;檳p;檷uå໙Ā;c໎⽌̀;acens່⽙⽟⽦⽨⽾pproø⽃urlyeñ໙ñ໎ƀaes⽯⽶⽺pprox;檹qq;檵im;拨iíໟmeĀ;s⾈ຮ怲ƀEas⽸⾐⽺ð⽵ƀdfp໬⾙⾯ƀals⾠⾥⾪lar;挮ine;挒urf;挓Ā;t໻⾴ï໻rel;抰Āci⿀⿅r;쀀𝓅;䏈ncsp;怈̀fiopsu⿚⋢⿟⿥⿫⿱r;쀀𝔮pf;쀀𝕢rime;恗cr;쀀𝓆ƀaeo⿸〉〓tĀei⿾々rnionóڰnt;樖stĀ;e【】䀿ñἙô༔઀ABHabcdefhilmnoprstux぀けさすムㄎㄫㅇㅢㅲㆎ㈆㈕㈤㈩㉘㉮㉲㊐㊰㊷ƀartぇおがròႳòϝail;検aròᱥar;楤΀cdenqrtとふへみわゔヌĀeuねぱ;쀀∽̱te;䅕iãᅮmptyv;榳gȀ;del࿑らるろ;榒;榥å࿑uo耻»䂻rր;abcfhlpstw࿜ガクシスゼゾダッデナp;極Ā;f࿠ゴs;椠;椳s;椞ë≝ð✮l;楅im;楴l;憣;憝Āaiパフil;椚oĀ;nホボ戶aló༞ƀabrョリヮrò៥rk;杳ĀakンヽcĀekヹ・;䁽;䁝Āes㄂㄄;榌lĀduㄊㄌ;榎;榐Ȁaeuyㄗㄜㄧㄩron;䅙Ādiㄡㄥil;䅗ì࿲âヺ;䑀Ȁclqsㄴㄷㄽㅄa;椷dhar;楩uoĀ;rȎȍh;憳ƀacgㅎㅟངlȀ;ipsླྀㅘㅛႜnåႻarôྩt;断ƀilrㅩဣㅮsht;楽;쀀𝔯ĀaoㅷㆆrĀduㅽㅿ»ѻĀ;l႑ㆄ;楬Ā;vㆋㆌ䏁;䏱ƀgns㆕ㇹㇼht̀ahlrstㆤㆰ㇂㇘㇤㇮rrowĀ;t࿜ㆭaéトarpoonĀduㆻㆿowîㅾp»႒eftĀah㇊㇐rrowó࿪arpoonóՑightarrows;應quigarro÷ニhreetimes;拌g;䋚ingdotseñἲƀahm㈍㈐㈓rò࿪aòՑ;怏oustĀ;a㈞㈟掱che»㈟mid;櫮Ȁabpt㈲㈽㉀㉒Ānr㈷㈺g;柭r;懾rëဃƀafl㉇㉊㉎r;榆;쀀𝕣us;樮imes;樵Āap㉝㉧rĀ;g㉣㉤䀩t;榔olint;樒arò㇣Ȁachq㉻㊀Ⴜ㊅quo;怺r;쀀𝓇Ābu・㊊oĀ;rȔȓƀhir㊗㊛㊠reåㇸmes;拊iȀ;efl㊪ၙᠡ㊫方tri;槎luhar;楨;愞ൡ㋕㋛㋟㌬㌸㍱\0㍺㎤\0\0㏬㏰\0㐨㑈㑚㒭㒱㓊㓱\0㘖\0\0㘳cute;䅛quï➺Ԁ;Eaceinpsyᇭ㋳㋵㋿㌂㌋㌏㌟㌦㌩;檴ǰ㋺\0㋼;檸on;䅡uåᇾĀ;dᇳ㌇il;䅟rc;䅝ƀEas㌖㌘㌛;檶p;檺im;择olint;樓iíሄ;䑁otƀ;be㌴ᵇ㌵担;橦΀Aacmstx㍆㍊㍗㍛㍞㍣㍭rr;懘rĀhr㍐㍒ë∨Ā;oਸ਼਴t耻§䂧i;䀻war;椩mĀin㍩ðnuóñt;朶rĀ;o㍶⁕쀀𝔰Ȁacoy㎂㎆㎑㎠rp;景Āhy㎋㎏cy;䑉;䑈rtɭ㎙\0\0㎜iäᑤaraì⹯耻­䂭Āgm㎨㎴maƀ;fv㎱㎲㎲䏃;䏂Ѐ;deglnprካ㏅㏉㏎㏖㏞㏡㏦ot;橪Ā;q኱ኰĀ;E㏓㏔檞;檠Ā;E㏛㏜檝;檟e;扆lus;樤arr;楲aròᄽȀaeit㏸㐈㐏㐗Āls㏽㐄lsetmé㍪hp;樳parsl;槤Ādlᑣ㐔e;挣Ā;e㐜㐝檪Ā;s㐢㐣檬;쀀⪬︀ƀflp㐮㐳㑂tcy;䑌Ā;b㐸㐹䀯Ā;a㐾㐿槄r;挿f;쀀𝕤aĀdr㑍ЂesĀ;u㑔㑕晠it»㑕ƀcsu㑠㑹㒟Āau㑥㑯pĀ;sᆈ㑫;쀀⊓︀pĀ;sᆴ㑵;쀀⊔︀uĀbp㑿㒏ƀ;esᆗᆜ㒆etĀ;eᆗ㒍ñᆝƀ;esᆨᆭ㒖etĀ;eᆨ㒝ñᆮƀ;afᅻ㒦ְrť㒫ֱ»ᅼaròᅈȀcemt㒹㒾㓂㓅r;쀀𝓈tmîñiì㐕aræᆾĀar㓎㓕rĀ;f㓔ឿ昆Āan㓚㓭ightĀep㓣㓪psiloîỠhé⺯s»⡒ʀbcmnp㓻㕞ሉ㖋㖎Ҁ;Edemnprs㔎㔏㔑㔕㔞㔣㔬㔱㔶抂;櫅ot;檽Ā;dᇚ㔚ot;櫃ult;櫁ĀEe㔨㔪;櫋;把lus;檿arr;楹ƀeiu㔽㕒㕕tƀ;en㔎㕅㕋qĀ;qᇚ㔏eqĀ;q㔫㔨m;櫇Ābp㕚㕜;櫕;櫓c̀;acensᇭ㕬㕲㕹㕻㌦pproø㋺urlyeñᇾñᇳƀaes㖂㖈㌛pproø㌚qñ㌗g;晪ڀ123;Edehlmnps㖩㖬㖯ሜ㖲㖴㗀㗉㗕㗚㗟㗨㗭耻¹䂹耻²䂲耻³䂳;櫆Āos㖹㖼t;檾ub;櫘Ā;dሢ㗅ot;櫄sĀou㗏㗒l;柉b;櫗arr;楻ult;櫂ĀEe㗤㗦;櫌;抋lus;櫀ƀeiu㗴㘉㘌tƀ;enሜ㗼㘂qĀ;qሢ㖲eqĀ;q㗧㗤m;櫈Ābp㘑㘓;櫔;櫖ƀAan㘜㘠㘭rr;懙rĀhr㘦㘨ë∮Ā;oਫ਩war;椪lig耻ß䃟௡㙑㙝㙠ዎ㙳㙹\0㙾㛂\0\0\0\0\0㛛㜃\0㜉㝬\0\0\0㞇ɲ㙖\0\0㙛get;挖;䏄rë๟ƀaey㙦㙫㙰ron;䅥dil;䅣;䑂lrec;挕r;쀀𝔱Ȁeiko㚆㚝㚵㚼Dz㚋\0㚑eĀ4fኄኁaƀ;sv㚘㚙㚛䎸ym;䏑Ācn㚢㚲kĀas㚨㚮pproø዁im»ኬsðኞĀas㚺㚮ð዁rn耻þ䃾Ǭ̟㛆⋧es膀×;bd㛏㛐㛘䃗Ā;aᤏ㛕r;樱;樰ƀeps㛡㛣㜀á⩍Ȁ;bcf҆㛬㛰㛴ot;挶ir;櫱Ā;o㛹㛼쀀𝕥rk;櫚á㍢rime;怴ƀaip㜏㜒㝤dåቈ΀adempst㜡㝍㝀㝑㝗㝜㝟ngleʀ;dlqr㜰㜱㜶㝀㝂斵own»ᶻeftĀ;e⠀㜾ñम;扜ightĀ;e㊪㝋ñၚot;旬inus;樺lus;樹b;槍ime;樻ezium;揢ƀcht㝲㝽㞁Āry㝷㝻;쀀𝓉;䑆cy;䑛rok;䅧Āio㞋㞎xô᝷headĀlr㞗㞠eftarro÷ࡏightarrow»ཝऀAHabcdfghlmoprstuw㟐㟓㟗㟤㟰㟼㠎㠜㠣㠴㡑㡝㡫㢩㣌㣒㣪㣶ròϭar;楣Ācr㟜㟢ute耻ú䃺òᅐrǣ㟪\0㟭y;䑞ve;䅭Āiy㟵㟺rc耻û䃻;䑃ƀabh㠃㠆㠋ròᎭlac;䅱aòᏃĀir㠓㠘sht;楾;쀀𝔲rave耻ù䃹š㠧㠱rĀlr㠬㠮»ॗ»ႃlk;斀Āct㠹㡍ɯ㠿\0\0㡊rnĀ;e㡅㡆挜r»㡆op;挏ri;旸Āal㡖㡚cr;䅫肻¨͉Āgp㡢㡦on;䅳f;쀀𝕦̀adhlsuᅋ㡸㡽፲㢑㢠ownáᎳarpoonĀlr㢈㢌efô㠭ighô㠯iƀ;hl㢙㢚㢜䏅»ᏺon»㢚parrows;懈ƀcit㢰㣄㣈ɯ㢶\0\0㣁rnĀ;e㢼㢽挝r»㢽op;挎ng;䅯ri;旹cr;쀀𝓊ƀdir㣙㣝㣢ot;拰lde;䅩iĀ;f㜰㣨»᠓Āam㣯㣲rò㢨l耻ü䃼angle;榧ހABDacdeflnoprsz㤜㤟㤩㤭㦵㦸㦽㧟㧤㧨㧳㧹㧽㨁㨠ròϷarĀ;v㤦㤧櫨;櫩asèϡĀnr㤲㤷grt;榜΀eknprst㓣㥆㥋㥒㥝㥤㦖appá␕othinçẖƀhir㓫⻈㥙opô⾵Ā;hᎷ㥢ïㆍĀiu㥩㥭gmá㎳Ābp㥲㦄setneqĀ;q㥽㦀쀀⊊︀;쀀⫋︀setneqĀ;q㦏㦒쀀⊋︀;쀀⫌︀Āhr㦛㦟etá㚜iangleĀlr㦪㦯eft»थight»ၑy;䐲ash»ံƀelr㧄㧒㧗ƀ;beⷪ㧋㧏ar;抻q;扚lip;拮Ābt㧜ᑨaòᑩr;쀀𝔳tré㦮suĀbp㧯㧱»ജ»൙pf;쀀𝕧roð໻tré㦴Ācu㨆㨋r;쀀𝓋Ābp㨐㨘nĀEe㦀㨖»㥾nĀEe㦒㨞»㦐igzag;榚΀cefoprs㨶㨻㩖㩛㩔㩡㩪irc;䅵Ādi㩀㩑Ābg㩅㩉ar;機eĀ;qᗺ㩏;扙erp;愘r;쀀𝔴pf;쀀𝕨Ā;eᑹ㩦atèᑹcr;쀀𝓌ૣណ㪇\0㪋\0㪐㪛\0\0㪝㪨㪫㪯\0\0㫃㫎\0㫘ៜ៟tré៑r;쀀𝔵ĀAa㪔㪗ròσrò৶;䎾ĀAa㪡㪤ròθrò৫að✓is;拻ƀdptឤ㪵㪾Āfl㪺ឩ;쀀𝕩imåឲĀAa㫇㫊ròώròਁĀcq㫒ីr;쀀𝓍Āpt៖㫜ré។Ѐacefiosu㫰㫽㬈㬌㬑㬕㬛㬡cĀuy㫶㫻te耻ý䃽;䑏Āiy㬂㬆rc;䅷;䑋n耻¥䂥r;쀀𝔶cy;䑗pf;쀀𝕪cr;쀀𝓎Ācm㬦㬩y;䑎l耻ÿ䃿Ԁacdefhiosw㭂㭈㭔㭘㭤㭩㭭㭴㭺㮀cute;䅺Āay㭍㭒ron;䅾;䐷ot;䅼Āet㭝㭡træᕟa;䎶r;쀀𝔷cy;䐶grarr;懝pf;쀀𝕫cr;쀀𝓏Ājn㮅㮇;怍j;怌'.split("").map((function(e){return e.charCodeAt(0)})))},56912:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=new Uint16Array("Ȁaglq\tɭ\0\0p;䀦os;䀧t;䀾t;䀼uot;䀢".split("").map((function(e){return e.charCodeAt(0)})))},94348:function(e,t){"use strict";function n(e){for(var t=1;t<e.length;t++)e[t][0]+=e[t-1][0]+1;return e}Object.defineProperty(t,"__esModule",{value:!0}),t.default=new Map(n([[9,"&Tab;"],[0,"&NewLine;"],[22,"&excl;"],[0,"&quot;"],[0,"&num;"],[0,"&dollar;"],[0,"&percnt;"],[0,"&amp;"],[0,"&apos;"],[0,"&lpar;"],[0,"&rpar;"],[0,"&ast;"],[0,"&plus;"],[0,"&comma;"],[1,"&period;"],[0,"&sol;"],[10,"&colon;"],[0,"&semi;"],[0,{v:"&lt;",n:8402,o:"&nvlt;"}],[0,{v:"&equals;",n:8421,o:"&bne;"}],[0,{v:"&gt;",n:8402,o:"&nvgt;"}],[0,"&quest;"],[0,"&commat;"],[26,"&lbrack;"],[0,"&bsol;"],[0,"&rbrack;"],[0,"&Hat;"],[0,"&lowbar;"],[0,"&DiacriticalGrave;"],[5,{n:106,o:"&fjlig;"}],[20,"&lbrace;"],[0,"&verbar;"],[0,"&rbrace;"],[34,"&nbsp;"],[0,"&iexcl;"],[0,"&cent;"],[0,"&pound;"],[0,"&curren;"],[0,"&yen;"],[0,"&brvbar;"],[0,"&sect;"],[0,"&die;"],[0,"&copy;"],[0,"&ordf;"],[0,"&laquo;"],[0,"&not;"],[0,"&shy;"],[0,"&circledR;"],[0,"&macr;"],[0,"&deg;"],[0,"&PlusMinus;"],[0,"&sup2;"],[0,"&sup3;"],[0,"&acute;"],[0,"&micro;"],[0,"&para;"],[0,"&centerdot;"],[0,"&cedil;"],[0,"&sup1;"],[0,"&ordm;"],[0,"&raquo;"],[0,"&frac14;"],[0,"&frac12;"],[0,"&frac34;"],[0,"&iquest;"],[0,"&Agrave;"],[0,"&Aacute;"],[0,"&Acirc;"],[0,"&Atilde;"],[0,"&Auml;"],[0,"&angst;"],[0,"&AElig;"],[0,"&Ccedil;"],[0,"&Egrave;"],[0,"&Eacute;"],[0,"&Ecirc;"],[0,"&Euml;"],[0,"&Igrave;"],[0,"&Iacute;"],[0,"&Icirc;"],[0,"&Iuml;"],[0,"&ETH;"],[0,"&Ntilde;"],[0,"&Ograve;"],[0,"&Oacute;"],[0,"&Ocirc;"],[0,"&Otilde;"],[0,"&Ouml;"],[0,"&times;"],[0,"&Oslash;"],[0,"&Ugrave;"],[0,"&Uacute;"],[0,"&Ucirc;"],[0,"&Uuml;"],[0,"&Yacute;"],[0,"&THORN;"],[0,"&szlig;"],[0,"&agrave;"],[0,"&aacute;"],[0,"&acirc;"],[0,"&atilde;"],[0,"&auml;"],[0,"&aring;"],[0,"&aelig;"],[0,"&ccedil;"],[0,"&egrave;"],[0,"&eacute;"],[0,"&ecirc;"],[0,"&euml;"],[0,"&igrave;"],[0,"&iacute;"],[0,"&icirc;"],[0,"&iuml;"],[0,"&eth;"],[0,"&ntilde;"],[0,"&ograve;"],[0,"&oacute;"],[0,"&ocirc;"],[0,"&otilde;"],[0,"&ouml;"],[0,"&div;"],[0,"&oslash;"],[0,"&ugrave;"],[0,"&uacute;"],[0,"&ucirc;"],[0,"&uuml;"],[0,"&yacute;"],[0,"&thorn;"],[0,"&yuml;"],[0,"&Amacr;"],[0,"&amacr;"],[0,"&Abreve;"],[0,"&abreve;"],[0,"&Aogon;"],[0,"&aogon;"],[0,"&Cacute;"],[0,"&cacute;"],[0,"&Ccirc;"],[0,"&ccirc;"],[0,"&Cdot;"],[0,"&cdot;"],[0,"&Ccaron;"],[0,"&ccaron;"],[0,"&Dcaron;"],[0,"&dcaron;"],[0,"&Dstrok;"],[0,"&dstrok;"],[0,"&Emacr;"],[0,"&emacr;"],[2,"&Edot;"],[0,"&edot;"],[0,"&Eogon;"],[0,"&eogon;"],[0,"&Ecaron;"],[0,"&ecaron;"],[0,"&Gcirc;"],[0,"&gcirc;"],[0,"&Gbreve;"],[0,"&gbreve;"],[0,"&Gdot;"],[0,"&gdot;"],[0,"&Gcedil;"],[1,"&Hcirc;"],[0,"&hcirc;"],[0,"&Hstrok;"],[0,"&hstrok;"],[0,"&Itilde;"],[0,"&itilde;"],[0,"&Imacr;"],[0,"&imacr;"],[2,"&Iogon;"],[0,"&iogon;"],[0,"&Idot;"],[0,"&imath;"],[0,"&IJlig;"],[0,"&ijlig;"],[0,"&Jcirc;"],[0,"&jcirc;"],[0,"&Kcedil;"],[0,"&kcedil;"],[0,"&kgreen;"],[0,"&Lacute;"],[0,"&lacute;"],[0,"&Lcedil;"],[0,"&lcedil;"],[0,"&Lcaron;"],[0,"&lcaron;"],[0,"&Lmidot;"],[0,"&lmidot;"],[0,"&Lstrok;"],[0,"&lstrok;"],[0,"&Nacute;"],[0,"&nacute;"],[0,"&Ncedil;"],[0,"&ncedil;"],[0,"&Ncaron;"],[0,"&ncaron;"],[0,"&napos;"],[0,"&ENG;"],[0,"&eng;"],[0,"&Omacr;"],[0,"&omacr;"],[2,"&Odblac;"],[0,"&odblac;"],[0,"&OElig;"],[0,"&oelig;"],[0,"&Racute;"],[0,"&racute;"],[0,"&Rcedil;"],[0,"&rcedil;"],[0,"&Rcaron;"],[0,"&rcaron;"],[0,"&Sacute;"],[0,"&sacute;"],[0,"&Scirc;"],[0,"&scirc;"],[0,"&Scedil;"],[0,"&scedil;"],[0,"&Scaron;"],[0,"&scaron;"],[0,"&Tcedil;"],[0,"&tcedil;"],[0,"&Tcaron;"],[0,"&tcaron;"],[0,"&Tstrok;"],[0,"&tstrok;"],[0,"&Utilde;"],[0,"&utilde;"],[0,"&Umacr;"],[0,"&umacr;"],[0,"&Ubreve;"],[0,"&ubreve;"],[0,"&Uring;"],[0,"&uring;"],[0,"&Udblac;"],[0,"&udblac;"],[0,"&Uogon;"],[0,"&uogon;"],[0,"&Wcirc;"],[0,"&wcirc;"],[0,"&Ycirc;"],[0,"&ycirc;"],[0,"&Yuml;"],[0,"&Zacute;"],[0,"&zacute;"],[0,"&Zdot;"],[0,"&zdot;"],[0,"&Zcaron;"],[0,"&zcaron;"],[19,"&fnof;"],[34,"&imped;"],[63,"&gacute;"],[65,"&jmath;"],[142,"&circ;"],[0,"&caron;"],[16,"&breve;"],[0,"&DiacriticalDot;"],[0,"&ring;"],[0,"&ogon;"],[0,"&DiacriticalTilde;"],[0,"&dblac;"],[51,"&DownBreve;"],[127,"&Alpha;"],[0,"&Beta;"],[0,"&Gamma;"],[0,"&Delta;"],[0,"&Epsilon;"],[0,"&Zeta;"],[0,"&Eta;"],[0,"&Theta;"],[0,"&Iota;"],[0,"&Kappa;"],[0,"&Lambda;"],[0,"&Mu;"],[0,"&Nu;"],[0,"&Xi;"],[0,"&Omicron;"],[0,"&Pi;"],[0,"&Rho;"],[1,"&Sigma;"],[0,"&Tau;"],[0,"&Upsilon;"],[0,"&Phi;"],[0,"&Chi;"],[0,"&Psi;"],[0,"&ohm;"],[7,"&alpha;"],[0,"&beta;"],[0,"&gamma;"],[0,"&delta;"],[0,"&epsi;"],[0,"&zeta;"],[0,"&eta;"],[0,"&theta;"],[0,"&iota;"],[0,"&kappa;"],[0,"&lambda;"],[0,"&mu;"],[0,"&nu;"],[0,"&xi;"],[0,"&omicron;"],[0,"&pi;"],[0,"&rho;"],[0,"&sigmaf;"],[0,"&sigma;"],[0,"&tau;"],[0,"&upsi;"],[0,"&phi;"],[0,"&chi;"],[0,"&psi;"],[0,"&omega;"],[7,"&thetasym;"],[0,"&Upsi;"],[2,"&phiv;"],[0,"&piv;"],[5,"&Gammad;"],[0,"&digamma;"],[18,"&kappav;"],[0,"&rhov;"],[3,"&epsiv;"],[0,"&backepsilon;"],[10,"&IOcy;"],[0,"&DJcy;"],[0,"&GJcy;"],[0,"&Jukcy;"],[0,"&DScy;"],[0,"&Iukcy;"],[0,"&YIcy;"],[0,"&Jsercy;"],[0,"&LJcy;"],[0,"&NJcy;"],[0,"&TSHcy;"],[0,"&KJcy;"],[1,"&Ubrcy;"],[0,"&DZcy;"],[0,"&Acy;"],[0,"&Bcy;"],[0,"&Vcy;"],[0,"&Gcy;"],[0,"&Dcy;"],[0,"&IEcy;"],[0,"&ZHcy;"],[0,"&Zcy;"],[0,"&Icy;"],[0,"&Jcy;"],[0,"&Kcy;"],[0,"&Lcy;"],[0,"&Mcy;"],[0,"&Ncy;"],[0,"&Ocy;"],[0,"&Pcy;"],[0,"&Rcy;"],[0,"&Scy;"],[0,"&Tcy;"],[0,"&Ucy;"],[0,"&Fcy;"],[0,"&KHcy;"],[0,"&TScy;"],[0,"&CHcy;"],[0,"&SHcy;"],[0,"&SHCHcy;"],[0,"&HARDcy;"],[0,"&Ycy;"],[0,"&SOFTcy;"],[0,"&Ecy;"],[0,"&YUcy;"],[0,"&YAcy;"],[0,"&acy;"],[0,"&bcy;"],[0,"&vcy;"],[0,"&gcy;"],[0,"&dcy;"],[0,"&iecy;"],[0,"&zhcy;"],[0,"&zcy;"],[0,"&icy;"],[0,"&jcy;"],[0,"&kcy;"],[0,"&lcy;"],[0,"&mcy;"],[0,"&ncy;"],[0,"&ocy;"],[0,"&pcy;"],[0,"&rcy;"],[0,"&scy;"],[0,"&tcy;"],[0,"&ucy;"],[0,"&fcy;"],[0,"&khcy;"],[0,"&tscy;"],[0,"&chcy;"],[0,"&shcy;"],[0,"&shchcy;"],[0,"&hardcy;"],[0,"&ycy;"],[0,"&softcy;"],[0,"&ecy;"],[0,"&yucy;"],[0,"&yacy;"],[1,"&iocy;"],[0,"&djcy;"],[0,"&gjcy;"],[0,"&jukcy;"],[0,"&dscy;"],[0,"&iukcy;"],[0,"&yicy;"],[0,"&jsercy;"],[0,"&ljcy;"],[0,"&njcy;"],[0,"&tshcy;"],[0,"&kjcy;"],[1,"&ubrcy;"],[0,"&dzcy;"],[7074,"&ensp;"],[0,"&emsp;"],[0,"&emsp13;"],[0,"&emsp14;"],[1,"&numsp;"],[0,"&puncsp;"],[0,"&ThinSpace;"],[0,"&hairsp;"],[0,"&NegativeMediumSpace;"],[0,"&zwnj;"],[0,"&zwj;"],[0,"&lrm;"],[0,"&rlm;"],[0,"&dash;"],[2,"&ndash;"],[0,"&mdash;"],[0,"&horbar;"],[0,"&Verbar;"],[1,"&lsquo;"],[0,"&CloseCurlyQuote;"],[0,"&lsquor;"],[1,"&ldquo;"],[0,"&CloseCurlyDoubleQuote;"],[0,"&bdquo;"],[1,"&dagger;"],[0,"&Dagger;"],[0,"&bull;"],[2,"&nldr;"],[0,"&hellip;"],[9,"&permil;"],[0,"&pertenk;"],[0,"&prime;"],[0,"&Prime;"],[0,"&tprime;"],[0,"&backprime;"],[3,"&lsaquo;"],[0,"&rsaquo;"],[3,"&oline;"],[2,"&caret;"],[1,"&hybull;"],[0,"&frasl;"],[10,"&bsemi;"],[7,"&qprime;"],[7,{v:"&MediumSpace;",n:8202,o:"&ThickSpace;"}],[0,"&NoBreak;"],[0,"&af;"],[0,"&InvisibleTimes;"],[0,"&ic;"],[72,"&euro;"],[46,"&tdot;"],[0,"&DotDot;"],[37,"&complexes;"],[2,"&incare;"],[4,"&gscr;"],[0,"&hamilt;"],[0,"&Hfr;"],[0,"&Hopf;"],[0,"&planckh;"],[0,"&hbar;"],[0,"&imagline;"],[0,"&Ifr;"],[0,"&lagran;"],[0,"&ell;"],[1,"&naturals;"],[0,"&numero;"],[0,"&copysr;"],[0,"&weierp;"],[0,"&Popf;"],[0,"&Qopf;"],[0,"&realine;"],[0,"&real;"],[0,"&reals;"],[0,"&rx;"],[3,"&trade;"],[1,"&integers;"],[2,"&mho;"],[0,"&zeetrf;"],[0,"&iiota;"],[2,"&bernou;"],[0,"&Cayleys;"],[1,"&escr;"],[0,"&Escr;"],[0,"&Fouriertrf;"],[1,"&Mellintrf;"],[0,"&order;"],[0,"&alefsym;"],[0,"&beth;"],[0,"&gimel;"],[0,"&daleth;"],[12,"&CapitalDifferentialD;"],[0,"&dd;"],[0,"&ee;"],[0,"&ii;"],[10,"&frac13;"],[0,"&frac23;"],[0,"&frac15;"],[0,"&frac25;"],[0,"&frac35;"],[0,"&frac45;"],[0,"&frac16;"],[0,"&frac56;"],[0,"&frac18;"],[0,"&frac38;"],[0,"&frac58;"],[0,"&frac78;"],[49,"&larr;"],[0,"&ShortUpArrow;"],[0,"&rarr;"],[0,"&darr;"],[0,"&harr;"],[0,"&updownarrow;"],[0,"&nwarr;"],[0,"&nearr;"],[0,"&LowerRightArrow;"],[0,"&LowerLeftArrow;"],[0,"&nlarr;"],[0,"&nrarr;"],[1,{v:"&rarrw;",n:824,o:"&nrarrw;"}],[0,"&Larr;"],[0,"&Uarr;"],[0,"&Rarr;"],[0,"&Darr;"],[0,"&larrtl;"],[0,"&rarrtl;"],[0,"&LeftTeeArrow;"],[0,"&mapstoup;"],[0,"&map;"],[0,"&DownTeeArrow;"],[1,"&hookleftarrow;"],[0,"&hookrightarrow;"],[0,"&larrlp;"],[0,"&looparrowright;"],[0,"&harrw;"],[0,"&nharr;"],[1,"&lsh;"],[0,"&rsh;"],[0,"&ldsh;"],[0,"&rdsh;"],[1,"&crarr;"],[0,"&cularr;"],[0,"&curarr;"],[2,"&circlearrowleft;"],[0,"&circlearrowright;"],[0,"&leftharpoonup;"],[0,"&DownLeftVector;"],[0,"&RightUpVector;"],[0,"&LeftUpVector;"],[0,"&rharu;"],[0,"&DownRightVector;"],[0,"&dharr;"],[0,"&dharl;"],[0,"&RightArrowLeftArrow;"],[0,"&udarr;"],[0,"&LeftArrowRightArrow;"],[0,"&leftleftarrows;"],[0,"&upuparrows;"],[0,"&rightrightarrows;"],[0,"&ddarr;"],[0,"&leftrightharpoons;"],[0,"&Equilibrium;"],[0,"&nlArr;"],[0,"&nhArr;"],[0,"&nrArr;"],[0,"&DoubleLeftArrow;"],[0,"&DoubleUpArrow;"],[0,"&DoubleRightArrow;"],[0,"&dArr;"],[0,"&DoubleLeftRightArrow;"],[0,"&DoubleUpDownArrow;"],[0,"&nwArr;"],[0,"&neArr;"],[0,"&seArr;"],[0,"&swArr;"],[0,"&lAarr;"],[0,"&rAarr;"],[1,"&zigrarr;"],[6,"&larrb;"],[0,"&rarrb;"],[15,"&DownArrowUpArrow;"],[7,"&loarr;"],[0,"&roarr;"],[0,"&hoarr;"],[0,"&forall;"],[0,"&comp;"],[0,{v:"&part;",n:824,o:"&npart;"}],[0,"&exist;"],[0,"&nexist;"],[0,"&empty;"],[1,"&Del;"],[0,"&Element;"],[0,"&NotElement;"],[1,"&ni;"],[0,"&notni;"],[2,"&prod;"],[0,"&coprod;"],[0,"&sum;"],[0,"&minus;"],[0,"&MinusPlus;"],[0,"&dotplus;"],[1,"&Backslash;"],[0,"&lowast;"],[0,"&compfn;"],[1,"&radic;"],[2,"&prop;"],[0,"&infin;"],[0,"&angrt;"],[0,{v:"&ang;",n:8402,o:"&nang;"}],[0,"&angmsd;"],[0,"&angsph;"],[0,"&mid;"],[0,"&nmid;"],[0,"&DoubleVerticalBar;"],[0,"&NotDoubleVerticalBar;"],[0,"&and;"],[0,"&or;"],[0,{v:"&cap;",n:65024,o:"&caps;"}],[0,{v:"&cup;",n:65024,o:"&cups;"}],[0,"&int;"],[0,"&Int;"],[0,"&iiint;"],[0,"&conint;"],[0,"&Conint;"],[0,"&Cconint;"],[0,"&cwint;"],[0,"&ClockwiseContourIntegral;"],[0,"&awconint;"],[0,"&there4;"],[0,"&becaus;"],[0,"&ratio;"],[0,"&Colon;"],[0,"&dotminus;"],[1,"&mDDot;"],[0,"&homtht;"],[0,{v:"&sim;",n:8402,o:"&nvsim;"}],[0,{v:"&backsim;",n:817,o:"&race;"}],[0,{v:"&ac;",n:819,o:"&acE;"}],[0,"&acd;"],[0,"&VerticalTilde;"],[0,"&NotTilde;"],[0,{v:"&eqsim;",n:824,o:"&nesim;"}],[0,"&sime;"],[0,"&NotTildeEqual;"],[0,"&cong;"],[0,"&simne;"],[0,"&ncong;"],[0,"&ap;"],[0,"&nap;"],[0,"&ape;"],[0,{v:"&apid;",n:824,o:"&napid;"}],[0,"&backcong;"],[0,{v:"&asympeq;",n:8402,o:"&nvap;"}],[0,{v:"&bump;",n:824,o:"&nbump;"}],[0,{v:"&bumpe;",n:824,o:"&nbumpe;"}],[0,{v:"&doteq;",n:824,o:"&nedot;"}],[0,"&doteqdot;"],[0,"&efDot;"],[0,"&erDot;"],[0,"&Assign;"],[0,"&ecolon;"],[0,"&ecir;"],[0,"&circeq;"],[1,"&wedgeq;"],[0,"&veeeq;"],[1,"&triangleq;"],[2,"&equest;"],[0,"&ne;"],[0,{v:"&Congruent;",n:8421,o:"&bnequiv;"}],[0,"&nequiv;"],[1,{v:"&le;",n:8402,o:"&nvle;"}],[0,{v:"&ge;",n:8402,o:"&nvge;"}],[0,{v:"&lE;",n:824,o:"&nlE;"}],[0,{v:"&gE;",n:824,o:"&ngE;"}],[0,{v:"&lnE;",n:65024,o:"&lvertneqq;"}],[0,{v:"&gnE;",n:65024,o:"&gvertneqq;"}],[0,{v:"&ll;",n:new Map(n([[824,"&nLtv;"],[7577,"&nLt;"]]))}],[0,{v:"&gg;",n:new Map(n([[824,"&nGtv;"],[7577,"&nGt;"]]))}],[0,"&between;"],[0,"&NotCupCap;"],[0,"&nless;"],[0,"&ngt;"],[0,"&nle;"],[0,"&nge;"],[0,"&lesssim;"],[0,"&GreaterTilde;"],[0,"&nlsim;"],[0,"&ngsim;"],[0,"&LessGreater;"],[0,"&gl;"],[0,"&NotLessGreater;"],[0,"&NotGreaterLess;"],[0,"&pr;"],[0,"&sc;"],[0,"&prcue;"],[0,"&sccue;"],[0,"&PrecedesTilde;"],[0,{v:"&scsim;",n:824,o:"&NotSucceedsTilde;"}],[0,"&NotPrecedes;"],[0,"&NotSucceeds;"],[0,{v:"&sub;",n:8402,o:"&NotSubset;"}],[0,{v:"&sup;",n:8402,o:"&NotSuperset;"}],[0,"&nsub;"],[0,"&nsup;"],[0,"&sube;"],[0,"&supe;"],[0,"&NotSubsetEqual;"],[0,"&NotSupersetEqual;"],[0,{v:"&subne;",n:65024,o:"&varsubsetneq;"}],[0,{v:"&supne;",n:65024,o:"&varsupsetneq;"}],[1,"&cupdot;"],[0,"&UnionPlus;"],[0,{v:"&sqsub;",n:824,o:"&NotSquareSubset;"}],[0,{v:"&sqsup;",n:824,o:"&NotSquareSuperset;"}],[0,"&sqsube;"],[0,"&sqsupe;"],[0,{v:"&sqcap;",n:65024,o:"&sqcaps;"}],[0,{v:"&sqcup;",n:65024,o:"&sqcups;"}],[0,"&CirclePlus;"],[0,"&CircleMinus;"],[0,"&CircleTimes;"],[0,"&osol;"],[0,"&CircleDot;"],[0,"&circledcirc;"],[0,"&circledast;"],[1,"&circleddash;"],[0,"&boxplus;"],[0,"&boxminus;"],[0,"&boxtimes;"],[0,"&dotsquare;"],[0,"&RightTee;"],[0,"&dashv;"],[0,"&DownTee;"],[0,"&bot;"],[1,"&models;"],[0,"&DoubleRightTee;"],[0,"&Vdash;"],[0,"&Vvdash;"],[0,"&VDash;"],[0,"&nvdash;"],[0,"&nvDash;"],[0,"&nVdash;"],[0,"&nVDash;"],[0,"&prurel;"],[1,"&LeftTriangle;"],[0,"&RightTriangle;"],[0,{v:"&LeftTriangleEqual;",n:8402,o:"&nvltrie;"}],[0,{v:"&RightTriangleEqual;",n:8402,o:"&nvrtrie;"}],[0,"&origof;"],[0,"&imof;"],[0,"&multimap;"],[0,"&hercon;"],[0,"&intcal;"],[0,"&veebar;"],[1,"&barvee;"],[0,"&angrtvb;"],[0,"&lrtri;"],[0,"&bigwedge;"],[0,"&bigvee;"],[0,"&bigcap;"],[0,"&bigcup;"],[0,"&diam;"],[0,"&sdot;"],[0,"&sstarf;"],[0,"&divideontimes;"],[0,"&bowtie;"],[0,"&ltimes;"],[0,"&rtimes;"],[0,"&leftthreetimes;"],[0,"&rightthreetimes;"],[0,"&backsimeq;"],[0,"&curlyvee;"],[0,"&curlywedge;"],[0,"&Sub;"],[0,"&Sup;"],[0,"&Cap;"],[0,"&Cup;"],[0,"&fork;"],[0,"&epar;"],[0,"&lessdot;"],[0,"&gtdot;"],[0,{v:"&Ll;",n:824,o:"&nLl;"}],[0,{v:"&Gg;",n:824,o:"&nGg;"}],[0,{v:"&leg;",n:65024,o:"&lesg;"}],[0,{v:"&gel;",n:65024,o:"&gesl;"}],[2,"&cuepr;"],[0,"&cuesc;"],[0,"&NotPrecedesSlantEqual;"],[0,"&NotSucceedsSlantEqual;"],[0,"&NotSquareSubsetEqual;"],[0,"&NotSquareSupersetEqual;"],[2,"&lnsim;"],[0,"&gnsim;"],[0,"&precnsim;"],[0,"&scnsim;"],[0,"&nltri;"],[0,"&NotRightTriangle;"],[0,"&nltrie;"],[0,"&NotRightTriangleEqual;"],[0,"&vellip;"],[0,"&ctdot;"],[0,"&utdot;"],[0,"&dtdot;"],[0,"&disin;"],[0,"&isinsv;"],[0,"&isins;"],[0,{v:"&isindot;",n:824,o:"&notindot;"}],[0,"&notinvc;"],[0,"&notinvb;"],[1,{v:"&isinE;",n:824,o:"&notinE;"}],[0,"&nisd;"],[0,"&xnis;"],[0,"&nis;"],[0,"&notnivc;"],[0,"&notnivb;"],[6,"&barwed;"],[0,"&Barwed;"],[1,"&lceil;"],[0,"&rceil;"],[0,"&LeftFloor;"],[0,"&rfloor;"],[0,"&drcrop;"],[0,"&dlcrop;"],[0,"&urcrop;"],[0,"&ulcrop;"],[0,"&bnot;"],[1,"&profline;"],[0,"&profsurf;"],[1,"&telrec;"],[0,"&target;"],[5,"&ulcorn;"],[0,"&urcorn;"],[0,"&dlcorn;"],[0,"&drcorn;"],[2,"&frown;"],[0,"&smile;"],[9,"&cylcty;"],[0,"&profalar;"],[7,"&topbot;"],[6,"&ovbar;"],[1,"&solbar;"],[60,"&angzarr;"],[51,"&lmoustache;"],[0,"&rmoustache;"],[2,"&OverBracket;"],[0,"&bbrk;"],[0,"&bbrktbrk;"],[37,"&OverParenthesis;"],[0,"&UnderParenthesis;"],[0,"&OverBrace;"],[0,"&UnderBrace;"],[2,"&trpezium;"],[4,"&elinters;"],[59,"&blank;"],[164,"&circledS;"],[55,"&boxh;"],[1,"&boxv;"],[9,"&boxdr;"],[3,"&boxdl;"],[3,"&boxur;"],[3,"&boxul;"],[3,"&boxvr;"],[7,"&boxvl;"],[7,"&boxhd;"],[7,"&boxhu;"],[7,"&boxvh;"],[19,"&boxH;"],[0,"&boxV;"],[0,"&boxdR;"],[0,"&boxDr;"],[0,"&boxDR;"],[0,"&boxdL;"],[0,"&boxDl;"],[0,"&boxDL;"],[0,"&boxuR;"],[0,"&boxUr;"],[0,"&boxUR;"],[0,"&boxuL;"],[0,"&boxUl;"],[0,"&boxUL;"],[0,"&boxvR;"],[0,"&boxVr;"],[0,"&boxVR;"],[0,"&boxvL;"],[0,"&boxVl;"],[0,"&boxVL;"],[0,"&boxHd;"],[0,"&boxhD;"],[0,"&boxHD;"],[0,"&boxHu;"],[0,"&boxhU;"],[0,"&boxHU;"],[0,"&boxvH;"],[0,"&boxVh;"],[0,"&boxVH;"],[19,"&uhblk;"],[3,"&lhblk;"],[3,"&block;"],[8,"&blk14;"],[0,"&blk12;"],[0,"&blk34;"],[13,"&square;"],[8,"&blacksquare;"],[0,"&EmptyVerySmallSquare;"],[1,"&rect;"],[0,"&marker;"],[2,"&fltns;"],[1,"&bigtriangleup;"],[0,"&blacktriangle;"],[0,"&triangle;"],[2,"&blacktriangleright;"],[0,"&rtri;"],[3,"&bigtriangledown;"],[0,"&blacktriangledown;"],[0,"&dtri;"],[2,"&blacktriangleleft;"],[0,"&ltri;"],[6,"&loz;"],[0,"&cir;"],[32,"&tridot;"],[2,"&bigcirc;"],[8,"&ultri;"],[0,"&urtri;"],[0,"&lltri;"],[0,"&EmptySmallSquare;"],[0,"&FilledSmallSquare;"],[8,"&bigstar;"],[0,"&star;"],[7,"&phone;"],[49,"&female;"],[1,"&male;"],[29,"&spades;"],[2,"&clubs;"],[1,"&hearts;"],[0,"&diamondsuit;"],[3,"&sung;"],[2,"&flat;"],[0,"&natural;"],[0,"&sharp;"],[163,"&check;"],[3,"&cross;"],[8,"&malt;"],[21,"&sext;"],[33,"&VerticalSeparator;"],[25,"&lbbrk;"],[0,"&rbbrk;"],[84,"&bsolhsub;"],[0,"&suphsol;"],[28,"&LeftDoubleBracket;"],[0,"&RightDoubleBracket;"],[0,"&lang;"],[0,"&rang;"],[0,"&Lang;"],[0,"&Rang;"],[0,"&loang;"],[0,"&roang;"],[7,"&longleftarrow;"],[0,"&longrightarrow;"],[0,"&longleftrightarrow;"],[0,"&DoubleLongLeftArrow;"],[0,"&DoubleLongRightArrow;"],[0,"&DoubleLongLeftRightArrow;"],[1,"&longmapsto;"],[2,"&dzigrarr;"],[258,"&nvlArr;"],[0,"&nvrArr;"],[0,"&nvHarr;"],[0,"&Map;"],[6,"&lbarr;"],[0,"&bkarow;"],[0,"&lBarr;"],[0,"&dbkarow;"],[0,"&drbkarow;"],[0,"&DDotrahd;"],[0,"&UpArrowBar;"],[0,"&DownArrowBar;"],[2,"&Rarrtl;"],[2,"&latail;"],[0,"&ratail;"],[0,"&lAtail;"],[0,"&rAtail;"],[0,"&larrfs;"],[0,"&rarrfs;"],[0,"&larrbfs;"],[0,"&rarrbfs;"],[2,"&nwarhk;"],[0,"&nearhk;"],[0,"&hksearow;"],[0,"&hkswarow;"],[0,"&nwnear;"],[0,"&nesear;"],[0,"&seswar;"],[0,"&swnwar;"],[8,{v:"&rarrc;",n:824,o:"&nrarrc;"}],[1,"&cudarrr;"],[0,"&ldca;"],[0,"&rdca;"],[0,"&cudarrl;"],[0,"&larrpl;"],[2,"&curarrm;"],[0,"&cularrp;"],[7,"&rarrpl;"],[2,"&harrcir;"],[0,"&Uarrocir;"],[0,"&lurdshar;"],[0,"&ldrushar;"],[2,"&LeftRightVector;"],[0,"&RightUpDownVector;"],[0,"&DownLeftRightVector;"],[0,"&LeftUpDownVector;"],[0,"&LeftVectorBar;"],[0,"&RightVectorBar;"],[0,"&RightUpVectorBar;"],[0,"&RightDownVectorBar;"],[0,"&DownLeftVectorBar;"],[0,"&DownRightVectorBar;"],[0,"&LeftUpVectorBar;"],[0,"&LeftDownVectorBar;"],[0,"&LeftTeeVector;"],[0,"&RightTeeVector;"],[0,"&RightUpTeeVector;"],[0,"&RightDownTeeVector;"],[0,"&DownLeftTeeVector;"],[0,"&DownRightTeeVector;"],[0,"&LeftUpTeeVector;"],[0,"&LeftDownTeeVector;"],[0,"&lHar;"],[0,"&uHar;"],[0,"&rHar;"],[0,"&dHar;"],[0,"&luruhar;"],[0,"&ldrdhar;"],[0,"&ruluhar;"],[0,"&rdldhar;"],[0,"&lharul;"],[0,"&llhard;"],[0,"&rharul;"],[0,"&lrhard;"],[0,"&udhar;"],[0,"&duhar;"],[0,"&RoundImplies;"],[0,"&erarr;"],[0,"&simrarr;"],[0,"&larrsim;"],[0,"&rarrsim;"],[0,"&rarrap;"],[0,"&ltlarr;"],[1,"&gtrarr;"],[0,"&subrarr;"],[1,"&suplarr;"],[0,"&lfisht;"],[0,"&rfisht;"],[0,"&ufisht;"],[0,"&dfisht;"],[5,"&lopar;"],[0,"&ropar;"],[4,"&lbrke;"],[0,"&rbrke;"],[0,"&lbrkslu;"],[0,"&rbrksld;"],[0,"&lbrksld;"],[0,"&rbrkslu;"],[0,"&langd;"],[0,"&rangd;"],[0,"&lparlt;"],[0,"&rpargt;"],[0,"&gtlPar;"],[0,"&ltrPar;"],[3,"&vzigzag;"],[1,"&vangrt;"],[0,"&angrtvbd;"],[6,"&ange;"],[0,"&range;"],[0,"&dwangle;"],[0,"&uwangle;"],[0,"&angmsdaa;"],[0,"&angmsdab;"],[0,"&angmsdac;"],[0,"&angmsdad;"],[0,"&angmsdae;"],[0,"&angmsdaf;"],[0,"&angmsdag;"],[0,"&angmsdah;"],[0,"&bemptyv;"],[0,"&demptyv;"],[0,"&cemptyv;"],[0,"&raemptyv;"],[0,"&laemptyv;"],[0,"&ohbar;"],[0,"&omid;"],[0,"&opar;"],[1,"&operp;"],[1,"&olcross;"],[0,"&odsold;"],[1,"&olcir;"],[0,"&ofcir;"],[0,"&olt;"],[0,"&ogt;"],[0,"&cirscir;"],[0,"&cirE;"],[0,"&solb;"],[0,"&bsolb;"],[3,"&boxbox;"],[3,"&trisb;"],[0,"&rtriltri;"],[0,{v:"&LeftTriangleBar;",n:824,o:"&NotLeftTriangleBar;"}],[0,{v:"&RightTriangleBar;",n:824,o:"&NotRightTriangleBar;"}],[11,"&iinfin;"],[0,"&infintie;"],[0,"&nvinfin;"],[4,"&eparsl;"],[0,"&smeparsl;"],[0,"&eqvparsl;"],[5,"&blacklozenge;"],[8,"&RuleDelayed;"],[1,"&dsol;"],[9,"&bigodot;"],[0,"&bigoplus;"],[0,"&bigotimes;"],[1,"&biguplus;"],[1,"&bigsqcup;"],[5,"&iiiint;"],[0,"&fpartint;"],[2,"&cirfnint;"],[0,"&awint;"],[0,"&rppolint;"],[0,"&scpolint;"],[0,"&npolint;"],[0,"&pointint;"],[0,"&quatint;"],[0,"&intlarhk;"],[10,"&pluscir;"],[0,"&plusacir;"],[0,"&simplus;"],[0,"&plusdu;"],[0,"&plussim;"],[0,"&plustwo;"],[1,"&mcomma;"],[0,"&minusdu;"],[2,"&loplus;"],[0,"&roplus;"],[0,"&Cross;"],[0,"&timesd;"],[0,"&timesbar;"],[1,"&smashp;"],[0,"&lotimes;"],[0,"&rotimes;"],[0,"&otimesas;"],[0,"&Otimes;"],[0,"&odiv;"],[0,"&triplus;"],[0,"&triminus;"],[0,"&tritime;"],[0,"&intprod;"],[2,"&amalg;"],[0,"&capdot;"],[1,"&ncup;"],[0,"&ncap;"],[0,"&capand;"],[0,"&cupor;"],[0,"&cupcap;"],[0,"&capcup;"],[0,"&cupbrcap;"],[0,"&capbrcup;"],[0,"&cupcup;"],[0,"&capcap;"],[0,"&ccups;"],[0,"&ccaps;"],[2,"&ccupssm;"],[2,"&And;"],[0,"&Or;"],[0,"&andand;"],[0,"&oror;"],[0,"&orslope;"],[0,"&andslope;"],[1,"&andv;"],[0,"&orv;"],[0,"&andd;"],[0,"&ord;"],[1,"&wedbar;"],[6,"&sdote;"],[3,"&simdot;"],[2,{v:"&congdot;",n:824,o:"&ncongdot;"}],[0,"&easter;"],[0,"&apacir;"],[0,{v:"&apE;",n:824,o:"&napE;"}],[0,"&eplus;"],[0,"&pluse;"],[0,"&Esim;"],[0,"&Colone;"],[0,"&Equal;"],[1,"&ddotseq;"],[0,"&equivDD;"],[0,"&ltcir;"],[0,"&gtcir;"],[0,"&ltquest;"],[0,"&gtquest;"],[0,{v:"&leqslant;",n:824,o:"&nleqslant;"}],[0,{v:"&geqslant;",n:824,o:"&ngeqslant;"}],[0,"&lesdot;"],[0,"&gesdot;"],[0,"&lesdoto;"],[0,"&gesdoto;"],[0,"&lesdotor;"],[0,"&gesdotol;"],[0,"&lap;"],[0,"&gap;"],[0,"&lne;"],[0,"&gne;"],[0,"&lnap;"],[0,"&gnap;"],[0,"&lEg;"],[0,"&gEl;"],[0,"&lsime;"],[0,"&gsime;"],[0,"&lsimg;"],[0,"&gsiml;"],[0,"&lgE;"],[0,"&glE;"],[0,"&lesges;"],[0,"&gesles;"],[0,"&els;"],[0,"&egs;"],[0,"&elsdot;"],[0,"&egsdot;"],[0,"&el;"],[0,"&eg;"],[2,"&siml;"],[0,"&simg;"],[0,"&simlE;"],[0,"&simgE;"],[0,{v:"&LessLess;",n:824,o:"&NotNestedLessLess;"}],[0,{v:"&GreaterGreater;",n:824,o:"&NotNestedGreaterGreater;"}],[1,"&glj;"],[0,"&gla;"],[0,"&ltcc;"],[0,"&gtcc;"],[0,"&lescc;"],[0,"&gescc;"],[0,"&smt;"],[0,"&lat;"],[0,{v:"&smte;",n:65024,o:"&smtes;"}],[0,{v:"&late;",n:65024,o:"&lates;"}],[0,"&bumpE;"],[0,{v:"&PrecedesEqual;",n:824,o:"&NotPrecedesEqual;"}],[0,{v:"&sce;",n:824,o:"&NotSucceedsEqual;"}],[2,"&prE;"],[0,"&scE;"],[0,"&precneqq;"],[0,"&scnE;"],[0,"&prap;"],[0,"&scap;"],[0,"&precnapprox;"],[0,"&scnap;"],[0,"&Pr;"],[0,"&Sc;"],[0,"&subdot;"],[0,"&supdot;"],[0,"&subplus;"],[0,"&supplus;"],[0,"&submult;"],[0,"&supmult;"],[0,"&subedot;"],[0,"&supedot;"],[0,{v:"&subE;",n:824,o:"&nsubE;"}],[0,{v:"&supE;",n:824,o:"&nsupE;"}],[0,"&subsim;"],[0,"&supsim;"],[2,{v:"&subnE;",n:65024,o:"&varsubsetneqq;"}],[0,{v:"&supnE;",n:65024,o:"&varsupsetneqq;"}],[2,"&csub;"],[0,"&csup;"],[0,"&csube;"],[0,"&csupe;"],[0,"&subsup;"],[0,"&supsub;"],[0,"&subsub;"],[0,"&supsup;"],[0,"&suphsub;"],[0,"&supdsub;"],[0,"&forkv;"],[0,"&topfork;"],[0,"&mlcp;"],[8,"&Dashv;"],[1,"&Vdashl;"],[0,"&Barv;"],[0,"&vBar;"],[0,"&vBarv;"],[1,"&Vbar;"],[0,"&Not;"],[0,"&bNot;"],[0,"&rnmid;"],[0,"&cirmid;"],[0,"&midcir;"],[0,"&topcir;"],[0,"&nhpar;"],[0,"&parsim;"],[9,{v:"&parsl;",n:8421,o:"&nparsl;"}],[44343,{n:new Map(n([[56476,"&Ascr;"],[1,"&Cscr;"],[0,"&Dscr;"],[2,"&Gscr;"],[2,"&Jscr;"],[0,"&Kscr;"],[2,"&Nscr;"],[0,"&Oscr;"],[0,"&Pscr;"],[0,"&Qscr;"],[1,"&Sscr;"],[0,"&Tscr;"],[0,"&Uscr;"],[0,"&Vscr;"],[0,"&Wscr;"],[0,"&Xscr;"],[0,"&Yscr;"],[0,"&Zscr;"],[0,"&ascr;"],[0,"&bscr;"],[0,"&cscr;"],[0,"&dscr;"],[1,"&fscr;"],[1,"&hscr;"],[0,"&iscr;"],[0,"&jscr;"],[0,"&kscr;"],[0,"&lscr;"],[0,"&mscr;"],[0,"&nscr;"],[1,"&pscr;"],[0,"&qscr;"],[0,"&rscr;"],[0,"&sscr;"],[0,"&tscr;"],[0,"&uscr;"],[0,"&vscr;"],[0,"&wscr;"],[0,"&xscr;"],[0,"&yscr;"],[0,"&zscr;"],[52,"&Afr;"],[0,"&Bfr;"],[1,"&Dfr;"],[0,"&Efr;"],[0,"&Ffr;"],[0,"&Gfr;"],[2,"&Jfr;"],[0,"&Kfr;"],[0,"&Lfr;"],[0,"&Mfr;"],[0,"&Nfr;"],[0,"&Ofr;"],[0,"&Pfr;"],[0,"&Qfr;"],[1,"&Sfr;"],[0,"&Tfr;"],[0,"&Ufr;"],[0,"&Vfr;"],[0,"&Wfr;"],[0,"&Xfr;"],[0,"&Yfr;"],[1,"&afr;"],[0,"&bfr;"],[0,"&cfr;"],[0,"&dfr;"],[0,"&efr;"],[0,"&ffr;"],[0,"&gfr;"],[0,"&hfr;"],[0,"&ifr;"],[0,"&jfr;"],[0,"&kfr;"],[0,"&lfr;"],[0,"&mfr;"],[0,"&nfr;"],[0,"&ofr;"],[0,"&pfr;"],[0,"&qfr;"],[0,"&rfr;"],[0,"&sfr;"],[0,"&tfr;"],[0,"&ufr;"],[0,"&vfr;"],[0,"&wfr;"],[0,"&xfr;"],[0,"&yfr;"],[0,"&zfr;"],[0,"&Aopf;"],[0,"&Bopf;"],[1,"&Dopf;"],[0,"&Eopf;"],[0,"&Fopf;"],[0,"&Gopf;"],[1,"&Iopf;"],[0,"&Jopf;"],[0,"&Kopf;"],[0,"&Lopf;"],[0,"&Mopf;"],[1,"&Oopf;"],[3,"&Sopf;"],[0,"&Topf;"],[0,"&Uopf;"],[0,"&Vopf;"],[0,"&Wopf;"],[0,"&Xopf;"],[0,"&Yopf;"],[1,"&aopf;"],[0,"&bopf;"],[0,"&copf;"],[0,"&dopf;"],[0,"&eopf;"],[0,"&fopf;"],[0,"&gopf;"],[0,"&hopf;"],[0,"&iopf;"],[0,"&jopf;"],[0,"&kopf;"],[0,"&lopf;"],[0,"&mopf;"],[0,"&nopf;"],[0,"&oopf;"],[0,"&popf;"],[0,"&qopf;"],[0,"&ropf;"],[0,"&sopf;"],[0,"&topf;"],[0,"&uopf;"],[0,"&vopf;"],[0,"&wopf;"],[0,"&xopf;"],[0,"&yopf;"],[0,"&zopf;"]]))}],[8906,"&fflig;"],[0,"&filig;"],[0,"&fllig;"],[0,"&ffilig;"],[0,"&ffllig;"]]))},93028:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.decodeXMLStrict=t.decodeHTML5Strict=t.decodeHTML4Strict=t.decodeHTML5=t.decodeHTML4=t.decodeHTMLAttribute=t.decodeHTMLStrict=t.decodeHTML=t.decodeXML=t.DecodingMode=t.EntityDecoder=t.encodeHTML5=t.encodeHTML4=t.encodeNonAsciiHTML=t.encodeHTML=t.escapeText=t.escapeAttribute=t.escapeUTF8=t.escape=t.encodeXML=t.encode=t.decodeStrict=t.decode=t.EncodingMode=t.EntityLevel=void 0;var a,r,i=n(91195),o=n(31108),d=n(95085);function s(e,t){if(void 0===t&&(t=a.XML),("number"==typeof t?t:t.level)===a.HTML){var n="object"==typeof t?t.mode:void 0;return(0,i.decodeHTML)(e,n)}return(0,i.decodeXML)(e)}!function(e){e[e.XML=0]="XML",e[e.HTML=1]="HTML"}(a=t.EntityLevel||(t.EntityLevel={})),function(e){e[e.UTF8=0]="UTF8",e[e.ASCII=1]="ASCII",e[e.Extensive=2]="Extensive",e[e.Attribute=3]="Attribute",e[e.Text=4]="Text"}(r=t.EncodingMode||(t.EncodingMode={})),t.decode=s,t.decodeStrict=function(e,t){var n;void 0===t&&(t=a.XML);var r="number"==typeof t?{level:t}:t;return null!==(n=r.mode)&&void 0!==n||(r.mode=i.DecodingMode.Strict),s(e,r)},t.encode=function(e,t){void 0===t&&(t=a.XML);var n="number"==typeof t?{level:t}:t;return n.mode===r.UTF8?(0,d.escapeUTF8)(e):n.mode===r.Attribute?(0,d.escapeAttribute)(e):n.mode===r.Text?(0,d.escapeText)(e):n.level===a.HTML?n.mode===r.ASCII?(0,o.encodeNonAsciiHTML)(e):(0,o.encodeHTML)(e):(0,d.encodeXML)(e)};var c=n(95085);Object.defineProperty(t,"encodeXML",{enumerable:!0,get:function(){return c.encodeXML}}),Object.defineProperty(t,"escape",{enumerable:!0,get:function(){return c.escape}}),Object.defineProperty(t,"escapeUTF8",{enumerable:!0,get:function(){return c.escapeUTF8}}),Object.defineProperty(t,"escapeAttribute",{enumerable:!0,get:function(){return c.escapeAttribute}}),Object.defineProperty(t,"escapeText",{enumerable:!0,get:function(){return c.escapeText}});var u=n(31108);Object.defineProperty(t,"encodeHTML",{enumerable:!0,get:function(){return u.encodeHTML}}),Object.defineProperty(t,"encodeNonAsciiHTML",{enumerable:!0,get:function(){return u.encodeNonAsciiHTML}}),Object.defineProperty(t,"encodeHTML4",{enumerable:!0,get:function(){return u.encodeHTML}}),Object.defineProperty(t,"encodeHTML5",{enumerable:!0,get:function(){return u.encodeHTML}});var l=n(91195);Object.defineProperty(t,"EntityDecoder",{enumerable:!0,get:function(){return l.EntityDecoder}}),Object.defineProperty(t,"DecodingMode",{enumerable:!0,get:function(){return l.DecodingMode}}),Object.defineProperty(t,"decodeXML",{enumerable:!0,get:function(){return l.decodeXML}}),Object.defineProperty(t,"decodeHTML",{enumerable:!0,get:function(){return l.decodeHTML}}),Object.defineProperty(t,"decodeHTMLStrict",{enumerable:!0,get:function(){return l.decodeHTMLStrict}}),Object.defineProperty(t,"decodeHTMLAttribute",{enumerable:!0,get:function(){return l.decodeHTMLAttribute}}),Object.defineProperty(t,"decodeHTML4",{enumerable:!0,get:function(){return l.decodeHTML}}),Object.defineProperty(t,"decodeHTML5",{enumerable:!0,get:function(){return l.decodeHTML}}),Object.defineProperty(t,"decodeHTML4Strict",{enumerable:!0,get:function(){return l.decodeHTMLStrict}}),Object.defineProperty(t,"decodeHTML5Strict",{enumerable:!0,get:function(){return l.decodeHTMLStrict}}),Object.defineProperty(t,"decodeXMLStrict",{enumerable:!0,get:function(){return l.decodeXML}})},80289:function(e,t){"use strict";var n;Object.defineProperty(t,"__esModule",{value:!0}),t.Doctype=t.CDATA=t.Tag=t.Style=t.Script=t.Comment=t.Directive=t.Text=t.Root=t.isTag=t.ElementType=void 0,function(e){e.Root="root",e.Text="text",e.Directive="directive",e.Comment="comment",e.Script="script",e.Style="style",e.Tag="tag",e.CDATA="cdata",e.Doctype="doctype"}(n=t.ElementType||(t.ElementType={})),t.isTag=function(e){return e.type===n.Tag||e.type===n.Script||e.type===n.Style},t.Root=n.Root,t.Text=n.Text,t.Directive=n.Directive,t.Comment=n.Comment,t.Script=n.Script,t.Style=n.Style,t.Tag=n.Tag,t.CDATA=n.CDATA,t.Doctype=n.Doctype},36722:function(e,t,n){"use strict";var a=this&&this.__createBinding||(Object.create?function(e,t,n,a){void 0===a&&(a=n);var r=Object.getOwnPropertyDescriptor(t,n);r&&!("get"in r?!t.__esModule:r.writable||r.configurable)||(r={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,a,r)}:function(e,t,n,a){void 0===a&&(a=n),e[a]=t[n]}),r=this&&this.__exportStar||function(e,t){for(var n in e)"default"===n||Object.prototype.hasOwnProperty.call(t,n)||a(t,e,n)};Object.defineProperty(t,"__esModule",{value:!0}),t.DomHandler=void 0;var i=n(80289),o=n(11901);r(n(11901),t);var d={withStartIndices:!1,withEndIndices:!1,xmlMode:!1},s=function(){function e(e,t,n){this.dom=[],this.root=new o.Document(this.dom),this.done=!1,this.tagStack=[this.root],this.lastNode=null,this.parser=null,"function"==typeof t&&(n=t,t=d),"object"==typeof e&&(t=e,e=void 0),this.callback=null!=e?e:null,this.options=null!=t?t:d,this.elementCB=null!=n?n:null}return e.prototype.onparserinit=function(e){this.parser=e},e.prototype.onreset=function(){this.dom=[],this.root=new o.Document(this.dom),this.done=!1,this.tagStack=[this.root],this.lastNode=null,this.parser=null},e.prototype.onend=function(){this.done||(this.done=!0,this.parser=null,this.handleCallback(null))},e.prototype.onerror=function(e){this.handleCallback(e)},e.prototype.onclosetag=function(){this.lastNode=null;var e=this.tagStack.pop();this.options.withEndIndices&&(e.endIndex=this.parser.endIndex),this.elementCB&&this.elementCB(e)},e.prototype.onopentag=function(e,t){var n=this.options.xmlMode?i.ElementType.Tag:void 0,a=new o.Element(e,t,void 0,n);this.addNode(a),this.tagStack.push(a)},e.prototype.ontext=function(e){var t=this.lastNode;if(t&&t.type===i.ElementType.Text)t.data+=e,this.options.withEndIndices&&(t.endIndex=this.parser.endIndex);else{var n=new o.Text(e);this.addNode(n),this.lastNode=n}},e.prototype.oncomment=function(e){if(this.lastNode&&this.lastNode.type===i.ElementType.Comment)this.lastNode.data+=e;else{var t=new o.Comment(e);this.addNode(t),this.lastNode=t}},e.prototype.oncommentend=function(){this.lastNode=null},e.prototype.oncdatastart=function(){var e=new o.Text(""),t=new o.CDATA([e]);this.addNode(t),e.parent=t,this.lastNode=e},e.prototype.oncdataend=function(){this.lastNode=null},e.prototype.onprocessinginstruction=function(e,t){var n=new o.ProcessingInstruction(e,t);this.addNode(n)},e.prototype.handleCallback=function(e){if("function"==typeof this.callback)this.callback(e,this.dom);else if(e)throw e},e.prototype.addNode=function(e){var t=this.tagStack[this.tagStack.length-1],n=t.children[t.children.length-1];this.options.withStartIndices&&(e.startIndex=this.parser.startIndex),this.options.withEndIndices&&(e.endIndex=this.parser.endIndex),t.children.push(e),n&&(e.prev=n,n.next=e),e.parent=t,this.lastNode=null},e}();t.DomHandler=s,t.default=s},11901:function(e,t,n){"use strict";var a,r=this&&this.__extends||(a=function(e,t){return a=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])},a(e,t)},function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function n(){this.constructor=e}a(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}),i=this&&this.__assign||function(){return i=Object.assign||function(e){for(var t,n=1,a=arguments.length;n<a;n++)for(var r in t=arguments[n])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e},i.apply(this,arguments)};Object.defineProperty(t,"__esModule",{value:!0}),t.cloneNode=t.hasChildren=t.isDocument=t.isDirective=t.isComment=t.isText=t.isCDATA=t.isTag=t.Element=t.Document=t.CDATA=t.NodeWithChildren=t.ProcessingInstruction=t.Comment=t.Text=t.DataNode=t.Node=void 0;var o=n(80289),d=function(){function e(){this.parent=null,this.prev=null,this.next=null,this.startIndex=null,this.endIndex=null}return Object.defineProperty(e.prototype,"parentNode",{get:function(){return this.parent},set:function(e){this.parent=e},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"previousSibling",{get:function(){return this.prev},set:function(e){this.prev=e},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"nextSibling",{get:function(){return this.next},set:function(e){this.next=e},enumerable:!1,configurable:!0}),e.prototype.cloneNode=function(e){return void 0===e&&(e=!1),w(this,e)},e}();t.Node=d;var s=function(e){function t(t){var n=e.call(this)||this;return n.data=t,n}return r(t,e),Object.defineProperty(t.prototype,"nodeValue",{get:function(){return this.data},set:function(e){this.data=e},enumerable:!1,configurable:!0}),t}(d);t.DataNode=s;var c=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.type=o.ElementType.Text,t}return r(t,e),Object.defineProperty(t.prototype,"nodeType",{get:function(){return 3},enumerable:!1,configurable:!0}),t}(s);t.Text=c;var u=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.type=o.ElementType.Comment,t}return r(t,e),Object.defineProperty(t.prototype,"nodeType",{get:function(){return 8},enumerable:!1,configurable:!0}),t}(s);t.Comment=u;var l=function(e){function t(t,n){var a=e.call(this,n)||this;return a.name=t,a.type=o.ElementType.Directive,a}return r(t,e),Object.defineProperty(t.prototype,"nodeType",{get:function(){return 1},enumerable:!1,configurable:!0}),t}(s);t.ProcessingInstruction=l;var g=function(e){function t(t){var n=e.call(this)||this;return n.children=t,n}return r(t,e),Object.defineProperty(t.prototype,"firstChild",{get:function(){var e;return null!==(e=this.children[0])&&void 0!==e?e:null},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"lastChild",{get:function(){return this.children.length>0?this.children[this.children.length-1]:null},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"childNodes",{get:function(){return this.children},set:function(e){this.children=e},enumerable:!1,configurable:!0}),t}(d);t.NodeWithChildren=g;var h=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.type=o.ElementType.CDATA,t}return r(t,e),Object.defineProperty(t.prototype,"nodeType",{get:function(){return 4},enumerable:!1,configurable:!0}),t}(g);t.CDATA=h;var f=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.type=o.ElementType.Root,t}return r(t,e),Object.defineProperty(t.prototype,"nodeType",{get:function(){return 9},enumerable:!1,configurable:!0}),t}(g);t.Document=f;var p=function(e){function t(t,n,a,r){void 0===a&&(a=[]),void 0===r&&(r="script"===t?o.ElementType.Script:"style"===t?o.ElementType.Style:o.ElementType.Tag);var i=e.call(this,a)||this;return i.name=t,i.attribs=n,i.type=r,i}return r(t,e),Object.defineProperty(t.prototype,"nodeType",{get:function(){return 1},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"tagName",{get:function(){return this.name},set:function(e){this.name=e},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"attributes",{get:function(){var e=this;return Object.keys(this.attribs).map((function(t){var n,a;return{name:t,value:e.attribs[t],namespace:null===(n=e["x-attribsNamespace"])||void 0===n?void 0:n[t],prefix:null===(a=e["x-attribsPrefix"])||void 0===a?void 0:a[t]}}))},enumerable:!1,configurable:!0}),t}(g);function m(e){return(0,o.isTag)(e)}function R(e){return e.type===o.ElementType.CDATA}function b(e){return e.type===o.ElementType.Text}function y(e){return e.type===o.ElementType.Comment}function v(e){return e.type===o.ElementType.Directive}function _(e){return e.type===o.ElementType.Root}function w(e,t){var n;if(void 0===t&&(t=!1),b(e))n=new c(e.data);else if(y(e))n=new u(e.data);else if(m(e)){var a=t?M(e.children):[],r=new p(e.name,i({},e.attribs),a);a.forEach((function(e){return e.parent=r})),null!=e.namespace&&(r.namespace=e.namespace),e["x-attribsNamespace"]&&(r["x-attribsNamespace"]=i({},e["x-attribsNamespace"])),e["x-attribsPrefix"]&&(r["x-attribsPrefix"]=i({},e["x-attribsPrefix"])),n=r}else if(R(e)){a=t?M(e.children):[];var o=new h(a);a.forEach((function(e){return e.parent=o})),n=o}else if(_(e)){a=t?M(e.children):[];var d=new f(a);a.forEach((function(e){return e.parent=d})),e["x-mode"]&&(d["x-mode"]=e["x-mode"]),n=d}else{if(!v(e))throw new Error("Not implemented yet: ".concat(e.type));var s=new l(e.name,e.data);null!=e["x-name"]&&(s["x-name"]=e["x-name"],s["x-publicId"]=e["x-publicId"],s["x-systemId"]=e["x-systemId"]),n=s}return n.startIndex=e.startIndex,n.endIndex=e.endIndex,null!=e.sourceCodeLocation&&(n.sourceCodeLocation=e.sourceCodeLocation),n}function M(e){for(var t=e.map((function(e){return w(e,!0)})),n=1;n<t.length;n++)t[n].prev=t[n-1],t[n-1].next=t[n];return t}t.Element=p,t.isTag=m,t.isCDATA=R,t.isText=b,t.isComment=y,t.isDirective=v,t.isDocument=_,t.hasChildren=function(e){return Object.prototype.hasOwnProperty.call(e,"children")},t.cloneNode=w},67652:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getFeed=void 0;var a=n(91454),r=n(5198);t.getFeed=function(e){var t=s(l,e);return t?"feed"===t.name?function(e){var t,n=e.children,a={type:"atom",items:(0,r.getElementsByTagName)("entry",n).map((function(e){var t,n=e.children,a={media:d(n)};u(a,"id","id",n),u(a,"title","title",n);var r=null===(t=s("link",n))||void 0===t?void 0:t.attribs.href;r&&(a.link=r);var i=c("summary",n)||c("content",n);i&&(a.description=i);var o=c("updated",n);return o&&(a.pubDate=new Date(o)),a}))};u(a,"id","id",n),u(a,"title","title",n);var i=null===(t=s("link",n))||void 0===t?void 0:t.attribs.href;i&&(a.link=i);u(a,"description","subtitle",n);var o=c("updated",n);o&&(a.updated=new Date(o));return u(a,"author","email",n,!0),a}(t):function(e){var t,n,a=null!==(n=null===(t=s("channel",e.children))||void 0===t?void 0:t.children)&&void 0!==n?n:[],i={type:e.name.substr(0,3),id:"",items:(0,r.getElementsByTagName)("item",e.children).map((function(e){var t=e.children,n={media:d(t)};u(n,"id","guid",t),u(n,"title","title",t),u(n,"link","link",t),u(n,"description","description",t);var a=c("pubDate",t)||c("dc:date",t);return a&&(n.pubDate=new Date(a)),n}))};u(i,"title","title",a),u(i,"link","link",a),u(i,"description","description",a);var o=c("lastBuildDate",a);o&&(i.updated=new Date(o));return u(i,"author","managingEditor",a,!0),i}(t):null};var i=["url","type","lang"],o=["fileSize","bitrate","framerate","samplingrate","channels","duration","height","width"];function d(e){return(0,r.getElementsByTagName)("media:content",e).map((function(e){for(var t=e.attribs,n={medium:t.medium,isDefault:!!t.isDefault},a=0,r=i;a<r.length;a++){t[c=r[a]]&&(n[c]=t[c])}for(var d=0,s=o;d<s.length;d++){var c;t[c=s[d]]&&(n[c]=parseInt(t[c],10))}return t.expression&&(n.expression=t.expression),n}))}function s(e,t){return(0,r.getElementsByTagName)(e,t,!0,1)[0]}function c(e,t,n){return void 0===n&&(n=!1),(0,a.textContent)((0,r.getElementsByTagName)(e,t,n,1)).trim()}function u(e,t,n,a,r){void 0===r&&(r=!1);var i=c(n,a,r);i&&(e[t]=i)}function l(e){return"rss"===e||"feed"===e||"rdf:RDF"===e}},86367:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.uniqueSort=t.compareDocumentPosition=t.DocumentPosition=t.removeSubsets=void 0;var a,r=n(36722);function i(e,t){var n=[],i=[];if(e===t)return 0;for(var o=(0,r.hasChildren)(e)?e:e.parent;o;)n.unshift(o),o=o.parent;for(o=(0,r.hasChildren)(t)?t:t.parent;o;)i.unshift(o),o=o.parent;for(var d=Math.min(n.length,i.length),s=0;s<d&&n[s]===i[s];)s++;if(0===s)return a.DISCONNECTED;var c=n[s-1],u=c.children,l=n[s],g=i[s];return u.indexOf(l)>u.indexOf(g)?c===t?a.FOLLOWING|a.CONTAINED_BY:a.FOLLOWING:c===e?a.PRECEDING|a.CONTAINS:a.PRECEDING}t.removeSubsets=function(e){for(var t=e.length;--t>=0;){var n=e[t];if(t>0&&e.lastIndexOf(n,t-1)>=0)e.splice(t,1);else for(var a=n.parent;a;a=a.parent)if(e.includes(a)){e.splice(t,1);break}}return e},function(e){e[e.DISCONNECTED=1]="DISCONNECTED",e[e.PRECEDING=2]="PRECEDING",e[e.FOLLOWING=4]="FOLLOWING",e[e.CONTAINS=8]="CONTAINS",e[e.CONTAINED_BY=16]="CONTAINED_BY"}(a=t.DocumentPosition||(t.DocumentPosition={})),t.compareDocumentPosition=i,t.uniqueSort=function(e){return(e=e.filter((function(e,t,n){return!n.includes(e,t+1)}))).sort((function(e,t){var n=i(e,t);return n&a.PRECEDING?-1:n&a.FOLLOWING?1:0})),e}},557:function(e,t,n){"use strict";var a=this&&this.__createBinding||(Object.create?function(e,t,n,a){void 0===a&&(a=n);var r=Object.getOwnPropertyDescriptor(t,n);r&&!("get"in r?!t.__esModule:r.writable||r.configurable)||(r={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,a,r)}:function(e,t,n,a){void 0===a&&(a=n),e[a]=t[n]}),r=this&&this.__exportStar||function(e,t){for(var n in e)"default"===n||Object.prototype.hasOwnProperty.call(t,n)||a(t,e,n)};Object.defineProperty(t,"__esModule",{value:!0}),t.hasChildren=t.isDocument=t.isComment=t.isText=t.isCDATA=t.isTag=void 0,r(n(91454),t),r(n(93033),t),r(n(68452),t),r(n(56361),t),r(n(5198),t),r(n(86367),t),r(n(67652),t);var i=n(36722);Object.defineProperty(t,"isTag",{enumerable:!0,get:function(){return i.isTag}}),Object.defineProperty(t,"isCDATA",{enumerable:!0,get:function(){return i.isCDATA}}),Object.defineProperty(t,"isText",{enumerable:!0,get:function(){return i.isText}}),Object.defineProperty(t,"isComment",{enumerable:!0,get:function(){return i.isComment}}),Object.defineProperty(t,"isDocument",{enumerable:!0,get:function(){return i.isDocument}}),Object.defineProperty(t,"hasChildren",{enumerable:!0,get:function(){return i.hasChildren}})},5198:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getElementsByTagType=t.getElementsByTagName=t.getElementById=t.getElements=t.testElement=void 0;var a=n(36722),r=n(56361),i={tag_name:function(e){return"function"==typeof e?function(t){return(0,a.isTag)(t)&&e(t.name)}:"*"===e?a.isTag:function(t){return(0,a.isTag)(t)&&t.name===e}},tag_type:function(e){return"function"==typeof e?function(t){return e(t.type)}:function(t){return t.type===e}},tag_contains:function(e){return"function"==typeof e?function(t){return(0,a.isText)(t)&&e(t.data)}:function(t){return(0,a.isText)(t)&&t.data===e}}};function o(e,t){return"function"==typeof t?function(n){return(0,a.isTag)(n)&&t(n.attribs[e])}:function(n){return(0,a.isTag)(n)&&n.attribs[e]===t}}function d(e,t){return function(n){return e(n)||t(n)}}function s(e){var t=Object.keys(e).map((function(t){var n=e[t];return Object.prototype.hasOwnProperty.call(i,t)?i[t](n):o(t,n)}));return 0===t.length?null:t.reduce(d)}t.testElement=function(e,t){var n=s(e);return!n||n(t)},t.getElements=function(e,t,n,a){void 0===a&&(a=1/0);var i=s(e);return i?(0,r.filter)(i,t,n,a):[]},t.getElementById=function(e,t,n){return void 0===n&&(n=!0),Array.isArray(t)||(t=[t]),(0,r.findOne)(o("id",e),t,n)},t.getElementsByTagName=function(e,t,n,a){return void 0===n&&(n=!0),void 0===a&&(a=1/0),(0,r.filter)(i.tag_name(e),t,n,a)},t.getElementsByTagType=function(e,t,n,a){return void 0===n&&(n=!0),void 0===a&&(a=1/0),(0,r.filter)(i.tag_type(e),t,n,a)}},68452:function(e,t){"use strict";function n(e){if(e.prev&&(e.prev.next=e.next),e.next&&(e.next.prev=e.prev),e.parent){var t=e.parent.children,n=t.lastIndexOf(e);n>=0&&t.splice(n,1)}e.next=null,e.prev=null,e.parent=null}Object.defineProperty(t,"__esModule",{value:!0}),t.prepend=t.prependChild=t.append=t.appendChild=t.replaceElement=t.removeElement=void 0,t.removeElement=n,t.replaceElement=function(e,t){var n=t.prev=e.prev;n&&(n.next=t);var a=t.next=e.next;a&&(a.prev=t);var r=t.parent=e.parent;if(r){var i=r.children;i[i.lastIndexOf(e)]=t,e.parent=null}},t.appendChild=function(e,t){if(n(t),t.next=null,t.parent=e,e.children.push(t)>1){var a=e.children[e.children.length-2];a.next=t,t.prev=a}else t.prev=null},t.append=function(e,t){n(t);var a=e.parent,r=e.next;if(t.next=r,t.prev=e,e.next=t,t.parent=a,r){if(r.prev=t,a){var i=a.children;i.splice(i.lastIndexOf(r),0,t)}}else a&&a.children.push(t)},t.prependChild=function(e,t){if(n(t),t.parent=e,t.prev=null,1!==e.children.unshift(t)){var a=e.children[1];a.prev=t,t.next=a}else t.next=null},t.prepend=function(e,t){n(t);var a=e.parent;if(a){var r=a.children;r.splice(r.indexOf(e),0,t)}e.prev&&(e.prev.next=t),t.parent=a,t.prev=e.prev,t.next=e,e.prev=t}},56361:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.findAll=t.existsOne=t.findOne=t.findOneChild=t.find=t.filter=void 0;var a=n(36722);function r(e,t,n,r){for(var i=[],o=[t],d=[0];;)if(d[0]>=o[0].length){if(1===d.length)return i;o.shift(),d.shift()}else{var s=o[0][d[0]++];if(e(s)&&(i.push(s),--r<=0))return i;n&&(0,a.hasChildren)(s)&&s.children.length>0&&(d.unshift(0),o.unshift(s.children))}}t.filter=function(e,t,n,a){return void 0===n&&(n=!0),void 0===a&&(a=1/0),r(e,Array.isArray(t)?t:[t],n,a)},t.find=r,t.findOneChild=function(e,t){return t.find(e)},t.findOne=function e(t,n,r){void 0===r&&(r=!0);for(var i=null,o=0;o<n.length&&!i;o++){var d=n[o];(0,a.isTag)(d)&&(t(d)?i=d:r&&d.children.length>0&&(i=e(t,d.children,!0)))}return i},t.existsOne=function e(t,n){return n.some((function(n){return(0,a.isTag)(n)&&(t(n)||e(t,n.children))}))},t.findAll=function(e,t){for(var n=[],r=[t],i=[0];;)if(i[0]>=r[0].length){if(1===r.length)return n;r.shift(),i.shift()}else{var o=r[0][i[0]++];(0,a.isTag)(o)&&(e(o)&&n.push(o),o.children.length>0&&(i.unshift(0),r.unshift(o.children)))}}},91454:function(e,t,n){"use strict";var a=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.innerText=t.textContent=t.getText=t.getInnerHTML=t.getOuterHTML=void 0;var r=n(36722),i=a(n(86398)),o=n(80289);function d(e,t){return(0,i.default)(e,t)}t.getOuterHTML=d,t.getInnerHTML=function(e,t){return(0,r.hasChildren)(e)?e.children.map((function(e){return d(e,t)})).join(""):""},t.getText=function e(t){return Array.isArray(t)?t.map(e).join(""):(0,r.isTag)(t)?"br"===t.name?"\n":e(t.children):(0,r.isCDATA)(t)?e(t.children):(0,r.isText)(t)?t.data:""},t.textContent=function e(t){return Array.isArray(t)?t.map(e).join(""):(0,r.hasChildren)(t)&&!(0,r.isComment)(t)?e(t.children):(0,r.isText)(t)?t.data:""},t.innerText=function e(t){return Array.isArray(t)?t.map(e).join(""):(0,r.hasChildren)(t)&&(t.type===o.ElementType.Tag||(0,r.isCDATA)(t))?e(t.children):(0,r.isText)(t)?t.data:""}},93033:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.prevElementSibling=t.nextElementSibling=t.getName=t.hasAttrib=t.getAttributeValue=t.getSiblings=t.getParent=t.getChildren=void 0;var a=n(36722);function r(e){return(0,a.hasChildren)(e)?e.children:[]}function i(e){return e.parent||null}t.getChildren=r,t.getParent=i,t.getSiblings=function(e){var t=i(e);if(null!=t)return r(t);for(var n=[e],a=e.prev,o=e.next;null!=a;)n.unshift(a),a=a.prev;for(;null!=o;)n.push(o),o=o.next;return n},t.getAttributeValue=function(e,t){var n;return null===(n=e.attribs)||void 0===n?void 0:n[t]},t.hasAttrib=function(e,t){return null!=e.attribs&&Object.prototype.hasOwnProperty.call(e.attribs,t)&&null!=e.attribs[t]},t.getName=function(e){return e.name},t.nextElementSibling=function(e){for(var t=e.next;null!==t&&!(0,a.isTag)(t);)t=t.next;return t},t.prevElementSibling=function(e){for(var t=e.prev;null!==t&&!(0,a.isTag)(t);)t=t.prev;return t}},29749:function(e,t,n){"use strict";var a=t;a.version=n(80312).i8,a.utils=n(53369),a.rand=n(59154),a.curve=n(41530),a.curves=n(61044),a.ec=n(52263),a.eddsa=n(11680)},50763:function(e,t,n){"use strict";var a=n(63785),r=n(53369),i=r.getNAF,o=r.getJSF,d=r.assert;function s(e,t){this.type=e,this.p=new a(t.p,16),this.red=t.prime?a.red(t.prime):a.mont(this.p),this.zero=new a(0).toRed(this.red),this.one=new a(1).toRed(this.red),this.two=new a(2).toRed(this.red),this.n=t.n&&new a(t.n,16),this.g=t.g&&this.pointFromJSON(t.g,t.gRed),this._wnafT1=new Array(4),this._wnafT2=new Array(4),this._wnafT3=new Array(4),this._wnafT4=new Array(4),this._bitLength=this.n?this.n.bitLength():0;var n=this.n&&this.p.div(this.n);!n||n.cmpn(100)>0?this.redN=null:(this._maxwellTrick=!0,this.redN=this.n.toRed(this.red))}function c(e,t){this.curve=e,this.type=t,this.precomputed=null}e.exports=s,s.prototype.point=function(){throw new Error("Not implemented")},s.prototype.validate=function(){throw new Error("Not implemented")},s.prototype._fixedNafMul=function(e,t){d(e.precomputed);var n=e._getDoubles(),a=i(t,1,this._bitLength),r=(1<<n.step+1)-(n.step%2==0?2:1);r/=3;var o,s,c=[];for(o=0;o<a.length;o+=n.step){s=0;for(var u=o+n.step-1;u>=o;u--)s=(s<<1)+a[u];c.push(s)}for(var l=this.jpoint(null,null,null),g=this.jpoint(null,null,null),h=r;h>0;h--){for(o=0;o<c.length;o++)(s=c[o])===h?g=g.mixedAdd(n.points[o]):s===-h&&(g=g.mixedAdd(n.points[o].neg()));l=l.add(g)}return l.toP()},s.prototype._wnafMul=function(e,t){var n=4,a=e._getNAFPoints(n);n=a.wnd;for(var r=a.points,o=i(t,n,this._bitLength),s=this.jpoint(null,null,null),c=o.length-1;c>=0;c--){for(var u=0;c>=0&&0===o[c];c--)u++;if(c>=0&&u++,s=s.dblp(u),c<0)break;var l=o[c];d(0!==l),s="affine"===e.type?l>0?s.mixedAdd(r[l-1>>1]):s.mixedAdd(r[-l-1>>1].neg()):l>0?s.add(r[l-1>>1]):s.add(r[-l-1>>1].neg())}return"affine"===e.type?s.toP():s},s.prototype._wnafMulAdd=function(e,t,n,a,r){var d,s,c,u=this._wnafT1,l=this._wnafT2,g=this._wnafT3,h=0;for(d=0;d<a;d++){var f=(c=t[d])._getNAFPoints(e);u[d]=f.wnd,l[d]=f.points}for(d=a-1;d>=1;d-=2){var p=d-1,m=d;if(1===u[p]&&1===u[m]){var R=[t[p],null,null,t[m]];0===t[p].y.cmp(t[m].y)?(R[1]=t[p].add(t[m]),R[2]=t[p].toJ().mixedAdd(t[m].neg())):0===t[p].y.cmp(t[m].y.redNeg())?(R[1]=t[p].toJ().mixedAdd(t[m]),R[2]=t[p].add(t[m].neg())):(R[1]=t[p].toJ().mixedAdd(t[m]),R[2]=t[p].toJ().mixedAdd(t[m].neg()));var b=[-3,-1,-5,-7,0,7,5,1,3],y=o(n[p],n[m]);for(h=Math.max(y[0].length,h),g[p]=new Array(h),g[m]=new Array(h),s=0;s<h;s++){var v=0|y[0][s],_=0|y[1][s];g[p][s]=b[3*(v+1)+(_+1)],g[m][s]=0,l[p]=R}}else g[p]=i(n[p],u[p],this._bitLength),g[m]=i(n[m],u[m],this._bitLength),h=Math.max(g[p].length,h),h=Math.max(g[m].length,h)}var w=this.jpoint(null,null,null),M=this._wnafT4;for(d=h;d>=0;d--){for(var x=0;d>=0;){var E=!0;for(s=0;s<a;s++)M[s]=0|g[s][d],0!==M[s]&&(E=!1);if(!E)break;x++,d--}if(d>=0&&x++,w=w.dblp(x),d<0)break;for(s=0;s<a;s++){var S=M[s];0!==S&&(S>0?c=l[s][S-1>>1]:S<0&&(c=l[s][-S-1>>1].neg()),w="affine"===c.type?w.mixedAdd(c):w.add(c))}}for(d=0;d<a;d++)l[d]=null;return r?w:w.toP()},s.BasePoint=c,c.prototype.eq=function(){throw new Error("Not implemented")},c.prototype.validate=function(){return this.curve.validate(this)},s.prototype.decodePoint=function(e,t){e=r.toArray(e,t);var n=this.p.byteLength();if((4===e[0]||6===e[0]||7===e[0])&&e.length-1==2*n)return 6===e[0]?d(e[e.length-1]%2==0):7===e[0]&&d(e[e.length-1]%2==1),this.point(e.slice(1,1+n),e.slice(1+n,1+2*n));if((2===e[0]||3===e[0])&&e.length-1===n)return this.pointFromX(e.slice(1,1+n),3===e[0]);throw new Error("Unknown point format")},c.prototype.encodeCompressed=function(e){return this.encode(e,!0)},c.prototype._encode=function(e){var t=this.curve.p.byteLength(),n=this.getX().toArray("be",t);return e?[this.getY().isEven()?2:3].concat(n):[4].concat(n,this.getY().toArray("be",t))},c.prototype.encode=function(e,t){return r.encode(this._encode(t),e)},c.prototype.precompute=function(e){if(this.precomputed)return this;var t={doubles:null,naf:null,beta:null};return t.naf=this._getNAFPoints(8),t.doubles=this._getDoubles(4,e),t.beta=this._getBeta(),this.precomputed=t,this},c.prototype._hasDoubles=function(e){if(!this.precomputed)return!1;var t=this.precomputed.doubles;return!!t&&t.points.length>=Math.ceil((e.bitLength()+1)/t.step)},c.prototype._getDoubles=function(e,t){if(this.precomputed&&this.precomputed.doubles)return this.precomputed.doubles;for(var n=[this],a=this,r=0;r<t;r+=e){for(var i=0;i<e;i++)a=a.dbl();n.push(a)}return{step:e,points:n}},c.prototype._getNAFPoints=function(e){if(this.precomputed&&this.precomputed.naf)return this.precomputed.naf;for(var t=[this],n=(1<<e)-1,a=1===n?null:this.dbl(),r=1;r<n;r++)t[r]=t[r-1].add(a);return{wnd:e,points:t}},c.prototype._getBeta=function(){return null},c.prototype.dblp=function(e){for(var t=this,n=0;n<e;n++)t=t.dbl();return t}},74239:function(e,t,n){"use strict";var a=n(53369),r=n(63785),i=n(70087),o=n(50763),d=a.assert;function s(e){this.twisted=1!=(0|e.a),this.mOneA=this.twisted&&-1==(0|e.a),this.extended=this.mOneA,o.call(this,"edwards",e),this.a=new r(e.a,16).umod(this.red.m),this.a=this.a.toRed(this.red),this.c=new r(e.c,16).toRed(this.red),this.c2=this.c.redSqr(),this.d=new r(e.d,16).toRed(this.red),this.dd=this.d.redAdd(this.d),d(!this.twisted||0===this.c.fromRed().cmpn(1)),this.oneC=1==(0|e.c)}function c(e,t,n,a,i){o.BasePoint.call(this,e,"projective"),null===t&&null===n&&null===a?(this.x=this.curve.zero,this.y=this.curve.one,this.z=this.curve.one,this.t=this.curve.zero,this.zOne=!0):(this.x=new r(t,16),this.y=new r(n,16),this.z=a?new r(a,16):this.curve.one,this.t=i&&new r(i,16),this.x.red||(this.x=this.x.toRed(this.curve.red)),this.y.red||(this.y=this.y.toRed(this.curve.red)),this.z.red||(this.z=this.z.toRed(this.curve.red)),this.t&&!this.t.red&&(this.t=this.t.toRed(this.curve.red)),this.zOne=this.z===this.curve.one,this.curve.extended&&!this.t&&(this.t=this.x.redMul(this.y),this.zOne||(this.t=this.t.redMul(this.z.redInvm()))))}i(s,o),e.exports=s,s.prototype._mulA=function(e){return this.mOneA?e.redNeg():this.a.redMul(e)},s.prototype._mulC=function(e){return this.oneC?e:this.c.redMul(e)},s.prototype.jpoint=function(e,t,n,a){return this.point(e,t,n,a)},s.prototype.pointFromX=function(e,t){(e=new r(e,16)).red||(e=e.toRed(this.red));var n=e.redSqr(),a=this.c2.redSub(this.a.redMul(n)),i=this.one.redSub(this.c2.redMul(this.d).redMul(n)),o=a.redMul(i.redInvm()),d=o.redSqrt();if(0!==d.redSqr().redSub(o).cmp(this.zero))throw new Error("invalid point");var s=d.fromRed().isOdd();return(t&&!s||!t&&s)&&(d=d.redNeg()),this.point(e,d)},s.prototype.pointFromY=function(e,t){(e=new r(e,16)).red||(e=e.toRed(this.red));var n=e.redSqr(),a=n.redSub(this.c2),i=n.redMul(this.d).redMul(this.c2).redSub(this.a),o=a.redMul(i.redInvm());if(0===o.cmp(this.zero)){if(t)throw new Error("invalid point");return this.point(this.zero,e)}var d=o.redSqrt();if(0!==d.redSqr().redSub(o).cmp(this.zero))throw new Error("invalid point");return d.fromRed().isOdd()!==t&&(d=d.redNeg()),this.point(d,e)},s.prototype.validate=function(e){if(e.isInfinity())return!0;e.normalize();var t=e.x.redSqr(),n=e.y.redSqr(),a=t.redMul(this.a).redAdd(n),r=this.c2.redMul(this.one.redAdd(this.d.redMul(t).redMul(n)));return 0===a.cmp(r)},i(c,o.BasePoint),s.prototype.pointFromJSON=function(e){return c.fromJSON(this,e)},s.prototype.point=function(e,t,n,a){return new c(this,e,t,n,a)},c.fromJSON=function(e,t){return new c(e,t[0],t[1],t[2])},c.prototype.inspect=function(){return this.isInfinity()?"<EC Point Infinity>":"<EC Point x: "+this.x.fromRed().toString(16,2)+" y: "+this.y.fromRed().toString(16,2)+" z: "+this.z.fromRed().toString(16,2)+">"},c.prototype.isInfinity=function(){return 0===this.x.cmpn(0)&&(0===this.y.cmp(this.z)||this.zOne&&0===this.y.cmp(this.curve.c))},c.prototype._extDbl=function(){var e=this.x.redSqr(),t=this.y.redSqr(),n=this.z.redSqr();n=n.redIAdd(n);var a=this.curve._mulA(e),r=this.x.redAdd(this.y).redSqr().redISub(e).redISub(t),i=a.redAdd(t),o=i.redSub(n),d=a.redSub(t),s=r.redMul(o),c=i.redMul(d),u=r.redMul(d),l=o.redMul(i);return this.curve.point(s,c,l,u)},c.prototype._projDbl=function(){var e,t,n,a,r,i,o=this.x.redAdd(this.y).redSqr(),d=this.x.redSqr(),s=this.y.redSqr();if(this.curve.twisted){var c=(a=this.curve._mulA(d)).redAdd(s);this.zOne?(e=o.redSub(d).redSub(s).redMul(c.redSub(this.curve.two)),t=c.redMul(a.redSub(s)),n=c.redSqr().redSub(c).redSub(c)):(r=this.z.redSqr(),i=c.redSub(r).redISub(r),e=o.redSub(d).redISub(s).redMul(i),t=c.redMul(a.redSub(s)),n=c.redMul(i))}else a=d.redAdd(s),r=this.curve._mulC(this.z).redSqr(),i=a.redSub(r).redSub(r),e=this.curve._mulC(o.redISub(a)).redMul(i),t=this.curve._mulC(a).redMul(d.redISub(s)),n=a.redMul(i);return this.curve.point(e,t,n)},c.prototype.dbl=function(){return this.isInfinity()?this:this.curve.extended?this._extDbl():this._projDbl()},c.prototype._extAdd=function(e){var t=this.y.redSub(this.x).redMul(e.y.redSub(e.x)),n=this.y.redAdd(this.x).redMul(e.y.redAdd(e.x)),a=this.t.redMul(this.curve.dd).redMul(e.t),r=this.z.redMul(e.z.redAdd(e.z)),i=n.redSub(t),o=r.redSub(a),d=r.redAdd(a),s=n.redAdd(t),c=i.redMul(o),u=d.redMul(s),l=i.redMul(s),g=o.redMul(d);return this.curve.point(c,u,g,l)},c.prototype._projAdd=function(e){var t,n,a=this.z.redMul(e.z),r=a.redSqr(),i=this.x.redMul(e.x),o=this.y.redMul(e.y),d=this.curve.d.redMul(i).redMul(o),s=r.redSub(d),c=r.redAdd(d),u=this.x.redAdd(this.y).redMul(e.x.redAdd(e.y)).redISub(i).redISub(o),l=a.redMul(s).redMul(u);return this.curve.twisted?(t=a.redMul(c).redMul(o.redSub(this.curve._mulA(i))),n=s.redMul(c)):(t=a.redMul(c).redMul(o.redSub(i)),n=this.curve._mulC(s).redMul(c)),this.curve.point(l,t,n)},c.prototype.add=function(e){return this.isInfinity()?e:e.isInfinity()?this:this.curve.extended?this._extAdd(e):this._projAdd(e)},c.prototype.mul=function(e){return this._hasDoubles(e)?this.curve._fixedNafMul(this,e):this.curve._wnafMul(this,e)},c.prototype.mulAdd=function(e,t,n){return this.curve._wnafMulAdd(1,[this,t],[e,n],2,!1)},c.prototype.jmulAdd=function(e,t,n){return this.curve._wnafMulAdd(1,[this,t],[e,n],2,!0)},c.prototype.normalize=function(){if(this.zOne)return this;var e=this.z.redInvm();return this.x=this.x.redMul(e),this.y=this.y.redMul(e),this.t&&(this.t=this.t.redMul(e)),this.z=this.curve.one,this.zOne=!0,this},c.prototype.neg=function(){return this.curve.point(this.x.redNeg(),this.y,this.z,this.t&&this.t.redNeg())},c.prototype.getX=function(){return this.normalize(),this.x.fromRed()},c.prototype.getY=function(){return this.normalize(),this.y.fromRed()},c.prototype.eq=function(e){return this===e||0===this.getX().cmp(e.getX())&&0===this.getY().cmp(e.getY())},c.prototype.eqXToP=function(e){var t=e.toRed(this.curve.red).redMul(this.z);if(0===this.x.cmp(t))return!0;for(var n=e.clone(),a=this.curve.redN.redMul(this.z);;){if(n.iadd(this.curve.n),n.cmp(this.curve.p)>=0)return!1;if(t.redIAdd(a),0===this.x.cmp(t))return!0}},c.prototype.toP=c.prototype.normalize,c.prototype.mixedAdd=c.prototype.add},41530:function(e,t,n){"use strict";var a=t;a.base=n(50763),a.short=n(94560),a.mont=n(25974),a.edwards=n(74239)},25974:function(e,t,n){"use strict";var a=n(63785),r=n(70087),i=n(50763),o=n(53369);function d(e){i.call(this,"mont",e),this.a=new a(e.a,16).toRed(this.red),this.b=new a(e.b,16).toRed(this.red),this.i4=new a(4).toRed(this.red).redInvm(),this.two=new a(2).toRed(this.red),this.a24=this.i4.redMul(this.a.redAdd(this.two))}function s(e,t,n){i.BasePoint.call(this,e,"projective"),null===t&&null===n?(this.x=this.curve.one,this.z=this.curve.zero):(this.x=new a(t,16),this.z=new a(n,16),this.x.red||(this.x=this.x.toRed(this.curve.red)),this.z.red||(this.z=this.z.toRed(this.curve.red)))}r(d,i),e.exports=d,d.prototype.validate=function(e){var t=e.normalize().x,n=t.redSqr(),a=n.redMul(t).redAdd(n.redMul(this.a)).redAdd(t);return 0===a.redSqrt().redSqr().cmp(a)},r(s,i.BasePoint),d.prototype.decodePoint=function(e,t){return this.point(o.toArray(e,t),1)},d.prototype.point=function(e,t){return new s(this,e,t)},d.prototype.pointFromJSON=function(e){return s.fromJSON(this,e)},s.prototype.precompute=function(){},s.prototype._encode=function(){return this.getX().toArray("be",this.curve.p.byteLength())},s.fromJSON=function(e,t){return new s(e,t[0],t[1]||e.one)},s.prototype.inspect=function(){return this.isInfinity()?"<EC Point Infinity>":"<EC Point x: "+this.x.fromRed().toString(16,2)+" z: "+this.z.fromRed().toString(16,2)+">"},s.prototype.isInfinity=function(){return 0===this.z.cmpn(0)},s.prototype.dbl=function(){var e=this.x.redAdd(this.z).redSqr(),t=this.x.redSub(this.z).redSqr(),n=e.redSub(t),a=e.redMul(t),r=n.redMul(t.redAdd(this.curve.a24.redMul(n)));return this.curve.point(a,r)},s.prototype.add=function(){throw new Error("Not supported on Montgomery curve")},s.prototype.diffAdd=function(e,t){var n=this.x.redAdd(this.z),a=this.x.redSub(this.z),r=e.x.redAdd(e.z),i=e.x.redSub(e.z).redMul(n),o=r.redMul(a),d=t.z.redMul(i.redAdd(o).redSqr()),s=t.x.redMul(i.redISub(o).redSqr());return this.curve.point(d,s)},s.prototype.mul=function(e){for(var t=e.clone(),n=this,a=this.curve.point(null,null),r=[];0!==t.cmpn(0);t.iushrn(1))r.push(t.andln(1));for(var i=r.length-1;i>=0;i--)0===r[i]?(n=n.diffAdd(a,this),a=a.dbl()):(a=n.diffAdd(a,this),n=n.dbl());return a},s.prototype.mulAdd=function(){throw new Error("Not supported on Montgomery curve")},s.prototype.jumlAdd=function(){throw new Error("Not supported on Montgomery curve")},s.prototype.eq=function(e){return 0===this.getX().cmp(e.getX())},s.prototype.normalize=function(){return this.x=this.x.redMul(this.z.redInvm()),this.z=this.curve.one,this},s.prototype.getX=function(){return this.normalize(),this.x.fromRed()}},94560:function(e,t,n){"use strict";var a=n(53369),r=n(63785),i=n(70087),o=n(50763),d=a.assert;function s(e){o.call(this,"short",e),this.a=new r(e.a,16).toRed(this.red),this.b=new r(e.b,16).toRed(this.red),this.tinv=this.two.redInvm(),this.zeroA=0===this.a.fromRed().cmpn(0),this.threeA=0===this.a.fromRed().sub(this.p).cmpn(-3),this.endo=this._getEndomorphism(e),this._endoWnafT1=new Array(4),this._endoWnafT2=new Array(4)}function c(e,t,n,a){o.BasePoint.call(this,e,"affine"),null===t&&null===n?(this.x=null,this.y=null,this.inf=!0):(this.x=new r(t,16),this.y=new r(n,16),a&&(this.x.forceRed(this.curve.red),this.y.forceRed(this.curve.red)),this.x.red||(this.x=this.x.toRed(this.curve.red)),this.y.red||(this.y=this.y.toRed(this.curve.red)),this.inf=!1)}function u(e,t,n,a){o.BasePoint.call(this,e,"jacobian"),null===t&&null===n&&null===a?(this.x=this.curve.one,this.y=this.curve.one,this.z=new r(0)):(this.x=new r(t,16),this.y=new r(n,16),this.z=new r(a,16)),this.x.red||(this.x=this.x.toRed(this.curve.red)),this.y.red||(this.y=this.y.toRed(this.curve.red)),this.z.red||(this.z=this.z.toRed(this.curve.red)),this.zOne=this.z===this.curve.one}i(s,o),e.exports=s,s.prototype._getEndomorphism=function(e){if(this.zeroA&&this.g&&this.n&&1===this.p.modn(3)){var t,n;if(e.beta)t=new r(e.beta,16).toRed(this.red);else{var a=this._getEndoRoots(this.p);t=(t=a[0].cmp(a[1])<0?a[0]:a[1]).toRed(this.red)}if(e.lambda)n=new r(e.lambda,16);else{var i=this._getEndoRoots(this.n);0===this.g.mul(i[0]).x.cmp(this.g.x.redMul(t))?n=i[0]:(n=i[1],d(0===this.g.mul(n).x.cmp(this.g.x.redMul(t))))}return{beta:t,lambda:n,basis:e.basis?e.basis.map((function(e){return{a:new r(e.a,16),b:new r(e.b,16)}})):this._getEndoBasis(n)}}},s.prototype._getEndoRoots=function(e){var t=e===this.p?this.red:r.mont(e),n=new r(2).toRed(t).redInvm(),a=n.redNeg(),i=new r(3).toRed(t).redNeg().redSqrt().redMul(n);return[a.redAdd(i).fromRed(),a.redSub(i).fromRed()]},s.prototype._getEndoBasis=function(e){for(var t,n,a,i,o,d,s,c,u,l=this.n.ushrn(Math.floor(this.n.bitLength()/2)),g=e,h=this.n.clone(),f=new r(1),p=new r(0),m=new r(0),R=new r(1),b=0;0!==g.cmpn(0);){var y=h.div(g);c=h.sub(y.mul(g)),u=m.sub(y.mul(f));var v=R.sub(y.mul(p));if(!a&&c.cmp(l)<0)t=s.neg(),n=f,a=c.neg(),i=u;else if(a&&2==++b)break;s=c,h=g,g=c,m=f,f=u,R=p,p=v}o=c.neg(),d=u;var _=a.sqr().add(i.sqr());return o.sqr().add(d.sqr()).cmp(_)>=0&&(o=t,d=n),a.negative&&(a=a.neg(),i=i.neg()),o.negative&&(o=o.neg(),d=d.neg()),[{a:a,b:i},{a:o,b:d}]},s.prototype._endoSplit=function(e){var t=this.endo.basis,n=t[0],a=t[1],r=a.b.mul(e).divRound(this.n),i=n.b.neg().mul(e).divRound(this.n),o=r.mul(n.a),d=i.mul(a.a),s=r.mul(n.b),c=i.mul(a.b);return{k1:e.sub(o).sub(d),k2:s.add(c).neg()}},s.prototype.pointFromX=function(e,t){(e=new r(e,16)).red||(e=e.toRed(this.red));var n=e.redSqr().redMul(e).redIAdd(e.redMul(this.a)).redIAdd(this.b),a=n.redSqrt();if(0!==a.redSqr().redSub(n).cmp(this.zero))throw new Error("invalid point");var i=a.fromRed().isOdd();return(t&&!i||!t&&i)&&(a=a.redNeg()),this.point(e,a)},s.prototype.validate=function(e){if(e.inf)return!0;var t=e.x,n=e.y,a=this.a.redMul(t),r=t.redSqr().redMul(t).redIAdd(a).redIAdd(this.b);return 0===n.redSqr().redISub(r).cmpn(0)},s.prototype._endoWnafMulAdd=function(e,t,n){for(var a=this._endoWnafT1,r=this._endoWnafT2,i=0;i<e.length;i++){var o=this._endoSplit(t[i]),d=e[i],s=d._getBeta();o.k1.negative&&(o.k1.ineg(),d=d.neg(!0)),o.k2.negative&&(o.k2.ineg(),s=s.neg(!0)),a[2*i]=d,a[2*i+1]=s,r[2*i]=o.k1,r[2*i+1]=o.k2}for(var c=this._wnafMulAdd(1,a,r,2*i,n),u=0;u<2*i;u++)a[u]=null,r[u]=null;return c},i(c,o.BasePoint),s.prototype.point=function(e,t,n){return new c(this,e,t,n)},s.prototype.pointFromJSON=function(e,t){return c.fromJSON(this,e,t)},c.prototype._getBeta=function(){if(this.curve.endo){var e=this.precomputed;if(e&&e.beta)return e.beta;var t=this.curve.point(this.x.redMul(this.curve.endo.beta),this.y);if(e){var n=this.curve,a=function(e){return n.point(e.x.redMul(n.endo.beta),e.y)};e.beta=t,t.precomputed={beta:null,naf:e.naf&&{wnd:e.naf.wnd,points:e.naf.points.map(a)},doubles:e.doubles&&{step:e.doubles.step,points:e.doubles.points.map(a)}}}return t}},c.prototype.toJSON=function(){return this.precomputed?[this.x,this.y,this.precomputed&&{doubles:this.precomputed.doubles&&{step:this.precomputed.doubles.step,points:this.precomputed.doubles.points.slice(1)},naf:this.precomputed.naf&&{wnd:this.precomputed.naf.wnd,points:this.precomputed.naf.points.slice(1)}}]:[this.x,this.y]},c.fromJSON=function(e,t,n){"string"==typeof t&&(t=JSON.parse(t));var a=e.point(t[0],t[1],n);if(!t[2])return a;function r(t){return e.point(t[0],t[1],n)}var i=t[2];return a.precomputed={beta:null,doubles:i.doubles&&{step:i.doubles.step,points:[a].concat(i.doubles.points.map(r))},naf:i.naf&&{wnd:i.naf.wnd,points:[a].concat(i.naf.points.map(r))}},a},c.prototype.inspect=function(){return this.isInfinity()?"<EC Point Infinity>":"<EC Point x: "+this.x.fromRed().toString(16,2)+" y: "+this.y.fromRed().toString(16,2)+">"},c.prototype.isInfinity=function(){return this.inf},c.prototype.add=function(e){if(this.inf)return e;if(e.inf)return this;if(this.eq(e))return this.dbl();if(this.neg().eq(e))return this.curve.point(null,null);if(0===this.x.cmp(e.x))return this.curve.point(null,null);var t=this.y.redSub(e.y);0!==t.cmpn(0)&&(t=t.redMul(this.x.redSub(e.x).redInvm()));var n=t.redSqr().redISub(this.x).redISub(e.x),a=t.redMul(this.x.redSub(n)).redISub(this.y);return this.curve.point(n,a)},c.prototype.dbl=function(){if(this.inf)return this;var e=this.y.redAdd(this.y);if(0===e.cmpn(0))return this.curve.point(null,null);var t=this.curve.a,n=this.x.redSqr(),a=e.redInvm(),r=n.redAdd(n).redIAdd(n).redIAdd(t).redMul(a),i=r.redSqr().redISub(this.x.redAdd(this.x)),o=r.redMul(this.x.redSub(i)).redISub(this.y);return this.curve.point(i,o)},c.prototype.getX=function(){return this.x.fromRed()},c.prototype.getY=function(){return this.y.fromRed()},c.prototype.mul=function(e){return e=new r(e,16),this.isInfinity()?this:this._hasDoubles(e)?this.curve._fixedNafMul(this,e):this.curve.endo?this.curve._endoWnafMulAdd([this],[e]):this.curve._wnafMul(this,e)},c.prototype.mulAdd=function(e,t,n){var a=[this,t],r=[e,n];return this.curve.endo?this.curve._endoWnafMulAdd(a,r):this.curve._wnafMulAdd(1,a,r,2)},c.prototype.jmulAdd=function(e,t,n){var a=[this,t],r=[e,n];return this.curve.endo?this.curve._endoWnafMulAdd(a,r,!0):this.curve._wnafMulAdd(1,a,r,2,!0)},c.prototype.eq=function(e){return this===e||this.inf===e.inf&&(this.inf||0===this.x.cmp(e.x)&&0===this.y.cmp(e.y))},c.prototype.neg=function(e){if(this.inf)return this;var t=this.curve.point(this.x,this.y.redNeg());if(e&&this.precomputed){var n=this.precomputed,a=function(e){return e.neg()};t.precomputed={naf:n.naf&&{wnd:n.naf.wnd,points:n.naf.points.map(a)},doubles:n.doubles&&{step:n.doubles.step,points:n.doubles.points.map(a)}}}return t},c.prototype.toJ=function(){return this.inf?this.curve.jpoint(null,null,null):this.curve.jpoint(this.x,this.y,this.curve.one)},i(u,o.BasePoint),s.prototype.jpoint=function(e,t,n){return new u(this,e,t,n)},u.prototype.toP=function(){if(this.isInfinity())return this.curve.point(null,null);var e=this.z.redInvm(),t=e.redSqr(),n=this.x.redMul(t),a=this.y.redMul(t).redMul(e);return this.curve.point(n,a)},u.prototype.neg=function(){return this.curve.jpoint(this.x,this.y.redNeg(),this.z)},u.prototype.add=function(e){if(this.isInfinity())return e;if(e.isInfinity())return this;var t=e.z.redSqr(),n=this.z.redSqr(),a=this.x.redMul(t),r=e.x.redMul(n),i=this.y.redMul(t.redMul(e.z)),o=e.y.redMul(n.redMul(this.z)),d=a.redSub(r),s=i.redSub(o);if(0===d.cmpn(0))return 0!==s.cmpn(0)?this.curve.jpoint(null,null,null):this.dbl();var c=d.redSqr(),u=c.redMul(d),l=a.redMul(c),g=s.redSqr().redIAdd(u).redISub(l).redISub(l),h=s.redMul(l.redISub(g)).redISub(i.redMul(u)),f=this.z.redMul(e.z).redMul(d);return this.curve.jpoint(g,h,f)},u.prototype.mixedAdd=function(e){if(this.isInfinity())return e.toJ();if(e.isInfinity())return this;var t=this.z.redSqr(),n=this.x,a=e.x.redMul(t),r=this.y,i=e.y.redMul(t).redMul(this.z),o=n.redSub(a),d=r.redSub(i);if(0===o.cmpn(0))return 0!==d.cmpn(0)?this.curve.jpoint(null,null,null):this.dbl();var s=o.redSqr(),c=s.redMul(o),u=n.redMul(s),l=d.redSqr().redIAdd(c).redISub(u).redISub(u),g=d.redMul(u.redISub(l)).redISub(r.redMul(c)),h=this.z.redMul(o);return this.curve.jpoint(l,g,h)},u.prototype.dblp=function(e){if(0===e)return this;if(this.isInfinity())return this;if(!e)return this.dbl();var t;if(this.curve.zeroA||this.curve.threeA){var n=this;for(t=0;t<e;t++)n=n.dbl();return n}var a=this.curve.a,r=this.curve.tinv,i=this.x,o=this.y,d=this.z,s=d.redSqr().redSqr(),c=o.redAdd(o);for(t=0;t<e;t++){var u=i.redSqr(),l=c.redSqr(),g=l.redSqr(),h=u.redAdd(u).redIAdd(u).redIAdd(a.redMul(s)),f=i.redMul(l),p=h.redSqr().redISub(f.redAdd(f)),m=f.redISub(p),R=h.redMul(m);R=R.redIAdd(R).redISub(g);var b=c.redMul(d);t+1<e&&(s=s.redMul(g)),i=p,d=b,c=R}return this.curve.jpoint(i,c.redMul(r),d)},u.prototype.dbl=function(){return this.isInfinity()?this:this.curve.zeroA?this._zeroDbl():this.curve.threeA?this._threeDbl():this._dbl()},u.prototype._zeroDbl=function(){var e,t,n;if(this.zOne){var a=this.x.redSqr(),r=this.y.redSqr(),i=r.redSqr(),o=this.x.redAdd(r).redSqr().redISub(a).redISub(i);o=o.redIAdd(o);var d=a.redAdd(a).redIAdd(a),s=d.redSqr().redISub(o).redISub(o),c=i.redIAdd(i);c=(c=c.redIAdd(c)).redIAdd(c),e=s,t=d.redMul(o.redISub(s)).redISub(c),n=this.y.redAdd(this.y)}else{var u=this.x.redSqr(),l=this.y.redSqr(),g=l.redSqr(),h=this.x.redAdd(l).redSqr().redISub(u).redISub(g);h=h.redIAdd(h);var f=u.redAdd(u).redIAdd(u),p=f.redSqr(),m=g.redIAdd(g);m=(m=m.redIAdd(m)).redIAdd(m),e=p.redISub(h).redISub(h),t=f.redMul(h.redISub(e)).redISub(m),n=(n=this.y.redMul(this.z)).redIAdd(n)}return this.curve.jpoint(e,t,n)},u.prototype._threeDbl=function(){var e,t,n;if(this.zOne){var a=this.x.redSqr(),r=this.y.redSqr(),i=r.redSqr(),o=this.x.redAdd(r).redSqr().redISub(a).redISub(i);o=o.redIAdd(o);var d=a.redAdd(a).redIAdd(a).redIAdd(this.curve.a),s=d.redSqr().redISub(o).redISub(o);e=s;var c=i.redIAdd(i);c=(c=c.redIAdd(c)).redIAdd(c),t=d.redMul(o.redISub(s)).redISub(c),n=this.y.redAdd(this.y)}else{var u=this.z.redSqr(),l=this.y.redSqr(),g=this.x.redMul(l),h=this.x.redSub(u).redMul(this.x.redAdd(u));h=h.redAdd(h).redIAdd(h);var f=g.redIAdd(g),p=(f=f.redIAdd(f)).redAdd(f);e=h.redSqr().redISub(p),n=this.y.redAdd(this.z).redSqr().redISub(l).redISub(u);var m=l.redSqr();m=(m=(m=m.redIAdd(m)).redIAdd(m)).redIAdd(m),t=h.redMul(f.redISub(e)).redISub(m)}return this.curve.jpoint(e,t,n)},u.prototype._dbl=function(){var e=this.curve.a,t=this.x,n=this.y,a=this.z,r=a.redSqr().redSqr(),i=t.redSqr(),o=n.redSqr(),d=i.redAdd(i).redIAdd(i).redIAdd(e.redMul(r)),s=t.redAdd(t),c=(s=s.redIAdd(s)).redMul(o),u=d.redSqr().redISub(c.redAdd(c)),l=c.redISub(u),g=o.redSqr();g=(g=(g=g.redIAdd(g)).redIAdd(g)).redIAdd(g);var h=d.redMul(l).redISub(g),f=n.redAdd(n).redMul(a);return this.curve.jpoint(u,h,f)},u.prototype.trpl=function(){if(!this.curve.zeroA)return this.dbl().add(this);var e=this.x.redSqr(),t=this.y.redSqr(),n=this.z.redSqr(),a=t.redSqr(),r=e.redAdd(e).redIAdd(e),i=r.redSqr(),o=this.x.redAdd(t).redSqr().redISub(e).redISub(a),d=(o=(o=(o=o.redIAdd(o)).redAdd(o).redIAdd(o)).redISub(i)).redSqr(),s=a.redIAdd(a);s=(s=(s=s.redIAdd(s)).redIAdd(s)).redIAdd(s);var c=r.redIAdd(o).redSqr().redISub(i).redISub(d).redISub(s),u=t.redMul(c);u=(u=u.redIAdd(u)).redIAdd(u);var l=this.x.redMul(d).redISub(u);l=(l=l.redIAdd(l)).redIAdd(l);var g=this.y.redMul(c.redMul(s.redISub(c)).redISub(o.redMul(d)));g=(g=(g=g.redIAdd(g)).redIAdd(g)).redIAdd(g);var h=this.z.redAdd(o).redSqr().redISub(n).redISub(d);return this.curve.jpoint(l,g,h)},u.prototype.mul=function(e,t){return e=new r(e,t),this.curve._wnafMul(this,e)},u.prototype.eq=function(e){if("affine"===e.type)return this.eq(e.toJ());if(this===e)return!0;var t=this.z.redSqr(),n=e.z.redSqr();if(0!==this.x.redMul(n).redISub(e.x.redMul(t)).cmpn(0))return!1;var a=t.redMul(this.z),r=n.redMul(e.z);return 0===this.y.redMul(r).redISub(e.y.redMul(a)).cmpn(0)},u.prototype.eqXToP=function(e){var t=this.z.redSqr(),n=e.toRed(this.curve.red).redMul(t);if(0===this.x.cmp(n))return!0;for(var a=e.clone(),r=this.curve.redN.redMul(t);;){if(a.iadd(this.curve.n),a.cmp(this.curve.p)>=0)return!1;if(n.redIAdd(r),0===this.x.cmp(n))return!0}},u.prototype.inspect=function(){return this.isInfinity()?"<EC JPoint Infinity>":"<EC JPoint x: "+this.x.toString(16,2)+" y: "+this.y.toString(16,2)+" z: "+this.z.toString(16,2)+">"},u.prototype.isInfinity=function(){return 0===this.z.cmpn(0)}},61044:function(e,t,n){"use strict";var a,r=t,i=n(35294),o=n(41530),d=n(53369).assert;function s(e){"short"===e.type?this.curve=new o.short(e):"edwards"===e.type?this.curve=new o.edwards(e):this.curve=new o.mont(e),this.g=this.curve.g,this.n=this.curve.n,this.hash=e.hash,d(this.g.validate(),"Invalid curve"),d(this.g.mul(this.n).isInfinity(),"Invalid curve, G*N != O")}function c(e,t){Object.defineProperty(r,e,{configurable:!0,enumerable:!0,get:function(){var n=new s(t);return Object.defineProperty(r,e,{configurable:!0,enumerable:!0,value:n}),n}})}r.PresetCurve=s,c("p192",{type:"short",prime:"p192",p:"ffffffff ffffffff ffffffff fffffffe ffffffff ffffffff",a:"ffffffff ffffffff ffffffff fffffffe ffffffff fffffffc",b:"64210519 e59c80e7 0fa7e9ab 72243049 feb8deec c146b9b1",n:"ffffffff ffffffff ffffffff 99def836 146bc9b1 b4d22831",hash:i.sha256,gRed:!1,g:["188da80e b03090f6 7cbf20eb 43a18800 f4ff0afd 82ff1012","07192b95 ffc8da78 631011ed 6b24cdd5 73f977a1 1e794811"]}),c("p224",{type:"short",prime:"p224",p:"ffffffff ffffffff ffffffff ffffffff 00000000 00000000 00000001",a:"ffffffff ffffffff ffffffff fffffffe ffffffff ffffffff fffffffe",b:"b4050a85 0c04b3ab f5413256 5044b0b7 d7bfd8ba 270b3943 2355ffb4",n:"ffffffff ffffffff ffffffff ffff16a2 e0b8f03e 13dd2945 5c5c2a3d",hash:i.sha256,gRed:!1,g:["b70e0cbd 6bb4bf7f 321390b9 4a03c1d3 56c21122 343280d6 115c1d21","bd376388 b5f723fb 4c22dfe6 cd4375a0 5a074764 44d58199 85007e34"]}),c("p256",{type:"short",prime:null,p:"ffffffff 00000001 00000000 00000000 00000000 ffffffff ffffffff ffffffff",a:"ffffffff 00000001 00000000 00000000 00000000 ffffffff ffffffff fffffffc",b:"5ac635d8 aa3a93e7 b3ebbd55 769886bc 651d06b0 cc53b0f6 3bce3c3e 27d2604b",n:"ffffffff 00000000 ffffffff ffffffff bce6faad a7179e84 f3b9cac2 fc632551",hash:i.sha256,gRed:!1,g:["6b17d1f2 e12c4247 f8bce6e5 63a440f2 77037d81 2deb33a0 f4a13945 d898c296","4fe342e2 fe1a7f9b 8ee7eb4a 7c0f9e16 2bce3357 6b315ece cbb64068 37bf51f5"]}),c("p384",{type:"short",prime:null,p:"ffffffff ffffffff ffffffff ffffffff ffffffff ffffffff ffffffff fffffffe ffffffff 00000000 00000000 ffffffff",a:"ffffffff ffffffff ffffffff ffffffff ffffffff ffffffff ffffffff fffffffe ffffffff 00000000 00000000 fffffffc",b:"b3312fa7 e23ee7e4 988e056b e3f82d19 181d9c6e fe814112 0314088f 5013875a c656398d 8a2ed19d 2a85c8ed d3ec2aef",n:"ffffffff ffffffff ffffffff ffffffff ffffffff ffffffff c7634d81 f4372ddf 581a0db2 48b0a77a ecec196a ccc52973",hash:i.sha384,gRed:!1,g:["aa87ca22 be8b0537 8eb1c71e f320ad74 6e1d3b62 8ba79b98 59f741e0 82542a38 5502f25d bf55296c 3a545e38 72760ab7","3617de4a 96262c6f 5d9e98bf 9292dc29 f8f41dbd 289a147c e9da3113 b5f0b8c0 0a60b1ce 1d7e819d 7a431d7c 90ea0e5f"]}),c("p521",{type:"short",prime:null,p:"000001ff ffffffff ffffffff ffffffff ffffffff ffffffff ffffffff ffffffff ffffffff ffffffff ffffffff ffffffff ffffffff ffffffff ffffffff ffffffff ffffffff",a:"000001ff ffffffff ffffffff ffffffff ffffffff ffffffff ffffffff ffffffff ffffffff ffffffff ffffffff ffffffff ffffffff ffffffff ffffffff ffffffff fffffffc",b:"00000051 953eb961 8e1c9a1f 929a21a0 b68540ee a2da725b 99b315f3 b8b48991 8ef109e1 56193951 ec7e937b 1652c0bd 3bb1bf07 3573df88 3d2c34f1 ef451fd4 6b503f00",n:"000001ff ffffffff ffffffff ffffffff ffffffff ffffffff ffffffff ffffffff fffffffa 51868783 bf2f966b 7fcc0148 f709a5d0 3bb5c9b8 899c47ae bb6fb71e 91386409",hash:i.sha512,gRed:!1,g:["000000c6 858e06b7 0404e9cd 9e3ecb66 2395b442 9c648139 053fb521 f828af60 6b4d3dba a14b5e77 efe75928 fe1dc127 a2ffa8de 3348b3c1 856a429b f97e7e31 c2e5bd66","00000118 39296a78 9a3bc004 5c8a5fb4 2c7d1bd9 98f54449 579b4468 17afbd17 273e662c 97ee7299 5ef42640 c550b901 3fad0761 353c7086 a272c240 88be9476 9fd16650"]}),c("curve25519",{type:"mont",prime:"p25519",p:"7fffffffffffffff ffffffffffffffff ffffffffffffffff ffffffffffffffed",a:"76d06",b:"1",n:"1000000000000000 0000000000000000 14def9dea2f79cd6 5812631a5cf5d3ed",hash:i.sha256,gRed:!1,g:["9"]}),c("ed25519",{type:"edwards",prime:"p25519",p:"7fffffffffffffff ffffffffffffffff ffffffffffffffff ffffffffffffffed",a:"-1",c:"1",d:"52036cee2b6ffe73 8cc740797779e898 00700a4d4141d8ab 75eb4dca135978a3",n:"1000000000000000 0000000000000000 14def9dea2f79cd6 5812631a5cf5d3ed",hash:i.sha256,gRed:!1,g:["216936d3cd6e53fec0a4e231fdd6dc5c692cc7609525a7b2c9562d608f25d51a","6666666666666666666666666666666666666666666666666666666666666658"]});try{a=n(18719)}catch(u){a=void 0}c("secp256k1",{type:"short",prime:"k256",p:"ffffffff ffffffff ffffffff ffffffff ffffffff ffffffff fffffffe fffffc2f",a:"0",b:"7",n:"ffffffff ffffffff ffffffff fffffffe baaedce6 af48a03b bfd25e8c d0364141",h:"1",hash:i.sha256,beta:"7ae96a2b657c07106e64479eac3434e99cf0497512f58995c1396c28719501ee",lambda:"5363ad4cc05c30e0a5261c028812645a122e22ea20816678df02967c1b23bd72",basis:[{a:"3086d221a7d46bcde86c90e49284eb15",b:"-e4437ed6010e88286f547fa90abfe4c3"},{a:"114ca50f7a8e2f3f657c1108d9d44cfd8",b:"3086d221a7d46bcde86c90e49284eb15"}],gRed:!1,g:["79be667ef9dcbbac55a06295ce870b07029bfcdb2dce28d959f2815b16f81798","483ada7726a3c4655da4fbfc0e1108a8fd17b448a68554199c47d08ffb10d4b8",a]})},52263:function(e,t,n){"use strict";var a=n(63785),r=n(76513),i=n(53369),o=n(61044),d=n(59154),s=i.assert,c=n(84093),u=n(69758);function l(e){if(!(this instanceof l))return new l(e);"string"==typeof e&&(s(Object.prototype.hasOwnProperty.call(o,e),"Unknown curve "+e),e=o[e]),e instanceof o.PresetCurve&&(e={curve:e}),this.curve=e.curve.curve,this.n=this.curve.n,this.nh=this.n.ushrn(1),this.g=this.curve.g,this.g=e.curve.g,this.g.precompute(e.curve.n.bitLength()+1),this.hash=e.hash||e.curve.hash}e.exports=l,l.prototype.keyPair=function(e){return new c(this,e)},l.prototype.keyFromPrivate=function(e,t){return c.fromPrivate(this,e,t)},l.prototype.keyFromPublic=function(e,t){return c.fromPublic(this,e,t)},l.prototype.genKeyPair=function(e){e||(e={});for(var t=new r({hash:this.hash,pers:e.pers,persEnc:e.persEnc||"utf8",entropy:e.entropy||d(this.hash.hmacStrength),entropyEnc:e.entropy&&e.entropyEnc||"utf8",nonce:this.n.toArray()}),n=this.n.byteLength(),i=this.n.sub(new a(2));;){var o=new a(t.generate(n));if(!(o.cmp(i)>0))return o.iaddn(1),this.keyFromPrivate(o)}},l.prototype._truncateToN=function(e,t){var n=8*e.byteLength()-this.n.bitLength();return n>0&&(e=e.ushrn(n)),!t&&e.cmp(this.n)>=0?e.sub(this.n):e},l.prototype.sign=function(e,t,n,i){"object"==typeof n&&(i=n,n=null),i||(i={}),t=this.keyFromPrivate(t,n),e=this._truncateToN(new a(e,16));for(var o=this.n.byteLength(),d=t.getPrivate().toArray("be",o),s=e.toArray("be",o),c=new r({hash:this.hash,entropy:d,nonce:s,pers:i.pers,persEnc:i.persEnc||"utf8"}),l=this.n.sub(new a(1)),g=0;;g++){var h=i.k?i.k(g):new a(c.generate(this.n.byteLength()));if(!((h=this._truncateToN(h,!0)).cmpn(1)<=0||h.cmp(l)>=0)){var f=this.g.mul(h);if(!f.isInfinity()){var p=f.getX(),m=p.umod(this.n);if(0!==m.cmpn(0)){var R=h.invm(this.n).mul(m.mul(t.getPrivate()).iadd(e));if(0!==(R=R.umod(this.n)).cmpn(0)){var b=(f.getY().isOdd()?1:0)|(0!==p.cmp(m)?2:0);return i.canonical&&R.cmp(this.nh)>0&&(R=this.n.sub(R),b^=1),new u({r:m,s:R,recoveryParam:b})}}}}}},l.prototype.verify=function(e,t,n,r){e=this._truncateToN(new a(e,16)),n=this.keyFromPublic(n,r);var i=(t=new u(t,"hex")).r,o=t.s;if(i.cmpn(1)<0||i.cmp(this.n)>=0)return!1;if(o.cmpn(1)<0||o.cmp(this.n)>=0)return!1;var d,s=o.invm(this.n),c=s.mul(e).umod(this.n),l=s.mul(i).umod(this.n);return this.curve._maxwellTrick?!(d=this.g.jmulAdd(c,n.getPublic(),l)).isInfinity()&&d.eqXToP(i):!(d=this.g.mulAdd(c,n.getPublic(),l)).isInfinity()&&0===d.getX().umod(this.n).cmp(i)},l.prototype.recoverPubKey=function(e,t,n,r){s((3&n)===n,"The recovery param is more than two bits"),t=new u(t,r);var i=this.n,o=new a(e),d=t.r,c=t.s,l=1&n,g=n>>1;if(d.cmp(this.curve.p.umod(this.curve.n))>=0&&g)throw new Error("Unable to find sencond key candinate");d=g?this.curve.pointFromX(d.add(this.curve.n),l):this.curve.pointFromX(d,l);var h=t.r.invm(i),f=i.sub(o).mul(h).umod(i),p=c.mul(h).umod(i);return this.g.mulAdd(f,d,p)},l.prototype.getKeyRecoveryParam=function(e,t,n,a){if(null!==(t=new u(t,a)).recoveryParam)return t.recoveryParam;for(var r=0;r<4;r++){var i;try{i=this.recoverPubKey(e,t,r)}catch(e){continue}if(i.eq(n))return r}throw new Error("Unable to find valid recovery factor")}},84093:function(e,t,n){"use strict";var a=n(63785),r=n(53369).assert;function i(e,t){this.ec=e,this.priv=null,this.pub=null,t.priv&&this._importPrivate(t.priv,t.privEnc),t.pub&&this._importPublic(t.pub,t.pubEnc)}e.exports=i,i.fromPublic=function(e,t,n){return t instanceof i?t:new i(e,{pub:t,pubEnc:n})},i.fromPrivate=function(e,t,n){return t instanceof i?t:new i(e,{priv:t,privEnc:n})},i.prototype.validate=function(){var e=this.getPublic();return e.isInfinity()?{result:!1,reason:"Invalid public key"}:e.validate()?e.mul(this.ec.curve.n).isInfinity()?{result:!0,reason:null}:{result:!1,reason:"Public key * N != O"}:{result:!1,reason:"Public key is not a point"}},i.prototype.getPublic=function(e,t){return"string"==typeof e&&(t=e,e=null),this.pub||(this.pub=this.ec.g.mul(this.priv)),t?this.pub.encode(t,e):this.pub},i.prototype.getPrivate=function(e){return"hex"===e?this.priv.toString(16,2):this.priv},i.prototype._importPrivate=function(e,t){this.priv=new a(e,t||16),this.priv=this.priv.umod(this.ec.curve.n)},i.prototype._importPublic=function(e,t){if(e.x||e.y)return"mont"===this.ec.curve.type?r(e.x,"Need x coordinate"):"short"!==this.ec.curve.type&&"edwards"!==this.ec.curve.type||r(e.x&&e.y,"Need both x and y coordinate"),void(this.pub=this.ec.curve.point(e.x,e.y));this.pub=this.ec.curve.decodePoint(e,t)},i.prototype.derive=function(e){return e.validate()||r(e.validate(),"public point not validated"),e.mul(this.priv).getX()},i.prototype.sign=function(e,t,n){return this.ec.sign(e,this,t,n)},i.prototype.verify=function(e,t){return this.ec.verify(e,t,this)},i.prototype.inspect=function(){return"<Key priv: "+(this.priv&&this.priv.toString(16,2))+" pub: "+(this.pub&&this.pub.inspect())+" >"}},69758:function(e,t,n){"use strict";var a=n(63785),r=n(53369),i=r.assert;function o(e,t){if(e instanceof o)return e;this._importDER(e,t)||(i(e.r&&e.s,"Signature without r or s"),this.r=new a(e.r,16),this.s=new a(e.s,16),void 0===e.recoveryParam?this.recoveryParam=null:this.recoveryParam=e.recoveryParam)}function d(){this.place=0}function s(e,t){var n=e[t.place++];if(!(128&n))return n;var a=15&n;if(0===a||a>4)return!1;for(var r=0,i=0,o=t.place;i<a;i++,o++)r<<=8,r|=e[o],r>>>=0;return!(r<=127)&&(t.place=o,r)}function c(e){for(var t=0,n=e.length-1;!e[t]&&!(128&e[t+1])&&t<n;)t++;return 0===t?e:e.slice(t)}function u(e,t){if(t<128)e.push(t);else{var n=1+(Math.log(t)/Math.LN2>>>3);for(e.push(128|n);--n;)e.push(t>>>(n<<3)&255);e.push(t)}}e.exports=o,o.prototype._importDER=function(e,t){e=r.toArray(e,t);var n=new d;if(48!==e[n.place++])return!1;var i=s(e,n);if(!1===i)return!1;if(i+n.place!==e.length)return!1;if(2!==e[n.place++])return!1;var o=s(e,n);if(!1===o)return!1;var c=e.slice(n.place,o+n.place);if(n.place+=o,2!==e[n.place++])return!1;var u=s(e,n);if(!1===u)return!1;if(e.length!==u+n.place)return!1;var l=e.slice(n.place,u+n.place);if(0===c[0]){if(!(128&c[1]))return!1;c=c.slice(1)}if(0===l[0]){if(!(128&l[1]))return!1;l=l.slice(1)}return this.r=new a(c),this.s=new a(l),this.recoveryParam=null,!0},o.prototype.toDER=function(e){var t=this.r.toArray(),n=this.s.toArray();for(128&t[0]&&(t=[0].concat(t)),128&n[0]&&(n=[0].concat(n)),t=c(t),n=c(n);!(n[0]||128&n[1]);)n=n.slice(1);var a=[2];u(a,t.length),(a=a.concat(t)).push(2),u(a,n.length);var i=a.concat(n),o=[48];return u(o,i.length),o=o.concat(i),r.encode(o,e)}},11680:function(e,t,n){"use strict";var a=n(35294),r=n(61044),i=n(53369),o=i.assert,d=i.parseBytes,s=n(36699),c=n(4396);function u(e){if(o("ed25519"===e,"only tested with ed25519 so far"),!(this instanceof u))return new u(e);e=r[e].curve,this.curve=e,this.g=e.g,this.g.precompute(e.n.bitLength()+1),this.pointClass=e.point().constructor,this.encodingLength=Math.ceil(e.n.bitLength()/8),this.hash=a.sha512}e.exports=u,u.prototype.sign=function(e,t){e=d(e);var n=this.keyFromSecret(t),a=this.hashInt(n.messagePrefix(),e),r=this.g.mul(a),i=this.encodePoint(r),o=this.hashInt(i,n.pubBytes(),e).mul(n.priv()),s=a.add(o).umod(this.curve.n);return this.makeSignature({R:r,S:s,Rencoded:i})},u.prototype.verify=function(e,t,n){e=d(e),t=this.makeSignature(t);var a=this.keyFromPublic(n),r=this.hashInt(t.Rencoded(),a.pubBytes(),e),i=this.g.mul(t.S());return t.R().add(a.pub().mul(r)).eq(i)},u.prototype.hashInt=function(){for(var e=this.hash(),t=0;t<arguments.length;t++)e.update(arguments[t]);return i.intFromLE(e.digest()).umod(this.curve.n)},u.prototype.keyFromPublic=function(e){return s.fromPublic(this,e)},u.prototype.keyFromSecret=function(e){return s.fromSecret(this,e)},u.prototype.makeSignature=function(e){return e instanceof c?e:new c(this,e)},u.prototype.encodePoint=function(e){var t=e.getY().toArray("le",this.encodingLength);return t[this.encodingLength-1]|=e.getX().isOdd()?128:0,t},u.prototype.decodePoint=function(e){var t=(e=i.parseBytes(e)).length-1,n=e.slice(0,t).concat(-129&e[t]),a=0!=(128&e[t]),r=i.intFromLE(n);return this.curve.pointFromY(r,a)},u.prototype.encodeInt=function(e){return e.toArray("le",this.encodingLength)},u.prototype.decodeInt=function(e){return i.intFromLE(e)},u.prototype.isPoint=function(e){return e instanceof this.pointClass}},36699:function(e,t,n){"use strict";var a=n(53369),r=a.assert,i=a.parseBytes,o=a.cachedProperty;function d(e,t){this.eddsa=e,this._secret=i(t.secret),e.isPoint(t.pub)?this._pub=t.pub:this._pubBytes=i(t.pub)}d.fromPublic=function(e,t){return t instanceof d?t:new d(e,{pub:t})},d.fromSecret=function(e,t){return t instanceof d?t:new d(e,{secret:t})},d.prototype.secret=function(){return this._secret},o(d,"pubBytes",(function(){return this.eddsa.encodePoint(this.pub())})),o(d,"pub",(function(){return this._pubBytes?this.eddsa.decodePoint(this._pubBytes):this.eddsa.g.mul(this.priv())})),o(d,"privBytes",(function(){var e=this.eddsa,t=this.hash(),n=e.encodingLength-1,a=t.slice(0,e.encodingLength);return a[0]&=248,a[n]&=127,a[n]|=64,a})),o(d,"priv",(function(){return this.eddsa.decodeInt(this.privBytes())})),o(d,"hash",(function(){return this.eddsa.hash().update(this.secret()).digest()})),o(d,"messagePrefix",(function(){return this.hash().slice(this.eddsa.encodingLength)})),d.prototype.sign=function(e){return r(this._secret,"KeyPair can only verify"),this.eddsa.sign(e,this)},d.prototype.verify=function(e,t){return this.eddsa.verify(e,t,this)},d.prototype.getSecret=function(e){return r(this._secret,"KeyPair is public only"),a.encode(this.secret(),e)},d.prototype.getPublic=function(e){return a.encode(this.pubBytes(),e)},e.exports=d},4396:function(e,t,n){"use strict";var a=n(63785),r=n(53369),i=r.assert,o=r.cachedProperty,d=r.parseBytes;function s(e,t){this.eddsa=e,"object"!=typeof t&&(t=d(t)),Array.isArray(t)&&(t={R:t.slice(0,e.encodingLength),S:t.slice(e.encodingLength)}),i(t.R&&t.S,"Signature without R or S"),e.isPoint(t.R)&&(this._R=t.R),t.S instanceof a&&(this._S=t.S),this._Rencoded=Array.isArray(t.R)?t.R:t.Rencoded,this._Sencoded=Array.isArray(t.S)?t.S:t.Sencoded}o(s,"S",(function(){return this.eddsa.decodeInt(this.Sencoded())})),o(s,"R",(function(){return this.eddsa.decodePoint(this.Rencoded())})),o(s,"Rencoded",(function(){return this.eddsa.encodePoint(this.R())})),o(s,"Sencoded",(function(){return this.eddsa.encodeInt(this.S())})),s.prototype.toBytes=function(){return this.Rencoded().concat(this.Sencoded())},s.prototype.toHex=function(){return r.encode(this.toBytes(),"hex").toUpperCase()},e.exports=s},18719:function(e){e.exports={doubles:{step:4,points:[["e60fce93b59e9ec53011aabc21c23e97b2a31369b87a5ae9c44ee89e2a6dec0a","f7e3507399e595929db99f34f57937101296891e44d23f0be1f32cce69616821"],["8282263212c609d9ea2a6e3e172de238d8c39cabd5ac1ca10646e23fd5f51508","11f8a8098557dfe45e8256e830b60ace62d613ac2f7b17bed31b6eaff6e26caf"],["175e159f728b865a72f99cc6c6fc846de0b93833fd2222ed73fce5b551e5b739","d3506e0d9e3c79eba4ef97a51ff71f5eacb5955add24345c6efa6ffee9fed695"],["363d90d447b00c9c99ceac05b6262ee053441c7e55552ffe526bad8f83ff4640","4e273adfc732221953b445397f3363145b9a89008199ecb62003c7f3bee9de9"],["8b4b5f165df3c2be8c6244b5b745638843e4a781a15bcd1b69f79a55dffdf80c","4aad0a6f68d308b4b3fbd7813ab0da04f9e336546162ee56b3eff0c65fd4fd36"],["723cbaa6e5db996d6bf771c00bd548c7b700dbffa6c0e77bcb6115925232fcda","96e867b5595cc498a921137488824d6e2660a0653779494801dc069d9eb39f5f"],["eebfa4d493bebf98ba5feec812c2d3b50947961237a919839a533eca0e7dd7fa","5d9a8ca3970ef0f269ee7edaf178089d9ae4cdc3a711f712ddfd4fdae1de8999"],["100f44da696e71672791d0a09b7bde459f1215a29b3c03bfefd7835b39a48db0","cdd9e13192a00b772ec8f3300c090666b7ff4a18ff5195ac0fbd5cd62bc65a09"],["e1031be262c7ed1b1dc9227a4a04c017a77f8d4464f3b3852c8acde6e534fd2d","9d7061928940405e6bb6a4176597535af292dd419e1ced79a44f18f29456a00d"],["feea6cae46d55b530ac2839f143bd7ec5cf8b266a41d6af52d5e688d9094696d","e57c6b6c97dce1bab06e4e12bf3ecd5c981c8957cc41442d3155debf18090088"],["da67a91d91049cdcb367be4be6ffca3cfeed657d808583de33fa978bc1ec6cb1","9bacaa35481642bc41f463f7ec9780e5dec7adc508f740a17e9ea8e27a68be1d"],["53904faa0b334cdda6e000935ef22151ec08d0f7bb11069f57545ccc1a37b7c0","5bc087d0bc80106d88c9eccac20d3c1c13999981e14434699dcb096b022771c8"],["8e7bcd0bd35983a7719cca7764ca906779b53a043a9b8bcaeff959f43ad86047","10b7770b2a3da4b3940310420ca9514579e88e2e47fd68b3ea10047e8460372a"],["385eed34c1cdff21e6d0818689b81bde71a7f4f18397e6690a841e1599c43862","283bebc3e8ea23f56701de19e9ebf4576b304eec2086dc8cc0458fe5542e5453"],["6f9d9b803ecf191637c73a4413dfa180fddf84a5947fbc9c606ed86c3fac3a7","7c80c68e603059ba69b8e2a30e45c4d47ea4dd2f5c281002d86890603a842160"],["3322d401243c4e2582a2147c104d6ecbf774d163db0f5e5313b7e0e742d0e6bd","56e70797e9664ef5bfb019bc4ddaf9b72805f63ea2873af624f3a2e96c28b2a0"],["85672c7d2de0b7da2bd1770d89665868741b3f9af7643397721d74d28134ab83","7c481b9b5b43b2eb6374049bfa62c2e5e77f17fcc5298f44c8e3094f790313a6"],["948bf809b1988a46b06c9f1919413b10f9226c60f668832ffd959af60c82a0a","53a562856dcb6646dc6b74c5d1c3418c6d4dff08c97cd2bed4cb7f88d8c8e589"],["6260ce7f461801c34f067ce0f02873a8f1b0e44dfc69752accecd819f38fd8e8","bc2da82b6fa5b571a7f09049776a1ef7ecd292238051c198c1a84e95b2b4ae17"],["e5037de0afc1d8d43d8348414bbf4103043ec8f575bfdc432953cc8d2037fa2d","4571534baa94d3b5f9f98d09fb990bddbd5f5b03ec481f10e0e5dc841d755bda"],["e06372b0f4a207adf5ea905e8f1771b4e7e8dbd1c6a6c5b725866a0ae4fce725","7a908974bce18cfe12a27bb2ad5a488cd7484a7787104870b27034f94eee31dd"],["213c7a715cd5d45358d0bbf9dc0ce02204b10bdde2a3f58540ad6908d0559754","4b6dad0b5ae462507013ad06245ba190bb4850f5f36a7eeddff2c27534b458f2"],["4e7c272a7af4b34e8dbb9352a5419a87e2838c70adc62cddf0cc3a3b08fbd53c","17749c766c9d0b18e16fd09f6def681b530b9614bff7dd33e0b3941817dcaae6"],["fea74e3dbe778b1b10f238ad61686aa5c76e3db2be43057632427e2840fb27b6","6e0568db9b0b13297cf674deccb6af93126b596b973f7b77701d3db7f23cb96f"],["76e64113f677cf0e10a2570d599968d31544e179b760432952c02a4417bdde39","c90ddf8dee4e95cf577066d70681f0d35e2a33d2b56d2032b4b1752d1901ac01"],["c738c56b03b2abe1e8281baa743f8f9a8f7cc643df26cbee3ab150242bcbb891","893fb578951ad2537f718f2eacbfbbbb82314eef7880cfe917e735d9699a84c3"],["d895626548b65b81e264c7637c972877d1d72e5f3a925014372e9f6588f6c14b","febfaa38f2bc7eae728ec60818c340eb03428d632bb067e179363ed75d7d991f"],["b8da94032a957518eb0f6433571e8761ceffc73693e84edd49150a564f676e03","2804dfa44805a1e4d7c99cc9762808b092cc584d95ff3b511488e4e74efdf6e7"],["e80fea14441fb33a7d8adab9475d7fab2019effb5156a792f1a11778e3c0df5d","eed1de7f638e00771e89768ca3ca94472d155e80af322ea9fcb4291b6ac9ec78"],["a301697bdfcd704313ba48e51d567543f2a182031efd6915ddc07bbcc4e16070","7370f91cfb67e4f5081809fa25d40f9b1735dbf7c0a11a130c0d1a041e177ea1"],["90ad85b389d6b936463f9d0512678de208cc330b11307fffab7ac63e3fb04ed4","e507a3620a38261affdcbd9427222b839aefabe1582894d991d4d48cb6ef150"],["8f68b9d2f63b5f339239c1ad981f162ee88c5678723ea3351b7b444c9ec4c0da","662a9f2dba063986de1d90c2b6be215dbbea2cfe95510bfdf23cbf79501fff82"],["e4f3fb0176af85d65ff99ff9198c36091f48e86503681e3e6686fd5053231e11","1e63633ad0ef4f1c1661a6d0ea02b7286cc7e74ec951d1c9822c38576feb73bc"],["8c00fa9b18ebf331eb961537a45a4266c7034f2f0d4e1d0716fb6eae20eae29e","efa47267fea521a1a9dc343a3736c974c2fadafa81e36c54e7d2a4c66702414b"],["e7a26ce69dd4829f3e10cec0a9e98ed3143d084f308b92c0997fddfc60cb3e41","2a758e300fa7984b471b006a1aafbb18d0a6b2c0420e83e20e8a9421cf2cfd51"],["b6459e0ee3662ec8d23540c223bcbdc571cbcb967d79424f3cf29eb3de6b80ef","67c876d06f3e06de1dadf16e5661db3c4b3ae6d48e35b2ff30bf0b61a71ba45"],["d68a80c8280bb840793234aa118f06231d6f1fc67e73c5a5deda0f5b496943e8","db8ba9fff4b586d00c4b1f9177b0e28b5b0e7b8f7845295a294c84266b133120"],["324aed7df65c804252dc0270907a30b09612aeb973449cea4095980fc28d3d5d","648a365774b61f2ff130c0c35aec1f4f19213b0c7e332843967224af96ab7c84"],["4df9c14919cde61f6d51dfdbe5fee5dceec4143ba8d1ca888e8bd373fd054c96","35ec51092d8728050974c23a1d85d4b5d506cdc288490192ebac06cad10d5d"],["9c3919a84a474870faed8a9c1cc66021523489054d7f0308cbfc99c8ac1f98cd","ddb84f0f4a4ddd57584f044bf260e641905326f76c64c8e6be7e5e03d4fc599d"],["6057170b1dd12fdf8de05f281d8e06bb91e1493a8b91d4cc5a21382120a959e5","9a1af0b26a6a4807add9a2daf71df262465152bc3ee24c65e899be932385a2a8"],["a576df8e23a08411421439a4518da31880cef0fba7d4df12b1a6973eecb94266","40a6bf20e76640b2c92b97afe58cd82c432e10a7f514d9f3ee8be11ae1b28ec8"],["7778a78c28dec3e30a05fe9629de8c38bb30d1f5cf9a3a208f763889be58ad71","34626d9ab5a5b22ff7098e12f2ff580087b38411ff24ac563b513fc1fd9f43ac"],["928955ee637a84463729fd30e7afd2ed5f96274e5ad7e5cb09eda9c06d903ac","c25621003d3f42a827b78a13093a95eeac3d26efa8a8d83fc5180e935bcd091f"],["85d0fef3ec6db109399064f3a0e3b2855645b4a907ad354527aae75163d82751","1f03648413a38c0be29d496e582cf5663e8751e96877331582c237a24eb1f962"],["ff2b0dce97eece97c1c9b6041798b85dfdfb6d8882da20308f5404824526087e","493d13fef524ba188af4c4dc54d07936c7b7ed6fb90e2ceb2c951e01f0c29907"],["827fbbe4b1e880ea9ed2b2e6301b212b57f1ee148cd6dd28780e5e2cf856e241","c60f9c923c727b0b71bef2c67d1d12687ff7a63186903166d605b68baec293ec"],["eaa649f21f51bdbae7be4ae34ce6e5217a58fdce7f47f9aa7f3b58fa2120e2b3","be3279ed5bbbb03ac69a80f89879aa5a01a6b965f13f7e59d47a5305ba5ad93d"],["e4a42d43c5cf169d9391df6decf42ee541b6d8f0c9a137401e23632dda34d24f","4d9f92e716d1c73526fc99ccfb8ad34ce886eedfa8d8e4f13a7f7131deba9414"],["1ec80fef360cbdd954160fadab352b6b92b53576a88fea4947173b9d4300bf19","aeefe93756b5340d2f3a4958a7abbf5e0146e77f6295a07b671cdc1cc107cefd"],["146a778c04670c2f91b00af4680dfa8bce3490717d58ba889ddb5928366642be","b318e0ec3354028add669827f9d4b2870aaa971d2f7e5ed1d0b297483d83efd0"],["fa50c0f61d22e5f07e3acebb1aa07b128d0012209a28b9776d76a8793180eef9","6b84c6922397eba9b72cd2872281a68a5e683293a57a213b38cd8d7d3f4f2811"],["da1d61d0ca721a11b1a5bf6b7d88e8421a288ab5d5bba5220e53d32b5f067ec2","8157f55a7c99306c79c0766161c91e2966a73899d279b48a655fba0f1ad836f1"],["a8e282ff0c9706907215ff98e8fd416615311de0446f1e062a73b0610d064e13","7f97355b8db81c09abfb7f3c5b2515888b679a3e50dd6bd6cef7c73111f4cc0c"],["174a53b9c9a285872d39e56e6913cab15d59b1fa512508c022f382de8319497c","ccc9dc37abfc9c1657b4155f2c47f9e6646b3a1d8cb9854383da13ac079afa73"],["959396981943785c3d3e57edf5018cdbe039e730e4918b3d884fdff09475b7ba","2e7e552888c331dd8ba0386a4b9cd6849c653f64c8709385e9b8abf87524f2fd"],["d2a63a50ae401e56d645a1153b109a8fcca0a43d561fba2dbb51340c9d82b151","e82d86fb6443fcb7565aee58b2948220a70f750af484ca52d4142174dcf89405"],["64587e2335471eb890ee7896d7cfdc866bacbdbd3839317b3436f9b45617e073","d99fcdd5bf6902e2ae96dd6447c299a185b90a39133aeab358299e5e9faf6589"],["8481bde0e4e4d885b3a546d3e549de042f0aa6cea250e7fd358d6c86dd45e458","38ee7b8cba5404dd84a25bf39cecb2ca900a79c42b262e556d64b1b59779057e"],["13464a57a78102aa62b6979ae817f4637ffcfed3c4b1ce30bcd6303f6caf666b","69be159004614580ef7e433453ccb0ca48f300a81d0942e13f495a907f6ecc27"],["bc4a9df5b713fe2e9aef430bcc1dc97a0cd9ccede2f28588cada3a0d2d83f366","d3a81ca6e785c06383937adf4b798caa6e8a9fbfa547b16d758d666581f33c1"],["8c28a97bf8298bc0d23d8c749452a32e694b65e30a9472a3954ab30fe5324caa","40a30463a3305193378fedf31f7cc0eb7ae784f0451cb9459e71dc73cbef9482"],["8ea9666139527a8c1dd94ce4f071fd23c8b350c5a4bb33748c4ba111faccae0","620efabbc8ee2782e24e7c0cfb95c5d735b783be9cf0f8e955af34a30e62b945"],["dd3625faef5ba06074669716bbd3788d89bdde815959968092f76cc4eb9a9787","7a188fa3520e30d461da2501045731ca941461982883395937f68d00c644a573"],["f710d79d9eb962297e4f6232b40e8f7feb2bc63814614d692c12de752408221e","ea98e67232d3b3295d3b535532115ccac8612c721851617526ae47a9c77bfc82"]]},naf:{wnd:7,points:[["f9308a019258c31049344f85f89d5229b531c845836f99b08601f113bce036f9","388f7b0f632de8140fe337e62a37f3566500a99934c2231b6cb9fd7584b8e672"],["2f8bde4d1a07209355b4a7250a5c5128e88b84bddc619ab7cba8d569b240efe4","d8ac222636e5e3d6d4dba9dda6c9c426f788271bab0d6840dca87d3aa6ac62d6"],["5cbdf0646e5db4eaa398f365f2ea7a0e3d419b7e0330e39ce92bddedcac4f9bc","6aebca40ba255960a3178d6d861a54dba813d0b813fde7b5a5082628087264da"],["acd484e2f0c7f65309ad178a9f559abde09796974c57e714c35f110dfc27ccbe","cc338921b0a7d9fd64380971763b61e9add888a4375f8e0f05cc262ac64f9c37"],["774ae7f858a9411e5ef4246b70c65aac5649980be5c17891bbec17895da008cb","d984a032eb6b5e190243dd56d7b7b365372db1e2dff9d6a8301d74c9c953c61b"],["f28773c2d975288bc7d1d205c3748651b075fbc6610e58cddeeddf8f19405aa8","ab0902e8d880a89758212eb65cdaf473a1a06da521fa91f29b5cb52db03ed81"],["d7924d4f7d43ea965a465ae3095ff41131e5946f3c85f79e44adbcf8e27e080e","581e2872a86c72a683842ec228cc6defea40af2bd896d3a5c504dc9ff6a26b58"],["defdea4cdb677750a420fee807eacf21eb9898ae79b9768766e4faa04a2d4a34","4211ab0694635168e997b0ead2a93daeced1f4a04a95c0f6cfb199f69e56eb77"],["2b4ea0a797a443d293ef5cff444f4979f06acfebd7e86d277475656138385b6c","85e89bc037945d93b343083b5a1c86131a01f60c50269763b570c854e5c09b7a"],["352bbf4a4cdd12564f93fa332ce333301d9ad40271f8107181340aef25be59d5","321eb4075348f534d59c18259dda3e1f4a1b3b2e71b1039c67bd3d8bcf81998c"],["2fa2104d6b38d11b0230010559879124e42ab8dfeff5ff29dc9cdadd4ecacc3f","2de1068295dd865b64569335bd5dd80181d70ecfc882648423ba76b532b7d67"],["9248279b09b4d68dab21a9b066edda83263c3d84e09572e269ca0cd7f5453714","73016f7bf234aade5d1aa71bdea2b1ff3fc0de2a887912ffe54a32ce97cb3402"],["daed4f2be3a8bf278e70132fb0beb7522f570e144bf615c07e996d443dee8729","a69dce4a7d6c98e8d4a1aca87ef8d7003f83c230f3afa726ab40e52290be1c55"],["c44d12c7065d812e8acf28d7cbb19f9011ecd9e9fdf281b0e6a3b5e87d22e7db","2119a460ce326cdc76c45926c982fdac0e106e861edf61c5a039063f0e0e6482"],["6a245bf6dc698504c89a20cfded60853152b695336c28063b61c65cbd269e6b4","e022cf42c2bd4a708b3f5126f16a24ad8b33ba48d0423b6efd5e6348100d8a82"],["1697ffa6fd9de627c077e3d2fe541084ce13300b0bec1146f95ae57f0d0bd6a5","b9c398f186806f5d27561506e4557433a2cf15009e498ae7adee9d63d01b2396"],["605bdb019981718b986d0f07e834cb0d9deb8360ffb7f61df982345ef27a7479","2972d2de4f8d20681a78d93ec96fe23c26bfae84fb14db43b01e1e9056b8c49"],["62d14dab4150bf497402fdc45a215e10dcb01c354959b10cfe31c7e9d87ff33d","80fc06bd8cc5b01098088a1950eed0db01aa132967ab472235f5642483b25eaf"],["80c60ad0040f27dade5b4b06c408e56b2c50e9f56b9b8b425e555c2f86308b6f","1c38303f1cc5c30f26e66bad7fe72f70a65eed4cbe7024eb1aa01f56430bd57a"],["7a9375ad6167ad54aa74c6348cc54d344cc5dc9487d847049d5eabb0fa03c8fb","d0e3fa9eca8726909559e0d79269046bdc59ea10c70ce2b02d499ec224dc7f7"],["d528ecd9b696b54c907a9ed045447a79bb408ec39b68df504bb51f459bc3ffc9","eecf41253136e5f99966f21881fd656ebc4345405c520dbc063465b521409933"],["49370a4b5f43412ea25f514e8ecdad05266115e4a7ecb1387231808f8b45963","758f3f41afd6ed428b3081b0512fd62a54c3f3afbb5b6764b653052a12949c9a"],["77f230936ee88cbbd73df930d64702ef881d811e0e1498e2f1c13eb1fc345d74","958ef42a7886b6400a08266e9ba1b37896c95330d97077cbbe8eb3c7671c60d6"],["f2dac991cc4ce4b9ea44887e5c7c0bce58c80074ab9d4dbaeb28531b7739f530","e0dedc9b3b2f8dad4da1f32dec2531df9eb5fbeb0598e4fd1a117dba703a3c37"],["463b3d9f662621fb1b4be8fbbe2520125a216cdfc9dae3debcba4850c690d45b","5ed430d78c296c3543114306dd8622d7c622e27c970a1de31cb377b01af7307e"],["f16f804244e46e2a09232d4aff3b59976b98fac14328a2d1a32496b49998f247","cedabd9b82203f7e13d206fcdf4e33d92a6c53c26e5cce26d6579962c4e31df6"],["caf754272dc84563b0352b7a14311af55d245315ace27c65369e15f7151d41d1","cb474660ef35f5f2a41b643fa5e460575f4fa9b7962232a5c32f908318a04476"],["2600ca4b282cb986f85d0f1709979d8b44a09c07cb86d7c124497bc86f082120","4119b88753c15bd6a693b03fcddbb45d5ac6be74ab5f0ef44b0be9475a7e4b40"],["7635ca72d7e8432c338ec53cd12220bc01c48685e24f7dc8c602a7746998e435","91b649609489d613d1d5e590f78e6d74ecfc061d57048bad9e76f302c5b9c61"],["754e3239f325570cdbbf4a87deee8a66b7f2b33479d468fbc1a50743bf56cc18","673fb86e5bda30fb3cd0ed304ea49a023ee33d0197a695d0c5d98093c536683"],["e3e6bd1071a1e96aff57859c82d570f0330800661d1c952f9fe2694691d9b9e8","59c9e0bba394e76f40c0aa58379a3cb6a5a2283993e90c4167002af4920e37f5"],["186b483d056a033826ae73d88f732985c4ccb1f32ba35f4b4cc47fdcf04aa6eb","3b952d32c67cf77e2e17446e204180ab21fb8090895138b4a4a797f86e80888b"],["df9d70a6b9876ce544c98561f4be4f725442e6d2b737d9c91a8321724ce0963f","55eb2dafd84d6ccd5f862b785dc39d4ab157222720ef9da217b8c45cf2ba2417"],["5edd5cc23c51e87a497ca815d5dce0f8ab52554f849ed8995de64c5f34ce7143","efae9c8dbc14130661e8cec030c89ad0c13c66c0d17a2905cdc706ab7399a868"],["290798c2b6476830da12fe02287e9e777aa3fba1c355b17a722d362f84614fba","e38da76dcd440621988d00bcf79af25d5b29c094db2a23146d003afd41943e7a"],["af3c423a95d9f5b3054754efa150ac39cd29552fe360257362dfdecef4053b45","f98a3fd831eb2b749a93b0e6f35cfb40c8cd5aa667a15581bc2feded498fd9c6"],["766dbb24d134e745cccaa28c99bf274906bb66b26dcf98df8d2fed50d884249a","744b1152eacbe5e38dcc887980da38b897584a65fa06cedd2c924f97cbac5996"],["59dbf46f8c94759ba21277c33784f41645f7b44f6c596a58ce92e666191abe3e","c534ad44175fbc300f4ea6ce648309a042ce739a7919798cd85e216c4a307f6e"],["f13ada95103c4537305e691e74e9a4a8dd647e711a95e73cb62dc6018cfd87b8","e13817b44ee14de663bf4bc808341f326949e21a6a75c2570778419bdaf5733d"],["7754b4fa0e8aced06d4167a2c59cca4cda1869c06ebadfb6488550015a88522c","30e93e864e669d82224b967c3020b8fa8d1e4e350b6cbcc537a48b57841163a2"],["948dcadf5990e048aa3874d46abef9d701858f95de8041d2a6828c99e2262519","e491a42537f6e597d5d28a3224b1bc25df9154efbd2ef1d2cbba2cae5347d57e"],["7962414450c76c1689c7b48f8202ec37fb224cf5ac0bfa1570328a8a3d7c77ab","100b610ec4ffb4760d5c1fc133ef6f6b12507a051f04ac5760afa5b29db83437"],["3514087834964b54b15b160644d915485a16977225b8847bb0dd085137ec47ca","ef0afbb2056205448e1652c48e8127fc6039e77c15c2378b7e7d15a0de293311"],["d3cc30ad6b483e4bc79ce2c9dd8bc54993e947eb8df787b442943d3f7b527eaf","8b378a22d827278d89c5e9be8f9508ae3c2ad46290358630afb34db04eede0a4"],["1624d84780732860ce1c78fcbfefe08b2b29823db913f6493975ba0ff4847610","68651cf9b6da903e0914448c6cd9d4ca896878f5282be4c8cc06e2a404078575"],["733ce80da955a8a26902c95633e62a985192474b5af207da6df7b4fd5fc61cd4","f5435a2bd2badf7d485a4d8b8db9fcce3e1ef8e0201e4578c54673bc1dc5ea1d"],["15d9441254945064cf1a1c33bbd3b49f8966c5092171e699ef258dfab81c045c","d56eb30b69463e7234f5137b73b84177434800bacebfc685fc37bbe9efe4070d"],["a1d0fcf2ec9de675b612136e5ce70d271c21417c9d2b8aaaac138599d0717940","edd77f50bcb5a3cab2e90737309667f2641462a54070f3d519212d39c197a629"],["e22fbe15c0af8ccc5780c0735f84dbe9a790badee8245c06c7ca37331cb36980","a855babad5cd60c88b430a69f53a1a7a38289154964799be43d06d77d31da06"],["311091dd9860e8e20ee13473c1155f5f69635e394704eaa74009452246cfa9b3","66db656f87d1f04fffd1f04788c06830871ec5a64feee685bd80f0b1286d8374"],["34c1fd04d301be89b31c0442d3e6ac24883928b45a9340781867d4232ec2dbdf","9414685e97b1b5954bd46f730174136d57f1ceeb487443dc5321857ba73abee"],["f219ea5d6b54701c1c14de5b557eb42a8d13f3abbcd08affcc2a5e6b049b8d63","4cb95957e83d40b0f73af4544cccf6b1f4b08d3c07b27fb8d8c2962a400766d1"],["d7b8740f74a8fbaab1f683db8f45de26543a5490bca627087236912469a0b448","fa77968128d9c92ee1010f337ad4717eff15db5ed3c049b3411e0315eaa4593b"],["32d31c222f8f6f0ef86f7c98d3a3335ead5bcd32abdd94289fe4d3091aa824bf","5f3032f5892156e39ccd3d7915b9e1da2e6dac9e6f26e961118d14b8462e1661"],["7461f371914ab32671045a155d9831ea8793d77cd59592c4340f86cbc18347b5","8ec0ba238b96bec0cbdddcae0aa442542eee1ff50c986ea6b39847b3cc092ff6"],["ee079adb1df1860074356a25aa38206a6d716b2c3e67453d287698bad7b2b2d6","8dc2412aafe3be5c4c5f37e0ecc5f9f6a446989af04c4e25ebaac479ec1c8c1e"],["16ec93e447ec83f0467b18302ee620f7e65de331874c9dc72bfd8616ba9da6b5","5e4631150e62fb40d0e8c2a7ca5804a39d58186a50e497139626778e25b0674d"],["eaa5f980c245f6f038978290afa70b6bd8855897f98b6aa485b96065d537bd99","f65f5d3e292c2e0819a528391c994624d784869d7e6ea67fb18041024edc07dc"],["78c9407544ac132692ee1910a02439958ae04877151342ea96c4b6b35a49f51","f3e0319169eb9b85d5404795539a5e68fa1fbd583c064d2462b675f194a3ddb4"],["494f4be219a1a77016dcd838431aea0001cdc8ae7a6fc688726578d9702857a5","42242a969283a5f339ba7f075e36ba2af925ce30d767ed6e55f4b031880d562c"],["a598a8030da6d86c6bc7f2f5144ea549d28211ea58faa70ebf4c1e665c1fe9b5","204b5d6f84822c307e4b4a7140737aec23fc63b65b35f86a10026dbd2d864e6b"],["c41916365abb2b5d09192f5f2dbeafec208f020f12570a184dbadc3e58595997","4f14351d0087efa49d245b328984989d5caf9450f34bfc0ed16e96b58fa9913"],["841d6063a586fa475a724604da03bc5b92a2e0d2e0a36acfe4c73a5514742881","73867f59c0659e81904f9a1c7543698e62562d6744c169ce7a36de01a8d6154"],["5e95bb399a6971d376026947f89bde2f282b33810928be4ded112ac4d70e20d5","39f23f366809085beebfc71181313775a99c9aed7d8ba38b161384c746012865"],["36e4641a53948fd476c39f8a99fd974e5ec07564b5315d8bf99471bca0ef2f66","d2424b1b1abe4eb8164227b085c9aa9456ea13493fd563e06fd51cf5694c78fc"],["336581ea7bfbbb290c191a2f507a41cf5643842170e914faeab27c2c579f726","ead12168595fe1be99252129b6e56b3391f7ab1410cd1e0ef3dcdcabd2fda224"],["8ab89816dadfd6b6a1f2634fcf00ec8403781025ed6890c4849742706bd43ede","6fdcef09f2f6d0a044e654aef624136f503d459c3e89845858a47a9129cdd24e"],["1e33f1a746c9c5778133344d9299fcaa20b0938e8acff2544bb40284b8c5fb94","60660257dd11b3aa9c8ed618d24edff2306d320f1d03010e33a7d2057f3b3b6"],["85b7c1dcb3cec1b7ee7f30ded79dd20a0ed1f4cc18cbcfcfa410361fd8f08f31","3d98a9cdd026dd43f39048f25a8847f4fcafad1895d7a633c6fed3c35e999511"],["29df9fbd8d9e46509275f4b125d6d45d7fbe9a3b878a7af872a2800661ac5f51","b4c4fe99c775a606e2d8862179139ffda61dc861c019e55cd2876eb2a27d84b"],["a0b1cae06b0a847a3fea6e671aaf8adfdfe58ca2f768105c8082b2e449fce252","ae434102edde0958ec4b19d917a6a28e6b72da1834aff0e650f049503a296cf2"],["4e8ceafb9b3e9a136dc7ff67e840295b499dfb3b2133e4ba113f2e4c0e121e5","cf2174118c8b6d7a4b48f6d534ce5c79422c086a63460502b827ce62a326683c"],["d24a44e047e19b6f5afb81c7ca2f69080a5076689a010919f42725c2b789a33b","6fb8d5591b466f8fc63db50f1c0f1c69013f996887b8244d2cdec417afea8fa3"],["ea01606a7a6c9cdd249fdfcfacb99584001edd28abbab77b5104e98e8e3b35d4","322af4908c7312b0cfbfe369f7a7b3cdb7d4494bc2823700cfd652188a3ea98d"],["af8addbf2b661c8a6c6328655eb96651252007d8c5ea31be4ad196de8ce2131f","6749e67c029b85f52a034eafd096836b2520818680e26ac8f3dfbcdb71749700"],["e3ae1974566ca06cc516d47e0fb165a674a3dabcfca15e722f0e3450f45889","2aeabe7e4531510116217f07bf4d07300de97e4874f81f533420a72eeb0bd6a4"],["591ee355313d99721cf6993ffed1e3e301993ff3ed258802075ea8ced397e246","b0ea558a113c30bea60fc4775460c7901ff0b053d25ca2bdeee98f1a4be5d196"],["11396d55fda54c49f19aa97318d8da61fa8584e47b084945077cf03255b52984","998c74a8cd45ac01289d5833a7beb4744ff536b01b257be4c5767bea93ea57a4"],["3c5d2a1ba39c5a1790000738c9e0c40b8dcdfd5468754b6405540157e017aa7a","b2284279995a34e2f9d4de7396fc18b80f9b8b9fdd270f6661f79ca4c81bd257"],["cc8704b8a60a0defa3a99a7299f2e9c3fbc395afb04ac078425ef8a1793cc030","bdd46039feed17881d1e0862db347f8cf395b74fc4bcdc4e940b74e3ac1f1b13"],["c533e4f7ea8555aacd9777ac5cad29b97dd4defccc53ee7ea204119b2889b197","6f0a256bc5efdf429a2fb6242f1a43a2d9b925bb4a4b3a26bb8e0f45eb596096"],["c14f8f2ccb27d6f109f6d08d03cc96a69ba8c34eec07bbcf566d48e33da6593","c359d6923bb398f7fd4473e16fe1c28475b740dd098075e6c0e8649113dc3a38"],["a6cbc3046bc6a450bac24789fa17115a4c9739ed75f8f21ce441f72e0b90e6ef","21ae7f4680e889bb130619e2c0f95a360ceb573c70603139862afd617fa9b9f"],["347d6d9a02c48927ebfb86c1359b1caf130a3c0267d11ce6344b39f99d43cc38","60ea7f61a353524d1c987f6ecec92f086d565ab687870cb12689ff1e31c74448"],["da6545d2181db8d983f7dcb375ef5866d47c67b1bf31c8cf855ef7437b72656a","49b96715ab6878a79e78f07ce5680c5d6673051b4935bd897fea824b77dc208a"],["c40747cc9d012cb1a13b8148309c6de7ec25d6945d657146b9d5994b8feb1111","5ca560753be2a12fc6de6caf2cb489565db936156b9514e1bb5e83037e0fa2d4"],["4e42c8ec82c99798ccf3a610be870e78338c7f713348bd34c8203ef4037f3502","7571d74ee5e0fb92a7a8b33a07783341a5492144cc54bcc40a94473693606437"],["3775ab7089bc6af823aba2e1af70b236d251cadb0c86743287522a1b3b0dedea","be52d107bcfa09d8bcb9736a828cfa7fac8db17bf7a76a2c42ad961409018cf7"],["cee31cbf7e34ec379d94fb814d3d775ad954595d1314ba8846959e3e82f74e26","8fd64a14c06b589c26b947ae2bcf6bfa0149ef0be14ed4d80f448a01c43b1c6d"],["b4f9eaea09b6917619f6ea6a4eb5464efddb58fd45b1ebefcdc1a01d08b47986","39e5c9925b5a54b07433a4f18c61726f8bb131c012ca542eb24a8ac07200682a"],["d4263dfc3d2df923a0179a48966d30ce84e2515afc3dccc1b77907792ebcc60e","62dfaf07a0f78feb30e30d6295853ce189e127760ad6cf7fae164e122a208d54"],["48457524820fa65a4f8d35eb6930857c0032acc0a4a2de422233eeda897612c4","25a748ab367979d98733c38a1fa1c2e7dc6cc07db2d60a9ae7a76aaa49bd0f77"],["dfeeef1881101f2cb11644f3a2afdfc2045e19919152923f367a1767c11cceda","ecfb7056cf1de042f9420bab396793c0c390bde74b4bbdff16a83ae09a9a7517"],["6d7ef6b17543f8373c573f44e1f389835d89bcbc6062ced36c82df83b8fae859","cd450ec335438986dfefa10c57fea9bcc521a0959b2d80bbf74b190dca712d10"],["e75605d59102a5a2684500d3b991f2e3f3c88b93225547035af25af66e04541f","f5c54754a8f71ee540b9b48728473e314f729ac5308b06938360990e2bfad125"],["eb98660f4c4dfaa06a2be453d5020bc99a0c2e60abe388457dd43fefb1ed620c","6cb9a8876d9cb8520609af3add26cd20a0a7cd8a9411131ce85f44100099223e"],["13e87b027d8514d35939f2e6892b19922154596941888336dc3563e3b8dba942","fef5a3c68059a6dec5d624114bf1e91aac2b9da568d6abeb2570d55646b8adf1"],["ee163026e9fd6fe017c38f06a5be6fc125424b371ce2708e7bf4491691e5764a","1acb250f255dd61c43d94ccc670d0f58f49ae3fa15b96623e5430da0ad6c62b2"],["b268f5ef9ad51e4d78de3a750c2dc89b1e626d43505867999932e5db33af3d80","5f310d4b3c99b9ebb19f77d41c1dee018cf0d34fd4191614003e945a1216e423"],["ff07f3118a9df035e9fad85eb6c7bfe42b02f01ca99ceea3bf7ffdba93c4750d","438136d603e858a3a5c440c38eccbaddc1d2942114e2eddd4740d098ced1f0d8"],["8d8b9855c7c052a34146fd20ffb658bea4b9f69e0d825ebec16e8c3ce2b526a1","cdb559eedc2d79f926baf44fb84ea4d44bcf50fee51d7ceb30e2e7f463036758"],["52db0b5384dfbf05bfa9d472d7ae26dfe4b851ceca91b1eba54263180da32b63","c3b997d050ee5d423ebaf66a6db9f57b3180c902875679de924b69d84a7b375"],["e62f9490d3d51da6395efd24e80919cc7d0f29c3f3fa48c6fff543becbd43352","6d89ad7ba4876b0b22c2ca280c682862f342c8591f1daf5170e07bfd9ccafa7d"],["7f30ea2476b399b4957509c88f77d0191afa2ff5cb7b14fd6d8e7d65aaab1193","ca5ef7d4b231c94c3b15389a5f6311e9daff7bb67b103e9880ef4bff637acaec"],["5098ff1e1d9f14fb46a210fada6c903fef0fb7b4a1dd1d9ac60a0361800b7a00","9731141d81fc8f8084d37c6e7542006b3ee1b40d60dfe5362a5b132fd17ddc0"],["32b78c7de9ee512a72895be6b9cbefa6e2f3c4ccce445c96b9f2c81e2778ad58","ee1849f513df71e32efc3896ee28260c73bb80547ae2275ba497237794c8753c"],["e2cb74fddc8e9fbcd076eef2a7c72b0ce37d50f08269dfc074b581550547a4f7","d3aa2ed71c9dd2247a62df062736eb0baddea9e36122d2be8641abcb005cc4a4"],["8438447566d4d7bedadc299496ab357426009a35f235cb141be0d99cd10ae3a8","c4e1020916980a4da5d01ac5e6ad330734ef0d7906631c4f2390426b2edd791f"],["4162d488b89402039b584c6fc6c308870587d9c46f660b878ab65c82c711d67e","67163e903236289f776f22c25fb8a3afc1732f2b84b4e95dbda47ae5a0852649"],["3fad3fa84caf0f34f0f89bfd2dcf54fc175d767aec3e50684f3ba4a4bf5f683d","cd1bc7cb6cc407bb2f0ca647c718a730cf71872e7d0d2a53fa20efcdfe61826"],["674f2600a3007a00568c1a7ce05d0816c1fb84bf1370798f1c69532faeb1a86b","299d21f9413f33b3edf43b257004580b70db57da0b182259e09eecc69e0d38a5"],["d32f4da54ade74abb81b815ad1fb3b263d82d6c692714bcff87d29bd5ee9f08f","f9429e738b8e53b968e99016c059707782e14f4535359d582fc416910b3eea87"],["30e4e670435385556e593657135845d36fbb6931f72b08cb1ed954f1e3ce3ff6","462f9bce619898638499350113bbc9b10a878d35da70740dc695a559eb88db7b"],["be2062003c51cc3004682904330e4dee7f3dcd10b01e580bf1971b04d4cad297","62188bc49d61e5428573d48a74e1c655b1c61090905682a0d5558ed72dccb9bc"],["93144423ace3451ed29e0fb9ac2af211cb6e84a601df5993c419859fff5df04a","7c10dfb164c3425f5c71a3f9d7992038f1065224f72bb9d1d902a6d13037b47c"],["b015f8044f5fcbdcf21ca26d6c34fb8197829205c7b7d2a7cb66418c157b112c","ab8c1e086d04e813744a655b2df8d5f83b3cdc6faa3088c1d3aea1454e3a1d5f"],["d5e9e1da649d97d89e4868117a465a3a4f8a18de57a140d36b3f2af341a21b52","4cb04437f391ed73111a13cc1d4dd0db1693465c2240480d8955e8592f27447a"],["d3ae41047dd7ca065dbf8ed77b992439983005cd72e16d6f996a5316d36966bb","bd1aeb21ad22ebb22a10f0303417c6d964f8cdd7df0aca614b10dc14d125ac46"],["463e2763d885f958fc66cdd22800f0a487197d0a82e377b49f80af87c897b065","bfefacdb0e5d0fd7df3a311a94de062b26b80c61fbc97508b79992671ef7ca7f"],["7985fdfd127c0567c6f53ec1bb63ec3158e597c40bfe747c83cddfc910641917","603c12daf3d9862ef2b25fe1de289aed24ed291e0ec6708703a5bd567f32ed03"],["74a1ad6b5f76e39db2dd249410eac7f99e74c59cb83d2d0ed5ff1543da7703e9","cc6157ef18c9c63cd6193d83631bbea0093e0968942e8c33d5737fd790e0db08"],["30682a50703375f602d416664ba19b7fc9bab42c72747463a71d0896b22f6da3","553e04f6b018b4fa6c8f39e7f311d3176290d0e0f19ca73f17714d9977a22ff8"],["9e2158f0d7c0d5f26c3791efefa79597654e7a2b2464f52b1ee6c1347769ef57","712fcdd1b9053f09003a3481fa7762e9ffd7c8ef35a38509e2fbf2629008373"],["176e26989a43c9cfeba4029c202538c28172e566e3c4fce7322857f3be327d66","ed8cc9d04b29eb877d270b4878dc43c19aefd31f4eee09ee7b47834c1fa4b1c3"],["75d46efea3771e6e68abb89a13ad747ecf1892393dfc4f1b7004788c50374da8","9852390a99507679fd0b86fd2b39a868d7efc22151346e1a3ca4726586a6bed8"],["809a20c67d64900ffb698c4c825f6d5f2310fb0451c869345b7319f645605721","9e994980d9917e22b76b061927fa04143d096ccc54963e6a5ebfa5f3f8e286c1"],["1b38903a43f7f114ed4500b4eac7083fdefece1cf29c63528d563446f972c180","4036edc931a60ae889353f77fd53de4a2708b26b6f5da72ad3394119daf408f9"]]}}},53369:function(e,t,n){"use strict";var a=t,r=n(63785),i=n(77859),o=n(2910);a.assert=i,a.toArray=o.toArray,a.zero2=o.zero2,a.toHex=o.toHex,a.encode=o.encode,a.getNAF=function(e,t,n){var a=new Array(Math.max(e.bitLength(),n)+1);a.fill(0);for(var r=1<<t+1,i=e.clone(),o=0;o<a.length;o++){var d,s=i.andln(r-1);i.isOdd()?(d=s>(r>>1)-1?(r>>1)-s:s,i.isubn(d)):d=0,a[o]=d,i.iushrn(1)}return a},a.getJSF=function(e,t){var n=[[],[]];e=e.clone(),t=t.clone();for(var a,r=0,i=0;e.cmpn(-r)>0||t.cmpn(-i)>0;){var o,d,s=e.andln(3)+r&3,c=t.andln(3)+i&3;3===s&&(s=-1),3===c&&(c=-1),o=0==(1&s)?0:3!==(a=e.andln(7)+r&7)&&5!==a||2!==c?s:-s,n[0].push(o),d=0==(1&c)?0:3!==(a=t.andln(7)+i&7)&&5!==a||2!==s?c:-c,n[1].push(d),2*r===o+1&&(r=1-r),2*i===d+1&&(i=1-i),e.iushrn(1),t.iushrn(1)}return n},a.cachedProperty=function(e,t,n){var a="_"+t;e.prototype[t]=function(){return void 0!==this[a]?this[a]:this[a]=n.call(this)}},a.parseBytes=function(e){return"string"==typeof e?a.toArray(e,"hex"):e},a.intFromLE=function(e){return new r(e,"hex","le")}},61393:function(e){"use strict";e.exports=e=>{if("string"!=typeof e)throw new TypeError("Expected a string");return e.replace(/[|\\{}()[\]^$+*?.]/g,"\\$&").replace(/-/g,"\\x2d")}},50343:function(e){"use strict";var t,n="object"==typeof Reflect?Reflect:null,a=n&&"function"==typeof n.apply?n.apply:function(e,t,n){return Function.prototype.apply.call(e,t,n)};t=n&&"function"==typeof n.ownKeys?n.ownKeys:Object.getOwnPropertySymbols?function(e){return Object.getOwnPropertyNames(e).concat(Object.getOwnPropertySymbols(e))}:function(e){return Object.getOwnPropertyNames(e)};var r=Number.isNaN||function(e){return e!=e};function i(){i.init.call(this)}e.exports=i,e.exports.once=function(e,t){return new Promise((function(n,a){function r(n){e.removeListener(t,i),a(n)}function i(){"function"==typeof e.removeListener&&e.removeListener("error",r),n([].slice.call(arguments))}p(e,t,i,{once:!0}),"error"!==t&&function(e,t,n){"function"==typeof e.on&&p(e,"error",t,n)}(e,r,{once:!0})}))},i.EventEmitter=i,i.prototype._events=void 0,i.prototype._eventsCount=0,i.prototype._maxListeners=void 0;var o=10;function d(e){if("function"!=typeof e)throw new TypeError('The "listener" argument must be of type Function. Received type '+typeof e)}function s(e){return void 0===e._maxListeners?i.defaultMaxListeners:e._maxListeners}function c(e,t,n,a){var r,i,o,c;if(d(n),void 0===(i=e._events)?(i=e._events=Object.create(null),e._eventsCount=0):(void 0!==i.newListener&&(e.emit("newListener",t,n.listener?n.listener:n),i=e._events),o=i[t]),void 0===o)o=i[t]=n,++e._eventsCount;else if("function"==typeof o?o=i[t]=a?[n,o]:[o,n]:a?o.unshift(n):o.push(n),(r=s(e))>0&&o.length>r&&!o.warned){o.warned=!0;var u=new Error("Possible EventEmitter memory leak detected. "+o.length+" "+String(t)+" listeners added. Use emitter.setMaxListeners() to increase limit");u.name="MaxListenersExceededWarning",u.emitter=e,u.type=t,u.count=o.length,c=u,console&&console.warn&&console.warn(c)}return e}function u(){if(!this.fired)return this.target.removeListener(this.type,this.wrapFn),this.fired=!0,0===arguments.length?this.listener.call(this.target):this.listener.apply(this.target,arguments)}function l(e,t,n){var a={fired:!1,wrapFn:void 0,target:e,type:t,listener:n},r=u.bind(a);return r.listener=n,a.wrapFn=r,r}function g(e,t,n){var a=e._events;if(void 0===a)return[];var r=a[t];return void 0===r?[]:"function"==typeof r?n?[r.listener||r]:[r]:n?function(e){for(var t=new Array(e.length),n=0;n<t.length;++n)t[n]=e[n].listener||e[n];return t}(r):f(r,r.length)}function h(e){var t=this._events;if(void 0!==t){var n=t[e];if("function"==typeof n)return 1;if(void 0!==n)return n.length}return 0}function f(e,t){for(var n=new Array(t),a=0;a<t;++a)n[a]=e[a];return n}function p(e,t,n,a){if("function"==typeof e.on)a.once?e.once(t,n):e.on(t,n);else{if("function"!=typeof e.addEventListener)throw new TypeError('The "emitter" argument must be of type EventEmitter. Received type '+typeof e);e.addEventListener(t,(function r(i){a.once&&e.removeEventListener(t,r),n(i)}))}}Object.defineProperty(i,"defaultMaxListeners",{enumerable:!0,get:function(){return o},set:function(e){if("number"!=typeof e||e<0||r(e))throw new RangeError('The value of "defaultMaxListeners" is out of range. It must be a non-negative number. Received '+e+".");o=e}}),i.init=function(){void 0!==this._events&&this._events!==Object.getPrototypeOf(this)._events||(this._events=Object.create(null),this._eventsCount=0),this._maxListeners=this._maxListeners||void 0},i.prototype.setMaxListeners=function(e){if("number"!=typeof e||e<0||r(e))throw new RangeError('The value of "n" is out of range. It must be a non-negative number. Received '+e+".");return this._maxListeners=e,this},i.prototype.getMaxListeners=function(){return s(this)},i.prototype.emit=function(e){for(var t=[],n=1;n<arguments.length;n++)t.push(arguments[n]);var r="error"===e,i=this._events;if(void 0!==i)r=r&&void 0===i.error;else if(!r)return!1;if(r){var o;if(t.length>0&&(o=t[0]),o instanceof Error)throw o;var d=new Error("Unhandled error."+(o?" ("+o.message+")":""));throw d.context=o,d}var s=i[e];if(void 0===s)return!1;if("function"==typeof s)a(s,this,t);else{var c=s.length,u=f(s,c);for(n=0;n<c;++n)a(u[n],this,t)}return!0},i.prototype.addListener=function(e,t){return c(this,e,t,!1)},i.prototype.on=i.prototype.addListener,i.prototype.prependListener=function(e,t){return c(this,e,t,!0)},i.prototype.once=function(e,t){return d(t),this.on(e,l(this,e,t)),this},i.prototype.prependOnceListener=function(e,t){return d(t),this.prependListener(e,l(this,e,t)),this},i.prototype.removeListener=function(e,t){var n,a,r,i,o;if(d(t),void 0===(a=this._events))return this;if(void 0===(n=a[e]))return this;if(n===t||n.listener===t)0==--this._eventsCount?this._events=Object.create(null):(delete a[e],a.removeListener&&this.emit("removeListener",e,n.listener||t));else if("function"!=typeof n){for(r=-1,i=n.length-1;i>=0;i--)if(n[i]===t||n[i].listener===t){o=n[i].listener,r=i;break}if(r<0)return this;0===r?n.shift():function(e,t){for(;t+1<e.length;t++)e[t]=e[t+1];e.pop()}(n,r),1===n.length&&(a[e]=n[0]),void 0!==a.removeListener&&this.emit("removeListener",e,o||t)}return this},i.prototype.off=i.prototype.removeListener,i.prototype.removeAllListeners=function(e){var t,n,a;if(void 0===(n=this._events))return this;if(void 0===n.removeListener)return 0===arguments.length?(this._events=Object.create(null),this._eventsCount=0):void 0!==n[e]&&(0==--this._eventsCount?this._events=Object.create(null):delete n[e]),this;if(0===arguments.length){var r,i=Object.keys(n);for(a=0;a<i.length;++a)"removeListener"!==(r=i[a])&&this.removeAllListeners(r);return this.removeAllListeners("removeListener"),this._events=Object.create(null),this._eventsCount=0,this}if("function"==typeof(t=n[e]))this.removeListener(e,t);else if(void 0!==t)for(a=t.length-1;a>=0;a--)this.removeListener(e,t[a]);return this},i.prototype.listeners=function(e){return g(this,e,!0)},i.prototype.rawListeners=function(e){return g(this,e,!1)},i.listenerCount=function(e,t){return"function"==typeof e.listenerCount?e.listenerCount(t):h.call(e,t)},i.prototype.listenerCount=h,i.prototype.eventNames=function(){return this._eventsCount>0?t(this._events):[]}},55883:function(e,t,n){var a=n(27172).Buffer,r=n(79500);e.exports=function(e,t,n,i){if(a.isBuffer(e)||(e=a.from(e,"binary")),t&&(a.isBuffer(t)||(t=a.from(t,"binary")),8!==t.length))throw new RangeError("salt should be Buffer with 8 byte length");for(var o=n/8,d=a.alloc(o),s=a.alloc(i||0),c=a.alloc(0);o>0||i>0;){var u=new r;u.update(c),u.update(e),t&&u.update(t),c=u.digest();var l=0;if(o>0){var g=d.length-o;l=Math.min(o,c.length),c.copy(d,g,0,l),o-=l}if(l<c.length&&i>0){var h=s.length-i,f=Math.min(i,c.length-l);c.copy(s,h,l,l+f),i-=f}}return c.fill(0),{key:d,iv:s}}},66471:function(e){"use strict";e.exports=function e(t,n){if(t===n)return!0;if(t&&n&&"object"==typeof t&&"object"==typeof n){if(t.constructor!==n.constructor)return!1;var a,r,i;if(Array.isArray(t)){if((a=t.length)!=n.length)return!1;for(r=a;0!=r--;)if(!e(t[r],n[r]))return!1;return!0}if(t.constructor===RegExp)return t.source===n.source&&t.flags===n.flags;if(t.valueOf!==Object.prototype.valueOf)return t.valueOf()===n.valueOf();if(t.toString!==Object.prototype.toString)return t.toString()===n.toString();if((a=(i=Object.keys(t)).length)!==Object.keys(n).length)return!1;for(r=a;0!=r--;)if(!Object.prototype.hasOwnProperty.call(n,i[r]))return!1;for(r=a;0!=r--;){var o=i[r];if(!e(t[o],n[o]))return!1}return!0}return t!=t&&n!=n}},6883:function(e,t,n){"use strict";var a=n(27172).Buffer,r=n(51457).Transform;function i(e){r.call(this),this._block=a.allocUnsafe(e),this._blockSize=e,this._blockOffset=0,this._length=[0,0,0,0],this._finalized=!1}n(70087)(i,r),i.prototype._transform=function(e,t,n){var a=null;try{this.update(e,t)}catch(r){a=r}n(a)},i.prototype._flush=function(e){var t=null;try{this.push(this.digest())}catch(n){t=n}e(t)},i.prototype.update=function(e,t){if(function(e,t){if(!a.isBuffer(e)&&"string"!=typeof e)throw new TypeError(t+" must be a string or a buffer")}(e,"Data"),this._finalized)throw new Error("Digest already called");a.isBuffer(e)||(e=a.from(e,t));for(var n=this._block,r=0;this._blockOffset+e.length-r>=this._blockSize;){for(var i=this._blockOffset;i<this._blockSize;)n[i++]=e[r++];this._update(),this._blockOffset=0}for(;r<e.length;)n[this._blockOffset++]=e[r++];for(var o=0,d=8*e.length;d>0;++o)this._length[o]+=d,(d=this._length[o]/4294967296|0)>0&&(this._length[o]-=4294967296*d);return this},i.prototype._update=function(){throw new Error("_update is not implemented")},i.prototype.digest=function(e){if(this._finalized)throw new Error("Digest already called");this._finalized=!0;var t=this._digest();void 0!==e&&(t=t.toString(e)),this._block.fill(0),this._blockOffset=0;for(var n=0;n<4;++n)this._length[n]=0;return t},i.prototype._digest=function(){throw new Error("_digest is not implemented")},e.exports=i},14004:function(e){"use strict";var t={};function n(e,n,a){a||(a=Error);var r=function(e){var t,a;function r(t,a,r){return e.call(this,function(e,t,a){return"string"==typeof n?n:n(e,t,a)}(t,a,r))||this}return a=e,(t=r).prototype=Object.create(a.prototype),t.prototype.constructor=t,t.__proto__=a,r}(a);r.prototype.name=a.name,r.prototype.code=e,t[e]=r}function a(e,t){if(Array.isArray(e)){var n=e.length;return e=e.map((function(e){return String(e)})),n>2?"one of ".concat(t," ").concat(e.slice(0,n-1).join(", "),", or ")+e[n-1]:2===n?"one of ".concat(t," ").concat(e[0]," or ").concat(e[1]):"of ".concat(t," ").concat(e[0])}return"of ".concat(t," ").concat(String(e))}n("ERR_INVALID_OPT_VALUE",(function(e,t){return'The value "'+t+'" is invalid for option "'+e+'"'}),TypeError),n("ERR_INVALID_ARG_TYPE",(function(e,t,n){var r,i,o,d;if("string"==typeof t&&(i="not ",t.substr(!o||o<0?0:+o,i.length)===i)?(r="must not be",t=t.replace(/^not /,"")):r="must be",function(e,t,n){return(void 0===n||n>e.length)&&(n=e.length),e.substring(n-t.length,n)===t}(e," argument"))d="The ".concat(e," ").concat(r," ").concat(a(t,"type"));else{var s=function(e,t,n){return"number"!=typeof n&&(n=0),!(n+t.length>e.length)&&-1!==e.indexOf(t,n)}(e,".")?"property":"argument";d='The "'.concat(e,'" ').concat(s," ").concat(r," ").concat(a(t,"type"))}return d+=". Received type ".concat(typeof n)}),TypeError),n("ERR_STREAM_PUSH_AFTER_EOF","stream.push() after EOF"),n("ERR_METHOD_NOT_IMPLEMENTED",(function(e){return"The "+e+" method is not implemented"})),n("ERR_STREAM_PREMATURE_CLOSE","Premature close"),n("ERR_STREAM_DESTROYED",(function(e){return"Cannot call "+e+" after a stream was destroyed"})),n("ERR_MULTIPLE_CALLBACK","Callback called multiple times"),n("ERR_STREAM_CANNOT_PIPE","Cannot pipe, not readable"),n("ERR_STREAM_WRITE_AFTER_END","write after end"),n("ERR_STREAM_NULL_VALUES","May not write null values to stream",TypeError),n("ERR_UNKNOWN_ENCODING",(function(e){return"Unknown encoding: "+e}),TypeError),n("ERR_STREAM_UNSHIFT_AFTER_END_EVENT","stream.unshift() after end event"),e.exports.q=t},1033:function(e,t,n){"use strict";var a=n(27061),r=Object.keys||function(e){var t=[];for(var n in e)t.push(n);return t};e.exports=u;var i=n(70767),o=n(14608);n(70087)(u,i);for(var d=r(o.prototype),s=0;s<d.length;s++){var c=d[s];u.prototype[c]||(u.prototype[c]=o.prototype[c])}function u(e){if(!(this instanceof u))return new u(e);i.call(this,e),o.call(this,e),this.allowHalfOpen=!0,e&&(!1===e.readable&&(this.readable=!1),!1===e.writable&&(this.writable=!1),!1===e.allowHalfOpen&&(this.allowHalfOpen=!1,this.once("end",l)))}function l(){this._writableState.ended||a.nextTick(g,this)}function g(e){e.end()}Object.defineProperty(u.prototype,"writableHighWaterMark",{enumerable:!1,get:function(){return this._writableState.highWaterMark}}),Object.defineProperty(u.prototype,"writableBuffer",{enumerable:!1,get:function(){return this._writableState&&this._writableState.getBuffer()}}),Object.defineProperty(u.prototype,"writableLength",{enumerable:!1,get:function(){return this._writableState.length}}),Object.defineProperty(u.prototype,"destroyed",{enumerable:!1,get:function(){return void 0!==this._readableState&&void 0!==this._writableState&&(this._readableState.destroyed&&this._writableState.destroyed)},set:function(e){void 0!==this._readableState&&void 0!==this._writableState&&(this._readableState.destroyed=e,this._writableState.destroyed=e)}})},13546:function(e,t,n){"use strict";e.exports=r;var a=n(42637);function r(e){if(!(this instanceof r))return new r(e);a.call(this,e)}n(70087)(r,a),r.prototype._transform=function(e,t,n){n(null,e)}},70767:function(e,t,n){"use strict";var a,r=n(27061);e.exports=E,E.ReadableState=x;n(50343).EventEmitter;var i=function(e,t){return e.listeners(t).length},o=n(64358),d=n(30816).Buffer,s=(void 0!==n.g?n.g:"undefined"!=typeof window?window:"undefined"!=typeof self?self:{}).Uint8Array||function(){};var c,u=n(3967);c=u&&u.debuglog?u.debuglog("stream"):function(){};var l,g,h,f=n(68049),p=n(49591),m=n(7452).getHighWaterMark,R=n(14004).q,b=R.ERR_INVALID_ARG_TYPE,y=R.ERR_STREAM_PUSH_AFTER_EOF,v=R.ERR_METHOD_NOT_IMPLEMENTED,_=R.ERR_STREAM_UNSHIFT_AFTER_END_EVENT;n(70087)(E,o);var w=p.errorOrDestroy,M=["error","close","destroy","pause","resume"];function x(e,t,r){a=a||n(1033),e=e||{},"boolean"!=typeof r&&(r=t instanceof a),this.objectMode=!!e.objectMode,r&&(this.objectMode=this.objectMode||!!e.readableObjectMode),this.highWaterMark=m(this,e,"readableHighWaterMark",r),this.buffer=new f,this.length=0,this.pipes=null,this.pipesCount=0,this.flowing=null,this.ended=!1,this.endEmitted=!1,this.reading=!1,this.sync=!0,this.needReadable=!1,this.emittedReadable=!1,this.readableListening=!1,this.resumeScheduled=!1,this.paused=!0,this.emitClose=!1!==e.emitClose,this.autoDestroy=!!e.autoDestroy,this.destroyed=!1,this.defaultEncoding=e.defaultEncoding||"utf8",this.awaitDrain=0,this.readingMore=!1,this.decoder=null,this.encoding=null,e.encoding&&(l||(l=n(34361).s),this.decoder=new l(e.encoding),this.encoding=e.encoding)}function E(e){if(a=a||n(1033),!(this instanceof E))return new E(e);var t=this instanceof a;this._readableState=new x(e,this,t),this.readable=!0,e&&("function"==typeof e.read&&(this._read=e.read),"function"==typeof e.destroy&&(this._destroy=e.destroy)),o.call(this)}function S(e,t,n,a,r){c("readableAddChunk",t);var i,o=e._readableState;if(null===t)o.reading=!1,function(e,t){if(c("onEofChunk"),t.ended)return;if(t.decoder){var n=t.decoder.end();n&&n.length&&(t.buffer.push(n),t.length+=t.objectMode?1:n.length)}t.ended=!0,t.sync?A(e):(t.needReadable=!1,t.emittedReadable||(t.emittedReadable=!0,j(e)))}(e,o);else if(r||(i=function(e,t){var n;a=t,d.isBuffer(a)||a instanceof s||"string"==typeof t||void 0===t||e.objectMode||(n=new b("chunk",["string","Buffer","Uint8Array"],t));var a;return n}(o,t)),i)w(e,i);else if(o.objectMode||t&&t.length>0)if("string"==typeof t||o.objectMode||Object.getPrototypeOf(t)===d.prototype||(t=function(e){return d.from(e)}(t)),a)o.endEmitted?w(e,new _):k(e,o,t,!0);else if(o.ended)w(e,new y);else{if(o.destroyed)return!1;o.reading=!1,o.decoder&&!n?(t=o.decoder.write(t),o.objectMode||0!==t.length?k(e,o,t,!1):T(e,o)):k(e,o,t,!1)}else a||(o.reading=!1,T(e,o));return!o.ended&&(o.length<o.highWaterMark||0===o.length)}function k(e,t,n,a){t.flowing&&0===t.length&&!t.sync?(t.awaitDrain=0,e.emit("data",n)):(t.length+=t.objectMode?1:n.length,a?t.buffer.unshift(n):t.buffer.push(n),t.needReadable&&A(e)),T(e,t)}Object.defineProperty(E.prototype,"destroyed",{enumerable:!1,get:function(){return void 0!==this._readableState&&this._readableState.destroyed},set:function(e){this._readableState&&(this._readableState.destroyed=e)}}),E.prototype.destroy=p.destroy,E.prototype._undestroy=p.undestroy,E.prototype._destroy=function(e,t){t(e)},E.prototype.push=function(e,t){var n,a=this._readableState;return a.objectMode?n=!0:"string"==typeof e&&((t=t||a.defaultEncoding)!==a.encoding&&(e=d.from(e,t),t=""),n=!0),S(this,e,t,!1,n)},E.prototype.unshift=function(e){return S(this,e,null,!0,!1)},E.prototype.isPaused=function(){return!1===this._readableState.flowing},E.prototype.setEncoding=function(e){l||(l=n(34361).s);var t=new l(e);this._readableState.decoder=t,this._readableState.encoding=this._readableState.decoder.encoding;for(var a=this._readableState.buffer.head,r="";null!==a;)r+=t.write(a.data),a=a.next;return this._readableState.buffer.clear(),""!==r&&this._readableState.buffer.push(r),this._readableState.length=r.length,this};var N=1073741824;function D(e,t){return e<=0||0===t.length&&t.ended?0:t.objectMode?1:e!=e?t.flowing&&t.length?t.buffer.head.data.length:t.length:(e>t.highWaterMark&&(t.highWaterMark=function(e){return e>=N?e=N:(e--,e|=e>>>1,e|=e>>>2,e|=e>>>4,e|=e>>>8,e|=e>>>16,e++),e}(e)),e<=t.length?e:t.ended?t.length:(t.needReadable=!0,0))}function A(e){var t=e._readableState;c("emitReadable",t.needReadable,t.emittedReadable),t.needReadable=!1,t.emittedReadable||(c("emitReadable",t.flowing),t.emittedReadable=!0,r.nextTick(j,e))}function j(e){var t=e._readableState;c("emitReadable_",t.destroyed,t.length,t.ended),t.destroyed||!t.length&&!t.ended||(e.emit("readable"),t.emittedReadable=!1),t.needReadable=!t.flowing&&!t.ended&&t.length<=t.highWaterMark,P(e)}function T(e,t){t.readingMore||(t.readingMore=!0,r.nextTick(L,e,t))}function L(e,t){for(;!t.reading&&!t.ended&&(t.length<t.highWaterMark||t.flowing&&0===t.length);){var n=t.length;if(c("maybeReadMore read 0"),e.read(0),n===t.length)break}t.readingMore=!1}function I(e){var t=e._readableState;t.readableListening=e.listenerCount("readable")>0,t.resumeScheduled&&!t.paused?t.flowing=!0:e.listenerCount("data")>0&&e.resume()}function C(e){c("readable nexttick read 0"),e.read(0)}function O(e,t){c("resume",t.reading),t.reading||e.read(0),t.resumeScheduled=!1,e.emit("resume"),P(e),t.flowing&&!t.reading&&e.read(0)}function P(e){var t=e._readableState;for(c("flow",t.flowing);t.flowing&&null!==e.read(););}function z(e,t){return 0===t.length?null:(t.objectMode?n=t.buffer.shift():!e||e>=t.length?(n=t.decoder?t.buffer.join(""):1===t.buffer.length?t.buffer.first():t.buffer.concat(t.length),t.buffer.clear()):n=t.buffer.consume(e,t.decoder),n);var n}function B(e){var t=e._readableState;c("endReadable",t.endEmitted),t.endEmitted||(t.ended=!0,r.nextTick(F,t,e))}function F(e,t){if(c("endReadableNT",e.endEmitted,e.length),!e.endEmitted&&0===e.length&&(e.endEmitted=!0,t.readable=!1,t.emit("end"),e.autoDestroy)){var n=t._writableState;(!n||n.autoDestroy&&n.finished)&&t.destroy()}}function U(e,t){for(var n=0,a=e.length;n<a;n++)if(e[n]===t)return n;return-1}E.prototype.read=function(e){c("read",e),e=parseInt(e,10);var t=this._readableState,n=e;if(0!==e&&(t.emittedReadable=!1),0===e&&t.needReadable&&((0!==t.highWaterMark?t.length>=t.highWaterMark:t.length>0)||t.ended))return c("read: emitReadable",t.length,t.ended),0===t.length&&t.ended?B(this):A(this),null;if(0===(e=D(e,t))&&t.ended)return 0===t.length&&B(this),null;var a,r=t.needReadable;return c("need readable",r),(0===t.length||t.length-e<t.highWaterMark)&&c("length less than watermark",r=!0),t.ended||t.reading?c("reading or ended",r=!1):r&&(c("do read"),t.reading=!0,t.sync=!0,0===t.length&&(t.needReadable=!0),this._read(t.highWaterMark),t.sync=!1,t.reading||(e=D(n,t))),null===(a=e>0?z(e,t):null)?(t.needReadable=t.length<=t.highWaterMark,e=0):(t.length-=e,t.awaitDrain=0),0===t.length&&(t.ended||(t.needReadable=!0),n!==e&&t.ended&&B(this)),null!==a&&this.emit("data",a),a},E.prototype._read=function(e){w(this,new v("_read()"))},E.prototype.pipe=function(e,t){var n=this,a=this._readableState;switch(a.pipesCount){case 0:a.pipes=e;break;case 1:a.pipes=[a.pipes,e];break;default:a.pipes.push(e)}a.pipesCount+=1,c("pipe count=%d opts=%j",a.pipesCount,t);var o=(!t||!1!==t.end)&&e!==r.stdout&&e!==r.stderr?s:m;function d(t,r){c("onunpipe"),t===n&&r&&!1===r.hasUnpiped&&(r.hasUnpiped=!0,c("cleanup"),e.removeListener("close",f),e.removeListener("finish",p),e.removeListener("drain",u),e.removeListener("error",h),e.removeListener("unpipe",d),n.removeListener("end",s),n.removeListener("end",m),n.removeListener("data",g),l=!0,!a.awaitDrain||e._writableState&&!e._writableState.needDrain||u())}function s(){c("onend"),e.end()}a.endEmitted?r.nextTick(o):n.once("end",o),e.on("unpipe",d);var u=function(e){return function(){var t=e._readableState;c("pipeOnDrain",t.awaitDrain),t.awaitDrain&&t.awaitDrain--,0===t.awaitDrain&&i(e,"data")&&(t.flowing=!0,P(e))}}(n);e.on("drain",u);var l=!1;function g(t){c("ondata");var r=e.write(t);c("dest.write",r),!1===r&&((1===a.pipesCount&&a.pipes===e||a.pipesCount>1&&-1!==U(a.pipes,e))&&!l&&(c("false write response, pause",a.awaitDrain),a.awaitDrain++),n.pause())}function h(t){c("onerror",t),m(),e.removeListener("error",h),0===i(e,"error")&&w(e,t)}function f(){e.removeListener("finish",p),m()}function p(){c("onfinish"),e.removeListener("close",f),m()}function m(){c("unpipe"),n.unpipe(e)}return n.on("data",g),function(e,t,n){if("function"==typeof e.prependListener)return e.prependListener(t,n);e._events&&e._events[t]?Array.isArray(e._events[t])?e._events[t].unshift(n):e._events[t]=[n,e._events[t]]:e.on(t,n)}(e,"error",h),e.once("close",f),e.once("finish",p),e.emit("pipe",n),a.flowing||(c("pipe resume"),n.resume()),e},E.prototype.unpipe=function(e){var t=this._readableState,n={hasUnpiped:!1};if(0===t.pipesCount)return this;if(1===t.pipesCount)return e&&e!==t.pipes||(e||(e=t.pipes),t.pipes=null,t.pipesCount=0,t.flowing=!1,e&&e.emit("unpipe",this,n)),this;if(!e){var a=t.pipes,r=t.pipesCount;t.pipes=null,t.pipesCount=0,t.flowing=!1;for(var i=0;i<r;i++)a[i].emit("unpipe",this,{hasUnpiped:!1});return this}var o=U(t.pipes,e);return-1===o||(t.pipes.splice(o,1),t.pipesCount-=1,1===t.pipesCount&&(t.pipes=t.pipes[0]),e.emit("unpipe",this,n)),this},E.prototype.on=function(e,t){var n=o.prototype.on.call(this,e,t),a=this._readableState;return"data"===e?(a.readableListening=this.listenerCount("readable")>0,!1!==a.flowing&&this.resume()):"readable"===e&&(a.endEmitted||a.readableListening||(a.readableListening=a.needReadable=!0,a.flowing=!1,a.emittedReadable=!1,c("on readable",a.length,a.reading),a.length?A(this):a.reading||r.nextTick(C,this))),n},E.prototype.addListener=E.prototype.on,E.prototype.removeListener=function(e,t){var n=o.prototype.removeListener.call(this,e,t);return"readable"===e&&r.nextTick(I,this),n},E.prototype.removeAllListeners=function(e){var t=o.prototype.removeAllListeners.apply(this,arguments);return"readable"!==e&&void 0!==e||r.nextTick(I,this),t},E.prototype.resume=function(){var e=this._readableState;return e.flowing||(c("resume"),e.flowing=!e.readableListening,function(e,t){t.resumeScheduled||(t.resumeScheduled=!0,r.nextTick(O,e,t))}(this,e)),e.paused=!1,this},E.prototype.pause=function(){return c("call pause flowing=%j",this._readableState.flowing),!1!==this._readableState.flowing&&(c("pause"),this._readableState.flowing=!1,this.emit("pause")),this._readableState.paused=!0,this},E.prototype.wrap=function(e){var t=this,n=this._readableState,a=!1;for(var r in e.on("end",(function(){if(c("wrapped end"),n.decoder&&!n.ended){var e=n.decoder.end();e&&e.length&&t.push(e)}t.push(null)})),e.on("data",(function(r){(c("wrapped data"),n.decoder&&(r=n.decoder.write(r)),n.objectMode&&null==r)||(n.objectMode||r&&r.length)&&(t.push(r)||(a=!0,e.pause()))})),e)void 0===this[r]&&"function"==typeof e[r]&&(this[r]=function(t){return function(){return e[t].apply(e,arguments)}}(r));for(var i=0;i<M.length;i++)e.on(M[i],this.emit.bind(this,M[i]));return this._read=function(t){c("wrapped _read",t),a&&(a=!1,e.resume())},this},"function"==typeof Symbol&&(E.prototype[Symbol.asyncIterator]=function(){return void 0===g&&(g=n(81519)),g(this)}),Object.defineProperty(E.prototype,"readableHighWaterMark",{enumerable:!1,get:function(){return this._readableState.highWaterMark}}),Object.defineProperty(E.prototype,"readableBuffer",{enumerable:!1,get:function(){return this._readableState&&this._readableState.buffer}}),Object.defineProperty(E.prototype,"readableFlowing",{enumerable:!1,get:function(){return this._readableState.flowing},set:function(e){this._readableState&&(this._readableState.flowing=e)}}),E._fromList=z,Object.defineProperty(E.prototype,"readableLength",{enumerable:!1,get:function(){return this._readableState.length}}),"function"==typeof Symbol&&(E.from=function(e,t){return void 0===h&&(h=n(8727)),h(E,e,t)})},42637:function(e,t,n){"use strict";e.exports=u;var a=n(14004).q,r=a.ERR_METHOD_NOT_IMPLEMENTED,i=a.ERR_MULTIPLE_CALLBACK,o=a.ERR_TRANSFORM_ALREADY_TRANSFORMING,d=a.ERR_TRANSFORM_WITH_LENGTH_0,s=n(1033);function c(e,t){var n=this._transformState;n.transforming=!1;var a=n.writecb;if(null===a)return this.emit("error",new i);n.writechunk=null,n.writecb=null,null!=t&&this.push(t),a(e);var r=this._readableState;r.reading=!1,(r.needReadable||r.length<r.highWaterMark)&&this._read(r.highWaterMark)}function u(e){if(!(this instanceof u))return new u(e);s.call(this,e),this._transformState={afterTransform:c.bind(this),needTransform:!1,transforming:!1,writecb:null,writechunk:null,writeencoding:null},this._readableState.needReadable=!0,this._readableState.sync=!1,e&&("function"==typeof e.transform&&(this._transform=e.transform),"function"==typeof e.flush&&(this._flush=e.flush)),this.on("prefinish",l)}function l(){var e=this;"function"!=typeof this._flush||this._readableState.destroyed?g(this,null,null):this._flush((function(t,n){g(e,t,n)}))}function g(e,t,n){if(t)return e.emit("error",t);if(null!=n&&e.push(n),e._writableState.length)throw new d;if(e._transformState.transforming)throw new o;return e.push(null)}n(70087)(u,s),u.prototype.push=function(e,t){return this._transformState.needTransform=!1,s.prototype.push.call(this,e,t)},u.prototype._transform=function(e,t,n){n(new r("_transform()"))},u.prototype._write=function(e,t,n){var a=this._transformState;if(a.writecb=n,a.writechunk=e,a.writeencoding=t,!a.transforming){var r=this._readableState;(a.needTransform||r.needReadable||r.length<r.highWaterMark)&&this._read(r.highWaterMark)}},u.prototype._read=function(e){var t=this._transformState;null===t.writechunk||t.transforming?t.needTransform=!0:(t.transforming=!0,this._transform(t.writechunk,t.writeencoding,t.afterTransform))},u.prototype._destroy=function(e,t){s.prototype._destroy.call(this,e,(function(e){t(e)}))}},14608:function(e,t,n){"use strict";var a,r=n(27061);function i(e){var t=this;this.next=null,this.entry=null,this.finish=function(){!function(e,t,n){var a=e.entry;e.entry=null;for(;a;){var r=a.callback;t.pendingcb--,r(n),a=a.next}t.corkedRequestsFree.next=e}(t,e)}}e.exports=E,E.WritableState=x;var o={deprecate:n(17451)},d=n(64358),s=n(30816).Buffer,c=(void 0!==n.g?n.g:"undefined"!=typeof window?window:"undefined"!=typeof self?self:{}).Uint8Array||function(){};var u,l=n(49591),g=n(7452).getHighWaterMark,h=n(14004).q,f=h.ERR_INVALID_ARG_TYPE,p=h.ERR_METHOD_NOT_IMPLEMENTED,m=h.ERR_MULTIPLE_CALLBACK,R=h.ERR_STREAM_CANNOT_PIPE,b=h.ERR_STREAM_DESTROYED,y=h.ERR_STREAM_NULL_VALUES,v=h.ERR_STREAM_WRITE_AFTER_END,_=h.ERR_UNKNOWN_ENCODING,w=l.errorOrDestroy;function M(){}function x(e,t,o){a=a||n(1033),e=e||{},"boolean"!=typeof o&&(o=t instanceof a),this.objectMode=!!e.objectMode,o&&(this.objectMode=this.objectMode||!!e.writableObjectMode),this.highWaterMark=g(this,e,"writableHighWaterMark",o),this.finalCalled=!1,this.needDrain=!1,this.ending=!1,this.ended=!1,this.finished=!1,this.destroyed=!1;var d=!1===e.decodeStrings;this.decodeStrings=!d,this.defaultEncoding=e.defaultEncoding||"utf8",this.length=0,this.writing=!1,this.corked=0,this.sync=!0,this.bufferProcessing=!1,this.onwrite=function(e){!function(e,t){var n=e._writableState,a=n.sync,i=n.writecb;if("function"!=typeof i)throw new m;if(function(e){e.writing=!1,e.writecb=null,e.length-=e.writelen,e.writelen=0}(n),t)!function(e,t,n,a,i){--t.pendingcb,n?(r.nextTick(i,a),r.nextTick(j,e,t),e._writableState.errorEmitted=!0,w(e,a)):(i(a),e._writableState.errorEmitted=!0,w(e,a),j(e,t))}(e,n,a,t,i);else{var o=D(n)||e.destroyed;o||n.corked||n.bufferProcessing||!n.bufferedRequest||N(e,n),a?r.nextTick(k,e,n,o,i):k(e,n,o,i)}}(t,e)},this.writecb=null,this.writelen=0,this.bufferedRequest=null,this.lastBufferedRequest=null,this.pendingcb=0,this.prefinished=!1,this.errorEmitted=!1,this.emitClose=!1!==e.emitClose,this.autoDestroy=!!e.autoDestroy,this.bufferedRequestCount=0,this.corkedRequestsFree=new i(this)}function E(e){var t=this instanceof(a=a||n(1033));if(!t&&!u.call(E,this))return new E(e);this._writableState=new x(e,this,t),this.writable=!0,e&&("function"==typeof e.write&&(this._write=e.write),"function"==typeof e.writev&&(this._writev=e.writev),"function"==typeof e.destroy&&(this._destroy=e.destroy),"function"==typeof e.final&&(this._final=e.final)),d.call(this)}function S(e,t,n,a,r,i,o){t.writelen=a,t.writecb=o,t.writing=!0,t.sync=!0,t.destroyed?t.onwrite(new b("write")):n?e._writev(r,t.onwrite):e._write(r,i,t.onwrite),t.sync=!1}function k(e,t,n,a){n||function(e,t){0===t.length&&t.needDrain&&(t.needDrain=!1,e.emit("drain"))}(e,t),t.pendingcb--,a(),j(e,t)}function N(e,t){t.bufferProcessing=!0;var n=t.bufferedRequest;if(e._writev&&n&&n.next){var a=t.bufferedRequestCount,r=new Array(a),o=t.corkedRequestsFree;o.entry=n;for(var d=0,s=!0;n;)r[d]=n,n.isBuf||(s=!1),n=n.next,d+=1;r.allBuffers=s,S(e,t,!0,t.length,r,"",o.finish),t.pendingcb++,t.lastBufferedRequest=null,o.next?(t.corkedRequestsFree=o.next,o.next=null):t.corkedRequestsFree=new i(t),t.bufferedRequestCount=0}else{for(;n;){var c=n.chunk,u=n.encoding,l=n.callback;if(S(e,t,!1,t.objectMode?1:c.length,c,u,l),n=n.next,t.bufferedRequestCount--,t.writing)break}null===n&&(t.lastBufferedRequest=null)}t.bufferedRequest=n,t.bufferProcessing=!1}function D(e){return e.ending&&0===e.length&&null===e.bufferedRequest&&!e.finished&&!e.writing}function A(e,t){e._final((function(n){t.pendingcb--,n&&w(e,n),t.prefinished=!0,e.emit("prefinish"),j(e,t)}))}function j(e,t){var n=D(t);if(n&&(function(e,t){t.prefinished||t.finalCalled||("function"!=typeof e._final||t.destroyed?(t.prefinished=!0,e.emit("prefinish")):(t.pendingcb++,t.finalCalled=!0,r.nextTick(A,e,t)))}(e,t),0===t.pendingcb&&(t.finished=!0,e.emit("finish"),t.autoDestroy))){var a=e._readableState;(!a||a.autoDestroy&&a.endEmitted)&&e.destroy()}return n}n(70087)(E,d),x.prototype.getBuffer=function(){for(var e=this.bufferedRequest,t=[];e;)t.push(e),e=e.next;return t},function(){try{Object.defineProperty(x.prototype,"buffer",{get:o.deprecate((function(){return this.getBuffer()}),"_writableState.buffer is deprecated. Use _writableState.getBuffer instead.","DEP0003")})}catch(e){}}(),"function"==typeof Symbol&&Symbol.hasInstance&&"function"==typeof Function.prototype[Symbol.hasInstance]?(u=Function.prototype[Symbol.hasInstance],Object.defineProperty(E,Symbol.hasInstance,{value:function(e){return!!u.call(this,e)||this===E&&(e&&e._writableState instanceof x)}})):u=function(e){return e instanceof this},E.prototype.pipe=function(){w(this,new R)},E.prototype.write=function(e,t,n){var a,i=this._writableState,o=!1,d=!i.objectMode&&(a=e,s.isBuffer(a)||a instanceof c);return d&&!s.isBuffer(e)&&(e=function(e){return s.from(e)}(e)),"function"==typeof t&&(n=t,t=null),d?t="buffer":t||(t=i.defaultEncoding),"function"!=typeof n&&(n=M),i.ending?function(e,t){var n=new v;w(e,n),r.nextTick(t,n)}(this,n):(d||function(e,t,n,a){var i;return null===n?i=new y:"string"==typeof n||t.objectMode||(i=new f("chunk",["string","Buffer"],n)),!i||(w(e,i),r.nextTick(a,i),!1)}(this,i,e,n))&&(i.pendingcb++,o=function(e,t,n,a,r,i){if(!n){var o=function(e,t,n){e.objectMode||!1===e.decodeStrings||"string"!=typeof t||(t=s.from(t,n));return t}(t,a,r);a!==o&&(n=!0,r="buffer",a=o)}var d=t.objectMode?1:a.length;t.length+=d;var c=t.length<t.highWaterMark;c||(t.needDrain=!0);if(t.writing||t.corked){var u=t.lastBufferedRequest;t.lastBufferedRequest={chunk:a,encoding:r,isBuf:n,callback:i,next:null},u?u.next=t.lastBufferedRequest:t.bufferedRequest=t.lastBufferedRequest,t.bufferedRequestCount+=1}else S(e,t,!1,d,a,r,i);return c}(this,i,d,e,t,n)),o},E.prototype.cork=function(){this._writableState.corked++},E.prototype.uncork=function(){var e=this._writableState;e.corked&&(e.corked--,e.writing||e.corked||e.bufferProcessing||!e.bufferedRequest||N(this,e))},E.prototype.setDefaultEncoding=function(e){if("string"==typeof e&&(e=e.toLowerCase()),!(["hex","utf8","utf-8","ascii","binary","base64","ucs2","ucs-2","utf16le","utf-16le","raw"].indexOf((e+"").toLowerCase())>-1))throw new _(e);return this._writableState.defaultEncoding=e,this},Object.defineProperty(E.prototype,"writableBuffer",{enumerable:!1,get:function(){return this._writableState&&this._writableState.getBuffer()}}),Object.defineProperty(E.prototype,"writableHighWaterMark",{enumerable:!1,get:function(){return this._writableState.highWaterMark}}),E.prototype._write=function(e,t,n){n(new p("_write()"))},E.prototype._writev=null,E.prototype.end=function(e,t,n){var a=this._writableState;return"function"==typeof e?(n=e,e=null,t=null):"function"==typeof t&&(n=t,t=null),null!=e&&this.write(e,t),a.corked&&(a.corked=1,this.uncork()),a.ending||function(e,t,n){t.ending=!0,j(e,t),n&&(t.finished?r.nextTick(n):e.once("finish",n));t.ended=!0,e.writable=!1}(this,a,n),this},Object.defineProperty(E.prototype,"writableLength",{enumerable:!1,get:function(){return this._writableState.length}}),Object.defineProperty(E.prototype,"destroyed",{enumerable:!1,get:function(){return void 0!==this._writableState&&this._writableState.destroyed},set:function(e){this._writableState&&(this._writableState.destroyed=e)}}),E.prototype.destroy=l.destroy,E.prototype._undestroy=l.undestroy,E.prototype._destroy=function(e,t){t(e)}},81519:function(e,t,n){"use strict";var a,r=n(27061);function i(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var a=n.call(e,t||"default");if("object"!=typeof a)return a;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var o=n(24413),d=Symbol("lastResolve"),s=Symbol("lastReject"),c=Symbol("error"),u=Symbol("ended"),l=Symbol("lastPromise"),g=Symbol("handlePromise"),h=Symbol("stream");function f(e,t){return{value:e,done:t}}function p(e){var t=e[d];if(null!==t){var n=e[h].read();null!==n&&(e[l]=null,e[d]=null,e[s]=null,t(f(n,!1)))}}function m(e){r.nextTick(p,e)}var R=Object.getPrototypeOf((function(){})),b=Object.setPrototypeOf((i(a={get stream(){return this[h]},next:function(){var e=this,t=this[c];if(null!==t)return Promise.reject(t);if(this[u])return Promise.resolve(f(void 0,!0));if(this[h].destroyed)return new Promise((function(t,n){r.nextTick((function(){e[c]?n(e[c]):t(f(void 0,!0))}))}));var n,a=this[l];if(a)n=new Promise(function(e,t){return function(n,a){e.then((function(){t[u]?n(f(void 0,!0)):t[g](n,a)}),a)}}(a,this));else{var i=this[h].read();if(null!==i)return Promise.resolve(f(i,!1));n=new Promise(this[g])}return this[l]=n,n}},Symbol.asyncIterator,(function(){return this})),i(a,"return",(function(){var e=this;return new Promise((function(t,n){e[h].destroy(null,(function(e){e?n(e):t(f(void 0,!0))}))}))})),a),R);e.exports=function(e){var t,n=Object.create(b,(i(t={},h,{value:e,writable:!0}),i(t,d,{value:null,writable:!0}),i(t,s,{value:null,writable:!0}),i(t,c,{value:null,writable:!0}),i(t,u,{value:e._readableState.endEmitted,writable:!0}),i(t,g,{value:function(e,t){var a=n[h].read();a?(n[l]=null,n[d]=null,n[s]=null,e(f(a,!1))):(n[d]=e,n[s]=t)},writable:!0}),t));return n[l]=null,o(e,(function(e){if(e&&"ERR_STREAM_PREMATURE_CLOSE"!==e.code){var t=n[s];return null!==t&&(n[l]=null,n[d]=null,n[s]=null,t(e)),void(n[c]=e)}var a=n[d];null!==a&&(n[l]=null,n[d]=null,n[s]=null,a(f(void 0,!0))),n[u]=!0})),e.on("readable",m.bind(null,n)),n}},68049:function(e,t,n){"use strict";function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function r(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function i(e,t,n){return(t=d(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,d(a.key),a)}}function d(e){var t=function(e,t){if("object"!=typeof e||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var a=n.call(e,t||"default");if("object"!=typeof a)return a;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:String(t)}var s=n(30816).Buffer,c=n(24318).inspect,u=c&&c.custom||"inspect";e.exports=function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.head=null,this.tail=null,this.length=0}var t,n,a;return t=e,(n=[{key:"push",value:function(e){var t={data:e,next:null};this.length>0?this.tail.next=t:this.head=t,this.tail=t,++this.length}},{key:"unshift",value:function(e){var t={data:e,next:this.head};0===this.length&&(this.tail=t),this.head=t,++this.length}},{key:"shift",value:function(){if(0!==this.length){var e=this.head.data;return 1===this.length?this.head=this.tail=null:this.head=this.head.next,--this.length,e}}},{key:"clear",value:function(){this.head=this.tail=null,this.length=0}},{key:"join",value:function(e){if(0===this.length)return"";for(var t=this.head,n=""+t.data;t=t.next;)n+=e+t.data;return n}},{key:"concat",value:function(e){if(0===this.length)return s.alloc(0);for(var t,n,a,r=s.allocUnsafe(e>>>0),i=this.head,o=0;i;)t=i.data,n=r,a=o,s.prototype.copy.call(t,n,a),o+=i.data.length,i=i.next;return r}},{key:"consume",value:function(e,t){var n;return e<this.head.data.length?(n=this.head.data.slice(0,e),this.head.data=this.head.data.slice(e)):n=e===this.head.data.length?this.shift():t?this._getString(e):this._getBuffer(e),n}},{key:"first",value:function(){return this.head.data}},{key:"_getString",value:function(e){var t=this.head,n=1,a=t.data;for(e-=a.length;t=t.next;){var r=t.data,i=e>r.length?r.length:e;if(i===r.length?a+=r:a+=r.slice(0,e),0==(e-=i)){i===r.length?(++n,t.next?this.head=t.next:this.head=this.tail=null):(this.head=t,t.data=r.slice(i));break}++n}return this.length-=n,a}},{key:"_getBuffer",value:function(e){var t=s.allocUnsafe(e),n=this.head,a=1;for(n.data.copy(t),e-=n.data.length;n=n.next;){var r=n.data,i=e>r.length?r.length:e;if(r.copy(t,t.length-e,0,i),0==(e-=i)){i===r.length?(++a,n.next?this.head=n.next:this.head=this.tail=null):(this.head=n,n.data=r.slice(i));break}++a}return this.length-=a,t}},{key:u,value:function(e,t){return c(this,r(r({},t),{},{depth:0,customInspect:!1}))}}])&&o(t.prototype,n),a&&o(t,a),Object.defineProperty(t,"prototype",{writable:!1}),e}()},49591:function(e,t,n){"use strict";var a=n(27061);function r(e,t){o(e,t),i(e)}function i(e){e._writableState&&!e._writableState.emitClose||e._readableState&&!e._readableState.emitClose||e.emit("close")}function o(e,t){e.emit("error",t)}e.exports={destroy:function(e,t){var n=this,d=this._readableState&&this._readableState.destroyed,s=this._writableState&&this._writableState.destroyed;return d||s?(t?t(e):e&&(this._writableState?this._writableState.errorEmitted||(this._writableState.errorEmitted=!0,a.nextTick(o,this,e)):a.nextTick(o,this,e)),this):(this._readableState&&(this._readableState.destroyed=!0),this._writableState&&(this._writableState.destroyed=!0),this._destroy(e||null,(function(e){!t&&e?n._writableState?n._writableState.errorEmitted?a.nextTick(i,n):(n._writableState.errorEmitted=!0,a.nextTick(r,n,e)):a.nextTick(r,n,e):t?(a.nextTick(i,n),t(e)):a.nextTick(i,n)})),this)},undestroy:function(){this._readableState&&(this._readableState.destroyed=!1,this._readableState.reading=!1,this._readableState.ended=!1,this._readableState.endEmitted=!1),this._writableState&&(this._writableState.destroyed=!1,this._writableState.ended=!1,this._writableState.ending=!1,this._writableState.finalCalled=!1,this._writableState.prefinished=!1,this._writableState.finished=!1,this._writableState.errorEmitted=!1)},errorOrDestroy:function(e,t){var n=e._readableState,a=e._writableState;n&&n.autoDestroy||a&&a.autoDestroy?e.destroy(t):e.emit("error",t)}}},24413:function(e,t,n){"use strict";var a=n(14004).q.ERR_STREAM_PREMATURE_CLOSE;function r(){}e.exports=function e(t,n,i){if("function"==typeof n)return e(t,null,n);n||(n={}),i=function(e){var t=!1;return function(){if(!t){t=!0;for(var n=arguments.length,a=new Array(n),r=0;r<n;r++)a[r]=arguments[r];e.apply(this,a)}}}(i||r);var o=n.readable||!1!==n.readable&&t.readable,d=n.writable||!1!==n.writable&&t.writable,s=function(){t.writable||u()},c=t._writableState&&t._writableState.finished,u=function(){d=!1,c=!0,o||i.call(t)},l=t._readableState&&t._readableState.endEmitted,g=function(){o=!1,l=!0,d||i.call(t)},h=function(e){i.call(t,e)},f=function(){var e;return o&&!l?(t._readableState&&t._readableState.ended||(e=new a),i.call(t,e)):d&&!c?(t._writableState&&t._writableState.ended||(e=new a),i.call(t,e)):void 0},p=function(){t.req.on("finish",u)};return!function(e){return e.setHeader&&"function"==typeof e.abort}(t)?d&&!t._writableState&&(t.on("end",s),t.on("close",s)):(t.on("complete",u),t.on("abort",f),t.req?p():t.on("request",p)),t.on("end",g),t.on("finish",u),!1!==n.error&&t.on("error",h),t.on("close",f),function(){t.removeListener("complete",u),t.removeListener("abort",f),t.removeListener("request",p),t.req&&t.req.removeListener("finish",u),t.removeListener("end",s),t.removeListener("close",s),t.removeListener("finish",u),t.removeListener("end",g),t.removeListener("error",h),t.removeListener("close",f)}}},8727:function(e){e.exports=function(){throw new Error("Readable.from is not available in the browser")}},59638:function(e,t,n){"use strict";var a;var r=n(14004).q,i=r.ERR_MISSING_ARGS,o=r.ERR_STREAM_DESTROYED;function d(e){if(e)throw e}function s(e){e()}function c(e,t){return e.pipe(t)}e.exports=function(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];var u,l=function(e){return e.length?"function"!=typeof e[e.length-1]?d:e.pop():d}(t);if(Array.isArray(t[0])&&(t=t[0]),t.length<2)throw new i("streams");var g=t.map((function(e,r){var i=r<t.length-1;return function(e,t,r,i){i=function(e){var t=!1;return function(){t||(t=!0,e.apply(void 0,arguments))}}(i);var d=!1;e.on("close",(function(){d=!0})),void 0===a&&(a=n(24413)),a(e,{readable:t,writable:r},(function(e){if(e)return i(e);d=!0,i()}));var s=!1;return function(t){if(!d&&!s)return s=!0,function(e){return e.setHeader&&"function"==typeof e.abort}(e)?e.abort():"function"==typeof e.destroy?e.destroy():void i(t||new o("pipe"))}}(e,i,r>0,(function(e){u||(u=e),e&&g.forEach(s),i||(g.forEach(s),l(u))}))}));return t.reduce(c)}},7452:function(e,t,n){"use strict";var a=n(14004).q.ERR_INVALID_OPT_VALUE;e.exports={getHighWaterMark:function(e,t,n,r){var i=function(e,t,n){return null!=e.highWaterMark?e.highWaterMark:t?e[n]:null}(t,r,n);if(null!=i){if(!isFinite(i)||Math.floor(i)!==i||i<0)throw new a(r?n:"highWaterMark",i);return Math.floor(i)}return e.objectMode?16:16384}}},64358:function(e,t,n){e.exports=n(50343).EventEmitter},51457:function(e,t,n){(t=e.exports=n(70767)).Stream=t,t.Readable=t,t.Writable=n(14608),t.Duplex=n(1033),t.Transform=n(42637),t.PassThrough=n(13546),t.finished=n(24413),t.pipeline=n(59638)},35294:function(e,t,n){var a=t;a.utils=n(88626),a.common=n(38717),a.sha=n(92589),a.ripemd=n(28494),a.hmac=n(82750),a.sha1=a.sha.sha1,a.sha256=a.sha.sha256,a.sha224=a.sha.sha224,a.sha384=a.sha.sha384,a.sha512=a.sha.sha512,a.ripemd160=a.ripemd.ripemd160},38717:function(e,t,n){"use strict";var a=n(88626),r=n(77859);function i(){this.pending=null,this.pendingTotal=0,this.blockSize=this.constructor.blockSize,this.outSize=this.constructor.outSize,this.hmacStrength=this.constructor.hmacStrength,this.padLength=this.constructor.padLength/8,this.endian="big",this._delta8=this.blockSize/8,this._delta32=this.blockSize/32}t.BlockHash=i,i.prototype.update=function(e,t){if(e=a.toArray(e,t),this.pending?this.pending=this.pending.concat(e):this.pending=e,this.pendingTotal+=e.length,this.pending.length>=this._delta8){var n=(e=this.pending).length%this._delta8;this.pending=e.slice(e.length-n,e.length),0===this.pending.length&&(this.pending=null),e=a.join32(e,0,e.length-n,this.endian);for(var r=0;r<e.length;r+=this._delta32)this._update(e,r,r+this._delta32)}return this},i.prototype.digest=function(e){return this.update(this._pad()),r(null===this.pending),this._digest(e)},i.prototype._pad=function(){var e=this.pendingTotal,t=this._delta8,n=t-(e+this.padLength)%t,a=new Array(n+this.padLength);a[0]=128;for(var r=1;r<n;r++)a[r]=0;if(e<<=3,"big"===this.endian){for(var i=8;i<this.padLength;i++)a[r++]=0;a[r++]=0,a[r++]=0,a[r++]=0,a[r++]=0,a[r++]=e>>>24&255,a[r++]=e>>>16&255,a[r++]=e>>>8&255,a[r++]=255&e}else for(a[r++]=255&e,a[r++]=e>>>8&255,a[r++]=e>>>16&255,a[r++]=e>>>24&255,a[r++]=0,a[r++]=0,a[r++]=0,a[r++]=0,i=8;i<this.padLength;i++)a[r++]=0;return a}},82750:function(e,t,n){"use strict";var a=n(88626),r=n(77859);function i(e,t,n){if(!(this instanceof i))return new i(e,t,n);this.Hash=e,this.blockSize=e.blockSize/8,this.outSize=e.outSize/8,this.inner=null,this.outer=null,this._init(a.toArray(t,n))}e.exports=i,i.prototype._init=function(e){e.length>this.blockSize&&(e=(new this.Hash).update(e).digest()),r(e.length<=this.blockSize);for(var t=e.length;t<this.blockSize;t++)e.push(0);for(t=0;t<e.length;t++)e[t]^=54;for(this.inner=(new this.Hash).update(e),t=0;t<e.length;t++)e[t]^=106;this.outer=(new this.Hash).update(e)},i.prototype.update=function(e,t){return this.inner.update(e,t),this},i.prototype.digest=function(e){return this.outer.update(this.inner.digest()),this.outer.digest(e)}},28494:function(e,t,n){"use strict";var a=n(88626),r=n(38717),i=a.rotl32,o=a.sum32,d=a.sum32_3,s=a.sum32_4,c=r.BlockHash;function u(){if(!(this instanceof u))return new u;c.call(this),this.h=[1732584193,4023233417,2562383102,271733878,3285377520],this.endian="little"}function l(e,t,n,a){return e<=15?t^n^a:e<=31?t&n|~t&a:e<=47?(t|~n)^a:e<=63?t&a|n&~a:t^(n|~a)}function g(e){return e<=15?0:e<=31?1518500249:e<=47?1859775393:e<=63?2400959708:2840853838}function h(e){return e<=15?1352829926:e<=31?1548603684:e<=47?1836072691:e<=63?2053994217:0}a.inherits(u,c),t.ripemd160=u,u.blockSize=512,u.outSize=160,u.hmacStrength=192,u.padLength=64,u.prototype._update=function(e,t){for(var n=this.h[0],a=this.h[1],r=this.h[2],c=this.h[3],u=this.h[4],b=n,y=a,v=r,_=c,w=u,M=0;M<80;M++){var x=o(i(s(n,l(M,a,r,c),e[f[M]+t],g(M)),m[M]),u);n=u,u=c,c=i(r,10),r=a,a=x,x=o(i(s(b,l(79-M,y,v,_),e[p[M]+t],h(M)),R[M]),w),b=w,w=_,_=i(v,10),v=y,y=x}x=d(this.h[1],r,_),this.h[1]=d(this.h[2],c,w),this.h[2]=d(this.h[3],u,b),this.h[3]=d(this.h[4],n,y),this.h[4]=d(this.h[0],a,v),this.h[0]=x},u.prototype._digest=function(e){return"hex"===e?a.toHex32(this.h,"little"):a.split32(this.h,"little")};var f=[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,7,4,13,1,10,6,15,3,12,0,9,5,2,14,11,8,3,10,14,4,9,15,8,1,2,7,0,6,13,11,5,12,1,9,11,10,0,8,12,4,13,3,7,15,14,5,6,2,4,0,5,9,7,12,2,10,14,1,3,8,11,6,15,13],p=[5,14,7,0,9,2,11,4,13,6,15,8,1,10,3,12,6,11,3,7,0,13,5,10,14,15,8,12,4,9,1,2,15,5,1,3,7,14,6,9,11,8,12,2,10,0,4,13,8,6,4,1,3,11,15,0,5,12,2,13,9,7,10,14,12,15,10,4,1,5,8,7,6,2,13,14,0,3,9,11],m=[11,14,15,12,5,8,7,9,11,13,14,15,6,7,9,8,7,6,8,13,11,9,7,15,7,12,15,9,11,7,13,12,11,13,6,7,14,9,13,15,14,8,13,6,5,12,7,5,11,12,14,15,14,15,9,8,9,14,5,6,8,6,5,12,9,15,5,11,6,8,13,12,5,12,13,14,11,8,5,6],R=[8,9,9,11,13,15,15,5,7,7,8,11,14,14,12,6,9,13,15,7,12,8,9,11,7,7,12,7,6,15,13,11,9,7,15,11,8,6,6,14,12,13,5,14,13,13,7,5,15,5,8,11,14,14,6,14,6,9,12,9,12,5,15,8,8,5,12,9,12,5,14,6,8,13,6,5,15,13,11,11]},92589:function(e,t,n){"use strict";t.sha1=n(39330),t.sha224=n(45168),t.sha256=n(10375),t.sha384=n(28899),t.sha512=n(10790)},39330:function(e,t,n){"use strict";var a=n(88626),r=n(38717),i=n(98156),o=a.rotl32,d=a.sum32,s=a.sum32_5,c=i.ft_1,u=r.BlockHash,l=[1518500249,1859775393,2400959708,3395469782];function g(){if(!(this instanceof g))return new g;u.call(this),this.h=[1732584193,4023233417,2562383102,271733878,3285377520],this.W=new Array(80)}a.inherits(g,u),e.exports=g,g.blockSize=512,g.outSize=160,g.hmacStrength=80,g.padLength=64,g.prototype._update=function(e,t){for(var n=this.W,a=0;a<16;a++)n[a]=e[t+a];for(;a<n.length;a++)n[a]=o(n[a-3]^n[a-8]^n[a-14]^n[a-16],1);var r=this.h[0],i=this.h[1],u=this.h[2],g=this.h[3],h=this.h[4];for(a=0;a<n.length;a++){var f=~~(a/20),p=s(o(r,5),c(f,i,u,g),h,n[a],l[f]);h=g,g=u,u=o(i,30),i=r,r=p}this.h[0]=d(this.h[0],r),this.h[1]=d(this.h[1],i),this.h[2]=d(this.h[2],u),this.h[3]=d(this.h[3],g),this.h[4]=d(this.h[4],h)},g.prototype._digest=function(e){return"hex"===e?a.toHex32(this.h,"big"):a.split32(this.h,"big")}},45168:function(e,t,n){"use strict";var a=n(88626),r=n(10375);function i(){if(!(this instanceof i))return new i;r.call(this),this.h=[3238371032,914150663,812702999,4144912697,4290775857,1750603025,1694076839,3204075428]}a.inherits(i,r),e.exports=i,i.blockSize=512,i.outSize=224,i.hmacStrength=192,i.padLength=64,i.prototype._digest=function(e){return"hex"===e?a.toHex32(this.h.slice(0,7),"big"):a.split32(this.h.slice(0,7),"big")}},10375:function(e,t,n){"use strict";var a=n(88626),r=n(38717),i=n(98156),o=n(77859),d=a.sum32,s=a.sum32_4,c=a.sum32_5,u=i.ch32,l=i.maj32,g=i.s0_256,h=i.s1_256,f=i.g0_256,p=i.g1_256,m=r.BlockHash,R=[1116352408,1899447441,3049323471,3921009573,961987163,1508970993,2453635748,2870763221,3624381080,310598401,607225278,1426881987,1925078388,2162078206,2614888103,3248222580,3835390401,4022224774,264347078,604807628,770255983,1249150122,1555081692,1996064986,2554220882,2821834349,2952996808,3210313671,3336571891,3584528711,113926993,338241895,666307205,773529912,1294757372,1396182291,1695183700,1986661051,2177026350,2456956037,2730485921,2820302411,3259730800,3345764771,3516065817,3600352804,4094571909,275423344,430227734,506948616,659060556,883997877,958139571,1322822218,1537002063,1747873779,1955562222,2024104815,2227730452,2361852424,2428436474,2756734187,3204031479,3329325298];function b(){if(!(this instanceof b))return new b;m.call(this),this.h=[1779033703,3144134277,1013904242,2773480762,1359893119,2600822924,528734635,1541459225],this.k=R,this.W=new Array(64)}a.inherits(b,m),e.exports=b,b.blockSize=512,b.outSize=256,b.hmacStrength=192,b.padLength=64,b.prototype._update=function(e,t){for(var n=this.W,a=0;a<16;a++)n[a]=e[t+a];for(;a<n.length;a++)n[a]=s(p(n[a-2]),n[a-7],f(n[a-15]),n[a-16]);var r=this.h[0],i=this.h[1],m=this.h[2],R=this.h[3],b=this.h[4],y=this.h[5],v=this.h[6],_=this.h[7];for(o(this.k.length===n.length),a=0;a<n.length;a++){var w=c(_,h(b),u(b,y,v),this.k[a],n[a]),M=d(g(r),l(r,i,m));_=v,v=y,y=b,b=d(R,w),R=m,m=i,i=r,r=d(w,M)}this.h[0]=d(this.h[0],r),this.h[1]=d(this.h[1],i),this.h[2]=d(this.h[2],m),this.h[3]=d(this.h[3],R),this.h[4]=d(this.h[4],b),this.h[5]=d(this.h[5],y),this.h[6]=d(this.h[6],v),this.h[7]=d(this.h[7],_)},b.prototype._digest=function(e){return"hex"===e?a.toHex32(this.h,"big"):a.split32(this.h,"big")}},28899:function(e,t,n){"use strict";var a=n(88626),r=n(10790);function i(){if(!(this instanceof i))return new i;r.call(this),this.h=[3418070365,3238371032,1654270250,914150663,2438529370,812702999,355462360,4144912697,1731405415,4290775857,2394180231,1750603025,3675008525,1694076839,1203062813,3204075428]}a.inherits(i,r),e.exports=i,i.blockSize=1024,i.outSize=384,i.hmacStrength=192,i.padLength=128,i.prototype._digest=function(e){return"hex"===e?a.toHex32(this.h.slice(0,12),"big"):a.split32(this.h.slice(0,12),"big")}},10790:function(e,t,n){"use strict";var a=n(88626),r=n(38717),i=n(77859),o=a.rotr64_hi,d=a.rotr64_lo,s=a.shr64_hi,c=a.shr64_lo,u=a.sum64,l=a.sum64_hi,g=a.sum64_lo,h=a.sum64_4_hi,f=a.sum64_4_lo,p=a.sum64_5_hi,m=a.sum64_5_lo,R=r.BlockHash,b=[1116352408,3609767458,1899447441,602891725,3049323471,3964484399,3921009573,2173295548,961987163,4081628472,1508970993,3053834265,2453635748,2937671579,2870763221,3664609560,3624381080,2734883394,310598401,1164996542,607225278,1323610764,1426881987,3590304994,1925078388,4068182383,2162078206,991336113,2614888103,633803317,3248222580,3479774868,3835390401,2666613458,4022224774,944711139,264347078,2341262773,604807628,2007800933,770255983,1495990901,1249150122,1856431235,1555081692,3175218132,1996064986,2198950837,2554220882,3999719339,2821834349,766784016,2952996808,2566594879,3210313671,3203337956,3336571891,1034457026,3584528711,2466948901,113926993,3758326383,338241895,168717936,666307205,1188179964,773529912,1546045734,1294757372,1522805485,1396182291,2643833823,1695183700,2343527390,1986661051,1014477480,2177026350,1206759142,2456956037,344077627,2730485921,1290863460,2820302411,3158454273,3259730800,3505952657,3345764771,106217008,3516065817,3606008344,3600352804,1432725776,4094571909,1467031594,275423344,851169720,430227734,3100823752,506948616,1363258195,659060556,3750685593,883997877,3785050280,958139571,3318307427,1322822218,3812723403,1537002063,2003034995,1747873779,3602036899,1955562222,1575990012,2024104815,1125592928,2227730452,2716904306,2361852424,442776044,2428436474,593698344,2756734187,3733110249,3204031479,2999351573,3329325298,3815920427,3391569614,3928383900,3515267271,566280711,3940187606,3454069534,4118630271,4000239992,116418474,1914138554,174292421,2731055270,289380356,3203993006,460393269,320620315,685471733,587496836,852142971,1086792851,1017036298,365543100,1126000580,2618297676,1288033470,3409855158,1501505948,4234509866,1607167915,987167468,1816402316,1246189591];function y(){if(!(this instanceof y))return new y;R.call(this),this.h=[1779033703,4089235720,3144134277,2227873595,1013904242,4271175723,2773480762,1595750129,1359893119,2917565137,2600822924,725511199,528734635,4215389547,1541459225,327033209],this.k=b,this.W=new Array(160)}function v(e,t,n,a,r){var i=e&n^~e&r;return i<0&&(i+=4294967296),i}function _(e,t,n,a,r,i){var o=t&a^~t&i;return o<0&&(o+=4294967296),o}function w(e,t,n,a,r){var i=e&n^e&r^n&r;return i<0&&(i+=4294967296),i}function M(e,t,n,a,r,i){var o=t&a^t&i^a&i;return o<0&&(o+=4294967296),o}function x(e,t){var n=o(e,t,28)^o(t,e,2)^o(t,e,7);return n<0&&(n+=4294967296),n}function E(e,t){var n=d(e,t,28)^d(t,e,2)^d(t,e,7);return n<0&&(n+=4294967296),n}function S(e,t){var n=o(e,t,14)^o(e,t,18)^o(t,e,9);return n<0&&(n+=4294967296),n}function k(e,t){var n=d(e,t,14)^d(e,t,18)^d(t,e,9);return n<0&&(n+=4294967296),n}function N(e,t){var n=o(e,t,1)^o(e,t,8)^s(e,t,7);return n<0&&(n+=4294967296),n}function D(e,t){var n=d(e,t,1)^d(e,t,8)^c(e,t,7);return n<0&&(n+=4294967296),n}function A(e,t){var n=o(e,t,19)^o(t,e,29)^s(e,t,6);return n<0&&(n+=4294967296),n}function j(e,t){var n=d(e,t,19)^d(t,e,29)^c(e,t,6);return n<0&&(n+=4294967296),n}a.inherits(y,R),e.exports=y,y.blockSize=1024,y.outSize=512,y.hmacStrength=192,y.padLength=128,y.prototype._prepareBlock=function(e,t){for(var n=this.W,a=0;a<32;a++)n[a]=e[t+a];for(;a<n.length;a+=2){var r=A(n[a-4],n[a-3]),i=j(n[a-4],n[a-3]),o=n[a-14],d=n[a-13],s=N(n[a-30],n[a-29]),c=D(n[a-30],n[a-29]),u=n[a-32],l=n[a-31];n[a]=h(r,i,o,d,s,c,u,l),n[a+1]=f(r,i,o,d,s,c,u,l)}},y.prototype._update=function(e,t){this._prepareBlock(e,t);var n=this.W,a=this.h[0],r=this.h[1],o=this.h[2],d=this.h[3],s=this.h[4],c=this.h[5],h=this.h[6],f=this.h[7],R=this.h[8],b=this.h[9],y=this.h[10],N=this.h[11],D=this.h[12],A=this.h[13],j=this.h[14],T=this.h[15];i(this.k.length===n.length);for(var L=0;L<n.length;L+=2){var I=j,C=T,O=S(R,b),P=k(R,b),z=v(R,b,y,N,D),B=_(R,b,y,N,D,A),F=this.k[L],U=this.k[L+1],$=n[L],H=n[L+1],q=p(I,C,O,P,z,B,F,U,$,H),Y=m(I,C,O,P,z,B,F,U,$,H);I=x(a,r),C=E(a,r),O=w(a,r,o,d,s),P=M(a,r,o,d,s,c);var G=l(I,C,O,P),V=g(I,C,O,P);j=D,T=A,D=y,A=N,y=R,N=b,R=l(h,f,q,Y),b=g(f,f,q,Y),h=s,f=c,s=o,c=d,o=a,d=r,a=l(q,Y,G,V),r=g(q,Y,G,V)}u(this.h,0,a,r),u(this.h,2,o,d),u(this.h,4,s,c),u(this.h,6,h,f),u(this.h,8,R,b),u(this.h,10,y,N),u(this.h,12,D,A),u(this.h,14,j,T)},y.prototype._digest=function(e){return"hex"===e?a.toHex32(this.h,"big"):a.split32(this.h,"big")}},98156:function(e,t,n){"use strict";var a=n(88626).rotr32;function r(e,t,n){return e&t^~e&n}function i(e,t,n){return e&t^e&n^t&n}function o(e,t,n){return e^t^n}t.ft_1=function(e,t,n,a){return 0===e?r(t,n,a):1===e||3===e?o(t,n,a):2===e?i(t,n,a):void 0},t.ch32=r,t.maj32=i,t.p32=o,t.s0_256=function(e){return a(e,2)^a(e,13)^a(e,22)},t.s1_256=function(e){return a(e,6)^a(e,11)^a(e,25)},t.g0_256=function(e){return a(e,7)^a(e,18)^e>>>3},t.g1_256=function(e){return a(e,17)^a(e,19)^e>>>10}},88626:function(e,t,n){"use strict";var a=n(77859),r=n(70087);function i(e,t){return 55296==(64512&e.charCodeAt(t))&&(!(t<0||t+1>=e.length)&&56320==(64512&e.charCodeAt(t+1)))}function o(e){return(e>>>24|e>>>8&65280|e<<8&16711680|(255&e)<<24)>>>0}function d(e){return 1===e.length?"0"+e:e}function s(e){return 7===e.length?"0"+e:6===e.length?"00"+e:5===e.length?"000"+e:4===e.length?"0000"+e:3===e.length?"00000"+e:2===e.length?"000000"+e:1===e.length?"0000000"+e:e}t.inherits=r,t.toArray=function(e,t){if(Array.isArray(e))return e.slice();if(!e)return[];var n=[];if("string"==typeof e)if(t){if("hex"===t)for((e=e.replace(/[^a-z0-9]+/gi,"")).length%2!=0&&(e="0"+e),r=0;r<e.length;r+=2)n.push(parseInt(e[r]+e[r+1],16))}else for(var a=0,r=0;r<e.length;r++){var o=e.charCodeAt(r);o<128?n[a++]=o:o<2048?(n[a++]=o>>6|192,n[a++]=63&o|128):i(e,r)?(o=65536+((1023&o)<<10)+(1023&e.charCodeAt(++r)),n[a++]=o>>18|240,n[a++]=o>>12&63|128,n[a++]=o>>6&63|128,n[a++]=63&o|128):(n[a++]=o>>12|224,n[a++]=o>>6&63|128,n[a++]=63&o|128)}else for(r=0;r<e.length;r++)n[r]=0|e[r];return n},t.toHex=function(e){for(var t="",n=0;n<e.length;n++)t+=d(e[n].toString(16));return t},t.htonl=o,t.toHex32=function(e,t){for(var n="",a=0;a<e.length;a++){var r=e[a];"little"===t&&(r=o(r)),n+=s(r.toString(16))}return n},t.zero2=d,t.zero8=s,t.join32=function(e,t,n,r){var i=n-t;a(i%4==0);for(var o=new Array(i/4),d=0,s=t;d<o.length;d++,s+=4){var c;c="big"===r?e[s]<<24|e[s+1]<<16|e[s+2]<<8|e[s+3]:e[s+3]<<24|e[s+2]<<16|e[s+1]<<8|e[s],o[d]=c>>>0}return o},t.split32=function(e,t){for(var n=new Array(4*e.length),a=0,r=0;a<e.length;a++,r+=4){var i=e[a];"big"===t?(n[r]=i>>>24,n[r+1]=i>>>16&255,n[r+2]=i>>>8&255,n[r+3]=255&i):(n[r+3]=i>>>24,n[r+2]=i>>>16&255,n[r+1]=i>>>8&255,n[r]=255&i)}return n},t.rotr32=function(e,t){return e>>>t|e<<32-t},t.rotl32=function(e,t){return e<<t|e>>>32-t},t.sum32=function(e,t){return e+t>>>0},t.sum32_3=function(e,t,n){return e+t+n>>>0},t.sum32_4=function(e,t,n,a){return e+t+n+a>>>0},t.sum32_5=function(e,t,n,a,r){return e+t+n+a+r>>>0},t.sum64=function(e,t,n,a){var r=e[t],i=a+e[t+1]>>>0,o=(i<a?1:0)+n+r;e[t]=o>>>0,e[t+1]=i},t.sum64_hi=function(e,t,n,a){return(t+a>>>0<t?1:0)+e+n>>>0},t.sum64_lo=function(e,t,n,a){return t+a>>>0},t.sum64_4_hi=function(e,t,n,a,r,i,o,d){var s=0,c=t;return s+=(c=c+a>>>0)<t?1:0,s+=(c=c+i>>>0)<i?1:0,e+n+r+o+(s+=(c=c+d>>>0)<d?1:0)>>>0},t.sum64_4_lo=function(e,t,n,a,r,i,o,d){return t+a+i+d>>>0},t.sum64_5_hi=function(e,t,n,a,r,i,o,d,s,c){var u=0,l=t;return u+=(l=l+a>>>0)<t?1:0,u+=(l=l+i>>>0)<i?1:0,u+=(l=l+d>>>0)<d?1:0,e+n+r+o+s+(u+=(l=l+c>>>0)<c?1:0)>>>0},t.sum64_5_lo=function(e,t,n,a,r,i,o,d,s,c){return t+a+i+d+c>>>0},t.rotr64_hi=function(e,t,n){return(t<<32-n|e>>>n)>>>0},t.rotr64_lo=function(e,t,n){return(e<<32-n|t>>>n)>>>0},t.shr64_hi=function(e,t,n){return e>>>n},t.shr64_lo=function(e,t,n){return(e<<32-n|t>>>n)>>>0}},76513:function(e,t,n){"use strict";var a=n(35294),r=n(2910),i=n(77859);function o(e){if(!(this instanceof o))return new o(e);this.hash=e.hash,this.predResist=!!e.predResist,this.outLen=this.hash.outSize,this.minEntropy=e.minEntropy||this.hash.hmacStrength,this._reseed=null,this.reseedInterval=null,this.K=null,this.V=null;var t=r.toArray(e.entropy,e.entropyEnc||"hex"),n=r.toArray(e.nonce,e.nonceEnc||"hex"),a=r.toArray(e.pers,e.persEnc||"hex");i(t.length>=this.minEntropy/8,"Not enough entropy. Minimum is: "+this.minEntropy+" bits"),this._init(t,n,a)}e.exports=o,o.prototype._init=function(e,t,n){var a=e.concat(t).concat(n);this.K=new Array(this.outLen/8),this.V=new Array(this.outLen/8);for(var r=0;r<this.V.length;r++)this.K[r]=0,this.V[r]=1;this._update(a),this._reseed=1,this.reseedInterval=281474976710656},o.prototype._hmac=function(){return new a.hmac(this.hash,this.K)},o.prototype._update=function(e){var t=this._hmac().update(this.V).update([0]);e&&(t=t.update(e)),this.K=t.digest(),this.V=this._hmac().update(this.V).digest(),e&&(this.K=this._hmac().update(this.V).update([1]).update(e).digest(),this.V=this._hmac().update(this.V).digest())},o.prototype.reseed=function(e,t,n,a){"string"!=typeof t&&(a=n,n=t,t=null),e=r.toArray(e,t),n=r.toArray(n,a),i(e.length>=this.minEntropy/8,"Not enough entropy. Minimum is: "+this.minEntropy+" bits"),this._update(e.concat(n||[])),this._reseed=1},o.prototype.generate=function(e,t,n,a){if(this._reseed>this.reseedInterval)throw new Error("Reseed is required");"string"!=typeof t&&(a=n,n=t,t=null),n&&(n=r.toArray(n,a||"hex"),this._update(n));for(var i=[];i.length<e;)this.V=this._hmac().update(this.V).digest(),i=i.concat(this.V);var o=i.slice(0,e);return this._update(n),this._reseed++,r.encode(o,t)}},42366:function(e){function t(e){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}t.keys=function(){return[]},t.resolve=t,t.id=42366,e.exports=t},50144:function(e,t){!function(e){"use strict";function t(e,t,n,a,r){n||(n=p),function e(a,r,i){var o=i||a.type,d=t[o];n[o](a,r,e),d&&d(a,r)}(e,a,r)}function n(e,t,n,a,r){var i=[];n||(n=p),function e(a,r,o){var d=o||a.type,s=t[d],c=a!==i[i.length-1];c&&i.push(a),n[d](a,r,e),s&&s(a,r||i,i),c&&i.pop()}(e,a,r)}function a(e,t,n,a,r){var i=n?g(n,a||void 0):a;!function e(t,n,a){i[a||t.type](t,n,e)}(e,t,r)}function r(e){return"string"==typeof e?function(t){return t===e}:e||function(){return!0}}var i=function(e,t){this.node=e,this.state=t};function o(e,t,n,a,r){var i;n||(n=p),function e(a,r,o){var d=o||a.type;n[d](a,r,e),i!==a&&(t(a,r,d),i=a)}(e,a,r)}function d(e,t,n,a){n||(n=p);var r,i=[];!function e(a,o,d){var s=d||a.type,c=a!==i[i.length-1];c&&i.push(a),n[s](a,o,e),r!==a&&(t(a,o||i,i,s),r=a),c&&i.pop()}(e,a)}function s(e,t,n,a,o,d){o||(o=p),a=r(a);try{!function e(r,d,s){var c=s||r.type;if((null==t||r.start<=t)&&(null==n||r.end>=n)&&o[c](r,d,e),(null==t||r.start===t)&&(null==n||r.end===n)&&a(c,r))throw new i(r,d)}(e,d)}catch(s){if(s instanceof i)return s;throw s}}function c(e,t,n,a,o){n=r(n),a||(a=p);try{!function e(r,o,d){var s=d||r.type;if(!(r.start>t||r.end<t)&&(a[s](r,o,e),n(s,r)))throw new i(r,o)}(e,o)}catch(d){if(d instanceof i)return d;throw d}}function u(e,t,n,a,o){n=r(n),a||(a=p);try{!function e(r,o,d){if(!(r.end<t)){var s=d||r.type;if(r.start>=t&&n(s,r))throw new i(r,o);a[s](r,o,e)}}(e,o)}catch(d){if(d instanceof i)return d;throw d}}function l(e,t,n,a,o){var d;return n=r(n),a||(a=p),function e(r,o,s){if(!(r.start>t)){var c=s||r.type;r.end<=t&&(!d||d.node.end<r.end)&&n(c,r)&&(d=new i(r,o)),a[c](r,o,e)}}(e,o),d}function g(e,t){var n=Object.create(t||p);for(var a in e)n[a]=e[a];return n}function h(e,t,n){n(e,t)}function f(e,t,n){}var p={};p.Program=p.BlockStatement=p.StaticBlock=function(e,t,n){for(var a=0,r=e.body;a<r.length;a+=1)n(r[a],t,"Statement")},p.Statement=h,p.EmptyStatement=f,p.ExpressionStatement=p.ParenthesizedExpression=p.ChainExpression=function(e,t,n){return n(e.expression,t,"Expression")},p.IfStatement=function(e,t,n){n(e.test,t,"Expression"),n(e.consequent,t,"Statement"),e.alternate&&n(e.alternate,t,"Statement")},p.LabeledStatement=function(e,t,n){return n(e.body,t,"Statement")},p.BreakStatement=p.ContinueStatement=f,p.WithStatement=function(e,t,n){n(e.object,t,"Expression"),n(e.body,t,"Statement")},p.SwitchStatement=function(e,t,n){n(e.discriminant,t,"Expression");for(var a=0,r=e.cases;a<r.length;a+=1){var i=r[a];i.test&&n(i.test,t,"Expression");for(var o=0,d=i.consequent;o<d.length;o+=1)n(d[o],t,"Statement")}},p.SwitchCase=function(e,t,n){e.test&&n(e.test,t,"Expression");for(var a=0,r=e.consequent;a<r.length;a+=1)n(r[a],t,"Statement")},p.ReturnStatement=p.YieldExpression=p.AwaitExpression=function(e,t,n){e.argument&&n(e.argument,t,"Expression")},p.ThrowStatement=p.SpreadElement=function(e,t,n){return n(e.argument,t,"Expression")},p.TryStatement=function(e,t,n){n(e.block,t,"Statement"),e.handler&&n(e.handler,t),e.finalizer&&n(e.finalizer,t,"Statement")},p.CatchClause=function(e,t,n){e.param&&n(e.param,t,"Pattern"),n(e.body,t,"Statement")},p.WhileStatement=p.DoWhileStatement=function(e,t,n){n(e.test,t,"Expression"),n(e.body,t,"Statement")},p.ForStatement=function(e,t,n){e.init&&n(e.init,t,"ForInit"),e.test&&n(e.test,t,"Expression"),e.update&&n(e.update,t,"Expression"),n(e.body,t,"Statement")},p.ForInStatement=p.ForOfStatement=function(e,t,n){n(e.left,t,"ForInit"),n(e.right,t,"Expression"),n(e.body,t,"Statement")},p.ForInit=function(e,t,n){"VariableDeclaration"===e.type?n(e,t):n(e,t,"Expression")},p.DebuggerStatement=f,p.FunctionDeclaration=function(e,t,n){return n(e,t,"Function")},p.VariableDeclaration=function(e,t,n){for(var a=0,r=e.declarations;a<r.length;a+=1)n(r[a],t)},p.VariableDeclarator=function(e,t,n){n(e.id,t,"Pattern"),e.init&&n(e.init,t,"Expression")},p.Function=function(e,t,n){e.id&&n(e.id,t,"Pattern");for(var a=0,r=e.params;a<r.length;a+=1)n(r[a],t,"Pattern");n(e.body,t,e.expression?"Expression":"Statement")},p.Pattern=function(e,t,n){"Identifier"===e.type?n(e,t,"VariablePattern"):"MemberExpression"===e.type?n(e,t,"MemberPattern"):n(e,t)},p.VariablePattern=f,p.MemberPattern=h,p.RestElement=function(e,t,n){return n(e.argument,t,"Pattern")},p.ArrayPattern=function(e,t,n){for(var a=0,r=e.elements;a<r.length;a+=1){var i=r[a];i&&n(i,t,"Pattern")}},p.ObjectPattern=function(e,t,n){for(var a=0,r=e.properties;a<r.length;a+=1){var i=r[a];"Property"===i.type?(i.computed&&n(i.key,t,"Expression"),n(i.value,t,"Pattern")):"RestElement"===i.type&&n(i.argument,t,"Pattern")}},p.Expression=h,p.ThisExpression=p.Super=p.MetaProperty=f,p.ArrayExpression=function(e,t,n){for(var a=0,r=e.elements;a<r.length;a+=1){var i=r[a];i&&n(i,t,"Expression")}},p.ObjectExpression=function(e,t,n){for(var a=0,r=e.properties;a<r.length;a+=1)n(r[a],t)},p.FunctionExpression=p.ArrowFunctionExpression=p.FunctionDeclaration,p.SequenceExpression=function(e,t,n){for(var a=0,r=e.expressions;a<r.length;a+=1)n(r[a],t,"Expression")},p.TemplateLiteral=function(e,t,n){for(var a=0,r=e.quasis;a<r.length;a+=1)n(r[a],t);for(var i=0,o=e.expressions;i<o.length;i+=1)n(o[i],t,"Expression")},p.TemplateElement=f,p.UnaryExpression=p.UpdateExpression=function(e,t,n){n(e.argument,t,"Expression")},p.BinaryExpression=p.LogicalExpression=function(e,t,n){n(e.left,t,"Expression"),n(e.right,t,"Expression")},p.AssignmentExpression=p.AssignmentPattern=function(e,t,n){n(e.left,t,"Pattern"),n(e.right,t,"Expression")},p.ConditionalExpression=function(e,t,n){n(e.test,t,"Expression"),n(e.consequent,t,"Expression"),n(e.alternate,t,"Expression")},p.NewExpression=p.CallExpression=function(e,t,n){if(n(e.callee,t,"Expression"),e.arguments)for(var a=0,r=e.arguments;a<r.length;a+=1)n(r[a],t,"Expression")},p.MemberExpression=function(e,t,n){n(e.object,t,"Expression"),e.computed&&n(e.property,t,"Expression")},p.ExportNamedDeclaration=p.ExportDefaultDeclaration=function(e,t,n){e.declaration&&n(e.declaration,t,"ExportNamedDeclaration"===e.type||e.declaration.id?"Statement":"Expression"),e.source&&n(e.source,t,"Expression")},p.ExportAllDeclaration=function(e,t,n){e.exported&&n(e.exported,t),n(e.source,t,"Expression")},p.ImportDeclaration=function(e,t,n){for(var a=0,r=e.specifiers;a<r.length;a+=1)n(r[a],t);n(e.source,t,"Expression")},p.ImportExpression=function(e,t,n){n(e.source,t,"Expression")},p.ImportSpecifier=p.ImportDefaultSpecifier=p.ImportNamespaceSpecifier=p.Identifier=p.PrivateIdentifier=p.Literal=f,p.TaggedTemplateExpression=function(e,t,n){n(e.tag,t,"Expression"),n(e.quasi,t,"Expression")},p.ClassDeclaration=p.ClassExpression=function(e,t,n){return n(e,t,"Class")},p.Class=function(e,t,n){e.id&&n(e.id,t,"Pattern"),e.superClass&&n(e.superClass,t,"Expression"),n(e.body,t)},p.ClassBody=function(e,t,n){for(var a=0,r=e.body;a<r.length;a+=1)n(r[a],t)},p.MethodDefinition=p.PropertyDefinition=p.Property=function(e,t,n){e.computed&&n(e.key,t,"Expression"),e.value&&n(e.value,t,"Expression")},e.ancestor=n,e.base=p,e.findNodeAfter=u,e.findNodeAround=c,e.findNodeAt=s,e.findNodeBefore=l,e.full=o,e.fullAncestor=d,e.make=g,e.recursive=a,e.simple=t,Object.defineProperty(e,"__esModule",{value:!0})}(t)},80624:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.MissingRefError=t.ValidationError=t.CodeGen=t.Name=t.nil=t.stringify=t.str=t._=t.KeywordCxt=void 0;const a=n(72940),r=n(51438),i=n(5128),o=n(16649),d=["/properties"],s="http://json-schema.org/draft-07/schema";class c extends a.default{_addVocabularies(){super._addVocabularies(),r.default.forEach((e=>this.addVocabulary(e))),this.opts.discriminator&&this.addKeyword(i.default)}_addDefaultMetaSchema(){if(super._addDefaultMetaSchema(),!this.opts.meta)return;const e=this.opts.$data?this.$dataMetaSchema(o,d):o;this.addMetaSchema(e,s,!1),this.refs["http://json-schema.org/schema"]=s}defaultMeta(){return this.opts.defaultMeta=super.defaultMeta()||(this.getSchema(s)?s:void 0)}}e.exports=t=c,Object.defineProperty(t,"__esModule",{value:!0}),t.default=c;var u=n(61202);Object.defineProperty(t,"KeywordCxt",{enumerable:!0,get:function(){return u.KeywordCxt}});var l=n(30035);Object.defineProperty(t,"_",{enumerable:!0,get:function(){return l._}}),Object.defineProperty(t,"str",{enumerable:!0,get:function(){return l.str}}),Object.defineProperty(t,"stringify",{enumerable:!0,get:function(){return l.stringify}}),Object.defineProperty(t,"nil",{enumerable:!0,get:function(){return l.nil}}),Object.defineProperty(t,"Name",{enumerable:!0,get:function(){return l.Name}}),Object.defineProperty(t,"CodeGen",{enumerable:!0,get:function(){return l.CodeGen}});var g=n(71550);Object.defineProperty(t,"ValidationError",{enumerable:!0,get:function(){return g.default}});var h=n(62557);Object.defineProperty(t,"MissingRefError",{enumerable:!0,get:function(){return h.default}})},15454:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.regexpCode=t.getEsmExportName=t.getProperty=t.safeStringify=t.stringify=t.strConcat=t.addCodeArg=t.str=t._=t.nil=t._Code=t.Name=t.IDENTIFIER=t._CodeOrName=void 0;class n{}t._CodeOrName=n,t.IDENTIFIER=/^[a-z$_][a-z$_0-9]*$/i;class a extends n{constructor(e){if(super(),!t.IDENTIFIER.test(e))throw new Error("CodeGen: name must be a valid identifier");this.str=e}toString(){return this.str}emptyStr(){return!1}get names(){return{[this.str]:1}}}t.Name=a;class r extends n{constructor(e){super(),this._items="string"==typeof e?[e]:e}toString(){return this.str}emptyStr(){if(this._items.length>1)return!1;const e=this._items[0];return""===e||'""'===e}get str(){var e;return null!==(e=this._str)&&void 0!==e?e:this._str=this._items.reduce(((e,t)=>`${e}${t}`),"")}get names(){var e;return null!==(e=this._names)&&void 0!==e?e:this._names=this._items.reduce(((e,t)=>(t instanceof a&&(e[t.str]=(e[t.str]||0)+1),e)),{})}}function i(e,...t){const n=[e[0]];let a=0;for(;a<t.length;)s(n,t[a]),n.push(e[++a]);return new r(n)}t._Code=r,t.nil=new r(""),t._=i;const o=new r("+");function d(e,...t){const n=[u(e[0])];let a=0;for(;a<t.length;)n.push(o),s(n,t[a]),n.push(o,u(e[++a]));return function(e){let t=1;for(;t<e.length-1;){if(e[t]===o){const n=c(e[t-1],e[t+1]);if(void 0!==n){e.splice(t-1,3,n);continue}e[t++]="+"}t++}}(n),new r(n)}function s(e,t){var n;t instanceof r?e.push(...t._items):t instanceof a?e.push(t):e.push("number"==typeof(n=t)||"boolean"==typeof n||null===n?n:u(Array.isArray(n)?n.join(","):n))}function c(e,t){if('""'===t)return e;if('""'===e)return t;if("string"==typeof e){if(t instanceof a||'"'!==e[e.length-1])return;return"string"!=typeof t?`${e.slice(0,-1)}${t}"`:'"'===t[0]?e.slice(0,-1)+t.slice(1):void 0}return"string"!=typeof t||'"'!==t[0]||e instanceof a?void 0:`"${e}${t.slice(1)}`}function u(e){return JSON.stringify(e).replace(/\u2028/g,"\\u2028").replace(/\u2029/g,"\\u2029")}t.str=d,t.addCodeArg=s,t.strConcat=function(e,t){return t.emptyStr()?e:e.emptyStr()?t:d`${e}${t}`},t.stringify=function(e){return new r(u(e))},t.safeStringify=u,t.getProperty=function(e){return"string"==typeof e&&t.IDENTIFIER.test(e)?new r(`.${e}`):i`[${e}]`},t.getEsmExportName=function(e){if("string"==typeof e&&t.IDENTIFIER.test(e))return new r(`${e}`);throw new Error(`CodeGen: invalid export name: ${e}, use explicit $id name mapping`)},t.regexpCode=function(e){return new r(e.toString())}},30035:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.or=t.and=t.not=t.CodeGen=t.operators=t.varKinds=t.ValueScopeName=t.ValueScope=t.Scope=t.Name=t.regexpCode=t.stringify=t.getProperty=t.nil=t.strConcat=t.str=t._=void 0;const a=n(15454),r=n(46561);var i=n(15454);Object.defineProperty(t,"_",{enumerable:!0,get:function(){return i._}}),Object.defineProperty(t,"str",{enumerable:!0,get:function(){return i.str}}),Object.defineProperty(t,"strConcat",{enumerable:!0,get:function(){return i.strConcat}}),Object.defineProperty(t,"nil",{enumerable:!0,get:function(){return i.nil}}),Object.defineProperty(t,"getProperty",{enumerable:!0,get:function(){return i.getProperty}}),Object.defineProperty(t,"stringify",{enumerable:!0,get:function(){return i.stringify}}),Object.defineProperty(t,"regexpCode",{enumerable:!0,get:function(){return i.regexpCode}}),Object.defineProperty(t,"Name",{enumerable:!0,get:function(){return i.Name}});var o=n(46561);Object.defineProperty(t,"Scope",{enumerable:!0,get:function(){return o.Scope}}),Object.defineProperty(t,"ValueScope",{enumerable:!0,get:function(){return o.ValueScope}}),Object.defineProperty(t,"ValueScopeName",{enumerable:!0,get:function(){return o.ValueScopeName}}),Object.defineProperty(t,"varKinds",{enumerable:!0,get:function(){return o.varKinds}}),t.operators={GT:new a._Code(">"),GTE:new a._Code(">="),LT:new a._Code("<"),LTE:new a._Code("<="),EQ:new a._Code("==="),NEQ:new a._Code("!=="),NOT:new a._Code("!"),OR:new a._Code("||"),AND:new a._Code("&&"),ADD:new a._Code("+")};class d{optimizeNodes(){return this}optimizeNames(e,t){return this}}class s extends d{constructor(e,t,n){super(),this.varKind=e,this.name=t,this.rhs=n}render({es5:e,_n:t}){const n=e?r.varKinds.var:this.varKind,a=void 0===this.rhs?"":` = ${this.rhs}`;return`${n} ${this.name}${a};`+t}optimizeNames(e,t){if(e[this.name.str])return this.rhs&&(this.rhs=j(this.rhs,e,t)),this}get names(){return this.rhs instanceof a._CodeOrName?this.rhs.names:{}}}class c extends d{constructor(e,t,n){super(),this.lhs=e,this.rhs=t,this.sideEffects=n}render({_n:e}){return`${this.lhs} = ${this.rhs};`+e}optimizeNames(e,t){if(!(this.lhs instanceof a.Name)||e[this.lhs.str]||this.sideEffects)return this.rhs=j(this.rhs,e,t),this}get names(){return A(this.lhs instanceof a.Name?{}:{...this.lhs.names},this.rhs)}}class u extends c{constructor(e,t,n,a){super(e,n,a),this.op=t}render({_n:e}){return`${this.lhs} ${this.op}= ${this.rhs};`+e}}class l extends d{constructor(e){super(),this.label=e,this.names={}}render({_n:e}){return`${this.label}:`+e}}class g extends d{constructor(e){super(),this.label=e,this.names={}}render({_n:e}){return`break${this.label?` ${this.label}`:""};`+e}}class h extends d{constructor(e){super(),this.error=e}render({_n:e}){return`throw ${this.error};`+e}get names(){return this.error.names}}class f extends d{constructor(e){super(),this.code=e}render({_n:e}){return`${this.code};`+e}optimizeNodes(){return`${this.code}`?this:void 0}optimizeNames(e,t){return this.code=j(this.code,e,t),this}get names(){return this.code instanceof a._CodeOrName?this.code.names:{}}}class p extends d{constructor(e=[]){super(),this.nodes=e}render(e){return this.nodes.reduce(((t,n)=>t+n.render(e)),"")}optimizeNodes(){const{nodes:e}=this;let t=e.length;for(;t--;){const n=e[t].optimizeNodes();Array.isArray(n)?e.splice(t,1,...n):n?e[t]=n:e.splice(t,1)}return e.length>0?this:void 0}optimizeNames(e,t){const{nodes:n}=this;let a=n.length;for(;a--;){const r=n[a];r.optimizeNames(e,t)||(T(e,r.names),n.splice(a,1))}return n.length>0?this:void 0}get names(){return this.nodes.reduce(((e,t)=>D(e,t.names)),{})}}class m extends p{render(e){return"{"+e._n+super.render(e)+"}"+e._n}}class R extends p{}class b extends m{}b.kind="else";class y extends m{constructor(e,t){super(t),this.condition=e}render(e){let t=`if(${this.condition})`+super.render(e);return this.else&&(t+="else "+this.else.render(e)),t}optimizeNodes(){super.optimizeNodes();const e=this.condition;if(!0===e)return this.nodes;let t=this.else;if(t){const e=t.optimizeNodes();t=this.else=Array.isArray(e)?new b(e):e}return t?!1===e?t instanceof y?t:t.nodes:this.nodes.length?this:new y(L(e),t instanceof y?[t]:t.nodes):!1!==e&&this.nodes.length?this:void 0}optimizeNames(e,t){var n;if(this.else=null===(n=this.else)||void 0===n?void 0:n.optimizeNames(e,t),super.optimizeNames(e,t)||this.else)return this.condition=j(this.condition,e,t),this}get names(){const e=super.names;return A(e,this.condition),this.else&&D(e,this.else.names),e}}y.kind="if";class v extends m{}v.kind="for";class _ extends v{constructor(e){super(),this.iteration=e}render(e){return`for(${this.iteration})`+super.render(e)}optimizeNames(e,t){if(super.optimizeNames(e,t))return this.iteration=j(this.iteration,e,t),this}get names(){return D(super.names,this.iteration.names)}}class w extends v{constructor(e,t,n,a){super(),this.varKind=e,this.name=t,this.from=n,this.to=a}render(e){const t=e.es5?r.varKinds.var:this.varKind,{name:n,from:a,to:i}=this;return`for(${t} ${n}=${a}; ${n}<${i}; ${n}++)`+super.render(e)}get names(){const e=A(super.names,this.from);return A(e,this.to)}}class M extends v{constructor(e,t,n,a){super(),this.loop=e,this.varKind=t,this.name=n,this.iterable=a}render(e){return`for(${this.varKind} ${this.name} ${this.loop} ${this.iterable})`+super.render(e)}optimizeNames(e,t){if(super.optimizeNames(e,t))return this.iterable=j(this.iterable,e,t),this}get names(){return D(super.names,this.iterable.names)}}class x extends m{constructor(e,t,n){super(),this.name=e,this.args=t,this.async=n}render(e){return`${this.async?"async ":""}function ${this.name}(${this.args})`+super.render(e)}}x.kind="func";class E extends p{render(e){return"return "+super.render(e)}}E.kind="return";class S extends m{render(e){let t="try"+super.render(e);return this.catch&&(t+=this.catch.render(e)),this.finally&&(t+=this.finally.render(e)),t}optimizeNodes(){var e,t;return super.optimizeNodes(),null===(e=this.catch)||void 0===e||e.optimizeNodes(),null===(t=this.finally)||void 0===t||t.optimizeNodes(),this}optimizeNames(e,t){var n,a;return super.optimizeNames(e,t),null===(n=this.catch)||void 0===n||n.optimizeNames(e,t),null===(a=this.finally)||void 0===a||a.optimizeNames(e,t),this}get names(){const e=super.names;return this.catch&&D(e,this.catch.names),this.finally&&D(e,this.finally.names),e}}class k extends m{constructor(e){super(),this.error=e}render(e){return`catch(${this.error})`+super.render(e)}}k.kind="catch";class N extends m{render(e){return"finally"+super.render(e)}}N.kind="finally";function D(e,t){for(const n in t)e[n]=(e[n]||0)+(t[n]||0);return e}function A(e,t){return t instanceof a._CodeOrName?D(e,t.names):e}function j(e,t,n){return e instanceof a.Name?i(e):(r=e)instanceof a._Code&&r._items.some((e=>e instanceof a.Name&&1===t[e.str]&&void 0!==n[e.str]))?new a._Code(e._items.reduce(((e,t)=>(t instanceof a.Name&&(t=i(t)),t instanceof a._Code?e.push(...t._items):e.push(t),e)),[])):e;var r;function i(e){const a=n[e.str];return void 0===a||1!==t[e.str]?e:(delete t[e.str],a)}}function T(e,t){for(const n in t)e[n]=(e[n]||0)-(t[n]||0)}function L(e){return"boolean"==typeof e||"number"==typeof e||null===e?!e:a._`!${P(e)}`}t.CodeGen=class{constructor(e,t={}){this._values={},this._blockStarts=[],this._constants={},this.opts={...t,_n:t.lines?"\n":""},this._extScope=e,this._scope=new r.Scope({parent:e}),this._nodes=[new R]}toString(){return this._root.render(this.opts)}name(e){return this._scope.name(e)}scopeName(e){return this._extScope.name(e)}scopeValue(e,t){const n=this._extScope.value(e,t);return(this._values[n.prefix]||(this._values[n.prefix]=new Set)).add(n),n}getScopeValue(e,t){return this._extScope.getValue(e,t)}scopeRefs(e){return this._extScope.scopeRefs(e,this._values)}scopeCode(){return this._extScope.scopeCode(this._values)}_def(e,t,n,a){const r=this._scope.toName(t);return void 0!==n&&a&&(this._constants[r.str]=n),this._leafNode(new s(e,r,n)),r}const(e,t,n){return this._def(r.varKinds.const,e,t,n)}let(e,t,n){return this._def(r.varKinds.let,e,t,n)}var(e,t,n){return this._def(r.varKinds.var,e,t,n)}assign(e,t,n){return this._leafNode(new c(e,t,n))}add(e,n){return this._leafNode(new u(e,t.operators.ADD,n))}code(e){return"function"==typeof e?e():e!==a.nil&&this._leafNode(new f(e)),this}object(...e){const t=["{"];for(const[n,r]of e)t.length>1&&t.push(","),t.push(n),(n!==r||this.opts.es5)&&(t.push(":"),(0,a.addCodeArg)(t,r));return t.push("}"),new a._Code(t)}if(e,t,n){if(this._blockNode(new y(e)),t&&n)this.code(t).else().code(n).endIf();else if(t)this.code(t).endIf();else if(n)throw new Error('CodeGen: "else" body without "then" body');return this}elseIf(e){return this._elseNode(new y(e))}else(){return this._elseNode(new b)}endIf(){return this._endBlockNode(y,b)}_for(e,t){return this._blockNode(e),t&&this.code(t).endFor(),this}for(e,t){return this._for(new _(e),t)}forRange(e,t,n,a,i=(this.opts.es5?r.varKinds.var:r.varKinds.let)){const o=this._scope.toName(e);return this._for(new w(i,o,t,n),(()=>a(o)))}forOf(e,t,n,i=r.varKinds.const){const o=this._scope.toName(e);if(this.opts.es5){const e=t instanceof a.Name?t:this.var("_arr",t);return this.forRange("_i",0,a._`${e}.length`,(t=>{this.var(o,a._`${e}[${t}]`),n(o)}))}return this._for(new M("of",i,o,t),(()=>n(o)))}forIn(e,t,n,i=(this.opts.es5?r.varKinds.var:r.varKinds.const)){if(this.opts.ownProperties)return this.forOf(e,a._`Object.keys(${t})`,n);const o=this._scope.toName(e);return this._for(new M("in",i,o,t),(()=>n(o)))}endFor(){return this._endBlockNode(v)}label(e){return this._leafNode(new l(e))}break(e){return this._leafNode(new g(e))}return(e){const t=new E;if(this._blockNode(t),this.code(e),1!==t.nodes.length)throw new Error('CodeGen: "return" should have one node');return this._endBlockNode(E)}try(e,t,n){if(!t&&!n)throw new Error('CodeGen: "try" without "catch" and "finally"');const a=new S;if(this._blockNode(a),this.code(e),t){const e=this.name("e");this._currNode=a.catch=new k(e),t(e)}return n&&(this._currNode=a.finally=new N,this.code(n)),this._endBlockNode(k,N)}throw(e){return this._leafNode(new h(e))}block(e,t){return this._blockStarts.push(this._nodes.length),e&&this.code(e).endBlock(t),this}endBlock(e){const t=this._blockStarts.pop();if(void 0===t)throw new Error("CodeGen: not in self-balancing block");const n=this._nodes.length-t;if(n<0||void 0!==e&&n!==e)throw new Error(`CodeGen: wrong number of nodes: ${n} vs ${e} expected`);return this._nodes.length=t,this}func(e,t=a.nil,n,r){return this._blockNode(new x(e,t,n)),r&&this.code(r).endFunc(),this}endFunc(){return this._endBlockNode(x)}optimize(e=1){for(;e-- >0;)this._root.optimizeNodes(),this._root.optimizeNames(this._root.names,this._constants)}_leafNode(e){return this._currNode.nodes.push(e),this}_blockNode(e){this._currNode.nodes.push(e),this._nodes.push(e)}_endBlockNode(e,t){const n=this._currNode;if(n instanceof e||t&&n instanceof t)return this._nodes.pop(),this;throw new Error(`CodeGen: not in block "${t?`${e.kind}/${t.kind}`:e.kind}"`)}_elseNode(e){const t=this._currNode;if(!(t instanceof y))throw new Error('CodeGen: "else" without "if"');return this._currNode=t.else=e,this}get _root(){return this._nodes[0]}get _currNode(){const e=this._nodes;return e[e.length-1]}set _currNode(e){const t=this._nodes;t[t.length-1]=e}},t.not=L;const I=O(t.operators.AND);t.and=function(...e){return e.reduce(I)};const C=O(t.operators.OR);function O(e){return(t,n)=>t===a.nil?n:n===a.nil?t:a._`${P(t)} ${e} ${P(n)}`}function P(e){return e instanceof a.Name?e:a._`(${e})`}t.or=function(...e){return e.reduce(C)}},46561:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.ValueScope=t.ValueScopeName=t.Scope=t.varKinds=t.UsedValueState=void 0;const a=n(15454);class r extends Error{constructor(e){super(`CodeGen: "code" for ${e} not defined`),this.value=e.value}}var i;!function(e){e[e.Started=0]="Started",e[e.Completed=1]="Completed"}(i=t.UsedValueState||(t.UsedValueState={})),t.varKinds={const:new a.Name("const"),let:new a.Name("let"),var:new a.Name("var")};class o{constructor({prefixes:e,parent:t}={}){this._names={},this._prefixes=e,this._parent=t}toName(e){return e instanceof a.Name?e:this.name(e)}name(e){return new a.Name(this._newName(e))}_newName(e){return`${e}${(this._names[e]||this._nameGroup(e)).index++}`}_nameGroup(e){var t,n;if((null===(n=null===(t=this._parent)||void 0===t?void 0:t._prefixes)||void 0===n?void 0:n.has(e))||this._prefixes&&!this._prefixes.has(e))throw new Error(`CodeGen: prefix "${e}" is not allowed in this scope`);return this._names[e]={prefix:e,index:0}}}t.Scope=o;class d extends a.Name{constructor(e,t){super(t),this.prefix=e}setValue(e,{property:t,itemIndex:n}){this.value=e,this.scopePath=a._`.${new a.Name(t)}[${n}]`}}t.ValueScopeName=d;const s=a._`\n`;t.ValueScope=class extends o{constructor(e){super(e),this._values={},this._scope=e.scope,this.opts={...e,_n:e.lines?s:a.nil}}get(){return this._scope}name(e){return new d(e,this._newName(e))}value(e,t){var n;if(void 0===t.ref)throw new Error("CodeGen: ref must be passed in value");const a=this.toName(e),{prefix:r}=a,i=null!==(n=t.key)&&void 0!==n?n:t.ref;let o=this._values[r];if(o){const e=o.get(i);if(e)return e}else o=this._values[r]=new Map;o.set(i,a);const d=this._scope[r]||(this._scope[r]=[]),s=d.length;return d[s]=t.ref,a.setValue(t,{property:r,itemIndex:s}),a}getValue(e,t){const n=this._values[e];if(n)return n.get(t)}scopeRefs(e,t=this._values){return this._reduceValues(t,(t=>{if(void 0===t.scopePath)throw new Error(`CodeGen: name "${t}" has no value`);return a._`${e}${t.scopePath}`}))}scopeCode(e=this._values,t,n){return this._reduceValues(e,(e=>{if(void 0===e.value)throw new Error(`CodeGen: name "${e}" has no value`);return e.value.code}),t,n)}_reduceValues(e,n,o={},d){let s=a.nil;for(const c in e){const u=e[c];if(!u)continue;const l=o[c]=o[c]||new Map;u.forEach((e=>{if(l.has(e))return;l.set(e,i.Started);let o=n(e);if(o){const n=this.opts.es5?t.varKinds.var:t.varKinds.const;s=a._`${s}${n} ${e} = ${o};${this.opts._n}`}else{if(!(o=null==d?void 0:d(e)))throw new r(e);s=a._`${s}${o}${this.opts._n}`}l.set(e,i.Completed)}))}return s}}},90583:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.extendErrors=t.resetErrorsCount=t.reportExtraError=t.reportError=t.keyword$DataError=t.keywordError=void 0;const a=n(30035),r=n(8764),i=n(15568);function o(e,t){const n=e.const("err",t);e.if(a._`${i.default.vErrors} === null`,(()=>e.assign(i.default.vErrors,a._`[${n}]`)),a._`${i.default.vErrors}.push(${n})`),e.code(a._`${i.default.errors}++`)}function d(e,t){const{gen:n,validateName:r,schemaEnv:i}=e;i.$async?n.throw(a._`new ${e.ValidationError}(${t})`):(n.assign(a._`${r}.errors`,t),n.return(!1))}t.keywordError={message:({keyword:e})=>a.str`must pass "${e}" keyword validation`},t.keyword$DataError={message:({keyword:e,schemaType:t})=>t?a.str`"${e}" keyword must be ${t} ($data)`:a.str`"${e}" keyword is invalid ($data)`},t.reportError=function(e,n=t.keywordError,r,i){const{it:s}=e,{gen:u,compositeRule:l,allErrors:g}=s,h=c(e,n,r);(null!=i?i:l||g)?o(u,h):d(s,a._`[${h}]`)},t.reportExtraError=function(e,n=t.keywordError,a){const{it:r}=e,{gen:s,compositeRule:u,allErrors:l}=r;o(s,c(e,n,a)),u||l||d(r,i.default.vErrors)},t.resetErrorsCount=function(e,t){e.assign(i.default.errors,t),e.if(a._`${i.default.vErrors} !== null`,(()=>e.if(t,(()=>e.assign(a._`${i.default.vErrors}.length`,t)),(()=>e.assign(i.default.vErrors,null)))))},t.extendErrors=function({gen:e,keyword:t,schemaValue:n,data:r,errsCount:o,it:d}){if(void 0===o)throw new Error("ajv implementation error");const s=e.name("err");e.forRange("i",o,i.default.errors,(o=>{e.const(s,a._`${i.default.vErrors}[${o}]`),e.if(a._`${s}.instancePath === undefined`,(()=>e.assign(a._`${s}.instancePath`,(0,a.strConcat)(i.default.instancePath,d.errorPath)))),e.assign(a._`${s}.schemaPath`,a.str`${d.errSchemaPath}/${t}`),d.opts.verbose&&(e.assign(a._`${s}.schema`,n),e.assign(a._`${s}.data`,r))}))};const s={keyword:new a.Name("keyword"),schemaPath:new a.Name("schemaPath"),params:new a.Name("params"),propertyName:new a.Name("propertyName"),message:new a.Name("message"),schema:new a.Name("schema"),parentSchema:new a.Name("parentSchema")};function c(e,t,n){const{createErrors:r}=e.it;return!1===r?a._`{}`:function(e,t,n={}){const{gen:r,it:o}=e,d=[u(o,n),l(e,n)];return function(e,{params:t,message:n},r){const{keyword:o,data:d,schemaValue:c,it:u}=e,{opts:l,propertyName:g,topSchemaRef:h,schemaPath:f}=u;r.push([s.keyword,o],[s.params,"function"==typeof t?t(e):t||a._`{}`]),l.messages&&r.push([s.message,"function"==typeof n?n(e):n]);l.verbose&&r.push([s.schema,c],[s.parentSchema,a._`${h}${f}`],[i.default.data,d]);g&&r.push([s.propertyName,g])}(e,t,d),r.object(...d)}(e,t,n)}function u({errorPath:e},{instancePath:t}){const n=t?a.str`${e}${(0,r.getErrorPath)(t,r.Type.Str)}`:e;return[i.default.instancePath,(0,a.strConcat)(i.default.instancePath,n)]}function l({keyword:e,it:{errSchemaPath:t}},{schemaPath:n,parentSchema:i}){let o=i?t:a.str`${t}/${e}`;return n&&(o=a.str`${o}${(0,r.getErrorPath)(n,r.Type.Str)}`),[s.schemaPath,o]}},64361:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.resolveSchema=t.getCompilingSchema=t.resolveRef=t.compileSchema=t.SchemaEnv=void 0;const a=n(30035),r=n(71550),i=n(15568),o=n(76392),d=n(8764),s=n(61202);class c{constructor(e){var t;let n;this.refs={},this.dynamicAnchors={},"object"==typeof e.schema&&(n=e.schema),this.schema=e.schema,this.schemaId=e.schemaId,this.root=e.root||this,this.baseId=null!==(t=e.baseId)&&void 0!==t?t:(0,o.normalizeId)(null==n?void 0:n[e.schemaId||"$id"]),this.schemaPath=e.schemaPath,this.localRefs=e.localRefs,this.meta=e.meta,this.$async=null==n?void 0:n.$async,this.refs={}}}function u(e){const t=g.call(this,e);if(t)return t;const n=(0,o.getFullPath)(this.opts.uriResolver,e.root.baseId),{es5:d,lines:c}=this.opts.code,{ownProperties:u}=this.opts,l=new a.CodeGen(this.scope,{es5:d,lines:c,ownProperties:u});let h;e.$async&&(h=l.scopeValue("Error",{ref:r.default,code:a._`require("ajv/dist/runtime/validation_error").default`}));const f=l.scopeName("validate");e.validateName=f;const p={gen:l,allErrors:this.opts.allErrors,data:i.default.data,parentData:i.default.parentData,parentDataProperty:i.default.parentDataProperty,dataNames:[i.default.data],dataPathArr:[a.nil],dataLevel:0,dataTypes:[],definedProperties:new Set,topSchemaRef:l.scopeValue("schema",!0===this.opts.code.source?{ref:e.schema,code:(0,a.stringify)(e.schema)}:{ref:e.schema}),validateName:f,ValidationError:h,schema:e.schema,schemaEnv:e,rootId:n,baseId:e.baseId||n,schemaPath:a.nil,errSchemaPath:e.schemaPath||(this.opts.jtd?"":"#"),errorPath:a._`""`,opts:this.opts,self:this};let m;try{this._compilations.add(e),(0,s.validateFunctionCode)(p),l.optimize(this.opts.code.optimize);const t=l.toString();m=`${l.scopeRefs(i.default.scope)}return ${t}`,this.opts.code.process&&(m=this.opts.code.process(m,e));const n=new Function(`${i.default.self}`,`${i.default.scope}`,m)(this,this.scope.get());if(this.scope.value(f,{ref:n}),n.errors=null,n.schema=e.schema,n.schemaEnv=e,e.$async&&(n.$async=!0),!0===this.opts.code.source&&(n.source={validateName:f,validateCode:t,scopeValues:l._values}),this.opts.unevaluated){const{props:e,items:t}=p;n.evaluated={props:e instanceof a.Name?void 0:e,items:t instanceof a.Name?void 0:t,dynamicProps:e instanceof a.Name,dynamicItems:t instanceof a.Name},n.source&&(n.source.evaluated=(0,a.stringify)(n.evaluated))}return e.validate=n,e}catch(R){throw delete e.validate,delete e.validateName,m&&this.logger.error("Error compiling schema, function code:",m),R}finally{this._compilations.delete(e)}}function l(e){return(0,o.inlineRef)(e.schema,this.opts.inlineRefs)?e.schema:e.validate?e:u.call(this,e)}function g(e){for(const a of this._compilations)if(n=e,(t=a).schema===n.schema&&t.root===n.root&&t.baseId===n.baseId)return a;var t,n}function h(e,t){let n;for(;"string"==typeof(n=this.refs[t]);)t=n;return n||this.schemas[t]||f.call(this,e,t)}function f(e,t){const n=this.opts.uriResolver.parse(t),a=(0,o._getFullPath)(this.opts.uriResolver,n);let r=(0,o.getFullPath)(this.opts.uriResolver,e.baseId,void 0);if(Object.keys(e.schema).length>0&&a===r)return m.call(this,n,e);const i=(0,o.normalizeId)(a),d=this.refs[i]||this.schemas[i];if("string"==typeof d){const t=f.call(this,e,d);if("object"!=typeof(null==t?void 0:t.schema))return;return m.call(this,n,t)}if("object"==typeof(null==d?void 0:d.schema)){if(d.validate||u.call(this,d),i===(0,o.normalizeId)(t)){const{schema:t}=d,{schemaId:n}=this.opts,a=t[n];return a&&(r=(0,o.resolveUrl)(this.opts.uriResolver,r,a)),new c({schema:t,schemaId:n,root:e,baseId:r})}return m.call(this,n,d)}}t.SchemaEnv=c,t.compileSchema=u,t.resolveRef=function(e,t,n){var a;n=(0,o.resolveUrl)(this.opts.uriResolver,t,n);const r=e.refs[n];if(r)return r;let i=h.call(this,e,n);if(void 0===i){const r=null===(a=e.localRefs)||void 0===a?void 0:a[n],{schemaId:o}=this.opts;r&&(i=new c({schema:r,schemaId:o,root:e,baseId:t}))}return void 0!==i?e.refs[n]=l.call(this,i):void 0},t.getCompilingSchema=g,t.resolveSchema=f;const p=new Set(["properties","patternProperties","enum","dependencies","definitions"]);function m(e,{baseId:t,schema:n,root:a}){var r;if("/"!==(null===(r=e.fragment)||void 0===r?void 0:r[0]))return;for(const c of e.fragment.slice(1).split("/")){if("boolean"==typeof n)return;const e=n[(0,d.unescapeFragment)(c)];if(void 0===e)return;const a="object"==typeof(n=e)&&n[this.opts.schemaId];!p.has(c)&&a&&(t=(0,o.resolveUrl)(this.opts.uriResolver,t,a))}let i;if("boolean"!=typeof n&&n.$ref&&!(0,d.schemaHasRulesButRef)(n,this.RULES)){const e=(0,o.resolveUrl)(this.opts.uriResolver,t,n.$ref);i=f.call(this,a,e)}const{schemaId:s}=this.opts;return i=i||new c({schema:n,schemaId:s,root:a,baseId:t}),i.schema!==i.root.schema?i:void 0}},15568:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const a=n(30035),r={data:new a.Name("data"),valCxt:new a.Name("valCxt"),instancePath:new a.Name("instancePath"),parentData:new a.Name("parentData"),parentDataProperty:new a.Name("parentDataProperty"),rootData:new a.Name("rootData"),dynamicAnchors:new a.Name("dynamicAnchors"),vErrors:new a.Name("vErrors"),errors:new a.Name("errors"),this:new a.Name("this"),self:new a.Name("self"),scope:new a.Name("scope"),json:new a.Name("json"),jsonPos:new a.Name("jsonPos"),jsonLen:new a.Name("jsonLen"),jsonPart:new a.Name("jsonPart")};t.default=r},62557:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const a=n(76392);class r extends Error{constructor(e,t,n,r){super(r||`can't resolve reference ${n} from id ${t}`),this.missingRef=(0,a.resolveUrl)(e,t,n),this.missingSchema=(0,a.normalizeId)((0,a.getFullPath)(e,this.missingRef))}}t.default=r},76392:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getSchemaRefs=t.resolveUrl=t.normalizeId=t._getFullPath=t.getFullPath=t.inlineRef=void 0;const a=n(8764),r=n(66471),i=n(83475),o=new Set(["type","format","pattern","maxLength","minLength","maxProperties","minProperties","maxItems","minItems","maximum","minimum","uniqueItems","multipleOf","required","enum","const"]);t.inlineRef=function(e,t=!0){return"boolean"==typeof e||(!0===t?!s(e):!!t&&c(e)<=t)};const d=new Set(["$ref","$recursiveRef","$recursiveAnchor","$dynamicRef","$dynamicAnchor"]);function s(e){for(const t in e){if(d.has(t))return!0;const n=e[t];if(Array.isArray(n)&&n.some(s))return!0;if("object"==typeof n&&s(n))return!0}return!1}function c(e){let t=0;for(const n in e){if("$ref"===n)return 1/0;if(t++,!o.has(n)&&("object"==typeof e[n]&&(0,a.eachItem)(e[n],(e=>t+=c(e))),t===1/0))return 1/0}return t}function u(e,t="",n){!1!==n&&(t=h(t));const a=e.parse(t);return l(e,a)}function l(e,t){return e.serialize(t).split("#")[0]+"#"}t.getFullPath=u,t._getFullPath=l;const g=/#\/?$/;function h(e){return e?e.replace(g,""):""}t.normalizeId=h,t.resolveUrl=function(e,t,n){return n=h(n),e.resolve(t,n)};const f=/^[a-z_][-a-z0-9._]*$/i;t.getSchemaRefs=function(e,t){if("boolean"==typeof e)return{};const{schemaId:n,uriResolver:a}=this.opts,o=h(e[n]||t),d={"":o},s=u(a,o,!1),c={},l=new Set;return i(e,{allKeys:!0},((e,t,a,r)=>{if(void 0===r)return;const i=s+t;let o=d[r];function u(t){const n=this.opts.uriResolver.resolve;if(t=h(o?n(o,t):t),l.has(t))throw p(t);l.add(t);let a=this.refs[t];return"string"==typeof a&&(a=this.refs[a]),"object"==typeof a?g(e,a.schema,t):t!==h(i)&&("#"===t[0]?(g(e,c[t],t),c[t]=e):this.refs[t]=i),t}function m(e){if("string"==typeof e){if(!f.test(e))throw new Error(`invalid anchor "${e}"`);u.call(this,`#${e}`)}}"string"==typeof e[n]&&(o=u.call(this,e[n])),m.call(this,e.$anchor),m.call(this,e.$dynamicAnchor),d[t]=o})),c;function g(e,t,n){if(void 0!==t&&!r(e,t))throw p(n)}function p(e){return new Error(`reference "${e}" resolves to more than one schema`)}}},61839:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getRules=t.isJSONType=void 0;const n=new Set(["string","number","integer","boolean","null","object","array"]);t.isJSONType=function(e){return"string"==typeof e&&n.has(e)},t.getRules=function(){const e={number:{type:"number",rules:[]},string:{type:"string",rules:[]},array:{type:"array",rules:[]},object:{type:"object",rules:[]}};return{types:{...e,integer:!0,boolean:!0,null:!0},rules:[{rules:[]},e.number,e.string,e.array,e.object],post:{rules:[]},all:{},keywords:{}}}},8764:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.checkStrictMode=t.getErrorPath=t.Type=t.useFunc=t.setEvaluated=t.evaluatedPropsToName=t.mergeEvaluated=t.eachItem=t.unescapeJsonPointer=t.escapeJsonPointer=t.escapeFragment=t.unescapeFragment=t.schemaRefOrVal=t.schemaHasRulesButRef=t.schemaHasRules=t.checkUnknownRules=t.alwaysValidSchema=t.toHash=void 0;const a=n(30035),r=n(15454);function i(e,t=e.schema){const{opts:n,self:a}=e;if(!n.strictSchema)return;if("boolean"==typeof t)return;const r=a.RULES.keywords;for(const i in t)r[i]||f(e,`unknown keyword: "${i}"`)}function o(e,t){if("boolean"==typeof e)return!e;for(const n in e)if(t[n])return!0;return!1}function d(e){return"number"==typeof e?`${e}`:e.replace(/~/g,"~0").replace(/\//g,"~1")}function s(e){return e.replace(/~1/g,"/").replace(/~0/g,"~")}function c({mergeNames:e,mergeToName:t,mergeValues:n,resultToName:r}){return(i,o,d,s)=>{const c=void 0===d?o:d instanceof a.Name?(o instanceof a.Name?e(i,o,d):t(i,o,d),d):o instanceof a.Name?(t(i,d,o),o):n(o,d);return s!==a.Name||c instanceof a.Name?c:r(i,c)}}function u(e,t){if(!0===t)return e.var("props",!0);const n=e.var("props",a._`{}`);return void 0!==t&&l(e,n,t),n}function l(e,t,n){Object.keys(n).forEach((n=>e.assign(a._`${t}${(0,a.getProperty)(n)}`,!0)))}t.toHash=function(e){const t={};for(const n of e)t[n]=!0;return t},t.alwaysValidSchema=function(e,t){return"boolean"==typeof t?t:0===Object.keys(t).length||(i(e,t),!o(t,e.self.RULES.all))},t.checkUnknownRules=i,t.schemaHasRules=o,t.schemaHasRulesButRef=function(e,t){if("boolean"==typeof e)return!e;for(const n in e)if("$ref"!==n&&t.all[n])return!0;return!1},t.schemaRefOrVal=function({topSchemaRef:e,schemaPath:t},n,r,i){if(!i){if("number"==typeof n||"boolean"==typeof n)return n;if("string"==typeof n)return a._`${n}`}return a._`${e}${t}${(0,a.getProperty)(r)}`},t.unescapeFragment=function(e){return s(decodeURIComponent(e))},t.escapeFragment=function(e){return encodeURIComponent(d(e))},t.escapeJsonPointer=d,t.unescapeJsonPointer=s,t.eachItem=function(e,t){if(Array.isArray(e))for(const n of e)t(n);else t(e)},t.mergeEvaluated={props:c({mergeNames:(e,t,n)=>e.if(a._`${n} !== true && ${t} !== undefined`,(()=>{e.if(a._`${t} === true`,(()=>e.assign(n,!0)),(()=>e.assign(n,a._`${n} || {}`).code(a._`Object.assign(${n}, ${t})`)))})),mergeToName:(e,t,n)=>e.if(a._`${n} !== true`,(()=>{!0===t?e.assign(n,!0):(e.assign(n,a._`${n} || {}`),l(e,n,t))})),mergeValues:(e,t)=>!0===e||{...e,...t},resultToName:u}),items:c({mergeNames:(e,t,n)=>e.if(a._`${n} !== true && ${t} !== undefined`,(()=>e.assign(n,a._`${t} === true ? true : ${n} > ${t} ? ${n} : ${t}`))),mergeToName:(e,t,n)=>e.if(a._`${n} !== true`,(()=>e.assign(n,!0===t||a._`${n} > ${t} ? ${n} : ${t}`))),mergeValues:(e,t)=>!0===e||Math.max(e,t),resultToName:(e,t)=>e.var("items",t)})},t.evaluatedPropsToName=u,t.setEvaluated=l;const g={};var h;function f(e,t,n=e.opts.strictSchema){if(n){if(t=`strict mode: ${t}`,!0===n)throw new Error(t);e.self.logger.warn(t)}}t.useFunc=function(e,t){return e.scopeValue("func",{ref:t,code:g[t.code]||(g[t.code]=new r._Code(t.code))})},function(e){e[e.Num=0]="Num",e[e.Str=1]="Str"}(h=t.Type||(t.Type={})),t.getErrorPath=function(e,t,n){if(e instanceof a.Name){const r=t===h.Num;return n?r?a._`"[" + ${e} + "]"`:a._`"['" + ${e} + "']"`:r?a._`"/" + ${e}`:a._`"/" + ${e}.replace(/~/g, "~0").replace(/\\//g, "~1")`}return n?(0,a.getProperty)(e).toString():"/"+d(e)},t.checkStrictMode=f},52858:function(e,t){"use strict";function n(e,t){return t.rules.some((t=>a(e,t)))}function a(e,t){var n;return void 0!==e[t.keyword]||(null===(n=t.definition.implements)||void 0===n?void 0:n.some((t=>void 0!==e[t])))}Object.defineProperty(t,"__esModule",{value:!0}),t.shouldUseRule=t.shouldUseGroup=t.schemaHasRulesForType=void 0,t.schemaHasRulesForType=function({schema:e,self:t},a){const r=t.RULES.types[a];return r&&!0!==r&&n(e,r)},t.shouldUseGroup=n,t.shouldUseRule=a},87961:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.boolOrEmptySchema=t.topBoolOrEmptySchema=void 0;const a=n(90583),r=n(30035),i=n(15568),o={message:"boolean schema is false"};function d(e,t){const{gen:n,data:r}=e,i={gen:n,keyword:"false schema",data:r,schema:!1,schemaCode:!1,schemaValue:!1,params:{},it:e};(0,a.reportError)(i,o,void 0,t)}t.topBoolOrEmptySchema=function(e){const{gen:t,schema:n,validateName:a}=e;!1===n?d(e,!1):"object"==typeof n&&!0===n.$async?t.return(i.default.data):(t.assign(r._`${a}.errors`,null),t.return(!0))},t.boolOrEmptySchema=function(e,t){const{gen:n,schema:a}=e;!1===a?(n.var(t,!1),d(e)):n.var(t,!0)}},55119:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.reportTypeError=t.checkDataTypes=t.checkDataType=t.coerceAndCheckDataType=t.getJSONTypes=t.getSchemaTypes=t.DataType=void 0;const a=n(61839),r=n(52858),i=n(90583),o=n(30035),d=n(8764);var s;function c(e){const t=Array.isArray(e)?e:e?[e]:[];if(t.every(a.isJSONType))return t;throw new Error("type must be JSONType or JSONType[]: "+t.join(","))}!function(e){e[e.Correct=0]="Correct",e[e.Wrong=1]="Wrong"}(s=t.DataType||(t.DataType={})),t.getSchemaTypes=function(e){const t=c(e.type);if(t.includes("null")){if(!1===e.nullable)throw new Error("type: null contradicts nullable: false")}else{if(!t.length&&void 0!==e.nullable)throw new Error('"nullable" cannot be used without "type"');!0===e.nullable&&t.push("null")}return t},t.getJSONTypes=c,t.coerceAndCheckDataType=function(e,t){const{gen:n,data:a,opts:i}=e,d=function(e,t){return t?e.filter((e=>u.has(e)||"array"===t&&"array"===e)):[]}(t,i.coerceTypes),c=t.length>0&&!(0===d.length&&1===t.length&&(0,r.schemaHasRulesForType)(e,t[0]));if(c){const r=g(t,a,i.strictNumbers,s.Wrong);n.if(r,(()=>{d.length?function(e,t,n){const{gen:a,data:r,opts:i}=e,d=a.let("dataType",o._`typeof ${r}`),s=a.let("coerced",o._`undefined`);"array"===i.coerceTypes&&a.if(o._`${d} == 'object' && Array.isArray(${r}) && ${r}.length == 1`,(()=>a.assign(r,o._`${r}[0]`).assign(d,o._`typeof ${r}`).if(g(t,r,i.strictNumbers),(()=>a.assign(s,r)))));a.if(o._`${s} !== undefined`);for(const o of n)(u.has(o)||"array"===o&&"array"===i.coerceTypes)&&c(o);function c(e){switch(e){case"string":return void a.elseIf(o._`${d} == "number" || ${d} == "boolean"`).assign(s,o._`"" + ${r}`).elseIf(o._`${r} === null`).assign(s,o._`""`);case"number":return void a.elseIf(o._`${d} == "boolean" || ${r} === null
+              || (${d} == "string" && ${r} && ${r} == +${r})`).assign(s,o._`+${r}`);case"integer":return void a.elseIf(o._`${d} === "boolean" || ${r} === null
+              || (${d} === "string" && ${r} && ${r} == +${r} && !(${r} % 1))`).assign(s,o._`+${r}`);case"boolean":return void a.elseIf(o._`${r} === "false" || ${r} === 0 || ${r} === null`).assign(s,!1).elseIf(o._`${r} === "true" || ${r} === 1`).assign(s,!0);case"null":return a.elseIf(o._`${r} === "" || ${r} === 0 || ${r} === false`),void a.assign(s,null);case"array":a.elseIf(o._`${d} === "string" || ${d} === "number"
+              || ${d} === "boolean" || ${r} === null`).assign(s,o._`[${r}]`)}}a.else(),f(e),a.endIf(),a.if(o._`${s} !== undefined`,(()=>{a.assign(r,s),function({gen:e,parentData:t,parentDataProperty:n},a){e.if(o._`${t} !== undefined`,(()=>e.assign(o._`${t}[${n}]`,a)))}(e,s)}))}(e,t,d):f(e)}))}return c};const u=new Set(["string","number","integer","boolean","null"]);function l(e,t,n,a=s.Correct){const r=a===s.Correct?o.operators.EQ:o.operators.NEQ;let i;switch(e){case"null":return o._`${t} ${r} null`;case"array":i=o._`Array.isArray(${t})`;break;case"object":i=o._`${t} && typeof ${t} == "object" && !Array.isArray(${t})`;break;case"integer":i=d(o._`!(${t} % 1) && !isNaN(${t})`);break;case"number":i=d();break;default:return o._`typeof ${t} ${r} ${e}`}return a===s.Correct?i:(0,o.not)(i);function d(e=o.nil){return(0,o.and)(o._`typeof ${t} == "number"`,e,n?o._`isFinite(${t})`:o.nil)}}function g(e,t,n,a){if(1===e.length)return l(e[0],t,n,a);let r;const i=(0,d.toHash)(e);if(i.array&&i.object){const e=o._`typeof ${t} != "object"`;r=i.null?e:o._`!${t} || ${e}`,delete i.null,delete i.array,delete i.object}else r=o.nil;i.number&&delete i.integer;for(const d in i)r=(0,o.and)(r,l(d,t,n,a));return r}t.checkDataType=l,t.checkDataTypes=g;const h={message:({schema:e})=>`must be ${e}`,params:({schema:e,schemaValue:t})=>"string"==typeof e?o._`{type: ${e}}`:o._`{type: ${t}}`};function f(e){const t=function(e){const{gen:t,data:n,schema:a}=e,r=(0,d.schemaRefOrVal)(e,a,"type");return{gen:t,keyword:"type",data:n,schema:a.type,schemaCode:r,schemaValue:r,parentSchema:a,params:{},it:e}}(e);(0,i.reportError)(t,h)}t.reportTypeError=f},29043:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.assignDefaults=void 0;const a=n(30035),r=n(8764);function i(e,t,n){const{gen:i,compositeRule:o,data:d,opts:s}=e;if(void 0===n)return;const c=a._`${d}${(0,a.getProperty)(t)}`;if(o)return void(0,r.checkStrictMode)(e,`default is ignored for: ${c}`);let u=a._`${c} === undefined`;"empty"===s.useDefaults&&(u=a._`${u} || ${c} === null || ${c} === ""`),i.if(u,a._`${c} = ${(0,a.stringify)(n)}`)}t.assignDefaults=function(e,t){const{properties:n,items:a}=e.schema;if("object"===t&&n)for(const r in n)i(e,r,n[r].default);else"array"===t&&Array.isArray(a)&&a.forEach(((t,n)=>i(e,n,t.default)))}},61202:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getData=t.KeywordCxt=t.validateFunctionCode=void 0;const a=n(87961),r=n(55119),i=n(52858),o=n(55119),d=n(29043),s=n(92643),c=n(90114),u=n(30035),l=n(15568),g=n(76392),h=n(8764),f=n(90583);function p({gen:e,validateName:t,schema:n,schemaEnv:a,opts:r},i){r.code.es5?e.func(t,u._`${l.default.data}, ${l.default.valCxt}`,a.$async,(()=>{e.code(u._`"use strict"; ${m(n,r)}`),function(e,t){e.if(l.default.valCxt,(()=>{e.var(l.default.instancePath,u._`${l.default.valCxt}.${l.default.instancePath}`),e.var(l.default.parentData,u._`${l.default.valCxt}.${l.default.parentData}`),e.var(l.default.parentDataProperty,u._`${l.default.valCxt}.${l.default.parentDataProperty}`),e.var(l.default.rootData,u._`${l.default.valCxt}.${l.default.rootData}`),t.dynamicRef&&e.var(l.default.dynamicAnchors,u._`${l.default.valCxt}.${l.default.dynamicAnchors}`)}),(()=>{e.var(l.default.instancePath,u._`""`),e.var(l.default.parentData,u._`undefined`),e.var(l.default.parentDataProperty,u._`undefined`),e.var(l.default.rootData,l.default.data),t.dynamicRef&&e.var(l.default.dynamicAnchors,u._`{}`)}))}(e,r),e.code(i)})):e.func(t,u._`${l.default.data}, ${function(e){return u._`{${l.default.instancePath}="", ${l.default.parentData}, ${l.default.parentDataProperty}, ${l.default.rootData}=${l.default.data}${e.dynamicRef?u._`, ${l.default.dynamicAnchors}={}`:u.nil}}={}`}(r)}`,a.$async,(()=>e.code(m(n,r)).code(i)))}function m(e,t){const n="object"==typeof e&&e[t.schemaId];return n&&(t.code.source||t.code.process)?u._`/*# sourceURL=${n} */`:u.nil}function R(e,t){y(e)&&(v(e),b(e))?function(e,t){const{schema:n,gen:a,opts:r}=e;r.$comment&&n.$comment&&w(e);(function(e){const t=e.schema[e.opts.schemaId];t&&(e.baseId=(0,g.resolveUrl)(e.opts.uriResolver,e.baseId,t))})(e),function(e){if(e.schema.$async&&!e.schemaEnv.$async)throw new Error("async schema in sync schema")}(e);const i=a.const("_errs",l.default.errors);_(e,i),a.var(t,u._`${i} === ${l.default.errors}`)}(e,t):(0,a.boolOrEmptySchema)(e,t)}function b({schema:e,self:t}){if("boolean"==typeof e)return!e;for(const n in e)if(t.RULES.all[n])return!0;return!1}function y(e){return"boolean"!=typeof e.schema}function v(e){(0,h.checkUnknownRules)(e),function(e){const{schema:t,errSchemaPath:n,opts:a,self:r}=e;t.$ref&&a.ignoreKeywordsWithRef&&(0,h.schemaHasRulesButRef)(t,r.RULES)&&r.logger.warn(`$ref: keywords ignored in schema at path "${n}"`)}(e)}function _(e,t){if(e.opts.jtd)return M(e,[],!1,t);const n=(0,r.getSchemaTypes)(e.schema);M(e,n,!(0,r.coerceAndCheckDataType)(e,n),t)}function w({gen:e,schemaEnv:t,schema:n,errSchemaPath:a,opts:r}){const i=n.$comment;if(!0===r.$comment)e.code(u._`${l.default.self}.logger.log(${i})`);else if("function"==typeof r.$comment){const n=u.str`${a}/$comment`,r=e.scopeValue("root",{ref:t.root});e.code(u._`${l.default.self}.opts.$comment(${i}, ${n}, ${r}.schema)`)}}function M(e,t,n,a){const{gen:r,schema:d,data:s,allErrors:c,opts:g,self:f}=e,{RULES:p}=f;function m(h){(0,i.shouldUseGroup)(d,h)&&(h.type?(r.if((0,o.checkDataType)(h.type,s,g.strictNumbers)),x(e,h),1===t.length&&t[0]===h.type&&n&&(r.else(),(0,o.reportTypeError)(e)),r.endIf()):x(e,h),c||r.if(u._`${l.default.errors} === ${a||0}`))}!d.$ref||!g.ignoreKeywordsWithRef&&(0,h.schemaHasRulesButRef)(d,p)?(g.jtd||function(e,t){if(e.schemaEnv.meta||!e.opts.strictTypes)return;(function(e,t){if(!t.length)return;if(!e.dataTypes.length)return void(e.dataTypes=t);t.forEach((t=>{S(e.dataTypes,t)||k(e,`type "${t}" not allowed by context "${e.dataTypes.join(",")}"`)})),function(e,t){const n=[];for(const a of e.dataTypes)S(t,a)?n.push(a):t.includes("integer")&&"number"===a&&n.push("integer");e.dataTypes=n}(e,t)})(e,t),e.opts.allowUnionTypes||function(e,t){t.length>1&&(2!==t.length||!t.includes("null"))&&k(e,"use allowUnionTypes to allow union type keyword")}(e,t);!function(e,t){const n=e.self.RULES.all;for(const a in n){const r=n[a];if("object"==typeof r&&(0,i.shouldUseRule)(e.schema,r)){const{type:n}=r.definition;n.length&&!n.some((e=>E(t,e)))&&k(e,`missing type "${n.join(",")}" for keyword "${a}"`)}}}(e,e.dataTypes)}(e,t),r.block((()=>{for(const e of p.rules)m(e);m(p.post)}))):r.block((()=>D(e,"$ref",p.all.$ref.definition)))}function x(e,t){const{gen:n,schema:a,opts:{useDefaults:r}}=e;r&&(0,d.assignDefaults)(e,t.type),n.block((()=>{for(const n of t.rules)(0,i.shouldUseRule)(a,n)&&D(e,n.keyword,n.definition,t.type)}))}function E(e,t){return e.includes(t)||"number"===t&&e.includes("integer")}function S(e,t){return e.includes(t)||"integer"===t&&e.includes("number")}function k(e,t){t+=` at "${e.schemaEnv.baseId+e.errSchemaPath}" (strictTypes)`,(0,h.checkStrictMode)(e,t,e.opts.strictTypes)}t.validateFunctionCode=function(e){y(e)&&(v(e),b(e))?function(e){const{schema:t,opts:n,gen:a}=e;p(e,(()=>{n.$comment&&t.$comment&&w(e),function(e){const{schema:t,opts:n}=e;void 0!==t.default&&n.useDefaults&&n.strictSchema&&(0,h.checkStrictMode)(e,"default is ignored in the schema root")}(e),a.let(l.default.vErrors,null),a.let(l.default.errors,0),n.unevaluated&&function(e){const{gen:t,validateName:n}=e;e.evaluated=t.const("evaluated",u._`${n}.evaluated`),t.if(u._`${e.evaluated}.dynamicProps`,(()=>t.assign(u._`${e.evaluated}.props`,u._`undefined`))),t.if(u._`${e.evaluated}.dynamicItems`,(()=>t.assign(u._`${e.evaluated}.items`,u._`undefined`)))}(e),_(e),function(e){const{gen:t,schemaEnv:n,validateName:a,ValidationError:r,opts:i}=e;n.$async?t.if(u._`${l.default.errors} === 0`,(()=>t.return(l.default.data)),(()=>t.throw(u._`new ${r}(${l.default.vErrors})`))):(t.assign(u._`${a}.errors`,l.default.vErrors),i.unevaluated&&function({gen:e,evaluated:t,props:n,items:a}){n instanceof u.Name&&e.assign(u._`${t}.props`,n);a instanceof u.Name&&e.assign(u._`${t}.items`,a)}(e),t.return(u._`${l.default.errors} === 0`))}(e)}))}(e):p(e,(()=>(0,a.topBoolOrEmptySchema)(e)))};class N{constructor(e,t,n){if((0,s.validateKeywordUsage)(e,t,n),this.gen=e.gen,this.allErrors=e.allErrors,this.keyword=n,this.data=e.data,this.schema=e.schema[n],this.$data=t.$data&&e.opts.$data&&this.schema&&this.schema.$data,this.schemaValue=(0,h.schemaRefOrVal)(e,this.schema,n,this.$data),this.schemaType=t.schemaType,this.parentSchema=e.schema,this.params={},this.it=e,this.def=t,this.$data)this.schemaCode=e.gen.const("vSchema",T(this.$data,e));else if(this.schemaCode=this.schemaValue,!(0,s.validSchemaType)(this.schema,t.schemaType,t.allowUndefined))throw new Error(`${n} value must be ${JSON.stringify(t.schemaType)}`);("code"in t?t.trackErrors:!1!==t.errors)&&(this.errsCount=e.gen.const("_errs",l.default.errors))}result(e,t,n){this.failResult((0,u.not)(e),t,n)}failResult(e,t,n){this.gen.if(e),n?n():this.error(),t?(this.gen.else(),t(),this.allErrors&&this.gen.endIf()):this.allErrors?this.gen.endIf():this.gen.else()}pass(e,t){this.failResult((0,u.not)(e),void 0,t)}fail(e){if(void 0===e)return this.error(),void(this.allErrors||this.gen.if(!1));this.gen.if(e),this.error(),this.allErrors?this.gen.endIf():this.gen.else()}fail$data(e){if(!this.$data)return this.fail(e);const{schemaCode:t}=this;this.fail(u._`${t} !== undefined && (${(0,u.or)(this.invalid$data(),e)})`)}error(e,t,n){if(t)return this.setParams(t),this._error(e,n),void this.setParams({});this._error(e,n)}_error(e,t){(e?f.reportExtraError:f.reportError)(this,this.def.error,t)}$dataError(){(0,f.reportError)(this,this.def.$dataError||f.keyword$DataError)}reset(){if(void 0===this.errsCount)throw new Error('add "trackErrors" to keyword definition');(0,f.resetErrorsCount)(this.gen,this.errsCount)}ok(e){this.allErrors||this.gen.if(e)}setParams(e,t){t?Object.assign(this.params,e):this.params=e}block$data(e,t,n=u.nil){this.gen.block((()=>{this.check$data(e,n),t()}))}check$data(e=u.nil,t=u.nil){if(!this.$data)return;const{gen:n,schemaCode:a,schemaType:r,def:i}=this;n.if((0,u.or)(u._`${a} === undefined`,t)),e!==u.nil&&n.assign(e,!0),(r.length||i.validateSchema)&&(n.elseIf(this.invalid$data()),this.$dataError(),e!==u.nil&&n.assign(e,!1)),n.else()}invalid$data(){const{gen:e,schemaCode:t,schemaType:n,def:a,it:r}=this;return(0,u.or)(function(){if(n.length){if(!(t instanceof u.Name))throw new Error("ajv implementation error");const e=Array.isArray(n)?n:[n];return u._`${(0,o.checkDataTypes)(e,t,r.opts.strictNumbers,o.DataType.Wrong)}`}return u.nil}(),function(){if(a.validateSchema){const n=e.scopeValue("validate$data",{ref:a.validateSchema});return u._`!${n}(${t})`}return u.nil}())}subschema(e,t){const n=(0,c.getSubschema)(this.it,e);(0,c.extendSubschemaData)(n,this.it,e),(0,c.extendSubschemaMode)(n,e);const a={...this.it,...n,items:void 0,props:void 0};return R(a,t),a}mergeEvaluated(e,t){const{it:n,gen:a}=this;n.opts.unevaluated&&(!0!==n.props&&void 0!==e.props&&(n.props=h.mergeEvaluated.props(a,e.props,n.props,t)),!0!==n.items&&void 0!==e.items&&(n.items=h.mergeEvaluated.items(a,e.items,n.items,t)))}mergeValidEvaluated(e,t){const{it:n,gen:a}=this;if(n.opts.unevaluated&&(!0!==n.props||!0!==n.items))return a.if(t,(()=>this.mergeEvaluated(e,u.Name))),!0}}function D(e,t,n,a){const r=new N(e,n,t);"code"in n?n.code(r,a):r.$data&&n.validate?(0,s.funcKeywordCode)(r,n):"macro"in n?(0,s.macroKeywordCode)(r,n):(n.compile||n.validate)&&(0,s.funcKeywordCode)(r,n)}t.KeywordCxt=N;const A=/^\/(?:[^~]|~0|~1)*$/,j=/^([0-9]+)(#|\/(?:[^~]|~0|~1)*)?$/;function T(e,{dataLevel:t,dataNames:n,dataPathArr:a}){let r,i;if(""===e)return l.default.rootData;if("/"===e[0]){if(!A.test(e))throw new Error(`Invalid JSON-pointer: ${e}`);r=e,i=l.default.rootData}else{const o=j.exec(e);if(!o)throw new Error(`Invalid JSON-pointer: ${e}`);const d=+o[1];if(r=o[2],"#"===r){if(d>=t)throw new Error(s("property/index",d));return a[t-d]}if(d>t)throw new Error(s("data",d));if(i=n[t-d],!r)return i}let o=i;const d=r.split("/");for(const c of d)c&&(i=u._`${i}${(0,u.getProperty)((0,h.unescapeJsonPointer)(c))}`,o=u._`${o} && ${i}`);return o;function s(e,n){return`Cannot access ${e} ${n} levels up, current level is ${t}`}}t.getData=T},92643:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.validateKeywordUsage=t.validSchemaType=t.funcKeywordCode=t.macroKeywordCode=void 0;const a=n(30035),r=n(15568),i=n(62392),o=n(90583);function d(e){const{gen:t,data:n,it:r}=e;t.if(r.parentData,(()=>t.assign(n,a._`${r.parentData}[${r.parentDataProperty}]`)))}function s(e,t,n){if(void 0===n)throw new Error(`keyword "${t}" failed to compile`);return e.scopeValue("keyword","function"==typeof n?{ref:n}:{ref:n,code:(0,a.stringify)(n)})}t.macroKeywordCode=function(e,t){const{gen:n,keyword:r,schema:i,parentSchema:o,it:d}=e,c=t.macro.call(d.self,i,o,d),u=s(n,r,c);!1!==d.opts.validateSchema&&d.self.validateSchema(c,!0);const l=n.name("valid");e.subschema({schema:c,schemaPath:a.nil,errSchemaPath:`${d.errSchemaPath}/${r}`,topSchemaRef:u,compositeRule:!0},l),e.pass(l,(()=>e.error(!0)))},t.funcKeywordCode=function(e,t){var n;const{gen:c,keyword:u,schema:l,parentSchema:g,$data:h,it:f}=e;!function({schemaEnv:e},t){if(t.async&&!e.$async)throw new Error("async keyword in sync schema")}(f,t);const p=!h&&t.compile?t.compile.call(f.self,l,g,f):t.validate,m=s(c,u,p),R=c.let("valid");function b(n=(t.async?a._`await `:a.nil)){const o=f.opts.passContext?r.default.this:r.default.self,d=!("compile"in t&&!h||!1===t.schema);c.assign(R,a._`${n}${(0,i.callValidateCode)(e,m,o,d)}`,t.modifying)}function y(e){var n;c.if((0,a.not)(null!==(n=t.valid)&&void 0!==n?n:R),e)}e.block$data(R,(function(){if(!1===t.errors)b(),t.modifying&&d(e),y((()=>e.error()));else{const n=t.async?function(){const e=c.let("ruleErrs",null);return c.try((()=>b(a._`await `)),(t=>c.assign(R,!1).if(a._`${t} instanceof ${f.ValidationError}`,(()=>c.assign(e,a._`${t}.errors`)),(()=>c.throw(t))))),e}():function(){const e=a._`${m}.errors`;return c.assign(e,null),b(a.nil),e}();t.modifying&&d(e),y((()=>function(e,t){const{gen:n}=e;n.if(a._`Array.isArray(${t})`,(()=>{n.assign(r.default.vErrors,a._`${r.default.vErrors} === null ? ${t} : ${r.default.vErrors}.concat(${t})`).assign(r.default.errors,a._`${r.default.vErrors}.length`),(0,o.extendErrors)(e)}),(()=>e.error()))}(e,n)))}})),e.ok(null!==(n=t.valid)&&void 0!==n?n:R)},t.validSchemaType=function(e,t,n=!1){return!t.length||t.some((t=>"array"===t?Array.isArray(e):"object"===t?e&&"object"==typeof e&&!Array.isArray(e):typeof e==t||n&&void 0===e))},t.validateKeywordUsage=function({schema:e,opts:t,self:n,errSchemaPath:a},r,i){if(Array.isArray(r.keyword)?!r.keyword.includes(i):r.keyword!==i)throw new Error("ajv implementation error");const o=r.dependencies;if(null==o?void 0:o.some((t=>!Object.prototype.hasOwnProperty.call(e,t))))throw new Error(`parent schema must have dependencies of ${i}: ${o.join(",")}`);if(r.validateSchema){if(!r.validateSchema(e[i])){const e=`keyword "${i}" value is invalid at path "${a}": `+n.errorsText(r.validateSchema.errors);if("log"!==t.validateSchema)throw new Error(e);n.logger.error(e)}}}},90114:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.extendSubschemaMode=t.extendSubschemaData=t.getSubschema=void 0;const a=n(30035),r=n(8764);t.getSubschema=function(e,{keyword:t,schemaProp:n,schema:i,schemaPath:o,errSchemaPath:d,topSchemaRef:s}){if(void 0!==t&&void 0!==i)throw new Error('both "keyword" and "schema" passed, only one allowed');if(void 0!==t){const i=e.schema[t];return void 0===n?{schema:i,schemaPath:a._`${e.schemaPath}${(0,a.getProperty)(t)}`,errSchemaPath:`${e.errSchemaPath}/${t}`}:{schema:i[n],schemaPath:a._`${e.schemaPath}${(0,a.getProperty)(t)}${(0,a.getProperty)(n)}`,errSchemaPath:`${e.errSchemaPath}/${t}/${(0,r.escapeFragment)(n)}`}}if(void 0!==i){if(void 0===o||void 0===d||void 0===s)throw new Error('"schemaPath", "errSchemaPath" and "topSchemaRef" are required with "schema"');return{schema:i,schemaPath:o,topSchemaRef:s,errSchemaPath:d}}throw new Error('either "keyword" or "schema" must be passed')},t.extendSubschemaData=function(e,t,{dataProp:n,dataPropType:i,data:o,dataTypes:d,propertyName:s}){if(void 0!==o&&void 0!==n)throw new Error('both "data" and "dataProp" passed, only one allowed');const{gen:c}=t;if(void 0!==n){const{errorPath:o,dataPathArr:d,opts:s}=t;u(c.let("data",a._`${t.data}${(0,a.getProperty)(n)}`,!0)),e.errorPath=a.str`${o}${(0,r.getErrorPath)(n,i,s.jsPropertySyntax)}`,e.parentDataProperty=a._`${n}`,e.dataPathArr=[...d,e.parentDataProperty]}if(void 0!==o){u(o instanceof a.Name?o:c.let("data",o,!0)),void 0!==s&&(e.propertyName=s)}function u(n){e.data=n,e.dataLevel=t.dataLevel+1,e.dataTypes=[],t.definedProperties=new Set,e.parentData=t.data,e.dataNames=[...t.dataNames,n]}d&&(e.dataTypes=d)},t.extendSubschemaMode=function(e,{jtdDiscriminator:t,jtdMetadata:n,compositeRule:a,createErrors:r,allErrors:i}){void 0!==a&&(e.compositeRule=a),void 0!==r&&(e.createErrors=r),void 0!==i&&(e.allErrors=i),e.jtdDiscriminator=t,e.jtdMetadata=n}},72940:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.CodeGen=t.Name=t.nil=t.stringify=t.str=t._=t.KeywordCxt=void 0;var a=n(61202);Object.defineProperty(t,"KeywordCxt",{enumerable:!0,get:function(){return a.KeywordCxt}});var r=n(30035);Object.defineProperty(t,"_",{enumerable:!0,get:function(){return r._}}),Object.defineProperty(t,"str",{enumerable:!0,get:function(){return r.str}}),Object.defineProperty(t,"stringify",{enumerable:!0,get:function(){return r.stringify}}),Object.defineProperty(t,"nil",{enumerable:!0,get:function(){return r.nil}}),Object.defineProperty(t,"Name",{enumerable:!0,get:function(){return r.Name}}),Object.defineProperty(t,"CodeGen",{enumerable:!0,get:function(){return r.CodeGen}});const i=n(71550),o=n(62557),d=n(61839),s=n(64361),c=n(30035),u=n(76392),l=n(55119),g=n(8764),h=n(37705),f=n(23153),p=(e,t)=>new RegExp(e,t);p.code="new RegExp";const m=["removeAdditional","useDefaults","coerceTypes"],R=new Set(["validate","serialize","parse","wrapper","root","schema","keyword","pattern","formats","validate$data","func","obj","Error"]),b={errorDataPath:"",format:"`validateFormats: false` can be used instead.",nullable:'"nullable" keyword is supported by default.',jsonPointers:"Deprecated jsPropertySyntax can be used instead.",extendRefs:"Deprecated ignoreKeywordsWithRef can be used instead.",missingRefs:"Pass empty schema with $id that should be ignored to ajv.addSchema.",processCode:"Use option `code: {process: (code, schemaEnv: object) => string}`",sourceCode:"Use option `code: {source: true}`",strictDefaults:"It is default now, see option `strict`.",strictKeywords:"It is default now, see option `strict`.",uniqueItems:'"uniqueItems" keyword is always validated.',unknownFormats:"Disable strict mode or pass `true` to `ajv.addFormat` (or `formats` option).",cache:"Map is used as cache, schema object as key.",serialize:"Map is used as cache, schema object as key.",ajvErrors:"It is default now."},y={ignoreKeywordsWithRef:"",jsPropertySyntax:"",unicode:'"minLength"/"maxLength" account for unicode characters by default.'};function v(e){var t,n,a,r,i,o,d,s,c,u,l,g,h,m,R,b,y,v,_,w,M,x,E,S,k;const N=e.strict,D=null===(t=e.code)||void 0===t?void 0:t.optimize,A=!0===D||void 0===D?1:D||0,j=null!==(a=null===(n=e.code)||void 0===n?void 0:n.regExp)&&void 0!==a?a:p,T=null!==(r=e.uriResolver)&&void 0!==r?r:f.default;return{strictSchema:null===(o=null!==(i=e.strictSchema)&&void 0!==i?i:N)||void 0===o||o,strictNumbers:null===(s=null!==(d=e.strictNumbers)&&void 0!==d?d:N)||void 0===s||s,strictTypes:null!==(u=null!==(c=e.strictTypes)&&void 0!==c?c:N)&&void 0!==u?u:"log",strictTuples:null!==(g=null!==(l=e.strictTuples)&&void 0!==l?l:N)&&void 0!==g?g:"log",strictRequired:null!==(m=null!==(h=e.strictRequired)&&void 0!==h?h:N)&&void 0!==m&&m,code:e.code?{...e.code,optimize:A,regExp:j}:{optimize:A,regExp:j},loopRequired:null!==(R=e.loopRequired)&&void 0!==R?R:200,loopEnum:null!==(b=e.loopEnum)&&void 0!==b?b:200,meta:null===(y=e.meta)||void 0===y||y,messages:null===(v=e.messages)||void 0===v||v,inlineRefs:null===(_=e.inlineRefs)||void 0===_||_,schemaId:null!==(w=e.schemaId)&&void 0!==w?w:"$id",addUsedSchema:null===(M=e.addUsedSchema)||void 0===M||M,validateSchema:null===(x=e.validateSchema)||void 0===x||x,validateFormats:null===(E=e.validateFormats)||void 0===E||E,unicodeRegExp:null===(S=e.unicodeRegExp)||void 0===S||S,int32range:null===(k=e.int32range)||void 0===k||k,uriResolver:T}}class _{constructor(e={}){this.schemas={},this.refs={},this.formats={},this._compilations=new Set,this._loading={},this._cache=new Map,e=this.opts={...e,...v(e)};const{es5:t,lines:n}=this.opts.code;this.scope=new c.ValueScope({scope:{},prefixes:R,es5:t,lines:n}),this.logger=function(e){if(!1===e)return N;if(void 0===e)return console;if(e.log&&e.warn&&e.error)return e;throw new Error("logger must implement log, warn and error methods")}(e.logger);const a=e.validateFormats;e.validateFormats=!1,this.RULES=(0,d.getRules)(),w.call(this,b,e,"NOT SUPPORTED"),w.call(this,y,e,"DEPRECATED","warn"),this._metaOpts=k.call(this),e.formats&&E.call(this),this._addVocabularies(),this._addDefaultMetaSchema(),e.keywords&&S.call(this,e.keywords),"object"==typeof e.meta&&this.addMetaSchema(e.meta),x.call(this),e.validateFormats=a}_addVocabularies(){this.addKeyword("$async")}_addDefaultMetaSchema(){const{$data:e,meta:t,schemaId:n}=this.opts;let a=h;"id"===n&&(a={...h},a.id=a.$id,delete a.$id),t&&e&&this.addMetaSchema(a,a[n],!1)}defaultMeta(){const{meta:e,schemaId:t}=this.opts;return this.opts.defaultMeta="object"==typeof e?e[t]||e:void 0}validate(e,t){let n;if("string"==typeof e){if(n=this.getSchema(e),!n)throw new Error(`no schema with key or ref "${e}"`)}else n=this.compile(e);const a=n(t);return"$async"in n||(this.errors=n.errors),a}compile(e,t){const n=this._addSchema(e,t);return n.validate||this._compileSchemaEnv(n)}compileAsync(e,t){if("function"!=typeof this.opts.loadSchema)throw new Error("options.loadSchema should be a function");const{loadSchema:n}=this.opts;return a.call(this,e,t);async function a(e,t){await r.call(this,e.$schema);const n=this._addSchema(e,t);return n.validate||i.call(this,n)}async function r(e){e&&!this.getSchema(e)&&await a.call(this,{$ref:e},!0)}async function i(e){try{return this._compileSchemaEnv(e)}catch(t){if(!(t instanceof o.default))throw t;return d.call(this,t),await s.call(this,t.missingSchema),i.call(this,e)}}function d({missingSchema:e,missingRef:t}){if(this.refs[e])throw new Error(`AnySchema ${e} is loaded but ${t} cannot be resolved`)}async function s(e){const n=await c.call(this,e);this.refs[e]||await r.call(this,n.$schema),this.refs[e]||this.addSchema(n,e,t)}async function c(e){const t=this._loading[e];if(t)return t;try{return await(this._loading[e]=n(e))}finally{delete this._loading[e]}}}addSchema(e,t,n,a=this.opts.validateSchema){if(Array.isArray(e)){for(const t of e)this.addSchema(t,void 0,n,a);return this}let r;if("object"==typeof e){const{schemaId:t}=this.opts;if(r=e[t],void 0!==r&&"string"!=typeof r)throw new Error(`schema ${t} must be string`)}return t=(0,u.normalizeId)(t||r),this._checkUnique(t),this.schemas[t]=this._addSchema(e,n,t,a,!0),this}addMetaSchema(e,t,n=this.opts.validateSchema){return this.addSchema(e,t,!0,n),this}validateSchema(e,t){if("boolean"==typeof e)return!0;let n;if(n=e.$schema,void 0!==n&&"string"!=typeof n)throw new Error("$schema must be a string");if(n=n||this.opts.defaultMeta||this.defaultMeta(),!n)return this.logger.warn("meta-schema not available"),this.errors=null,!0;const a=this.validate(n,e);if(!a&&t){const e="schema is invalid: "+this.errorsText();if("log"!==this.opts.validateSchema)throw new Error(e);this.logger.error(e)}return a}getSchema(e){let t;for(;"string"==typeof(t=M.call(this,e));)e=t;if(void 0===t){const{schemaId:n}=this.opts,a=new s.SchemaEnv({schema:{},schemaId:n});if(t=s.resolveSchema.call(this,a,e),!t)return;this.refs[e]=t}return t.validate||this._compileSchemaEnv(t)}removeSchema(e){if(e instanceof RegExp)return this._removeAllSchemas(this.schemas,e),this._removeAllSchemas(this.refs,e),this;switch(typeof e){case"undefined":return this._removeAllSchemas(this.schemas),this._removeAllSchemas(this.refs),this._cache.clear(),this;case"string":{const t=M.call(this,e);return"object"==typeof t&&this._cache.delete(t.schema),delete this.schemas[e],delete this.refs[e],this}case"object":{const t=e;this._cache.delete(t);let n=e[this.opts.schemaId];return n&&(n=(0,u.normalizeId)(n),delete this.schemas[n],delete this.refs[n]),this}default:throw new Error("ajv.removeSchema: invalid parameter")}}addVocabulary(e){for(const t of e)this.addKeyword(t);return this}addKeyword(e,t){let n;if("string"==typeof e)n=e,"object"==typeof t&&(this.logger.warn("these parameters are deprecated, see docs for addKeyword"),t.keyword=n);else{if("object"!=typeof e||void 0!==t)throw new Error("invalid addKeywords parameters");if(n=(t=e).keyword,Array.isArray(n)&&!n.length)throw new Error("addKeywords: keyword must be string or non-empty array")}if(A.call(this,n,t),!t)return(0,g.eachItem)(n,(e=>j.call(this,e))),this;L.call(this,t);const a={...t,type:(0,l.getJSONTypes)(t.type),schemaType:(0,l.getJSONTypes)(t.schemaType)};return(0,g.eachItem)(n,0===a.type.length?e=>j.call(this,e,a):e=>a.type.forEach((t=>j.call(this,e,a,t)))),this}getKeyword(e){const t=this.RULES.all[e];return"object"==typeof t?t.definition:!!t}removeKeyword(e){const{RULES:t}=this;delete t.keywords[e],delete t.all[e];for(const n of t.rules){const t=n.rules.findIndex((t=>t.keyword===e));t>=0&&n.rules.splice(t,1)}return this}addFormat(e,t){return"string"==typeof t&&(t=new RegExp(t)),this.formats[e]=t,this}errorsText(e=this.errors,{separator:t=", ",dataVar:n="data"}={}){return e&&0!==e.length?e.map((e=>`${n}${e.instancePath} ${e.message}`)).reduce(((e,n)=>e+t+n)):"No errors"}$dataMetaSchema(e,t){const n=this.RULES.all;e=JSON.parse(JSON.stringify(e));for(const a of t){const t=a.split("/").slice(1);let r=e;for(const e of t)r=r[e];for(const e in n){const t=n[e];if("object"!=typeof t)continue;const{$data:a}=t.definition,i=r[e];a&&i&&(r[e]=C(i))}}return e}_removeAllSchemas(e,t){for(const n in e){const a=e[n];t&&!t.test(n)||("string"==typeof a?delete e[n]:a&&!a.meta&&(this._cache.delete(a.schema),delete e[n]))}}_addSchema(e,t,n,a=this.opts.validateSchema,r=this.opts.addUsedSchema){let i;const{schemaId:o}=this.opts;if("object"==typeof e)i=e[o];else{if(this.opts.jtd)throw new Error("schema must be object");if("boolean"!=typeof e)throw new Error("schema must be object or boolean")}let d=this._cache.get(e);if(void 0!==d)return d;n=(0,u.normalizeId)(i||n);const c=u.getSchemaRefs.call(this,e,n);return d=new s.SchemaEnv({schema:e,schemaId:o,meta:t,baseId:n,localRefs:c}),this._cache.set(d.schema,d),r&&!n.startsWith("#")&&(n&&this._checkUnique(n),this.refs[n]=d),a&&this.validateSchema(e,!0),d}_checkUnique(e){if(this.schemas[e]||this.refs[e])throw new Error(`schema with key or id "${e}" already exists`)}_compileSchemaEnv(e){if(e.meta?this._compileMetaSchema(e):s.compileSchema.call(this,e),!e.validate)throw new Error("ajv implementation error");return e.validate}_compileMetaSchema(e){const t=this.opts;this.opts=this._metaOpts;try{s.compileSchema.call(this,e)}finally{this.opts=t}}}function w(e,t,n,a="error"){for(const r in e){const i=r;i in t&&this.logger[a](`${n}: option ${r}. ${e[i]}`)}}function M(e){return e=(0,u.normalizeId)(e),this.schemas[e]||this.refs[e]}function x(){const e=this.opts.schemas;if(e)if(Array.isArray(e))this.addSchema(e);else for(const t in e)this.addSchema(e[t],t)}function E(){for(const e in this.opts.formats){const t=this.opts.formats[e];t&&this.addFormat(e,t)}}function S(e){if(Array.isArray(e))this.addVocabulary(e);else{this.logger.warn("keywords option as map is deprecated, pass array");for(const t in e){const n=e[t];n.keyword||(n.keyword=t),this.addKeyword(n)}}}function k(){const e={...this.opts};for(const t of m)delete e[t];return e}t.default=_,_.ValidationError=i.default,_.MissingRefError=o.default;const N={log(){},warn(){},error(){}};const D=/^[a-z_$][a-z0-9_$:-]*$/i;function A(e,t){const{RULES:n}=this;if((0,g.eachItem)(e,(e=>{if(n.keywords[e])throw new Error(`Keyword ${e} is already defined`);if(!D.test(e))throw new Error(`Keyword ${e} has invalid name`)})),t&&t.$data&&!("code"in t)&&!("validate"in t))throw new Error('$data keyword must have "code" or "validate" function')}function j(e,t,n){var a;const r=null==t?void 0:t.post;if(n&&r)throw new Error('keyword with "post" flag cannot have "type"');const{RULES:i}=this;let o=r?i.post:i.rules.find((({type:e})=>e===n));if(o||(o={type:n,rules:[]},i.rules.push(o)),i.keywords[e]=!0,!t)return;const d={keyword:e,definition:{...t,type:(0,l.getJSONTypes)(t.type),schemaType:(0,l.getJSONTypes)(t.schemaType)}};t.before?T.call(this,o,d,t.before):o.rules.push(d),i.all[e]=d,null===(a=t.implements)||void 0===a||a.forEach((e=>this.addKeyword(e)))}function T(e,t,n){const a=e.rules.findIndex((e=>e.keyword===n));a>=0?e.rules.splice(a,0,t):(e.rules.push(t),this.logger.warn(`rule ${n} is not defined`))}function L(e){let{metaSchema:t}=e;void 0!==t&&(e.$data&&this.opts.$data&&(t=C(t)),e.validateSchema=this.compile(t,!0))}const I={$ref:"https://raw.githubusercontent.com/ajv-validator/ajv/master/lib/refs/data.json#"};function C(e){return{anyOf:[e,I]}}},50863:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const a=n(66471);a.code='require("ajv/dist/runtime/equal").default',t.default=a},80733:function(e,t){"use strict";function n(e){const t=e.length;let n,a=0,r=0;for(;r<t;)a++,n=e.charCodeAt(r++),n>=55296&&n<=56319&&r<t&&(n=e.charCodeAt(r),56320==(64512&n)&&r++);return a}Object.defineProperty(t,"__esModule",{value:!0}),t.default=n,n.code='require("ajv/dist/runtime/ucs2length").default'},23153:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const a=n(22371);a.code='require("ajv/dist/runtime/uri").default',t.default=a},71550:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});class n extends Error{constructor(e){super("validation failed"),this.errors=e,this.ajv=this.validation=!0}}t.default=n},62558:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.validateAdditionalItems=void 0;const a=n(30035),r=n(8764),i={keyword:"additionalItems",type:"array",schemaType:["boolean","object"],before:"uniqueItems",error:{message:({params:{len:e}})=>a.str`must NOT have more than ${e} items`,params:({params:{len:e}})=>a._`{limit: ${e}}`},code(e){const{parentSchema:t,it:n}=e,{items:a}=t;Array.isArray(a)?o(e,a):(0,r.checkStrictMode)(n,'"additionalItems" is ignored when "items" is not an array of schemas')}};function o(e,t){const{gen:n,schema:i,data:o,keyword:d,it:s}=e;s.items=!0;const c=n.const("len",a._`${o}.length`);if(!1===i)e.setParams({len:t.length}),e.pass(a._`${c} <= ${t.length}`);else if("object"==typeof i&&!(0,r.alwaysValidSchema)(s,i)){const i=n.var("valid",a._`${c} <= ${t.length}`);n.if((0,a.not)(i),(()=>function(i){n.forRange("i",t.length,c,(t=>{e.subschema({keyword:d,dataProp:t,dataPropType:r.Type.Num},i),s.allErrors||n.if((0,a.not)(i),(()=>n.break()))}))}(i))),e.ok(i)}}t.validateAdditionalItems=o,t.default=i},12630:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const a=n(62392),r=n(30035),i=n(15568),o=n(8764),d={keyword:"additionalProperties",type:["object"],schemaType:["boolean","object"],allowUndefined:!0,trackErrors:!0,error:{message:"must NOT have additional properties",params:({params:e})=>r._`{additionalProperty: ${e.additionalProperty}}`},code(e){const{gen:t,schema:n,parentSchema:d,data:s,errsCount:c,it:u}=e;if(!c)throw new Error("ajv implementation error");const{allErrors:l,opts:g}=u;if(u.props=!0,"all"!==g.removeAdditional&&(0,o.alwaysValidSchema)(u,n))return;const h=(0,a.allSchemaProperties)(d.properties),f=(0,a.allSchemaProperties)(d.patternProperties);function p(e){t.code(r._`delete ${s}[${e}]`)}function m(a){if("all"===g.removeAdditional||g.removeAdditional&&!1===n)p(a);else{if(!1===n)return e.setParams({additionalProperty:a}),e.error(),void(l||t.break());if("object"==typeof n&&!(0,o.alwaysValidSchema)(u,n)){const n=t.name("valid");"failing"===g.removeAdditional?(R(a,n,!1),t.if((0,r.not)(n),(()=>{e.reset(),p(a)}))):(R(a,n),l||t.if((0,r.not)(n),(()=>t.break())))}}}function R(t,n,a){const r={keyword:"additionalProperties",dataProp:t,dataPropType:o.Type.Str};!1===a&&Object.assign(r,{compositeRule:!0,createErrors:!1,allErrors:!1}),e.subschema(r,n)}t.forIn("key",s,(n=>{h.length||f.length?t.if(function(n){let i;if(h.length>8){const e=(0,o.schemaRefOrVal)(u,d.properties,"properties");i=(0,a.isOwnProperty)(t,e,n)}else i=h.length?(0,r.or)(...h.map((e=>r._`${n} === ${e}`))):r.nil;return f.length&&(i=(0,r.or)(i,...f.map((t=>r._`${(0,a.usePattern)(e,t)}.test(${n})`)))),(0,r.not)(i)}(n),(()=>m(n))):m(n)})),e.ok(r._`${c} === ${i.default.errors}`)}};t.default=d},79963:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const a=n(8764),r={keyword:"allOf",schemaType:"array",code(e){const{gen:t,schema:n,it:r}=e;if(!Array.isArray(n))throw new Error("ajv implementation error");const i=t.name("valid");n.forEach(((t,n)=>{if((0,a.alwaysValidSchema)(r,t))return;const o=e.subschema({keyword:"allOf",schemaProp:n},i);e.ok(i),e.mergeEvaluated(o)}))}};t.default=r},14793:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const a={keyword:"anyOf",schemaType:"array",trackErrors:!0,code:n(62392).validateUnion,error:{message:"must match a schema in anyOf"}};t.default=a},43197:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const a=n(30035),r=n(8764),i={keyword:"contains",type:"array",schemaType:["object","boolean"],before:"uniqueItems",trackErrors:!0,error:{message:({params:{min:e,max:t}})=>void 0===t?a.str`must contain at least ${e} valid item(s)`:a.str`must contain at least ${e} and no more than ${t} valid item(s)`,params:({params:{min:e,max:t}})=>void 0===t?a._`{minContains: ${e}}`:a._`{minContains: ${e}, maxContains: ${t}}`},code(e){const{gen:t,schema:n,parentSchema:i,data:o,it:d}=e;let s,c;const{minContains:u,maxContains:l}=i;d.opts.next?(s=void 0===u?1:u,c=l):s=1;const g=t.const("len",a._`${o}.length`);if(e.setParams({min:s,max:c}),void 0===c&&0===s)return void(0,r.checkStrictMode)(d,'"minContains" == 0 without "maxContains": "contains" keyword ignored');if(void 0!==c&&s>c)return(0,r.checkStrictMode)(d,'"minContains" > "maxContains" is always invalid'),void e.fail();if((0,r.alwaysValidSchema)(d,n)){let t=a._`${g} >= ${s}`;return void 0!==c&&(t=a._`${t} && ${g} <= ${c}`),void e.pass(t)}d.items=!0;const h=t.name("valid");function f(){const e=t.name("_valid"),n=t.let("count",0);p(e,(()=>t.if(e,(()=>function(e){t.code(a._`${e}++`),void 0===c?t.if(a._`${e} >= ${s}`,(()=>t.assign(h,!0).break())):(t.if(a._`${e} > ${c}`,(()=>t.assign(h,!1).break())),1===s?t.assign(h,!0):t.if(a._`${e} >= ${s}`,(()=>t.assign(h,!0))))}(n)))))}function p(n,a){t.forRange("i",0,g,(t=>{e.subschema({keyword:"contains",dataProp:t,dataPropType:r.Type.Num,compositeRule:!0},n),a()}))}void 0===c&&1===s?p(h,(()=>t.if(h,(()=>t.break())))):0===s?(t.let(h,!0),void 0!==c&&t.if(a._`${o}.length > 0`,f)):(t.let(h,!1),f()),e.result(h,(()=>e.reset()))}};t.default=i},3929:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.validateSchemaDeps=t.validatePropertyDeps=t.error=void 0;const a=n(30035),r=n(8764),i=n(62392);t.error={message:({params:{property:e,depsCount:t,deps:n}})=>{const r=1===t?"property":"properties";return a.str`must have ${r} ${n} when property ${e} is present`},params:({params:{property:e,depsCount:t,deps:n,missingProperty:r}})=>a._`{property: ${e},
+    missingProperty: ${r},
+    depsCount: ${t},
+    deps: ${n}}`};const o={keyword:"dependencies",type:"object",schemaType:"object",error:t.error,code(e){const[t,n]=function({schema:e}){const t={},n={};for(const a in e){if("__proto__"===a)continue;(Array.isArray(e[a])?t:n)[a]=e[a]}return[t,n]}(e);d(e,t),s(e,n)}};function d(e,t=e.schema){const{gen:n,data:r,it:o}=e;if(0===Object.keys(t).length)return;const d=n.let("missing");for(const s in t){const c=t[s];if(0===c.length)continue;const u=(0,i.propertyInData)(n,r,s,o.opts.ownProperties);e.setParams({property:s,depsCount:c.length,deps:c.join(", ")}),o.allErrors?n.if(u,(()=>{for(const t of c)(0,i.checkReportMissingProp)(e,t)})):(n.if(a._`${u} && (${(0,i.checkMissingProp)(e,c,d)})`),(0,i.reportMissingProp)(e,d),n.else())}}function s(e,t=e.schema){const{gen:n,data:a,keyword:o,it:d}=e,s=n.name("valid");for(const c in t)(0,r.alwaysValidSchema)(d,t[c])||(n.if((0,i.propertyInData)(n,a,c,d.opts.ownProperties),(()=>{const t=e.subschema({keyword:o,schemaProp:c},s);e.mergeValidEvaluated(t,s)}),(()=>n.var(s,!0))),e.ok(s))}t.validatePropertyDeps=d,t.validateSchemaDeps=s,t.default=o},49064:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const a=n(30035),r=n(8764),i={keyword:"if",schemaType:["object","boolean"],trackErrors:!0,error:{message:({params:e})=>a.str`must match "${e.ifClause}" schema`,params:({params:e})=>a._`{failingKeyword: ${e.ifClause}}`},code(e){const{gen:t,parentSchema:n,it:i}=e;void 0===n.then&&void 0===n.else&&(0,r.checkStrictMode)(i,'"if" without "then" and "else" is ignored');const d=o(i,"then"),s=o(i,"else");if(!d&&!s)return;const c=t.let("valid",!0),u=t.name("_valid");if(function(){const t=e.subschema({keyword:"if",compositeRule:!0,createErrors:!1,allErrors:!1},u);e.mergeEvaluated(t)}(),e.reset(),d&&s){const n=t.let("ifClause");e.setParams({ifClause:n}),t.if(u,l("then",n),l("else",n))}else d?t.if(u,l("then")):t.if((0,a.not)(u),l("else"));function l(n,r){return()=>{const i=e.subschema({keyword:n},u);t.assign(c,u),e.mergeValidEvaluated(i,c),r?t.assign(r,a._`${n}`):e.setParams({ifClause:n})}}e.pass(c,(()=>e.error(!0)))}};function o(e,t){const n=e.schema[t];return void 0!==n&&!(0,r.alwaysValidSchema)(e,n)}t.default=i},3272:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const a=n(62558),r=n(53676),i=n(65763),o=n(60462),d=n(43197),s=n(3929),c=n(36774),u=n(12630),l=n(44773),g=n(25619),h=n(52361),f=n(14793),p=n(24314),m=n(79963),R=n(49064),b=n(33978);t.default=function(e=!1){const t=[h.default,f.default,p.default,m.default,R.default,b.default,c.default,u.default,s.default,l.default,g.default];return e?t.push(r.default,o.default):t.push(a.default,i.default),t.push(d.default),t}},65763:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.validateTuple=void 0;const a=n(30035),r=n(8764),i=n(62392),o={keyword:"items",type:"array",schemaType:["object","array","boolean"],before:"uniqueItems",code(e){const{schema:t,it:n}=e;if(Array.isArray(t))return d(e,"additionalItems",t);n.items=!0,(0,r.alwaysValidSchema)(n,t)||e.ok((0,i.validateArray)(e))}};function d(e,t,n=e.schema){const{gen:i,parentSchema:o,data:d,keyword:s,it:c}=e;!function(e){const{opts:a,errSchemaPath:i}=c,o=n.length,d=o===e.minItems&&(o===e.maxItems||!1===e[t]);if(a.strictTuples&&!d){const e=`"${s}" is ${o}-tuple, but minItems or maxItems/${t} are not specified or different at path "${i}"`;(0,r.checkStrictMode)(c,e,a.strictTuples)}}(o),c.opts.unevaluated&&n.length&&!0!==c.items&&(c.items=r.mergeEvaluated.items(i,n.length,c.items));const u=i.name("valid"),l=i.const("len",a._`${d}.length`);n.forEach(((t,n)=>{(0,r.alwaysValidSchema)(c,t)||(i.if(a._`${l} > ${n}`,(()=>e.subschema({keyword:s,schemaProp:n,dataProp:n},u))),e.ok(u))}))}t.validateTuple=d,t.default=o},60462:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const a=n(30035),r=n(8764),i=n(62392),o=n(62558),d={keyword:"items",type:"array",schemaType:["object","boolean"],before:"uniqueItems",error:{message:({params:{len:e}})=>a.str`must NOT have more than ${e} items`,params:({params:{len:e}})=>a._`{limit: ${e}}`},code(e){const{schema:t,parentSchema:n,it:a}=e,{prefixItems:d}=n;a.items=!0,(0,r.alwaysValidSchema)(a,t)||(d?(0,o.validateAdditionalItems)(e,d):e.ok((0,i.validateArray)(e)))}};t.default=d},52361:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const a=n(8764),r={keyword:"not",schemaType:["object","boolean"],trackErrors:!0,code(e){const{gen:t,schema:n,it:r}=e;if((0,a.alwaysValidSchema)(r,n))return void e.fail();const i=t.name("valid");e.subschema({keyword:"not",compositeRule:!0,createErrors:!1,allErrors:!1},i),e.failResult(i,(()=>e.reset()),(()=>e.error()))},error:{message:"must NOT be valid"}};t.default=r},24314:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const a=n(30035),r=n(8764),i={keyword:"oneOf",schemaType:"array",trackErrors:!0,error:{message:"must match exactly one schema in oneOf",params:({params:e})=>a._`{passingSchemas: ${e.passing}}`},code(e){const{gen:t,schema:n,parentSchema:i,it:o}=e;if(!Array.isArray(n))throw new Error("ajv implementation error");if(o.opts.discriminator&&i.discriminator)return;const d=n,s=t.let("valid",!1),c=t.let("passing",null),u=t.name("_valid");e.setParams({passing:c}),t.block((function(){d.forEach(((n,i)=>{let d;(0,r.alwaysValidSchema)(o,n)?t.var(u,!0):d=e.subschema({keyword:"oneOf",schemaProp:i,compositeRule:!0},u),i>0&&t.if(a._`${u} && ${s}`).assign(s,!1).assign(c,a._`[${c}, ${i}]`).else(),t.if(u,(()=>{t.assign(s,!0),t.assign(c,i),d&&e.mergeEvaluated(d,a.Name)}))}))})),e.result(s,(()=>e.reset()),(()=>e.error(!0)))}};t.default=i},25619:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const a=n(62392),r=n(30035),i=n(8764),o=n(8764),d={keyword:"patternProperties",type:"object",schemaType:"object",code(e){const{gen:t,schema:n,data:d,parentSchema:s,it:c}=e,{opts:u}=c,l=(0,a.allSchemaProperties)(n),g=l.filter((e=>(0,i.alwaysValidSchema)(c,n[e])));if(0===l.length||g.length===l.length&&(!c.opts.unevaluated||!0===c.props))return;const h=u.strictSchema&&!u.allowMatchingProperties&&s.properties,f=t.name("valid");!0===c.props||c.props instanceof r.Name||(c.props=(0,o.evaluatedPropsToName)(t,c.props));const{props:p}=c;function m(e){for(const t in h)new RegExp(e).test(t)&&(0,i.checkStrictMode)(c,`property ${t} matches pattern ${e} (use allowMatchingProperties)`)}function R(n){t.forIn("key",d,(i=>{t.if(r._`${(0,a.usePattern)(e,n)}.test(${i})`,(()=>{const a=g.includes(n);a||e.subschema({keyword:"patternProperties",schemaProp:n,dataProp:i,dataPropType:o.Type.Str},f),c.opts.unevaluated&&!0!==p?t.assign(r._`${p}[${i}]`,!0):a||c.allErrors||t.if((0,r.not)(f),(()=>t.break()))}))}))}!function(){for(const e of l)h&&m(e),c.allErrors?R(e):(t.var(f,!0),R(e),t.if(f))}()}};t.default=d},53676:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const a=n(65763),r={keyword:"prefixItems",type:"array",schemaType:["array"],before:"uniqueItems",code:e=>(0,a.validateTuple)(e,"items")};t.default=r},44773:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const a=n(61202),r=n(62392),i=n(8764),o=n(12630),d={keyword:"properties",type:"object",schemaType:"object",code(e){const{gen:t,schema:n,parentSchema:d,data:s,it:c}=e;"all"===c.opts.removeAdditional&&void 0===d.additionalProperties&&o.default.code(new a.KeywordCxt(c,o.default,"additionalProperties"));const u=(0,r.allSchemaProperties)(n);for(const a of u)c.definedProperties.add(a);c.opts.unevaluated&&u.length&&!0!==c.props&&(c.props=i.mergeEvaluated.props(t,(0,i.toHash)(u),c.props));const l=u.filter((e=>!(0,i.alwaysValidSchema)(c,n[e])));if(0===l.length)return;const g=t.name("valid");for(const a of l)h(a)?f(a):(t.if((0,r.propertyInData)(t,s,a,c.opts.ownProperties)),f(a),c.allErrors||t.else().var(g,!0),t.endIf()),e.it.definedProperties.add(a),e.ok(g);function h(e){return c.opts.useDefaults&&!c.compositeRule&&void 0!==n[e].default}function f(t){e.subschema({keyword:"properties",schemaProp:t,dataProp:t},g)}}};t.default=d},36774:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const a=n(30035),r=n(8764),i={keyword:"propertyNames",type:"object",schemaType:["object","boolean"],error:{message:"property name must be valid",params:({params:e})=>a._`{propertyName: ${e.propertyName}}`},code(e){const{gen:t,schema:n,data:i,it:o}=e;if((0,r.alwaysValidSchema)(o,n))return;const d=t.name("valid");t.forIn("key",i,(n=>{e.setParams({propertyName:n}),e.subschema({keyword:"propertyNames",data:n,dataTypes:["string"],propertyName:n,compositeRule:!0},d),t.if((0,a.not)(d),(()=>{e.error(!0),o.allErrors||t.break()}))})),e.ok(d)}};t.default=i},33978:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const a=n(8764),r={keyword:["then","else"],schemaType:["object","boolean"],code({keyword:e,parentSchema:t,it:n}){void 0===t.if&&(0,a.checkStrictMode)(n,`"${e}" without "if" is ignored`)}};t.default=r},62392:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.validateUnion=t.validateArray=t.usePattern=t.callValidateCode=t.schemaProperties=t.allSchemaProperties=t.noPropertyInData=t.propertyInData=t.isOwnProperty=t.hasPropFunc=t.reportMissingProp=t.checkMissingProp=t.checkReportMissingProp=void 0;const a=n(30035),r=n(8764),i=n(15568),o=n(8764);function d(e){return e.scopeValue("func",{ref:Object.prototype.hasOwnProperty,code:a._`Object.prototype.hasOwnProperty`})}function s(e,t,n){return a._`${d(e)}.call(${t}, ${n})`}function c(e,t,n,r){const i=a._`${t}${(0,a.getProperty)(n)} === undefined`;return r?(0,a.or)(i,(0,a.not)(s(e,t,n))):i}function u(e){return e?Object.keys(e).filter((e=>"__proto__"!==e)):[]}t.checkReportMissingProp=function(e,t){const{gen:n,data:r,it:i}=e;n.if(c(n,r,t,i.opts.ownProperties),(()=>{e.setParams({missingProperty:a._`${t}`},!0),e.error()}))},t.checkMissingProp=function({gen:e,data:t,it:{opts:n}},r,i){return(0,a.or)(...r.map((r=>(0,a.and)(c(e,t,r,n.ownProperties),a._`${i} = ${r}`))))},t.reportMissingProp=function(e,t){e.setParams({missingProperty:t},!0),e.error()},t.hasPropFunc=d,t.isOwnProperty=s,t.propertyInData=function(e,t,n,r){const i=a._`${t}${(0,a.getProperty)(n)} !== undefined`;return r?a._`${i} && ${s(e,t,n)}`:i},t.noPropertyInData=c,t.allSchemaProperties=u,t.schemaProperties=function(e,t){return u(t).filter((n=>!(0,r.alwaysValidSchema)(e,t[n])))},t.callValidateCode=function({schemaCode:e,data:t,it:{gen:n,topSchemaRef:r,schemaPath:o,errorPath:d},it:s},c,u,l){const g=l?a._`${e}, ${t}, ${r}${o}`:t,h=[[i.default.instancePath,(0,a.strConcat)(i.default.instancePath,d)],[i.default.parentData,s.parentData],[i.default.parentDataProperty,s.parentDataProperty],[i.default.rootData,i.default.rootData]];s.opts.dynamicRef&&h.push([i.default.dynamicAnchors,i.default.dynamicAnchors]);const f=a._`${g}, ${n.object(...h)}`;return u!==a.nil?a._`${c}.call(${u}, ${f})`:a._`${c}(${f})`};const l=a._`new RegExp`;t.usePattern=function({gen:e,it:{opts:t}},n){const r=t.unicodeRegExp?"u":"",{regExp:i}=t.code,d=i(n,r);return e.scopeValue("pattern",{key:d.toString(),ref:d,code:a._`${"new RegExp"===i.code?l:(0,o.useFunc)(e,i)}(${n}, ${r})`})},t.validateArray=function(e){const{gen:t,data:n,keyword:i,it:o}=e,d=t.name("valid");if(o.allErrors){const e=t.let("valid",!0);return s((()=>t.assign(e,!1))),e}return t.var(d,!0),s((()=>t.break())),d;function s(o){const s=t.const("len",a._`${n}.length`);t.forRange("i",0,s,(n=>{e.subschema({keyword:i,dataProp:n,dataPropType:r.Type.Num},d),t.if((0,a.not)(d),o)}))}},t.validateUnion=function(e){const{gen:t,schema:n,keyword:i,it:o}=e;if(!Array.isArray(n))throw new Error("ajv implementation error");if(n.some((e=>(0,r.alwaysValidSchema)(o,e)))&&!o.opts.unevaluated)return;const d=t.let("valid",!1),s=t.name("_valid");t.block((()=>n.forEach(((n,r)=>{const o=e.subschema({keyword:i,schemaProp:r,compositeRule:!0},s);t.assign(d,a._`${d} || ${s}`);e.mergeValidEvaluated(o,s)||t.if((0,a.not)(d))})))),e.result(d,(()=>e.reset()),(()=>e.error(!0)))}},12720:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const n={keyword:"id",code(){throw new Error('NOT SUPPORTED: keyword "id", use "$id" for schema ID')}};t.default=n},30535:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const a=n(12720),r=n(28609),i=["$schema","$id","$defs","$vocabulary",{keyword:"$comment"},"definitions",a.default,r.default];t.default=i},28609:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.callRef=t.getValidate=void 0;const a=n(62557),r=n(62392),i=n(30035),o=n(15568),d=n(64361),s=n(8764),c={keyword:"$ref",schemaType:"string",code(e){const{gen:t,schema:n,it:r}=e,{baseId:o,schemaEnv:s,validateName:c,opts:g,self:h}=r,{root:f}=s;if(("#"===n||"#/"===n)&&o===f.baseId)return function(){if(s===f)return l(e,c,s,s.$async);const n=t.scopeValue("root",{ref:f});return l(e,i._`${n}.validate`,f,f.$async)}();const p=d.resolveRef.call(h,f,o,n);if(void 0===p)throw new a.default(r.opts.uriResolver,o,n);return p instanceof d.SchemaEnv?function(t){const n=u(e,t);l(e,n,t,t.$async)}(p):function(a){const r=t.scopeValue("schema",!0===g.code.source?{ref:a,code:(0,i.stringify)(a)}:{ref:a}),o=t.name("valid"),d=e.subschema({schema:a,dataTypes:[],schemaPath:i.nil,topSchemaRef:r,errSchemaPath:n},o);e.mergeEvaluated(d),e.ok(o)}(p)}};function u(e,t){const{gen:n}=e;return t.validate?n.scopeValue("validate",{ref:t.validate}):i._`${n.scopeValue("wrapper",{ref:t})}.validate`}function l(e,t,n,a){const{gen:d,it:c}=e,{allErrors:u,schemaEnv:l,opts:g}=c,h=g.passContext?o.default.this:i.nil;function f(e){const t=i._`${e}.errors`;d.assign(o.default.vErrors,i._`${o.default.vErrors} === null ? ${t} : ${o.default.vErrors}.concat(${t})`),d.assign(o.default.errors,i._`${o.default.vErrors}.length`)}function p(e){var t;if(!c.opts.unevaluated)return;const a=null===(t=null==n?void 0:n.validate)||void 0===t?void 0:t.evaluated;if(!0!==c.props)if(a&&!a.dynamicProps)void 0!==a.props&&(c.props=s.mergeEvaluated.props(d,a.props,c.props));else{const t=d.var("props",i._`${e}.evaluated.props`);c.props=s.mergeEvaluated.props(d,t,c.props,i.Name)}if(!0!==c.items)if(a&&!a.dynamicItems)void 0!==a.items&&(c.items=s.mergeEvaluated.items(d,a.items,c.items));else{const t=d.var("items",i._`${e}.evaluated.items`);c.items=s.mergeEvaluated.items(d,t,c.items,i.Name)}}a?function(){if(!l.$async)throw new Error("async schema referenced by sync schema");const n=d.let("valid");d.try((()=>{d.code(i._`await ${(0,r.callValidateCode)(e,t,h)}`),p(t),u||d.assign(n,!0)}),(e=>{d.if(i._`!(${e} instanceof ${c.ValidationError})`,(()=>d.throw(e))),f(e),u||d.assign(n,!1)})),e.ok(n)}():e.result((0,r.callValidateCode)(e,t,h),(()=>p(t)),(()=>f(t)))}t.getValidate=u,t.callRef=l,t.default=c},5128:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const a=n(30035),r=n(51946),i=n(64361),o=n(8764),d={keyword:"discriminator",type:"object",schemaType:"object",error:{message:({params:{discrError:e,tagName:t}})=>e===r.DiscrError.Tag?`tag "${t}" must be string`:`value of tag "${t}" must be in oneOf`,params:({params:{discrError:e,tag:t,tagName:n}})=>a._`{error: ${e}, tag: ${n}, tagValue: ${t}}`},code(e){const{gen:t,data:n,schema:d,parentSchema:s,it:c}=e,{oneOf:u}=s;if(!c.opts.discriminator)throw new Error("discriminator: requires discriminator option");const l=d.propertyName;if("string"!=typeof l)throw new Error("discriminator: requires propertyName");if(d.mapping)throw new Error("discriminator: mapping is not supported");if(!u)throw new Error("discriminator: requires oneOf keyword");const g=t.let("valid",!1),h=t.const("tag",a._`${n}${(0,a.getProperty)(l)}`);function f(n){const r=t.name("valid"),i=e.subschema({keyword:"oneOf",schemaProp:n},r);return e.mergeEvaluated(i,a.Name),r}t.if(a._`typeof ${h} == "string"`,(()=>function(){const n=function(){var e;const t={},n=r(s);let a=!0;for(let s=0;s<u.length;s++){let t=u[s];(null==t?void 0:t.$ref)&&!(0,o.schemaHasRulesButRef)(t,c.self.RULES)&&(t=i.resolveRef.call(c.self,c.schemaEnv.root,c.baseId,null==t?void 0:t.$ref),t instanceof i.SchemaEnv&&(t=t.schema));const g=null===(e=null==t?void 0:t.properties)||void 0===e?void 0:e[l];if("object"!=typeof g)throw new Error(`discriminator: oneOf subschemas (or referenced schemas) must have "properties/${l}"`);a=a&&(n||r(t)),d(g,s)}if(!a)throw new Error(`discriminator: "${l}" must be required`);return t;function r({required:e}){return Array.isArray(e)&&e.includes(l)}function d(e,t){if(e.const)g(e.const,t);else{if(!e.enum)throw new Error(`discriminator: "properties/${l}" must have "const" or "enum"`);for(const n of e.enum)g(n,t)}}function g(e,n){if("string"!=typeof e||e in t)throw new Error(`discriminator: "${l}" values must be unique strings`);t[e]=n}}();t.if(!1);for(const e in n)t.elseIf(a._`${h} === ${e}`),t.assign(g,f(n[e]));t.else(),e.error(!1,{discrError:r.DiscrError.Mapping,tag:h,tagName:l}),t.endIf()}()),(()=>e.error(!1,{discrError:r.DiscrError.Tag,tag:h,tagName:l}))),e.ok(g)}};t.default=d},51946:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.DiscrError=void 0,function(e){e.Tag="tag",e.Mapping="mapping"}(t.DiscrError||(t.DiscrError={}))},51438:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const a=n(30535),r=n(27922),i=n(3272),o=n(39649),d=n(43459),s=[a.default,r.default,(0,i.default)(),o.default,d.metadataVocabulary,d.contentVocabulary];t.default=s},62642:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const a=n(30035),r={keyword:"format",type:["number","string"],schemaType:"string",$data:!0,error:{message:({schemaCode:e})=>a.str`must match format "${e}"`,params:({schemaCode:e})=>a._`{format: ${e}}`},code(e,t){const{gen:n,data:r,$data:i,schema:o,schemaCode:d,it:s}=e,{opts:c,errSchemaPath:u,schemaEnv:l,self:g}=s;c.validateFormats&&(i?function(){const i=n.scopeValue("formats",{ref:g.formats,code:c.code.formats}),o=n.const("fDef",a._`${i}[${d}]`),s=n.let("fType"),u=n.let("format");n.if(a._`typeof ${o} == "object" && !(${o} instanceof RegExp)`,(()=>n.assign(s,a._`${o}.type || "string"`).assign(u,a._`${o}.validate`)),(()=>n.assign(s,a._`"string"`).assign(u,o))),e.fail$data((0,a.or)(!1===c.strictSchema?a.nil:a._`${d} && !${u}`,function(){const e=l.$async?a._`(${o}.async ? await ${u}(${r}) : ${u}(${r}))`:a._`${u}(${r})`,n=a._`(typeof ${u} == "function" ? ${e} : ${u}.test(${r}))`;return a._`${u} && ${u} !== true && ${s} === ${t} && !${n}`}()))}():function(){const i=g.formats[o];if(!i)return void function(){if(!1===c.strictSchema)return void g.logger.warn(e());throw new Error(e());function e(){return`unknown format "${o}" ignored in schema at path "${u}"`}}();if(!0===i)return;const[d,s,h]=function(e){const t=e instanceof RegExp?(0,a.regexpCode)(e):c.code.formats?a._`${c.code.formats}${(0,a.getProperty)(o)}`:void 0,r=n.scopeValue("formats",{key:o,ref:e,code:t});if("object"==typeof e&&!(e instanceof RegExp))return[e.type||"string",e.validate,a._`${r}.validate`];return["string",e,r]}(i);d===t&&e.pass(function(){if("object"==typeof i&&!(i instanceof RegExp)&&i.async){if(!l.$async)throw new Error("async format in sync schema");return a._`await ${h}(${r})`}return"function"==typeof s?a._`${h}(${r})`:a._`${h}.test(${r})`}())}())}};t.default=r},39649:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const a=[n(62642).default];t.default=a},43459:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.contentVocabulary=t.metadataVocabulary=void 0,t.metadataVocabulary=["title","description","default","deprecated","readOnly","writeOnly","examples"],t.contentVocabulary=["contentMediaType","contentEncoding","contentSchema"]},90217:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const a=n(30035),r=n(8764),i=n(50863),o={keyword:"const",$data:!0,error:{message:"must be equal to constant",params:({schemaCode:e})=>a._`{allowedValue: ${e}}`},code(e){const{gen:t,data:n,$data:o,schemaCode:d,schema:s}=e;o||s&&"object"==typeof s?e.fail$data(a._`!${(0,r.useFunc)(t,i.default)}(${n}, ${d})`):e.fail(a._`${s} !== ${n}`)}};t.default=o},84565:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const a=n(30035),r=n(8764),i=n(50863),o={keyword:"enum",schemaType:"array",$data:!0,error:{message:"must be equal to one of the allowed values",params:({schemaCode:e})=>a._`{allowedValues: ${e}}`},code(e){const{gen:t,data:n,$data:o,schema:d,schemaCode:s,it:c}=e;if(!o&&0===d.length)throw new Error("enum must have non-empty array");const u=d.length>=c.opts.loopEnum;let l;const g=()=>null!=l?l:l=(0,r.useFunc)(t,i.default);let h;if(u||o)h=t.let("valid"),e.block$data(h,(function(){t.assign(h,!1),t.forOf("v",s,(e=>t.if(a._`${g()}(${n}, ${e})`,(()=>t.assign(h,!0).break()))))}));else{if(!Array.isArray(d))throw new Error("ajv implementation error");const e=t.const("vSchema",s);h=(0,a.or)(...d.map(((t,r)=>function(e,t){const r=d[t];return"object"==typeof r&&null!==r?a._`${g()}(${n}, ${e}[${t}])`:a._`${n} === ${r}`}(e,r))))}e.pass(h)}};t.default=o},27922:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const a=n(31110),r=n(93350),i=n(91441),o=n(44309),d=n(98756),s=n(85244),c=n(58242),u=n(34888),l=n(90217),g=n(84565),h=[a.default,r.default,i.default,o.default,d.default,s.default,c.default,u.default,{keyword:"type",schemaType:["string","array"]},{keyword:"nullable",schemaType:"boolean"},l.default,g.default];t.default=h},58242:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const a=n(30035),r={keyword:["maxItems","minItems"],type:"array",schemaType:"number",$data:!0,error:{message({keyword:e,schemaCode:t}){const n="maxItems"===e?"more":"fewer";return a.str`must NOT have ${n} than ${t} items`},params:({schemaCode:e})=>a._`{limit: ${e}}`},code(e){const{keyword:t,data:n,schemaCode:r}=e,i="maxItems"===t?a.operators.GT:a.operators.LT;e.fail$data(a._`${n}.length ${i} ${r}`)}};t.default=r},91441:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const a=n(30035),r=n(8764),i=n(80733),o={keyword:["maxLength","minLength"],type:"string",schemaType:"number",$data:!0,error:{message({keyword:e,schemaCode:t}){const n="maxLength"===e?"more":"fewer";return a.str`must NOT have ${n} than ${t} characters`},params:({schemaCode:e})=>a._`{limit: ${e}}`},code(e){const{keyword:t,data:n,schemaCode:o,it:d}=e,s="maxLength"===t?a.operators.GT:a.operators.LT,c=!1===d.opts.unicode?a._`${n}.length`:a._`${(0,r.useFunc)(e.gen,i.default)}(${n})`;e.fail$data(a._`${c} ${s} ${o}`)}};t.default=o},31110:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const a=n(30035),r=a.operators,i={maximum:{okStr:"<=",ok:r.LTE,fail:r.GT},minimum:{okStr:">=",ok:r.GTE,fail:r.LT},exclusiveMaximum:{okStr:"<",ok:r.LT,fail:r.GTE},exclusiveMinimum:{okStr:">",ok:r.GT,fail:r.LTE}},o={message:({keyword:e,schemaCode:t})=>a.str`must be ${i[e].okStr} ${t}`,params:({keyword:e,schemaCode:t})=>a._`{comparison: ${i[e].okStr}, limit: ${t}}`},d={keyword:Object.keys(i),type:"number",schemaType:"number",$data:!0,error:o,code(e){const{keyword:t,data:n,schemaCode:r}=e;e.fail$data(a._`${n} ${i[t].fail} ${r} || isNaN(${n})`)}};t.default=d},98756:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const a=n(30035),r={keyword:["maxProperties","minProperties"],type:"object",schemaType:"number",$data:!0,error:{message({keyword:e,schemaCode:t}){const n="maxProperties"===e?"more":"fewer";return a.str`must NOT have ${n} than ${t} properties`},params:({schemaCode:e})=>a._`{limit: ${e}}`},code(e){const{keyword:t,data:n,schemaCode:r}=e,i="maxProperties"===t?a.operators.GT:a.operators.LT;e.fail$data(a._`Object.keys(${n}).length ${i} ${r}`)}};t.default=r},93350:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const a=n(30035),r={keyword:"multipleOf",type:"number",schemaType:"number",$data:!0,error:{message:({schemaCode:e})=>a.str`must be multiple of ${e}`,params:({schemaCode:e})=>a._`{multipleOf: ${e}}`},code(e){const{gen:t,data:n,schemaCode:r,it:i}=e,o=i.opts.multipleOfPrecision,d=t.let("res"),s=o?a._`Math.abs(Math.round(${d}) - ${d}) > 1e-${o}`:a._`${d} !== parseInt(${d})`;e.fail$data(a._`(${r} === 0 || (${d} = ${n}/${r}, ${s}))`)}};t.default=r},44309:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const a=n(62392),r=n(30035),i={keyword:"pattern",type:"string",schemaType:"string",$data:!0,error:{message:({schemaCode:e})=>r.str`must match pattern "${e}"`,params:({schemaCode:e})=>r._`{pattern: ${e}}`},code(e){const{data:t,$data:n,schema:i,schemaCode:o,it:d}=e,s=d.opts.unicodeRegExp?"u":"",c=n?r._`(new RegExp(${o}, ${s}))`:(0,a.usePattern)(e,i);e.fail$data(r._`!${c}.test(${t})`)}};t.default=i},85244:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const a=n(62392),r=n(30035),i=n(8764),o={keyword:"required",type:"object",schemaType:"array",$data:!0,error:{message:({params:{missingProperty:e}})=>r.str`must have required property '${e}'`,params:({params:{missingProperty:e}})=>r._`{missingProperty: ${e}}`},code(e){const{gen:t,schema:n,schemaCode:o,data:d,$data:s,it:c}=e,{opts:u}=c;if(!s&&0===n.length)return;const l=n.length>=u.loopRequired;if(c.allErrors?function(){if(l||s)e.block$data(r.nil,g);else for(const t of n)(0,a.checkReportMissingProp)(e,t)}():function(){const i=t.let("missing");if(l||s){const n=t.let("valid",!0);e.block$data(n,(()=>function(n,i){e.setParams({missingProperty:n}),t.forOf(n,o,(()=>{t.assign(i,(0,a.propertyInData)(t,d,n,u.ownProperties)),t.if((0,r.not)(i),(()=>{e.error(),t.break()}))}),r.nil)}(i,n))),e.ok(n)}else t.if((0,a.checkMissingProp)(e,n,i)),(0,a.reportMissingProp)(e,i),t.else()}(),u.strictRequired){const t=e.parentSchema.properties,{definedProperties:a}=e.it;for(const e of n)if(void 0===(null==t?void 0:t[e])&&!a.has(e)){const t=`required property "${e}" is not defined at "${c.schemaEnv.baseId+c.errSchemaPath}" (strictRequired)`;(0,i.checkStrictMode)(c,t,c.opts.strictRequired)}}function g(){t.forOf("prop",o,(n=>{e.setParams({missingProperty:n}),t.if((0,a.noPropertyInData)(t,d,n,u.ownProperties),(()=>e.error()))}))}}};t.default=o},34888:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const a=n(55119),r=n(30035),i=n(8764),o=n(50863),d={keyword:"uniqueItems",type:"array",schemaType:"boolean",$data:!0,error:{message:({params:{i:e,j:t}})=>r.str`must NOT have duplicate items (items ## ${t} and ${e} are identical)`,params:({params:{i:e,j:t}})=>r._`{i: ${e}, j: ${t}}`},code(e){const{gen:t,data:n,$data:d,schema:s,parentSchema:c,schemaCode:u,it:l}=e;if(!d&&!s)return;const g=t.let("valid"),h=c.items?(0,a.getSchemaTypes)(c.items):[];function f(i,o){const d=t.name("item"),s=(0,a.checkDataTypes)(h,d,l.opts.strictNumbers,a.DataType.Wrong),c=t.const("indices",r._`{}`);t.for(r._`;${i}--;`,(()=>{t.let(d,r._`${n}[${i}]`),t.if(s,r._`continue`),h.length>1&&t.if(r._`typeof ${d} == "string"`,r._`${d} += "_"`),t.if(r._`typeof ${c}[${d}] == "number"`,(()=>{t.assign(o,r._`${c}[${d}]`),e.error(),t.assign(g,!1).break()})).code(r._`${c}[${d}] = ${i}`)}))}function p(a,d){const s=(0,i.useFunc)(t,o.default),c=t.name("outer");t.label(c).for(r._`;${a}--;`,(()=>t.for(r._`${d} = ${a}; ${d}--;`,(()=>t.if(r._`${s}(${n}[${a}], ${n}[${d}])`,(()=>{e.error(),t.assign(g,!1).break(c)}))))))}e.block$data(g,(function(){const a=t.let("i",r._`${n}.length`),i=t.let("j");e.setParams({i:a,j:i}),t.assign(g,!0),t.if(r._`${a} > 1`,(()=>(h.length>0&&!h.some((e=>"object"===e||"array"===e))?f:p)(a,i)))}),r._`${u} === false`),e.ok(g)}};t.default=d},83475:function(e){"use strict";var t=e.exports=function(e,t,a){"function"==typeof t&&(a=t,t={}),n(t,"function"==typeof(a=t.cb||a)?a:a.pre||function(){},a.post||function(){},e,"",e)};function n(e,a,r,i,o,d,s,c,u,l){if(i&&"object"==typeof i&&!Array.isArray(i)){for(var g in a(i,o,d,s,c,u,l),i){var h=i[g];if(Array.isArray(h)){if(g in t.arrayKeywords)for(var f=0;f<h.length;f++)n(e,a,r,h[f],o+"/"+g+"/"+f,d,o,g,i,f)}else if(g in t.propsKeywords){if(h&&"object"==typeof h)for(var p in h)n(e,a,r,h[p],o+"/"+g+"/"+p.replace(/~/g,"~0").replace(/\//g,"~1"),d,o,g,i,p)}else(g in t.keywords||e.allKeys&&!(g in t.skipKeywords))&&n(e,a,r,h,o+"/"+g,d,o,g,i)}r(i,o,d,s,c,u,l)}}t.keywords={additionalItems:!0,items:!0,contains:!0,additionalProperties:!0,propertyNames:!0,not:!0,if:!0,then:!0,else:!0},t.arrayKeywords={items:!0,allOf:!0,anyOf:!0,oneOf:!0},t.propsKeywords={$defs:!0,definitions:!0,properties:!0,patternProperties:!0,dependencies:!0},t.skipKeywords={default:!0,enum:!0,const:!0,required:!0,maximum:!0,minimum:!0,exclusiveMaximum:!0,exclusiveMinimum:!0,multipleOf:!0,maxLength:!0,minLength:!0,pattern:!0,format:!0,maxItems:!0,minItems:!0,uniqueItems:!0,maxProperties:!0,minProperties:!0}},54418:function(e,t,n){"use strict";var a=this&&this.__createBinding||(Object.create?function(e,t,n,a){void 0===a&&(a=n);var r=Object.getOwnPropertyDescriptor(t,n);r&&!("get"in r?!t.__esModule:r.writable||r.configurable)||(r={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,a,r)}:function(e,t,n,a){void 0===a&&(a=n),e[a]=t[n]}),r=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),i=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&a(t,e,n);return r(t,e),t};Object.defineProperty(t,"__esModule",{value:!0}),t.Parser=void 0;var o=i(n(34614)),d=n(12322),s=new Set(["input","option","optgroup","select","button","datalist","textarea"]),c=new Set(["p"]),u=new Set(["thead","tbody"]),l=new Set(["dd","dt"]),g=new Set(["rt","rp"]),h=new Map([["tr",new Set(["tr","th","td"])],["th",new Set(["th"])],["td",new Set(["thead","th","td"])],["body",new Set(["head","link","script"])],["li",new Set(["li"])],["p",c],["h1",c],["h2",c],["h3",c],["h4",c],["h5",c],["h6",c],["select",s],["input",s],["output",s],["button",s],["datalist",s],["textarea",s],["option",new Set(["option"])],["optgroup",new Set(["optgroup","option"])],["dd",l],["dt",l],["address",c],["article",c],["aside",c],["blockquote",c],["details",c],["div",c],["dl",c],["fieldset",c],["figcaption",c],["figure",c],["footer",c],["form",c],["header",c],["hr",c],["main",c],["nav",c],["ol",c],["pre",c],["section",c],["table",c],["ul",c],["rt",g],["rp",g],["tbody",u],["tfoot",u]]),f=new Set(["area","base","basefont","br","col","command","embed","frame","hr","img","input","isindex","keygen","link","meta","param","source","track","wbr"]),p=new Set(["math","svg"]),m=new Set(["mi","mo","mn","ms","mtext","annotation-xml","foreignobject","desc","title"]),R=/\s|\//,b=function(){function e(e,t){var n,a,r,i,d;void 0===t&&(t={}),this.options=t,this.startIndex=0,this.endIndex=0,this.openTagStart=0,this.tagname="",this.attribname="",this.attribvalue="",this.attribs=null,this.stack=[],this.foreignContext=[],this.buffers=[],this.bufferOffset=0,this.writeIndex=0,this.ended=!1,this.cbs=null!=e?e:{},this.lowerCaseTagNames=null!==(n=t.lowerCaseTags)&&void 0!==n?n:!t.xmlMode,this.lowerCaseAttributeNames=null!==(a=t.lowerCaseAttributeNames)&&void 0!==a?a:!t.xmlMode,this.tokenizer=new(null!==(r=t.Tokenizer)&&void 0!==r?r:o.default)(this.options,this),null===(d=(i=this.cbs).onparserinit)||void 0===d||d.call(i,this)}return e.prototype.ontext=function(e,t){var n,a,r=this.getSlice(e,t);this.endIndex=t-1,null===(a=(n=this.cbs).ontext)||void 0===a||a.call(n,r),this.startIndex=t},e.prototype.ontextentity=function(e){var t,n,a=this.tokenizer.getSectionStart();this.endIndex=a-1,null===(n=(t=this.cbs).ontext)||void 0===n||n.call(t,(0,d.fromCodePoint)(e)),this.startIndex=a},e.prototype.isVoidElement=function(e){return!this.options.xmlMode&&f.has(e)},e.prototype.onopentagname=function(e,t){this.endIndex=t;var n=this.getSlice(e,t);this.lowerCaseTagNames&&(n=n.toLowerCase()),this.emitOpenTag(n)},e.prototype.emitOpenTag=function(e){var t,n,a,r;this.openTagStart=this.startIndex,this.tagname=e;var i=!this.options.xmlMode&&h.get(e);if(i)for(;this.stack.length>0&&i.has(this.stack[this.stack.length-1]);){var o=this.stack.pop();null===(n=(t=this.cbs).onclosetag)||void 0===n||n.call(t,o,!0)}this.isVoidElement(e)||(this.stack.push(e),p.has(e)?this.foreignContext.push(!0):m.has(e)&&this.foreignContext.push(!1)),null===(r=(a=this.cbs).onopentagname)||void 0===r||r.call(a,e),this.cbs.onopentag&&(this.attribs={})},e.prototype.endOpenTag=function(e){var t,n;this.startIndex=this.openTagStart,this.attribs&&(null===(n=(t=this.cbs).onopentag)||void 0===n||n.call(t,this.tagname,this.attribs,e),this.attribs=null),this.cbs.onclosetag&&this.isVoidElement(this.tagname)&&this.cbs.onclosetag(this.tagname,!0),this.tagname=""},e.prototype.onopentagend=function(e){this.endIndex=e,this.endOpenTag(!1),this.startIndex=e+1},e.prototype.onclosetag=function(e,t){var n,a,r,i,o,d;this.endIndex=t;var s=this.getSlice(e,t);if(this.lowerCaseTagNames&&(s=s.toLowerCase()),(p.has(s)||m.has(s))&&this.foreignContext.pop(),this.isVoidElement(s))this.options.xmlMode||"br"!==s||(null===(a=(n=this.cbs).onopentagname)||void 0===a||a.call(n,"br"),null===(i=(r=this.cbs).onopentag)||void 0===i||i.call(r,"br",{},!0),null===(d=(o=this.cbs).onclosetag)||void 0===d||d.call(o,"br",!1));else{var c=this.stack.lastIndexOf(s);if(-1!==c)if(this.cbs.onclosetag)for(var u=this.stack.length-c;u--;)this.cbs.onclosetag(this.stack.pop(),0!==u);else this.stack.length=c;else this.options.xmlMode||"p"!==s||(this.emitOpenTag("p"),this.closeCurrentTag(!0))}this.startIndex=t+1},e.prototype.onselfclosingtag=function(e){this.endIndex=e,this.options.xmlMode||this.options.recognizeSelfClosing||this.foreignContext[this.foreignContext.length-1]?(this.closeCurrentTag(!1),this.startIndex=e+1):this.onopentagend(e)},e.prototype.closeCurrentTag=function(e){var t,n,a=this.tagname;this.endOpenTag(e),this.stack[this.stack.length-1]===a&&(null===(n=(t=this.cbs).onclosetag)||void 0===n||n.call(t,a,!e),this.stack.pop())},e.prototype.onattribname=function(e,t){this.startIndex=e;var n=this.getSlice(e,t);this.attribname=this.lowerCaseAttributeNames?n.toLowerCase():n},e.prototype.onattribdata=function(e,t){this.attribvalue+=this.getSlice(e,t)},e.prototype.onattribentity=function(e){this.attribvalue+=(0,d.fromCodePoint)(e)},e.prototype.onattribend=function(e,t){var n,a;this.endIndex=t,null===(a=(n=this.cbs).onattribute)||void 0===a||a.call(n,this.attribname,this.attribvalue,e===o.QuoteType.Double?'"':e===o.QuoteType.Single?"'":e===o.QuoteType.NoValue?void 0:null),this.attribs&&!Object.prototype.hasOwnProperty.call(this.attribs,this.attribname)&&(this.attribs[this.attribname]=this.attribvalue),this.attribvalue=""},e.prototype.getInstructionName=function(e){var t=e.search(R),n=t<0?e:e.substr(0,t);return this.lowerCaseTagNames&&(n=n.toLowerCase()),n},e.prototype.ondeclaration=function(e,t){this.endIndex=t;var n=this.getSlice(e,t);if(this.cbs.onprocessinginstruction){var a=this.getInstructionName(n);this.cbs.onprocessinginstruction("!".concat(a),"!".concat(n))}this.startIndex=t+1},e.prototype.onprocessinginstruction=function(e,t){this.endIndex=t;var n=this.getSlice(e,t);if(this.cbs.onprocessinginstruction){var a=this.getInstructionName(n);this.cbs.onprocessinginstruction("?".concat(a),"?".concat(n))}this.startIndex=t+1},e.prototype.oncomment=function(e,t,n){var a,r,i,o;this.endIndex=t,null===(r=(a=this.cbs).oncomment)||void 0===r||r.call(a,this.getSlice(e,t-n)),null===(o=(i=this.cbs).oncommentend)||void 0===o||o.call(i),this.startIndex=t+1},e.prototype.oncdata=function(e,t,n){var a,r,i,o,d,s,c,u,l,g;this.endIndex=t;var h=this.getSlice(e,t-n);this.options.xmlMode||this.options.recognizeCDATA?(null===(r=(a=this.cbs).oncdatastart)||void 0===r||r.call(a),null===(o=(i=this.cbs).ontext)||void 0===o||o.call(i,h),null===(s=(d=this.cbs).oncdataend)||void 0===s||s.call(d)):(null===(u=(c=this.cbs).oncomment)||void 0===u||u.call(c,"[CDATA[".concat(h,"]]")),null===(g=(l=this.cbs).oncommentend)||void 0===g||g.call(l)),this.startIndex=t+1},e.prototype.onend=function(){var e,t;if(this.cbs.onclosetag){this.endIndex=this.startIndex;for(var n=this.stack.length;n>0;this.cbs.onclosetag(this.stack[--n],!0));}null===(t=(e=this.cbs).onend)||void 0===t||t.call(e)},e.prototype.reset=function(){var e,t,n,a;null===(t=(e=this.cbs).onreset)||void 0===t||t.call(e),this.tokenizer.reset(),this.tagname="",this.attribname="",this.attribs=null,this.stack.length=0,this.startIndex=0,this.endIndex=0,null===(a=(n=this.cbs).onparserinit)||void 0===a||a.call(n,this),this.buffers.length=0,this.bufferOffset=0,this.writeIndex=0,this.ended=!1},e.prototype.parseComplete=function(e){this.reset(),this.end(e)},e.prototype.getSlice=function(e,t){for(;e-this.bufferOffset>=this.buffers[0].length;)this.shiftBuffer();for(var n=this.buffers[0].slice(e-this.bufferOffset,t-this.bufferOffset);t-this.bufferOffset>this.buffers[0].length;)this.shiftBuffer(),n+=this.buffers[0].slice(0,t-this.bufferOffset);return n},e.prototype.shiftBuffer=function(){this.bufferOffset+=this.buffers[0].length,this.writeIndex--,this.buffers.shift()},e.prototype.write=function(e){var t,n;this.ended?null===(n=(t=this.cbs).onerror)||void 0===n||n.call(t,new Error(".write() after done!")):(this.buffers.push(e),this.tokenizer.running&&(this.tokenizer.write(e),this.writeIndex++))},e.prototype.end=function(e){var t,n;this.ended?null===(n=(t=this.cbs).onerror)||void 0===n||n.call(t,new Error(".end() after done!")):(e&&this.write(e),this.ended=!0,this.tokenizer.end())},e.prototype.pause=function(){this.tokenizer.pause()},e.prototype.resume=function(){for(this.tokenizer.resume();this.tokenizer.running&&this.writeIndex<this.buffers.length;)this.tokenizer.write(this.buffers[this.writeIndex++]);this.ended&&this.tokenizer.end()},e.prototype.parseChunk=function(e){this.write(e)},e.prototype.done=function(e){this.end(e)},e}();t.Parser=b},34614:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.QuoteType=void 0;var a,r,i,o=n(12322);function d(e){return e===a.Space||e===a.NewLine||e===a.Tab||e===a.FormFeed||e===a.CarriageReturn}function s(e){return e===a.Slash||e===a.Gt||d(e)}function c(e){return e>=a.Zero&&e<=a.Nine}!function(e){e[e.Tab=9]="Tab",e[e.NewLine=10]="NewLine",e[e.FormFeed=12]="FormFeed",e[e.CarriageReturn=13]="CarriageReturn",e[e.Space=32]="Space",e[e.ExclamationMark=33]="ExclamationMark",e[e.Number=35]="Number",e[e.Amp=38]="Amp",e[e.SingleQuote=39]="SingleQuote",e[e.DoubleQuote=34]="DoubleQuote",e[e.Dash=45]="Dash",e[e.Slash=47]="Slash",e[e.Zero=48]="Zero",e[e.Nine=57]="Nine",e[e.Semi=59]="Semi",e[e.Lt=60]="Lt",e[e.Eq=61]="Eq",e[e.Gt=62]="Gt",e[e.Questionmark=63]="Questionmark",e[e.UpperA=65]="UpperA",e[e.LowerA=97]="LowerA",e[e.UpperF=70]="UpperF",e[e.LowerF=102]="LowerF",e[e.UpperZ=90]="UpperZ",e[e.LowerZ=122]="LowerZ",e[e.LowerX=120]="LowerX",e[e.OpeningSquareBracket=91]="OpeningSquareBracket"}(a||(a={})),function(e){e[e.Text=1]="Text",e[e.BeforeTagName=2]="BeforeTagName",e[e.InTagName=3]="InTagName",e[e.InSelfClosingTag=4]="InSelfClosingTag",e[e.BeforeClosingTagName=5]="BeforeClosingTagName",e[e.InClosingTagName=6]="InClosingTagName",e[e.AfterClosingTagName=7]="AfterClosingTagName",e[e.BeforeAttributeName=8]="BeforeAttributeName",e[e.InAttributeName=9]="InAttributeName",e[e.AfterAttributeName=10]="AfterAttributeName",e[e.BeforeAttributeValue=11]="BeforeAttributeValue",e[e.InAttributeValueDq=12]="InAttributeValueDq",e[e.InAttributeValueSq=13]="InAttributeValueSq",e[e.InAttributeValueNq=14]="InAttributeValueNq",e[e.BeforeDeclaration=15]="BeforeDeclaration",e[e.InDeclaration=16]="InDeclaration",e[e.InProcessingInstruction=17]="InProcessingInstruction",e[e.BeforeComment=18]="BeforeComment",e[e.CDATASequence=19]="CDATASequence",e[e.InSpecialComment=20]="InSpecialComment",e[e.InCommentLike=21]="InCommentLike",e[e.BeforeSpecialS=22]="BeforeSpecialS",e[e.SpecialStartSequence=23]="SpecialStartSequence",e[e.InSpecialTag=24]="InSpecialTag",e[e.BeforeEntity=25]="BeforeEntity",e[e.BeforeNumericEntity=26]="BeforeNumericEntity",e[e.InNamedEntity=27]="InNamedEntity",e[e.InNumericEntity=28]="InNumericEntity",e[e.InHexEntity=29]="InHexEntity"}(r||(r={})),function(e){e[e.NoValue=0]="NoValue",e[e.Unquoted=1]="Unquoted",e[e.Single=2]="Single",e[e.Double=3]="Double"}(i=t.QuoteType||(t.QuoteType={}));var u={Cdata:new Uint8Array([67,68,65,84,65,91]),CdataEnd:new Uint8Array([93,93,62]),CommentEnd:new Uint8Array([45,45,62]),ScriptEnd:new Uint8Array([60,47,115,99,114,105,112,116]),StyleEnd:new Uint8Array([60,47,115,116,121,108,101]),TitleEnd:new Uint8Array([60,47,116,105,116,108,101])},l=function(){function e(e,t){var n=e.xmlMode,a=void 0!==n&&n,i=e.decodeEntities,d=void 0===i||i;this.cbs=t,this.state=r.Text,this.buffer="",this.sectionStart=0,this.index=0,this.baseState=r.Text,this.isSpecial=!1,this.running=!0,this.offset=0,this.currentSequence=void 0,this.sequenceIndex=0,this.trieIndex=0,this.trieCurrent=0,this.entityResult=0,this.entityExcess=0,this.xmlMode=a,this.decodeEntities=d,this.entityTrie=a?o.xmlDecodeTree:o.htmlDecodeTree}return e.prototype.reset=function(){this.state=r.Text,this.buffer="",this.sectionStart=0,this.index=0,this.baseState=r.Text,this.currentSequence=void 0,this.running=!0,this.offset=0},e.prototype.write=function(e){this.offset+=this.buffer.length,this.buffer=e,this.parse()},e.prototype.end=function(){this.running&&this.finish()},e.prototype.pause=function(){this.running=!1},e.prototype.resume=function(){this.running=!0,this.index<this.buffer.length+this.offset&&this.parse()},e.prototype.getIndex=function(){return this.index},e.prototype.getSectionStart=function(){return this.sectionStart},e.prototype.stateText=function(e){e===a.Lt||!this.decodeEntities&&this.fastForwardTo(a.Lt)?(this.index>this.sectionStart&&this.cbs.ontext(this.sectionStart,this.index),this.state=r.BeforeTagName,this.sectionStart=this.index):this.decodeEntities&&e===a.Amp&&(this.state=r.BeforeEntity)},e.prototype.stateSpecialStartSequence=function(e){var t=this.sequenceIndex===this.currentSequence.length;if(t?s(e):(32|e)===this.currentSequence[this.sequenceIndex]){if(!t)return void this.sequenceIndex++}else this.isSpecial=!1;this.sequenceIndex=0,this.state=r.InTagName,this.stateInTagName(e)},e.prototype.stateInSpecialTag=function(e){if(this.sequenceIndex===this.currentSequence.length){if(e===a.Gt||d(e)){var t=this.index-this.currentSequence.length;if(this.sectionStart<t){var n=this.index;this.index=t,this.cbs.ontext(this.sectionStart,t),this.index=n}return this.isSpecial=!1,this.sectionStart=t+2,void this.stateInClosingTagName(e)}this.sequenceIndex=0}(32|e)===this.currentSequence[this.sequenceIndex]?this.sequenceIndex+=1:0===this.sequenceIndex?this.currentSequence===u.TitleEnd?this.decodeEntities&&e===a.Amp&&(this.state=r.BeforeEntity):this.fastForwardTo(a.Lt)&&(this.sequenceIndex=1):this.sequenceIndex=Number(e===a.Lt)},e.prototype.stateCDATASequence=function(e){e===u.Cdata[this.sequenceIndex]?++this.sequenceIndex===u.Cdata.length&&(this.state=r.InCommentLike,this.currentSequence=u.CdataEnd,this.sequenceIndex=0,this.sectionStart=this.index+1):(this.sequenceIndex=0,this.state=r.InDeclaration,this.stateInDeclaration(e))},e.prototype.fastForwardTo=function(e){for(;++this.index<this.buffer.length+this.offset;)if(this.buffer.charCodeAt(this.index-this.offset)===e)return!0;return this.index=this.buffer.length+this.offset-1,!1},e.prototype.stateInCommentLike=function(e){e===this.currentSequence[this.sequenceIndex]?++this.sequenceIndex===this.currentSequence.length&&(this.currentSequence===u.CdataEnd?this.cbs.oncdata(this.sectionStart,this.index,2):this.cbs.oncomment(this.sectionStart,this.index,2),this.sequenceIndex=0,this.sectionStart=this.index+1,this.state=r.Text):0===this.sequenceIndex?this.fastForwardTo(this.currentSequence[0])&&(this.sequenceIndex=1):e!==this.currentSequence[this.sequenceIndex-1]&&(this.sequenceIndex=0)},e.prototype.isTagStartChar=function(e){return this.xmlMode?!s(e):function(e){return e>=a.LowerA&&e<=a.LowerZ||e>=a.UpperA&&e<=a.UpperZ}(e)},e.prototype.startSpecial=function(e,t){this.isSpecial=!0,this.currentSequence=e,this.sequenceIndex=t,this.state=r.SpecialStartSequence},e.prototype.stateBeforeTagName=function(e){if(e===a.ExclamationMark)this.state=r.BeforeDeclaration,this.sectionStart=this.index+1;else if(e===a.Questionmark)this.state=r.InProcessingInstruction,this.sectionStart=this.index+1;else if(this.isTagStartChar(e)){var t=32|e;this.sectionStart=this.index,this.xmlMode||t!==u.TitleEnd[2]?this.state=this.xmlMode||t!==u.ScriptEnd[2]?r.InTagName:r.BeforeSpecialS:this.startSpecial(u.TitleEnd,3)}else e===a.Slash?this.state=r.BeforeClosingTagName:(this.state=r.Text,this.stateText(e))},e.prototype.stateInTagName=function(e){s(e)&&(this.cbs.onopentagname(this.sectionStart,this.index),this.sectionStart=-1,this.state=r.BeforeAttributeName,this.stateBeforeAttributeName(e))},e.prototype.stateBeforeClosingTagName=function(e){d(e)||(e===a.Gt?this.state=r.Text:(this.state=this.isTagStartChar(e)?r.InClosingTagName:r.InSpecialComment,this.sectionStart=this.index))},e.prototype.stateInClosingTagName=function(e){(e===a.Gt||d(e))&&(this.cbs.onclosetag(this.sectionStart,this.index),this.sectionStart=-1,this.state=r.AfterClosingTagName,this.stateAfterClosingTagName(e))},e.prototype.stateAfterClosingTagName=function(e){(e===a.Gt||this.fastForwardTo(a.Gt))&&(this.state=r.Text,this.baseState=r.Text,this.sectionStart=this.index+1)},e.prototype.stateBeforeAttributeName=function(e){e===a.Gt?(this.cbs.onopentagend(this.index),this.isSpecial?(this.state=r.InSpecialTag,this.sequenceIndex=0):this.state=r.Text,this.baseState=this.state,this.sectionStart=this.index+1):e===a.Slash?this.state=r.InSelfClosingTag:d(e)||(this.state=r.InAttributeName,this.sectionStart=this.index)},e.prototype.stateInSelfClosingTag=function(e){e===a.Gt?(this.cbs.onselfclosingtag(this.index),this.state=r.Text,this.baseState=r.Text,this.sectionStart=this.index+1,this.isSpecial=!1):d(e)||(this.state=r.BeforeAttributeName,this.stateBeforeAttributeName(e))},e.prototype.stateInAttributeName=function(e){(e===a.Eq||s(e))&&(this.cbs.onattribname(this.sectionStart,this.index),this.sectionStart=-1,this.state=r.AfterAttributeName,this.stateAfterAttributeName(e))},e.prototype.stateAfterAttributeName=function(e){e===a.Eq?this.state=r.BeforeAttributeValue:e===a.Slash||e===a.Gt?(this.cbs.onattribend(i.NoValue,this.index),this.state=r.BeforeAttributeName,this.stateBeforeAttributeName(e)):d(e)||(this.cbs.onattribend(i.NoValue,this.index),this.state=r.InAttributeName,this.sectionStart=this.index)},e.prototype.stateBeforeAttributeValue=function(e){e===a.DoubleQuote?(this.state=r.InAttributeValueDq,this.sectionStart=this.index+1):e===a.SingleQuote?(this.state=r.InAttributeValueSq,this.sectionStart=this.index+1):d(e)||(this.sectionStart=this.index,this.state=r.InAttributeValueNq,this.stateInAttributeValueNoQuotes(e))},e.prototype.handleInAttributeValue=function(e,t){e===t||!this.decodeEntities&&this.fastForwardTo(t)?(this.cbs.onattribdata(this.sectionStart,this.index),this.sectionStart=-1,this.cbs.onattribend(t===a.DoubleQuote?i.Double:i.Single,this.index),this.state=r.BeforeAttributeName):this.decodeEntities&&e===a.Amp&&(this.baseState=this.state,this.state=r.BeforeEntity)},e.prototype.stateInAttributeValueDoubleQuotes=function(e){this.handleInAttributeValue(e,a.DoubleQuote)},e.prototype.stateInAttributeValueSingleQuotes=function(e){this.handleInAttributeValue(e,a.SingleQuote)},e.prototype.stateInAttributeValueNoQuotes=function(e){d(e)||e===a.Gt?(this.cbs.onattribdata(this.sectionStart,this.index),this.sectionStart=-1,this.cbs.onattribend(i.Unquoted,this.index),this.state=r.BeforeAttributeName,this.stateBeforeAttributeName(e)):this.decodeEntities&&e===a.Amp&&(this.baseState=this.state,this.state=r.BeforeEntity)},e.prototype.stateBeforeDeclaration=function(e){e===a.OpeningSquareBracket?(this.state=r.CDATASequence,this.sequenceIndex=0):this.state=e===a.Dash?r.BeforeComment:r.InDeclaration},e.prototype.stateInDeclaration=function(e){(e===a.Gt||this.fastForwardTo(a.Gt))&&(this.cbs.ondeclaration(this.sectionStart,this.index),this.state=r.Text,this.sectionStart=this.index+1)},e.prototype.stateInProcessingInstruction=function(e){(e===a.Gt||this.fastForwardTo(a.Gt))&&(this.cbs.onprocessinginstruction(this.sectionStart,this.index),this.state=r.Text,this.sectionStart=this.index+1)},e.prototype.stateBeforeComment=function(e){e===a.Dash?(this.state=r.InCommentLike,this.currentSequence=u.CommentEnd,this.sequenceIndex=2,this.sectionStart=this.index+1):this.state=r.InDeclaration},e.prototype.stateInSpecialComment=function(e){(e===a.Gt||this.fastForwardTo(a.Gt))&&(this.cbs.oncomment(this.sectionStart,this.index,0),this.state=r.Text,this.sectionStart=this.index+1)},e.prototype.stateBeforeSpecialS=function(e){var t=32|e;t===u.ScriptEnd[3]?this.startSpecial(u.ScriptEnd,4):t===u.StyleEnd[3]?this.startSpecial(u.StyleEnd,4):(this.state=r.InTagName,this.stateInTagName(e))},e.prototype.stateBeforeEntity=function(e){this.entityExcess=1,this.entityResult=0,e===a.Number?this.state=r.BeforeNumericEntity:e===a.Amp||(this.trieIndex=0,this.trieCurrent=this.entityTrie[0],this.state=r.InNamedEntity,this.stateInNamedEntity(e))},e.prototype.stateInNamedEntity=function(e){if(this.entityExcess+=1,this.trieIndex=(0,o.determineBranch)(this.entityTrie,this.trieCurrent,this.trieIndex+1,e),this.trieIndex<0)return this.emitNamedEntity(),void this.index--;this.trieCurrent=this.entityTrie[this.trieIndex];var t=this.trieCurrent&o.BinTrieFlags.VALUE_LENGTH;if(t){var n=(t>>14)-1;if(this.allowLegacyEntity()||e===a.Semi){var r=this.index-this.entityExcess+1;r>this.sectionStart&&this.emitPartial(this.sectionStart,r),this.entityResult=this.trieIndex,this.trieIndex+=n,this.entityExcess=0,this.sectionStart=this.index+1,0===n&&this.emitNamedEntity()}else this.trieIndex+=n}},e.prototype.emitNamedEntity=function(){if(this.state=this.baseState,0!==this.entityResult)switch((this.entityTrie[this.entityResult]&o.BinTrieFlags.VALUE_LENGTH)>>14){case 1:this.emitCodePoint(this.entityTrie[this.entityResult]&~o.BinTrieFlags.VALUE_LENGTH);break;case 2:this.emitCodePoint(this.entityTrie[this.entityResult+1]);break;case 3:this.emitCodePoint(this.entityTrie[this.entityResult+1]),this.emitCodePoint(this.entityTrie[this.entityResult+2])}},e.prototype.stateBeforeNumericEntity=function(e){(32|e)===a.LowerX?(this.entityExcess++,this.state=r.InHexEntity):(this.state=r.InNumericEntity,this.stateInNumericEntity(e))},e.prototype.emitNumericEntity=function(e){var t=this.index-this.entityExcess-1;t+2+Number(this.state===r.InHexEntity)!==this.index&&(t>this.sectionStart&&this.emitPartial(this.sectionStart,t),this.sectionStart=this.index+Number(e),this.emitCodePoint((0,o.replaceCodePoint)(this.entityResult))),this.state=this.baseState},e.prototype.stateInNumericEntity=function(e){e===a.Semi?this.emitNumericEntity(!0):c(e)?(this.entityResult=10*this.entityResult+(e-a.Zero),this.entityExcess++):(this.allowLegacyEntity()?this.emitNumericEntity(!1):this.state=this.baseState,this.index--)},e.prototype.stateInHexEntity=function(e){e===a.Semi?this.emitNumericEntity(!0):c(e)?(this.entityResult=16*this.entityResult+(e-a.Zero),this.entityExcess++):!function(e){return e>=a.UpperA&&e<=a.UpperF||e>=a.LowerA&&e<=a.LowerF}(e)?(this.allowLegacyEntity()?this.emitNumericEntity(!1):this.state=this.baseState,this.index--):(this.entityResult=16*this.entityResult+((32|e)-a.LowerA+10),this.entityExcess++)},e.prototype.allowLegacyEntity=function(){return!this.xmlMode&&(this.baseState===r.Text||this.baseState===r.InSpecialTag)},e.prototype.cleanup=function(){this.running&&this.sectionStart!==this.index&&(this.state===r.Text||this.state===r.InSpecialTag&&0===this.sequenceIndex?(this.cbs.ontext(this.sectionStart,this.index),this.sectionStart=this.index):this.state!==r.InAttributeValueDq&&this.state!==r.InAttributeValueSq&&this.state!==r.InAttributeValueNq||(this.cbs.onattribdata(this.sectionStart,this.index),this.sectionStart=this.index))},e.prototype.shouldContinue=function(){return this.index<this.buffer.length+this.offset&&this.running},e.prototype.parse=function(){for(;this.shouldContinue();){var e=this.buffer.charCodeAt(this.index-this.offset);switch(this.state){case r.Text:this.stateText(e);break;case r.SpecialStartSequence:this.stateSpecialStartSequence(e);break;case r.InSpecialTag:this.stateInSpecialTag(e);break;case r.CDATASequence:this.stateCDATASequence(e);break;case r.InAttributeValueDq:this.stateInAttributeValueDoubleQuotes(e);break;case r.InAttributeName:this.stateInAttributeName(e);break;case r.InCommentLike:this.stateInCommentLike(e);break;case r.InSpecialComment:this.stateInSpecialComment(e);break;case r.BeforeAttributeName:this.stateBeforeAttributeName(e);break;case r.InTagName:this.stateInTagName(e);break;case r.InClosingTagName:this.stateInClosingTagName(e);break;case r.BeforeTagName:this.stateBeforeTagName(e);break;case r.AfterAttributeName:this.stateAfterAttributeName(e);break;case r.InAttributeValueSq:this.stateInAttributeValueSingleQuotes(e);break;case r.BeforeAttributeValue:this.stateBeforeAttributeValue(e);break;case r.BeforeClosingTagName:this.stateBeforeClosingTagName(e);break;case r.AfterClosingTagName:this.stateAfterClosingTagName(e);break;case r.BeforeSpecialS:this.stateBeforeSpecialS(e);break;case r.InAttributeValueNq:this.stateInAttributeValueNoQuotes(e);break;case r.InSelfClosingTag:this.stateInSelfClosingTag(e);break;case r.InDeclaration:this.stateInDeclaration(e);break;case r.BeforeDeclaration:this.stateBeforeDeclaration(e);break;case r.BeforeComment:this.stateBeforeComment(e);break;case r.InProcessingInstruction:this.stateInProcessingInstruction(e);break;case r.InNamedEntity:this.stateInNamedEntity(e);break;case r.BeforeEntity:this.stateBeforeEntity(e);break;case r.InHexEntity:this.stateInHexEntity(e);break;case r.InNumericEntity:this.stateInNumericEntity(e);break;default:this.stateBeforeNumericEntity(e)}this.index++}this.cleanup()},e.prototype.finish=function(){this.state===r.InNamedEntity&&this.emitNamedEntity(),this.sectionStart<this.index&&this.handleTrailingData(),this.cbs.onend()},e.prototype.handleTrailingData=function(){var e=this.buffer.length+this.offset;this.state===r.InCommentLike?this.currentSequence===u.CdataEnd?this.cbs.oncdata(this.sectionStart,e,0):this.cbs.oncomment(this.sectionStart,e,0):this.state===r.InNumericEntity&&this.allowLegacyEntity()||this.state===r.InHexEntity&&this.allowLegacyEntity()?this.emitNumericEntity(!1):this.state===r.InTagName||this.state===r.BeforeAttributeName||this.state===r.BeforeAttributeValue||this.state===r.AfterAttributeName||this.state===r.InAttributeName||this.state===r.InAttributeValueSq||this.state===r.InAttributeValueDq||this.state===r.InAttributeValueNq||this.state===r.InClosingTagName||this.cbs.ontext(this.sectionStart,e)},e.prototype.emitPartial=function(e,t){this.baseState!==r.Text&&this.baseState!==r.InSpecialTag?this.cbs.onattribdata(e,t):this.cbs.ontext(e,t)},e.prototype.emitCodePoint=function(e){this.baseState!==r.Text&&this.baseState!==r.InSpecialTag?this.cbs.onattribentity(e):this.cbs.ontextentity(e)},e}();t.default=l},72904:function(e,t,n){"use strict";var a=this&&this.__createBinding||(Object.create?function(e,t,n,a){void 0===a&&(a=n);var r=Object.getOwnPropertyDescriptor(t,n);r&&!("get"in r?!t.__esModule:r.writable||r.configurable)||(r={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,a,r)}:function(e,t,n,a){void 0===a&&(a=n),e[a]=t[n]}),r=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),i=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&a(t,e,n);return r(t,e),t},o=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.DomUtils=t.parseFeed=t.getFeed=t.ElementType=t.Tokenizer=t.createDomStream=t.parseDOM=t.parseDocument=t.DefaultHandler=t.DomHandler=t.Parser=void 0;var d=n(54418),s=n(54418);Object.defineProperty(t,"Parser",{enumerable:!0,get:function(){return s.Parser}});var c=n(36722),u=n(36722);function l(e,t){var n=new c.DomHandler(void 0,t);return new d.Parser(n,t).end(e),n.root}function g(e,t){return l(e,t).children}Object.defineProperty(t,"DomHandler",{enumerable:!0,get:function(){return u.DomHandler}}),Object.defineProperty(t,"DefaultHandler",{enumerable:!0,get:function(){return u.DomHandler}}),t.parseDocument=l,t.parseDOM=g,t.createDomStream=function(e,t,n){var a=new c.DomHandler(e,t,n);return new d.Parser(a,t)};var h=n(34614);Object.defineProperty(t,"Tokenizer",{enumerable:!0,get:function(){return o(h).default}}),t.ElementType=i(n(80289));var f=n(557),p=n(557);Object.defineProperty(t,"getFeed",{enumerable:!0,get:function(){return p.getFeed}});var m={xmlMode:!0};t.parseFeed=function(e,t){return void 0===t&&(t=m),(0,f.getFeed)(g(e,t))},t.DomUtils=i(n(557))},12322:function(e,t,n){"use strict";var a=this&&this.__createBinding||(Object.create?function(e,t,n,a){void 0===a&&(a=n);var r=Object.getOwnPropertyDescriptor(t,n);r&&!("get"in r?!t.__esModule:r.writable||r.configurable)||(r={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,a,r)}:function(e,t,n,a){void 0===a&&(a=n),e[a]=t[n]}),r=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),i=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&a(t,e,n);return r(t,e),t},o=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.decodeXML=t.decodeHTMLStrict=t.decodeHTMLAttribute=t.decodeHTML=t.determineBranch=t.EntityDecoder=t.DecodingMode=t.BinTrieFlags=t.fromCodePoint=t.replaceCodePoint=t.decodeCodePoint=t.xmlDecodeTree=t.htmlDecodeTree=void 0;var d=o(n(59222));t.htmlDecodeTree=d.default;var s=o(n(67379));t.xmlDecodeTree=s.default;var c=i(n(24058));t.decodeCodePoint=c.default;var u,l=n(24058);Object.defineProperty(t,"replaceCodePoint",{enumerable:!0,get:function(){return l.replaceCodePoint}}),Object.defineProperty(t,"fromCodePoint",{enumerable:!0,get:function(){return l.fromCodePoint}}),function(e){e[e.NUM=35]="NUM",e[e.SEMI=59]="SEMI",e[e.EQUALS=61]="EQUALS",e[e.ZERO=48]="ZERO",e[e.NINE=57]="NINE",e[e.LOWER_A=97]="LOWER_A",e[e.LOWER_F=102]="LOWER_F",e[e.LOWER_X=120]="LOWER_X",e[e.LOWER_Z=122]="LOWER_Z",e[e.UPPER_A=65]="UPPER_A",e[e.UPPER_F=70]="UPPER_F",e[e.UPPER_Z=90]="UPPER_Z"}(u||(u={}));var g,h,f;function p(e){return e>=u.ZERO&&e<=u.NINE}function m(e){return e===u.EQUALS||function(e){return e>=u.UPPER_A&&e<=u.UPPER_Z||e>=u.LOWER_A&&e<=u.LOWER_Z||p(e)}(e)}!function(e){e[e.VALUE_LENGTH=49152]="VALUE_LENGTH",e[e.BRANCH_LENGTH=16256]="BRANCH_LENGTH",e[e.JUMP_TABLE=127]="JUMP_TABLE"}(g=t.BinTrieFlags||(t.BinTrieFlags={})),function(e){e[e.EntityStart=0]="EntityStart",e[e.NumericStart=1]="NumericStart",e[e.NumericDecimal=2]="NumericDecimal",e[e.NumericHex=3]="NumericHex",e[e.NamedEntity=4]="NamedEntity"}(h||(h={})),function(e){e[e.Legacy=0]="Legacy",e[e.Strict=1]="Strict",e[e.Attribute=2]="Attribute"}(f=t.DecodingMode||(t.DecodingMode={}));var R=function(){function e(e,t,n){this.decodeTree=e,this.emitCodePoint=t,this.errors=n,this.state=h.EntityStart,this.consumed=1,this.result=0,this.treeIndex=0,this.excess=1,this.decodeMode=f.Strict}return e.prototype.startEntity=function(e){this.decodeMode=e,this.state=h.EntityStart,this.result=0,this.treeIndex=0,this.excess=1,this.consumed=1},e.prototype.write=function(e,t){switch(this.state){case h.EntityStart:return e.charCodeAt(t)===u.NUM?(this.state=h.NumericStart,this.consumed+=1,this.stateNumericStart(e,t+1)):(this.state=h.NamedEntity,this.stateNamedEntity(e,t));case h.NumericStart:return this.stateNumericStart(e,t);case h.NumericDecimal:return this.stateNumericDecimal(e,t);case h.NumericHex:return this.stateNumericHex(e,t);case h.NamedEntity:return this.stateNamedEntity(e,t)}},e.prototype.stateNumericStart=function(e,t){return t>=e.length?-1:(32|e.charCodeAt(t))===u.LOWER_X?(this.state=h.NumericHex,this.consumed+=1,this.stateNumericHex(e,t+1)):(this.state=h.NumericDecimal,this.stateNumericDecimal(e,t))},e.prototype.addToNumericResult=function(e,t,n,a){if(t!==n){var r=n-t;this.result=this.result*Math.pow(a,r)+parseInt(e.substr(t,r),a),this.consumed+=r}},e.prototype.stateNumericHex=function(e,t){for(var n,a=t;t<e.length;){var r=e.charCodeAt(t);if(!(p(r)||(n=r,n>=u.UPPER_A&&n<=u.UPPER_F||n>=u.LOWER_A&&n<=u.LOWER_F)))return this.addToNumericResult(e,a,t,16),this.emitNumericEntity(r,3);t+=1}return this.addToNumericResult(e,a,t,16),-1},e.prototype.stateNumericDecimal=function(e,t){for(var n=t;t<e.length;){var a=e.charCodeAt(t);if(!p(a))return this.addToNumericResult(e,n,t,10),this.emitNumericEntity(a,2);t+=1}return this.addToNumericResult(e,n,t,10),-1},e.prototype.emitNumericEntity=function(e,t){var n;if(this.consumed<=t)return null===(n=this.errors)||void 0===n||n.absenceOfDigitsInNumericCharacterReference(this.consumed),0;if(e===u.SEMI)this.consumed+=1;else if(this.decodeMode===f.Strict)return 0;return this.emitCodePoint((0,c.replaceCodePoint)(this.result),this.consumed),this.errors&&(e!==u.SEMI&&this.errors.missingSemicolonAfterCharacterReference(),this.errors.validateNumericCharacterReference(this.result)),this.consumed},e.prototype.stateNamedEntity=function(e,t){for(var n=this.decodeTree,a=n[this.treeIndex],r=(a&g.VALUE_LENGTH)>>14;t<e.length;t++,this.excess++){var i=e.charCodeAt(t);if(this.treeIndex=y(n,a,this.treeIndex+Math.max(1,r),i),this.treeIndex<0)return 0===this.result||this.decodeMode===f.Attribute&&(0===r||m(i))?0:this.emitNotTerminatedNamedEntity();if(0!==(r=((a=n[this.treeIndex])&g.VALUE_LENGTH)>>14)){if(i===u.SEMI)return this.emitNamedEntityData(this.treeIndex,r,this.consumed+this.excess);this.decodeMode!==f.Strict&&(this.result=this.treeIndex,this.consumed+=this.excess,this.excess=0)}}return-1},e.prototype.emitNotTerminatedNamedEntity=function(){var e,t=this.result,n=(this.decodeTree[t]&g.VALUE_LENGTH)>>14;return this.emitNamedEntityData(t,n,this.consumed),null===(e=this.errors)||void 0===e||e.missingSemicolonAfterCharacterReference(),this.consumed},e.prototype.emitNamedEntityData=function(e,t,n){var a=this.decodeTree;return this.emitCodePoint(1===t?a[e]&~g.VALUE_LENGTH:a[e+1],n),3===t&&this.emitCodePoint(a[e+2],n),n},e.prototype.end=function(){var e;switch(this.state){case h.NamedEntity:return 0===this.result||this.decodeMode===f.Attribute&&this.result!==this.treeIndex?0:this.emitNotTerminatedNamedEntity();case h.NumericDecimal:return this.emitNumericEntity(0,2);case h.NumericHex:return this.emitNumericEntity(0,3);case h.NumericStart:return null===(e=this.errors)||void 0===e||e.absenceOfDigitsInNumericCharacterReference(this.consumed),0;case h.EntityStart:return 0}},e}();function b(e){var t="",n=new R(e,(function(e){return t+=(0,c.fromCodePoint)(e)}));return function(e,a){for(var r=0,i=0;(i=e.indexOf("&",i))>=0;){t+=e.slice(r,i),n.startEntity(a);var o=n.write(e,i+1);if(o<0){r=i+n.end();break}r=i+o,i=0===o?r+1:r}var d=t+e.slice(r);return t="",d}}function y(e,t,n,a){var r=(t&g.BRANCH_LENGTH)>>7,i=t&g.JUMP_TABLE;if(0===r)return 0!==i&&a===i?n:-1;if(i){var o=a-i;return o<0||o>=r?-1:e[n+o]-1}for(var d=n,s=d+r-1;d<=s;){var c=d+s>>>1,u=e[c];if(u<a)d=c+1;else{if(!(u>a))return e[c+r];s=c-1}}return-1}t.EntityDecoder=R,t.determineBranch=y;var v=b(d.default),_=b(s.default);t.decodeHTML=function(e,t){return void 0===t&&(t=f.Legacy),v(e,t)},t.decodeHTMLAttribute=function(e){return v(e,f.Attribute)},t.decodeHTMLStrict=function(e){return v(e,f.Strict)},t.decodeXML=function(e){return _(e,f.Strict)}},24058:function(e,t){"use strict";var n;Object.defineProperty(t,"__esModule",{value:!0}),t.replaceCodePoint=t.fromCodePoint=void 0;var a=new Map([[0,65533],[128,8364],[130,8218],[131,402],[132,8222],[133,8230],[134,8224],[135,8225],[136,710],[137,8240],[138,352],[139,8249],[140,338],[142,381],[145,8216],[146,8217],[147,8220],[148,8221],[149,8226],[150,8211],[151,8212],[152,732],[153,8482],[154,353],[155,8250],[156,339],[158,382],[159,376]]);function r(e){var t;return e>=55296&&e<=57343||e>1114111?65533:null!==(t=a.get(e))&&void 0!==t?t:e}t.fromCodePoint=null!==(n=String.fromCodePoint)&&void 0!==n?n:function(e){var t="";return e>65535&&(e-=65536,t+=String.fromCharCode(e>>>10&1023|55296),e=56320|1023&e),t+=String.fromCharCode(e)},t.replaceCodePoint=r,t.default=function(e){return(0,t.fromCodePoint)(r(e))}},59222:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=new Uint16Array('ᵁ<Õıʊҝջאٵ۞ޢߖࠏ੊ઑඡ๭༉༦჊ረዡᐕᒝᓃᓟᔥ\0\0\0\0\0\0ᕫᛍᦍᰒᷝ὾⁠↰⊍⏀⏻⑂⠤⤒ⴈ⹈⿎〖㊺㘹㞬㣾㨨㩱㫠㬮ࠀEMabcfglmnoprstu\\bfms„‹•˜¦³¹ÈÏlig耻Æ䃆P耻&䀦cute耻Á䃁reve;䄂Āiyx}rc耻Â䃂;䐐r;쀀𝔄rave耻À䃀pha;䎑acr;䄀d;橓Āgp¡on;䄄f;쀀𝔸plyFunction;恡ing耻Å䃅Ācs¾Ãr;쀀𝒜ign;扔ilde耻Ã䃃ml耻Ä䃄ЀaceforsuåûþėĜĢħĪĀcrêòkslash;或Ŷöø;櫧ed;挆y;䐑ƀcrtąċĔause;戵noullis;愬a;䎒r;쀀𝔅pf;쀀𝔹eve;䋘còēmpeq;扎܀HOacdefhilorsuōőŖƀƞƢƵƷƺǜȕɳɸɾcy;䐧PY耻©䂩ƀcpyŝŢźute;䄆Ā;iŧŨ拒talDifferentialD;慅leys;愭ȀaeioƉƎƔƘron;䄌dil耻Ç䃇rc;䄈nint;戰ot;䄊ĀdnƧƭilla;䂸terDot;䂷òſi;䎧rcleȀDMPTLJNjǑǖot;抙inus;抖lus;投imes;抗oĀcsǢǸkwiseContourIntegral;戲eCurlyĀDQȃȏoubleQuote;思uote;怙ȀlnpuȞȨɇɕonĀ;eȥȦ户;橴ƀgitȯȶȺruent;扡nt;戯ourIntegral;戮ĀfrɌɎ;愂oduct;成nterClockwiseContourIntegral;戳oss;樯cr;쀀𝒞pĀ;Cʄʅ拓ap;才րDJSZacefiosʠʬʰʴʸˋ˗ˡ˦̳ҍĀ;oŹʥtrahd;椑cy;䐂cy;䐅cy;䐏ƀgrsʿ˄ˇger;怡r;憡hv;櫤Āayː˕ron;䄎;䐔lĀ;t˝˞戇a;䎔r;쀀𝔇Āaf˫̧Ācm˰̢riticalȀADGT̖̜̀̆cute;䂴oŴ̋̍;䋙bleAcute;䋝rave;䁠ilde;䋜ond;拄ferentialD;慆Ѱ̽\0\0\0͔͂\0Ѕf;쀀𝔻ƀ;DE͈͉͍䂨ot;惜qual;扐blèCDLRUVͣͲ΂ϏϢϸontourIntegraìȹoɴ͹\0\0ͻ»͉nArrow;懓Āeo·ΤftƀARTΐΖΡrrow;懐ightArrow;懔eåˊngĀLRΫτeftĀARγιrrow;柸ightArrow;柺ightArrow;柹ightĀATϘϞrrow;懒ee;抨pɁϩ\0\0ϯrrow;懑ownArrow;懕erticalBar;戥ǹABLRTaВЪаўѿͼrrowƀ;BUНОТ憓ar;椓pArrow;懵reve;䌑eft˒к\0ц\0ѐightVector;楐eeVector;楞ectorĀ;Bљњ憽ar;楖ightǔѧ\0ѱeeVector;楟ectorĀ;BѺѻ懁ar;楗eeĀ;A҆҇护rrow;憧ĀctҒҗr;쀀𝒟rok;䄐ࠀNTacdfglmopqstuxҽӀӄӋӞӢӧӮӵԡԯԶՒ՝ՠեG;䅊H耻Ð䃐cute耻É䃉ƀaiyӒӗӜron;䄚rc耻Ê䃊;䐭ot;䄖r;쀀𝔈rave耻È䃈ement;戈ĀapӺӾcr;䄒tyɓԆ\0\0ԒmallSquare;旻erySmallSquare;斫ĀgpԦԪon;䄘f;쀀𝔼silon;䎕uĀaiԼՉlĀ;TՂՃ橵ilde;扂librium;懌Āci՗՚r;愰m;橳a;䎗ml耻Ë䃋Āipժկsts;戃onentialE;慇ʀcfiosօֈ֍ֲ׌y;䐤r;쀀𝔉lledɓ֗\0\0֣mallSquare;旼erySmallSquare;斪Ͱֺ\0ֿ\0\0ׄf;쀀𝔽All;戀riertrf;愱cò׋؀JTabcdfgorstר׬ׯ׺؀ؒؖ؛؝أ٬ٲcy;䐃耻>䀾mmaĀ;d׷׸䎓;䏜reve;䄞ƀeiy؇،ؐdil;䄢rc;䄜;䐓ot;䄠r;쀀𝔊;拙pf;쀀𝔾eater̀EFGLSTصلَٖٛ٦qualĀ;Lؾؿ扥ess;招ullEqual;执reater;檢ess;扷lantEqual;橾ilde;扳cr;쀀𝒢;扫ЀAacfiosuڅڋږڛڞڪھۊRDcy;䐪Āctڐڔek;䋇;䁞irc;䄤r;愌lbertSpace;愋ǰگ\0ڲf;愍izontalLine;攀Āctۃۅòکrok;䄦mpńېۘownHumðįqual;扏܀EJOacdfgmnostuۺ۾܃܇܎ܚܞܡܨ݄ݸދޏޕcy;䐕lig;䄲cy;䐁cute耻Í䃍Āiyܓܘrc耻Î䃎;䐘ot;䄰r;愑rave耻Ì䃌ƀ;apܠܯܿĀcgܴܷr;䄪inaryI;慈lieóϝǴ݉\0ݢĀ;eݍݎ戬Āgrݓݘral;戫section;拂isibleĀCTݬݲomma;恣imes;恢ƀgptݿރވon;䄮f;쀀𝕀a;䎙cr;愐ilde;䄨ǫޚ\0ޞcy;䐆l耻Ï䃏ʀcfosuެ޷޼߂ߐĀiyޱ޵rc;䄴;䐙r;쀀𝔍pf;쀀𝕁ǣ߇\0ߌr;쀀𝒥rcy;䐈kcy;䐄΀HJacfosߤߨ߽߬߱ࠂࠈcy;䐥cy;䐌ppa;䎚Āey߶߻dil;䄶;䐚r;쀀𝔎pf;쀀𝕂cr;쀀𝒦րJTaceflmostࠥࠩࠬࡐࡣ঳সে্਷ੇcy;䐉耻<䀼ʀcmnpr࠷࠼ࡁࡄࡍute;䄹bda;䎛g;柪lacetrf;愒r;憞ƀaeyࡗ࡜ࡡron;䄽dil;䄻;䐛Āfsࡨ॰tԀACDFRTUVarࡾࢩࢱࣦ࣠ࣼयज़ΐ४Ānrࢃ࢏gleBracket;柨rowƀ;BR࢙࢚࢞憐ar;懤ightArrow;懆eiling;挈oǵࢷ\0ࣃbleBracket;柦nǔࣈ\0࣒eeVector;楡ectorĀ;Bࣛࣜ懃ar;楙loor;挊ightĀAV࣯ࣵrrow;憔ector;楎Āerँगeƀ;AVउऊऐ抣rrow;憤ector;楚iangleƀ;BEतथऩ抲ar;槏qual;抴pƀDTVषूौownVector;楑eeVector;楠ectorĀ;Bॖॗ憿ar;楘ectorĀ;B॥०憼ar;楒ightáΜs̀EFGLSTॾঋকঝঢভqualGreater;拚ullEqual;扦reater;扶ess;檡lantEqual;橽ilde;扲r;쀀𝔏Ā;eঽা拘ftarrow;懚idot;䄿ƀnpw৔ਖਛgȀLRlr৞৷ਂਐeftĀAR০৬rrow;柵ightArrow;柷ightArrow;柶eftĀarγਊightáοightáϊf;쀀𝕃erĀLRਢਬeftArrow;憙ightArrow;憘ƀchtਾੀੂòࡌ;憰rok;䅁;扪Ѐacefiosuਗ਼੝੠੷੼અઋ઎p;椅y;䐜Ādl੥੯iumSpace;恟lintrf;愳r;쀀𝔐nusPlus;戓pf;쀀𝕄cò੶;䎜ҀJacefostuણધભીଔଙඑ඗ඞcy;䐊cute;䅃ƀaey઴હાron;䅇dil;䅅;䐝ƀgswે૰଎ativeƀMTV૓૟૨ediumSpace;怋hiĀcn૦૘ë૙eryThiî૙tedĀGL૸ଆreaterGreateòٳessLesóੈLine;䀊r;쀀𝔑ȀBnptଢନଷ଺reak;恠BreakingSpace;䂠f;愕ڀ;CDEGHLNPRSTV୕ୖ୪୼஡௫ఄ౞಄ದ೘ൡඅ櫬Āou୛୤ngruent;扢pCap;扭oubleVerticalBar;戦ƀlqxஃஊ஛ement;戉ualĀ;Tஒஓ扠ilde;쀀≂̸ists;戄reater΀;EFGLSTஶஷ஽௉௓௘௥扯qual;扱ullEqual;쀀≧̸reater;쀀≫̸ess;批lantEqual;쀀⩾̸ilde;扵umpń௲௽ownHump;쀀≎̸qual;쀀≏̸eĀfsఊధtTriangleƀ;BEచఛడ拪ar;쀀⧏̸qual;括s̀;EGLSTవశ఼ౄోౘ扮qual;扰reater;扸ess;쀀≪̸lantEqual;쀀⩽̸ilde;扴estedĀGL౨౹reaterGreater;쀀⪢̸essLess;쀀⪡̸recedesƀ;ESಒಓಛ技qual;쀀⪯̸lantEqual;拠ĀeiಫಹverseElement;戌ghtTriangleƀ;BEೋೌ೒拫ar;쀀⧐̸qual;拭ĀquೝഌuareSuĀbp೨೹setĀ;E೰ೳ쀀⊏̸qual;拢ersetĀ;Eഃആ쀀⊐̸qual;拣ƀbcpഓതൎsetĀ;Eഛഞ쀀⊂⃒qual;抈ceedsȀ;ESTലള഻െ抁qual;쀀⪰̸lantEqual;拡ilde;쀀≿̸ersetĀ;E൘൛쀀⊃⃒qual;抉ildeȀ;EFT൮൯൵ൿ扁qual;扄ullEqual;扇ilde;扉erticalBar;戤cr;쀀𝒩ilde耻Ñ䃑;䎝܀Eacdfgmoprstuvලෂ෉෕ෛ෠෧෼ขภยา฿ไlig;䅒cute耻Ó䃓Āiy෎ීrc耻Ô䃔;䐞blac;䅐r;쀀𝔒rave耻Ò䃒ƀaei෮ෲ෶cr;䅌ga;䎩cron;䎟pf;쀀𝕆enCurlyĀDQฎบoubleQuote;怜uote;怘;橔Āclวฬr;쀀𝒪ash耻Ø䃘iŬื฼de耻Õ䃕es;樷ml耻Ö䃖erĀBP๋๠Āar๐๓r;怾acĀek๚๜;揞et;掴arenthesis;揜Ҁacfhilors๿ງຊຏຒດຝະ໼rtialD;戂y;䐟r;쀀𝔓i;䎦;䎠usMinus;䂱Āipຢອncareplanåڝf;愙Ȁ;eio຺ູ໠໤檻cedesȀ;EST່້໏໚扺qual;檯lantEqual;扼ilde;找me;怳Ādp໩໮uct;戏ortionĀ;aȥ໹l;戝Āci༁༆r;쀀𝒫;䎨ȀUfos༑༖༛༟OT耻"䀢r;쀀𝔔pf;愚cr;쀀𝒬؀BEacefhiorsu༾གྷཇའཱིྦྷྪྭ႖ႩႴႾarr;椐G耻®䂮ƀcnrཎནབute;䅔g;柫rĀ;tཛྷཝ憠l;椖ƀaeyཧཬཱron;䅘dil;䅖;䐠Ā;vླྀཹ愜erseĀEUྂྙĀlq྇ྎement;戋uilibrium;懋pEquilibrium;楯r»ཹo;䎡ghtЀACDFTUVa࿁࿫࿳ဢဨၛႇϘĀnr࿆࿒gleBracket;柩rowƀ;BL࿜࿝࿡憒ar;懥eftArrow;懄eiling;按oǵ࿹\0စbleBracket;柧nǔည\0နeeVector;楝ectorĀ;Bဝသ懂ar;楕loor;挋Āerိ၃eƀ;AVဵံြ抢rrow;憦ector;楛iangleƀ;BEၐၑၕ抳ar;槐qual;抵pƀDTVၣၮၸownVector;楏eeVector;楜ectorĀ;Bႂႃ憾ar;楔ectorĀ;B႑႒懀ar;楓Āpuႛ႞f;愝ndImplies;楰ightarrow;懛ĀchႹႼr;愛;憱leDelayed;槴ڀHOacfhimoqstuფჱჷჽᄙᄞᅑᅖᅡᅧᆵᆻᆿĀCcჩხHcy;䐩y;䐨FTcy;䐬cute;䅚ʀ;aeiyᄈᄉᄎᄓᄗ檼ron;䅠dil;䅞rc;䅜;䐡r;쀀𝔖ortȀDLRUᄪᄴᄾᅉownArrow»ОeftArrow»࢚ightArrow»࿝pArrow;憑gma;䎣allCircle;战pf;쀀𝕊ɲᅭ\0\0ᅰt;戚areȀ;ISUᅻᅼᆉᆯ斡ntersection;抓uĀbpᆏᆞsetĀ;Eᆗᆘ抏qual;抑ersetĀ;Eᆨᆩ抐qual;抒nion;抔cr;쀀𝒮ar;拆ȀbcmpᇈᇛሉላĀ;sᇍᇎ拐etĀ;Eᇍᇕqual;抆ĀchᇠህeedsȀ;ESTᇭᇮᇴᇿ扻qual;檰lantEqual;扽ilde;承Tháྌ;我ƀ;esሒሓሣ拑rsetĀ;Eሜም抃qual;抇et»ሓրHRSacfhiorsሾቄ቉ቕ቞ቱቶኟዂወዑORN耻Þ䃞ADE;愢ĀHc቎ቒcy;䐋y;䐦Ābuቚቜ;䀉;䎤ƀaeyብቪቯron;䅤dil;䅢;䐢r;쀀𝔗Āeiቻ኉Dzኀ\0ኇefore;戴a;䎘Ācn኎ኘkSpace;쀀  Space;怉ldeȀ;EFTካኬኲኼ戼qual;扃ullEqual;扅ilde;扈pf;쀀𝕋ipleDot;惛Āctዖዛr;쀀𝒯rok;䅦ૡዷጎጚጦ\0ጬጱ\0\0\0\0\0ጸጽ፷ᎅ\0᏿ᐄᐊᐐĀcrዻጁute耻Ú䃚rĀ;oጇገ憟cir;楉rǣጓ\0጖y;䐎ve;䅬Āiyጞጣrc耻Û䃛;䐣blac;䅰r;쀀𝔘rave耻Ù䃙acr;䅪Ādiፁ፩erĀBPፈ፝Āarፍፐr;䁟acĀekፗፙ;揟et;掵arenthesis;揝onĀ;P፰፱拃lus;抎Āgp፻፿on;䅲f;쀀𝕌ЀADETadps᎕ᎮᎸᏄϨᏒᏗᏳrrowƀ;BDᅐᎠᎤar;椒ownArrow;懅ownArrow;憕quilibrium;楮eeĀ;AᏋᏌ报rrow;憥ownáϳerĀLRᏞᏨeftArrow;憖ightArrow;憗iĀ;lᏹᏺ䏒on;䎥ing;䅮cr;쀀𝒰ilde;䅨ml耻Ü䃜ҀDbcdefosvᐧᐬᐰᐳᐾᒅᒊᒐᒖash;披ar;櫫y;䐒ashĀ;lᐻᐼ抩;櫦Āerᑃᑅ;拁ƀbtyᑌᑐᑺar;怖Ā;iᑏᑕcalȀBLSTᑡᑥᑪᑴar;戣ine;䁼eparator;杘ilde;所ThinSpace;怊r;쀀𝔙pf;쀀𝕍cr;쀀𝒱dash;抪ʀcefosᒧᒬᒱᒶᒼirc;䅴dge;拀r;쀀𝔚pf;쀀𝕎cr;쀀𝒲Ȁfiosᓋᓐᓒᓘr;쀀𝔛;䎞pf;쀀𝕏cr;쀀𝒳ҀAIUacfosuᓱᓵᓹᓽᔄᔏᔔᔚᔠcy;䐯cy;䐇cy;䐮cute耻Ý䃝Āiyᔉᔍrc;䅶;䐫r;쀀𝔜pf;쀀𝕐cr;쀀𝒴ml;䅸ЀHacdefosᔵᔹᔿᕋᕏᕝᕠᕤcy;䐖cute;䅹Āayᕄᕉron;䅽;䐗ot;䅻Dzᕔ\0ᕛoWidtè૙a;䎖r;愨pf;愤cr;쀀𝒵௡ᖃᖊᖐ\0ᖰᖶᖿ\0\0\0\0ᗆᗛᗫᙟ᙭\0ᚕ᚛ᚲᚹ\0ᚾcute耻á䃡reve;䄃̀;Ediuyᖜᖝᖡᖣᖨᖭ戾;쀀∾̳;房rc耻â䃢te肻´̆;䐰lig耻æ䃦Ā;r²ᖺ;쀀𝔞rave耻à䃠ĀepᗊᗖĀfpᗏᗔsym;愵èᗓha;䎱ĀapᗟcĀclᗤᗧr;䄁g;樿ɤᗰ\0\0ᘊʀ;adsvᗺᗻᗿᘁᘇ戧nd;橕;橜lope;橘;橚΀;elmrszᘘᘙᘛᘞᘿᙏᙙ戠;榤e»ᘙsdĀ;aᘥᘦ戡ѡᘰᘲᘴᘶᘸᘺᘼᘾ;榨;榩;榪;榫;榬;榭;榮;榯tĀ;vᙅᙆ戟bĀ;dᙌᙍ抾;榝Āptᙔᙗh;戢»¹arr;捼Āgpᙣᙧon;䄅f;쀀𝕒΀;Eaeiop዁ᙻᙽᚂᚄᚇᚊ;橰cir;橯;扊d;手s;䀧roxĀ;e዁ᚒñᚃing耻å䃥ƀctyᚡᚦᚨr;쀀𝒶;䀪mpĀ;e዁ᚯñʈilde耻ã䃣ml耻ä䃤Āciᛂᛈoninôɲnt;樑ࠀNabcdefiklnoprsu᛭ᛱᜰ᜼ᝃᝈ᝸᝽០៦ᠹᡐᜍ᤽᥈ᥰot;櫭Ācrᛶ᜞kȀcepsᜀᜅᜍᜓong;扌psilon;䏶rime;怵imĀ;e᜚᜛戽q;拍Ŷᜢᜦee;抽edĀ;gᜬᜭ挅e»ᜭrkĀ;t፜᜷brk;掶Āoyᜁᝁ;䐱quo;怞ʀcmprtᝓ᝛ᝡᝤᝨausĀ;eĊĉptyv;榰séᜌnoõēƀahwᝯ᝱ᝳ;䎲;愶een;扬r;쀀𝔟g΀costuvwឍឝឳេ៕៛៞ƀaiuបពរðݠrc;旯p»፱ƀdptឤឨឭot;樀lus;樁imes;樂ɱឹ\0\0ើcup;樆ar;昅riangleĀdu៍្own;施p;斳plus;樄eåᑄåᒭarow;植ƀako៭ᠦᠵĀcn៲ᠣkƀlst៺֫᠂ozenge;槫riangleȀ;dlr᠒᠓᠘᠝斴own;斾eft;旂ight;斸k;搣Ʊᠫ\0ᠳƲᠯ\0ᠱ;斒;斑4;斓ck;斈ĀeoᠾᡍĀ;qᡃᡆ쀀=⃥uiv;쀀≡⃥t;挐Ȁptwxᡙᡞᡧᡬf;쀀𝕓Ā;tᏋᡣom»Ꮜtie;拈؀DHUVbdhmptuvᢅᢖᢪᢻᣗᣛᣬ᣿ᤅᤊᤐᤡȀLRlrᢎᢐᢒᢔ;敗;敔;敖;敓ʀ;DUduᢡᢢᢤᢦᢨ敐;敦;敩;敤;敧ȀLRlrᢳᢵᢷᢹ;敝;敚;敜;教΀;HLRhlrᣊᣋᣍᣏᣑᣓᣕ救;敬;散;敠;敫;敢;敟ox;槉ȀLRlrᣤᣦᣨᣪ;敕;敒;攐;攌ʀ;DUduڽ᣷᣹᣻᣽;敥;敨;攬;攴inus;抟lus;択imes;抠ȀLRlrᤙᤛᤝ᤟;敛;敘;攘;攔΀;HLRhlrᤰᤱᤳᤵᤷ᤻᤹攂;敪;敡;敞;攼;攤;攜Āevģ᥂bar耻¦䂦Ȁceioᥑᥖᥚᥠr;쀀𝒷mi;恏mĀ;e᜚᜜lƀ;bhᥨᥩᥫ䁜;槅sub;柈Ŭᥴ᥾lĀ;e᥹᥺怢t»᥺pƀ;Eeįᦅᦇ;檮Ā;qۜۛೡᦧ\0᧨ᨑᨕᨲ\0ᨷᩐ\0\0᪴\0\0᫁\0\0ᬡᬮ᭍᭒\0᯽\0ᰌƀcpr᦭ᦲ᧝ute;䄇̀;abcdsᦿᧀᧄ᧊᧕᧙戩nd;橄rcup;橉Āau᧏᧒p;橋p;橇ot;橀;쀀∩︀Āeo᧢᧥t;恁îړȀaeiu᧰᧻ᨁᨅǰ᧵\0᧸s;橍on;䄍dil耻ç䃧rc;䄉psĀ;sᨌᨍ橌m;橐ot;䄋ƀdmnᨛᨠᨦil肻¸ƭptyv;榲t脀¢;eᨭᨮ䂢räƲr;쀀𝔠ƀceiᨽᩀᩍy;䑇ckĀ;mᩇᩈ朓ark»ᩈ;䏇r΀;Ecefms᩟᩠ᩢᩫ᪤᪪᪮旋;槃ƀ;elᩩᩪᩭ䋆q;扗eɡᩴ\0\0᪈rrowĀlr᩼᪁eft;憺ight;憻ʀRSacd᪒᪔᪖᪚᪟»ཇ;擈st;抛irc;抚ash;抝nint;樐id;櫯cir;槂ubsĀ;u᪻᪼晣it»᪼ˬ᫇᫔᫺\0ᬊonĀ;eᫍᫎ䀺Ā;qÇÆɭ᫙\0\0᫢aĀ;t᫞᫟䀬;䁀ƀ;fl᫨᫩᫫戁îᅠeĀmx᫱᫶ent»᫩eóɍǧ᫾\0ᬇĀ;dኻᬂot;橭nôɆƀfryᬐᬔᬗ;쀀𝕔oäɔ脀©;sŕᬝr;愗Āaoᬥᬩrr;憵ss;朗Ācuᬲᬷr;쀀𝒸Ābpᬼ᭄Ā;eᭁᭂ櫏;櫑Ā;eᭉᭊ櫐;櫒dot;拯΀delprvw᭠᭬᭷ᮂᮬᯔ᯹arrĀlr᭨᭪;椸;椵ɰ᭲\0\0᭵r;拞c;拟arrĀ;p᭿ᮀ憶;椽̀;bcdosᮏᮐᮖᮡᮥᮨ截rcap;橈Āauᮛᮞp;橆p;橊ot;抍r;橅;쀀∪︀Ȁalrv᮵ᮿᯞᯣrrĀ;mᮼᮽ憷;椼yƀevwᯇᯔᯘqɰᯎ\0\0ᯒreã᭳uã᭵ee;拎edge;拏en耻¤䂤earrowĀlrᯮ᯳eft»ᮀight»ᮽeäᯝĀciᰁᰇoninôǷnt;戱lcty;挭ঀAHabcdefhijlorstuwz᰸᰻᰿ᱝᱩᱵᲊᲞᲬᲷ᳻᳿ᴍᵻᶑᶫᶻ᷆᷍rò΁ar;楥Ȁglrs᱈ᱍ᱒᱔ger;怠eth;愸òᄳhĀ;vᱚᱛ怐»ऊūᱡᱧarow;椏aã̕Āayᱮᱳron;䄏;䐴ƀ;ao̲ᱼᲄĀgrʿᲁr;懊tseq;橷ƀglmᲑᲔᲘ耻°䂰ta;䎴ptyv;榱ĀirᲣᲨsht;楿;쀀𝔡arĀlrᲳᲵ»ࣜ»သʀaegsv᳂͸᳖᳜᳠mƀ;oș᳊᳔ndĀ;ș᳑uit;晦amma;䏝in;拲ƀ;io᳧᳨᳸䃷de脀÷;o᳧ᳰntimes;拇nø᳷cy;䑒cɯᴆ\0\0ᴊrn;挞op;挍ʀlptuwᴘᴝᴢᵉᵕlar;䀤f;쀀𝕕ʀ;emps̋ᴭᴷᴽᵂqĀ;d͒ᴳot;扑inus;戸lus;戔quare;抡blebarwedgåúnƀadhᄮᵝᵧownarrowóᲃarpoonĀlrᵲᵶefôᲴighôᲶŢᵿᶅkaro÷གɯᶊ\0\0ᶎrn;挟op;挌ƀcotᶘᶣᶦĀryᶝᶡ;쀀𝒹;䑕l;槶rok;䄑Ādrᶰᶴot;拱iĀ;fᶺ᠖斿Āah᷀᷃ròЩaòྦangle;榦Āci᷒ᷕy;䑟grarr;柿ऀDacdefglmnopqrstuxḁḉḙḸոḼṉṡṾấắẽỡἪἷὄ὎὚ĀDoḆᴴoôᲉĀcsḎḔute耻é䃩ter;橮ȀaioyḢḧḱḶron;䄛rĀ;cḭḮ扖耻ê䃪lon;払;䑍ot;䄗ĀDrṁṅot;扒;쀀𝔢ƀ;rsṐṑṗ檚ave耻è䃨Ā;dṜṝ檖ot;檘Ȁ;ilsṪṫṲṴ檙nters;揧;愓Ā;dṹṺ檕ot;檗ƀapsẅẉẗcr;䄓tyƀ;svẒẓẕ戅et»ẓpĀ1;ẝẤijạả;怄;怅怃ĀgsẪẬ;䅋p;怂ĀgpẴẸon;䄙f;쀀𝕖ƀalsỄỎỒrĀ;sỊị拕l;槣us;橱iƀ;lvỚớở䎵on»ớ;䏵ȀcsuvỪỳἋἣĀioữḱrc»Ḯɩỹ\0\0ỻíՈantĀglἂἆtr»ṝess»Ṻƀaeiἒ἖Ἒls;䀽st;扟vĀ;DȵἠD;橸parsl;槥ĀDaἯἳot;打rr;楱ƀcdiἾὁỸr;愯oô͒ĀahὉὋ;䎷耻ð䃰Āmrὓὗl耻ë䃫o;悬ƀcipὡὤὧl;䀡sôծĀeoὬὴctatioîՙnentialåչৡᾒ\0ᾞ\0ᾡᾧ\0\0ῆῌ\0ΐ\0ῦῪ \0 ⁚llingdotseñṄy;䑄male;晀ƀilrᾭᾳ῁lig;耀ffiɩᾹ\0\0᾽g;耀ffig;耀ffl;쀀𝔣lig;耀filig;쀀fjƀaltῙ῜ῡt;晭ig;耀flns;斱of;䆒ǰ΅\0ῳf;쀀𝕗ĀakֿῷĀ;vῼ´拔;櫙artint;樍Āao‌⁕Ācs‑⁒ႉ‸⁅⁈\0⁐β•‥‧‪‬\0‮耻½䂽;慓耻¼䂼;慕;慙;慛Ƴ‴\0‶;慔;慖ʴ‾⁁\0\0⁃耻¾䂾;慗;慜5;慘ƶ⁌\0⁎;慚;慝8;慞l;恄wn;挢cr;쀀𝒻ࢀEabcdefgijlnorstv₂₉₟₥₰₴⃰⃵⃺⃿℃ℒℸ̗ℾ⅒↞Ā;lٍ₇;檌ƀcmpₐₕ₝ute;䇵maĀ;dₜ᳚䎳;檆reve;䄟Āiy₪₮rc;䄝;䐳ot;䄡Ȁ;lqsؾق₽⃉ƀ;qsؾٌ⃄lanô٥Ȁ;cdl٥⃒⃥⃕c;檩otĀ;o⃜⃝檀Ā;l⃢⃣檂;檄Ā;e⃪⃭쀀⋛︀s;檔r;쀀𝔤Ā;gٳ؛mel;愷cy;䑓Ȁ;Eajٚℌℎℐ;檒;檥;檤ȀEaesℛℝ℩ℴ;扩pĀ;p℣ℤ檊rox»ℤĀ;q℮ℯ檈Ā;q℮ℛim;拧pf;쀀𝕘Āci⅃ⅆr;愊mƀ;el٫ⅎ⅐;檎;檐茀>;cdlqr׮ⅠⅪⅮⅳⅹĀciⅥⅧ;檧r;橺ot;拗Par;榕uest;橼ʀadelsↄⅪ←ٖ↛ǰ↉\0↎proø₞r;楸qĀlqؿ↖lesó₈ií٫Āen↣↭rtneqq;쀀≩︀Å↪ԀAabcefkosy⇄⇇⇱⇵⇺∘∝∯≨≽ròΠȀilmr⇐⇔⇗⇛rsðᒄf»․ilôکĀdr⇠⇤cy;䑊ƀ;cwࣴ⇫⇯ir;楈;憭ar;意irc;䄥ƀalr∁∎∓rtsĀ;u∉∊晥it»∊lip;怦con;抹r;쀀𝔥sĀew∣∩arow;椥arow;椦ʀamopr∺∾≃≞≣rr;懿tht;戻kĀlr≉≓eftarrow;憩ightarrow;憪f;쀀𝕙bar;怕ƀclt≯≴≸r;쀀𝒽asè⇴rok;䄧Ābp⊂⊇ull;恃hen»ᱛૡ⊣\0⊪\0⊸⋅⋎\0⋕⋳\0\0⋸⌢⍧⍢⍿\0⎆⎪⎴cute耻í䃭ƀ;iyݱ⊰⊵rc耻î䃮;䐸Ācx⊼⊿y;䐵cl耻¡䂡ĀfrΟ⋉;쀀𝔦rave耻ì䃬Ȁ;inoܾ⋝⋩⋮Āin⋢⋦nt;樌t;戭fin;槜ta;愩lig;䄳ƀaop⋾⌚⌝ƀcgt⌅⌈⌗r;䄫ƀelpܟ⌏⌓inåގarôܠh;䄱f;抷ed;䆵ʀ;cfotӴ⌬⌱⌽⍁are;愅inĀ;t⌸⌹戞ie;槝doô⌙ʀ;celpݗ⍌⍐⍛⍡al;抺Āgr⍕⍙eróᕣã⍍arhk;樗rod;樼Ȁcgpt⍯⍲⍶⍻y;䑑on;䄯f;쀀𝕚a;䎹uest耻¿䂿Āci⎊⎏r;쀀𝒾nʀ;EdsvӴ⎛⎝⎡ӳ;拹ot;拵Ā;v⎦⎧拴;拳Ā;iݷ⎮lde;䄩ǫ⎸\0⎼cy;䑖l耻ï䃯̀cfmosu⏌⏗⏜⏡⏧⏵Āiy⏑⏕rc;䄵;䐹r;쀀𝔧ath;䈷pf;쀀𝕛ǣ⏬\0⏱r;쀀𝒿rcy;䑘kcy;䑔Ѐacfghjos␋␖␢␧␭␱␵␻ppaĀ;v␓␔䎺;䏰Āey␛␠dil;䄷;䐺r;쀀𝔨reen;䄸cy;䑅cy;䑜pf;쀀𝕜cr;쀀𝓀஀ABEHabcdefghjlmnoprstuv⑰⒁⒆⒍⒑┎┽╚▀♎♞♥♹♽⚚⚲⛘❝❨➋⟀⠁⠒ƀart⑷⑺⑼rò৆òΕail;椛arr;椎Ā;gঔ⒋;檋ar;楢ॣ⒥\0⒪\0⒱\0\0\0\0\0⒵Ⓔ\0ⓆⓈⓍ\0⓹ute;䄺mptyv;榴raîࡌbda;䎻gƀ;dlࢎⓁⓃ;榑åࢎ;檅uo耻«䂫rЀ;bfhlpst࢙ⓞⓦⓩ⓫⓮⓱⓵Ā;f࢝ⓣs;椟s;椝ë≒p;憫l;椹im;楳l;憢ƀ;ae⓿─┄檫il;椙Ā;s┉┊檭;쀀⪭︀ƀabr┕┙┝rr;椌rk;杲Āak┢┬cĀek┨┪;䁻;䁛Āes┱┳;榋lĀdu┹┻;榏;榍Ȁaeuy╆╋╖╘ron;䄾Ādi═╔il;䄼ìࢰâ┩;䐻Ȁcqrs╣╦╭╽a;椶uoĀ;rนᝆĀdu╲╷har;楧shar;楋h;憲ʀ;fgqs▋▌উ◳◿扤tʀahlrt▘▤▷◂◨rrowĀ;t࢙□aé⓶arpoonĀdu▯▴own»њp»०eftarrows;懇ightƀahs◍◖◞rrowĀ;sࣴࢧarpoonó྘quigarro÷⇰hreetimes;拋ƀ;qs▋ও◺lanôবʀ;cdgsব☊☍☝☨c;檨otĀ;o☔☕橿Ā;r☚☛檁;檃Ā;e☢☥쀀⋚︀s;檓ʀadegs☳☹☽♉♋pproøⓆot;拖qĀgq♃♅ôউgtò⒌ôছiíলƀilr♕࣡♚sht;楼;쀀𝔩Ā;Eজ♣;檑š♩♶rĀdu▲♮Ā;l॥♳;楪lk;斄cy;䑙ʀ;achtੈ⚈⚋⚑⚖rò◁orneòᴈard;楫ri;旺Āio⚟⚤dot;䅀ustĀ;a⚬⚭掰che»⚭ȀEaes⚻⚽⛉⛔;扨pĀ;p⛃⛄檉rox»⛄Ā;q⛎⛏檇Ā;q⛎⚻im;拦Ѐabnoptwz⛩⛴⛷✚✯❁❇❐Ānr⛮⛱g;柬r;懽rëࣁgƀlmr⛿✍✔eftĀar০✇ightá৲apsto;柼ightá৽parrowĀlr✥✩efô⓭ight;憬ƀafl✶✹✽r;榅;쀀𝕝us;樭imes;樴š❋❏st;戗áፎƀ;ef❗❘᠀旊nge»❘arĀ;l❤❥䀨t;榓ʀachmt❳❶❼➅➇ròࢨorneòᶌarĀ;d྘➃;業;怎ri;抿̀achiqt➘➝ੀ➢➮➻quo;怹r;쀀𝓁mƀ;egল➪➬;檍;檏Ābu┪➳oĀ;rฟ➹;怚rok;䅂萀<;cdhilqrࠫ⟒☹⟜⟠⟥⟪⟰Āci⟗⟙;檦r;橹reå◲mes;拉arr;楶uest;橻ĀPi⟵⟹ar;榖ƀ;ef⠀भ᠛旃rĀdu⠇⠍shar;楊har;楦Āen⠗⠡rtneqq;쀀≨︀Å⠞܀Dacdefhilnopsu⡀⡅⢂⢎⢓⢠⢥⢨⣚⣢⣤ઃ⣳⤂Dot;戺Ȁclpr⡎⡒⡣⡽r耻¯䂯Āet⡗⡙;時Ā;e⡞⡟朠se»⡟Ā;sျ⡨toȀ;dluျ⡳⡷⡻owîҌefôएðᏑker;斮Āoy⢇⢌mma;権;䐼ash;怔asuredangle»ᘦr;쀀𝔪o;愧ƀcdn⢯⢴⣉ro耻µ䂵Ȁ;acdᑤ⢽⣀⣄sôᚧir;櫰ot肻·Ƶusƀ;bd⣒ᤃ⣓戒Ā;uᴼ⣘;横ţ⣞⣡p;櫛ò−ðઁĀdp⣩⣮els;抧f;쀀𝕞Āct⣸⣽r;쀀𝓂pos»ᖝƀ;lm⤉⤊⤍䎼timap;抸ఀGLRVabcdefghijlmoprstuvw⥂⥓⥾⦉⦘⧚⧩⨕⨚⩘⩝⪃⪕⪤⪨⬄⬇⭄⭿⮮ⰴⱧⱼ⳩Āgt⥇⥋;쀀⋙̸Ā;v⥐௏쀀≫⃒ƀelt⥚⥲⥶ftĀar⥡⥧rrow;懍ightarrow;懎;쀀⋘̸Ā;v⥻ే쀀≪⃒ightarrow;懏ĀDd⦎⦓ash;抯ash;抮ʀbcnpt⦣⦧⦬⦱⧌la»˞ute;䅄g;쀀∠⃒ʀ;Eiop඄⦼⧀⧅⧈;쀀⩰̸d;쀀≋̸s;䅉roø඄urĀ;a⧓⧔普lĀ;s⧓ସdz⧟\0⧣p肻 ଷmpĀ;e௹ఀʀaeouy⧴⧾⨃⨐⨓ǰ⧹\0⧻;橃on;䅈dil;䅆ngĀ;dൾ⨊ot;쀀⩭̸p;橂;䐽ash;怓΀;Aadqsxஒ⨩⨭⨻⩁⩅⩐rr;懗rĀhr⨳⨶k;椤Ā;oᏲᏰot;쀀≐̸uiöୣĀei⩊⩎ar;椨í஘istĀ;s஠டr;쀀𝔫ȀEest௅⩦⩹⩼ƀ;qs஼⩭௡ƀ;qs஼௅⩴lanô௢ií௪Ā;rஶ⪁»ஷƀAap⪊⪍⪑rò⥱rr;憮ar;櫲ƀ;svྍ⪜ྌĀ;d⪡⪢拼;拺cy;䑚΀AEadest⪷⪺⪾⫂⫅⫶⫹rò⥦;쀀≦̸rr;憚r;急Ȁ;fqs఻⫎⫣⫯tĀar⫔⫙rro÷⫁ightarro÷⪐ƀ;qs఻⪺⫪lanôౕĀ;sౕ⫴»శiíౝĀ;rవ⫾iĀ;eచథiäඐĀpt⬌⬑f;쀀𝕟膀¬;in⬙⬚⬶䂬nȀ;Edvஉ⬤⬨⬮;쀀⋹̸ot;쀀⋵̸ǡஉ⬳⬵;拷;拶iĀ;vಸ⬼ǡಸ⭁⭃;拾;拽ƀaor⭋⭣⭩rȀ;ast୻⭕⭚⭟lleì୻l;쀀⫽⃥;쀀∂̸lint;樔ƀ;ceಒ⭰⭳uåಥĀ;cಘ⭸Ā;eಒ⭽ñಘȀAait⮈⮋⮝⮧rò⦈rrƀ;cw⮔⮕⮙憛;쀀⤳̸;쀀↝̸ghtarrow»⮕riĀ;eೋೖ΀chimpqu⮽⯍⯙⬄୸⯤⯯Ȁ;cerല⯆ഷ⯉uå൅;쀀𝓃ortɭ⬅\0\0⯖ará⭖mĀ;e൮⯟Ā;q൴൳suĀbp⯫⯭å೸åഋƀbcp⯶ⰑⰙȀ;Ees⯿ⰀഢⰄ抄;쀀⫅̸etĀ;eഛⰋqĀ;qണⰀcĀ;eലⰗñസȀ;EesⰢⰣൟⰧ抅;쀀⫆̸etĀ;e൘ⰮqĀ;qൠⰣȀgilrⰽⰿⱅⱇìௗlde耻ñ䃱çృiangleĀlrⱒⱜeftĀ;eచⱚñదightĀ;eೋⱥñ೗Ā;mⱬⱭ䎽ƀ;esⱴⱵⱹ䀣ro;愖p;怇ҀDHadgilrsⲏⲔⲙⲞⲣⲰⲶⳓⳣash;抭arr;椄p;쀀≍⃒ash;抬ĀetⲨⲬ;쀀≥⃒;쀀>⃒nfin;槞ƀAetⲽⳁⳅrr;椂;쀀≤⃒Ā;rⳊⳍ쀀<⃒ie;쀀⊴⃒ĀAtⳘⳜrr;椃rie;쀀⊵⃒im;쀀∼⃒ƀAan⳰⳴ⴂrr;懖rĀhr⳺⳽k;椣Ā;oᏧᏥear;椧ቓ᪕\0\0\0\0\0\0\0\0\0\0\0\0\0ⴭ\0ⴸⵈⵠⵥ⵲ⶄᬇ\0\0ⶍⶫ\0ⷈⷎ\0ⷜ⸙⸫⸾⹃Ācsⴱ᪗ute耻ó䃳ĀiyⴼⵅrĀ;c᪞ⵂ耻ô䃴;䐾ʀabios᪠ⵒⵗLjⵚlac;䅑v;樸old;榼lig;䅓Ācr⵩⵭ir;榿;쀀𝔬ͯ⵹\0\0⵼\0ⶂn;䋛ave耻ò䃲;槁Ābmⶈ෴ar;榵Ȁacitⶕ⶘ⶥⶨrò᪀Āir⶝ⶠr;榾oss;榻nå๒;槀ƀaeiⶱⶵⶹcr;䅍ga;䏉ƀcdnⷀⷅǍron;䎿;榶pf;쀀𝕠ƀaelⷔ⷗ǒr;榷rp;榹΀;adiosvⷪⷫⷮ⸈⸍⸐⸖戨rò᪆Ȁ;efmⷷⷸ⸂⸅橝rĀ;oⷾⷿ愴f»ⷿ耻ª䂪耻º䂺gof;抶r;橖lope;橗;橛ƀclo⸟⸡⸧ò⸁ash耻ø䃸l;折iŬⸯ⸴de耻õ䃵esĀ;aǛ⸺s;樶ml耻ö䃶bar;挽ૡ⹞\0⹽\0⺀⺝\0⺢⺹\0\0⻋ຜ\0⼓\0\0⼫⾼\0⿈rȀ;astЃ⹧⹲຅脀¶;l⹭⹮䂶leìЃɩ⹸\0\0⹻m;櫳;櫽y;䐿rʀcimpt⺋⺏⺓ᡥ⺗nt;䀥od;䀮il;怰enk;怱r;쀀𝔭ƀimo⺨⺰⺴Ā;v⺭⺮䏆;䏕maô੶ne;明ƀ;tv⺿⻀⻈䏀chfork»´;䏖Āau⻏⻟nĀck⻕⻝kĀ;h⇴⻛;愎ö⇴sҀ;abcdemst⻳⻴ᤈ⻹⻽⼄⼆⼊⼎䀫cir;樣ir;樢Āouᵀ⼂;樥;橲n肻±ຝim;樦wo;樧ƀipu⼙⼠⼥ntint;樕f;쀀𝕡nd耻£䂣Ԁ;Eaceinosu່⼿⽁⽄⽇⾁⾉⾒⽾⾶;檳p;檷uå໙Ā;c໎⽌̀;acens່⽙⽟⽦⽨⽾pproø⽃urlyeñ໙ñ໎ƀaes⽯⽶⽺pprox;檹qq;檵im;拨iíໟmeĀ;s⾈ຮ怲ƀEas⽸⾐⽺ð⽵ƀdfp໬⾙⾯ƀals⾠⾥⾪lar;挮ine;挒urf;挓Ā;t໻⾴ï໻rel;抰Āci⿀⿅r;쀀𝓅;䏈ncsp;怈̀fiopsu⿚⋢⿟⿥⿫⿱r;쀀𝔮pf;쀀𝕢rime;恗cr;쀀𝓆ƀaeo⿸〉〓tĀei⿾々rnionóڰnt;樖stĀ;e【】䀿ñἙô༔઀ABHabcdefhilmnoprstux぀けさすムㄎㄫㅇㅢㅲㆎ㈆㈕㈤㈩㉘㉮㉲㊐㊰㊷ƀartぇおがròႳòϝail;検aròᱥar;楤΀cdenqrtとふへみわゔヌĀeuねぱ;쀀∽̱te;䅕iãᅮmptyv;榳gȀ;del࿑らるろ;榒;榥å࿑uo耻»䂻rր;abcfhlpstw࿜ガクシスゼゾダッデナp;極Ā;f࿠ゴs;椠;椳s;椞ë≝ð✮l;楅im;楴l;憣;憝Āaiパフil;椚oĀ;nホボ戶aló༞ƀabrョリヮrò៥rk;杳ĀakンヽcĀekヹ・;䁽;䁝Āes㄂㄄;榌lĀduㄊㄌ;榎;榐Ȁaeuyㄗㄜㄧㄩron;䅙Ādiㄡㄥil;䅗ì࿲âヺ;䑀Ȁclqsㄴㄷㄽㅄa;椷dhar;楩uoĀ;rȎȍh;憳ƀacgㅎㅟངlȀ;ipsླྀㅘㅛႜnåႻarôྩt;断ƀilrㅩဣㅮsht;楽;쀀𝔯ĀaoㅷㆆrĀduㅽㅿ»ѻĀ;l႑ㆄ;楬Ā;vㆋㆌ䏁;䏱ƀgns㆕ㇹㇼht̀ahlrstㆤㆰ㇂㇘㇤㇮rrowĀ;t࿜ㆭaéトarpoonĀduㆻㆿowîㅾp»႒eftĀah㇊㇐rrowó࿪arpoonóՑightarrows;應quigarro÷ニhreetimes;拌g;䋚ingdotseñἲƀahm㈍㈐㈓rò࿪aòՑ;怏oustĀ;a㈞㈟掱che»㈟mid;櫮Ȁabpt㈲㈽㉀㉒Ānr㈷㈺g;柭r;懾rëဃƀafl㉇㉊㉎r;榆;쀀𝕣us;樮imes;樵Āap㉝㉧rĀ;g㉣㉤䀩t;榔olint;樒arò㇣Ȁachq㉻㊀Ⴜ㊅quo;怺r;쀀𝓇Ābu・㊊oĀ;rȔȓƀhir㊗㊛㊠reåㇸmes;拊iȀ;efl㊪ၙᠡ㊫方tri;槎luhar;楨;愞ൡ㋕㋛㋟㌬㌸㍱\0㍺㎤\0\0㏬㏰\0㐨㑈㑚㒭㒱㓊㓱\0㘖\0\0㘳cute;䅛quï➺Ԁ;Eaceinpsyᇭ㋳㋵㋿㌂㌋㌏㌟㌦㌩;檴ǰ㋺\0㋼;檸on;䅡uåᇾĀ;dᇳ㌇il;䅟rc;䅝ƀEas㌖㌘㌛;檶p;檺im;择olint;樓iíሄ;䑁otƀ;be㌴ᵇ㌵担;橦΀Aacmstx㍆㍊㍗㍛㍞㍣㍭rr;懘rĀhr㍐㍒ë∨Ā;oਸ਼਴t耻§䂧i;䀻war;椩mĀin㍩ðnuóñt;朶rĀ;o㍶⁕쀀𝔰Ȁacoy㎂㎆㎑㎠rp;景Āhy㎋㎏cy;䑉;䑈rtɭ㎙\0\0㎜iäᑤaraì⹯耻­䂭Āgm㎨㎴maƀ;fv㎱㎲㎲䏃;䏂Ѐ;deglnprካ㏅㏉㏎㏖㏞㏡㏦ot;橪Ā;q኱ኰĀ;E㏓㏔檞;檠Ā;E㏛㏜檝;檟e;扆lus;樤arr;楲aròᄽȀaeit㏸㐈㐏㐗Āls㏽㐄lsetmé㍪hp;樳parsl;槤Ādlᑣ㐔e;挣Ā;e㐜㐝檪Ā;s㐢㐣檬;쀀⪬︀ƀflp㐮㐳㑂tcy;䑌Ā;b㐸㐹䀯Ā;a㐾㐿槄r;挿f;쀀𝕤aĀdr㑍ЂesĀ;u㑔㑕晠it»㑕ƀcsu㑠㑹㒟Āau㑥㑯pĀ;sᆈ㑫;쀀⊓︀pĀ;sᆴ㑵;쀀⊔︀uĀbp㑿㒏ƀ;esᆗᆜ㒆etĀ;eᆗ㒍ñᆝƀ;esᆨᆭ㒖etĀ;eᆨ㒝ñᆮƀ;afᅻ㒦ְrť㒫ֱ»ᅼaròᅈȀcemt㒹㒾㓂㓅r;쀀𝓈tmîñiì㐕aræᆾĀar㓎㓕rĀ;f㓔ឿ昆Āan㓚㓭ightĀep㓣㓪psiloîỠhé⺯s»⡒ʀbcmnp㓻㕞ሉ㖋㖎Ҁ;Edemnprs㔎㔏㔑㔕㔞㔣㔬㔱㔶抂;櫅ot;檽Ā;dᇚ㔚ot;櫃ult;櫁ĀEe㔨㔪;櫋;把lus;檿arr;楹ƀeiu㔽㕒㕕tƀ;en㔎㕅㕋qĀ;qᇚ㔏eqĀ;q㔫㔨m;櫇Ābp㕚㕜;櫕;櫓c̀;acensᇭ㕬㕲㕹㕻㌦pproø㋺urlyeñᇾñᇳƀaes㖂㖈㌛pproø㌚qñ㌗g;晪ڀ123;Edehlmnps㖩㖬㖯ሜ㖲㖴㗀㗉㗕㗚㗟㗨㗭耻¹䂹耻²䂲耻³䂳;櫆Āos㖹㖼t;檾ub;櫘Ā;dሢ㗅ot;櫄sĀou㗏㗒l;柉b;櫗arr;楻ult;櫂ĀEe㗤㗦;櫌;抋lus;櫀ƀeiu㗴㘉㘌tƀ;enሜ㗼㘂qĀ;qሢ㖲eqĀ;q㗧㗤m;櫈Ābp㘑㘓;櫔;櫖ƀAan㘜㘠㘭rr;懙rĀhr㘦㘨ë∮Ā;oਫ਩war;椪lig耻ß䃟௡㙑㙝㙠ዎ㙳㙹\0㙾㛂\0\0\0\0\0㛛㜃\0㜉㝬\0\0\0㞇ɲ㙖\0\0㙛get;挖;䏄rë๟ƀaey㙦㙫㙰ron;䅥dil;䅣;䑂lrec;挕r;쀀𝔱Ȁeiko㚆㚝㚵㚼Dz㚋\0㚑eĀ4fኄኁaƀ;sv㚘㚙㚛䎸ym;䏑Ācn㚢㚲kĀas㚨㚮pproø዁im»ኬsðኞĀas㚺㚮ð዁rn耻þ䃾Ǭ̟㛆⋧es膀×;bd㛏㛐㛘䃗Ā;aᤏ㛕r;樱;樰ƀeps㛡㛣㜀á⩍Ȁ;bcf҆㛬㛰㛴ot;挶ir;櫱Ā;o㛹㛼쀀𝕥rk;櫚á㍢rime;怴ƀaip㜏㜒㝤dåቈ΀adempst㜡㝍㝀㝑㝗㝜㝟ngleʀ;dlqr㜰㜱㜶㝀㝂斵own»ᶻeftĀ;e⠀㜾ñम;扜ightĀ;e㊪㝋ñၚot;旬inus;樺lus;樹b;槍ime;樻ezium;揢ƀcht㝲㝽㞁Āry㝷㝻;쀀𝓉;䑆cy;䑛rok;䅧Āio㞋㞎xô᝷headĀlr㞗㞠eftarro÷ࡏightarrow»ཝऀAHabcdfghlmoprstuw㟐㟓㟗㟤㟰㟼㠎㠜㠣㠴㡑㡝㡫㢩㣌㣒㣪㣶ròϭar;楣Ācr㟜㟢ute耻ú䃺òᅐrǣ㟪\0㟭y;䑞ve;䅭Āiy㟵㟺rc耻û䃻;䑃ƀabh㠃㠆㠋ròᎭlac;䅱aòᏃĀir㠓㠘sht;楾;쀀𝔲rave耻ù䃹š㠧㠱rĀlr㠬㠮»ॗ»ႃlk;斀Āct㠹㡍ɯ㠿\0\0㡊rnĀ;e㡅㡆挜r»㡆op;挏ri;旸Āal㡖㡚cr;䅫肻¨͉Āgp㡢㡦on;䅳f;쀀𝕦̀adhlsuᅋ㡸㡽፲㢑㢠ownáᎳarpoonĀlr㢈㢌efô㠭ighô㠯iƀ;hl㢙㢚㢜䏅»ᏺon»㢚parrows;懈ƀcit㢰㣄㣈ɯ㢶\0\0㣁rnĀ;e㢼㢽挝r»㢽op;挎ng;䅯ri;旹cr;쀀𝓊ƀdir㣙㣝㣢ot;拰lde;䅩iĀ;f㜰㣨»᠓Āam㣯㣲rò㢨l耻ü䃼angle;榧ހABDacdeflnoprsz㤜㤟㤩㤭㦵㦸㦽㧟㧤㧨㧳㧹㧽㨁㨠ròϷarĀ;v㤦㤧櫨;櫩asèϡĀnr㤲㤷grt;榜΀eknprst㓣㥆㥋㥒㥝㥤㦖appá␕othinçẖƀhir㓫⻈㥙opô⾵Ā;hᎷ㥢ïㆍĀiu㥩㥭gmá㎳Ābp㥲㦄setneqĀ;q㥽㦀쀀⊊︀;쀀⫋︀setneqĀ;q㦏㦒쀀⊋︀;쀀⫌︀Āhr㦛㦟etá㚜iangleĀlr㦪㦯eft»थight»ၑy;䐲ash»ံƀelr㧄㧒㧗ƀ;beⷪ㧋㧏ar;抻q;扚lip;拮Ābt㧜ᑨaòᑩr;쀀𝔳tré㦮suĀbp㧯㧱»ജ»൙pf;쀀𝕧roð໻tré㦴Ācu㨆㨋r;쀀𝓋Ābp㨐㨘nĀEe㦀㨖»㥾nĀEe㦒㨞»㦐igzag;榚΀cefoprs㨶㨻㩖㩛㩔㩡㩪irc;䅵Ādi㩀㩑Ābg㩅㩉ar;機eĀ;qᗺ㩏;扙erp;愘r;쀀𝔴pf;쀀𝕨Ā;eᑹ㩦atèᑹcr;쀀𝓌ૣណ㪇\0㪋\0㪐㪛\0\0㪝㪨㪫㪯\0\0㫃㫎\0㫘ៜ៟tré៑r;쀀𝔵ĀAa㪔㪗ròσrò৶;䎾ĀAa㪡㪤ròθrò৫að✓is;拻ƀdptឤ㪵㪾Āfl㪺ឩ;쀀𝕩imåឲĀAa㫇㫊ròώròਁĀcq㫒ីr;쀀𝓍Āpt៖㫜ré។Ѐacefiosu㫰㫽㬈㬌㬑㬕㬛㬡cĀuy㫶㫻te耻ý䃽;䑏Āiy㬂㬆rc;䅷;䑋n耻¥䂥r;쀀𝔶cy;䑗pf;쀀𝕪cr;쀀𝓎Ācm㬦㬩y;䑎l耻ÿ䃿Ԁacdefhiosw㭂㭈㭔㭘㭤㭩㭭㭴㭺㮀cute;䅺Āay㭍㭒ron;䅾;䐷ot;䅼Āet㭝㭡træᕟa;䎶r;쀀𝔷cy;䐶grarr;懝pf;쀀𝕫cr;쀀𝓏Ājn㮅㮇;怍j;怌'.split("").map((function(e){return e.charCodeAt(0)})))},67379:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=new Uint16Array("Ȁaglq\tɭ\0\0p;䀦os;䀧t;䀾t;䀼uot;䀢".split("").map((function(e){return e.charCodeAt(0)})))},78898:function(e,t){t.read=function(e,t,n,a,r){var i,o,d=8*r-a-1,s=(1<<d)-1,c=s>>1,u=-7,l=n?r-1:0,g=n?-1:1,h=e[t+l];for(l+=g,i=h&(1<<-u)-1,h>>=-u,u+=d;u>0;i=256*i+e[t+l],l+=g,u-=8);for(o=i&(1<<-u)-1,i>>=-u,u+=a;u>0;o=256*o+e[t+l],l+=g,u-=8);if(0===i)i=1-c;else{if(i===s)return o?NaN:1/0*(h?-1:1);o+=Math.pow(2,a),i-=c}return(h?-1:1)*o*Math.pow(2,i-a)},t.write=function(e,t,n,a,r,i){var o,d,s,c=8*i-r-1,u=(1<<c)-1,l=u>>1,g=23===r?Math.pow(2,-24)-Math.pow(2,-77):0,h=a?0:i-1,f=a?1:-1,p=t<0||0===t&&1/t<0?1:0;for(t=Math.abs(t),isNaN(t)||t===1/0?(d=isNaN(t)?1:0,o=u):(o=Math.floor(Math.log(t)/Math.LN2),t*(s=Math.pow(2,-o))<1&&(o--,s*=2),(t+=o+l>=1?g/s:g*Math.pow(2,1-l))*s>=2&&(o++,s/=2),o+l>=u?(d=0,o=u):o+l>=1?(d=(t*s-1)*Math.pow(2,r),o+=l):(d=t*Math.pow(2,l-1)*Math.pow(2,r),o=0));r>=8;e[n+h]=255&d,h+=f,d/=256,r-=8);for(o=o<<r|d,c+=r;c>0;e[n+h]=255&o,h+=f,o/=256,c-=8);e[n+h-f]|=128*p}},70087:function(e){"function"==typeof Object.create?e.exports=function(e,t){t&&(e.super_=t,e.prototype=Object.create(t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}))}:e.exports=function(e,t){if(t){e.super_=t;var n=function(){};n.prototype=t.prototype,e.prototype=new n,e.prototype.constructor=e}}},54518:function(e,t){"use strict";function n(e){return"[object Object]"===Object.prototype.toString.call(e)}Object.defineProperty(t,"__esModule",{value:!0}),t.isPlainObject=function(e){var t,a;return!1!==n(e)&&(void 0===(t=e.constructor)||!1!==n(a=t.prototype)&&!1!==a.hasOwnProperty("isPrototypeOf"))}},55182:function(e){var t={}.toString;e.exports=Array.isArray||function(e){return"[object Array]"==t.call(e)}},70572:function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=/((['"])(?:(?!\2|\\).|\\(?:\r\n|[\s\S]))*(\2)?|`(?:[^`\\$]|\\[\s\S]|\$(?!\{)|\$\{(?:[^{}]|\{[^}]*\}?)*\}?)*(`)?)|(\/\/.*)|(\/\*(?:[^*]|\*(?!\/))*(\*\/)?)|(\/(?!\*)(?:\[(?:(?![\]\\]).|\\.)*\]|(?![\/\]\\]).|\\.)+\/(?:(?!\s*(?:\b|[\u0080-\uFFFF$\\'"~({]|[+\-!](?!=)|\.?\d))|[gmiyus]{1,6}\b(?![\u0080-\uFFFF$\\]|\s*(?:[+\-*%&|^<>!=?({]|\/(?![\/*])))))|(0[xX][\da-fA-F]+|0[oO][0-7]+|0[bB][01]+|(?:\d*\.\d+|\d+\.?)(?:[eE][+-]?\d+)?)|((?!\d)(?:(?!\s)[$\w\u0080-\uFFFF]|\\u[\da-fA-F]{4}|\\u\{[\da-fA-F]+\})+)|(--|\+\+|&&|\|\||=>|\.{3}|(?:[+\-\/%&|^]|\*{1,2}|<{1,2}|>{1,3}|!=?|={1,2})=?|[?~.,:;[\](){}])|(\s+)|(^$|[\s\S])/g,t.matchToToken=function(e){var t={type:"invalid",value:e[0],closed:void 0};return e[1]?(t.type="string",t.closed=!(!e[3]&&!e[4])):e[5]?t.type="comment":e[6]?(t.type="comment",t.closed=!!e[7]):e[8]?t.type="regex":e[9]?t.type="number":e[10]?t.type="name":e[11]?t.type="punctuator":e[12]&&(t.type="whitespace"),t}},44012:function(e,t,n){var a=n(27061);let r,i,o,d,s=!0;void 0!==a&&(({FORCE_COLOR:r,NODE_DISABLE_COLORS:i,NO_COLOR:o,TERM:d}={}||{}),s=a.stdout&&a.stdout.isTTY);const c=t.$={enabled:!i&&null==o&&"dumb"!==d&&(null!=r&&"0"!==r||s)};function u(e,t){let n=new RegExp(`\\x1b\\[${t}m`,"g"),a=`[${e}m`,r=`[${t}m`;return function(e){return c.enabled&&null!=e?a+(~(""+e).indexOf(r)?e.replace(n,r+a):e)+r:e}}t.reset=u(0,0),t.bold=u(1,22),t.dim=u(2,22),t.italic=u(3,23),t.underline=u(4,24),t.inverse=u(7,27),t.hidden=u(8,28),t.strikethrough=u(9,29),t.black=u(30,39),t.red=u(31,39),t.green=u(32,39),t.yellow=u(33,39),t.blue=u(34,39),t.magenta=u(35,39),t.cyan=u(36,39),t.white=u(37,39),t.gray=u(90,39),t.grey=u(90,39),t.bgBlack=u(40,49),t.bgRed=u(41,49),t.bgGreen=u(42,49),t.bgYellow=u(43,49),t.bgBlue=u(44,49),t.bgMagenta=u(45,49),t.bgCyan=u(46,49),t.bgWhite=u(47,49)},66897:function(e,t,n){"use strict";var a=n(27061);let r,i,o,d,s=!0;void 0!==a&&(({FORCE_COLOR:r,NODE_DISABLE_COLORS:i,NO_COLOR:o,TERM:d}={}||{}),s=a.stdout&&a.stdout.isTTY);const c={enabled:!i&&null==o&&"dumb"!==d&&(null!=r&&"0"!==r||s),reset:l(0,0),bold:l(1,22),dim:l(2,22),italic:l(3,23),underline:l(4,24),inverse:l(7,27),hidden:l(8,28),strikethrough:l(9,29),black:l(30,39),red:l(31,39),green:l(32,39),yellow:l(33,39),blue:l(34,39),magenta:l(35,39),cyan:l(36,39),white:l(37,39),gray:l(90,39),grey:l(90,39),bgBlack:l(40,49),bgRed:l(41,49),bgGreen:l(42,49),bgYellow:l(43,49),bgBlue:l(44,49),bgMagenta:l(45,49),bgCyan:l(46,49),bgWhite:l(47,49)};function u(e,t){let n,a=0,r="",i="";for(;a<e.length;a++)n=e[a],r+=n.open,i+=n.close,~t.indexOf(n.close)&&(t=t.replace(n.rgx,n.close+n.open));return r+t+i}function l(e,t){let n={open:`[${e}m`,close:`[${t}m`,rgx:new RegExp(`\\x1b\\[${t}m`,"g")};return function(t){return void 0!==this&&void 0!==this.has?(~this.has.indexOf(e)||(this.has.push(e),this.keys.push(n)),void 0===t?this:c.enabled?u(this.keys,t+""):t+""):void 0===t?function(e,t){let n={has:e,keys:t};return n.reset=c.reset.bind(n),n.bold=c.bold.bind(n),n.dim=c.dim.bind(n),n.italic=c.italic.bind(n),n.underline=c.underline.bind(n),n.inverse=c.inverse.bind(n),n.hidden=c.hidden.bind(n),n.strikethrough=c.strikethrough.bind(n),n.black=c.black.bind(n),n.red=c.red.bind(n),n.green=c.green.bind(n),n.yellow=c.yellow.bind(n),n.blue=c.blue.bind(n),n.magenta=c.magenta.bind(n),n.cyan=c.cyan.bind(n),n.white=c.white.bind(n),n.gray=c.gray.bind(n),n.grey=c.grey.bind(n),n.bgBlack=c.bgBlack.bind(n),n.bgRed=c.bgRed.bind(n),n.bgGreen=c.bgGreen.bind(n),n.bgYellow=c.bgYellow.bind(n),n.bgBlue=c.bgBlue.bind(n),n.bgMagenta=c.bgMagenta.bind(n),n.bgCyan=c.bgCyan.bind(n),n.bgWhite=c.bgWhite.bind(n),n}([e],[n]):c.enabled?u([n],t+""):t+""}}e.exports=c},62004:function(e,t,n){e=n.nmd(e);var a="__lodash_hash_undefined__",r=1,i=2,o=9007199254740991,d="[object Arguments]",s="[object Array]",c="[object AsyncFunction]",u="[object Boolean]",l="[object Date]",g="[object Error]",h="[object Function]",f="[object GeneratorFunction]",p="[object Map]",m="[object Number]",R="[object Null]",b="[object Object]",y="[object Promise]",v="[object Proxy]",_="[object RegExp]",w="[object Set]",M="[object String]",x="[object Symbol]",E="[object Undefined]",S="[object WeakMap]",k="[object ArrayBuffer]",N="[object DataView]",D=/^\[object .+?Constructor\]$/,A=/^(?:0|[1-9]\d*)$/,j={};j["[object Float32Array]"]=j["[object Float64Array]"]=j["[object Int8Array]"]=j["[object Int16Array]"]=j["[object Int32Array]"]=j["[object Uint8Array]"]=j["[object Uint8ClampedArray]"]=j["[object Uint16Array]"]=j["[object Uint32Array]"]=!0,j[d]=j[s]=j[k]=j[u]=j[N]=j[l]=j[g]=j[h]=j[p]=j[m]=j[b]=j[_]=j[w]=j[M]=j[S]=!1;var T="object"==typeof n.g&&n.g&&n.g.Object===Object&&n.g,L="object"==typeof self&&self&&self.Object===Object&&self,I=T||L||Function("return this")(),C=t&&!t.nodeType&&t,O=C&&e&&!e.nodeType&&e,P=O&&O.exports===C,z=P&&T.process,B=function(){try{return z&&z.binding&&z.binding("util")}catch(e){}}(),F=B&&B.isTypedArray;function U(e,t){for(var n=-1,a=null==e?0:e.length;++n<a;)if(t(e[n],n,e))return!0;return!1}function $(e){var t=-1,n=Array(e.size);return e.forEach((function(e,a){n[++t]=[a,e]})),n}function H(e){var t=-1,n=Array(e.size);return e.forEach((function(e){n[++t]=e})),n}var q,Y,G,V=Array.prototype,Q=Function.prototype,W=Object.prototype,K=I["__core-js_shared__"],Z=Q.toString,X=W.hasOwnProperty,J=(q=/[^.]+$/.exec(K&&K.keys&&K.keys.IE_PROTO||""))?"Symbol(src)_1."+q:"",ee=W.toString,te=RegExp("^"+Z.call(X).replace(/[\\^$.*+?()[\]{}|]/g,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$"),ne=P?I.Buffer:void 0,ae=I.Symbol,re=I.Uint8Array,ie=W.propertyIsEnumerable,oe=V.splice,de=ae?ae.toStringTag:void 0,se=Object.getOwnPropertySymbols,ce=ne?ne.isBuffer:void 0,ue=(Y=Object.keys,G=Object,function(e){return Y(G(e))}),le=Be(I,"DataView"),ge=Be(I,"Map"),he=Be(I,"Promise"),fe=Be(I,"Set"),pe=Be(I,"WeakMap"),me=Be(Object,"create"),Re=He(le),be=He(ge),ye=He(he),ve=He(fe),_e=He(pe),we=ae?ae.prototype:void 0,Me=we?we.valueOf:void 0;function xe(e){var t=-1,n=null==e?0:e.length;for(this.clear();++t<n;){var a=e[t];this.set(a[0],a[1])}}function Ee(e){var t=-1,n=null==e?0:e.length;for(this.clear();++t<n;){var a=e[t];this.set(a[0],a[1])}}function Se(e){var t=-1,n=null==e?0:e.length;for(this.clear();++t<n;){var a=e[t];this.set(a[0],a[1])}}function ke(e){var t=-1,n=null==e?0:e.length;for(this.__data__=new Se;++t<n;)this.add(e[t])}function Ne(e){var t=this.__data__=new Ee(e);this.size=t.size}function De(e,t){var n=Ge(e),a=!n&&Ye(e),r=!n&&!a&&Ve(e),i=!n&&!a&&!r&&Xe(e),o=n||a||r||i,d=o?function(e,t){for(var n=-1,a=Array(e);++n<e;)a[n]=t(n);return a}(e.length,String):[],s=d.length;for(var c in e)!t&&!X.call(e,c)||o&&("length"==c||r&&("offset"==c||"parent"==c)||i&&("buffer"==c||"byteLength"==c||"byteOffset"==c)||$e(c,s))||d.push(c);return d}function Ae(e,t){for(var n=e.length;n--;)if(qe(e[n][0],t))return n;return-1}function je(e){return null==e?void 0===e?E:R:de&&de in Object(e)?function(e){var t=X.call(e,de),n=e[de];try{e[de]=void 0;var a=!0}catch(i){}var r=ee.call(e);a&&(t?e[de]=n:delete e[de]);return r}(e):function(e){return ee.call(e)}(e)}function Te(e){return Ze(e)&&je(e)==d}function Le(e,t,n,a,o){return e===t||(null==e||null==t||!Ze(e)&&!Ze(t)?e!=e&&t!=t:function(e,t,n,a,o,c){var h=Ge(e),f=Ge(t),R=h?s:Ue(e),y=f?s:Ue(t),v=(R=R==d?b:R)==b,E=(y=y==d?b:y)==b,S=R==y;if(S&&Ve(e)){if(!Ve(t))return!1;h=!0,v=!1}if(S&&!v)return c||(c=new Ne),h||Xe(e)?Oe(e,t,n,a,o,c):function(e,t,n,a,o,d,s){switch(n){case N:if(e.byteLength!=t.byteLength||e.byteOffset!=t.byteOffset)return!1;e=e.buffer,t=t.buffer;case k:return!(e.byteLength!=t.byteLength||!d(new re(e),new re(t)));case u:case l:case m:return qe(+e,+t);case g:return e.name==t.name&&e.message==t.message;case _:case M:return e==t+"";case p:var c=$;case w:var h=a&r;if(c||(c=H),e.size!=t.size&&!h)return!1;var f=s.get(e);if(f)return f==t;a|=i,s.set(e,t);var R=Oe(c(e),c(t),a,o,d,s);return s.delete(e),R;case x:if(Me)return Me.call(e)==Me.call(t)}return!1}(e,t,R,n,a,o,c);if(!(n&r)){var D=v&&X.call(e,"__wrapped__"),A=E&&X.call(t,"__wrapped__");if(D||A){var j=D?e.value():e,T=A?t.value():t;return c||(c=new Ne),o(j,T,n,a,c)}}if(!S)return!1;return c||(c=new Ne),function(e,t,n,a,i,o){var d=n&r,s=Pe(e),c=s.length,u=Pe(t),l=u.length;if(c!=l&&!d)return!1;var g=c;for(;g--;){var h=s[g];if(!(d?h in t:X.call(t,h)))return!1}var f=o.get(e);if(f&&o.get(t))return f==t;var p=!0;o.set(e,t),o.set(t,e);var m=d;for(;++g<c;){var R=e[h=s[g]],b=t[h];if(a)var y=d?a(b,R,h,t,e,o):a(R,b,h,e,t,o);if(!(void 0===y?R===b||i(R,b,n,a,o):y)){p=!1;break}m||(m="constructor"==h)}if(p&&!m){var v=e.constructor,_=t.constructor;v==_||!("constructor"in e)||!("constructor"in t)||"function"==typeof v&&v instanceof v&&"function"==typeof _&&_ instanceof _||(p=!1)}return o.delete(e),o.delete(t),p}(e,t,n,a,o,c)}(e,t,n,a,Le,o))}function Ie(e){return!(!Ke(e)||function(e){return!!J&&J in e}(e))&&(Qe(e)?te:D).test(He(e))}function Ce(e){if(n=(t=e)&&t.constructor,a="function"==typeof n&&n.prototype||W,t!==a)return ue(e);var t,n,a,r=[];for(var i in Object(e))X.call(e,i)&&"constructor"!=i&&r.push(i);return r}function Oe(e,t,n,a,o,d){var s=n&r,c=e.length,u=t.length;if(c!=u&&!(s&&u>c))return!1;var l=d.get(e);if(l&&d.get(t))return l==t;var g=-1,h=!0,f=n&i?new ke:void 0;for(d.set(e,t),d.set(t,e);++g<c;){var p=e[g],m=t[g];if(a)var R=s?a(m,p,g,t,e,d):a(p,m,g,e,t,d);if(void 0!==R){if(R)continue;h=!1;break}if(f){if(!U(t,(function(e,t){if(r=t,!f.has(r)&&(p===e||o(p,e,n,a,d)))return f.push(t);var r}))){h=!1;break}}else if(p!==m&&!o(p,m,n,a,d)){h=!1;break}}return d.delete(e),d.delete(t),h}function Pe(e){return function(e,t,n){var a=t(e);return Ge(e)?a:function(e,t){for(var n=-1,a=t.length,r=e.length;++n<a;)e[r+n]=t[n];return e}(a,n(e))}(e,Je,Fe)}function ze(e,t){var n,a,r=e.__data__;return("string"==(a=typeof(n=t))||"number"==a||"symbol"==a||"boolean"==a?"__proto__"!==n:null===n)?r["string"==typeof t?"string":"hash"]:r.map}function Be(e,t){var n=function(e,t){return null==e?void 0:e[t]}(e,t);return Ie(n)?n:void 0}xe.prototype.clear=function(){this.__data__=me?me(null):{},this.size=0},xe.prototype.delete=function(e){var t=this.has(e)&&delete this.__data__[e];return this.size-=t?1:0,t},xe.prototype.get=function(e){var t=this.__data__;if(me){var n=t[e];return n===a?void 0:n}return X.call(t,e)?t[e]:void 0},xe.prototype.has=function(e){var t=this.__data__;return me?void 0!==t[e]:X.call(t,e)},xe.prototype.set=function(e,t){var n=this.__data__;return this.size+=this.has(e)?0:1,n[e]=me&&void 0===t?a:t,this},Ee.prototype.clear=function(){this.__data__=[],this.size=0},Ee.prototype.delete=function(e){var t=this.__data__,n=Ae(t,e);return!(n<0)&&(n==t.length-1?t.pop():oe.call(t,n,1),--this.size,!0)},Ee.prototype.get=function(e){var t=this.__data__,n=Ae(t,e);return n<0?void 0:t[n][1]},Ee.prototype.has=function(e){return Ae(this.__data__,e)>-1},Ee.prototype.set=function(e,t){var n=this.__data__,a=Ae(n,e);return a<0?(++this.size,n.push([e,t])):n[a][1]=t,this},Se.prototype.clear=function(){this.size=0,this.__data__={hash:new xe,map:new(ge||Ee),string:new xe}},Se.prototype.delete=function(e){var t=ze(this,e).delete(e);return this.size-=t?1:0,t},Se.prototype.get=function(e){return ze(this,e).get(e)},Se.prototype.has=function(e){return ze(this,e).has(e)},Se.prototype.set=function(e,t){var n=ze(this,e),a=n.size;return n.set(e,t),this.size+=n.size==a?0:1,this},ke.prototype.add=ke.prototype.push=function(e){return this.__data__.set(e,a),this},ke.prototype.has=function(e){return this.__data__.has(e)},Ne.prototype.clear=function(){this.__data__=new Ee,this.size=0},Ne.prototype.delete=function(e){var t=this.__data__,n=t.delete(e);return this.size=t.size,n},Ne.prototype.get=function(e){return this.__data__.get(e)},Ne.prototype.has=function(e){return this.__data__.has(e)},Ne.prototype.set=function(e,t){var n=this.__data__;if(n instanceof Ee){var a=n.__data__;if(!ge||a.length<199)return a.push([e,t]),this.size=++n.size,this;n=this.__data__=new Se(a)}return n.set(e,t),this.size=n.size,this};var Fe=se?function(e){return null==e?[]:(e=Object(e),function(e,t){for(var n=-1,a=null==e?0:e.length,r=0,i=[];++n<a;){var o=e[n];t(o,n,e)&&(i[r++]=o)}return i}(se(e),(function(t){return ie.call(e,t)})))}:function(){return[]},Ue=je;function $e(e,t){return!!(t=null==t?o:t)&&("number"==typeof e||A.test(e))&&e>-1&&e%1==0&&e<t}function He(e){if(null!=e){try{return Z.call(e)}catch(t){}try{return e+""}catch(t){}}return""}function qe(e,t){return e===t||e!=e&&t!=t}(le&&Ue(new le(new ArrayBuffer(1)))!=N||ge&&Ue(new ge)!=p||he&&Ue(he.resolve())!=y||fe&&Ue(new fe)!=w||pe&&Ue(new pe)!=S)&&(Ue=function(e){var t=je(e),n=t==b?e.constructor:void 0,a=n?He(n):"";if(a)switch(a){case Re:return N;case be:return p;case ye:return y;case ve:return w;case _e:return S}return t});var Ye=Te(function(){return arguments}())?Te:function(e){return Ze(e)&&X.call(e,"callee")&&!ie.call(e,"callee")},Ge=Array.isArray;var Ve=ce||function(){return!1};function Qe(e){if(!Ke(e))return!1;var t=je(e);return t==h||t==f||t==c||t==v}function We(e){return"number"==typeof e&&e>-1&&e%1==0&&e<=o}function Ke(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}function Ze(e){return null!=e&&"object"==typeof e}var Xe=F?function(e){return function(t){return e(t)}}(F):function(e){return Ze(e)&&We(e.length)&&!!j[je(e)]};function Je(e){return null!=(t=e)&&We(t.length)&&!Qe(t)?De(e):Ce(e);var t}e.exports=function(e,t){return Le(e,t)}},5871:function(e,t,n){var a=1/0,r="[object Symbol]",i="object"==typeof n.g&&n.g&&n.g.Object===Object&&n.g,o="object"==typeof self&&self&&self.Object===Object&&self,d=i||o||Function("return this")(),s=Object.prototype,c=0,u=s.toString,l=d.Symbol,g=l?l.prototype:void 0,h=g?g.toString:void 0;function f(e){if("string"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return!!e&&"object"==typeof e}(e)&&u.call(e)==r}(e))return h?h.call(e):"";var t=e+"";return"0"==t&&1/e==-a?"-0":t}e.exports=function(e){var t,n=++c;return(null==(t=e)?"":f(t))+n}},35295:function(e,t,n){"use strict";const a=n(7372),r=Symbol("max"),i=Symbol("length"),o=Symbol("lengthCalculator"),d=Symbol("allowStale"),s=Symbol("maxAge"),c=Symbol("dispose"),u=Symbol("noDisposeOnSet"),l=Symbol("lruList"),g=Symbol("cache"),h=Symbol("updateAgeOnGet"),f=()=>1;const p=(e,t,n)=>{const a=e[g].get(t);if(a){const t=a.value;if(m(e,t)){if(b(e,a),!e[d])return}else n&&(e[h]&&(a.value.now=Date.now()),e[l].unshiftNode(a));return t.value}},m=(e,t)=>{if(!t||!t.maxAge&&!e[s])return!1;const n=Date.now()-t.now;return t.maxAge?n>t.maxAge:e[s]&&n>e[s]},R=e=>{if(e[i]>e[r])for(let t=e[l].tail;e[i]>e[r]&&null!==t;){const n=t.prev;b(e,t),t=n}},b=(e,t)=>{if(t){const n=t.value;e[c]&&e[c](n.key,n.value),e[i]-=n.length,e[g].delete(n.key),e[l].removeNode(t)}};class y{constructor(e,t,n,a,r){this.key=e,this.value=t,this.length=n,this.now=a,this.maxAge=r||0}}const v=(e,t,n,a)=>{let r=n.value;m(e,r)&&(b(e,n),e[d]||(r=void 0)),r&&t.call(a,r.value,r.key,e)};e.exports=class{constructor(e){if("number"==typeof e&&(e={max:e}),e||(e={}),e.max&&("number"!=typeof e.max||e.max<0))throw new TypeError("max must be a non-negative number");this[r]=e.max||1/0;const t=e.length||f;if(this[o]="function"!=typeof t?f:t,this[d]=e.stale||!1,e.maxAge&&"number"!=typeof e.maxAge)throw new TypeError("maxAge must be a number");this[s]=e.maxAge||0,this[c]=e.dispose,this[u]=e.noDisposeOnSet||!1,this[h]=e.updateAgeOnGet||!1,this.reset()}set max(e){if("number"!=typeof e||e<0)throw new TypeError("max must be a non-negative number");this[r]=e||1/0,R(this)}get max(){return this[r]}set allowStale(e){this[d]=!!e}get allowStale(){return this[d]}set maxAge(e){if("number"!=typeof e)throw new TypeError("maxAge must be a non-negative number");this[s]=e,R(this)}get maxAge(){return this[s]}set lengthCalculator(e){"function"!=typeof e&&(e=f),e!==this[o]&&(this[o]=e,this[i]=0,this[l].forEach((e=>{e.length=this[o](e.value,e.key),this[i]+=e.length}))),R(this)}get lengthCalculator(){return this[o]}get length(){return this[i]}get itemCount(){return this[l].length}rforEach(e,t){t=t||this;for(let n=this[l].tail;null!==n;){const a=n.prev;v(this,e,n,t),n=a}}forEach(e,t){t=t||this;for(let n=this[l].head;null!==n;){const a=n.next;v(this,e,n,t),n=a}}keys(){return this[l].toArray().map((e=>e.key))}values(){return this[l].toArray().map((e=>e.value))}reset(){this[c]&&this[l]&&this[l].length&&this[l].forEach((e=>this[c](e.key,e.value))),this[g]=new Map,this[l]=new a,this[i]=0}dump(){return this[l].map((e=>!m(this,e)&&{k:e.key,v:e.value,e:e.now+(e.maxAge||0)})).toArray().filter((e=>e))}dumpLru(){return this[l]}set(e,t,n){if((n=n||this[s])&&"number"!=typeof n)throw new TypeError("maxAge must be a number");const a=n?Date.now():0,d=this[o](t,e);if(this[g].has(e)){if(d>this[r])return b(this,this[g].get(e)),!1;const o=this[g].get(e).value;return this[c]&&(this[u]||this[c](e,o.value)),o.now=a,o.maxAge=n,o.value=t,this[i]+=d-o.length,o.length=d,this.get(e),R(this),!0}const h=new y(e,t,d,a,n);return h.length>this[r]?(this[c]&&this[c](e,t),!1):(this[i]+=h.length,this[l].unshift(h),this[g].set(e,this[l].head),R(this),!0)}has(e){if(!this[g].has(e))return!1;const t=this[g].get(e).value;return!m(this,t)}get(e){return p(this,e,!0)}peek(e){return p(this,e,!1)}pop(){const e=this[l].tail;return e?(b(this,e),e.value):null}del(e){b(this,this[g].get(e))}load(e){this.reset();const t=Date.now();for(let n=e.length-1;n>=0;n--){const a=e[n],r=a.e||0;if(0===r)this.set(a.k,a.v);else{const e=r-t;e>0&&this.set(a.k,a.v,e)}}}prune(){this[g].forEach(((e,t)=>p(this,t,!1)))}}},6722:function(e,t,n){"use strict";n.d(t,{ZP:function(){return y}});for(var a={},r="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",i=0;i<r.length;i++)a[r.charCodeAt(i)]=i;function o(e){var t="";e=e<0?-e<<1|1:e<<1;do{var n=31&e;(e>>>=5)>0&&(n|=32),t+=r[n]}while(e>0);return t}var d=function e(t){this.bits=t instanceof e?t.bits.slice():[]};d.prototype.add=function(e){this.bits[e>>5]|=1<<(31&e)},d.prototype.has=function(e){return!!(this.bits[e>>5]&1<<(31&e))};var s=function(e,t,n){this.start=e,this.end=t,this.original=n,this.intro="",this.outro="",this.content=n,this.storeName=!1,this.edited=!1,Object.defineProperties(this,{previous:{writable:!0,value:null},next:{writable:!0,value:null}})};s.prototype.appendLeft=function(e){this.outro+=e},s.prototype.appendRight=function(e){this.intro=this.intro+e},s.prototype.clone=function(){var e=new s(this.start,this.end,this.original);return e.intro=this.intro,e.outro=this.outro,e.content=this.content,e.storeName=this.storeName,e.edited=this.edited,e},s.prototype.contains=function(e){return this.start<e&&e<this.end},s.prototype.eachNext=function(e){for(var t=this;t;)e(t),t=t.next},s.prototype.eachPrevious=function(e){for(var t=this;t;)e(t),t=t.previous},s.prototype.edit=function(e,t,n){return this.content=e,n||(this.intro="",this.outro=""),this.storeName=t,this.edited=!0,this},s.prototype.prependLeft=function(e){this.outro=e+this.outro},s.prototype.prependRight=function(e){this.intro=e+this.intro},s.prototype.split=function(e){var t=e-this.start,n=this.original.slice(0,t),a=this.original.slice(t);this.original=n;var r=new s(e,this.end,a);return r.outro=this.outro,this.outro="",this.end=e,this.edited?(r.edit("",!1),this.content=""):this.content=n,r.next=this.next,r.next&&(r.next.previous=r),r.previous=this,this.next=r,r},s.prototype.toString=function(){return this.intro+this.content+this.outro},s.prototype.trimEnd=function(e){if(this.outro=this.outro.replace(e,""),this.outro.length)return!0;var t=this.content.replace(e,"");return t.length?(t!==this.content&&this.split(this.start+t.length).edit("",void 0,!0),!0):(this.edit("",void 0,!0),this.intro=this.intro.replace(e,""),!!this.intro.length||void 0)},s.prototype.trimStart=function(e){if(this.intro=this.intro.replace(e,""),this.intro.length)return!0;var t=this.content.replace(e,"");return t.length?(t!==this.content&&(this.split(this.end-t.length),this.edit("",void 0,!0)),!0):(this.edit("",void 0,!0),this.outro=this.outro.replace(e,""),!!this.outro.length||void 0)};var c=function(){throw new Error("Unsupported environment: `window.btoa` or `Buffer` should be supported.")};"undefined"!=typeof window&&"function"==typeof window.btoa?c=function(e){return window.btoa(unescape(encodeURIComponent(e)))}:"function"==typeof Buffer&&(c=function(e){return Buffer.from(e,"utf-8").toString("base64")});var u=function(e){this.version=3,this.file=e.file,this.sources=e.sources,this.sourcesContent=e.sourcesContent,this.names=e.names,this.mappings=function(e){for(var t=0,n=0,a=0,r=0,i="",d=0;d<e.length;d++){var s=e[d];if(d>0&&(i+=";"),0!==s.length){for(var c=0,u=[],l=0,g=s;l<g.length;l++){var h=g[l],f=o(h[0]-c);c=h[0],h.length>1&&(f+=o(h[1]-t)+o(h[2]-n)+o(h[3]-a),t=h[1],n=h[2],a=h[3]),5===h.length&&(f+=o(h[4]-r),r=h[4]),u.push(f)}i+=u.join(",")}}return i}(e.mappings)};function l(e){var t=e.split("\n"),n=t.filter((function(e){return/^\t+/.test(e)})),a=t.filter((function(e){return/^ {2,}/.test(e)}));if(0===n.length&&0===a.length)return null;if(n.length>=a.length)return"\t";var r=a.reduce((function(e,t){var n=/^ +/.exec(t)[0].length;return Math.min(n,e)}),1/0);return new Array(r+1).join(" ")}function g(e,t){var n=e.split(/[/\\]/),a=t.split(/[/\\]/);for(n.pop();n[0]===a[0];)n.shift(),a.shift();if(n.length)for(var r=n.length;r--;)n[r]="..";return n.concat(a).join("/")}u.prototype.toString=function(){return JSON.stringify(this)},u.prototype.toUrl=function(){return"data:application/json;charset=utf-8;base64,"+c(this.toString())};var h=Object.prototype.toString;function f(e){return"[object Object]"===h.call(e)}function p(e){for(var t=e.split("\n"),n=[],a=0,r=0;a<t.length;a++)n.push(r),r+=t[a].length+1;return function(e){for(var t=0,a=n.length;t<a;){var r=t+a>>1;e<n[r]?a=r:t=r+1}var i=t-1;return{line:i,column:e-n[i]}}}var m=function(e){this.hires=e,this.generatedCodeLine=0,this.generatedCodeColumn=0,this.raw=[],this.rawSegments=this.raw[this.generatedCodeLine]=[],this.pending=null};m.prototype.addEdit=function(e,t,n,a){if(t.length){var r=[this.generatedCodeColumn,e,n.line,n.column];a>=0&&r.push(a),this.rawSegments.push(r)}else this.pending&&this.rawSegments.push(this.pending);this.advance(t),this.pending=null},m.prototype.addUneditedChunk=function(e,t,n,a,r){for(var i=t.start,o=!0;i<t.end;)(this.hires||o||r.has(i))&&this.rawSegments.push([this.generatedCodeColumn,e,a.line,a.column]),"\n"===n[i]?(a.line+=1,a.column=0,this.generatedCodeLine+=1,this.raw[this.generatedCodeLine]=this.rawSegments=[],this.generatedCodeColumn=0,o=!0):(a.column+=1,this.generatedCodeColumn+=1,o=!1),i+=1;this.pending=null},m.prototype.advance=function(e){if(e){var t=e.split("\n");if(t.length>1){for(var n=0;n<t.length-1;n++)this.generatedCodeLine++,this.raw[this.generatedCodeLine]=this.rawSegments=[];this.generatedCodeColumn=0}this.generatedCodeColumn+=t[t.length-1].length}};var R="\n",b={insertLeft:!1,insertRight:!1,storeName:!1},y=function(e,t){void 0===t&&(t={});var n=new s(0,e.length,e);Object.defineProperties(this,{original:{writable:!0,value:e},outro:{writable:!0,value:""},intro:{writable:!0,value:""},firstChunk:{writable:!0,value:n},lastChunk:{writable:!0,value:n},lastSearchedChunk:{writable:!0,value:n},byStart:{writable:!0,value:{}},byEnd:{writable:!0,value:{}},filename:{writable:!0,value:t.filename},indentExclusionRanges:{writable:!0,value:t.indentExclusionRanges},sourcemapLocations:{writable:!0,value:new d},storedNames:{writable:!0,value:{}},indentStr:{writable:!0,value:l(e)}}),this.byStart[0]=n,this.byEnd[e.length]=n};y.prototype.addSourcemapLocation=function(e){this.sourcemapLocations.add(e)},y.prototype.append=function(e){if("string"!=typeof e)throw new TypeError("outro content must be a string");return this.outro+=e,this},y.prototype.appendLeft=function(e,t){if("string"!=typeof t)throw new TypeError("inserted content must be a string");this._split(e);var n=this.byEnd[e];return n?n.appendLeft(t):this.intro+=t,this},y.prototype.appendRight=function(e,t){if("string"!=typeof t)throw new TypeError("inserted content must be a string");this._split(e);var n=this.byStart[e];return n?n.appendRight(t):this.outro+=t,this},y.prototype.clone=function(){for(var e=new y(this.original,{filename:this.filename}),t=this.firstChunk,n=e.firstChunk=e.lastSearchedChunk=t.clone();t;){e.byStart[n.start]=n,e.byEnd[n.end]=n;var a=t.next,r=a&&a.clone();r&&(n.next=r,r.previous=n,n=r),t=a}return e.lastChunk=n,this.indentExclusionRanges&&(e.indentExclusionRanges=this.indentExclusionRanges.slice()),e.sourcemapLocations=new d(this.sourcemapLocations),e.intro=this.intro,e.outro=this.outro,e},y.prototype.generateDecodedMap=function(e){var t=this;e=e||{};var n=Object.keys(this.storedNames),a=new m(e.hires),r=p(this.original);return this.intro&&a.advance(this.intro),this.firstChunk.eachNext((function(e){var i=r(e.start);e.intro.length&&a.advance(e.intro),e.edited?a.addEdit(0,e.content,i,e.storeName?n.indexOf(e.original):-1):a.addUneditedChunk(0,e,t.original,i,t.sourcemapLocations),e.outro.length&&a.advance(e.outro)})),{file:e.file?e.file.split(/[/\\]/).pop():null,sources:[e.source?g(e.file||"",e.source):null],sourcesContent:e.includeContent?[this.original]:[null],names:n,mappings:a.raw}},y.prototype.generateMap=function(e){return new u(this.generateDecodedMap(e))},y.prototype.getIndentString=function(){return null===this.indentStr?"\t":this.indentStr},y.prototype.indent=function(e,t){var n=/^[^\r\n]/gm;if(f(e)&&(t=e,e=void 0),""===(e=void 0!==e?e:this.indentStr||"\t"))return this;var a={};(t=t||{}).exclude&&("number"==typeof t.exclude[0]?[t.exclude]:t.exclude).forEach((function(e){for(var t=e[0];t<e[1];t+=1)a[t]=!0}));var r=!1!==t.indentStart,i=function(t){return r?""+e+t:(r=!0,t)};this.intro=this.intro.replace(n,i);for(var o=0,d=this.firstChunk;d;){var s=d.end;if(d.edited)a[o]||(d.content=d.content.replace(n,i),d.content.length&&(r="\n"===d.content[d.content.length-1]));else for(o=d.start;o<s;){if(!a[o]){var c=this.original[o];"\n"===c?r=!0:"\r"!==c&&r&&(r=!1,o===d.start?d.prependRight(e):(this._splitChunk(d,o),(d=d.next).prependRight(e)))}o+=1}o=d.end,d=d.next}return this.outro=this.outro.replace(n,i),this},y.prototype.insert=function(){throw new Error("magicString.insert(...) is deprecated. Use prependRight(...) or appendLeft(...)")},y.prototype.insertLeft=function(e,t){return b.insertLeft||(console.warn("magicString.insertLeft(...) is deprecated. Use magicString.appendLeft(...) instead"),b.insertLeft=!0),this.appendLeft(e,t)},y.prototype.insertRight=function(e,t){return b.insertRight||(console.warn("magicString.insertRight(...) is deprecated. Use magicString.prependRight(...) instead"),b.insertRight=!0),this.prependRight(e,t)},y.prototype.move=function(e,t,n){if(n>=e&&n<=t)throw new Error("Cannot move a selection inside itself");this._split(e),this._split(t),this._split(n);var a=this.byStart[e],r=this.byEnd[t],i=a.previous,o=r.next,d=this.byStart[n];if(!d&&r===this.lastChunk)return this;var s=d?d.previous:this.lastChunk;return i&&(i.next=o),o&&(o.previous=i),s&&(s.next=a),d&&(d.previous=r),a.previous||(this.firstChunk=r.next),r.next||(this.lastChunk=a.previous,this.lastChunk.next=null),a.previous=s,r.next=d||null,s||(this.firstChunk=a),d||(this.lastChunk=r),this},y.prototype.overwrite=function(e,t,n,a){if("string"!=typeof n)throw new TypeError("replacement content must be a string");for(;e<0;)e+=this.original.length;for(;t<0;)t+=this.original.length;if(t>this.original.length)throw new Error("end is out of bounds");if(e===t)throw new Error("Cannot overwrite a zero-length range – use appendLeft or prependRight instead");this._split(e),this._split(t),!0===a&&(b.storeName||(console.warn("The final argument to magicString.overwrite(...) should be an options object. See https://github.com/rich-harris/magic-string"),b.storeName=!0),a={storeName:!0});var r=void 0!==a&&a.storeName,i=void 0!==a&&a.contentOnly;if(r){var o=this.original.slice(e,t);Object.defineProperty(this.storedNames,o,{writable:!0,value:!0,enumerable:!0})}var d=this.byStart[e],c=this.byEnd[t];if(d){for(var u=d;u!==c;){if(u.next!==this.byStart[u.end])throw new Error("Cannot overwrite across a split point");(u=u.next).edit("",!1)}d.edit(n,r,i)}else{var l=new s(e,t,"").edit(n,r);c.next=l,l.previous=c}return this},y.prototype.prepend=function(e){if("string"!=typeof e)throw new TypeError("outro content must be a string");return this.intro=e+this.intro,this},y.prototype.prependLeft=function(e,t){if("string"!=typeof t)throw new TypeError("inserted content must be a string");this._split(e);var n=this.byEnd[e];return n?n.prependLeft(t):this.intro=t+this.intro,this},y.prototype.prependRight=function(e,t){if("string"!=typeof t)throw new TypeError("inserted content must be a string");this._split(e);var n=this.byStart[e];return n?n.prependRight(t):this.outro=t+this.outro,this},y.prototype.remove=function(e,t){for(;e<0;)e+=this.original.length;for(;t<0;)t+=this.original.length;if(e===t)return this;if(e<0||t>this.original.length)throw new Error("Character is out of bounds");if(e>t)throw new Error("end must be greater than start");this._split(e),this._split(t);for(var n=this.byStart[e];n;)n.intro="",n.outro="",n.edit(""),n=t>n.end?this.byStart[n.end]:null;return this},y.prototype.lastChar=function(){if(this.outro.length)return this.outro[this.outro.length-1];var e=this.lastChunk;do{if(e.outro.length)return e.outro[e.outro.length-1];if(e.content.length)return e.content[e.content.length-1];if(e.intro.length)return e.intro[e.intro.length-1]}while(e=e.previous);return this.intro.length?this.intro[this.intro.length-1]:""},y.prototype.lastLine=function(){var e=this.outro.lastIndexOf(R);if(-1!==e)return this.outro.substr(e+1);var t=this.outro,n=this.lastChunk;do{if(n.outro.length>0){if(-1!==(e=n.outro.lastIndexOf(R)))return n.outro.substr(e+1)+t;t=n.outro+t}if(n.content.length>0){if(-1!==(e=n.content.lastIndexOf(R)))return n.content.substr(e+1)+t;t=n.content+t}if(n.intro.length>0){if(-1!==(e=n.intro.lastIndexOf(R)))return n.intro.substr(e+1)+t;t=n.intro+t}}while(n=n.previous);return-1!==(e=this.intro.lastIndexOf(R))?this.intro.substr(e+1)+t:this.intro+t},y.prototype.slice=function(e,t){for(void 0===e&&(e=0),void 0===t&&(t=this.original.length);e<0;)e+=this.original.length;for(;t<0;)t+=this.original.length;for(var n="",a=this.firstChunk;a&&(a.start>e||a.end<=e);){if(a.start<t&&a.end>=t)return n;a=a.next}if(a&&a.edited&&a.start!==e)throw new Error("Cannot use replaced character "+e+" as slice start anchor.");for(var r=a;a;){!a.intro||r===a&&a.start!==e||(n+=a.intro);var i=a.start<t&&a.end>=t;if(i&&a.edited&&a.end!==t)throw new Error("Cannot use replaced character "+t+" as slice end anchor.");var o=r===a?e-a.start:0,d=i?a.content.length+t-a.end:a.content.length;if(n+=a.content.slice(o,d),!a.outro||i&&a.end!==t||(n+=a.outro),i)break;a=a.next}return n},y.prototype.snip=function(e,t){var n=this.clone();return n.remove(0,e),n.remove(t,n.original.length),n},y.prototype._split=function(e){if(!this.byStart[e]&&!this.byEnd[e])for(var t=this.lastSearchedChunk,n=e>t.end;t;){if(t.contains(e))return this._splitChunk(t,e);t=n?this.byStart[t.end]:this.byEnd[t.start]}},y.prototype._splitChunk=function(e,t){if(e.edited&&e.content.length){var n=p(this.original)(t);throw new Error("Cannot split a chunk that has already been edited ("+n.line+":"+n.column+' – "'+e.original+'")')}var a=e.split(t);return this.byEnd[t]=e,this.byStart[t]=a,this.byEnd[a.end]=a,e===this.lastChunk&&(this.lastChunk=a),this.lastSearchedChunk=e,!0},y.prototype.toString=function(){for(var e=this.intro,t=this.firstChunk;t;)e+=t.toString(),t=t.next;return e+this.outro},y.prototype.isEmpty=function(){var e=this.firstChunk;do{if(e.intro.length&&e.intro.trim()||e.content.length&&e.content.trim()||e.outro.length&&e.outro.trim())return!1}while(e=e.next);return!0},y.prototype.length=function(){var e=this.firstChunk,t=0;do{t+=e.intro.length+e.content.length+e.outro.length}while(e=e.next);return t},y.prototype.trimLines=function(){return this.trim("[\\r\\n]")},y.prototype.trim=function(e){return this.trimStart(e).trimEnd(e)},y.prototype.trimEndAborted=function(e){var t=new RegExp((e||"\\s")+"+$");if(this.outro=this.outro.replace(t,""),this.outro.length)return!0;var n=this.lastChunk;do{var a=n.end,r=n.trimEnd(t);if(n.end!==a&&(this.lastChunk===n&&(this.lastChunk=n.next),this.byEnd[n.end]=n,this.byStart[n.next.start]=n.next,this.byEnd[n.next.end]=n.next),r)return!0;n=n.previous}while(n);return!1},y.prototype.trimEnd=function(e){return this.trimEndAborted(e),this},y.prototype.trimStartAborted=function(e){var t=new RegExp("^"+(e||"\\s")+"+");if(this.intro=this.intro.replace(t,""),this.intro.length)return!0;var n=this.firstChunk;do{var a=n.end,r=n.trimStart(t);if(n.end!==a&&(n===this.lastChunk&&(this.lastChunk=n.next),this.byEnd[n.end]=n,this.byStart[n.next.start]=n.next,this.byEnd[n.next.end]=n.next),r)return!0;n=n.next}while(n);return!1},y.prototype.trimStart=function(e){return this.trimStartAborted(e),this};var v=Object.prototype.hasOwnProperty,_=function(e){void 0===e&&(e={}),this.intro=e.intro||"",this.separator=void 0!==e.separator?e.separator:"\n",this.sources=[],this.uniqueSources=[],this.uniqueSourceIndexByFilename={}};_.prototype.addSource=function(e){if(e instanceof y)return this.addSource({content:e,filename:e.filename,separator:this.separator});if(!f(e)||!e.content)throw new Error("bundle.addSource() takes an object with a `content` property, which should be an instance of MagicString, and an optional `filename`");if(["filename","indentExclusionRanges","separator"].forEach((function(t){v.call(e,t)||(e[t]=e.content[t])})),void 0===e.separator&&(e.separator=this.separator),e.filename)if(v.call(this.uniqueSourceIndexByFilename,e.filename)){var t=this.uniqueSources[this.uniqueSourceIndexByFilename[e.filename]];if(e.content.original!==t.content)throw new Error("Illegal source: same filename ("+e.filename+"), different contents")}else this.uniqueSourceIndexByFilename[e.filename]=this.uniqueSources.length,this.uniqueSources.push({filename:e.filename,content:e.content.original});return this.sources.push(e),this},_.prototype.append=function(e,t){return this.addSource({content:new y(e),separator:t&&t.separator||""}),this},_.prototype.clone=function(){var e=new _({intro:this.intro,separator:this.separator});return this.sources.forEach((function(t){e.addSource({filename:t.filename,content:t.content.clone(),separator:t.separator})})),e},_.prototype.generateDecodedMap=function(e){var t=this;void 0===e&&(e={});var n=[];this.sources.forEach((function(e){Object.keys(e.content.storedNames).forEach((function(e){~n.indexOf(e)||n.push(e)}))}));var a=new m(e.hires);return this.intro&&a.advance(this.intro),this.sources.forEach((function(e,r){r>0&&a.advance(t.separator);var i=e.filename?t.uniqueSourceIndexByFilename[e.filename]:-1,o=e.content,d=p(o.original);o.intro&&a.advance(o.intro),o.firstChunk.eachNext((function(t){var r=d(t.start);t.intro.length&&a.advance(t.intro),e.filename?t.edited?a.addEdit(i,t.content,r,t.storeName?n.indexOf(t.original):-1):a.addUneditedChunk(i,t,o.original,r,o.sourcemapLocations):a.advance(t.content),t.outro.length&&a.advance(t.outro)})),o.outro&&a.advance(o.outro)})),{file:e.file?e.file.split(/[/\\]/).pop():null,sources:this.uniqueSources.map((function(t){return e.file?g(e.file,t.filename):t.filename})),sourcesContent:this.uniqueSources.map((function(t){return e.includeContent?t.content:null})),names:n,mappings:a.raw}},_.prototype.generateMap=function(e){return new u(this.generateDecodedMap(e))},_.prototype.getIndentString=function(){var e={};return this.sources.forEach((function(t){var n=t.content.indentStr;null!==n&&(e[n]||(e[n]=0),e[n]+=1)})),Object.keys(e).sort((function(t,n){return e[t]-e[n]}))[0]||"\t"},_.prototype.indent=function(e){var t=this;if(arguments.length||(e=this.getIndentString()),""===e)return this;var n=!this.intro||"\n"===this.intro.slice(-1);return this.sources.forEach((function(a,r){var i=void 0!==a.separator?a.separator:t.separator,o=n||r>0&&/\r?\n$/.test(i);a.content.indent(e,{exclude:a.indentExclusionRanges,indentStart:o}),n="\n"===a.content.lastChar()})),this.intro&&(this.intro=e+this.intro.replace(/^[^\n]/gm,(function(t,n){return n>0?e+t:t}))),this},_.prototype.prepend=function(e){return this.intro=e+this.intro,this},_.prototype.toString=function(){var e=this,t=this.sources.map((function(t,n){var a=void 0!==t.separator?t.separator:e.separator;return(n>0?a:"")+t.content.toString()})).join("");return this.intro+t},_.prototype.isEmpty=function(){return(!this.intro.length||!this.intro.trim())&&!this.sources.some((function(e){return!e.content.isEmpty()}))},_.prototype.length=function(){return this.sources.reduce((function(e,t){return e+t.content.length()}),this.intro.length)},_.prototype.trimLines=function(){return this.trim("[\\r\\n]")},_.prototype.trim=function(e){return this.trimStart(e).trimEnd(e)},_.prototype.trimStart=function(e){var t=new RegExp("^"+(e||"\\s")+"+");if(this.intro=this.intro.replace(t,""),!this.intro){var n,a=0;do{if(!(n=this.sources[a++]))break}while(!n.content.trimStartAborted(e))}return this},_.prototype.trimEnd=function(e){var t,n=new RegExp((e||"\\s")+"+$"),a=this.sources.length-1;do{if(!(t=this.sources[a--])){this.intro=this.intro.replace(n,"");break}}while(!t.content.trimEndAborted(e));return this}},79500:function(e,t,n){"use strict";var a=n(70087),r=n(6883),i=n(27172).Buffer,o=new Array(16);function d(){r.call(this,64),this._a=1732584193,this._b=4023233417,this._c=2562383102,this._d=271733878}function s(e,t){return e<<t|e>>>32-t}function c(e,t,n,a,r,i,o){return s(e+(t&n|~t&a)+r+i|0,o)+t|0}function u(e,t,n,a,r,i,o){return s(e+(t&a|n&~a)+r+i|0,o)+t|0}function l(e,t,n,a,r,i,o){return s(e+(t^n^a)+r+i|0,o)+t|0}function g(e,t,n,a,r,i,o){return s(e+(n^(t|~a))+r+i|0,o)+t|0}a(d,r),d.prototype._update=function(){for(var e=o,t=0;t<16;++t)e[t]=this._block.readInt32LE(4*t);var n=this._a,a=this._b,r=this._c,i=this._d;n=c(n,a,r,i,e[0],3614090360,7),i=c(i,n,a,r,e[1],3905402710,12),r=c(r,i,n,a,e[2],606105819,17),a=c(a,r,i,n,e[3],3250441966,22),n=c(n,a,r,i,e[4],4118548399,7),i=c(i,n,a,r,e[5],1200080426,12),r=c(r,i,n,a,e[6],2821735955,17),a=c(a,r,i,n,e[7],4249261313,22),n=c(n,a,r,i,e[8],1770035416,7),i=c(i,n,a,r,e[9],2336552879,12),r=c(r,i,n,a,e[10],4294925233,17),a=c(a,r,i,n,e[11],2304563134,22),n=c(n,a,r,i,e[12],1804603682,7),i=c(i,n,a,r,e[13],4254626195,12),r=c(r,i,n,a,e[14],2792965006,17),n=u(n,a=c(a,r,i,n,e[15],1236535329,22),r,i,e[1],4129170786,5),i=u(i,n,a,r,e[6],3225465664,9),r=u(r,i,n,a,e[11],643717713,14),a=u(a,r,i,n,e[0],3921069994,20),n=u(n,a,r,i,e[5],3593408605,5),i=u(i,n,a,r,e[10],38016083,9),r=u(r,i,n,a,e[15],3634488961,14),a=u(a,r,i,n,e[4],3889429448,20),n=u(n,a,r,i,e[9],568446438,5),i=u(i,n,a,r,e[14],3275163606,9),r=u(r,i,n,a,e[3],4107603335,14),a=u(a,r,i,n,e[8],1163531501,20),n=u(n,a,r,i,e[13],2850285829,5),i=u(i,n,a,r,e[2],4243563512,9),r=u(r,i,n,a,e[7],1735328473,14),n=l(n,a=u(a,r,i,n,e[12],2368359562,20),r,i,e[5],4294588738,4),i=l(i,n,a,r,e[8],2272392833,11),r=l(r,i,n,a,e[11],1839030562,16),a=l(a,r,i,n,e[14],4259657740,23),n=l(n,a,r,i,e[1],2763975236,4),i=l(i,n,a,r,e[4],1272893353,11),r=l(r,i,n,a,e[7],4139469664,16),a=l(a,r,i,n,e[10],3200236656,23),n=l(n,a,r,i,e[13],681279174,4),i=l(i,n,a,r,e[0],3936430074,11),r=l(r,i,n,a,e[3],3572445317,16),a=l(a,r,i,n,e[6],76029189,23),n=l(n,a,r,i,e[9],3654602809,4),i=l(i,n,a,r,e[12],3873151461,11),r=l(r,i,n,a,e[15],530742520,16),n=g(n,a=l(a,r,i,n,e[2],3299628645,23),r,i,e[0],4096336452,6),i=g(i,n,a,r,e[7],1126891415,10),r=g(r,i,n,a,e[14],2878612391,15),a=g(a,r,i,n,e[5],4237533241,21),n=g(n,a,r,i,e[12],1700485571,6),i=g(i,n,a,r,e[3],2399980690,10),r=g(r,i,n,a,e[10],4293915773,15),a=g(a,r,i,n,e[1],2240044497,21),n=g(n,a,r,i,e[8],1873313359,6),i=g(i,n,a,r,e[15],4264355552,10),r=g(r,i,n,a,e[6],2734768916,15),a=g(a,r,i,n,e[13],1309151649,21),n=g(n,a,r,i,e[4],4149444226,6),i=g(i,n,a,r,e[11],3174756917,10),r=g(r,i,n,a,e[2],718787259,15),a=g(a,r,i,n,e[9],3951481745,21),this._a=this._a+n|0,this._b=this._b+a|0,this._c=this._c+r|0,this._d=this._d+i|0},d.prototype._digest=function(){this._block[this._blockOffset++]=128,this._blockOffset>56&&(this._block.fill(0,this._blockOffset,64),this._update(),this._blockOffset=0),this._block.fill(0,this._blockOffset,56),this._block.writeUInt32LE(this._length[0],56),this._block.writeUInt32LE(this._length[1],60),this._update();var e=i.allocUnsafe(16);return e.writeInt32LE(this._a,0),e.writeInt32LE(this._b,4),e.writeInt32LE(this._c,8),e.writeInt32LE(this._d,12),e},e.exports=d},78773:function(e,t,n){var a=n(63785),r=n(59154);function i(e){this.rand=e||new r.Rand}e.exports=i,i.create=function(e){return new i(e)},i.prototype._randbelow=function(e){var t=e.bitLength(),n=Math.ceil(t/8);do{var r=new a(this.rand.generate(n))}while(r.cmp(e)>=0);return r},i.prototype._randrange=function(e,t){var n=t.sub(e);return e.add(this._randbelow(n))},i.prototype.test=function(e,t,n){var r=e.bitLength(),i=a.mont(e),o=new a(1).toRed(i);t||(t=Math.max(1,r/48|0));for(var d=e.subn(1),s=0;!d.testn(s);s++);for(var c=e.shrn(s),u=d.toRed(i);t>0;t--){var l=this._randrange(new a(2),d);n&&n(l);var g=l.toRed(i).redPow(c);if(0!==g.cmp(o)&&0!==g.cmp(u)){for(var h=1;h<s;h++){if(0===(g=g.redSqr()).cmp(o))return!1;if(0===g.cmp(u))break}if(h===s)return!1}}return!0},i.prototype.getDivisor=function(e,t){var n=e.bitLength(),r=a.mont(e),i=new a(1).toRed(r);t||(t=Math.max(1,n/48|0));for(var o=e.subn(1),d=0;!o.testn(d);d++);for(var s=e.shrn(d),c=o.toRed(r);t>0;t--){var u=this._randrange(new a(2),o),l=e.gcd(u);if(0!==l.cmpn(1))return l;var g=u.toRed(r).redPow(s);if(0!==g.cmp(i)&&0!==g.cmp(c)){for(var h=1;h<d;h++){if(0===(g=g.redSqr()).cmp(i))return g.fromRed().subn(1).gcd(e);if(0===g.cmp(c))break}if(h===d)return(g=g.redSqr()).fromRed().subn(1).gcd(e)}}return!1}},77859:function(e){function t(e,t){if(!e)throw new Error(t||"Assertion failed")}e.exports=t,t.equal=function(e,t,n){if(e!=t)throw new Error(n||"Assertion failed: "+e+" != "+t)}},2910:function(e,t){"use strict";var n=t;function a(e){return 1===e.length?"0"+e:e}function r(e){for(var t="",n=0;n<e.length;n++)t+=a(e[n].toString(16));return t}n.toArray=function(e,t){if(Array.isArray(e))return e.slice();if(!e)return[];var n=[];if("string"!=typeof e){for(var a=0;a<e.length;a++)n[a]=0|e[a];return n}if("hex"===t){(e=e.replace(/[^a-z0-9]+/gi,"")).length%2!=0&&(e="0"+e);for(a=0;a<e.length;a+=2)n.push(parseInt(e[a]+e[a+1],16))}else for(a=0;a<e.length;a++){var r=e.charCodeAt(a),i=r>>8,o=255&r;i?n.push(i,o):n.push(o)}return n},n.zero2=a,n.toHex=r,n.encode=function(e,t){return"hex"===t?r(e):e}},48481:function(e,t,n){"use strict";var a=n(99840);t.certificate=n(66939);var r=a.define("RSAPrivateKey",(function(){this.seq().obj(this.key("version").int(),this.key("modulus").int(),this.key("publicExponent").int(),this.key("privateExponent").int(),this.key("prime1").int(),this.key("prime2").int(),this.key("exponent1").int(),this.key("exponent2").int(),this.key("coefficient").int())}));t.RSAPrivateKey=r;var i=a.define("RSAPublicKey",(function(){this.seq().obj(this.key("modulus").int(),this.key("publicExponent").int())}));t.RSAPublicKey=i;var o=a.define("SubjectPublicKeyInfo",(function(){this.seq().obj(this.key("algorithm").use(d),this.key("subjectPublicKey").bitstr())}));t.PublicKey=o;var d=a.define("AlgorithmIdentifier",(function(){this.seq().obj(this.key("algorithm").objid(),this.key("none").null_().optional(),this.key("curve").objid().optional(),this.key("params").seq().obj(this.key("p").int(),this.key("q").int(),this.key("g").int()).optional())})),s=a.define("PrivateKeyInfo",(function(){this.seq().obj(this.key("version").int(),this.key("algorithm").use(d),this.key("subjectPrivateKey").octstr())}));t.PrivateKey=s;var c=a.define("EncryptedPrivateKeyInfo",(function(){this.seq().obj(this.key("algorithm").seq().obj(this.key("id").objid(),this.key("decrypt").seq().obj(this.key("kde").seq().obj(this.key("id").objid(),this.key("kdeparams").seq().obj(this.key("salt").octstr(),this.key("iters").int())),this.key("cipher").seq().obj(this.key("algo").objid(),this.key("iv").octstr()))),this.key("subjectPrivateKey").octstr())}));t.EncryptedPrivateKey=c;var u=a.define("DSAPrivateKey",(function(){this.seq().obj(this.key("version").int(),this.key("p").int(),this.key("q").int(),this.key("g").int(),this.key("pub_key").int(),this.key("priv_key").int())}));t.DSAPrivateKey=u,t.DSAparam=a.define("DSAparam",(function(){this.int()}));var l=a.define("ECPrivateKey",(function(){this.seq().obj(this.key("version").int(),this.key("privateKey").octstr(),this.key("parameters").optional().explicit(0).use(g),this.key("publicKey").optional().explicit(1).bitstr())}));t.ECPrivateKey=l;var g=a.define("ECParameters",(function(){this.choice({namedCurve:this.objid()})}));t.signature=a.define("signature",(function(){this.seq().obj(this.key("r").int(),this.key("s").int())}))},66939:function(e,t,n){"use strict";var a=n(99840),r=a.define("Time",(function(){this.choice({utcTime:this.utctime(),generalTime:this.gentime()})})),i=a.define("AttributeTypeValue",(function(){this.seq().obj(this.key("type").objid(),this.key("value").any())})),o=a.define("AlgorithmIdentifier",(function(){this.seq().obj(this.key("algorithm").objid(),this.key("parameters").optional(),this.key("curve").objid().optional())})),d=a.define("SubjectPublicKeyInfo",(function(){this.seq().obj(this.key("algorithm").use(o),this.key("subjectPublicKey").bitstr())})),s=a.define("RelativeDistinguishedName",(function(){this.setof(i)})),c=a.define("RDNSequence",(function(){this.seqof(s)})),u=a.define("Name",(function(){this.choice({rdnSequence:this.use(c)})})),l=a.define("Validity",(function(){this.seq().obj(this.key("notBefore").use(r),this.key("notAfter").use(r))})),g=a.define("Extension",(function(){this.seq().obj(this.key("extnID").objid(),this.key("critical").bool().def(!1),this.key("extnValue").octstr())})),h=a.define("TBSCertificate",(function(){this.seq().obj(this.key("version").explicit(0).int().optional(),this.key("serialNumber").int(),this.key("signature").use(o),this.key("issuer").use(u),this.key("validity").use(l),this.key("subject").use(u),this.key("subjectPublicKeyInfo").use(d),this.key("issuerUniqueID").implicit(1).bitstr().optional(),this.key("subjectUniqueID").implicit(2).bitstr().optional(),this.key("extensions").explicit(3).seqof(g).optional())})),f=a.define("X509Certificate",(function(){this.seq().obj(this.key("tbsCertificate").use(h),this.key("signatureAlgorithm").use(o),this.key("signatureValue").bitstr())}));e.exports=f},11412:function(e,t,n){var a=/Proc-Type: 4,ENCRYPTED[\n\r]+DEK-Info: AES-((?:128)|(?:192)|(?:256))-CBC,([0-9A-H]+)[\n\r]+([0-9A-z\n\r+/=]+)[\n\r]+/m,r=/^-----BEGIN ((?:.*? KEY)|CERTIFICATE)-----/m,i=/^-----BEGIN ((?:.*? KEY)|CERTIFICATE)-----([0-9A-z\n\r+/=]+)-----END \1-----$/m,o=n(55883),d=n(98901),s=n(27172).Buffer;e.exports=function(e,t){var n,c=e.toString(),u=c.match(a);if(u){var l="aes"+u[1],g=s.from(u[2],"hex"),h=s.from(u[3].replace(/[\r\n]/g,""),"base64"),f=o(t,g.slice(0,8),parseInt(u[1],10)).key,p=[],m=d.createDecipheriv(l,f,g);p.push(m.update(h)),p.push(m.final()),n=s.concat(p)}else{var R=c.match(i);n=s.from(R[2].replace(/[\r\n]/g,""),"base64")}return{tag:c.match(r)[1],data:n}}},71463:function(e,t,n){var a=n(48481),r=n(41095),i=n(11412),o=n(98901),d=n(50041),s=n(27172).Buffer;function c(e){var t;"object"!=typeof e||s.isBuffer(e)||(t=e.passphrase,e=e.key),"string"==typeof e&&(e=s.from(e));var n,c,u=i(e,t),l=u.tag,g=u.data;switch(l){case"CERTIFICATE":c=a.certificate.decode(g,"der").tbsCertificate.subjectPublicKeyInfo;case"PUBLIC KEY":switch(c||(c=a.PublicKey.decode(g,"der")),n=c.algorithm.algorithm.join(".")){case"1.2.840.113549.1.1.1":return a.RSAPublicKey.decode(c.subjectPublicKey.data,"der");case"1.2.840.10045.2.1":return c.subjectPrivateKey=c.subjectPublicKey,{type:"ec",data:c};case"1.2.840.10040.4.1":return c.algorithm.params.pub_key=a.DSAparam.decode(c.subjectPublicKey.data,"der"),{type:"dsa",data:c.algorithm.params};default:throw new Error("unknown key id "+n)}case"ENCRYPTED PRIVATE KEY":g=function(e,t){var n=e.algorithm.decrypt.kde.kdeparams.salt,a=parseInt(e.algorithm.decrypt.kde.kdeparams.iters.toString(),10),i=r[e.algorithm.decrypt.cipher.algo.join(".")],c=e.algorithm.decrypt.cipher.iv,u=e.subjectPrivateKey,l=parseInt(i.split("-")[1],10)/8,g=d.pbkdf2Sync(t,n,a,l,"sha1"),h=o.createDecipheriv(i,g,c),f=[];return f.push(h.update(u)),f.push(h.final()),s.concat(f)}(g=a.EncryptedPrivateKey.decode(g,"der"),t);case"PRIVATE KEY":switch(n=(c=a.PrivateKey.decode(g,"der")).algorithm.algorithm.join(".")){case"1.2.840.113549.1.1.1":return a.RSAPrivateKey.decode(c.subjectPrivateKey,"der");case"1.2.840.10045.2.1":return{curve:c.algorithm.curve,privateKey:a.ECPrivateKey.decode(c.subjectPrivateKey,"der").privateKey};case"1.2.840.10040.4.1":return c.algorithm.params.priv_key=a.DSAparam.decode(c.subjectPrivateKey,"der"),{type:"dsa",params:c.algorithm.params};default:throw new Error("unknown key id "+n)}case"RSA PUBLIC KEY":return a.RSAPublicKey.decode(g,"der");case"RSA PRIVATE KEY":return a.RSAPrivateKey.decode(g,"der");case"DSA PRIVATE KEY":return{type:"dsa",params:a.DSAPrivateKey.decode(g,"der")};case"EC PRIVATE KEY":return{curve:(g=a.ECPrivateKey.decode(g,"der")).parameters.value,privateKey:g.privateKey};default:throw new Error("unknown key type "+l)}}e.exports=c,c.signature=a.signature},58523:function(e,t){var n,a,r;a=[],void 0===(r="function"==typeof(n=function(){return function(e){function t(e){return" "===e||"\t"===e||"\n"===e||"\f"===e||"\r"===e}function n(t){var n,a=t.exec(e.substring(p));if(a)return n=a[0],p+=n.length,n}for(var a,r,i,o,d,s=e.length,c=/^[ \t\n\r\u000c]+/,u=/^[, \t\n\r\u000c]+/,l=/^[^ \t\n\r\u000c]+/,g=/[,]+$/,h=/^\d+$/,f=/^-?(?:[0-9]+|[0-9]*\.[0-9]+)(?:[eE][+-]?[0-9]+)?$/,p=0,m=[];;){if(n(u),p>=s)return m;a=n(l),r=[],","===a.slice(-1)?(a=a.replace(g,""),b()):R()}function R(){for(n(c),i="",o="in descriptor";;){if(d=e.charAt(p),"in descriptor"===o)if(t(d))i&&(r.push(i),i="",o="after descriptor");else{if(","===d)return p+=1,i&&r.push(i),void b();if("("===d)i+=d,o="in parens";else{if(""===d)return i&&r.push(i),void b();i+=d}}else if("in parens"===o)if(")"===d)i+=d,o="in descriptor";else{if(""===d)return r.push(i),void b();i+=d}else if("after descriptor"===o)if(t(d));else{if(""===d)return void b();o="in descriptor",p-=1}p+=1}}function b(){var t,n,i,o,d,s,c,u,l,g=!1,p={};for(o=0;o<r.length;o++)s=(d=r[o])[d.length-1],c=d.substring(0,d.length-1),u=parseInt(c,10),l=parseFloat(c),h.test(c)&&"w"===s?((t||n)&&(g=!0),0===u?g=!0:t=u):f.test(c)&&"x"===s?((t||n||i)&&(g=!0),l<0?g=!0:n=l):h.test(c)&&"h"===s?((i||n)&&(g=!0),0===u?g=!0:i=u):g=!0;g?console&&console.log&&console.log("Invalid srcset descriptor found in '"+e+"' at '"+d+"'."):(p.url=a,t&&(p.w=t),n&&(p.d=n),i&&(p.h=i),m.push(p))}}})?n.apply(t,a):n)||(e.exports=r)},3214:function(e,t,n){"use strict";var a=n(27061),r="win32"===a.platform,i=n(71323);function o(e,t){for(var n=[],a=0;a<e.length;a++){var r=e[a];r&&"."!==r&&(".."===r?n.length&&".."!==n[n.length-1]?n.pop():t&&n.push(".."):n.push(r))}return n}function d(e){for(var t=e.length-1,n=0;n<=t&&!e[n];n++);for(var a=t;a>=0&&!e[a];a--);return 0===n&&a===t?e:n>a?[]:e.slice(n,a+1)}var s=/^([a-zA-Z]:|[\\\/]{2}[^\\\/]+[\\\/]+[^\\\/]+)?([\\\/])?([\s\S]*?)$/,c=/^([\s\S]*?)((?:\.{1,2}|[^\\\/]+?|)(\.[^.\/\\]*|))(?:[\\\/]*)$/,u={};function l(e){var t=s.exec(e),n=(t[1]||"")+(t[2]||""),a=t[3]||"",r=c.exec(a);return[n,r[1],r[2],r[3]]}function g(e){var t=s.exec(e),n=t[1]||"",a=!!n&&":"!==n[1];return{device:n,isUnc:a,isAbsolute:a||!!t[2],tail:t[3]}}function h(e){return"\\\\"+e.replace(/^[\\\/]+/,"").replace(/[\\\/]+/g,"\\")}u.resolve=function(){for(var e="",t="",n=!1,r=arguments.length-1;r>=-1;r--){var d;if(r>=0?d=arguments[r]:e?(d={}["="+e])&&d.substr(0,3).toLowerCase()===e.toLowerCase()+"\\"||(d=e+"\\"):d=a.cwd(),!i.isString(d))throw new TypeError("Arguments to path.resolve must be strings");if(d){var s=g(d),c=s.device,u=s.isUnc,l=s.isAbsolute,f=s.tail;if((!c||!e||c.toLowerCase()===e.toLowerCase())&&(e||(e=c),n||(t=f+"\\"+t,n=l),e&&n))break}}return u&&(e=h(e)),e+(n?"\\":"")+(t=o(t.split(/[\\\/]+/),!n).join("\\"))||"."},u.normalize=function(e){var t=g(e),n=t.device,a=t.isUnc,r=t.isAbsolute,i=t.tail,d=/[\\\/]$/.test(i);return(i=o(i.split(/[\\\/]+/),!r).join("\\"))||r||(i="."),i&&d&&(i+="\\"),a&&(n=h(n)),n+(r?"\\":"")+i},u.isAbsolute=function(e){return g(e).isAbsolute},u.join=function(){for(var e=[],t=0;t<arguments.length;t++){var n=arguments[t];if(!i.isString(n))throw new TypeError("Arguments to path.join must be strings");n&&e.push(n)}var a=e.join("\\");return/^[\\\/]{2}[^\\\/]/.test(e[0])||(a=a.replace(/^[\\\/]{2,}/,"\\")),u.normalize(a)},u.relative=function(e,t){e=u.resolve(e),t=u.resolve(t);for(var n=e.toLowerCase(),a=t.toLowerCase(),r=d(t.split("\\")),i=d(n.split("\\")),o=d(a.split("\\")),s=Math.min(i.length,o.length),c=s,l=0;l<s;l++)if(i[l]!==o[l]){c=l;break}if(0==c)return t;var g=[];for(l=c;l<i.length;l++)g.push("..");return(g=g.concat(r.slice(c))).join("\\")},u._makeLong=function(e){if(!i.isString(e))return e;if(!e)return"";var t=u.resolve(e);return/^[a-zA-Z]\:\\/.test(t)?"\\\\?\\"+t:/^\\\\[^?.]/.test(t)?"\\\\?\\UNC\\"+t.substring(2):e},u.dirname=function(e){var t=l(e),n=t[0],a=t[1];return n||a?(a&&(a=a.substr(0,a.length-1)),n+a):"."},u.basename=function(e,t){var n=l(e)[2];return t&&n.substr(-1*t.length)===t&&(n=n.substr(0,n.length-t.length)),n},u.extname=function(e){return l(e)[3]},u.format=function(e){if(!i.isObject(e))throw new TypeError("Parameter 'pathObject' must be an object, not "+typeof e);var t=e.root||"";if(!i.isString(t))throw new TypeError("'pathObject.root' must be a string or undefined, not "+typeof e.root);var n=e.dir,a=e.base||"";return n?n[n.length-1]===u.sep?n+a:n+u.sep+a:a},u.parse=function(e){if(!i.isString(e))throw new TypeError("Parameter 'pathString' must be a string, not "+typeof e);var t=l(e);if(!t||4!==t.length)throw new TypeError("Invalid path '"+e+"'");return{root:t[0],dir:t[0]+t[1].slice(0,-1),base:t[2],ext:t[3],name:t[2].slice(0,t[2].length-t[3].length)}},u.sep="\\",u.delimiter=";";var f=/^(\/?|)([\s\S]*?)((?:\.{1,2}|[^\/]+?|)(\.[^.\/]*|))(?:[\/]*)$/,p={};function m(e){return f.exec(e).slice(1)}p.resolve=function(){for(var e="",t=!1,n=arguments.length-1;n>=-1&&!t;n--){var r=n>=0?arguments[n]:a.cwd();if(!i.isString(r))throw new TypeError("Arguments to path.resolve must be strings");r&&(e=r+"/"+e,t="/"===r[0])}return(t?"/":"")+(e=o(e.split("/"),!t).join("/"))||"."},p.normalize=function(e){var t=p.isAbsolute(e),n=e&&"/"===e[e.length-1];return(e=o(e.split("/"),!t).join("/"))||t||(e="."),e&&n&&(e+="/"),(t?"/":"")+e},p.isAbsolute=function(e){return"/"===e.charAt(0)},p.join=function(){for(var e="",t=0;t<arguments.length;t++){var n=arguments[t];if(!i.isString(n))throw new TypeError("Arguments to path.join must be strings");n&&(e+=e?"/"+n:n)}return p.normalize(e)},p.relative=function(e,t){e=p.resolve(e).substr(1),t=p.resolve(t).substr(1);for(var n=d(e.split("/")),a=d(t.split("/")),r=Math.min(n.length,a.length),i=r,o=0;o<r;o++)if(n[o]!==a[o]){i=o;break}var s=[];for(o=i;o<n.length;o++)s.push("..");return(s=s.concat(a.slice(i))).join("/")},p._makeLong=function(e){return e},p.dirname=function(e){var t=m(e),n=t[0],a=t[1];return n||a?(a&&(a=a.substr(0,a.length-1)),n+a):"."},p.basename=function(e,t){var n=m(e)[2];return t&&n.substr(-1*t.length)===t&&(n=n.substr(0,n.length-t.length)),n},p.extname=function(e){return m(e)[3]},p.format=function(e){if(!i.isObject(e))throw new TypeError("Parameter 'pathObject' must be an object, not "+typeof e);var t=e.root||"";if(!i.isString(t))throw new TypeError("'pathObject.root' must be a string or undefined, not "+typeof e.root);return(e.dir?e.dir+p.sep:"")+(e.base||"")},p.parse=function(e){if(!i.isString(e))throw new TypeError("Parameter 'pathString' must be a string, not "+typeof e);var t=m(e);if(!t||4!==t.length)throw new TypeError("Invalid path '"+e+"'");return t[1]=t[1]||"",t[2]=t[2]||"",t[3]=t[3]||"",{root:t[0],dir:t[0]+t[1].slice(0,-1),base:t[2],ext:t[3],name:t[2].slice(0,t[2].length-t[3].length)}},p.sep="/",p.delimiter=":",e.exports=r?u:p,e.exports.posix=p,e.exports.win32=u},50041:function(e,t,n){t.pbkdf2=n(96394),t.pbkdf2Sync=n(54355)},96394:function(e,t,n){var a,r,i=n(27172).Buffer,o=n(72642),d=n(82703),s=n(54355),c=n(53819),u=n.g.crypto&&n.g.crypto.subtle,l={sha:"SHA-1","sha-1":"SHA-1",sha1:"SHA-1",sha256:"SHA-256","sha-256":"SHA-256",sha384:"SHA-384","sha-384":"SHA-384","sha-512":"SHA-512",sha512:"SHA-512"},g=[];function h(){return r||(r=n.g.process&&n.g.process.nextTick?n.g.process.nextTick:n.g.queueMicrotask?n.g.queueMicrotask:n.g.setImmediate?n.g.setImmediate:n.g.setTimeout)}function f(e,t,n,a,r){return u.importKey("raw",e,{name:"PBKDF2"},!1,["deriveBits"]).then((function(e){return u.deriveBits({name:"PBKDF2",salt:t,iterations:n,hash:{name:r}},e,a<<3)})).then((function(e){return i.from(e)}))}e.exports=function(e,t,r,p,m,R){"function"==typeof m&&(R=m,m=void 0);var b=l[(m=m||"sha1").toLowerCase()];if(b&&"function"==typeof n.g.Promise){if(o(r,p),e=c(e,d,"Password"),t=c(t,d,"Salt"),"function"!=typeof R)throw new Error("No callback provided to pbkdf2");!function(e,t){e.then((function(e){h()((function(){t(null,e)}))}),(function(e){h()((function(){t(e)}))}))}(function(e){if(n.g.process&&!n.g.process.browser)return Promise.resolve(!1);if(!u||!u.importKey||!u.deriveBits)return Promise.resolve(!1);if(void 0!==g[e])return g[e];var t=f(a=a||i.alloc(8),a,10,128,e).then((function(){return!0})).catch((function(){return!1}));return g[e]=t,t}(b).then((function(n){return n?f(e,t,r,p,b):s(e,t,r,p,m)})),R)}else h()((function(){var n;try{n=s(e,t,r,p,m)}catch(a){return R(a)}R(null,n)}))}},82703:function(e,t,n){var a,r=n(27061);if(n.g.process&&n.g.process.browser)a="utf-8";else if(n.g.process&&n.g.process.version){a=parseInt(r.version.split(".")[0].slice(1),10)>=6?"utf-8":"binary"}else a="utf-8";e.exports=a},72642:function(e){var t=Math.pow(2,30)-1;e.exports=function(e,n){if("number"!=typeof e)throw new TypeError("Iterations not a number");if(e<0)throw new TypeError("Bad iterations");if("number"!=typeof n)throw new TypeError("Key length not a number");if(n<0||n>t||n!=n)throw new TypeError("Bad key length")}},54355:function(e,t,n){var a=n(37401),r=n(86558),i=n(54458),o=n(27172).Buffer,d=n(72642),s=n(82703),c=n(53819),u=o.alloc(128),l={md5:16,sha1:20,sha224:28,sha256:32,sha384:48,sha512:64,rmd160:20,ripemd160:20};function g(e,t,n){var d=function(e){function t(t){return i(e).update(t).digest()}function n(e){return(new r).update(e).digest()}return"rmd160"===e||"ripemd160"===e?n:"md5"===e?a:t}(e),s="sha512"===e||"sha384"===e?128:64;t.length>s?t=d(t):t.length<s&&(t=o.concat([t,u],s));for(var c=o.allocUnsafe(s+l[e]),g=o.allocUnsafe(s+l[e]),h=0;h<s;h++)c[h]=54^t[h],g[h]=92^t[h];var f=o.allocUnsafe(s+n+4);c.copy(f,0,0,s),this.ipad1=f,this.ipad2=c,this.opad=g,this.alg=e,this.blocksize=s,this.hash=d,this.size=l[e]}g.prototype.run=function(e,t){return e.copy(t,this.blocksize),this.hash(t).copy(this.opad,this.blocksize),this.hash(this.opad)},e.exports=function(e,t,n,a,r){d(n,a);var i=new g(r=r||"sha1",e=c(e,s,"Password"),(t=c(t,s,"Salt")).length),u=o.allocUnsafe(a),h=o.allocUnsafe(t.length+4);t.copy(h,0,0,t.length);for(var f=0,p=l[r],m=Math.ceil(a/p),R=1;R<=m;R++){h.writeUInt32BE(R,t.length);for(var b=i.run(h,i.ipad1),y=b,v=1;v<n;v++){y=i.run(y,i.ipad2);for(var _=0;_<p;_++)b[_]^=y[_]}b.copy(u,f),f+=p}return u}},53819:function(e,t,n){var a=n(27172).Buffer;e.exports=function(e,t,n){if(a.isBuffer(e))return e;if("string"==typeof e)return a.from(e,t);if(ArrayBuffer.isView(e))return a.from(e.buffer);throw new TypeError(n+" must be a string, a Buffer, a typed array or a DataView")}},80686:function(e){var t=String,n=function(){return{isColorSupported:!1,reset:t,bold:t,dim:t,italic:t,underline:t,inverse:t,hidden:t,strikethrough:t,black:t,red:t,green:t,yellow:t,blue:t,magenta:t,cyan:t,white:t,gray:t,bgBlack:t,bgRed:t,bgGreen:t,bgYellow:t,bgBlue:t,bgMagenta:t,bgCyan:t,bgWhite:t}};e.exports=n(),e.exports.createColors=n},49956:function(e,t,n){"use strict";let a=n(52531);class r extends a{constructor(e){super(e),this.type="atrule"}append(...e){return this.proxyOf.nodes||(this.nodes=[]),super.append(...e)}prepend(...e){return this.proxyOf.nodes||(this.nodes=[]),super.prepend(...e)}}e.exports=r,r.default=r,a.registerAtRule(r)},18321:function(e,t,n){"use strict";let a=n(7067);class r extends a{constructor(e){super(e),this.type="comment"}}e.exports=r,r.default=r},52531:function(e,t,n){"use strict";let a,r,i,o,{isClean:d,my:s}=n(32899),c=n(49560),u=n(18321),l=n(7067);function g(e){return e.map((e=>(e.nodes&&(e.nodes=g(e.nodes)),delete e.source,e)))}function h(e){if(e[d]=!1,e.proxyOf.nodes)for(let t of e.proxyOf.nodes)h(t)}class f extends l{append(...e){for(let t of e){let e=this.normalize(t,this.last);for(let t of e)this.proxyOf.nodes.push(t)}return this.markDirty(),this}cleanRaws(e){if(super.cleanRaws(e),this.nodes)for(let t of this.nodes)t.cleanRaws(e)}each(e){if(!this.proxyOf.nodes)return;let t,n,a=this.getIterator();for(;this.indexes[a]<this.proxyOf.nodes.length&&(t=this.indexes[a],n=e(this.proxyOf.nodes[t],t),!1!==n);)this.indexes[a]+=1;return delete this.indexes[a],n}every(e){return this.nodes.every(e)}get first(){if(this.proxyOf.nodes)return this.proxyOf.nodes[0]}getIterator(){this.lastEach||(this.lastEach=0),this.indexes||(this.indexes={}),this.lastEach+=1;let e=this.lastEach;return this.indexes[e]=0,e}getProxyProcessor(){return{get(e,t){return"proxyOf"===t?e:e[t]?"each"===t||"string"==typeof t&&t.startsWith("walk")?(...n)=>e[t](...n.map((e=>"function"==typeof e?(t,n)=>e(t.toProxy(),n):e))):"every"===t||"some"===t?n=>e[t](((e,...t)=>n(e.toProxy(),...t))):"root"===t?()=>e.root().toProxy():"nodes"===t?e.nodes.map((e=>e.toProxy())):"first"===t||"last"===t?e[t].toProxy():e[t]:e[t]},set(e,t,n){return e[t]===n||(e[t]=n,"name"!==t&&"params"!==t&&"selector"!==t||e.markDirty()),!0}}}index(e){return"number"==typeof e?e:(e.proxyOf&&(e=e.proxyOf),this.proxyOf.nodes.indexOf(e))}insertAfter(e,t){let n,a=this.index(e),r=this.normalize(t,this.proxyOf.nodes[a]).reverse();a=this.index(e);for(let i of r)this.proxyOf.nodes.splice(a+1,0,i);for(let i in this.indexes)n=this.indexes[i],a<n&&(this.indexes[i]=n+r.length);return this.markDirty(),this}insertBefore(e,t){let n,a=this.index(e),r=0===a&&"prepend",i=this.normalize(t,this.proxyOf.nodes[a],r).reverse();a=this.index(e);for(let o of i)this.proxyOf.nodes.splice(a,0,o);for(let o in this.indexes)n=this.indexes[o],a<=n&&(this.indexes[o]=n+i.length);return this.markDirty(),this}get last(){if(this.proxyOf.nodes)return this.proxyOf.nodes[this.proxyOf.nodes.length-1]}normalize(e,t){if("string"==typeof e)e=g(a(e).nodes);else if(Array.isArray(e)){e=e.slice(0);for(let t of e)t.parent&&t.parent.removeChild(t,"ignore")}else if("root"===e.type&&"document"!==this.type){e=e.nodes.slice(0);for(let t of e)t.parent&&t.parent.removeChild(t,"ignore")}else if(e.type)e=[e];else if(e.prop){if(void 0===e.value)throw new Error("Value field is missed in node creation");"string"!=typeof e.value&&(e.value=String(e.value)),e=[new c(e)]}else if(e.selector)e=[new r(e)];else if(e.name)e=[new i(e)];else{if(!e.text)throw new Error("Unknown node type in node creation");e=[new u(e)]}return e.map((e=>(e[s]||f.rebuild(e),(e=e.proxyOf).parent&&e.parent.removeChild(e),e[d]&&h(e),void 0===e.raws.before&&t&&void 0!==t.raws.before&&(e.raws.before=t.raws.before.replace(/\S/g,"")),e.parent=this.proxyOf,e)))}prepend(...e){e=e.reverse();for(let t of e){let e=this.normalize(t,this.first,"prepend").reverse();for(let t of e)this.proxyOf.nodes.unshift(t);for(let t in this.indexes)this.indexes[t]=this.indexes[t]+e.length}return this.markDirty(),this}push(e){return e.parent=this,this.proxyOf.nodes.push(e),this}removeAll(){for(let e of this.proxyOf.nodes)e.parent=void 0;return this.proxyOf.nodes=[],this.markDirty(),this}removeChild(e){let t;e=this.index(e),this.proxyOf.nodes[e].parent=void 0,this.proxyOf.nodes.splice(e,1);for(let n in this.indexes)t=this.indexes[n],t>=e&&(this.indexes[n]=t-1);return this.markDirty(),this}replaceValues(e,t,n){return n||(n=t,t={}),this.walkDecls((a=>{t.props&&!t.props.includes(a.prop)||t.fast&&!a.value.includes(t.fast)||(a.value=a.value.replace(e,n))})),this.markDirty(),this}some(e){return this.nodes.some(e)}walk(e){return this.each(((t,n)=>{let a;try{a=e(t,n)}catch(r){throw t.addToError(r)}return!1!==a&&t.walk&&(a=t.walk(e)),a}))}walkAtRules(e,t){return t?e instanceof RegExp?this.walk(((n,a)=>{if("atrule"===n.type&&e.test(n.name))return t(n,a)})):this.walk(((n,a)=>{if("atrule"===n.type&&n.name===e)return t(n,a)})):(t=e,this.walk(((e,n)=>{if("atrule"===e.type)return t(e,n)})))}walkComments(e){return this.walk(((t,n)=>{if("comment"===t.type)return e(t,n)}))}walkDecls(e,t){return t?e instanceof RegExp?this.walk(((n,a)=>{if("decl"===n.type&&e.test(n.prop))return t(n,a)})):this.walk(((n,a)=>{if("decl"===n.type&&n.prop===e)return t(n,a)})):(t=e,this.walk(((e,n)=>{if("decl"===e.type)return t(e,n)})))}walkRules(e,t){return t?e instanceof RegExp?this.walk(((n,a)=>{if("rule"===n.type&&e.test(n.selector))return t(n,a)})):this.walk(((n,a)=>{if("rule"===n.type&&n.selector===e)return t(n,a)})):(t=e,this.walk(((e,n)=>{if("rule"===e.type)return t(e,n)})))}}f.registerParse=e=>{a=e},f.registerRule=e=>{r=e},f.registerAtRule=e=>{i=e},f.registerRoot=e=>{o=e},e.exports=f,f.default=f,f.rebuild=e=>{"atrule"===e.type?Object.setPrototypeOf(e,i.prototype):"rule"===e.type?Object.setPrototypeOf(e,r.prototype):"decl"===e.type?Object.setPrototypeOf(e,c.prototype):"comment"===e.type?Object.setPrototypeOf(e,u.prototype):"root"===e.type&&Object.setPrototypeOf(e,o.prototype),e[s]=!0,e.nodes&&e.nodes.forEach((e=>{f.rebuild(e)}))}},45723:function(e,t,n){"use strict";let a=n(80686),r=n(25219);class i extends Error{constructor(e,t,n,a,r,o){super(e),this.name="CssSyntaxError",this.reason=e,r&&(this.file=r),a&&(this.source=a),o&&(this.plugin=o),void 0!==t&&void 0!==n&&("number"==typeof t?(this.line=t,this.column=n):(this.line=t.line,this.column=t.column,this.endLine=n.line,this.endColumn=n.column)),this.setMessage(),Error.captureStackTrace&&Error.captureStackTrace(this,i)}setMessage(){this.message=this.plugin?this.plugin+": ":"",this.message+=this.file?this.file:"<css input>",void 0!==this.line&&(this.message+=":"+this.line+":"+this.column),this.message+=": "+this.reason}showSourceCode(e){if(!this.source)return"";let t=this.source;null==e&&(e=a.isColorSupported),r&&e&&(t=r(t));let n,i,o=t.split(/\r?\n/),d=Math.max(this.line-3,0),s=Math.min(this.line+2,o.length),c=String(s).length;if(e){let{bold:e,gray:t,red:r}=a.createColors(!0);n=t=>e(r(t)),i=e=>t(e)}else n=i=e=>e;return o.slice(d,s).map(((e,t)=>{let a=d+1+t,r=" "+(" "+a).slice(-c)+" | ";if(a===this.line){let t=i(r.replace(/\d/g," "))+e.slice(0,this.column-1).replace(/[^\t]/g," ");return n(">")+i(r)+e+"\n "+t+n("^")}return" "+i(r)+e})).join("\n")}toString(){let e=this.showSourceCode();return e&&(e="\n\n"+e+"\n"),this.name+": "+this.message+e}}e.exports=i,i.default=i},49560:function(e,t,n){"use strict";let a=n(7067);class r extends a{constructor(e){e&&void 0!==e.value&&"string"!=typeof e.value&&(e={...e,value:String(e.value)}),super(e),this.type="decl"}get variable(){return this.prop.startsWith("--")||"$"===this.prop[0]}}e.exports=r,r.default=r},80815:function(e,t,n){"use strict";let a,r,i=n(52531);class o extends i{constructor(e){super({type:"document",...e}),this.nodes||(this.nodes=[])}toResult(e={}){return new a(new r,this,e).stringify()}}o.registerLazyResult=e=>{a=e},o.registerProcessor=e=>{r=e},e.exports=o,o.default=o},66027:function(e,t,n){"use strict";let a=n(49560),r=n(53086),i=n(18321),o=n(49956),d=n(48313),s=n(98973),c=n(31854);function u(e,t){if(Array.isArray(e))return e.map((e=>u(e)));let{inputs:n,...l}=e;if(n){t=[];for(let e of n){let n={...e,__proto__:d.prototype};n.map&&(n.map={...n.map,__proto__:r.prototype}),t.push(n)}}if(l.nodes&&(l.nodes=e.nodes.map((e=>u(e,t)))),l.source){let{inputId:e,...n}=l.source;l.source=n,null!=e&&(l.source.input=t[e])}if("root"===l.type)return new s(l);if("decl"===l.type)return new a(l);if("rule"===l.type)return new c(l);if("comment"===l.type)return new i(l);if("atrule"===l.type)return new o(l);throw new Error("Unknown node type: "+e.type)}e.exports=u,u.default=u},48313:function(e,t,n){"use strict";let{SourceMapConsumer:a,SourceMapGenerator:r}=n(61305),{fileURLToPath:i,pathToFileURL:o}=n(16659),{isAbsolute:d,resolve:s}=n(14029),{nanoid:c}=n(88773),u=n(25219),l=n(45723),g=n(53086),h=Symbol("fromOffsetCache"),f=Boolean(a&&r),p=Boolean(s&&d);class m{constructor(e,t={}){if(null==e||"object"==typeof e&&!e.toString)throw new Error(`PostCSS received ${e} instead of CSS string`);if(this.css=e.toString(),"\ufeff"===this.css[0]||"￾"===this.css[0]?(this.hasBOM=!0,this.css=this.css.slice(1)):this.hasBOM=!1,t.from&&(!p||/^\w+:\/\//.test(t.from)||d(t.from)?this.file=t.from:this.file=s(t.from)),p&&f){let e=new g(this.css,t);if(e.text){this.map=e;let t=e.consumer().file;!this.file&&t&&(this.file=this.mapResolve(t))}}this.file||(this.id="<input css "+c(6)+">"),this.map&&(this.map.file=this.from)}error(e,t,n,a={}){let r,i,d;if(t&&"object"==typeof t){let e=t,a=n;if("number"==typeof e.offset){let a=this.fromOffset(e.offset);t=a.line,n=a.col}else t=e.line,n=e.column;if("number"==typeof a.offset){let e=this.fromOffset(a.offset);i=e.line,d=e.col}else i=a.line,d=a.column}else if(!n){let e=this.fromOffset(t);t=e.line,n=e.col}let s=this.origin(t,n,i,d);return r=s?new l(e,void 0===s.endLine?s.line:{column:s.column,line:s.line},void 0===s.endLine?s.column:{column:s.endColumn,line:s.endLine},s.source,s.file,a.plugin):new l(e,void 0===i?t:{column:n,line:t},void 0===i?n:{column:d,line:i},this.css,this.file,a.plugin),r.input={column:n,endColumn:d,endLine:i,line:t,source:this.css},this.file&&(o&&(r.input.url=o(this.file).toString()),r.input.file=this.file),r}get from(){return this.file||this.id}fromOffset(e){let t,n;if(this[h])n=this[h];else{let e=this.css.split("\n");n=new Array(e.length);let t=0;for(let a=0,r=e.length;a<r;a++)n[a]=t,t+=e[a].length+1;this[h]=n}t=n[n.length-1];let a=0;if(e>=t)a=n.length-1;else{let t,r=n.length-2;for(;a<r;)if(t=a+(r-a>>1),e<n[t])r=t-1;else{if(!(e>=n[t+1])){a=t;break}a=t+1}}return{col:e-n[a]+1,line:a+1}}mapResolve(e){return/^\w+:\/\//.test(e)?e:s(this.map.consumer().sourceRoot||this.map.root||".",e)}origin(e,t,n,a){if(!this.map)return!1;let r,s,c=this.map.consumer(),u=c.originalPositionFor({column:t,line:e});if(!u.source)return!1;"number"==typeof n&&(r=c.originalPositionFor({column:a,line:n})),s=d(u.source)?o(u.source):new URL(u.source,this.map.consumer().sourceRoot||o(this.map.mapFile));let l={column:u.column,endColumn:r&&r.column,endLine:r&&r.line,line:u.line,url:s.toString()};if("file:"===s.protocol){if(!i)throw new Error("file: protocol is not available in this PostCSS build");l.file=i(s)}let g=c.sourceContentFor(u.source);return g&&(l.source=g),l}toJSON(){let e={};for(let t of["hasBOM","css","file","id"])null!=this[t]&&(e[t]=this[t]);return this.map&&(e.map={...this.map},e.map.consumerCache&&(e.map.consumerCache=void 0)),e}}e.exports=m,m.default=m,u&&u.registerInput&&u.registerInput(m)},559:function(e,t,n){"use strict";let{isClean:a,my:r}=n(32899),i=n(37157),o=n(4414),d=n(52531),s=n(80815),c=(n(93098),n(57282)),u=n(88561),l=n(98973);const g={atrule:"AtRule",comment:"Comment",decl:"Declaration",document:"Document",root:"Root",rule:"Rule"},h={AtRule:!0,AtRuleExit:!0,Comment:!0,CommentExit:!0,Declaration:!0,DeclarationExit:!0,Document:!0,DocumentExit:!0,Once:!0,OnceExit:!0,postcssPlugin:!0,prepare:!0,Root:!0,RootExit:!0,Rule:!0,RuleExit:!0},f={Once:!0,postcssPlugin:!0,prepare:!0},p=0;function m(e){return"object"==typeof e&&"function"==typeof e.then}function R(e){let t=!1,n=g[e.type];return"decl"===e.type?t=e.prop.toLowerCase():"atrule"===e.type&&(t=e.name.toLowerCase()),t&&e.append?[n,n+"-"+t,p,n+"Exit",n+"Exit-"+t]:t?[n,n+"-"+t,n+"Exit",n+"Exit-"+t]:e.append?[n,p,n+"Exit"]:[n,n+"Exit"]}function b(e){let t;return t="document"===e.type?["Document",p,"DocumentExit"]:"root"===e.type?["Root",p,"RootExit"]:R(e),{eventIndex:0,events:t,iterator:0,node:e,visitorIndex:0,visitors:[]}}function y(e){return e[a]=!1,e.nodes&&e.nodes.forEach((e=>y(e))),e}let v={};class _{constructor(e,t,n){let a;if(this.stringified=!1,this.processed=!1,"object"!=typeof t||null===t||"root"!==t.type&&"document"!==t.type)if(t instanceof _||t instanceof c)a=y(t.root),t.map&&(void 0===n.map&&(n.map={}),n.map.inline||(n.map.inline=!1),n.map.prev=t.map);else{let e=u;n.syntax&&(e=n.syntax.parse),n.parser&&(e=n.parser),e.parse&&(e=e.parse);try{a=e(t,n)}catch(i){this.processed=!0,this.error=i}a&&!a[r]&&d.rebuild(a)}else a=y(t);this.result=new c(e,a,n),this.helpers={...v,postcss:v,result:this.result},this.plugins=this.processor.plugins.map((e=>"object"==typeof e&&e.prepare?{...e,...e.prepare(this.result)}:e))}async(){return this.error?Promise.reject(this.error):this.processed?Promise.resolve(this.result):(this.processing||(this.processing=this.runAsync()),this.processing)}catch(e){return this.async().catch(e)}get content(){return this.stringify().content}get css(){return this.stringify().css}finally(e){return this.async().then(e,e)}getAsyncError(){throw new Error("Use process(css).then(cb) to work with async plugins")}handleError(e,t){let n=this.result.lastPlugin;try{t&&t.addToError(e),this.error=e,"CssSyntaxError"!==e.name||e.plugin?n.postcssVersion:(e.plugin=n.postcssPlugin,e.setMessage())}catch(a){console&&console.error&&console.error(a)}return e}get map(){return this.stringify().map}get messages(){return this.sync().messages}get opts(){return this.result.opts}prepareVisitors(){this.listeners={};let e=(e,t,n)=>{this.listeners[t]||(this.listeners[t]=[]),this.listeners[t].push([e,n])};for(let t of this.plugins)if("object"==typeof t)for(let n in t){if(!h[n]&&/^[A-Z]/.test(n))throw new Error(`Unknown event ${n} in ${t.postcssPlugin}. Try to update PostCSS (${this.processor.version} now).`);if(!f[n])if("object"==typeof t[n])for(let a in t[n])e(t,"*"===a?n:n+"-"+a.toLowerCase(),t[n][a]);else"function"==typeof t[n]&&e(t,n,t[n])}this.hasListener=Object.keys(this.listeners).length>0}get processor(){return this.result.processor}get root(){return this.sync().root}async runAsync(){this.plugin=0;for(let n=0;n<this.plugins.length;n++){let t=this.plugins[n],a=this.runOnRoot(t);if(m(a))try{await a}catch(e){throw this.handleError(e)}}if(this.prepareVisitors(),this.hasListener){let e=this.result.root;for(;!e[a];){e[a]=!0;let n=[b(e)];for(;n.length>0;){let e=this.visitTick(n);if(m(e))try{await e}catch(t){let e=n[n.length-1].node;throw this.handleError(t,e)}}}if(this.listeners.OnceExit)for(let[n,a]of this.listeners.OnceExit){this.result.lastPlugin=n;try{if("document"===e.type){let t=e.nodes.map((e=>a(e,this.helpers)));await Promise.all(t)}else await a(e,this.helpers)}catch(t){throw this.handleError(t)}}}return this.processed=!0,this.stringify()}runOnRoot(e){this.result.lastPlugin=e;try{if("object"==typeof e&&e.Once){if("document"===this.result.root.type){let t=this.result.root.nodes.map((t=>e.Once(t,this.helpers)));return m(t[0])?Promise.all(t):t}return e.Once(this.result.root,this.helpers)}if("function"==typeof e)return e(this.result.root,this.result)}catch(t){throw this.handleError(t)}}stringify(){if(this.error)throw this.error;if(this.stringified)return this.result;this.stringified=!0,this.sync();let e=this.result.opts,t=o;e.syntax&&(t=e.syntax.stringify),e.stringifier&&(t=e.stringifier),t.stringify&&(t=t.stringify);let n=new i(t,this.result.root,this.result.opts).generate();return this.result.css=n[0],this.result.map=n[1],this.result}get[Symbol.toStringTag](){return"LazyResult"}sync(){if(this.error)throw this.error;if(this.processed)return this.result;if(this.processed=!0,this.processing)throw this.getAsyncError();for(let e of this.plugins){if(m(this.runOnRoot(e)))throw this.getAsyncError()}if(this.prepareVisitors(),this.hasListener){let e=this.result.root;for(;!e[a];)e[a]=!0,this.walkSync(e);if(this.listeners.OnceExit)if("document"===e.type)for(let t of e.nodes)this.visitSync(this.listeners.OnceExit,t);else this.visitSync(this.listeners.OnceExit,e)}return this.result}then(e,t){return this.async().then(e,t)}toString(){return this.css}visitSync(e,t){for(let[a,r]of e){let e;this.result.lastPlugin=a;try{e=r(t,this.helpers)}catch(n){throw this.handleError(n,t.proxyOf)}if("root"!==t.type&&"document"!==t.type&&!t.parent)return!0;if(m(e))throw this.getAsyncError()}}visitTick(e){let t=e[e.length-1],{node:n,visitors:r}=t;if("root"!==n.type&&"document"!==n.type&&!n.parent)return void e.pop();if(r.length>0&&t.visitorIndex<r.length){let[e,a]=r[t.visitorIndex];t.visitorIndex+=1,t.visitorIndex===r.length&&(t.visitors=[],t.visitorIndex=0),this.result.lastPlugin=e;try{return a(n.toProxy(),this.helpers)}catch(o){throw this.handleError(o,n)}}if(0!==t.iterator){let r,i=t.iterator;for(;r=n.nodes[n.indexes[i]];)if(n.indexes[i]+=1,!r[a])return r[a]=!0,void e.push(b(r));t.iterator=0,delete n.indexes[i]}let i=t.events;for(;t.eventIndex<i.length;){let e=i[t.eventIndex];if(t.eventIndex+=1,e===p)return void(n.nodes&&n.nodes.length&&(n[a]=!0,t.iterator=n.getIterator()));if(this.listeners[e])return void(t.visitors=this.listeners[e])}e.pop()}walkSync(e){e[a]=!0;let t=R(e);for(let n of t)if(n===p)e.nodes&&e.each((e=>{e[a]||this.walkSync(e)}));else{let t=this.listeners[n];if(t&&this.visitSync(t,e.toProxy()))return}}warnings(){return this.sync().warnings()}}_.registerPostcss=e=>{v=e},e.exports=_,_.default=_,l.registerLazyResult(_),s.registerLazyResult(_)},84436:function(e){"use strict";let t={comma(e){return t.split(e,[","],!0)},space(e){return t.split(e,[" ","\n","\t"])},split(e,t,n){let a=[],r="",i=!1,o=0,d=!1,s="",c=!1;for(let u of e)c?c=!1:"\\"===u?c=!0:d?u===s&&(d=!1):'"'===u||"'"===u?(d=!0,s=u):"("===u?o+=1:")"===u?o>0&&(o-=1):0===o&&t.includes(u)&&(i=!0),i?(""!==r&&a.push(r.trim()),r="",i=!1):r+=u;return(n||""!==r)&&a.push(r.trim()),a}};e.exports=t,t.default=t},37157:function(e,t,n){"use strict";let{SourceMapConsumer:a,SourceMapGenerator:r}=n(61305),{dirname:i,relative:o,resolve:d,sep:s}=n(14029),{pathToFileURL:c}=n(16659),u=n(48313),l=Boolean(a&&r),g=Boolean(i&&d&&o&&s);e.exports=class{constructor(e,t,n,a){this.stringify=e,this.mapOpts=n.map||{},this.root=t,this.opts=n,this.css=a,this.usesFileUrls=!this.mapOpts.from&&this.mapOpts.absolute}addAnnotation(){let e;e=this.isInline()?"data:application/json;base64,"+this.toBase64(this.map.toString()):"string"==typeof this.mapOpts.annotation?this.mapOpts.annotation:"function"==typeof this.mapOpts.annotation?this.mapOpts.annotation(this.opts.to,this.root):this.outputFile()+".map";let t="\n";this.css.includes("\r\n")&&(t="\r\n"),this.css+=t+"/*# sourceMappingURL="+e+" */"}applyPrevMaps(){for(let e of this.previous()){let t,n=this.toUrl(this.path(e.file)),r=e.root||i(e.file);!1===this.mapOpts.sourcesContent?(t=new a(e.text),t.sourcesContent&&(t.sourcesContent=t.sourcesContent.map((()=>null)))):t=e.consumer(),this.map.applySourceMap(t,n,this.toUrl(this.path(r)))}}clearAnnotation(){if(!1!==this.mapOpts.annotation)if(this.root){let e;for(let t=this.root.nodes.length-1;t>=0;t--)e=this.root.nodes[t],"comment"===e.type&&0===e.text.indexOf("# sourceMappingURL=")&&this.root.removeChild(t)}else this.css&&(this.css=this.css.replace(/(\n)?\/\*#[\S\s]*?\*\/$/gm,""))}generate(){if(this.clearAnnotation(),g&&l&&this.isMap())return this.generateMap();{let e="";return this.stringify(this.root,(t=>{e+=t})),[e]}}generateMap(){if(this.root)this.generateString();else if(1===this.previous().length){let e=this.previous()[0].consumer();e.file=this.outputFile(),this.map=r.fromSourceMap(e)}else this.map=new r({file:this.outputFile()}),this.map.addMapping({generated:{column:0,line:1},original:{column:0,line:1},source:this.opts.from?this.toUrl(this.path(this.opts.from)):"<no source>"});return this.isSourcesContent()&&this.setSourcesContent(),this.root&&this.previous().length>0&&this.applyPrevMaps(),this.isAnnotation()&&this.addAnnotation(),this.isInline()?[this.css]:[this.css,this.map]}generateString(){this.css="",this.map=new r({file:this.outputFile()});let e,t,n=1,a=1,i="<no source>",o={generated:{column:0,line:0},original:{column:0,line:0},source:""};this.stringify(this.root,((r,d,s)=>{if(this.css+=r,d&&"end"!==s&&(o.generated.line=n,o.generated.column=a-1,d.source&&d.source.start?(o.source=this.sourcePath(d),o.original.line=d.source.start.line,o.original.column=d.source.start.column-1,this.map.addMapping(o)):(o.source=i,o.original.line=1,o.original.column=0,this.map.addMapping(o))),e=r.match(/\n/g),e?(n+=e.length,t=r.lastIndexOf("\n"),a=r.length-t):a+=r.length,d&&"start"!==s){let e=d.parent||{raws:{}};("decl"===d.type||"atrule"===d.type&&!d.nodes)&&d===e.last&&!e.raws.semicolon||(d.source&&d.source.end?(o.source=this.sourcePath(d),o.original.line=d.source.end.line,o.original.column=d.source.end.column-1,o.generated.line=n,o.generated.column=a-2,this.map.addMapping(o)):(o.source=i,o.original.line=1,o.original.column=0,o.generated.line=n,o.generated.column=a-1,this.map.addMapping(o)))}}))}isAnnotation(){return!!this.isInline()||(void 0!==this.mapOpts.annotation?this.mapOpts.annotation:!this.previous().length||this.previous().some((e=>e.annotation)))}isInline(){if(void 0!==this.mapOpts.inline)return this.mapOpts.inline;let e=this.mapOpts.annotation;return(void 0===e||!0===e)&&(!this.previous().length||this.previous().some((e=>e.inline)))}isMap(){return void 0!==this.opts.map?!!this.opts.map:this.previous().length>0}isSourcesContent(){return void 0!==this.mapOpts.sourcesContent?this.mapOpts.sourcesContent:!this.previous().length||this.previous().some((e=>e.withContent()))}outputFile(){return this.opts.to?this.path(this.opts.to):this.opts.from?this.path(this.opts.from):"to.css"}path(e){if(0===e.indexOf("<"))return e;if(/^\w+:\/\//.test(e))return e;if(this.mapOpts.absolute)return e;let t=this.opts.to?i(this.opts.to):".";return"string"==typeof this.mapOpts.annotation&&(t=i(d(t,this.mapOpts.annotation))),e=o(t,e)}previous(){if(!this.previousMaps)if(this.previousMaps=[],this.root)this.root.walk((e=>{if(e.source&&e.source.input.map){let t=e.source.input.map;this.previousMaps.includes(t)||this.previousMaps.push(t)}}));else{let e=new u(this.css,this.opts);e.map&&this.previousMaps.push(e.map)}return this.previousMaps}setSourcesContent(){let e={};if(this.root)this.root.walk((t=>{if(t.source){let n=t.source.input.from;if(n&&!e[n]){e[n]=!0;let a=this.usesFileUrls?this.toFileUrl(n):this.toUrl(this.path(n));this.map.setSourceContent(a,t.source.input.css)}}}));else if(this.css){let e=this.opts.from?this.toUrl(this.path(this.opts.from)):"<no source>";this.map.setSourceContent(e,this.css)}}sourcePath(e){return this.mapOpts.from?this.toUrl(this.mapOpts.from):this.usesFileUrls?this.toFileUrl(e.source.input.from):this.toUrl(this.path(e.source.input.from))}toBase64(e){return Buffer?Buffer.from(e).toString("base64"):window.btoa(unescape(encodeURIComponent(e)))}toFileUrl(e){if(c)return c(e).toString();throw new Error("`map.absolute` option is not available in this PostCSS build")}toUrl(e){return"\\"===s&&(e=e.replace(/\\/g,"/")),encodeURI(e).replace(/[#?]/g,encodeURIComponent)}}},83614:function(e,t,n){"use strict";let a=n(37157),r=n(4414),i=(n(93098),n(88561));const o=n(57282);class d{constructor(e,t,n){let i;t=t.toString(),this.stringified=!1,this._processor=e,this._css=t,this._opts=n,this._map=void 0;let d=r;this.result=new o(this._processor,i,this._opts),this.result.css=t;let s=this;Object.defineProperty(this.result,"root",{get(){return s.root}});let c=new a(d,i,this._opts,t);if(c.isMap()){let[e,t]=c.generate();e&&(this.result.css=e),t&&(this.result.map=t)}}async(){return this.error?Promise.reject(this.error):Promise.resolve(this.result)}catch(e){return this.async().catch(e)}get content(){return this.result.css}get css(){return this.result.css}finally(e){return this.async().then(e,e)}get map(){return this.result.map}get messages(){return[]}get opts(){return this.result.opts}get processor(){return this.result.processor}get root(){if(this._root)return this._root;let e,t=i;try{e=t(this._css,this._opts)}catch(n){this.error=n}if(this.error)throw this.error;return this._root=e,e}get[Symbol.toStringTag](){return"NoWorkResult"}sync(){if(this.error)throw this.error;return this.result}then(e,t){return this.async().then(e,t)}toString(){return this._css}warnings(){return[]}}e.exports=d,d.default=d},7067:function(e,t,n){"use strict";let{isClean:a,my:r}=n(32899),i=n(45723),o=n(49101),d=n(4414);function s(e,t){let n=new e.constructor;for(let a in e){if(!Object.prototype.hasOwnProperty.call(e,a))continue;if("proxyCache"===a)continue;let r=e[a],i=typeof r;"parent"===a&&"object"===i?t&&(n[a]=t):"source"===a?n[a]=r:Array.isArray(r)?n[a]=r.map((e=>s(e,n))):("object"===i&&null!==r&&(r=s(r)),n[a]=r)}return n}class c{constructor(e={}){this.raws={},this[a]=!1,this[r]=!0;for(let t in e)if("nodes"===t){this.nodes=[];for(let n of e[t])"function"==typeof n.clone?this.append(n.clone()):this.append(n)}else this[t]=e[t]}addToError(e){if(e.postcssNode=this,e.stack&&this.source&&/\n\s{4}at /.test(e.stack)){let t=this.source;e.stack=e.stack.replace(/\n\s{4}at /,`$&${t.input.from}:${t.start.line}:${t.start.column}$&`)}return e}after(e){return this.parent.insertAfter(this,e),this}assign(e={}){for(let t in e)this[t]=e[t];return this}before(e){return this.parent.insertBefore(this,e),this}cleanRaws(e){delete this.raws.before,delete this.raws.after,e||delete this.raws.between}clone(e={}){let t=s(this);for(let n in e)t[n]=e[n];return t}cloneAfter(e={}){let t=this.clone(e);return this.parent.insertAfter(this,t),t}cloneBefore(e={}){let t=this.clone(e);return this.parent.insertBefore(this,t),t}error(e,t={}){if(this.source){let{end:n,start:a}=this.rangeBy(t);return this.source.input.error(e,{column:a.column,line:a.line},{column:n.column,line:n.line},t)}return new i(e)}getProxyProcessor(){return{get(e,t){return"proxyOf"===t?e:"root"===t?()=>e.root().toProxy():e[t]},set(e,t,n){return e[t]===n||(e[t]=n,"prop"!==t&&"value"!==t&&"name"!==t&&"params"!==t&&"important"!==t&&"text"!==t||e.markDirty()),!0}}}markDirty(){if(this[a]){this[a]=!1;let e=this;for(;e=e.parent;)e[a]=!1}}next(){if(!this.parent)return;let e=this.parent.index(this);return this.parent.nodes[e+1]}positionBy(e,t){let n=this.source.start;if(e.index)n=this.positionInside(e.index,t);else if(e.word){let a=(t=this.toString()).indexOf(e.word);-1!==a&&(n=this.positionInside(a,t))}return n}positionInside(e,t){let n=t||this.toString(),a=this.source.start.column,r=this.source.start.line;for(let i=0;i<e;i++)"\n"===n[i]?(a=1,r+=1):a+=1;return{column:a,line:r}}prev(){if(!this.parent)return;let e=this.parent.index(this);return this.parent.nodes[e-1]}get proxyOf(){return this}rangeBy(e){let t={column:this.source.start.column,line:this.source.start.line},n=this.source.end?{column:this.source.end.column+1,line:this.source.end.line}:{column:t.column+1,line:t.line};if(e.word){let a=this.toString(),r=a.indexOf(e.word);-1!==r&&(t=this.positionInside(r,a),n=this.positionInside(r+e.word.length,a))}else e.start?t={column:e.start.column,line:e.start.line}:e.index&&(t=this.positionInside(e.index)),e.end?n={column:e.end.column,line:e.end.line}:e.endIndex?n=this.positionInside(e.endIndex):e.index&&(n=this.positionInside(e.index+1));return(n.line<t.line||n.line===t.line&&n.column<=t.column)&&(n={column:t.column+1,line:t.line}),{end:n,start:t}}raw(e,t){return(new o).raw(this,e,t)}remove(){return this.parent&&this.parent.removeChild(this),this.parent=void 0,this}replaceWith(...e){if(this.parent){let t=this,n=!1;for(let a of e)a===this?n=!0:n?(this.parent.insertAfter(t,a),t=a):this.parent.insertBefore(t,a);n||this.remove()}return this}root(){let e=this;for(;e.parent&&"document"!==e.parent.type;)e=e.parent;return e}toJSON(e,t){let n={},a=null==t;t=t||new Map;let r=0;for(let i in this){if(!Object.prototype.hasOwnProperty.call(this,i))continue;if("parent"===i||"proxyCache"===i)continue;let e=this[i];if(Array.isArray(e))n[i]=e.map((e=>"object"==typeof e&&e.toJSON?e.toJSON(null,t):e));else if("object"==typeof e&&e.toJSON)n[i]=e.toJSON(null,t);else if("source"===i){let a=t.get(e.input);null==a&&(a=r,t.set(e.input,r),r++),n[i]={end:e.end,inputId:a,start:e.start}}else n[i]=e}return a&&(n.inputs=[...t.keys()].map((e=>e.toJSON()))),n}toProxy(){return this.proxyCache||(this.proxyCache=new Proxy(this,this.getProxyProcessor())),this.proxyCache}toString(e=d){e.stringify&&(e=e.stringify);let t="";return e(this,(e=>{t+=e})),t}warn(e,t,n){let a={node:this};for(let r in n)a[r]=n[r];return e.warn(t,a)}}e.exports=c,c.default=c},88561:function(e,t,n){"use strict";let a=n(52531),r=n(88935),i=n(48313);function o(e,t){let n=new i(e,t),a=new r(n);try{a.parse()}catch(o){throw o}return a.root}e.exports=o,o.default=o,a.registerParse(o)},88935:function(e,t,n){"use strict";let a=n(49560),r=n(62132),i=n(18321),o=n(49956),d=n(98973),s=n(31854);const c={empty:!0,space:!0};e.exports=class{constructor(e){this.input=e,this.root=new d,this.current=this.root,this.spaces="",this.semicolon=!1,this.customProperty=!1,this.createTokenizer(),this.root.source={input:e,start:{column:1,line:1,offset:0}}}atrule(e){let t,n,a,r=new o;r.name=e[1].slice(1),""===r.name&&this.unnamedAtrule(r,e),this.init(r,e[2]);let i=!1,d=!1,s=[],c=[];for(;!this.tokenizer.endOfFile();){if(t=(e=this.tokenizer.nextToken())[0],"("===t||"["===t?c.push("("===t?")":"]"):"{"===t&&c.length>0?c.push("}"):t===c[c.length-1]&&c.pop(),0===c.length){if(";"===t){r.source.end=this.getPosition(e[2]),this.semicolon=!0;break}if("{"===t){d=!0;break}if("}"===t){if(s.length>0){for(a=s.length-1,n=s[a];n&&"space"===n[0];)n=s[--a];n&&(r.source.end=this.getPosition(n[3]||n[2]))}this.end(e);break}s.push(e)}else s.push(e);if(this.tokenizer.endOfFile()){i=!0;break}}r.raws.between=this.spacesAndCommentsFromEnd(s),s.length?(r.raws.afterName=this.spacesAndCommentsFromStart(s),this.raw(r,"params",s),i&&(e=s[s.length-1],r.source.end=this.getPosition(e[3]||e[2]),this.spaces=r.raws.between,r.raws.between="")):(r.raws.afterName="",r.params=""),d&&(r.nodes=[],this.current=r)}checkMissedSemicolon(e){let t=this.colon(e);if(!1===t)return;let n,a=0;for(let r=t-1;r>=0&&(n=e[r],"space"===n[0]||(a+=1,2!==a));r--);throw this.input.error("Missed semicolon","word"===n[0]?n[3]+1:n[2])}colon(e){let t,n,a,r=0;for(let[i,o]of e.entries()){if(t=o,n=t[0],"("===n&&(r+=1),")"===n&&(r-=1),0===r&&":"===n){if(a){if("word"===a[0]&&"progid"===a[1])continue;return i}this.doubleColon(t)}a=t}return!1}comment(e){let t=new i;this.init(t,e[2]),t.source.end=this.getPosition(e[3]||e[2]);let n=e[1].slice(2,-2);if(/^\s*$/.test(n))t.text="",t.raws.left=n,t.raws.right="";else{let e=n.match(/^(\s*)([^]*\S)(\s*)$/);t.text=e[2],t.raws.left=e[1],t.raws.right=e[3]}}createTokenizer(){this.tokenizer=r(this.input)}decl(e,t){let n=new a;this.init(n,e[0][2]);let r,i=e[e.length-1];for(";"===i[0]&&(this.semicolon=!0,e.pop()),n.source.end=this.getPosition(i[3]||i[2]||function(e){for(let t=e.length-1;t>=0;t--){let n=e[t],a=n[3]||n[2];if(a)return a}}(e));"word"!==e[0][0];)1===e.length&&this.unknownWord(e),n.raws.before+=e.shift()[1];for(n.source.start=this.getPosition(e[0][2]),n.prop="";e.length;){let t=e[0][0];if(":"===t||"space"===t||"comment"===t)break;n.prop+=e.shift()[1]}for(n.raws.between="";e.length;){if(r=e.shift(),":"===r[0]){n.raws.between+=r[1];break}"word"===r[0]&&/\w/.test(r[1])&&this.unknownWord([r]),n.raws.between+=r[1]}"_"!==n.prop[0]&&"*"!==n.prop[0]||(n.raws.before+=n.prop[0],n.prop=n.prop.slice(1));let o,d=[];for(;e.length&&(o=e[0][0],"space"===o||"comment"===o);)d.push(e.shift());this.precheckMissedSemicolon(e);for(let a=e.length-1;a>=0;a--){if(r=e[a],"!important"===r[1].toLowerCase()){n.important=!0;let t=this.stringFrom(e,a);t=this.spacesFromEnd(e)+t," !important"!==t&&(n.raws.important=t);break}if("important"===r[1].toLowerCase()){let t=e.slice(0),r="";for(let e=a;e>0;e--){let n=t[e][0];if(0===r.trim().indexOf("!")&&"space"!==n)break;r=t.pop()[1]+r}0===r.trim().indexOf("!")&&(n.important=!0,n.raws.important=r,e=t)}if("space"!==r[0]&&"comment"!==r[0])break}e.some((e=>"space"!==e[0]&&"comment"!==e[0]))&&(n.raws.between+=d.map((e=>e[1])).join(""),d=[]),this.raw(n,"value",d.concat(e),t),n.value.includes(":")&&!t&&this.checkMissedSemicolon(e)}doubleColon(e){throw this.input.error("Double colon",{offset:e[2]},{offset:e[2]+e[1].length})}emptyRule(e){let t=new s;this.init(t,e[2]),t.selector="",t.raws.between="",this.current=t}end(e){this.current.nodes&&this.current.nodes.length&&(this.current.raws.semicolon=this.semicolon),this.semicolon=!1,this.current.raws.after=(this.current.raws.after||"")+this.spaces,this.spaces="",this.current.parent?(this.current.source.end=this.getPosition(e[2]),this.current=this.current.parent):this.unexpectedClose(e)}endFile(){this.current.parent&&this.unclosedBlock(),this.current.nodes&&this.current.nodes.length&&(this.current.raws.semicolon=this.semicolon),this.current.raws.after=(this.current.raws.after||"")+this.spaces}freeSemicolon(e){if(this.spaces+=e[1],this.current.nodes){let e=this.current.nodes[this.current.nodes.length-1];e&&"rule"===e.type&&!e.raws.ownSemicolon&&(e.raws.ownSemicolon=this.spaces,this.spaces="")}}getPosition(e){let t=this.input.fromOffset(e);return{column:t.col,line:t.line,offset:e}}init(e,t){this.current.push(e),e.source={input:this.input,start:this.getPosition(t)},e.raws.before=this.spaces,this.spaces="","comment"!==e.type&&(this.semicolon=!1)}other(e){let t=!1,n=null,a=!1,r=null,i=[],o=e[1].startsWith("--"),d=[],s=e;for(;s;){if(n=s[0],d.push(s),"("===n||"["===n)r||(r=s),i.push("("===n?")":"]");else if(o&&a&&"{"===n)r||(r=s),i.push("}");else if(0===i.length){if(";"===n){if(a)return void this.decl(d,o);break}if("{"===n)return void this.rule(d);if("}"===n){this.tokenizer.back(d.pop()),t=!0;break}":"===n&&(a=!0)}else n===i[i.length-1]&&(i.pop(),0===i.length&&(r=null));s=this.tokenizer.nextToken()}if(this.tokenizer.endOfFile()&&(t=!0),i.length>0&&this.unclosedBracket(r),t&&a){if(!o)for(;d.length&&(s=d[d.length-1][0],"space"===s||"comment"===s);)this.tokenizer.back(d.pop());this.decl(d,o)}else this.unknownWord(d)}parse(){let e;for(;!this.tokenizer.endOfFile();)switch(e=this.tokenizer.nextToken(),e[0]){case"space":this.spaces+=e[1];break;case";":this.freeSemicolon(e);break;case"}":this.end(e);break;case"comment":this.comment(e);break;case"at-word":this.atrule(e);break;case"{":this.emptyRule(e);break;default:this.other(e)}this.endFile()}precheckMissedSemicolon(){}raw(e,t,n,a){let r,i,o,d,s=n.length,u="",l=!0;for(let g=0;g<s;g+=1)r=n[g],i=r[0],"space"!==i||g!==s-1||a?"comment"===i?(d=n[g-1]?n[g-1][0]:"empty",o=n[g+1]?n[g+1][0]:"empty",c[d]||c[o]||","===u.slice(-1)?l=!1:u+=r[1]):u+=r[1]:l=!1;if(!l){let a=n.reduce(((e,t)=>e+t[1]),"");e.raws[t]={raw:a,value:u}}e[t]=u}rule(e){e.pop();let t=new s;this.init(t,e[0][2]),t.raws.between=this.spacesAndCommentsFromEnd(e),this.raw(t,"selector",e),this.current=t}spacesAndCommentsFromEnd(e){let t,n="";for(;e.length&&(t=e[e.length-1][0],"space"===t||"comment"===t);)n=e.pop()[1]+n;return n}spacesAndCommentsFromStart(e){let t,n="";for(;e.length&&(t=e[0][0],"space"===t||"comment"===t);)n+=e.shift()[1];return n}spacesFromEnd(e){let t,n="";for(;e.length&&(t=e[e.length-1][0],"space"===t);)n=e.pop()[1]+n;return n}stringFrom(e,t){let n="";for(let a=t;a<e.length;a++)n+=e[a][1];return e.splice(t,e.length-t),n}unclosedBlock(){let e=this.current.source.start;throw this.input.error("Unclosed block",e.line,e.column)}unclosedBracket(e){throw this.input.error("Unclosed bracket",{offset:e[2]},{offset:e[2]+1})}unexpectedClose(e){throw this.input.error("Unexpected }",{offset:e[2]},{offset:e[2]+1})}unknownWord(e){throw this.input.error("Unknown word",{offset:e[0][2]},{offset:e[0][2]+e[0][1].length})}unnamedAtrule(e,t){throw this.input.error("At-rule without name",{offset:t[2]},{offset:t[2]+t[1].length})}}},51722:function(e,t,n){"use strict";let a=n(45723),r=n(49560),i=n(559),o=n(52531),d=n(37231),s=n(4414),c=n(66027),u=n(80815),l=n(90846),g=n(18321),h=n(49956),f=n(57282),p=n(48313),m=n(88561),R=n(84436),b=n(31854),y=n(98973),v=n(7067);function _(...e){return 1===e.length&&Array.isArray(e[0])&&(e=e[0]),new d(e)}_.plugin=function(e,t){let n,a=!1;function r(...n){console&&console.warn&&!a&&(a=!0,console.warn(e+": postcss.plugin was deprecated. Migration guide:\nhttps://evilmartians.com/chronicles/postcss-8-plugin-migration"),{}.LANG&&{}.LANG.startsWith("cn")&&console.warn(e+": 里面 postcss.plugin 被弃用. 迁移指南:\nhttps://www.w3ctech.com/topic/2226"));let r=t(...n);return r.postcssPlugin=e,r.postcssVersion=(new d).version,r}return Object.defineProperty(r,"postcss",{get(){return n||(n=r()),n}}),r.process=function(e,t,n){return _([r(n)]).process(e,t)},r},_.stringify=s,_.parse=m,_.fromJSON=c,_.list=R,_.comment=e=>new g(e),_.atRule=e=>new h(e),_.decl=e=>new r(e),_.rule=e=>new b(e),_.root=e=>new y(e),_.document=e=>new u(e),_.CssSyntaxError=a,_.Declaration=r,_.Container=o,_.Processor=d,_.Document=u,_.Comment=g,_.Warning=l,_.AtRule=h,_.Result=f,_.Input=p,_.Rule=b,_.Root=y,_.Node=v,i.registerPostcss(_),e.exports=_,_.default=_},53086:function(e,t,n){"use strict";let{SourceMapConsumer:a,SourceMapGenerator:r}=n(61305),{existsSync:i,readFileSync:o}=n(54849),{dirname:d,join:s}=n(14029);class c{constructor(e,t){if(!1===t.map)return;this.loadAnnotation(e),this.inline=this.startWith(this.annotation,"data:");let n=t.map?t.map.prev:void 0,a=this.loadMap(t.from,n);!this.mapFile&&t.from&&(this.mapFile=t.from),this.mapFile&&(this.root=d(this.mapFile)),a&&(this.text=a)}consumer(){return this.consumerCache||(this.consumerCache=new a(this.text)),this.consumerCache}decodeInline(e){if(/^data:application\/json;charset=utf-?8,/.test(e)||/^data:application\/json,/.test(e))return decodeURIComponent(e.substr(RegExp.lastMatch.length));if(/^data:application\/json;charset=utf-?8;base64,/.test(e)||/^data:application\/json;base64,/.test(e))return t=e.substr(RegExp.lastMatch.length),Buffer?Buffer.from(t,"base64").toString():window.atob(t);var t;let n=e.match(/data:application\/json;([^,]+),/)[1];throw new Error("Unsupported source map encoding "+n)}getAnnotationURL(e){return e.replace(/^\/\*\s*# sourceMappingURL=/,"").trim()}isMap(e){return"object"==typeof e&&("string"==typeof e.mappings||"string"==typeof e._mappings||Array.isArray(e.sections))}loadAnnotation(e){let t=e.match(/\/\*\s*# sourceMappingURL=/gm);if(!t)return;let n=e.lastIndexOf(t.pop()),a=e.indexOf("*/",n);n>-1&&a>-1&&(this.annotation=this.getAnnotationURL(e.substring(n,a)))}loadFile(e){if(this.root=d(e),i(e))return this.mapFile=e,o(e,"utf-8").toString().trim()}loadMap(e,t){if(!1===t)return!1;if(t){if("string"==typeof t)return t;if("function"!=typeof t){if(t instanceof a)return r.fromSourceMap(t).toString();if(t instanceof r)return t.toString();if(this.isMap(t))return JSON.stringify(t);throw new Error("Unsupported previous source map format: "+t.toString())}{let n=t(e);if(n){let e=this.loadFile(n);if(!e)throw new Error("Unable to load previous source map: "+n.toString());return e}}}else{if(this.inline)return this.decodeInline(this.annotation);if(this.annotation){let t=this.annotation;return e&&(t=s(d(e),t)),this.loadFile(t)}}}startWith(e,t){return!!e&&e.substr(0,t.length)===t}withContent(){return!!(this.consumer().sourcesContent&&this.consumer().sourcesContent.length>0)}}e.exports=c,c.default=c},37231:function(e,t,n){"use strict";let a=n(83614),r=n(559),i=n(80815),o=n(98973);class d{constructor(e=[]){this.version="8.4.27",this.plugins=this.normalize(e)}normalize(e){let t=[];for(let n of e)if(!0===n.postcss?n=n():n.postcss&&(n=n.postcss),"object"==typeof n&&Array.isArray(n.plugins))t=t.concat(n.plugins);else if("object"==typeof n&&n.postcssPlugin)t.push(n);else if("function"==typeof n)t.push(n);else{if("object"!=typeof n||!n.parse&&!n.stringify)throw new Error(n+" is not a PostCSS plugin")}return t}process(e,t={}){return 0===this.plugins.length&&void 0===t.parser&&void 0===t.stringifier&&void 0===t.syntax?new a(this,e,t):new r(this,e,t)}use(e){return this.plugins=this.plugins.concat(this.normalize([e])),this}}e.exports=d,d.default=d,o.registerProcessor(d),i.registerProcessor(d)},57282:function(e,t,n){"use strict";let a=n(90846);class r{constructor(e,t,n){this.processor=e,this.messages=[],this.root=t,this.opts=n,this.css=void 0,this.map=void 0}get content(){return this.css}toString(){return this.css}warn(e,t={}){t.plugin||this.lastPlugin&&this.lastPlugin.postcssPlugin&&(t.plugin=this.lastPlugin.postcssPlugin);let n=new a(e,t);return this.messages.push(n),n}warnings(){return this.messages.filter((e=>"warning"===e.type))}}e.exports=r,r.default=r},98973:function(e,t,n){"use strict";let a,r,i=n(52531);class o extends i{constructor(e){super(e),this.type="root",this.nodes||(this.nodes=[])}normalize(e,t,n){let a=super.normalize(e);if(t)if("prepend"===n)this.nodes.length>1?t.raws.before=this.nodes[1].raws.before:delete t.raws.before;else if(this.first!==t)for(let r of a)r.raws.before=t.raws.before;return a}removeChild(e,t){let n=this.index(e);return!t&&0===n&&this.nodes.length>1&&(this.nodes[1].raws.before=this.nodes[n].raws.before),super.removeChild(e)}toResult(e={}){return new a(new r,this,e).stringify()}}o.registerLazyResult=e=>{a=e},o.registerProcessor=e=>{r=e},e.exports=o,o.default=o,i.registerRoot(o)},31854:function(e,t,n){"use strict";let a=n(52531),r=n(84436);class i extends a{constructor(e){super(e),this.type="rule",this.nodes||(this.nodes=[])}get selectors(){return r.comma(this.selector)}set selectors(e){let t=this.selector?this.selector.match(/,\s*/):null,n=t?t[0]:","+this.raw("between","beforeOpen");this.selector=e.join(n)}}e.exports=i,i.default=i,a.registerRule(i)},49101:function(e){"use strict";const t={after:"\n",beforeClose:"\n",beforeComment:"\n",beforeDecl:"\n",beforeOpen:" ",beforeRule:"\n",colon:": ",commentLeft:" ",commentRight:" ",emptyBody:"",indent:"    ",semicolon:!1};class n{constructor(e){this.builder=e}atrule(e,t){let n="@"+e.name,a=e.params?this.rawValue(e,"params"):"";if(void 0!==e.raws.afterName?n+=e.raws.afterName:a&&(n+=" "),e.nodes)this.block(e,n+a);else{let r=(e.raws.between||"")+(t?";":"");this.builder(n+a+r,e)}}beforeAfter(e,t){let n;n="decl"===e.type?this.raw(e,null,"beforeDecl"):"comment"===e.type?this.raw(e,null,"beforeComment"):"before"===t?this.raw(e,null,"beforeRule"):this.raw(e,null,"beforeClose");let a=e.parent,r=0;for(;a&&"root"!==a.type;)r+=1,a=a.parent;if(n.includes("\n")){let t=this.raw(e,null,"indent");if(t.length)for(let e=0;e<r;e++)n+=t}return n}block(e,t){let n,a=this.raw(e,"between","beforeOpen");this.builder(t+a+"{",e,"start"),e.nodes&&e.nodes.length?(this.body(e),n=this.raw(e,"after")):n=this.raw(e,"after","emptyBody"),n&&this.builder(n),this.builder("}",e,"end")}body(e){let t=e.nodes.length-1;for(;t>0&&"comment"===e.nodes[t].type;)t-=1;let n=this.raw(e,"semicolon");for(let a=0;a<e.nodes.length;a++){let r=e.nodes[a],i=this.raw(r,"before");i&&this.builder(i),this.stringify(r,t!==a||n)}}comment(e){let t=this.raw(e,"left","commentLeft"),n=this.raw(e,"right","commentRight");this.builder("/*"+t+e.text+n+"*/",e)}decl(e,t){let n=this.raw(e,"between","colon"),a=e.prop+n+this.rawValue(e,"value");e.important&&(a+=e.raws.important||" !important"),t&&(a+=";"),this.builder(a,e)}document(e){this.body(e)}raw(e,n,a){let r;if(a||(a=n),n&&(r=e.raws[n],void 0!==r))return r;let i=e.parent;if("before"===a){if(!i||"root"===i.type&&i.first===e)return"";if(i&&"document"===i.type)return""}if(!i)return t[a];let o=e.root();if(o.rawCache||(o.rawCache={}),void 0!==o.rawCache[a])return o.rawCache[a];if("before"===a||"after"===a)return this.beforeAfter(e,a);{let t="raw"+((d=a)[0].toUpperCase()+d.slice(1));this[t]?r=this[t](o,e):o.walk((e=>{if(r=e.raws[n],void 0!==r)return!1}))}var d;return void 0===r&&(r=t[a]),o.rawCache[a]=r,r}rawBeforeClose(e){let t;return e.walk((e=>{if(e.nodes&&e.nodes.length>0&&void 0!==e.raws.after)return t=e.raws.after,t.includes("\n")&&(t=t.replace(/[^\n]+$/,"")),!1})),t&&(t=t.replace(/\S/g,"")),t}rawBeforeComment(e,t){let n;return e.walkComments((e=>{if(void 0!==e.raws.before)return n=e.raws.before,n.includes("\n")&&(n=n.replace(/[^\n]+$/,"")),!1})),void 0===n?n=this.raw(t,null,"beforeDecl"):n&&(n=n.replace(/\S/g,"")),n}rawBeforeDecl(e,t){let n;return e.walkDecls((e=>{if(void 0!==e.raws.before)return n=e.raws.before,n.includes("\n")&&(n=n.replace(/[^\n]+$/,"")),!1})),void 0===n?n=this.raw(t,null,"beforeRule"):n&&(n=n.replace(/\S/g,"")),n}rawBeforeOpen(e){let t;return e.walk((e=>{if("decl"!==e.type&&(t=e.raws.between,void 0!==t))return!1})),t}rawBeforeRule(e){let t;return e.walk((n=>{if(n.nodes&&(n.parent!==e||e.first!==n)&&void 0!==n.raws.before)return t=n.raws.before,t.includes("\n")&&(t=t.replace(/[^\n]+$/,"")),!1})),t&&(t=t.replace(/\S/g,"")),t}rawColon(e){let t;return e.walkDecls((e=>{if(void 0!==e.raws.between)return t=e.raws.between.replace(/[^\s:]/g,""),!1})),t}rawEmptyBody(e){let t;return e.walk((e=>{if(e.nodes&&0===e.nodes.length&&(t=e.raws.after,void 0!==t))return!1})),t}rawIndent(e){if(e.raws.indent)return e.raws.indent;let t;return e.walk((n=>{let a=n.parent;if(a&&a!==e&&a.parent&&a.parent===e&&void 0!==n.raws.before){let e=n.raws.before.split("\n");return t=e[e.length-1],t=t.replace(/\S/g,""),!1}})),t}rawSemicolon(e){let t;return e.walk((e=>{if(e.nodes&&e.nodes.length&&"decl"===e.last.type&&(t=e.raws.semicolon,void 0!==t))return!1})),t}rawValue(e,t){let n=e[t],a=e.raws[t];return a&&a.value===n?a.raw:n}root(e){this.body(e),e.raws.after&&this.builder(e.raws.after)}rule(e){this.block(e,this.rawValue(e,"selector")),e.raws.ownSemicolon&&this.builder(e.raws.ownSemicolon,e,"end")}stringify(e,t){if(!this[e.type])throw new Error("Unknown AST node type "+e.type+". Maybe you need to change PostCSS stringifier.");this[e.type](e,t)}}e.exports=n,n.default=n},4414:function(e,t,n){"use strict";let a=n(49101);function r(e,t){new a(t).stringify(e)}e.exports=r,r.default=r},32899:function(e){"use strict";e.exports.isClean=Symbol("isClean"),e.exports.my=Symbol("my")},62132:function(e){"use strict";const t="'".charCodeAt(0),n='"'.charCodeAt(0),a="\\".charCodeAt(0),r="/".charCodeAt(0),i="\n".charCodeAt(0),o=" ".charCodeAt(0),d="\f".charCodeAt(0),s="\t".charCodeAt(0),c="\r".charCodeAt(0),u="[".charCodeAt(0),l="]".charCodeAt(0),g="(".charCodeAt(0),h=")".charCodeAt(0),f="{".charCodeAt(0),p="}".charCodeAt(0),m=";".charCodeAt(0),R="*".charCodeAt(0),b=":".charCodeAt(0),y="@".charCodeAt(0),v=/[\t\n\f\r "#'()/;[\\\]{}]/g,_=/[\t\n\f\r !"#'():;@[\\\]{}]|\/(?=\*)/g,w=/.[\n"'(/\\]/,M=/[\da-f]/i;e.exports=function(e,x={}){let E,S,k,N,D,A,j,T,L,I,C=e.css.valueOf(),O=x.ignoreErrors,P=C.length,z=0,B=[],F=[];function U(t){throw e.error("Unclosed "+t,z)}return{back:function(e){F.push(e)},endOfFile:function(){return 0===F.length&&z>=P},nextToken:function(e){if(F.length)return F.pop();if(z>=P)return;let x=!!e&&e.ignoreUnclosed;switch(E=C.charCodeAt(z),E){case i:case o:case s:case c:case d:S=z;do{S+=1,E=C.charCodeAt(S)}while(E===o||E===i||E===s||E===c||E===d);I=["space",C.slice(z,S)],z=S-1;break;case u:case l:case f:case p:case b:case m:case h:{let e=String.fromCharCode(E);I=[e,e,z];break}case g:if(T=B.length?B.pop()[1]:"",L=C.charCodeAt(z+1),"url"===T&&L!==t&&L!==n&&L!==o&&L!==i&&L!==s&&L!==d&&L!==c){S=z;do{if(A=!1,S=C.indexOf(")",S+1),-1===S){if(O||x){S=z;break}U("bracket")}for(j=S;C.charCodeAt(j-1)===a;)j-=1,A=!A}while(A);I=["brackets",C.slice(z,S+1),z,S],z=S}else S=C.indexOf(")",z+1),N=C.slice(z,S+1),-1===S||w.test(N)?I=["(","(",z]:(I=["brackets",N,z,S],z=S);break;case t:case n:k=E===t?"'":'"',S=z;do{if(A=!1,S=C.indexOf(k,S+1),-1===S){if(O||x){S=z+1;break}U("string")}for(j=S;C.charCodeAt(j-1)===a;)j-=1,A=!A}while(A);I=["string",C.slice(z,S+1),z,S],z=S;break;case y:v.lastIndex=z+1,v.test(C),S=0===v.lastIndex?C.length-1:v.lastIndex-2,I=["at-word",C.slice(z,S+1),z,S],z=S;break;case a:for(S=z,D=!0;C.charCodeAt(S+1)===a;)S+=1,D=!D;if(E=C.charCodeAt(S+1),D&&E!==r&&E!==o&&E!==i&&E!==s&&E!==c&&E!==d&&(S+=1,M.test(C.charAt(S)))){for(;M.test(C.charAt(S+1));)S+=1;C.charCodeAt(S+1)===o&&(S+=1)}I=["word",C.slice(z,S+1),z,S],z=S;break;default:E===r&&C.charCodeAt(z+1)===R?(S=C.indexOf("*/",z+2)+1,0===S&&(O||x?S=C.length:U("comment")),I=["comment",C.slice(z,S+1),z,S],z=S):(_.lastIndex=z+1,_.test(C),S=0===_.lastIndex?C.length-1:_.lastIndex-2,I=["word",C.slice(z,S+1),z,S],B.push(I),z=S)}return z++,I},position:function(){return z}}}},93098:function(e){"use strict";let t={};e.exports=function(e){t[e]||(t[e]=!0,"undefined"!=typeof console&&console.warn&&console.warn(e))}},90846:function(e){"use strict";class t{constructor(e,t={}){if(this.type="warning",this.text=e,t.node&&t.node.source){let e=t.node.rangeBy(t);this.line=e.start.line,this.column=e.start.column,this.endLine=e.end.line,this.endColumn=e.end.column}for(let n in t)this[n]=t[n]}toString(){return this.node?this.node.error(this.text,{index:this.index,plugin:this.plugin,word:this.word}).message:this.plugin?this.plugin+": "+this.text:this.text}}e.exports=t,t.default=t},27061:function(e){var t,n,a=e.exports={};function r(){throw new Error("setTimeout has not been defined")}function i(){throw new Error("clearTimeout has not been defined")}function o(e){if(t===setTimeout)return setTimeout(e,0);if((t===r||!t)&&setTimeout)return t=setTimeout,setTimeout(e,0);try{return t(e,0)}catch(n){try{return t.call(null,e,0)}catch(n){return t.call(this,e,0)}}}!function(){try{t="function"==typeof setTimeout?setTimeout:r}catch(e){t=r}try{n="function"==typeof clearTimeout?clearTimeout:i}catch(e){n=i}}();var d,s=[],c=!1,u=-1;function l(){c&&d&&(c=!1,d.length?s=d.concat(s):u=-1,s.length&&g())}function g(){if(!c){var e=o(l);c=!0;for(var t=s.length;t;){for(d=s,s=[];++u<t;)d&&d[u].run();u=-1,t=s.length}d=null,c=!1,function(e){if(n===clearTimeout)return clearTimeout(e);if((n===i||!n)&&clearTimeout)return n=clearTimeout,clearTimeout(e);try{return n(e)}catch(t){try{return n.call(null,e)}catch(t){return n.call(this,e)}}}(e)}}function h(e,t){this.fun=e,this.array=t}function f(){}a.nextTick=function(e){var t=new Array(arguments.length-1);if(arguments.length>1)for(var n=1;n<arguments.length;n++)t[n-1]=arguments[n];s.push(new h(e,t)),1!==s.length||c||o(g)},h.prototype.run=function(){this.fun.apply(null,this.array)},a.title="browser",a.browser=!0,a.env={},a.argv=[],a.version="",a.versions={},a.on=f,a.addListener=f,a.once=f,a.off=f,a.removeListener=f,a.removeAllListeners=f,a.emit=f,a.prependListener=f,a.prependOnceListener=f,a.listeners=function(e){return[]},a.binding=function(e){throw new Error("process.binding is not supported")},a.cwd=function(){return"/"},a.chdir=function(e){throw new Error("process.chdir is not supported")},a.umask=function(){return 0}},79639:function(e,t,n){t.publicEncrypt=n(89881),t.privateDecrypt=n(42619),t.privateEncrypt=function(e,n){return t.publicEncrypt(e,n,!0)},t.publicDecrypt=function(e,n){return t.privateDecrypt(e,n,!0)}},51697:function(e,t,n){var a=n(57266),r=n(27172).Buffer;function i(e){var t=r.allocUnsafe(4);return t.writeUInt32BE(e,0),t}e.exports=function(e,t){for(var n,o=r.alloc(0),d=0;o.length<t;)n=i(d++),o=r.concat([o,a("sha1").update(e).update(n).digest()]);return o.slice(0,t)}},42619:function(e,t,n){var a=n(71463),r=n(51697),i=n(6107),o=n(63785),d=n(17354),s=n(57266),c=n(64608),u=n(27172).Buffer;e.exports=function(e,t,n){var l;l=e.padding?e.padding:n?1:4;var g,h=a(e),f=h.modulus.byteLength();if(t.length>f||new o(t).cmp(h.modulus)>=0)throw new Error("decryption error");g=n?c(new o(t),h):d(t,h);var p=u.alloc(f-g.length);if(g=u.concat([p,g],f),4===l)return function(e,t){var n=e.modulus.byteLength(),a=s("sha1").update(u.alloc(0)).digest(),o=a.length;if(0!==t[0])throw new Error("decryption error");var d=t.slice(1,o+1),c=t.slice(o+1),l=i(d,r(c,o)),g=i(c,r(l,n-o-1));if(function(e,t){e=u.from(e),t=u.from(t);var n=0,a=e.length;e.length!==t.length&&(n++,a=Math.min(e.length,t.length));var r=-1;for(;++r<a;)n+=e[r]^t[r];return n}(a,g.slice(0,o)))throw new Error("decryption error");var h=o;for(;0===g[h];)h++;if(1!==g[h++])throw new Error("decryption error");return g.slice(h)}(h,g);if(1===l)return function(e,t,n){var a=t.slice(0,2),r=2,i=0;for(;0!==t[r++];)if(r>=t.length){i++;break}var o=t.slice(2,r-1);("0002"!==a.toString("hex")&&!n||"0001"!==a.toString("hex")&&n)&&i++;o.length<8&&i++;if(i)throw new Error("decryption error");return t.slice(r)}(0,g,n);if(3===l)return g;throw new Error("unknown padding")}},89881:function(e,t,n){var a=n(71463),r=n(52830),i=n(57266),o=n(51697),d=n(6107),s=n(63785),c=n(64608),u=n(17354),l=n(27172).Buffer;e.exports=function(e,t,n){var g;g=e.padding?e.padding:n?1:4;var h,f=a(e);if(4===g)h=function(e,t){var n=e.modulus.byteLength(),a=t.length,c=i("sha1").update(l.alloc(0)).digest(),u=c.length,g=2*u;if(a>n-g-2)throw new Error("message too long");var h=l.alloc(n-a-g-2),f=n-u-1,p=r(u),m=d(l.concat([c,h,l.alloc(1,1),t],f),o(p,f)),R=d(p,o(m,u));return new s(l.concat([l.alloc(1),R,m],n))}(f,t);else if(1===g)h=function(e,t,n){var a,i=t.length,o=e.modulus.byteLength();if(i>o-11)throw new Error("message too long");a=n?l.alloc(o-i-3,255):function(e){var t,n=l.allocUnsafe(e),a=0,i=r(2*e),o=0;for(;a<e;)o===i.length&&(i=r(2*e),o=0),(t=i[o++])&&(n[a++]=t);return n}(o-i-3);return new s(l.concat([l.from([0,n?1:2]),a,l.alloc(1),t],o))}(f,t,n);else{if(3!==g)throw new Error("unknown padding");if((h=new s(t)).cmp(f.modulus)>=0)throw new Error("data too long for modulus")}return n?u(h,f):c(h,f)}},64608:function(e,t,n){var a=n(63785),r=n(27172).Buffer;e.exports=function(e,t){return r.from(e.toRed(a.mont(t.modulus)).redPow(new a(t.publicExponent)).fromRed().toArray())}},6107:function(e){e.exports=function(e,t){for(var n=e.length,a=-1;++a<n;)e[a]^=t[a];return e}},52830:function(e,t,n){"use strict";var a=n(27061),r=65536,i=4294967295;var o=n(27172).Buffer,d=n.g.crypto||n.g.msCrypto;d&&d.getRandomValues?e.exports=function(e,t){if(e>i)throw new RangeError("requested too many random bytes");var n=o.allocUnsafe(e);if(e>0)if(e>r)for(var s=0;s<e;s+=r)d.getRandomValues(n.slice(s,s+r));else d.getRandomValues(n);if("function"==typeof t)return a.nextTick((function(){t(null,n)}));return n}:e.exports=function(){throw new Error("Secure random number generation is not supported by this browser.\nUse Chrome, Firefox or Internet Explorer 11")}},68519:function(e,t,n){"use strict";var a=n(27061);function r(){throw new Error("secure random number generation not supported by this browser\nuse chrome, FireFox or Internet Explorer 11")}var i=n(27172),o=n(52830),d=i.Buffer,s=i.kMaxLength,c=n.g.crypto||n.g.msCrypto,u=Math.pow(2,32)-1;function l(e,t){if("number"!=typeof e||e!=e)throw new TypeError("offset must be a number");if(e>u||e<0)throw new TypeError("offset must be a uint32");if(e>s||e>t)throw new RangeError("offset out of range")}function g(e,t,n){if("number"!=typeof e||e!=e)throw new TypeError("size must be a number");if(e>u||e<0)throw new TypeError("size must be a uint32");if(e+t>n||e>s)throw new RangeError("buffer too small")}function h(e,t,n,r){if(a.browser){var i=e.buffer,d=new Uint8Array(i,t,n);return c.getRandomValues(d),r?void a.nextTick((function(){r(null,e)})):e}if(!r)return o(n).copy(e,t),e;o(n,(function(n,a){if(n)return r(n);a.copy(e,t),r(null,e)}))}c&&c.getRandomValues||!a.browser?(t.randomFill=function(e,t,a,r){if(!(d.isBuffer(e)||e instanceof n.g.Uint8Array))throw new TypeError('"buf" argument must be a Buffer or Uint8Array');if("function"==typeof t)r=t,t=0,a=e.length;else if("function"==typeof a)r=a,a=e.length-t;else if("function"!=typeof r)throw new TypeError('"cb" argument must be a function');return l(t,e.length),g(a,t,e.length),h(e,t,a,r)},t.randomFillSync=function(e,t,a){void 0===t&&(t=0);if(!(d.isBuffer(e)||e instanceof n.g.Uint8Array))throw new TypeError('"buf" argument must be a Buffer or Uint8Array');l(t,e.length),void 0===a&&(a=e.length-t);return g(a,t,e.length),h(e,t,a)}):(t.randomFill=r,t.randomFillSync=r)},54335:function(e){var t="undefined"!=typeof Element,n="function"==typeof Map,a="function"==typeof Set,r="function"==typeof ArrayBuffer&&!!ArrayBuffer.isView;function i(e,o){if(e===o)return!0;if(e&&o&&"object"==typeof e&&"object"==typeof o){if(e.constructor!==o.constructor)return!1;var d,s,c,u;if(Array.isArray(e)){if((d=e.length)!=o.length)return!1;for(s=d;0!=s--;)if(!i(e[s],o[s]))return!1;return!0}if(n&&e instanceof Map&&o instanceof Map){if(e.size!==o.size)return!1;for(u=e.entries();!(s=u.next()).done;)if(!o.has(s.value[0]))return!1;for(u=e.entries();!(s=u.next()).done;)if(!i(s.value[1],o.get(s.value[0])))return!1;return!0}if(a&&e instanceof Set&&o instanceof Set){if(e.size!==o.size)return!1;for(u=e.entries();!(s=u.next()).done;)if(!o.has(s.value[0]))return!1;return!0}if(r&&ArrayBuffer.isView(e)&&ArrayBuffer.isView(o)){if((d=e.length)!=o.length)return!1;for(s=d;0!=s--;)if(e[s]!==o[s])return!1;return!0}if(e.constructor===RegExp)return e.source===o.source&&e.flags===o.flags;if(e.valueOf!==Object.prototype.valueOf&&"function"==typeof e.valueOf&&"function"==typeof o.valueOf)return e.valueOf()===o.valueOf();if(e.toString!==Object.prototype.toString&&"function"==typeof e.toString&&"function"==typeof o.toString)return e.toString()===o.toString();if((d=(c=Object.keys(e)).length)!==Object.keys(o).length)return!1;for(s=d;0!=s--;)if(!Object.prototype.hasOwnProperty.call(o,c[s]))return!1;if(t&&e instanceof Element)return!1;for(s=d;0!=s--;)if(("_owner"!==c[s]&&"__v"!==c[s]&&"__o"!==c[s]||!e.$$typeof)&&!i(e[c[s]],o[c[s]]))return!1;return!0}return e!=e&&o!=o}e.exports=function(e,t){try{return i(e,t)}catch(n){if((n.message||"").match(/stack|recursion/i))return console.warn("react-fast-compare cannot handle circular refs"),!1;throw n}}},32062:function(e,t,n){"use strict";var a,r=this&&this.__extends||(a=function(e,t){return a=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])},a(e,t)},function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function n(){this.constructor=e}a(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}),i=this&&this.__assign||function(){return i=Object.assign||function(e){for(var t,n=1,a=arguments.length;n<a;n++)for(var r in t=arguments[n])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e},i.apply(this,arguments)},o=this&&this.__createBinding||(Object.create?function(e,t,n,a){void 0===a&&(a=n);var r=Object.getOwnPropertyDescriptor(t,n);r&&!("get"in r?!t.__esModule:r.writable||r.configurable)||(r={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,a,r)}:function(e,t,n,a){void 0===a&&(a=n),e[a]=t[n]}),d=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),s=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&o(t,e,n);return d(t,e),t},c=this&&this.__rest||function(e,t){var n={};for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&t.indexOf(a)<0&&(n[a]=e[a]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(a=Object.getOwnPropertySymbols(e);r<a.length;r++)t.indexOf(a[r])<0&&Object.prototype.propertyIsEnumerable.call(e,a[r])&&(n[a[r]]=e[a[r]])}return n};Object.defineProperty(t,"__esModule",{value:!0});var u=s(n(67294)),l="undefined"!=typeof window&&"navigator"in window&&/Win/i.test(navigator.platform),g="undefined"!=typeof window&&"navigator"in window&&/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform),h="npm__react-simple-code-editor__textarea",f="\n/**\n * Reset the text fill color so that placeholder is visible\n */\n.".concat(h,":empty {\n  -webkit-text-fill-color: inherit !important;\n}\n\n/**\n * Hack to apply on some CSS on IE10 and IE11\n */\n@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n  /**\n    * IE doesn't support '-webkit-text-fill-color'\n    * So we use 'color: transparent' to make the text transparent on IE\n    * Unlike other browsers, it doesn't affect caret color in IE\n    */\n  .").concat(h," {\n    color: transparent !important;\n  }\n\n  .").concat(h,"::selection {\n    background-color: #accef7 !important;\n    color: transparent !important;\n  }\n}\n"),p=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.state={capture:!0},t._recordCurrentState=function(){var e=t._input;if(e){var n=e.value,a=e.selectionStart,r=e.selectionEnd;t._recordChange({value:n,selectionStart:a,selectionEnd:r})}},t._getLines=function(e,t){return e.substring(0,t).split("\n")},t._recordChange=function(e,n){var a,r,o;void 0===n&&(n=!1);var d=t._history,s=d.stack,c=d.offset;if(s.length&&c>-1){t._history.stack=s.slice(0,c+1);var u=t._history.stack.length;if(u>100){var l=u-100;t._history.stack=s.slice(l,u),t._history.offset=Math.max(t._history.offset-l,0)}}var g=Date.now();if(n){var h=t._history.stack[t._history.offset];if(h&&g-h.timestamp<3e3){var f=/[^a-z0-9]([a-z0-9]+)$/i,p=null===(a=t._getLines(h.value,h.selectionStart).pop())||void 0===a?void 0:a.match(f),m=null===(r=t._getLines(e.value,e.selectionStart).pop())||void 0===r?void 0:r.match(f);if((null==p?void 0:p[1])&&(null===(o=null==m?void 0:m[1])||void 0===o?void 0:o.startsWith(p[1])))return void(t._history.stack[t._history.offset]=i(i({},e),{timestamp:g}))}}t._history.stack.push(i(i({},e),{timestamp:g})),t._history.offset++},t._updateInput=function(e){var n=t._input;n&&(n.value=e.value,n.selectionStart=e.selectionStart,n.selectionEnd=e.selectionEnd,t.props.onValueChange(e.value))},t._applyEdits=function(e){var n=t._input,a=t._history.stack[t._history.offset];a&&n&&(t._history.stack[t._history.offset]=i(i({},a),{selectionStart:n.selectionStart,selectionEnd:n.selectionEnd})),t._recordChange(e),t._updateInput(e)},t._undoEdit=function(){var e=t._history,n=e.stack,a=e.offset,r=n[a-1];r&&(t._updateInput(r),t._history.offset=Math.max(a-1,0))},t._redoEdit=function(){var e=t._history,n=e.stack,a=e.offset,r=n[a+1];r&&(t._updateInput(r),t._history.offset=Math.min(a+1,n.length-1))},t._handleKeyDown=function(e){var n=t.props,a=n.tabSize,r=n.insertSpaces,i=n.ignoreTabKey,o=n.onKeyDown;if(!o||(o(e),!e.defaultPrevented)){27===e.keyCode&&e.currentTarget.blur();var d=e.currentTarget,s=d.value,c=d.selectionStart,u=d.selectionEnd,h=(r?" ":"\t").repeat(a);if(9===e.keyCode&&!i&&t.state.capture)if(e.preventDefault(),e.shiftKey){var f=(b=t._getLines(s,c)).length-1,p=t._getLines(s,u).length-1,m=s.split("\n").map((function(e,t){return t>=f&&t<=p&&e.startsWith(h)?e.substring(h.length):e})).join("\n");if(s!==m){var R=b[f];t._applyEdits({value:m,selectionStart:(null==R?void 0:R.startsWith(h))?c-h.length:c,selectionEnd:u-(s.length-m.length)})}}else if(c!==u){var b,y=(b=t._getLines(s,c)).length-1,v=t._getLines(s,u).length-1;R=b[y];t._applyEdits({value:s.split("\n").map((function(e,t){return t>=y&&t<=v?h+e:e})).join("\n"),selectionStart:R&&/\S/.test(R)?c+h.length:c,selectionEnd:u+h.length*(v-y+1)})}else{var _=c+h.length;t._applyEdits({value:s.substring(0,c)+h+s.substring(u),selectionStart:_,selectionEnd:_})}else if(8===e.keyCode){var w=c!==u;if(s.substring(0,c).endsWith(h)&&!w){e.preventDefault();_=c-h.length;t._applyEdits({value:s.substring(0,c-h.length)+s.substring(u),selectionStart:_,selectionEnd:_})}}else if(13===e.keyCode){if(c===u){var M=t._getLines(s,c).pop(),x=null==M?void 0:M.match(/^\s+/);if(null==x?void 0:x[0]){e.preventDefault();var E="\n"+x[0];_=c+E.length;t._applyEdits({value:s.substring(0,c)+E+s.substring(u),selectionStart:_,selectionEnd:_})}}}else if(57===e.keyCode||219===e.keyCode||222===e.keyCode||192===e.keyCode){var S=void 0;57===e.keyCode&&e.shiftKey?S=["(",")"]:219===e.keyCode?S=e.shiftKey?["{","}"]:["[","]"]:222===e.keyCode?S=e.shiftKey?['"','"']:["'","'"]:192!==e.keyCode||e.shiftKey||(S=["`","`"]),c!==u&&S&&(e.preventDefault(),t._applyEdits({value:s.substring(0,c)+S[0]+s.substring(c,u)+S[1]+s.substring(u),selectionStart:c,selectionEnd:u+2}))}else!(g?e.metaKey&&90===e.keyCode:e.ctrlKey&&90===e.keyCode)||e.shiftKey||e.altKey?(g?e.metaKey&&90===e.keyCode&&e.shiftKey:l?e.ctrlKey&&89===e.keyCode:e.ctrlKey&&90===e.keyCode&&e.shiftKey)&&!e.altKey?(e.preventDefault(),t._redoEdit()):77!==e.keyCode||!e.ctrlKey||g&&!e.shiftKey||(e.preventDefault(),t.setState((function(e){return{capture:!e.capture}}))):(e.preventDefault(),t._undoEdit())}},t._handleChange=function(e){var n=e.currentTarget,a=n.value,r=n.selectionStart,i=n.selectionEnd;t._recordChange({value:a,selectionStart:r,selectionEnd:i},!0),t.props.onValueChange(a)},t._history={stack:[],offset:-1},t._input=null,t}return r(t,e),t.prototype.componentDidMount=function(){this._recordCurrentState()},Object.defineProperty(t.prototype,"session",{get:function(){return{history:this._history}},set:function(e){this._history=e.history},enumerable:!1,configurable:!0}),t.prototype.render=function(){var e=this,t=this.props,n=t.value,a=t.style,r=t.padding,o=t.highlight,d=t.textareaId,s=t.textareaClassName,l=t.autoFocus,g=t.disabled,p=t.form,R=t.maxLength,b=t.minLength,y=t.name,v=t.placeholder,_=t.readOnly,w=t.required,M=t.onClick,x=t.onFocus,E=t.onBlur,S=t.onKeyUp,k=(t.onKeyDown,t.onValueChange,t.tabSize,t.insertSpaces,t.ignoreTabKey,t.preClassName),N=c(t,["value","style","padding","highlight","textareaId","textareaClassName","autoFocus","disabled","form","maxLength","minLength","name","placeholder","readOnly","required","onClick","onFocus","onBlur","onKeyUp","onKeyDown","onValueChange","tabSize","insertSpaces","ignoreTabKey","preClassName"]),D={paddingTop:r,paddingRight:r,paddingBottom:r,paddingLeft:r},A=o(n);return u.createElement("div",i({},N,{style:i(i({},m.container),a)}),u.createElement("textarea",{ref:function(t){return e._input=t},style:i(i(i({},m.editor),m.textarea),D),className:h+(s?" ".concat(s):""),id:d,value:n,onChange:this._handleChange,onKeyDown:this._handleKeyDown,onClick:M,onKeyUp:S,onFocus:x,onBlur:E,disabled:g,form:p,maxLength:R,minLength:b,name:y,placeholder:v,readOnly:_,required:w,autoFocus:l,autoCapitalize:"off",autoComplete:"off",autoCorrect:"off",spellCheck:!1,"data-gramm":!1}),u.createElement("pre",i({className:k,"aria-hidden":"true",style:i(i(i({},m.editor),m.highlight),D)},"string"==typeof A?{dangerouslySetInnerHTML:{__html:A+"<br />"}}:{children:A})),u.createElement("style",{type:"text/css",dangerouslySetInnerHTML:{__html:f}}))},t.defaultProps={tabSize:2,insertSpaces:!0,ignoreTabKey:!1,padding:0},t}(u.Component);t.default=p;var m={container:{position:"relative",textAlign:"left",boxSizing:"border-box",padding:0,overflow:"hidden"},textarea:{position:"absolute",top:0,left:0,height:"100%",width:"100%",resize:"none",color:"inherit",overflow:"hidden",MozOsxFontSmoothing:"grayscale",WebkitFontSmoothing:"antialiased",WebkitTextFillColor:"transparent"},highlight:{position:"relative",pointerEvents:"none"},editor:{margin:0,border:0,background:"none",boxSizing:"inherit",display:"inherit",fontFamily:"inherit",fontSize:"inherit",fontStyle:"inherit",fontVariantLigatures:"inherit",fontWeight:"inherit",letterSpacing:"inherit",lineHeight:"inherit",tabSize:"inherit",textIndent:"inherit",textRendering:"inherit",textTransform:"inherit",whiteSpace:"pre-wrap",wordBreak:"keep-all",overflowWrap:"break-word"}}},64338:function(e,t,n){"use strict";n.d(t,{animated:function(){return a.animated}});var a=n(39998);n.o(a,"useSpring")&&n.d(t,{useSpring:function(){return a.useSpring}})},95637:function(e,t,n){const a=n(45927)(9200,9203,9855,9875,9889,9934,9940,9962,9973,9978,9981,9989,10024,10060,10062,10071,10160,10175,11088,11093,126980,127183,127374,127489,127514,127535,127988,128064,128378,128420,128716,129008);a.addRange(8986,8987).addRange(9193,9196).addRange(9725,9726).addRange(9748,9749).addRange(9800,9811).addRange(9898,9899).addRange(9917,9918).addRange(9924,9925).addRange(9970,9971).addRange(9994,9995).addRange(10067,10069).addRange(10133,10135).addRange(11035,11036).addRange(127377,127386).addRange(127538,127542).addRange(127544,127546).addRange(127568,127569).addRange(127744,127776).addRange(127789,127797).addRange(127799,127868).addRange(127870,127891).addRange(127904,127946).addRange(127951,127955).addRange(127968,127984).addRange(127992,128062).addRange(128066,128252).addRange(128255,128317).addRange(128331,128334).addRange(128336,128359).addRange(128405,128406).addRange(128507,128591).addRange(128640,128709).addRange(128720,128722).addRange(128725,128727).addRange(128732,128735).addRange(128747,128748).addRange(128756,128764).addRange(128992,129003).addRange(129292,129338).addRange(129340,129349).addRange(129351,129535).addRange(129648,129660).addRange(129664,129672).addRange(129680,129725).addRange(129727,129733).addRange(129742,129755).addRange(129760,129768).addRange(129776,129784),t.characters=a,t.strings=["©️","®️","‼️","⁉️","™️","ℹ️","↔️","↕️","↖️","↗️","↘️","↙️","↩️","↪️","⌨️","⏏️","⏭️","⏮️","⏯️","⏱️","⏲️","⏸️","⏹️","⏺️","Ⓜ️","▪️","▫️","▶️","◀️","◻️","◼️","☀️","☁️","☂️","☃️","☄️","☎️","☑️","☘️","☝️","☠️","☢️","☣️","☦️","☪️","☮️","☯️","☸️","☹️","☺️","♀️","♂️","♟️","♠️","♣️","♥️","♦️","♨️","♻️","♾️","⚒️","⚔️","⚕️","⚖️","⚗️","⚙️","⚛️","⚜️","⚠️","⚧️","⚰️","⚱️","⛈️","⛏️","⛑️","⛓️","⛩️","⛰️","⛱️","⛴️","⛷️","⛸️","⛹️","✂️","✈️","✉️","✌️","✍️","✏️","✒️","✔️","✖️","✝️","✡️","✳️","✴️","❄️","❇️","❣️","❤️","➡️","⤴️","⤵️","⬅️","⬆️","⬇️","〰️","〽️","㊗️","㊙️","🅰️","🅱️","🅾️","🅿️","🈂️","🈷️","🌡️","🌤️","🌥️","🌦️","🌧️","🌨️","🌩️","🌪️","🌫️","🌬️","🌶️","🍽️","🎖️","🎗️","🎙️","🎚️","🎛️","🎞️","🎟️","🏋️","🏌️","🏍️","🏎️","🏔️","🏕️","🏖️","🏗️","🏘️","🏙️","🏚️","🏛️","🏜️","🏝️","🏞️","🏟️","🏳️","🏵️","🏷️","🐿️","👁️","📽️","🕉️","🕊️","🕯️","🕰️","🕳️","🕴️","🕵️","🕶️","🕷️","🕸️","🕹️","🖇️","🖊️","🖋️","🖌️","🖍️","🖐️","🖥️","🖨️","🖱️","🖲️","🖼️","🗂️","🗃️","🗄️","🗑️","🗒️","🗓️","🗜️","🗝️","🗞️","🗡️","🗣️","🗨️","🗯️","🗳️","🗺️","🛋️","🛍️","🛎️","🛏️","🛠️","🛡️","🛢️","🛣️","🛤️","🛥️","🛩️","🛰️","🛳️"]},27564:function(e,t,n){const a=n(45927)();t.characters=a,t.strings=["#️⃣","*️⃣","0️⃣","1️⃣","2️⃣","3️⃣","4️⃣","5️⃣","6️⃣","7️⃣","8️⃣","9️⃣"]},29372:function(e,t,n){const a=n(45927)(9200,9203,9855,9875,9889,9934,9940,9962,9973,9978,9981,9989,10024,10060,10062,10071,10160,10175,11088,11093,126980,127183,127374,127489,127514,127535,127988,128064,128378,128420,128716,129008);a.addRange(8986,8987).addRange(9193,9196).addRange(9725,9726).addRange(9748,9749).addRange(9800,9811).addRange(9898,9899).addRange(9917,9918).addRange(9924,9925).addRange(9970,9971).addRange(9994,9995).addRange(10067,10069).addRange(10133,10135).addRange(11035,11036).addRange(127377,127386).addRange(127538,127542).addRange(127544,127546).addRange(127568,127569).addRange(127744,127776).addRange(127789,127797).addRange(127799,127868).addRange(127870,127891).addRange(127904,127946).addRange(127951,127955).addRange(127968,127984).addRange(127992,128062).addRange(128066,128252).addRange(128255,128317).addRange(128331,128334).addRange(128336,128359).addRange(128405,128406).addRange(128507,128591).addRange(128640,128709).addRange(128720,128722).addRange(128725,128727).addRange(128732,128735).addRange(128747,128748).addRange(128756,128764).addRange(128992,129003).addRange(129292,129338).addRange(129340,129349).addRange(129351,129535).addRange(129648,129660).addRange(129664,129672).addRange(129680,129725).addRange(129727,129733).addRange(129742,129755).addRange(129760,129768).addRange(129776,129784),t.characters=a,t.strings=["#️⃣","*️⃣","0️⃣","1️⃣","2️⃣","3️⃣","4️⃣","5️⃣","6️⃣","7️⃣","8️⃣","9️⃣","©️","®️","‼️","⁉️","™️","ℹ️","↔️","↕️","↖️","↗️","↘️","↙️","↩️","↪️","⌨️","⏏️","⏭️","⏮️","⏯️","⏱️","⏲️","⏸️","⏹️","⏺️","Ⓜ️","▪️","▫️","▶️","◀️","◻️","◼️","☀️","☁️","☂️","☃️","☄️","☎️","☑️","☘️","☝🏻","☝🏼","☝🏽","☝🏾","☝🏿","☝️","☠️","☢️","☣️","☦️","☪️","☮️","☯️","☸️","☹️","☺️","♀️","♂️","♟️","♠️","♣️","♥️","♦️","♨️","♻️","♾️","⚒️","⚔️","⚕️","⚖️","⚗️","⚙️","⚛️","⚜️","⚠️","⚧️","⚰️","⚱️","⛈️","⛏️","⛑️","⛓️","⛩️","⛰️","⛱️","⛴️","⛷️","⛸️","⛹🏻","⛹🏻‍♀️","⛹🏻‍♂️","⛹🏼","⛹🏼‍♀️","⛹🏼‍♂️","⛹🏽","⛹🏽‍♀️","⛹🏽‍♂️","⛹🏾","⛹🏾‍♀️","⛹🏾‍♂️","⛹🏿","⛹🏿‍♀️","⛹🏿‍♂️","⛹️","⛹️‍♀️","⛹️‍♂️","✂️","✈️","✉️","✊🏻","✊🏼","✊🏽","✊🏾","✊🏿","✋🏻","✋🏼","✋🏽","✋🏾","✋🏿","✌🏻","✌🏼","✌🏽","✌🏾","✌🏿","✌️","✍🏻","✍🏼","✍🏽","✍🏾","✍🏿","✍️","✏️","✒️","✔️","✖️","✝️","✡️","✳️","✴️","❄️","❇️","❣️","❤️","❤️‍🔥","❤️‍🩹","➡️","⤴️","⤵️","⬅️","⬆️","⬇️","〰️","〽️","㊗️","㊙️","🅰️","🅱️","🅾️","🅿️","🇦🇨","🇦🇩","🇦🇪","🇦🇫","🇦🇬","🇦🇮","🇦🇱","🇦🇲","🇦🇴","🇦🇶","🇦🇷","🇦🇸","🇦🇹","🇦🇺","🇦🇼","🇦🇽","🇦🇿","🇧🇦","🇧🇧","🇧🇩","🇧🇪","🇧🇫","🇧🇬","🇧🇭","🇧🇮","🇧🇯","🇧🇱","🇧🇲","🇧🇳","🇧🇴","🇧🇶","🇧🇷","🇧🇸","🇧🇹","🇧🇻","🇧🇼","🇧🇾","🇧🇿","🇨🇦","🇨🇨","🇨🇩","🇨🇫","🇨🇬","🇨🇭","🇨🇮","🇨🇰","🇨🇱","🇨🇲","🇨🇳","🇨🇴","🇨🇵","🇨🇷","🇨🇺","🇨🇻","🇨🇼","🇨🇽","🇨🇾","🇨🇿","🇩🇪","🇩🇬","🇩🇯","🇩🇰","🇩🇲","🇩🇴","🇩🇿","🇪🇦","🇪🇨","🇪🇪","🇪🇬","🇪🇭","🇪🇷","🇪🇸","🇪🇹","🇪🇺","🇫🇮","🇫🇯","🇫🇰","🇫🇲","🇫🇴","🇫🇷","🇬🇦","🇬🇧","🇬🇩","🇬🇪","🇬🇫","🇬🇬","🇬🇭","🇬🇮","🇬🇱","🇬🇲","🇬🇳","🇬🇵","🇬🇶","🇬🇷","🇬🇸","🇬🇹","🇬🇺","🇬🇼","🇬🇾","🇭🇰","🇭🇲","🇭🇳","🇭🇷","🇭🇹","🇭🇺","🇮🇨","🇮🇩","🇮🇪","🇮🇱","🇮🇲","🇮🇳","🇮🇴","🇮🇶","🇮🇷","🇮🇸","🇮🇹","🇯🇪","🇯🇲","🇯🇴","🇯🇵","🇰🇪","🇰🇬","🇰🇭","🇰🇮","🇰🇲","🇰🇳","🇰🇵","🇰🇷","🇰🇼","🇰🇾","🇰🇿","🇱🇦","🇱🇧","🇱🇨","🇱🇮","🇱🇰","🇱🇷","🇱🇸","🇱🇹","🇱🇺","🇱🇻","🇱🇾","🇲🇦","🇲🇨","🇲🇩","🇲🇪","🇲🇫","🇲🇬","🇲🇭","🇲🇰","🇲🇱","🇲🇲","🇲🇳","🇲🇴","🇲🇵","🇲🇶","🇲🇷","🇲🇸","🇲🇹","🇲🇺","🇲🇻","🇲🇼","🇲🇽","🇲🇾","🇲🇿","🇳🇦","🇳🇨","🇳🇪","🇳🇫","🇳🇬","🇳🇮","🇳🇱","🇳🇴","🇳🇵","🇳🇷","🇳🇺","🇳🇿","🇴🇲","🇵🇦","🇵🇪","🇵🇫","🇵🇬","🇵🇭","🇵🇰","🇵🇱","🇵🇲","🇵🇳","🇵🇷","🇵🇸","🇵🇹","🇵🇼","🇵🇾","🇶🇦","🇷🇪","🇷🇴","🇷🇸","🇷🇺","🇷🇼","🇸🇦","🇸🇧","🇸🇨","🇸🇩","🇸🇪","🇸🇬","🇸🇭","🇸🇮","🇸🇯","🇸🇰","🇸🇱","🇸🇲","🇸🇳","🇸🇴","🇸🇷","🇸🇸","🇸🇹","🇸🇻","🇸🇽","🇸🇾","🇸🇿","🇹🇦","🇹🇨","🇹🇩","🇹🇫","🇹🇬","🇹🇭","🇹🇯","🇹🇰","🇹🇱","🇹🇲","🇹🇳","🇹🇴","🇹🇷","🇹🇹","🇹🇻","🇹🇼","🇹🇿","🇺🇦","🇺🇬","🇺🇲","🇺🇳","🇺🇸","🇺🇾","🇺🇿","🇻🇦","🇻🇨","🇻🇪","🇻🇬","🇻🇮","🇻🇳","🇻🇺","🇼🇫","🇼🇸","🇽🇰","🇾🇪","🇾🇹","🇿🇦","🇿🇲","🇿🇼","🈂️","🈷️","🌡️","🌤️","🌥️","🌦️","🌧️","🌨️","🌩️","🌪️","🌫️","🌬️","🌶️","🍽️","🎅🏻","🎅🏼","🎅🏽","🎅🏾","🎅🏿","🎖️","🎗️","🎙️","🎚️","🎛️","🎞️","🎟️","🏂🏻","🏂🏼","🏂🏽","🏂🏾","🏂🏿","🏃‍♀️","🏃‍♂️","🏃🏻","🏃🏻‍♀️","🏃🏻‍♂️","🏃🏼","🏃🏼‍♀️","🏃🏼‍♂️","🏃🏽","🏃🏽‍♀️","🏃🏽‍♂️","🏃🏾","🏃🏾‍♀️","🏃🏾‍♂️","🏃🏿","🏃🏿‍♀️","🏃🏿‍♂️","🏄‍♀️","🏄‍♂️","🏄🏻","🏄🏻‍♀️","🏄🏻‍♂️","🏄🏼","🏄🏼‍♀️","🏄🏼‍♂️","🏄🏽","🏄🏽‍♀️","🏄🏽‍♂️","🏄🏾","🏄🏾‍♀️","🏄🏾‍♂️","🏄🏿","🏄🏿‍♀️","🏄🏿‍♂️","🏇🏻","🏇🏼","🏇🏽","🏇🏾","🏇🏿","🏊‍♀️","🏊‍♂️","🏊🏻","🏊🏻‍♀️","🏊🏻‍♂️","🏊🏼","🏊🏼‍♀️","🏊🏼‍♂️","🏊🏽","🏊🏽‍♀️","🏊🏽‍♂️","🏊🏾","🏊🏾‍♀️","🏊🏾‍♂️","🏊🏿","🏊🏿‍♀️","🏊🏿‍♂️","🏋🏻","🏋🏻‍♀️","🏋🏻‍♂️","🏋🏼","🏋🏼‍♀️","🏋🏼‍♂️","🏋🏽","🏋🏽‍♀️","🏋🏽‍♂️","🏋🏾","🏋🏾‍♀️","🏋🏾‍♂️","🏋🏿","🏋🏿‍♀️","🏋🏿‍♂️","🏋️","🏋️‍♀️","🏋️‍♂️","🏌🏻","🏌🏻‍♀️","🏌🏻‍♂️","🏌🏼","🏌🏼‍♀️","🏌🏼‍♂️","🏌🏽","🏌🏽‍♀️","🏌🏽‍♂️","🏌🏾","🏌🏾‍♀️","🏌🏾‍♂️","🏌🏿","🏌🏿‍♀️","🏌🏿‍♂️","🏌️","🏌️‍♀️","🏌️‍♂️","🏍️","🏎️","🏔️","🏕️","🏖️","🏗️","🏘️","🏙️","🏚️","🏛️","🏜️","🏝️","🏞️","🏟️","🏳️","🏳️‍⚧️","🏳️‍🌈","🏴‍☠️","🏴󠁧󠁢󠁥󠁮󠁧󠁿","🏴󠁧󠁢󠁳󠁣󠁴󠁿","🏴󠁧󠁢󠁷󠁬󠁳󠁿","🏵️","🏷️","🐈‍⬛","🐕‍🦺","🐦‍⬛","🐻‍❄️","🐿️","👁️","👁️‍🗨️","👂🏻","👂🏼","👂🏽","👂🏾","👂🏿","👃🏻","👃🏼","👃🏽","👃🏾","👃🏿","👆🏻","👆🏼","👆🏽","👆🏾","👆🏿","👇🏻","👇🏼","👇🏽","👇🏾","👇🏿","👈🏻","👈🏼","👈🏽","👈🏾","👈🏿","👉🏻","👉🏼","👉🏽","👉🏾","👉🏿","👊🏻","👊🏼","👊🏽","👊🏾","👊🏿","👋🏻","👋🏼","👋🏽","👋🏾","👋🏿","👌🏻","👌🏼","👌🏽","👌🏾","👌🏿","👍🏻","👍🏼","👍🏽","👍🏾","👍🏿","👎🏻","👎🏼","👎🏽","👎🏾","👎🏿","👏🏻","👏🏼","👏🏽","👏🏾","👏🏿","👐🏻","👐🏼","👐🏽","👐🏾","👐🏿","👦🏻","👦🏼","👦🏽","👦🏾","👦🏿","👧🏻","👧🏼","👧🏽","👧🏾","👧🏿","👨‍⚕️","👨‍⚖️","👨‍✈️","👨‍❤️‍👨","👨‍❤️‍💋‍👨","👨‍🌾","👨‍🍳","👨‍🍼","👨‍🎓","👨‍🎤","👨‍🎨","👨‍🏫","👨‍🏭","👨‍👦","👨‍👦‍👦","👨‍👧","👨‍👧‍👦","👨‍👧‍👧","👨‍👨‍👦","👨‍👨‍👦‍👦","👨‍👨‍👧","👨‍👨‍👧‍👦","👨‍👨‍👧‍👧","👨‍👩‍👦","👨‍👩‍👦‍👦","👨‍👩‍👧","👨‍👩‍👧‍👦","👨‍👩‍👧‍👧","👨‍💻","👨‍💼","👨‍🔧","👨‍🔬","👨‍🚀","👨‍🚒","👨‍🦯","👨‍🦰","👨‍🦱","👨‍🦲","👨‍🦳","👨‍🦼","👨‍🦽","👨🏻","👨🏻‍⚕️","👨🏻‍⚖️","👨🏻‍✈️","👨🏻‍❤️‍👨🏻","👨🏻‍❤️‍👨🏼","👨🏻‍❤️‍👨🏽","👨🏻‍❤️‍👨🏾","👨🏻‍❤️‍👨🏿","👨🏻‍❤️‍💋‍👨🏻","👨🏻‍❤️‍💋‍👨🏼","👨🏻‍❤️‍💋‍👨🏽","👨🏻‍❤️‍💋‍👨🏾","👨🏻‍❤️‍💋‍👨🏿","👨🏻‍🌾","👨🏻‍🍳","👨🏻‍🍼","👨🏻‍🎓","👨🏻‍🎤","👨🏻‍🎨","👨🏻‍🏫","👨🏻‍🏭","👨🏻‍💻","👨🏻‍💼","👨🏻‍🔧","👨🏻‍🔬","👨🏻‍🚀","👨🏻‍🚒","👨🏻‍🤝‍👨🏼","👨🏻‍🤝‍👨🏽","👨🏻‍🤝‍👨🏾","👨🏻‍🤝‍👨🏿","👨🏻‍🦯","👨🏻‍🦰","👨🏻‍🦱","👨🏻‍🦲","👨🏻‍🦳","👨🏻‍🦼","👨🏻‍🦽","👨🏼","👨🏼‍⚕️","👨🏼‍⚖️","👨🏼‍✈️","👨🏼‍❤️‍👨🏻","👨🏼‍❤️‍👨🏼","👨🏼‍❤️‍👨🏽","👨🏼‍❤️‍👨🏾","👨🏼‍❤️‍👨🏿","👨🏼‍❤️‍💋‍👨🏻","👨🏼‍❤️‍💋‍👨🏼","👨🏼‍❤️‍💋‍👨🏽","👨🏼‍❤️‍💋‍👨🏾","👨🏼‍❤️‍💋‍👨🏿","👨🏼‍🌾","👨🏼‍🍳","👨🏼‍🍼","👨🏼‍🎓","👨🏼‍🎤","👨🏼‍🎨","👨🏼‍🏫","👨🏼‍🏭","👨🏼‍💻","👨🏼‍💼","👨🏼‍🔧","👨🏼‍🔬","👨🏼‍🚀","👨🏼‍🚒","👨🏼‍🤝‍👨🏻","👨🏼‍🤝‍👨🏽","👨🏼‍🤝‍👨🏾","👨🏼‍🤝‍👨🏿","👨🏼‍🦯","👨🏼‍🦰","👨🏼‍🦱","👨🏼‍🦲","👨🏼‍🦳","👨🏼‍🦼","👨🏼‍🦽","👨🏽","👨🏽‍⚕️","👨🏽‍⚖️","👨🏽‍✈️","👨🏽‍❤️‍👨🏻","👨🏽‍❤️‍👨🏼","👨🏽‍❤️‍👨🏽","👨🏽‍❤️‍👨🏾","👨🏽‍❤️‍👨🏿","👨🏽‍❤️‍💋‍👨🏻","👨🏽‍❤️‍💋‍👨🏼","👨🏽‍❤️‍💋‍👨🏽","👨🏽‍❤️‍💋‍👨🏾","👨🏽‍❤️‍💋‍👨🏿","👨🏽‍🌾","👨🏽‍🍳","👨🏽‍🍼","👨🏽‍🎓","👨🏽‍🎤","👨🏽‍🎨","👨🏽‍🏫","👨🏽‍🏭","👨🏽‍💻","👨🏽‍💼","👨🏽‍🔧","👨🏽‍🔬","👨🏽‍🚀","👨🏽‍🚒","👨🏽‍🤝‍👨🏻","👨🏽‍🤝‍👨🏼","👨🏽‍🤝‍👨🏾","👨🏽‍🤝‍👨🏿","👨🏽‍🦯","👨🏽‍🦰","👨🏽‍🦱","👨🏽‍🦲","👨🏽‍🦳","👨🏽‍🦼","👨🏽‍🦽","👨🏾","👨🏾‍⚕️","👨🏾‍⚖️","👨🏾‍✈️","👨🏾‍❤️‍👨🏻","👨🏾‍❤️‍👨🏼","👨🏾‍❤️‍👨🏽","👨🏾‍❤️‍👨🏾","👨🏾‍❤️‍👨🏿","👨🏾‍❤️‍💋‍👨🏻","👨🏾‍❤️‍💋‍👨🏼","👨🏾‍❤️‍💋‍👨🏽","👨🏾‍❤️‍💋‍👨🏾","👨🏾‍❤️‍💋‍👨🏿","👨🏾‍🌾","👨🏾‍🍳","👨🏾‍🍼","👨🏾‍🎓","👨🏾‍🎤","👨🏾‍🎨","👨🏾‍🏫","👨🏾‍🏭","👨🏾‍💻","👨🏾‍💼","👨🏾‍🔧","👨🏾‍🔬","👨🏾‍🚀","👨🏾‍🚒","👨🏾‍🤝‍👨🏻","👨🏾‍🤝‍👨🏼","👨🏾‍🤝‍👨🏽","👨🏾‍🤝‍👨🏿","👨🏾‍🦯","👨🏾‍🦰","👨🏾‍🦱","👨🏾‍🦲","👨🏾‍🦳","👨🏾‍🦼","👨🏾‍🦽","👨🏿","👨🏿‍⚕️","👨🏿‍⚖️","👨🏿‍✈️","👨🏿‍❤️‍👨🏻","👨🏿‍❤️‍👨🏼","👨🏿‍❤️‍👨🏽","👨🏿‍❤️‍👨🏾","👨🏿‍❤️‍👨🏿","👨🏿‍❤️‍💋‍👨🏻","👨🏿‍❤️‍💋‍👨🏼","👨🏿‍❤️‍💋‍👨🏽","👨🏿‍❤️‍💋‍👨🏾","👨🏿‍❤️‍💋‍👨🏿","👨🏿‍🌾","👨🏿‍🍳","👨🏿‍🍼","👨🏿‍🎓","👨🏿‍🎤","👨🏿‍🎨","👨🏿‍🏫","👨🏿‍🏭","👨🏿‍💻","👨🏿‍💼","👨🏿‍🔧","👨🏿‍🔬","👨🏿‍🚀","👨🏿‍🚒","👨🏿‍🤝‍👨🏻","👨🏿‍🤝‍👨🏼","👨🏿‍🤝‍👨🏽","👨🏿‍🤝‍👨🏾","👨🏿‍🦯","👨🏿‍🦰","👨🏿‍🦱","👨🏿‍🦲","👨🏿‍🦳","👨🏿‍🦼","👨🏿‍🦽","👩‍⚕️","👩‍⚖️","👩‍✈️","👩‍❤️‍👨","👩‍❤️‍👩","👩‍❤️‍💋‍👨","👩‍❤️‍💋‍👩","👩‍🌾","👩‍🍳","👩‍🍼","👩‍🎓","👩‍🎤","👩‍🎨","👩‍🏫","👩‍🏭","👩‍👦","👩‍👦‍👦","👩‍👧","👩‍👧‍👦","👩‍👧‍👧","👩‍👩‍👦","👩‍👩‍👦‍👦","👩‍👩‍👧","👩‍👩‍👧‍👦","👩‍👩‍👧‍👧","👩‍💻","👩‍💼","👩‍🔧","👩‍🔬","👩‍🚀","👩‍🚒","👩‍🦯","👩‍🦰","👩‍🦱","👩‍🦲","👩‍🦳","👩‍🦼","👩‍🦽","👩🏻","👩🏻‍⚕️","👩🏻‍⚖️","👩🏻‍✈️","👩🏻‍❤️‍👨🏻","👩🏻‍❤️‍👨🏼","👩🏻‍❤️‍👨🏽","👩🏻‍❤️‍👨🏾","👩🏻‍❤️‍👨🏿","👩🏻‍❤️‍👩🏻","👩🏻‍❤️‍👩🏼","👩🏻‍❤️‍👩🏽","👩🏻‍❤️‍👩🏾","👩🏻‍❤️‍👩🏿","👩🏻‍❤️‍💋‍👨🏻","👩🏻‍❤️‍💋‍👨🏼","👩🏻‍❤️‍💋‍👨🏽","👩🏻‍❤️‍💋‍👨🏾","👩🏻‍❤️‍💋‍👨🏿","👩🏻‍❤️‍💋‍👩🏻","👩🏻‍❤️‍💋‍👩🏼","👩🏻‍❤️‍💋‍👩🏽","👩🏻‍❤️‍💋‍👩🏾","👩🏻‍❤️‍💋‍👩🏿","👩🏻‍🌾","👩🏻‍🍳","👩🏻‍🍼","👩🏻‍🎓","👩🏻‍🎤","👩🏻‍🎨","👩🏻‍🏫","👩🏻‍🏭","👩🏻‍💻","👩🏻‍💼","👩🏻‍🔧","👩🏻‍🔬","👩🏻‍🚀","👩🏻‍🚒","👩🏻‍🤝‍👨🏼","👩🏻‍🤝‍👨🏽","👩🏻‍🤝‍👨🏾","👩🏻‍🤝‍👨🏿","👩🏻‍🤝‍👩🏼","👩🏻‍🤝‍👩🏽","👩🏻‍🤝‍👩🏾","👩🏻‍🤝‍👩🏿","👩🏻‍🦯","👩🏻‍🦰","👩🏻‍🦱","👩🏻‍🦲","👩🏻‍🦳","👩🏻‍🦼","👩🏻‍🦽","👩🏼","👩🏼‍⚕️","👩🏼‍⚖️","👩🏼‍✈️","👩🏼‍❤️‍👨🏻","👩🏼‍❤️‍👨🏼","👩🏼‍❤️‍👨🏽","👩🏼‍❤️‍👨🏾","👩🏼‍❤️‍👨🏿","👩🏼‍❤️‍👩🏻","👩🏼‍❤️‍👩🏼","👩🏼‍❤️‍👩🏽","👩🏼‍❤️‍👩🏾","👩🏼‍❤️‍👩🏿","👩🏼‍❤️‍💋‍👨🏻","👩🏼‍❤️‍💋‍👨🏼","👩🏼‍❤️‍💋‍👨🏽","👩🏼‍❤️‍💋‍👨🏾","👩🏼‍❤️‍💋‍👨🏿","👩🏼‍❤️‍💋‍👩🏻","👩🏼‍❤️‍💋‍👩🏼","👩🏼‍❤️‍💋‍👩🏽","👩🏼‍❤️‍💋‍👩🏾","👩🏼‍❤️‍💋‍👩🏿","👩🏼‍🌾","👩🏼‍🍳","👩🏼‍🍼","👩🏼‍🎓","👩🏼‍🎤","👩🏼‍🎨","👩🏼‍🏫","👩🏼‍🏭","👩🏼‍💻","👩🏼‍💼","👩🏼‍🔧","👩🏼‍🔬","👩🏼‍🚀","👩🏼‍🚒","👩🏼‍🤝‍👨🏻","👩🏼‍🤝‍👨🏽","👩🏼‍🤝‍👨🏾","👩🏼‍🤝‍👨🏿","👩🏼‍🤝‍👩🏻","👩🏼‍🤝‍👩🏽","👩🏼‍🤝‍👩🏾","👩🏼‍🤝‍👩🏿","👩🏼‍🦯","👩🏼‍🦰","👩🏼‍🦱","👩🏼‍🦲","👩🏼‍🦳","👩🏼‍🦼","👩🏼‍🦽","👩🏽","👩🏽‍⚕️","👩🏽‍⚖️","👩🏽‍✈️","👩🏽‍❤️‍👨🏻","👩🏽‍❤️‍👨🏼","👩🏽‍❤️‍👨🏽","👩🏽‍❤️‍👨🏾","👩🏽‍❤️‍👨🏿","👩🏽‍❤️‍👩🏻","👩🏽‍❤️‍👩🏼","👩🏽‍❤️‍👩🏽","👩🏽‍❤️‍👩🏾","👩🏽‍❤️‍👩🏿","👩🏽‍❤️‍💋‍👨🏻","👩🏽‍❤️‍💋‍👨🏼","👩🏽‍❤️‍💋‍👨🏽","👩🏽‍❤️‍💋‍👨🏾","👩🏽‍❤️‍💋‍👨🏿","👩🏽‍❤️‍💋‍👩🏻","👩🏽‍❤️‍💋‍👩🏼","👩🏽‍❤️‍💋‍👩🏽","👩🏽‍❤️‍💋‍👩🏾","👩🏽‍❤️‍💋‍👩🏿","👩🏽‍🌾","👩🏽‍🍳","👩🏽‍🍼","👩🏽‍🎓","👩🏽‍🎤","👩🏽‍🎨","👩🏽‍🏫","👩🏽‍🏭","👩🏽‍💻","👩🏽‍💼","👩🏽‍🔧","👩🏽‍🔬","👩🏽‍🚀","👩🏽‍🚒","👩🏽‍🤝‍👨🏻","👩🏽‍🤝‍👨🏼","👩🏽‍🤝‍👨🏾","👩🏽‍🤝‍👨🏿","👩🏽‍🤝‍👩🏻","👩🏽‍🤝‍👩🏼","👩🏽‍🤝‍👩🏾","👩🏽‍🤝‍👩🏿","👩🏽‍🦯","👩🏽‍🦰","👩🏽‍🦱","👩🏽‍🦲","👩🏽‍🦳","👩🏽‍🦼","👩🏽‍🦽","👩🏾","👩🏾‍⚕️","👩🏾‍⚖️","👩🏾‍✈️","👩🏾‍❤️‍👨🏻","👩🏾‍❤️‍👨🏼","👩🏾‍❤️‍👨🏽","👩🏾‍❤️‍👨🏾","👩🏾‍❤️‍👨🏿","👩🏾‍❤️‍👩🏻","👩🏾‍❤️‍👩🏼","👩🏾‍❤️‍👩🏽","👩🏾‍❤️‍👩🏾","👩🏾‍❤️‍👩🏿","👩🏾‍❤️‍💋‍👨🏻","👩🏾‍❤️‍💋‍👨🏼","👩🏾‍❤️‍💋‍👨🏽","👩🏾‍❤️‍💋‍👨🏾","👩🏾‍❤️‍💋‍👨🏿","👩🏾‍❤️‍💋‍👩🏻","👩🏾‍❤️‍💋‍👩🏼","👩🏾‍❤️‍💋‍👩🏽","👩🏾‍❤️‍💋‍👩🏾","👩🏾‍❤️‍💋‍👩🏿","👩🏾‍🌾","👩🏾‍🍳","👩🏾‍🍼","👩🏾‍🎓","👩🏾‍🎤","👩🏾‍🎨","👩🏾‍🏫","👩🏾‍🏭","👩🏾‍💻","👩🏾‍💼","👩🏾‍🔧","👩🏾‍🔬","👩🏾‍🚀","👩🏾‍🚒","👩🏾‍🤝‍👨🏻","👩🏾‍🤝‍👨🏼","👩🏾‍🤝‍👨🏽","👩🏾‍🤝‍👨🏿","👩🏾‍🤝‍👩🏻","👩🏾‍🤝‍👩🏼","👩🏾‍🤝‍👩🏽","👩🏾‍🤝‍👩🏿","👩🏾‍🦯","👩🏾‍🦰","👩🏾‍🦱","👩🏾‍🦲","👩🏾‍🦳","👩🏾‍🦼","👩🏾‍🦽","👩🏿","👩🏿‍⚕️","👩🏿‍⚖️","👩🏿‍✈️","👩🏿‍❤️‍👨🏻","👩🏿‍❤️‍👨🏼","👩🏿‍❤️‍👨🏽","👩🏿‍❤️‍👨🏾","👩🏿‍❤️‍👨🏿","👩🏿‍❤️‍👩🏻","👩🏿‍❤️‍👩🏼","👩🏿‍❤️‍👩🏽","👩🏿‍❤️‍👩🏾","👩🏿‍❤️‍👩🏿","👩🏿‍❤️‍💋‍👨🏻","👩🏿‍❤️‍💋‍👨🏼","👩🏿‍❤️‍💋‍👨🏽","👩🏿‍❤️‍💋‍👨🏾","👩🏿‍❤️‍💋‍👨🏿","👩🏿‍❤️‍💋‍👩🏻","👩🏿‍❤️‍💋‍👩🏼","👩🏿‍❤️‍💋‍👩🏽","👩🏿‍❤️‍💋‍👩🏾","👩🏿‍❤️‍💋‍👩🏿","👩🏿‍🌾","👩🏿‍🍳","👩🏿‍🍼","👩🏿‍🎓","👩🏿‍🎤","👩🏿‍🎨","👩🏿‍🏫","👩🏿‍🏭","👩🏿‍💻","👩🏿‍💼","👩🏿‍🔧","👩🏿‍🔬","👩🏿‍🚀","👩🏿‍🚒","👩🏿‍🤝‍👨🏻","👩🏿‍🤝‍👨🏼","👩🏿‍🤝‍👨🏽","👩🏿‍🤝‍👨🏾","👩🏿‍🤝‍👩🏻","👩🏿‍🤝‍👩🏼","👩🏿‍🤝‍👩🏽","👩🏿‍🤝‍👩🏾","👩🏿‍🦯","👩🏿‍🦰","👩🏿‍🦱","👩🏿‍🦲","👩🏿‍🦳","👩🏿‍🦼","👩🏿‍🦽","👫🏻","👫🏼","👫🏽","👫🏾","👫🏿","👬🏻","👬🏼","👬🏽","👬🏾","👬🏿","👭🏻","👭🏼","👭🏽","👭🏾","👭🏿","👮‍♀️","👮‍♂️","👮🏻","👮🏻‍♀️","👮🏻‍♂️","👮🏼","👮🏼‍♀️","👮🏼‍♂️","👮🏽","👮🏽‍♀️","👮🏽‍♂️","👮🏾","👮🏾‍♀️","👮🏾‍♂️","👮🏿","👮🏿‍♀️","👮🏿‍♂️","👯‍♀️","👯‍♂️","👰‍♀️","👰‍♂️","👰🏻","👰🏻‍♀️","👰🏻‍♂️","👰🏼","👰🏼‍♀️","👰🏼‍♂️","👰🏽","👰🏽‍♀️","👰🏽‍♂️","👰🏾","👰🏾‍♀️","👰🏾‍♂️","👰🏿","👰🏿‍♀️","👰🏿‍♂️","👱‍♀️","👱‍♂️","👱🏻","👱🏻‍♀️","👱🏻‍♂️","👱🏼","👱🏼‍♀️","👱🏼‍♂️","👱🏽","👱🏽‍♀️","👱🏽‍♂️","👱🏾","👱🏾‍♀️","👱🏾‍♂️","👱🏿","👱🏿‍♀️","👱🏿‍♂️","👲🏻","👲🏼","👲🏽","👲🏾","👲🏿","👳‍♀️","👳‍♂️","👳🏻","👳🏻‍♀️","👳🏻‍♂️","👳🏼","👳🏼‍♀️","👳🏼‍♂️","👳🏽","👳🏽‍♀️","👳🏽‍♂️","👳🏾","👳🏾‍♀️","👳🏾‍♂️","👳🏿","👳🏿‍♀️","👳🏿‍♂️","👴🏻","👴🏼","👴🏽","👴🏾","👴🏿","👵🏻","👵🏼","👵🏽","👵🏾","👵🏿","👶🏻","👶🏼","👶🏽","👶🏾","👶🏿","👷‍♀️","👷‍♂️","👷🏻","👷🏻‍♀️","👷🏻‍♂️","👷🏼","👷🏼‍♀️","👷🏼‍♂️","👷🏽","👷🏽‍♀️","👷🏽‍♂️","👷🏾","👷🏾‍♀️","👷🏾‍♂️","👷🏿","👷🏿‍♀️","👷🏿‍♂️","👸🏻","👸🏼","👸🏽","👸🏾","👸🏿","👼🏻","👼🏼","👼🏽","👼🏾","👼🏿","💁‍♀️","💁‍♂️","💁🏻","💁🏻‍♀️","💁🏻‍♂️","💁🏼","💁🏼‍♀️","💁🏼‍♂️","💁🏽","💁🏽‍♀️","💁🏽‍♂️","💁🏾","💁🏾‍♀️","💁🏾‍♂️","💁🏿","💁🏿‍♀️","💁🏿‍♂️","💂‍♀️","💂‍♂️","💂🏻","💂🏻‍♀️","💂🏻‍♂️","💂🏼","💂🏼‍♀️","💂🏼‍♂️","💂🏽","💂🏽‍♀️","💂🏽‍♂️","💂🏾","💂🏾‍♀️","💂🏾‍♂️","💂🏿","💂🏿‍♀️","💂🏿‍♂️","💃🏻","💃🏼","💃🏽","💃🏾","💃🏿","💅🏻","💅🏼","💅🏽","💅🏾","💅🏿","💆‍♀️","💆‍♂️","💆🏻","💆🏻‍♀️","💆🏻‍♂️","💆🏼","💆🏼‍♀️","💆🏼‍♂️","💆🏽","💆🏽‍♀️","💆🏽‍♂️","💆🏾","💆🏾‍♀️","💆🏾‍♂️","💆🏿","💆🏿‍♀️","💆🏿‍♂️","💇‍♀️","💇‍♂️","💇🏻","💇🏻‍♀️","💇🏻‍♂️","💇🏼","💇🏼‍♀️","💇🏼‍♂️","💇🏽","💇🏽‍♀️","💇🏽‍♂️","💇🏾","💇🏾‍♀️","💇🏾‍♂️","💇🏿","💇🏿‍♀️","💇🏿‍♂️","💏🏻","💏🏼","💏🏽","💏🏾","💏🏿","💑🏻","💑🏼","💑🏽","💑🏾","💑🏿","💪🏻","💪🏼","💪🏽","💪🏾","💪🏿","📽️","🕉️","🕊️","🕯️","🕰️","🕳️","🕴🏻","🕴🏼","🕴🏽","🕴🏾","🕴🏿","🕴️","🕵🏻","🕵🏻‍♀️","🕵🏻‍♂️","🕵🏼","🕵🏼‍♀️","🕵🏼‍♂️","🕵🏽","🕵🏽‍♀️","🕵🏽‍♂️","🕵🏾","🕵🏾‍♀️","🕵🏾‍♂️","🕵🏿","🕵🏿‍♀️","🕵🏿‍♂️","🕵️","🕵️‍♀️","🕵️‍♂️","🕶️","🕷️","🕸️","🕹️","🕺🏻","🕺🏼","🕺🏽","🕺🏾","🕺🏿","🖇️","🖊️","🖋️","🖌️","🖍️","🖐🏻","🖐🏼","🖐🏽","🖐🏾","🖐🏿","🖐️","🖕🏻","🖕🏼","🖕🏽","🖕🏾","🖕🏿","🖖🏻","🖖🏼","🖖🏽","🖖🏾","🖖🏿","🖥️","🖨️","🖱️","🖲️","🖼️","🗂️","🗃️","🗄️","🗑️","🗒️","🗓️","🗜️","🗝️","🗞️","🗡️","🗣️","🗨️","🗯️","🗳️","🗺️","😮‍💨","😵‍💫","😶‍🌫️","🙅‍♀️","🙅‍♂️","🙅🏻","🙅🏻‍♀️","🙅🏻‍♂️","🙅🏼","🙅🏼‍♀️","🙅🏼‍♂️","🙅🏽","🙅🏽‍♀️","🙅🏽‍♂️","🙅🏾","🙅🏾‍♀️","🙅🏾‍♂️","🙅🏿","🙅🏿‍♀️","🙅🏿‍♂️","🙆‍♀️","🙆‍♂️","🙆🏻","🙆🏻‍♀️","🙆🏻‍♂️","🙆🏼","🙆🏼‍♀️","🙆🏼‍♂️","🙆🏽","🙆🏽‍♀️","🙆🏽‍♂️","🙆🏾","🙆🏾‍♀️","🙆🏾‍♂️","🙆🏿","🙆🏿‍♀️","🙆🏿‍♂️","🙇‍♀️","🙇‍♂️","🙇🏻","🙇🏻‍♀️","🙇🏻‍♂️","🙇🏼","🙇🏼‍♀️","🙇🏼‍♂️","🙇🏽","🙇🏽‍♀️","🙇🏽‍♂️","🙇🏾","🙇🏾‍♀️","🙇🏾‍♂️","🙇🏿","🙇🏿‍♀️","🙇🏿‍♂️","🙋‍♀️","🙋‍♂️","🙋🏻","🙋🏻‍♀️","🙋🏻‍♂️","🙋🏼","🙋🏼‍♀️","🙋🏼‍♂️","🙋🏽","🙋🏽‍♀️","🙋🏽‍♂️","🙋🏾","🙋🏾‍♀️","🙋🏾‍♂️","🙋🏿","🙋🏿‍♀️","🙋🏿‍♂️","🙌🏻","🙌🏼","🙌🏽","🙌🏾","🙌🏿","🙍‍♀️","🙍‍♂️","🙍🏻","🙍🏻‍♀️","🙍🏻‍♂️","🙍🏼","🙍🏼‍♀️","🙍🏼‍♂️","🙍🏽","🙍🏽‍♀️","🙍🏽‍♂️","🙍🏾","🙍🏾‍♀️","🙍🏾‍♂️","🙍🏿","🙍🏿‍♀️","🙍🏿‍♂️","🙎‍♀️","🙎‍♂️","🙎🏻","🙎🏻‍♀️","🙎🏻‍♂️","🙎🏼","🙎🏼‍♀️","🙎🏼‍♂️","🙎🏽","🙎🏽‍♀️","🙎🏽‍♂️","🙎🏾","🙎🏾‍♀️","🙎🏾‍♂️","🙎🏿","🙎🏿‍♀️","🙎🏿‍♂️","🙏🏻","🙏🏼","🙏🏽","🙏🏾","🙏🏿","🚣‍♀️","🚣‍♂️","🚣🏻","🚣🏻‍♀️","🚣🏻‍♂️","🚣🏼","🚣🏼‍♀️","🚣🏼‍♂️","🚣🏽","🚣🏽‍♀️","🚣🏽‍♂️","🚣🏾","🚣🏾‍♀️","🚣🏾‍♂️","🚣🏿","🚣🏿‍♀️","🚣🏿‍♂️","🚴‍♀️","🚴‍♂️","🚴🏻","🚴🏻‍♀️","🚴🏻‍♂️","🚴🏼","🚴🏼‍♀️","🚴🏼‍♂️","🚴🏽","🚴🏽‍♀️","🚴🏽‍♂️","🚴🏾","🚴🏾‍♀️","🚴🏾‍♂️","🚴🏿","🚴🏿‍♀️","🚴🏿‍♂️","🚵‍♀️","🚵‍♂️","🚵🏻","🚵🏻‍♀️","🚵🏻‍♂️","🚵🏼","🚵🏼‍♀️","🚵🏼‍♂️","🚵🏽","🚵🏽‍♀️","🚵🏽‍♂️","🚵🏾","🚵🏾‍♀️","🚵🏾‍♂️","🚵🏿","🚵🏿‍♀️","🚵🏿‍♂️","🚶‍♀️","🚶‍♂️","🚶🏻","🚶🏻‍♀️","🚶🏻‍♂️","🚶🏼","🚶🏼‍♀️","🚶🏼‍♂️","🚶🏽","🚶🏽‍♀️","🚶🏽‍♂️","🚶🏾","🚶🏾‍♀️","🚶🏾‍♂️","🚶🏿","🚶🏿‍♀️","🚶🏿‍♂️","🛀🏻","🛀🏼","🛀🏽","🛀🏾","🛀🏿","🛋️","🛌🏻","🛌🏼","🛌🏽","🛌🏾","🛌🏿","🛍️","🛎️","🛏️","🛠️","🛡️","🛢️","🛣️","🛤️","🛥️","🛩️","🛰️","🛳️","🤌🏻","🤌🏼","🤌🏽","🤌🏾","🤌🏿","🤏🏻","🤏🏼","🤏🏽","🤏🏾","🤏🏿","🤘🏻","🤘🏼","🤘🏽","🤘🏾","🤘🏿","🤙🏻","🤙🏼","🤙🏽","🤙🏾","🤙🏿","🤚🏻","🤚🏼","🤚🏽","🤚🏾","🤚🏿","🤛🏻","🤛🏼","🤛🏽","🤛🏾","🤛🏿","🤜🏻","🤜🏼","🤜🏽","🤜🏾","🤜🏿","🤝🏻","🤝🏼","🤝🏽","🤝🏾","🤝🏿","🤞🏻","🤞🏼","🤞🏽","🤞🏾","🤞🏿","🤟🏻","🤟🏼","🤟🏽","🤟🏾","🤟🏿","🤦‍♀️","🤦‍♂️","🤦🏻","🤦🏻‍♀️","🤦🏻‍♂️","🤦🏼","🤦🏼‍♀️","🤦🏼‍♂️","🤦🏽","🤦🏽‍♀️","🤦🏽‍♂️","🤦🏾","🤦🏾‍♀️","🤦🏾‍♂️","🤦🏿","🤦🏿‍♀️","🤦🏿‍♂️","🤰🏻","🤰🏼","🤰🏽","🤰🏾","🤰🏿","🤱🏻","🤱🏼","🤱🏽","🤱🏾","🤱🏿","🤲🏻","🤲🏼","🤲🏽","🤲🏾","🤲🏿","🤳🏻","🤳🏼","🤳🏽","🤳🏾","🤳🏿","🤴🏻","🤴🏼","🤴🏽","🤴🏾","🤴🏿","🤵‍♀️","🤵‍♂️","🤵🏻","🤵🏻‍♀️","🤵🏻‍♂️","🤵🏼","🤵🏼‍♀️","🤵🏼‍♂️","🤵🏽","🤵🏽‍♀️","🤵🏽‍♂️","🤵🏾","🤵🏾‍♀️","🤵🏾‍♂️","🤵🏿","🤵🏿‍♀️","🤵🏿‍♂️","🤶🏻","🤶🏼","🤶🏽","🤶🏾","🤶🏿","🤷‍♀️","🤷‍♂️","🤷🏻","🤷🏻‍♀️","🤷🏻‍♂️","🤷🏼","🤷🏼‍♀️","🤷🏼‍♂️","🤷🏽","🤷🏽‍♀️","🤷🏽‍♂️","🤷🏾","🤷🏾‍♀️","🤷🏾‍♂️","🤷🏿","🤷🏿‍♀️","🤷🏿‍♂️","🤸‍♀️","🤸‍♂️","🤸🏻","🤸🏻‍♀️","🤸🏻‍♂️","🤸🏼","🤸🏼‍♀️","🤸🏼‍♂️","🤸🏽","🤸🏽‍♀️","🤸🏽‍♂️","🤸🏾","🤸🏾‍♀️","🤸🏾‍♂️","🤸🏿","🤸🏿‍♀️","🤸🏿‍♂️","🤹‍♀️","🤹‍♂️","🤹🏻","🤹🏻‍♀️","🤹🏻‍♂️","🤹🏼","🤹🏼‍♀️","🤹🏼‍♂️","🤹🏽","🤹🏽‍♀️","🤹🏽‍♂️","🤹🏾","🤹🏾‍♀️","🤹🏾‍♂️","🤹🏿","🤹🏿‍♀️","🤹🏿‍♂️","🤼‍♀️","🤼‍♂️","🤽‍♀️","🤽‍♂️","🤽🏻","🤽🏻‍♀️","🤽🏻‍♂️","🤽🏼","🤽🏼‍♀️","🤽🏼‍♂️","🤽🏽","🤽🏽‍♀️","🤽🏽‍♂️","🤽🏾","🤽🏾‍♀️","🤽🏾‍♂️","🤽🏿","🤽🏿‍♀️","🤽🏿‍♂️","🤾‍♀️","🤾‍♂️","🤾🏻","🤾🏻‍♀️","🤾🏻‍♂️","🤾🏼","🤾🏼‍♀️","🤾🏼‍♂️","🤾🏽","🤾🏽‍♀️","🤾🏽‍♂️","🤾🏾","🤾🏾‍♀️","🤾🏾‍♂️","🤾🏿","🤾🏿‍♀️","🤾🏿‍♂️","🥷🏻","🥷🏼","🥷🏽","🥷🏾","🥷🏿","🦵🏻","🦵🏼","🦵🏽","🦵🏾","🦵🏿","🦶🏻","🦶🏼","🦶🏽","🦶🏾","🦶🏿","🦸‍♀️","🦸‍♂️","🦸🏻","🦸🏻‍♀️","🦸🏻‍♂️","🦸🏼","🦸🏼‍♀️","🦸🏼‍♂️","🦸🏽","🦸🏽‍♀️","🦸🏽‍♂️","🦸🏾","🦸🏾‍♀️","🦸🏾‍♂️","🦸🏿","🦸🏿‍♀️","🦸🏿‍♂️","🦹‍♀️","🦹‍♂️","🦹🏻","🦹🏻‍♀️","🦹🏻‍♂️","🦹🏼","🦹🏼‍♀️","🦹🏼‍♂️","🦹🏽","🦹🏽‍♀️","🦹🏽‍♂️","🦹🏾","🦹🏾‍♀️","🦹🏾‍♂️","🦹🏿","🦹🏿‍♀️","🦹🏿‍♂️","🦻🏻","🦻🏼","🦻🏽","🦻🏾","🦻🏿","🧍‍♀️","🧍‍♂️","🧍🏻","🧍🏻‍♀️","🧍🏻‍♂️","🧍🏼","🧍🏼‍♀️","🧍🏼‍♂️","🧍🏽","🧍🏽‍♀️","🧍🏽‍♂️","🧍🏾","🧍🏾‍♀️","🧍🏾‍♂️","🧍🏿","🧍🏿‍♀️","🧍🏿‍♂️","🧎‍♀️","🧎‍♂️","🧎🏻","🧎🏻‍♀️","🧎🏻‍♂️","🧎🏼","🧎🏼‍♀️","🧎🏼‍♂️","🧎🏽","🧎🏽‍♀️","🧎🏽‍♂️","🧎🏾","🧎🏾‍♀️","🧎🏾‍♂️","🧎🏿","🧎🏿‍♀️","🧎🏿‍♂️","🧏‍♀️","🧏‍♂️","🧏🏻","🧏🏻‍♀️","🧏🏻‍♂️","🧏🏼","🧏🏼‍♀️","🧏🏼‍♂️","🧏🏽","🧏🏽‍♀️","🧏🏽‍♂️","🧏🏾","🧏🏾‍♀️","🧏🏾‍♂️","🧏🏿","🧏🏿‍♀️","🧏🏿‍♂️","🧑‍⚕️","🧑‍⚖️","🧑‍✈️","🧑‍🌾","🧑‍🍳","🧑‍🍼","🧑‍🎄","🧑‍🎓","🧑‍🎤","🧑‍🎨","🧑‍🏫","🧑‍🏭","🧑‍💻","🧑‍💼","🧑‍🔧","🧑‍🔬","🧑‍🚀","🧑‍🚒","🧑‍🤝‍🧑","🧑‍🦯","🧑‍🦰","🧑‍🦱","🧑‍🦲","🧑‍🦳","🧑‍🦼","🧑‍🦽","🧑🏻","🧑🏻‍⚕️","🧑🏻‍⚖️","🧑🏻‍✈️","🧑🏻‍❤️‍💋‍🧑🏼","🧑🏻‍❤️‍💋‍🧑🏽","🧑🏻‍❤️‍💋‍🧑🏾","🧑🏻‍❤️‍💋‍🧑🏿","🧑🏻‍❤️‍🧑🏼","🧑🏻‍❤️‍🧑🏽","🧑🏻‍❤️‍🧑🏾","🧑🏻‍❤️‍🧑🏿","🧑🏻‍🌾","🧑🏻‍🍳","🧑🏻‍🍼","🧑🏻‍🎄","🧑🏻‍🎓","🧑🏻‍🎤","🧑🏻‍🎨","🧑🏻‍🏫","🧑🏻‍🏭","🧑🏻‍💻","🧑🏻‍💼","🧑🏻‍🔧","🧑🏻‍🔬","🧑🏻‍🚀","🧑🏻‍🚒","🧑🏻‍🤝‍🧑🏻","🧑🏻‍🤝‍🧑🏼","🧑🏻‍🤝‍🧑🏽","🧑🏻‍🤝‍🧑🏾","🧑🏻‍🤝‍🧑🏿","🧑🏻‍🦯","🧑🏻‍🦰","🧑🏻‍🦱","🧑🏻‍🦲","🧑🏻‍🦳","🧑🏻‍🦼","🧑🏻‍🦽","🧑🏼","🧑🏼‍⚕️","🧑🏼‍⚖️","🧑🏼‍✈️","🧑🏼‍❤️‍💋‍🧑🏻","🧑🏼‍❤️‍💋‍🧑🏽","🧑🏼‍❤️‍💋‍🧑🏾","🧑🏼‍❤️‍💋‍🧑🏿","🧑🏼‍❤️‍🧑🏻","🧑🏼‍❤️‍🧑🏽","🧑🏼‍❤️‍🧑🏾","🧑🏼‍❤️‍🧑🏿","🧑🏼‍🌾","🧑🏼‍🍳","🧑🏼‍🍼","🧑🏼‍🎄","🧑🏼‍🎓","🧑🏼‍🎤","🧑🏼‍🎨","🧑🏼‍🏫","🧑🏼‍🏭","🧑🏼‍💻","🧑🏼‍💼","🧑🏼‍🔧","🧑🏼‍🔬","🧑🏼‍🚀","🧑🏼‍🚒","🧑🏼‍🤝‍🧑🏻","🧑🏼‍🤝‍🧑🏼","🧑🏼‍🤝‍🧑🏽","🧑🏼‍🤝‍🧑🏾","🧑🏼‍🤝‍🧑🏿","🧑🏼‍🦯","🧑🏼‍🦰","🧑🏼‍🦱","🧑🏼‍🦲","🧑🏼‍🦳","🧑🏼‍🦼","🧑🏼‍🦽","🧑🏽","🧑🏽‍⚕️","🧑🏽‍⚖️","🧑🏽‍✈️","🧑🏽‍❤️‍💋‍🧑🏻","🧑🏽‍❤️‍💋‍🧑🏼","🧑🏽‍❤️‍💋‍🧑🏾","🧑🏽‍❤️‍💋‍🧑🏿","🧑🏽‍❤️‍🧑🏻","🧑🏽‍❤️‍🧑🏼","🧑🏽‍❤️‍🧑🏾","🧑🏽‍❤️‍🧑🏿","🧑🏽‍🌾","🧑🏽‍🍳","🧑🏽‍🍼","🧑🏽‍🎄","🧑🏽‍🎓","🧑🏽‍🎤","🧑🏽‍🎨","🧑🏽‍🏫","🧑🏽‍🏭","🧑🏽‍💻","🧑🏽‍💼","🧑🏽‍🔧","🧑🏽‍🔬","🧑🏽‍🚀","🧑🏽‍🚒","🧑🏽‍🤝‍🧑🏻","🧑🏽‍🤝‍🧑🏼","🧑🏽‍🤝‍🧑🏽","🧑🏽‍🤝‍🧑🏾","🧑🏽‍🤝‍🧑🏿","🧑🏽‍🦯","🧑🏽‍🦰","🧑🏽‍🦱","🧑🏽‍🦲","🧑🏽‍🦳","🧑🏽‍🦼","🧑🏽‍🦽","🧑🏾","🧑🏾‍⚕️","🧑🏾‍⚖️","🧑🏾‍✈️","🧑🏾‍❤️‍💋‍🧑🏻","🧑🏾‍❤️‍💋‍🧑🏼","🧑🏾‍❤️‍💋‍🧑🏽","🧑🏾‍❤️‍💋‍🧑🏿","🧑🏾‍❤️‍🧑🏻","🧑🏾‍❤️‍🧑🏼","🧑🏾‍❤️‍🧑🏽","🧑🏾‍❤️‍🧑🏿","🧑🏾‍🌾","🧑🏾‍🍳","🧑🏾‍🍼","🧑🏾‍🎄","🧑🏾‍🎓","🧑🏾‍🎤","🧑🏾‍🎨","🧑🏾‍🏫","🧑🏾‍🏭","🧑🏾‍💻","🧑🏾‍💼","🧑🏾‍🔧","🧑🏾‍🔬","🧑🏾‍🚀","🧑🏾‍🚒","🧑🏾‍🤝‍🧑🏻","🧑🏾‍🤝‍🧑🏼","🧑🏾‍🤝‍🧑🏽","🧑🏾‍🤝‍🧑🏾","🧑🏾‍🤝‍🧑🏿","🧑🏾‍🦯","🧑🏾‍🦰","🧑🏾‍🦱","🧑🏾‍🦲","🧑🏾‍🦳","🧑🏾‍🦼","🧑🏾‍🦽","🧑🏿","🧑🏿‍⚕️","🧑🏿‍⚖️","🧑🏿‍✈️","🧑🏿‍❤️‍💋‍🧑🏻","🧑🏿‍❤️‍💋‍🧑🏼","🧑🏿‍❤️‍💋‍🧑🏽","🧑🏿‍❤️‍💋‍🧑🏾","🧑🏿‍❤️‍🧑🏻","🧑🏿‍❤️‍🧑🏼","🧑🏿‍❤️‍🧑🏽","🧑🏿‍❤️‍🧑🏾","🧑🏿‍🌾","🧑🏿‍🍳","🧑🏿‍🍼","🧑🏿‍🎄","🧑🏿‍🎓","🧑🏿‍🎤","🧑🏿‍🎨","🧑🏿‍🏫","🧑🏿‍🏭","🧑🏿‍💻","🧑🏿‍💼","🧑🏿‍🔧","🧑🏿‍🔬","🧑🏿‍🚀","🧑🏿‍🚒","🧑🏿‍🤝‍🧑🏻","🧑🏿‍🤝‍🧑🏼","🧑🏿‍🤝‍🧑🏽","🧑🏿‍🤝‍🧑🏾","🧑🏿‍🤝‍🧑🏿","🧑🏿‍🦯","🧑🏿‍🦰","🧑🏿‍🦱","🧑🏿‍🦲","🧑🏿‍🦳","🧑🏿‍🦼","🧑🏿‍🦽","🧒🏻","🧒🏼","🧒🏽","🧒🏾","🧒🏿","🧓🏻","🧓🏼","🧓🏽","🧓🏾","🧓🏿","🧔‍♀️","🧔‍♂️","🧔🏻","🧔🏻‍♀️","🧔🏻‍♂️","🧔🏼","🧔🏼‍♀️","🧔🏼‍♂️","🧔🏽","🧔🏽‍♀️","🧔🏽‍♂️","🧔🏾","🧔🏾‍♀️","🧔🏾‍♂️","🧔🏿","🧔🏿‍♀️","🧔🏿‍♂️","🧕🏻","🧕🏼","🧕🏽","🧕🏾","🧕🏿","🧖‍♀️","🧖‍♂️","🧖🏻","🧖🏻‍♀️","🧖🏻‍♂️","🧖🏼","🧖🏼‍♀️","🧖🏼‍♂️","🧖🏽","🧖🏽‍♀️","🧖🏽‍♂️","🧖🏾","🧖🏾‍♀️","🧖🏾‍♂️","🧖🏿","🧖🏿‍♀️","🧖🏿‍♂️","🧗‍♀️","🧗‍♂️","🧗🏻","🧗🏻‍♀️","🧗🏻‍♂️","🧗🏼","🧗🏼‍♀️","🧗🏼‍♂️","🧗🏽","🧗🏽‍♀️","🧗🏽‍♂️","🧗🏾","🧗🏾‍♀️","🧗🏾‍♂️","🧗🏿","🧗🏿‍♀️","🧗🏿‍♂️","🧘‍♀️","🧘‍♂️","🧘🏻","🧘🏻‍♀️","🧘🏻‍♂️","🧘🏼","🧘🏼‍♀️","🧘🏼‍♂️","🧘🏽","🧘🏽‍♀️","🧘🏽‍♂️","🧘🏾","🧘🏾‍♀️","🧘🏾‍♂️","🧘🏿","🧘🏿‍♀️","🧘🏿‍♂️","🧙‍♀️","🧙‍♂️","🧙🏻","🧙🏻‍♀️","🧙🏻‍♂️","🧙🏼","🧙🏼‍♀️","🧙🏼‍♂️","🧙🏽","🧙🏽‍♀️","🧙🏽‍♂️","🧙🏾","🧙🏾‍♀️","🧙🏾‍♂️","🧙🏿","🧙🏿‍♀️","🧙🏿‍♂️","🧚‍♀️","🧚‍♂️","🧚🏻","🧚🏻‍♀️","🧚🏻‍♂️","🧚🏼","🧚🏼‍♀️","🧚🏼‍♂️","🧚🏽","🧚🏽‍♀️","🧚🏽‍♂️","🧚🏾","🧚🏾‍♀️","🧚🏾‍♂️","🧚🏿","🧚🏿‍♀️","🧚🏿‍♂️","🧛‍♀️","🧛‍♂️","🧛🏻","🧛🏻‍♀️","🧛🏻‍♂️","🧛🏼","🧛🏼‍♀️","🧛🏼‍♂️","🧛🏽","🧛🏽‍♀️","🧛🏽‍♂️","🧛🏾","🧛🏾‍♀️","🧛🏾‍♂️","🧛🏿","🧛🏿‍♀️","🧛🏿‍♂️","🧜‍♀️","🧜‍♂️","🧜🏻","🧜🏻‍♀️","🧜🏻‍♂️","🧜🏼","🧜🏼‍♀️","🧜🏼‍♂️","🧜🏽","🧜🏽‍♀️","🧜🏽‍♂️","🧜🏾","🧜🏾‍♀️","🧜🏾‍♂️","🧜🏿","🧜🏿‍♀️","🧜🏿‍♂️","🧝‍♀️","🧝‍♂️","🧝🏻","🧝🏻‍♀️","🧝🏻‍♂️","🧝🏼","🧝🏼‍♀️","🧝🏼‍♂️","🧝🏽","🧝🏽‍♀️","🧝🏽‍♂️","🧝🏾","🧝🏾‍♀️","🧝🏾‍♂️","🧝🏿","🧝🏿‍♀️","🧝🏿‍♂️","🧞‍♀️","🧞‍♂️","🧟‍♀️","🧟‍♂️","🫃🏻","🫃🏼","🫃🏽","🫃🏾","🫃🏿","🫄🏻","🫄🏼","🫄🏽","🫄🏾","🫄🏿","🫅🏻","🫅🏼","🫅🏽","🫅🏾","🫅🏿","🫰🏻","🫰🏼","🫰🏽","🫰🏾","🫰🏿","🫱🏻","🫱🏻‍🫲🏼","🫱🏻‍🫲🏽","🫱🏻‍🫲🏾","🫱🏻‍🫲🏿","🫱🏼","🫱🏼‍🫲🏻","🫱🏼‍🫲🏽","🫱🏼‍🫲🏾","🫱🏼‍🫲🏿","🫱🏽","🫱🏽‍🫲🏻","🫱🏽‍🫲🏼","🫱🏽‍🫲🏾","🫱🏽‍🫲🏿","🫱🏾","🫱🏾‍🫲🏻","🫱🏾‍🫲🏼","🫱🏾‍🫲🏽","🫱🏾‍🫲🏿","🫱🏿","🫱🏿‍🫲🏻","🫱🏿‍🫲🏼","🫱🏿‍🫲🏽","🫱🏿‍🫲🏾","🫲🏻","🫲🏼","🫲🏽","🫲🏾","🫲🏿","🫳🏻","🫳🏼","🫳🏽","🫳🏾","🫳🏿","🫴🏻","🫴🏼","🫴🏽","🫴🏾","🫴🏿","🫵🏻","🫵🏼","🫵🏽","🫵🏾","🫵🏿","🫶🏻","🫶🏼","🫶🏽","🫶🏾","🫶🏿","🫷🏻","🫷🏼","🫷🏽","🫷🏾","🫷🏿","🫸🏻","🫸🏼","🫸🏽","🫸🏾","🫸🏿"]},43808:function(e,t,n){const a=n(45927)();t.characters=a,t.strings=["🇦🇨","🇦🇩","🇦🇪","🇦🇫","🇦🇬","🇦🇮","🇦🇱","🇦🇲","🇦🇴","🇦🇶","🇦🇷","🇦🇸","🇦🇹","🇦🇺","🇦🇼","🇦🇽","🇦🇿","🇧🇦","🇧🇧","🇧🇩","🇧🇪","🇧🇫","🇧🇬","🇧🇭","🇧🇮","🇧🇯","🇧🇱","🇧🇲","🇧🇳","🇧🇴","🇧🇶","🇧🇷","🇧🇸","🇧🇹","🇧🇻","🇧🇼","🇧🇾","🇧🇿","🇨🇦","🇨🇨","🇨🇩","🇨🇫","🇨🇬","🇨🇭","🇨🇮","🇨🇰","🇨🇱","🇨🇲","🇨🇳","🇨🇴","🇨🇵","🇨🇷","🇨🇺","🇨🇻","🇨🇼","🇨🇽","🇨🇾","🇨🇿","🇩🇪","🇩🇬","🇩🇯","🇩🇰","🇩🇲","🇩🇴","🇩🇿","🇪🇦","🇪🇨","🇪🇪","🇪🇬","🇪🇭","🇪🇷","🇪🇸","🇪🇹","🇪🇺","🇫🇮","🇫🇯","🇫🇰","🇫🇲","🇫🇴","🇫🇷","🇬🇦","🇬🇧","🇬🇩","🇬🇪","🇬🇫","🇬🇬","🇬🇭","🇬🇮","🇬🇱","🇬🇲","🇬🇳","🇬🇵","🇬🇶","🇬🇷","🇬🇸","🇬🇹","🇬🇺","🇬🇼","🇬🇾","🇭🇰","🇭🇲","🇭🇳","🇭🇷","🇭🇹","🇭🇺","🇮🇨","🇮🇩","🇮🇪","🇮🇱","🇮🇲","🇮🇳","🇮🇴","🇮🇶","🇮🇷","🇮🇸","🇮🇹","🇯🇪","🇯🇲","🇯🇴","🇯🇵","🇰🇪","🇰🇬","🇰🇭","🇰🇮","🇰🇲","🇰🇳","🇰🇵","🇰🇷","🇰🇼","🇰🇾","🇰🇿","🇱🇦","🇱🇧","🇱🇨","🇱🇮","🇱🇰","🇱🇷","🇱🇸","🇱🇹","🇱🇺","🇱🇻","🇱🇾","🇲🇦","🇲🇨","🇲🇩","🇲🇪","🇲🇫","🇲🇬","🇲🇭","🇲🇰","🇲🇱","🇲🇲","🇲🇳","🇲🇴","🇲🇵","🇲🇶","🇲🇷","🇲🇸","🇲🇹","🇲🇺","🇲🇻","🇲🇼","🇲🇽","🇲🇾","🇲🇿","🇳🇦","🇳🇨","🇳🇪","🇳🇫","🇳🇬","🇳🇮","🇳🇱","🇳🇴","🇳🇵","🇳🇷","🇳🇺","🇳🇿","🇴🇲","🇵🇦","🇵🇪","🇵🇫","🇵🇬","🇵🇭","🇵🇰","🇵🇱","🇵🇲","🇵🇳","🇵🇷","🇵🇸","🇵🇹","🇵🇼","🇵🇾","🇶🇦","🇷🇪","🇷🇴","🇷🇸","🇷🇺","🇷🇼","🇸🇦","🇸🇧","🇸🇨","🇸🇩","🇸🇪","🇸🇬","🇸🇭","🇸🇮","🇸🇯","🇸🇰","🇸🇱","🇸🇲","🇸🇳","🇸🇴","🇸🇷","🇸🇸","🇸🇹","🇸🇻","🇸🇽","🇸🇾","🇸🇿","🇹🇦","🇹🇨","🇹🇩","🇹🇫","🇹🇬","🇹🇭","🇹🇯","🇹🇰","🇹🇱","🇹🇲","🇹🇳","🇹🇴","🇹🇷","🇹🇹","🇹🇻","🇹🇼","🇹🇿","🇺🇦","🇺🇬","🇺🇲","🇺🇳","🇺🇸","🇺🇾","🇺🇿","🇻🇦","🇻🇨","🇻🇪","🇻🇬","🇻🇮","🇻🇳","🇻🇺","🇼🇫","🇼🇸","🇽🇰","🇾🇪","🇾🇹","🇿🇦","🇿🇲","🇿🇼"]},54006:function(e,t,n){const a=n(45927)();t.characters=a,t.strings=["☝🏻","☝🏼","☝🏽","☝🏾","☝🏿","⛹🏻","⛹🏼","⛹🏽","⛹🏾","⛹🏿","✊🏻","✊🏼","✊🏽","✊🏾","✊🏿","✋🏻","✋🏼","✋🏽","✋🏾","✋🏿","✌🏻","✌🏼","✌🏽","✌🏾","✌🏿","✍🏻","✍🏼","✍🏽","✍🏾","✍🏿","🎅🏻","🎅🏼","🎅🏽","🎅🏾","🎅🏿","🏂🏻","🏂🏼","🏂🏽","🏂🏾","🏂🏿","🏃🏻","🏃🏼","🏃🏽","🏃🏾","🏃🏿","🏄🏻","🏄🏼","🏄🏽","🏄🏾","🏄🏿","🏇🏻","🏇🏼","🏇🏽","🏇🏾","🏇🏿","🏊🏻","🏊🏼","🏊🏽","🏊🏾","🏊🏿","🏋🏻","🏋🏼","🏋🏽","🏋🏾","🏋🏿","🏌🏻","🏌🏼","🏌🏽","🏌🏾","🏌🏿","👂🏻","👂🏼","👂🏽","👂🏾","👂🏿","👃🏻","👃🏼","👃🏽","👃🏾","👃🏿","👆🏻","👆🏼","👆🏽","👆🏾","👆🏿","👇🏻","👇🏼","👇🏽","👇🏾","👇🏿","👈🏻","👈🏼","👈🏽","👈🏾","👈🏿","👉🏻","👉🏼","👉🏽","👉🏾","👉🏿","👊🏻","👊🏼","👊🏽","👊🏾","👊🏿","👋🏻","👋🏼","👋🏽","👋🏾","👋🏿","👌🏻","👌🏼","👌🏽","👌🏾","👌🏿","👍🏻","👍🏼","👍🏽","👍🏾","👍🏿","👎🏻","👎🏼","👎🏽","👎🏾","👎🏿","👏🏻","👏🏼","👏🏽","👏🏾","👏🏿","👐🏻","👐🏼","👐🏽","👐🏾","👐🏿","👦🏻","👦🏼","👦🏽","👦🏾","👦🏿","👧🏻","👧🏼","👧🏽","👧🏾","👧🏿","👨🏻","👨🏼","👨🏽","👨🏾","👨🏿","👩🏻","👩🏼","👩🏽","👩🏾","👩🏿","👫🏻","👫🏼","👫🏽","👫🏾","👫🏿","👬🏻","👬🏼","👬🏽","👬🏾","👬🏿","👭🏻","👭🏼","👭🏽","👭🏾","👭🏿","👮🏻","👮🏼","👮🏽","👮🏾","👮🏿","👰🏻","👰🏼","👰🏽","👰🏾","👰🏿","👱🏻","👱🏼","👱🏽","👱🏾","👱🏿","👲🏻","👲🏼","👲🏽","👲🏾","👲🏿","👳🏻","👳🏼","👳🏽","👳🏾","👳🏿","👴🏻","👴🏼","👴🏽","👴🏾","👴🏿","👵🏻","👵🏼","👵🏽","👵🏾","👵🏿","👶🏻","👶🏼","👶🏽","👶🏾","👶🏿","👷🏻","👷🏼","👷🏽","👷🏾","👷🏿","👸🏻","👸🏼","👸🏽","👸🏾","👸🏿","👼🏻","👼🏼","👼🏽","👼🏾","👼🏿","💁🏻","💁🏼","💁🏽","💁🏾","💁🏿","💂🏻","💂🏼","💂🏽","💂🏾","💂🏿","💃🏻","💃🏼","💃🏽","💃🏾","💃🏿","💅🏻","💅🏼","💅🏽","💅🏾","💅🏿","💆🏻","💆🏼","💆🏽","💆🏾","💆🏿","💇🏻","💇🏼","💇🏽","💇🏾","💇🏿","💏🏻","💏🏼","💏🏽","💏🏾","💏🏿","💑🏻","💑🏼","💑🏽","💑🏾","💑🏿","💪🏻","💪🏼","💪🏽","💪🏾","💪🏿","🕴🏻","🕴🏼","🕴🏽","🕴🏾","🕴🏿","🕵🏻","🕵🏼","🕵🏽","🕵🏾","🕵🏿","🕺🏻","🕺🏼","🕺🏽","🕺🏾","🕺🏿","🖐🏻","🖐🏼","🖐🏽","🖐🏾","🖐🏿","🖕🏻","🖕🏼","🖕🏽","🖕🏾","🖕🏿","🖖🏻","🖖🏼","🖖🏽","🖖🏾","🖖🏿","🙅🏻","🙅🏼","🙅🏽","🙅🏾","🙅🏿","🙆🏻","🙆🏼","🙆🏽","🙆🏾","🙆🏿","🙇🏻","🙇🏼","🙇🏽","🙇🏾","🙇🏿","🙋🏻","🙋🏼","🙋🏽","🙋🏾","🙋🏿","🙌🏻","🙌🏼","🙌🏽","🙌🏾","🙌🏿","🙍🏻","🙍🏼","🙍🏽","🙍🏾","🙍🏿","🙎🏻","🙎🏼","🙎🏽","🙎🏾","🙎🏿","🙏🏻","🙏🏼","🙏🏽","🙏🏾","🙏🏿","🚣🏻","🚣🏼","🚣🏽","🚣🏾","🚣🏿","🚴🏻","🚴🏼","🚴🏽","🚴🏾","🚴🏿","🚵🏻","🚵🏼","🚵🏽","🚵🏾","🚵🏿","🚶🏻","🚶🏼","🚶🏽","🚶🏾","🚶🏿","🛀🏻","🛀🏼","🛀🏽","🛀🏾","🛀🏿","🛌🏻","🛌🏼","🛌🏽","🛌🏾","🛌🏿","🤌🏻","🤌🏼","🤌🏽","🤌🏾","🤌🏿","🤏🏻","🤏🏼","🤏🏽","🤏🏾","🤏🏿","🤘🏻","🤘🏼","🤘🏽","🤘🏾","🤘🏿","🤙🏻","🤙🏼","🤙🏽","🤙🏾","🤙🏿","🤚🏻","🤚🏼","🤚🏽","🤚🏾","🤚🏿","🤛🏻","🤛🏼","🤛🏽","🤛🏾","🤛🏿","🤜🏻","🤜🏼","🤜🏽","🤜🏾","🤜🏿","🤝🏻","🤝🏼","🤝🏽","🤝🏾","🤝🏿","🤞🏻","🤞🏼","🤞🏽","🤞🏾","🤞🏿","🤟🏻","🤟🏼","🤟🏽","🤟🏾","🤟🏿","🤦🏻","🤦🏼","🤦🏽","🤦🏾","🤦🏿","🤰🏻","🤰🏼","🤰🏽","🤰🏾","🤰🏿","🤱🏻","🤱🏼","🤱🏽","🤱🏾","🤱🏿","🤲🏻","🤲🏼","🤲🏽","🤲🏾","🤲🏿","🤳🏻","🤳🏼","🤳🏽","🤳🏾","🤳🏿","🤴🏻","🤴🏼","🤴🏽","🤴🏾","🤴🏿","🤵🏻","🤵🏼","🤵🏽","🤵🏾","🤵🏿","🤶🏻","🤶🏼","🤶🏽","🤶🏾","🤶🏿","🤷🏻","🤷🏼","🤷🏽","🤷🏾","🤷🏿","🤸🏻","🤸🏼","🤸🏽","🤸🏾","🤸🏿","🤹🏻","🤹🏼","🤹🏽","🤹🏾","🤹🏿","🤽🏻","🤽🏼","🤽🏽","🤽🏾","🤽🏿","🤾🏻","🤾🏼","🤾🏽","🤾🏾","🤾🏿","🥷🏻","🥷🏼","🥷🏽","🥷🏾","🥷🏿","🦵🏻","🦵🏼","🦵🏽","🦵🏾","🦵🏿","🦶🏻","🦶🏼","🦶🏽","🦶🏾","🦶🏿","🦸🏻","🦸🏼","🦸🏽","🦸🏾","🦸🏿","🦹🏻","🦹🏼","🦹🏽","🦹🏾","🦹🏿","🦻🏻","🦻🏼","🦻🏽","🦻🏾","🦻🏿","🧍🏻","🧍🏼","🧍🏽","🧍🏾","🧍🏿","🧎🏻","🧎🏼","🧎🏽","🧎🏾","🧎🏿","🧏🏻","🧏🏼","🧏🏽","🧏🏾","🧏🏿","🧑🏻","🧑🏼","🧑🏽","🧑🏾","🧑🏿","🧒🏻","🧒🏼","🧒🏽","🧒🏾","🧒🏿","🧓🏻","🧓🏼","🧓🏽","🧓🏾","🧓🏿","🧔🏻","🧔🏼","🧔🏽","🧔🏾","🧔🏿","🧕🏻","🧕🏼","🧕🏽","🧕🏾","🧕🏿","🧖🏻","🧖🏼","🧖🏽","🧖🏾","🧖🏿","🧗🏻","🧗🏼","🧗🏽","🧗🏾","🧗🏿","🧘🏻","🧘🏼","🧘🏽","🧘🏾","🧘🏿","🧙🏻","🧙🏼","🧙🏽","🧙🏾","🧙🏿","🧚🏻","🧚🏼","🧚🏽","🧚🏾","🧚🏿","🧛🏻","🧛🏼","🧛🏽","🧛🏾","🧛🏿","🧜🏻","🧜🏼","🧜🏽","🧜🏾","🧜🏿","🧝🏻","🧝🏼","🧝🏽","🧝🏾","🧝🏿","🫃🏻","🫃🏼","🫃🏽","🫃🏾","🫃🏿","🫄🏻","🫄🏼","🫄🏽","🫄🏾","🫄🏿","🫅🏻","🫅🏼","🫅🏽","🫅🏾","🫅🏿","🫰🏻","🫰🏼","🫰🏽","🫰🏾","🫰🏿","🫱🏻","🫱🏼","🫱🏽","🫱🏾","🫱🏿","🫲🏻","🫲🏼","🫲🏽","🫲🏾","🫲🏿","🫳🏻","🫳🏼","🫳🏽","🫳🏾","🫳🏿","🫴🏻","🫴🏼","🫴🏽","🫴🏾","🫴🏿","🫵🏻","🫵🏼","🫵🏽","🫵🏾","🫵🏿","🫶🏻","🫶🏼","🫶🏽","🫶🏾","🫶🏿","🫷🏻","🫷🏼","🫷🏽","🫷🏾","🫷🏿","🫸🏻","🫸🏼","🫸🏽","🫸🏾","🫸🏿"]},29738:function(e,t,n){const a=n(45927)();t.characters=a,t.strings=["🏴󠁧󠁢󠁥󠁮󠁧󠁿","🏴󠁧󠁢󠁳󠁣󠁴󠁿","🏴󠁧󠁢󠁷󠁬󠁳󠁿"]},76172:function(e,t,n){const a=n(45927)();t.characters=a,t.strings=["👨‍❤️‍👨","👨‍❤️‍💋‍👨","👨‍👦","👨‍👦‍👦","👨‍👧","👨‍👧‍👦","👨‍👧‍👧","👨‍👨‍👦","👨‍👨‍👦‍👦","👨‍👨‍👧","👨‍👨‍👧‍👦","👨‍👨‍👧‍👧","👨‍👩‍👦","👨‍👩‍👦‍👦","👨‍👩‍👧","👨‍👩‍👧‍👦","👨‍👩‍👧‍👧","👨🏻‍❤️‍👨🏻","👨🏻‍❤️‍👨🏼","👨🏻‍❤️‍👨🏽","👨🏻‍❤️‍👨🏾","👨🏻‍❤️‍👨🏿","👨🏻‍❤️‍💋‍👨🏻","👨🏻‍❤️‍💋‍👨🏼","👨🏻‍❤️‍💋‍👨🏽","👨🏻‍❤️‍💋‍👨🏾","👨🏻‍❤️‍💋‍👨🏿","👨🏻‍🤝‍👨🏼","👨🏻‍🤝‍👨🏽","👨🏻‍🤝‍👨🏾","👨🏻‍🤝‍👨🏿","👨🏼‍❤️‍👨🏻","👨🏼‍❤️‍👨🏼","👨🏼‍❤️‍👨🏽","👨🏼‍❤️‍👨🏾","👨🏼‍❤️‍👨🏿","👨🏼‍❤️‍💋‍👨🏻","👨🏼‍❤️‍💋‍👨🏼","👨🏼‍❤️‍💋‍👨🏽","👨🏼‍❤️‍💋‍👨🏾","👨🏼‍❤️‍💋‍👨🏿","👨🏼‍🤝‍👨🏻","👨🏼‍🤝‍👨🏽","👨🏼‍🤝‍👨🏾","👨🏼‍🤝‍👨🏿","👨🏽‍❤️‍👨🏻","👨🏽‍❤️‍👨🏼","👨🏽‍❤️‍👨🏽","👨🏽‍❤️‍👨🏾","👨🏽‍❤️‍👨🏿","👨🏽‍❤️‍💋‍👨🏻","👨🏽‍❤️‍💋‍👨🏼","👨🏽‍❤️‍💋‍👨🏽","👨🏽‍❤️‍💋‍👨🏾","👨🏽‍❤️‍💋‍👨🏿","👨🏽‍🤝‍👨🏻","👨🏽‍🤝‍👨🏼","👨🏽‍🤝‍👨🏾","👨🏽‍🤝‍👨🏿","👨🏾‍❤️‍👨🏻","👨🏾‍❤️‍👨🏼","👨🏾‍❤️‍👨🏽","👨🏾‍❤️‍👨🏾","👨🏾‍❤️‍👨🏿","👨🏾‍❤️‍💋‍👨🏻","👨🏾‍❤️‍💋‍👨🏼","👨🏾‍❤️‍💋‍👨🏽","👨🏾‍❤️‍💋‍👨🏾","👨🏾‍❤️‍💋‍👨🏿","👨🏾‍🤝‍👨🏻","👨🏾‍🤝‍👨🏼","👨🏾‍🤝‍👨🏽","👨🏾‍🤝‍👨🏿","👨🏿‍❤️‍👨🏻","👨🏿‍❤️‍👨🏼","👨🏿‍❤️‍👨🏽","👨🏿‍❤️‍👨🏾","👨🏿‍❤️‍👨🏿","👨🏿‍❤️‍💋‍👨🏻","👨🏿‍❤️‍💋‍👨🏼","👨🏿‍❤️‍💋‍👨🏽","👨🏿‍❤️‍💋‍👨🏾","👨🏿‍❤️‍💋‍👨🏿","👨🏿‍🤝‍👨🏻","👨🏿‍🤝‍👨🏼","👨🏿‍🤝‍👨🏽","👨🏿‍🤝‍👨🏾","👩‍❤️‍👨","👩‍❤️‍👩","👩‍❤️‍💋‍👨","👩‍❤️‍💋‍👩","👩‍👦","👩‍👦‍👦","👩‍👧","👩‍👧‍👦","👩‍👧‍👧","👩‍👩‍👦","👩‍👩‍👦‍👦","👩‍👩‍👧","👩‍👩‍👧‍👦","👩‍👩‍👧‍👧","👩🏻‍❤️‍👨🏻","👩🏻‍❤️‍👨🏼","👩🏻‍❤️‍👨🏽","👩🏻‍❤️‍👨🏾","👩🏻‍❤️‍👨🏿","👩🏻‍❤️‍👩🏻","👩🏻‍❤️‍👩🏼","👩🏻‍❤️‍👩🏽","👩🏻‍❤️‍👩🏾","👩🏻‍❤️‍👩🏿","👩🏻‍❤️‍💋‍👨🏻","👩🏻‍❤️‍💋‍👨🏼","👩🏻‍❤️‍💋‍👨🏽","👩🏻‍❤️‍💋‍👨🏾","👩🏻‍❤️‍💋‍👨🏿","👩🏻‍❤️‍💋‍👩🏻","👩🏻‍❤️‍💋‍👩🏼","👩🏻‍❤️‍💋‍👩🏽","👩🏻‍❤️‍💋‍👩🏾","👩🏻‍❤️‍💋‍👩🏿","👩🏻‍🤝‍👨🏼","👩🏻‍🤝‍👨🏽","👩🏻‍🤝‍👨🏾","👩🏻‍🤝‍👨🏿","👩🏻‍🤝‍👩🏼","👩🏻‍🤝‍👩🏽","👩🏻‍🤝‍👩🏾","👩🏻‍🤝‍👩🏿","👩🏼‍❤️‍👨🏻","👩🏼‍❤️‍👨🏼","👩🏼‍❤️‍👨🏽","👩🏼‍❤️‍👨🏾","👩🏼‍❤️‍👨🏿","👩🏼‍❤️‍👩🏻","👩🏼‍❤️‍👩🏼","👩🏼‍❤️‍👩🏽","👩🏼‍❤️‍👩🏾","👩🏼‍❤️‍👩🏿","👩🏼‍❤️‍💋‍👨🏻","👩🏼‍❤️‍💋‍👨🏼","👩🏼‍❤️‍💋‍👨🏽","👩🏼‍❤️‍💋‍👨🏾","👩🏼‍❤️‍💋‍👨🏿","👩🏼‍❤️‍💋‍👩🏻","👩🏼‍❤️‍💋‍👩🏼","👩🏼‍❤️‍💋‍👩🏽","👩🏼‍❤️‍💋‍👩🏾","👩🏼‍❤️‍💋‍👩🏿","👩🏼‍🤝‍👨🏻","👩🏼‍🤝‍👨🏽","👩🏼‍🤝‍👨🏾","👩🏼‍🤝‍👨🏿","👩🏼‍🤝‍👩🏻","👩🏼‍🤝‍👩🏽","👩🏼‍🤝‍👩🏾","👩🏼‍🤝‍👩🏿","👩🏽‍❤️‍👨🏻","👩🏽‍❤️‍👨🏼","👩🏽‍❤️‍👨🏽","👩🏽‍❤️‍👨🏾","👩🏽‍❤️‍👨🏿","👩🏽‍❤️‍👩🏻","👩🏽‍❤️‍👩🏼","👩🏽‍❤️‍👩🏽","👩🏽‍❤️‍👩🏾","👩🏽‍❤️‍👩🏿","👩🏽‍❤️‍💋‍👨🏻","👩🏽‍❤️‍💋‍👨🏼","👩🏽‍❤️‍💋‍👨🏽","👩🏽‍❤️‍💋‍👨🏾","👩🏽‍❤️‍💋‍👨🏿","👩🏽‍❤️‍💋‍👩🏻","👩🏽‍❤️‍💋‍👩🏼","👩🏽‍❤️‍💋‍👩🏽","👩🏽‍❤️‍💋‍👩🏾","👩🏽‍❤️‍💋‍👩🏿","👩🏽‍🤝‍👨🏻","👩🏽‍🤝‍👨🏼","👩🏽‍🤝‍👨🏾","👩🏽‍🤝‍👨🏿","👩🏽‍🤝‍👩🏻","👩🏽‍🤝‍👩🏼","👩🏽‍🤝‍👩🏾","👩🏽‍🤝‍👩🏿","👩🏾‍❤️‍👨🏻","👩🏾‍❤️‍👨🏼","👩🏾‍❤️‍👨🏽","👩🏾‍❤️‍👨🏾","👩🏾‍❤️‍👨🏿","👩🏾‍❤️‍👩🏻","👩🏾‍❤️‍👩🏼","👩🏾‍❤️‍👩🏽","👩🏾‍❤️‍👩🏾","👩🏾‍❤️‍👩🏿","👩🏾‍❤️‍💋‍👨🏻","👩🏾‍❤️‍💋‍👨🏼","👩🏾‍❤️‍💋‍👨🏽","👩🏾‍❤️‍💋‍👨🏾","👩🏾‍❤️‍💋‍👨🏿","👩🏾‍❤️‍💋‍👩🏻","👩🏾‍❤️‍💋‍👩🏼","👩🏾‍❤️‍💋‍👩🏽","👩🏾‍❤️‍💋‍👩🏾","👩🏾‍❤️‍💋‍👩🏿","👩🏾‍🤝‍👨🏻","👩🏾‍🤝‍👨🏼","👩🏾‍🤝‍👨🏽","👩🏾‍🤝‍👨🏿","👩🏾‍🤝‍👩🏻","👩🏾‍🤝‍👩🏼","👩🏾‍🤝‍👩🏽","👩🏾‍🤝‍👩🏿","👩🏿‍❤️‍👨🏻","👩🏿‍❤️‍👨🏼","👩🏿‍❤️‍👨🏽","👩🏿‍❤️‍👨🏾","👩🏿‍❤️‍👨🏿","👩🏿‍❤️‍👩🏻","👩🏿‍❤️‍👩🏼","👩🏿‍❤️‍👩🏽","👩🏿‍❤️‍👩🏾","👩🏿‍❤️‍👩🏿","👩🏿‍❤️‍💋‍👨🏻","👩🏿‍❤️‍💋‍👨🏼","👩🏿‍❤️‍💋‍👨🏽","👩🏿‍❤️‍💋‍👨🏾","👩🏿‍❤️‍💋‍👨🏿","👩🏿‍❤️‍💋‍👩🏻","👩🏿‍❤️‍💋‍👩🏼","👩🏿‍❤️‍💋‍👩🏽","👩🏿‍❤️‍💋‍👩🏾","👩🏿‍❤️‍💋‍👩🏿","👩🏿‍🤝‍👨🏻","👩🏿‍🤝‍👨🏼","👩🏿‍🤝‍👨🏽","👩🏿‍🤝‍👨🏾","👩🏿‍🤝‍👩🏻","👩🏿‍🤝‍👩🏼","👩🏿‍🤝‍👩🏽","👩🏿‍🤝‍👩🏾","🧑‍🤝‍🧑","🧑🏻‍❤️‍💋‍🧑🏼","🧑🏻‍❤️‍💋‍🧑🏽","🧑🏻‍❤️‍💋‍🧑🏾","🧑🏻‍❤️‍💋‍🧑🏿","🧑🏻‍❤️‍🧑🏼","🧑🏻‍❤️‍🧑🏽","🧑🏻‍❤️‍🧑🏾","🧑🏻‍❤️‍🧑🏿","🧑🏻‍🎄","🧑🏻‍🤝‍🧑🏻","🧑🏻‍🤝‍🧑🏼","🧑🏻‍🤝‍🧑🏽","🧑🏻‍🤝‍🧑🏾","🧑🏻‍🤝‍🧑🏿","🧑🏼‍❤️‍💋‍🧑🏻","🧑🏼‍❤️‍💋‍🧑🏽","🧑🏼‍❤️‍💋‍🧑🏾","🧑🏼‍❤️‍💋‍🧑🏿","🧑🏼‍❤️‍🧑🏻","🧑🏼‍❤️‍🧑🏽","🧑🏼‍❤️‍🧑🏾","🧑🏼‍❤️‍🧑🏿","🧑🏼‍🎄","🧑🏼‍🤝‍🧑🏻","🧑🏼‍🤝‍🧑🏼","🧑🏼‍🤝‍🧑🏽","🧑🏼‍🤝‍🧑🏾","🧑🏼‍🤝‍🧑🏿","🧑🏽‍❤️‍💋‍🧑🏻","🧑🏽‍❤️‍💋‍🧑🏼","🧑🏽‍❤️‍💋‍🧑🏾","🧑🏽‍❤️‍💋‍🧑🏿","🧑🏽‍❤️‍🧑🏻","🧑🏽‍❤️‍🧑🏼","🧑🏽‍❤️‍🧑🏾","🧑🏽‍❤️‍🧑🏿","🧑🏽‍🎄","🧑🏽‍🤝‍🧑🏻","🧑🏽‍🤝‍🧑🏼","🧑🏽‍🤝‍🧑🏽","🧑🏽‍🤝‍🧑🏾","🧑🏽‍🤝‍🧑🏿","🧑🏾‍❤️‍💋‍🧑🏻","🧑🏾‍❤️‍💋‍🧑🏼","🧑🏾‍❤️‍💋‍🧑🏽","🧑🏾‍❤️‍💋‍🧑🏿","🧑🏾‍❤️‍🧑🏻","🧑🏾‍❤️‍🧑🏼","🧑🏾‍❤️‍🧑🏽","🧑🏾‍❤️‍🧑🏿","🧑🏾‍🎄","🧑🏾‍🤝‍🧑🏻","🧑🏾‍🤝‍🧑🏼","🧑🏾‍🤝‍🧑🏽","🧑🏾‍🤝‍🧑🏾","🧑🏾‍🤝‍🧑🏿","🧑🏿‍❤️‍💋‍🧑🏻","🧑🏿‍❤️‍💋‍🧑🏼","🧑🏿‍❤️‍💋‍🧑🏽","🧑🏿‍❤️‍💋‍🧑🏾","🧑🏿‍❤️‍🧑🏻","🧑🏿‍❤️‍🧑🏼","🧑🏿‍❤️‍🧑🏽","🧑🏿‍❤️‍🧑🏾","🧑🏿‍🎄","🧑🏿‍🤝‍🧑🏻","🧑🏿‍🤝‍🧑🏼","🧑🏿‍🤝‍🧑🏽","🧑🏿‍🤝‍🧑🏾","🧑🏿‍🤝‍🧑🏿","🫱🏻‍🫲🏼","🫱🏻‍🫲🏽","🫱🏻‍🫲🏾","🫱🏻‍🫲🏿","🫱🏼‍🫲🏻","🫱🏼‍🫲🏽","🫱🏼‍🫲🏾","🫱🏼‍🫲🏿","🫱🏽‍🫲🏻","🫱🏽‍🫲🏼","🫱🏽‍🫲🏾","🫱🏽‍🫲🏿","🫱🏾‍🫲🏻","🫱🏾‍🫲🏼","🫱🏾‍🫲🏽","🫱🏾‍🫲🏿","🫱🏿‍🫲🏻","🫱🏿‍🫲🏼","🫱🏿‍🫲🏽","🫱🏿‍🫲🏾","👨‍⚕️","👨‍⚖️","👨‍✈️","👨‍🌾","👨‍🍳","👨‍🍼","👨‍🎓","👨‍🎤","👨‍🎨","👨‍🏫","👨‍🏭","👨‍💻","👨‍💼","👨‍🔧","👨‍🔬","👨‍🚀","👨‍🚒","👨‍🦯","👨‍🦼","👨‍🦽","👨🏻‍⚕️","👨🏻‍⚖️","👨🏻‍✈️","👨🏻‍🌾","👨🏻‍🍳","👨🏻‍🍼","👨🏻‍🎓","👨🏻‍🎤","👨🏻‍🎨","👨🏻‍🏫","👨🏻‍🏭","👨🏻‍💻","👨🏻‍💼","👨🏻‍🔧","👨🏻‍🔬","👨🏻‍🚀","👨🏻‍🚒","👨🏻‍🦯","👨🏻‍🦼","👨🏻‍🦽","👨🏼‍⚕️","👨🏼‍⚖️","👨🏼‍✈️","👨🏼‍🌾","👨🏼‍🍳","👨🏼‍🍼","👨🏼‍🎓","👨🏼‍🎤","👨🏼‍🎨","👨🏼‍🏫","👨🏼‍🏭","👨🏼‍💻","👨🏼‍💼","👨🏼‍🔧","👨🏼‍🔬","👨🏼‍🚀","👨🏼‍🚒","👨🏼‍🦯","👨🏼‍🦼","👨🏼‍🦽","👨🏽‍⚕️","👨🏽‍⚖️","👨🏽‍✈️","👨🏽‍🌾","👨🏽‍🍳","👨🏽‍🍼","👨🏽‍🎓","👨🏽‍🎤","👨🏽‍🎨","👨🏽‍🏫","👨🏽‍🏭","👨🏽‍💻","👨🏽‍💼","👨🏽‍🔧","👨🏽‍🔬","👨🏽‍🚀","👨🏽‍🚒","👨🏽‍🦯","👨🏽‍🦼","👨🏽‍🦽","👨🏾‍⚕️","👨🏾‍⚖️","👨🏾‍✈️","👨🏾‍🌾","👨🏾‍🍳","👨🏾‍🍼","👨🏾‍🎓","👨🏾‍🎤","👨🏾‍🎨","👨🏾‍🏫","👨🏾‍🏭","👨🏾‍💻","👨🏾‍💼","👨🏾‍🔧","👨🏾‍🔬","👨🏾‍🚀","👨🏾‍🚒","👨🏾‍🦯","👨🏾‍🦼","👨🏾‍🦽","👨🏿‍⚕️","👨🏿‍⚖️","👨🏿‍✈️","👨🏿‍🌾","👨🏿‍🍳","👨🏿‍🍼","👨🏿‍🎓","👨🏿‍🎤","👨🏿‍🎨","👨🏿‍🏫","👨🏿‍🏭","👨🏿‍💻","👨🏿‍💼","👨🏿‍🔧","👨🏿‍🔬","👨🏿‍🚀","👨🏿‍🚒","👨🏿‍🦯","👨🏿‍🦼","👨🏿‍🦽","👩‍⚕️","👩‍⚖️","👩‍✈️","👩‍🌾","👩‍🍳","👩‍🍼","👩‍🎓","👩‍🎤","👩‍🎨","👩‍🏫","👩‍🏭","👩‍💻","👩‍💼","👩‍🔧","👩‍🔬","👩‍🚀","👩‍🚒","👩‍🦯","👩‍🦼","👩‍🦽","👩🏻‍⚕️","👩🏻‍⚖️","👩🏻‍✈️","👩🏻‍🌾","👩🏻‍🍳","👩🏻‍🍼","👩🏻‍🎓","👩🏻‍🎤","👩🏻‍🎨","👩🏻‍🏫","👩🏻‍🏭","👩🏻‍💻","👩🏻‍💼","👩🏻‍🔧","👩🏻‍🔬","👩🏻‍🚀","👩🏻‍🚒","👩🏻‍🦯","👩🏻‍🦼","👩🏻‍🦽","👩🏼‍⚕️","👩🏼‍⚖️","👩🏼‍✈️","👩🏼‍🌾","👩🏼‍🍳","👩🏼‍🍼","👩🏼‍🎓","👩🏼‍🎤","👩🏼‍🎨","👩🏼‍🏫","👩🏼‍🏭","👩🏼‍💻","👩🏼‍💼","👩🏼‍🔧","👩🏼‍🔬","👩🏼‍🚀","👩🏼‍🚒","👩🏼‍🦯","👩🏼‍🦼","👩🏼‍🦽","👩🏽‍⚕️","👩🏽‍⚖️","👩🏽‍✈️","👩🏽‍🌾","👩🏽‍🍳","👩🏽‍🍼","👩🏽‍🎓","👩🏽‍🎤","👩🏽‍🎨","👩🏽‍🏫","👩🏽‍🏭","👩🏽‍💻","👩🏽‍💼","👩🏽‍🔧","👩🏽‍🔬","👩🏽‍🚀","👩🏽‍🚒","👩🏽‍🦯","👩🏽‍🦼","👩🏽‍🦽","👩🏾‍⚕️","👩🏾‍⚖️","👩🏾‍✈️","👩🏾‍🌾","👩🏾‍🍳","👩🏾‍🍼","👩🏾‍🎓","👩🏾‍🎤","👩🏾‍🎨","👩🏾‍🏫","👩🏾‍🏭","👩🏾‍💻","👩🏾‍💼","👩🏾‍🔧","👩🏾‍🔬","👩🏾‍🚀","👩🏾‍🚒","👩🏾‍🦯","👩🏾‍🦼","👩🏾‍🦽","👩🏿‍⚕️","👩🏿‍⚖️","👩🏿‍✈️","👩🏿‍🌾","👩🏿‍🍳","👩🏿‍🍼","👩🏿‍🎓","👩🏿‍🎤","👩🏿‍🎨","👩🏿‍🏫","👩🏿‍🏭","👩🏿‍💻","👩🏿‍💼","👩🏿‍🔧","👩🏿‍🔬","👩🏿‍🚀","👩🏿‍🚒","👩🏿‍🦯","👩🏿‍🦼","👩🏿‍🦽","🧑‍⚕️","🧑‍⚖️","🧑‍✈️","🧑‍🌾","🧑‍🍳","🧑‍🍼","🧑‍🎓","🧑‍🎤","🧑‍🎨","🧑‍🏫","🧑‍🏭","🧑‍💻","🧑‍💼","🧑‍🔧","🧑‍🔬","🧑‍🚀","🧑‍🚒","🧑‍🦯","🧑‍🦼","🧑‍🦽","🧑🏻‍⚕️","🧑🏻‍⚖️","🧑🏻‍✈️","🧑🏻‍🌾","🧑🏻‍🍳","🧑🏻‍🍼","🧑🏻‍🎓","🧑🏻‍🎤","🧑🏻‍🎨","🧑🏻‍🏫","🧑🏻‍🏭","🧑🏻‍💻","🧑🏻‍💼","🧑🏻‍🔧","🧑🏻‍🔬","🧑🏻‍🚀","🧑🏻‍🚒","🧑🏻‍🦯","🧑🏻‍🦼","🧑🏻‍🦽","🧑🏼‍⚕️","🧑🏼‍⚖️","🧑🏼‍✈️","🧑🏼‍🌾","🧑🏼‍🍳","🧑🏼‍🍼","🧑🏼‍🎓","🧑🏼‍🎤","🧑🏼‍🎨","🧑🏼‍🏫","🧑🏼‍🏭","🧑🏼‍💻","🧑🏼‍💼","🧑🏼‍🔧","🧑🏼‍🔬","🧑🏼‍🚀","🧑🏼‍🚒","🧑🏼‍🦯","🧑🏼‍🦼","🧑🏼‍🦽","🧑🏽‍⚕️","🧑🏽‍⚖️","🧑🏽‍✈️","🧑🏽‍🌾","🧑🏽‍🍳","🧑🏽‍🍼","🧑🏽‍🎓","🧑🏽‍🎤","🧑🏽‍🎨","🧑🏽‍🏫","🧑🏽‍🏭","🧑🏽‍💻","🧑🏽‍💼","🧑🏽‍🔧","🧑🏽‍🔬","🧑🏽‍🚀","🧑🏽‍🚒","🧑🏽‍🦯","🧑🏽‍🦼","🧑🏽‍🦽","🧑🏾‍⚕️","🧑🏾‍⚖️","🧑🏾‍✈️","🧑🏾‍🌾","🧑🏾‍🍳","🧑🏾‍🍼","🧑🏾‍🎓","🧑🏾‍🎤","🧑🏾‍🎨","🧑🏾‍🏫","🧑🏾‍🏭","🧑🏾‍💻","🧑🏾‍💼","🧑🏾‍🔧","🧑🏾‍🔬","🧑🏾‍🚀","🧑🏾‍🚒","🧑🏾‍🦯","🧑🏾‍🦼","🧑🏾‍🦽","🧑🏿‍⚕️","🧑🏿‍⚖️","🧑🏿‍✈️","🧑🏿‍🌾","🧑🏿‍🍳","🧑🏿‍🍼","🧑🏿‍🎓","🧑🏿‍🎤","🧑🏿‍🎨","🧑🏿‍🏫","🧑🏿‍🏭","🧑🏿‍💻","🧑🏿‍💼","🧑🏿‍🔧","🧑🏿‍🔬","🧑🏿‍🚀","🧑🏿‍🚒","🧑🏿‍🦯","🧑🏿‍🦼","🧑🏿‍🦽","⛹🏻‍♀️","⛹🏻‍♂️","⛹🏼‍♀️","⛹🏼‍♂️","⛹🏽‍♀️","⛹🏽‍♂️","⛹🏾‍♀️","⛹🏾‍♂️","⛹🏿‍♀️","⛹🏿‍♂️","⛹️‍♀️","⛹️‍♂️","🏃‍♀️","🏃‍♂️","🏃🏻‍♀️","🏃🏻‍♂️","🏃🏼‍♀️","🏃🏼‍♂️","🏃🏽‍♀️","🏃🏽‍♂️","🏃🏾‍♀️","🏃🏾‍♂️","🏃🏿‍♀️","🏃🏿‍♂️","🏄‍♀️","🏄‍♂️","🏄🏻‍♀️","🏄🏻‍♂️","🏄🏼‍♀️","🏄🏼‍♂️","🏄🏽‍♀️","🏄🏽‍♂️","🏄🏾‍♀️","🏄🏾‍♂️","🏄🏿‍♀️","🏄🏿‍♂️","🏊‍♀️","🏊‍♂️","🏊🏻‍♀️","🏊🏻‍♂️","🏊🏼‍♀️","🏊🏼‍♂️","🏊🏽‍♀️","🏊🏽‍♂️","🏊🏾‍♀️","🏊🏾‍♂️","🏊🏿‍♀️","🏊🏿‍♂️","🏋🏻‍♀️","🏋🏻‍♂️","🏋🏼‍♀️","🏋🏼‍♂️","🏋🏽‍♀️","🏋🏽‍♂️","🏋🏾‍♀️","🏋🏾‍♂️","🏋🏿‍♀️","🏋🏿‍♂️","🏋️‍♀️","🏋️‍♂️","🏌🏻‍♀️","🏌🏻‍♂️","🏌🏼‍♀️","🏌🏼‍♂️","🏌🏽‍♀️","🏌🏽‍♂️","🏌🏾‍♀️","🏌🏾‍♂️","🏌🏿‍♀️","🏌🏿‍♂️","🏌️‍♀️","🏌️‍♂️","👮‍♀️","👮‍♂️","👮🏻‍♀️","👮🏻‍♂️","👮🏼‍♀️","👮🏼‍♂️","👮🏽‍♀️","👮🏽‍♂️","👮🏾‍♀️","👮🏾‍♂️","👮🏿‍♀️","👮🏿‍♂️","👯‍♀️","👯‍♂️","👰‍♀️","👰‍♂️","👰🏻‍♀️","👰🏻‍♂️","👰🏼‍♀️","👰🏼‍♂️","👰🏽‍♀️","👰🏽‍♂️","👰🏾‍♀️","👰🏾‍♂️","👰🏿‍♀️","👰🏿‍♂️","👱‍♀️","👱‍♂️","👱🏻‍♀️","👱🏻‍♂️","👱🏼‍♀️","👱🏼‍♂️","👱🏽‍♀️","👱🏽‍♂️","👱🏾‍♀️","👱🏾‍♂️","👱🏿‍♀️","👱🏿‍♂️","👳‍♀️","👳‍♂️","👳🏻‍♀️","👳🏻‍♂️","👳🏼‍♀️","👳🏼‍♂️","👳🏽‍♀️","👳🏽‍♂️","👳🏾‍♀️","👳🏾‍♂️","👳🏿‍♀️","👳🏿‍♂️","👷‍♀️","👷‍♂️","👷🏻‍♀️","👷🏻‍♂️","👷🏼‍♀️","👷🏼‍♂️","👷🏽‍♀️","👷🏽‍♂️","👷🏾‍♀️","👷🏾‍♂️","👷🏿‍♀️","👷🏿‍♂️","💁‍♀️","💁‍♂️","💁🏻‍♀️","💁🏻‍♂️","💁🏼‍♀️","💁🏼‍♂️","💁🏽‍♀️","💁🏽‍♂️","💁🏾‍♀️","💁🏾‍♂️","💁🏿‍♀️","💁🏿‍♂️","💂‍♀️","💂‍♂️","💂🏻‍♀️","💂🏻‍♂️","💂🏼‍♀️","💂🏼‍♂️","💂🏽‍♀️","💂🏽‍♂️","💂🏾‍♀️","💂🏾‍♂️","💂🏿‍♀️","💂🏿‍♂️","💆‍♀️","💆‍♂️","💆🏻‍♀️","💆🏻‍♂️","💆🏼‍♀️","💆🏼‍♂️","💆🏽‍♀️","💆🏽‍♂️","💆🏾‍♀️","💆🏾‍♂️","💆🏿‍♀️","💆🏿‍♂️","💇‍♀️","💇‍♂️","💇🏻‍♀️","💇🏻‍♂️","💇🏼‍♀️","💇🏼‍♂️","💇🏽‍♀️","💇🏽‍♂️","💇🏾‍♀️","💇🏾‍♂️","💇🏿‍♀️","💇🏿‍♂️","🕵🏻‍♀️","🕵🏻‍♂️","🕵🏼‍♀️","🕵🏼‍♂️","🕵🏽‍♀️","🕵🏽‍♂️","🕵🏾‍♀️","🕵🏾‍♂️","🕵🏿‍♀️","🕵🏿‍♂️","🕵️‍♀️","🕵️‍♂️","🙅‍♀️","🙅‍♂️","🙅🏻‍♀️","🙅🏻‍♂️","🙅🏼‍♀️","🙅🏼‍♂️","🙅🏽‍♀️","🙅🏽‍♂️","🙅🏾‍♀️","🙅🏾‍♂️","🙅🏿‍♀️","🙅🏿‍♂️","🙆‍♀️","🙆‍♂️","🙆🏻‍♀️","🙆🏻‍♂️","🙆🏼‍♀️","🙆🏼‍♂️","🙆🏽‍♀️","🙆🏽‍♂️","🙆🏾‍♀️","🙆🏾‍♂️","🙆🏿‍♀️","🙆🏿‍♂️","🙇‍♀️","🙇‍♂️","🙇🏻‍♀️","🙇🏻‍♂️","🙇🏼‍♀️","🙇🏼‍♂️","🙇🏽‍♀️","🙇🏽‍♂️","🙇🏾‍♀️","🙇🏾‍♂️","🙇🏿‍♀️","🙇🏿‍♂️","🙋‍♀️","🙋‍♂️","🙋🏻‍♀️","🙋🏻‍♂️","🙋🏼‍♀️","🙋🏼‍♂️","🙋🏽‍♀️","🙋🏽‍♂️","🙋🏾‍♀️","🙋🏾‍♂️","🙋🏿‍♀️","🙋🏿‍♂️","🙍‍♀️","🙍‍♂️","🙍🏻‍♀️","🙍🏻‍♂️","🙍🏼‍♀️","🙍🏼‍♂️","🙍🏽‍♀️","🙍🏽‍♂️","🙍🏾‍♀️","🙍🏾‍♂️","🙍🏿‍♀️","🙍🏿‍♂️","🙎‍♀️","🙎‍♂️","🙎🏻‍♀️","🙎🏻‍♂️","🙎🏼‍♀️","🙎🏼‍♂️","🙎🏽‍♀️","🙎🏽‍♂️","🙎🏾‍♀️","🙎🏾‍♂️","🙎🏿‍♀️","🙎🏿‍♂️","🚣‍♀️","🚣‍♂️","🚣🏻‍♀️","🚣🏻‍♂️","🚣🏼‍♀️","🚣🏼‍♂️","🚣🏽‍♀️","🚣🏽‍♂️","🚣🏾‍♀️","🚣🏾‍♂️","🚣🏿‍♀️","🚣🏿‍♂️","🚴‍♀️","🚴‍♂️","🚴🏻‍♀️","🚴🏻‍♂️","🚴🏼‍♀️","🚴🏼‍♂️","🚴🏽‍♀️","🚴🏽‍♂️","🚴🏾‍♀️","🚴🏾‍♂️","🚴🏿‍♀️","🚴🏿‍♂️","🚵‍♀️","🚵‍♂️","🚵🏻‍♀️","🚵🏻‍♂️","🚵🏼‍♀️","🚵🏼‍♂️","🚵🏽‍♀️","🚵🏽‍♂️","🚵🏾‍♀️","🚵🏾‍♂️","🚵🏿‍♀️","🚵🏿‍♂️","🚶‍♀️","🚶‍♂️","🚶🏻‍♀️","🚶🏻‍♂️","🚶🏼‍♀️","🚶🏼‍♂️","🚶🏽‍♀️","🚶🏽‍♂️","🚶🏾‍♀️","🚶🏾‍♂️","🚶🏿‍♀️","🚶🏿‍♂️","🤦‍♀️","🤦‍♂️","🤦🏻‍♀️","🤦🏻‍♂️","🤦🏼‍♀️","🤦🏼‍♂️","🤦🏽‍♀️","🤦🏽‍♂️","🤦🏾‍♀️","🤦🏾‍♂️","🤦🏿‍♀️","🤦🏿‍♂️","🤵‍♀️","🤵‍♂️","🤵🏻‍♀️","🤵🏻‍♂️","🤵🏼‍♀️","🤵🏼‍♂️","🤵🏽‍♀️","🤵🏽‍♂️","🤵🏾‍♀️","🤵🏾‍♂️","🤵🏿‍♀️","🤵🏿‍♂️","🤷‍♀️","🤷‍♂️","🤷🏻‍♀️","🤷🏻‍♂️","🤷🏼‍♀️","🤷🏼‍♂️","🤷🏽‍♀️","🤷🏽‍♂️","🤷🏾‍♀️","🤷🏾‍♂️","🤷🏿‍♀️","🤷🏿‍♂️","🤸‍♀️","🤸‍♂️","🤸🏻‍♀️","🤸🏻‍♂️","🤸🏼‍♀️","🤸🏼‍♂️","🤸🏽‍♀️","🤸🏽‍♂️","🤸🏾‍♀️","🤸🏾‍♂️","🤸🏿‍♀️","🤸🏿‍♂️","🤹‍♀️","🤹‍♂️","🤹🏻‍♀️","🤹🏻‍♂️","🤹🏼‍♀️","🤹🏼‍♂️","🤹🏽‍♀️","🤹🏽‍♂️","🤹🏾‍♀️","🤹🏾‍♂️","🤹🏿‍♀️","🤹🏿‍♂️","🤼‍♀️","🤼‍♂️","🤽‍♀️","🤽‍♂️","🤽🏻‍♀️","🤽🏻‍♂️","🤽🏼‍♀️","🤽🏼‍♂️","🤽🏽‍♀️","🤽🏽‍♂️","🤽🏾‍♀️","🤽🏾‍♂️","🤽🏿‍♀️","🤽🏿‍♂️","🤾‍♀️","🤾‍♂️","🤾🏻‍♀️","🤾🏻‍♂️","🤾🏼‍♀️","🤾🏼‍♂️","🤾🏽‍♀️","🤾🏽‍♂️","🤾🏾‍♀️","🤾🏾‍♂️","🤾🏿‍♀️","🤾🏿‍♂️","🦸‍♀️","🦸‍♂️","🦸🏻‍♀️","🦸🏻‍♂️","🦸🏼‍♀️","🦸🏼‍♂️","🦸🏽‍♀️","🦸🏽‍♂️","🦸🏾‍♀️","🦸🏾‍♂️","🦸🏿‍♀️","🦸🏿‍♂️","🦹‍♀️","🦹‍♂️","🦹🏻‍♀️","🦹🏻‍♂️","🦹🏼‍♀️","🦹🏼‍♂️","🦹🏽‍♀️","🦹🏽‍♂️","🦹🏾‍♀️","🦹🏾‍♂️","🦹🏿‍♀️","🦹🏿‍♂️","🧍‍♀️","🧍‍♂️","🧍🏻‍♀️","🧍🏻‍♂️","🧍🏼‍♀️","🧍🏼‍♂️","🧍🏽‍♀️","🧍🏽‍♂️","🧍🏾‍♀️","🧍🏾‍♂️","🧍🏿‍♀️","🧍🏿‍♂️","🧎‍♀️","🧎‍♂️","🧎🏻‍♀️","🧎🏻‍♂️","🧎🏼‍♀️","🧎🏼‍♂️","🧎🏽‍♀️","🧎🏽‍♂️","🧎🏾‍♀️","🧎🏾‍♂️","🧎🏿‍♀️","🧎🏿‍♂️","🧏‍♀️","🧏‍♂️","🧏🏻‍♀️","🧏🏻‍♂️","🧏🏼‍♀️","🧏🏼‍♂️","🧏🏽‍♀️","🧏🏽‍♂️","🧏🏾‍♀️","🧏🏾‍♂️","🧏🏿‍♀️","🧏🏿‍♂️","🧔‍♀️","🧔‍♂️","🧔🏻‍♀️","🧔🏻‍♂️","🧔🏼‍♀️","🧔🏼‍♂️","🧔🏽‍♀️","🧔🏽‍♂️","🧔🏾‍♀️","🧔🏾‍♂️","🧔🏿‍♀️","🧔🏿‍♂️","🧖‍♀️","🧖‍♂️","🧖🏻‍♀️","🧖🏻‍♂️","🧖🏼‍♀️","🧖🏼‍♂️","🧖🏽‍♀️","🧖🏽‍♂️","🧖🏾‍♀️","🧖🏾‍♂️","🧖🏿‍♀️","🧖🏿‍♂️","🧗‍♀️","🧗‍♂️","🧗🏻‍♀️","🧗🏻‍♂️","🧗🏼‍♀️","🧗🏼‍♂️","🧗🏽‍♀️","🧗🏽‍♂️","🧗🏾‍♀️","🧗🏾‍♂️","🧗🏿‍♀️","🧗🏿‍♂️","🧘‍♀️","🧘‍♂️","🧘🏻‍♀️","🧘🏻‍♂️","🧘🏼‍♀️","🧘🏼‍♂️","🧘🏽‍♀️","🧘🏽‍♂️","🧘🏾‍♀️","🧘🏾‍♂️","🧘🏿‍♀️","🧘🏿‍♂️","🧙‍♀️","🧙‍♂️","🧙🏻‍♀️","🧙🏻‍♂️","🧙🏼‍♀️","🧙🏼‍♂️","🧙🏽‍♀️","🧙🏽‍♂️","🧙🏾‍♀️","🧙🏾‍♂️","🧙🏿‍♀️","🧙🏿‍♂️","🧚‍♀️","🧚‍♂️","🧚🏻‍♀️","🧚🏻‍♂️","🧚🏼‍♀️","🧚🏼‍♂️","🧚🏽‍♀️","🧚🏽‍♂️","🧚🏾‍♀️","🧚🏾‍♂️","🧚🏿‍♀️","🧚🏿‍♂️","🧛‍♀️","🧛‍♂️","🧛🏻‍♀️","🧛🏻‍♂️","🧛🏼‍♀️","🧛🏼‍♂️","🧛🏽‍♀️","🧛🏽‍♂️","🧛🏾‍♀️","🧛🏾‍♂️","🧛🏿‍♀️","🧛🏿‍♂️","🧜‍♀️","🧜‍♂️","🧜🏻‍♀️","🧜🏻‍♂️","🧜🏼‍♀️","🧜🏼‍♂️","🧜🏽‍♀️","🧜🏽‍♂️","🧜🏾‍♀️","🧜🏾‍♂️","🧜🏿‍♀️","🧜🏿‍♂️","🧝‍♀️","🧝‍♂️","🧝🏻‍♀️","🧝🏻‍♂️","🧝🏼‍♀️","🧝🏼‍♂️","🧝🏽‍♀️","🧝🏽‍♂️","🧝🏾‍♀️","🧝🏾‍♂️","🧝🏿‍♀️","🧝🏿‍♂️","🧞‍♀️","🧞‍♂️","🧟‍♀️","🧟‍♂️","👨‍🦰","👨‍🦱","👨‍🦲","👨‍🦳","👨🏻‍🦰","👨🏻‍🦱","👨🏻‍🦲","👨🏻‍🦳","👨🏼‍🦰","👨🏼‍🦱","👨🏼‍🦲","👨🏼‍🦳","👨🏽‍🦰","👨🏽‍🦱","👨🏽‍🦲","👨🏽‍🦳","👨🏾‍🦰","👨🏾‍🦱","👨🏾‍🦲","👨🏾‍🦳","👨🏿‍🦰","👨🏿‍🦱","👨🏿‍🦲","👨🏿‍🦳","👩‍🦰","👩‍🦱","👩‍🦲","👩‍🦳","👩🏻‍🦰","👩🏻‍🦱","👩🏻‍🦲","👩🏻‍🦳","👩🏼‍🦰","👩🏼‍🦱","👩🏼‍🦲","👩🏼‍🦳","👩🏽‍🦰","👩🏽‍🦱","👩🏽‍🦲","👩🏽‍🦳","👩🏾‍🦰","👩🏾‍🦱","👩🏾‍🦲","👩🏾‍🦳","👩🏿‍🦰","👩🏿‍🦱","👩🏿‍🦲","👩🏿‍🦳","🧑‍🦰","🧑‍🦱","🧑‍🦲","🧑‍🦳","🧑🏻‍🦰","🧑🏻‍🦱","🧑🏻‍🦲","🧑🏻‍🦳","🧑🏼‍🦰","🧑🏼‍🦱","🧑🏼‍🦲","🧑🏼‍🦳","🧑🏽‍🦰","🧑🏽‍🦱","🧑🏽‍🦲","🧑🏽‍🦳","🧑🏾‍🦰","🧑🏾‍🦱","🧑🏾‍🦲","🧑🏾‍🦳","🧑🏿‍🦰","🧑🏿‍🦱","🧑🏿‍🦲","🧑🏿‍🦳","❤️‍🔥","❤️‍🩹","🏳️‍⚧️","🏳️‍🌈","🏴‍☠️","🐈‍⬛","🐕‍🦺","🐦‍⬛","🐻‍❄️","👁️‍🗨️","😮‍💨","😵‍💫","😶‍🌫️","🧑‍🎄"]},9144:function(e,t,n){const a=n(45927)();a.addRange(73472,73488).addRange(73490,73530).addRange(73534,73561),t.characters=a},25564:function(e,t,n){const a=n(45927)();a.addRange(124112,124153),t.characters=a},18429:function(e,t,n){const a=n(45927)();a.addRange(73472,73488).addRange(73490,73530).addRange(73534,73561),t.characters=a},52634:function(e,t,n){const a=n(45927)();a.addRange(124112,124153),t.characters=a},45927:function(e,t,n){var a;e=n.nmd(e),function(r){var i=t,o=(e&&e.exports,"object"==typeof n.g&&n.g);o.global!==o&&o.window;var d="A range’s `stop` value must be greater than or equal to the `start` value.",s="Invalid code point value. Code points range from U+000000 to U+10FFFF.",c=55296,u=56319,l=56320,g=57343,h=/\\x00([^0123456789]|$)/g,f={},p=f.hasOwnProperty,m=function(e,t){for(var n=-1,a=e.length;++n<a;)t(e[n],n)},R=f.toString,b=function(e){return"[object Array]"==R.call(e)},y=function(e){return"number"==typeof e||"[object Number]"==R.call(e)},v=function(e,t){var n=String(e);return n.length<t?("0000"+n).slice(-t):n},_=function(e){return Number(e).toString(16).toUpperCase()},w=[].slice,M=function(e,t){for(var n,a,r=0,i=e.length;r<i;){if(n=e[r],a=e[r+1],t>=n&&t<a)return t==n?a==n+1?(e.splice(r,2),e):(e[r]=t+1,e):t==a-1?(e[r+1]=t,e):(e.splice(r,2,n,t,t+1,a),e);r+=2}return e},x=function(e,t,n){if(n<t)throw Error(d);for(var a,r,i=0;i<e.length;){if(a=e[i],r=e[i+1]-1,a>n)return e;if(t<=a&&n>=r)e.splice(i,2);else{if(t>=a&&n<r)return t==a?(e[i]=n+1,e[i+1]=r+1,e):(e.splice(i,2,a,t,n+1,r+1),e);if(t>=a&&t<=r)e[i+1]=t;else if(n>=a&&n<=r)return e[i]=n+1,e;i+=2}}return e},E=function(e,t){var n,a,r=0,i=null,o=e.length;if(t<0||t>1114111)throw RangeError(s);for(;r<o;){if(n=e[r],a=e[r+1],t>=n&&t<a)return e;if(t==n-1)return e[r]=t,e;if(n>t)return e.splice(null!=i?i+2:0,0,t,t+1),e;if(t==a)return t+1==e[r+2]?(e.splice(r,4,n,e[r+3]),e):(e[r+1]=t+1,e);i=r,r+=2}return e.push(t,t+1),e},S=function(e,t){for(var n,a,r=0,i=e.slice(),o=t.length;r<o;)i=(n=t[r])==(a=t[r+1]-1)?E(i,n):k(i,n,a),r+=2;return i},k=function(e,t,n){if(n<t)throw Error(d);if(t<0||t>1114111||n<0||n>1114111)throw RangeError(s);for(var a,r,i=0,o=!1,c=e.length;i<c;){if(a=e[i],r=e[i+1],o){if(a==n+1)return e.splice(i-1,2),e;if(a>n)return e;a>=t&&a<=n&&(r>t&&r-1<=n?(e.splice(i,2),i-=2):(e.splice(i-1,2),i-=2))}else{if(a==n+1||a==n)return e[i]=t,e;if(a>n)return e.splice(i,0,t,n+1),e;if(t>=a&&t<r&&n+1<=r)return e;t>=a&&t<r||r==t?(e[i+1]=n+1,o=!0):t<=a&&n+1>=r&&(e[i]=t,e[i+1]=n+1,o=!0)}i+=2}return o||e.push(t,n+1),e},N=function(e,t){var n=0,a=e.length,r=e[n],i=e[a-1];if(a>=2&&(t<r||t>i))return!1;for(;n<a;){if(r=e[n],i=e[n+1],t>=r&&t<i)return!0;n+=2}return!1},D=function(e){return!e.length},A=function(e){return 2==e.length&&e[0]+1==e[1]},j=function(e){for(var t,n,a=0,r=[],i=e.length;a<i;){for(t=e[a],n=e[a+1];t<n;)r.push(t),++t;a+=2}return r},T=Math.floor,L=function(e){return parseInt(T((e-65536)/1024)+c,10)},I=function(e){return parseInt((e-65536)%1024+l,10)},C=String.fromCharCode,O=function(e){return 9==e?"\\t":10==e?"\\n":12==e?"\\f":13==e?"\\r":45==e?"\\x2D":92==e?"\\\\":36==e||e>=40&&e<=43||46==e||47==e||63==e||e>=91&&e<=94||e>=123&&e<=125?"\\"+C(e):e>=32&&e<=126?C(e):e<=255?"\\x"+v(_(e),2):"\\u"+v(_(e),4)},P=function(e){return e<=65535?O(e):"\\u{"+e.toString(16).toUpperCase()+"}"},z=function(e){var t,n=e.length,a=e.charCodeAt(0);return a>=c&&a<=u&&n>1?(t=e.charCodeAt(1),1024*(a-c)+t-l+65536):a},B=function(e){var t,n,a="",r=0,i=e.length;if(A(e))return O(e[0]);for(;r<i;)a+=(t=e[r])==(n=e[r+1]-1)?O(t):t+1==n?O(t)+O(n):O(t)+"-"+O(n),r+=2;return"["+a+"]"},F=function(e){if(1==e.length)return e;for(var t=-1,n=-1;++t<e.length;){var a=e[t],r=a[1],i=r[0],o=r[1];for(n=t;++n<e.length;){var d=e[n],s=d[1],c=s[0],u=s[1];i==c&&o==u&&2===s.length&&(A(d[0])?a[0]=E(a[0],d[0][0]):a[0]=k(a[0],d[0][0],d[0][1]-1),e.splice(n,1),--n)}}return e},U=function(e){if(!e.length)return[];for(var t,n,a,r,i,o,d=0,s=[],c=e.length;d<c;){t=e[d],n=e[d+1]-1,a=L(t),r=I(t),i=L(n);var u=(o=I(n))==g,h=!1;a==i||r==l&&u?(s.push([[a,i+1],[r,o+1]]),h=!0):s.push([[a,a+1],[r,57344]]),!h&&a+1<i&&(u?(s.push([[a+1,i+1],[l,o+1]]),h=!0):s.push([[a+1,i],[l,57344]])),h||s.push([[i,i+1],[l,o+1]]),d+=2}return function(e){for(var t,n,a,r,i,o,d=[],s=[],c=!1,u=-1,l=e.length;++u<l;)if(t=e[u],n=e[u+1]){for(a=t[0],r=t[1],i=n[0],o=n[1],s=r;i&&a[0]==i[0]&&a[1]==i[1];)s=A(o)?E(s,o[0]):k(s,o[0],o[1]-1),a=(t=e[++u])[0],r=t[1],i=(n=e[u+1])&&n[0],o=n&&n[1],c=!0;d.push([a,c?s:r]),c=!1}else d.push(t);return F(d)}(s)},$=function(e,t,n){if(n)return function(e){var t,n,a="",r=0,i=e.length;if(A(e))return P(e[0]);for(;r<i;)a+=(t=e[r])==(n=e[r+1]-1)?P(t):t+1==n?P(t)+P(n):P(t)+"-"+P(n),r+=2;return"["+a+"]"}(e);var a=[],r=function(e){for(var t,n,a=[],r=[],i=[],o=[],d=0,s=e.length;d<s;)t=e[d],n=e[d+1]-1,t<c?(n<c&&i.push(t,n+1),n>=c&&n<=u&&(i.push(t,c),a.push(c,n+1)),n>=l&&n<=g&&(i.push(t,c),a.push(c,56320),r.push(l,n+1)),n>g&&(i.push(t,c),a.push(c,56320),r.push(l,57344),n<=65535?i.push(57344,n+1):(i.push(57344,65536),o.push(65536,n+1)))):t>=c&&t<=u?(n>=c&&n<=u&&a.push(t,n+1),n>=l&&n<=g&&(a.push(t,56320),r.push(l,n+1)),n>g&&(a.push(t,56320),r.push(l,57344),n<=65535?i.push(57344,n+1):(i.push(57344,65536),o.push(65536,n+1)))):t>=l&&t<=g?(n>=l&&n<=g&&r.push(t,n+1),n>g&&(r.push(t,57344),n<=65535?i.push(57344,n+1):(i.push(57344,65536),o.push(65536,n+1)))):t>g&&t<=65535?n<=65535?i.push(t,n+1):(i.push(t,65536),o.push(65536,n+1)):o.push(t,n+1),d+=2;return{loneHighSurrogates:a,loneLowSurrogates:r,bmp:i,astral:o}}(e),i=r.loneHighSurrogates,o=r.loneLowSurrogates,d=r.bmp,s=r.astral,h=!D(i),f=!D(o),p=U(s);return t&&(d=S(d,i),h=!1,d=S(d,o),f=!1),D(d)||a.push(B(d)),p.length&&a.push(function(e){var t=[];return m(e,(function(e){var n=e[0],a=e[1];t.push(B(n)+B(a))})),t.join("|")}(p)),h&&a.push(B(i)+"(?![\\uDC00-\\uDFFF])"),f&&a.push("(?:[^\\uD800-\\uDBFF]|^)"+B(o)),a.join("|")},H=function(e){return arguments.length>1&&(e=w.call(arguments)),this instanceof H?(this.data=[],e?this.add(e):this):(new H).add(e)};H.version="1.4.2";var q=H.prototype;!function(e,t){var n;for(n in t)p.call(t,n)&&(e[n]=t[n])}(q,{add:function(e){var t=this;return null==e?t:e instanceof H?(t.data=S(t.data,e.data),t):(arguments.length>1&&(e=w.call(arguments)),b(e)?(m(e,(function(e){t.add(e)})),t):(t.data=E(t.data,y(e)?e:z(e)),t))},remove:function(e){var t=this;return null==e?t:e instanceof H?(t.data=function(e,t){for(var n,a,r=0,i=e.slice(),o=t.length;r<o;)i=(n=t[r])==(a=t[r+1]-1)?M(i,n):x(i,n,a),r+=2;return i}(t.data,e.data),t):(arguments.length>1&&(e=w.call(arguments)),b(e)?(m(e,(function(e){t.remove(e)})),t):(t.data=M(t.data,y(e)?e:z(e)),t))},addRange:function(e,t){var n=this;return n.data=k(n.data,y(e)?e:z(e),y(t)?t:z(t)),n},removeRange:function(e,t){var n=this,a=y(e)?e:z(e),r=y(t)?t:z(t);return n.data=x(n.data,a,r),n},intersection:function(e){var t=this,n=e instanceof H?j(e.data):e;return t.data=function(e,t){for(var n,a=0,r=t.length,i=[];a<r;)n=t[a],N(e,n)&&i.push(n),++a;return function(e){for(var t,n=-1,a=e.length,r=a-1,i=[],o=!0,d=0;++n<a;)if(t=e[n],o)i.push(t),d=t,o=!1;else if(t==d+1){if(n!=r){d=t;continue}o=!0,i.push(t+1)}else i.push(d+1,t),d=t;return o||i.push(t+1),i}(i)}(t.data,n),t},contains:function(e){return N(this.data,y(e)?e:z(e))},clone:function(){var e=new H;return e.data=this.data.slice(0),e},toString:function(e){var t=$(this.data,!!e&&e.bmpOnly,!!e&&e.hasUnicodeFlag);return t?t.replace(h,"\\0$1"):"[]"},toRegExp:function(e){var t=this.toString(e&&-1!=e.indexOf("u")?{hasUnicodeFlag:!0}:null);return RegExp(t,e||"")},valueOf:function(){return j(this.data)}}),q.toArray=q.valueOf,void 0===(a=function(){return H}.call(t,n,t,e))||(e.exports=a)}()},50999:function(e,t,n){"use strict";const a=n(45927);t.REGULAR=new Map([["d",a().addRange(48,57)],["D",a().addRange(0,47).addRange(58,65535)],["s",a(32,160,5760,8239,8287,12288,65279).addRange(9,13).addRange(8192,8202).addRange(8232,8233)],["S",a().addRange(0,8).addRange(14,31).addRange(33,159).addRange(161,5759).addRange(5761,8191).addRange(8203,8231).addRange(8234,8238).addRange(8240,8286).addRange(8288,12287).addRange(12289,65278).addRange(65280,65535)],["w",a(95).addRange(48,57).addRange(65,90).addRange(97,122)],["W",a(96).addRange(0,47).addRange(58,64).addRange(91,94).addRange(123,65535)]]),t.UNICODE=new Map([["d",a().addRange(48,57)],["D",a().addRange(0,47).addRange(58,1114111)],["s",a(32,160,5760,8239,8287,12288,65279).addRange(9,13).addRange(8192,8202).addRange(8232,8233)],["S",a().addRange(0,8).addRange(14,31).addRange(33,159).addRange(161,5759).addRange(5761,8191).addRange(8203,8231).addRange(8234,8238).addRange(8240,8286).addRange(8288,12287).addRange(12289,65278).addRange(65280,1114111)],["w",a(95).addRange(48,57).addRange(65,90).addRange(97,122)],["W",a(96).addRange(0,47).addRange(58,64).addRange(91,94).addRange(123,1114111)]]),t.UNICODE_IGNORE_CASE=new Map([["d",a().addRange(48,57)],["D",a().addRange(0,47).addRange(58,1114111)],["s",a(32,160,5760,8239,8287,12288,65279).addRange(9,13).addRange(8192,8202).addRange(8232,8233)],["S",a().addRange(0,8).addRange(14,31).addRange(33,159).addRange(161,5759).addRange(5761,8191).addRange(8203,8231).addRange(8234,8238).addRange(8240,8286).addRange(8288,12287).addRange(12289,65278).addRange(65280,1114111)],["w",a(95,383,8490).addRange(48,57).addRange(65,90).addRange(97,122)],["W",a(96).addRange(0,47).addRange(58,64).addRange(91,94).addRange(123,382).addRange(384,8489).addRange(8491,1114111)]])},57894:function(e){e.exports=new Map([[75,8490],[83,383],[107,8490],[115,383],[181,924],[197,8491],[223,7838],[229,8491],[383,83],[452,453],[453,452],[455,456],[456,455],[458,459],[459,458],[497,498],[498,497],[837,8126],[914,976],[917,1013],[920,1012],[921,8126],[922,1008],[924,181],[928,982],[929,1009],[931,962],[934,981],[937,8486],[952,1012],[962,931],[969,8486],[976,914],[977,1012],[981,934],[982,928],[1008,922],[1009,929],[1012,[920,977,952]],[1013,917],[1042,7296],[1044,7297],[1054,7298],[1057,7299],[1058,7301],[1066,7302],[1122,7303],[7296,1042],[7297,1044],[7298,1054],[7299,1057],[7300,7301],[7301,[1058,7300]],[7302,1066],[7303,1122],[7304,42570],[7776,7835],[7835,7776],[7838,223],[8064,8072],[8065,8073],[8066,8074],[8067,8075],[8068,8076],[8069,8077],[8070,8078],[8071,8079],[8072,8064],[8073,8065],[8074,8066],[8075,8067],[8076,8068],[8077,8069],[8078,8070],[8079,8071],[8080,8088],[8081,8089],[8082,8090],[8083,8091],[8084,8092],[8085,8093],[8086,8094],[8087,8095],[8088,8080],[8089,8081],[8090,8082],[8091,8083],[8092,8084],[8093,8085],[8094,8086],[8095,8087],[8096,8104],[8097,8105],[8098,8106],[8099,8107],[8100,8108],[8101,8109],[8102,8110],[8103,8111],[8104,8096],[8105,8097],[8106,8098],[8107,8099],[8108,8100],[8109,8101],[8110,8102],[8111,8103],[8115,8124],[8124,8115],[8126,[837,921]],[8131,8140],[8140,8131],[8179,8188],[8188,8179],[8486,[937,969]],[8490,75],[8491,[197,229]],[11311,11359],[11359,11311],[42570,7304],[42944,42945],[42945,42944],[42960,42961],[42961,42960],[42966,42967],[42967,42966],[42968,42969],[42969,42968],[66560,66600],[66561,66601],[66562,66602],[66563,66603],[66564,66604],[66565,66605],[66566,66606],[66567,66607],[66568,66608],[66569,66609],[66570,66610],[66571,66611],[66572,66612],[66573,66613],[66574,66614],[66575,66615],[66576,66616],[66577,66617],[66578,66618],[66579,66619],[66580,66620],[66581,66621],[66582,66622],[66583,66623],[66584,66624],[66585,66625],[66586,66626],[66587,66627],[66588,66628],[66589,66629],[66590,66630],[66591,66631],[66592,66632],[66593,66633],[66594,66634],[66595,66635],[66596,66636],[66597,66637],[66598,66638],[66599,66639],[66600,66560],[66601,66561],[66602,66562],[66603,66563],[66604,66564],[66605,66565],[66606,66566],[66607,66567],[66608,66568],[66609,66569],[66610,66570],[66611,66571],[66612,66572],[66613,66573],[66614,66574],[66615,66575],[66616,66576],[66617,66577],[66618,66578],[66619,66579],[66620,66580],[66621,66581],[66622,66582],[66623,66583],[66624,66584],[66625,66585],[66626,66586],[66627,66587],[66628,66588],[66629,66589],[66630,66590],[66631,66591],[66632,66592],[66633,66593],[66634,66594],[66635,66595],[66636,66596],[66637,66597],[66638,66598],[66639,66599],[66736,66776],[66737,66777],[66738,66778],[66739,66779],[66740,66780],[66741,66781],[66742,66782],[66743,66783],[66744,66784],[66745,66785],[66746,66786],[66747,66787],[66748,66788],[66749,66789],[66750,66790],[66751,66791],[66752,66792],[66753,66793],[66754,66794],[66755,66795],[66756,66796],[66757,66797],[66758,66798],[66759,66799],[66760,66800],[66761,66801],[66762,66802],[66763,66803],[66764,66804],[66765,66805],[66766,66806],[66767,66807],[66768,66808],[66769,66809],[66770,66810],[66771,66811],[66776,66736],[66777,66737],[66778,66738],[66779,66739],[66780,66740],[66781,66741],[66782,66742],[66783,66743],[66784,66744],[66785,66745],[66786,66746],[66787,66747],[66788,66748],[66789,66749],[66790,66750],[66791,66751],[66792,66752],[66793,66753],[66794,66754],[66795,66755],[66796,66756],[66797,66757],[66798,66758],[66799,66759],[66800,66760],[66801,66761],[66802,66762],[66803,66763],[66804,66764],[66805,66765],[66806,66766],[66807,66767],[66808,66768],[66809,66769],[66810,66770],[66811,66771],[66928,66967],[66929,66968],[66930,66969],[66931,66970],[66932,66971],[66933,66972],[66934,66973],[66935,66974],[66936,66975],[66937,66976],[66938,66977],[66940,66979],[66941,66980],[66942,66981],[66943,66982],[66944,66983],[66945,66984],[66946,66985],[66947,66986],[66948,66987],[66949,66988],[66950,66989],[66951,66990],[66952,66991],[66953,66992],[66954,66993],[66956,66995],[66957,66996],[66958,66997],[66959,66998],[66960,66999],[66961,67e3],[66962,67001],[66964,67003],[66965,67004],[66967,66928],[66968,66929],[66969,66930],[66970,66931],[66971,66932],[66972,66933],[66973,66934],[66974,66935],[66975,66936],[66976,66937],[66977,66938],[66979,66940],[66980,66941],[66981,66942],[66982,66943],[66983,66944],[66984,66945],[66985,66946],[66986,66947],[66987,66948],[66988,66949],[66989,66950],[66990,66951],[66991,66952],[66992,66953],[66993,66954],[66995,66956],[66996,66957],[66997,66958],[66998,66959],[66999,66960],[67e3,66961],[67001,66962],[67003,66964],[67004,66965],[68736,68800],[68737,68801],[68738,68802],[68739,68803],[68740,68804],[68741,68805],[68742,68806],[68743,68807],[68744,68808],[68745,68809],[68746,68810],[68747,68811],[68748,68812],[68749,68813],[68750,68814],[68751,68815],[68752,68816],[68753,68817],[68754,68818],[68755,68819],[68756,68820],[68757,68821],[68758,68822],[68759,68823],[68760,68824],[68761,68825],[68762,68826],[68763,68827],[68764,68828],[68765,68829],[68766,68830],[68767,68831],[68768,68832],[68769,68833],[68770,68834],[68771,68835],[68772,68836],[68773,68837],[68774,68838],[68775,68839],[68776,68840],[68777,68841],[68778,68842],[68779,68843],[68780,68844],[68781,68845],[68782,68846],[68783,68847],[68784,68848],[68785,68849],[68786,68850],[68800,68736],[68801,68737],[68802,68738],[68803,68739],[68804,68740],[68805,68741],[68806,68742],[68807,68743],[68808,68744],[68809,68745],[68810,68746],[68811,68747],[68812,68748],[68813,68749],[68814,68750],[68815,68751],[68816,68752],[68817,68753],[68818,68754],[68819,68755],[68820,68756],[68821,68757],[68822,68758],[68823,68759],[68824,68760],[68825,68761],[68826,68762],[68827,68763],[68828,68764],[68829,68765],[68830,68766],[68831,68767],[68832,68768],[68833,68769],[68834,68770],[68835,68771],[68836,68772],[68837,68773],[68838,68774],[68839,68775],[68840,68776],[68841,68777],[68842,68778],[68843,68779],[68844,68780],[68845,68781],[68846,68782],[68847,68783],[68848,68784],[68849,68785],[68850,68786],[71840,71872],[71841,71873],[71842,71874],[71843,71875],[71844,71876],[71845,71877],[71846,71878],[71847,71879],[71848,71880],[71849,71881],[71850,71882],[71851,71883],[71852,71884],[71853,71885],[71854,71886],[71855,71887],[71856,71888],[71857,71889],[71858,71890],[71859,71891],[71860,71892],[71861,71893],[71862,71894],[71863,71895],[71864,71896],[71865,71897],[71866,71898],[71867,71899],[71868,71900],[71869,71901],[71870,71902],[71871,71903],[71872,71840],[71873,71841],[71874,71842],[71875,71843],[71876,71844],[71877,71845],[71878,71846],[71879,71847],[71880,71848],[71881,71849],[71882,71850],[71883,71851],[71884,71852],[71885,71853],[71886,71854],[71887,71855],[71888,71856],[71889,71857],[71890,71858],[71891,71859],[71892,71860],[71893,71861],[71894,71862],[71895,71863],[71896,71864],[71897,71865],[71898,71866],[71899,71867],[71900,71868],[71901,71869],[71902,71870],[71903,71871],[93760,93792],[93761,93793],[93762,93794],[93763,93795],[93764,93796],[93765,93797],[93766,93798],[93767,93799],[93768,93800],[93769,93801],[93770,93802],[93771,93803],[93772,93804],[93773,93805],[93774,93806],[93775,93807],[93776,93808],[93777,93809],[93778,93810],[93779,93811],[93780,93812],[93781,93813],[93782,93814],[93783,93815],[93784,93816],[93785,93817],[93786,93818],[93787,93819],[93788,93820],[93789,93821],[93790,93822],[93791,93823],[93792,93760],[93793,93761],[93794,93762],[93795,93763],[93796,93764],[93797,93765],[93798,93766],[93799,93767],[93800,93768],[93801,93769],[93802,93770],[93803,93771],[93804,93772],[93805,93773],[93806,93774],[93807,93775],[93808,93776],[93809,93777],[93810,93778],[93811,93779],[93812,93780],[93813,93781],[93814,93782],[93815,93783],[93816,93784],[93817,93785],[93818,93786],[93819,93787],[93820,93788],[93821,93789],[93822,93790],[93823,93791],[125184,125218],[125185,125219],[125186,125220],[125187,125221],[125188,125222],[125189,125223],[125190,125224],[125191,125225],[125192,125226],[125193,125227],[125194,125228],[125195,125229],[125196,125230],[125197,125231],[125198,125232],[125199,125233],[125200,125234],[125201,125235],[125202,125236],[125203,125237],[125204,125238],[125205,125239],[125206,125240],[125207,125241],[125208,125242],[125209,125243],[125210,125244],[125211,125245],[125212,125246],[125213,125247],[125214,125248],[125215,125249],[125216,125250],[125217,125251],[125218,125184],[125219,125185],[125220,125186],[125221,125187],[125222,125188],[125223,125189],[125224,125190],[125225,125191],[125226,125192],[125227,125193],[125228,125194],[125229,125195],[125230,125196],[125231,125197],[125232,125198],[125233,125199],[125234,125200],[125235,125201],[125236,125202],[125237,125203],[125238,125204],[125239,125205],[125240,125206],[125241,125207],[125242,125208],[125243,125209],[125244,125210],[125245,125211],[125246,125212],[125247,125213],[125248,125214],[125249,125215],[125250,125216],[125251,125217]])},50497:function(e,t,n){const a=n(45927)();a.addRange(0,127),e.exports=a},30110:function(e,t,n){const a=n(45927)();a.addRange(48,57).addRange(65,70).addRange(97,102),e.exports=a},89474:function(e,t,n){const a=n(45927)(170,181,186,748,750,837,895,902,908,1369,1471,1479,1791,2042,2482,2510,2519,2556,2641,2654,2768,2929,2972,3024,3031,3165,3406,3517,3542,3661,3716,3749,3782,3789,3840,4152,4295,4301,4696,4800,6103,6108,6823,7418,8025,8027,8029,8126,8305,8319,8450,8455,8469,8484,8486,8488,8526,11559,11565,11631,11823,42963,43205,43259,43471,43712,43714,64318,67592,67644,69415,69826,70006,70106,70108,70199,70206,70280,70480,70487,70855,71232,71236,71352,71945,72161,72349,72768,73018,73027,73112,73648,94179,113822,119970,119995,120134,123214,125255,125259,126500,126503,126521,126523,126530,126535,126537,126539,126548,126551,126553,126555,126557,126559,126564,126590);a.addRange(65,90).addRange(97,122).addRange(192,214).addRange(216,246).addRange(248,705).addRange(710,721).addRange(736,740).addRange(880,884).addRange(886,887).addRange(890,893).addRange(904,906).addRange(910,929).addRange(931,1013).addRange(1015,1153).addRange(1162,1327).addRange(1329,1366).addRange(1376,1416).addRange(1456,1469).addRange(1473,1474).addRange(1476,1477).addRange(1488,1514).addRange(1519,1522).addRange(1552,1562).addRange(1568,1623).addRange(1625,1631).addRange(1646,1747).addRange(1749,1756).addRange(1761,1768).addRange(1773,1775).addRange(1786,1788).addRange(1808,1855).addRange(1869,1969).addRange(1994,2026).addRange(2036,2037).addRange(2048,2071).addRange(2074,2092).addRange(2112,2136).addRange(2144,2154).addRange(2160,2183).addRange(2185,2190).addRange(2208,2249).addRange(2260,2271).addRange(2275,2281).addRange(2288,2363).addRange(2365,2380).addRange(2382,2384).addRange(2389,2403).addRange(2417,2435).addRange(2437,2444).addRange(2447,2448).addRange(2451,2472),a.addRange(2474,2480).addRange(2486,2489).addRange(2493,2500).addRange(2503,2504).addRange(2507,2508).addRange(2524,2525).addRange(2527,2531).addRange(2544,2545).addRange(2561,2563).addRange(2565,2570).addRange(2575,2576).addRange(2579,2600).addRange(2602,2608).addRange(2610,2611).addRange(2613,2614).addRange(2616,2617).addRange(2622,2626).addRange(2631,2632).addRange(2635,2636).addRange(2649,2652).addRange(2672,2677).addRange(2689,2691).addRange(2693,2701).addRange(2703,2705).addRange(2707,2728).addRange(2730,2736).addRange(2738,2739).addRange(2741,2745).addRange(2749,2757).addRange(2759,2761).addRange(2763,2764).addRange(2784,2787).addRange(2809,2812).addRange(2817,2819).addRange(2821,2828).addRange(2831,2832).addRange(2835,2856).addRange(2858,2864).addRange(2866,2867).addRange(2869,2873).addRange(2877,2884).addRange(2887,2888).addRange(2891,2892).addRange(2902,2903).addRange(2908,2909).addRange(2911,2915).addRange(2946,2947).addRange(2949,2954).addRange(2958,2960).addRange(2962,2965).addRange(2969,2970),a.addRange(2974,2975).addRange(2979,2980).addRange(2984,2986).addRange(2990,3001).addRange(3006,3010).addRange(3014,3016).addRange(3018,3020).addRange(3072,3075).addRange(3077,3084).addRange(3086,3088).addRange(3090,3112).addRange(3114,3129).addRange(3133,3140).addRange(3142,3144).addRange(3146,3148).addRange(3157,3158).addRange(3160,3162).addRange(3168,3171).addRange(3200,3203).addRange(3205,3212).addRange(3214,3216).addRange(3218,3240).addRange(3242,3251).addRange(3253,3257).addRange(3261,3268).addRange(3270,3272).addRange(3274,3276).addRange(3285,3286).addRange(3293,3294).addRange(3296,3299).addRange(3313,3314).addRange(3328,3340).addRange(3342,3344).addRange(3346,3386).addRange(3389,3396).addRange(3398,3400).addRange(3402,3404).addRange(3412,3415).addRange(3423,3427).addRange(3450,3455).addRange(3457,3459).addRange(3461,3478).addRange(3482,3505).addRange(3507,3515).addRange(3520,3526).addRange(3535,3540).addRange(3544,3551).addRange(3570,3571).addRange(3585,3642).addRange(3648,3654).addRange(3713,3714),a.addRange(3718,3722).addRange(3724,3747).addRange(3751,3769).addRange(3771,3773).addRange(3776,3780).addRange(3804,3807).addRange(3904,3911).addRange(3913,3948).addRange(3953,3969).addRange(3976,3991).addRange(3993,4028).addRange(4096,4150).addRange(4155,4159).addRange(4176,4239).addRange(4250,4253).addRange(4256,4293).addRange(4304,4346).addRange(4348,4680).addRange(4682,4685).addRange(4688,4694).addRange(4698,4701).addRange(4704,4744).addRange(4746,4749).addRange(4752,4784).addRange(4786,4789).addRange(4792,4798).addRange(4802,4805).addRange(4808,4822).addRange(4824,4880).addRange(4882,4885).addRange(4888,4954).addRange(4992,5007).addRange(5024,5109).addRange(5112,5117).addRange(5121,5740).addRange(5743,5759).addRange(5761,5786).addRange(5792,5866).addRange(5870,5880).addRange(5888,5907).addRange(5919,5939).addRange(5952,5971).addRange(5984,5996).addRange(5998,6e3).addRange(6002,6003).addRange(6016,6067).addRange(6070,6088).addRange(6176,6264).addRange(6272,6314).addRange(6320,6389).addRange(6400,6430),a.addRange(6432,6443).addRange(6448,6456).addRange(6480,6509).addRange(6512,6516).addRange(6528,6571).addRange(6576,6601).addRange(6656,6683).addRange(6688,6750).addRange(6753,6772).addRange(6847,6848).addRange(6860,6862).addRange(6912,6963).addRange(6965,6979).addRange(6981,6988).addRange(7040,7081).addRange(7084,7087).addRange(7098,7141).addRange(7143,7153).addRange(7168,7222).addRange(7245,7247).addRange(7258,7293).addRange(7296,7304).addRange(7312,7354).addRange(7357,7359).addRange(7401,7404).addRange(7406,7411).addRange(7413,7414).addRange(7424,7615).addRange(7655,7668).addRange(7680,7957).addRange(7960,7965).addRange(7968,8005).addRange(8008,8013).addRange(8016,8023).addRange(8031,8061).addRange(8064,8116).addRange(8118,8124).addRange(8130,8132).addRange(8134,8140).addRange(8144,8147).addRange(8150,8155).addRange(8160,8172).addRange(8178,8180).addRange(8182,8188).addRange(8336,8348).addRange(8458,8467).addRange(8473,8477).addRange(8490,8493).addRange(8495,8505).addRange(8508,8511).addRange(8517,8521),a.addRange(8544,8584).addRange(9398,9449).addRange(11264,11492).addRange(11499,11502).addRange(11506,11507).addRange(11520,11557).addRange(11568,11623).addRange(11648,11670).addRange(11680,11686).addRange(11688,11694).addRange(11696,11702).addRange(11704,11710).addRange(11712,11718).addRange(11720,11726).addRange(11728,11734).addRange(11736,11742).addRange(11744,11775).addRange(12293,12295).addRange(12321,12329).addRange(12337,12341).addRange(12344,12348).addRange(12353,12438).addRange(12445,12447).addRange(12449,12538).addRange(12540,12543).addRange(12549,12591).addRange(12593,12686).addRange(12704,12735).addRange(12784,12799).addRange(13312,19903).addRange(19968,42124).addRange(42192,42237).addRange(42240,42508).addRange(42512,42527).addRange(42538,42539).addRange(42560,42606).addRange(42612,42619).addRange(42623,42735).addRange(42775,42783).addRange(42786,42888).addRange(42891,42954).addRange(42960,42961).addRange(42965,42969).addRange(42994,43013).addRange(43015,43047).addRange(43072,43123).addRange(43136,43203).addRange(43250,43255).addRange(43261,43263).addRange(43274,43306).addRange(43312,43346),a.addRange(43360,43388).addRange(43392,43442).addRange(43444,43455).addRange(43488,43503).addRange(43514,43518).addRange(43520,43574).addRange(43584,43597).addRange(43616,43638).addRange(43642,43710).addRange(43739,43741).addRange(43744,43759).addRange(43762,43765).addRange(43777,43782).addRange(43785,43790).addRange(43793,43798).addRange(43808,43814).addRange(43816,43822).addRange(43824,43866).addRange(43868,43881).addRange(43888,44010).addRange(44032,55203).addRange(55216,55238).addRange(55243,55291).addRange(63744,64109).addRange(64112,64217).addRange(64256,64262).addRange(64275,64279).addRange(64285,64296).addRange(64298,64310).addRange(64312,64316).addRange(64320,64321).addRange(64323,64324).addRange(64326,64433).addRange(64467,64829).addRange(64848,64911).addRange(64914,64967).addRange(65008,65019).addRange(65136,65140).addRange(65142,65276).addRange(65313,65338).addRange(65345,65370).addRange(65382,65470).addRange(65474,65479).addRange(65482,65487).addRange(65490,65495).addRange(65498,65500).addRange(65536,65547).addRange(65549,65574).addRange(65576,65594).addRange(65596,65597).addRange(65599,65613),a.addRange(65616,65629).addRange(65664,65786).addRange(65856,65908).addRange(66176,66204).addRange(66208,66256).addRange(66304,66335).addRange(66349,66378).addRange(66384,66426).addRange(66432,66461).addRange(66464,66499).addRange(66504,66511).addRange(66513,66517).addRange(66560,66717).addRange(66736,66771).addRange(66776,66811).addRange(66816,66855).addRange(66864,66915).addRange(66928,66938).addRange(66940,66954).addRange(66956,66962).addRange(66964,66965).addRange(66967,66977).addRange(66979,66993).addRange(66995,67001).addRange(67003,67004).addRange(67072,67382).addRange(67392,67413).addRange(67424,67431).addRange(67456,67461).addRange(67463,67504).addRange(67506,67514).addRange(67584,67589).addRange(67594,67637).addRange(67639,67640).addRange(67647,67669).addRange(67680,67702).addRange(67712,67742).addRange(67808,67826).addRange(67828,67829).addRange(67840,67861).addRange(67872,67897).addRange(67968,68023).addRange(68030,68031).addRange(68096,68099).addRange(68101,68102).addRange(68108,68115).addRange(68117,68119).addRange(68121,68149).addRange(68192,68220).addRange(68224,68252).addRange(68288,68295),a.addRange(68297,68324).addRange(68352,68405).addRange(68416,68437).addRange(68448,68466).addRange(68480,68497).addRange(68608,68680).addRange(68736,68786).addRange(68800,68850).addRange(68864,68903).addRange(69248,69289).addRange(69291,69292).addRange(69296,69297).addRange(69376,69404).addRange(69424,69445).addRange(69488,69505).addRange(69552,69572).addRange(69600,69622).addRange(69632,69701).addRange(69745,69749).addRange(69762,69816).addRange(69840,69864).addRange(69888,69938).addRange(69956,69959).addRange(69968,70002).addRange(70016,70079).addRange(70081,70084).addRange(70094,70095).addRange(70144,70161).addRange(70163,70196).addRange(70272,70278).addRange(70282,70285).addRange(70287,70301).addRange(70303,70312).addRange(70320,70376).addRange(70400,70403).addRange(70405,70412).addRange(70415,70416).addRange(70419,70440).addRange(70442,70448).addRange(70450,70451).addRange(70453,70457).addRange(70461,70468).addRange(70471,70472).addRange(70475,70476).addRange(70493,70499).addRange(70656,70721).addRange(70723,70725).addRange(70727,70730).addRange(70751,70753).addRange(70784,70849).addRange(70852,70853),a.addRange(71040,71093).addRange(71096,71102).addRange(71128,71133).addRange(71168,71230).addRange(71296,71349).addRange(71424,71450).addRange(71453,71466).addRange(71488,71494).addRange(71680,71736).addRange(71840,71903).addRange(71935,71942).addRange(71948,71955).addRange(71957,71958).addRange(71960,71989).addRange(71991,71992).addRange(71995,71996).addRange(71999,72002).addRange(72096,72103).addRange(72106,72151).addRange(72154,72159).addRange(72163,72164).addRange(72192,72242).addRange(72245,72254).addRange(72272,72343).addRange(72368,72440).addRange(72704,72712).addRange(72714,72758).addRange(72760,72766).addRange(72818,72847).addRange(72850,72871).addRange(72873,72886).addRange(72960,72966).addRange(72968,72969).addRange(72971,73014).addRange(73020,73021).addRange(73023,73025).addRange(73030,73031).addRange(73056,73061).addRange(73063,73064).addRange(73066,73102).addRange(73104,73105).addRange(73107,73110).addRange(73440,73462).addRange(73728,74649).addRange(74752,74862).addRange(74880,75075).addRange(77712,77808).addRange(77824,78894).addRange(82944,83526).addRange(92160,92728).addRange(92736,92766),a.addRange(92784,92862).addRange(92880,92909).addRange(92928,92975).addRange(92992,92995).addRange(93027,93047).addRange(93053,93071).addRange(93760,93823).addRange(93952,94026).addRange(94031,94087).addRange(94095,94111).addRange(94176,94177).addRange(94192,94193).addRange(94208,100343).addRange(100352,101589).addRange(101632,101640).addRange(110576,110579).addRange(110581,110587).addRange(110589,110590).addRange(110592,110882).addRange(110928,110930).addRange(110948,110951).addRange(110960,111355).addRange(113664,113770).addRange(113776,113788).addRange(113792,113800).addRange(113808,113817).addRange(119808,119892).addRange(119894,119964).addRange(119966,119967).addRange(119973,119974).addRange(119977,119980).addRange(119982,119993).addRange(119997,120003).addRange(120005,120069).addRange(120071,120074).addRange(120077,120084).addRange(120086,120092).addRange(120094,120121).addRange(120123,120126).addRange(120128,120132).addRange(120138,120144).addRange(120146,120485).addRange(120488,120512).addRange(120514,120538).addRange(120540,120570).addRange(120572,120596).addRange(120598,120628).addRange(120630,120654).addRange(120656,120686).addRange(120688,120712).addRange(120714,120744),a.addRange(120746,120770).addRange(120772,120779).addRange(122624,122654).addRange(122880,122886).addRange(122888,122904).addRange(122907,122913).addRange(122915,122916).addRange(122918,122922).addRange(123136,123180).addRange(123191,123197).addRange(123536,123565).addRange(123584,123627).addRange(124896,124902).addRange(124904,124907).addRange(124909,124910).addRange(124912,124926).addRange(124928,125124).addRange(125184,125251).addRange(126464,126467).addRange(126469,126495).addRange(126497,126498).addRange(126505,126514).addRange(126516,126519).addRange(126541,126543).addRange(126545,126546).addRange(126561,126562).addRange(126567,126570).addRange(126572,126578).addRange(126580,126583).addRange(126585,126588).addRange(126592,126601).addRange(126603,126619).addRange(126625,126627).addRange(126629,126633).addRange(126635,126651).addRange(127280,127305).addRange(127312,127337).addRange(127344,127369).addRange(131072,173791).addRange(173824,177976).addRange(177984,178205).addRange(178208,183969).addRange(183984,191456).addRange(194560,195101).addRange(196608,201546),e.exports=a},92085:function(e,t,n){const a=n(45927)();a.addRange(0,1114111),e.exports=a},68632:function(e,t,n){const a=n(45927)(908,2142,2482,2519,2620,2641,2654,2768,2972,3024,3031,3165,3517,3530,3542,3716,3749,3782,4295,4301,4696,4800,6464,8025,8027,8029,11559,11565,42963,64318,64975,65279,65952,67592,67644,67903,69837,70280,70480,70487,71945,73018,73648,119970,119995,120134,123647,126500,126503,126521,126523,126530,126535,126537,126539,126548,126551,126553,126555,126557,126559,126564,126590,129008,917505);a.addRange(0,887).addRange(890,895).addRange(900,906).addRange(910,929).addRange(931,1327).addRange(1329,1366).addRange(1369,1418).addRange(1421,1423).addRange(1425,1479).addRange(1488,1514).addRange(1519,1524).addRange(1536,1805).addRange(1807,1866).addRange(1869,1969).addRange(1984,2042).addRange(2045,2093).addRange(2096,2110).addRange(2112,2139).addRange(2144,2154).addRange(2160,2190).addRange(2192,2193).addRange(2200,2435).addRange(2437,2444).addRange(2447,2448).addRange(2451,2472).addRange(2474,2480).addRange(2486,2489).addRange(2492,2500).addRange(2503,2504).addRange(2507,2510).addRange(2524,2525).addRange(2527,2531).addRange(2534,2558).addRange(2561,2563).addRange(2565,2570).addRange(2575,2576).addRange(2579,2600).addRange(2602,2608).addRange(2610,2611).addRange(2613,2614).addRange(2616,2617).addRange(2622,2626).addRange(2631,2632).addRange(2635,2637).addRange(2649,2652).addRange(2662,2678).addRange(2689,2691).addRange(2693,2701).addRange(2703,2705).addRange(2707,2728).addRange(2730,2736),a.addRange(2738,2739).addRange(2741,2745).addRange(2748,2757).addRange(2759,2761).addRange(2763,2765).addRange(2784,2787).addRange(2790,2801).addRange(2809,2815).addRange(2817,2819).addRange(2821,2828).addRange(2831,2832).addRange(2835,2856).addRange(2858,2864).addRange(2866,2867).addRange(2869,2873).addRange(2876,2884).addRange(2887,2888).addRange(2891,2893).addRange(2901,2903).addRange(2908,2909).addRange(2911,2915).addRange(2918,2935).addRange(2946,2947).addRange(2949,2954).addRange(2958,2960).addRange(2962,2965).addRange(2969,2970).addRange(2974,2975).addRange(2979,2980).addRange(2984,2986).addRange(2990,3001).addRange(3006,3010).addRange(3014,3016).addRange(3018,3021).addRange(3046,3066).addRange(3072,3084).addRange(3086,3088).addRange(3090,3112).addRange(3114,3129).addRange(3132,3140).addRange(3142,3144).addRange(3146,3149).addRange(3157,3158).addRange(3160,3162).addRange(3168,3171).addRange(3174,3183).addRange(3191,3212).addRange(3214,3216).addRange(3218,3240).addRange(3242,3251).addRange(3253,3257),a.addRange(3260,3268).addRange(3270,3272).addRange(3274,3277).addRange(3285,3286).addRange(3293,3294).addRange(3296,3299).addRange(3302,3311).addRange(3313,3314).addRange(3328,3340).addRange(3342,3344).addRange(3346,3396).addRange(3398,3400).addRange(3402,3407).addRange(3412,3427).addRange(3430,3455).addRange(3457,3459).addRange(3461,3478).addRange(3482,3505).addRange(3507,3515).addRange(3520,3526).addRange(3535,3540).addRange(3544,3551).addRange(3558,3567).addRange(3570,3572).addRange(3585,3642).addRange(3647,3675).addRange(3713,3714).addRange(3718,3722).addRange(3724,3747).addRange(3751,3773).addRange(3776,3780).addRange(3784,3789).addRange(3792,3801).addRange(3804,3807).addRange(3840,3911).addRange(3913,3948).addRange(3953,3991).addRange(3993,4028).addRange(4030,4044).addRange(4046,4058).addRange(4096,4293).addRange(4304,4680).addRange(4682,4685).addRange(4688,4694).addRange(4698,4701).addRange(4704,4744).addRange(4746,4749).addRange(4752,4784).addRange(4786,4789).addRange(4792,4798).addRange(4802,4805),a.addRange(4808,4822).addRange(4824,4880).addRange(4882,4885).addRange(4888,4954).addRange(4957,4988).addRange(4992,5017).addRange(5024,5109).addRange(5112,5117).addRange(5120,5788).addRange(5792,5880).addRange(5888,5909).addRange(5919,5942).addRange(5952,5971).addRange(5984,5996).addRange(5998,6e3).addRange(6002,6003).addRange(6016,6109).addRange(6112,6121).addRange(6128,6137).addRange(6144,6169).addRange(6176,6264).addRange(6272,6314).addRange(6320,6389).addRange(6400,6430).addRange(6432,6443).addRange(6448,6459).addRange(6468,6509).addRange(6512,6516).addRange(6528,6571).addRange(6576,6601).addRange(6608,6618).addRange(6622,6683).addRange(6686,6750).addRange(6752,6780).addRange(6783,6793).addRange(6800,6809).addRange(6816,6829).addRange(6832,6862).addRange(6912,6988).addRange(6992,7038).addRange(7040,7155).addRange(7164,7223).addRange(7227,7241).addRange(7245,7304).addRange(7312,7354).addRange(7357,7367).addRange(7376,7418).addRange(7424,7957).addRange(7960,7965).addRange(7968,8005).addRange(8008,8013),a.addRange(8016,8023).addRange(8031,8061).addRange(8064,8116).addRange(8118,8132).addRange(8134,8147).addRange(8150,8155).addRange(8157,8175).addRange(8178,8180).addRange(8182,8190).addRange(8192,8292).addRange(8294,8305).addRange(8308,8334).addRange(8336,8348).addRange(8352,8384).addRange(8400,8432).addRange(8448,8587).addRange(8592,9254).addRange(9280,9290).addRange(9312,11123).addRange(11126,11157).addRange(11159,11507).addRange(11513,11557).addRange(11568,11623).addRange(11631,11632).addRange(11647,11670).addRange(11680,11686).addRange(11688,11694).addRange(11696,11702).addRange(11704,11710).addRange(11712,11718).addRange(11720,11726).addRange(11728,11734).addRange(11736,11742).addRange(11744,11869).addRange(11904,11929).addRange(11931,12019).addRange(12032,12245).addRange(12272,12283).addRange(12288,12351).addRange(12353,12438).addRange(12441,12543).addRange(12549,12591).addRange(12593,12686).addRange(12688,12771).addRange(12784,12830).addRange(12832,42124).addRange(42128,42182).addRange(42192,42539).addRange(42560,42743).addRange(42752,42954).addRange(42960,42961),a.addRange(42965,42969).addRange(42994,43052).addRange(43056,43065).addRange(43072,43127).addRange(43136,43205).addRange(43214,43225).addRange(43232,43347).addRange(43359,43388).addRange(43392,43469).addRange(43471,43481).addRange(43486,43518).addRange(43520,43574).addRange(43584,43597).addRange(43600,43609).addRange(43612,43714).addRange(43739,43766).addRange(43777,43782).addRange(43785,43790).addRange(43793,43798).addRange(43808,43814).addRange(43816,43822).addRange(43824,43883).addRange(43888,44013).addRange(44016,44025).addRange(44032,55203).addRange(55216,55238).addRange(55243,55291).addRange(55296,64109).addRange(64112,64217).addRange(64256,64262).addRange(64275,64279).addRange(64285,64310).addRange(64312,64316).addRange(64320,64321).addRange(64323,64324).addRange(64326,64450).addRange(64467,64911).addRange(64914,64967).addRange(65008,65049).addRange(65056,65106).addRange(65108,65126).addRange(65128,65131).addRange(65136,65140).addRange(65142,65276).addRange(65281,65470).addRange(65474,65479).addRange(65482,65487).addRange(65490,65495).addRange(65498,65500).addRange(65504,65510).addRange(65512,65518),a.addRange(65529,65533).addRange(65536,65547).addRange(65549,65574).addRange(65576,65594).addRange(65596,65597).addRange(65599,65613).addRange(65616,65629).addRange(65664,65786).addRange(65792,65794).addRange(65799,65843).addRange(65847,65934).addRange(65936,65948).addRange(66e3,66045).addRange(66176,66204).addRange(66208,66256).addRange(66272,66299).addRange(66304,66339).addRange(66349,66378).addRange(66384,66426).addRange(66432,66461).addRange(66463,66499).addRange(66504,66517).addRange(66560,66717).addRange(66720,66729).addRange(66736,66771).addRange(66776,66811).addRange(66816,66855).addRange(66864,66915).addRange(66927,66938).addRange(66940,66954).addRange(66956,66962).addRange(66964,66965).addRange(66967,66977).addRange(66979,66993).addRange(66995,67001).addRange(67003,67004).addRange(67072,67382).addRange(67392,67413).addRange(67424,67431).addRange(67456,67461).addRange(67463,67504).addRange(67506,67514).addRange(67584,67589).addRange(67594,67637).addRange(67639,67640).addRange(67647,67669).addRange(67671,67742).addRange(67751,67759).addRange(67808,67826).addRange(67828,67829).addRange(67835,67867),a.addRange(67871,67897).addRange(67968,68023).addRange(68028,68047).addRange(68050,68099).addRange(68101,68102).addRange(68108,68115).addRange(68117,68119).addRange(68121,68149).addRange(68152,68154).addRange(68159,68168).addRange(68176,68184).addRange(68192,68255).addRange(68288,68326).addRange(68331,68342).addRange(68352,68405).addRange(68409,68437).addRange(68440,68466).addRange(68472,68497).addRange(68505,68508).addRange(68521,68527).addRange(68608,68680).addRange(68736,68786).addRange(68800,68850).addRange(68858,68903).addRange(68912,68921).addRange(69216,69246).addRange(69248,69289).addRange(69291,69293).addRange(69296,69297).addRange(69376,69415).addRange(69424,69465).addRange(69488,69513).addRange(69552,69579).addRange(69600,69622).addRange(69632,69709).addRange(69714,69749).addRange(69759,69826).addRange(69840,69864).addRange(69872,69881).addRange(69888,69940).addRange(69942,69959).addRange(69968,70006).addRange(70016,70111).addRange(70113,70132).addRange(70144,70161).addRange(70163,70206).addRange(70272,70278).addRange(70282,70285).addRange(70287,70301).addRange(70303,70313).addRange(70320,70378),a.addRange(70384,70393).addRange(70400,70403).addRange(70405,70412).addRange(70415,70416).addRange(70419,70440).addRange(70442,70448).addRange(70450,70451).addRange(70453,70457).addRange(70459,70468).addRange(70471,70472).addRange(70475,70477).addRange(70493,70499).addRange(70502,70508).addRange(70512,70516).addRange(70656,70747).addRange(70749,70753).addRange(70784,70855).addRange(70864,70873).addRange(71040,71093).addRange(71096,71133).addRange(71168,71236).addRange(71248,71257).addRange(71264,71276).addRange(71296,71353).addRange(71360,71369).addRange(71424,71450).addRange(71453,71467).addRange(71472,71494).addRange(71680,71739).addRange(71840,71922).addRange(71935,71942).addRange(71948,71955).addRange(71957,71958).addRange(71960,71989).addRange(71991,71992).addRange(71995,72006).addRange(72016,72025).addRange(72096,72103).addRange(72106,72151).addRange(72154,72164).addRange(72192,72263).addRange(72272,72354).addRange(72368,72440).addRange(72704,72712).addRange(72714,72758).addRange(72760,72773).addRange(72784,72812).addRange(72816,72847).addRange(72850,72871).addRange(72873,72886).addRange(72960,72966),a.addRange(72968,72969).addRange(72971,73014).addRange(73020,73021).addRange(73023,73031).addRange(73040,73049).addRange(73056,73061).addRange(73063,73064).addRange(73066,73102).addRange(73104,73105).addRange(73107,73112).addRange(73120,73129).addRange(73440,73464).addRange(73664,73713).addRange(73727,74649).addRange(74752,74862).addRange(74864,74868).addRange(74880,75075).addRange(77712,77810).addRange(77824,78894).addRange(78896,78904).addRange(82944,83526).addRange(92160,92728).addRange(92736,92766).addRange(92768,92777).addRange(92782,92862).addRange(92864,92873).addRange(92880,92909).addRange(92912,92917).addRange(92928,92997).addRange(93008,93017).addRange(93019,93025).addRange(93027,93047).addRange(93053,93071).addRange(93760,93850).addRange(93952,94026).addRange(94031,94087).addRange(94095,94111).addRange(94176,94180).addRange(94192,94193).addRange(94208,100343).addRange(100352,101589).addRange(101632,101640).addRange(110576,110579).addRange(110581,110587).addRange(110589,110590).addRange(110592,110882).addRange(110928,110930).addRange(110948,110951).addRange(110960,111355).addRange(113664,113770).addRange(113776,113788),a.addRange(113792,113800).addRange(113808,113817).addRange(113820,113827).addRange(118528,118573).addRange(118576,118598).addRange(118608,118723).addRange(118784,119029).addRange(119040,119078).addRange(119081,119274).addRange(119296,119365).addRange(119520,119539).addRange(119552,119638).addRange(119648,119672).addRange(119808,119892).addRange(119894,119964).addRange(119966,119967).addRange(119973,119974).addRange(119977,119980).addRange(119982,119993).addRange(119997,120003).addRange(120005,120069).addRange(120071,120074).addRange(120077,120084).addRange(120086,120092).addRange(120094,120121).addRange(120123,120126).addRange(120128,120132).addRange(120138,120144).addRange(120146,120485).addRange(120488,120779).addRange(120782,121483).addRange(121499,121503).addRange(121505,121519).addRange(122624,122654).addRange(122880,122886).addRange(122888,122904).addRange(122907,122913).addRange(122915,122916).addRange(122918,122922).addRange(123136,123180).addRange(123184,123197).addRange(123200,123209).addRange(123214,123215).addRange(123536,123566).addRange(123584,123641).addRange(124896,124902).addRange(124904,124907).addRange(124909,124910).addRange(124912,124926).addRange(124928,125124).addRange(125127,125142),a.addRange(125184,125259).addRange(125264,125273).addRange(125278,125279).addRange(126065,126132).addRange(126209,126269).addRange(126464,126467).addRange(126469,126495).addRange(126497,126498).addRange(126505,126514).addRange(126516,126519).addRange(126541,126543).addRange(126545,126546).addRange(126561,126562).addRange(126567,126570).addRange(126572,126578).addRange(126580,126583).addRange(126585,126588).addRange(126592,126601).addRange(126603,126619).addRange(126625,126627).addRange(126629,126633).addRange(126635,126651).addRange(126704,126705).addRange(126976,127019).addRange(127024,127123).addRange(127136,127150).addRange(127153,127167).addRange(127169,127183).addRange(127185,127221).addRange(127232,127405).addRange(127462,127490).addRange(127504,127547).addRange(127552,127560).addRange(127568,127569).addRange(127584,127589).addRange(127744,128727).addRange(128733,128748).addRange(128752,128764).addRange(128768,128883).addRange(128896,128984).addRange(128992,129003).addRange(129024,129035).addRange(129040,129095).addRange(129104,129113).addRange(129120,129159).addRange(129168,129197).addRange(129200,129201).addRange(129280,129619).addRange(129632,129645).addRange(129648,129652).addRange(129656,129660),a.addRange(129664,129670).addRange(129680,129708).addRange(129712,129722).addRange(129728,129733).addRange(129744,129753).addRange(129760,129767).addRange(129776,129782).addRange(129792,129938).addRange(129940,129994).addRange(130032,130041).addRange(131072,173791).addRange(173824,177976).addRange(177984,178205).addRange(178208,183969).addRange(183984,191456).addRange(194560,195101).addRange(196608,201546).addRange(917536,917631).addRange(917760,917999).addRange(983040,1048573).addRange(1048576,1114109),e.exports=a},49340:function(e,t,n){const a=n(45927)(1564);a.addRange(8206,8207).addRange(8234,8238).addRange(8294,8297),e.exports=a},82035:function(e,t,n){const a=n(45927)(60,62,91,93,123,125,171,187,8512,8721,8740,8742,8761,8802,8856,10176,10680,10697,10721,10788,10790,10793,10972,10974,10995,11005,11262,65308,65310,65339,65341,65371,65373,120539,120597,120655,120713,120771);a.addRange(40,41).addRange(3898,3901).addRange(5787,5788).addRange(8249,8250).addRange(8261,8262).addRange(8317,8318).addRange(8333,8334).addRange(8705,8708).addRange(8712,8717).addRange(8725,8726).addRange(8730,8733).addRange(8735,8738).addRange(8747,8755).addRange(8763,8780).addRange(8786,8789).addRange(8799,8800).addRange(8804,8811).addRange(8814,8844).addRange(8847,8850).addRange(8866,8867).addRange(8870,8888).addRange(8894,8895).addRange(8905,8909).addRange(8912,8913).addRange(8918,8941).addRange(8944,8959).addRange(8968,8971).addRange(8992,8993).addRange(9001,9002).addRange(10088,10101).addRange(10179,10182).addRange(10184,10185).addRange(10187,10189).addRange(10195,10198).addRange(10204,10206).addRange(10210,10223).addRange(10627,10648).addRange(10651,10656).addRange(10658,10671).addRange(10688,10693).addRange(10702,10706).addRange(10708,10709).addRange(10712,10716).addRange(10723,10725).addRange(10728,10729).addRange(10740,10745).addRange(10748,10749).addRange(10762,10780).addRange(10782,10785).addRange(10795,10798).addRange(10804,10805),a.addRange(10812,10814).addRange(10839,10840).addRange(10852,10853).addRange(10858,10861).addRange(10863,10864).addRange(10867,10868).addRange(10873,10915).addRange(10918,10925).addRange(10927,10966).addRange(10978,10982).addRange(10988,10990).addRange(10999,11003).addRange(11778,11781).addRange(11785,11786).addRange(11788,11789).addRange(11804,11805).addRange(11808,11817).addRange(11861,11868).addRange(12296,12305).addRange(12308,12315).addRange(65113,65118).addRange(65124,65125).addRange(65288,65289).addRange(65375,65376).addRange(65378,65379),e.exports=a},32914:function(e,t,n){const a=n(45927)(39,46,58,94,96,168,173,175,180,890,903,1369,1375,1471,1479,1524,1564,1600,1648,1807,1809,2042,2045,2184,2362,2364,2381,2417,2433,2492,2509,2558,2620,2641,2677,2748,2765,2817,2876,2879,2893,2946,3008,3021,3072,3076,3132,3201,3260,3263,3270,3405,3457,3530,3542,3633,3761,3782,3893,3895,3897,4038,4226,4237,4253,4348,6086,6103,6109,6211,6313,6450,6683,6742,6752,6754,6783,6823,6964,6972,6978,7142,7149,7405,7412,7544,8125,8228,8231,8305,8319,11631,11647,11823,12293,12347,40981,42508,42623,42864,43010,43014,43019,43052,43263,43443,43471,43587,43596,43632,43644,43696,43713,43741,43766,44005,44008,44013,64286,65043,65106,65109,65279,65287,65294,65306,65342,65344,65392,65507,66045,66272,68159,69633,69744,69821,69826,69837,70003,70095,70196,70206,70367,70464,70726,70750,70842,71229,71339,71341,71351,71998,72003,72160,72263,72767,73018,73031,73109,73111,94031,121461,121476,123566,917505);a.addRange(183,184).addRange(688,879).addRange(884,885).addRange(900,901).addRange(1155,1161).addRange(1425,1469).addRange(1473,1474).addRange(1476,1477).addRange(1536,1541).addRange(1552,1562).addRange(1611,1631).addRange(1750,1757).addRange(1759,1768).addRange(1770,1773).addRange(1840,1866).addRange(1958,1968).addRange(2027,2037).addRange(2070,2093).addRange(2137,2139).addRange(2192,2193).addRange(2200,2207).addRange(2249,2306).addRange(2369,2376).addRange(2385,2391).addRange(2402,2403).addRange(2497,2500).addRange(2530,2531).addRange(2561,2562).addRange(2625,2626).addRange(2631,2632).addRange(2635,2637).addRange(2672,2673).addRange(2689,2690).addRange(2753,2757).addRange(2759,2760).addRange(2786,2787).addRange(2810,2815).addRange(2881,2884).addRange(2901,2902).addRange(2914,2915).addRange(3134,3136).addRange(3142,3144).addRange(3146,3149).addRange(3157,3158).addRange(3170,3171).addRange(3276,3277).addRange(3298,3299).addRange(3328,3329).addRange(3387,3388).addRange(3393,3396).addRange(3426,3427),a.addRange(3538,3540).addRange(3636,3642).addRange(3654,3662).addRange(3764,3772).addRange(3784,3789).addRange(3864,3865).addRange(3953,3966).addRange(3968,3972).addRange(3974,3975).addRange(3981,3991).addRange(3993,4028).addRange(4141,4144).addRange(4146,4151).addRange(4153,4154).addRange(4157,4158).addRange(4184,4185).addRange(4190,4192).addRange(4209,4212).addRange(4229,4230).addRange(4957,4959).addRange(5906,5908).addRange(5938,5939).addRange(5970,5971).addRange(6002,6003).addRange(6068,6069).addRange(6071,6077).addRange(6089,6099).addRange(6155,6159).addRange(6277,6278).addRange(6432,6434).addRange(6439,6440).addRange(6457,6459).addRange(6679,6680).addRange(6744,6750).addRange(6757,6764).addRange(6771,6780).addRange(6832,6862).addRange(6912,6915).addRange(6966,6970).addRange(7019,7027).addRange(7040,7041).addRange(7074,7077).addRange(7080,7081).addRange(7083,7085).addRange(7144,7145).addRange(7151,7153).addRange(7212,7219).addRange(7222,7223).addRange(7288,7293).addRange(7376,7378).addRange(7380,7392),a.addRange(7394,7400).addRange(7416,7417).addRange(7468,7530).addRange(7579,7679).addRange(8127,8129).addRange(8141,8143).addRange(8157,8159).addRange(8173,8175).addRange(8189,8190).addRange(8203,8207).addRange(8216,8217).addRange(8234,8238).addRange(8288,8292).addRange(8294,8303).addRange(8336,8348).addRange(8400,8432).addRange(11388,11389).addRange(11503,11505).addRange(11744,11775).addRange(12330,12333).addRange(12337,12341).addRange(12441,12446).addRange(12540,12542).addRange(42232,42237).addRange(42607,42610).addRange(42612,42621).addRange(42652,42655).addRange(42736,42737).addRange(42752,42785).addRange(42888,42890).addRange(42994,42996).addRange(43e3,43001).addRange(43045,43046).addRange(43204,43205).addRange(43232,43249).addRange(43302,43309).addRange(43335,43345).addRange(43392,43394).addRange(43446,43449).addRange(43452,43453).addRange(43493,43494).addRange(43561,43566).addRange(43569,43570).addRange(43573,43574).addRange(43698,43700).addRange(43703,43704).addRange(43710,43711).addRange(43756,43757).addRange(43763,43764).addRange(43867,43871).addRange(43881,43883),a.addRange(64434,64450).addRange(65024,65039).addRange(65056,65071).addRange(65438,65439).addRange(65529,65531).addRange(66422,66426).addRange(67456,67461).addRange(67463,67504).addRange(67506,67514).addRange(68097,68099).addRange(68101,68102).addRange(68108,68111).addRange(68152,68154).addRange(68325,68326).addRange(68900,68903).addRange(69291,69292).addRange(69446,69456).addRange(69506,69509).addRange(69688,69702).addRange(69747,69748).addRange(69759,69761).addRange(69811,69814).addRange(69817,69818).addRange(69888,69890).addRange(69927,69931).addRange(69933,69940).addRange(70016,70017).addRange(70070,70078).addRange(70089,70092).addRange(70191,70193).addRange(70198,70199).addRange(70371,70378).addRange(70400,70401).addRange(70459,70460).addRange(70502,70508).addRange(70512,70516).addRange(70712,70719).addRange(70722,70724).addRange(70835,70840).addRange(70847,70848).addRange(70850,70851).addRange(71090,71093).addRange(71100,71101).addRange(71103,71104).addRange(71132,71133).addRange(71219,71226).addRange(71231,71232).addRange(71344,71349).addRange(71453,71455).addRange(71458,71461).addRange(71463,71467),a.addRange(71727,71735).addRange(71737,71738).addRange(71995,71996).addRange(72148,72151).addRange(72154,72155).addRange(72193,72202).addRange(72243,72248).addRange(72251,72254).addRange(72273,72278).addRange(72281,72283).addRange(72330,72342).addRange(72344,72345).addRange(72752,72758).addRange(72760,72765).addRange(72850,72871).addRange(72874,72880).addRange(72882,72883).addRange(72885,72886).addRange(73009,73014).addRange(73020,73021).addRange(73023,73029).addRange(73104,73105).addRange(73459,73460).addRange(78896,78904).addRange(92912,92916).addRange(92976,92982).addRange(92992,92995).addRange(94095,94111).addRange(94176,94177).addRange(94179,94180).addRange(110576,110579).addRange(110581,110587).addRange(110589,110590).addRange(113821,113822).addRange(113824,113827).addRange(118528,118573).addRange(118576,118598).addRange(119143,119145).addRange(119155,119170).addRange(119173,119179).addRange(119210,119213).addRange(119362,119364).addRange(121344,121398).addRange(121403,121452).addRange(121499,121503).addRange(121505,121519).addRange(122880,122886).addRange(122888,122904).addRange(122907,122913).addRange(122915,122916).addRange(122918,122922),a.addRange(123184,123197).addRange(123628,123631).addRange(125136,125142).addRange(125252,125259).addRange(127995,127999).addRange(917536,917631).addRange(917760,917999),e.exports=a},48252:function(e,t,n){const a=n(45927)(170,181,186,837,895,902,908,4295,4301,8025,8027,8029,8126,8305,8319,8450,8455,8469,8484,8486,8488,8505,8526,11559,11565,42963,67456,119970,119995,120134);a.addRange(65,90).addRange(97,122).addRange(192,214).addRange(216,246).addRange(248,442).addRange(444,447).addRange(452,659).addRange(661,696).addRange(704,705).addRange(736,740).addRange(880,883).addRange(886,887).addRange(890,893).addRange(904,906).addRange(910,929).addRange(931,1013).addRange(1015,1153).addRange(1162,1327).addRange(1329,1366).addRange(1376,1416).addRange(4256,4293).addRange(4304,4346).addRange(4349,4351).addRange(5024,5109).addRange(5112,5117).addRange(7296,7304).addRange(7312,7354).addRange(7357,7359).addRange(7424,7615).addRange(7680,7957).addRange(7960,7965).addRange(7968,8005).addRange(8008,8013).addRange(8016,8023).addRange(8031,8061).addRange(8064,8116).addRange(8118,8124).addRange(8130,8132).addRange(8134,8140).addRange(8144,8147).addRange(8150,8155).addRange(8160,8172).addRange(8178,8180).addRange(8182,8188).addRange(8336,8348).addRange(8458,8467).addRange(8473,8477).addRange(8490,8493).addRange(8495,8500).addRange(8508,8511).addRange(8517,8521),a.addRange(8544,8575).addRange(8579,8580).addRange(9398,9449).addRange(11264,11492).addRange(11499,11502).addRange(11506,11507).addRange(11520,11557).addRange(42560,42605).addRange(42624,42653).addRange(42786,42887).addRange(42891,42894).addRange(42896,42954).addRange(42960,42961).addRange(42965,42969).addRange(42997,42998).addRange(43e3,43002).addRange(43824,43866).addRange(43868,43880).addRange(43888,43967).addRange(64256,64262).addRange(64275,64279).addRange(65313,65338).addRange(65345,65370).addRange(66560,66639).addRange(66736,66771).addRange(66776,66811).addRange(66928,66938).addRange(66940,66954).addRange(66956,66962).addRange(66964,66965).addRange(66967,66977).addRange(66979,66993).addRange(66995,67001).addRange(67003,67004).addRange(67459,67461).addRange(67463,67504).addRange(67506,67514).addRange(68736,68786).addRange(68800,68850).addRange(71840,71903).addRange(93760,93823).addRange(119808,119892).addRange(119894,119964).addRange(119966,119967).addRange(119973,119974).addRange(119977,119980).addRange(119982,119993).addRange(119997,120003).addRange(120005,120069).addRange(120071,120074).addRange(120077,120084),a.addRange(120086,120092).addRange(120094,120121).addRange(120123,120126).addRange(120128,120132).addRange(120138,120144).addRange(120146,120485).addRange(120488,120512).addRange(120514,120538).addRange(120540,120570).addRange(120572,120596).addRange(120598,120628).addRange(120630,120654).addRange(120656,120686).addRange(120688,120712).addRange(120714,120744).addRange(120746,120770).addRange(120772,120779).addRange(122624,122633).addRange(122635,122654).addRange(125184,125251).addRange(127280,127305).addRange(127312,127337).addRange(127344,127369),e.exports=a},99643:function(e,t,n){const a=n(45927)(181,256,258,260,262,264,266,268,270,272,274,276,278,280,282,284,286,288,290,292,294,296,298,300,302,304,306,308,310,313,315,317,319,321,323,325,327,332,334,336,338,340,342,344,346,348,350,352,354,356,358,360,362,364,366,368,370,372,374,379,381,383,388,418,420,425,428,437,444,461,463,465,467,469,471,473,475,478,480,482,484,486,488,490,492,494,500,506,508,510,512,514,516,518,520,522,524,526,528,530,532,534,536,538,540,542,544,546,548,550,552,554,556,558,560,562,577,584,586,588,590,837,880,882,886,895,902,908,962,984,986,988,990,992,994,996,998,1e3,1002,1004,1006,1015,1120,1122,1124,1126,1128,1130,1132,1134,1136,1138,1140,1142,1144,1146,1148,1150,1152,1162,1164,1166,1168,1170,1172,1174,1176,1178,1180,1182,1184,1186,1188,1190,1192,1194,1196,1198,1200,1202,1204,1206,1208,1210,1212,1214,1219,1221,1223,1225,1227,1229,1232,1234,1236,1238,1240,1242,1244,1246,1248,1250,1252,1254,1256,1258,1260,1262,1264,1266,1268,1270,1272,1274,1276,1278,1280,1282,1284,1286,1288,1290,1292,1294,1296,1298,1300,1302,1304,1306,1308,1310,1312,1314,1316,1318,1320,1322,1324,1326,1415,4295,4301,7680,7682,7684,7686,7688,7690,7692,7694,7696,7698,7700,7702,7704,7706,7708,7710,7712,7714,7716,7718,7720,7722,7724,7726,7728,7730,7732,7734,7736,7738,7740,7742,7744,7746,7748,7750,7752,7754,7756,7758,7760,7762,7764,7766,7768,7770,7772,7774,7776,7778,7780,7782,7784,7786,7788,7790,7792,7794,7796,7798,7800,7802,7804,7806,7808,7810,7812,7814,7816,7818,7820,7822,7824,7826,7828,7838,7840,7842,7844,7846,7848,7850,7852,7854,7856,7858,7860,7862,7864,7866,7868,7870,7872,7874,7876,7878,7880,7882,7884,7886,7888,7890,7892,7894,7896,7898,7900,7902,7904,7906,7908,7910,7912,7914,7916,7918,7920,7922,7924,7926,7928,7930,7932,7934,8025,8027,8029,8031,8486,8498,8579,11360,11367,11369,11371,11378,11381,11394,11396,11398,11400,11402,11404,11406,11408,11410,11412,11414,11416,11418,11420,11422,11424,11426,11428,11430,11432,11434,11436,11438,11440,11442,11444,11446,11448,11450,11452,11454,11456,11458,11460,11462,11464,11466,11468,11470,11472,11474,11476,11478,11480,11482,11484,11486,11488,11490,11499,11501,11506,42560,42562,42564,42566,42568,42570,42572,42574,42576,42578,42580,42582,42584,42586,42588,42590,42592,42594,42596,42598,42600,42602,42604,42624,42626,42628,42630,42632,42634,42636,42638,42640,42642,42644,42646,42648,42650,42786,42788,42790,42792,42794,42796,42798,42802,42804,42806,42808,42810,42812,42814,42816,42818,42820,42822,42824,42826,42828,42830,42832,42834,42836,42838,42840,42842,42844,42846,42848,42850,42852,42854,42856,42858,42860,42862,42873,42875,42880,42882,42884,42886,42891,42893,42896,42898,42902,42904,42906,42908,42910,42912,42914,42916,42918,42920,42934,42936,42938,42940,42942,42944,42946,42953,42960,42966,42968,42997);a.addRange(65,90).addRange(192,214).addRange(216,223).addRange(329,330).addRange(376,377).addRange(385,386).addRange(390,391).addRange(393,395).addRange(398,401).addRange(403,404).addRange(406,408).addRange(412,413).addRange(415,416).addRange(422,423).addRange(430,431).addRange(433,435).addRange(439,440).addRange(452,453).addRange(455,456).addRange(458,459).addRange(497,498).addRange(502,504).addRange(570,571).addRange(573,574).addRange(579,582).addRange(904,906).addRange(910,911).addRange(913,929).addRange(931,939).addRange(975,977).addRange(981,982).addRange(1008,1009).addRange(1012,1013).addRange(1017,1018).addRange(1021,1071).addRange(1216,1217).addRange(1329,1366).addRange(4256,4293).addRange(5112,5117).addRange(7296,7304).addRange(7312,7354).addRange(7357,7359).addRange(7834,7835).addRange(7944,7951).addRange(7960,7965).addRange(7976,7983).addRange(7992,7999).addRange(8008,8013).addRange(8040,8047).addRange(8064,8111).addRange(8114,8116),a.addRange(8119,8124).addRange(8130,8132).addRange(8135,8140).addRange(8152,8155).addRange(8168,8172).addRange(8178,8180).addRange(8183,8188).addRange(8490,8491).addRange(8544,8559).addRange(9398,9423).addRange(11264,11311).addRange(11362,11364).addRange(11373,11376).addRange(11390,11392).addRange(42877,42878).addRange(42922,42926).addRange(42928,42932).addRange(42948,42951).addRange(43888,43967).addRange(64256,64262).addRange(64275,64279).addRange(65313,65338).addRange(66560,66599).addRange(66736,66771).addRange(66928,66938).addRange(66940,66954).addRange(66956,66962).addRange(66964,66965).addRange(68736,68786).addRange(71840,71871).addRange(93760,93791).addRange(125184,125217),e.exports=a},35208:function(e,t,n){const a=n(45927)(181,447,601,611,623,629,637,640,658,837,895,902,908,4295,4301,7545,7549,7566,7838,8025,8027,8029,8126,8486,8498,8526,11559,11565,43859);a.addRange(65,90).addRange(97,122).addRange(192,214).addRange(216,246).addRange(248,311).addRange(313,396).addRange(398,410).addRange(412,425).addRange(428,441).addRange(444,445).addRange(452,544).addRange(546,563).addRange(570,596).addRange(598,599).addRange(603,604).addRange(608,609).addRange(613,614).addRange(616,620).addRange(625,626).addRange(642,643).addRange(647,652).addRange(669,670).addRange(880,883).addRange(886,887).addRange(891,893).addRange(904,906).addRange(910,929).addRange(931,977).addRange(981,1013).addRange(1015,1019).addRange(1021,1153).addRange(1162,1327).addRange(1329,1366).addRange(1377,1415).addRange(4256,4293).addRange(4304,4346).addRange(4349,4351).addRange(5024,5109).addRange(5112,5117).addRange(7296,7304).addRange(7312,7354).addRange(7357,7359).addRange(7680,7835).addRange(7840,7957).addRange(7960,7965).addRange(7968,8005).addRange(8008,8013).addRange(8016,8023).addRange(8031,8061).addRange(8064,8116).addRange(8118,8124),a.addRange(8130,8132).addRange(8134,8140).addRange(8144,8147).addRange(8150,8155).addRange(8160,8172).addRange(8178,8180).addRange(8182,8188).addRange(8490,8491).addRange(8544,8575).addRange(8579,8580).addRange(9398,9449).addRange(11264,11376).addRange(11378,11379).addRange(11381,11382).addRange(11390,11491).addRange(11499,11502).addRange(11506,11507).addRange(11520,11557).addRange(42560,42605).addRange(42624,42651).addRange(42786,42799).addRange(42802,42863).addRange(42873,42887).addRange(42891,42893).addRange(42896,42900).addRange(42902,42926).addRange(42928,42954).addRange(42960,42961).addRange(42966,42969).addRange(42997,42998).addRange(43888,43967).addRange(64256,64262).addRange(64275,64279).addRange(65313,65338).addRange(65345,65370).addRange(66560,66639).addRange(66736,66771).addRange(66776,66811).addRange(66928,66938).addRange(66940,66954).addRange(66956,66962).addRange(66964,66965).addRange(66967,66977).addRange(66979,66993).addRange(66995,67001).addRange(67003,67004).addRange(68736,68786).addRange(68800,68850).addRange(71840,71903).addRange(93760,93823).addRange(125184,125251),e.exports=a},19423:function(e,t,n){const a=n(45927)(256,258,260,262,264,266,268,270,272,274,276,278,280,282,284,286,288,290,292,294,296,298,300,302,304,306,308,310,313,315,317,319,321,323,325,327,330,332,334,336,338,340,342,344,346,348,350,352,354,356,358,360,362,364,366,368,370,372,374,379,381,388,418,420,425,428,437,444,461,463,465,467,469,471,473,475,478,480,482,484,486,488,490,492,494,500,506,508,510,512,514,516,518,520,522,524,526,528,530,532,534,536,538,540,542,544,546,548,550,552,554,556,558,560,562,577,584,586,588,590,880,882,886,895,902,908,975,984,986,988,990,992,994,996,998,1e3,1002,1004,1006,1012,1015,1120,1122,1124,1126,1128,1130,1132,1134,1136,1138,1140,1142,1144,1146,1148,1150,1152,1162,1164,1166,1168,1170,1172,1174,1176,1178,1180,1182,1184,1186,1188,1190,1192,1194,1196,1198,1200,1202,1204,1206,1208,1210,1212,1214,1219,1221,1223,1225,1227,1229,1232,1234,1236,1238,1240,1242,1244,1246,1248,1250,1252,1254,1256,1258,1260,1262,1264,1266,1268,1270,1272,1274,1276,1278,1280,1282,1284,1286,1288,1290,1292,1294,1296,1298,1300,1302,1304,1306,1308,1310,1312,1314,1316,1318,1320,1322,1324,1326,4295,4301,7680,7682,7684,7686,7688,7690,7692,7694,7696,7698,7700,7702,7704,7706,7708,7710,7712,7714,7716,7718,7720,7722,7724,7726,7728,7730,7732,7734,7736,7738,7740,7742,7744,7746,7748,7750,7752,7754,7756,7758,7760,7762,7764,7766,7768,7770,7772,7774,7776,7778,7780,7782,7784,7786,7788,7790,7792,7794,7796,7798,7800,7802,7804,7806,7808,7810,7812,7814,7816,7818,7820,7822,7824,7826,7828,7838,7840,7842,7844,7846,7848,7850,7852,7854,7856,7858,7860,7862,7864,7866,7868,7870,7872,7874,7876,7878,7880,7882,7884,7886,7888,7890,7892,7894,7896,7898,7900,7902,7904,7906,7908,7910,7912,7914,7916,7918,7920,7922,7924,7926,7928,7930,7932,7934,8025,8027,8029,8031,8486,8498,8579,11360,11367,11369,11371,11378,11381,11394,11396,11398,11400,11402,11404,11406,11408,11410,11412,11414,11416,11418,11420,11422,11424,11426,11428,11430,11432,11434,11436,11438,11440,11442,11444,11446,11448,11450,11452,11454,11456,11458,11460,11462,11464,11466,11468,11470,11472,11474,11476,11478,11480,11482,11484,11486,11488,11490,11499,11501,11506,42560,42562,42564,42566,42568,42570,42572,42574,42576,42578,42580,42582,42584,42586,42588,42590,42592,42594,42596,42598,42600,42602,42604,42624,42626,42628,42630,42632,42634,42636,42638,42640,42642,42644,42646,42648,42650,42786,42788,42790,42792,42794,42796,42798,42802,42804,42806,42808,42810,42812,42814,42816,42818,42820,42822,42824,42826,42828,42830,42832,42834,42836,42838,42840,42842,42844,42846,42848,42850,42852,42854,42856,42858,42860,42862,42873,42875,42880,42882,42884,42886,42891,42893,42896,42898,42902,42904,42906,42908,42910,42912,42914,42916,42918,42920,42934,42936,42938,42940,42942,42944,42946,42953,42960,42966,42968,42997);a.addRange(65,90).addRange(192,214).addRange(216,222).addRange(376,377).addRange(385,386).addRange(390,391).addRange(393,395).addRange(398,401).addRange(403,404).addRange(406,408).addRange(412,413).addRange(415,416).addRange(422,423).addRange(430,431).addRange(433,435).addRange(439,440).addRange(452,453).addRange(455,456).addRange(458,459).addRange(497,498).addRange(502,504).addRange(570,571).addRange(573,574).addRange(579,582).addRange(904,906).addRange(910,911).addRange(913,929).addRange(931,939).addRange(1017,1018).addRange(1021,1071).addRange(1216,1217).addRange(1329,1366).addRange(4256,4293).addRange(5024,5109).addRange(7312,7354).addRange(7357,7359).addRange(7944,7951).addRange(7960,7965).addRange(7976,7983).addRange(7992,7999).addRange(8008,8013).addRange(8040,8047).addRange(8072,8079).addRange(8088,8095).addRange(8104,8111).addRange(8120,8124).addRange(8136,8140).addRange(8152,8155).addRange(8168,8172).addRange(8184,8188).addRange(8490,8491),a.addRange(8544,8559).addRange(9398,9423).addRange(11264,11311).addRange(11362,11364).addRange(11373,11376).addRange(11390,11392).addRange(42877,42878).addRange(42922,42926).addRange(42928,42932).addRange(42948,42951).addRange(65313,65338).addRange(66560,66599).addRange(66736,66771).addRange(66928,66938).addRange(66940,66954).addRange(66956,66962).addRange(66964,66965).addRange(68736,68786).addRange(71840,71871).addRange(93760,93791).addRange(125184,125217),e.exports=a},83387:function(e,t,n){const a=n(45927)(160,168,170,173,175,256,258,260,262,264,266,268,270,272,274,276,278,280,282,284,286,288,290,292,294,296,298,300,302,304,310,313,315,317,323,325,327,332,334,336,338,340,342,344,346,348,350,352,354,356,358,360,362,364,366,368,370,372,374,379,381,383,388,418,420,425,428,437,444,463,465,467,469,471,473,475,478,480,482,484,486,488,490,492,494,506,508,510,512,514,516,518,520,522,524,526,528,530,532,534,536,538,540,542,544,546,548,550,552,554,556,558,560,562,577,584,586,588,590,847,880,882,884,886,890,908,962,984,986,988,990,992,994,996,998,1e3,1002,1004,1006,1015,1120,1122,1124,1126,1128,1130,1132,1134,1136,1138,1140,1142,1144,1146,1148,1150,1152,1162,1164,1166,1168,1170,1172,1174,1176,1178,1180,1182,1184,1186,1188,1190,1192,1194,1196,1198,1200,1202,1204,1206,1208,1210,1212,1214,1219,1221,1223,1225,1227,1229,1232,1234,1236,1238,1240,1242,1244,1246,1248,1250,1252,1254,1256,1258,1260,1262,1264,1266,1268,1270,1272,1274,1276,1278,1280,1282,1284,1286,1288,1290,1292,1294,1296,1298,1300,1302,1304,1306,1308,1310,1312,1314,1316,1318,1320,1322,1324,1326,1415,1564,2527,2611,2614,2654,3635,3763,3852,3907,3917,3922,3927,3932,3945,3955,3969,3987,3997,4002,4007,4012,4025,4295,4301,4348,7544,7680,7682,7684,7686,7688,7690,7692,7694,7696,7698,7700,7702,7704,7706,7708,7710,7712,7714,7716,7718,7720,7722,7724,7726,7728,7730,7732,7734,7736,7738,7740,7742,7744,7746,7748,7750,7752,7754,7756,7758,7760,7762,7764,7766,7768,7770,7772,7774,7776,7778,7780,7782,7784,7786,7788,7790,7792,7794,7796,7798,7800,7802,7804,7806,7808,7810,7812,7814,7816,7818,7820,7822,7824,7826,7828,7838,7840,7842,7844,7846,7848,7850,7852,7854,7856,7858,7860,7862,7864,7866,7868,7870,7872,7874,7876,7878,7880,7882,7884,7886,7888,7890,7892,7894,7896,7898,7900,7902,7904,7906,7908,7910,7912,7914,7916,7918,7920,7922,7924,7926,7928,7930,7932,7934,8025,8027,8029,8031,8049,8051,8053,8055,8057,8059,8061,8147,8163,8209,8215,8252,8254,8279,8360,8484,8486,8488,8579,8585,10764,10972,11360,11367,11369,11371,11378,11381,11394,11396,11398,11400,11402,11404,11406,11408,11410,11412,11414,11416,11418,11420,11422,11424,11426,11428,11430,11432,11434,11436,11438,11440,11442,11444,11446,11448,11450,11452,11454,11456,11458,11460,11462,11464,11466,11468,11470,11472,11474,11476,11478,11480,11482,11484,11486,11488,11490,11499,11501,11506,11631,11935,12019,12288,12342,12447,12543,42560,42562,42564,42566,42568,42570,42572,42574,42576,42578,42580,42582,42584,42586,42588,42590,42592,42594,42596,42598,42600,42602,42604,42624,42626,42628,42630,42632,42634,42636,42638,42640,42642,42644,42646,42648,42650,42786,42788,42790,42792,42794,42796,42798,42802,42804,42806,42808,42810,42812,42814,42816,42818,42820,42822,42824,42826,42828,42830,42832,42834,42836,42838,42840,42842,42844,42846,42848,42850,42852,42854,42856,42858,42860,42862,42864,42873,42875,42880,42882,42884,42886,42891,42893,42896,42898,42902,42904,42906,42908,42910,42912,42914,42916,42918,42920,42934,42936,42938,42940,42942,42944,42946,42953,42960,42966,42968,43881,64016,64018,64032,64034,64285,64318,65140,65279,119970,119995,120134,126500,126503,126521,126523,126530,126535,126537,126539,126548,126551,126553,126555,126557,126559,126564,126590,127376);a.addRange(65,90).addRange(178,181).addRange(184,186).addRange(188,190).addRange(192,214).addRange(216,223).addRange(306,308).addRange(319,321).addRange(329,330).addRange(376,377).addRange(385,386).addRange(390,391).addRange(393,395).addRange(398,401).addRange(403,404).addRange(406,408).addRange(412,413).addRange(415,416).addRange(422,423).addRange(430,431).addRange(433,435).addRange(439,440).addRange(452,461).addRange(497,500).addRange(502,504).addRange(570,571).addRange(573,574).addRange(579,582).addRange(688,696).addRange(728,733).addRange(736,740).addRange(832,833).addRange(835,837).addRange(894,895).addRange(900,906).addRange(910,911).addRange(913,929).addRange(931,939).addRange(975,982).addRange(1008,1010).addRange(1012,1013).addRange(1017,1018).addRange(1021,1071).addRange(1216,1217).addRange(1329,1366).addRange(1653,1656).addRange(2392,2399).addRange(2524,2525).addRange(2649,2651).addRange(2908,2909).addRange(3804,3805),a.addRange(3957,3961).addRange(4256,4293).addRange(4447,4448).addRange(5112,5117).addRange(6068,6069).addRange(6155,6159).addRange(7296,7304).addRange(7312,7354).addRange(7357,7359).addRange(7468,7470).addRange(7472,7482).addRange(7484,7501).addRange(7503,7530).addRange(7579,7615).addRange(7834,7835).addRange(7944,7951).addRange(7960,7965).addRange(7976,7983).addRange(7992,7999).addRange(8008,8013).addRange(8040,8047).addRange(8064,8111).addRange(8114,8116).addRange(8119,8132).addRange(8135,8143).addRange(8152,8155).addRange(8157,8159).addRange(8168,8175).addRange(8178,8180).addRange(8183,8190).addRange(8192,8207).addRange(8228,8230).addRange(8234,8239).addRange(8243,8244).addRange(8246,8247).addRange(8263,8265).addRange(8287,8305).addRange(8308,8334).addRange(8336,8348).addRange(8448,8451).addRange(8453,8455).addRange(8457,8467).addRange(8469,8470).addRange(8473,8477).addRange(8480,8482).addRange(8490,8493).addRange(8495,8505).addRange(8507,8512).addRange(8517,8521).addRange(8528,8575).addRange(8748,8749),a.addRange(8751,8752).addRange(9001,9002).addRange(9312,9450).addRange(10868,10870).addRange(11264,11311).addRange(11362,11364).addRange(11373,11376).addRange(11388,11392).addRange(12032,12245).addRange(12344,12346).addRange(12443,12444).addRange(12593,12686).addRange(12690,12703).addRange(12800,12830).addRange(12832,12871).addRange(12880,12926).addRange(12928,13311).addRange(42652,42653).addRange(42877,42878).addRange(42922,42926).addRange(42928,42932).addRange(42948,42951).addRange(42994,42997).addRange(43e3,43001).addRange(43868,43871).addRange(43888,43967).addRange(63744,64013).addRange(64021,64030).addRange(64037,64038).addRange(64042,64109).addRange(64112,64217).addRange(64256,64262).addRange(64275,64279).addRange(64287,64310).addRange(64312,64316).addRange(64320,64321).addRange(64323,64324).addRange(64326,64433).addRange(64467,64829).addRange(64848,64911).addRange(64914,64967).addRange(65008,65020).addRange(65024,65049).addRange(65072,65092).addRange(65095,65106).addRange(65108,65126).addRange(65128,65131).addRange(65136,65138).addRange(65142,65276).addRange(65281,65470).addRange(65474,65479),a.addRange(65482,65487).addRange(65490,65495).addRange(65498,65500).addRange(65504,65510).addRange(65512,65518).addRange(65520,65528).addRange(66560,66599).addRange(66736,66771).addRange(66928,66938).addRange(66940,66954).addRange(66956,66962).addRange(66964,66965).addRange(67457,67461).addRange(67463,67504).addRange(67506,67514).addRange(68736,68786).addRange(71840,71871).addRange(93760,93791).addRange(113824,113827).addRange(119134,119140).addRange(119155,119162).addRange(119227,119232).addRange(119808,119892).addRange(119894,119964).addRange(119966,119967).addRange(119973,119974).addRange(119977,119980).addRange(119982,119993).addRange(119997,120003).addRange(120005,120069).addRange(120071,120074).addRange(120077,120084).addRange(120086,120092).addRange(120094,120121).addRange(120123,120126).addRange(120128,120132).addRange(120138,120144).addRange(120146,120485).addRange(120488,120779).addRange(120782,120831).addRange(125184,125217).addRange(126464,126467).addRange(126469,126495).addRange(126497,126498).addRange(126505,126514).addRange(126516,126519).addRange(126541,126543).addRange(126545,126546).addRange(126561,126562).addRange(126567,126570).addRange(126572,126578),a.addRange(126580,126583).addRange(126585,126588).addRange(126592,126601).addRange(126603,126619).addRange(126625,126627).addRange(126629,126633).addRange(126635,126651).addRange(127232,127242).addRange(127248,127278).addRange(127280,127311).addRange(127338,127340).addRange(127488,127490).addRange(127504,127547).addRange(127552,127560).addRange(127568,127569).addRange(130032,130041).addRange(194560,195101).addRange(917504,921599),e.exports=a},13258:function(e,t,n){const a=n(45927)(181,257,259,261,263,265,267,269,271,273,275,277,279,281,283,285,287,289,291,293,295,297,299,301,303,305,307,309,311,314,316,318,320,322,324,326,331,333,335,337,339,341,343,345,347,349,351,353,355,357,359,361,363,365,367,369,371,373,375,378,380,387,389,392,396,402,405,414,417,419,421,424,429,432,436,438,441,445,447,452,460,462,464,466,468,470,472,474,479,481,483,485,487,489,491,493,499,501,505,507,509,511,513,515,517,519,521,523,525,527,529,531,533,535,537,539,541,543,547,549,551,553,555,557,559,561,563,572,578,583,585,587,589,601,611,623,629,637,640,658,837,881,883,887,912,985,987,989,991,993,995,997,999,1001,1003,1005,1013,1016,1019,1121,1123,1125,1127,1129,1131,1133,1135,1137,1139,1141,1143,1145,1147,1149,1151,1153,1163,1165,1167,1169,1171,1173,1175,1177,1179,1181,1183,1185,1187,1189,1191,1193,1195,1197,1199,1201,1203,1205,1207,1209,1211,1213,1215,1218,1220,1222,1224,1226,1228,1233,1235,1237,1239,1241,1243,1245,1247,1249,1251,1253,1255,1257,1259,1261,1263,1265,1267,1269,1271,1273,1275,1277,1279,1281,1283,1285,1287,1289,1291,1293,1295,1297,1299,1301,1303,1305,1307,1309,1311,1313,1315,1317,1319,1321,1323,1325,1327,7545,7549,7566,7681,7683,7685,7687,7689,7691,7693,7695,7697,7699,7701,7703,7705,7707,7709,7711,7713,7715,7717,7719,7721,7723,7725,7727,7729,7731,7733,7735,7737,7739,7741,7743,7745,7747,7749,7751,7753,7755,7757,7759,7761,7763,7765,7767,7769,7771,7773,7775,7777,7779,7781,7783,7785,7787,7789,7791,7793,7795,7797,7799,7801,7803,7805,7807,7809,7811,7813,7815,7817,7819,7821,7823,7825,7827,7841,7843,7845,7847,7849,7851,7853,7855,7857,7859,7861,7863,7865,7867,7869,7871,7873,7875,7877,7879,7881,7883,7885,7887,7889,7891,7893,7895,7897,7899,7901,7903,7905,7907,7909,7911,7913,7915,7917,7919,7921,7923,7925,7927,7929,7931,7933,8126,8526,8580,11361,11368,11370,11372,11379,11382,11393,11395,11397,11399,11401,11403,11405,11407,11409,11411,11413,11415,11417,11419,11421,11423,11425,11427,11429,11431,11433,11435,11437,11439,11441,11443,11445,11447,11449,11451,11453,11455,11457,11459,11461,11463,11465,11467,11469,11471,11473,11475,11477,11479,11481,11483,11485,11487,11489,11491,11500,11502,11507,11559,11565,42561,42563,42565,42567,42569,42571,42573,42575,42577,42579,42581,42583,42585,42587,42589,42591,42593,42595,42597,42599,42601,42603,42605,42625,42627,42629,42631,42633,42635,42637,42639,42641,42643,42645,42647,42649,42651,42787,42789,42791,42793,42795,42797,42799,42803,42805,42807,42809,42811,42813,42815,42817,42819,42821,42823,42825,42827,42829,42831,42833,42835,42837,42839,42841,42843,42845,42847,42849,42851,42853,42855,42857,42859,42861,42863,42874,42876,42879,42881,42883,42885,42887,42892,42897,42903,42905,42907,42909,42911,42913,42915,42917,42919,42921,42933,42935,42937,42939,42941,42943,42945,42947,42952,42954,42961,42967,42969,42998,43859);a.addRange(97,122).addRange(223,246).addRange(248,255).addRange(328,329).addRange(382,384).addRange(409,410).addRange(454,455).addRange(457,458).addRange(476,477).addRange(495,497).addRange(575,576).addRange(591,596).addRange(598,599).addRange(603,604).addRange(608,609).addRange(613,614).addRange(616,620).addRange(625,626).addRange(642,643).addRange(647,652).addRange(669,670).addRange(891,893).addRange(940,974).addRange(976,977).addRange(981,983).addRange(1007,1011).addRange(1072,1119).addRange(1230,1231).addRange(1377,1415).addRange(5112,5117).addRange(7296,7304).addRange(7829,7835).addRange(7935,7943).addRange(7952,7957).addRange(7968,7975).addRange(7984,7991).addRange(8e3,8005).addRange(8016,8023).addRange(8032,8039).addRange(8048,8061).addRange(8064,8071).addRange(8080,8087).addRange(8096,8103).addRange(8112,8116).addRange(8118,8119).addRange(8130,8132).addRange(8134,8135).addRange(8144,8147).addRange(8150,8151).addRange(8160,8167).addRange(8178,8180),a.addRange(8182,8183).addRange(8560,8575).addRange(9424,9449).addRange(11312,11359).addRange(11365,11366).addRange(11520,11557).addRange(42899,42900).addRange(43888,43967).addRange(64256,64262).addRange(64275,64279).addRange(65345,65370).addRange(66600,66639).addRange(66776,66811).addRange(66967,66977).addRange(66979,66993).addRange(66995,67001).addRange(67003,67004).addRange(68800,68850).addRange(71872,71903).addRange(93792,93823).addRange(125218,125251),e.exports=a},26216:function(e,t,n){const a=n(45927)(181,257,259,261,263,265,267,269,271,273,275,277,279,281,283,285,287,289,291,293,295,297,299,301,303,305,307,309,311,314,316,318,320,322,324,326,331,333,335,337,339,341,343,345,347,349,351,353,355,357,359,361,363,365,367,369,371,373,375,378,380,387,389,392,396,402,405,414,417,419,421,424,429,432,436,438,441,445,447,462,464,466,468,470,472,474,479,481,483,485,487,489,491,493,501,505,507,509,511,513,515,517,519,521,523,525,527,529,531,533,535,537,539,541,543,547,549,551,553,555,557,559,561,563,572,578,583,585,587,589,601,611,623,629,637,640,658,837,881,883,887,912,985,987,989,991,993,995,997,999,1001,1003,1005,1013,1016,1019,1121,1123,1125,1127,1129,1131,1133,1135,1137,1139,1141,1143,1145,1147,1149,1151,1153,1163,1165,1167,1169,1171,1173,1175,1177,1179,1181,1183,1185,1187,1189,1191,1193,1195,1197,1199,1201,1203,1205,1207,1209,1211,1213,1215,1218,1220,1222,1224,1226,1228,1233,1235,1237,1239,1241,1243,1245,1247,1249,1251,1253,1255,1257,1259,1261,1263,1265,1267,1269,1271,1273,1275,1277,1279,1281,1283,1285,1287,1289,1291,1293,1295,1297,1299,1301,1303,1305,1307,1309,1311,1313,1315,1317,1319,1321,1323,1325,1327,7545,7549,7566,7681,7683,7685,7687,7689,7691,7693,7695,7697,7699,7701,7703,7705,7707,7709,7711,7713,7715,7717,7719,7721,7723,7725,7727,7729,7731,7733,7735,7737,7739,7741,7743,7745,7747,7749,7751,7753,7755,7757,7759,7761,7763,7765,7767,7769,7771,7773,7775,7777,7779,7781,7783,7785,7787,7789,7791,7793,7795,7797,7799,7801,7803,7805,7807,7809,7811,7813,7815,7817,7819,7821,7823,7825,7827,7841,7843,7845,7847,7849,7851,7853,7855,7857,7859,7861,7863,7865,7867,7869,7871,7873,7875,7877,7879,7881,7883,7885,7887,7889,7891,7893,7895,7897,7899,7901,7903,7905,7907,7909,7911,7913,7915,7917,7919,7921,7923,7925,7927,7929,7931,7933,8124,8126,8140,8188,8526,8580,11361,11368,11370,11372,11379,11382,11393,11395,11397,11399,11401,11403,11405,11407,11409,11411,11413,11415,11417,11419,11421,11423,11425,11427,11429,11431,11433,11435,11437,11439,11441,11443,11445,11447,11449,11451,11453,11455,11457,11459,11461,11463,11465,11467,11469,11471,11473,11475,11477,11479,11481,11483,11485,11487,11489,11491,11500,11502,11507,11559,11565,42561,42563,42565,42567,42569,42571,42573,42575,42577,42579,42581,42583,42585,42587,42589,42591,42593,42595,42597,42599,42601,42603,42605,42625,42627,42629,42631,42633,42635,42637,42639,42641,42643,42645,42647,42649,42651,42787,42789,42791,42793,42795,42797,42799,42803,42805,42807,42809,42811,42813,42815,42817,42819,42821,42823,42825,42827,42829,42831,42833,42835,42837,42839,42841,42843,42845,42847,42849,42851,42853,42855,42857,42859,42861,42863,42874,42876,42879,42881,42883,42885,42887,42892,42897,42903,42905,42907,42909,42911,42913,42915,42917,42919,42921,42933,42935,42937,42939,42941,42943,42945,42947,42952,42954,42961,42967,42969,42998,43859);a.addRange(97,122).addRange(223,246).addRange(248,255).addRange(328,329).addRange(382,384).addRange(409,410).addRange(453,454).addRange(456,457).addRange(459,460).addRange(476,477).addRange(495,496).addRange(498,499).addRange(575,576).addRange(591,596).addRange(598,599).addRange(603,604).addRange(608,609).addRange(613,614).addRange(616,620).addRange(625,626).addRange(642,643).addRange(647,652).addRange(669,670).addRange(891,893).addRange(940,974).addRange(976,977).addRange(981,983).addRange(1007,1011).addRange(1072,1119).addRange(1230,1231).addRange(1377,1415).addRange(4304,4346).addRange(4349,4351).addRange(5112,5117).addRange(7296,7304).addRange(7829,7835).addRange(7935,7943).addRange(7952,7957).addRange(7968,7975).addRange(7984,7991).addRange(8e3,8005).addRange(8016,8023).addRange(8032,8039).addRange(8048,8061).addRange(8064,8116).addRange(8118,8119).addRange(8130,8132).addRange(8134,8135).addRange(8144,8147).addRange(8150,8151).addRange(8160,8167),a.addRange(8178,8180).addRange(8182,8183).addRange(8560,8575).addRange(9424,9449).addRange(11312,11359).addRange(11365,11366).addRange(11520,11557).addRange(42899,42900).addRange(43888,43967).addRange(64256,64262).addRange(64275,64279).addRange(65345,65370).addRange(66600,66639).addRange(66776,66811).addRange(66967,66977).addRange(66979,66993).addRange(66995,67001).addRange(67003,67004).addRange(68800,68850).addRange(71872,71903).addRange(93792,93823).addRange(125218,125251),e.exports=a},36330:function(e,t,n){const a=n(45927)(45,1418,1470,5120,6150,8275,8315,8331,8722,11799,11802,11840,11869,12316,12336,12448,65112,65123,65293,69293);a.addRange(8208,8213).addRange(11834,11835).addRange(65073,65074),e.exports=a},82684:function(e,t,n){const a=n(45927)(173,847,1564,12644,65279,65440);a.addRange(4447,4448).addRange(6068,6069).addRange(6155,6159).addRange(8203,8207).addRange(8234,8238).addRange(8288,8303).addRange(65024,65039).addRange(65520,65528).addRange(113824,113827).addRange(119155,119162).addRange(917504,921599),e.exports=a},91106:function(e,t,n){const a=n(45927)(329,1651,3959,3961,917505);a.addRange(6051,6052).addRange(8298,8303).addRange(9001,9002),e.exports=a},47252:function(e,t,n){const a=n(45927)(94,96,168,175,180,890,1369,1471,1476,2364,2381,2417,2492,2509,2620,2637,2748,2765,2876,2893,2901,3021,3132,3149,3260,3277,3405,3530,3662,3770,3893,3895,3897,4038,4151,4239,6109,6783,6964,6980,7405,7412,8125,11823,12540,42607,42623,43204,43347,43443,43456,43493,43766,64286,65342,65344,65392,65507,66272,69702,69744,70003,70080,70460,70477,70722,70726,71231,71467,72003,72160,72244,72263,72345,72767,73026,73111,123566);a.addRange(183,184).addRange(688,846).addRange(848,855).addRange(861,866).addRange(884,885).addRange(900,901).addRange(1155,1159).addRange(1425,1441).addRange(1443,1469).addRange(1473,1474).addRange(1611,1618).addRange(1623,1624).addRange(1759,1760).addRange(1765,1766).addRange(1770,1772).addRange(1840,1866).addRange(1958,1968).addRange(2027,2037).addRange(2072,2073).addRange(2200,2207).addRange(2249,2258).addRange(2275,2302).addRange(2385,2388).addRange(2813,2815).addRange(3387,3388).addRange(3655,3660).addRange(3784,3788).addRange(3864,3865).addRange(3902,3903).addRange(3970,3972).addRange(3974,3975).addRange(4153,4154).addRange(4195,4196).addRange(4201,4205).addRange(4231,4237).addRange(4250,4251).addRange(4957,4959).addRange(5908,5909).addRange(6089,6099).addRange(6457,6459).addRange(6773,6780).addRange(6832,6846).addRange(6849,6859).addRange(7019,7027).addRange(7082,7083).addRange(7222,7223).addRange(7288,7293).addRange(7376,7400).addRange(7415,7417).addRange(7468,7530).addRange(7620,7631),a.addRange(7669,7679).addRange(8127,8129).addRange(8141,8143).addRange(8157,8159).addRange(8173,8175).addRange(8189,8190).addRange(11503,11505).addRange(12330,12335).addRange(12441,12444).addRange(42620,42621).addRange(42652,42653).addRange(42736,42737).addRange(42752,42785).addRange(42888,42890).addRange(43e3,43001).addRange(43232,43249).addRange(43307,43310).addRange(43643,43645).addRange(43711,43714).addRange(43867,43871).addRange(43881,43883).addRange(44012,44013).addRange(65056,65071).addRange(65438,65439).addRange(67456,67461).addRange(67463,67504).addRange(67506,67514).addRange(68325,68326).addRange(68898,68903).addRange(69446,69456).addRange(69506,69509).addRange(69817,69818).addRange(69939,69940).addRange(70090,70092).addRange(70197,70198).addRange(70377,70378).addRange(70502,70508).addRange(70512,70516).addRange(70850,70851).addRange(71103,71104).addRange(71350,71351).addRange(71737,71738).addRange(71997,71998).addRange(73028,73029).addRange(92912,92916).addRange(92976,92982).addRange(94095,94111).addRange(94192,94193).addRange(110576,110579).addRange(110581,110587).addRange(110589,110590),a.addRange(118528,118573).addRange(118576,118598).addRange(119143,119145).addRange(119149,119154).addRange(119163,119170).addRange(119173,119179).addRange(119210,119213).addRange(123184,123190).addRange(123628,123631).addRange(125136,125142).addRange(125252,125254).addRange(125256,125258),e.exports=a},11470:function(e,t,n){const a=n(45927)(35,42,169,174,8252,8265,8482,8505,9e3,9167,9410,9654,9664,9742,9745,9752,9757,9760,9766,9770,9792,9794,9827,9832,9851,9881,9895,9928,9937,9981,9986,9989,9999,10002,10004,10006,10013,10017,10024,10052,10055,10060,10062,10071,10145,10160,10175,11088,11093,12336,12349,12951,12953,126980,127183,127374,127514,127535,128391,128400,128424,128444,128481,128483,128488,128495,128499,128745,128752,129008);a.addRange(48,57).addRange(8596,8601).addRange(8617,8618).addRange(8986,8987).addRange(9193,9203).addRange(9208,9210).addRange(9642,9643).addRange(9723,9726).addRange(9728,9732).addRange(9748,9749).addRange(9762,9763).addRange(9774,9775).addRange(9784,9786).addRange(9800,9811).addRange(9823,9824).addRange(9829,9830).addRange(9854,9855).addRange(9874,9879).addRange(9883,9884).addRange(9888,9889).addRange(9898,9899).addRange(9904,9905).addRange(9917,9918).addRange(9924,9925).addRange(9934,9935).addRange(9939,9940).addRange(9961,9962).addRange(9968,9973).addRange(9975,9978).addRange(9992,9997).addRange(10035,10036).addRange(10067,10069).addRange(10083,10084).addRange(10133,10135).addRange(10548,10549).addRange(11013,11015).addRange(11035,11036).addRange(127344,127345).addRange(127358,127359).addRange(127377,127386).addRange(127462,127487).addRange(127489,127490).addRange(127538,127546).addRange(127568,127569).addRange(127744,127777).addRange(127780,127891).addRange(127894,127895).addRange(127897,127899).addRange(127902,127984).addRange(127987,127989).addRange(127991,128253),a.addRange(128255,128317).addRange(128329,128334).addRange(128336,128359).addRange(128367,128368).addRange(128371,128378).addRange(128394,128397).addRange(128405,128406).addRange(128420,128421).addRange(128433,128434).addRange(128450,128452).addRange(128465,128467).addRange(128476,128478).addRange(128506,128591).addRange(128640,128709).addRange(128715,128722).addRange(128725,128727).addRange(128733,128741).addRange(128747,128748).addRange(128755,128764).addRange(128992,129003).addRange(129292,129338).addRange(129340,129349).addRange(129351,129535).addRange(129648,129652).addRange(129656,129660).addRange(129664,129670).addRange(129680,129708).addRange(129712,129722).addRange(129728,129733).addRange(129744,129753).addRange(129760,129767).addRange(129776,129782),e.exports=a},71646:function(e,t,n){const a=n(45927)(35,42,8205,8419,65039);a.addRange(48,57).addRange(127462,127487).addRange(127995,127999).addRange(129456,129459).addRange(917536,917631),e.exports=a},87650:function(e,t,n){const a=n(45927)();a.addRange(127995,127999),e.exports=a},29218:function(e,t,n){const a=n(45927)(9757,9977,127877,127943,128124,128143,128145,128170,128378,128400,128675,128704,128716,129292,129295,129318,129399,129467);a.addRange(9994,9997).addRange(127938,127940).addRange(127946,127948).addRange(128066,128067).addRange(128070,128080).addRange(128102,128120).addRange(128129,128131).addRange(128133,128135).addRange(128372,128373).addRange(128405,128406).addRange(128581,128583).addRange(128587,128591).addRange(128692,128694).addRange(129304,129311).addRange(129328,129337).addRange(129340,129342).addRange(129461,129462).addRange(129464,129465).addRange(129485,129487).addRange(129489,129501).addRange(129731,129733).addRange(129776,129782),e.exports=a},76701:function(e,t,n){const a=n(45927)(9200,9203,9855,9875,9889,9934,9940,9962,9973,9978,9981,9989,10024,10060,10062,10071,10160,10175,11088,11093,126980,127183,127374,127489,127514,127535,127988,128064,128378,128420,128716,129008);a.addRange(8986,8987).addRange(9193,9196).addRange(9725,9726).addRange(9748,9749).addRange(9800,9811).addRange(9898,9899).addRange(9917,9918).addRange(9924,9925).addRange(9970,9971).addRange(9994,9995).addRange(10067,10069).addRange(10133,10135).addRange(11035,11036).addRange(127377,127386).addRange(127462,127487).addRange(127538,127542).addRange(127544,127546).addRange(127568,127569).addRange(127744,127776).addRange(127789,127797).addRange(127799,127868).addRange(127870,127891).addRange(127904,127946).addRange(127951,127955).addRange(127968,127984).addRange(127992,128062).addRange(128066,128252).addRange(128255,128317).addRange(128331,128334).addRange(128336,128359).addRange(128405,128406).addRange(128507,128591).addRange(128640,128709).addRange(128720,128722).addRange(128725,128727).addRange(128733,128735).addRange(128747,128748).addRange(128756,128764).addRange(128992,129003).addRange(129292,129338).addRange(129340,129349).addRange(129351,129535).addRange(129648,129652).addRange(129656,129660).addRange(129664,129670).addRange(129680,129708).addRange(129712,129722).addRange(129728,129733).addRange(129744,129753).addRange(129760,129767).addRange(129776,129782),e.exports=a},94941:function(e,t,n){const a=n(45927)(169,174,8252,8265,8482,8505,9e3,9096,9167,9410,9654,9664,10004,10006,10013,10017,10024,10052,10055,10060,10062,10071,10145,10160,10175,11088,11093,12336,12349,12951,12953,127279,127374,127514,127535);a.addRange(8596,8601).addRange(8617,8618).addRange(8986,8987).addRange(9193,9203).addRange(9208,9210).addRange(9642,9643).addRange(9723,9726).addRange(9728,9733).addRange(9735,9746).addRange(9748,9861).addRange(9872,9989).addRange(9992,10002).addRange(10035,10036).addRange(10067,10069).addRange(10083,10087).addRange(10133,10135).addRange(10548,10549).addRange(11013,11015).addRange(11035,11036).addRange(126976,127231).addRange(127245,127247).addRange(127340,127345).addRange(127358,127359).addRange(127377,127386).addRange(127405,127461).addRange(127489,127503).addRange(127538,127546).addRange(127548,127551).addRange(127561,127994).addRange(128e3,128317).addRange(128326,128591).addRange(128640,128767).addRange(128884,128895).addRange(128981,129023).addRange(129036,129039).addRange(129096,129103).addRange(129114,129119).addRange(129160,129167).addRange(129198,129279).addRange(129292,129338).addRange(129340,129349).addRange(129351,129791).addRange(130048,131069),e.exports=a},72468:function(e,t,n){const a=n(45927)(183,1600,2042,2901,3654,3782,6154,6211,6823,7222,7291,12293,40981,42508,43471,43494,43632,43741,65392,70493,72344,94179);a.addRange(720,721).addRange(12337,12341).addRange(12445,12446).addRange(12540,12542).addRange(43763,43764).addRange(67457,67458).addRange(71110,71112).addRange(92994,92995).addRange(94176,94177).addRange(123196,123197).addRange(125252,125254),e.exports=a},94004:function(e,t,n){const a=n(45927)(908,1470,1472,1475,1478,1563,1758,1769,1808,1969,2074,2084,2088,2142,2363,2482,2493,2510,2563,2654,2678,2691,2761,2768,2809,2877,2880,2947,2972,3007,3024,3133,3165,3389,3517,3716,3749,3773,3782,3894,3896,3967,3973,4145,4152,4295,4301,4696,4800,5909,6070,6314,6464,6743,6753,6971,7082,7143,7150,7379,7393,7418,8025,8027,8029,11559,11565,42611,42963,43597,43697,43712,43714,64285,64318,64975,65952,67592,67644,67903,69293,69632,69749,69932,70197,70280,70461,70463,70480,70725,70749,70841,70846,70849,71102,71230,71340,71350,71462,71736,71739,71945,71997,72192,72272,72343,72766,72873,72881,72884,73030,73110,73112,73648,92917,113820,113823,119142,119365,119970,119995,120134,123647,125259,126500,126503,126521,126523,126530,126535,126537,126539,126548,126551,126553,126555,126557,126559,126564,126590,129008);a.addRange(32,126).addRange(160,172).addRange(174,767).addRange(880,887).addRange(890,895).addRange(900,906).addRange(910,929).addRange(931,1154).addRange(1162,1327).addRange(1329,1366).addRange(1369,1418).addRange(1421,1423).addRange(1488,1514).addRange(1519,1524).addRange(1542,1551).addRange(1565,1610).addRange(1632,1647).addRange(1649,1749).addRange(1765,1766).addRange(1774,1805).addRange(1810,1839).addRange(1869,1957).addRange(1984,2026).addRange(2036,2042).addRange(2046,2069).addRange(2096,2110).addRange(2112,2136).addRange(2144,2154).addRange(2160,2190).addRange(2208,2249).addRange(2307,2361).addRange(2365,2368).addRange(2377,2380).addRange(2382,2384).addRange(2392,2401).addRange(2404,2432).addRange(2434,2435).addRange(2437,2444).addRange(2447,2448).addRange(2451,2472).addRange(2474,2480).addRange(2486,2489).addRange(2495,2496).addRange(2503,2504).addRange(2507,2508).addRange(2524,2525).addRange(2527,2529).addRange(2534,2557).addRange(2565,2570).addRange(2575,2576).addRange(2579,2600),a.addRange(2602,2608).addRange(2610,2611).addRange(2613,2614).addRange(2616,2617).addRange(2622,2624).addRange(2649,2652).addRange(2662,2671).addRange(2674,2676).addRange(2693,2701).addRange(2703,2705).addRange(2707,2728).addRange(2730,2736).addRange(2738,2739).addRange(2741,2745).addRange(2749,2752).addRange(2763,2764).addRange(2784,2785).addRange(2790,2801).addRange(2818,2819).addRange(2821,2828).addRange(2831,2832).addRange(2835,2856).addRange(2858,2864).addRange(2866,2867).addRange(2869,2873).addRange(2887,2888).addRange(2891,2892).addRange(2908,2909).addRange(2911,2913).addRange(2918,2935).addRange(2949,2954).addRange(2958,2960).addRange(2962,2965).addRange(2969,2970).addRange(2974,2975).addRange(2979,2980).addRange(2984,2986).addRange(2990,3001).addRange(3009,3010).addRange(3014,3016).addRange(3018,3020).addRange(3046,3066).addRange(3073,3075).addRange(3077,3084).addRange(3086,3088).addRange(3090,3112).addRange(3114,3129).addRange(3137,3140).addRange(3160,3162).addRange(3168,3169).addRange(3174,3183),a.addRange(3191,3200).addRange(3202,3212).addRange(3214,3216).addRange(3218,3240).addRange(3242,3251).addRange(3253,3257).addRange(3261,3262).addRange(3264,3265).addRange(3267,3268).addRange(3271,3272).addRange(3274,3275).addRange(3293,3294).addRange(3296,3297).addRange(3302,3311).addRange(3313,3314).addRange(3330,3340).addRange(3342,3344).addRange(3346,3386).addRange(3391,3392).addRange(3398,3400).addRange(3402,3404).addRange(3406,3407).addRange(3412,3414).addRange(3416,3425).addRange(3430,3455).addRange(3458,3459).addRange(3461,3478).addRange(3482,3505).addRange(3507,3515).addRange(3520,3526).addRange(3536,3537).addRange(3544,3550).addRange(3558,3567).addRange(3570,3572).addRange(3585,3632).addRange(3634,3635).addRange(3647,3654).addRange(3663,3675).addRange(3713,3714).addRange(3718,3722).addRange(3724,3747).addRange(3751,3760).addRange(3762,3763).addRange(3776,3780).addRange(3792,3801).addRange(3804,3807).addRange(3840,3863).addRange(3866,3892).addRange(3898,3911).addRange(3913,3948).addRange(3976,3980),a.addRange(4030,4037).addRange(4039,4044).addRange(4046,4058).addRange(4096,4140).addRange(4155,4156).addRange(4159,4183).addRange(4186,4189).addRange(4193,4208).addRange(4213,4225).addRange(4227,4228).addRange(4231,4236).addRange(4238,4252).addRange(4254,4293).addRange(4304,4680).addRange(4682,4685).addRange(4688,4694).addRange(4698,4701).addRange(4704,4744).addRange(4746,4749).addRange(4752,4784).addRange(4786,4789).addRange(4792,4798).addRange(4802,4805).addRange(4808,4822).addRange(4824,4880).addRange(4882,4885).addRange(4888,4954).addRange(4960,4988).addRange(4992,5017).addRange(5024,5109).addRange(5112,5117).addRange(5120,5788).addRange(5792,5880).addRange(5888,5905).addRange(5919,5937).addRange(5940,5942).addRange(5952,5969).addRange(5984,5996).addRange(5998,6e3).addRange(6016,6067).addRange(6078,6085).addRange(6087,6088).addRange(6100,6108).addRange(6112,6121).addRange(6128,6137).addRange(6144,6154).addRange(6160,6169).addRange(6176,6264).addRange(6272,6276).addRange(6279,6312).addRange(6320,6389),a.addRange(6400,6430).addRange(6435,6438).addRange(6441,6443).addRange(6448,6449).addRange(6451,6456).addRange(6468,6509).addRange(6512,6516).addRange(6528,6571).addRange(6576,6601).addRange(6608,6618).addRange(6622,6678).addRange(6681,6682).addRange(6686,6741).addRange(6755,6756).addRange(6765,6770).addRange(6784,6793).addRange(6800,6809).addRange(6816,6829).addRange(6916,6963).addRange(6973,6977).addRange(6979,6988).addRange(6992,7018).addRange(7028,7038).addRange(7042,7073).addRange(7078,7079).addRange(7086,7141).addRange(7146,7148).addRange(7154,7155).addRange(7164,7211).addRange(7220,7221).addRange(7227,7241).addRange(7245,7304).addRange(7312,7354).addRange(7357,7367).addRange(7401,7404).addRange(7406,7411).addRange(7413,7415).addRange(7424,7615).addRange(7680,7957).addRange(7960,7965).addRange(7968,8005).addRange(8008,8013).addRange(8016,8023).addRange(8031,8061).addRange(8064,8116).addRange(8118,8132).addRange(8134,8147).addRange(8150,8155).addRange(8157,8175).addRange(8178,8180).addRange(8182,8190),a.addRange(8192,8202).addRange(8208,8231).addRange(8239,8287).addRange(8304,8305).addRange(8308,8334).addRange(8336,8348).addRange(8352,8384).addRange(8448,8587).addRange(8592,9254).addRange(9280,9290).addRange(9312,11123).addRange(11126,11157).addRange(11159,11502).addRange(11506,11507).addRange(11513,11557).addRange(11568,11623).addRange(11631,11632).addRange(11648,11670).addRange(11680,11686).addRange(11688,11694).addRange(11696,11702).addRange(11704,11710).addRange(11712,11718).addRange(11720,11726).addRange(11728,11734).addRange(11736,11742).addRange(11776,11869).addRange(11904,11929).addRange(11931,12019).addRange(12032,12245).addRange(12272,12283).addRange(12288,12329).addRange(12336,12351).addRange(12353,12438).addRange(12443,12543).addRange(12549,12591).addRange(12593,12686).addRange(12688,12771).addRange(12784,12830).addRange(12832,42124).addRange(42128,42182).addRange(42192,42539).addRange(42560,42606).addRange(42622,42653).addRange(42656,42735).addRange(42738,42743).addRange(42752,42954).addRange(42960,42961).addRange(42965,42969).addRange(42994,43009).addRange(43011,43013),a.addRange(43015,43018).addRange(43020,43044).addRange(43047,43051).addRange(43056,43065).addRange(43072,43127).addRange(43136,43203).addRange(43214,43225).addRange(43250,43262).addRange(43264,43301).addRange(43310,43334).addRange(43346,43347).addRange(43359,43388).addRange(43395,43442).addRange(43444,43445).addRange(43450,43451).addRange(43454,43469).addRange(43471,43481).addRange(43486,43492).addRange(43494,43518).addRange(43520,43560).addRange(43567,43568).addRange(43571,43572).addRange(43584,43586).addRange(43588,43595).addRange(43600,43609).addRange(43612,43643).addRange(43645,43695).addRange(43701,43702).addRange(43705,43709).addRange(43739,43755).addRange(43758,43765).addRange(43777,43782).addRange(43785,43790).addRange(43793,43798).addRange(43808,43814).addRange(43816,43822).addRange(43824,43883).addRange(43888,44004).addRange(44006,44007).addRange(44009,44012).addRange(44016,44025).addRange(44032,55203).addRange(55216,55238).addRange(55243,55291).addRange(63744,64109).addRange(64112,64217).addRange(64256,64262).addRange(64275,64279).addRange(64287,64310).addRange(64312,64316).addRange(64320,64321),a.addRange(64323,64324).addRange(64326,64450).addRange(64467,64911).addRange(64914,64967).addRange(65008,65023).addRange(65040,65049).addRange(65072,65106).addRange(65108,65126).addRange(65128,65131).addRange(65136,65140).addRange(65142,65276).addRange(65281,65437).addRange(65440,65470).addRange(65474,65479).addRange(65482,65487).addRange(65490,65495).addRange(65498,65500).addRange(65504,65510).addRange(65512,65518).addRange(65532,65533).addRange(65536,65547).addRange(65549,65574).addRange(65576,65594).addRange(65596,65597).addRange(65599,65613).addRange(65616,65629).addRange(65664,65786).addRange(65792,65794).addRange(65799,65843).addRange(65847,65934).addRange(65936,65948).addRange(66e3,66044).addRange(66176,66204).addRange(66208,66256).addRange(66273,66299).addRange(66304,66339).addRange(66349,66378).addRange(66384,66421).addRange(66432,66461).addRange(66463,66499).addRange(66504,66517).addRange(66560,66717).addRange(66720,66729).addRange(66736,66771).addRange(66776,66811).addRange(66816,66855).addRange(66864,66915).addRange(66927,66938).addRange(66940,66954).addRange(66956,66962).addRange(66964,66965),a.addRange(66967,66977).addRange(66979,66993).addRange(66995,67001).addRange(67003,67004).addRange(67072,67382).addRange(67392,67413).addRange(67424,67431).addRange(67456,67461).addRange(67463,67504).addRange(67506,67514).addRange(67584,67589).addRange(67594,67637).addRange(67639,67640).addRange(67647,67669).addRange(67671,67742).addRange(67751,67759).addRange(67808,67826).addRange(67828,67829).addRange(67835,67867).addRange(67871,67897).addRange(67968,68023).addRange(68028,68047).addRange(68050,68096).addRange(68112,68115).addRange(68117,68119).addRange(68121,68149).addRange(68160,68168).addRange(68176,68184).addRange(68192,68255).addRange(68288,68324).addRange(68331,68342).addRange(68352,68405).addRange(68409,68437).addRange(68440,68466).addRange(68472,68497).addRange(68505,68508).addRange(68521,68527).addRange(68608,68680).addRange(68736,68786).addRange(68800,68850).addRange(68858,68899).addRange(68912,68921).addRange(69216,69246).addRange(69248,69289).addRange(69296,69297).addRange(69376,69415).addRange(69424,69445).addRange(69457,69465).addRange(69488,69505).addRange(69510,69513).addRange(69552,69579),a.addRange(69600,69622).addRange(69634,69687).addRange(69703,69709).addRange(69714,69743).addRange(69745,69746).addRange(69762,69810).addRange(69815,69816).addRange(69819,69820).addRange(69822,69825).addRange(69840,69864).addRange(69872,69881).addRange(69891,69926).addRange(69942,69959).addRange(69968,70002).addRange(70004,70006).addRange(70018,70069).addRange(70079,70088).addRange(70093,70094).addRange(70096,70111).addRange(70113,70132).addRange(70144,70161).addRange(70163,70190).addRange(70194,70195).addRange(70200,70205).addRange(70272,70278).addRange(70282,70285).addRange(70287,70301).addRange(70303,70313).addRange(70320,70366).addRange(70368,70370).addRange(70384,70393).addRange(70402,70403).addRange(70405,70412).addRange(70415,70416).addRange(70419,70440).addRange(70442,70448).addRange(70450,70451).addRange(70453,70457).addRange(70465,70468).addRange(70471,70472).addRange(70475,70477).addRange(70493,70499).addRange(70656,70711).addRange(70720,70721).addRange(70727,70747).addRange(70751,70753).addRange(70784,70831).addRange(70833,70834).addRange(70843,70844).addRange(70852,70855).addRange(70864,70873),a.addRange(71040,71086).addRange(71088,71089).addRange(71096,71099).addRange(71105,71131).addRange(71168,71218).addRange(71227,71228).addRange(71233,71236).addRange(71248,71257).addRange(71264,71276).addRange(71296,71338).addRange(71342,71343).addRange(71352,71353).addRange(71360,71369).addRange(71424,71450).addRange(71456,71457).addRange(71472,71494).addRange(71680,71726).addRange(71840,71922).addRange(71935,71942).addRange(71948,71955).addRange(71957,71958).addRange(71960,71983).addRange(71985,71989).addRange(71991,71992).addRange(71999,72002).addRange(72004,72006).addRange(72016,72025).addRange(72096,72103).addRange(72106,72147).addRange(72156,72159).addRange(72161,72164).addRange(72203,72242).addRange(72249,72250).addRange(72255,72262).addRange(72279,72280).addRange(72284,72329).addRange(72346,72354).addRange(72368,72440).addRange(72704,72712).addRange(72714,72751).addRange(72768,72773).addRange(72784,72812).addRange(72816,72847).addRange(72960,72966).addRange(72968,72969).addRange(72971,73008).addRange(73040,73049).addRange(73056,73061).addRange(73063,73064).addRange(73066,73102).addRange(73107,73108),a.addRange(73120,73129).addRange(73440,73458).addRange(73461,73464).addRange(73664,73713).addRange(73727,74649).addRange(74752,74862).addRange(74864,74868).addRange(74880,75075).addRange(77712,77810).addRange(77824,78894).addRange(82944,83526).addRange(92160,92728).addRange(92736,92766).addRange(92768,92777).addRange(92782,92862).addRange(92864,92873).addRange(92880,92909).addRange(92928,92975).addRange(92983,92997).addRange(93008,93017).addRange(93019,93025).addRange(93027,93047).addRange(93053,93071).addRange(93760,93850).addRange(93952,94026).addRange(94032,94087).addRange(94099,94111).addRange(94176,94179).addRange(94192,94193).addRange(94208,100343).addRange(100352,101589).addRange(101632,101640).addRange(110576,110579).addRange(110581,110587).addRange(110589,110590).addRange(110592,110882).addRange(110928,110930).addRange(110948,110951).addRange(110960,111355).addRange(113664,113770).addRange(113776,113788).addRange(113792,113800).addRange(113808,113817).addRange(118608,118723).addRange(118784,119029).addRange(119040,119078).addRange(119081,119140).addRange(119146,119149).addRange(119171,119172).addRange(119180,119209).addRange(119214,119274),a.addRange(119296,119361).addRange(119520,119539).addRange(119552,119638).addRange(119648,119672).addRange(119808,119892).addRange(119894,119964).addRange(119966,119967).addRange(119973,119974).addRange(119977,119980).addRange(119982,119993).addRange(119997,120003).addRange(120005,120069).addRange(120071,120074).addRange(120077,120084).addRange(120086,120092).addRange(120094,120121).addRange(120123,120126).addRange(120128,120132).addRange(120138,120144).addRange(120146,120485).addRange(120488,120779).addRange(120782,121343).addRange(121399,121402).addRange(121453,121460).addRange(121462,121475).addRange(121477,121483).addRange(122624,122654).addRange(123136,123180).addRange(123191,123197).addRange(123200,123209).addRange(123214,123215).addRange(123536,123565).addRange(123584,123627).addRange(123632,123641).addRange(124896,124902).addRange(124904,124907).addRange(124909,124910).addRange(124912,124926).addRange(124928,125124).addRange(125127,125135).addRange(125184,125251).addRange(125264,125273).addRange(125278,125279).addRange(126065,126132).addRange(126209,126269).addRange(126464,126467).addRange(126469,126495).addRange(126497,126498).addRange(126505,126514).addRange(126516,126519).addRange(126541,126543),a.addRange(126545,126546).addRange(126561,126562).addRange(126567,126570).addRange(126572,126578).addRange(126580,126583).addRange(126585,126588).addRange(126592,126601).addRange(126603,126619).addRange(126625,126627).addRange(126629,126633).addRange(126635,126651).addRange(126704,126705).addRange(126976,127019).addRange(127024,127123).addRange(127136,127150).addRange(127153,127167).addRange(127169,127183).addRange(127185,127221).addRange(127232,127405).addRange(127462,127490).addRange(127504,127547).addRange(127552,127560).addRange(127568,127569).addRange(127584,127589).addRange(127744,128727).addRange(128733,128748).addRange(128752,128764).addRange(128768,128883).addRange(128896,128984).addRange(128992,129003).addRange(129024,129035).addRange(129040,129095).addRange(129104,129113).addRange(129120,129159).addRange(129168,129197).addRange(129200,129201).addRange(129280,129619).addRange(129632,129645).addRange(129648,129652).addRange(129656,129660).addRange(129664,129670).addRange(129680,129708).addRange(129712,129722).addRange(129728,129733).addRange(129744,129753).addRange(129760,129767).addRange(129776,129782).addRange(129792,129938).addRange(129940,129994).addRange(130032,130041).addRange(131072,173791),a.addRange(173824,177976).addRange(177984,178205).addRange(178208,183969).addRange(183984,191456).addRange(194560,195101).addRange(196608,201546),e.exports=a},52414:function(e,t,n){const a=n(45927)(1471,1479,1648,1809,2045,2362,2364,2381,2433,2492,2494,2509,2519,2558,2620,2641,2677,2748,2765,2817,2876,2893,2946,3006,3008,3021,3031,3072,3076,3132,3201,3260,3263,3266,3270,3390,3405,3415,3457,3530,3535,3542,3551,3633,3761,3893,3895,3897,4038,4226,4237,4253,6086,6109,6159,6313,6450,6683,6742,6752,6754,6783,6972,6978,7142,7149,7405,7412,8204,11647,43010,43014,43019,43052,43263,43443,43493,43587,43596,43644,43696,43713,43766,44005,44008,44013,64286,66045,66272,68159,69633,69744,69826,70003,70095,70196,70206,70367,70462,70464,70487,70726,70750,70832,70842,70845,71087,71229,71339,71341,71351,71984,71998,72003,72160,72263,72767,73018,73031,73109,73111,94031,94180,119141,121461,121476,123566);a.addRange(768,879).addRange(1155,1161).addRange(1425,1469).addRange(1473,1474).addRange(1476,1477).addRange(1552,1562).addRange(1611,1631).addRange(1750,1756).addRange(1759,1764).addRange(1767,1768).addRange(1770,1773).addRange(1840,1866).addRange(1958,1968).addRange(2027,2035).addRange(2070,2073).addRange(2075,2083).addRange(2085,2087).addRange(2089,2093).addRange(2137,2139).addRange(2200,2207).addRange(2250,2273).addRange(2275,2306).addRange(2369,2376).addRange(2385,2391).addRange(2402,2403).addRange(2497,2500).addRange(2530,2531).addRange(2561,2562).addRange(2625,2626).addRange(2631,2632).addRange(2635,2637).addRange(2672,2673).addRange(2689,2690).addRange(2753,2757).addRange(2759,2760).addRange(2786,2787).addRange(2810,2815).addRange(2878,2879).addRange(2881,2884).addRange(2901,2903).addRange(2914,2915).addRange(3134,3136).addRange(3142,3144).addRange(3146,3149).addRange(3157,3158).addRange(3170,3171).addRange(3276,3277).addRange(3285,3286).addRange(3298,3299).addRange(3328,3329).addRange(3387,3388),a.addRange(3393,3396).addRange(3426,3427).addRange(3538,3540).addRange(3636,3642).addRange(3655,3662).addRange(3764,3772).addRange(3784,3789).addRange(3864,3865).addRange(3953,3966).addRange(3968,3972).addRange(3974,3975).addRange(3981,3991).addRange(3993,4028).addRange(4141,4144).addRange(4146,4151).addRange(4153,4154).addRange(4157,4158).addRange(4184,4185).addRange(4190,4192).addRange(4209,4212).addRange(4229,4230).addRange(4957,4959).addRange(5906,5908).addRange(5938,5939).addRange(5970,5971).addRange(6002,6003).addRange(6068,6069).addRange(6071,6077).addRange(6089,6099).addRange(6155,6157).addRange(6277,6278).addRange(6432,6434).addRange(6439,6440).addRange(6457,6459).addRange(6679,6680).addRange(6744,6750).addRange(6757,6764).addRange(6771,6780).addRange(6832,6862).addRange(6912,6915).addRange(6964,6970).addRange(7019,7027).addRange(7040,7041).addRange(7074,7077).addRange(7080,7081).addRange(7083,7085).addRange(7144,7145).addRange(7151,7153).addRange(7212,7219).addRange(7222,7223).addRange(7376,7378),a.addRange(7380,7392).addRange(7394,7400).addRange(7416,7417).addRange(7616,7679).addRange(8400,8432).addRange(11503,11505).addRange(11744,11775).addRange(12330,12335).addRange(12441,12442).addRange(42607,42610).addRange(42612,42621).addRange(42654,42655).addRange(42736,42737).addRange(43045,43046).addRange(43204,43205).addRange(43232,43249).addRange(43302,43309).addRange(43335,43345).addRange(43392,43394).addRange(43446,43449).addRange(43452,43453).addRange(43561,43566).addRange(43569,43570).addRange(43573,43574).addRange(43698,43700).addRange(43703,43704).addRange(43710,43711).addRange(43756,43757).addRange(65024,65039).addRange(65056,65071).addRange(65438,65439).addRange(66422,66426).addRange(68097,68099).addRange(68101,68102).addRange(68108,68111).addRange(68152,68154).addRange(68325,68326).addRange(68900,68903).addRange(69291,69292).addRange(69446,69456).addRange(69506,69509).addRange(69688,69702).addRange(69747,69748).addRange(69759,69761).addRange(69811,69814).addRange(69817,69818).addRange(69888,69890).addRange(69927,69931).addRange(69933,69940).addRange(70016,70017).addRange(70070,70078),a.addRange(70089,70092).addRange(70191,70193).addRange(70198,70199).addRange(70371,70378).addRange(70400,70401).addRange(70459,70460).addRange(70502,70508).addRange(70512,70516).addRange(70712,70719).addRange(70722,70724).addRange(70835,70840).addRange(70847,70848).addRange(70850,70851).addRange(71090,71093).addRange(71100,71101).addRange(71103,71104).addRange(71132,71133).addRange(71219,71226).addRange(71231,71232).addRange(71344,71349).addRange(71453,71455).addRange(71458,71461).addRange(71463,71467).addRange(71727,71735).addRange(71737,71738).addRange(71995,71996).addRange(72148,72151).addRange(72154,72155).addRange(72193,72202).addRange(72243,72248).addRange(72251,72254).addRange(72273,72278).addRange(72281,72283).addRange(72330,72342).addRange(72344,72345).addRange(72752,72758).addRange(72760,72765).addRange(72850,72871).addRange(72874,72880).addRange(72882,72883).addRange(72885,72886).addRange(73009,73014).addRange(73020,73021).addRange(73023,73029).addRange(73104,73105).addRange(73459,73460).addRange(92912,92916).addRange(92976,92982).addRange(94095,94098).addRange(113821,113822).addRange(118528,118573),a.addRange(118576,118598).addRange(119143,119145).addRange(119150,119154).addRange(119163,119170).addRange(119173,119179).addRange(119210,119213).addRange(119362,119364).addRange(121344,121398).addRange(121403,121452).addRange(121499,121503).addRange(121505,121519).addRange(122880,122886).addRange(122888,122904).addRange(122907,122913).addRange(122915,122916).addRange(122918,122922).addRange(123184,123190).addRange(123628,123631).addRange(125136,125142).addRange(125252,125258).addRange(917536,917631).addRange(917760,917999),e.exports=a},68005:function(e,t,n){const a=n(45927)();a.addRange(48,57).addRange(65,70).addRange(97,102).addRange(65296,65305).addRange(65313,65318).addRange(65345,65350),e.exports=a},39259:function(e,t,n){const a=n(45927)();a.addRange(12272,12273).addRange(12276,12283),e.exports=a},77137:function(e,t,n){const a=n(45927)();a.addRange(12274,12275),e.exports=a},44248:function(e,t,n){const a=n(45927)(95,170,181,183,186,748,750,895,908,1369,1471,1479,1791,2042,2045,2482,2519,2556,2558,2620,2641,2654,2768,2929,2972,3024,3031,3165,3517,3530,3542,3716,3749,3782,3840,3893,3895,3897,4038,4295,4301,4696,4800,6103,6823,8025,8027,8029,8126,8276,8305,8319,8417,8450,8455,8469,8484,8486,8488,8526,11559,11565,11631,42963,43052,43259,64318,65343,66045,66272,67592,67644,68159,69415,69826,70006,70108,70206,70280,70480,70487,70855,71236,71945,72263,72349,73018,73648,119970,119995,120134,121461,121476,123214,126500,126503,126521,126523,126530,126535,126537,126539,126548,126551,126553,126555,126557,126559,126564,126590);a.addRange(48,57).addRange(65,90).addRange(97,122).addRange(192,214).addRange(216,246).addRange(248,705).addRange(710,721).addRange(736,740).addRange(768,884).addRange(886,887).addRange(890,893).addRange(902,906).addRange(910,929).addRange(931,1013).addRange(1015,1153).addRange(1155,1159).addRange(1162,1327).addRange(1329,1366).addRange(1376,1416).addRange(1425,1469).addRange(1473,1474).addRange(1476,1477).addRange(1488,1514).addRange(1519,1522).addRange(1552,1562).addRange(1568,1641).addRange(1646,1747).addRange(1749,1756).addRange(1759,1768).addRange(1770,1788).addRange(1808,1866).addRange(1869,1969).addRange(1984,2037).addRange(2048,2093).addRange(2112,2139).addRange(2144,2154).addRange(2160,2183).addRange(2185,2190).addRange(2200,2273).addRange(2275,2403).addRange(2406,2415).addRange(2417,2435).addRange(2437,2444).addRange(2447,2448).addRange(2451,2472).addRange(2474,2480).addRange(2486,2489).addRange(2492,2500).addRange(2503,2504).addRange(2507,2510).addRange(2524,2525),a.addRange(2527,2531).addRange(2534,2545).addRange(2561,2563).addRange(2565,2570).addRange(2575,2576).addRange(2579,2600).addRange(2602,2608).addRange(2610,2611).addRange(2613,2614).addRange(2616,2617).addRange(2622,2626).addRange(2631,2632).addRange(2635,2637).addRange(2649,2652).addRange(2662,2677).addRange(2689,2691).addRange(2693,2701).addRange(2703,2705).addRange(2707,2728).addRange(2730,2736).addRange(2738,2739).addRange(2741,2745).addRange(2748,2757).addRange(2759,2761).addRange(2763,2765).addRange(2784,2787).addRange(2790,2799).addRange(2809,2815).addRange(2817,2819).addRange(2821,2828).addRange(2831,2832).addRange(2835,2856).addRange(2858,2864).addRange(2866,2867).addRange(2869,2873).addRange(2876,2884).addRange(2887,2888).addRange(2891,2893).addRange(2901,2903).addRange(2908,2909).addRange(2911,2915).addRange(2918,2927).addRange(2946,2947).addRange(2949,2954).addRange(2958,2960).addRange(2962,2965).addRange(2969,2970).addRange(2974,2975).addRange(2979,2980).addRange(2984,2986).addRange(2990,3001),a.addRange(3006,3010).addRange(3014,3016).addRange(3018,3021).addRange(3046,3055).addRange(3072,3084).addRange(3086,3088).addRange(3090,3112).addRange(3114,3129).addRange(3132,3140).addRange(3142,3144).addRange(3146,3149).addRange(3157,3158).addRange(3160,3162).addRange(3168,3171).addRange(3174,3183).addRange(3200,3203).addRange(3205,3212).addRange(3214,3216).addRange(3218,3240).addRange(3242,3251).addRange(3253,3257).addRange(3260,3268).addRange(3270,3272).addRange(3274,3277).addRange(3285,3286).addRange(3293,3294).addRange(3296,3299).addRange(3302,3311).addRange(3313,3314).addRange(3328,3340).addRange(3342,3344).addRange(3346,3396).addRange(3398,3400).addRange(3402,3406).addRange(3412,3415).addRange(3423,3427).addRange(3430,3439).addRange(3450,3455).addRange(3457,3459).addRange(3461,3478).addRange(3482,3505).addRange(3507,3515).addRange(3520,3526).addRange(3535,3540).addRange(3544,3551).addRange(3558,3567).addRange(3570,3571).addRange(3585,3642).addRange(3648,3662).addRange(3664,3673).addRange(3713,3714),a.addRange(3718,3722).addRange(3724,3747).addRange(3751,3773).addRange(3776,3780).addRange(3784,3789).addRange(3792,3801).addRange(3804,3807).addRange(3864,3865).addRange(3872,3881).addRange(3902,3911).addRange(3913,3948).addRange(3953,3972).addRange(3974,3991).addRange(3993,4028).addRange(4096,4169).addRange(4176,4253).addRange(4256,4293).addRange(4304,4346).addRange(4348,4680).addRange(4682,4685).addRange(4688,4694).addRange(4698,4701).addRange(4704,4744).addRange(4746,4749).addRange(4752,4784).addRange(4786,4789).addRange(4792,4798).addRange(4802,4805).addRange(4808,4822).addRange(4824,4880).addRange(4882,4885).addRange(4888,4954).addRange(4957,4959).addRange(4969,4977).addRange(4992,5007).addRange(5024,5109).addRange(5112,5117).addRange(5121,5740).addRange(5743,5759).addRange(5761,5786).addRange(5792,5866).addRange(5870,5880).addRange(5888,5909).addRange(5919,5940).addRange(5952,5971).addRange(5984,5996).addRange(5998,6e3).addRange(6002,6003).addRange(6016,6099).addRange(6108,6109).addRange(6112,6121),a.addRange(6155,6157).addRange(6159,6169).addRange(6176,6264).addRange(6272,6314).addRange(6320,6389).addRange(6400,6430).addRange(6432,6443).addRange(6448,6459).addRange(6470,6509).addRange(6512,6516).addRange(6528,6571).addRange(6576,6601).addRange(6608,6618).addRange(6656,6683).addRange(6688,6750).addRange(6752,6780).addRange(6783,6793).addRange(6800,6809).addRange(6832,6845).addRange(6847,6862).addRange(6912,6988).addRange(6992,7001).addRange(7019,7027).addRange(7040,7155).addRange(7168,7223).addRange(7232,7241).addRange(7245,7293).addRange(7296,7304).addRange(7312,7354).addRange(7357,7359).addRange(7376,7378).addRange(7380,7418).addRange(7424,7957).addRange(7960,7965).addRange(7968,8005).addRange(8008,8013).addRange(8016,8023).addRange(8031,8061).addRange(8064,8116).addRange(8118,8124).addRange(8130,8132).addRange(8134,8140).addRange(8144,8147).addRange(8150,8155).addRange(8160,8172).addRange(8178,8180).addRange(8182,8188).addRange(8255,8256).addRange(8336,8348).addRange(8400,8412).addRange(8421,8432),a.addRange(8458,8467).addRange(8472,8477).addRange(8490,8505).addRange(8508,8511).addRange(8517,8521).addRange(8544,8584).addRange(11264,11492).addRange(11499,11507).addRange(11520,11557).addRange(11568,11623).addRange(11647,11670).addRange(11680,11686).addRange(11688,11694).addRange(11696,11702).addRange(11704,11710).addRange(11712,11718).addRange(11720,11726).addRange(11728,11734).addRange(11736,11742).addRange(11744,11775).addRange(12293,12295).addRange(12321,12335).addRange(12337,12341).addRange(12344,12348).addRange(12353,12438).addRange(12441,12447).addRange(12449,12538).addRange(12540,12543).addRange(12549,12591).addRange(12593,12686).addRange(12704,12735).addRange(12784,12799).addRange(13312,19903).addRange(19968,42124).addRange(42192,42237).addRange(42240,42508).addRange(42512,42539).addRange(42560,42607).addRange(42612,42621).addRange(42623,42737).addRange(42775,42783).addRange(42786,42888).addRange(42891,42954).addRange(42960,42961).addRange(42965,42969).addRange(42994,43047).addRange(43072,43123).addRange(43136,43205).addRange(43216,43225).addRange(43232,43255).addRange(43261,43309),a.addRange(43312,43347).addRange(43360,43388).addRange(43392,43456).addRange(43471,43481).addRange(43488,43518).addRange(43520,43574).addRange(43584,43597).addRange(43600,43609).addRange(43616,43638).addRange(43642,43714).addRange(43739,43741).addRange(43744,43759).addRange(43762,43766).addRange(43777,43782).addRange(43785,43790).addRange(43793,43798).addRange(43808,43814).addRange(43816,43822).addRange(43824,43866).addRange(43868,43881).addRange(43888,44010).addRange(44012,44013).addRange(44016,44025).addRange(44032,55203).addRange(55216,55238).addRange(55243,55291).addRange(63744,64109).addRange(64112,64217).addRange(64256,64262).addRange(64275,64279).addRange(64285,64296).addRange(64298,64310).addRange(64312,64316).addRange(64320,64321).addRange(64323,64324).addRange(64326,64433).addRange(64467,64829).addRange(64848,64911).addRange(64914,64967).addRange(65008,65019).addRange(65024,65039).addRange(65056,65071).addRange(65075,65076).addRange(65101,65103).addRange(65136,65140).addRange(65142,65276).addRange(65296,65305).addRange(65313,65338).addRange(65345,65370).addRange(65382,65470).addRange(65474,65479),a.addRange(65482,65487).addRange(65490,65495).addRange(65498,65500).addRange(65536,65547).addRange(65549,65574).addRange(65576,65594).addRange(65596,65597).addRange(65599,65613).addRange(65616,65629).addRange(65664,65786).addRange(65856,65908).addRange(66176,66204).addRange(66208,66256).addRange(66304,66335).addRange(66349,66378).addRange(66384,66426).addRange(66432,66461).addRange(66464,66499).addRange(66504,66511).addRange(66513,66517).addRange(66560,66717).addRange(66720,66729).addRange(66736,66771).addRange(66776,66811).addRange(66816,66855).addRange(66864,66915).addRange(66928,66938).addRange(66940,66954).addRange(66956,66962).addRange(66964,66965).addRange(66967,66977).addRange(66979,66993).addRange(66995,67001).addRange(67003,67004).addRange(67072,67382).addRange(67392,67413).addRange(67424,67431).addRange(67456,67461).addRange(67463,67504).addRange(67506,67514).addRange(67584,67589).addRange(67594,67637).addRange(67639,67640).addRange(67647,67669).addRange(67680,67702).addRange(67712,67742).addRange(67808,67826).addRange(67828,67829).addRange(67840,67861).addRange(67872,67897).addRange(67968,68023),a.addRange(68030,68031).addRange(68096,68099).addRange(68101,68102).addRange(68108,68115).addRange(68117,68119).addRange(68121,68149).addRange(68152,68154).addRange(68192,68220).addRange(68224,68252).addRange(68288,68295).addRange(68297,68326).addRange(68352,68405).addRange(68416,68437).addRange(68448,68466).addRange(68480,68497).addRange(68608,68680).addRange(68736,68786).addRange(68800,68850).addRange(68864,68903).addRange(68912,68921).addRange(69248,69289).addRange(69291,69292).addRange(69296,69297).addRange(69376,69404).addRange(69424,69456).addRange(69488,69509).addRange(69552,69572).addRange(69600,69622).addRange(69632,69702).addRange(69734,69749).addRange(69759,69818).addRange(69840,69864).addRange(69872,69881).addRange(69888,69940).addRange(69942,69951).addRange(69956,69959).addRange(69968,70003).addRange(70016,70084).addRange(70089,70092).addRange(70094,70106).addRange(70144,70161).addRange(70163,70199).addRange(70272,70278).addRange(70282,70285).addRange(70287,70301).addRange(70303,70312).addRange(70320,70378).addRange(70384,70393).addRange(70400,70403).addRange(70405,70412).addRange(70415,70416),a.addRange(70419,70440).addRange(70442,70448).addRange(70450,70451).addRange(70453,70457).addRange(70459,70468).addRange(70471,70472).addRange(70475,70477).addRange(70493,70499).addRange(70502,70508).addRange(70512,70516).addRange(70656,70730).addRange(70736,70745).addRange(70750,70753).addRange(70784,70853).addRange(70864,70873).addRange(71040,71093).addRange(71096,71104).addRange(71128,71133).addRange(71168,71232).addRange(71248,71257).addRange(71296,71352).addRange(71360,71369).addRange(71424,71450).addRange(71453,71467).addRange(71472,71481).addRange(71488,71494).addRange(71680,71738).addRange(71840,71913).addRange(71935,71942).addRange(71948,71955).addRange(71957,71958).addRange(71960,71989).addRange(71991,71992).addRange(71995,72003).addRange(72016,72025).addRange(72096,72103).addRange(72106,72151).addRange(72154,72161).addRange(72163,72164).addRange(72192,72254).addRange(72272,72345).addRange(72368,72440).addRange(72704,72712).addRange(72714,72758).addRange(72760,72768).addRange(72784,72793).addRange(72818,72847).addRange(72850,72871).addRange(72873,72886).addRange(72960,72966).addRange(72968,72969),a.addRange(72971,73014).addRange(73020,73021).addRange(73023,73031).addRange(73040,73049).addRange(73056,73061).addRange(73063,73064).addRange(73066,73102).addRange(73104,73105).addRange(73107,73112).addRange(73120,73129).addRange(73440,73462).addRange(73728,74649).addRange(74752,74862).addRange(74880,75075).addRange(77712,77808).addRange(77824,78894).addRange(82944,83526).addRange(92160,92728).addRange(92736,92766).addRange(92768,92777).addRange(92784,92862).addRange(92864,92873).addRange(92880,92909).addRange(92912,92916).addRange(92928,92982).addRange(92992,92995).addRange(93008,93017).addRange(93027,93047).addRange(93053,93071).addRange(93760,93823).addRange(93952,94026).addRange(94031,94087).addRange(94095,94111).addRange(94176,94177).addRange(94179,94180).addRange(94192,94193).addRange(94208,100343).addRange(100352,101589).addRange(101632,101640).addRange(110576,110579).addRange(110581,110587).addRange(110589,110590).addRange(110592,110882).addRange(110928,110930).addRange(110948,110951).addRange(110960,111355).addRange(113664,113770).addRange(113776,113788).addRange(113792,113800).addRange(113808,113817).addRange(113821,113822),a.addRange(118528,118573).addRange(118576,118598).addRange(119141,119145).addRange(119149,119154).addRange(119163,119170).addRange(119173,119179).addRange(119210,119213).addRange(119362,119364).addRange(119808,119892).addRange(119894,119964).addRange(119966,119967).addRange(119973,119974).addRange(119977,119980).addRange(119982,119993).addRange(119997,120003).addRange(120005,120069).addRange(120071,120074).addRange(120077,120084).addRange(120086,120092).addRange(120094,120121).addRange(120123,120126).addRange(120128,120132).addRange(120138,120144).addRange(120146,120485).addRange(120488,120512).addRange(120514,120538).addRange(120540,120570).addRange(120572,120596).addRange(120598,120628).addRange(120630,120654).addRange(120656,120686).addRange(120688,120712).addRange(120714,120744).addRange(120746,120770).addRange(120772,120779).addRange(120782,120831).addRange(121344,121398).addRange(121403,121452).addRange(121499,121503).addRange(121505,121519).addRange(122624,122654).addRange(122880,122886).addRange(122888,122904).addRange(122907,122913).addRange(122915,122916).addRange(122918,122922).addRange(123136,123180).addRange(123184,123197).addRange(123200,123209).addRange(123536,123566).addRange(123584,123641),a.addRange(124896,124902).addRange(124904,124907).addRange(124909,124910).addRange(124912,124926).addRange(124928,125124).addRange(125136,125142).addRange(125184,125259).addRange(125264,125273).addRange(126464,126467).addRange(126469,126495).addRange(126497,126498).addRange(126505,126514).addRange(126516,126519).addRange(126541,126543).addRange(126545,126546).addRange(126561,126562).addRange(126567,126570).addRange(126572,126578).addRange(126580,126583).addRange(126585,126588).addRange(126592,126601).addRange(126603,126619).addRange(126625,126627).addRange(126629,126633).addRange(126635,126651).addRange(130032,130041).addRange(131072,173791).addRange(173824,177976).addRange(177984,178205).addRange(178208,183969).addRange(183984,191456).addRange(194560,195101).addRange(196608,201546).addRange(917760,917999),e.exports=a},88897:function(e,t,n){const a=n(45927)(170,181,186,748,750,895,902,908,1369,1749,1791,1808,1969,2042,2074,2084,2088,2365,2384,2482,2493,2510,2556,2654,2749,2768,2809,2877,2929,2947,2972,3024,3133,3165,3200,3261,3389,3406,3517,3716,3749,3773,3782,3840,4159,4193,4238,4295,4301,4696,4800,6103,6108,6314,6823,7418,8025,8027,8029,8126,8305,8319,8450,8455,8469,8484,8486,8488,8526,11559,11565,11631,42963,43259,43471,43642,43697,43712,43714,64285,64318,67592,67644,68096,69415,69749,69956,69959,70006,70106,70108,70280,70461,70480,70855,71236,71352,71945,71999,72001,72161,72163,72192,72250,72272,72349,72768,73030,73112,73648,94032,94179,119970,119995,120134,123214,125259,126500,126503,126521,126523,126530,126535,126537,126539,126548,126551,126553,126555,126557,126559,126564,126590);a.addRange(65,90).addRange(97,122).addRange(192,214).addRange(216,246).addRange(248,705).addRange(710,721).addRange(736,740).addRange(880,884).addRange(886,887).addRange(890,893).addRange(904,906).addRange(910,929).addRange(931,1013).addRange(1015,1153).addRange(1162,1327).addRange(1329,1366).addRange(1376,1416).addRange(1488,1514).addRange(1519,1522).addRange(1568,1610).addRange(1646,1647).addRange(1649,1747).addRange(1765,1766).addRange(1774,1775).addRange(1786,1788).addRange(1810,1839).addRange(1869,1957).addRange(1994,2026).addRange(2036,2037).addRange(2048,2069).addRange(2112,2136).addRange(2144,2154).addRange(2160,2183).addRange(2185,2190).addRange(2208,2249).addRange(2308,2361).addRange(2392,2401).addRange(2417,2432).addRange(2437,2444).addRange(2447,2448).addRange(2451,2472).addRange(2474,2480).addRange(2486,2489).addRange(2524,2525).addRange(2527,2529).addRange(2544,2545).addRange(2565,2570).addRange(2575,2576).addRange(2579,2600).addRange(2602,2608).addRange(2610,2611),a.addRange(2613,2614).addRange(2616,2617).addRange(2649,2652).addRange(2674,2676).addRange(2693,2701).addRange(2703,2705).addRange(2707,2728).addRange(2730,2736).addRange(2738,2739).addRange(2741,2745).addRange(2784,2785).addRange(2821,2828).addRange(2831,2832).addRange(2835,2856).addRange(2858,2864).addRange(2866,2867).addRange(2869,2873).addRange(2908,2909).addRange(2911,2913).addRange(2949,2954).addRange(2958,2960).addRange(2962,2965).addRange(2969,2970).addRange(2974,2975).addRange(2979,2980).addRange(2984,2986).addRange(2990,3001).addRange(3077,3084).addRange(3086,3088).addRange(3090,3112).addRange(3114,3129).addRange(3160,3162).addRange(3168,3169).addRange(3205,3212).addRange(3214,3216).addRange(3218,3240).addRange(3242,3251).addRange(3253,3257).addRange(3293,3294).addRange(3296,3297).addRange(3313,3314).addRange(3332,3340).addRange(3342,3344).addRange(3346,3386).addRange(3412,3414).addRange(3423,3425).addRange(3450,3455).addRange(3461,3478).addRange(3482,3505).addRange(3507,3515).addRange(3520,3526),a.addRange(3585,3632).addRange(3634,3635).addRange(3648,3654).addRange(3713,3714).addRange(3718,3722).addRange(3724,3747).addRange(3751,3760).addRange(3762,3763).addRange(3776,3780).addRange(3804,3807).addRange(3904,3911).addRange(3913,3948).addRange(3976,3980).addRange(4096,4138).addRange(4176,4181).addRange(4186,4189).addRange(4197,4198).addRange(4206,4208).addRange(4213,4225).addRange(4256,4293).addRange(4304,4346).addRange(4348,4680).addRange(4682,4685).addRange(4688,4694).addRange(4698,4701).addRange(4704,4744).addRange(4746,4749).addRange(4752,4784).addRange(4786,4789).addRange(4792,4798).addRange(4802,4805).addRange(4808,4822).addRange(4824,4880).addRange(4882,4885).addRange(4888,4954).addRange(4992,5007).addRange(5024,5109).addRange(5112,5117).addRange(5121,5740).addRange(5743,5759).addRange(5761,5786).addRange(5792,5866).addRange(5870,5880).addRange(5888,5905).addRange(5919,5937).addRange(5952,5969).addRange(5984,5996).addRange(5998,6e3).addRange(6016,6067).addRange(6176,6264).addRange(6272,6312),a.addRange(6320,6389).addRange(6400,6430).addRange(6480,6509).addRange(6512,6516).addRange(6528,6571).addRange(6576,6601).addRange(6656,6678).addRange(6688,6740).addRange(6917,6963).addRange(6981,6988).addRange(7043,7072).addRange(7086,7087).addRange(7098,7141).addRange(7168,7203).addRange(7245,7247).addRange(7258,7293).addRange(7296,7304).addRange(7312,7354).addRange(7357,7359).addRange(7401,7404).addRange(7406,7411).addRange(7413,7414).addRange(7424,7615).addRange(7680,7957).addRange(7960,7965).addRange(7968,8005).addRange(8008,8013).addRange(8016,8023).addRange(8031,8061).addRange(8064,8116).addRange(8118,8124).addRange(8130,8132).addRange(8134,8140).addRange(8144,8147).addRange(8150,8155).addRange(8160,8172).addRange(8178,8180).addRange(8182,8188).addRange(8336,8348).addRange(8458,8467).addRange(8472,8477).addRange(8490,8505).addRange(8508,8511).addRange(8517,8521).addRange(8544,8584).addRange(11264,11492).addRange(11499,11502).addRange(11506,11507).addRange(11520,11557).addRange(11568,11623).addRange(11648,11670),a.addRange(11680,11686).addRange(11688,11694).addRange(11696,11702).addRange(11704,11710).addRange(11712,11718).addRange(11720,11726).addRange(11728,11734).addRange(11736,11742).addRange(12293,12295).addRange(12321,12329).addRange(12337,12341).addRange(12344,12348).addRange(12353,12438).addRange(12443,12447).addRange(12449,12538).addRange(12540,12543).addRange(12549,12591).addRange(12593,12686).addRange(12704,12735).addRange(12784,12799).addRange(13312,19903).addRange(19968,42124).addRange(42192,42237).addRange(42240,42508).addRange(42512,42527).addRange(42538,42539).addRange(42560,42606).addRange(42623,42653).addRange(42656,42735).addRange(42775,42783).addRange(42786,42888).addRange(42891,42954).addRange(42960,42961).addRange(42965,42969).addRange(42994,43009).addRange(43011,43013).addRange(43015,43018).addRange(43020,43042).addRange(43072,43123).addRange(43138,43187).addRange(43250,43255).addRange(43261,43262).addRange(43274,43301).addRange(43312,43334).addRange(43360,43388).addRange(43396,43442).addRange(43488,43492).addRange(43494,43503).addRange(43514,43518).addRange(43520,43560).addRange(43584,43586),a.addRange(43588,43595).addRange(43616,43638).addRange(43646,43695).addRange(43701,43702).addRange(43705,43709).addRange(43739,43741).addRange(43744,43754).addRange(43762,43764).addRange(43777,43782).addRange(43785,43790).addRange(43793,43798).addRange(43808,43814).addRange(43816,43822).addRange(43824,43866).addRange(43868,43881).addRange(43888,44002).addRange(44032,55203).addRange(55216,55238).addRange(55243,55291).addRange(63744,64109).addRange(64112,64217).addRange(64256,64262).addRange(64275,64279).addRange(64287,64296).addRange(64298,64310).addRange(64312,64316).addRange(64320,64321).addRange(64323,64324).addRange(64326,64433).addRange(64467,64829).addRange(64848,64911).addRange(64914,64967).addRange(65008,65019).addRange(65136,65140).addRange(65142,65276).addRange(65313,65338).addRange(65345,65370).addRange(65382,65470).addRange(65474,65479).addRange(65482,65487).addRange(65490,65495).addRange(65498,65500).addRange(65536,65547).addRange(65549,65574).addRange(65576,65594).addRange(65596,65597).addRange(65599,65613).addRange(65616,65629).addRange(65664,65786).addRange(65856,65908).addRange(66176,66204),a.addRange(66208,66256).addRange(66304,66335).addRange(66349,66378).addRange(66384,66421).addRange(66432,66461).addRange(66464,66499).addRange(66504,66511).addRange(66513,66517).addRange(66560,66717).addRange(66736,66771).addRange(66776,66811).addRange(66816,66855).addRange(66864,66915).addRange(66928,66938).addRange(66940,66954).addRange(66956,66962).addRange(66964,66965).addRange(66967,66977).addRange(66979,66993).addRange(66995,67001).addRange(67003,67004).addRange(67072,67382).addRange(67392,67413).addRange(67424,67431).addRange(67456,67461).addRange(67463,67504).addRange(67506,67514).addRange(67584,67589).addRange(67594,67637).addRange(67639,67640).addRange(67647,67669).addRange(67680,67702).addRange(67712,67742).addRange(67808,67826).addRange(67828,67829).addRange(67840,67861).addRange(67872,67897).addRange(67968,68023).addRange(68030,68031).addRange(68112,68115).addRange(68117,68119).addRange(68121,68149).addRange(68192,68220).addRange(68224,68252).addRange(68288,68295).addRange(68297,68324).addRange(68352,68405).addRange(68416,68437).addRange(68448,68466).addRange(68480,68497).addRange(68608,68680),a.addRange(68736,68786).addRange(68800,68850).addRange(68864,68899).addRange(69248,69289).addRange(69296,69297).addRange(69376,69404).addRange(69424,69445).addRange(69488,69505).addRange(69552,69572).addRange(69600,69622).addRange(69635,69687).addRange(69745,69746).addRange(69763,69807).addRange(69840,69864).addRange(69891,69926).addRange(69968,70002).addRange(70019,70066).addRange(70081,70084).addRange(70144,70161).addRange(70163,70187).addRange(70272,70278).addRange(70282,70285).addRange(70287,70301).addRange(70303,70312).addRange(70320,70366).addRange(70405,70412).addRange(70415,70416).addRange(70419,70440).addRange(70442,70448).addRange(70450,70451).addRange(70453,70457).addRange(70493,70497).addRange(70656,70708).addRange(70727,70730).addRange(70751,70753).addRange(70784,70831).addRange(70852,70853).addRange(71040,71086).addRange(71128,71131).addRange(71168,71215).addRange(71296,71338).addRange(71424,71450).addRange(71488,71494).addRange(71680,71723).addRange(71840,71903).addRange(71935,71942).addRange(71948,71955).addRange(71957,71958).addRange(71960,71983).addRange(72096,72103).addRange(72106,72144),a.addRange(72203,72242).addRange(72284,72329).addRange(72368,72440).addRange(72704,72712).addRange(72714,72750).addRange(72818,72847).addRange(72960,72966).addRange(72968,72969).addRange(72971,73008).addRange(73056,73061).addRange(73063,73064).addRange(73066,73097).addRange(73440,73458).addRange(73728,74649).addRange(74752,74862).addRange(74880,75075).addRange(77712,77808).addRange(77824,78894).addRange(82944,83526).addRange(92160,92728).addRange(92736,92766).addRange(92784,92862).addRange(92880,92909).addRange(92928,92975).addRange(92992,92995).addRange(93027,93047).addRange(93053,93071).addRange(93760,93823).addRange(93952,94026).addRange(94099,94111).addRange(94176,94177).addRange(94208,100343).addRange(100352,101589).addRange(101632,101640).addRange(110576,110579).addRange(110581,110587).addRange(110589,110590).addRange(110592,110882).addRange(110928,110930).addRange(110948,110951).addRange(110960,111355).addRange(113664,113770).addRange(113776,113788).addRange(113792,113800).addRange(113808,113817).addRange(119808,119892).addRange(119894,119964).addRange(119966,119967).addRange(119973,119974).addRange(119977,119980).addRange(119982,119993),a.addRange(119997,120003).addRange(120005,120069).addRange(120071,120074).addRange(120077,120084).addRange(120086,120092).addRange(120094,120121).addRange(120123,120126).addRange(120128,120132).addRange(120138,120144).addRange(120146,120485).addRange(120488,120512).addRange(120514,120538).addRange(120540,120570).addRange(120572,120596).addRange(120598,120628).addRange(120630,120654).addRange(120656,120686).addRange(120688,120712).addRange(120714,120744).addRange(120746,120770).addRange(120772,120779).addRange(122624,122654).addRange(123136,123180).addRange(123191,123197).addRange(123536,123565).addRange(123584,123627).addRange(124896,124902).addRange(124904,124907).addRange(124909,124910).addRange(124912,124926).addRange(124928,125124).addRange(125184,125251).addRange(126464,126467).addRange(126469,126495).addRange(126497,126498).addRange(126505,126514).addRange(126516,126519).addRange(126541,126543).addRange(126545,126546).addRange(126561,126562).addRange(126567,126570).addRange(126572,126578).addRange(126580,126583).addRange(126585,126588).addRange(126592,126601).addRange(126603,126619).addRange(126625,126627).addRange(126629,126633).addRange(126635,126651).addRange(131072,173791).addRange(173824,177976),a.addRange(177984,178205).addRange(178208,183969).addRange(183984,191456).addRange(194560,195101).addRange(196608,201546),e.exports=a},86909:function(e,t,n){const a=n(45927)(94180);a.addRange(12294,12295).addRange(12321,12329).addRange(12344,12346).addRange(13312,19903).addRange(19968,40959).addRange(63744,64109).addRange(64112,64217).addRange(94208,100343).addRange(100352,101589).addRange(101632,101640).addRange(110960,111355).addRange(131072,173791).addRange(173824,177976).addRange(177984,178205).addRange(178208,183969).addRange(183984,191456).addRange(194560,195101).addRange(196608,201546),e.exports=a},62022:function(e,t,n){const a=n(45927)();a.addRange(8204,8205),e.exports=a},83623:function(e,t,n){const a=n(45927)(6586,43705);a.addRange(3648,3652).addRange(3776,3780).addRange(6581,6583).addRange(43701,43702).addRange(43707,43708),e.exports=a},90326:function(e,t,n){const a=n(45927)(170,181,186,257,259,261,263,265,267,269,271,273,275,277,279,281,283,285,287,289,291,293,295,297,299,301,303,305,307,309,314,316,318,320,322,324,326,331,333,335,337,339,341,343,345,347,349,351,353,355,357,359,361,363,365,367,369,371,373,375,378,380,387,389,392,402,405,414,417,419,421,424,429,432,436,438,454,457,460,462,464,466,468,470,472,474,479,481,483,485,487,489,491,493,499,501,505,507,509,511,513,515,517,519,521,523,525,527,529,531,533,535,537,539,541,543,545,547,549,551,553,555,557,559,561,572,578,583,585,587,589,837,881,883,887,912,985,987,989,991,993,995,997,999,1001,1003,1005,1013,1016,1121,1123,1125,1127,1129,1131,1133,1135,1137,1139,1141,1143,1145,1147,1149,1151,1153,1163,1165,1167,1169,1171,1173,1175,1177,1179,1181,1183,1185,1187,1189,1191,1193,1195,1197,1199,1201,1203,1205,1207,1209,1211,1213,1215,1218,1220,1222,1224,1226,1228,1233,1235,1237,1239,1241,1243,1245,1247,1249,1251,1253,1255,1257,1259,1261,1263,1265,1267,1269,1271,1273,1275,1277,1279,1281,1283,1285,1287,1289,1291,1293,1295,1297,1299,1301,1303,1305,1307,1309,1311,1313,1315,1317,1319,1321,1323,1325,1327,7681,7683,7685,7687,7689,7691,7693,7695,7697,7699,7701,7703,7705,7707,7709,7711,7713,7715,7717,7719,7721,7723,7725,7727,7729,7731,7733,7735,7737,7739,7741,7743,7745,7747,7749,7751,7753,7755,7757,7759,7761,7763,7765,7767,7769,7771,7773,7775,7777,7779,7781,7783,7785,7787,7789,7791,7793,7795,7797,7799,7801,7803,7805,7807,7809,7811,7813,7815,7817,7819,7821,7823,7825,7827,7839,7841,7843,7845,7847,7849,7851,7853,7855,7857,7859,7861,7863,7865,7867,7869,7871,7873,7875,7877,7879,7881,7883,7885,7887,7889,7891,7893,7895,7897,7899,7901,7903,7905,7907,7909,7911,7913,7915,7917,7919,7921,7923,7925,7927,7929,7931,7933,8126,8305,8319,8458,8467,8495,8500,8505,8526,8580,11361,11368,11370,11372,11377,11393,11395,11397,11399,11401,11403,11405,11407,11409,11411,11413,11415,11417,11419,11421,11423,11425,11427,11429,11431,11433,11435,11437,11439,11441,11443,11445,11447,11449,11451,11453,11455,11457,11459,11461,11463,11465,11467,11469,11471,11473,11475,11477,11479,11481,11483,11485,11487,11489,11500,11502,11507,11559,11565,42561,42563,42565,42567,42569,42571,42573,42575,42577,42579,42581,42583,42585,42587,42589,42591,42593,42595,42597,42599,42601,42603,42605,42625,42627,42629,42631,42633,42635,42637,42639,42641,42643,42645,42647,42649,42787,42789,42791,42793,42795,42797,42803,42805,42807,42809,42811,42813,42815,42817,42819,42821,42823,42825,42827,42829,42831,42833,42835,42837,42839,42841,42843,42845,42847,42849,42851,42853,42855,42857,42859,42861,42874,42876,42879,42881,42883,42885,42887,42892,42894,42897,42903,42905,42907,42909,42911,42913,42915,42917,42919,42921,42927,42933,42935,42937,42939,42941,42943,42945,42947,42952,42954,42961,42963,42965,42967,42969,42998,67456,119995,120779);a.addRange(97,122).addRange(223,246).addRange(248,255).addRange(311,312).addRange(328,329).addRange(382,384).addRange(396,397).addRange(409,411).addRange(426,427).addRange(441,442).addRange(445,447).addRange(476,477).addRange(495,496).addRange(563,569).addRange(575,576).addRange(591,659).addRange(661,696).addRange(704,705).addRange(736,740).addRange(890,893).addRange(940,974).addRange(976,977).addRange(981,983).addRange(1007,1011).addRange(1019,1020).addRange(1072,1119).addRange(1230,1231).addRange(1376,1416).addRange(4304,4346).addRange(4349,4351).addRange(5112,5117).addRange(7296,7304).addRange(7424,7615).addRange(7829,7837).addRange(7935,7943).addRange(7952,7957).addRange(7968,7975).addRange(7984,7991).addRange(8e3,8005).addRange(8016,8023).addRange(8032,8039).addRange(8048,8061).addRange(8064,8071).addRange(8080,8087).addRange(8096,8103).addRange(8112,8116).addRange(8118,8119).addRange(8130,8132).addRange(8134,8135).addRange(8144,8147).addRange(8150,8151),a.addRange(8160,8167).addRange(8178,8180).addRange(8182,8183).addRange(8336,8348).addRange(8462,8463).addRange(8508,8509).addRange(8518,8521).addRange(8560,8575).addRange(9424,9449).addRange(11312,11359).addRange(11365,11366).addRange(11379,11380).addRange(11382,11389).addRange(11491,11492).addRange(11520,11557).addRange(42651,42653).addRange(42799,42801).addRange(42863,42872).addRange(42899,42901).addRange(43e3,43002).addRange(43824,43866).addRange(43868,43880).addRange(43888,43967).addRange(64256,64262).addRange(64275,64279).addRange(65345,65370).addRange(66600,66639).addRange(66776,66811).addRange(66967,66977).addRange(66979,66993).addRange(66995,67001).addRange(67003,67004).addRange(67459,67461).addRange(67463,67504).addRange(67506,67514).addRange(68800,68850).addRange(71872,71903).addRange(93792,93823).addRange(119834,119859).addRange(119886,119892).addRange(119894,119911).addRange(119938,119963).addRange(119990,119993).addRange(119997,120003).addRange(120005,120015).addRange(120042,120067).addRange(120094,120119).addRange(120146,120171).addRange(120198,120223).addRange(120250,120275).addRange(120302,120327),a.addRange(120354,120379).addRange(120406,120431).addRange(120458,120485).addRange(120514,120538).addRange(120540,120545).addRange(120572,120596).addRange(120598,120603).addRange(120630,120654).addRange(120656,120661).addRange(120688,120712).addRange(120714,120719).addRange(120746,120770).addRange(120772,120777).addRange(122624,122633).addRange(122635,122654).addRange(125218,125251),e.exports=a},35359:function(e,t,n){const a=n(45927)(43,94,124,126,172,177,215,247,981,8214,8256,8260,8274,8417,8450,8455,8469,8484,8523,8669,9084,9143,9168,9698,9700,9792,9794,64297,65128,65291,65340,65342,65372,65374,65506,119970,119995,120134,126500,126503,126521,126523,126530,126535,126537,126539,126548,126551,126553,126555,126557,126559,126564,126590);a.addRange(60,62).addRange(976,978).addRange(1008,1009).addRange(1012,1014).addRange(1542,1544).addRange(8242,8244).addRange(8289,8292).addRange(8314,8318).addRange(8330,8334).addRange(8400,8412).addRange(8421,8422).addRange(8427,8431).addRange(8458,8467).addRange(8472,8477).addRange(8488,8489).addRange(8492,8493).addRange(8495,8497).addRange(8499,8504).addRange(8508,8521).addRange(8592,8615).addRange(8617,8622).addRange(8624,8625).addRange(8630,8631).addRange(8636,8667).addRange(8676,8677).addRange(8692,8959).addRange(8968,8971).addRange(8992,8993).addRange(9115,9141).addRange(9180,9186).addRange(9632,9633).addRange(9646,9655).addRange(9660,9665).addRange(9670,9671).addRange(9674,9675).addRange(9679,9683).addRange(9703,9708).addRange(9720,9727).addRange(9733,9734).addRange(9824,9827).addRange(9837,9839).addRange(10176,10239).addRange(10496,11007).addRange(11056,11076).addRange(11079,11084).addRange(65121,65126).addRange(65308,65310).addRange(65513,65516).addRange(119808,119892).addRange(119894,119964).addRange(119966,119967),a.addRange(119973,119974).addRange(119977,119980).addRange(119982,119993).addRange(119997,120003).addRange(120005,120069).addRange(120071,120074).addRange(120077,120084).addRange(120086,120092).addRange(120094,120121).addRange(120123,120126).addRange(120128,120132).addRange(120138,120144).addRange(120146,120485).addRange(120488,120779).addRange(120782,120831).addRange(126464,126467).addRange(126469,126495).addRange(126497,126498).addRange(126505,126514).addRange(126516,126519).addRange(126541,126543).addRange(126545,126546).addRange(126561,126562).addRange(126567,126570).addRange(126572,126578).addRange(126580,126583).addRange(126585,126588).addRange(126592,126601).addRange(126603,126619).addRange(126625,126627).addRange(126629,126633).addRange(126635,126651).addRange(126704,126705),e.exports=a},17666:function(e,t,n){const a=n(45927)();a.addRange(64976,65007).addRange(65534,65535).addRange(131070,131071).addRange(196606,196607).addRange(262142,262143).addRange(327678,327679).addRange(393214,393215).addRange(458750,458751).addRange(524286,524287).addRange(589822,589823).addRange(655358,655359).addRange(720894,720895).addRange(786430,786431).addRange(851966,851967).addRange(917502,917503).addRange(983038,983039).addRange(1048574,1048575).addRange(1114110,1114111),e.exports=a},65976:function(e,t,n){const a=n(45927)(96,169,174,182,187,191,215,247,12336);a.addRange(33,47).addRange(58,64).addRange(91,94).addRange(123,126).addRange(161,167).addRange(171,172).addRange(176,177).addRange(8208,8231).addRange(8240,8254).addRange(8257,8275).addRange(8277,8286).addRange(8592,9311).addRange(9472,10101).addRange(10132,11263).addRange(11776,11903).addRange(12289,12291).addRange(12296,12320).addRange(64830,64831).addRange(65093,65094),e.exports=a},37724:function(e,t,n){const a=n(45927)(32,133);a.addRange(9,13).addRange(8206,8207).addRange(8232,8233),e.exports=a},88924:function(e,t,n){const a=n(45927)(34,39,171,187,11842,65282,65287);a.addRange(8216,8223).addRange(8249,8250).addRange(12300,12303).addRange(12317,12319).addRange(65089,65092).addRange(65378,65379),e.exports=a},76511:function(e,t,n){const a=n(45927)();a.addRange(11904,11929).addRange(11931,12019).addRange(12032,12245),e.exports=a},14635:function(e,t,n){const a=n(45927)();a.addRange(127462,127487),e.exports=a},40610:function(e,t,n){const a=n(45927)(33,46,63,1417,1748,2041,2103,2105,4962,5742,6147,6153,11822,11836,12290,42239,42739,42743,43311,44011,65106,65281,65294,65311,65377,70093,70313,72004,72006,92917,92996,93848,113823,121480);a.addRange(1565,1567).addRange(1792,1794).addRange(2109,2110).addRange(2404,2405).addRange(4170,4171).addRange(4967,4968).addRange(5941,5942).addRange(6468,6469).addRange(6824,6827).addRange(7002,7003).addRange(7006,7007).addRange(7037,7038).addRange(7227,7228).addRange(7294,7295).addRange(8252,8253).addRange(8263,8265).addRange(11859,11860).addRange(42510,42511).addRange(43126,43127).addRange(43214,43215).addRange(43464,43465).addRange(43613,43615).addRange(43760,43761).addRange(65110,65111).addRange(68182,68183).addRange(69461,69465).addRange(69510,69513).addRange(69703,69704).addRange(69822,69825).addRange(69953,69955).addRange(70085,70086).addRange(70110,70111).addRange(70200,70201).addRange(70203,70204).addRange(70731,70732).addRange(71106,71107).addRange(71113,71127).addRange(71233,71234).addRange(71484,71486).addRange(72258,72259).addRange(72347,72348).addRange(72769,72770).addRange(73463,73464).addRange(92782,92783).addRange(92983,92984),e.exports=a},7955:function(e,t,n){const a=n(45927)(303,585,616,669,690,1011,1110,1112,7522,7574,7588,7592,7725,7883,8305,11388,122650);a.addRange(105,106).addRange(8520,8521).addRange(119842,119843).addRange(119894,119895).addRange(119946,119947).addRange(119998,119999).addRange(120050,120051).addRange(120102,120103).addRange(120154,120155).addRange(120206,120207).addRange(120258,120259).addRange(120310,120311).addRange(120362,120363).addRange(120414,120415).addRange(120466,120467),e.exports=a},6082:function(e,t,n){const a=n(45927)(33,44,46,63,894,903,1417,1475,1548,1563,1748,1804,2142,3848,5742,6106,11822,11836,11841,11852,43311,43743,44011,65281,65292,65294,65311,65377,65380,66463,66512,67671,67871,70093,70313,72004,72006,72817,92917,92996,113823);a.addRange(58,59).addRange(1565,1567).addRange(1792,1802).addRange(2040,2041).addRange(2096,2110).addRange(2404,2405).addRange(3674,3675).addRange(3853,3858).addRange(4170,4171).addRange(4961,4968).addRange(5867,5869).addRange(5941,5942).addRange(6100,6102).addRange(6146,6149).addRange(6152,6153).addRange(6468,6469).addRange(6824,6827).addRange(7002,7003).addRange(7005,7007).addRange(7037,7038).addRange(7227,7231).addRange(7294,7295).addRange(8252,8253).addRange(8263,8265).addRange(11854,11855).addRange(11859,11860).addRange(12289,12290).addRange(42238,42239).addRange(42509,42511).addRange(42739,42743).addRange(43126,43127).addRange(43214,43215).addRange(43463,43465).addRange(43613,43615).addRange(43760,43761).addRange(65104,65106).addRange(65108,65111).addRange(65306,65307).addRange(68182,68183).addRange(68336,68341).addRange(68410,68415).addRange(68505,68508).addRange(69461,69465).addRange(69510,69513).addRange(69703,69709).addRange(69822,69825).addRange(69953,69955).addRange(70085,70086).addRange(70110,70111).addRange(70200,70204).addRange(70731,70733),a.addRange(70746,70747).addRange(71106,71109).addRange(71113,71127).addRange(71233,71234).addRange(71484,71486).addRange(72258,72259).addRange(72347,72348).addRange(72353,72354).addRange(72769,72771).addRange(73463,73464).addRange(74864,74868).addRange(92782,92783).addRange(92983,92985).addRange(93847,93848).addRange(121479,121482),e.exports=a},52778:function(e,t,n){const a=n(45927)(64017,64031,64033);a.addRange(13312,19903).addRange(19968,40959).addRange(64014,64015).addRange(64019,64020).addRange(64035,64036).addRange(64039,64041).addRange(131072,173791).addRange(173824,177976).addRange(177984,178205).addRange(178208,183969).addRange(183984,191456).addRange(196608,201546),e.exports=a},22152:function(e,t,n){const a=n(45927)(256,258,260,262,264,266,268,270,272,274,276,278,280,282,284,286,288,290,292,294,296,298,300,302,304,306,308,310,313,315,317,319,321,323,325,327,330,332,334,336,338,340,342,344,346,348,350,352,354,356,358,360,362,364,366,368,370,372,374,379,381,388,418,420,425,428,437,444,452,455,458,461,463,465,467,469,471,473,475,478,480,482,484,486,488,490,492,494,497,500,506,508,510,512,514,516,518,520,522,524,526,528,530,532,534,536,538,540,542,544,546,548,550,552,554,556,558,560,562,577,584,586,588,590,880,882,886,895,902,908,975,984,986,988,990,992,994,996,998,1e3,1002,1004,1006,1012,1015,1120,1122,1124,1126,1128,1130,1132,1134,1136,1138,1140,1142,1144,1146,1148,1150,1152,1162,1164,1166,1168,1170,1172,1174,1176,1178,1180,1182,1184,1186,1188,1190,1192,1194,1196,1198,1200,1202,1204,1206,1208,1210,1212,1214,1219,1221,1223,1225,1227,1229,1232,1234,1236,1238,1240,1242,1244,1246,1248,1250,1252,1254,1256,1258,1260,1262,1264,1266,1268,1270,1272,1274,1276,1278,1280,1282,1284,1286,1288,1290,1292,1294,1296,1298,1300,1302,1304,1306,1308,1310,1312,1314,1316,1318,1320,1322,1324,1326,4295,4301,7680,7682,7684,7686,7688,7690,7692,7694,7696,7698,7700,7702,7704,7706,7708,7710,7712,7714,7716,7718,7720,7722,7724,7726,7728,7730,7732,7734,7736,7738,7740,7742,7744,7746,7748,7750,7752,7754,7756,7758,7760,7762,7764,7766,7768,7770,7772,7774,7776,7778,7780,7782,7784,7786,7788,7790,7792,7794,7796,7798,7800,7802,7804,7806,7808,7810,7812,7814,7816,7818,7820,7822,7824,7826,7828,7838,7840,7842,7844,7846,7848,7850,7852,7854,7856,7858,7860,7862,7864,7866,7868,7870,7872,7874,7876,7878,7880,7882,7884,7886,7888,7890,7892,7894,7896,7898,7900,7902,7904,7906,7908,7910,7912,7914,7916,7918,7920,7922,7924,7926,7928,7930,7932,7934,8025,8027,8029,8031,8450,8455,8469,8484,8486,8488,8517,8579,11360,11367,11369,11371,11378,11381,11394,11396,11398,11400,11402,11404,11406,11408,11410,11412,11414,11416,11418,11420,11422,11424,11426,11428,11430,11432,11434,11436,11438,11440,11442,11444,11446,11448,11450,11452,11454,11456,11458,11460,11462,11464,11466,11468,11470,11472,11474,11476,11478,11480,11482,11484,11486,11488,11490,11499,11501,11506,42560,42562,42564,42566,42568,42570,42572,42574,42576,42578,42580,42582,42584,42586,42588,42590,42592,42594,42596,42598,42600,42602,42604,42624,42626,42628,42630,42632,42634,42636,42638,42640,42642,42644,42646,42648,42650,42786,42788,42790,42792,42794,42796,42798,42802,42804,42806,42808,42810,42812,42814,42816,42818,42820,42822,42824,42826,42828,42830,42832,42834,42836,42838,42840,42842,42844,42846,42848,42850,42852,42854,42856,42858,42860,42862,42873,42875,42880,42882,42884,42886,42891,42893,42896,42898,42902,42904,42906,42908,42910,42912,42914,42916,42918,42920,42934,42936,42938,42940,42942,42944,42946,42953,42960,42966,42968,42997,119964,119970,120134,120778);a.addRange(65,90).addRange(192,214).addRange(216,222).addRange(376,377).addRange(385,386).addRange(390,391).addRange(393,395).addRange(398,401).addRange(403,404).addRange(406,408).addRange(412,413).addRange(415,416).addRange(422,423).addRange(430,431).addRange(433,435).addRange(439,440).addRange(502,504).addRange(570,571).addRange(573,574).addRange(579,582).addRange(904,906).addRange(910,911).addRange(913,929).addRange(931,939).addRange(978,980).addRange(1017,1018).addRange(1021,1071).addRange(1216,1217).addRange(1329,1366).addRange(4256,4293).addRange(5024,5109).addRange(7312,7354).addRange(7357,7359).addRange(7944,7951).addRange(7960,7965).addRange(7976,7983).addRange(7992,7999).addRange(8008,8013).addRange(8040,8047).addRange(8120,8123).addRange(8136,8139).addRange(8152,8155).addRange(8168,8172).addRange(8184,8187).addRange(8459,8461).addRange(8464,8466).addRange(8473,8477).addRange(8490,8493).addRange(8496,8499).addRange(8510,8511).addRange(8544,8559),a.addRange(9398,9423).addRange(11264,11311).addRange(11362,11364).addRange(11373,11376).addRange(11390,11392).addRange(42877,42878).addRange(42922,42926).addRange(42928,42932).addRange(42948,42951).addRange(65313,65338).addRange(66560,66599).addRange(66736,66771).addRange(66928,66938).addRange(66940,66954).addRange(66956,66962).addRange(66964,66965).addRange(68736,68786).addRange(71840,71871).addRange(93760,93791).addRange(119808,119833).addRange(119860,119885).addRange(119912,119937).addRange(119966,119967).addRange(119973,119974).addRange(119977,119980).addRange(119982,119989).addRange(120016,120041).addRange(120068,120069).addRange(120071,120074).addRange(120077,120084).addRange(120086,120092).addRange(120120,120121).addRange(120123,120126).addRange(120128,120132).addRange(120138,120144).addRange(120172,120197).addRange(120224,120249).addRange(120276,120301).addRange(120328,120353).addRange(120380,120405).addRange(120432,120457).addRange(120488,120512).addRange(120546,120570).addRange(120604,120628).addRange(120662,120686).addRange(120720,120744).addRange(125184,125217).addRange(127280,127305).addRange(127312,127337).addRange(127344,127369),e.exports=a},78097:function(e,t,n){const a=n(45927)(6159);a.addRange(6155,6157).addRange(65024,65039).addRange(917760,917999),e.exports=a},12386:function(e,t,n){const a=n(45927)(32,133,160,5760,8239,8287,12288);a.addRange(9,13).addRange(8192,8202).addRange(8232,8233),e.exports=a},5048:function(e,t,n){const a=n(45927)(95,170,181,183,186,748,750,895,908,1369,1471,1479,1791,2042,2045,2482,2519,2556,2558,2620,2641,2654,2768,2929,2972,3024,3031,3165,3517,3530,3542,3716,3749,3782,3840,3893,3895,3897,4038,4295,4301,4696,4800,6103,6823,8025,8027,8029,8126,8276,8305,8319,8417,8450,8455,8469,8484,8486,8488,8526,11559,11565,11631,42963,43052,43259,64318,65137,65139,65143,65145,65147,65149,65343,66045,66272,67592,67644,68159,69415,69826,70006,70108,70206,70280,70480,70487,70855,71236,71945,72263,72349,73018,73648,119970,119995,120134,121461,121476,123214,126500,126503,126521,126523,126530,126535,126537,126539,126548,126551,126553,126555,126557,126559,126564,126590);a.addRange(48,57).addRange(65,90).addRange(97,122).addRange(192,214).addRange(216,246).addRange(248,705).addRange(710,721).addRange(736,740).addRange(768,884).addRange(886,887).addRange(891,893).addRange(902,906).addRange(910,929).addRange(931,1013).addRange(1015,1153).addRange(1155,1159).addRange(1162,1327).addRange(1329,1366).addRange(1376,1416).addRange(1425,1469).addRange(1473,1474).addRange(1476,1477).addRange(1488,1514).addRange(1519,1522).addRange(1552,1562).addRange(1568,1641).addRange(1646,1747).addRange(1749,1756).addRange(1759,1768).addRange(1770,1788).addRange(1808,1866).addRange(1869,1969).addRange(1984,2037).addRange(2048,2093).addRange(2112,2139).addRange(2144,2154).addRange(2160,2183).addRange(2185,2190).addRange(2200,2273).addRange(2275,2403).addRange(2406,2415).addRange(2417,2435).addRange(2437,2444).addRange(2447,2448).addRange(2451,2472).addRange(2474,2480).addRange(2486,2489).addRange(2492,2500).addRange(2503,2504).addRange(2507,2510).addRange(2524,2525),a.addRange(2527,2531).addRange(2534,2545).addRange(2561,2563).addRange(2565,2570).addRange(2575,2576).addRange(2579,2600).addRange(2602,2608).addRange(2610,2611).addRange(2613,2614).addRange(2616,2617).addRange(2622,2626).addRange(2631,2632).addRange(2635,2637).addRange(2649,2652).addRange(2662,2677).addRange(2689,2691).addRange(2693,2701).addRange(2703,2705).addRange(2707,2728).addRange(2730,2736).addRange(2738,2739).addRange(2741,2745).addRange(2748,2757).addRange(2759,2761).addRange(2763,2765).addRange(2784,2787).addRange(2790,2799).addRange(2809,2815).addRange(2817,2819).addRange(2821,2828).addRange(2831,2832).addRange(2835,2856).addRange(2858,2864).addRange(2866,2867).addRange(2869,2873).addRange(2876,2884).addRange(2887,2888).addRange(2891,2893).addRange(2901,2903).addRange(2908,2909).addRange(2911,2915).addRange(2918,2927).addRange(2946,2947).addRange(2949,2954).addRange(2958,2960).addRange(2962,2965).addRange(2969,2970).addRange(2974,2975).addRange(2979,2980).addRange(2984,2986).addRange(2990,3001),a.addRange(3006,3010).addRange(3014,3016).addRange(3018,3021).addRange(3046,3055).addRange(3072,3084).addRange(3086,3088).addRange(3090,3112).addRange(3114,3129).addRange(3132,3140).addRange(3142,3144).addRange(3146,3149).addRange(3157,3158).addRange(3160,3162).addRange(3168,3171).addRange(3174,3183).addRange(3200,3203).addRange(3205,3212).addRange(3214,3216).addRange(3218,3240).addRange(3242,3251).addRange(3253,3257).addRange(3260,3268).addRange(3270,3272).addRange(3274,3277).addRange(3285,3286).addRange(3293,3294).addRange(3296,3299).addRange(3302,3311).addRange(3313,3314).addRange(3328,3340).addRange(3342,3344).addRange(3346,3396).addRange(3398,3400).addRange(3402,3406).addRange(3412,3415).addRange(3423,3427).addRange(3430,3439).addRange(3450,3455).addRange(3457,3459).addRange(3461,3478).addRange(3482,3505).addRange(3507,3515).addRange(3520,3526).addRange(3535,3540).addRange(3544,3551).addRange(3558,3567).addRange(3570,3571).addRange(3585,3642).addRange(3648,3662).addRange(3664,3673).addRange(3713,3714),a.addRange(3718,3722).addRange(3724,3747).addRange(3751,3773).addRange(3776,3780).addRange(3784,3789).addRange(3792,3801).addRange(3804,3807).addRange(3864,3865).addRange(3872,3881).addRange(3902,3911).addRange(3913,3948).addRange(3953,3972).addRange(3974,3991).addRange(3993,4028).addRange(4096,4169).addRange(4176,4253).addRange(4256,4293).addRange(4304,4346).addRange(4348,4680).addRange(4682,4685).addRange(4688,4694).addRange(4698,4701).addRange(4704,4744).addRange(4746,4749).addRange(4752,4784).addRange(4786,4789).addRange(4792,4798).addRange(4802,4805).addRange(4808,4822).addRange(4824,4880).addRange(4882,4885).addRange(4888,4954).addRange(4957,4959).addRange(4969,4977).addRange(4992,5007).addRange(5024,5109).addRange(5112,5117).addRange(5121,5740).addRange(5743,5759).addRange(5761,5786).addRange(5792,5866).addRange(5870,5880).addRange(5888,5909).addRange(5919,5940).addRange(5952,5971).addRange(5984,5996).addRange(5998,6e3).addRange(6002,6003).addRange(6016,6099).addRange(6108,6109).addRange(6112,6121),a.addRange(6155,6157).addRange(6159,6169).addRange(6176,6264).addRange(6272,6314).addRange(6320,6389).addRange(6400,6430).addRange(6432,6443).addRange(6448,6459).addRange(6470,6509).addRange(6512,6516).addRange(6528,6571).addRange(6576,6601).addRange(6608,6618).addRange(6656,6683).addRange(6688,6750).addRange(6752,6780).addRange(6783,6793).addRange(6800,6809).addRange(6832,6845).addRange(6847,6862).addRange(6912,6988).addRange(6992,7001).addRange(7019,7027).addRange(7040,7155).addRange(7168,7223).addRange(7232,7241).addRange(7245,7293).addRange(7296,7304).addRange(7312,7354).addRange(7357,7359).addRange(7376,7378).addRange(7380,7418).addRange(7424,7957).addRange(7960,7965).addRange(7968,8005).addRange(8008,8013).addRange(8016,8023).addRange(8031,8061).addRange(8064,8116).addRange(8118,8124).addRange(8130,8132).addRange(8134,8140).addRange(8144,8147).addRange(8150,8155).addRange(8160,8172).addRange(8178,8180).addRange(8182,8188).addRange(8255,8256).addRange(8336,8348).addRange(8400,8412).addRange(8421,8432),a.addRange(8458,8467).addRange(8472,8477).addRange(8490,8505).addRange(8508,8511).addRange(8517,8521).addRange(8544,8584).addRange(11264,11492).addRange(11499,11507).addRange(11520,11557).addRange(11568,11623).addRange(11647,11670).addRange(11680,11686).addRange(11688,11694).addRange(11696,11702).addRange(11704,11710).addRange(11712,11718).addRange(11720,11726).addRange(11728,11734).addRange(11736,11742).addRange(11744,11775).addRange(12293,12295).addRange(12321,12335).addRange(12337,12341).addRange(12344,12348).addRange(12353,12438).addRange(12441,12442).addRange(12445,12447).addRange(12449,12538).addRange(12540,12543).addRange(12549,12591).addRange(12593,12686).addRange(12704,12735).addRange(12784,12799).addRange(13312,19903).addRange(19968,42124).addRange(42192,42237).addRange(42240,42508).addRange(42512,42539).addRange(42560,42607).addRange(42612,42621).addRange(42623,42737).addRange(42775,42783).addRange(42786,42888).addRange(42891,42954).addRange(42960,42961).addRange(42965,42969).addRange(42994,43047).addRange(43072,43123).addRange(43136,43205).addRange(43216,43225).addRange(43232,43255),a.addRange(43261,43309).addRange(43312,43347).addRange(43360,43388).addRange(43392,43456).addRange(43471,43481).addRange(43488,43518).addRange(43520,43574).addRange(43584,43597).addRange(43600,43609).addRange(43616,43638).addRange(43642,43714).addRange(43739,43741).addRange(43744,43759).addRange(43762,43766).addRange(43777,43782).addRange(43785,43790).addRange(43793,43798).addRange(43808,43814).addRange(43816,43822).addRange(43824,43866).addRange(43868,43881).addRange(43888,44010).addRange(44012,44013).addRange(44016,44025).addRange(44032,55203).addRange(55216,55238).addRange(55243,55291).addRange(63744,64109).addRange(64112,64217).addRange(64256,64262).addRange(64275,64279).addRange(64285,64296).addRange(64298,64310).addRange(64312,64316).addRange(64320,64321).addRange(64323,64324).addRange(64326,64433).addRange(64467,64605).addRange(64612,64829).addRange(64848,64911).addRange(64914,64967).addRange(65008,65017).addRange(65024,65039).addRange(65056,65071).addRange(65075,65076).addRange(65101,65103).addRange(65151,65276).addRange(65296,65305).addRange(65313,65338).addRange(65345,65370).addRange(65382,65470),a.addRange(65474,65479).addRange(65482,65487).addRange(65490,65495).addRange(65498,65500).addRange(65536,65547).addRange(65549,65574).addRange(65576,65594).addRange(65596,65597).addRange(65599,65613).addRange(65616,65629).addRange(65664,65786).addRange(65856,65908).addRange(66176,66204).addRange(66208,66256).addRange(66304,66335).addRange(66349,66378).addRange(66384,66426).addRange(66432,66461).addRange(66464,66499).addRange(66504,66511).addRange(66513,66517).addRange(66560,66717).addRange(66720,66729).addRange(66736,66771).addRange(66776,66811).addRange(66816,66855).addRange(66864,66915).addRange(66928,66938).addRange(66940,66954).addRange(66956,66962).addRange(66964,66965).addRange(66967,66977).addRange(66979,66993).addRange(66995,67001).addRange(67003,67004).addRange(67072,67382).addRange(67392,67413).addRange(67424,67431).addRange(67456,67461).addRange(67463,67504).addRange(67506,67514).addRange(67584,67589).addRange(67594,67637).addRange(67639,67640).addRange(67647,67669).addRange(67680,67702).addRange(67712,67742).addRange(67808,67826).addRange(67828,67829).addRange(67840,67861).addRange(67872,67897),a.addRange(67968,68023).addRange(68030,68031).addRange(68096,68099).addRange(68101,68102).addRange(68108,68115).addRange(68117,68119).addRange(68121,68149).addRange(68152,68154).addRange(68192,68220).addRange(68224,68252).addRange(68288,68295).addRange(68297,68326).addRange(68352,68405).addRange(68416,68437).addRange(68448,68466).addRange(68480,68497).addRange(68608,68680).addRange(68736,68786).addRange(68800,68850).addRange(68864,68903).addRange(68912,68921).addRange(69248,69289).addRange(69291,69292).addRange(69296,69297).addRange(69376,69404).addRange(69424,69456).addRange(69488,69509).addRange(69552,69572).addRange(69600,69622).addRange(69632,69702).addRange(69734,69749).addRange(69759,69818).addRange(69840,69864).addRange(69872,69881).addRange(69888,69940).addRange(69942,69951).addRange(69956,69959).addRange(69968,70003).addRange(70016,70084).addRange(70089,70092).addRange(70094,70106).addRange(70144,70161).addRange(70163,70199).addRange(70272,70278).addRange(70282,70285).addRange(70287,70301).addRange(70303,70312).addRange(70320,70378).addRange(70384,70393).addRange(70400,70403).addRange(70405,70412),a.addRange(70415,70416).addRange(70419,70440).addRange(70442,70448).addRange(70450,70451).addRange(70453,70457).addRange(70459,70468).addRange(70471,70472).addRange(70475,70477).addRange(70493,70499).addRange(70502,70508).addRange(70512,70516).addRange(70656,70730).addRange(70736,70745).addRange(70750,70753).addRange(70784,70853).addRange(70864,70873).addRange(71040,71093).addRange(71096,71104).addRange(71128,71133).addRange(71168,71232).addRange(71248,71257).addRange(71296,71352).addRange(71360,71369).addRange(71424,71450).addRange(71453,71467).addRange(71472,71481).addRange(71488,71494).addRange(71680,71738).addRange(71840,71913).addRange(71935,71942).addRange(71948,71955).addRange(71957,71958).addRange(71960,71989).addRange(71991,71992).addRange(71995,72003).addRange(72016,72025).addRange(72096,72103).addRange(72106,72151).addRange(72154,72161).addRange(72163,72164).addRange(72192,72254).addRange(72272,72345).addRange(72368,72440).addRange(72704,72712).addRange(72714,72758).addRange(72760,72768).addRange(72784,72793).addRange(72818,72847).addRange(72850,72871).addRange(72873,72886).addRange(72960,72966),a.addRange(72968,72969).addRange(72971,73014).addRange(73020,73021).addRange(73023,73031).addRange(73040,73049).addRange(73056,73061).addRange(73063,73064).addRange(73066,73102).addRange(73104,73105).addRange(73107,73112).addRange(73120,73129).addRange(73440,73462).addRange(73728,74649).addRange(74752,74862).addRange(74880,75075).addRange(77712,77808).addRange(77824,78894).addRange(82944,83526).addRange(92160,92728).addRange(92736,92766).addRange(92768,92777).addRange(92784,92862).addRange(92864,92873).addRange(92880,92909).addRange(92912,92916).addRange(92928,92982).addRange(92992,92995).addRange(93008,93017).addRange(93027,93047).addRange(93053,93071).addRange(93760,93823).addRange(93952,94026).addRange(94031,94087).addRange(94095,94111).addRange(94176,94177).addRange(94179,94180).addRange(94192,94193).addRange(94208,100343).addRange(100352,101589).addRange(101632,101640).addRange(110576,110579).addRange(110581,110587).addRange(110589,110590).addRange(110592,110882).addRange(110928,110930).addRange(110948,110951).addRange(110960,111355).addRange(113664,113770).addRange(113776,113788).addRange(113792,113800).addRange(113808,113817),a.addRange(113821,113822).addRange(118528,118573).addRange(118576,118598).addRange(119141,119145).addRange(119149,119154).addRange(119163,119170).addRange(119173,119179).addRange(119210,119213).addRange(119362,119364).addRange(119808,119892).addRange(119894,119964).addRange(119966,119967).addRange(119973,119974).addRange(119977,119980).addRange(119982,119993).addRange(119997,120003).addRange(120005,120069).addRange(120071,120074).addRange(120077,120084).addRange(120086,120092).addRange(120094,120121).addRange(120123,120126).addRange(120128,120132).addRange(120138,120144).addRange(120146,120485).addRange(120488,120512).addRange(120514,120538).addRange(120540,120570).addRange(120572,120596).addRange(120598,120628).addRange(120630,120654).addRange(120656,120686).addRange(120688,120712).addRange(120714,120744).addRange(120746,120770).addRange(120772,120779).addRange(120782,120831).addRange(121344,121398).addRange(121403,121452).addRange(121499,121503).addRange(121505,121519).addRange(122624,122654).addRange(122880,122886).addRange(122888,122904).addRange(122907,122913).addRange(122915,122916).addRange(122918,122922).addRange(123136,123180).addRange(123184,123197).addRange(123200,123209).addRange(123536,123566),a.addRange(123584,123641).addRange(124896,124902).addRange(124904,124907).addRange(124909,124910).addRange(124912,124926).addRange(124928,125124).addRange(125136,125142).addRange(125184,125259).addRange(125264,125273).addRange(126464,126467).addRange(126469,126495).addRange(126497,126498).addRange(126505,126514).addRange(126516,126519).addRange(126541,126543).addRange(126545,126546).addRange(126561,126562).addRange(126567,126570).addRange(126572,126578).addRange(126580,126583).addRange(126585,126588).addRange(126592,126601).addRange(126603,126619).addRange(126625,126627).addRange(126629,126633).addRange(126635,126651).addRange(130032,130041).addRange(131072,173791).addRange(173824,177976).addRange(177984,178205).addRange(178208,183969).addRange(183984,191456).addRange(194560,195101).addRange(196608,201546).addRange(917760,917999),e.exports=a},84707:function(e,t,n){const a=n(45927)(170,181,186,748,750,895,902,908,1369,1749,1791,1808,1969,2042,2074,2084,2088,2365,2384,2482,2493,2510,2556,2654,2749,2768,2809,2877,2929,2947,2972,3024,3133,3165,3200,3261,3389,3406,3517,3634,3716,3749,3762,3773,3782,3840,4159,4193,4238,4295,4301,4696,4800,6103,6108,6314,6823,7418,8025,8027,8029,8126,8305,8319,8450,8455,8469,8484,8486,8488,8526,11559,11565,11631,42963,43259,43471,43642,43697,43712,43714,64285,64318,65137,65139,65143,65145,65147,65149,67592,67644,68096,69415,69749,69956,69959,70006,70106,70108,70280,70461,70480,70855,71236,71352,71945,71999,72001,72161,72163,72192,72250,72272,72349,72768,73030,73112,73648,94032,94179,119970,119995,120134,123214,125259,126500,126503,126521,126523,126530,126535,126537,126539,126548,126551,126553,126555,126557,126559,126564,126590);a.addRange(65,90).addRange(97,122).addRange(192,214).addRange(216,246).addRange(248,705).addRange(710,721).addRange(736,740).addRange(880,884).addRange(886,887).addRange(891,893).addRange(904,906).addRange(910,929).addRange(931,1013).addRange(1015,1153).addRange(1162,1327).addRange(1329,1366).addRange(1376,1416).addRange(1488,1514).addRange(1519,1522).addRange(1568,1610).addRange(1646,1647).addRange(1649,1747).addRange(1765,1766).addRange(1774,1775).addRange(1786,1788).addRange(1810,1839).addRange(1869,1957).addRange(1994,2026).addRange(2036,2037).addRange(2048,2069).addRange(2112,2136).addRange(2144,2154).addRange(2160,2183).addRange(2185,2190).addRange(2208,2249).addRange(2308,2361).addRange(2392,2401).addRange(2417,2432).addRange(2437,2444).addRange(2447,2448).addRange(2451,2472).addRange(2474,2480).addRange(2486,2489).addRange(2524,2525).addRange(2527,2529).addRange(2544,2545).addRange(2565,2570).addRange(2575,2576).addRange(2579,2600).addRange(2602,2608).addRange(2610,2611),a.addRange(2613,2614).addRange(2616,2617).addRange(2649,2652).addRange(2674,2676).addRange(2693,2701).addRange(2703,2705).addRange(2707,2728).addRange(2730,2736).addRange(2738,2739).addRange(2741,2745).addRange(2784,2785).addRange(2821,2828).addRange(2831,2832).addRange(2835,2856).addRange(2858,2864).addRange(2866,2867).addRange(2869,2873).addRange(2908,2909).addRange(2911,2913).addRange(2949,2954).addRange(2958,2960).addRange(2962,2965).addRange(2969,2970).addRange(2974,2975).addRange(2979,2980).addRange(2984,2986).addRange(2990,3001).addRange(3077,3084).addRange(3086,3088).addRange(3090,3112).addRange(3114,3129).addRange(3160,3162).addRange(3168,3169).addRange(3205,3212).addRange(3214,3216).addRange(3218,3240).addRange(3242,3251).addRange(3253,3257).addRange(3293,3294).addRange(3296,3297).addRange(3313,3314).addRange(3332,3340).addRange(3342,3344).addRange(3346,3386).addRange(3412,3414).addRange(3423,3425).addRange(3450,3455).addRange(3461,3478).addRange(3482,3505).addRange(3507,3515).addRange(3520,3526),a.addRange(3585,3632).addRange(3648,3654).addRange(3713,3714).addRange(3718,3722).addRange(3724,3747).addRange(3751,3760).addRange(3776,3780).addRange(3804,3807).addRange(3904,3911).addRange(3913,3948).addRange(3976,3980).addRange(4096,4138).addRange(4176,4181).addRange(4186,4189).addRange(4197,4198).addRange(4206,4208).addRange(4213,4225).addRange(4256,4293).addRange(4304,4346).addRange(4348,4680).addRange(4682,4685).addRange(4688,4694).addRange(4698,4701).addRange(4704,4744).addRange(4746,4749).addRange(4752,4784).addRange(4786,4789).addRange(4792,4798).addRange(4802,4805).addRange(4808,4822).addRange(4824,4880).addRange(4882,4885).addRange(4888,4954).addRange(4992,5007).addRange(5024,5109).addRange(5112,5117).addRange(5121,5740).addRange(5743,5759).addRange(5761,5786).addRange(5792,5866).addRange(5870,5880).addRange(5888,5905).addRange(5919,5937).addRange(5952,5969).addRange(5984,5996).addRange(5998,6e3).addRange(6016,6067).addRange(6176,6264).addRange(6272,6312).addRange(6320,6389).addRange(6400,6430),a.addRange(6480,6509).addRange(6512,6516).addRange(6528,6571).addRange(6576,6601).addRange(6656,6678).addRange(6688,6740).addRange(6917,6963).addRange(6981,6988).addRange(7043,7072).addRange(7086,7087).addRange(7098,7141).addRange(7168,7203).addRange(7245,7247).addRange(7258,7293).addRange(7296,7304).addRange(7312,7354).addRange(7357,7359).addRange(7401,7404).addRange(7406,7411).addRange(7413,7414).addRange(7424,7615).addRange(7680,7957).addRange(7960,7965).addRange(7968,8005).addRange(8008,8013).addRange(8016,8023).addRange(8031,8061).addRange(8064,8116).addRange(8118,8124).addRange(8130,8132).addRange(8134,8140).addRange(8144,8147).addRange(8150,8155).addRange(8160,8172).addRange(8178,8180).addRange(8182,8188).addRange(8336,8348).addRange(8458,8467).addRange(8472,8477).addRange(8490,8505).addRange(8508,8511).addRange(8517,8521).addRange(8544,8584).addRange(11264,11492).addRange(11499,11502).addRange(11506,11507).addRange(11520,11557).addRange(11568,11623).addRange(11648,11670).addRange(11680,11686).addRange(11688,11694),a.addRange(11696,11702).addRange(11704,11710).addRange(11712,11718).addRange(11720,11726).addRange(11728,11734).addRange(11736,11742).addRange(12293,12295).addRange(12321,12329).addRange(12337,12341).addRange(12344,12348).addRange(12353,12438).addRange(12445,12447).addRange(12449,12538).addRange(12540,12543).addRange(12549,12591).addRange(12593,12686).addRange(12704,12735).addRange(12784,12799).addRange(13312,19903).addRange(19968,42124).addRange(42192,42237).addRange(42240,42508).addRange(42512,42527).addRange(42538,42539).addRange(42560,42606).addRange(42623,42653).addRange(42656,42735).addRange(42775,42783).addRange(42786,42888).addRange(42891,42954).addRange(42960,42961).addRange(42965,42969).addRange(42994,43009).addRange(43011,43013).addRange(43015,43018).addRange(43020,43042).addRange(43072,43123).addRange(43138,43187).addRange(43250,43255).addRange(43261,43262).addRange(43274,43301).addRange(43312,43334).addRange(43360,43388).addRange(43396,43442).addRange(43488,43492).addRange(43494,43503).addRange(43514,43518).addRange(43520,43560).addRange(43584,43586).addRange(43588,43595).addRange(43616,43638),a.addRange(43646,43695).addRange(43701,43702).addRange(43705,43709).addRange(43739,43741).addRange(43744,43754).addRange(43762,43764).addRange(43777,43782).addRange(43785,43790).addRange(43793,43798).addRange(43808,43814).addRange(43816,43822).addRange(43824,43866).addRange(43868,43881).addRange(43888,44002).addRange(44032,55203).addRange(55216,55238).addRange(55243,55291).addRange(63744,64109).addRange(64112,64217).addRange(64256,64262).addRange(64275,64279).addRange(64287,64296).addRange(64298,64310).addRange(64312,64316).addRange(64320,64321).addRange(64323,64324).addRange(64326,64433).addRange(64467,64605).addRange(64612,64829).addRange(64848,64911).addRange(64914,64967).addRange(65008,65017).addRange(65151,65276).addRange(65313,65338).addRange(65345,65370).addRange(65382,65437).addRange(65440,65470).addRange(65474,65479).addRange(65482,65487).addRange(65490,65495).addRange(65498,65500).addRange(65536,65547).addRange(65549,65574).addRange(65576,65594).addRange(65596,65597).addRange(65599,65613).addRange(65616,65629).addRange(65664,65786).addRange(65856,65908).addRange(66176,66204).addRange(66208,66256),a.addRange(66304,66335).addRange(66349,66378).addRange(66384,66421).addRange(66432,66461).addRange(66464,66499).addRange(66504,66511).addRange(66513,66517).addRange(66560,66717).addRange(66736,66771).addRange(66776,66811).addRange(66816,66855).addRange(66864,66915).addRange(66928,66938).addRange(66940,66954).addRange(66956,66962).addRange(66964,66965).addRange(66967,66977).addRange(66979,66993).addRange(66995,67001).addRange(67003,67004).addRange(67072,67382).addRange(67392,67413).addRange(67424,67431).addRange(67456,67461).addRange(67463,67504).addRange(67506,67514).addRange(67584,67589).addRange(67594,67637).addRange(67639,67640).addRange(67647,67669).addRange(67680,67702).addRange(67712,67742).addRange(67808,67826).addRange(67828,67829).addRange(67840,67861).addRange(67872,67897).addRange(67968,68023).addRange(68030,68031).addRange(68112,68115).addRange(68117,68119).addRange(68121,68149).addRange(68192,68220).addRange(68224,68252).addRange(68288,68295).addRange(68297,68324).addRange(68352,68405).addRange(68416,68437).addRange(68448,68466).addRange(68480,68497).addRange(68608,68680).addRange(68736,68786),a.addRange(68800,68850).addRange(68864,68899).addRange(69248,69289).addRange(69296,69297).addRange(69376,69404).addRange(69424,69445).addRange(69488,69505).addRange(69552,69572).addRange(69600,69622).addRange(69635,69687).addRange(69745,69746).addRange(69763,69807).addRange(69840,69864).addRange(69891,69926).addRange(69968,70002).addRange(70019,70066).addRange(70081,70084).addRange(70144,70161).addRange(70163,70187).addRange(70272,70278).addRange(70282,70285).addRange(70287,70301).addRange(70303,70312).addRange(70320,70366).addRange(70405,70412).addRange(70415,70416).addRange(70419,70440).addRange(70442,70448).addRange(70450,70451).addRange(70453,70457).addRange(70493,70497).addRange(70656,70708).addRange(70727,70730).addRange(70751,70753).addRange(70784,70831).addRange(70852,70853).addRange(71040,71086).addRange(71128,71131).addRange(71168,71215).addRange(71296,71338).addRange(71424,71450).addRange(71488,71494).addRange(71680,71723).addRange(71840,71903).addRange(71935,71942).addRange(71948,71955).addRange(71957,71958).addRange(71960,71983).addRange(72096,72103).addRange(72106,72144).addRange(72203,72242),a.addRange(72284,72329).addRange(72368,72440).addRange(72704,72712).addRange(72714,72750).addRange(72818,72847).addRange(72960,72966).addRange(72968,72969).addRange(72971,73008).addRange(73056,73061).addRange(73063,73064).addRange(73066,73097).addRange(73440,73458).addRange(73728,74649).addRange(74752,74862).addRange(74880,75075).addRange(77712,77808).addRange(77824,78894).addRange(82944,83526).addRange(92160,92728).addRange(92736,92766).addRange(92784,92862).addRange(92880,92909).addRange(92928,92975).addRange(92992,92995).addRange(93027,93047).addRange(93053,93071).addRange(93760,93823).addRange(93952,94026).addRange(94099,94111).addRange(94176,94177).addRange(94208,100343).addRange(100352,101589).addRange(101632,101640).addRange(110576,110579).addRange(110581,110587).addRange(110589,110590).addRange(110592,110882).addRange(110928,110930).addRange(110948,110951).addRange(110960,111355).addRange(113664,113770).addRange(113776,113788).addRange(113792,113800).addRange(113808,113817).addRange(119808,119892).addRange(119894,119964).addRange(119966,119967).addRange(119973,119974).addRange(119977,119980).addRange(119982,119993).addRange(119997,120003),a.addRange(120005,120069).addRange(120071,120074).addRange(120077,120084).addRange(120086,120092).addRange(120094,120121).addRange(120123,120126).addRange(120128,120132).addRange(120138,120144).addRange(120146,120485).addRange(120488,120512).addRange(120514,120538).addRange(120540,120570).addRange(120572,120596).addRange(120598,120628).addRange(120630,120654).addRange(120656,120686).addRange(120688,120712).addRange(120714,120744).addRange(120746,120770).addRange(120772,120779).addRange(122624,122654).addRange(123136,123180).addRange(123191,123197).addRange(123536,123565).addRange(123584,123627).addRange(124896,124902).addRange(124904,124907).addRange(124909,124910).addRange(124912,124926).addRange(124928,125124).addRange(125184,125251).addRange(126464,126467).addRange(126469,126495).addRange(126497,126498).addRange(126505,126514).addRange(126516,126519).addRange(126541,126543).addRange(126545,126546).addRange(126561,126562).addRange(126567,126570).addRange(126572,126578).addRange(126580,126583).addRange(126585,126588).addRange(126592,126601).addRange(126603,126619).addRange(126625,126627).addRange(126629,126633).addRange(126635,126651).addRange(131072,173791).addRange(173824,177976).addRange(177984,178205),a.addRange(178208,183969).addRange(183984,191456).addRange(194560,195101).addRange(196608,201546),e.exports=a},65917:function(e,t,n){const a=n(45927)(181,895,902,908,4295,4301,8025,8027,8029,8126,8450,8455,8469,8484,8486,8488,8505,8526,11559,11565,42963,43002,119970,119995,120134);a.addRange(65,90).addRange(97,122).addRange(192,214).addRange(216,246).addRange(248,442).addRange(444,447).addRange(452,659).addRange(661,687).addRange(880,883).addRange(886,887).addRange(891,893).addRange(904,906).addRange(910,929).addRange(931,1013).addRange(1015,1153).addRange(1162,1327).addRange(1329,1366).addRange(1376,1416).addRange(4256,4293).addRange(4304,4346).addRange(4349,4351).addRange(5024,5109).addRange(5112,5117).addRange(7296,7304).addRange(7312,7354).addRange(7357,7359).addRange(7424,7467).addRange(7531,7543).addRange(7545,7578).addRange(7680,7957).addRange(7960,7965).addRange(7968,8005).addRange(8008,8013).addRange(8016,8023).addRange(8031,8061).addRange(8064,8116).addRange(8118,8124).addRange(8130,8132).addRange(8134,8140).addRange(8144,8147).addRange(8150,8155).addRange(8160,8172).addRange(8178,8180).addRange(8182,8188).addRange(8458,8467).addRange(8473,8477).addRange(8490,8493).addRange(8495,8500).addRange(8508,8511).addRange(8517,8521).addRange(8579,8580),a.addRange(11264,11387).addRange(11390,11492).addRange(11499,11502).addRange(11506,11507).addRange(11520,11557).addRange(42560,42605).addRange(42624,42651).addRange(42786,42863).addRange(42865,42887).addRange(42891,42894).addRange(42896,42954).addRange(42960,42961).addRange(42965,42969).addRange(42997,42998).addRange(43824,43866).addRange(43872,43880).addRange(43888,43967).addRange(64256,64262).addRange(64275,64279).addRange(65313,65338).addRange(65345,65370).addRange(66560,66639).addRange(66736,66771).addRange(66776,66811).addRange(66928,66938).addRange(66940,66954).addRange(66956,66962).addRange(66964,66965).addRange(66967,66977).addRange(66979,66993).addRange(66995,67001).addRange(67003,67004).addRange(68736,68786).addRange(68800,68850).addRange(71840,71903).addRange(93760,93823).addRange(119808,119892).addRange(119894,119964).addRange(119966,119967).addRange(119973,119974).addRange(119977,119980).addRange(119982,119993).addRange(119997,120003).addRange(120005,120069).addRange(120071,120074).addRange(120077,120084).addRange(120086,120092).addRange(120094,120121).addRange(120123,120126).addRange(120128,120132).addRange(120138,120144),a.addRange(120146,120485).addRange(120488,120512).addRange(120514,120538).addRange(120540,120570).addRange(120572,120596).addRange(120598,120628).addRange(120630,120654).addRange(120656,120686).addRange(120688,120712).addRange(120714,120744).addRange(120746,120770).addRange(120772,120779).addRange(122624,122633).addRange(122635,122654).addRange(125184,125251),e.exports=a},38684:function(e,t,n){const a=n(45927)(41,93,125,3899,3901,5788,8262,8318,8334,8969,8971,9002,10089,10091,10093,10095,10097,10099,10101,10182,10215,10217,10219,10221,10223,10628,10630,10632,10634,10636,10638,10640,10642,10644,10646,10648,10713,10715,10749,11811,11813,11815,11817,11862,11864,11866,11868,12297,12299,12301,12303,12305,12309,12311,12313,12315,64830,65048,65078,65080,65082,65084,65086,65088,65090,65092,65096,65114,65116,65118,65289,65341,65373,65376,65379);a.addRange(12318,12319),e.exports=a},70515:function(e,t,n){const a=n(45927)(95,8276,65343);a.addRange(8255,8256).addRange(65075,65076).addRange(65101,65103),e.exports=a},13630:function(e,t,n){const a=n(45927)();a.addRange(0,31).addRange(127,159),e.exports=a},82132:function(e,t,n){const a=n(45927)(36,1423,1547,2555,2801,3065,3647,6107,43064,65020,65129,65284,123647,126128);a.addRange(162,165).addRange(2046,2047).addRange(2546,2547).addRange(8352,8384).addRange(65504,65505).addRange(65509,65510).addRange(73693,73696),e.exports=a},51233:function(e,t,n){const a=n(45927)(45,1418,1470,5120,6150,11799,11802,11840,11869,12316,12336,12448,65112,65123,65293,69293);a.addRange(8208,8213).addRange(11834,11835).addRange(65073,65074),e.exports=a},75426:function(e,t,n){const a=n(45927)();a.addRange(48,57).addRange(1632,1641).addRange(1776,1785).addRange(1984,1993).addRange(2406,2415).addRange(2534,2543).addRange(2662,2671).addRange(2790,2799).addRange(2918,2927).addRange(3046,3055).addRange(3174,3183).addRange(3302,3311).addRange(3430,3439).addRange(3558,3567).addRange(3664,3673).addRange(3792,3801).addRange(3872,3881).addRange(4160,4169).addRange(4240,4249).addRange(6112,6121).addRange(6160,6169).addRange(6470,6479).addRange(6608,6617).addRange(6784,6793).addRange(6800,6809).addRange(6992,7001).addRange(7088,7097).addRange(7232,7241).addRange(7248,7257).addRange(42528,42537).addRange(43216,43225).addRange(43264,43273).addRange(43472,43481).addRange(43504,43513).addRange(43600,43609).addRange(44016,44025).addRange(65296,65305).addRange(66720,66729).addRange(68912,68921).addRange(69734,69743).addRange(69872,69881).addRange(69942,69951).addRange(70096,70105).addRange(70384,70393).addRange(70736,70745).addRange(70864,70873).addRange(71248,71257).addRange(71360,71369).addRange(71472,71481).addRange(71904,71913).addRange(72016,72025),a.addRange(72784,72793).addRange(73040,73049).addRange(73120,73129).addRange(92768,92777).addRange(92864,92873).addRange(93008,93017).addRange(120782,120831).addRange(123200,123209).addRange(123632,123641).addRange(125264,125273).addRange(130032,130041),e.exports=a},67148:function(e,t,n){const a=n(45927)(6846);a.addRange(1160,1161).addRange(8413,8416).addRange(8418,8420).addRange(42608,42610),e.exports=a},5656:function(e,t,n){const a=n(45927)(187,8217,8221,8250,11779,11781,11786,11789,11805,11809);e.exports=a},65364:function(e,t,n){const a=n(45927)(173,1564,1757,1807,2274,6158,65279,69821,69837,917505);a.addRange(1536,1541).addRange(2192,2193).addRange(8203,8207).addRange(8234,8238).addRange(8288,8292).addRange(8294,8303).addRange(65529,65531).addRange(78896,78904).addRange(113824,113827).addRange(119155,119162).addRange(917536,917631),e.exports=a},31740:function(e,t,n){const a=n(45927)(171,8216,8223,8249,11778,11780,11785,11788,11804,11808);a.addRange(8219,8220),e.exports=a},52517:function(e,t,n){const a=n(45927)(170,181,186,748,750,895,902,908,1369,1749,1791,1808,1969,2042,2074,2084,2088,2365,2384,2482,2493,2510,2556,2654,2749,2768,2809,2877,2929,2947,2972,3024,3133,3165,3200,3261,3389,3406,3517,3716,3749,3773,3782,3840,4159,4193,4238,4295,4301,4696,4800,6103,6108,6314,6823,7418,8025,8027,8029,8126,8305,8319,8450,8455,8469,8484,8486,8488,8526,11559,11565,11631,11823,42963,43259,43471,43642,43697,43712,43714,64285,64318,67592,67644,68096,69415,69749,69956,69959,70006,70106,70108,70280,70461,70480,70855,71236,71352,71945,71999,72001,72161,72163,72192,72250,72272,72349,72768,73030,73112,73648,94032,94179,119970,119995,120134,123214,125259,126500,126503,126521,126523,126530,126535,126537,126539,126548,126551,126553,126555,126557,126559,126564,126590);a.addRange(65,90).addRange(97,122).addRange(192,214).addRange(216,246).addRange(248,705).addRange(710,721).addRange(736,740).addRange(880,884).addRange(886,887).addRange(890,893).addRange(904,906).addRange(910,929).addRange(931,1013).addRange(1015,1153).addRange(1162,1327).addRange(1329,1366).addRange(1376,1416).addRange(1488,1514).addRange(1519,1522).addRange(1568,1610).addRange(1646,1647).addRange(1649,1747).addRange(1765,1766).addRange(1774,1775).addRange(1786,1788).addRange(1810,1839).addRange(1869,1957).addRange(1994,2026).addRange(2036,2037).addRange(2048,2069).addRange(2112,2136).addRange(2144,2154).addRange(2160,2183).addRange(2185,2190).addRange(2208,2249).addRange(2308,2361).addRange(2392,2401).addRange(2417,2432).addRange(2437,2444).addRange(2447,2448).addRange(2451,2472).addRange(2474,2480).addRange(2486,2489).addRange(2524,2525).addRange(2527,2529).addRange(2544,2545).addRange(2565,2570).addRange(2575,2576).addRange(2579,2600).addRange(2602,2608).addRange(2610,2611),a.addRange(2613,2614).addRange(2616,2617).addRange(2649,2652).addRange(2674,2676).addRange(2693,2701).addRange(2703,2705).addRange(2707,2728).addRange(2730,2736).addRange(2738,2739).addRange(2741,2745).addRange(2784,2785).addRange(2821,2828).addRange(2831,2832).addRange(2835,2856).addRange(2858,2864).addRange(2866,2867).addRange(2869,2873).addRange(2908,2909).addRange(2911,2913).addRange(2949,2954).addRange(2958,2960).addRange(2962,2965).addRange(2969,2970).addRange(2974,2975).addRange(2979,2980).addRange(2984,2986).addRange(2990,3001).addRange(3077,3084).addRange(3086,3088).addRange(3090,3112).addRange(3114,3129).addRange(3160,3162).addRange(3168,3169).addRange(3205,3212).addRange(3214,3216).addRange(3218,3240).addRange(3242,3251).addRange(3253,3257).addRange(3293,3294).addRange(3296,3297).addRange(3313,3314).addRange(3332,3340).addRange(3342,3344).addRange(3346,3386).addRange(3412,3414).addRange(3423,3425).addRange(3450,3455).addRange(3461,3478).addRange(3482,3505).addRange(3507,3515).addRange(3520,3526),a.addRange(3585,3632).addRange(3634,3635).addRange(3648,3654).addRange(3713,3714).addRange(3718,3722).addRange(3724,3747).addRange(3751,3760).addRange(3762,3763).addRange(3776,3780).addRange(3804,3807).addRange(3904,3911).addRange(3913,3948).addRange(3976,3980).addRange(4096,4138).addRange(4176,4181).addRange(4186,4189).addRange(4197,4198).addRange(4206,4208).addRange(4213,4225).addRange(4256,4293).addRange(4304,4346).addRange(4348,4680).addRange(4682,4685).addRange(4688,4694).addRange(4698,4701).addRange(4704,4744).addRange(4746,4749).addRange(4752,4784).addRange(4786,4789).addRange(4792,4798).addRange(4802,4805).addRange(4808,4822).addRange(4824,4880).addRange(4882,4885).addRange(4888,4954).addRange(4992,5007).addRange(5024,5109).addRange(5112,5117).addRange(5121,5740).addRange(5743,5759).addRange(5761,5786).addRange(5792,5866).addRange(5873,5880).addRange(5888,5905).addRange(5919,5937).addRange(5952,5969).addRange(5984,5996).addRange(5998,6e3).addRange(6016,6067).addRange(6176,6264).addRange(6272,6276),a.addRange(6279,6312).addRange(6320,6389).addRange(6400,6430).addRange(6480,6509).addRange(6512,6516).addRange(6528,6571).addRange(6576,6601).addRange(6656,6678).addRange(6688,6740).addRange(6917,6963).addRange(6981,6988).addRange(7043,7072).addRange(7086,7087).addRange(7098,7141).addRange(7168,7203).addRange(7245,7247).addRange(7258,7293).addRange(7296,7304).addRange(7312,7354).addRange(7357,7359).addRange(7401,7404).addRange(7406,7411).addRange(7413,7414).addRange(7424,7615).addRange(7680,7957).addRange(7960,7965).addRange(7968,8005).addRange(8008,8013).addRange(8016,8023).addRange(8031,8061).addRange(8064,8116).addRange(8118,8124).addRange(8130,8132).addRange(8134,8140).addRange(8144,8147).addRange(8150,8155).addRange(8160,8172).addRange(8178,8180).addRange(8182,8188).addRange(8336,8348).addRange(8458,8467).addRange(8473,8477).addRange(8490,8493).addRange(8495,8505).addRange(8508,8511).addRange(8517,8521).addRange(8579,8580).addRange(11264,11492).addRange(11499,11502).addRange(11506,11507).addRange(11520,11557),a.addRange(11568,11623).addRange(11648,11670).addRange(11680,11686).addRange(11688,11694).addRange(11696,11702).addRange(11704,11710).addRange(11712,11718).addRange(11720,11726).addRange(11728,11734).addRange(11736,11742).addRange(12293,12294).addRange(12337,12341).addRange(12347,12348).addRange(12353,12438).addRange(12445,12447).addRange(12449,12538).addRange(12540,12543).addRange(12549,12591).addRange(12593,12686).addRange(12704,12735).addRange(12784,12799).addRange(13312,19903).addRange(19968,42124).addRange(42192,42237).addRange(42240,42508).addRange(42512,42527).addRange(42538,42539).addRange(42560,42606).addRange(42623,42653).addRange(42656,42725).addRange(42775,42783).addRange(42786,42888).addRange(42891,42954).addRange(42960,42961).addRange(42965,42969).addRange(42994,43009).addRange(43011,43013).addRange(43015,43018).addRange(43020,43042).addRange(43072,43123).addRange(43138,43187).addRange(43250,43255).addRange(43261,43262).addRange(43274,43301).addRange(43312,43334).addRange(43360,43388).addRange(43396,43442).addRange(43488,43492).addRange(43494,43503).addRange(43514,43518).addRange(43520,43560),a.addRange(43584,43586).addRange(43588,43595).addRange(43616,43638).addRange(43646,43695).addRange(43701,43702).addRange(43705,43709).addRange(43739,43741).addRange(43744,43754).addRange(43762,43764).addRange(43777,43782).addRange(43785,43790).addRange(43793,43798).addRange(43808,43814).addRange(43816,43822).addRange(43824,43866).addRange(43868,43881).addRange(43888,44002).addRange(44032,55203).addRange(55216,55238).addRange(55243,55291).addRange(63744,64109).addRange(64112,64217).addRange(64256,64262).addRange(64275,64279).addRange(64287,64296).addRange(64298,64310).addRange(64312,64316).addRange(64320,64321).addRange(64323,64324).addRange(64326,64433).addRange(64467,64829).addRange(64848,64911).addRange(64914,64967).addRange(65008,65019).addRange(65136,65140).addRange(65142,65276).addRange(65313,65338).addRange(65345,65370).addRange(65382,65470).addRange(65474,65479).addRange(65482,65487).addRange(65490,65495).addRange(65498,65500).addRange(65536,65547).addRange(65549,65574).addRange(65576,65594).addRange(65596,65597).addRange(65599,65613).addRange(65616,65629).addRange(65664,65786).addRange(66176,66204),a.addRange(66208,66256).addRange(66304,66335).addRange(66349,66368).addRange(66370,66377).addRange(66384,66421).addRange(66432,66461).addRange(66464,66499).addRange(66504,66511).addRange(66560,66717).addRange(66736,66771).addRange(66776,66811).addRange(66816,66855).addRange(66864,66915).addRange(66928,66938).addRange(66940,66954).addRange(66956,66962).addRange(66964,66965).addRange(66967,66977).addRange(66979,66993).addRange(66995,67001).addRange(67003,67004).addRange(67072,67382).addRange(67392,67413).addRange(67424,67431).addRange(67456,67461).addRange(67463,67504).addRange(67506,67514).addRange(67584,67589).addRange(67594,67637).addRange(67639,67640).addRange(67647,67669).addRange(67680,67702).addRange(67712,67742).addRange(67808,67826).addRange(67828,67829).addRange(67840,67861).addRange(67872,67897).addRange(67968,68023).addRange(68030,68031).addRange(68112,68115).addRange(68117,68119).addRange(68121,68149).addRange(68192,68220).addRange(68224,68252).addRange(68288,68295).addRange(68297,68324).addRange(68352,68405).addRange(68416,68437).addRange(68448,68466).addRange(68480,68497).addRange(68608,68680),a.addRange(68736,68786).addRange(68800,68850).addRange(68864,68899).addRange(69248,69289).addRange(69296,69297).addRange(69376,69404).addRange(69424,69445).addRange(69488,69505).addRange(69552,69572).addRange(69600,69622).addRange(69635,69687).addRange(69745,69746).addRange(69763,69807).addRange(69840,69864).addRange(69891,69926).addRange(69968,70002).addRange(70019,70066).addRange(70081,70084).addRange(70144,70161).addRange(70163,70187).addRange(70272,70278).addRange(70282,70285).addRange(70287,70301).addRange(70303,70312).addRange(70320,70366).addRange(70405,70412).addRange(70415,70416).addRange(70419,70440).addRange(70442,70448).addRange(70450,70451).addRange(70453,70457).addRange(70493,70497).addRange(70656,70708).addRange(70727,70730).addRange(70751,70753).addRange(70784,70831).addRange(70852,70853).addRange(71040,71086).addRange(71128,71131).addRange(71168,71215).addRange(71296,71338).addRange(71424,71450).addRange(71488,71494).addRange(71680,71723).addRange(71840,71903).addRange(71935,71942).addRange(71948,71955).addRange(71957,71958).addRange(71960,71983).addRange(72096,72103).addRange(72106,72144),a.addRange(72203,72242).addRange(72284,72329).addRange(72368,72440).addRange(72704,72712).addRange(72714,72750).addRange(72818,72847).addRange(72960,72966).addRange(72968,72969).addRange(72971,73008).addRange(73056,73061).addRange(73063,73064).addRange(73066,73097).addRange(73440,73458).addRange(73728,74649).addRange(74880,75075).addRange(77712,77808).addRange(77824,78894).addRange(82944,83526).addRange(92160,92728).addRange(92736,92766).addRange(92784,92862).addRange(92880,92909).addRange(92928,92975).addRange(92992,92995).addRange(93027,93047).addRange(93053,93071).addRange(93760,93823).addRange(93952,94026).addRange(94099,94111).addRange(94176,94177).addRange(94208,100343).addRange(100352,101589).addRange(101632,101640).addRange(110576,110579).addRange(110581,110587).addRange(110589,110590).addRange(110592,110882).addRange(110928,110930).addRange(110948,110951).addRange(110960,111355).addRange(113664,113770).addRange(113776,113788).addRange(113792,113800).addRange(113808,113817).addRange(119808,119892).addRange(119894,119964).addRange(119966,119967).addRange(119973,119974).addRange(119977,119980).addRange(119982,119993).addRange(119997,120003),a.addRange(120005,120069).addRange(120071,120074).addRange(120077,120084).addRange(120086,120092).addRange(120094,120121).addRange(120123,120126).addRange(120128,120132).addRange(120138,120144).addRange(120146,120485).addRange(120488,120512).addRange(120514,120538).addRange(120540,120570).addRange(120572,120596).addRange(120598,120628).addRange(120630,120654).addRange(120656,120686).addRange(120688,120712).addRange(120714,120744).addRange(120746,120770).addRange(120772,120779).addRange(122624,122654).addRange(123136,123180).addRange(123191,123197).addRange(123536,123565).addRange(123584,123627).addRange(124896,124902).addRange(124904,124907).addRange(124909,124910).addRange(124912,124926).addRange(124928,125124).addRange(125184,125251).addRange(126464,126467).addRange(126469,126495).addRange(126497,126498).addRange(126505,126514).addRange(126516,126519).addRange(126541,126543).addRange(126545,126546).addRange(126561,126562).addRange(126567,126570).addRange(126572,126578).addRange(126580,126583).addRange(126585,126588).addRange(126592,126601).addRange(126603,126619).addRange(126625,126627).addRange(126629,126633).addRange(126635,126651).addRange(131072,173791).addRange(173824,177976).addRange(177984,178205),a.addRange(178208,183969).addRange(183984,191456).addRange(194560,195101).addRange(196608,201546),e.exports=a},24886:function(e,t,n){const a=n(45927)(12295,66369,66378);a.addRange(5870,5872).addRange(8544,8578).addRange(8581,8584).addRange(12321,12329).addRange(12344,12346).addRange(42726,42735).addRange(65856,65908).addRange(66513,66517).addRange(74752,74862),e.exports=a},19220:function(e,t,n){const a=n(45927)(8232);e.exports=a},24497:function(e,t,n){const a=n(45927)(181,257,259,261,263,265,267,269,271,273,275,277,279,281,283,285,287,289,291,293,295,297,299,301,303,305,307,309,314,316,318,320,322,324,326,331,333,335,337,339,341,343,345,347,349,351,353,355,357,359,361,363,365,367,369,371,373,375,378,380,387,389,392,402,405,414,417,419,421,424,429,432,436,438,454,457,460,462,464,466,468,470,472,474,479,481,483,485,487,489,491,493,499,501,505,507,509,511,513,515,517,519,521,523,525,527,529,531,533,535,537,539,541,543,545,547,549,551,553,555,557,559,561,572,578,583,585,587,589,881,883,887,912,985,987,989,991,993,995,997,999,1001,1003,1005,1013,1016,1121,1123,1125,1127,1129,1131,1133,1135,1137,1139,1141,1143,1145,1147,1149,1151,1153,1163,1165,1167,1169,1171,1173,1175,1177,1179,1181,1183,1185,1187,1189,1191,1193,1195,1197,1199,1201,1203,1205,1207,1209,1211,1213,1215,1218,1220,1222,1224,1226,1228,1233,1235,1237,1239,1241,1243,1245,1247,1249,1251,1253,1255,1257,1259,1261,1263,1265,1267,1269,1271,1273,1275,1277,1279,1281,1283,1285,1287,1289,1291,1293,1295,1297,1299,1301,1303,1305,1307,1309,1311,1313,1315,1317,1319,1321,1323,1325,1327,7681,7683,7685,7687,7689,7691,7693,7695,7697,7699,7701,7703,7705,7707,7709,7711,7713,7715,7717,7719,7721,7723,7725,7727,7729,7731,7733,7735,7737,7739,7741,7743,7745,7747,7749,7751,7753,7755,7757,7759,7761,7763,7765,7767,7769,7771,7773,7775,7777,7779,7781,7783,7785,7787,7789,7791,7793,7795,7797,7799,7801,7803,7805,7807,7809,7811,7813,7815,7817,7819,7821,7823,7825,7827,7839,7841,7843,7845,7847,7849,7851,7853,7855,7857,7859,7861,7863,7865,7867,7869,7871,7873,7875,7877,7879,7881,7883,7885,7887,7889,7891,7893,7895,7897,7899,7901,7903,7905,7907,7909,7911,7913,7915,7917,7919,7921,7923,7925,7927,7929,7931,7933,8126,8458,8467,8495,8500,8505,8526,8580,11361,11368,11370,11372,11377,11393,11395,11397,11399,11401,11403,11405,11407,11409,11411,11413,11415,11417,11419,11421,11423,11425,11427,11429,11431,11433,11435,11437,11439,11441,11443,11445,11447,11449,11451,11453,11455,11457,11459,11461,11463,11465,11467,11469,11471,11473,11475,11477,11479,11481,11483,11485,11487,11489,11500,11502,11507,11559,11565,42561,42563,42565,42567,42569,42571,42573,42575,42577,42579,42581,42583,42585,42587,42589,42591,42593,42595,42597,42599,42601,42603,42605,42625,42627,42629,42631,42633,42635,42637,42639,42641,42643,42645,42647,42649,42651,42787,42789,42791,42793,42795,42797,42803,42805,42807,42809,42811,42813,42815,42817,42819,42821,42823,42825,42827,42829,42831,42833,42835,42837,42839,42841,42843,42845,42847,42849,42851,42853,42855,42857,42859,42861,42863,42874,42876,42879,42881,42883,42885,42887,42892,42894,42897,42903,42905,42907,42909,42911,42913,42915,42917,42919,42921,42927,42933,42935,42937,42939,42941,42943,42945,42947,42952,42954,42961,42963,42965,42967,42969,42998,43002,119995,120779);a.addRange(97,122).addRange(223,246).addRange(248,255).addRange(311,312).addRange(328,329).addRange(382,384).addRange(396,397).addRange(409,411).addRange(426,427).addRange(441,442).addRange(445,447).addRange(476,477).addRange(495,496).addRange(563,569).addRange(575,576).addRange(591,659).addRange(661,687).addRange(891,893).addRange(940,974).addRange(976,977).addRange(981,983).addRange(1007,1011).addRange(1019,1020).addRange(1072,1119).addRange(1230,1231).addRange(1376,1416).addRange(4304,4346).addRange(4349,4351).addRange(5112,5117).addRange(7296,7304).addRange(7424,7467).addRange(7531,7543).addRange(7545,7578).addRange(7829,7837).addRange(7935,7943).addRange(7952,7957).addRange(7968,7975).addRange(7984,7991).addRange(8e3,8005).addRange(8016,8023).addRange(8032,8039).addRange(8048,8061).addRange(8064,8071).addRange(8080,8087).addRange(8096,8103).addRange(8112,8116).addRange(8118,8119).addRange(8130,8132).addRange(8134,8135).addRange(8144,8147).addRange(8150,8151),a.addRange(8160,8167).addRange(8178,8180).addRange(8182,8183).addRange(8462,8463).addRange(8508,8509).addRange(8518,8521).addRange(11312,11359).addRange(11365,11366).addRange(11379,11380).addRange(11382,11387).addRange(11491,11492).addRange(11520,11557).addRange(42799,42801).addRange(42865,42872).addRange(42899,42901).addRange(43824,43866).addRange(43872,43880).addRange(43888,43967).addRange(64256,64262).addRange(64275,64279).addRange(65345,65370).addRange(66600,66639).addRange(66776,66811).addRange(66967,66977).addRange(66979,66993).addRange(66995,67001).addRange(67003,67004).addRange(68800,68850).addRange(71872,71903).addRange(93792,93823).addRange(119834,119859).addRange(119886,119892).addRange(119894,119911).addRange(119938,119963).addRange(119990,119993).addRange(119997,120003).addRange(120005,120015).addRange(120042,120067).addRange(120094,120119).addRange(120146,120171).addRange(120198,120223).addRange(120250,120275).addRange(120302,120327).addRange(120354,120379).addRange(120406,120431).addRange(120458,120485).addRange(120514,120538).addRange(120540,120545).addRange(120572,120596).addRange(120598,120603).addRange(120630,120654),a.addRange(120656,120661).addRange(120688,120712).addRange(120714,120719).addRange(120746,120770).addRange(120772,120777).addRange(122624,122633).addRange(122635,122654).addRange(125218,125251),e.exports=a},28071:function(e,t,n){const a=n(45927)(1471,1479,1648,1809,2045,2492,2519,2558,2620,2641,2677,2748,2876,2946,3031,3132,3260,3415,3530,3542,3633,3761,3893,3895,3897,4038,4239,6109,6159,6313,6783,7405,7412,11647,43010,43014,43019,43052,43263,43493,43587,43696,43713,64286,66045,66272,68159,69744,69826,70003,70206,70487,70750,72e3,72164,72263,73018,73031,94031,94180,121461,121476,123566);a.addRange(768,879).addRange(1155,1161).addRange(1425,1469).addRange(1473,1474).addRange(1476,1477).addRange(1552,1562).addRange(1611,1631).addRange(1750,1756).addRange(1759,1764).addRange(1767,1768).addRange(1770,1773).addRange(1840,1866).addRange(1958,1968).addRange(2027,2035).addRange(2070,2073).addRange(2075,2083).addRange(2085,2087).addRange(2089,2093).addRange(2137,2139).addRange(2200,2207).addRange(2250,2273).addRange(2275,2307).addRange(2362,2364).addRange(2366,2383).addRange(2385,2391).addRange(2402,2403).addRange(2433,2435).addRange(2494,2500).addRange(2503,2504).addRange(2507,2509).addRange(2530,2531).addRange(2561,2563).addRange(2622,2626).addRange(2631,2632).addRange(2635,2637).addRange(2672,2673).addRange(2689,2691).addRange(2750,2757).addRange(2759,2761).addRange(2763,2765).addRange(2786,2787).addRange(2810,2815).addRange(2817,2819).addRange(2878,2884).addRange(2887,2888).addRange(2891,2893).addRange(2901,2903).addRange(2914,2915).addRange(3006,3010).addRange(3014,3016).addRange(3018,3021),a.addRange(3072,3076).addRange(3134,3140).addRange(3142,3144).addRange(3146,3149).addRange(3157,3158).addRange(3170,3171).addRange(3201,3203).addRange(3262,3268).addRange(3270,3272).addRange(3274,3277).addRange(3285,3286).addRange(3298,3299).addRange(3328,3331).addRange(3387,3388).addRange(3390,3396).addRange(3398,3400).addRange(3402,3405).addRange(3426,3427).addRange(3457,3459).addRange(3535,3540).addRange(3544,3551).addRange(3570,3571).addRange(3636,3642).addRange(3655,3662).addRange(3764,3772).addRange(3784,3789).addRange(3864,3865).addRange(3902,3903).addRange(3953,3972).addRange(3974,3975).addRange(3981,3991).addRange(3993,4028).addRange(4139,4158).addRange(4182,4185).addRange(4190,4192).addRange(4194,4196).addRange(4199,4205).addRange(4209,4212).addRange(4226,4237).addRange(4250,4253).addRange(4957,4959).addRange(5906,5909).addRange(5938,5940).addRange(5970,5971).addRange(6002,6003).addRange(6068,6099).addRange(6155,6157).addRange(6277,6278).addRange(6432,6443).addRange(6448,6459).addRange(6679,6683),a.addRange(6741,6750).addRange(6752,6780).addRange(6832,6862).addRange(6912,6916).addRange(6964,6980).addRange(7019,7027).addRange(7040,7042).addRange(7073,7085).addRange(7142,7155).addRange(7204,7223).addRange(7376,7378).addRange(7380,7400).addRange(7415,7417).addRange(7616,7679).addRange(8400,8432).addRange(11503,11505).addRange(11744,11775).addRange(12330,12335).addRange(12441,12442).addRange(42607,42610).addRange(42612,42621).addRange(42654,42655).addRange(42736,42737).addRange(43043,43047).addRange(43136,43137).addRange(43188,43205).addRange(43232,43249).addRange(43302,43309).addRange(43335,43347).addRange(43392,43395).addRange(43443,43456).addRange(43561,43574).addRange(43596,43597).addRange(43643,43645).addRange(43698,43700).addRange(43703,43704).addRange(43710,43711).addRange(43755,43759).addRange(43765,43766).addRange(44003,44010).addRange(44012,44013).addRange(65024,65039).addRange(65056,65071).addRange(66422,66426).addRange(68097,68099).addRange(68101,68102).addRange(68108,68111).addRange(68152,68154).addRange(68325,68326).addRange(68900,68903).addRange(69291,69292),a.addRange(69446,69456).addRange(69506,69509).addRange(69632,69634).addRange(69688,69702).addRange(69747,69748).addRange(69759,69762).addRange(69808,69818).addRange(69888,69890).addRange(69927,69940).addRange(69957,69958).addRange(70016,70018).addRange(70067,70080).addRange(70089,70092).addRange(70094,70095).addRange(70188,70199).addRange(70367,70378).addRange(70400,70403).addRange(70459,70460).addRange(70462,70468).addRange(70471,70472).addRange(70475,70477).addRange(70498,70499).addRange(70502,70508).addRange(70512,70516).addRange(70709,70726).addRange(70832,70851).addRange(71087,71093).addRange(71096,71104).addRange(71132,71133).addRange(71216,71232).addRange(71339,71351).addRange(71453,71467).addRange(71724,71738).addRange(71984,71989).addRange(71991,71992).addRange(71995,71998).addRange(72002,72003).addRange(72145,72151).addRange(72154,72160).addRange(72193,72202).addRange(72243,72249).addRange(72251,72254).addRange(72273,72283).addRange(72330,72345).addRange(72751,72758).addRange(72760,72767).addRange(72850,72871).addRange(72873,72886).addRange(73009,73014).addRange(73020,73021).addRange(73023,73029),a.addRange(73098,73102).addRange(73104,73105).addRange(73107,73111).addRange(73459,73462).addRange(92912,92916).addRange(92976,92982).addRange(94033,94087).addRange(94095,94098).addRange(94192,94193).addRange(113821,113822).addRange(118528,118573).addRange(118576,118598).addRange(119141,119145).addRange(119149,119154).addRange(119163,119170).addRange(119173,119179).addRange(119210,119213).addRange(119362,119364).addRange(121344,121398).addRange(121403,121452).addRange(121499,121503).addRange(121505,121519).addRange(122880,122886).addRange(122888,122904).addRange(122907,122913).addRange(122915,122916).addRange(122918,122922).addRange(123184,123190).addRange(123628,123631).addRange(125136,125142).addRange(125252,125258).addRange(917760,917999),e.exports=a},72586:function(e,t,n){const a=n(45927)(43,124,126,172,177,215,247,1014,8260,8274,8472,8523,8608,8611,8614,8622,8658,8660,9084,9655,9665,9839,64297,65122,65291,65372,65374,65506,120513,120539,120571,120597,120629,120655,120687,120713,120745,120771);a.addRange(60,62).addRange(1542,1544).addRange(8314,8316).addRange(8330,8332).addRange(8512,8516).addRange(8592,8596).addRange(8602,8603).addRange(8654,8655).addRange(8692,8959).addRange(8992,8993).addRange(9115,9139).addRange(9180,9185).addRange(9720,9727).addRange(10176,10180).addRange(10183,10213).addRange(10224,10239).addRange(10496,10626).addRange(10649,10711).addRange(10716,10747).addRange(10750,11007).addRange(11056,11076).addRange(11079,11084).addRange(65124,65126).addRange(65308,65310).addRange(65513,65516).addRange(126704,126705),e.exports=a},8492:function(e,t,n){const a=n(45927)(748,750,884,890,1369,1600,2042,2074,2084,2088,2249,2417,3654,3782,4348,6103,6211,6823,7544,8305,8319,11631,11823,12293,12347,40981,42508,42623,42864,42888,43471,43494,43632,43741,43881,65392,94179,125259);a.addRange(688,705).addRange(710,721).addRange(736,740).addRange(1765,1766).addRange(2036,2037).addRange(7288,7293).addRange(7468,7530).addRange(7579,7615).addRange(8336,8348).addRange(11388,11389).addRange(12337,12341).addRange(12445,12446).addRange(12540,12542).addRange(42232,42237).addRange(42652,42653).addRange(42775,42783).addRange(42994,42996).addRange(43e3,43001).addRange(43763,43764).addRange(43868,43871).addRange(65438,65439).addRange(67456,67461).addRange(67463,67504).addRange(67506,67514).addRange(92992,92995).addRange(94099,94111).addRange(94176,94177).addRange(110576,110579).addRange(110581,110587).addRange(110589,110590).addRange(123191,123197),e.exports=a},26802:function(e,t,n){const a=n(45927)(94,96,168,175,180,184,749,885,2184,8125,43867,65342,65344,65507);a.addRange(706,709).addRange(722,735).addRange(741,747).addRange(751,767).addRange(900,901).addRange(8127,8129).addRange(8141,8143).addRange(8157,8159).addRange(8173,8175).addRange(8189,8190).addRange(12443,12444).addRange(42752,42774).addRange(42784,42785).addRange(42889,42890).addRange(43882,43883).addRange(64434,64450).addRange(127995,127999),e.exports=a},47373:function(e,t,n){const a=n(45927)(1471,1479,1648,1809,2045,2362,2364,2381,2433,2492,2509,2558,2620,2641,2677,2748,2765,2817,2876,2879,2893,2946,3008,3021,3072,3076,3132,3201,3260,3263,3270,3405,3457,3530,3542,3633,3761,3893,3895,3897,4038,4226,4237,4253,6086,6109,6159,6313,6450,6683,6742,6752,6754,6783,6964,6972,6978,7142,7149,7405,7412,8417,11647,42607,43010,43014,43019,43052,43263,43443,43493,43587,43596,43644,43696,43713,43766,44005,44008,44013,64286,66045,66272,68159,69633,69744,69826,70003,70095,70196,70206,70367,70464,70726,70750,70842,71229,71339,71341,71351,71998,72003,72160,72263,72767,73018,73031,73109,73111,94031,94180,121461,121476,123566);a.addRange(768,879).addRange(1155,1159).addRange(1425,1469).addRange(1473,1474).addRange(1476,1477).addRange(1552,1562).addRange(1611,1631).addRange(1750,1756).addRange(1759,1764).addRange(1767,1768).addRange(1770,1773).addRange(1840,1866).addRange(1958,1968).addRange(2027,2035).addRange(2070,2073).addRange(2075,2083).addRange(2085,2087).addRange(2089,2093).addRange(2137,2139).addRange(2200,2207).addRange(2250,2273).addRange(2275,2306).addRange(2369,2376).addRange(2385,2391).addRange(2402,2403).addRange(2497,2500).addRange(2530,2531).addRange(2561,2562).addRange(2625,2626).addRange(2631,2632).addRange(2635,2637).addRange(2672,2673).addRange(2689,2690).addRange(2753,2757).addRange(2759,2760).addRange(2786,2787).addRange(2810,2815).addRange(2881,2884).addRange(2901,2902).addRange(2914,2915).addRange(3134,3136).addRange(3142,3144).addRange(3146,3149).addRange(3157,3158).addRange(3170,3171).addRange(3276,3277).addRange(3298,3299).addRange(3328,3329).addRange(3387,3388).addRange(3393,3396).addRange(3426,3427),a.addRange(3538,3540).addRange(3636,3642).addRange(3655,3662).addRange(3764,3772).addRange(3784,3789).addRange(3864,3865).addRange(3953,3966).addRange(3968,3972).addRange(3974,3975).addRange(3981,3991).addRange(3993,4028).addRange(4141,4144).addRange(4146,4151).addRange(4153,4154).addRange(4157,4158).addRange(4184,4185).addRange(4190,4192).addRange(4209,4212).addRange(4229,4230).addRange(4957,4959).addRange(5906,5908).addRange(5938,5939).addRange(5970,5971).addRange(6002,6003).addRange(6068,6069).addRange(6071,6077).addRange(6089,6099).addRange(6155,6157).addRange(6277,6278).addRange(6432,6434).addRange(6439,6440).addRange(6457,6459).addRange(6679,6680).addRange(6744,6750).addRange(6757,6764).addRange(6771,6780).addRange(6832,6845).addRange(6847,6862).addRange(6912,6915).addRange(6966,6970).addRange(7019,7027).addRange(7040,7041).addRange(7074,7077).addRange(7080,7081).addRange(7083,7085).addRange(7144,7145).addRange(7151,7153).addRange(7212,7219).addRange(7222,7223).addRange(7376,7378).addRange(7380,7392),a.addRange(7394,7400).addRange(7416,7417).addRange(7616,7679).addRange(8400,8412).addRange(8421,8432).addRange(11503,11505).addRange(11744,11775).addRange(12330,12333).addRange(12441,12442).addRange(42612,42621).addRange(42654,42655).addRange(42736,42737).addRange(43045,43046).addRange(43204,43205).addRange(43232,43249).addRange(43302,43309).addRange(43335,43345).addRange(43392,43394).addRange(43446,43449).addRange(43452,43453).addRange(43561,43566).addRange(43569,43570).addRange(43573,43574).addRange(43698,43700).addRange(43703,43704).addRange(43710,43711).addRange(43756,43757).addRange(65024,65039).addRange(65056,65071).addRange(66422,66426).addRange(68097,68099).addRange(68101,68102).addRange(68108,68111).addRange(68152,68154).addRange(68325,68326).addRange(68900,68903).addRange(69291,69292).addRange(69446,69456).addRange(69506,69509).addRange(69688,69702).addRange(69747,69748).addRange(69759,69761).addRange(69811,69814).addRange(69817,69818).addRange(69888,69890).addRange(69927,69931).addRange(69933,69940).addRange(70016,70017).addRange(70070,70078).addRange(70089,70092).addRange(70191,70193),a.addRange(70198,70199).addRange(70371,70378).addRange(70400,70401).addRange(70459,70460).addRange(70502,70508).addRange(70512,70516).addRange(70712,70719).addRange(70722,70724).addRange(70835,70840).addRange(70847,70848).addRange(70850,70851).addRange(71090,71093).addRange(71100,71101).addRange(71103,71104).addRange(71132,71133).addRange(71219,71226).addRange(71231,71232).addRange(71344,71349).addRange(71453,71455).addRange(71458,71461).addRange(71463,71467).addRange(71727,71735).addRange(71737,71738).addRange(71995,71996).addRange(72148,72151).addRange(72154,72155).addRange(72193,72202).addRange(72243,72248).addRange(72251,72254).addRange(72273,72278).addRange(72281,72283).addRange(72330,72342).addRange(72344,72345).addRange(72752,72758).addRange(72760,72765).addRange(72850,72871).addRange(72874,72880).addRange(72882,72883).addRange(72885,72886).addRange(73009,73014).addRange(73020,73021).addRange(73023,73029).addRange(73104,73105).addRange(73459,73460).addRange(92912,92916).addRange(92976,92982).addRange(94095,94098).addRange(113821,113822).addRange(118528,118573).addRange(118576,118598).addRange(119143,119145),a.addRange(119163,119170).addRange(119173,119179).addRange(119210,119213).addRange(119362,119364).addRange(121344,121398).addRange(121403,121452).addRange(121499,121503).addRange(121505,121519).addRange(122880,122886).addRange(122888,122904).addRange(122907,122913).addRange(122915,122916).addRange(122918,122922).addRange(123184,123190).addRange(123628,123631).addRange(125136,125142).addRange(125252,125258).addRange(917760,917999),e.exports=a},30006:function(e,t,n){const a=n(45927)(185,8304,11517,12295,66369,66378);a.addRange(48,57).addRange(178,179).addRange(188,190).addRange(1632,1641).addRange(1776,1785).addRange(1984,1993).addRange(2406,2415).addRange(2534,2543).addRange(2548,2553).addRange(2662,2671).addRange(2790,2799).addRange(2918,2927).addRange(2930,2935).addRange(3046,3058).addRange(3174,3183).addRange(3192,3198).addRange(3302,3311).addRange(3416,3422).addRange(3430,3448).addRange(3558,3567).addRange(3664,3673).addRange(3792,3801).addRange(3872,3891).addRange(4160,4169).addRange(4240,4249).addRange(4969,4988).addRange(5870,5872).addRange(6112,6121).addRange(6128,6137).addRange(6160,6169).addRange(6470,6479).addRange(6608,6618).addRange(6784,6793).addRange(6800,6809).addRange(6992,7001).addRange(7088,7097).addRange(7232,7241).addRange(7248,7257).addRange(8308,8313).addRange(8320,8329).addRange(8528,8578).addRange(8581,8585).addRange(9312,9371).addRange(9450,9471).addRange(10102,10131).addRange(12321,12329).addRange(12344,12346).addRange(12690,12693).addRange(12832,12841).addRange(12872,12879).addRange(12881,12895),a.addRange(12928,12937).addRange(12977,12991).addRange(42528,42537).addRange(42726,42735).addRange(43056,43061).addRange(43216,43225).addRange(43264,43273).addRange(43472,43481).addRange(43504,43513).addRange(43600,43609).addRange(44016,44025).addRange(65296,65305).addRange(65799,65843).addRange(65856,65912).addRange(65930,65931).addRange(66273,66299).addRange(66336,66339).addRange(66513,66517).addRange(66720,66729).addRange(67672,67679).addRange(67705,67711).addRange(67751,67759).addRange(67835,67839).addRange(67862,67867).addRange(68028,68029).addRange(68032,68047).addRange(68050,68095).addRange(68160,68168).addRange(68221,68222).addRange(68253,68255).addRange(68331,68335).addRange(68440,68447).addRange(68472,68479).addRange(68521,68527).addRange(68858,68863).addRange(68912,68921).addRange(69216,69246).addRange(69405,69414).addRange(69457,69460).addRange(69573,69579).addRange(69714,69743).addRange(69872,69881).addRange(69942,69951).addRange(70096,70105).addRange(70113,70132).addRange(70384,70393).addRange(70736,70745).addRange(70864,70873).addRange(71248,71257).addRange(71360,71369).addRange(71472,71483),a.addRange(71904,71922).addRange(72016,72025).addRange(72784,72812).addRange(73040,73049).addRange(73120,73129).addRange(73664,73684).addRange(74752,74862).addRange(92768,92777).addRange(92864,92873).addRange(93008,93017).addRange(93019,93025).addRange(93824,93846).addRange(119520,119539).addRange(119648,119672).addRange(120782,120831).addRange(123200,123209).addRange(123632,123641).addRange(125127,125135).addRange(125264,125273).addRange(126065,126123).addRange(126125,126127).addRange(126129,126132).addRange(126209,126253).addRange(126255,126269).addRange(127232,127244).addRange(130032,130041),e.exports=a},53487:function(e,t,n){const a=n(45927)(40,91,123,3898,3900,5787,8218,8222,8261,8317,8333,8968,8970,9001,10088,10090,10092,10094,10096,10098,10100,10181,10214,10216,10218,10220,10222,10627,10629,10631,10633,10635,10637,10639,10641,10643,10645,10647,10712,10714,10748,11810,11812,11814,11816,11842,11861,11863,11865,11867,12296,12298,12300,12302,12304,12308,12310,12312,12314,12317,64831,65047,65077,65079,65081,65083,65085,65087,65089,65091,65095,65113,65115,65117,65288,65339,65371,65375,65378);e.exports=a},85493:function(e,t,n){const a=n(45927)(173,907,909,930,1328,1424,1564,1757,2111,2143,2274,2436,2473,2481,2526,2564,2601,2609,2612,2615,2621,2653,2692,2702,2706,2729,2737,2740,2758,2762,2816,2820,2857,2865,2868,2910,2948,2961,2971,2973,3017,3085,3089,3113,3141,3145,3159,3213,3217,3241,3252,3269,3273,3295,3312,3341,3345,3397,3401,3456,3460,3506,3516,3541,3543,3715,3717,3723,3748,3750,3781,3783,3912,3992,4029,4045,4294,4681,4695,4697,4745,4785,4799,4801,4823,4881,5997,6001,6158,6431,6751,7039,8024,8026,8028,8030,8117,8133,8156,8181,8191,8335,11158,11558,11687,11695,11703,11711,11719,11727,11735,11743,11930,12352,12592,12687,12831,42962,42964,43470,43519,43815,43823,64311,64317,64319,64322,64325,65107,65127,65141,65511,65548,65575,65595,65598,65935,66462,66939,66955,66963,66966,66978,66994,67002,67462,67505,67593,67638,67670,67827,68100,68116,68120,69247,69290,69821,69941,70112,70162,70279,70281,70286,70302,70404,70441,70449,70452,70458,70748,71956,71959,71990,72713,72759,72872,72967,72970,73019,73022,73062,73065,73103,73106,74863,92767,92863,93018,93026,110580,110588,110591,119893,119965,119981,119994,119996,120004,120070,120085,120093,120122,120127,120133,120145,121504,122887,122914,122917,124903,124908,124911,124927,126468,126496,126499,126504,126515,126520,126522,126536,126538,126540,126544,126547,126552,126554,126556,126558,126560,126563,126571,126579,126584,126589,126591,126602,126628,126634,127168,127184,129939);a.addRange(0,31).addRange(127,159).addRange(888,889).addRange(896,899).addRange(1367,1368).addRange(1419,1420).addRange(1480,1487).addRange(1515,1518).addRange(1525,1541).addRange(1806,1807).addRange(1867,1868).addRange(1970,1983).addRange(2043,2044).addRange(2094,2095).addRange(2140,2141).addRange(2155,2159).addRange(2191,2199).addRange(2445,2446).addRange(2449,2450).addRange(2483,2485).addRange(2490,2491).addRange(2501,2502).addRange(2505,2506).addRange(2511,2518).addRange(2520,2523).addRange(2532,2533).addRange(2559,2560).addRange(2571,2574).addRange(2577,2578).addRange(2618,2619).addRange(2627,2630).addRange(2633,2634).addRange(2638,2640).addRange(2642,2648).addRange(2655,2661).addRange(2679,2688).addRange(2746,2747).addRange(2766,2767).addRange(2769,2783).addRange(2788,2789).addRange(2802,2808).addRange(2829,2830).addRange(2833,2834).addRange(2874,2875).addRange(2885,2886).addRange(2889,2890).addRange(2894,2900).addRange(2904,2907).addRange(2916,2917).addRange(2936,2945).addRange(2955,2957),a.addRange(2966,2968).addRange(2976,2978).addRange(2981,2983).addRange(2987,2989).addRange(3002,3005).addRange(3011,3013).addRange(3022,3023).addRange(3025,3030).addRange(3032,3045).addRange(3067,3071).addRange(3130,3131).addRange(3150,3156).addRange(3163,3164).addRange(3166,3167).addRange(3172,3173).addRange(3184,3190).addRange(3258,3259).addRange(3278,3284).addRange(3287,3292).addRange(3300,3301).addRange(3315,3327).addRange(3408,3411).addRange(3428,3429).addRange(3479,3481).addRange(3518,3519).addRange(3527,3529).addRange(3531,3534).addRange(3552,3557).addRange(3568,3569).addRange(3573,3584).addRange(3643,3646).addRange(3676,3712).addRange(3774,3775).addRange(3790,3791).addRange(3802,3803).addRange(3808,3839).addRange(3949,3952).addRange(4059,4095).addRange(4296,4300).addRange(4302,4303).addRange(4686,4687).addRange(4702,4703).addRange(4750,4751).addRange(4790,4791).addRange(4806,4807).addRange(4886,4887).addRange(4955,4956).addRange(4989,4991).addRange(5018,5023).addRange(5110,5111).addRange(5118,5119),a.addRange(5789,5791).addRange(5881,5887).addRange(5910,5918).addRange(5943,5951).addRange(5972,5983).addRange(6004,6015).addRange(6110,6111).addRange(6122,6127).addRange(6138,6143).addRange(6170,6175).addRange(6265,6271).addRange(6315,6319).addRange(6390,6399).addRange(6444,6447).addRange(6460,6463).addRange(6465,6467).addRange(6510,6511).addRange(6517,6527).addRange(6572,6575).addRange(6602,6607).addRange(6619,6621).addRange(6684,6685).addRange(6781,6782).addRange(6794,6799).addRange(6810,6815).addRange(6830,6831).addRange(6863,6911).addRange(6989,6991).addRange(7156,7163).addRange(7224,7226).addRange(7242,7244).addRange(7305,7311).addRange(7355,7356).addRange(7368,7375).addRange(7419,7423).addRange(7958,7959).addRange(7966,7967).addRange(8006,8007).addRange(8014,8015).addRange(8062,8063).addRange(8148,8149).addRange(8176,8177).addRange(8203,8207).addRange(8234,8238).addRange(8288,8303).addRange(8306,8307).addRange(8349,8351).addRange(8385,8399).addRange(8433,8447).addRange(8588,8591).addRange(9255,9279),a.addRange(9291,9311).addRange(11124,11125).addRange(11508,11512).addRange(11560,11564).addRange(11566,11567).addRange(11624,11630).addRange(11633,11646).addRange(11671,11679).addRange(11870,11903).addRange(12020,12031).addRange(12246,12271).addRange(12284,12287).addRange(12439,12440).addRange(12544,12548).addRange(12772,12783).addRange(42125,42127).addRange(42183,42191).addRange(42540,42559).addRange(42744,42751).addRange(42955,42959).addRange(42970,42993).addRange(43053,43055).addRange(43066,43071).addRange(43128,43135).addRange(43206,43213).addRange(43226,43231).addRange(43348,43358).addRange(43389,43391).addRange(43482,43485).addRange(43575,43583).addRange(43598,43599).addRange(43610,43611).addRange(43715,43738).addRange(43767,43776).addRange(43783,43784).addRange(43791,43792).addRange(43799,43807).addRange(43884,43887).addRange(44014,44015).addRange(44026,44031).addRange(55204,55215).addRange(55239,55242).addRange(55292,63743).addRange(64110,64111).addRange(64218,64255).addRange(64263,64274).addRange(64280,64284).addRange(64451,64466).addRange(64912,64913).addRange(64968,64974).addRange(64976,65007),a.addRange(65050,65055).addRange(65132,65135).addRange(65277,65280).addRange(65471,65473).addRange(65480,65481).addRange(65488,65489).addRange(65496,65497).addRange(65501,65503).addRange(65519,65531).addRange(65534,65535).addRange(65614,65615).addRange(65630,65663).addRange(65787,65791).addRange(65795,65798).addRange(65844,65846).addRange(65949,65951).addRange(65953,65999).addRange(66046,66175).addRange(66205,66207).addRange(66257,66271).addRange(66300,66303).addRange(66340,66348).addRange(66379,66383).addRange(66427,66431).addRange(66500,66503).addRange(66518,66559).addRange(66718,66719).addRange(66730,66735).addRange(66772,66775).addRange(66812,66815).addRange(66856,66863).addRange(66916,66926).addRange(67005,67071).addRange(67383,67391).addRange(67414,67423).addRange(67432,67455).addRange(67515,67583).addRange(67590,67591).addRange(67641,67643).addRange(67645,67646).addRange(67743,67750).addRange(67760,67807).addRange(67830,67834).addRange(67868,67870).addRange(67898,67902).addRange(67904,67967).addRange(68024,68027).addRange(68048,68049).addRange(68103,68107).addRange(68150,68151).addRange(68155,68158),a.addRange(68169,68175).addRange(68185,68191).addRange(68256,68287).addRange(68327,68330).addRange(68343,68351).addRange(68406,68408).addRange(68438,68439).addRange(68467,68471).addRange(68498,68504).addRange(68509,68520).addRange(68528,68607).addRange(68681,68735).addRange(68787,68799).addRange(68851,68857).addRange(68904,68911).addRange(68922,69215).addRange(69294,69295).addRange(69298,69375).addRange(69416,69423).addRange(69466,69487).addRange(69514,69551).addRange(69580,69599).addRange(69623,69631).addRange(69710,69713).addRange(69750,69758).addRange(69827,69839).addRange(69865,69871).addRange(69882,69887).addRange(69960,69967).addRange(70007,70015).addRange(70133,70143).addRange(70207,70271).addRange(70314,70319).addRange(70379,70383).addRange(70394,70399).addRange(70413,70414).addRange(70417,70418).addRange(70469,70470).addRange(70473,70474).addRange(70478,70479).addRange(70481,70486).addRange(70488,70492).addRange(70500,70501).addRange(70509,70511).addRange(70517,70655).addRange(70754,70783).addRange(70856,70863).addRange(70874,71039).addRange(71094,71095).addRange(71134,71167).addRange(71237,71247),a.addRange(71258,71263).addRange(71277,71295).addRange(71354,71359).addRange(71370,71423).addRange(71451,71452).addRange(71468,71471).addRange(71495,71679).addRange(71740,71839).addRange(71923,71934).addRange(71943,71944).addRange(71946,71947).addRange(71993,71994).addRange(72007,72015).addRange(72026,72095).addRange(72104,72105).addRange(72152,72153).addRange(72165,72191).addRange(72264,72271).addRange(72355,72367).addRange(72441,72703).addRange(72774,72783).addRange(72813,72815).addRange(72848,72849).addRange(72887,72959).addRange(73015,73017).addRange(73032,73039).addRange(73050,73055).addRange(73113,73119).addRange(73130,73439).addRange(73465,73647).addRange(73649,73663).addRange(73714,73726).addRange(74650,74751).addRange(74869,74879).addRange(75076,77711).addRange(77811,77823).addRange(78895,82943).addRange(83527,92159).addRange(92729,92735).addRange(92778,92781).addRange(92874,92879).addRange(92910,92911).addRange(92918,92927).addRange(92998,93007).addRange(93048,93052).addRange(93072,93759).addRange(93851,93951).addRange(94027,94030).addRange(94088,94094).addRange(94112,94175).addRange(94181,94191),a.addRange(94194,94207).addRange(100344,100351).addRange(101590,101631).addRange(101641,110575).addRange(110883,110927).addRange(110931,110947).addRange(110952,110959).addRange(111356,113663).addRange(113771,113775).addRange(113789,113791).addRange(113801,113807).addRange(113818,113819).addRange(113824,118527).addRange(118574,118575).addRange(118599,118607).addRange(118724,118783).addRange(119030,119039).addRange(119079,119080).addRange(119155,119162).addRange(119275,119295).addRange(119366,119519).addRange(119540,119551).addRange(119639,119647).addRange(119673,119807).addRange(119968,119969).addRange(119971,119972).addRange(119975,119976).addRange(120075,120076).addRange(120135,120137).addRange(120486,120487).addRange(120780,120781).addRange(121484,121498).addRange(121520,122623).addRange(122655,122879).addRange(122905,122906).addRange(122923,123135).addRange(123181,123183).addRange(123198,123199).addRange(123210,123213).addRange(123216,123535).addRange(123567,123583).addRange(123642,123646).addRange(123648,124895).addRange(125125,125126).addRange(125143,125183).addRange(125260,125263).addRange(125274,125277).addRange(125280,126064).addRange(126133,126208).addRange(126270,126463).addRange(126501,126502),a.addRange(126524,126529).addRange(126531,126534).addRange(126549,126550).addRange(126565,126566).addRange(126620,126624).addRange(126652,126703).addRange(126706,126975).addRange(127020,127023).addRange(127124,127135).addRange(127151,127152).addRange(127222,127231).addRange(127406,127461).addRange(127491,127503).addRange(127548,127551).addRange(127561,127567).addRange(127570,127583).addRange(127590,127743).addRange(128728,128732).addRange(128749,128751).addRange(128765,128767).addRange(128884,128895).addRange(128985,128991).addRange(129004,129007).addRange(129009,129023).addRange(129036,129039).addRange(129096,129103).addRange(129114,129119).addRange(129160,129167).addRange(129198,129199).addRange(129202,129279).addRange(129620,129631).addRange(129646,129647).addRange(129653,129655).addRange(129661,129663).addRange(129671,129679).addRange(129709,129711).addRange(129723,129727).addRange(129734,129743).addRange(129754,129759).addRange(129768,129775).addRange(129783,129791).addRange(129995,130031).addRange(130042,131071).addRange(173792,173823).addRange(177977,177983).addRange(178206,178207).addRange(183970,183983).addRange(191457,194559).addRange(195102,196607).addRange(201547,917759).addRange(918e3,1114111),e.exports=a},38198:function(e,t,n){const a=n(45927)(170,186,443,660,1749,1791,1808,1969,2365,2384,2482,2493,2510,2556,2654,2749,2768,2809,2877,2929,2947,2972,3024,3133,3165,3200,3261,3389,3406,3517,3716,3749,3773,3840,4159,4193,4238,4696,4800,6108,6314,7418,12294,12348,12447,12543,42606,42895,42999,43259,43642,43697,43712,43714,43762,64285,64318,67592,67644,68096,69415,69749,69956,69959,70006,70106,70108,70280,70461,70480,70855,71236,71352,71945,71999,72001,72161,72163,72192,72250,72272,72349,72768,73030,73112,73648,94032,122634,123214,126500,126503,126521,126523,126530,126535,126537,126539,126548,126551,126553,126555,126557,126559,126564,126590);a.addRange(448,451).addRange(1488,1514).addRange(1519,1522).addRange(1568,1599).addRange(1601,1610).addRange(1646,1647).addRange(1649,1747).addRange(1774,1775).addRange(1786,1788).addRange(1810,1839).addRange(1869,1957).addRange(1994,2026).addRange(2048,2069).addRange(2112,2136).addRange(2144,2154).addRange(2160,2183).addRange(2185,2190).addRange(2208,2248).addRange(2308,2361).addRange(2392,2401).addRange(2418,2432).addRange(2437,2444).addRange(2447,2448).addRange(2451,2472).addRange(2474,2480).addRange(2486,2489).addRange(2524,2525).addRange(2527,2529).addRange(2544,2545).addRange(2565,2570).addRange(2575,2576).addRange(2579,2600).addRange(2602,2608).addRange(2610,2611).addRange(2613,2614).addRange(2616,2617).addRange(2649,2652).addRange(2674,2676).addRange(2693,2701).addRange(2703,2705).addRange(2707,2728).addRange(2730,2736).addRange(2738,2739).addRange(2741,2745).addRange(2784,2785).addRange(2821,2828).addRange(2831,2832).addRange(2835,2856).addRange(2858,2864).addRange(2866,2867).addRange(2869,2873),a.addRange(2908,2909).addRange(2911,2913).addRange(2949,2954).addRange(2958,2960).addRange(2962,2965).addRange(2969,2970).addRange(2974,2975).addRange(2979,2980).addRange(2984,2986).addRange(2990,3001).addRange(3077,3084).addRange(3086,3088).addRange(3090,3112).addRange(3114,3129).addRange(3160,3162).addRange(3168,3169).addRange(3205,3212).addRange(3214,3216).addRange(3218,3240).addRange(3242,3251).addRange(3253,3257).addRange(3293,3294).addRange(3296,3297).addRange(3313,3314).addRange(3332,3340).addRange(3342,3344).addRange(3346,3386).addRange(3412,3414).addRange(3423,3425).addRange(3450,3455).addRange(3461,3478).addRange(3482,3505).addRange(3507,3515).addRange(3520,3526).addRange(3585,3632).addRange(3634,3635).addRange(3648,3653).addRange(3713,3714).addRange(3718,3722).addRange(3724,3747).addRange(3751,3760).addRange(3762,3763).addRange(3776,3780).addRange(3804,3807).addRange(3904,3911).addRange(3913,3948).addRange(3976,3980).addRange(4096,4138).addRange(4176,4181).addRange(4186,4189).addRange(4197,4198),a.addRange(4206,4208).addRange(4213,4225).addRange(4352,4680).addRange(4682,4685).addRange(4688,4694).addRange(4698,4701).addRange(4704,4744).addRange(4746,4749).addRange(4752,4784).addRange(4786,4789).addRange(4792,4798).addRange(4802,4805).addRange(4808,4822).addRange(4824,4880).addRange(4882,4885).addRange(4888,4954).addRange(4992,5007).addRange(5121,5740).addRange(5743,5759).addRange(5761,5786).addRange(5792,5866).addRange(5873,5880).addRange(5888,5905).addRange(5919,5937).addRange(5952,5969).addRange(5984,5996).addRange(5998,6e3).addRange(6016,6067).addRange(6176,6210).addRange(6212,6264).addRange(6272,6276).addRange(6279,6312).addRange(6320,6389).addRange(6400,6430).addRange(6480,6509).addRange(6512,6516).addRange(6528,6571).addRange(6576,6601).addRange(6656,6678).addRange(6688,6740).addRange(6917,6963).addRange(6981,6988).addRange(7043,7072).addRange(7086,7087).addRange(7098,7141).addRange(7168,7203).addRange(7245,7247).addRange(7258,7287).addRange(7401,7404).addRange(7406,7411).addRange(7413,7414),a.addRange(8501,8504).addRange(11568,11623).addRange(11648,11670).addRange(11680,11686).addRange(11688,11694).addRange(11696,11702).addRange(11704,11710).addRange(11712,11718).addRange(11720,11726).addRange(11728,11734).addRange(11736,11742).addRange(12353,12438).addRange(12449,12538).addRange(12549,12591).addRange(12593,12686).addRange(12704,12735).addRange(12784,12799).addRange(13312,19903).addRange(19968,40980).addRange(40982,42124).addRange(42192,42231).addRange(42240,42507).addRange(42512,42527).addRange(42538,42539).addRange(42656,42725).addRange(43003,43009).addRange(43011,43013).addRange(43015,43018).addRange(43020,43042).addRange(43072,43123).addRange(43138,43187).addRange(43250,43255).addRange(43261,43262).addRange(43274,43301).addRange(43312,43334).addRange(43360,43388).addRange(43396,43442).addRange(43488,43492).addRange(43495,43503).addRange(43514,43518).addRange(43520,43560).addRange(43584,43586).addRange(43588,43595).addRange(43616,43631).addRange(43633,43638).addRange(43646,43695).addRange(43701,43702).addRange(43705,43709).addRange(43739,43740).addRange(43744,43754).addRange(43777,43782),a.addRange(43785,43790).addRange(43793,43798).addRange(43808,43814).addRange(43816,43822).addRange(43968,44002).addRange(44032,55203).addRange(55216,55238).addRange(55243,55291).addRange(63744,64109).addRange(64112,64217).addRange(64287,64296).addRange(64298,64310).addRange(64312,64316).addRange(64320,64321).addRange(64323,64324).addRange(64326,64433).addRange(64467,64829).addRange(64848,64911).addRange(64914,64967).addRange(65008,65019).addRange(65136,65140).addRange(65142,65276).addRange(65382,65391).addRange(65393,65437).addRange(65440,65470).addRange(65474,65479).addRange(65482,65487).addRange(65490,65495).addRange(65498,65500).addRange(65536,65547).addRange(65549,65574).addRange(65576,65594).addRange(65596,65597).addRange(65599,65613).addRange(65616,65629).addRange(65664,65786).addRange(66176,66204).addRange(66208,66256).addRange(66304,66335).addRange(66349,66368).addRange(66370,66377).addRange(66384,66421).addRange(66432,66461).addRange(66464,66499).addRange(66504,66511).addRange(66640,66717).addRange(66816,66855).addRange(66864,66915).addRange(67072,67382).addRange(67392,67413).addRange(67424,67431),a.addRange(67584,67589).addRange(67594,67637).addRange(67639,67640).addRange(67647,67669).addRange(67680,67702).addRange(67712,67742).addRange(67808,67826).addRange(67828,67829).addRange(67840,67861).addRange(67872,67897).addRange(67968,68023).addRange(68030,68031).addRange(68112,68115).addRange(68117,68119).addRange(68121,68149).addRange(68192,68220).addRange(68224,68252).addRange(68288,68295).addRange(68297,68324).addRange(68352,68405).addRange(68416,68437).addRange(68448,68466).addRange(68480,68497).addRange(68608,68680).addRange(68864,68899).addRange(69248,69289).addRange(69296,69297).addRange(69376,69404).addRange(69424,69445).addRange(69488,69505).addRange(69552,69572).addRange(69600,69622).addRange(69635,69687).addRange(69745,69746).addRange(69763,69807).addRange(69840,69864).addRange(69891,69926).addRange(69968,70002).addRange(70019,70066).addRange(70081,70084).addRange(70144,70161).addRange(70163,70187).addRange(70272,70278).addRange(70282,70285).addRange(70287,70301).addRange(70303,70312).addRange(70320,70366).addRange(70405,70412).addRange(70415,70416).addRange(70419,70440).addRange(70442,70448),a.addRange(70450,70451).addRange(70453,70457).addRange(70493,70497).addRange(70656,70708).addRange(70727,70730).addRange(70751,70753).addRange(70784,70831).addRange(70852,70853).addRange(71040,71086).addRange(71128,71131).addRange(71168,71215).addRange(71296,71338).addRange(71424,71450).addRange(71488,71494).addRange(71680,71723).addRange(71935,71942).addRange(71948,71955).addRange(71957,71958).addRange(71960,71983).addRange(72096,72103).addRange(72106,72144).addRange(72203,72242).addRange(72284,72329).addRange(72368,72440).addRange(72704,72712).addRange(72714,72750).addRange(72818,72847).addRange(72960,72966).addRange(72968,72969).addRange(72971,73008).addRange(73056,73061).addRange(73063,73064).addRange(73066,73097).addRange(73440,73458).addRange(73728,74649).addRange(74880,75075).addRange(77712,77808).addRange(77824,78894).addRange(82944,83526).addRange(92160,92728).addRange(92736,92766).addRange(92784,92862).addRange(92880,92909).addRange(92928,92975).addRange(93027,93047).addRange(93053,93071).addRange(93952,94026).addRange(94208,100343).addRange(100352,101589).addRange(101632,101640).addRange(110592,110882),a.addRange(110928,110930).addRange(110948,110951).addRange(110960,111355).addRange(113664,113770).addRange(113776,113788).addRange(113792,113800).addRange(113808,113817).addRange(123136,123180).addRange(123536,123565).addRange(123584,123627).addRange(124896,124902).addRange(124904,124907).addRange(124909,124910).addRange(124912,124926).addRange(124928,125124).addRange(126464,126467).addRange(126469,126495).addRange(126497,126498).addRange(126505,126514).addRange(126516,126519).addRange(126541,126543).addRange(126545,126546).addRange(126561,126562).addRange(126567,126570).addRange(126572,126578).addRange(126580,126583).addRange(126585,126588).addRange(126592,126601).addRange(126603,126619).addRange(126625,126627).addRange(126629,126633).addRange(126635,126651).addRange(131072,173791).addRange(173824,177976).addRange(177984,178205).addRange(178208,183969).addRange(183984,191456).addRange(194560,195101).addRange(196608,201546),e.exports=a},22270:function(e,t,n){const a=n(45927)(185,6618,8304,8585,11517);a.addRange(178,179).addRange(188,190).addRange(2548,2553).addRange(2930,2935).addRange(3056,3058).addRange(3192,3198).addRange(3416,3422).addRange(3440,3448).addRange(3882,3891).addRange(4969,4988).addRange(6128,6137).addRange(8308,8313).addRange(8320,8329).addRange(8528,8543).addRange(9312,9371).addRange(9450,9471).addRange(10102,10131).addRange(12690,12693).addRange(12832,12841).addRange(12872,12879).addRange(12881,12895).addRange(12928,12937).addRange(12977,12991).addRange(43056,43061).addRange(65799,65843).addRange(65909,65912).addRange(65930,65931).addRange(66273,66299).addRange(66336,66339).addRange(67672,67679).addRange(67705,67711).addRange(67751,67759).addRange(67835,67839).addRange(67862,67867).addRange(68028,68029).addRange(68032,68047).addRange(68050,68095).addRange(68160,68168).addRange(68221,68222).addRange(68253,68255).addRange(68331,68335).addRange(68440,68447).addRange(68472,68479).addRange(68521,68527).addRange(68858,68863).addRange(69216,69246).addRange(69405,69414).addRange(69457,69460).addRange(69573,69579).addRange(69714,69733).addRange(70113,70132),a.addRange(71482,71483).addRange(71914,71922).addRange(72794,72812).addRange(73664,73684).addRange(93019,93025).addRange(93824,93846).addRange(119520,119539).addRange(119648,119672).addRange(125127,125135).addRange(126065,126123).addRange(126125,126127).addRange(126129,126132).addRange(126209,126253).addRange(126255,126269).addRange(127232,127244),e.exports=a},4126:function(e,t,n){const a=n(45927)(42,44,92,161,167,191,894,903,1417,1472,1475,1478,1563,1748,2142,2416,2557,2678,2800,3191,3204,3572,3663,3860,3973,4347,5742,7379,8275,11632,11787,11803,11841,12349,12539,42611,42622,43260,43359,44011,65049,65072,65128,65290,65292,65340,65377,66463,66512,66927,67671,67871,67903,68223,70093,70107,70313,70749,70854,71353,71739,72162,73727,92917,92996,94178,113823);a.addRange(33,35).addRange(37,39).addRange(46,47).addRange(58,59).addRange(63,64).addRange(182,183).addRange(1370,1375).addRange(1523,1524).addRange(1545,1546).addRange(1548,1549).addRange(1565,1567).addRange(1642,1645).addRange(1792,1805).addRange(2039,2041).addRange(2096,2110).addRange(2404,2405).addRange(3674,3675).addRange(3844,3858).addRange(4048,4052).addRange(4057,4058).addRange(4170,4175).addRange(4960,4968).addRange(5867,5869).addRange(5941,5942).addRange(6100,6102).addRange(6104,6106).addRange(6144,6149).addRange(6151,6154).addRange(6468,6469).addRange(6686,6687).addRange(6816,6822).addRange(6824,6829).addRange(7002,7008).addRange(7037,7038).addRange(7164,7167).addRange(7227,7231).addRange(7294,7295).addRange(7360,7367).addRange(8214,8215).addRange(8224,8231).addRange(8240,8248).addRange(8251,8254).addRange(8257,8259).addRange(8263,8273).addRange(8277,8286).addRange(11513,11516).addRange(11518,11519).addRange(11776,11777).addRange(11782,11784).addRange(11790,11798).addRange(11800,11801),a.addRange(11806,11807).addRange(11818,11822).addRange(11824,11833).addRange(11836,11839).addRange(11843,11855).addRange(11858,11860).addRange(12289,12291).addRange(42238,42239).addRange(42509,42511).addRange(42738,42743).addRange(43124,43127).addRange(43214,43215).addRange(43256,43258).addRange(43310,43311).addRange(43457,43469).addRange(43486,43487).addRange(43612,43615).addRange(43742,43743).addRange(43760,43761).addRange(65040,65046).addRange(65093,65094).addRange(65097,65100).addRange(65104,65106).addRange(65108,65111).addRange(65119,65121).addRange(65130,65131).addRange(65281,65283).addRange(65285,65287).addRange(65294,65295).addRange(65306,65307).addRange(65311,65312).addRange(65380,65381).addRange(65792,65794).addRange(68176,68184).addRange(68336,68342).addRange(68409,68415).addRange(68505,68508).addRange(69461,69465).addRange(69510,69513).addRange(69703,69709).addRange(69819,69820).addRange(69822,69825).addRange(69952,69955).addRange(70004,70005).addRange(70085,70088).addRange(70109,70111).addRange(70200,70205).addRange(70731,70735).addRange(70746,70747).addRange(71105,71127).addRange(71233,71235),a.addRange(71264,71276).addRange(71484,71486).addRange(72004,72006).addRange(72255,72262).addRange(72346,72348).addRange(72350,72354).addRange(72769,72773).addRange(72816,72817).addRange(73463,73464).addRange(74864,74868).addRange(77809,77810).addRange(92782,92783).addRange(92983,92987).addRange(93847,93850).addRange(121479,121483).addRange(125278,125279),e.exports=a},14212:function(e,t,n){const a=n(45927)(166,169,174,176,1154,1758,1769,2038,2554,2928,3066,3199,3407,3449,3859,3892,3894,3896,5741,6464,8468,8485,8487,8489,8494,8522,8527,8659,12292,12320,12880,43065,64975,65508,65512,65952,68296,71487,92997,113820,119365,123215,126124,126254,129008);a.addRange(1421,1422).addRange(1550,1551).addRange(1789,1790).addRange(3059,3064).addRange(3841,3843).addRange(3861,3863).addRange(3866,3871).addRange(4030,4037).addRange(4039,4044).addRange(4046,4047).addRange(4053,4056).addRange(4254,4255).addRange(5008,5017).addRange(6622,6655).addRange(7009,7018).addRange(7028,7036).addRange(8448,8449).addRange(8451,8454).addRange(8456,8457).addRange(8470,8471).addRange(8478,8483).addRange(8506,8507).addRange(8524,8525).addRange(8586,8587).addRange(8597,8601).addRange(8604,8607).addRange(8609,8610).addRange(8612,8613).addRange(8615,8621).addRange(8623,8653).addRange(8656,8657).addRange(8661,8691).addRange(8960,8967).addRange(8972,8991).addRange(8994,9e3).addRange(9003,9083).addRange(9085,9114).addRange(9140,9179).addRange(9186,9254).addRange(9280,9290).addRange(9372,9449).addRange(9472,9654).addRange(9656,9664).addRange(9666,9719).addRange(9728,9838).addRange(9840,10087).addRange(10132,10175).addRange(10240,10495).addRange(11008,11055).addRange(11077,11078).addRange(11085,11123),a.addRange(11126,11157).addRange(11159,11263).addRange(11493,11498).addRange(11856,11857).addRange(11904,11929).addRange(11931,12019).addRange(12032,12245).addRange(12272,12283).addRange(12306,12307).addRange(12342,12343).addRange(12350,12351).addRange(12688,12689).addRange(12694,12703).addRange(12736,12771).addRange(12800,12830).addRange(12842,12871).addRange(12896,12927).addRange(12938,12976).addRange(12992,13311).addRange(19904,19967).addRange(42128,42182).addRange(43048,43051).addRange(43062,43063).addRange(43639,43641).addRange(64832,64847).addRange(65021,65023).addRange(65517,65518).addRange(65532,65533).addRange(65847,65855).addRange(65913,65929).addRange(65932,65934).addRange(65936,65948).addRange(66e3,66044).addRange(67703,67704).addRange(73685,73692).addRange(73697,73713).addRange(92988,92991).addRange(118608,118723).addRange(118784,119029).addRange(119040,119078).addRange(119081,119140).addRange(119146,119148).addRange(119171,119172).addRange(119180,119209).addRange(119214,119274).addRange(119296,119361).addRange(119552,119638).addRange(120832,121343).addRange(121399,121402).addRange(121453,121460).addRange(121462,121475),a.addRange(121477,121478).addRange(126976,127019).addRange(127024,127123).addRange(127136,127150).addRange(127153,127167).addRange(127169,127183).addRange(127185,127221).addRange(127245,127405).addRange(127462,127490).addRange(127504,127547).addRange(127552,127560).addRange(127568,127569).addRange(127584,127589).addRange(127744,127994).addRange(128e3,128727).addRange(128733,128748).addRange(128752,128764).addRange(128768,128883).addRange(128896,128984).addRange(128992,129003).addRange(129024,129035).addRange(129040,129095).addRange(129104,129113).addRange(129120,129159).addRange(129168,129197).addRange(129200,129201).addRange(129280,129619).addRange(129632,129645).addRange(129648,129652).addRange(129656,129660).addRange(129664,129670).addRange(129680,129708).addRange(129712,129722).addRange(129728,129733).addRange(129744,129753).addRange(129760,129767).addRange(129776,129782).addRange(129792,129938).addRange(129940,129994),e.exports=a},12704:function(e,t,n){const a=n(45927)(8233);e.exports=a},94713:function(e,t,n){const a=n(45927)();a.addRange(57344,63743).addRange(983040,1048573).addRange(1048576,1114109),e.exports=a},59480:function(e,t,n){const a=n(45927)(95,123,125,161,167,171,187,191,894,903,1470,1472,1475,1478,1563,1748,2142,2416,2557,2678,2800,3191,3204,3572,3663,3860,3973,4347,5120,5742,7379,11632,12336,12349,12448,12539,42611,42622,43260,43359,44011,65123,65128,65343,65371,65373,66463,66512,66927,67671,67871,67903,68223,69293,70093,70107,70313,70749,70854,71353,71739,72162,73727,92917,92996,94178,113823);a.addRange(33,35).addRange(37,42).addRange(44,47).addRange(58,59).addRange(63,64).addRange(91,93).addRange(182,183).addRange(1370,1375).addRange(1417,1418).addRange(1523,1524).addRange(1545,1546).addRange(1548,1549).addRange(1565,1567).addRange(1642,1645).addRange(1792,1805).addRange(2039,2041).addRange(2096,2110).addRange(2404,2405).addRange(3674,3675).addRange(3844,3858).addRange(3898,3901).addRange(4048,4052).addRange(4057,4058).addRange(4170,4175).addRange(4960,4968).addRange(5787,5788).addRange(5867,5869).addRange(5941,5942).addRange(6100,6102).addRange(6104,6106).addRange(6144,6154).addRange(6468,6469).addRange(6686,6687).addRange(6816,6822).addRange(6824,6829).addRange(7002,7008).addRange(7037,7038).addRange(7164,7167).addRange(7227,7231).addRange(7294,7295).addRange(7360,7367).addRange(8208,8231).addRange(8240,8259).addRange(8261,8273).addRange(8275,8286).addRange(8317,8318).addRange(8333,8334).addRange(8968,8971).addRange(9001,9002).addRange(10088,10101).addRange(10181,10182),a.addRange(10214,10223).addRange(10627,10648).addRange(10712,10715).addRange(10748,10749).addRange(11513,11516).addRange(11518,11519).addRange(11776,11822).addRange(11824,11855).addRange(11858,11869).addRange(12289,12291).addRange(12296,12305).addRange(12308,12319).addRange(42238,42239).addRange(42509,42511).addRange(42738,42743).addRange(43124,43127).addRange(43214,43215).addRange(43256,43258).addRange(43310,43311).addRange(43457,43469).addRange(43486,43487).addRange(43612,43615).addRange(43742,43743).addRange(43760,43761).addRange(64830,64831).addRange(65040,65049).addRange(65072,65106).addRange(65108,65121).addRange(65130,65131).addRange(65281,65283).addRange(65285,65290).addRange(65292,65295).addRange(65306,65307).addRange(65311,65312).addRange(65339,65341).addRange(65375,65381).addRange(65792,65794).addRange(68176,68184).addRange(68336,68342).addRange(68409,68415).addRange(68505,68508).addRange(69461,69465).addRange(69510,69513).addRange(69703,69709).addRange(69819,69820).addRange(69822,69825).addRange(69952,69955).addRange(70004,70005).addRange(70085,70088).addRange(70109,70111).addRange(70200,70205),a.addRange(70731,70735).addRange(70746,70747).addRange(71105,71127).addRange(71233,71235).addRange(71264,71276).addRange(71484,71486).addRange(72004,72006).addRange(72255,72262).addRange(72346,72348).addRange(72350,72354).addRange(72769,72773).addRange(72816,72817).addRange(73463,73464).addRange(74864,74868).addRange(77809,77810).addRange(92782,92783).addRange(92983,92987).addRange(93847,93850).addRange(121479,121483).addRange(125278,125279),e.exports=a},58476:function(e,t,n){const a=n(45927)(32,160,5760,8239,8287,12288);a.addRange(8192,8202).addRange(8232,8233),e.exports=a},37313:function(e,t,n){const a=n(45927)(32,160,5760,8239,8287,12288);a.addRange(8192,8202),e.exports=a},21123:function(e,t,n){const a=n(45927)(2307,2363,2519,2563,2691,2761,2878,2880,2903,3031,3262,3415,3967,4145,4152,4239,5909,5940,6070,6741,6743,6753,6916,6965,6971,7042,7073,7082,7143,7150,7393,7415,43047,43395,43597,43643,43645,43755,43765,44012,69632,69634,69762,69932,70018,70094,70197,70487,70725,70841,70849,71102,71230,71340,71350,71462,71736,71997,72e3,72002,72164,72249,72343,72751,72766,72873,72881,72884,73110);a.addRange(2366,2368).addRange(2377,2380).addRange(2382,2383).addRange(2434,2435).addRange(2494,2496).addRange(2503,2504).addRange(2507,2508).addRange(2622,2624).addRange(2750,2752).addRange(2763,2764).addRange(2818,2819).addRange(2887,2888).addRange(2891,2892).addRange(3006,3007).addRange(3009,3010).addRange(3014,3016).addRange(3018,3020).addRange(3073,3075).addRange(3137,3140).addRange(3202,3203).addRange(3264,3268).addRange(3271,3272).addRange(3274,3275).addRange(3285,3286).addRange(3330,3331).addRange(3390,3392).addRange(3398,3400).addRange(3402,3404).addRange(3458,3459).addRange(3535,3537).addRange(3544,3551).addRange(3570,3571).addRange(3902,3903).addRange(4139,4140).addRange(4155,4156).addRange(4182,4183).addRange(4194,4196).addRange(4199,4205).addRange(4227,4228).addRange(4231,4236).addRange(4250,4252).addRange(6078,6085).addRange(6087,6088).addRange(6435,6438).addRange(6441,6443).addRange(6448,6449).addRange(6451,6456).addRange(6681,6682).addRange(6755,6756).addRange(6765,6770).addRange(6973,6977),a.addRange(6979,6980).addRange(7078,7079).addRange(7146,7148).addRange(7154,7155).addRange(7204,7211).addRange(7220,7221).addRange(12334,12335).addRange(43043,43044).addRange(43136,43137).addRange(43188,43203).addRange(43346,43347).addRange(43444,43445).addRange(43450,43451).addRange(43454,43456).addRange(43567,43568).addRange(43571,43572).addRange(43758,43759).addRange(44003,44004).addRange(44006,44007).addRange(44009,44010).addRange(69808,69810).addRange(69815,69816).addRange(69957,69958).addRange(70067,70069).addRange(70079,70080).addRange(70188,70190).addRange(70194,70195).addRange(70368,70370).addRange(70402,70403).addRange(70462,70463).addRange(70465,70468).addRange(70471,70472).addRange(70475,70477).addRange(70498,70499).addRange(70709,70711).addRange(70720,70721).addRange(70832,70834).addRange(70843,70846).addRange(71087,71089).addRange(71096,71099).addRange(71216,71218).addRange(71227,71228).addRange(71342,71343).addRange(71456,71457).addRange(71724,71726).addRange(71984,71989).addRange(71991,71992).addRange(72145,72147).addRange(72156,72159).addRange(72279,72280).addRange(73098,73102),a.addRange(73107,73108).addRange(73461,73462).addRange(94033,94087).addRange(94192,94193).addRange(119141,119142).addRange(119149,119154),e.exports=a},90304:function(e,t,n){const a=n(45927)();a.addRange(55296,57343),e.exports=a},91488:function(e,t,n){const a=n(45927)(36,43,94,96,124,126,172,180,184,215,247,749,885,1014,1154,1547,1758,1769,2038,2184,2801,2928,3199,3407,3449,3647,3859,3892,3894,3896,5741,6107,6464,8125,8260,8274,8468,8485,8487,8489,8494,8527,12292,12320,12880,43867,64297,64975,65122,65129,65284,65291,65342,65344,65372,65374,65952,68296,71487,92997,113820,119365,120513,120539,120571,120597,120629,120655,120687,120713,120745,120771,123215,123647,126124,126128,126254,129008);a.addRange(60,62).addRange(162,166).addRange(168,169).addRange(174,177).addRange(706,709).addRange(722,735).addRange(741,747).addRange(751,767).addRange(900,901).addRange(1421,1423).addRange(1542,1544).addRange(1550,1551).addRange(1789,1790).addRange(2046,2047).addRange(2546,2547).addRange(2554,2555).addRange(3059,3066).addRange(3841,3843).addRange(3861,3863).addRange(3866,3871).addRange(4030,4037).addRange(4039,4044).addRange(4046,4047).addRange(4053,4056).addRange(4254,4255).addRange(5008,5017).addRange(6622,6655).addRange(7009,7018).addRange(7028,7036).addRange(8127,8129).addRange(8141,8143).addRange(8157,8159).addRange(8173,8175).addRange(8189,8190).addRange(8314,8316).addRange(8330,8332).addRange(8352,8384).addRange(8448,8449).addRange(8451,8454).addRange(8456,8457).addRange(8470,8472).addRange(8478,8483).addRange(8506,8507).addRange(8512,8516).addRange(8522,8525).addRange(8586,8587).addRange(8592,8967).addRange(8972,9e3).addRange(9003,9254).addRange(9280,9290).addRange(9372,9449),a.addRange(9472,10087).addRange(10132,10180).addRange(10183,10213).addRange(10224,10626).addRange(10649,10711).addRange(10716,10747).addRange(10750,11123).addRange(11126,11157).addRange(11159,11263).addRange(11493,11498).addRange(11856,11857).addRange(11904,11929).addRange(11931,12019).addRange(12032,12245).addRange(12272,12283).addRange(12306,12307).addRange(12342,12343).addRange(12350,12351).addRange(12443,12444).addRange(12688,12689).addRange(12694,12703).addRange(12736,12771).addRange(12800,12830).addRange(12842,12871).addRange(12896,12927).addRange(12938,12976).addRange(12992,13311).addRange(19904,19967).addRange(42128,42182).addRange(42752,42774).addRange(42784,42785).addRange(42889,42890).addRange(43048,43051).addRange(43062,43065).addRange(43639,43641).addRange(43882,43883).addRange(64434,64450).addRange(64832,64847).addRange(65020,65023).addRange(65124,65126).addRange(65308,65310).addRange(65504,65510).addRange(65512,65518).addRange(65532,65533).addRange(65847,65855).addRange(65913,65929).addRange(65932,65934).addRange(65936,65948).addRange(66e3,66044).addRange(67703,67704).addRange(73685,73713),a.addRange(92988,92991).addRange(118608,118723).addRange(118784,119029).addRange(119040,119078).addRange(119081,119140).addRange(119146,119148).addRange(119171,119172).addRange(119180,119209).addRange(119214,119274).addRange(119296,119361).addRange(119552,119638).addRange(120832,121343).addRange(121399,121402).addRange(121453,121460).addRange(121462,121475).addRange(121477,121478).addRange(126704,126705).addRange(126976,127019).addRange(127024,127123).addRange(127136,127150).addRange(127153,127167).addRange(127169,127183).addRange(127185,127221).addRange(127245,127405).addRange(127462,127490).addRange(127504,127547).addRange(127552,127560).addRange(127568,127569).addRange(127584,127589).addRange(127744,128727).addRange(128733,128748).addRange(128752,128764).addRange(128768,128883).addRange(128896,128984).addRange(128992,129003).addRange(129024,129035).addRange(129040,129095).addRange(129104,129113).addRange(129120,129159).addRange(129168,129197).addRange(129200,129201).addRange(129280,129619).addRange(129632,129645).addRange(129648,129652).addRange(129656,129660).addRange(129664,129670).addRange(129680,129708).addRange(129712,129722).addRange(129728,129733).addRange(129744,129753).addRange(129760,129767),a.addRange(129776,129782).addRange(129792,129938).addRange(129940,129994),e.exports=a},43531:function(e,t,n){const a=n(45927)(453,456,459,498,8124,8140,8188);a.addRange(8072,8079).addRange(8088,8095).addRange(8104,8111),e.exports=a},75563:function(e,t,n){const a=n(45927)(907,909,930,1328,1424,1806,2111,2143,2191,2436,2473,2481,2526,2564,2601,2609,2612,2615,2621,2653,2692,2702,2706,2729,2737,2740,2758,2762,2816,2820,2857,2865,2868,2910,2948,2961,2971,2973,3017,3085,3089,3113,3141,3145,3159,3213,3217,3241,3252,3269,3273,3295,3312,3341,3345,3397,3401,3456,3460,3506,3516,3541,3543,3715,3717,3723,3748,3750,3781,3783,3912,3992,4029,4045,4294,4681,4695,4697,4745,4785,4799,4801,4823,4881,5997,6001,6431,6751,7039,8024,8026,8028,8030,8117,8133,8156,8181,8191,8293,8335,11158,11558,11687,11695,11703,11711,11719,11727,11735,11743,11930,12352,12592,12687,12831,42962,42964,43470,43519,43815,43823,64311,64317,64319,64322,64325,65107,65127,65141,65280,65511,65548,65575,65595,65598,65935,66462,66939,66955,66963,66966,66978,66994,67002,67462,67505,67593,67638,67670,67827,68100,68116,68120,69247,69290,69941,70112,70162,70279,70281,70286,70302,70404,70441,70449,70452,70458,70748,71956,71959,71990,72713,72759,72872,72967,72970,73019,73022,73062,73065,73103,73106,74863,78895,92767,92863,93018,93026,110580,110588,110591,119893,119965,119981,119994,119996,120004,120070,120085,120093,120122,120127,120133,120145,121504,122887,122914,122917,124903,124908,124911,124927,126468,126496,126499,126504,126515,126520,126522,126536,126538,126540,126544,126547,126552,126554,126556,126558,126560,126563,126571,126579,126584,126589,126591,126602,126628,126634,127168,127184,129939);a.addRange(888,889).addRange(896,899).addRange(1367,1368).addRange(1419,1420).addRange(1480,1487).addRange(1515,1518).addRange(1525,1535).addRange(1867,1868).addRange(1970,1983).addRange(2043,2044).addRange(2094,2095).addRange(2140,2141).addRange(2155,2159).addRange(2194,2199).addRange(2445,2446).addRange(2449,2450).addRange(2483,2485).addRange(2490,2491).addRange(2501,2502).addRange(2505,2506).addRange(2511,2518).addRange(2520,2523).addRange(2532,2533).addRange(2559,2560).addRange(2571,2574).addRange(2577,2578).addRange(2618,2619).addRange(2627,2630).addRange(2633,2634).addRange(2638,2640).addRange(2642,2648).addRange(2655,2661).addRange(2679,2688).addRange(2746,2747).addRange(2766,2767).addRange(2769,2783).addRange(2788,2789).addRange(2802,2808).addRange(2829,2830).addRange(2833,2834).addRange(2874,2875).addRange(2885,2886).addRange(2889,2890).addRange(2894,2900).addRange(2904,2907).addRange(2916,2917).addRange(2936,2945).addRange(2955,2957).addRange(2966,2968).addRange(2976,2978).addRange(2981,2983),a.addRange(2987,2989).addRange(3002,3005).addRange(3011,3013).addRange(3022,3023).addRange(3025,3030).addRange(3032,3045).addRange(3067,3071).addRange(3130,3131).addRange(3150,3156).addRange(3163,3164).addRange(3166,3167).addRange(3172,3173).addRange(3184,3190).addRange(3258,3259).addRange(3278,3284).addRange(3287,3292).addRange(3300,3301).addRange(3315,3327).addRange(3408,3411).addRange(3428,3429).addRange(3479,3481).addRange(3518,3519).addRange(3527,3529).addRange(3531,3534).addRange(3552,3557).addRange(3568,3569).addRange(3573,3584).addRange(3643,3646).addRange(3676,3712).addRange(3774,3775).addRange(3790,3791).addRange(3802,3803).addRange(3808,3839).addRange(3949,3952).addRange(4059,4095).addRange(4296,4300).addRange(4302,4303).addRange(4686,4687).addRange(4702,4703).addRange(4750,4751).addRange(4790,4791).addRange(4806,4807).addRange(4886,4887).addRange(4955,4956).addRange(4989,4991).addRange(5018,5023).addRange(5110,5111).addRange(5118,5119).addRange(5789,5791).addRange(5881,5887).addRange(5910,5918),a.addRange(5943,5951).addRange(5972,5983).addRange(6004,6015).addRange(6110,6111).addRange(6122,6127).addRange(6138,6143).addRange(6170,6175).addRange(6265,6271).addRange(6315,6319).addRange(6390,6399).addRange(6444,6447).addRange(6460,6463).addRange(6465,6467).addRange(6510,6511).addRange(6517,6527).addRange(6572,6575).addRange(6602,6607).addRange(6619,6621).addRange(6684,6685).addRange(6781,6782).addRange(6794,6799).addRange(6810,6815).addRange(6830,6831).addRange(6863,6911).addRange(6989,6991).addRange(7156,7163).addRange(7224,7226).addRange(7242,7244).addRange(7305,7311).addRange(7355,7356).addRange(7368,7375).addRange(7419,7423).addRange(7958,7959).addRange(7966,7967).addRange(8006,8007).addRange(8014,8015).addRange(8062,8063).addRange(8148,8149).addRange(8176,8177).addRange(8306,8307).addRange(8349,8351).addRange(8385,8399).addRange(8433,8447).addRange(8588,8591).addRange(9255,9279).addRange(9291,9311).addRange(11124,11125).addRange(11508,11512).addRange(11560,11564).addRange(11566,11567).addRange(11624,11630),a.addRange(11633,11646).addRange(11671,11679).addRange(11870,11903).addRange(12020,12031).addRange(12246,12271).addRange(12284,12287).addRange(12439,12440).addRange(12544,12548).addRange(12772,12783).addRange(42125,42127).addRange(42183,42191).addRange(42540,42559).addRange(42744,42751).addRange(42955,42959).addRange(42970,42993).addRange(43053,43055).addRange(43066,43071).addRange(43128,43135).addRange(43206,43213).addRange(43226,43231).addRange(43348,43358).addRange(43389,43391).addRange(43482,43485).addRange(43575,43583).addRange(43598,43599).addRange(43610,43611).addRange(43715,43738).addRange(43767,43776).addRange(43783,43784).addRange(43791,43792).addRange(43799,43807).addRange(43884,43887).addRange(44014,44015).addRange(44026,44031).addRange(55204,55215).addRange(55239,55242).addRange(55292,55295).addRange(64110,64111).addRange(64218,64255).addRange(64263,64274).addRange(64280,64284).addRange(64451,64466).addRange(64912,64913).addRange(64968,64974).addRange(64976,65007).addRange(65050,65055).addRange(65132,65135).addRange(65277,65278).addRange(65471,65473).addRange(65480,65481).addRange(65488,65489),a.addRange(65496,65497).addRange(65501,65503).addRange(65519,65528).addRange(65534,65535).addRange(65614,65615).addRange(65630,65663).addRange(65787,65791).addRange(65795,65798).addRange(65844,65846).addRange(65949,65951).addRange(65953,65999).addRange(66046,66175).addRange(66205,66207).addRange(66257,66271).addRange(66300,66303).addRange(66340,66348).addRange(66379,66383).addRange(66427,66431).addRange(66500,66503).addRange(66518,66559).addRange(66718,66719).addRange(66730,66735).addRange(66772,66775).addRange(66812,66815).addRange(66856,66863).addRange(66916,66926).addRange(67005,67071).addRange(67383,67391).addRange(67414,67423).addRange(67432,67455).addRange(67515,67583).addRange(67590,67591).addRange(67641,67643).addRange(67645,67646).addRange(67743,67750).addRange(67760,67807).addRange(67830,67834).addRange(67868,67870).addRange(67898,67902).addRange(67904,67967).addRange(68024,68027).addRange(68048,68049).addRange(68103,68107).addRange(68150,68151).addRange(68155,68158).addRange(68169,68175).addRange(68185,68191).addRange(68256,68287).addRange(68327,68330).addRange(68343,68351).addRange(68406,68408),a.addRange(68438,68439).addRange(68467,68471).addRange(68498,68504).addRange(68509,68520).addRange(68528,68607).addRange(68681,68735).addRange(68787,68799).addRange(68851,68857).addRange(68904,68911).addRange(68922,69215).addRange(69294,69295).addRange(69298,69375).addRange(69416,69423).addRange(69466,69487).addRange(69514,69551).addRange(69580,69599).addRange(69623,69631).addRange(69710,69713).addRange(69750,69758).addRange(69827,69836).addRange(69838,69839).addRange(69865,69871).addRange(69882,69887).addRange(69960,69967).addRange(70007,70015).addRange(70133,70143).addRange(70207,70271).addRange(70314,70319).addRange(70379,70383).addRange(70394,70399).addRange(70413,70414).addRange(70417,70418).addRange(70469,70470).addRange(70473,70474).addRange(70478,70479).addRange(70481,70486).addRange(70488,70492).addRange(70500,70501).addRange(70509,70511).addRange(70517,70655).addRange(70754,70783).addRange(70856,70863).addRange(70874,71039).addRange(71094,71095).addRange(71134,71167).addRange(71237,71247).addRange(71258,71263).addRange(71277,71295).addRange(71354,71359).addRange(71370,71423).addRange(71451,71452),a.addRange(71468,71471).addRange(71495,71679).addRange(71740,71839).addRange(71923,71934).addRange(71943,71944).addRange(71946,71947).addRange(71993,71994).addRange(72007,72015).addRange(72026,72095).addRange(72104,72105).addRange(72152,72153).addRange(72165,72191).addRange(72264,72271).addRange(72355,72367).addRange(72441,72703).addRange(72774,72783).addRange(72813,72815).addRange(72848,72849).addRange(72887,72959).addRange(73015,73017).addRange(73032,73039).addRange(73050,73055).addRange(73113,73119).addRange(73130,73439).addRange(73465,73647).addRange(73649,73663).addRange(73714,73726).addRange(74650,74751).addRange(74869,74879).addRange(75076,77711).addRange(77811,77823).addRange(78905,82943).addRange(83527,92159).addRange(92729,92735).addRange(92778,92781).addRange(92874,92879).addRange(92910,92911).addRange(92918,92927).addRange(92998,93007).addRange(93048,93052).addRange(93072,93759).addRange(93851,93951).addRange(94027,94030).addRange(94088,94094).addRange(94112,94175).addRange(94181,94191).addRange(94194,94207).addRange(100344,100351).addRange(101590,101631).addRange(101641,110575).addRange(110883,110927),a.addRange(110931,110947).addRange(110952,110959).addRange(111356,113663).addRange(113771,113775).addRange(113789,113791).addRange(113801,113807).addRange(113818,113819).addRange(113828,118527).addRange(118574,118575).addRange(118599,118607).addRange(118724,118783).addRange(119030,119039).addRange(119079,119080).addRange(119275,119295).addRange(119366,119519).addRange(119540,119551).addRange(119639,119647).addRange(119673,119807).addRange(119968,119969).addRange(119971,119972).addRange(119975,119976).addRange(120075,120076).addRange(120135,120137).addRange(120486,120487).addRange(120780,120781).addRange(121484,121498).addRange(121520,122623).addRange(122655,122879).addRange(122905,122906).addRange(122923,123135).addRange(123181,123183).addRange(123198,123199).addRange(123210,123213).addRange(123216,123535).addRange(123567,123583).addRange(123642,123646).addRange(123648,124895).addRange(125125,125126).addRange(125143,125183).addRange(125260,125263).addRange(125274,125277).addRange(125280,126064).addRange(126133,126208).addRange(126270,126463).addRange(126501,126502).addRange(126524,126529).addRange(126531,126534).addRange(126549,126550).addRange(126565,126566).addRange(126620,126624).addRange(126652,126703),a.addRange(126706,126975).addRange(127020,127023).addRange(127124,127135).addRange(127151,127152).addRange(127222,127231).addRange(127406,127461).addRange(127491,127503).addRange(127548,127551).addRange(127561,127567).addRange(127570,127583).addRange(127590,127743).addRange(128728,128732).addRange(128749,128751).addRange(128765,128767).addRange(128884,128895).addRange(128985,128991).addRange(129004,129007).addRange(129009,129023).addRange(129036,129039).addRange(129096,129103).addRange(129114,129119).addRange(129160,129167).addRange(129198,129199).addRange(129202,129279).addRange(129620,129631).addRange(129646,129647).addRange(129653,129655).addRange(129661,129663).addRange(129671,129679).addRange(129709,129711).addRange(129723,129727).addRange(129734,129743).addRange(129754,129759).addRange(129768,129775).addRange(129783,129791).addRange(129995,130031).addRange(130042,131071).addRange(173792,173823).addRange(177977,177983).addRange(178206,178207).addRange(183970,183983).addRange(191457,194559).addRange(195102,196607).addRange(201547,917504).addRange(917506,917535).addRange(917632,917759).addRange(918e3,983039).addRange(1048574,1048575).addRange(1114110,1114111),e.exports=a},80078:function(e,t,n){const a=n(45927)(256,258,260,262,264,266,268,270,272,274,276,278,280,282,284,286,288,290,292,294,296,298,300,302,304,306,308,310,313,315,317,319,321,323,325,327,330,332,334,336,338,340,342,344,346,348,350,352,354,356,358,360,362,364,366,368,370,372,374,379,381,388,418,420,425,428,437,444,452,455,458,461,463,465,467,469,471,473,475,478,480,482,484,486,488,490,492,494,497,500,506,508,510,512,514,516,518,520,522,524,526,528,530,532,534,536,538,540,542,544,546,548,550,552,554,556,558,560,562,577,584,586,588,590,880,882,886,895,902,908,975,984,986,988,990,992,994,996,998,1e3,1002,1004,1006,1012,1015,1120,1122,1124,1126,1128,1130,1132,1134,1136,1138,1140,1142,1144,1146,1148,1150,1152,1162,1164,1166,1168,1170,1172,1174,1176,1178,1180,1182,1184,1186,1188,1190,1192,1194,1196,1198,1200,1202,1204,1206,1208,1210,1212,1214,1219,1221,1223,1225,1227,1229,1232,1234,1236,1238,1240,1242,1244,1246,1248,1250,1252,1254,1256,1258,1260,1262,1264,1266,1268,1270,1272,1274,1276,1278,1280,1282,1284,1286,1288,1290,1292,1294,1296,1298,1300,1302,1304,1306,1308,1310,1312,1314,1316,1318,1320,1322,1324,1326,4295,4301,7680,7682,7684,7686,7688,7690,7692,7694,7696,7698,7700,7702,7704,7706,7708,7710,7712,7714,7716,7718,7720,7722,7724,7726,7728,7730,7732,7734,7736,7738,7740,7742,7744,7746,7748,7750,7752,7754,7756,7758,7760,7762,7764,7766,7768,7770,7772,7774,7776,7778,7780,7782,7784,7786,7788,7790,7792,7794,7796,7798,7800,7802,7804,7806,7808,7810,7812,7814,7816,7818,7820,7822,7824,7826,7828,7838,7840,7842,7844,7846,7848,7850,7852,7854,7856,7858,7860,7862,7864,7866,7868,7870,7872,7874,7876,7878,7880,7882,7884,7886,7888,7890,7892,7894,7896,7898,7900,7902,7904,7906,7908,7910,7912,7914,7916,7918,7920,7922,7924,7926,7928,7930,7932,7934,8025,8027,8029,8031,8450,8455,8469,8484,8486,8488,8517,8579,11360,11367,11369,11371,11378,11381,11394,11396,11398,11400,11402,11404,11406,11408,11410,11412,11414,11416,11418,11420,11422,11424,11426,11428,11430,11432,11434,11436,11438,11440,11442,11444,11446,11448,11450,11452,11454,11456,11458,11460,11462,11464,11466,11468,11470,11472,11474,11476,11478,11480,11482,11484,11486,11488,11490,11499,11501,11506,42560,42562,42564,42566,42568,42570,42572,42574,42576,42578,42580,42582,42584,42586,42588,42590,42592,42594,42596,42598,42600,42602,42604,42624,42626,42628,42630,42632,42634,42636,42638,42640,42642,42644,42646,42648,42650,42786,42788,42790,42792,42794,42796,42798,42802,42804,42806,42808,42810,42812,42814,42816,42818,42820,42822,42824,42826,42828,42830,42832,42834,42836,42838,42840,42842,42844,42846,42848,42850,42852,42854,42856,42858,42860,42862,42873,42875,42880,42882,42884,42886,42891,42893,42896,42898,42902,42904,42906,42908,42910,42912,42914,42916,42918,42920,42934,42936,42938,42940,42942,42944,42946,42953,42960,42966,42968,42997,119964,119970,120134,120778);a.addRange(65,90).addRange(192,214).addRange(216,222).addRange(376,377).addRange(385,386).addRange(390,391).addRange(393,395).addRange(398,401).addRange(403,404).addRange(406,408).addRange(412,413).addRange(415,416).addRange(422,423).addRange(430,431).addRange(433,435).addRange(439,440).addRange(502,504).addRange(570,571).addRange(573,574).addRange(579,582).addRange(904,906).addRange(910,911).addRange(913,929).addRange(931,939).addRange(978,980).addRange(1017,1018).addRange(1021,1071).addRange(1216,1217).addRange(1329,1366).addRange(4256,4293).addRange(5024,5109).addRange(7312,7354).addRange(7357,7359).addRange(7944,7951).addRange(7960,7965).addRange(7976,7983).addRange(7992,7999).addRange(8008,8013).addRange(8040,8047).addRange(8120,8123).addRange(8136,8139).addRange(8152,8155).addRange(8168,8172).addRange(8184,8187).addRange(8459,8461).addRange(8464,8466).addRange(8473,8477).addRange(8490,8493).addRange(8496,8499).addRange(8510,8511).addRange(11264,11311),a.addRange(11362,11364).addRange(11373,11376).addRange(11390,11392).addRange(42877,42878).addRange(42922,42926).addRange(42928,42932).addRange(42948,42951).addRange(65313,65338).addRange(66560,66599).addRange(66736,66771).addRange(66928,66938).addRange(66940,66954).addRange(66956,66962).addRange(66964,66965).addRange(68736,68786).addRange(71840,71871).addRange(93760,93791).addRange(119808,119833).addRange(119860,119885).addRange(119912,119937).addRange(119966,119967).addRange(119973,119974).addRange(119977,119980).addRange(119982,119989).addRange(120016,120041).addRange(120068,120069).addRange(120071,120074).addRange(120077,120084).addRange(120086,120092).addRange(120120,120121).addRange(120123,120126).addRange(120128,120132).addRange(120138,120144).addRange(120172,120197).addRange(120224,120249).addRange(120276,120301).addRange(120328,120353).addRange(120380,120405).addRange(120432,120457).addRange(120488,120512).addRange(120546,120570).addRange(120604,120628).addRange(120662,120686).addRange(120720,120744).addRange(125184,125217),e.exports=a},86950:function(e,t,n){const a=n(45927)();a.addRange(125184,125259).addRange(125264,125273).addRange(125278,125279),e.exports=a},31046:function(e,t,n){const a=n(45927)();a.addRange(71424,71450).addRange(71453,71467).addRange(71472,71494),e.exports=a},74147:function(e,t,n){const a=n(45927)();a.addRange(82944,83526),e.exports=a},85587:function(e,t,n){const a=n(45927)(64975,126500,126503,126521,126523,126530,126535,126537,126539,126548,126551,126553,126555,126557,126559,126564,126590);a.addRange(1536,1540).addRange(1542,1547).addRange(1549,1562).addRange(1564,1566).addRange(1568,1599).addRange(1601,1610).addRange(1622,1647).addRange(1649,1756).addRange(1758,1791).addRange(1872,1919).addRange(2160,2190).addRange(2192,2193).addRange(2200,2273).addRange(2275,2303).addRange(64336,64450).addRange(64467,64829).addRange(64832,64911).addRange(64914,64967).addRange(65008,65023).addRange(65136,65140).addRange(65142,65276).addRange(69216,69246).addRange(126464,126467).addRange(126469,126495).addRange(126497,126498).addRange(126505,126514).addRange(126516,126519).addRange(126541,126543).addRange(126545,126546).addRange(126561,126562).addRange(126567,126570).addRange(126572,126578).addRange(126580,126583).addRange(126585,126588).addRange(126592,126601).addRange(126603,126619).addRange(126625,126627).addRange(126629,126633).addRange(126635,126651).addRange(126704,126705),e.exports=a},61742:function(e,t,n){const a=n(45927)();a.addRange(1329,1366).addRange(1369,1418).addRange(1421,1423).addRange(64275,64279),e.exports=a},66766:function(e,t,n){const a=n(45927)();a.addRange(68352,68405).addRange(68409,68415),e.exports=a},8881:function(e,t,n){const a=n(45927)();a.addRange(6912,6988).addRange(6992,7038),e.exports=a},28993:function(e,t,n){const a=n(45927)();a.addRange(42656,42743).addRange(92160,92728),e.exports=a},1833:function(e,t,n){const a=n(45927)();a.addRange(92880,92909).addRange(92912,92917),e.exports=a},61163:function(e,t,n){const a=n(45927)();a.addRange(7104,7155).addRange(7164,7167),e.exports=a},54089:function(e,t,n){const a=n(45927)(2482,2519);a.addRange(2432,2435).addRange(2437,2444).addRange(2447,2448).addRange(2451,2472).addRange(2474,2480).addRange(2486,2489).addRange(2492,2500).addRange(2503,2504).addRange(2507,2510).addRange(2524,2525).addRange(2527,2531).addRange(2534,2558),e.exports=a},41643:function(e,t,n){const a=n(45927)();a.addRange(72704,72712).addRange(72714,72758).addRange(72760,72773).addRange(72784,72812),e.exports=a},4852:function(e,t,n){const a=n(45927)();a.addRange(746,747).addRange(12549,12591).addRange(12704,12735),e.exports=a},47341:function(e,t,n){const a=n(45927)(69759);a.addRange(69632,69709).addRange(69714,69749),e.exports=a},52594:function(e,t,n){const a=n(45927)();a.addRange(10240,10495),e.exports=a},11567:function(e,t,n){const a=n(45927)();a.addRange(6656,6683).addRange(6686,6687),e.exports=a},8781:function(e,t,n){const a=n(45927)();a.addRange(5952,5971),e.exports=a},29850:function(e,t,n){const a=n(45927)();a.addRange(5120,5759).addRange(6320,6389).addRange(72368,72383),e.exports=a},95120:function(e,t,n){const a=n(45927)();a.addRange(66208,66256),e.exports=a},54491:function(e,t,n){const a=n(45927)(66927);a.addRange(66864,66915),e.exports=a},72895:function(e,t,n){const a=n(45927)();a.addRange(69888,69940).addRange(69942,69959),e.exports=a},82846:function(e,t,n){const a=n(45927)();a.addRange(43520,43574).addRange(43584,43597).addRange(43600,43609).addRange(43612,43615),e.exports=a},87200:function(e,t,n){const a=n(45927)();a.addRange(5024,5109).addRange(5112,5117).addRange(43888,43967),e.exports=a},82673:function(e,t,n){const a=n(45927)();a.addRange(69552,69579),e.exports=a},76892:function(e,t,n){const a=n(45927)(215,247,884,894,901,903,1541,1548,1563,1567,1600,1757,2274,3647,4347,6149,7379,7393,7418,12294,12448,13055,43310,43471,43867,65279,65392,119970,119995,120134,129008,917505);a.addRange(0,64).addRange(91,96).addRange(123,169).addRange(171,185).addRange(187,191).addRange(697,735).addRange(741,745).addRange(748,767).addRange(2404,2405).addRange(4053,4056).addRange(5867,5869).addRange(5941,5942).addRange(6146,6147).addRange(7401,7404).addRange(7406,7411).addRange(7413,7415).addRange(8192,8203).addRange(8206,8292).addRange(8294,8304).addRange(8308,8318).addRange(8320,8334).addRange(8352,8384).addRange(8448,8485).addRange(8487,8489).addRange(8492,8497).addRange(8499,8525).addRange(8527,8543).addRange(8585,8587).addRange(8592,9254).addRange(9280,9290).addRange(9312,10239).addRange(10496,11123).addRange(11126,11157).addRange(11159,11263).addRange(11776,11869).addRange(12272,12283).addRange(12288,12292).addRange(12296,12320).addRange(12336,12343).addRange(12348,12351).addRange(12443,12444).addRange(12539,12540).addRange(12688,12703).addRange(12736,12771).addRange(12832,12895).addRange(12927,13007).addRange(13144,13311).addRange(19904,19967).addRange(42752,42785).addRange(42888,42890).addRange(43056,43065),a.addRange(43882,43883).addRange(64830,64831).addRange(65040,65049).addRange(65072,65106).addRange(65108,65126).addRange(65128,65131).addRange(65281,65312).addRange(65339,65344).addRange(65371,65381).addRange(65438,65439).addRange(65504,65510).addRange(65512,65518).addRange(65529,65533).addRange(65792,65794).addRange(65799,65843).addRange(65847,65855).addRange(65936,65948).addRange(66e3,66044).addRange(66273,66299).addRange(113824,113827).addRange(118608,118723).addRange(118784,119029).addRange(119040,119078).addRange(119081,119142).addRange(119146,119162).addRange(119171,119172).addRange(119180,119209).addRange(119214,119274).addRange(119520,119539).addRange(119552,119638).addRange(119648,119672).addRange(119808,119892).addRange(119894,119964).addRange(119966,119967).addRange(119973,119974).addRange(119977,119980).addRange(119982,119993).addRange(119997,120003).addRange(120005,120069).addRange(120071,120074).addRange(120077,120084).addRange(120086,120092).addRange(120094,120121).addRange(120123,120126).addRange(120128,120132).addRange(120138,120144).addRange(120146,120485).addRange(120488,120779).addRange(120782,120831).addRange(126065,126132).addRange(126209,126269),a.addRange(126976,127019).addRange(127024,127123).addRange(127136,127150).addRange(127153,127167).addRange(127169,127183).addRange(127185,127221).addRange(127232,127405).addRange(127462,127487).addRange(127489,127490).addRange(127504,127547).addRange(127552,127560).addRange(127568,127569).addRange(127584,127589).addRange(127744,128727).addRange(128733,128748).addRange(128752,128764).addRange(128768,128883).addRange(128896,128984).addRange(128992,129003).addRange(129024,129035).addRange(129040,129095).addRange(129104,129113).addRange(129120,129159).addRange(129168,129197).addRange(129200,129201).addRange(129280,129619).addRange(129632,129645).addRange(129648,129652).addRange(129656,129660).addRange(129664,129670).addRange(129680,129708).addRange(129712,129722).addRange(129728,129733).addRange(129744,129753).addRange(129760,129767).addRange(129776,129782).addRange(129792,129938).addRange(129940,129994).addRange(130032,130041).addRange(917536,917631),e.exports=a},37229:function(e,t,n){const a=n(45927)();a.addRange(994,1007).addRange(11392,11507).addRange(11513,11519),e.exports=a},34504:function(e,t,n){const a=n(45927)();a.addRange(73728,74649).addRange(74752,74862).addRange(74864,74868).addRange(74880,75075),e.exports=a},54720:function(e,t,n){const a=n(45927)(67592,67644,67647);a.addRange(67584,67589).addRange(67594,67637).addRange(67639,67640),e.exports=a},89301:function(e,t,n){const a=n(45927)();a.addRange(77712,77810),e.exports=a},29606:function(e,t,n){const a=n(45927)(7467,7544);a.addRange(1024,1156).addRange(1159,1327).addRange(7296,7304).addRange(11744,11775).addRange(42560,42655).addRange(65070,65071),e.exports=a},53923:function(e,t,n){const a=n(45927)();a.addRange(66560,66639),e.exports=a},65104:function(e,t,n){const a=n(45927)();a.addRange(2304,2384).addRange(2389,2403).addRange(2406,2431).addRange(43232,43263),e.exports=a},66682:function(e,t,n){const a=n(45927)(71945);a.addRange(71936,71942).addRange(71948,71955).addRange(71957,71958).addRange(71960,71989).addRange(71991,71992).addRange(71995,72006).addRange(72016,72025),e.exports=a},97107:function(e,t,n){const a=n(45927)();a.addRange(71680,71739),e.exports=a},86692:function(e,t,n){const a=n(45927)();a.addRange(113664,113770).addRange(113776,113788).addRange(113792,113800).addRange(113808,113817).addRange(113820,113823),e.exports=a},16136:function(e,t,n){const a=n(45927)();a.addRange(77824,78894).addRange(78896,78904),e.exports=a},91484:function(e,t,n){const a=n(45927)();a.addRange(66816,66855),e.exports=a},41540:function(e,t,n){const a=n(45927)();a.addRange(69600,69622),e.exports=a},59022:function(e,t,n){const a=n(45927)(4696,4800);a.addRange(4608,4680).addRange(4682,4685).addRange(4688,4694).addRange(4698,4701).addRange(4704,4744).addRange(4746,4749).addRange(4752,4784).addRange(4786,4789).addRange(4792,4798).addRange(4802,4805).addRange(4808,4822).addRange(4824,4880).addRange(4882,4885).addRange(4888,4954).addRange(4957,4988).addRange(4992,5017).addRange(11648,11670).addRange(11680,11686).addRange(11688,11694).addRange(11696,11702).addRange(11704,11710).addRange(11712,11718).addRange(11720,11726).addRange(11728,11734).addRange(11736,11742).addRange(43777,43782).addRange(43785,43790).addRange(43793,43798).addRange(43808,43814).addRange(43816,43822).addRange(124896,124902).addRange(124904,124907).addRange(124909,124910).addRange(124912,124926),e.exports=a},13260:function(e,t,n){const a=n(45927)(4295,4301,11559,11565);a.addRange(4256,4293).addRange(4304,4346).addRange(4348,4351).addRange(7312,7354).addRange(7357,7359).addRange(11520,11557),e.exports=a},23829:function(e,t,n){const a=n(45927)();a.addRange(11264,11359).addRange(122880,122886).addRange(122888,122904).addRange(122907,122913).addRange(122915,122916).addRange(122918,122922),e.exports=a},73058:function(e,t,n){const a=n(45927)();a.addRange(66352,66378),e.exports=a},23213:function(e,t,n){const a=n(45927)(70480,70487);a.addRange(70400,70403).addRange(70405,70412).addRange(70415,70416).addRange(70419,70440).addRange(70442,70448).addRange(70450,70451).addRange(70453,70457).addRange(70460,70468).addRange(70471,70472).addRange(70475,70477).addRange(70493,70499).addRange(70502,70508).addRange(70512,70516),e.exports=a},24623:function(e,t,n){const a=n(45927)(895,900,902,908,7615,8025,8027,8029,8486,43877,65952);a.addRange(880,883).addRange(885,887).addRange(890,893).addRange(904,906).addRange(910,929).addRange(931,993).addRange(1008,1023).addRange(7462,7466).addRange(7517,7521).addRange(7526,7530).addRange(7936,7957).addRange(7960,7965).addRange(7968,8005).addRange(8008,8013).addRange(8016,8023).addRange(8031,8061).addRange(8064,8116).addRange(8118,8132).addRange(8134,8147).addRange(8150,8155).addRange(8157,8175).addRange(8178,8180).addRange(8182,8190).addRange(65856,65934).addRange(119296,119365),e.exports=a},82772:function(e,t,n){const a=n(45927)(2768);a.addRange(2689,2691).addRange(2693,2701).addRange(2703,2705).addRange(2707,2728).addRange(2730,2736).addRange(2738,2739).addRange(2741,2745).addRange(2748,2757).addRange(2759,2761).addRange(2763,2765).addRange(2784,2787).addRange(2790,2801).addRange(2809,2815),e.exports=a},2594:function(e,t,n){const a=n(45927)();a.addRange(73056,73061).addRange(73063,73064).addRange(73066,73102).addRange(73104,73105).addRange(73107,73112).addRange(73120,73129),e.exports=a},53180:function(e,t,n){const a=n(45927)(2620,2641,2654);a.addRange(2561,2563).addRange(2565,2570).addRange(2575,2576).addRange(2579,2600).addRange(2602,2608).addRange(2610,2611).addRange(2613,2614).addRange(2616,2617).addRange(2622,2626).addRange(2631,2632).addRange(2635,2637).addRange(2649,2652).addRange(2662,2678),e.exports=a},77211:function(e,t,n){const a=n(45927)(12293,12295);a.addRange(11904,11929).addRange(11931,12019).addRange(12032,12245).addRange(12321,12329).addRange(12344,12347).addRange(13312,19903).addRange(19968,40959).addRange(63744,64109).addRange(64112,64217).addRange(94178,94179).addRange(94192,94193).addRange(131072,173791).addRange(173824,177976).addRange(177984,178205).addRange(178208,183969).addRange(183984,191456).addRange(194560,195101).addRange(196608,201546),e.exports=a},27548:function(e,t,n){const a=n(45927)();a.addRange(4352,4607).addRange(12334,12335).addRange(12593,12686).addRange(12800,12830).addRange(12896,12926).addRange(43360,43388).addRange(44032,55203).addRange(55216,55238).addRange(55243,55291).addRange(65440,65470).addRange(65474,65479).addRange(65482,65487).addRange(65490,65495).addRange(65498,65500),e.exports=a},92452:function(e,t,n){const a=n(45927)();a.addRange(68864,68903).addRange(68912,68921),e.exports=a},60683:function(e,t,n){const a=n(45927)();a.addRange(5920,5940),e.exports=a},86724:function(e,t,n){const a=n(45927)();a.addRange(67808,67826).addRange(67828,67829).addRange(67835,67839),e.exports=a},9761:function(e,t,n){const a=n(45927)(64318);a.addRange(1425,1479).addRange(1488,1514).addRange(1519,1524).addRange(64285,64310).addRange(64312,64316).addRange(64320,64321).addRange(64323,64324).addRange(64326,64335),e.exports=a},19008:function(e,t,n){const a=n(45927)(127488);a.addRange(12353,12438).addRange(12445,12447).addRange(110593,110879).addRange(110928,110930),e.exports=a},35272:function(e,t,n){const a=n(45927)();a.addRange(67648,67669).addRange(67671,67679),e.exports=a},41526:function(e,t,n){const a=n(45927)(1648,7405,7412,66045,66272,70459);a.addRange(768,879).addRange(1157,1158).addRange(1611,1621).addRange(2385,2388).addRange(6832,6862).addRange(7376,7378).addRange(7380,7392).addRange(7394,7400).addRange(7416,7417).addRange(7616,7679).addRange(8204,8205).addRange(8400,8432).addRange(12330,12333).addRange(12441,12442).addRange(65024,65039).addRange(65056,65069).addRange(118528,118573).addRange(118576,118598).addRange(119143,119145).addRange(119163,119170).addRange(119173,119179).addRange(119210,119213).addRange(917760,917999),e.exports=a},7826:function(e,t,n){const a=n(45927)();a.addRange(68448,68466).addRange(68472,68479),e.exports=a},19525:function(e,t,n){const a=n(45927)();a.addRange(68416,68437).addRange(68440,68447),e.exports=a},73328:function(e,t,n){const a=n(45927)();a.addRange(43392,43469).addRange(43472,43481).addRange(43486,43487),e.exports=a},68306:function(e,t,n){const a=n(45927)(69837);a.addRange(69760,69826),e.exports=a},97635:function(e,t,n){const a=n(45927)();a.addRange(3200,3212).addRange(3214,3216).addRange(3218,3240).addRange(3242,3251).addRange(3253,3257).addRange(3260,3268).addRange(3270,3272).addRange(3274,3277).addRange(3285,3286).addRange(3293,3294).addRange(3296,3299).addRange(3302,3311).addRange(3313,3314),e.exports=a},27667:function(e,t,n){const a=n(45927)(110592);a.addRange(12449,12538).addRange(12541,12543).addRange(12784,12799).addRange(13008,13054).addRange(13056,13143).addRange(65382,65391).addRange(65393,65437).addRange(110576,110579).addRange(110581,110587).addRange(110589,110590).addRange(110880,110882).addRange(110948,110951),e.exports=a},73636:function(e,t,n){const a=n(45927)(43311);a.addRange(43264,43309),e.exports=a},50613:function(e,t,n){const a=n(45927)();a.addRange(68096,68099).addRange(68101,68102).addRange(68108,68115).addRange(68117,68119).addRange(68121,68149).addRange(68152,68154).addRange(68159,68168).addRange(68176,68184),e.exports=a},77118:function(e,t,n){const a=n(45927)(94180);a.addRange(101120,101589),e.exports=a},12263:function(e,t,n){const a=n(45927)();a.addRange(6016,6109).addRange(6112,6121).addRange(6128,6137).addRange(6624,6655),e.exports=a},91638:function(e,t,n){const a=n(45927)();a.addRange(70144,70161).addRange(70163,70206),e.exports=a},90599:function(e,t,n){const a=n(45927)();a.addRange(70320,70378).addRange(70384,70393),e.exports=a},19350:function(e,t,n){const a=n(45927)(3716,3749,3782);a.addRange(3713,3714).addRange(3718,3722).addRange(3724,3747).addRange(3751,3773).addRange(3776,3780).addRange(3784,3789).addRange(3792,3801).addRange(3804,3807),e.exports=a},75303:function(e,t,n){const a=n(45927)(170,186,8305,8319,8498,8526,42963);a.addRange(65,90).addRange(97,122).addRange(192,214).addRange(216,246).addRange(248,696).addRange(736,740).addRange(7424,7461).addRange(7468,7516).addRange(7522,7525).addRange(7531,7543).addRange(7545,7614).addRange(7680,7935).addRange(8336,8348).addRange(8490,8491).addRange(8544,8584).addRange(11360,11391).addRange(42786,42887).addRange(42891,42954).addRange(42960,42961).addRange(42965,42969).addRange(42994,43007).addRange(43824,43866).addRange(43868,43876).addRange(43878,43881).addRange(64256,64262).addRange(65313,65338).addRange(65345,65370).addRange(67456,67461).addRange(67463,67504).addRange(67506,67514).addRange(122624,122654),e.exports=a},66937:function(e,t,n){const a=n(45927)();a.addRange(7168,7223).addRange(7227,7241).addRange(7245,7247),e.exports=a},44752:function(e,t,n){const a=n(45927)(6464);a.addRange(6400,6430).addRange(6432,6443).addRange(6448,6459).addRange(6468,6479),e.exports=a},88211:function(e,t,n){const a=n(45927)();a.addRange(67072,67382).addRange(67392,67413).addRange(67424,67431),e.exports=a},8601:function(e,t,n){const a=n(45927)();a.addRange(65536,65547).addRange(65549,65574).addRange(65576,65594).addRange(65596,65597).addRange(65599,65613).addRange(65616,65629).addRange(65664,65786),e.exports=a},52378:function(e,t,n){const a=n(45927)(73648);a.addRange(42192,42239),e.exports=a},58516:function(e,t,n){const a=n(45927)();a.addRange(66176,66204),e.exports=a},88289:function(e,t,n){const a=n(45927)(67903);a.addRange(67872,67897),e.exports=a},68861:function(e,t,n){const a=n(45927)();a.addRange(69968,70006),e.exports=a},49983:function(e,t,n){const a=n(45927)();a.addRange(73440,73464),e.exports=a},57014:function(e,t,n){const a=n(45927)();a.addRange(3328,3340).addRange(3342,3344).addRange(3346,3396).addRange(3398,3400).addRange(3402,3407).addRange(3412,3427).addRange(3430,3455),e.exports=a},94365:function(e,t,n){const a=n(45927)(2142);a.addRange(2112,2139),e.exports=a},21146:function(e,t,n){const a=n(45927)();a.addRange(68288,68326).addRange(68331,68342),e.exports=a},27240:function(e,t,n){const a=n(45927)();a.addRange(72816,72847).addRange(72850,72871).addRange(72873,72886),e.exports=a},96527:function(e,t,n){const a=n(45927)(73018);a.addRange(72960,72966).addRange(72968,72969).addRange(72971,73014).addRange(73020,73021).addRange(73023,73031).addRange(73040,73049),e.exports=a},54812:function(e,t,n){const a=n(45927)();a.addRange(93760,93850),e.exports=a},53286:function(e,t,n){const a=n(45927)();a.addRange(43744,43766).addRange(43968,44013).addRange(44016,44025),e.exports=a},88038:function(e,t,n){const a=n(45927)();a.addRange(124928,125124).addRange(125127,125142),e.exports=a},88521:function(e,t,n){const a=n(45927)();a.addRange(68e3,68023).addRange(68028,68047).addRange(68050,68095),e.exports=a},32743:function(e,t,n){const a=n(45927)();a.addRange(67968,67999),e.exports=a},7226:function(e,t,n){const a=n(45927)();a.addRange(93952,94026).addRange(94031,94087).addRange(94095,94111),e.exports=a},77566:function(e,t,n){const a=n(45927)();a.addRange(71168,71236).addRange(71248,71257),e.exports=a},88800:function(e,t,n){const a=n(45927)(6148);a.addRange(6144,6145).addRange(6150,6169).addRange(6176,6264).addRange(6272,6314).addRange(71264,71276),e.exports=a},24205:function(e,t,n){const a=n(45927)();a.addRange(92736,92766).addRange(92768,92777).addRange(92782,92783),e.exports=a},361:function(e,t,n){const a=n(45927)(70280);a.addRange(70272,70278).addRange(70282,70285).addRange(70287,70301).addRange(70303,70313),e.exports=a},34197:function(e,t,n){const a=n(45927)();a.addRange(4096,4255).addRange(43488,43518).addRange(43616,43647),e.exports=a},55314:function(e,t,n){const a=n(45927)();a.addRange(67712,67742).addRange(67751,67759),e.exports=a},26546:function(e,t,n){const a=n(45927)();a.addRange(72096,72103).addRange(72106,72151).addRange(72154,72164),e.exports=a},50431:function(e,t,n){const a=n(45927)();a.addRange(6528,6571).addRange(6576,6601).addRange(6608,6618).addRange(6622,6623),e.exports=a},8860:function(e,t,n){const a=n(45927)();a.addRange(70656,70747).addRange(70749,70753),e.exports=a},7219:function(e,t,n){const a=n(45927)();a.addRange(1984,2042).addRange(2045,2047),e.exports=a},51758:function(e,t,n){const a=n(45927)(94177);a.addRange(110960,111355),e.exports=a},47096:function(e,t,n){const a=n(45927)();a.addRange(123136,123180).addRange(123184,123197).addRange(123200,123209).addRange(123214,123215),e.exports=a},47504:function(e,t,n){const a=n(45927)();a.addRange(5760,5788),e.exports=a},52609:function(e,t,n){const a=n(45927)();a.addRange(7248,7295),e.exports=a},34239:function(e,t,n){const a=n(45927)();a.addRange(68736,68786).addRange(68800,68850).addRange(68858,68863),e.exports=a},61789:function(e,t,n){const a=n(45927)();a.addRange(66304,66339).addRange(66349,66351),e.exports=a},63872:function(e,t,n){const a=n(45927)();a.addRange(68224,68255),e.exports=a},33543:function(e,t,n){const a=n(45927)();a.addRange(66384,66426),e.exports=a},58580:function(e,t,n){const a=n(45927)();a.addRange(66464,66499).addRange(66504,66517),e.exports=a},45167:function(e,t,n){const a=n(45927)();a.addRange(69376,69415),e.exports=a},66357:function(e,t,n){const a=n(45927)();a.addRange(68192,68223),e.exports=a},78500:function(e,t,n){const a=n(45927)();a.addRange(68608,68680),e.exports=a},62853:function(e,t,n){const a=n(45927)();a.addRange(69488,69513),e.exports=a},54957:function(e,t,n){const a=n(45927)();a.addRange(2817,2819).addRange(2821,2828).addRange(2831,2832).addRange(2835,2856).addRange(2858,2864).addRange(2866,2867).addRange(2869,2873).addRange(2876,2884).addRange(2887,2888).addRange(2891,2893).addRange(2901,2903).addRange(2908,2909).addRange(2911,2915).addRange(2918,2935),e.exports=a},67159:function(e,t,n){const a=n(45927)();a.addRange(66736,66771).addRange(66776,66811),e.exports=a},82280:function(e,t,n){const a=n(45927)();a.addRange(66688,66717).addRange(66720,66729),e.exports=a},2283:function(e,t,n){const a=n(45927)();a.addRange(92928,92997).addRange(93008,93017).addRange(93019,93025).addRange(93027,93047).addRange(93053,93071),e.exports=a},19570:function(e,t,n){const a=n(45927)();a.addRange(67680,67711),e.exports=a},33786:function(e,t,n){const a=n(45927)();a.addRange(72384,72440),e.exports=a},17481:function(e,t,n){const a=n(45927)();a.addRange(43072,43127),e.exports=a},16862:function(e,t,n){const a=n(45927)(67871);a.addRange(67840,67867),e.exports=a},91303:function(e,t,n){const a=n(45927)();a.addRange(68480,68497).addRange(68505,68508).addRange(68521,68527),e.exports=a},26545:function(e,t,n){const a=n(45927)(43359);a.addRange(43312,43347),e.exports=a},76679:function(e,t,n){const a=n(45927)();a.addRange(5792,5866).addRange(5870,5880),e.exports=a},37047:function(e,t,n){const a=n(45927)();a.addRange(2048,2093).addRange(2096,2110),e.exports=a},72274:function(e,t,n){const a=n(45927)();a.addRange(43136,43205).addRange(43214,43225),e.exports=a},91447:function(e,t,n){const a=n(45927)();a.addRange(70016,70111),e.exports=a},61330:function(e,t,n){const a=n(45927)();a.addRange(66640,66687),e.exports=a},11739:function(e,t,n){const a=n(45927)();a.addRange(71040,71093).addRange(71096,71133),e.exports=a},51063:function(e,t,n){const a=n(45927)();a.addRange(120832,121483).addRange(121499,121503).addRange(121505,121519),e.exports=a},60286:function(e,t,n){const a=n(45927)(3517,3530,3542);a.addRange(3457,3459).addRange(3461,3478).addRange(3482,3505).addRange(3507,3515).addRange(3520,3526).addRange(3535,3540).addRange(3544,3551).addRange(3558,3567).addRange(3570,3572).addRange(70113,70132),e.exports=a},18594:function(e,t,n){const a=n(45927)();a.addRange(69424,69465),e.exports=a},11144:function(e,t,n){const a=n(45927)();a.addRange(69840,69864).addRange(69872,69881),e.exports=a},34552:function(e,t,n){const a=n(45927)();a.addRange(72272,72354),e.exports=a},14585:function(e,t,n){const a=n(45927)();a.addRange(7040,7103).addRange(7360,7367),e.exports=a},87143:function(e,t,n){const a=n(45927)();a.addRange(43008,43052),e.exports=a},15481:function(e,t,n){const a=n(45927)();a.addRange(1792,1805).addRange(1807,1866).addRange(1869,1871).addRange(2144,2154),e.exports=a},16514:function(e,t,n){const a=n(45927)(5919);a.addRange(5888,5909),e.exports=a},44145:function(e,t,n){const a=n(45927)();a.addRange(5984,5996).addRange(5998,6e3).addRange(6002,6003),e.exports=a},53521:function(e,t,n){const a=n(45927)();a.addRange(6480,6509).addRange(6512,6516),e.exports=a},57116:function(e,t,n){const a=n(45927)();a.addRange(6688,6750).addRange(6752,6780).addRange(6783,6793).addRange(6800,6809).addRange(6816,6829),e.exports=a},63114:function(e,t,n){const a=n(45927)();a.addRange(43648,43714).addRange(43739,43743),e.exports=a},43596:function(e,t,n){const a=n(45927)();a.addRange(71296,71353).addRange(71360,71369),e.exports=a},39027:function(e,t,n){const a=n(45927)(2972,3024,3031,73727);a.addRange(2946,2947).addRange(2949,2954).addRange(2958,2960).addRange(2962,2965).addRange(2969,2970).addRange(2974,2975).addRange(2979,2980).addRange(2984,2986).addRange(2990,3001).addRange(3006,3010).addRange(3014,3016).addRange(3018,3021).addRange(3046,3066).addRange(73664,73713),e.exports=a},46250:function(e,t,n){const a=n(45927)();a.addRange(92784,92862).addRange(92864,92873),e.exports=a},27103:function(e,t,n){const a=n(45927)(94176);a.addRange(94208,100343).addRange(100352,101119).addRange(101632,101640),e.exports=a},32979:function(e,t,n){const a=n(45927)(3165);a.addRange(3072,3084).addRange(3086,3088).addRange(3090,3112).addRange(3114,3129).addRange(3132,3140).addRange(3142,3144).addRange(3146,3149).addRange(3157,3158).addRange(3160,3162).addRange(3168,3171).addRange(3174,3183).addRange(3191,3199),e.exports=a},50764:function(e,t,n){const a=n(45927)();a.addRange(1920,1969),e.exports=a},40950:function(e,t,n){const a=n(45927)();a.addRange(3585,3642).addRange(3648,3675),e.exports=a},84063:function(e,t,n){const a=n(45927)();a.addRange(3840,3911).addRange(3913,3948).addRange(3953,3991).addRange(3993,4028).addRange(4030,4044).addRange(4046,4052).addRange(4057,4058),e.exports=a},83173:function(e,t,n){const a=n(45927)(11647);a.addRange(11568,11623).addRange(11631,11632),e.exports=a},36756:function(e,t,n){const a=n(45927)();a.addRange(70784,70855).addRange(70864,70873),e.exports=a},6610:function(e,t,n){const a=n(45927)();a.addRange(123536,123566),e.exports=a},75674:function(e,t,n){const a=n(45927)(66463);a.addRange(66432,66461),e.exports=a},50928:function(e,t,n){const a=n(45927)();a.addRange(42240,42539),e.exports=a},74243:function(e,t,n){const a=n(45927)();a.addRange(66928,66938).addRange(66940,66954).addRange(66956,66962).addRange(66964,66965).addRange(66967,66977).addRange(66979,66993).addRange(66995,67001).addRange(67003,67004),e.exports=a},53614:function(e,t,n){const a=n(45927)(123647);a.addRange(123584,123641),e.exports=a},70112:function(e,t,n){const a=n(45927)(71935);a.addRange(71840,71922),e.exports=a},47087:function(e,t,n){const a=n(45927)();a.addRange(69248,69289).addRange(69291,69293).addRange(69296,69297),e.exports=a},28857:function(e,t,n){const a=n(45927)();a.addRange(40960,42124).addRange(42128,42182),e.exports=a},62490:function(e,t,n){const a=n(45927)();a.addRange(72192,72263),e.exports=a},94109:function(e,t,n){const a=n(45927)(1567,1600);a.addRange(125184,125259).addRange(125264,125273).addRange(125278,125279),e.exports=a},76193:function(e,t,n){const a=n(45927)();a.addRange(71424,71450).addRange(71453,71467).addRange(71472,71494),e.exports=a},16126:function(e,t,n){const a=n(45927)();a.addRange(82944,83526),e.exports=a},84679:function(e,t,n){const a=n(45927)(64975,126500,126503,126521,126523,126530,126535,126537,126539,126548,126551,126553,126555,126557,126559,126564,126590);a.addRange(1536,1540).addRange(1542,1756).addRange(1758,1791).addRange(1872,1919).addRange(2160,2190).addRange(2192,2193).addRange(2200,2273).addRange(2275,2303).addRange(64336,64450).addRange(64467,64911).addRange(64914,64967).addRange(65008,65023).addRange(65136,65140).addRange(65142,65276).addRange(66272,66299).addRange(69216,69246).addRange(126464,126467).addRange(126469,126495).addRange(126497,126498).addRange(126505,126514).addRange(126516,126519).addRange(126541,126543).addRange(126545,126546).addRange(126561,126562).addRange(126567,126570).addRange(126572,126578).addRange(126580,126583).addRange(126585,126588).addRange(126592,126601).addRange(126603,126619).addRange(126625,126627).addRange(126629,126633).addRange(126635,126651).addRange(126704,126705),e.exports=a},63338:function(e,t,n){const a=n(45927)();a.addRange(1329,1366).addRange(1369,1418).addRange(1421,1423).addRange(64275,64279),e.exports=a},63464:function(e,t,n){const a=n(45927)();a.addRange(68352,68405).addRange(68409,68415),e.exports=a},50567:function(e,t,n){const a=n(45927)();a.addRange(6912,6988).addRange(6992,7038),e.exports=a},4141:function(e,t,n){const a=n(45927)();a.addRange(42656,42743).addRange(92160,92728),e.exports=a},15359:function(e,t,n){const a=n(45927)();a.addRange(92880,92909).addRange(92912,92917),e.exports=a},95237:function(e,t,n){const a=n(45927)();a.addRange(7104,7155).addRange(7164,7167),e.exports=a},91164:function(e,t,n){const a=n(45927)(2482,2519,7376,7378,7384,7393,7402,7405,7410,43249);a.addRange(2385,2386).addRange(2404,2405).addRange(2432,2435).addRange(2437,2444).addRange(2447,2448).addRange(2451,2472).addRange(2474,2480).addRange(2486,2489).addRange(2492,2500).addRange(2503,2504).addRange(2507,2510).addRange(2524,2525).addRange(2527,2531).addRange(2534,2558).addRange(7381,7382).addRange(7413,7415),e.exports=a},41261:function(e,t,n){const a=n(45927)();a.addRange(72704,72712).addRange(72714,72758).addRange(72760,72773).addRange(72784,72812),e.exports=a},1707:function(e,t,n){const a=n(45927)(12336,12343,12539);a.addRange(746,747).addRange(12289,12291).addRange(12296,12305).addRange(12307,12319).addRange(12330,12333).addRange(12549,12591).addRange(12704,12735).addRange(65093,65094).addRange(65377,65381),e.exports=a},23969:function(e,t,n){const a=n(45927)(69759);a.addRange(69632,69709).addRange(69714,69749),e.exports=a},61054:function(e,t,n){const a=n(45927)();a.addRange(10240,10495),e.exports=a},97127:function(e,t,n){const a=n(45927)(43471);a.addRange(6656,6683).addRange(6686,6687),e.exports=a},91916:function(e,t,n){const a=n(45927)();a.addRange(5941,5942).addRange(5952,5971),e.exports=a},50894:function(e,t,n){const a=n(45927)();a.addRange(5120,5759).addRange(6320,6389).addRange(72368,72383),e.exports=a},44053:function(e,t,n){const a=n(45927)();a.addRange(66208,66256),e.exports=a},89552:function(e,t,n){const a=n(45927)(66927);a.addRange(66864,66915),e.exports=a},18858:function(e,t,n){const a=n(45927)();a.addRange(2534,2543).addRange(4160,4169).addRange(69888,69940).addRange(69942,69959),e.exports=a},82001:function(e,t,n){const a=n(45927)();a.addRange(43520,43574).addRange(43584,43597).addRange(43600,43609).addRange(43612,43615),e.exports=a},84002:function(e,t,n){const a=n(45927)();a.addRange(5024,5109).addRange(5112,5117).addRange(43888,43967),e.exports=a},95472:function(e,t,n){const a=n(45927)();a.addRange(69552,69579),e.exports=a},11851:function(e,t,n){const a=n(45927)(215,247,884,894,901,903,1541,1757,2274,3647,12288,12292,12306,12320,12342,12927,13311,43867,65279,119970,119995,120134,129008,917505);a.addRange(0,64).addRange(91,96).addRange(123,169).addRange(171,185).addRange(187,191).addRange(697,735).addRange(741,745).addRange(748,767).addRange(4053,4056).addRange(5867,5869).addRange(8192,8203).addRange(8206,8238).addRange(8240,8292).addRange(8294,8304).addRange(8308,8318).addRange(8320,8334).addRange(8352,8384).addRange(8448,8485).addRange(8487,8489).addRange(8492,8497).addRange(8499,8525).addRange(8527,8543).addRange(8585,8587).addRange(8592,9254).addRange(9280,9290).addRange(9312,10239).addRange(10496,11123).addRange(11126,11157).addRange(11159,11263).addRange(11776,11842).addRange(11844,11869).addRange(12272,12283).addRange(12872,12895).addRange(12977,12991).addRange(13004,13007).addRange(13169,13178).addRange(13184,13279).addRange(19904,19967).addRange(42760,42785).addRange(42888,42890).addRange(43882,43883).addRange(65040,65049).addRange(65072,65092).addRange(65095,65106).addRange(65108,65126).addRange(65128,65131).addRange(65281,65312).addRange(65339,65344).addRange(65371,65376).addRange(65504,65510).addRange(65512,65518),a.addRange(65529,65533).addRange(65936,65948).addRange(66e3,66044).addRange(118608,118723).addRange(118784,119029).addRange(119040,119078).addRange(119081,119142).addRange(119146,119162).addRange(119171,119172).addRange(119180,119209).addRange(119214,119274).addRange(119520,119539).addRange(119552,119638).addRange(119666,119672).addRange(119808,119892).addRange(119894,119964).addRange(119966,119967).addRange(119973,119974).addRange(119977,119980).addRange(119982,119993).addRange(119997,120003).addRange(120005,120069).addRange(120071,120074).addRange(120077,120084).addRange(120086,120092).addRange(120094,120121).addRange(120123,120126).addRange(120128,120132).addRange(120138,120144).addRange(120146,120485).addRange(120488,120779).addRange(120782,120831).addRange(126065,126132).addRange(126209,126269).addRange(126976,127019).addRange(127024,127123).addRange(127136,127150).addRange(127153,127167).addRange(127169,127183).addRange(127185,127221).addRange(127232,127405).addRange(127462,127487).addRange(127489,127490).addRange(127504,127547).addRange(127552,127560).addRange(127584,127589).addRange(127744,128727).addRange(128733,128748).addRange(128752,128764).addRange(128768,128883).addRange(128896,128984),a.addRange(128992,129003).addRange(129024,129035).addRange(129040,129095).addRange(129104,129113).addRange(129120,129159).addRange(129168,129197).addRange(129200,129201).addRange(129280,129619).addRange(129632,129645).addRange(129648,129652).addRange(129656,129660).addRange(129664,129670).addRange(129680,129708).addRange(129712,129722).addRange(129728,129733).addRange(129744,129753).addRange(129760,129767).addRange(129776,129782).addRange(129792,129938).addRange(129940,129994).addRange(130032,130041).addRange(917536,917631),e.exports=a},43449:function(e,t,n){const a=n(45927)();a.addRange(994,1007).addRange(11392,11507).addRange(11513,11519).addRange(66272,66299),e.exports=a},17475:function(e,t,n){const a=n(45927)();a.addRange(73728,74649).addRange(74752,74862).addRange(74864,74868).addRange(74880,75075),e.exports=a},62088:function(e,t,n){const a=n(45927)(67592,67644,67647);a.addRange(65792,65794).addRange(65799,65843).addRange(65847,65855).addRange(67584,67589).addRange(67594,67637).addRange(67639,67640),e.exports=a},31672:function(e,t,n){const a=n(45927)();a.addRange(65792,65793).addRange(77712,77810),e.exports=a},48502:function(e,t,n){const a=n(45927)(7467,7544,7672,11843);a.addRange(1024,1327).addRange(7296,7304).addRange(11744,11775).addRange(42560,42655).addRange(65070,65071),e.exports=a},26622:function(e,t,n){const a=n(45927)();a.addRange(66560,66639),e.exports=a},87671:function(e,t,n){const a=n(45927)(8432);a.addRange(2304,2386).addRange(2389,2431).addRange(7376,7414).addRange(7416,7417).addRange(43056,43065).addRange(43232,43263),e.exports=a},17685:function(e,t,n){const a=n(45927)(71945);a.addRange(71936,71942).addRange(71948,71955).addRange(71957,71958).addRange(71960,71989).addRange(71991,71992).addRange(71995,72006).addRange(72016,72025),e.exports=a},35987:function(e,t,n){const a=n(45927)();a.addRange(2404,2415).addRange(43056,43065).addRange(71680,71739),e.exports=a},79564:function(e,t,n){const a=n(45927)();a.addRange(113664,113770).addRange(113776,113788).addRange(113792,113800).addRange(113808,113817).addRange(113820,113827),e.exports=a},8848:function(e,t,n){const a=n(45927)();a.addRange(77824,78894).addRange(78896,78904),e.exports=a},69654:function(e,t,n){const a=n(45927)();a.addRange(66816,66855),e.exports=a},3379:function(e,t,n){const a=n(45927)();a.addRange(69600,69622),e.exports=a},88637:function(e,t,n){const a=n(45927)(4696,4800);a.addRange(4608,4680).addRange(4682,4685).addRange(4688,4694).addRange(4698,4701).addRange(4704,4744).addRange(4746,4749).addRange(4752,4784).addRange(4786,4789).addRange(4792,4798).addRange(4802,4805).addRange(4808,4822).addRange(4824,4880).addRange(4882,4885).addRange(4888,4954).addRange(4957,4988).addRange(4992,5017).addRange(11648,11670).addRange(11680,11686).addRange(11688,11694).addRange(11696,11702).addRange(11704,11710).addRange(11712,11718).addRange(11720,11726).addRange(11728,11734).addRange(11736,11742).addRange(43777,43782).addRange(43785,43790).addRange(43793,43798).addRange(43808,43814).addRange(43816,43822).addRange(124896,124902).addRange(124904,124907).addRange(124909,124910).addRange(124912,124926),e.exports=a},40873:function(e,t,n){const a=n(45927)(4295,4301,11559,11565);a.addRange(4256,4293).addRange(4304,4351).addRange(7312,7354).addRange(7357,7359).addRange(11520,11557),e.exports=a},8050:function(e,t,n){const a=n(45927)(1156,1159,11843,42607);a.addRange(11264,11359).addRange(122880,122886).addRange(122888,122904).addRange(122907,122913).addRange(122915,122916).addRange(122918,122922),e.exports=a},43907:function(e,t,n){const a=n(45927)();a.addRange(66352,66378),e.exports=a},49720:function(e,t,n){const a=n(45927)(7376,8432,70480,70487,73683);a.addRange(2385,2386).addRange(2404,2405).addRange(3046,3059).addRange(7378,7379).addRange(7410,7412).addRange(7416,7417).addRange(70400,70403).addRange(70405,70412).addRange(70415,70416).addRange(70419,70440).addRange(70442,70448).addRange(70450,70451).addRange(70453,70457).addRange(70459,70468).addRange(70471,70472).addRange(70475,70477).addRange(70493,70499).addRange(70502,70508).addRange(70512,70516).addRange(73680,73681),e.exports=a},94712:function(e,t,n){const a=n(45927)(834,837,895,900,902,908,8025,8027,8029,8486,43877,65952);a.addRange(880,883).addRange(885,887).addRange(890,893).addRange(904,906).addRange(910,929).addRange(931,993).addRange(1008,1023).addRange(7462,7466).addRange(7517,7521).addRange(7526,7530).addRange(7615,7617).addRange(7936,7957).addRange(7960,7965).addRange(7968,8005).addRange(8008,8013).addRange(8016,8023).addRange(8031,8061).addRange(8064,8116).addRange(8118,8132).addRange(8134,8147).addRange(8150,8155).addRange(8157,8175).addRange(8178,8180).addRange(8182,8190).addRange(65856,65934).addRange(119296,119365),e.exports=a},42140:function(e,t,n){const a=n(45927)(2768);a.addRange(2385,2386).addRange(2404,2405).addRange(2689,2691).addRange(2693,2701).addRange(2703,2705).addRange(2707,2728).addRange(2730,2736).addRange(2738,2739).addRange(2741,2745).addRange(2748,2757).addRange(2759,2761).addRange(2763,2765).addRange(2784,2787).addRange(2790,2801).addRange(2809,2815).addRange(43056,43065),e.exports=a},71490:function(e,t,n){const a=n(45927)();a.addRange(2404,2405).addRange(73056,73061).addRange(73063,73064).addRange(73066,73102).addRange(73104,73105).addRange(73107,73112).addRange(73120,73129),e.exports=a},30619:function(e,t,n){const a=n(45927)(2620,2641,2654);a.addRange(2385,2386).addRange(2404,2405).addRange(2561,2563).addRange(2565,2570).addRange(2575,2576).addRange(2579,2600).addRange(2602,2608).addRange(2610,2611).addRange(2613,2614).addRange(2616,2617).addRange(2622,2626).addRange(2631,2632).addRange(2635,2637).addRange(2649,2652).addRange(2662,2678).addRange(43056,43065),e.exports=a},98111:function(e,t,n){const a=n(45927)(12336,12539,13055);a.addRange(11904,11929).addRange(11931,12019).addRange(12032,12245).addRange(12289,12291).addRange(12293,12305).addRange(12307,12319).addRange(12321,12333).addRange(12343,12351).addRange(12688,12703).addRange(12736,12771).addRange(12832,12871).addRange(12928,12976).addRange(12992,13003).addRange(13144,13168).addRange(13179,13183).addRange(13280,13310).addRange(13312,19903).addRange(19968,40959).addRange(42752,42759).addRange(63744,64109).addRange(64112,64217).addRange(65093,65094).addRange(65377,65381).addRange(94178,94179).addRange(94192,94193).addRange(119648,119665).addRange(127568,127569).addRange(131072,173791).addRange(173824,177976).addRange(177984,178205).addRange(178208,183969).addRange(183984,191456).addRange(194560,195101).addRange(196608,201546),e.exports=a},89280:function(e,t,n){const a=n(45927)(12343,12539);a.addRange(4352,4607).addRange(12289,12291).addRange(12296,12305).addRange(12307,12319).addRange(12334,12336).addRange(12593,12686).addRange(12800,12830).addRange(12896,12926).addRange(43360,43388).addRange(44032,55203).addRange(55216,55238).addRange(55243,55291).addRange(65093,65094).addRange(65377,65381).addRange(65440,65470).addRange(65474,65479).addRange(65482,65487).addRange(65490,65495).addRange(65498,65500),e.exports=a},96704:function(e,t,n){const a=n(45927)(1548,1563,1567,1600,1748);a.addRange(68864,68903).addRange(68912,68921),e.exports=a},18486:function(e,t,n){const a=n(45927)();a.addRange(5920,5942),e.exports=a},45166:function(e,t,n){const a=n(45927)();a.addRange(67808,67826).addRange(67828,67829).addRange(67835,67839),e.exports=a},32888:function(e,t,n){const a=n(45927)(64318);a.addRange(1425,1479).addRange(1488,1514).addRange(1519,1524).addRange(64285,64310).addRange(64312,64316).addRange(64320,64321).addRange(64323,64324).addRange(64326,64335),e.exports=a},4038:function(e,t,n){const a=n(45927)(12343,65392,127488);a.addRange(12289,12291).addRange(12296,12305).addRange(12307,12319).addRange(12336,12341).addRange(12348,12349).addRange(12353,12438).addRange(12441,12448).addRange(12539,12540).addRange(65093,65094).addRange(65377,65381).addRange(65438,65439).addRange(110593,110879).addRange(110928,110930),e.exports=a},41464:function(e,t,n){const a=n(45927)();a.addRange(67648,67669).addRange(67671,67679),e.exports=a},27907:function(e,t,n){const a=n(45927)(7673,66045);a.addRange(768,833).addRange(835,836).addRange(838,866).addRange(2387,2388).addRange(6832,6862).addRange(7618,7671).addRange(7675,7679).addRange(8204,8205).addRange(8400,8431).addRange(65024,65039).addRange(65056,65069).addRange(118528,118573).addRange(118576,118598).addRange(119143,119145).addRange(119163,119170).addRange(119173,119179).addRange(119210,119213).addRange(917760,917999),e.exports=a},29425:function(e,t,n){const a=n(45927)();a.addRange(68448,68466).addRange(68472,68479),e.exports=a},65969:function(e,t,n){const a=n(45927)();a.addRange(68416,68437).addRange(68440,68447),e.exports=a},93707:function(e,t,n){const a=n(45927)();a.addRange(43392,43469).addRange(43471,43481).addRange(43486,43487),e.exports=a},74549:function(e,t,n){const a=n(45927)(69837);a.addRange(2406,2415).addRange(43056,43065).addRange(69760,69826),e.exports=a},47779:function(e,t,n){const a=n(45927)(7376,7378,7386,7410,7412);a.addRange(2385,2386).addRange(2404,2405).addRange(3200,3212).addRange(3214,3216).addRange(3218,3240).addRange(3242,3251).addRange(3253,3257).addRange(3260,3268).addRange(3270,3272).addRange(3274,3277).addRange(3285,3286).addRange(3293,3294).addRange(3296,3299).addRange(3302,3311).addRange(3313,3314).addRange(43056,43061),e.exports=a},42720:function(e,t,n){const a=n(45927)(12343,110592);a.addRange(12289,12291).addRange(12296,12305).addRange(12307,12319).addRange(12336,12341).addRange(12348,12349).addRange(12441,12444).addRange(12448,12543).addRange(12784,12799).addRange(13008,13054).addRange(13056,13143).addRange(65093,65094).addRange(65377,65439).addRange(110576,110579).addRange(110581,110587).addRange(110589,110590).addRange(110880,110882).addRange(110948,110951),e.exports=a},94757:function(e,t,n){const a=n(45927)();a.addRange(43264,43311),e.exports=a},93602:function(e,t,n){const a=n(45927)();a.addRange(68096,68099).addRange(68101,68102).addRange(68108,68115).addRange(68117,68119).addRange(68121,68149).addRange(68152,68154).addRange(68159,68168).addRange(68176,68184),e.exports=a},64513:function(e,t,n){const a=n(45927)(94180);a.addRange(101120,101589),e.exports=a},22466:function(e,t,n){const a=n(45927)();a.addRange(6016,6109).addRange(6112,6121).addRange(6128,6137).addRange(6624,6655),e.exports=a},16877:function(e,t,n){const a=n(45927)();a.addRange(2790,2799).addRange(43056,43065).addRange(70144,70161).addRange(70163,70206),e.exports=a},82268:function(e,t,n){const a=n(45927)();a.addRange(2404,2405).addRange(43056,43065).addRange(70320,70378).addRange(70384,70393),e.exports=a},94122:function(e,t,n){const a=n(45927)(3716,3749,3782);a.addRange(3713,3714).addRange(3718,3722).addRange(3724,3747).addRange(3751,3773).addRange(3776,3780).addRange(3784,3789).addRange(3792,3801).addRange(3804,3807),e.exports=a},10428:function(e,t,n){const a=n(45927)(170,186,4347,8239,8305,8319,8432,8498,8526,42963,43310);a.addRange(65,90).addRange(97,122).addRange(192,214).addRange(216,246).addRange(248,696).addRange(736,740).addRange(867,879).addRange(1157,1158).addRange(2385,2386).addRange(7424,7461).addRange(7468,7516).addRange(7522,7525).addRange(7531,7543).addRange(7545,7614).addRange(7680,7935).addRange(8336,8348).addRange(8490,8491).addRange(8544,8584).addRange(11360,11391).addRange(42752,42759).addRange(42786,42887).addRange(42891,42954).addRange(42960,42961).addRange(42965,42969).addRange(42994,43007).addRange(43824,43866).addRange(43868,43876).addRange(43878,43881).addRange(64256,64262).addRange(65313,65338).addRange(65345,65370).addRange(67456,67461).addRange(67463,67504).addRange(67506,67514).addRange(122624,122654),e.exports=a},38125:function(e,t,n){const a=n(45927)();a.addRange(7168,7223).addRange(7227,7241).addRange(7245,7247),e.exports=a},12658:function(e,t,n){const a=n(45927)(2405,6464);a.addRange(6400,6430).addRange(6432,6443).addRange(6448,6459).addRange(6468,6479),e.exports=a},83374:function(e,t,n){const a=n(45927)();a.addRange(65799,65843).addRange(67072,67382).addRange(67392,67413).addRange(67424,67431),e.exports=a},81318:function(e,t,n){const a=n(45927)();a.addRange(65536,65547).addRange(65549,65574).addRange(65576,65594).addRange(65596,65597).addRange(65599,65613).addRange(65616,65629).addRange(65664,65786).addRange(65792,65794).addRange(65799,65843).addRange(65847,65855),e.exports=a},62166:function(e,t,n){const a=n(45927)(73648);a.addRange(42192,42239),e.exports=a},56051:function(e,t,n){const a=n(45927)();a.addRange(66176,66204),e.exports=a},88662:function(e,t,n){const a=n(45927)(67903);a.addRange(67872,67897),e.exports=a},15643:function(e,t,n){const a=n(45927)();a.addRange(2404,2415).addRange(43056,43065).addRange(69968,70006),e.exports=a},56160:function(e,t,n){const a=n(45927)();a.addRange(73440,73464),e.exports=a},80684:function(e,t,n){const a=n(45927)(7386);a.addRange(2385,2386).addRange(2404,2405).addRange(3328,3340).addRange(3342,3344).addRange(3346,3396).addRange(3398,3400).addRange(3402,3407).addRange(3412,3427).addRange(3430,3455).addRange(43056,43058),e.exports=a},51030:function(e,t,n){const a=n(45927)(1600,2142);a.addRange(2112,2139),e.exports=a},72790:function(e,t,n){const a=n(45927)(1600);a.addRange(68288,68326).addRange(68331,68342),e.exports=a},7895:function(e,t,n){const a=n(45927)();a.addRange(72816,72847).addRange(72850,72871).addRange(72873,72886),e.exports=a},79676:function(e,t,n){const a=n(45927)(73018);a.addRange(2404,2405).addRange(72960,72966).addRange(72968,72969).addRange(72971,73014).addRange(73020,73021).addRange(73023,73031).addRange(73040,73049),e.exports=a},17535:function(e,t,n){const a=n(45927)();a.addRange(93760,93850),e.exports=a},70539:function(e,t,n){const a=n(45927)();a.addRange(43744,43766).addRange(43968,44013).addRange(44016,44025),e.exports=a},93380:function(e,t,n){const a=n(45927)();a.addRange(124928,125124).addRange(125127,125142),e.exports=a},69656:function(e,t,n){const a=n(45927)();a.addRange(68e3,68023).addRange(68028,68047).addRange(68050,68095),e.exports=a},62741:function(e,t,n){const a=n(45927)();a.addRange(67968,67999),e.exports=a},61149:function(e,t,n){const a=n(45927)();a.addRange(93952,94026).addRange(94031,94087).addRange(94095,94111),e.exports=a},37183:function(e,t,n){const a=n(45927)();a.addRange(43056,43065).addRange(71168,71236).addRange(71248,71257),e.exports=a},20378:function(e,t,n){const a=n(45927)(8239);a.addRange(6144,6169).addRange(6176,6264).addRange(6272,6314).addRange(71264,71276),e.exports=a},33911:function(e,t,n){const a=n(45927)();a.addRange(92736,92766).addRange(92768,92777).addRange(92782,92783),e.exports=a},98608:function(e,t,n){const a=n(45927)(70280);a.addRange(2662,2671).addRange(70272,70278).addRange(70282,70285).addRange(70287,70301).addRange(70303,70313),e.exports=a},57221:function(e,t,n){const a=n(45927)(43310);a.addRange(4096,4255).addRange(43488,43518).addRange(43616,43647),e.exports=a},90894:function(e,t,n){const a=n(45927)();a.addRange(67712,67742).addRange(67751,67759),e.exports=a},9465:function(e,t,n){const a=n(45927)(7401,7410,7418);a.addRange(2404,2405).addRange(3302,3311).addRange(43056,43061).addRange(72096,72103).addRange(72106,72151).addRange(72154,72164),e.exports=a},14037:function(e,t,n){const a=n(45927)();a.addRange(6528,6571).addRange(6576,6601).addRange(6608,6618).addRange(6622,6623),e.exports=a},4546:function(e,t,n){const a=n(45927)();a.addRange(70656,70747).addRange(70749,70753),e.exports=a},34989:function(e,t,n){const a=n(45927)(1548,1563,1567);a.addRange(1984,2042).addRange(2045,2047).addRange(64830,64831),e.exports=a},49957:function(e,t,n){const a=n(45927)(94177);a.addRange(110960,111355),e.exports=a},73759:function(e,t,n){const a=n(45927)();a.addRange(123136,123180).addRange(123184,123197).addRange(123200,123209).addRange(123214,123215),e.exports=a},15890:function(e,t,n){const a=n(45927)();a.addRange(5760,5788),e.exports=a},10206:function(e,t,n){const a=n(45927)();a.addRange(7248,7295),e.exports=a},56198:function(e,t,n){const a=n(45927)();a.addRange(68736,68786).addRange(68800,68850).addRange(68858,68863),e.exports=a},17651:function(e,t,n){const a=n(45927)();a.addRange(66304,66339).addRange(66349,66351),e.exports=a},25480:function(e,t,n){const a=n(45927)();a.addRange(68224,68255),e.exports=a},30198:function(e,t,n){const a=n(45927)(1155);a.addRange(66384,66426),e.exports=a},94861:function(e,t,n){const a=n(45927)();a.addRange(66464,66499).addRange(66504,66517),e.exports=a},62409:function(e,t,n){const a=n(45927)();a.addRange(69376,69415),e.exports=a},98360:function(e,t,n){const a=n(45927)();a.addRange(68192,68223),e.exports=a},65867:function(e,t,n){const a=n(45927)();a.addRange(68608,68680),e.exports=a},47048:function(e,t,n){const a=n(45927)(1600,68338);a.addRange(69488,69513),e.exports=a},31771:function(e,t,n){const a=n(45927)(7386,7410);a.addRange(2385,2386).addRange(2404,2405).addRange(2817,2819).addRange(2821,2828).addRange(2831,2832).addRange(2835,2856).addRange(2858,2864).addRange(2866,2867).addRange(2869,2873).addRange(2876,2884).addRange(2887,2888).addRange(2891,2893).addRange(2901,2903).addRange(2908,2909).addRange(2911,2915).addRange(2918,2935),e.exports=a},63650:function(e,t,n){const a=n(45927)();a.addRange(66736,66771).addRange(66776,66811),e.exports=a},67449:function(e,t,n){const a=n(45927)();a.addRange(66688,66717).addRange(66720,66729),e.exports=a},14124:function(e,t,n){const a=n(45927)();a.addRange(92928,92997).addRange(93008,93017).addRange(93019,93025).addRange(93027,93047).addRange(93053,93071),e.exports=a},79271:function(e,t,n){const a=n(45927)();a.addRange(67680,67711),e.exports=a},88214:function(e,t,n){const a=n(45927)();a.addRange(72384,72440),e.exports=a},4844:function(e,t,n){const a=n(45927)(6149);a.addRange(6146,6147).addRange(43072,43127),e.exports=a},83056:function(e,t,n){const a=n(45927)(67871);a.addRange(67840,67867),e.exports=a},97602:function(e,t,n){const a=n(45927)(1600);a.addRange(68480,68497).addRange(68505,68508).addRange(68521,68527),e.exports=a},13078:function(e,t,n){const a=n(45927)(43359);a.addRange(43312,43347),e.exports=a},73595:function(e,t,n){const a=n(45927)();a.addRange(5792,5866).addRange(5870,5880),e.exports=a},75644:function(e,t,n){const a=n(45927)();a.addRange(2048,2093).addRange(2096,2110),e.exports=a},71240:function(e,t,n){const a=n(45927)();a.addRange(43136,43205).addRange(43214,43225),e.exports=a},39064:function(e,t,n){const a=n(45927)(2385,7383,7385,7392);a.addRange(7388,7389).addRange(70016,70111),e.exports=a},25402:function(e,t,n){const a=n(45927)();a.addRange(66640,66687),e.exports=a},2712:function(e,t,n){const a=n(45927)();a.addRange(71040,71093).addRange(71096,71133),e.exports=a},39083:function(e,t,n){const a=n(45927)();a.addRange(120832,121483).addRange(121499,121503).addRange(121505,121519),e.exports=a},98107:function(e,t,n){const a=n(45927)(3517,3530,3542);a.addRange(2404,2405).addRange(3457,3459).addRange(3461,3478).addRange(3482,3505).addRange(3507,3515).addRange(3520,3526).addRange(3535,3540).addRange(3544,3551).addRange(3558,3567).addRange(3570,3572).addRange(70113,70132),e.exports=a},31898:function(e,t,n){const a=n(45927)(1600);a.addRange(69424,69465),e.exports=a},75521:function(e,t,n){const a=n(45927)();a.addRange(69840,69864).addRange(69872,69881),e.exports=a},58045:function(e,t,n){const a=n(45927)();a.addRange(72272,72354),e.exports=a},4665:function(e,t,n){const a=n(45927)();a.addRange(7040,7103).addRange(7360,7367),e.exports=a},59113:function(e,t,n){const a=n(45927)();a.addRange(2404,2405).addRange(2534,2543).addRange(43008,43052),e.exports=a},70799:function(e,t,n){const a=n(45927)(1548,1567,1600,1648,7672,7674);a.addRange(1563,1564).addRange(1611,1621).addRange(1792,1805).addRange(1807,1866).addRange(1869,1871).addRange(2144,2154),e.exports=a},42253:function(e,t,n){const a=n(45927)(5919);a.addRange(5888,5909).addRange(5941,5942),e.exports=a},86140:function(e,t,n){const a=n(45927)();a.addRange(5941,5942).addRange(5984,5996).addRange(5998,6e3).addRange(6002,6003),e.exports=a},23397:function(e,t,n){const a=n(45927)();a.addRange(4160,4169).addRange(6480,6509).addRange(6512,6516),e.exports=a},43637:function(e,t,n){const a=n(45927)();a.addRange(6688,6750).addRange(6752,6780).addRange(6783,6793).addRange(6800,6809).addRange(6816,6829),e.exports=a},74345:function(e,t,n){const a=n(45927)();a.addRange(43648,43714).addRange(43739,43743),e.exports=a},1228:function(e,t,n){const a=n(45927)();a.addRange(2404,2405).addRange(43056,43065).addRange(71296,71353).addRange(71360,71369),e.exports=a},32832:function(e,t,n){const a=n(45927)(2972,3024,3031,7386,43251,70401,70403,73727);a.addRange(2385,2386).addRange(2404,2405).addRange(2946,2947).addRange(2949,2954).addRange(2958,2960).addRange(2962,2965).addRange(2969,2970).addRange(2974,2975).addRange(2979,2980).addRange(2984,2986).addRange(2990,3001).addRange(3006,3010).addRange(3014,3016).addRange(3018,3021).addRange(3046,3066).addRange(70459,70460).addRange(73664,73713),e.exports=a},62420:function(e,t,n){const a=n(45927)();a.addRange(92784,92862).addRange(92864,92873),e.exports=a},46461:function(e,t,n){const a=n(45927)(94176);a.addRange(94208,100343).addRange(100352,101119).addRange(101632,101640),e.exports=a},61722:function(e,t,n){const a=n(45927)(3165,7386,7410);a.addRange(2385,2386).addRange(2404,2405).addRange(3072,3084).addRange(3086,3088).addRange(3090,3112).addRange(3114,3129).addRange(3132,3140).addRange(3142,3144).addRange(3146,3149).addRange(3157,3158).addRange(3160,3162).addRange(3168,3171).addRange(3174,3183).addRange(3191,3199),e.exports=a},13288:function(e,t,n){const a=n(45927)(1548,1567,65010,65021);a.addRange(1563,1564).addRange(1632,1641).addRange(1920,1969),e.exports=a},86738:function(e,t,n){const a=n(45927)();a.addRange(3585,3642).addRange(3648,3675),e.exports=a},38804:function(e,t,n){const a=n(45927)();a.addRange(3840,3911).addRange(3913,3948).addRange(3953,3991).addRange(3993,4028).addRange(4030,4044).addRange(4046,4052).addRange(4057,4058),e.exports=a},23557:function(e,t,n){const a=n(45927)(11647);a.addRange(11568,11623).addRange(11631,11632),e.exports=a},8682:function(e,t,n){const a=n(45927)(7410);a.addRange(2385,2386).addRange(2404,2405).addRange(43056,43065).addRange(70784,70855).addRange(70864,70873),e.exports=a},97763:function(e,t,n){const a=n(45927)();a.addRange(123536,123566),e.exports=a},86382:function(e,t,n){const a=n(45927)(66463);a.addRange(66432,66461),e.exports=a},58555:function(e,t,n){const a=n(45927)();a.addRange(42240,42539),e.exports=a},98243:function(e,t,n){const a=n(45927)();a.addRange(66928,66938).addRange(66940,66954).addRange(66956,66962).addRange(66964,66965).addRange(66967,66977).addRange(66979,66993).addRange(66995,67001).addRange(67003,67004),e.exports=a},21450:function(e,t,n){const a=n(45927)(123647);a.addRange(123584,123641),e.exports=a},66240:function(e,t,n){const a=n(45927)(71935);a.addRange(71840,71922),e.exports=a},1629:function(e,t,n){const a=n(45927)(1548,1563,1567);a.addRange(1632,1641).addRange(69248,69289).addRange(69291,69293).addRange(69296,69297),e.exports=a},96821:function(e,t,n){const a=n(45927)(12539);a.addRange(12289,12290).addRange(12296,12305).addRange(12308,12315).addRange(40960,42124).addRange(42128,42182).addRange(65377,65381),e.exports=a},3141:function(e,t,n){const a=n(45927)();a.addRange(72192,72263),e.exports=a},92377:function(e){e.exports=new Map([["General_Category",["Cased_Letter","Close_Punctuation","Connector_Punctuation","Control","Currency_Symbol","Dash_Punctuation","Decimal_Number","Enclosing_Mark","Final_Punctuation","Format","Initial_Punctuation","Letter","Letter_Number","Line_Separator","Lowercase_Letter","Mark","Math_Symbol","Modifier_Letter","Modifier_Symbol","Nonspacing_Mark","Number","Open_Punctuation","Other","Other_Letter","Other_Number","Other_Punctuation","Other_Symbol","Paragraph_Separator","Private_Use","Punctuation","Separator","Space_Separator","Spacing_Mark","Surrogate","Symbol","Titlecase_Letter","Unassigned","Uppercase_Letter"]],["Script",["Adlam","Ahom","Anatolian_Hieroglyphs","Arabic","Armenian","Avestan","Balinese","Bamum","Bassa_Vah","Batak","Bengali","Bhaiksuki","Bopomofo","Brahmi","Braille","Buginese","Buhid","Canadian_Aboriginal","Carian","Caucasian_Albanian","Chakma","Cham","Cherokee","Chorasmian","Common","Coptic","Cuneiform","Cypriot","Cypro_Minoan","Cyrillic","Deseret","Devanagari","Dives_Akuru","Dogra","Duployan","Egyptian_Hieroglyphs","Elbasan","Elymaic","Ethiopic","Georgian","Glagolitic","Gothic","Grantha","Greek","Gujarati","Gunjala_Gondi","Gurmukhi","Han","Hangul","Hanifi_Rohingya","Hanunoo","Hatran","Hebrew","Hiragana","Imperial_Aramaic","Inherited","Inscriptional_Pahlavi","Inscriptional_Parthian","Javanese","Kaithi","Kannada","Katakana","Kayah_Li","Kharoshthi","Khitan_Small_Script","Khmer","Khojki","Khudawadi","Lao","Latin","Lepcha","Limbu","Linear_A","Linear_B","Lisu","Lycian","Lydian","Mahajani","Makasar","Malayalam","Mandaic","Manichaean","Marchen","Masaram_Gondi","Medefaidrin","Meetei_Mayek","Mende_Kikakui","Meroitic_Cursive","Meroitic_Hieroglyphs","Miao","Modi","Mongolian","Mro","Multani","Myanmar","Nabataean","Nandinagari","New_Tai_Lue","Newa","Nko","Nushu","Nyiakeng_Puachue_Hmong","Ogham","Ol_Chiki","Old_Hungarian","Old_Italic","Old_North_Arabian","Old_Permic","Old_Persian","Old_Sogdian","Old_South_Arabian","Old_Turkic","Old_Uyghur","Oriya","Osage","Osmanya","Pahawh_Hmong","Palmyrene","Pau_Cin_Hau","Phags_Pa","Phoenician","Psalter_Pahlavi","Rejang","Runic","Samaritan","Saurashtra","Sharada","Shavian","Siddham","SignWriting","Sinhala","Sogdian","Sora_Sompeng","Soyombo","Sundanese","Syloti_Nagri","Syriac","Tagalog","Tagbanwa","Tai_Le","Tai_Tham","Tai_Viet","Takri","Tamil","Tangsa","Tangut","Telugu","Thaana","Thai","Tibetan","Tifinagh","Tirhuta","Toto","Ugaritic","Vai","Vithkuqi","Wancho","Warang_Citi","Yezidi","Yi","Zanabazar_Square"]],["Script_Extensions",["Adlam","Ahom","Anatolian_Hieroglyphs","Arabic","Armenian","Avestan","Balinese","Bamum","Bassa_Vah","Batak","Bengali","Bhaiksuki","Bopomofo","Brahmi","Braille","Buginese","Buhid","Canadian_Aboriginal","Carian","Caucasian_Albanian","Chakma","Cham","Cherokee","Chorasmian","Common","Coptic","Cuneiform","Cypriot","Cypro_Minoan","Cyrillic","Deseret","Devanagari","Dives_Akuru","Dogra","Duployan","Egyptian_Hieroglyphs","Elbasan","Elymaic","Ethiopic","Georgian","Glagolitic","Gothic","Grantha","Greek","Gujarati","Gunjala_Gondi","Gurmukhi","Han","Hangul","Hanifi_Rohingya","Hanunoo","Hatran","Hebrew","Hiragana","Imperial_Aramaic","Inherited","Inscriptional_Pahlavi","Inscriptional_Parthian","Javanese","Kaithi","Kannada","Katakana","Kayah_Li","Kharoshthi","Khitan_Small_Script","Khmer","Khojki","Khudawadi","Lao","Latin","Lepcha","Limbu","Linear_A","Linear_B","Lisu","Lycian","Lydian","Mahajani","Makasar","Malayalam","Mandaic","Manichaean","Marchen","Masaram_Gondi","Medefaidrin","Meetei_Mayek","Mende_Kikakui","Meroitic_Cursive","Meroitic_Hieroglyphs","Miao","Modi","Mongolian","Mro","Multani","Myanmar","Nabataean","Nandinagari","New_Tai_Lue","Newa","Nko","Nushu","Nyiakeng_Puachue_Hmong","Ogham","Ol_Chiki","Old_Hungarian","Old_Italic","Old_North_Arabian","Old_Permic","Old_Persian","Old_Sogdian","Old_South_Arabian","Old_Turkic","Old_Uyghur","Oriya","Osage","Osmanya","Pahawh_Hmong","Palmyrene","Pau_Cin_Hau","Phags_Pa","Phoenician","Psalter_Pahlavi","Rejang","Runic","Samaritan","Saurashtra","Sharada","Shavian","Siddham","SignWriting","Sinhala","Sogdian","Sora_Sompeng","Soyombo","Sundanese","Syloti_Nagri","Syriac","Tagalog","Tagbanwa","Tai_Le","Tai_Tham","Tai_Viet","Takri","Tamil","Tangsa","Tangut","Telugu","Thaana","Thai","Tibetan","Tifinagh","Tirhuta","Toto","Ugaritic","Vai","Vithkuqi","Wancho","Warang_Citi","Yezidi","Yi","Zanabazar_Square"]],["Binary_Property",["ASCII","ASCII_Hex_Digit","Alphabetic","Any","Assigned","Bidi_Control","Bidi_Mirrored","Case_Ignorable","Cased","Changes_When_Casefolded","Changes_When_Casemapped","Changes_When_Lowercased","Changes_When_NFKC_Casefolded","Changes_When_Titlecased","Changes_When_Uppercased","Dash","Default_Ignorable_Code_Point","Deprecated","Diacritic","Emoji","Emoji_Component","Emoji_Modifier","Emoji_Modifier_Base","Emoji_Presentation","Extended_Pictographic","Extender","Grapheme_Base","Grapheme_Extend","Hex_Digit","IDS_Binary_Operator","IDS_Trinary_Operator","ID_Continue","ID_Start","Ideographic","Join_Control","Logical_Order_Exception","Lowercase","Math","Noncharacter_Code_Point","Pattern_Syntax","Pattern_White_Space","Quotation_Mark","Radical","Regional_Indicator","Sentence_Terminal","Soft_Dotted","Terminal_Punctuation","Unified_Ideograph","Uppercase","Variation_Selector","White_Space","XID_Continue","XID_Start"]]])},66177:function(e){e.exports="14.0.0"},46247:function(e,t,n){var a={"./Binary_Property/ASCII.js":50497,"./Binary_Property/ASCII_Hex_Digit.js":30110,"./Binary_Property/Alphabetic.js":89474,"./Binary_Property/Any.js":92085,"./Binary_Property/Assigned.js":68632,"./Binary_Property/Bidi_Control.js":49340,"./Binary_Property/Bidi_Mirrored.js":82035,"./Binary_Property/Case_Ignorable.js":32914,"./Binary_Property/Cased.js":48252,"./Binary_Property/Changes_When_Casefolded.js":99643,"./Binary_Property/Changes_When_Casemapped.js":35208,"./Binary_Property/Changes_When_Lowercased.js":19423,"./Binary_Property/Changes_When_NFKC_Casefolded.js":83387,"./Binary_Property/Changes_When_Titlecased.js":13258,"./Binary_Property/Changes_When_Uppercased.js":26216,"./Binary_Property/Dash.js":36330,"./Binary_Property/Default_Ignorable_Code_Point.js":82684,"./Binary_Property/Deprecated.js":91106,"./Binary_Property/Diacritic.js":47252,"./Binary_Property/Emoji.js":11470,"./Binary_Property/Emoji_Component.js":71646,"./Binary_Property/Emoji_Modifier.js":87650,"./Binary_Property/Emoji_Modifier_Base.js":29218,"./Binary_Property/Emoji_Presentation.js":76701,"./Binary_Property/Extended_Pictographic.js":94941,"./Binary_Property/Extender.js":72468,"./Binary_Property/Grapheme_Base.js":94004,"./Binary_Property/Grapheme_Extend.js":52414,"./Binary_Property/Hex_Digit.js":68005,"./Binary_Property/IDS_Binary_Operator.js":39259,"./Binary_Property/IDS_Trinary_Operator.js":77137,"./Binary_Property/ID_Continue.js":44248,"./Binary_Property/ID_Start.js":88897,"./Binary_Property/Ideographic.js":86909,"./Binary_Property/Join_Control.js":62022,"./Binary_Property/Logical_Order_Exception.js":83623,"./Binary_Property/Lowercase.js":90326,"./Binary_Property/Math.js":35359,"./Binary_Property/Noncharacter_Code_Point.js":17666,"./Binary_Property/Pattern_Syntax.js":65976,"./Binary_Property/Pattern_White_Space.js":37724,"./Binary_Property/Quotation_Mark.js":88924,"./Binary_Property/Radical.js":76511,"./Binary_Property/Regional_Indicator.js":14635,"./Binary_Property/Sentence_Terminal.js":40610,"./Binary_Property/Soft_Dotted.js":7955,"./Binary_Property/Terminal_Punctuation.js":6082,"./Binary_Property/Unified_Ideograph.js":52778,"./Binary_Property/Uppercase.js":22152,"./Binary_Property/Variation_Selector.js":78097,"./Binary_Property/White_Space.js":12386,"./Binary_Property/XID_Continue.js":5048,"./Binary_Property/XID_Start.js":84707,"./General_Category/Cased_Letter.js":65917,"./General_Category/Close_Punctuation.js":38684,"./General_Category/Connector_Punctuation.js":70515,"./General_Category/Control.js":13630,"./General_Category/Currency_Symbol.js":82132,"./General_Category/Dash_Punctuation.js":51233,"./General_Category/Decimal_Number.js":75426,"./General_Category/Enclosing_Mark.js":67148,"./General_Category/Final_Punctuation.js":5656,"./General_Category/Format.js":65364,"./General_Category/Initial_Punctuation.js":31740,"./General_Category/Letter.js":52517,"./General_Category/Letter_Number.js":24886,"./General_Category/Line_Separator.js":19220,"./General_Category/Lowercase_Letter.js":24497,"./General_Category/Mark.js":28071,"./General_Category/Math_Symbol.js":72586,"./General_Category/Modifier_Letter.js":8492,"./General_Category/Modifier_Symbol.js":26802,"./General_Category/Nonspacing_Mark.js":47373,"./General_Category/Number.js":30006,"./General_Category/Open_Punctuation.js":53487,"./General_Category/Other.js":85493,"./General_Category/Other_Letter.js":38198,"./General_Category/Other_Number.js":22270,"./General_Category/Other_Punctuation.js":4126,"./General_Category/Other_Symbol.js":14212,"./General_Category/Paragraph_Separator.js":12704,"./General_Category/Private_Use.js":94713,"./General_Category/Punctuation.js":59480,"./General_Category/Separator.js":58476,"./General_Category/Space_Separator.js":37313,"./General_Category/Spacing_Mark.js":21123,"./General_Category/Surrogate.js":90304,"./General_Category/Symbol.js":91488,"./General_Category/Titlecase_Letter.js":43531,"./General_Category/Unassigned.js":75563,"./General_Category/Uppercase_Letter.js":80078,"./Property_of_Strings/Basic_Emoji.js":95637,"./Property_of_Strings/Emoji_Keycap_Sequence.js":27564,"./Property_of_Strings/RGI_Emoji.js":29372,"./Property_of_Strings/RGI_Emoji_Flag_Sequence.js":43808,"./Property_of_Strings/RGI_Emoji_Modifier_Sequence.js":54006,"./Property_of_Strings/RGI_Emoji_Tag_Sequence.js":29738,"./Property_of_Strings/RGI_Emoji_ZWJ_Sequence.js":76172,"./Script/Adlam.js":86950,"./Script/Ahom.js":31046,"./Script/Anatolian_Hieroglyphs.js":74147,"./Script/Arabic.js":85587,"./Script/Armenian.js":61742,"./Script/Avestan.js":66766,"./Script/Balinese.js":8881,"./Script/Bamum.js":28993,"./Script/Bassa_Vah.js":1833,"./Script/Batak.js":61163,"./Script/Bengali.js":54089,"./Script/Bhaiksuki.js":41643,"./Script/Bopomofo.js":4852,"./Script/Brahmi.js":47341,"./Script/Braille.js":52594,"./Script/Buginese.js":11567,"./Script/Buhid.js":8781,"./Script/Canadian_Aboriginal.js":29850,"./Script/Carian.js":95120,"./Script/Caucasian_Albanian.js":54491,"./Script/Chakma.js":72895,"./Script/Cham.js":82846,"./Script/Cherokee.js":87200,"./Script/Chorasmian.js":82673,"./Script/Common.js":76892,"./Script/Coptic.js":37229,"./Script/Cuneiform.js":34504,"./Script/Cypriot.js":54720,"./Script/Cypro_Minoan.js":89301,"./Script/Cyrillic.js":29606,"./Script/Deseret.js":53923,"./Script/Devanagari.js":65104,"./Script/Dives_Akuru.js":66682,"./Script/Dogra.js":97107,"./Script/Duployan.js":86692,"./Script/Egyptian_Hieroglyphs.js":16136,"./Script/Elbasan.js":91484,"./Script/Elymaic.js":41540,"./Script/Ethiopic.js":59022,"./Script/Georgian.js":13260,"./Script/Glagolitic.js":23829,"./Script/Gothic.js":73058,"./Script/Grantha.js":23213,"./Script/Greek.js":24623,"./Script/Gujarati.js":82772,"./Script/Gunjala_Gondi.js":2594,"./Script/Gurmukhi.js":53180,"./Script/Han.js":77211,"./Script/Hangul.js":27548,"./Script/Hanifi_Rohingya.js":92452,"./Script/Hanunoo.js":60683,"./Script/Hatran.js":86724,"./Script/Hebrew.js":9761,"./Script/Hiragana.js":19008,"./Script/Imperial_Aramaic.js":35272,"./Script/Inherited.js":41526,"./Script/Inscriptional_Pahlavi.js":7826,"./Script/Inscriptional_Parthian.js":19525,"./Script/Javanese.js":73328,"./Script/Kaithi.js":68306,"./Script/Kannada.js":97635,"./Script/Katakana.js":27667,"./Script/Kawi.js":9144,"./Script/Kayah_Li.js":73636,"./Script/Kharoshthi.js":50613,"./Script/Khitan_Small_Script.js":77118,"./Script/Khmer.js":12263,"./Script/Khojki.js":91638,"./Script/Khudawadi.js":90599,"./Script/Lao.js":19350,"./Script/Latin.js":75303,"./Script/Lepcha.js":66937,"./Script/Limbu.js":44752,"./Script/Linear_A.js":88211,"./Script/Linear_B.js":8601,"./Script/Lisu.js":52378,"./Script/Lycian.js":58516,"./Script/Lydian.js":88289,"./Script/Mahajani.js":68861,"./Script/Makasar.js":49983,"./Script/Malayalam.js":57014,"./Script/Mandaic.js":94365,"./Script/Manichaean.js":21146,"./Script/Marchen.js":27240,"./Script/Masaram_Gondi.js":96527,"./Script/Medefaidrin.js":54812,"./Script/Meetei_Mayek.js":53286,"./Script/Mende_Kikakui.js":88038,"./Script/Meroitic_Cursive.js":88521,"./Script/Meroitic_Hieroglyphs.js":32743,"./Script/Miao.js":7226,"./Script/Modi.js":77566,"./Script/Mongolian.js":88800,"./Script/Mro.js":24205,"./Script/Multani.js":361,"./Script/Myanmar.js":34197,"./Script/Nabataean.js":55314,"./Script/Nag_Mundari.js":25564,"./Script/Nandinagari.js":26546,"./Script/New_Tai_Lue.js":50431,"./Script/Newa.js":8860,"./Script/Nko.js":7219,"./Script/Nushu.js":51758,"./Script/Nyiakeng_Puachue_Hmong.js":47096,"./Script/Ogham.js":47504,"./Script/Ol_Chiki.js":52609,"./Script/Old_Hungarian.js":34239,"./Script/Old_Italic.js":61789,"./Script/Old_North_Arabian.js":63872,"./Script/Old_Permic.js":33543,"./Script/Old_Persian.js":58580,"./Script/Old_Sogdian.js":45167,"./Script/Old_South_Arabian.js":66357,"./Script/Old_Turkic.js":78500,"./Script/Old_Uyghur.js":62853,"./Script/Oriya.js":54957,"./Script/Osage.js":67159,"./Script/Osmanya.js":82280,"./Script/Pahawh_Hmong.js":2283,"./Script/Palmyrene.js":19570,"./Script/Pau_Cin_Hau.js":33786,"./Script/Phags_Pa.js":17481,"./Script/Phoenician.js":16862,"./Script/Psalter_Pahlavi.js":91303,"./Script/Rejang.js":26545,"./Script/Runic.js":76679,"./Script/Samaritan.js":37047,"./Script/Saurashtra.js":72274,"./Script/Sharada.js":91447,"./Script/Shavian.js":61330,"./Script/Siddham.js":11739,"./Script/SignWriting.js":51063,"./Script/Sinhala.js":60286,"./Script/Sogdian.js":18594,"./Script/Sora_Sompeng.js":11144,"./Script/Soyombo.js":34552,"./Script/Sundanese.js":14585,"./Script/Syloti_Nagri.js":87143,"./Script/Syriac.js":15481,"./Script/Tagalog.js":16514,"./Script/Tagbanwa.js":44145,"./Script/Tai_Le.js":53521,"./Script/Tai_Tham.js":57116,"./Script/Tai_Viet.js":63114,"./Script/Takri.js":43596,"./Script/Tamil.js":39027,"./Script/Tangsa.js":46250,"./Script/Tangut.js":27103,"./Script/Telugu.js":32979,"./Script/Thaana.js":50764,"./Script/Thai.js":40950,"./Script/Tibetan.js":84063,"./Script/Tifinagh.js":83173,"./Script/Tirhuta.js":36756,"./Script/Toto.js":6610,"./Script/Ugaritic.js":75674,"./Script/Vai.js":50928,"./Script/Vithkuqi.js":74243,"./Script/Wancho.js":53614,"./Script/Warang_Citi.js":70112,"./Script/Yezidi.js":47087,"./Script/Yi.js":28857,"./Script/Zanabazar_Square.js":62490,"./Script_Extensions/Adlam.js":94109,"./Script_Extensions/Ahom.js":76193,"./Script_Extensions/Anatolian_Hieroglyphs.js":16126,"./Script_Extensions/Arabic.js":84679,"./Script_Extensions/Armenian.js":63338,"./Script_Extensions/Avestan.js":63464,"./Script_Extensions/Balinese.js":50567,"./Script_Extensions/Bamum.js":4141,"./Script_Extensions/Bassa_Vah.js":15359,"./Script_Extensions/Batak.js":95237,"./Script_Extensions/Bengali.js":91164,"./Script_Extensions/Bhaiksuki.js":41261,"./Script_Extensions/Bopomofo.js":1707,"./Script_Extensions/Brahmi.js":23969,"./Script_Extensions/Braille.js":61054,"./Script_Extensions/Buginese.js":97127,"./Script_Extensions/Buhid.js":91916,"./Script_Extensions/Canadian_Aboriginal.js":50894,"./Script_Extensions/Carian.js":44053,"./Script_Extensions/Caucasian_Albanian.js":89552,"./Script_Extensions/Chakma.js":18858,"./Script_Extensions/Cham.js":82001,"./Script_Extensions/Cherokee.js":84002,"./Script_Extensions/Chorasmian.js":95472,"./Script_Extensions/Common.js":11851,"./Script_Extensions/Coptic.js":43449,"./Script_Extensions/Cuneiform.js":17475,"./Script_Extensions/Cypriot.js":62088,"./Script_Extensions/Cypro_Minoan.js":31672,"./Script_Extensions/Cyrillic.js":48502,"./Script_Extensions/Deseret.js":26622,"./Script_Extensions/Devanagari.js":87671,"./Script_Extensions/Dives_Akuru.js":17685,"./Script_Extensions/Dogra.js":35987,"./Script_Extensions/Duployan.js":79564,"./Script_Extensions/Egyptian_Hieroglyphs.js":8848,"./Script_Extensions/Elbasan.js":69654,"./Script_Extensions/Elymaic.js":3379,"./Script_Extensions/Ethiopic.js":88637,"./Script_Extensions/Georgian.js":40873,"./Script_Extensions/Glagolitic.js":8050,"./Script_Extensions/Gothic.js":43907,"./Script_Extensions/Grantha.js":49720,"./Script_Extensions/Greek.js":94712,"./Script_Extensions/Gujarati.js":42140,"./Script_Extensions/Gunjala_Gondi.js":71490,"./Script_Extensions/Gurmukhi.js":30619,"./Script_Extensions/Han.js":98111,"./Script_Extensions/Hangul.js":89280,"./Script_Extensions/Hanifi_Rohingya.js":96704,"./Script_Extensions/Hanunoo.js":18486,"./Script_Extensions/Hatran.js":45166,"./Script_Extensions/Hebrew.js":32888,"./Script_Extensions/Hiragana.js":4038,"./Script_Extensions/Imperial_Aramaic.js":41464,"./Script_Extensions/Inherited.js":27907,"./Script_Extensions/Inscriptional_Pahlavi.js":29425,"./Script_Extensions/Inscriptional_Parthian.js":65969,"./Script_Extensions/Javanese.js":93707,"./Script_Extensions/Kaithi.js":74549,"./Script_Extensions/Kannada.js":47779,"./Script_Extensions/Katakana.js":42720,"./Script_Extensions/Kawi.js":18429,"./Script_Extensions/Kayah_Li.js":94757,"./Script_Extensions/Kharoshthi.js":93602,"./Script_Extensions/Khitan_Small_Script.js":64513,"./Script_Extensions/Khmer.js":22466,"./Script_Extensions/Khojki.js":16877,"./Script_Extensions/Khudawadi.js":82268,"./Script_Extensions/Lao.js":94122,"./Script_Extensions/Latin.js":10428,"./Script_Extensions/Lepcha.js":38125,"./Script_Extensions/Limbu.js":12658,"./Script_Extensions/Linear_A.js":83374,"./Script_Extensions/Linear_B.js":81318,"./Script_Extensions/Lisu.js":62166,"./Script_Extensions/Lycian.js":56051,"./Script_Extensions/Lydian.js":88662,"./Script_Extensions/Mahajani.js":15643,"./Script_Extensions/Makasar.js":56160,"./Script_Extensions/Malayalam.js":80684,"./Script_Extensions/Mandaic.js":51030,"./Script_Extensions/Manichaean.js":72790,"./Script_Extensions/Marchen.js":7895,"./Script_Extensions/Masaram_Gondi.js":79676,"./Script_Extensions/Medefaidrin.js":17535,"./Script_Extensions/Meetei_Mayek.js":70539,"./Script_Extensions/Mende_Kikakui.js":93380,"./Script_Extensions/Meroitic_Cursive.js":69656,"./Script_Extensions/Meroitic_Hieroglyphs.js":62741,"./Script_Extensions/Miao.js":61149,"./Script_Extensions/Modi.js":37183,"./Script_Extensions/Mongolian.js":20378,"./Script_Extensions/Mro.js":33911,"./Script_Extensions/Multani.js":98608,"./Script_Extensions/Myanmar.js":57221,"./Script_Extensions/Nabataean.js":90894,"./Script_Extensions/Nag_Mundari.js":52634,"./Script_Extensions/Nandinagari.js":9465,"./Script_Extensions/New_Tai_Lue.js":14037,"./Script_Extensions/Newa.js":4546,"./Script_Extensions/Nko.js":34989,"./Script_Extensions/Nushu.js":49957,"./Script_Extensions/Nyiakeng_Puachue_Hmong.js":73759,"./Script_Extensions/Ogham.js":15890,"./Script_Extensions/Ol_Chiki.js":10206,"./Script_Extensions/Old_Hungarian.js":56198,"./Script_Extensions/Old_Italic.js":17651,"./Script_Extensions/Old_North_Arabian.js":25480,"./Script_Extensions/Old_Permic.js":30198,"./Script_Extensions/Old_Persian.js":94861,"./Script_Extensions/Old_Sogdian.js":62409,"./Script_Extensions/Old_South_Arabian.js":98360,"./Script_Extensions/Old_Turkic.js":65867,"./Script_Extensions/Old_Uyghur.js":47048,"./Script_Extensions/Oriya.js":31771,"./Script_Extensions/Osage.js":63650,"./Script_Extensions/Osmanya.js":67449,"./Script_Extensions/Pahawh_Hmong.js":14124,"./Script_Extensions/Palmyrene.js":79271,"./Script_Extensions/Pau_Cin_Hau.js":88214,"./Script_Extensions/Phags_Pa.js":4844,"./Script_Extensions/Phoenician.js":83056,"./Script_Extensions/Psalter_Pahlavi.js":97602,"./Script_Extensions/Rejang.js":13078,"./Script_Extensions/Runic.js":73595,"./Script_Extensions/Samaritan.js":75644,"./Script_Extensions/Saurashtra.js":71240,"./Script_Extensions/Sharada.js":39064,"./Script_Extensions/Shavian.js":25402,"./Script_Extensions/Siddham.js":2712,"./Script_Extensions/SignWriting.js":39083,"./Script_Extensions/Sinhala.js":98107,"./Script_Extensions/Sogdian.js":31898,"./Script_Extensions/Sora_Sompeng.js":75521,"./Script_Extensions/Soyombo.js":58045,"./Script_Extensions/Sundanese.js":4665,"./Script_Extensions/Syloti_Nagri.js":59113,"./Script_Extensions/Syriac.js":70799,"./Script_Extensions/Tagalog.js":42253,"./Script_Extensions/Tagbanwa.js":86140,"./Script_Extensions/Tai_Le.js":23397,"./Script_Extensions/Tai_Tham.js":43637,"./Script_Extensions/Tai_Viet.js":74345,"./Script_Extensions/Takri.js":1228,"./Script_Extensions/Tamil.js":32832,"./Script_Extensions/Tangsa.js":62420,"./Script_Extensions/Tangut.js":46461,"./Script_Extensions/Telugu.js":61722,"./Script_Extensions/Thaana.js":13288,"./Script_Extensions/Thai.js":86738,"./Script_Extensions/Tibetan.js":38804,"./Script_Extensions/Tifinagh.js":23557,"./Script_Extensions/Tirhuta.js":8682,"./Script_Extensions/Toto.js":97763,"./Script_Extensions/Ugaritic.js":86382,"./Script_Extensions/Vai.js":58555,"./Script_Extensions/Vithkuqi.js":98243,"./Script_Extensions/Wancho.js":21450,"./Script_Extensions/Warang_Citi.js":66240,"./Script_Extensions/Yezidi.js":1629,"./Script_Extensions/Yi.js":96821,"./Script_Extensions/Zanabazar_Square.js":3141,"./index.js":92377,"./unicode-version.js":66177};function r(e){var t=i(e);return n(t)}function i(e){if(!n.o(a,e)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return a[e]}r.keys=function(){return Object.keys(a)},r.resolve=i,e.exports=r,r.id=46247},55246:function(e,t,n){"use strict";const a=n(2746).generate,r=n(24524).parse,i=n(45927),o=n(37747),d=n(5064),s=n(57894),c=n(50999),u=i().addRange(0,1114111),l=(i().addRange(0,65535),u.clone().remove(10,13,8232,8233)),g=(e,t,n)=>t?n?c.UNICODE_IGNORE_CASE.get(e):c.UNICODE.get(e):c.REGULAR.get(e),h=(e,t)=>{const a=t?`${e}/${t}`:`Binary_Property/${e}`;try{return n(46247)(`./${a}.js`)}catch(r){throw new Error(`Failed to recognize value \`${t}\` for property \`${e}\`.`)}},f=(e,t)=>{const n=e.split("="),a=n[0];let r;if(1==n.length)r=(e=>{try{const t="General_Category",n=d(t,e);return h(t,n)}catch(n){}const t=o(e);return h(t)})(a);else{const e=o(a),t=d(e,n[1]);r=h(e,t)}return t?u.clone().remove(r):r.clone()};i.prototype.iuAddRange=function(e,t){const n=this;do{const t=R(e);t&&n.add(t)}while(++e<=t);return n};const p=(e,t)=>{let n=r(t,v.useUnicodeFlag?"u":"");switch(n.type){case"characterClass":case"group":case"value":break;default:n=m(n,t)}Object.assign(e,n)},m=(e,t)=>({type:"group",behavior:"ignore",body:[e],raw:`(?:${t})`}),R=e=>s.get(e)||!1,b=(e,t)=>{delete e.name,e.matchIndex=t},y=(e,t,n)=>{switch(e.type){case"dot":if(v.useDotAllFlag)break;v.unicode?p(e,(a=v.dotAll,a?u:l).toString(t)):v.dotAll&&p(e,"[\\s\\S]");break;case"characterClass":e=((e,t)=>{const n=i();for(const a of e.body)switch(a.type){case"value":if(n.add(a.codePoint),v.ignoreCase&&v.unicode&&!v.useUnicodeFlag){const e=R(a.codePoint);e&&n.add(e)}break;case"characterClassRange":const e=a.min.codePoint,t=a.max.codePoint;n.addRange(e,t),v.ignoreCase&&v.unicode&&!v.useUnicodeFlag&&n.iuAddRange(e,t);break;case"characterClassEscape":n.add(g(a.value,v.unicode,v.ignoreCase));break;case"unicodePropertyEscape":n.add(f(a.value,a.negative));break;default:throw new Error(`Unknown term type: ${a.type}`)}return e.negative?p(e,`(?!${n.toString(t)})[\\s\\S]`):p(e,n.toString(t)),e})(e,t);break;case"unicodePropertyEscape":v.unicodePropertyEscape&&p(e,f(e.value,e.negative).toString(t));break;case"characterClassEscape":p(e,g(e.value,v.unicode,v.ignoreCase).toString(t));break;case"group":if("normal"==e.behavior&&n.lastIndex++,e.name&&v.namedGroup){const t=e.name.value;if(n.names[t])throw new Error(`Multiple groups with the same name (${t}) are not allowed.`);const a=n.lastIndex;delete e.name,n.names[t]=a,n.onNamedGroup&&n.onNamedGroup.call(null,t,a),n.unmatchedReferences[t]&&(n.unmatchedReferences[t].forEach((e=>{b(e,a)})),delete n.unmatchedReferences[t])}case"alternative":case"disjunction":case"quantifier":e.body=e.body.map((e=>y(e,t,n)));break;case"value":const r=e.codePoint,o=i(r);if(v.ignoreCase&&v.unicode&&!v.useUnicodeFlag){const e=R(r);e&&o.add(e)}p(e,o.toString(t));break;case"reference":if(e.name){const t=e.name.value,a=n.names[t];if(a){b(e,a);break}n.unmatchedReferences[t]||(n.unmatchedReferences[t]=[]),n.unmatchedReferences[t].push(e)}break;case"anchor":case"empty":case"group":break;default:throw new Error(`Unknown term type: ${e.type}`)}var a;return e},v={ignoreCase:!1,unicode:!1,dotAll:!1,useDotAllFlag:!1,useUnicodeFlag:!1,unicodePropertyEscape:!1,namedGroup:!1};e.exports=(e,t,n)=>{v.unicode=t&&t.includes("u");const i={unicodePropertyEscape:v.unicode,namedGroups:!0,lookbehind:n&&n.lookbehind};v.ignoreCase=t&&t.includes("i");const o=n&&n.dotAllFlag;if(v.dotAll=o&&t&&t.includes("s"),v.namedGroup=n&&n.namedGroup,v.useDotAllFlag=n&&n.useDotAllFlag,v.useUnicodeFlag=n&&n.useUnicodeFlag,v.unicodePropertyEscape=n&&n.unicodePropertyEscape,o&&v.useDotAllFlag)throw new Error("`useDotAllFlag` and `dotAllFlag` cannot both be true!");const d={hasUnicodeFlag:v.useUnicodeFlag,bmpOnly:!v.unicode},s={onNamedGroup:n&&n.onNamedGroup,lastIndex:0,names:Object.create(null),unmatchedReferences:Object.create(null)},c=r(e,t,i);return y(c,d,s),(e=>{const t=Object.keys(e.unmatchedReferences);if(t.length>0)throw new Error(`Unknown group names: ${t}`)})(s),a(c)}},2746:function(e,t,n){var a;e=n.nmd(e),function(){"use strict";var r={function:!0,object:!0},i=r[typeof window]&&window||this,o=r[typeof t]&&t&&!t.nodeType&&t,d=r.object&&e&&!e.nodeType,s=o&&d&&"object"==typeof n.g&&n.g;!s||s.global!==s&&s.window!==s&&s.self!==s||(i=s);var c=Object.prototype.hasOwnProperty;function u(){var e=Number(arguments[0]);if(!isFinite(e)||e<0||e>1114111||Math.floor(e)!=e)throw RangeError("Invalid code point: "+e);if(e<=65535)return String.fromCharCode(e);var t=55296+((e-=65536)>>10),n=e%1024+56320;return String.fromCharCode(t,n)}var l={};function g(e,t){if(-1==t.indexOf("|")){if(e==t)return;throw Error("Invalid node type: "+e+"; expected type: "+t)}if(!(t=c.call(l,t)?l[t]:l[t]=RegExp("^(?:"+t+")$")).test(e))throw Error("Invalid node type: "+e+"; expected types: "+t)}function h(e){var t=e.type;if(c.call(b,t))return b[t](e);throw Error("Invalid node type: "+t)}function f(e,t){for(var n,a=-1,r=t.length,i="";++a<r;)n=t[a],a+1<r&&"value"==t[a].type&&"null"==t[a].kind&&"value"==t[a+1].type&&"symbol"==t[a+1].kind&&t[a+1].codePoint>=48&&t[a+1].codePoint<=57?i+="\\000":i+=e(n);return i}function p(e){return g(e.type,"anchor|characterClassEscape|characterClassRange|dot|value"),h(e)}function m(e){return g(e.type,"identifier"),e.value}function R(e){return g(e.type,"anchor|characterClass|characterClassEscape|empty|group|quantifier|reference|unicodePropertyEscape|value|dot"),h(e)}var b={alternative:function(e){return g(e.type,"alternative"),f(R,e.body)},anchor:function(e){switch(g(e.type,"anchor"),e.kind){case"start":return"^";case"end":return"$";case"boundary":return"\\b";case"not-boundary":return"\\B";default:throw Error("Invalid assertion")}},characterClass:function(e){return g(e.type,"characterClass"),"["+(e.negative?"^":"")+f(p,e.body)+"]"},characterClassEscape:function(e){return g(e.type,"characterClassEscape"),"\\"+e.value},characterClassRange:function(e){g(e.type,"characterClassRange");var t=e.min,n=e.max;if("characterClassRange"==t.type||"characterClassRange"==n.type)throw Error("Invalid character class range");return p(t)+"-"+p(n)},disjunction:function(e){g(e.type,"disjunction");for(var t=e.body,n=-1,a=t.length,r="";++n<a;)0!=n&&(r+="|"),r+=h(t[n]);return r},dot:function(e){return g(e.type,"dot"),"."},group:function(e){g(e.type,"group");var t="";switch(e.behavior){case"normal":e.name&&(t+="?<"+m(e.name)+">");break;case"ignore":t+="?:";break;case"lookahead":t+="?=";break;case"negativeLookahead":t+="?!";break;case"lookbehind":t+="?<=";break;case"negativeLookbehind":t+="?<!";break;default:throw Error("Invalid behaviour: "+e.behaviour)}return"("+(t+=f(h,e.body))+")"},quantifier:function(e){g(e.type,"quantifier");var t="",n=e.min,a=e.max;return t=null==a?0==n?"*":1==n?"+":"{"+n+",}":n==a?"{"+n+"}":0==n&&1==a?"?":"{"+n+","+a+"}",e.greedy||(t+="?"),function(e){return g(e.type,"anchor|characterClass|characterClassEscape|dot|group|reference|value"),h(e)}(e.body[0])+t},reference:function(e){if(g(e.type,"reference"),e.matchIndex)return"\\"+e.matchIndex;if(e.name)return"\\k<"+m(e.name)+">";throw new Error("Unknown reference type")},unicodePropertyEscape:function(e){return g(e.type,"unicodePropertyEscape"),"\\"+(e.negative?"P":"p")+"{"+e.value+"}"},value:function(e){g(e.type,"value");var t=e.kind,n=e.codePoint;if("number"!=typeof n)throw new Error("Invalid code point: "+n);switch(t){case"controlLetter":return"\\c"+u(n+64);case"hexadecimalEscape":return"\\x"+("00"+n.toString(16).toUpperCase()).slice(-2);case"identifier":return"\\"+u(n);case"null":return"\\"+n;case"octal":return"\\"+("000"+n.toString(8)).slice(-3);case"singleEscape":switch(n){case 8:return"\\b";case 9:return"\\t";case 10:return"\\n";case 11:return"\\v";case 12:return"\\f";case 13:return"\\r";case 45:return"\\-";default:throw Error("Invalid code point: "+n)}case"symbol":return u(n);case"unicodeEscape":return"\\u"+("0000"+n.toString(16).toUpperCase()).slice(-4);case"unicodeCodePointEscape":return"\\u{"+n.toString(16).toUpperCase()+"}";default:throw Error("Unsupported node kind: "+t)}}},y={generate:h};void 0===(a=function(){return y}.call(t,n,t,e))||(e.exports=a),i.regjsgen=y}.call(this)},24524:function(e){var t,n,a,r;a=String.fromCodePoint||(t=String.fromCharCode,n=Math.floor,function(){var e,a,r=[],i=-1,o=arguments.length;if(!o)return"";for(var d="";++i<o;){var s=Number(arguments[i]);if(!isFinite(s)||s<0||s>1114111||n(s)!=s)throw RangeError("Invalid code point: "+s);s<=65535?r.push(s):(e=55296+((s-=65536)>>10),a=s%1024+56320,r.push(e,a)),(i+1==o||r.length>16384)&&(d+=t.apply(null,r),r.length=0)}return d}),r={parse:function(e,t,n){function r(t){return t.raw=e.substring(t.range[0],t.range[1]),t}function i(e,t){return e.range[0]=t,r(e)}function o(e,t){return r({type:"anchor",kind:e,range:[X-t,X]})}function d(e,t,n,a){return r({type:"value",kind:e,codePoint:t,range:[n,a]})}function s(e,t,n,a){return a=a||0,d(e,t,X-(n.length+a),X)}function c(e){var t,n=e[0],a=n.charCodeAt(0);return K&&1===n.length&&a>=55296&&a<=56319&&(t=R().charCodeAt(0))>=56320&&t<=57343?d("symbol",1024*(a-55296)+t-56320+65536,++X-2,X):d("symbol",a,X-1,X)}function u(e,t,n,a){return null==a&&(n=X-1,a=X),r({type:"quantifier",min:e,max:t,greedy:!0,body:null,range:[n,a]})}function l(e,t,n,a){return r({type:"characterClass",kind:e.kind,body:e.body,negative:t,range:[n,a]})}function g(e,t,n,a){return e.codePoint>t.codePoint&&G("invalid range in character class",e.raw+"-"+t.raw,n,a),r({type:"characterClassRange",min:e,max:t,range:[n,a]})}function h(e){return"alternative"===e.type?e.body:[e]}function f(t){t=t||1;var n=e.substring(X,X+t);return X+=t||1,n}function p(e){m(e)||G("character",e)}function m(t){if(e.indexOf(t,X)===X)return f(t.length)}function R(){return e[X]}function b(t){return e.indexOf(t,X)===X}function y(t){return e[X+1]===t}function v(t){var n=e.substring(X).match(t);return n&&(n.range=[],n.range[0]=X,f(n[0].length),n.range[1]=X),n}function _(){var e=[],t=X;for(e.push(w());m("|");)e.push(w());return 1===e.length?e[0]:function(e,t,n){return r({type:"disjunction",body:e,range:[t,n]})}(e,t,X)}function w(){for(var e,t=[],n=X;e=M();)t.push(e);return 1===t.length?t[0]:function(e,t,n){return r({type:"alternative",body:e,range:[t,n]})}(t,n,X)}function M(){if(X>=e.length||b("|")||b(")"))return null;var t=m("^")?o("start",1):m("$")?o("end",1):m("\\b")?o("boundary",2):m("\\B")?o("not-boundary",2):x("(?=","lookahead","(?!","negativeLookahead");if(t)return t;var a,s=function(){var e;if(e=v(/^[^^$\\.*+?()[\]{}|]/))return c(e);if(!K&&(e=v(/^(?:]|})/)))return c(e);if(m("."))return r({type:"dot",range:[X-1,X]});if(m("\\")){if(!(e=D())){if(!K&&"c"==R())return d("symbol",92,X-1,X);G("atomEscape")}return e}if(e=P())return e;if(n.lookbehind&&(e=x("(?<=","lookbehind","(?<!","negativeLookbehind")))return e;if(n.namedGroups&&m("(?<")){var t=I();p(">");var a=E("normal",t.range[0]-3);return a.name=t,a}return x("(?:","ignore","(","normal")}();return s||(pos_backup=X,(a=S()||!1)&&(X=pos_backup,G("Expected atom")),!K&&(res=v(/^{/))?s=c(res):G("Expected atom")),(a=S()||!1)?(a.body=h(s),i(a,s.range[0]),a):s}function x(e,t,n,a){var r=null,i=X;if(m(e))r=t;else{if(!m(n))return!1;r=a}return E(r,i)}function E(e,t){var n=_();n||G("Expected disjunction"),p(")");var a=function(e,t,n,a){return r({type:"group",behavior:e,body:t,range:[n,a]})}(e,h(n),t,X);return"normal"==e&&W&&Q++,a}function S(){var e,t,n,a,r=X;return m("*")?t=u(0):m("+")?t=u(1):m("?")?t=u(0,1):(e=v(/^\{([0-9]+)\}/))?t=u(n=parseInt(e[1],10),n,e.range[0],e.range[1]):(e=v(/^\{([0-9]+),\}/))?t=u(n=parseInt(e[1],10),void 0,e.range[0],e.range[1]):(e=v(/^\{([0-9]+),([0-9]+)\}/))&&((n=parseInt(e[1],10))>(a=parseInt(e[2],10))&&G("numbers out of order in {} quantifier","",r,X),t=u(n,a,e.range[0],e.range[1])),t&&m("?")&&(t.greedy=!1,t.range[1]+=1),t}function k(e){var t,n;if(K&&"unicodeEscape"==e.kind&&(t=e.codePoint)>=55296&&t<=56319&&b("\\")&&y("u")){var a=X;X++;var i=N();"unicodeEscape"==i.kind&&(n=i.codePoint)>=56320&&n<=57343?(e.range[1]=i.range[1],e.codePoint=1024*(t-55296)+n-56320+65536,e.type="value",e.kind="unicodeCodePointEscape",r(e)):X=a}return e}function N(){return D(!0)}function D(e){var t,a=X;if(t=function(){var e,t,n;if(e=v(/^(?!0)\d+/)){t=e[0];var a=parseInt(e[0],10);return a<=Q?(n=e[0],r({type:"reference",matchIndex:parseInt(n,10),range:[X-1-n.length,X]})):(V.push(a),f(-e[0].length),(e=v(/^[0-7]{1,3}/))?s("octal",parseInt(e[0],8),e[0],1):i(e=c(v(/^[89]/)),e.range[0]-1))}return!!(e=v(/^[0-7]{1,3}/))&&(t=e[0],/^0{1,3}$/.test(t)?s("null",0,"0",t.length):s("octal",parseInt(t,8),t,1))}()||function(){if(n.namedGroups&&v(/^k<(?=.*?>)/)){var e=I();return p(">"),function(e){return r({type:"reference",name:e,range:[e.range[0]-3,X]})}(e)}}(),t)return t;if(e){if(m("b"))return s("singleEscape",8,"\\b");if(m("B"))G("\\B not possible inside of CharacterClass","",a);else{if(!K&&(t=v(/^c([0-9])/)))return s("controlLetter",t[1]+16,t[1],2);if(!K&&(t=v(/^c_/)))return s("controlLetter",31,"_",2)}if(K&&m("-"))return s("singleEscape",45,"\\-")}return t=A()||T()}function A(){var e;return(e=v(/^[dDsSwW]/))?r({type:"characterClassEscape",value:e[0],range:[X-2,X]}):!(!n.unicodePropertyEscape||!K&&!Z||!(e=v(/^([pP])\{([^\}]+)\}/)))&&r({type:"unicodePropertyEscape",negative:"P"===e[1],value:e[2],range:[e.range[0]-1,e.range[1]],raw:e[0]})}function j(){var e;return(e=v(/^u([0-9a-fA-F]{4})/))?k(s("unicodeEscape",parseInt(e[1],16),e[1],2)):K&&(e=v(/^u\{([0-9a-fA-F]+)\}/))?s("unicodeCodePointEscape",parseInt(e[1],16),e[1],4):void 0}function T(){var e,t,a,r=X;if(e=v(/^[fnrtv]/)){var i=0;switch(e[0]){case"t":i=9;break;case"n":i=10;break;case"v":i=11;break;case"f":i=12;break;case"r":i=13}return s("singleEscape",i,"\\"+e[0])}return(e=v(/^c([a-zA-Z])/))?s("controlLetter",e[1].charCodeAt(0)%32,e[1],2):(e=v(/^x([0-9a-fA-F]{2})/))?s("hexadecimalEscape",parseInt(e[1],16),e[1],2):(e=j())?((!e||e.codePoint>1114111)&&G("Invalid escape sequence",null,r,X),e):(a=R(),K&&/[\^\$\.\*\+\?\(\)\\\[\]\{\}\|\/]/.test(a)||!K&&"c"!==a?"k"===a&&n.lookbehind?null:s("identifier",(t=f()).charCodeAt(0),t,1):null)}function L(t){var n=R(),r=X;if("\\"===n){f();var i=j();return i&&t(i.codePoint)||G("Invalid escape sequence",null,r,X),a(i.codePoint)}var o=n.charCodeAt(0);if(o>=55296&&o<=56319){var d=(n+=e[X+1]).charCodeAt(1);d>=56320&&d<=57343&&(o=1024*(o-55296)+d-56320+65536)}if(t(o))return f(),o>65535&&f(),n}function I(){var e,t=X,n=L(C);for(n||G("Invalid identifier");e=L(O);)n+=e;return r({type:"identifier",value:n,range:[t,X]})}function C(e){return 36===e||95===e||e>=65&&e<=90||e>=97&&e<=122||e>=128&&/[\$A-Z_a-z\xAA\xB5\xBA\xC0-\xD6\xD8-\xF6\xF8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0370-\u0374\u0376\u0377\u037A-\u037D\u037F\u0386\u0388-\u038A\u038C\u038E-\u03A1\u03A3-\u03F5\u03F7-\u0481\u048A-\u052F\u0531-\u0556\u0559\u0560-\u0588\u05D0-\u05EA\u05EF-\u05F2\u0620-\u064A\u066E\u066F\u0671-\u06D3\u06D5\u06E5\u06E6\u06EE\u06EF\u06FA-\u06FC\u06FF\u0710\u0712-\u072F\u074D-\u07A5\u07B1\u07CA-\u07EA\u07F4\u07F5\u07FA\u0800-\u0815\u081A\u0824\u0828\u0840-\u0858\u0860-\u086A\u08A0-\u08B4\u08B6-\u08BD\u0904-\u0939\u093D\u0950\u0958-\u0961\u0971-\u0980\u0985-\u098C\u098F\u0990\u0993-\u09A8\u09AA-\u09B0\u09B2\u09B6-\u09B9\u09BD\u09CE\u09DC\u09DD\u09DF-\u09E1\u09F0\u09F1\u09FC\u0A05-\u0A0A\u0A0F\u0A10\u0A13-\u0A28\u0A2A-\u0A30\u0A32\u0A33\u0A35\u0A36\u0A38\u0A39\u0A59-\u0A5C\u0A5E\u0A72-\u0A74\u0A85-\u0A8D\u0A8F-\u0A91\u0A93-\u0AA8\u0AAA-\u0AB0\u0AB2\u0AB3\u0AB5-\u0AB9\u0ABD\u0AD0\u0AE0\u0AE1\u0AF9\u0B05-\u0B0C\u0B0F\u0B10\u0B13-\u0B28\u0B2A-\u0B30\u0B32\u0B33\u0B35-\u0B39\u0B3D\u0B5C\u0B5D\u0B5F-\u0B61\u0B71\u0B83\u0B85-\u0B8A\u0B8E-\u0B90\u0B92-\u0B95\u0B99\u0B9A\u0B9C\u0B9E\u0B9F\u0BA3\u0BA4\u0BA8-\u0BAA\u0BAE-\u0BB9\u0BD0\u0C05-\u0C0C\u0C0E-\u0C10\u0C12-\u0C28\u0C2A-\u0C39\u0C3D\u0C58-\u0C5A\u0C60\u0C61\u0C80\u0C85-\u0C8C\u0C8E-\u0C90\u0C92-\u0CA8\u0CAA-\u0CB3\u0CB5-\u0CB9\u0CBD\u0CDE\u0CE0\u0CE1\u0CF1\u0CF2\u0D05-\u0D0C\u0D0E-\u0D10\u0D12-\u0D3A\u0D3D\u0D4E\u0D54-\u0D56\u0D5F-\u0D61\u0D7A-\u0D7F\u0D85-\u0D96\u0D9A-\u0DB1\u0DB3-\u0DBB\u0DBD\u0DC0-\u0DC6\u0E01-\u0E30\u0E32\u0E33\u0E40-\u0E46\u0E81\u0E82\u0E84\u0E87\u0E88\u0E8A\u0E8D\u0E94-\u0E97\u0E99-\u0E9F\u0EA1-\u0EA3\u0EA5\u0EA7\u0EAA\u0EAB\u0EAD-\u0EB0\u0EB2\u0EB3\u0EBD\u0EC0-\u0EC4\u0EC6\u0EDC-\u0EDF\u0F00\u0F40-\u0F47\u0F49-\u0F6C\u0F88-\u0F8C\u1000-\u102A\u103F\u1050-\u1055\u105A-\u105D\u1061\u1065\u1066\u106E-\u1070\u1075-\u1081\u108E\u10A0-\u10C5\u10C7\u10CD\u10D0-\u10FA\u10FC-\u1248\u124A-\u124D\u1250-\u1256\u1258\u125A-\u125D\u1260-\u1288\u128A-\u128D\u1290-\u12B0\u12B2-\u12B5\u12B8-\u12BE\u12C0\u12C2-\u12C5\u12C8-\u12D6\u12D8-\u1310\u1312-\u1315\u1318-\u135A\u1380-\u138F\u13A0-\u13F5\u13F8-\u13FD\u1401-\u166C\u166F-\u167F\u1681-\u169A\u16A0-\u16EA\u16EE-\u16F8\u1700-\u170C\u170E-\u1711\u1720-\u1731\u1740-\u1751\u1760-\u176C\u176E-\u1770\u1780-\u17B3\u17D7\u17DC\u1820-\u1878\u1880-\u18A8\u18AA\u18B0-\u18F5\u1900-\u191E\u1950-\u196D\u1970-\u1974\u1980-\u19AB\u19B0-\u19C9\u1A00-\u1A16\u1A20-\u1A54\u1AA7\u1B05-\u1B33\u1B45-\u1B4B\u1B83-\u1BA0\u1BAE\u1BAF\u1BBA-\u1BE5\u1C00-\u1C23\u1C4D-\u1C4F\u1C5A-\u1C7D\u1C80-\u1C88\u1C90-\u1CBA\u1CBD-\u1CBF\u1CE9-\u1CEC\u1CEE-\u1CF1\u1CF5\u1CF6\u1D00-\u1DBF\u1E00-\u1F15\u1F18-\u1F1D\u1F20-\u1F45\u1F48-\u1F4D\u1F50-\u1F57\u1F59\u1F5B\u1F5D\u1F5F-\u1F7D\u1F80-\u1FB4\u1FB6-\u1FBC\u1FBE\u1FC2-\u1FC4\u1FC6-\u1FCC\u1FD0-\u1FD3\u1FD6-\u1FDB\u1FE0-\u1FEC\u1FF2-\u1FF4\u1FF6-\u1FFC\u2071\u207F\u2090-\u209C\u2102\u2107\u210A-\u2113\u2115\u2118-\u211D\u2124\u2126\u2128\u212A-\u2139\u213C-\u213F\u2145-\u2149\u214E\u2160-\u2188\u2C00-\u2C2E\u2C30-\u2C5E\u2C60-\u2CE4\u2CEB-\u2CEE\u2CF2\u2CF3\u2D00-\u2D25\u2D27\u2D2D\u2D30-\u2D67\u2D6F\u2D80-\u2D96\u2DA0-\u2DA6\u2DA8-\u2DAE\u2DB0-\u2DB6\u2DB8-\u2DBE\u2DC0-\u2DC6\u2DC8-\u2DCE\u2DD0-\u2DD6\u2DD8-\u2DDE\u3005-\u3007\u3021-\u3029\u3031-\u3035\u3038-\u303C\u3041-\u3096\u309B-\u309F\u30A1-\u30FA\u30FC-\u30FF\u3105-\u312F\u3131-\u318E\u31A0-\u31BA\u31F0-\u31FF\u3400-\u4DB5\u4E00-\u9FEF\uA000-\uA48C\uA4D0-\uA4FD\uA500-\uA60C\uA610-\uA61F\uA62A\uA62B\uA640-\uA66E\uA67F-\uA69D\uA6A0-\uA6EF\uA717-\uA71F\uA722-\uA788\uA78B-\uA7B9\uA7F7-\uA801\uA803-\uA805\uA807-\uA80A\uA80C-\uA822\uA840-\uA873\uA882-\uA8B3\uA8F2-\uA8F7\uA8FB\uA8FD\uA8FE\uA90A-\uA925\uA930-\uA946\uA960-\uA97C\uA984-\uA9B2\uA9CF\uA9E0-\uA9E4\uA9E6-\uA9EF\uA9FA-\uA9FE\uAA00-\uAA28\uAA40-\uAA42\uAA44-\uAA4B\uAA60-\uAA76\uAA7A\uAA7E-\uAAAF\uAAB1\uAAB5\uAAB6\uAAB9-\uAABD\uAAC0\uAAC2\uAADB-\uAADD\uAAE0-\uAAEA\uAAF2-\uAAF4\uAB01-\uAB06\uAB09-\uAB0E\uAB11-\uAB16\uAB20-\uAB26\uAB28-\uAB2E\uAB30-\uAB5A\uAB5C-\uAB65\uAB70-\uABE2\uAC00-\uD7A3\uD7B0-\uD7C6\uD7CB-\uD7FB\uF900-\uFA6D\uFA70-\uFAD9\uFB00-\uFB06\uFB13-\uFB17\uFB1D\uFB1F-\uFB28\uFB2A-\uFB36\uFB38-\uFB3C\uFB3E\uFB40\uFB41\uFB43\uFB44\uFB46-\uFBB1\uFBD3-\uFD3D\uFD50-\uFD8F\uFD92-\uFDC7\uFDF0-\uFDFB\uFE70-\uFE74\uFE76-\uFEFC\uFF21-\uFF3A\uFF41-\uFF5A\uFF66-\uFFBE\uFFC2-\uFFC7\uFFCA-\uFFCF\uFFD2-\uFFD7\uFFDA-\uFFDC]|\uD800[\uDC00-\uDC0B\uDC0D-\uDC26\uDC28-\uDC3A\uDC3C\uDC3D\uDC3F-\uDC4D\uDC50-\uDC5D\uDC80-\uDCFA\uDD40-\uDD74\uDE80-\uDE9C\uDEA0-\uDED0\uDF00-\uDF1F\uDF2D-\uDF4A\uDF50-\uDF75\uDF80-\uDF9D\uDFA0-\uDFC3\uDFC8-\uDFCF\uDFD1-\uDFD5]|\uD801[\uDC00-\uDC9D\uDCB0-\uDCD3\uDCD8-\uDCFB\uDD00-\uDD27\uDD30-\uDD63\uDE00-\uDF36\uDF40-\uDF55\uDF60-\uDF67]|\uD802[\uDC00-\uDC05\uDC08\uDC0A-\uDC35\uDC37\uDC38\uDC3C\uDC3F-\uDC55\uDC60-\uDC76\uDC80-\uDC9E\uDCE0-\uDCF2\uDCF4\uDCF5\uDD00-\uDD15\uDD20-\uDD39\uDD80-\uDDB7\uDDBE\uDDBF\uDE00\uDE10-\uDE13\uDE15-\uDE17\uDE19-\uDE35\uDE60-\uDE7C\uDE80-\uDE9C\uDEC0-\uDEC7\uDEC9-\uDEE4\uDF00-\uDF35\uDF40-\uDF55\uDF60-\uDF72\uDF80-\uDF91]|\uD803[\uDC00-\uDC48\uDC80-\uDCB2\uDCC0-\uDCF2\uDD00-\uDD23\uDF00-\uDF1C\uDF27\uDF30-\uDF45]|\uD804[\uDC03-\uDC37\uDC83-\uDCAF\uDCD0-\uDCE8\uDD03-\uDD26\uDD44\uDD50-\uDD72\uDD76\uDD83-\uDDB2\uDDC1-\uDDC4\uDDDA\uDDDC\uDE00-\uDE11\uDE13-\uDE2B\uDE80-\uDE86\uDE88\uDE8A-\uDE8D\uDE8F-\uDE9D\uDE9F-\uDEA8\uDEB0-\uDEDE\uDF05-\uDF0C\uDF0F\uDF10\uDF13-\uDF28\uDF2A-\uDF30\uDF32\uDF33\uDF35-\uDF39\uDF3D\uDF50\uDF5D-\uDF61]|\uD805[\uDC00-\uDC34\uDC47-\uDC4A\uDC80-\uDCAF\uDCC4\uDCC5\uDCC7\uDD80-\uDDAE\uDDD8-\uDDDB\uDE00-\uDE2F\uDE44\uDE80-\uDEAA\uDF00-\uDF1A]|\uD806[\uDC00-\uDC2B\uDCA0-\uDCDF\uDCFF\uDE00\uDE0B-\uDE32\uDE3A\uDE50\uDE5C-\uDE83\uDE86-\uDE89\uDE9D\uDEC0-\uDEF8]|\uD807[\uDC00-\uDC08\uDC0A-\uDC2E\uDC40\uDC72-\uDC8F\uDD00-\uDD06\uDD08\uDD09\uDD0B-\uDD30\uDD46\uDD60-\uDD65\uDD67\uDD68\uDD6A-\uDD89\uDD98\uDEE0-\uDEF2]|\uD808[\uDC00-\uDF99]|\uD809[\uDC00-\uDC6E\uDC80-\uDD43]|[\uD80C\uD81C-\uD820\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD80D[\uDC00-\uDC2E]|\uD811[\uDC00-\uDE46]|\uD81A[\uDC00-\uDE38\uDE40-\uDE5E\uDED0-\uDEED\uDF00-\uDF2F\uDF40-\uDF43\uDF63-\uDF77\uDF7D-\uDF8F]|\uD81B[\uDE40-\uDE7F\uDF00-\uDF44\uDF50\uDF93-\uDF9F\uDFE0\uDFE1]|\uD821[\uDC00-\uDFF1]|\uD822[\uDC00-\uDEF2]|\uD82C[\uDC00-\uDD1E\uDD70-\uDEFB]|\uD82F[\uDC00-\uDC6A\uDC70-\uDC7C\uDC80-\uDC88\uDC90-\uDC99]|\uD835[\uDC00-\uDC54\uDC56-\uDC9C\uDC9E\uDC9F\uDCA2\uDCA5\uDCA6\uDCA9-\uDCAC\uDCAE-\uDCB9\uDCBB\uDCBD-\uDCC3\uDCC5-\uDD05\uDD07-\uDD0A\uDD0D-\uDD14\uDD16-\uDD1C\uDD1E-\uDD39\uDD3B-\uDD3E\uDD40-\uDD44\uDD46\uDD4A-\uDD50\uDD52-\uDEA5\uDEA8-\uDEC0\uDEC2-\uDEDA\uDEDC-\uDEFA\uDEFC-\uDF14\uDF16-\uDF34\uDF36-\uDF4E\uDF50-\uDF6E\uDF70-\uDF88\uDF8A-\uDFA8\uDFAA-\uDFC2\uDFC4-\uDFCB]|\uD83A[\uDC00-\uDCC4\uDD00-\uDD43]|\uD83B[\uDE00-\uDE03\uDE05-\uDE1F\uDE21\uDE22\uDE24\uDE27\uDE29-\uDE32\uDE34-\uDE37\uDE39\uDE3B\uDE42\uDE47\uDE49\uDE4B\uDE4D-\uDE4F\uDE51\uDE52\uDE54\uDE57\uDE59\uDE5B\uDE5D\uDE5F\uDE61\uDE62\uDE64\uDE67-\uDE6A\uDE6C-\uDE72\uDE74-\uDE77\uDE79-\uDE7C\uDE7E\uDE80-\uDE89\uDE8B-\uDE9B\uDEA1-\uDEA3\uDEA5-\uDEA9\uDEAB-\uDEBB]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0]|\uD87E[\uDC00-\uDE1D]/.test(a(e))}function O(e){return C(e)||e>=48&&e<=57||e>=128&&/[0-9_\xB7\u0300-\u036F\u0387\u0483-\u0487\u0591-\u05BD\u05BF\u05C1\u05C2\u05C4\u05C5\u05C7\u0610-\u061A\u064B-\u0669\u0670\u06D6-\u06DC\u06DF-\u06E4\u06E7\u06E8\u06EA-\u06ED\u06F0-\u06F9\u0711\u0730-\u074A\u07A6-\u07B0\u07C0-\u07C9\u07EB-\u07F3\u07FD\u0816-\u0819\u081B-\u0823\u0825-\u0827\u0829-\u082D\u0859-\u085B\u08D3-\u08E1\u08E3-\u0903\u093A-\u093C\u093E-\u094F\u0951-\u0957\u0962\u0963\u0966-\u096F\u0981-\u0983\u09BC\u09BE-\u09C4\u09C7\u09C8\u09CB-\u09CD\u09D7\u09E2\u09E3\u09E6-\u09EF\u09FE\u0A01-\u0A03\u0A3C\u0A3E-\u0A42\u0A47\u0A48\u0A4B-\u0A4D\u0A51\u0A66-\u0A71\u0A75\u0A81-\u0A83\u0ABC\u0ABE-\u0AC5\u0AC7-\u0AC9\u0ACB-\u0ACD\u0AE2\u0AE3\u0AE6-\u0AEF\u0AFA-\u0AFF\u0B01-\u0B03\u0B3C\u0B3E-\u0B44\u0B47\u0B48\u0B4B-\u0B4D\u0B56\u0B57\u0B62\u0B63\u0B66-\u0B6F\u0B82\u0BBE-\u0BC2\u0BC6-\u0BC8\u0BCA-\u0BCD\u0BD7\u0BE6-\u0BEF\u0C00-\u0C04\u0C3E-\u0C44\u0C46-\u0C48\u0C4A-\u0C4D\u0C55\u0C56\u0C62\u0C63\u0C66-\u0C6F\u0C81-\u0C83\u0CBC\u0CBE-\u0CC4\u0CC6-\u0CC8\u0CCA-\u0CCD\u0CD5\u0CD6\u0CE2\u0CE3\u0CE6-\u0CEF\u0D00-\u0D03\u0D3B\u0D3C\u0D3E-\u0D44\u0D46-\u0D48\u0D4A-\u0D4D\u0D57\u0D62\u0D63\u0D66-\u0D6F\u0D82\u0D83\u0DCA\u0DCF-\u0DD4\u0DD6\u0DD8-\u0DDF\u0DE6-\u0DEF\u0DF2\u0DF3\u0E31\u0E34-\u0E3A\u0E47-\u0E4E\u0E50-\u0E59\u0EB1\u0EB4-\u0EB9\u0EBB\u0EBC\u0EC8-\u0ECD\u0ED0-\u0ED9\u0F18\u0F19\u0F20-\u0F29\u0F35\u0F37\u0F39\u0F3E\u0F3F\u0F71-\u0F84\u0F86\u0F87\u0F8D-\u0F97\u0F99-\u0FBC\u0FC6\u102B-\u103E\u1040-\u1049\u1056-\u1059\u105E-\u1060\u1062-\u1064\u1067-\u106D\u1071-\u1074\u1082-\u108D\u108F-\u109D\u135D-\u135F\u1369-\u1371\u1712-\u1714\u1732-\u1734\u1752\u1753\u1772\u1773\u17B4-\u17D3\u17DD\u17E0-\u17E9\u180B-\u180D\u1810-\u1819\u18A9\u1920-\u192B\u1930-\u193B\u1946-\u194F\u19D0-\u19DA\u1A17-\u1A1B\u1A55-\u1A5E\u1A60-\u1A7C\u1A7F-\u1A89\u1A90-\u1A99\u1AB0-\u1ABD\u1B00-\u1B04\u1B34-\u1B44\u1B50-\u1B59\u1B6B-\u1B73\u1B80-\u1B82\u1BA1-\u1BAD\u1BB0-\u1BB9\u1BE6-\u1BF3\u1C24-\u1C37\u1C40-\u1C49\u1C50-\u1C59\u1CD0-\u1CD2\u1CD4-\u1CE8\u1CED\u1CF2-\u1CF4\u1CF7-\u1CF9\u1DC0-\u1DF9\u1DFB-\u1DFF\u200C\u200D\u203F\u2040\u2054\u20D0-\u20DC\u20E1\u20E5-\u20F0\u2CEF-\u2CF1\u2D7F\u2DE0-\u2DFF\u302A-\u302F\u3099\u309A\uA620-\uA629\uA66F\uA674-\uA67D\uA69E\uA69F\uA6F0\uA6F1\uA802\uA806\uA80B\uA823-\uA827\uA880\uA881\uA8B4-\uA8C5\uA8D0-\uA8D9\uA8E0-\uA8F1\uA8FF-\uA909\uA926-\uA92D\uA947-\uA953\uA980-\uA983\uA9B3-\uA9C0\uA9D0-\uA9D9\uA9E5\uA9F0-\uA9F9\uAA29-\uAA36\uAA43\uAA4C\uAA4D\uAA50-\uAA59\uAA7B-\uAA7D\uAAB0\uAAB2-\uAAB4\uAAB7\uAAB8\uAABE\uAABF\uAAC1\uAAEB-\uAAEF\uAAF5\uAAF6\uABE3-\uABEA\uABEC\uABED\uABF0-\uABF9\uFB1E\uFE00-\uFE0F\uFE20-\uFE2F\uFE33\uFE34\uFE4D-\uFE4F\uFF10-\uFF19\uFF3F]|\uD800[\uDDFD\uDEE0\uDF76-\uDF7A]|\uD801[\uDCA0-\uDCA9]|\uD802[\uDE01-\uDE03\uDE05\uDE06\uDE0C-\uDE0F\uDE38-\uDE3A\uDE3F\uDEE5\uDEE6]|\uD803[\uDD24-\uDD27\uDD30-\uDD39\uDF46-\uDF50]|\uD804[\uDC00-\uDC02\uDC38-\uDC46\uDC66-\uDC6F\uDC7F-\uDC82\uDCB0-\uDCBA\uDCF0-\uDCF9\uDD00-\uDD02\uDD27-\uDD34\uDD36-\uDD3F\uDD45\uDD46\uDD73\uDD80-\uDD82\uDDB3-\uDDC0\uDDC9-\uDDCC\uDDD0-\uDDD9\uDE2C-\uDE37\uDE3E\uDEDF-\uDEEA\uDEF0-\uDEF9\uDF00-\uDF03\uDF3B\uDF3C\uDF3E-\uDF44\uDF47\uDF48\uDF4B-\uDF4D\uDF57\uDF62\uDF63\uDF66-\uDF6C\uDF70-\uDF74]|\uD805[\uDC35-\uDC46\uDC50-\uDC59\uDC5E\uDCB0-\uDCC3\uDCD0-\uDCD9\uDDAF-\uDDB5\uDDB8-\uDDC0\uDDDC\uDDDD\uDE30-\uDE40\uDE50-\uDE59\uDEAB-\uDEB7\uDEC0-\uDEC9\uDF1D-\uDF2B\uDF30-\uDF39]|\uD806[\uDC2C-\uDC3A\uDCE0-\uDCE9\uDE01-\uDE0A\uDE33-\uDE39\uDE3B-\uDE3E\uDE47\uDE51-\uDE5B\uDE8A-\uDE99]|\uD807[\uDC2F-\uDC36\uDC38-\uDC3F\uDC50-\uDC59\uDC92-\uDCA7\uDCA9-\uDCB6\uDD31-\uDD36\uDD3A\uDD3C\uDD3D\uDD3F-\uDD45\uDD47\uDD50-\uDD59\uDD8A-\uDD8E\uDD90\uDD91\uDD93-\uDD97\uDDA0-\uDDA9\uDEF3-\uDEF6]|\uD81A[\uDE60-\uDE69\uDEF0-\uDEF4\uDF30-\uDF36\uDF50-\uDF59]|\uD81B[\uDF51-\uDF7E\uDF8F-\uDF92]|\uD82F[\uDC9D\uDC9E]|\uD834[\uDD65-\uDD69\uDD6D-\uDD72\uDD7B-\uDD82\uDD85-\uDD8B\uDDAA-\uDDAD\uDE42-\uDE44]|\uD835[\uDFCE-\uDFFF]|\uD836[\uDE00-\uDE36\uDE3B-\uDE6C\uDE75\uDE84\uDE9B-\uDE9F\uDEA1-\uDEAF]|\uD838[\uDC00-\uDC06\uDC08-\uDC18\uDC1B-\uDC21\uDC23\uDC24\uDC26-\uDC2A]|\uD83A[\uDCD0-\uDCD6\uDD44-\uDD4A\uDD50-\uDD59]|\uDB40[\uDD00-\uDDEF]/.test(a(e))}function P(){var e,t=X;return(e=v(/^\[\^/))?(e=z(),p("]"),l(e,!0,t,X)):m("[")?(e=z(),p("]"),l(e,!1,t,X)):null}function z(){var e,t;return b("]")?{kind:"union",body:[]}:Z?function(){var e,t=[],n=U(!0);for(t.push(n),e="classRange"===n.type?"union":b("&")?"intersection":b("-")?"subtraction":"union";!b("]");)"intersection"===e?(p("&"),p("&"),b("&")&&G("&& cannot be followed by &. Wrap it in parentheses: &&(&).")):"subtraction"===e&&(p("-"),p("-")),n=U("union"===e),t.push(n);return{kind:e,body:t}}():((t=F())||G("classAtom"),(e=b("]")?[t]:B(t))||G("nonEmptyClassRanges"),{kind:"union",body:e})}function B(e){var t,n,a,r,i;if(b("-")&&!y("]")){t=e.range[0],i=c(m("-")),(r=F())||G("classAtom"),n=X;var o=z();return o||G("classRanges"),"codePoint"in e&&"codePoint"in r?a=[g(e,r,t,n)]:K?G("invalid character class"):a=[e,i,r],"empty"===o.type?a:a.concat(o.body)}return(a=function(){var e=F();return e||G("classAtom"),b("]")?e:B(e)}())||G("nonEmptyClassRangesNoDash"),[e].concat(a)}function F(){return m("-")?c("-"):function(){var e;return(e=v(/^[^\\\]-]/))?c(e[0]):m("\\")?((e=N())||G("classEscape"),k(e)):void 0}()}function U(e){var t,n,a=X;if(m("\\"))if(n=A())t=n;else{if(n=q())return n;G("Invalid escape","\\"+R(),a)}else if(n=H())t=n;else{if(n=function(){var e=[],t=X;if(!m("("))return null;do{e.push(Y())}while(m("|"));return p(")"),function(e,t,n){return r({type:"classStrings",strings:e,range:[t,n]})}(e,t,X)}()||P())return n;G("Invalid character",R())}if(e&&b("-")&&!y("-")){if(p("-"),n=$())return g(t,n,a,X);G("Invalid range end",R())}return t}function $(){if(m("\\")){if(res=q())return res;G("Invalid escape","\\"+R(),from)}return H()}function H(){var e;if(e=v(/^[^()[\]{}/\-\\|]/))return c(e)}function q(){return m("b")?s("singleEscape",8,"\\b"):m("B")?void G("\\B not possible inside of ClassContents","",X-2):(res=v(/^[&\-!#%,:;<=>@_`~]/))?s("identifier",res[0].codePointAt(0),res[0]):(res=T())?res:null}function Y(){for(var e,t=[],n=X;e=$();)t.push(e);return function(e,t,n){return r({type:"classString",characters:e,range:[t,n]})}(t,n,X)}function G(t,n,a,r){a=null==a?X:a,r=null==r?a:r;var i=Math.max(0,a-10),o=Math.min(r+10,e.length),d="    "+e.substring(i,o),s="    "+new Array(a-i+1).join(" ")+"^";throw SyntaxError(t+" at position "+a+(n?": "+n:"")+"\n"+d+"\n"+s)}n||(n={});var V=[],Q=0,W=!0,K=-1!==(t||"").indexOf("u"),Z=-1!==(t||"").indexOf("v"),X=0;if(Z&&!n.unicodeSet)throw new Error('The "v" flag is only supported when the .unicodeSet option is enabled.');if(K&&Z)throw new Error('The "u" and "v" flags are mutually exclusive.');""===(e=String(e))&&(e="(?:)");var J=_();J.range[1]!==e.length&&G("Could not parse entire input - got stuck","",J.range[1]);for(var ee=0;ee<V.length;ee++)if(V[ee]<=Q)return X=0,W=!1,_();return J}},e.exports?e.exports=r:window.regjsparser=r},86558:function(e,t,n){"use strict";var a=n(30816).Buffer,r=n(70087),i=n(6883),o=new Array(16),d=[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,7,4,13,1,10,6,15,3,12,0,9,5,2,14,11,8,3,10,14,4,9,15,8,1,2,7,0,6,13,11,5,12,1,9,11,10,0,8,12,4,13,3,7,15,14,5,6,2,4,0,5,9,7,12,2,10,14,1,3,8,11,6,15,13],s=[5,14,7,0,9,2,11,4,13,6,15,8,1,10,3,12,6,11,3,7,0,13,5,10,14,15,8,12,4,9,1,2,15,5,1,3,7,14,6,9,11,8,12,2,10,0,4,13,8,6,4,1,3,11,15,0,5,12,2,13,9,7,10,14,12,15,10,4,1,5,8,7,6,2,13,14,0,3,9,11],c=[11,14,15,12,5,8,7,9,11,13,14,15,6,7,9,8,7,6,8,13,11,9,7,15,7,12,15,9,11,7,13,12,11,13,6,7,14,9,13,15,14,8,13,6,5,12,7,5,11,12,14,15,14,15,9,8,9,14,5,6,8,6,5,12,9,15,5,11,6,8,13,12,5,12,13,14,11,8,5,6],u=[8,9,9,11,13,15,15,5,7,7,8,11,14,14,12,6,9,13,15,7,12,8,9,11,7,7,12,7,6,15,13,11,9,7,15,11,8,6,6,14,12,13,5,14,13,13,7,5,15,5,8,11,14,14,6,14,6,9,12,9,12,5,15,8,8,5,12,9,12,5,14,6,8,13,6,5,15,13,11,11],l=[0,1518500249,1859775393,2400959708,2840853838],g=[1352829926,1548603684,1836072691,2053994217,0];function h(){i.call(this,64),this._a=1732584193,this._b=4023233417,this._c=2562383102,this._d=271733878,this._e=3285377520}function f(e,t){return e<<t|e>>>32-t}function p(e,t,n,a,r,i,o,d){return f(e+(t^n^a)+i+o|0,d)+r|0}function m(e,t,n,a,r,i,o,d){return f(e+(t&n|~t&a)+i+o|0,d)+r|0}function R(e,t,n,a,r,i,o,d){return f(e+((t|~n)^a)+i+o|0,d)+r|0}function b(e,t,n,a,r,i,o,d){return f(e+(t&a|n&~a)+i+o|0,d)+r|0}function y(e,t,n,a,r,i,o,d){return f(e+(t^(n|~a))+i+o|0,d)+r|0}r(h,i),h.prototype._update=function(){for(var e=o,t=0;t<16;++t)e[t]=this._block.readInt32LE(4*t);for(var n=0|this._a,a=0|this._b,r=0|this._c,i=0|this._d,h=0|this._e,v=0|this._a,_=0|this._b,w=0|this._c,M=0|this._d,x=0|this._e,E=0;E<80;E+=1){var S,k;E<16?(S=p(n,a,r,i,h,e[d[E]],l[0],c[E]),k=y(v,_,w,M,x,e[s[E]],g[0],u[E])):E<32?(S=m(n,a,r,i,h,e[d[E]],l[1],c[E]),k=b(v,_,w,M,x,e[s[E]],g[1],u[E])):E<48?(S=R(n,a,r,i,h,e[d[E]],l[2],c[E]),k=R(v,_,w,M,x,e[s[E]],g[2],u[E])):E<64?(S=b(n,a,r,i,h,e[d[E]],l[3],c[E]),k=m(v,_,w,M,x,e[s[E]],g[3],u[E])):(S=y(n,a,r,i,h,e[d[E]],l[4],c[E]),k=p(v,_,w,M,x,e[s[E]],g[4],u[E])),n=h,h=i,i=f(r,10),r=a,a=S,v=x,x=M,M=f(w,10),w=_,_=k}var N=this._b+r+M|0;this._b=this._c+i+x|0,this._c=this._d+h+v|0,this._d=this._e+n+_|0,this._e=this._a+a+w|0,this._a=N},h.prototype._digest=function(){this._block[this._blockOffset++]=128,this._blockOffset>56&&(this._block.fill(0,this._blockOffset,64),this._update(),this._blockOffset=0),this._block.fill(0,this._blockOffset,56),this._block.writeUInt32LE(this._length[0],56),this._block.writeUInt32LE(this._length[1],60),this._update();var e=a.alloc?a.alloc(20):new a(20);return e.writeInt32LE(this._a,0),e.writeInt32LE(this._b,4),e.writeInt32LE(this._c,8),e.writeInt32LE(this._d,12),e.writeInt32LE(this._e,16),e},e.exports=h},27172:function(e,t,n){var a=n(30816),r=a.Buffer;function i(e,t){for(var n in e)t[n]=e[n]}function o(e,t,n){return r(e,t,n)}r.from&&r.alloc&&r.allocUnsafe&&r.allocUnsafeSlow?e.exports=a:(i(a,t),t.Buffer=o),o.prototype=Object.create(r.prototype),i(r,o),o.from=function(e,t,n){if("number"==typeof e)throw new TypeError("Argument must not be a number");return r(e,t,n)},o.alloc=function(e,t,n){if("number"!=typeof e)throw new TypeError("Argument must be a number");var a=r(e);return void 0!==t?"string"==typeof n?a.fill(t,n):a.fill(t):a.fill(0),a},o.allocUnsafe=function(e){if("number"!=typeof e)throw new TypeError("Argument must be a number");return r(e)},o.allocUnsafeSlow=function(e){if("number"!=typeof e)throw new TypeError("Argument must be a number");return a.SlowBuffer(e)}},21788:function(e,t,n){"use strict";var a,r=n(27061),i=n(30816),o=i.Buffer,d={};for(a in i)i.hasOwnProperty(a)&&"SlowBuffer"!==a&&"Buffer"!==a&&(d[a]=i[a]);var s=d.Buffer={};for(a in o)o.hasOwnProperty(a)&&"allocUnsafe"!==a&&"allocUnsafeSlow"!==a&&(s[a]=o[a]);if(d.Buffer.prototype=o.prototype,s.from&&s.from!==Uint8Array.from||(s.from=function(e,t,n){if("number"==typeof e)throw new TypeError('The "value" argument must not be of type number. Received type '+typeof e);if(e&&void 0===e.length)throw new TypeError("The first argument must be one of type string, Buffer, ArrayBuffer, Array, or Array-like Object. Received type "+typeof e);return o(e,t,n)}),s.alloc||(s.alloc=function(e,t,n){if("number"!=typeof e)throw new TypeError('The "size" argument must be of type number. Received type '+typeof e);if(e<0||e>=2*(1<<30))throw new RangeError('The value "'+e+'" is invalid for option "size"');var a=o(e);return t&&0!==t.length?"string"==typeof n?a.fill(t,n):a.fill(t):a.fill(0),a}),!d.kStringMaxLength)try{d.kStringMaxLength=r.binding("buffer").kStringMaxLength}catch(c){}d.constants||(d.constants={MAX_LENGTH:d.kMaxLength},d.kStringMaxLength&&(d.constants.MAX_STRING_LENGTH=d.kStringMaxLength)),e.exports=d},64926:function(e,t,n){const a=n(72904),r=n(61393),{isPlainObject:i}=n(54518),o=n(21857),d=n(58523),{parse:s}=n(51722),c=["img","audio","video","picture","svg","object","map","iframe","embed"],u=["script","style"];function l(e,t){e&&Object.keys(e).forEach((function(n){t(e[n],n)}))}function g(e,t){return{}.hasOwnProperty.call(e,t)}function h(e,t){const n=[];return l(e,(function(e){t(e)&&n.push(e)})),n}e.exports=p;const f=/^[^\0\t\n\f\r /<=>]+$/;function p(e,t,n){if(null==e)return"";"number"==typeof e&&(e=e.toString());let R="",b="";function y(e,t){const n=this;this.tag=e,this.attribs=t||{},this.tagPosition=R.length,this.text="",this.mediaChildren=[],this.updateParentNodeText=function(){if(A.length){A[A.length-1].text+=n.text}},this.updateParentNodeMediaChildren=function(){if(A.length&&c.includes(this.tag)){A[A.length-1].mediaChildren.push(this.tag)}}}(t=Object.assign({},p.defaults,t)).parser=Object.assign({},m,t.parser);const v=function(e){return!1===t.allowedTags||(t.allowedTags||[]).indexOf(e)>-1};u.forEach((function(e){v(e)&&!t.allowVulnerableTags&&console.warn(`\n\n⚠️ Your \`allowedTags\` option includes, \`${e}\`, which is inherently\nvulnerable to XSS attacks. Please remove it from \`allowedTags\`.\nOr, to disable this warning, add the \`allowVulnerableTags\` option\nand ensure you are accounting for this risk.\n\n`)}));const _=t.nonTextTags||["script","style","textarea","option"];let w,M;t.allowedAttributes&&(w={},M={},l(t.allowedAttributes,(function(e,t){w[t]=[];const n=[];e.forEach((function(e){"string"==typeof e&&e.indexOf("*")>=0?n.push(r(e).replace(/\\\*/g,".*")):w[t].push(e)})),n.length&&(M[t]=new RegExp("^("+n.join("|")+")$"))})));const x={},E={},S={};l(t.allowedClasses,(function(e,t){w&&(g(w,t)||(w[t]=[]),w[t].push("class")),x[t]=[],S[t]=[];const n=[];e.forEach((function(e){"string"==typeof e&&e.indexOf("*")>=0?n.push(r(e).replace(/\\\*/g,".*")):e instanceof RegExp?S[t].push(e):x[t].push(e)})),n.length&&(E[t]=new RegExp("^("+n.join("|")+")$"))}));const k={};let N,D,A,j,T,L,I;l(t.transformTags,(function(e,t){let n;"function"==typeof e?n=e:"string"==typeof e&&(n=p.simpleTransform(e)),"*"===t?N=n:k[t]=n}));let C=!1;P();const O=new a.Parser({onopentag:function(e,n){if(t.enforceHtmlBoundary&&"html"===e&&P(),L)return void I++;const a=new y(e,n);A.push(a);let r=!1;const c=!!a.text;let u;if(g(k,e)&&(u=k[e](e,n),a.attribs=n=u.attribs,void 0!==u.text&&(a.innerText=u.text),e!==u.tagName&&(a.name=e=u.tagName,T[D]=u.tagName)),N&&(u=N(e,n),a.attribs=n=u.attribs,e!==u.tagName&&(a.name=e=u.tagName,T[D]=u.tagName)),(!v(e)||"recursiveEscape"===t.disallowedTagsMode&&!function(e){for(const t in e)if(g(e,t))return!1;return!0}(j)||null!=t.nestingLimit&&D>=t.nestingLimit)&&(r=!0,j[D]=!0,"discard"===t.disallowedTagsMode&&-1!==_.indexOf(e)&&(L=!0,I=1),j[D]=!0),D++,r){if("discard"===t.disallowedTagsMode)return;b=R,R=""}R+="<"+e,"script"===e&&(t.allowedScriptHostnames||t.allowedScriptDomains)&&(a.innerText=""),(!w||g(w,e)||w["*"])&&l(n,(function(n,r){if(!f.test(r))return void delete a.attribs[r];let c=!1;if(!w||g(w,e)&&-1!==w[e].indexOf(r)||w["*"]&&-1!==w["*"].indexOf(r)||g(M,e)&&M[e].test(r)||M["*"]&&M["*"].test(r))c=!0;else if(w&&w[e])for(const t of w[e])if(i(t)&&t.name&&t.name===r){c=!0;let e="";if(!0===t.multiple){const a=n.split(" ");for(const n of a)-1!==t.values.indexOf(n)&&(""===e?e=n:e+=" "+n)}else t.values.indexOf(n)>=0&&(e=n);n=e}if(c){if(-1!==t.allowedSchemesAppliedToAttributes.indexOf(r)&&B(e,n))return void delete a.attribs[r];if("script"===e&&"src"===r){let e=!0;try{const a=F(n);if(t.allowedScriptHostnames||t.allowedScriptDomains){const n=(t.allowedScriptHostnames||[]).find((function(e){return e===a.url.hostname})),r=(t.allowedScriptDomains||[]).find((function(e){return a.url.hostname===e||a.url.hostname.endsWith(`.${e}`)}));e=n||r}}catch(u){e=!1}if(!e)return void delete a.attribs[r]}if("iframe"===e&&"src"===r){let e=!0;try{const a=F(n);if(a.isRelativeUrl)e=g(t,"allowIframeRelativeUrls")?t.allowIframeRelativeUrls:!t.allowedIframeHostnames&&!t.allowedIframeDomains;else if(t.allowedIframeHostnames||t.allowedIframeDomains){const n=(t.allowedIframeHostnames||[]).find((function(e){return e===a.url.hostname})),r=(t.allowedIframeDomains||[]).find((function(e){return a.url.hostname===e||a.url.hostname.endsWith(`.${e}`)}));e=n||r}}catch(u){e=!1}if(!e)return void delete a.attribs[r]}if("srcset"===r)try{let e=d(n);if(e.forEach((function(e){B("srcset",e.url)&&(e.evil=!0)})),e=h(e,(function(e){return!e.evil})),!e.length)return void delete a.attribs[r];n=h(e,(function(e){return!e.evil})).map((function(e){if(!e.url)throw new Error("URL missing");return e.url+(e.w?` ${e.w}w`:"")+(e.h?` ${e.h}h`:"")+(e.d?` ${e.d}x`:"")})).join(", "),a.attribs[r]=n}catch(u){return void delete a.attribs[r]}if("class"===r){const t=x[e],i=x["*"],d=E[e],s=S[e],c=[d,E["*"]].concat(s).filter((function(e){return e}));if(!(n=U(n,t&&i?o(t,i):t||i,c)).length)return void delete a.attribs[r]}if("style"===r)if(t.parseStyleAttributes)try{const i=function(e,t){if(!t)return e;const n=e.nodes[0];let a;a=t[n.selector]&&t["*"]?o(t[n.selector],t["*"]):t[n.selector]||t["*"];a&&(e.nodes[0].nodes=n.nodes.reduce(function(e){return function(t,n){if(g(e,n.prop)){e[n.prop].some((function(e){return e.test(n.value)}))&&t.push(n)}return t}}(a),[]));return e}(s(e+" {"+n+"}"),t.allowedStyles);if(n=function(e){return e.nodes[0].nodes.reduce((function(e,t){return e.push(`${t.prop}:${t.value}${t.important?" !important":""}`),e}),[]).join(";")}(i),0===n.length)return void delete a.attribs[r]}catch(u){return console.warn('Failed to parse "'+e+" {"+n+"}\", If you're running this in a browser, we recommend to disable style parsing: options.parseStyleAttributes: false, since this only works in a node environment due to a postcss dependency, More info: https://github.com/apostrophecms/sanitize-html/issues/547"),void delete a.attribs[r]}else if(t.allowedStyles)throw new Error("allowedStyles option cannot be used together with parseStyleAttributes: false.");R+=" "+r,n&&n.length&&(R+='="'+z(n,!0)+'"')}else delete a.attribs[r]})),-1!==t.selfClosing.indexOf(e)?R+=" />":(R+=">",!a.innerText||c||t.textFilter||(R+=z(a.innerText),C=!0)),r&&(R=b+z(R),b="")},ontext:function(e){if(L)return;const n=A[A.length-1];let a;if(n&&(a=n.tag,e=void 0!==n.innerText?n.innerText:e),"discard"!==t.disallowedTagsMode||"script"!==a&&"style"!==a){const n=z(e,!1);t.textFilter&&!C?R+=t.textFilter(n,a):C||(R+=n)}else R+=e;if(A.length){A[A.length-1].text+=e}},onclosetag:function(e,n){if(L){if(I--,I)return;L=!1}const a=A.pop();if(!a)return;if(a.tag!==e)return void A.push(a);L=!!t.enforceHtmlBoundary&&"html"===e,D--;const r=j[D];if(r){if(delete j[D],"discard"===t.disallowedTagsMode)return void a.updateParentNodeText();b=R,R=""}T[D]&&(e=T[D],delete T[D]),t.exclusiveFilter&&t.exclusiveFilter(a)?R=R.substr(0,a.tagPosition):(a.updateParentNodeMediaChildren(),a.updateParentNodeText(),-1!==t.selfClosing.indexOf(e)||n&&!v(e)&&["escape","recursiveEscape"].indexOf(t.disallowedTagsMode)>=0?r&&(R=b,b=""):(R+="</"+e+">",r&&(R=b+z(R),b=""),C=!1))}},t.parser);return O.write(e),O.end(),R;function P(){R="",D=0,A=[],j={},T={},L=!1,I=0}function z(e,n){return"string"!=typeof e&&(e+=""),t.parser.decodeEntities&&(e=e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;"),n&&(e=e.replace(/"/g,"&quot;"))),e=e.replace(/&(?![a-zA-Z0-9#]{1,20};)/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;"),n&&(e=e.replace(/"/g,"&quot;")),e}function B(e,n){for(n=n.replace(/[\x00-\x20]+/g,"");;){const e=n.indexOf("\x3c!--");if(-1===e)break;const t=n.indexOf("--\x3e",e+4);if(-1===t)break;n=n.substring(0,e)+n.substring(t+3)}const a=n.match(/^([a-zA-Z][a-zA-Z0-9.\-+]*):/);if(!a)return!!n.match(/^[/\\]{2}/)&&!t.allowProtocolRelative;const r=a[1].toLowerCase();return g(t.allowedSchemesByTag,e)?-1===t.allowedSchemesByTag[e].indexOf(r):!t.allowedSchemes||-1===t.allowedSchemes.indexOf(r)}function F(e){if((e=e.replace(/^(\w+:)?\s*[\\/]\s*[\\/]/,"$1//")).startsWith("relative:"))throw new Error("relative: exploit attempt");let t="relative://relative-site";for(let a=0;a<100;a++)t+=`/${a}`;const n=new URL(e,t);return{isRelativeUrl:n&&"relative-site"===n.hostname&&"relative:"===n.protocol,url:n}}function U(e,t,n){return t?(e=e.split(/\s+/)).filter((function(e){return-1!==t.indexOf(e)||n.some((function(t){return t.test(e)}))})).join(" "):e}}const m={decodeEntities:!0};p.defaults={allowedTags:["address","article","aside","footer","header","h1","h2","h3","h4","h5","h6","hgroup","main","nav","section","blockquote","dd","div","dl","dt","figcaption","figure","hr","li","main","ol","p","pre","ul","a","abbr","b","bdi","bdo","br","cite","code","data","dfn","em","i","kbd","mark","q","rb","rp","rt","rtc","ruby","s","samp","small","span","strong","sub","sup","time","u","var","wbr","caption","col","colgroup","table","tbody","td","tfoot","th","thead","tr"],disallowedTagsMode:"discard",allowedAttributes:{a:["href","name","target"],img:["src","srcset","alt","title","width","height","loading"]},selfClosing:["img","br","hr","area","base","basefont","input","link","meta"],allowedSchemes:["http","https","ftp","mailto","tel"],allowedSchemesByTag:{},allowedSchemesAppliedToAttributes:["href","src","cite"],allowProtocolRelative:!0,enforceHtmlBoundary:!1,parseStyleAttributes:!0},p.simpleTransform=function(e,t,n){return n=void 0===n||n,t=t||{},function(a,r){let i;if(n)for(i in t)r[i]=t[i];else r=t;return{tagName:e,attribs:r}}}},43134:function(e,t,n){const a=Symbol("SemVer ANY");class r{static get ANY(){return a}constructor(e,t){if(t=i(t),e instanceof r){if(e.loose===!!t.loose)return e;e=e.value}e=e.trim().split(/\s+/).join(" "),c("comparator",e,t),this.options=t,this.loose=!!t.loose,this.parse(e),this.semver===a?this.value="":this.value=this.operator+this.semver.version,c("comp",this)}parse(e){const t=this.options.loose?o[d.COMPARATORLOOSE]:o[d.COMPARATOR],n=e.match(t);if(!n)throw new TypeError(`Invalid comparator: ${e}`);this.operator=void 0!==n[1]?n[1]:"","="===this.operator&&(this.operator=""),n[2]?this.semver=new u(n[2],this.options.loose):this.semver=a}toString(){return this.value}test(e){if(c("Comparator.test",e,this.options.loose),this.semver===a||e===a)return!0;if("string"==typeof e)try{e=new u(e,this.options)}catch(t){return!1}return s(e,this.operator,this.semver,this.options)}intersects(e,t){if(!(e instanceof r))throw new TypeError("a Comparator is required");return""===this.operator?""===this.value||new l(e.value,t).test(this.value):""===e.operator?""===e.value||new l(this.value,t).test(e.semver):(!(t=i(t)).includePrerelease||"<0.0.0-0"!==this.value&&"<0.0.0-0"!==e.value)&&(!(!t.includePrerelease&&(this.value.startsWith("<0.0.0")||e.value.startsWith("<0.0.0")))&&(!(!this.operator.startsWith(">")||!e.operator.startsWith(">"))||(!(!this.operator.startsWith("<")||!e.operator.startsWith("<"))||(!(this.semver.version!==e.semver.version||!this.operator.includes("=")||!e.operator.includes("="))||(!!(s(this.semver,"<",e.semver,t)&&this.operator.startsWith(">")&&e.operator.startsWith("<"))||!!(s(this.semver,">",e.semver,t)&&this.operator.startsWith("<")&&e.operator.startsWith(">")))))))}}e.exports=r;const i=n(48716),{safeRe:o,t:d}=n(19022),s=n(35452),c=n(46830),u=n(89510),l=n(87374)},87374:function(e,t,n){class a{constructor(e,t){if(t=i(t),e instanceof a)return e.loose===!!t.loose&&e.includePrerelease===!!t.includePrerelease?e:new a(e.raw,t);if(e instanceof o)return this.raw=e.value,this.set=[[e]],this.format(),this;if(this.options=t,this.loose=!!t.loose,this.includePrerelease=!!t.includePrerelease,this.raw=e.trim().split(/\s+/).join(" "),this.set=this.raw.split("||").map((e=>this.parseRange(e.trim()))).filter((e=>e.length)),!this.set.length)throw new TypeError(`Invalid SemVer Range: ${this.raw}`);if(this.set.length>1){const e=this.set[0];if(this.set=this.set.filter((e=>!m(e[0]))),0===this.set.length)this.set=[e];else if(this.set.length>1)for(const t of this.set)if(1===t.length&&R(t[0])){this.set=[t];break}}this.format()}format(){return this.range=this.set.map((e=>e.join(" ").trim())).join("||").trim(),this.range}toString(){return this.range}parseRange(e){const t=((this.options.includePrerelease&&f)|(this.options.loose&&p))+":"+e,n=r.get(t);if(n)return n;const a=this.options.loose,i=a?c[u.HYPHENRANGELOOSE]:c[u.HYPHENRANGE];e=e.replace(i,D(this.options.includePrerelease)),d("hyphen replace",e),e=e.replace(c[u.COMPARATORTRIM],l),d("comparator trim",e),e=e.replace(c[u.TILDETRIM],g),d("tilde trim",e),e=e.replace(c[u.CARETTRIM],h),d("caret trim",e);let s=e.split(" ").map((e=>y(e,this.options))).join(" ").split(/\s+/).map((e=>N(e,this.options)));a&&(s=s.filter((e=>(d("loose invalid filter",e,this.options),!!e.match(c[u.COMPARATORLOOSE]))))),d("range list",s);const R=new Map,b=s.map((e=>new o(e,this.options)));for(const r of b){if(m(r))return[r];R.set(r.value,r)}R.size>1&&R.has("")&&R.delete("");const v=[...R.values()];return r.set(t,v),v}intersects(e,t){if(!(e instanceof a))throw new TypeError("a Range is required");return this.set.some((n=>b(n,t)&&e.set.some((e=>b(e,t)&&n.every((n=>e.every((e=>n.intersects(e,t)))))))))}test(e){if(!e)return!1;if("string"==typeof e)try{e=new s(e,this.options)}catch(t){return!1}for(let n=0;n<this.set.length;n++)if(A(this.set[n],e,this.options))return!0;return!1}}e.exports=a;const r=new(n(35295))({max:1e3}),i=n(48716),o=n(43134),d=n(46830),s=n(89510),{safeRe:c,t:u,comparatorTrimReplace:l,tildeTrimReplace:g,caretTrimReplace:h}=n(19022),{FLAG_INCLUDE_PRERELEASE:f,FLAG_LOOSE:p}=n(50039),m=e=>"<0.0.0-0"===e.value,R=e=>""===e.value,b=(e,t)=>{let n=!0;const a=e.slice();let r=a.pop();for(;n&&a.length;)n=a.every((e=>r.intersects(e,t))),r=a.pop();return n},y=(e,t)=>(d("comp",e,t),e=M(e,t),d("caret",e),e=_(e,t),d("tildes",e),e=E(e,t),d("xrange",e),e=k(e,t),d("stars",e),e),v=e=>!e||"x"===e.toLowerCase()||"*"===e,_=(e,t)=>e.trim().split(/\s+/).map((e=>w(e,t))).join(" "),w=(e,t)=>{const n=t.loose?c[u.TILDELOOSE]:c[u.TILDE];return e.replace(n,((t,n,a,r,i)=>{let o;return d("tilde",e,t,n,a,r,i),v(n)?o="":v(a)?o=`>=${n}.0.0 <${+n+1}.0.0-0`:v(r)?o=`>=${n}.${a}.0 <${n}.${+a+1}.0-0`:i?(d("replaceTilde pr",i),o=`>=${n}.${a}.${r}-${i} <${n}.${+a+1}.0-0`):o=`>=${n}.${a}.${r} <${n}.${+a+1}.0-0`,d("tilde return",o),o}))},M=(e,t)=>e.trim().split(/\s+/).map((e=>x(e,t))).join(" "),x=(e,t)=>{d("caret",e,t);const n=t.loose?c[u.CARETLOOSE]:c[u.CARET],a=t.includePrerelease?"-0":"";return e.replace(n,((t,n,r,i,o)=>{let s;return d("caret",e,t,n,r,i,o),v(n)?s="":v(r)?s=`>=${n}.0.0${a} <${+n+1}.0.0-0`:v(i)?s="0"===n?`>=${n}.${r}.0${a} <${n}.${+r+1}.0-0`:`>=${n}.${r}.0${a} <${+n+1}.0.0-0`:o?(d("replaceCaret pr",o),s="0"===n?"0"===r?`>=${n}.${r}.${i}-${o} <${n}.${r}.${+i+1}-0`:`>=${n}.${r}.${i}-${o} <${n}.${+r+1}.0-0`:`>=${n}.${r}.${i}-${o} <${+n+1}.0.0-0`):(d("no pr"),s="0"===n?"0"===r?`>=${n}.${r}.${i}${a} <${n}.${r}.${+i+1}-0`:`>=${n}.${r}.${i}${a} <${n}.${+r+1}.0-0`:`>=${n}.${r}.${i} <${+n+1}.0.0-0`),d("caret return",s),s}))},E=(e,t)=>(d("replaceXRanges",e,t),e.split(/\s+/).map((e=>S(e,t))).join(" ")),S=(e,t)=>{e=e.trim();const n=t.loose?c[u.XRANGELOOSE]:c[u.XRANGE];return e.replace(n,((n,a,r,i,o,s)=>{d("xRange",e,n,a,r,i,o,s);const c=v(r),u=c||v(i),l=u||v(o),g=l;return"="===a&&g&&(a=""),s=t.includePrerelease?"-0":"",c?n=">"===a||"<"===a?"<0.0.0-0":"*":a&&g?(u&&(i=0),o=0,">"===a?(a=">=",u?(r=+r+1,i=0,o=0):(i=+i+1,o=0)):"<="===a&&(a="<",u?r=+r+1:i=+i+1),"<"===a&&(s="-0"),n=`${a+r}.${i}.${o}${s}`):u?n=`>=${r}.0.0${s} <${+r+1}.0.0-0`:l&&(n=`>=${r}.${i}.0${s} <${r}.${+i+1}.0-0`),d("xRange return",n),n}))},k=(e,t)=>(d("replaceStars",e,t),e.trim().replace(c[u.STAR],"")),N=(e,t)=>(d("replaceGTE0",e,t),e.trim().replace(c[t.includePrerelease?u.GTE0PRE:u.GTE0],"")),D=e=>(t,n,a,r,i,o,d,s,c,u,l,g,h)=>`${n=v(a)?"":v(r)?`>=${a}.0.0${e?"-0":""}`:v(i)?`>=${a}.${r}.0${e?"-0":""}`:o?`>=${n}`:`>=${n}${e?"-0":""}`} ${s=v(c)?"":v(u)?`<${+c+1}.0.0-0`:v(l)?`<${c}.${+u+1}.0-0`:g?`<=${c}.${u}.${l}-${g}`:e?`<${c}.${u}.${+l+1}-0`:`<=${s}`}`.trim(),A=(e,t,n)=>{for(let a=0;a<e.length;a++)if(!e[a].test(t))return!1;if(t.prerelease.length&&!n.includePrerelease){for(let n=0;n<e.length;n++)if(d(e[n].semver),e[n].semver!==o.ANY&&e[n].semver.prerelease.length>0){const a=e[n].semver;if(a.major===t.major&&a.minor===t.minor&&a.patch===t.patch)return!0}return!1}return!0}},89510:function(e,t,n){const a=n(46830),{MAX_LENGTH:r,MAX_SAFE_INTEGER:i}=n(50039),{safeRe:o,t:d}=n(19022),s=n(48716),{compareIdentifiers:c}=n(8822);class u{constructor(e,t){if(t=s(t),e instanceof u){if(e.loose===!!t.loose&&e.includePrerelease===!!t.includePrerelease)return e;e=e.version}else if("string"!=typeof e)throw new TypeError(`Invalid version. Must be a string. Got type "${typeof e}".`);if(e.length>r)throw new TypeError(`version is longer than ${r} characters`);a("SemVer",e,t),this.options=t,this.loose=!!t.loose,this.includePrerelease=!!t.includePrerelease;const n=e.trim().match(t.loose?o[d.LOOSE]:o[d.FULL]);if(!n)throw new TypeError(`Invalid Version: ${e}`);if(this.raw=e,this.major=+n[1],this.minor=+n[2],this.patch=+n[3],this.major>i||this.major<0)throw new TypeError("Invalid major version");if(this.minor>i||this.minor<0)throw new TypeError("Invalid minor version");if(this.patch>i||this.patch<0)throw new TypeError("Invalid patch version");n[4]?this.prerelease=n[4].split(".").map((e=>{if(/^[0-9]+$/.test(e)){const t=+e;if(t>=0&&t<i)return t}return e})):this.prerelease=[],this.build=n[5]?n[5].split("."):[],this.format()}format(){return this.version=`${this.major}.${this.minor}.${this.patch}`,this.prerelease.length&&(this.version+=`-${this.prerelease.join(".")}`),this.version}toString(){return this.version}compare(e){if(a("SemVer.compare",this.version,this.options,e),!(e instanceof u)){if("string"==typeof e&&e===this.version)return 0;e=new u(e,this.options)}return e.version===this.version?0:this.compareMain(e)||this.comparePre(e)}compareMain(e){return e instanceof u||(e=new u(e,this.options)),c(this.major,e.major)||c(this.minor,e.minor)||c(this.patch,e.patch)}comparePre(e){if(e instanceof u||(e=new u(e,this.options)),this.prerelease.length&&!e.prerelease.length)return-1;if(!this.prerelease.length&&e.prerelease.length)return 1;if(!this.prerelease.length&&!e.prerelease.length)return 0;let t=0;do{const n=this.prerelease[t],r=e.prerelease[t];if(a("prerelease compare",t,n,r),void 0===n&&void 0===r)return 0;if(void 0===r)return 1;if(void 0===n)return-1;if(n!==r)return c(n,r)}while(++t)}compareBuild(e){e instanceof u||(e=new u(e,this.options));let t=0;do{const n=this.build[t],r=e.build[t];if(a("prerelease compare",t,n,r),void 0===n&&void 0===r)return 0;if(void 0===r)return 1;if(void 0===n)return-1;if(n!==r)return c(n,r)}while(++t)}inc(e,t,n){switch(e){case"premajor":this.prerelease.length=0,this.patch=0,this.minor=0,this.major++,this.inc("pre",t,n);break;case"preminor":this.prerelease.length=0,this.patch=0,this.minor++,this.inc("pre",t,n);break;case"prepatch":this.prerelease.length=0,this.inc("patch",t,n),this.inc("pre",t,n);break;case"prerelease":0===this.prerelease.length&&this.inc("patch",t,n),this.inc("pre",t,n);break;case"major":0===this.minor&&0===this.patch&&0!==this.prerelease.length||this.major++,this.minor=0,this.patch=0,this.prerelease=[];break;case"minor":0===this.patch&&0!==this.prerelease.length||this.minor++,this.patch=0,this.prerelease=[];break;case"patch":0===this.prerelease.length&&this.patch++,this.prerelease=[];break;case"pre":{const e=Number(n)?1:0;if(!t&&!1===n)throw new Error("invalid increment argument: identifier is empty");if(0===this.prerelease.length)this.prerelease=[e];else{let a=this.prerelease.length;for(;--a>=0;)"number"==typeof this.prerelease[a]&&(this.prerelease[a]++,a=-2);if(-1===a){if(t===this.prerelease.join(".")&&!1===n)throw new Error("invalid increment argument: identifier already exists");this.prerelease.push(e)}}if(t){let a=[t,e];!1===n&&(a=[t]),0===c(this.prerelease[0],t)?isNaN(this.prerelease[1])&&(this.prerelease=a):this.prerelease=a}break}default:throw new Error(`invalid increment argument: ${e}`)}return this.raw=this.format(),this.build.length&&(this.raw+=`+${this.build.join(".")}`),this}}e.exports=u},76457:function(e,t,n){const a=n(95692);e.exports=(e,t)=>{const n=a(e.trim().replace(/^[=v]+/,""),t);return n?n.version:null}},35452:function(e,t,n){const a=n(98565),r=n(23328),i=n(82260),o=n(86579),d=n(20290),s=n(5891);e.exports=(e,t,n,c)=>{switch(t){case"===":return"object"==typeof e&&(e=e.version),"object"==typeof n&&(n=n.version),e===n;case"!==":return"object"==typeof e&&(e=e.version),"object"==typeof n&&(n=n.version),e!==n;case"":case"=":case"==":return a(e,n,c);case"!=":return r(e,n,c);case">":return i(e,n,c);case">=":return o(e,n,c);case"<":return d(e,n,c);case"<=":return s(e,n,c);default:throw new TypeError(`Invalid operator: ${t}`)}}},99469:function(e,t,n){const a=n(89510),r=n(95692),{safeRe:i,t:o}=n(19022);e.exports=(e,t)=>{if(e instanceof a)return e;if("number"==typeof e&&(e=String(e)),"string"!=typeof e)return null;let n=null;if((t=t||{}).rtl){let t;for(;(t=i[o.COERCERTL].exec(e))&&(!n||n.index+n[0].length!==e.length);)n&&t.index+t[0].length===n.index+n[0].length||(n=t),i[o.COERCERTL].lastIndex=t.index+t[1].length+t[2].length;i[o.COERCERTL].lastIndex=-1}else n=e.match(i[o.COERCE]);return null===n?null:r(`${n[2]}.${n[3]||"0"}.${n[4]||"0"}`,t)}},51868:function(e,t,n){const a=n(89510);e.exports=(e,t,n)=>{const r=new a(e,n),i=new a(t,n);return r.compare(i)||r.compareBuild(i)}},5919:function(e,t,n){const a=n(43992);e.exports=(e,t)=>a(e,t,!0)},43992:function(e,t,n){const a=n(89510);e.exports=(e,t,n)=>new a(e,n).compare(new a(t,n))},41007:function(e,t,n){const a=n(95692);e.exports=(e,t)=>{const n=a(e,null,!0),r=a(t,null,!0),i=n.compare(r);if(0===i)return null;const o=i>0,d=o?n:r,s=o?r:n,c=!!d.prerelease.length;if(!!s.prerelease.length&&!c)return s.patch||s.minor?d.patch?"patch":d.minor?"minor":"major":"major";const u=c?"pre":"";return n.major!==r.major?u+"major":n.minor!==r.minor?u+"minor":n.patch!==r.patch?u+"patch":"prerelease"}},98565:function(e,t,n){const a=n(43992);e.exports=(e,t,n)=>0===a(e,t,n)},82260:function(e,t,n){const a=n(43992);e.exports=(e,t,n)=>a(e,t,n)>0},86579:function(e,t,n){const a=n(43992);e.exports=(e,t,n)=>a(e,t,n)>=0},30515:function(e,t,n){const a=n(89510);e.exports=(e,t,n,r,i)=>{"string"==typeof n&&(i=r,r=n,n=void 0);try{return new a(e instanceof a?e.version:e,n).inc(t,r,i).version}catch(o){return null}}},20290:function(e,t,n){const a=n(43992);e.exports=(e,t,n)=>a(e,t,n)<0},5891:function(e,t,n){const a=n(43992);e.exports=(e,t,n)=>a(e,t,n)<=0},62611:function(e,t,n){const a=n(89510);e.exports=(e,t)=>new a(e,t).major},76319:function(e,t,n){const a=n(89510);e.exports=(e,t)=>new a(e,t).minor},23328:function(e,t,n){const a=n(43992);e.exports=(e,t,n)=>0!==a(e,t,n)},95692:function(e,t,n){const a=n(89510);e.exports=(e,t,n=!1)=>{if(e instanceof a)return e;try{return new a(e,t)}catch(r){if(!n)return null;throw r}}},7368:function(e,t,n){const a=n(89510);e.exports=(e,t)=>new a(e,t).patch},97794:function(e,t,n){const a=n(95692);e.exports=(e,t)=>{const n=a(e,t);return n&&n.prerelease.length?n.prerelease:null}},19114:function(e,t,n){const a=n(43992);e.exports=(e,t,n)=>a(t,e,n)},3843:function(e,t,n){const a=n(51868);e.exports=(e,t)=>e.sort(((e,n)=>a(n,e,t)))},99845:function(e,t,n){const a=n(87374);e.exports=(e,t,n)=>{try{t=new a(t,n)}catch(r){return!1}return t.test(e)}},58753:function(e,t,n){const a=n(51868);e.exports=(e,t)=>e.sort(((e,n)=>a(e,n,t)))},30398:function(e,t,n){const a=n(95692);e.exports=(e,t)=>{const n=a(e,t);return n?n.version:null}},38873:function(e,t,n){const a=n(19022),r=n(50039),i=n(89510),o=n(8822),d=n(95692),s=n(30398),c=n(76457),u=n(30515),l=n(41007),g=n(62611),h=n(76319),f=n(7368),p=n(97794),m=n(43992),R=n(19114),b=n(5919),y=n(51868),v=n(58753),_=n(3843),w=n(82260),M=n(20290),x=n(98565),E=n(23328),S=n(86579),k=n(5891),N=n(35452),D=n(99469),A=n(43134),j=n(87374),T=n(99845),L=n(98384),I=n(86369),C=n(2663),O=n(20075),P=n(19178),z=n(19434),B=n(48237),F=n(89860),U=n(88258),$=n(53607),H=n(42199);e.exports={parse:d,valid:s,clean:c,inc:u,diff:l,major:g,minor:h,patch:f,prerelease:p,compare:m,rcompare:R,compareLoose:b,compareBuild:y,sort:v,rsort:_,gt:w,lt:M,eq:x,neq:E,gte:S,lte:k,cmp:N,coerce:D,Comparator:A,Range:j,satisfies:T,toComparators:L,maxSatisfying:I,minSatisfying:C,minVersion:O,validRange:P,outside:z,gtr:B,ltr:F,intersects:U,simplifyRange:$,subset:H,SemVer:i,re:a.re,src:a.src,tokens:a.t,SEMVER_SPEC_VERSION:r.SEMVER_SPEC_VERSION,RELEASE_TYPES:r.RELEASE_TYPES,compareIdentifiers:o.compareIdentifiers,rcompareIdentifiers:o.rcompareIdentifiers}},50039:function(e){const t=Number.MAX_SAFE_INTEGER||9007199254740991;e.exports={MAX_LENGTH:256,MAX_SAFE_COMPONENT_LENGTH:16,MAX_SAFE_BUILD_LENGTH:250,MAX_SAFE_INTEGER:t,RELEASE_TYPES:["major","premajor","minor","preminor","patch","prepatch","prerelease"],SEMVER_SPEC_VERSION:"2.0.0",FLAG_INCLUDE_PRERELEASE:1,FLAG_LOOSE:2}},46830:function(e,t,n){const a="object"==typeof n(27061)&&{}.NODE_DEBUG&&/\bsemver\b/i.test({}.NODE_DEBUG)?(...e)=>console.error("SEMVER",...e):()=>{};e.exports=a},8822:function(e){const t=/^[0-9]+$/,n=(e,n)=>{const a=t.test(e),r=t.test(n);return a&&r&&(e=+e,n=+n),e===n?0:a&&!r?-1:r&&!a?1:e<n?-1:1};e.exports={compareIdentifiers:n,rcompareIdentifiers:(e,t)=>n(t,e)}},48716:function(e){const t=Object.freeze({loose:!0}),n=Object.freeze({});e.exports=e=>e?"object"!=typeof e?t:e:n},19022:function(e,t,n){const{MAX_SAFE_COMPONENT_LENGTH:a,MAX_SAFE_BUILD_LENGTH:r,MAX_LENGTH:i}=n(50039),o=n(46830),d=(t=e.exports={}).re=[],s=t.safeRe=[],c=t.src=[],u=t.t={};let l=0;const g="[a-zA-Z0-9-]",h=[["\\s",1],["\\d",i],[g,r]],f=(e,t,n)=>{const a=(e=>{for(const[t,n]of h)e=e.split(`${t}*`).join(`${t}{0,${n}}`).split(`${t}+`).join(`${t}{1,${n}}`);return e})(t),r=l++;o(e,r,t),u[e]=r,c[r]=t,d[r]=new RegExp(t,n?"g":void 0),s[r]=new RegExp(a,n?"g":void 0)};f("NUMERICIDENTIFIER","0|[1-9]\\d*"),f("NUMERICIDENTIFIERLOOSE","\\d+"),f("NONNUMERICIDENTIFIER",`\\d*[a-zA-Z-]${g}*`),f("MAINVERSION",`(${c[u.NUMERICIDENTIFIER]})\\.(${c[u.NUMERICIDENTIFIER]})\\.(${c[u.NUMERICIDENTIFIER]})`),f("MAINVERSIONLOOSE",`(${c[u.NUMERICIDENTIFIERLOOSE]})\\.(${c[u.NUMERICIDENTIFIERLOOSE]})\\.(${c[u.NUMERICIDENTIFIERLOOSE]})`),f("PRERELEASEIDENTIFIER",`(?:${c[u.NUMERICIDENTIFIER]}|${c[u.NONNUMERICIDENTIFIER]})`),f("PRERELEASEIDENTIFIERLOOSE",`(?:${c[u.NUMERICIDENTIFIERLOOSE]}|${c[u.NONNUMERICIDENTIFIER]})`),f("PRERELEASE",`(?:-(${c[u.PRERELEASEIDENTIFIER]}(?:\\.${c[u.PRERELEASEIDENTIFIER]})*))`),f("PRERELEASELOOSE",`(?:-?(${c[u.PRERELEASEIDENTIFIERLOOSE]}(?:\\.${c[u.PRERELEASEIDENTIFIERLOOSE]})*))`),f("BUILDIDENTIFIER",`${g}+`),f("BUILD",`(?:\\+(${c[u.BUILDIDENTIFIER]}(?:\\.${c[u.BUILDIDENTIFIER]})*))`),f("FULLPLAIN",`v?${c[u.MAINVERSION]}${c[u.PRERELEASE]}?${c[u.BUILD]}?`),f("FULL",`^${c[u.FULLPLAIN]}$`),f("LOOSEPLAIN",`[v=\\s]*${c[u.MAINVERSIONLOOSE]}${c[u.PRERELEASELOOSE]}?${c[u.BUILD]}?`),f("LOOSE",`^${c[u.LOOSEPLAIN]}$`),f("GTLT","((?:<|>)?=?)"),f("XRANGEIDENTIFIERLOOSE",`${c[u.NUMERICIDENTIFIERLOOSE]}|x|X|\\*`),f("XRANGEIDENTIFIER",`${c[u.NUMERICIDENTIFIER]}|x|X|\\*`),f("XRANGEPLAIN",`[v=\\s]*(${c[u.XRANGEIDENTIFIER]})(?:\\.(${c[u.XRANGEIDENTIFIER]})(?:\\.(${c[u.XRANGEIDENTIFIER]})(?:${c[u.PRERELEASE]})?${c[u.BUILD]}?)?)?`),f("XRANGEPLAINLOOSE",`[v=\\s]*(${c[u.XRANGEIDENTIFIERLOOSE]})(?:\\.(${c[u.XRANGEIDENTIFIERLOOSE]})(?:\\.(${c[u.XRANGEIDENTIFIERLOOSE]})(?:${c[u.PRERELEASELOOSE]})?${c[u.BUILD]}?)?)?`),f("XRANGE",`^${c[u.GTLT]}\\s*${c[u.XRANGEPLAIN]}$`),f("XRANGELOOSE",`^${c[u.GTLT]}\\s*${c[u.XRANGEPLAINLOOSE]}$`),f("COERCE",`(^|[^\\d])(\\d{1,${a}})(?:\\.(\\d{1,${a}}))?(?:\\.(\\d{1,${a}}))?(?:$|[^\\d])`),f("COERCERTL",c[u.COERCE],!0),f("LONETILDE","(?:~>?)"),f("TILDETRIM",`(\\s*)${c[u.LONETILDE]}\\s+`,!0),t.tildeTrimReplace="$1~",f("TILDE",`^${c[u.LONETILDE]}${c[u.XRANGEPLAIN]}$`),f("TILDELOOSE",`^${c[u.LONETILDE]}${c[u.XRANGEPLAINLOOSE]}$`),f("LONECARET","(?:\\^)"),f("CARETTRIM",`(\\s*)${c[u.LONECARET]}\\s+`,!0),t.caretTrimReplace="$1^",f("CARET",`^${c[u.LONECARET]}${c[u.XRANGEPLAIN]}$`),f("CARETLOOSE",`^${c[u.LONECARET]}${c[u.XRANGEPLAINLOOSE]}$`),f("COMPARATORLOOSE",`^${c[u.GTLT]}\\s*(${c[u.LOOSEPLAIN]})$|^$`),f("COMPARATOR",`^${c[u.GTLT]}\\s*(${c[u.FULLPLAIN]})$|^$`),f("COMPARATORTRIM",`(\\s*)${c[u.GTLT]}\\s*(${c[u.LOOSEPLAIN]}|${c[u.XRANGEPLAIN]})`,!0),t.comparatorTrimReplace="$1$2$3",f("HYPHENRANGE",`^\\s*(${c[u.XRANGEPLAIN]})\\s+-\\s+(${c[u.XRANGEPLAIN]})\\s*$`),f("HYPHENRANGELOOSE",`^\\s*(${c[u.XRANGEPLAINLOOSE]})\\s+-\\s+(${c[u.XRANGEPLAINLOOSE]})\\s*$`),f("STAR","(<|>)?=?\\s*\\*"),f("GTE0","^\\s*>=\\s*0\\.0\\.0\\s*$"),f("GTE0PRE","^\\s*>=\\s*0\\.0\\.0-0\\s*$")},48237:function(e,t,n){const a=n(19434);e.exports=(e,t,n)=>a(e,t,">",n)},88258:function(e,t,n){const a=n(87374);e.exports=(e,t,n)=>(e=new a(e,n),t=new a(t,n),e.intersects(t,n))},89860:function(e,t,n){const a=n(19434);e.exports=(e,t,n)=>a(e,t,"<",n)},86369:function(e,t,n){const a=n(89510),r=n(87374);e.exports=(e,t,n)=>{let i=null,o=null,d=null;try{d=new r(t,n)}catch(s){return null}return e.forEach((e=>{d.test(e)&&(i&&-1!==o.compare(e)||(i=e,o=new a(i,n)))})),i}},2663:function(e,t,n){const a=n(89510),r=n(87374);e.exports=(e,t,n)=>{let i=null,o=null,d=null;try{d=new r(t,n)}catch(s){return null}return e.forEach((e=>{d.test(e)&&(i&&1!==o.compare(e)||(i=e,o=new a(i,n)))})),i}},20075:function(e,t,n){const a=n(89510),r=n(87374),i=n(82260);e.exports=(e,t)=>{e=new r(e,t);let n=new a("0.0.0");if(e.test(n))return n;if(n=new a("0.0.0-0"),e.test(n))return n;n=null;for(let r=0;r<e.set.length;++r){const t=e.set[r];let o=null;t.forEach((e=>{const t=new a(e.semver.version);switch(e.operator){case">":0===t.prerelease.length?t.patch++:t.prerelease.push(0),t.raw=t.format();case"":case">=":o&&!i(t,o)||(o=t);break;case"<":case"<=":break;default:throw new Error(`Unexpected operation: ${e.operator}`)}})),!o||n&&!i(n,o)||(n=o)}return n&&e.test(n)?n:null}},19434:function(e,t,n){const a=n(89510),r=n(43134),{ANY:i}=r,o=n(87374),d=n(99845),s=n(82260),c=n(20290),u=n(5891),l=n(86579);e.exports=(e,t,n,g)=>{let h,f,p,m,R;switch(e=new a(e,g),t=new o(t,g),n){case">":h=s,f=u,p=c,m=">",R=">=";break;case"<":h=c,f=l,p=s,m="<",R="<=";break;default:throw new TypeError('Must provide a hilo val of "<" or ">"')}if(d(e,t,g))return!1;for(let a=0;a<t.set.length;++a){const n=t.set[a];let o=null,d=null;if(n.forEach((e=>{e.semver===i&&(e=new r(">=0.0.0")),o=o||e,d=d||e,h(e.semver,o.semver,g)?o=e:p(e.semver,d.semver,g)&&(d=e)})),o.operator===m||o.operator===R)return!1;if((!d.operator||d.operator===m)&&f(e,d.semver))return!1;if(d.operator===R&&p(e,d.semver))return!1}return!0}},53607:function(e,t,n){const a=n(99845),r=n(43992);e.exports=(e,t,n)=>{const i=[];let o=null,d=null;const s=e.sort(((e,t)=>r(e,t,n)));for(const r of s){a(r,t,n)?(d=r,o||(o=r)):(d&&i.push([o,d]),d=null,o=null)}o&&i.push([o,null]);const c=[];for(const[a,r]of i)a===r?c.push(a):r||a!==s[0]?r?a===s[0]?c.push(`<=${r}`):c.push(`${a} - ${r}`):c.push(`>=${a}`):c.push("*");const u=c.join(" || "),l="string"==typeof t.raw?t.raw:String(t);return u.length<l.length?u:t}},42199:function(e,t,n){const a=n(87374),r=n(43134),{ANY:i}=r,o=n(99845),d=n(43992),s=[new r(">=0.0.0-0")],c=[new r(">=0.0.0")],u=(e,t,n)=>{if(e===t)return!0;if(1===e.length&&e[0].semver===i){if(1===t.length&&t[0].semver===i)return!0;e=n.includePrerelease?s:c}if(1===t.length&&t[0].semver===i){if(n.includePrerelease)return!0;t=c}const a=new Set;let r,u,h,f,p,m,R;for(const i of e)">"===i.operator||">="===i.operator?r=l(r,i,n):"<"===i.operator||"<="===i.operator?u=g(u,i,n):a.add(i.semver);if(a.size>1)return null;if(r&&u){if(h=d(r.semver,u.semver,n),h>0)return null;if(0===h&&(">="!==r.operator||"<="!==u.operator))return null}for(const i of a){if(r&&!o(i,String(r),n))return null;if(u&&!o(i,String(u),n))return null;for(const e of t)if(!o(i,String(e),n))return!1;return!0}let b=!(!u||n.includePrerelease||!u.semver.prerelease.length)&&u.semver,y=!(!r||n.includePrerelease||!r.semver.prerelease.length)&&r.semver;b&&1===b.prerelease.length&&"<"===u.operator&&0===b.prerelease[0]&&(b=!1);for(const i of t){if(R=R||">"===i.operator||">="===i.operator,m=m||"<"===i.operator||"<="===i.operator,r)if(y&&i.semver.prerelease&&i.semver.prerelease.length&&i.semver.major===y.major&&i.semver.minor===y.minor&&i.semver.patch===y.patch&&(y=!1),">"===i.operator||">="===i.operator){if(f=l(r,i,n),f===i&&f!==r)return!1}else if(">="===r.operator&&!o(r.semver,String(i),n))return!1;if(u)if(b&&i.semver.prerelease&&i.semver.prerelease.length&&i.semver.major===b.major&&i.semver.minor===b.minor&&i.semver.patch===b.patch&&(b=!1),"<"===i.operator||"<="===i.operator){if(p=g(u,i,n),p===i&&p!==u)return!1}else if("<="===u.operator&&!o(u.semver,String(i),n))return!1;if(!i.operator&&(u||r)&&0!==h)return!1}return!(r&&m&&!u&&0!==h)&&(!(u&&R&&!r&&0!==h)&&(!y&&!b))},l=(e,t,n)=>{if(!e)return t;const a=d(e.semver,t.semver,n);return a>0?e:a<0||">"===t.operator&&">="===e.operator?t:e},g=(e,t,n)=>{if(!e)return t;const a=d(e.semver,t.semver,n);return a<0?e:a>0||"<"===t.operator&&"<="===e.operator?t:e};e.exports=(e,t,n={})=>{if(e===t)return!0;e=new a(e,n),t=new a(t,n);let r=!1;e:for(const a of e.set){for(const e of t.set){const t=u(a,e,n);if(r=r||null!==t,t)continue e}if(r)return!1}return!0}},98384:function(e,t,n){const a=n(87374);e.exports=(e,t)=>new a(e,t).set.map((e=>e.map((e=>e.value)).join(" ").trim().split(" ")))},19178:function(e,t,n){const a=n(87374);e.exports=(e,t)=>{try{return new a(e,t).range||"*"}catch(n){return null}}},98423:function(e,t,n){var a=n(27172).Buffer;function r(e,t){this._block=a.alloc(e),this._finalSize=t,this._blockSize=e,this._len=0}r.prototype.update=function(e,t){"string"==typeof e&&(t=t||"utf8",e=a.from(e,t));for(var n=this._block,r=this._blockSize,i=e.length,o=this._len,d=0;d<i;){for(var s=o%r,c=Math.min(i-d,r-s),u=0;u<c;u++)n[s+u]=e[d+u];d+=c,(o+=c)%r==0&&this._update(n)}return this._len+=i,this},r.prototype.digest=function(e){var t=this._len%this._blockSize;this._block[t]=128,this._block.fill(0,t+1),t>=this._finalSize&&(this._update(this._block),this._block.fill(0));var n=8*this._len;if(n<=4294967295)this._block.writeUInt32BE(n,this._blockSize-4);else{var a=(4294967295&n)>>>0,r=(n-a)/4294967296;this._block.writeUInt32BE(r,this._blockSize-8),this._block.writeUInt32BE(a,this._blockSize-4)}this._update(this._block);var i=this._hash();return e?i.toString(e):i},r.prototype._update=function(){throw new Error("_update must be implemented by subclass")},e.exports=r},54458:function(e,t,n){var a=e.exports=function(e){e=e.toLowerCase();var t=a[e];if(!t)throw new Error(e+" is not supported (we accept pull requests)");return new t};a.sha=n(13608),a.sha1=n(6533),a.sha224=n(98203),a.sha256=n(89541),a.sha384=n(61389),a.sha512=n(36282)},13608:function(e,t,n){var a=n(70087),r=n(98423),i=n(27172).Buffer,o=[1518500249,1859775393,-1894007588,-899497514],d=new Array(80);function s(){this.init(),this._w=d,r.call(this,64,56)}function c(e){return e<<30|e>>>2}function u(e,t,n,a){return 0===e?t&n|~t&a:2===e?t&n|t&a|n&a:t^n^a}a(s,r),s.prototype.init=function(){return this._a=1732584193,this._b=4023233417,this._c=2562383102,this._d=271733878,this._e=3285377520,this},s.prototype._update=function(e){for(var t,n=this._w,a=0|this._a,r=0|this._b,i=0|this._c,d=0|this._d,s=0|this._e,l=0;l<16;++l)n[l]=e.readInt32BE(4*l);for(;l<80;++l)n[l]=n[l-3]^n[l-8]^n[l-14]^n[l-16];for(var g=0;g<80;++g){var h=~~(g/20),f=0|((t=a)<<5|t>>>27)+u(h,r,i,d)+s+n[g]+o[h];s=d,d=i,i=c(r),r=a,a=f}this._a=a+this._a|0,this._b=r+this._b|0,this._c=i+this._c|0,this._d=d+this._d|0,this._e=s+this._e|0},s.prototype._hash=function(){var e=i.allocUnsafe(20);return e.writeInt32BE(0|this._a,0),e.writeInt32BE(0|this._b,4),e.writeInt32BE(0|this._c,8),e.writeInt32BE(0|this._d,12),e.writeInt32BE(0|this._e,16),e},e.exports=s},6533:function(e,t,n){var a=n(70087),r=n(98423),i=n(27172).Buffer,o=[1518500249,1859775393,-1894007588,-899497514],d=new Array(80);function s(){this.init(),this._w=d,r.call(this,64,56)}function c(e){return e<<5|e>>>27}function u(e){return e<<30|e>>>2}function l(e,t,n,a){return 0===e?t&n|~t&a:2===e?t&n|t&a|n&a:t^n^a}a(s,r),s.prototype.init=function(){return this._a=1732584193,this._b=4023233417,this._c=2562383102,this._d=271733878,this._e=3285377520,this},s.prototype._update=function(e){for(var t,n=this._w,a=0|this._a,r=0|this._b,i=0|this._c,d=0|this._d,s=0|this._e,g=0;g<16;++g)n[g]=e.readInt32BE(4*g);for(;g<80;++g)n[g]=(t=n[g-3]^n[g-8]^n[g-14]^n[g-16])<<1|t>>>31;for(var h=0;h<80;++h){var f=~~(h/20),p=c(a)+l(f,r,i,d)+s+n[h]+o[f]|0;s=d,d=i,i=u(r),r=a,a=p}this._a=a+this._a|0,this._b=r+this._b|0,this._c=i+this._c|0,this._d=d+this._d|0,this._e=s+this._e|0},s.prototype._hash=function(){var e=i.allocUnsafe(20);return e.writeInt32BE(0|this._a,0),e.writeInt32BE(0|this._b,4),e.writeInt32BE(0|this._c,8),e.writeInt32BE(0|this._d,12),e.writeInt32BE(0|this._e,16),e},e.exports=s},98203:function(e,t,n){var a=n(70087),r=n(89541),i=n(98423),o=n(27172).Buffer,d=new Array(64);function s(){this.init(),this._w=d,i.call(this,64,56)}a(s,r),s.prototype.init=function(){return this._a=3238371032,this._b=914150663,this._c=812702999,this._d=4144912697,this._e=4290775857,this._f=1750603025,this._g=1694076839,this._h=3204075428,this},s.prototype._hash=function(){var e=o.allocUnsafe(28);return e.writeInt32BE(this._a,0),e.writeInt32BE(this._b,4),e.writeInt32BE(this._c,8),e.writeInt32BE(this._d,12),e.writeInt32BE(this._e,16),e.writeInt32BE(this._f,20),e.writeInt32BE(this._g,24),e},e.exports=s},89541:function(e,t,n){var a=n(70087),r=n(98423),i=n(27172).Buffer,o=[1116352408,1899447441,3049323471,3921009573,961987163,1508970993,2453635748,2870763221,3624381080,310598401,607225278,1426881987,1925078388,2162078206,2614888103,3248222580,3835390401,4022224774,264347078,604807628,770255983,1249150122,1555081692,1996064986,2554220882,2821834349,2952996808,3210313671,3336571891,3584528711,113926993,338241895,666307205,773529912,1294757372,1396182291,1695183700,1986661051,2177026350,2456956037,2730485921,2820302411,3259730800,3345764771,3516065817,3600352804,4094571909,275423344,430227734,506948616,659060556,883997877,958139571,1322822218,1537002063,1747873779,1955562222,2024104815,2227730452,2361852424,2428436474,2756734187,3204031479,3329325298],d=new Array(64);function s(){this.init(),this._w=d,r.call(this,64,56)}function c(e,t,n){return n^e&(t^n)}function u(e,t,n){return e&t|n&(e|t)}function l(e){return(e>>>2|e<<30)^(e>>>13|e<<19)^(e>>>22|e<<10)}function g(e){return(e>>>6|e<<26)^(e>>>11|e<<21)^(e>>>25|e<<7)}function h(e){return(e>>>7|e<<25)^(e>>>18|e<<14)^e>>>3}a(s,r),s.prototype.init=function(){return this._a=1779033703,this._b=3144134277,this._c=1013904242,this._d=2773480762,this._e=1359893119,this._f=2600822924,this._g=528734635,this._h=1541459225,this},s.prototype._update=function(e){for(var t,n=this._w,a=0|this._a,r=0|this._b,i=0|this._c,d=0|this._d,s=0|this._e,f=0|this._f,p=0|this._g,m=0|this._h,R=0;R<16;++R)n[R]=e.readInt32BE(4*R);for(;R<64;++R)n[R]=0|(((t=n[R-2])>>>17|t<<15)^(t>>>19|t<<13)^t>>>10)+n[R-7]+h(n[R-15])+n[R-16];for(var b=0;b<64;++b){var y=m+g(s)+c(s,f,p)+o[b]+n[b]|0,v=l(a)+u(a,r,i)|0;m=p,p=f,f=s,s=d+y|0,d=i,i=r,r=a,a=y+v|0}this._a=a+this._a|0,this._b=r+this._b|0,this._c=i+this._c|0,this._d=d+this._d|0,this._e=s+this._e|0,this._f=f+this._f|0,this._g=p+this._g|0,this._h=m+this._h|0},s.prototype._hash=function(){var e=i.allocUnsafe(32);return e.writeInt32BE(this._a,0),e.writeInt32BE(this._b,4),e.writeInt32BE(this._c,8),e.writeInt32BE(this._d,12),e.writeInt32BE(this._e,16),e.writeInt32BE(this._f,20),e.writeInt32BE(this._g,24),e.writeInt32BE(this._h,28),e},e.exports=s},61389:function(e,t,n){var a=n(70087),r=n(36282),i=n(98423),o=n(27172).Buffer,d=new Array(160);function s(){this.init(),this._w=d,i.call(this,128,112)}a(s,r),s.prototype.init=function(){return this._ah=3418070365,this._bh=1654270250,this._ch=2438529370,this._dh=355462360,this._eh=1731405415,this._fh=2394180231,this._gh=3675008525,this._hh=1203062813,this._al=3238371032,this._bl=914150663,this._cl=812702999,this._dl=4144912697,this._el=4290775857,this._fl=1750603025,this._gl=1694076839,this._hl=3204075428,this},s.prototype._hash=function(){var e=o.allocUnsafe(48);function t(t,n,a){e.writeInt32BE(t,a),e.writeInt32BE(n,a+4)}return t(this._ah,this._al,0),t(this._bh,this._bl,8),t(this._ch,this._cl,16),t(this._dh,this._dl,24),t(this._eh,this._el,32),t(this._fh,this._fl,40),e},e.exports=s},36282:function(e,t,n){var a=n(70087),r=n(98423),i=n(27172).Buffer,o=[1116352408,3609767458,1899447441,602891725,3049323471,3964484399,3921009573,2173295548,961987163,4081628472,1508970993,3053834265,2453635748,2937671579,2870763221,3664609560,3624381080,2734883394,310598401,1164996542,607225278,1323610764,1426881987,3590304994,1925078388,4068182383,2162078206,991336113,2614888103,633803317,3248222580,3479774868,3835390401,2666613458,4022224774,944711139,264347078,2341262773,604807628,2007800933,770255983,1495990901,1249150122,1856431235,1555081692,3175218132,1996064986,2198950837,2554220882,3999719339,2821834349,766784016,2952996808,2566594879,3210313671,3203337956,3336571891,1034457026,3584528711,2466948901,113926993,3758326383,338241895,168717936,666307205,1188179964,773529912,1546045734,1294757372,1522805485,1396182291,2643833823,1695183700,2343527390,1986661051,1014477480,2177026350,1206759142,2456956037,344077627,2730485921,1290863460,2820302411,3158454273,3259730800,3505952657,3345764771,106217008,3516065817,3606008344,3600352804,1432725776,4094571909,1467031594,275423344,851169720,430227734,3100823752,506948616,1363258195,659060556,3750685593,883997877,3785050280,958139571,3318307427,1322822218,3812723403,1537002063,2003034995,1747873779,3602036899,1955562222,1575990012,2024104815,1125592928,2227730452,2716904306,2361852424,442776044,2428436474,593698344,2756734187,3733110249,3204031479,2999351573,3329325298,3815920427,3391569614,3928383900,3515267271,566280711,3940187606,3454069534,4118630271,4000239992,116418474,1914138554,174292421,2731055270,289380356,3203993006,460393269,320620315,685471733,587496836,852142971,1086792851,1017036298,365543100,1126000580,2618297676,1288033470,3409855158,1501505948,4234509866,1607167915,987167468,1816402316,1246189591],d=new Array(160);function s(){this.init(),this._w=d,r.call(this,128,112)}function c(e,t,n){return n^e&(t^n)}function u(e,t,n){return e&t|n&(e|t)}function l(e,t){return(e>>>28|t<<4)^(t>>>2|e<<30)^(t>>>7|e<<25)}function g(e,t){return(e>>>14|t<<18)^(e>>>18|t<<14)^(t>>>9|e<<23)}function h(e,t){return(e>>>1|t<<31)^(e>>>8|t<<24)^e>>>7}function f(e,t){return(e>>>1|t<<31)^(e>>>8|t<<24)^(e>>>7|t<<25)}function p(e,t){return(e>>>19|t<<13)^(t>>>29|e<<3)^e>>>6}function m(e,t){return(e>>>19|t<<13)^(t>>>29|e<<3)^(e>>>6|t<<26)}function R(e,t){return e>>>0<t>>>0?1:0}a(s,r),s.prototype.init=function(){return this._ah=1779033703,this._bh=3144134277,this._ch=1013904242,this._dh=2773480762,this._eh=1359893119,this._fh=2600822924,this._gh=528734635,this._hh=1541459225,this._al=4089235720,this._bl=2227873595,this._cl=4271175723,this._dl=1595750129,this._el=2917565137,this._fl=725511199,this._gl=4215389547,this._hl=327033209,this},s.prototype._update=function(e){for(var t=this._w,n=0|this._ah,a=0|this._bh,r=0|this._ch,i=0|this._dh,d=0|this._eh,s=0|this._fh,b=0|this._gh,y=0|this._hh,v=0|this._al,_=0|this._bl,w=0|this._cl,M=0|this._dl,x=0|this._el,E=0|this._fl,S=0|this._gl,k=0|this._hl,N=0;N<32;N+=2)t[N]=e.readInt32BE(4*N),t[N+1]=e.readInt32BE(4*N+4);for(;N<160;N+=2){var D=t[N-30],A=t[N-30+1],j=h(D,A),T=f(A,D),L=p(D=t[N-4],A=t[N-4+1]),I=m(A,D),C=t[N-14],O=t[N-14+1],P=t[N-32],z=t[N-32+1],B=T+O|0,F=j+C+R(B,T)|0;F=(F=F+L+R(B=B+I|0,I)|0)+P+R(B=B+z|0,z)|0,t[N]=F,t[N+1]=B}for(var U=0;U<160;U+=2){F=t[U],B=t[U+1];var $=u(n,a,r),H=u(v,_,w),q=l(n,v),Y=l(v,n),G=g(d,x),V=g(x,d),Q=o[U],W=o[U+1],K=c(d,s,b),Z=c(x,E,S),X=k+V|0,J=y+G+R(X,k)|0;J=(J=(J=J+K+R(X=X+Z|0,Z)|0)+Q+R(X=X+W|0,W)|0)+F+R(X=X+B|0,B)|0;var ee=Y+H|0,te=q+$+R(ee,Y)|0;y=b,k=S,b=s,S=E,s=d,E=x,d=i+J+R(x=M+X|0,M)|0,i=r,M=w,r=a,w=_,a=n,_=v,n=J+te+R(v=X+ee|0,X)|0}this._al=this._al+v|0,this._bl=this._bl+_|0,this._cl=this._cl+w|0,this._dl=this._dl+M|0,this._el=this._el+x|0,this._fl=this._fl+E|0,this._gl=this._gl+S|0,this._hl=this._hl+k|0,this._ah=this._ah+n+R(this._al,v)|0,this._bh=this._bh+a+R(this._bl,_)|0,this._ch=this._ch+r+R(this._cl,w)|0,this._dh=this._dh+i+R(this._dl,M)|0,this._eh=this._eh+d+R(this._el,x)|0,this._fh=this._fh+s+R(this._fl,E)|0,this._gh=this._gh+b+R(this._gl,S)|0,this._hh=this._hh+y+R(this._hl,k)|0},s.prototype._hash=function(){var e=i.allocUnsafe(64);function t(t,n,a){e.writeInt32BE(t,a),e.writeInt32BE(n,a+4)}return t(this._ah,this._al,0),t(this._bh,this._bl,8),t(this._ch,this._cl,16),t(this._dh,this._dl,24),t(this._eh,this._el,32),t(this._fh,this._fl,40),t(this._gh,this._gl,48),t(this._hh,this._hl,56),e},e.exports=s},34361:function(e,t,n){"use strict";var a=n(27172).Buffer,r=a.isEncoding||function(e){switch((e=""+e)&&e.toLowerCase()){case"hex":case"utf8":case"utf-8":case"ascii":case"binary":case"base64":case"ucs2":case"ucs-2":case"utf16le":case"utf-16le":case"raw":return!0;default:return!1}};function i(e){var t;switch(this.encoding=function(e){var t=function(e){if(!e)return"utf8";for(var t;;)switch(e){case"utf8":case"utf-8":return"utf8";case"ucs2":case"ucs-2":case"utf16le":case"utf-16le":return"utf16le";case"latin1":case"binary":return"latin1";case"base64":case"ascii":case"hex":return e;default:if(t)return;e=(""+e).toLowerCase(),t=!0}}(e);if("string"!=typeof t&&(a.isEncoding===r||!r(e)))throw new Error("Unknown encoding: "+e);return t||e}(e),this.encoding){case"utf16le":this.text=s,this.end=c,t=4;break;case"utf8":this.fillLast=d,t=4;break;case"base64":this.text=u,this.end=l,t=3;break;default:return this.write=g,void(this.end=h)}this.lastNeed=0,this.lastTotal=0,this.lastChar=a.allocUnsafe(t)}function o(e){return e<=127?0:e>>5==6?2:e>>4==14?3:e>>3==30?4:e>>6==2?-1:-2}function d(e){var t=this.lastTotal-this.lastNeed,n=function(e,t,n){if(128!=(192&t[0]))return e.lastNeed=0,"�";if(e.lastNeed>1&&t.length>1){if(128!=(192&t[1]))return e.lastNeed=1,"�";if(e.lastNeed>2&&t.length>2&&128!=(192&t[2]))return e.lastNeed=2,"�"}}(this,e);return void 0!==n?n:this.lastNeed<=e.length?(e.copy(this.lastChar,t,0,this.lastNeed),this.lastChar.toString(this.encoding,0,this.lastTotal)):(e.copy(this.lastChar,t,0,e.length),void(this.lastNeed-=e.length))}function s(e,t){if((e.length-t)%2==0){var n=e.toString("utf16le",t);if(n){var a=n.charCodeAt(n.length-1);if(a>=55296&&a<=56319)return this.lastNeed=2,this.lastTotal=4,this.lastChar[0]=e[e.length-2],this.lastChar[1]=e[e.length-1],n.slice(0,-1)}return n}return this.lastNeed=1,this.lastTotal=2,this.lastChar[0]=e[e.length-1],e.toString("utf16le",t,e.length-1)}function c(e){var t=e&&e.length?this.write(e):"";if(this.lastNeed){var n=this.lastTotal-this.lastNeed;return t+this.lastChar.toString("utf16le",0,n)}return t}function u(e,t){var n=(e.length-t)%3;return 0===n?e.toString("base64",t):(this.lastNeed=3-n,this.lastTotal=3,1===n?this.lastChar[0]=e[e.length-1]:(this.lastChar[0]=e[e.length-2],this.lastChar[1]=e[e.length-1]),e.toString("base64",t,e.length-n))}function l(e){var t=e&&e.length?this.write(e):"";return this.lastNeed?t+this.lastChar.toString("base64",0,3-this.lastNeed):t}function g(e){return e.toString(this.encoding)}function h(e){return e&&e.length?this.write(e):""}t.s=i,i.prototype.write=function(e){if(0===e.length)return"";var t,n;if(this.lastNeed){if(void 0===(t=this.fillLast(e)))return"";n=this.lastNeed,this.lastNeed=0}else n=0;return n<e.length?t?t+this.text(e,n):this.text(e,n):t||""},i.prototype.end=function(e){var t=e&&e.length?this.write(e):"";return this.lastNeed?t+"�":t},i.prototype.text=function(e,t){var n=function(e,t,n){var a=t.length-1;if(a<n)return 0;var r=o(t[a]);if(r>=0)return r>0&&(e.lastNeed=r-1),r;if(--a<n||-2===r)return 0;if(r=o(t[a]),r>=0)return r>0&&(e.lastNeed=r-2),r;if(--a<n||-2===r)return 0;if(r=o(t[a]),r>=0)return r>0&&(2===r?r=0:e.lastNeed=r-3),r;return 0}(this,e,t);if(!this.lastNeed)return e.toString("utf8",t);this.lastTotal=n;var a=e.length-(n-this.lastNeed);return e.copy(this.lastChar,0,a),e.toString("utf8",t,a)},i.prototype.fillLast=function(e){if(this.lastNeed<=e.length)return e.copy(this.lastChar,this.lastTotal-this.lastNeed,0,this.lastNeed),this.lastChar.toString(this.encoding,0,this.lastTotal);e.copy(this.lastChar,this.lastTotal-this.lastNeed,0,e.length),this.lastNeed-=e.length}},37392:function(e){"use strict";e.exports={stdout:!1,stderr:!1}},42662:function(e){function t(e){var t=/\.[^.]*$/.exec(e);return t?t.index+1:e.length}function n(e,t,n){if(e.reduce)return e.reduce(t,n);for(var a=0,r=arguments.length>=3?n:e[a++];a<e.length;a++)t(r,e[a],a);return r}function a(e,t){if(e.forEach)return e.forEach(t);for(var n=0;n<e.length;n++)t.call(e,e[n],n)}function r(e,t){if(e.map)return e.map(t);for(var n=[],a=0;a<e.length;a++)n.push(t.call(e,e[a],a));return n}e.exports=function(e,i){i||(i={});var o=void 0===i.hsep?"  ":i.hsep,d=i.align||[],s=i.stringLength||function(e){return String(e).length},c=n(e,(function(e,n){return a(n,(function(n,a){var r=t(n);(!e[a]||r>e[a])&&(e[a]=r)})),e}),[]),u=r(e,(function(e){return r(e,(function(e,n){var a=String(e);if("."===d[n]){var r=t(a),i=c[n]+(/\./.test(a)?1:2)-(s(a)-r);return a+Array(i).join(" ")}return a}))})),l=n(u,(function(e,t){return a(t,(function(t,n){var a=s(t);(!e[n]||a>e[n])&&(e[n]=a)})),e}),[]);return r(u,(function(e){return r(e,(function(e,t){var n=l[t]-s(e)||0,a=Array(Math.max(n+1,1)).join(" ");return"r"===d[t]||"."===d[t]?a+e:"c"===d[t]?Array(Math.ceil(n/2+1)).join(" ")+e+Array(Math.floor(n/2+1)).join(" "):e+a})).join(o).replace(/\s+$/,"")})).join("\n")}},41053:function(e){e.exports=new Set(["General_Category","Script","Script_Extensions","Alphabetic","Any","ASCII","ASCII_Hex_Digit","Assigned","Bidi_Control","Bidi_Mirrored","Case_Ignorable","Cased","Changes_When_Casefolded","Changes_When_Casemapped","Changes_When_Lowercased","Changes_When_NFKC_Casefolded","Changes_When_Titlecased","Changes_When_Uppercased","Dash","Default_Ignorable_Code_Point","Deprecated","Diacritic","Emoji","Emoji_Component","Emoji_Modifier","Emoji_Modifier_Base","Emoji_Presentation","Extended_Pictographic","Extender","Grapheme_Base","Grapheme_Extend","Hex_Digit","ID_Continue","ID_Start","Ideographic","IDS_Binary_Operator","IDS_Trinary_Operator","Join_Control","Logical_Order_Exception","Lowercase","Math","Noncharacter_Code_Point","Pattern_Syntax","Pattern_White_Space","Quotation_Mark","Radical","Regional_Indicator","Sentence_Terminal","Soft_Dotted","Terminal_Punctuation","Unified_Ideograph","Uppercase","Variation_Selector","White_Space","XID_Continue","XID_Start"])},37747:function(e,t,n){"use strict";const a=n(41053),r=n(99501);e.exports=function(e){if(a.has(e))return e;if(r.has(e))return r.get(e);throw new Error(`Unknown property: ${e}`)}},13199:function(e){e.exports=new Map([["General_Category",new Map([["C","Other"],["Cc","Control"],["cntrl","Control"],["Cf","Format"],["Cn","Unassigned"],["Co","Private_Use"],["Cs","Surrogate"],["L","Letter"],["LC","Cased_Letter"],["Ll","Lowercase_Letter"],["Lm","Modifier_Letter"],["Lo","Other_Letter"],["Lt","Titlecase_Letter"],["Lu","Uppercase_Letter"],["M","Mark"],["Combining_Mark","Mark"],["Mc","Spacing_Mark"],["Me","Enclosing_Mark"],["Mn","Nonspacing_Mark"],["N","Number"],["Nd","Decimal_Number"],["digit","Decimal_Number"],["Nl","Letter_Number"],["No","Other_Number"],["P","Punctuation"],["punct","Punctuation"],["Pc","Connector_Punctuation"],["Pd","Dash_Punctuation"],["Pe","Close_Punctuation"],["Pf","Final_Punctuation"],["Pi","Initial_Punctuation"],["Po","Other_Punctuation"],["Ps","Open_Punctuation"],["S","Symbol"],["Sc","Currency_Symbol"],["Sk","Modifier_Symbol"],["Sm","Math_Symbol"],["So","Other_Symbol"],["Z","Separator"],["Zl","Line_Separator"],["Zp","Paragraph_Separator"],["Zs","Space_Separator"],["Other","Other"],["Control","Control"],["Format","Format"],["Unassigned","Unassigned"],["Private_Use","Private_Use"],["Surrogate","Surrogate"],["Letter","Letter"],["Cased_Letter","Cased_Letter"],["Lowercase_Letter","Lowercase_Letter"],["Modifier_Letter","Modifier_Letter"],["Other_Letter","Other_Letter"],["Titlecase_Letter","Titlecase_Letter"],["Uppercase_Letter","Uppercase_Letter"],["Mark","Mark"],["Spacing_Mark","Spacing_Mark"],["Enclosing_Mark","Enclosing_Mark"],["Nonspacing_Mark","Nonspacing_Mark"],["Number","Number"],["Decimal_Number","Decimal_Number"],["Letter_Number","Letter_Number"],["Other_Number","Other_Number"],["Punctuation","Punctuation"],["Connector_Punctuation","Connector_Punctuation"],["Dash_Punctuation","Dash_Punctuation"],["Close_Punctuation","Close_Punctuation"],["Final_Punctuation","Final_Punctuation"],["Initial_Punctuation","Initial_Punctuation"],["Other_Punctuation","Other_Punctuation"],["Open_Punctuation","Open_Punctuation"],["Symbol","Symbol"],["Currency_Symbol","Currency_Symbol"],["Modifier_Symbol","Modifier_Symbol"],["Math_Symbol","Math_Symbol"],["Other_Symbol","Other_Symbol"],["Separator","Separator"],["Line_Separator","Line_Separator"],["Paragraph_Separator","Paragraph_Separator"],["Space_Separator","Space_Separator"]])],["Script",new Map([["Adlm","Adlam"],["Aghb","Caucasian_Albanian"],["Ahom","Ahom"],["Arab","Arabic"],["Armi","Imperial_Aramaic"],["Armn","Armenian"],["Avst","Avestan"],["Bali","Balinese"],["Bamu","Bamum"],["Bass","Bassa_Vah"],["Batk","Batak"],["Beng","Bengali"],["Bhks","Bhaiksuki"],["Bopo","Bopomofo"],["Brah","Brahmi"],["Brai","Braille"],["Bugi","Buginese"],["Buhd","Buhid"],["Cakm","Chakma"],["Cans","Canadian_Aboriginal"],["Cari","Carian"],["Cham","Cham"],["Cher","Cherokee"],["Chrs","Chorasmian"],["Copt","Coptic"],["Qaac","Coptic"],["Cpmn","Cypro_Minoan"],["Cprt","Cypriot"],["Cyrl","Cyrillic"],["Deva","Devanagari"],["Diak","Dives_Akuru"],["Dogr","Dogra"],["Dsrt","Deseret"],["Dupl","Duployan"],["Egyp","Egyptian_Hieroglyphs"],["Elba","Elbasan"],["Elym","Elymaic"],["Ethi","Ethiopic"],["Geor","Georgian"],["Glag","Glagolitic"],["Gong","Gunjala_Gondi"],["Gonm","Masaram_Gondi"],["Goth","Gothic"],["Gran","Grantha"],["Grek","Greek"],["Gujr","Gujarati"],["Guru","Gurmukhi"],["Hang","Hangul"],["Hani","Han"],["Hano","Hanunoo"],["Hatr","Hatran"],["Hebr","Hebrew"],["Hira","Hiragana"],["Hluw","Anatolian_Hieroglyphs"],["Hmng","Pahawh_Hmong"],["Hmnp","Nyiakeng_Puachue_Hmong"],["Hrkt","Katakana_Or_Hiragana"],["Hung","Old_Hungarian"],["Ital","Old_Italic"],["Java","Javanese"],["Kali","Kayah_Li"],["Kana","Katakana"],["Kawi","Kawi"],["Khar","Kharoshthi"],["Khmr","Khmer"],["Khoj","Khojki"],["Kits","Khitan_Small_Script"],["Knda","Kannada"],["Kthi","Kaithi"],["Lana","Tai_Tham"],["Laoo","Lao"],["Latn","Latin"],["Lepc","Lepcha"],["Limb","Limbu"],["Lina","Linear_A"],["Linb","Linear_B"],["Lisu","Lisu"],["Lyci","Lycian"],["Lydi","Lydian"],["Mahj","Mahajani"],["Maka","Makasar"],["Mand","Mandaic"],["Mani","Manichaean"],["Marc","Marchen"],["Medf","Medefaidrin"],["Mend","Mende_Kikakui"],["Merc","Meroitic_Cursive"],["Mero","Meroitic_Hieroglyphs"],["Mlym","Malayalam"],["Modi","Modi"],["Mong","Mongolian"],["Mroo","Mro"],["Mtei","Meetei_Mayek"],["Mult","Multani"],["Mymr","Myanmar"],["Nagm","Nag_Mundari"],["Nand","Nandinagari"],["Narb","Old_North_Arabian"],["Nbat","Nabataean"],["Newa","Newa"],["Nkoo","Nko"],["Nshu","Nushu"],["Ogam","Ogham"],["Olck","Ol_Chiki"],["Orkh","Old_Turkic"],["Orya","Oriya"],["Osge","Osage"],["Osma","Osmanya"],["Ougr","Old_Uyghur"],["Palm","Palmyrene"],["Pauc","Pau_Cin_Hau"],["Perm","Old_Permic"],["Phag","Phags_Pa"],["Phli","Inscriptional_Pahlavi"],["Phlp","Psalter_Pahlavi"],["Phnx","Phoenician"],["Plrd","Miao"],["Prti","Inscriptional_Parthian"],["Rjng","Rejang"],["Rohg","Hanifi_Rohingya"],["Runr","Runic"],["Samr","Samaritan"],["Sarb","Old_South_Arabian"],["Saur","Saurashtra"],["Sgnw","SignWriting"],["Shaw","Shavian"],["Shrd","Sharada"],["Sidd","Siddham"],["Sind","Khudawadi"],["Sinh","Sinhala"],["Sogd","Sogdian"],["Sogo","Old_Sogdian"],["Sora","Sora_Sompeng"],["Soyo","Soyombo"],["Sund","Sundanese"],["Sylo","Syloti_Nagri"],["Syrc","Syriac"],["Tagb","Tagbanwa"],["Takr","Takri"],["Tale","Tai_Le"],["Talu","New_Tai_Lue"],["Taml","Tamil"],["Tang","Tangut"],["Tavt","Tai_Viet"],["Telu","Telugu"],["Tfng","Tifinagh"],["Tglg","Tagalog"],["Thaa","Thaana"],["Thai","Thai"],["Tibt","Tibetan"],["Tirh","Tirhuta"],["Tnsa","Tangsa"],["Toto","Toto"],["Ugar","Ugaritic"],["Vaii","Vai"],["Vith","Vithkuqi"],["Wara","Warang_Citi"],["Wcho","Wancho"],["Xpeo","Old_Persian"],["Xsux","Cuneiform"],["Yezi","Yezidi"],["Yiii","Yi"],["Zanb","Zanabazar_Square"],["Zinh","Inherited"],["Qaai","Inherited"],["Zyyy","Common"],["Zzzz","Unknown"],["Adlam","Adlam"],["Caucasian_Albanian","Caucasian_Albanian"],["Arabic","Arabic"],["Imperial_Aramaic","Imperial_Aramaic"],["Armenian","Armenian"],["Avestan","Avestan"],["Balinese","Balinese"],["Bamum","Bamum"],["Bassa_Vah","Bassa_Vah"],["Batak","Batak"],["Bengali","Bengali"],["Bhaiksuki","Bhaiksuki"],["Bopomofo","Bopomofo"],["Brahmi","Brahmi"],["Braille","Braille"],["Buginese","Buginese"],["Buhid","Buhid"],["Chakma","Chakma"],["Canadian_Aboriginal","Canadian_Aboriginal"],["Carian","Carian"],["Cherokee","Cherokee"],["Chorasmian","Chorasmian"],["Coptic","Coptic"],["Cypro_Minoan","Cypro_Minoan"],["Cypriot","Cypriot"],["Cyrillic","Cyrillic"],["Devanagari","Devanagari"],["Dives_Akuru","Dives_Akuru"],["Dogra","Dogra"],["Deseret","Deseret"],["Duployan","Duployan"],["Egyptian_Hieroglyphs","Egyptian_Hieroglyphs"],["Elbasan","Elbasan"],["Elymaic","Elymaic"],["Ethiopic","Ethiopic"],["Georgian","Georgian"],["Glagolitic","Glagolitic"],["Gunjala_Gondi","Gunjala_Gondi"],["Masaram_Gondi","Masaram_Gondi"],["Gothic","Gothic"],["Grantha","Grantha"],["Greek","Greek"],["Gujarati","Gujarati"],["Gurmukhi","Gurmukhi"],["Hangul","Hangul"],["Han","Han"],["Hanunoo","Hanunoo"],["Hatran","Hatran"],["Hebrew","Hebrew"],["Hiragana","Hiragana"],["Anatolian_Hieroglyphs","Anatolian_Hieroglyphs"],["Pahawh_Hmong","Pahawh_Hmong"],["Nyiakeng_Puachue_Hmong","Nyiakeng_Puachue_Hmong"],["Katakana_Or_Hiragana","Katakana_Or_Hiragana"],["Old_Hungarian","Old_Hungarian"],["Old_Italic","Old_Italic"],["Javanese","Javanese"],["Kayah_Li","Kayah_Li"],["Katakana","Katakana"],["Kharoshthi","Kharoshthi"],["Khmer","Khmer"],["Khojki","Khojki"],["Khitan_Small_Script","Khitan_Small_Script"],["Kannada","Kannada"],["Kaithi","Kaithi"],["Tai_Tham","Tai_Tham"],["Lao","Lao"],["Latin","Latin"],["Lepcha","Lepcha"],["Limbu","Limbu"],["Linear_A","Linear_A"],["Linear_B","Linear_B"],["Lycian","Lycian"],["Lydian","Lydian"],["Mahajani","Mahajani"],["Makasar","Makasar"],["Mandaic","Mandaic"],["Manichaean","Manichaean"],["Marchen","Marchen"],["Medefaidrin","Medefaidrin"],["Mende_Kikakui","Mende_Kikakui"],["Meroitic_Cursive","Meroitic_Cursive"],["Meroitic_Hieroglyphs","Meroitic_Hieroglyphs"],["Malayalam","Malayalam"],["Mongolian","Mongolian"],["Mro","Mro"],["Meetei_Mayek","Meetei_Mayek"],["Multani","Multani"],["Myanmar","Myanmar"],["Nag_Mundari","Nag_Mundari"],["Nandinagari","Nandinagari"],["Old_North_Arabian","Old_North_Arabian"],["Nabataean","Nabataean"],["Nko","Nko"],["Nushu","Nushu"],["Ogham","Ogham"],["Ol_Chiki","Ol_Chiki"],["Old_Turkic","Old_Turkic"],["Oriya","Oriya"],["Osage","Osage"],["Osmanya","Osmanya"],["Old_Uyghur","Old_Uyghur"],["Palmyrene","Palmyrene"],["Pau_Cin_Hau","Pau_Cin_Hau"],["Old_Permic","Old_Permic"],["Phags_Pa","Phags_Pa"],["Inscriptional_Pahlavi","Inscriptional_Pahlavi"],["Psalter_Pahlavi","Psalter_Pahlavi"],["Phoenician","Phoenician"],["Miao","Miao"],["Inscriptional_Parthian","Inscriptional_Parthian"],["Rejang","Rejang"],["Hanifi_Rohingya","Hanifi_Rohingya"],["Runic","Runic"],["Samaritan","Samaritan"],["Old_South_Arabian","Old_South_Arabian"],["Saurashtra","Saurashtra"],["SignWriting","SignWriting"],["Shavian","Shavian"],["Sharada","Sharada"],["Siddham","Siddham"],["Khudawadi","Khudawadi"],["Sinhala","Sinhala"],["Sogdian","Sogdian"],["Old_Sogdian","Old_Sogdian"],["Sora_Sompeng","Sora_Sompeng"],["Soyombo","Soyombo"],["Sundanese","Sundanese"],["Syloti_Nagri","Syloti_Nagri"],["Syriac","Syriac"],["Tagbanwa","Tagbanwa"],["Takri","Takri"],["Tai_Le","Tai_Le"],["New_Tai_Lue","New_Tai_Lue"],["Tamil","Tamil"],["Tangut","Tangut"],["Tai_Viet","Tai_Viet"],["Telugu","Telugu"],["Tifinagh","Tifinagh"],["Tagalog","Tagalog"],["Thaana","Thaana"],["Tibetan","Tibetan"],["Tirhuta","Tirhuta"],["Tangsa","Tangsa"],["Ugaritic","Ugaritic"],["Vai","Vai"],["Vithkuqi","Vithkuqi"],["Warang_Citi","Warang_Citi"],["Wancho","Wancho"],["Old_Persian","Old_Persian"],["Cuneiform","Cuneiform"],["Yezidi","Yezidi"],["Yi","Yi"],["Zanabazar_Square","Zanabazar_Square"],["Inherited","Inherited"],["Common","Common"],["Unknown","Unknown"]])],["Script_Extensions",new Map([["Adlm","Adlam"],["Aghb","Caucasian_Albanian"],["Ahom","Ahom"],["Arab","Arabic"],["Armi","Imperial_Aramaic"],["Armn","Armenian"],["Avst","Avestan"],["Bali","Balinese"],["Bamu","Bamum"],["Bass","Bassa_Vah"],["Batk","Batak"],["Beng","Bengali"],["Bhks","Bhaiksuki"],["Bopo","Bopomofo"],["Brah","Brahmi"],["Brai","Braille"],["Bugi","Buginese"],["Buhd","Buhid"],["Cakm","Chakma"],["Cans","Canadian_Aboriginal"],["Cari","Carian"],["Cham","Cham"],["Cher","Cherokee"],["Chrs","Chorasmian"],["Copt","Coptic"],["Qaac","Coptic"],["Cpmn","Cypro_Minoan"],["Cprt","Cypriot"],["Cyrl","Cyrillic"],["Deva","Devanagari"],["Diak","Dives_Akuru"],["Dogr","Dogra"],["Dsrt","Deseret"],["Dupl","Duployan"],["Egyp","Egyptian_Hieroglyphs"],["Elba","Elbasan"],["Elym","Elymaic"],["Ethi","Ethiopic"],["Geor","Georgian"],["Glag","Glagolitic"],["Gong","Gunjala_Gondi"],["Gonm","Masaram_Gondi"],["Goth","Gothic"],["Gran","Grantha"],["Grek","Greek"],["Gujr","Gujarati"],["Guru","Gurmukhi"],["Hang","Hangul"],["Hani","Han"],["Hano","Hanunoo"],["Hatr","Hatran"],["Hebr","Hebrew"],["Hira","Hiragana"],["Hluw","Anatolian_Hieroglyphs"],["Hmng","Pahawh_Hmong"],["Hmnp","Nyiakeng_Puachue_Hmong"],["Hrkt","Katakana_Or_Hiragana"],["Hung","Old_Hungarian"],["Ital","Old_Italic"],["Java","Javanese"],["Kali","Kayah_Li"],["Kana","Katakana"],["Kawi","Kawi"],["Khar","Kharoshthi"],["Khmr","Khmer"],["Khoj","Khojki"],["Kits","Khitan_Small_Script"],["Knda","Kannada"],["Kthi","Kaithi"],["Lana","Tai_Tham"],["Laoo","Lao"],["Latn","Latin"],["Lepc","Lepcha"],["Limb","Limbu"],["Lina","Linear_A"],["Linb","Linear_B"],["Lisu","Lisu"],["Lyci","Lycian"],["Lydi","Lydian"],["Mahj","Mahajani"],["Maka","Makasar"],["Mand","Mandaic"],["Mani","Manichaean"],["Marc","Marchen"],["Medf","Medefaidrin"],["Mend","Mende_Kikakui"],["Merc","Meroitic_Cursive"],["Mero","Meroitic_Hieroglyphs"],["Mlym","Malayalam"],["Modi","Modi"],["Mong","Mongolian"],["Mroo","Mro"],["Mtei","Meetei_Mayek"],["Mult","Multani"],["Mymr","Myanmar"],["Nagm","Nag_Mundari"],["Nand","Nandinagari"],["Narb","Old_North_Arabian"],["Nbat","Nabataean"],["Newa","Newa"],["Nkoo","Nko"],["Nshu","Nushu"],["Ogam","Ogham"],["Olck","Ol_Chiki"],["Orkh","Old_Turkic"],["Orya","Oriya"],["Osge","Osage"],["Osma","Osmanya"],["Ougr","Old_Uyghur"],["Palm","Palmyrene"],["Pauc","Pau_Cin_Hau"],["Perm","Old_Permic"],["Phag","Phags_Pa"],["Phli","Inscriptional_Pahlavi"],["Phlp","Psalter_Pahlavi"],["Phnx","Phoenician"],["Plrd","Miao"],["Prti","Inscriptional_Parthian"],["Rjng","Rejang"],["Rohg","Hanifi_Rohingya"],["Runr","Runic"],["Samr","Samaritan"],["Sarb","Old_South_Arabian"],["Saur","Saurashtra"],["Sgnw","SignWriting"],["Shaw","Shavian"],["Shrd","Sharada"],["Sidd","Siddham"],["Sind","Khudawadi"],["Sinh","Sinhala"],["Sogd","Sogdian"],["Sogo","Old_Sogdian"],["Sora","Sora_Sompeng"],["Soyo","Soyombo"],["Sund","Sundanese"],["Sylo","Syloti_Nagri"],["Syrc","Syriac"],["Tagb","Tagbanwa"],["Takr","Takri"],["Tale","Tai_Le"],["Talu","New_Tai_Lue"],["Taml","Tamil"],["Tang","Tangut"],["Tavt","Tai_Viet"],["Telu","Telugu"],["Tfng","Tifinagh"],["Tglg","Tagalog"],["Thaa","Thaana"],["Thai","Thai"],["Tibt","Tibetan"],["Tirh","Tirhuta"],["Tnsa","Tangsa"],["Toto","Toto"],["Ugar","Ugaritic"],["Vaii","Vai"],["Vith","Vithkuqi"],["Wara","Warang_Citi"],["Wcho","Wancho"],["Xpeo","Old_Persian"],["Xsux","Cuneiform"],["Yezi","Yezidi"],["Yiii","Yi"],["Zanb","Zanabazar_Square"],["Zinh","Inherited"],["Qaai","Inherited"],["Zyyy","Common"],["Zzzz","Unknown"],["Adlam","Adlam"],["Caucasian_Albanian","Caucasian_Albanian"],["Arabic","Arabic"],["Imperial_Aramaic","Imperial_Aramaic"],["Armenian","Armenian"],["Avestan","Avestan"],["Balinese","Balinese"],["Bamum","Bamum"],["Bassa_Vah","Bassa_Vah"],["Batak","Batak"],["Bengali","Bengali"],["Bhaiksuki","Bhaiksuki"],["Bopomofo","Bopomofo"],["Brahmi","Brahmi"],["Braille","Braille"],["Buginese","Buginese"],["Buhid","Buhid"],["Chakma","Chakma"],["Canadian_Aboriginal","Canadian_Aboriginal"],["Carian","Carian"],["Cherokee","Cherokee"],["Chorasmian","Chorasmian"],["Coptic","Coptic"],["Cypro_Minoan","Cypro_Minoan"],["Cypriot","Cypriot"],["Cyrillic","Cyrillic"],["Devanagari","Devanagari"],["Dives_Akuru","Dives_Akuru"],["Dogra","Dogra"],["Deseret","Deseret"],["Duployan","Duployan"],["Egyptian_Hieroglyphs","Egyptian_Hieroglyphs"],["Elbasan","Elbasan"],["Elymaic","Elymaic"],["Ethiopic","Ethiopic"],["Georgian","Georgian"],["Glagolitic","Glagolitic"],["Gunjala_Gondi","Gunjala_Gondi"],["Masaram_Gondi","Masaram_Gondi"],["Gothic","Gothic"],["Grantha","Grantha"],["Greek","Greek"],["Gujarati","Gujarati"],["Gurmukhi","Gurmukhi"],["Hangul","Hangul"],["Han","Han"],["Hanunoo","Hanunoo"],["Hatran","Hatran"],["Hebrew","Hebrew"],["Hiragana","Hiragana"],["Anatolian_Hieroglyphs","Anatolian_Hieroglyphs"],["Pahawh_Hmong","Pahawh_Hmong"],["Nyiakeng_Puachue_Hmong","Nyiakeng_Puachue_Hmong"],["Katakana_Or_Hiragana","Katakana_Or_Hiragana"],["Old_Hungarian","Old_Hungarian"],["Old_Italic","Old_Italic"],["Javanese","Javanese"],["Kayah_Li","Kayah_Li"],["Katakana","Katakana"],["Kharoshthi","Kharoshthi"],["Khmer","Khmer"],["Khojki","Khojki"],["Khitan_Small_Script","Khitan_Small_Script"],["Kannada","Kannada"],["Kaithi","Kaithi"],["Tai_Tham","Tai_Tham"],["Lao","Lao"],["Latin","Latin"],["Lepcha","Lepcha"],["Limbu","Limbu"],["Linear_A","Linear_A"],["Linear_B","Linear_B"],["Lycian","Lycian"],["Lydian","Lydian"],["Mahajani","Mahajani"],["Makasar","Makasar"],["Mandaic","Mandaic"],["Manichaean","Manichaean"],["Marchen","Marchen"],["Medefaidrin","Medefaidrin"],["Mende_Kikakui","Mende_Kikakui"],["Meroitic_Cursive","Meroitic_Cursive"],["Meroitic_Hieroglyphs","Meroitic_Hieroglyphs"],["Malayalam","Malayalam"],["Mongolian","Mongolian"],["Mro","Mro"],["Meetei_Mayek","Meetei_Mayek"],["Multani","Multani"],["Myanmar","Myanmar"],["Nag_Mundari","Nag_Mundari"],["Nandinagari","Nandinagari"],["Old_North_Arabian","Old_North_Arabian"],["Nabataean","Nabataean"],["Nko","Nko"],["Nushu","Nushu"],["Ogham","Ogham"],["Ol_Chiki","Ol_Chiki"],["Old_Turkic","Old_Turkic"],["Oriya","Oriya"],["Osage","Osage"],["Osmanya","Osmanya"],["Old_Uyghur","Old_Uyghur"],["Palmyrene","Palmyrene"],["Pau_Cin_Hau","Pau_Cin_Hau"],["Old_Permic","Old_Permic"],["Phags_Pa","Phags_Pa"],["Inscriptional_Pahlavi","Inscriptional_Pahlavi"],["Psalter_Pahlavi","Psalter_Pahlavi"],["Phoenician","Phoenician"],["Miao","Miao"],["Inscriptional_Parthian","Inscriptional_Parthian"],["Rejang","Rejang"],["Hanifi_Rohingya","Hanifi_Rohingya"],["Runic","Runic"],["Samaritan","Samaritan"],["Old_South_Arabian","Old_South_Arabian"],["Saurashtra","Saurashtra"],["SignWriting","SignWriting"],["Shavian","Shavian"],["Sharada","Sharada"],["Siddham","Siddham"],["Khudawadi","Khudawadi"],["Sinhala","Sinhala"],["Sogdian","Sogdian"],["Old_Sogdian","Old_Sogdian"],["Sora_Sompeng","Sora_Sompeng"],["Soyombo","Soyombo"],["Sundanese","Sundanese"],["Syloti_Nagri","Syloti_Nagri"],["Syriac","Syriac"],["Tagbanwa","Tagbanwa"],["Takri","Takri"],["Tai_Le","Tai_Le"],["New_Tai_Lue","New_Tai_Lue"],["Tamil","Tamil"],["Tangut","Tangut"],["Tai_Viet","Tai_Viet"],["Telugu","Telugu"],["Tifinagh","Tifinagh"],["Tagalog","Tagalog"],["Thaana","Thaana"],["Tibetan","Tibetan"],["Tirhuta","Tirhuta"],["Tangsa","Tangsa"],["Ugaritic","Ugaritic"],["Vai","Vai"],["Vithkuqi","Vithkuqi"],["Warang_Citi","Warang_Citi"],["Wancho","Wancho"],["Old_Persian","Old_Persian"],["Cuneiform","Cuneiform"],["Yezidi","Yezidi"],["Yi","Yi"],["Zanabazar_Square","Zanabazar_Square"],["Inherited","Inherited"],["Common","Common"],["Unknown","Unknown"]])]])},5064:function(e,t,n){"use strict";const a=n(13199);e.exports=function(e,t){const n=a.get(e);if(!n)throw new Error(`Unknown property \`${e}\`.`);const r=n.get(t);if(r)return r;throw new Error(`Unknown value \`${t}\` for property \`${e}\`.`)}},99501:function(e){e.exports=new Map([["scx","Script_Extensions"],["sc","Script"],["gc","General_Category"],["AHex","ASCII_Hex_Digit"],["Alpha","Alphabetic"],["Bidi_C","Bidi_Control"],["Bidi_M","Bidi_Mirrored"],["Cased","Cased"],["CI","Case_Ignorable"],["CWCF","Changes_When_Casefolded"],["CWCM","Changes_When_Casemapped"],["CWKCF","Changes_When_NFKC_Casefolded"],["CWL","Changes_When_Lowercased"],["CWT","Changes_When_Titlecased"],["CWU","Changes_When_Uppercased"],["Dash","Dash"],["Dep","Deprecated"],["DI","Default_Ignorable_Code_Point"],["Dia","Diacritic"],["EBase","Emoji_Modifier_Base"],["EComp","Emoji_Component"],["EMod","Emoji_Modifier"],["Emoji","Emoji"],["EPres","Emoji_Presentation"],["Ext","Extender"],["ExtPict","Extended_Pictographic"],["Gr_Base","Grapheme_Base"],["Gr_Ext","Grapheme_Extend"],["Hex","Hex_Digit"],["IDC","ID_Continue"],["Ideo","Ideographic"],["IDS","ID_Start"],["IDSB","IDS_Binary_Operator"],["IDST","IDS_Trinary_Operator"],["Join_C","Join_Control"],["LOE","Logical_Order_Exception"],["Lower","Lowercase"],["Math","Math"],["NChar","Noncharacter_Code_Point"],["Pat_Syn","Pattern_Syntax"],["Pat_WS","Pattern_White_Space"],["QMark","Quotation_Mark"],["Radical","Radical"],["RI","Regional_Indicator"],["SD","Soft_Dotted"],["STerm","Sentence_Terminal"],["Term","Terminal_Punctuation"],["UIdeo","Unified_Ideograph"],["Upper","Uppercase"],["VS","Variation_Selector"],["WSpace","White_Space"],["space","White_Space"],["XIDC","XID_Continue"],["XIDS","XID_Start"]])},22371:function(e,t){!function(e){"use strict";function t(){for(var e=arguments.length,t=Array(e),n=0;n<e;n++)t[n]=arguments[n];if(t.length>1){t[0]=t[0].slice(0,-1);for(var a=t.length-1,r=1;r<a;++r)t[r]=t[r].slice(1,-1);return t[a]=t[a].slice(1),t.join("")}return t[0]}function n(e){return"(?:"+e+")"}function a(e){return void 0===e?"undefined":null===e?"null":Object.prototype.toString.call(e).split(" ").pop().split("]").shift().toLowerCase()}function r(e){return e.toUpperCase()}function i(e){return null!=e?e instanceof Array?e:"number"!=typeof e.length||e.split||e.setInterval||e.call?[e]:Array.prototype.slice.call(e):[]}function o(e,t){var n=e;if(t)for(var a in t)n[a]=t[a];return n}function d(e){var a="[A-Za-z]",r="[0-9]",i=t(r,"[A-Fa-f]"),o=n(n("%[EFef]"+i+"%"+i+i+"%"+i+i)+"|"+n("%[89A-Fa-f]"+i+"%"+i+i)+"|"+n("%"+i+i)),d="[\\!\\$\\&\\'\\(\\)\\*\\+\\,\\;\\=]",s=t("[\\:\\/\\?\\#\\[\\]\\@]",d),c=e?"[\\uE000-\\uF8FF]":"[]",u=t(a,r,"[\\-\\.\\_\\~]",e?"[\\xA0-\\u200D\\u2010-\\u2029\\u202F-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFEF]":"[]"),l=n(a+t(a,r,"[\\+\\-\\.]")+"*"),g=n(n(o+"|"+t(u,d,"[\\:]"))+"*"),h=(n(n("25[0-5]")+"|"+n("2[0-4]"+r)+"|"+n("1"+r+r)+"|"+n("[1-9]"+r)+"|"+r),n(n("25[0-5]")+"|"+n("2[0-4]"+r)+"|"+n("1"+r+r)+"|"+n("0?[1-9]"+r)+"|0?0?"+r)),f=n(h+"\\."+h+"\\."+h+"\\."+h),p=n(i+"{1,4}"),m=n(n(p+"\\:"+p)+"|"+f),R=n(n(p+"\\:")+"{6}"+m),b=n("\\:\\:"+n(p+"\\:")+"{5}"+m),y=n(n(p)+"?\\:\\:"+n(p+"\\:")+"{4}"+m),v=n(n(n(p+"\\:")+"{0,1}"+p)+"?\\:\\:"+n(p+"\\:")+"{3}"+m),_=n(n(n(p+"\\:")+"{0,2}"+p)+"?\\:\\:"+n(p+"\\:")+"{2}"+m),w=n(n(n(p+"\\:")+"{0,3}"+p)+"?\\:\\:"+p+"\\:"+m),M=n(n(n(p+"\\:")+"{0,4}"+p)+"?\\:\\:"+m),x=n(n(n(p+"\\:")+"{0,5}"+p)+"?\\:\\:"+p),E=n(n(n(p+"\\:")+"{0,6}"+p)+"?\\:\\:"),S=n([R,b,y,v,_,w,M,x,E].join("|")),k=n(n(u+"|"+o)+"+"),N=(n(S+"\\%25"+k),n(S+n("\\%25|\\%(?!"+i+"{2})")+k)),D=n("[vV]"+i+"+\\."+t(u,d,"[\\:]")+"+"),A=n("\\["+n(N+"|"+S+"|"+D)+"\\]"),j=n(n(o+"|"+t(u,d))+"*"),T=n(A+"|"+f+"(?!"+j+")|"+j),L=n(r+"*"),I=n(n(g+"@")+"?"+T+n("\\:"+L)+"?"),C=n(o+"|"+t(u,d,"[\\:\\@]")),O=n(C+"*"),P=n(C+"+"),z=n(n(o+"|"+t(u,d,"[\\@]"))+"+"),B=n(n("\\/"+O)+"*"),F=n("\\/"+n(P+B)+"?"),U=n(z+B),$=n(P+B),H="(?!"+C+")",q=(n(B+"|"+F+"|"+U+"|"+$+"|"+H),n(n(C+"|"+t("[\\/\\?]",c))+"*")),Y=n(n(C+"|[\\/\\?]")+"*"),G=n(n("\\/\\/"+I+B)+"|"+F+"|"+$+"|"+H),V=n(l+"\\:"+G+n("\\?"+q)+"?"+n("\\#"+Y)+"?"),Q=n(n("\\/\\/"+I+B)+"|"+F+"|"+U+"|"+H),W=n(Q+n("\\?"+q)+"?"+n("\\#"+Y)+"?");return n(V+"|"+W),n(l+"\\:"+G+n("\\?"+q)+"?"),n(n("\\/\\/("+n("("+g+")@")+"?("+T+")"+n("\\:("+L+")")+"?)")+"?("+B+"|"+F+"|"+$+"|"+H+")"),n("\\?("+q+")"),n("\\#("+Y+")"),n(n("\\/\\/("+n("("+g+")@")+"?("+T+")"+n("\\:("+L+")")+"?)")+"?("+B+"|"+F+"|"+U+"|"+H+")"),n("\\?("+q+")"),n("\\#("+Y+")"),n(n("\\/\\/("+n("("+g+")@")+"?("+T+")"+n("\\:("+L+")")+"?)")+"?("+B+"|"+F+"|"+$+"|"+H+")"),n("\\?("+q+")"),n("\\#("+Y+")"),n("("+g+")@"),n("\\:("+L+")"),{NOT_SCHEME:new RegExp(t("[^]",a,r,"[\\+\\-\\.]"),"g"),NOT_USERINFO:new RegExp(t("[^\\%\\:]",u,d),"g"),NOT_HOST:new RegExp(t("[^\\%\\[\\]\\:]",u,d),"g"),NOT_PATH:new RegExp(t("[^\\%\\/\\:\\@]",u,d),"g"),NOT_PATH_NOSCHEME:new RegExp(t("[^\\%\\/\\@]",u,d),"g"),NOT_QUERY:new RegExp(t("[^\\%]",u,d,"[\\:\\@\\/\\?]",c),"g"),NOT_FRAGMENT:new RegExp(t("[^\\%]",u,d,"[\\:\\@\\/\\?]"),"g"),ESCAPE:new RegExp(t("[^]",u,d),"g"),UNRESERVED:new RegExp(u,"g"),OTHER_CHARS:new RegExp(t("[^\\%]",u,s),"g"),PCT_ENCODED:new RegExp(o,"g"),IPV4ADDRESS:new RegExp("^("+f+")$"),IPV6ADDRESS:new RegExp("^\\[?("+S+")"+n(n("\\%25|\\%(?!"+i+"{2})")+"("+k+")")+"?\\]?$")}}var s=d(!1),c=d(!0),u=function(){function e(e,t){var n=[],a=!0,r=!1,i=void 0;try{for(var o,d=e[Symbol.iterator]();!(a=(o=d.next()).done)&&(n.push(o.value),!t||n.length!==t);a=!0);}catch(s){r=!0,i=s}finally{try{!a&&d.return&&d.return()}finally{if(r)throw i}}return n}return function(t,n){if(Array.isArray(t))return t;if(Symbol.iterator in Object(t))return e(t,n);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),l=function(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)},g=2147483647,h=36,f=1,p=26,m=38,R=700,b=72,y=128,v="-",_=/^xn--/,w=/[^\0-\x7E]/,M=/[\x2E\u3002\uFF0E\uFF61]/g,x={overflow:"Overflow: input needs wider integers to process","not-basic":"Illegal input >= 0x80 (not a basic code point)","invalid-input":"Invalid input"},E=h-f,S=Math.floor,k=String.fromCharCode;function N(e){throw new RangeError(x[e])}function D(e,t){for(var n=[],a=e.length;a--;)n[a]=t(e[a]);return n}function A(e,t){var n=e.split("@"),a="";return n.length>1&&(a=n[0]+"@",e=n[1]),a+D((e=e.replace(M,".")).split("."),t).join(".")}function j(e){for(var t=[],n=0,a=e.length;n<a;){var r=e.charCodeAt(n++);if(r>=55296&&r<=56319&&n<a){var i=e.charCodeAt(n++);56320==(64512&i)?t.push(((1023&r)<<10)+(1023&i)+65536):(t.push(r),n--)}else t.push(r)}return t}var T=function(e){return e-48<10?e-22:e-65<26?e-65:e-97<26?e-97:h},L=function(e,t){return e+22+75*(e<26)-((0!=t)<<5)},I=function(e,t,n){var a=0;for(e=n?S(e/R):e>>1,e+=S(e/t);e>E*p>>1;a+=h)e=S(e/E);return S(a+(E+1)*e/(e+m))},C=function(e){var t=[],n=e.length,a=0,r=y,i=b,o=e.lastIndexOf(v);o<0&&(o=0);for(var d=0;d<o;++d)e.charCodeAt(d)>=128&&N("not-basic"),t.push(e.charCodeAt(d));for(var s=o>0?o+1:0;s<n;){for(var c=a,u=1,l=h;;l+=h){s>=n&&N("invalid-input");var m=T(e.charCodeAt(s++));(m>=h||m>S((g-a)/u))&&N("overflow"),a+=m*u;var R=l<=i?f:l>=i+p?p:l-i;if(m<R)break;var _=h-R;u>S(g/_)&&N("overflow"),u*=_}var w=t.length+1;i=I(a-c,w,0==c),S(a/w)>g-r&&N("overflow"),r+=S(a/w),a%=w,t.splice(a++,0,r)}return String.fromCodePoint.apply(String,t)},O=function(e){var t=[],n=(e=j(e)).length,a=y,r=0,i=b,o=!0,d=!1,s=void 0;try{for(var c,u=e[Symbol.iterator]();!(o=(c=u.next()).done);o=!0){var l=c.value;l<128&&t.push(k(l))}}catch(G){d=!0,s=G}finally{try{!o&&u.return&&u.return()}finally{if(d)throw s}}var m=t.length,R=m;for(m&&t.push(v);R<n;){var _=g,w=!0,M=!1,x=void 0;try{for(var E,D=e[Symbol.iterator]();!(w=(E=D.next()).done);w=!0){var A=E.value;A>=a&&A<_&&(_=A)}}catch(G){M=!0,x=G}finally{try{!w&&D.return&&D.return()}finally{if(M)throw x}}var T=R+1;_-a>S((g-r)/T)&&N("overflow"),r+=(_-a)*T,a=_;var C=!0,O=!1,P=void 0;try{for(var z,B=e[Symbol.iterator]();!(C=(z=B.next()).done);C=!0){var F=z.value;if(F<a&&++r>g&&N("overflow"),F==a){for(var U=r,$=h;;$+=h){var H=$<=i?f:$>=i+p?p:$-i;if(U<H)break;var q=U-H,Y=h-H;t.push(k(L(H+q%Y,0))),U=S(q/Y)}t.push(k(L(U,0))),i=I(r,T,R==m),r=0,++R}}}catch(G){O=!0,P=G}finally{try{!C&&B.return&&B.return()}finally{if(O)throw P}}++r,++a}return t.join("")},P=function(e){return A(e,(function(e){return _.test(e)?C(e.slice(4).toLowerCase()):e}))},z=function(e){return A(e,(function(e){return w.test(e)?"xn--"+O(e):e}))},B={version:"2.1.0",ucs2:{decode:j,encode:function(e){return String.fromCodePoint.apply(String,l(e))}},decode:C,encode:O,toASCII:z,toUnicode:P},F={};function U(e){var t=e.charCodeAt(0);return t<16?"%0"+t.toString(16).toUpperCase():t<128?"%"+t.toString(16).toUpperCase():t<2048?"%"+(t>>6|192).toString(16).toUpperCase()+"%"+(63&t|128).toString(16).toUpperCase():"%"+(t>>12|224).toString(16).toUpperCase()+"%"+(t>>6&63|128).toString(16).toUpperCase()+"%"+(63&t|128).toString(16).toUpperCase()}function $(e){for(var t="",n=0,a=e.length;n<a;){var r=parseInt(e.substr(n+1,2),16);if(r<128)t+=String.fromCharCode(r),n+=3;else if(r>=194&&r<224){if(a-n>=6){var i=parseInt(e.substr(n+4,2),16);t+=String.fromCharCode((31&r)<<6|63&i)}else t+=e.substr(n,6);n+=6}else if(r>=224){if(a-n>=9){var o=parseInt(e.substr(n+4,2),16),d=parseInt(e.substr(n+7,2),16);t+=String.fromCharCode((15&r)<<12|(63&o)<<6|63&d)}else t+=e.substr(n,9);n+=9}else t+=e.substr(n,3),n+=3}return t}function H(e,t){function n(e){var n=$(e);return n.match(t.UNRESERVED)?n:e}return e.scheme&&(e.scheme=String(e.scheme).replace(t.PCT_ENCODED,n).toLowerCase().replace(t.NOT_SCHEME,"")),void 0!==e.userinfo&&(e.userinfo=String(e.userinfo).replace(t.PCT_ENCODED,n).replace(t.NOT_USERINFO,U).replace(t.PCT_ENCODED,r)),void 0!==e.host&&(e.host=String(e.host).replace(t.PCT_ENCODED,n).toLowerCase().replace(t.NOT_HOST,U).replace(t.PCT_ENCODED,r)),void 0!==e.path&&(e.path=String(e.path).replace(t.PCT_ENCODED,n).replace(e.scheme?t.NOT_PATH:t.NOT_PATH_NOSCHEME,U).replace(t.PCT_ENCODED,r)),void 0!==e.query&&(e.query=String(e.query).replace(t.PCT_ENCODED,n).replace(t.NOT_QUERY,U).replace(t.PCT_ENCODED,r)),void 0!==e.fragment&&(e.fragment=String(e.fragment).replace(t.PCT_ENCODED,n).replace(t.NOT_FRAGMENT,U).replace(t.PCT_ENCODED,r)),e}function q(e){return e.replace(/^0*(.*)/,"$1")||"0"}function Y(e,t){var n=e.match(t.IPV4ADDRESS)||[],a=u(n,2)[1];return a?a.split(".").map(q).join("."):e}function G(e,t){var n=e.match(t.IPV6ADDRESS)||[],a=u(n,3),r=a[1],i=a[2];if(r){for(var o=r.toLowerCase().split("::").reverse(),d=u(o,2),s=d[0],c=d[1],l=c?c.split(":").map(q):[],g=s.split(":").map(q),h=t.IPV4ADDRESS.test(g[g.length-1]),f=h?7:8,p=g.length-f,m=Array(f),R=0;R<f;++R)m[R]=l[R]||g[p+R]||"";h&&(m[f-1]=Y(m[f-1],t));var b=m.reduce((function(e,t,n){if(!t||"0"===t){var a=e[e.length-1];a&&a.index+a.length===n?a.length++:e.push({index:n,length:1})}return e}),[]).sort((function(e,t){return t.length-e.length}))[0],y=void 0;if(b&&b.length>1){var v=m.slice(0,b.index),_=m.slice(b.index+b.length);y=v.join(":")+"::"+_.join(":")}else y=m.join(":");return i&&(y+="%"+i),y}return e}var V=/^(?:([^:\/?#]+):)?(?:\/\/((?:([^\/?#@]*)@)?(\[[^\/?#\]]+\]|[^\/?#:]*)(?:\:(\d*))?))?([^?#]*)(?:\?([^#]*))?(?:#((?:.|\n|\r)*))?/i,Q=void 0==="".match(/(){0}/)[1];function W(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n={},a=!1!==t.iri?c:s;"suffix"===t.reference&&(e=(t.scheme?t.scheme+":":"")+"//"+e);var r=e.match(V);if(r){Q?(n.scheme=r[1],n.userinfo=r[3],n.host=r[4],n.port=parseInt(r[5],10),n.path=r[6]||"",n.query=r[7],n.fragment=r[8],isNaN(n.port)&&(n.port=r[5])):(n.scheme=r[1]||void 0,n.userinfo=-1!==e.indexOf("@")?r[3]:void 0,n.host=-1!==e.indexOf("//")?r[4]:void 0,n.port=parseInt(r[5],10),n.path=r[6]||"",n.query=-1!==e.indexOf("?")?r[7]:void 0,n.fragment=-1!==e.indexOf("#")?r[8]:void 0,isNaN(n.port)&&(n.port=e.match(/\/\/(?:.|\n)*\:(?:\/|\?|\#|$)/)?r[4]:void 0)),n.host&&(n.host=G(Y(n.host,a),a)),void 0!==n.scheme||void 0!==n.userinfo||void 0!==n.host||void 0!==n.port||n.path||void 0!==n.query?void 0===n.scheme?n.reference="relative":void 0===n.fragment?n.reference="absolute":n.reference="uri":n.reference="same-document",t.reference&&"suffix"!==t.reference&&t.reference!==n.reference&&(n.error=n.error||"URI is not a "+t.reference+" reference.");var i=F[(t.scheme||n.scheme||"").toLowerCase()];if(t.unicodeSupport||i&&i.unicodeSupport)H(n,a);else{if(n.host&&(t.domainHost||i&&i.domainHost))try{n.host=B.toASCII(n.host.replace(a.PCT_ENCODED,$).toLowerCase())}catch(o){n.error=n.error||"Host's domain name can not be converted to ASCII via punycode: "+o}H(n,s)}i&&i.parse&&i.parse(n,t)}else n.error=n.error||"URI can not be parsed.";return n}function K(e,t){var n=!1!==t.iri?c:s,a=[];return void 0!==e.userinfo&&(a.push(e.userinfo),a.push("@")),void 0!==e.host&&a.push(G(Y(String(e.host),n),n).replace(n.IPV6ADDRESS,(function(e,t,n){return"["+t+(n?"%25"+n:"")+"]"}))),"number"!=typeof e.port&&"string"!=typeof e.port||(a.push(":"),a.push(String(e.port))),a.length?a.join(""):void 0}var Z=/^\.\.?\//,X=/^\/\.(\/|$)/,J=/^\/\.\.(\/|$)/,ee=/^\/?(?:.|\n)*?(?=\/|$)/;function te(e){for(var t=[];e.length;)if(e.match(Z))e=e.replace(Z,"");else if(e.match(X))e=e.replace(X,"/");else if(e.match(J))e=e.replace(J,"/"),t.pop();else if("."===e||".."===e)e="";else{var n=e.match(ee);if(!n)throw new Error("Unexpected dot segment condition");var a=n[0];e=e.slice(a.length),t.push(a)}return t.join("")}function ne(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.iri?c:s,a=[],r=F[(t.scheme||e.scheme||"").toLowerCase()];if(r&&r.serialize&&r.serialize(e,t),e.host)if(n.IPV6ADDRESS.test(e.host));else if(t.domainHost||r&&r.domainHost)try{e.host=t.iri?B.toUnicode(e.host):B.toASCII(e.host.replace(n.PCT_ENCODED,$).toLowerCase())}catch(d){e.error=e.error||"Host's domain name can not be converted to "+(t.iri?"Unicode":"ASCII")+" via punycode: "+d}H(e,n),"suffix"!==t.reference&&e.scheme&&(a.push(e.scheme),a.push(":"));var i=K(e,t);if(void 0!==i&&("suffix"!==t.reference&&a.push("//"),a.push(i),e.path&&"/"!==e.path.charAt(0)&&a.push("/")),void 0!==e.path){var o=e.path;t.absolutePath||r&&r.absolutePath||(o=te(o)),void 0===i&&(o=o.replace(/^\/\//,"/%2F")),a.push(o)}return void 0!==e.query&&(a.push("?"),a.push(e.query)),void 0!==e.fragment&&(a.push("#"),a.push(e.fragment)),a.join("")}function ae(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},a={};return arguments[3]||(e=W(ne(e,n),n),t=W(ne(t,n),n)),!(n=n||{}).tolerant&&t.scheme?(a.scheme=t.scheme,a.userinfo=t.userinfo,a.host=t.host,a.port=t.port,a.path=te(t.path||""),a.query=t.query):(void 0!==t.userinfo||void 0!==t.host||void 0!==t.port?(a.userinfo=t.userinfo,a.host=t.host,a.port=t.port,a.path=te(t.path||""),a.query=t.query):(t.path?("/"===t.path.charAt(0)?a.path=te(t.path):(void 0===e.userinfo&&void 0===e.host&&void 0===e.port||e.path?e.path?a.path=e.path.slice(0,e.path.lastIndexOf("/")+1)+t.path:a.path=t.path:a.path="/"+t.path,a.path=te(a.path)),a.query=t.query):(a.path=e.path,void 0!==t.query?a.query=t.query:a.query=e.query),a.userinfo=e.userinfo,a.host=e.host,a.port=e.port),a.scheme=e.scheme),a.fragment=t.fragment,a}function re(e,t,n){var a=o({scheme:"null"},n);return ne(ae(W(e,a),W(t,a),a,!0),a)}function ie(e,t){return"string"==typeof e?e=ne(W(e,t),t):"object"===a(e)&&(e=W(ne(e,t),t)),e}function oe(e,t,n){return"string"==typeof e?e=ne(W(e,n),n):"object"===a(e)&&(e=ne(e,n)),"string"==typeof t?t=ne(W(t,n),n):"object"===a(t)&&(t=ne(t,n)),e===t}function de(e,t){return e&&e.toString().replace(t&&t.iri?c.ESCAPE:s.ESCAPE,U)}function se(e,t){return e&&e.toString().replace(t&&t.iri?c.PCT_ENCODED:s.PCT_ENCODED,$)}var ce={scheme:"http",domainHost:!0,parse:function(e,t){return e.host||(e.error=e.error||"HTTP URIs must have a host."),e},serialize:function(e,t){var n="https"===String(e.scheme).toLowerCase();return e.port!==(n?443:80)&&""!==e.port||(e.port=void 0),e.path||(e.path="/"),e}},ue={scheme:"https",domainHost:ce.domainHost,parse:ce.parse,serialize:ce.serialize};function le(e){return"boolean"==typeof e.secure?e.secure:"wss"===String(e.scheme).toLowerCase()}var ge={scheme:"ws",domainHost:!0,parse:function(e,t){var n=e;return n.secure=le(n),n.resourceName=(n.path||"/")+(n.query?"?"+n.query:""),n.path=void 0,n.query=void 0,n},serialize:function(e,t){if(e.port!==(le(e)?443:80)&&""!==e.port||(e.port=void 0),"boolean"==typeof e.secure&&(e.scheme=e.secure?"wss":"ws",e.secure=void 0),e.resourceName){var n=e.resourceName.split("?"),a=u(n,2),r=a[0],i=a[1];e.path=r&&"/"!==r?r:void 0,e.query=i,e.resourceName=void 0}return e.fragment=void 0,e}},he={scheme:"wss",domainHost:ge.domainHost,parse:ge.parse,serialize:ge.serialize},fe={},pe="[A-Za-z0-9\\-\\.\\_\\~\\xA0-\\u200D\\u2010-\\u2029\\u202F-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFEF]",me="[0-9A-Fa-f]",Re=n(n("%[EFef]"+me+"%"+me+me+"%"+me+me)+"|"+n("%[89A-Fa-f]"+me+"%"+me+me)+"|"+n("%"+me+me)),be="[A-Za-z0-9\\!\\$\\%\\'\\*\\+\\-\\^\\_\\`\\{\\|\\}\\~]",ye=t("[\\!\\$\\%\\'\\(\\)\\*\\+\\,\\-\\.0-9\\<\\>A-Z\\x5E-\\x7E]",'[\\"\\\\]'),ve="[\\!\\$\\'\\(\\)\\*\\+\\,\\;\\:\\@]",_e=new RegExp(pe,"g"),we=new RegExp(Re,"g"),Me=new RegExp(t("[^]",be,"[\\.]",'[\\"]',ye),"g"),xe=new RegExp(t("[^]",pe,ve),"g"),Ee=xe;function Se(e){var t=$(e);return t.match(_e)?t:e}var ke={scheme:"mailto",parse:function(e,t){var n=e,a=n.to=n.path?n.path.split(","):[];if(n.path=void 0,n.query){for(var r=!1,i={},o=n.query.split("&"),d=0,s=o.length;d<s;++d){var c=o[d].split("=");switch(c[0]){case"to":for(var u=c[1].split(","),l=0,g=u.length;l<g;++l)a.push(u[l]);break;case"subject":n.subject=se(c[1],t);break;case"body":n.body=se(c[1],t);break;default:r=!0,i[se(c[0],t)]=se(c[1],t)}}r&&(n.headers=i)}n.query=void 0;for(var h=0,f=a.length;h<f;++h){var p=a[h].split("@");if(p[0]=se(p[0]),t.unicodeSupport)p[1]=se(p[1],t).toLowerCase();else try{p[1]=B.toASCII(se(p[1],t).toLowerCase())}catch(m){n.error=n.error||"Email address's domain name can not be converted to ASCII via punycode: "+m}a[h]=p.join("@")}return n},serialize:function(e,t){var n=e,a=i(e.to);if(a){for(var o=0,d=a.length;o<d;++o){var s=String(a[o]),c=s.lastIndexOf("@"),u=s.slice(0,c).replace(we,Se).replace(we,r).replace(Me,U),l=s.slice(c+1);try{l=t.iri?B.toUnicode(l):B.toASCII(se(l,t).toLowerCase())}catch(p){n.error=n.error||"Email address's domain name can not be converted to "+(t.iri?"Unicode":"ASCII")+" via punycode: "+p}a[o]=u+"@"+l}n.path=a.join(",")}var g=e.headers=e.headers||{};e.subject&&(g.subject=e.subject),e.body&&(g.body=e.body);var h=[];for(var f in g)g[f]!==fe[f]&&h.push(f.replace(we,Se).replace(we,r).replace(xe,U)+"="+g[f].replace(we,Se).replace(we,r).replace(Ee,U));return h.length&&(n.query=h.join("&")),n}},Ne=/^([^\:]+)\:(.*)/,De={scheme:"urn",parse:function(e,t){var n=e.path&&e.path.match(Ne),a=e;if(n){var r=t.scheme||a.scheme||"urn",i=n[1].toLowerCase(),o=n[2],d=r+":"+(t.nid||i),s=F[d];a.nid=i,a.nss=o,a.path=void 0,s&&(a=s.parse(a,t))}else a.error=a.error||"URN can not be parsed.";return a},serialize:function(e,t){var n=t.scheme||e.scheme||"urn",a=e.nid,r=n+":"+(t.nid||a),i=F[r];i&&(e=i.serialize(e,t));var o=e,d=e.nss;return o.path=(a||t.nid)+":"+d,o}},Ae=/^[0-9A-Fa-f]{8}(?:\-[0-9A-Fa-f]{4}){3}\-[0-9A-Fa-f]{12}$/,je={scheme:"urn:uuid",parse:function(e,t){var n=e;return n.uuid=n.nss,n.nss=void 0,t.tolerant||n.uuid&&n.uuid.match(Ae)||(n.error=n.error||"UUID is not valid."),n},serialize:function(e,t){var n=e;return n.nss=(e.uuid||"").toLowerCase(),n}};F[ce.scheme]=ce,F[ue.scheme]=ue,F[ge.scheme]=ge,F[he.scheme]=he,F[ke.scheme]=ke,F[De.scheme]=De,F[je.scheme]=je,e.SCHEMES=F,e.pctEncChar=U,e.pctDecChars=$,e.parse=W,e.removeDotSegments=te,e.serialize=ne,e.resolveComponents=ae,e.resolve=re,e.normalize=ie,e.equal=oe,e.escapeComponent=de,e.unescapeComponent=se,Object.defineProperty(e,"__esModule",{value:!0})}(t)},17451:function(e,t,n){function a(e){try{if(!n.g.localStorage)return!1}catch(a){return!1}var t=n.g.localStorage[e];return null!=t&&"true"===String(t).toLowerCase()}e.exports=function(e,t){if(a("noDeprecation"))return e;var n=!1;return function(){if(!n){if(a("throwDeprecation"))throw new Error(t);a("traceDeprecation")?console.trace(t):console.warn(t),n=!0}return e.apply(this,arguments)}}},8746:function(e){"function"==typeof Object.create?e.exports=function(e,t){e.super_=t,e.prototype=Object.create(t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}})}:e.exports=function(e,t){e.super_=t;var n=function(){};n.prototype=t.prototype,e.prototype=new n,e.prototype.constructor=e}},56579:function(e){e.exports=function(e){return e&&"object"==typeof e&&"function"==typeof e.copy&&"function"==typeof e.fill&&"function"==typeof e.readUInt8}},71323:function(e,t,n){var a=n(27061),r=/%[sdj%]/g;t.format=function(e){if(!R(e)){for(var t=[],n=0;n<arguments.length;n++)t.push(d(arguments[n]));return t.join(" ")}n=1;for(var a=arguments,i=a.length,o=String(e).replace(r,(function(e){if("%%"===e)return"%";if(n>=i)return e;switch(e){case"%s":return String(a[n++]);case"%d":return Number(a[n++]);case"%j":try{return JSON.stringify(a[n++])}catch(t){return"[Circular]"}default:return e}})),s=a[n];n<i;s=a[++n])p(s)||!v(s)?o+=" "+s:o+=" "+d(s);return o},t.deprecate=function(e,r){if(b(n.g.process))return function(){return t.deprecate(e,r).apply(this,arguments)};if(!0===a.noDeprecation)return e;var i=!1;return function(){if(!i){if(a.throwDeprecation)throw new Error(r);a.traceDeprecation?console.trace(r):console.error(r),i=!0}return e.apply(this,arguments)}};var i,o={};function d(e,n){var a={seen:[],stylize:c};return arguments.length>=3&&(a.depth=arguments[2]),arguments.length>=4&&(a.colors=arguments[3]),f(n)?a.showHidden=n:n&&t._extend(a,n),b(a.showHidden)&&(a.showHidden=!1),b(a.depth)&&(a.depth=2),b(a.colors)&&(a.colors=!1),b(a.customInspect)&&(a.customInspect=!0),a.colors&&(a.stylize=s),u(a,e,a.depth)}function s(e,t){var n=d.styles[t];return n?"["+d.colors[n][0]+"m"+e+"["+d.colors[n][1]+"m":e}function c(e,t){return e}function u(e,n,a){if(e.customInspect&&n&&M(n.inspect)&&n.inspect!==t.inspect&&(!n.constructor||n.constructor.prototype!==n)){var r=n.inspect(a,e);return R(r)||(r=u(e,r,a)),r}var i=function(e,t){if(b(t))return e.stylize("undefined","undefined");if(R(t)){var n="'"+JSON.stringify(t).replace(/^"|"$/g,"").replace(/'/g,"\\'").replace(/\\"/g,'"')+"'";return e.stylize(n,"string")}if(m(t))return e.stylize(""+t,"number");if(f(t))return e.stylize(""+t,"boolean");if(p(t))return e.stylize("null","null")}(e,n);if(i)return i;var o=Object.keys(n),d=function(e){var t={};return e.forEach((function(e,n){t[e]=!0})),t}(o);if(e.showHidden&&(o=Object.getOwnPropertyNames(n)),w(n)&&(o.indexOf("message")>=0||o.indexOf("description")>=0))return l(n);if(0===o.length){if(M(n)){var s=n.name?": "+n.name:"";return e.stylize("[Function"+s+"]","special")}if(y(n))return e.stylize(RegExp.prototype.toString.call(n),"regexp");if(_(n))return e.stylize(Date.prototype.toString.call(n),"date");if(w(n))return l(n)}var c,v="",x=!1,E=["{","}"];(h(n)&&(x=!0,E=["[","]"]),M(n))&&(v=" [Function"+(n.name?": "+n.name:"")+"]");return y(n)&&(v=" "+RegExp.prototype.toString.call(n)),_(n)&&(v=" "+Date.prototype.toUTCString.call(n)),w(n)&&(v=" "+l(n)),0!==o.length||x&&0!=n.length?a<0?y(n)?e.stylize(RegExp.prototype.toString.call(n),"regexp"):e.stylize("[Object]","special"):(e.seen.push(n),c=x?function(e,t,n,a,r){for(var i=[],o=0,d=t.length;o<d;++o)k(t,String(o))?i.push(g(e,t,n,a,String(o),!0)):i.push("");return r.forEach((function(r){r.match(/^\d+$/)||i.push(g(e,t,n,a,r,!0))})),i}(e,n,a,d,o):o.map((function(t){return g(e,n,a,d,t,x)})),e.seen.pop(),function(e,t,n){var a=e.reduce((function(e,t){return t.indexOf("\n")>=0&&0,e+t.replace(/\u001b\[\d\d?m/g,"").length+1}),0);if(a>60)return n[0]+(""===t?"":t+"\n ")+" "+e.join(",\n  ")+" "+n[1];return n[0]+t+" "+e.join(", ")+" "+n[1]}(c,v,E)):E[0]+v+E[1]}function l(e){return"["+Error.prototype.toString.call(e)+"]"}function g(e,t,n,a,r,i){var o,d,s;if((s=Object.getOwnPropertyDescriptor(t,r)||{value:t[r]}).get?d=s.set?e.stylize("[Getter/Setter]","special"):e.stylize("[Getter]","special"):s.set&&(d=e.stylize("[Setter]","special")),k(a,r)||(o="["+r+"]"),d||(e.seen.indexOf(s.value)<0?(d=p(n)?u(e,s.value,null):u(e,s.value,n-1)).indexOf("\n")>-1&&(d=i?d.split("\n").map((function(e){return"  "+e})).join("\n").substr(2):"\n"+d.split("\n").map((function(e){return"   "+e})).join("\n")):d=e.stylize("[Circular]","special")),b(o)){if(i&&r.match(/^\d+$/))return d;(o=JSON.stringify(""+r)).match(/^"([a-zA-Z_][a-zA-Z_0-9]*)"$/)?(o=o.substr(1,o.length-2),o=e.stylize(o,"name")):(o=o.replace(/'/g,"\\'").replace(/\\"/g,'"').replace(/(^"|"$)/g,"'"),o=e.stylize(o,"string"))}return o+": "+d}function h(e){return Array.isArray(e)}function f(e){return"boolean"==typeof e}function p(e){return null===e}function m(e){return"number"==typeof e}function R(e){return"string"==typeof e}function b(e){return void 0===e}function y(e){return v(e)&&"[object RegExp]"===x(e)}function v(e){return"object"==typeof e&&null!==e}function _(e){return v(e)&&"[object Date]"===x(e)}function w(e){return v(e)&&("[object Error]"===x(e)||e instanceof Error)}function M(e){return"function"==typeof e}function x(e){return Object.prototype.toString.call(e)}function E(e){return e<10?"0"+e.toString(10):e.toString(10)}t.debuglog=function(e){if(b(i)&&(i={}.NODE_DEBUG||""),e=e.toUpperCase(),!o[e])if(new RegExp("\\b"+e+"\\b","i").test(i)){var n=a.pid;o[e]=function(){var a=t.format.apply(t,arguments);console.error("%s %d: %s",e,n,a)}}else o[e]=function(){};return o[e]},t.inspect=d,d.colors={bold:[1,22],italic:[3,23],underline:[4,24],inverse:[7,27],white:[37,39],grey:[90,39],black:[30,39],blue:[34,39],cyan:[36,39],green:[32,39],magenta:[35,39],red:[31,39],yellow:[33,39]},d.styles={special:"cyan",number:"yellow",boolean:"yellow",undefined:"grey",null:"bold",string:"green",date:"magenta",regexp:"red"},t.isArray=h,t.isBoolean=f,t.isNull=p,t.isNullOrUndefined=function(e){return null==e},t.isNumber=m,t.isString=R,t.isSymbol=function(e){return"symbol"==typeof e},t.isUndefined=b,t.isRegExp=y,t.isObject=v,t.isDate=_,t.isError=w,t.isFunction=M,t.isPrimitive=function(e){return null===e||"boolean"==typeof e||"number"==typeof e||"string"==typeof e||"symbol"==typeof e||void 0===e},t.isBuffer=n(56579);var S=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];function k(e,t){return Object.prototype.hasOwnProperty.call(e,t)}t.log=function(){var e,n;console.log("%s - %s",(e=new Date,n=[E(e.getHours()),E(e.getMinutes()),E(e.getSeconds())].join(":"),[e.getDate(),S[e.getMonth()],n].join(" ")),t.format.apply(t,arguments))},t.inherits=n(8746),t._extend=function(e,t){if(!t||!v(t))return e;for(var n=Object.keys(t),a=n.length;a--;)e[n[a]]=t[n[a]];return e}},99976:function(e){"use strict";e.exports=function(e){e.prototype[Symbol.iterator]=function*(){for(let e=this.head;e;e=e.next)yield e.value}}},7372:function(e,t,n){"use strict";function a(e){var t=this;if(t instanceof a||(t=new a),t.tail=null,t.head=null,t.length=0,e&&"function"==typeof e.forEach)e.forEach((function(e){t.push(e)}));else if(arguments.length>0)for(var n=0,r=arguments.length;n<r;n++)t.push(arguments[n]);return t}function r(e,t,n){var a=t===e.head?new d(n,null,t,e):new d(n,t,t.next,e);return null===a.next&&(e.tail=a),null===a.prev&&(e.head=a),e.length++,a}function i(e,t){e.tail=new d(t,e.tail,null,e),e.head||(e.head=e.tail),e.length++}function o(e,t){e.head=new d(t,null,e.head,e),e.tail||(e.tail=e.head),e.length++}function d(e,t,n,a){if(!(this instanceof d))return new d(e,t,n,a);this.list=a,this.value=e,t?(t.next=this,this.prev=t):this.prev=null,n?(n.prev=this,this.next=n):this.next=null}e.exports=a,a.Node=d,a.create=a,a.prototype.removeNode=function(e){if(e.list!==this)throw new Error("removing node which does not belong to this list");var t=e.next,n=e.prev;return t&&(t.prev=n),n&&(n.next=t),e===this.head&&(this.head=t),e===this.tail&&(this.tail=n),e.list.length--,e.next=null,e.prev=null,e.list=null,t},a.prototype.unshiftNode=function(e){if(e!==this.head){e.list&&e.list.removeNode(e);var t=this.head;e.list=this,e.next=t,t&&(t.prev=e),this.head=e,this.tail||(this.tail=e),this.length++}},a.prototype.pushNode=function(e){if(e!==this.tail){e.list&&e.list.removeNode(e);var t=this.tail;e.list=this,e.prev=t,t&&(t.next=e),this.tail=e,this.head||(this.head=e),this.length++}},a.prototype.push=function(){for(var e=0,t=arguments.length;e<t;e++)i(this,arguments[e]);return this.length},a.prototype.unshift=function(){for(var e=0,t=arguments.length;e<t;e++)o(this,arguments[e]);return this.length},a.prototype.pop=function(){if(this.tail){var e=this.tail.value;return this.tail=this.tail.prev,this.tail?this.tail.next=null:this.head=null,this.length--,e}},a.prototype.shift=function(){if(this.head){var e=this.head.value;return this.head=this.head.next,this.head?this.head.prev=null:this.tail=null,this.length--,e}},a.prototype.forEach=function(e,t){t=t||this;for(var n=this.head,a=0;null!==n;a++)e.call(t,n.value,a,this),n=n.next},a.prototype.forEachReverse=function(e,t){t=t||this;for(var n=this.tail,a=this.length-1;null!==n;a--)e.call(t,n.value,a,this),n=n.prev},a.prototype.get=function(e){for(var t=0,n=this.head;null!==n&&t<e;t++)n=n.next;if(t===e&&null!==n)return n.value},a.prototype.getReverse=function(e){for(var t=0,n=this.tail;null!==n&&t<e;t++)n=n.prev;if(t===e&&null!==n)return n.value},a.prototype.map=function(e,t){t=t||this;for(var n=new a,r=this.head;null!==r;)n.push(e.call(t,r.value,this)),r=r.next;return n},a.prototype.mapReverse=function(e,t){t=t||this;for(var n=new a,r=this.tail;null!==r;)n.push(e.call(t,r.value,this)),r=r.prev;return n},a.prototype.reduce=function(e,t){var n,a=this.head;if(arguments.length>1)n=t;else{if(!this.head)throw new TypeError("Reduce of empty list with no initial value");a=this.head.next,n=this.head.value}for(var r=0;null!==a;r++)n=e(n,a.value,r),a=a.next;return n},a.prototype.reduceReverse=function(e,t){var n,a=this.tail;if(arguments.length>1)n=t;else{if(!this.tail)throw new TypeError("Reduce of empty list with no initial value");a=this.tail.prev,n=this.tail.value}for(var r=this.length-1;null!==a;r--)n=e(n,a.value,r),a=a.prev;return n},a.prototype.toArray=function(){for(var e=new Array(this.length),t=0,n=this.head;null!==n;t++)e[t]=n.value,n=n.next;return e},a.prototype.toArrayReverse=function(){for(var e=new Array(this.length),t=0,n=this.tail;null!==n;t++)e[t]=n.value,n=n.prev;return e},a.prototype.slice=function(e,t){(t=t||this.length)<0&&(t+=this.length),(e=e||0)<0&&(e+=this.length);var n=new a;if(t<e||t<0)return n;e<0&&(e=0),t>this.length&&(t=this.length);for(var r=0,i=this.head;null!==i&&r<e;r++)i=i.next;for(;null!==i&&r<t;r++,i=i.next)n.push(i.value);return n},a.prototype.sliceReverse=function(e,t){(t=t||this.length)<0&&(t+=this.length),(e=e||0)<0&&(e+=this.length);var n=new a;if(t<e||t<0)return n;e<0&&(e=0),t>this.length&&(t=this.length);for(var r=this.length,i=this.tail;null!==i&&r>t;r--)i=i.prev;for(;null!==i&&r>e;r--,i=i.prev)n.push(i.value);return n},a.prototype.splice=function(e,t,...n){e>this.length&&(e=this.length-1),e<0&&(e=this.length+e);for(var a=0,i=this.head;null!==i&&a<e;a++)i=i.next;var o=[];for(a=0;i&&a<t;a++)o.push(i.value),i=this.removeNode(i);null===i&&(i=this.tail),i!==this.head&&i!==this.tail&&(i=i.prev);for(a=0;a<n.length;a++)i=r(this,i,n[a]);return o},a.prototype.reverse=function(){for(var e=this.head,t=this.tail,n=e;null!==n;n=n.prev){var a=n.prev;n.prev=n.next,n.next=a}return this.head=t,this.tail=e,this};try{n(99976)(a)}catch(s){}},46458:function(e,t,n){"use strict";n.d(t,{D:function(){return _e}});var a=n(67294);function r(e){if(null==e)return window;if("[object Window]"!==e.toString()){var t=e.ownerDocument;return t&&t.defaultView||window}return e}function i(e){return e instanceof r(e).Element||e instanceof Element}function o(e){return e instanceof r(e).HTMLElement||e instanceof HTMLElement}function d(e){return"undefined"!=typeof ShadowRoot&&(e instanceof r(e).ShadowRoot||e instanceof ShadowRoot)}var s=Math.max,c=Math.min,u=Math.round;function l(e,t){void 0===t&&(t=!1);var n=e.getBoundingClientRect(),a=1,r=1;if(o(e)&&t){var i=e.offsetHeight,d=e.offsetWidth;d>0&&(a=u(n.width)/d||1),i>0&&(r=u(n.height)/i||1)}return{width:n.width/a,height:n.height/r,top:n.top/r,right:n.right/a,bottom:n.bottom/r,left:n.left/a,x:n.left/a,y:n.top/r}}function g(e){var t=r(e);return{scrollLeft:t.pageXOffset,scrollTop:t.pageYOffset}}function h(e){return e?(e.nodeName||"").toLowerCase():null}function f(e){return((i(e)?e.ownerDocument:e.document)||window.document).documentElement}function p(e){return l(f(e)).left+g(e).scrollLeft}function m(e){return r(e).getComputedStyle(e)}function R(e){var t=m(e),n=t.overflow,a=t.overflowX,r=t.overflowY;return/auto|scroll|overlay|hidden/.test(n+r+a)}function b(e,t,n){void 0===n&&(n=!1);var a,i,d=o(t),s=o(t)&&function(e){var t=e.getBoundingClientRect(),n=u(t.width)/e.offsetWidth||1,a=u(t.height)/e.offsetHeight||1;return 1!==n||1!==a}(t),c=f(t),m=l(e,s),b={scrollLeft:0,scrollTop:0},y={x:0,y:0};return(d||!d&&!n)&&(("body"!==h(t)||R(c))&&(b=(a=t)!==r(a)&&o(a)?{scrollLeft:(i=a).scrollLeft,scrollTop:i.scrollTop}:g(a)),o(t)?((y=l(t,!0)).x+=t.clientLeft,y.y+=t.clientTop):c&&(y.x=p(c))),{x:m.left+b.scrollLeft-y.x,y:m.top+b.scrollTop-y.y,width:m.width,height:m.height}}function y(e){var t=l(e),n=e.offsetWidth,a=e.offsetHeight;return Math.abs(t.width-n)<=1&&(n=t.width),Math.abs(t.height-a)<=1&&(a=t.height),{x:e.offsetLeft,y:e.offsetTop,width:n,height:a}}function v(e){return"html"===h(e)?e:e.assignedSlot||e.parentNode||(d(e)?e.host:null)||f(e)}function _(e){return["html","body","#document"].indexOf(h(e))>=0?e.ownerDocument.body:o(e)&&R(e)?e:_(v(e))}function w(e,t){var n;void 0===t&&(t=[]);var a=_(e),i=a===(null==(n=e.ownerDocument)?void 0:n.body),o=r(a),d=i?[o].concat(o.visualViewport||[],R(a)?a:[]):a,s=t.concat(d);return i?s:s.concat(w(v(d)))}function M(e){return["table","td","th"].indexOf(h(e))>=0}function x(e){return o(e)&&"fixed"!==m(e).position?e.offsetParent:null}function E(e){for(var t=r(e),n=x(e);n&&M(n)&&"static"===m(n).position;)n=x(n);return n&&("html"===h(n)||"body"===h(n)&&"static"===m(n).position)?t:n||function(e){var t=-1!==navigator.userAgent.toLowerCase().indexOf("firefox");if(-1!==navigator.userAgent.indexOf("Trident")&&o(e)&&"fixed"===m(e).position)return null;var n=v(e);for(d(n)&&(n=n.host);o(n)&&["html","body"].indexOf(h(n))<0;){var a=m(n);if("none"!==a.transform||"none"!==a.perspective||"paint"===a.contain||-1!==["transform","perspective"].indexOf(a.willChange)||t&&"filter"===a.willChange||t&&a.filter&&"none"!==a.filter)return n;n=n.parentNode}return null}(e)||t}var S="top",k="bottom",N="right",D="left",A="auto",j=[S,k,N,D],T="start",L="end",I="clippingParents",C="viewport",O="popper",P="reference",z=j.reduce((function(e,t){return e.concat([t+"-"+T,t+"-"+L])}),[]),B=[].concat(j,[A]).reduce((function(e,t){return e.concat([t,t+"-"+T,t+"-"+L])}),[]),F=["beforeRead","read","afterRead","beforeMain","main","afterMain","beforeWrite","write","afterWrite"];function U(e){var t=new Map,n=new Set,a=[];function r(e){n.add(e.name),[].concat(e.requires||[],e.requiresIfExists||[]).forEach((function(e){if(!n.has(e)){var a=t.get(e);a&&r(a)}})),a.push(e)}return e.forEach((function(e){t.set(e.name,e)})),e.forEach((function(e){n.has(e.name)||r(e)})),a}var $={placement:"bottom",modifiers:[],strategy:"absolute"};function H(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return!t.some((function(e){return!(e&&"function"==typeof e.getBoundingClientRect)}))}function q(e){void 0===e&&(e={});var t=e,n=t.defaultModifiers,a=void 0===n?[]:n,r=t.defaultOptions,o=void 0===r?$:r;return function(e,t,n){void 0===n&&(n=o);var r,d,s={placement:"bottom",orderedModifiers:[],options:Object.assign({},$,o),modifiersData:{},elements:{reference:e,popper:t},attributes:{},styles:{}},c=[],u=!1,l={state:s,setOptions:function(n){var r="function"==typeof n?n(s.options):n;g(),s.options=Object.assign({},o,s.options,r),s.scrollParents={reference:i(e)?w(e):e.contextElement?w(e.contextElement):[],popper:w(t)};var d=function(e){var t=U(e);return F.reduce((function(e,n){return e.concat(t.filter((function(e){return e.phase===n})))}),[])}(function(e){var t=e.reduce((function(e,t){var n=e[t.name];return e[t.name]=n?Object.assign({},n,t,{options:Object.assign({},n.options,t.options),data:Object.assign({},n.data,t.data)}):t,e}),{});return Object.keys(t).map((function(e){return t[e]}))}([].concat(a,s.options.modifiers)));return s.orderedModifiers=d.filter((function(e){return e.enabled})),s.orderedModifiers.forEach((function(e){var t=e.name,n=e.options,a=void 0===n?{}:n,r=e.effect;if("function"==typeof r){var i=r({state:s,name:t,instance:l,options:a}),o=function(){};c.push(i||o)}})),l.update()},forceUpdate:function(){if(!u){var e=s.elements,t=e.reference,n=e.popper;if(H(t,n)){s.rects={reference:b(t,E(n),"fixed"===s.options.strategy),popper:y(n)},s.reset=!1,s.placement=s.options.placement,s.orderedModifiers.forEach((function(e){return s.modifiersData[e.name]=Object.assign({},e.data)}));for(var a=0;a<s.orderedModifiers.length;a++)if(!0!==s.reset){var r=s.orderedModifiers[a],i=r.fn,o=r.options,d=void 0===o?{}:o,c=r.name;"function"==typeof i&&(s=i({state:s,options:d,name:c,instance:l})||s)}else s.reset=!1,a=-1}}},update:(r=function(){return new Promise((function(e){l.forceUpdate(),e(s)}))},function(){return d||(d=new Promise((function(e){Promise.resolve().then((function(){d=void 0,e(r())}))}))),d}),destroy:function(){g(),u=!0}};if(!H(e,t))return l;function g(){c.forEach((function(e){return e()})),c=[]}return l.setOptions(n).then((function(e){!u&&n.onFirstUpdate&&n.onFirstUpdate(e)})),l}}var Y={passive:!0};function G(e){return e.split("-")[0]}function V(e){return e.split("-")[1]}function Q(e){return["top","bottom"].indexOf(e)>=0?"x":"y"}function W(e){var t,n=e.reference,a=e.element,r=e.placement,i=r?G(r):null,o=r?V(r):null,d=n.x+n.width/2-a.width/2,s=n.y+n.height/2-a.height/2;switch(i){case S:t={x:d,y:n.y-a.height};break;case k:t={x:d,y:n.y+n.height};break;case N:t={x:n.x+n.width,y:s};break;case D:t={x:n.x-a.width,y:s};break;default:t={x:n.x,y:n.y}}var c=i?Q(i):null;if(null!=c){var u="y"===c?"height":"width";switch(o){case T:t[c]=t[c]-(n[u]/2-a[u]/2);break;case L:t[c]=t[c]+(n[u]/2-a[u]/2)}}return t}var K={top:"auto",right:"auto",bottom:"auto",left:"auto"};function Z(e){var t,n=e.popper,a=e.popperRect,i=e.placement,o=e.variation,d=e.offsets,s=e.position,c=e.gpuAcceleration,l=e.adaptive,g=e.roundOffsets,h=e.isFixed,p=d.x,R=void 0===p?0:p,b=d.y,y=void 0===b?0:b,v="function"==typeof g?g({x:R,y:y}):{x:R,y:y};R=v.x,y=v.y;var _=d.hasOwnProperty("x"),w=d.hasOwnProperty("y"),M=D,x=S,A=window;if(l){var j=E(n),T="clientHeight",I="clientWidth";if(j===r(n)&&"static"!==m(j=f(n)).position&&"absolute"===s&&(T="scrollHeight",I="scrollWidth"),i===S||(i===D||i===N)&&o===L)x=k,y-=(h&&j===A&&A.visualViewport?A.visualViewport.height:j[T])-a.height,y*=c?1:-1;if(i===D||(i===S||i===k)&&o===L)M=N,R-=(h&&j===A&&A.visualViewport?A.visualViewport.width:j[I])-a.width,R*=c?1:-1}var C,O=Object.assign({position:s},l&&K),P=!0===g?function(e){var t=e.x,n=e.y,a=window.devicePixelRatio||1;return{x:u(t*a)/a||0,y:u(n*a)/a||0}}({x:R,y:y}):{x:R,y:y};return R=P.x,y=P.y,c?Object.assign({},O,((C={})[x]=w?"0":"",C[M]=_?"0":"",C.transform=(A.devicePixelRatio||1)<=1?"translate("+R+"px, "+y+"px)":"translate3d("+R+"px, "+y+"px, 0)",C)):Object.assign({},O,((t={})[x]=w?y+"px":"",t[M]=_?R+"px":"",t.transform="",t))}var X={name:"offset",enabled:!0,phase:"main",requires:["popperOffsets"],fn:function(e){var t=e.state,n=e.options,a=e.name,r=n.offset,i=void 0===r?[0,0]:r,o=B.reduce((function(e,n){return e[n]=function(e,t,n){var a=G(e),r=[D,S].indexOf(a)>=0?-1:1,i="function"==typeof n?n(Object.assign({},t,{placement:e})):n,o=i[0],d=i[1];return o=o||0,d=(d||0)*r,[D,N].indexOf(a)>=0?{x:d,y:o}:{x:o,y:d}}(n,t.rects,i),e}),{}),d=o[t.placement],s=d.x,c=d.y;null!=t.modifiersData.popperOffsets&&(t.modifiersData.popperOffsets.x+=s,t.modifiersData.popperOffsets.y+=c),t.modifiersData[a]=o}},J={left:"right",right:"left",bottom:"top",top:"bottom"};function ee(e){return e.replace(/left|right|bottom|top/g,(function(e){return J[e]}))}var te={start:"end",end:"start"};function ne(e){return e.replace(/start|end/g,(function(e){return te[e]}))}function ae(e,t){var n=t.getRootNode&&t.getRootNode();if(e.contains(t))return!0;if(n&&d(n)){var a=t;do{if(a&&e.isSameNode(a))return!0;a=a.parentNode||a.host}while(a)}return!1}function re(e){return Object.assign({},e,{left:e.x,top:e.y,right:e.x+e.width,bottom:e.y+e.height})}function ie(e,t){return t===C?re(function(e){var t=r(e),n=f(e),a=t.visualViewport,i=n.clientWidth,o=n.clientHeight,d=0,s=0;return a&&(i=a.width,o=a.height,/^((?!chrome|android).)*safari/i.test(navigator.userAgent)||(d=a.offsetLeft,s=a.offsetTop)),{width:i,height:o,x:d+p(e),y:s}}(e)):i(t)?function(e){var t=l(e);return t.top=t.top+e.clientTop,t.left=t.left+e.clientLeft,t.bottom=t.top+e.clientHeight,t.right=t.left+e.clientWidth,t.width=e.clientWidth,t.height=e.clientHeight,t.x=t.left,t.y=t.top,t}(t):re(function(e){var t,n=f(e),a=g(e),r=null==(t=e.ownerDocument)?void 0:t.body,i=s(n.scrollWidth,n.clientWidth,r?r.scrollWidth:0,r?r.clientWidth:0),o=s(n.scrollHeight,n.clientHeight,r?r.scrollHeight:0,r?r.clientHeight:0),d=-a.scrollLeft+p(e),c=-a.scrollTop;return"rtl"===m(r||n).direction&&(d+=s(n.clientWidth,r?r.clientWidth:0)-i),{width:i,height:o,x:d,y:c}}(f(e)))}function oe(e,t,n){var a="clippingParents"===t?function(e){var t=w(v(e)),n=["absolute","fixed"].indexOf(m(e).position)>=0&&o(e)?E(e):e;return i(n)?t.filter((function(e){return i(e)&&ae(e,n)&&"body"!==h(e)})):[]}(e):[].concat(t),r=[].concat(a,[n]),d=r[0],u=r.reduce((function(t,n){var a=ie(e,n);return t.top=s(a.top,t.top),t.right=c(a.right,t.right),t.bottom=c(a.bottom,t.bottom),t.left=s(a.left,t.left),t}),ie(e,d));return u.width=u.right-u.left,u.height=u.bottom-u.top,u.x=u.left,u.y=u.top,u}function de(e){return Object.assign({},{top:0,right:0,bottom:0,left:0},e)}function se(e,t){return t.reduce((function(t,n){return t[n]=e,t}),{})}function ce(e,t){void 0===t&&(t={});var n=t,a=n.placement,r=void 0===a?e.placement:a,o=n.boundary,d=void 0===o?I:o,s=n.rootBoundary,c=void 0===s?C:s,u=n.elementContext,g=void 0===u?O:u,h=n.altBoundary,p=void 0!==h&&h,m=n.padding,R=void 0===m?0:m,b=de("number"!=typeof R?R:se(R,j)),y=g===O?P:O,v=e.rects.popper,_=e.elements[p?y:g],w=oe(i(_)?_:_.contextElement||f(e.elements.popper),d,c),M=l(e.elements.reference),x=W({reference:M,element:v,strategy:"absolute",placement:r}),E=re(Object.assign({},v,x)),D=g===O?E:M,A={top:w.top-D.top+b.top,bottom:D.bottom-w.bottom+b.bottom,left:w.left-D.left+b.left,right:D.right-w.right+b.right},T=e.modifiersData.offset;if(g===O&&T){var L=T[r];Object.keys(A).forEach((function(e){var t=[N,k].indexOf(e)>=0?1:-1,n=[S,k].indexOf(e)>=0?"y":"x";A[e]+=L[n]*t}))}return A}function ue(e,t,n){return s(e,c(t,n))}var le={name:"preventOverflow",enabled:!0,phase:"main",fn:function(e){var t=e.state,n=e.options,a=e.name,r=n.mainAxis,i=void 0===r||r,o=n.altAxis,d=void 0!==o&&o,u=n.boundary,l=n.rootBoundary,g=n.altBoundary,h=n.padding,f=n.tether,p=void 0===f||f,m=n.tetherOffset,R=void 0===m?0:m,b=ce(t,{boundary:u,rootBoundary:l,padding:h,altBoundary:g}),v=G(t.placement),_=V(t.placement),w=!_,M=Q(v),x="x"===M?"y":"x",A=t.modifiersData.popperOffsets,j=t.rects.reference,L=t.rects.popper,I="function"==typeof R?R(Object.assign({},t.rects,{placement:t.placement})):R,C="number"==typeof I?{mainAxis:I,altAxis:I}:Object.assign({mainAxis:0,altAxis:0},I),O=t.modifiersData.offset?t.modifiersData.offset[t.placement]:null,P={x:0,y:0};if(A){if(i){var z,B="y"===M?S:D,F="y"===M?k:N,U="y"===M?"height":"width",$=A[M],H=$+b[B],q=$-b[F],Y=p?-L[U]/2:0,W=_===T?j[U]:L[U],K=_===T?-L[U]:-j[U],Z=t.elements.arrow,X=p&&Z?y(Z):{width:0,height:0},J=t.modifiersData["arrow#persistent"]?t.modifiersData["arrow#persistent"].padding:{top:0,right:0,bottom:0,left:0},ee=J[B],te=J[F],ne=ue(0,j[U],X[U]),ae=w?j[U]/2-Y-ne-ee-C.mainAxis:W-ne-ee-C.mainAxis,re=w?-j[U]/2+Y+ne+te+C.mainAxis:K+ne+te+C.mainAxis,ie=t.elements.arrow&&E(t.elements.arrow),oe=ie?"y"===M?ie.clientTop||0:ie.clientLeft||0:0,de=null!=(z=null==O?void 0:O[M])?z:0,se=$+re-de,le=ue(p?c(H,$+ae-de-oe):H,$,p?s(q,se):q);A[M]=le,P[M]=le-$}if(d){var ge,he="x"===M?S:D,fe="x"===M?k:N,pe=A[x],me="y"===x?"height":"width",Re=pe+b[he],be=pe-b[fe],ye=-1!==[S,D].indexOf(v),ve=null!=(ge=null==O?void 0:O[x])?ge:0,_e=ye?Re:pe-j[me]-L[me]-ve+C.altAxis,we=ye?pe+j[me]+L[me]-ve-C.altAxis:be,Me=p&&ye?function(e,t,n){var a=ue(e,t,n);return a>n?n:a}(_e,pe,we):ue(p?_e:Re,pe,p?we:be);A[x]=Me,P[x]=Me-pe}t.modifiersData[a]=P}},requiresIfExists:["offset"]};var ge={name:"arrow",enabled:!0,phase:"main",fn:function(e){var t,n=e.state,a=e.name,r=e.options,i=n.elements.arrow,o=n.modifiersData.popperOffsets,d=G(n.placement),s=Q(d),c=[D,N].indexOf(d)>=0?"height":"width";if(i&&o){var u=function(e,t){return de("number"!=typeof(e="function"==typeof e?e(Object.assign({},t.rects,{placement:t.placement})):e)?e:se(e,j))}(r.padding,n),l=y(i),g="y"===s?S:D,h="y"===s?k:N,f=n.rects.reference[c]+n.rects.reference[s]-o[s]-n.rects.popper[c],p=o[s]-n.rects.reference[s],m=E(i),R=m?"y"===s?m.clientHeight||0:m.clientWidth||0:0,b=f/2-p/2,v=u[g],_=R-l[c]-u[h],w=R/2-l[c]/2+b,M=ue(v,w,_),x=s;n.modifiersData[a]=((t={})[x]=M,t.centerOffset=M-w,t)}},effect:function(e){var t=e.state,n=e.options.element,a=void 0===n?"[data-popper-arrow]":n;null!=a&&("string"!=typeof a||(a=t.elements.popper.querySelector(a)))&&ae(t.elements.popper,a)&&(t.elements.arrow=a)},requires:["popperOffsets"],requiresIfExists:["preventOverflow"]};function he(e,t,n){return void 0===n&&(n={x:0,y:0}),{top:e.top-t.height-n.y,right:e.right-t.width+n.x,bottom:e.bottom-t.height+n.y,left:e.left-t.width-n.x}}function fe(e){return[S,N,k,D].some((function(t){return e[t]>=0}))}var pe=q({defaultModifiers:[{name:"eventListeners",enabled:!0,phase:"write",fn:function(){},effect:function(e){var t=e.state,n=e.instance,a=e.options,i=a.scroll,o=void 0===i||i,d=a.resize,s=void 0===d||d,c=r(t.elements.popper),u=[].concat(t.scrollParents.reference,t.scrollParents.popper);return o&&u.forEach((function(e){e.addEventListener("scroll",n.update,Y)})),s&&c.addEventListener("resize",n.update,Y),function(){o&&u.forEach((function(e){e.removeEventListener("scroll",n.update,Y)})),s&&c.removeEventListener("resize",n.update,Y)}},data:{}},{name:"popperOffsets",enabled:!0,phase:"read",fn:function(e){var t=e.state,n=e.name;t.modifiersData[n]=W({reference:t.rects.reference,element:t.rects.popper,strategy:"absolute",placement:t.placement})},data:{}},{name:"computeStyles",enabled:!0,phase:"beforeWrite",fn:function(e){var t=e.state,n=e.options,a=n.gpuAcceleration,r=void 0===a||a,i=n.adaptive,o=void 0===i||i,d=n.roundOffsets,s=void 0===d||d,c={placement:G(t.placement),variation:V(t.placement),popper:t.elements.popper,popperRect:t.rects.popper,gpuAcceleration:r,isFixed:"fixed"===t.options.strategy};null!=t.modifiersData.popperOffsets&&(t.styles.popper=Object.assign({},t.styles.popper,Z(Object.assign({},c,{offsets:t.modifiersData.popperOffsets,position:t.options.strategy,adaptive:o,roundOffsets:s})))),null!=t.modifiersData.arrow&&(t.styles.arrow=Object.assign({},t.styles.arrow,Z(Object.assign({},c,{offsets:t.modifiersData.arrow,position:"absolute",adaptive:!1,roundOffsets:s})))),t.attributes.popper=Object.assign({},t.attributes.popper,{"data-popper-placement":t.placement})},data:{}},{name:"applyStyles",enabled:!0,phase:"write",fn:function(e){var t=e.state;Object.keys(t.elements).forEach((function(e){var n=t.styles[e]||{},a=t.attributes[e]||{},r=t.elements[e];o(r)&&h(r)&&(Object.assign(r.style,n),Object.keys(a).forEach((function(e){var t=a[e];!1===t?r.removeAttribute(e):r.setAttribute(e,!0===t?"":t)})))}))},effect:function(e){var t=e.state,n={popper:{position:t.options.strategy,left:"0",top:"0",margin:"0"},arrow:{position:"absolute"},reference:{}};return Object.assign(t.elements.popper.style,n.popper),t.styles=n,t.elements.arrow&&Object.assign(t.elements.arrow.style,n.arrow),function(){Object.keys(t.elements).forEach((function(e){var a=t.elements[e],r=t.attributes[e]||{},i=Object.keys(t.styles.hasOwnProperty(e)?t.styles[e]:n[e]).reduce((function(e,t){return e[t]="",e}),{});o(a)&&h(a)&&(Object.assign(a.style,i),Object.keys(r).forEach((function(e){a.removeAttribute(e)})))}))}},requires:["computeStyles"]},X,{name:"flip",enabled:!0,phase:"main",fn:function(e){var t=e.state,n=e.options,a=e.name;if(!t.modifiersData[a]._skip){for(var r=n.mainAxis,i=void 0===r||r,o=n.altAxis,d=void 0===o||o,s=n.fallbackPlacements,c=n.padding,u=n.boundary,l=n.rootBoundary,g=n.altBoundary,h=n.flipVariations,f=void 0===h||h,p=n.allowedAutoPlacements,m=t.options.placement,R=G(m),b=s||(R===m||!f?[ee(m)]:function(e){if(G(e)===A)return[];var t=ee(e);return[ne(e),t,ne(t)]}(m)),y=[m].concat(b).reduce((function(e,n){return e.concat(G(n)===A?function(e,t){void 0===t&&(t={});var n=t,a=n.placement,r=n.boundary,i=n.rootBoundary,o=n.padding,d=n.flipVariations,s=n.allowedAutoPlacements,c=void 0===s?B:s,u=V(a),l=u?d?z:z.filter((function(e){return V(e)===u})):j,g=l.filter((function(e){return c.indexOf(e)>=0}));0===g.length&&(g=l);var h=g.reduce((function(t,n){return t[n]=ce(e,{placement:n,boundary:r,rootBoundary:i,padding:o})[G(n)],t}),{});return Object.keys(h).sort((function(e,t){return h[e]-h[t]}))}(t,{placement:n,boundary:u,rootBoundary:l,padding:c,flipVariations:f,allowedAutoPlacements:p}):n)}),[]),v=t.rects.reference,_=t.rects.popper,w=new Map,M=!0,x=y[0],E=0;E<y.length;E++){var L=y[E],I=G(L),C=V(L)===T,O=[S,k].indexOf(I)>=0,P=O?"width":"height",F=ce(t,{placement:L,boundary:u,rootBoundary:l,altBoundary:g,padding:c}),U=O?C?N:D:C?k:S;v[P]>_[P]&&(U=ee(U));var $=ee(U),H=[];if(i&&H.push(F[I]<=0),d&&H.push(F[U]<=0,F[$]<=0),H.every((function(e){return e}))){x=L,M=!1;break}w.set(L,H)}if(M)for(var q=function(e){var t=y.find((function(t){var n=w.get(t);if(n)return n.slice(0,e).every((function(e){return e}))}));if(t)return x=t,"break"},Y=f?3:1;Y>0;Y--){if("break"===q(Y))break}t.placement!==x&&(t.modifiersData[a]._skip=!0,t.placement=x,t.reset=!0)}},requiresIfExists:["offset"],data:{_skip:!1}},le,ge,{name:"hide",enabled:!0,phase:"main",requiresIfExists:["preventOverflow"],fn:function(e){var t=e.state,n=e.name,a=t.rects.reference,r=t.rects.popper,i=t.modifiersData.preventOverflow,o=ce(t,{elementContext:"reference"}),d=ce(t,{altBoundary:!0}),s=he(o,a),c=he(d,r,i),u=fe(s),l=fe(c);t.modifiersData[n]={referenceClippingOffsets:s,popperEscapeOffsets:c,isReferenceHidden:u,hasPopperEscaped:l},t.attributes.popper=Object.assign({},t.attributes.popper,{"data-popper-reference-hidden":u,"data-popper-escaped":l})}}]}),me=n(54335),Re=n.n(me),be=function(e){return e.reduce((function(e,t){var n=t[0],a=t[1];return e[n]=a,e}),{})},ye="undefined"!=typeof window&&window.document&&window.document.createElement?a.useLayoutEffect:a.useEffect,ve=[],_e=function(e,t,n){void 0===n&&(n={});var r=a.useRef(null),i={onFirstUpdate:n.onFirstUpdate,placement:n.placement||"bottom",strategy:n.strategy||"absolute",modifiers:n.modifiers||ve},o=a.useState({styles:{popper:{position:i.strategy,left:"0",top:"0"},arrow:{position:"absolute"}},attributes:{}}),d=o[0],s=o[1],c=a.useMemo((function(){return{name:"updateState",enabled:!0,phase:"write",fn:function(e){var t=e.state,n=Object.keys(t.elements);s({styles:be(n.map((function(e){return[e,t.styles[e]||{}]}))),attributes:be(n.map((function(e){return[e,t.attributes[e]]})))})},requires:["computeStyles"]}}),[]),u=a.useMemo((function(){var e={onFirstUpdate:i.onFirstUpdate,placement:i.placement,strategy:i.strategy,modifiers:[].concat(i.modifiers,[c,{name:"applyStyles",enabled:!1}])};return Re()(r.current,e)?r.current||e:(r.current=e,e)}),[i.onFirstUpdate,i.placement,i.strategy,i.modifiers,c]),l=a.useRef();return ye((function(){l.current&&l.current.setOptions(u)}),[u]),ye((function(){if(null!=e&&null!=t){var a=(n.createPopper||pe)(e,t,u);return l.current=a,function(){a.destroy(),l.current=null}}}),[e,t,n.createPopper]),{state:l.current?l.current.state:null,styles:d.styles,attributes:d.attributes,update:l.current?l.current.update:null,forceUpdate:l.current?l.current.forceUpdate:null}}},76907:function(e,t,n){"use strict";var a=n(4977);e.exports=a},9116:function(e,t,n){"use strict";n(19601);var a=n(40857);e.exports=a.Object.assign},77671:function(e,t,n){"use strict";e.exports=n(47537)},47537:function(e,t,n){"use strict";var a=n(76907);e.exports=a},19662:function(e,t,n){"use strict";var a=n(60614),r=n(66330),i=TypeError;e.exports=function(e){if(a(e))return e;throw i(r(e)+" is not a function")}},96077:function(e,t,n){"use strict";var a=n(60614),r=String,i=TypeError;e.exports=function(e){if("object"==typeof e||a(e))return e;throw i("Can't set "+r(e)+" as a prototype")}},19670:function(e,t,n){"use strict";var a=n(70111),r=String,i=TypeError;e.exports=function(e){if(a(e))return e;throw i(r(e)+" is not an object")}},23013:function(e){"use strict";e.exports="undefined"!=typeof ArrayBuffer&&"undefined"!=typeof DataView},90260:function(e,t,n){"use strict";var a,r,i,o=n(23013),d=n(19781),s=n(17854),c=n(60614),u=n(70111),l=n(92597),g=n(70648),h=n(66330),f=n(68880),p=n(98052),m=n(47045),R=n(47976),b=n(79518),y=n(27674),v=n(5112),_=n(69711),w=n(29909),M=w.enforce,x=w.get,E=s.Int8Array,S=E&&E.prototype,k=s.Uint8ClampedArray,N=k&&k.prototype,D=E&&b(E),A=S&&b(S),j=Object.prototype,T=s.TypeError,L=v("toStringTag"),I=_("TYPED_ARRAY_TAG"),C="TypedArrayConstructor",O=o&&!!y&&"Opera"!==g(s.opera),P=!1,z={Int8Array:1,Uint8Array:1,Uint8ClampedArray:1,Int16Array:2,Uint16Array:2,Int32Array:4,Uint32Array:4,Float32Array:4,Float64Array:8},B={BigInt64Array:8,BigUint64Array:8},F=function(e){var t=b(e);if(u(t)){var n=x(t);return n&&l(n,C)?n[C]:F(t)}},U=function(e){if(!u(e))return!1;var t=g(e);return l(z,t)||l(B,t)};for(a in z)(i=(r=s[a])&&r.prototype)?M(i)[C]=r:O=!1;for(a in B)(i=(r=s[a])&&r.prototype)&&(M(i)[C]=r);if((!O||!c(D)||D===Function.prototype)&&(D=function(){throw T("Incorrect invocation")},O))for(a in z)s[a]&&y(s[a],D);if((!O||!A||A===j)&&(A=D.prototype,O))for(a in z)s[a]&&y(s[a].prototype,A);if(O&&b(N)!==A&&y(N,A),d&&!l(A,L))for(a in P=!0,m(A,L,{configurable:!0,get:function(){return u(this)?this[I]:void 0}}),z)s[a]&&f(s[a],I,a);e.exports={NATIVE_ARRAY_BUFFER_VIEWS:O,TYPED_ARRAY_TAG:P&&I,aTypedArray:function(e){if(U(e))return e;throw T("Target is not a typed array")},aTypedArrayConstructor:function(e){if(c(e)&&(!y||R(D,e)))return e;throw T(h(e)+" is not a typed array constructor")},exportTypedArrayMethod:function(e,t,n,a){if(d){if(n)for(var r in z){var i=s[r];if(i&&l(i.prototype,e))try{delete i.prototype[e]}catch(o){try{i.prototype[e]=t}catch(c){}}}A[e]&&!n||p(A,e,n?t:O&&S[e]||t,a)}},exportTypedArrayStaticMethod:function(e,t,n){var a,r;if(d){if(y){if(n)for(a in z)if((r=s[a])&&l(r,e))try{delete r[e]}catch(i){}if(D[e]&&!n)return;try{return p(D,e,n?t:O&&D[e]||t)}catch(i){}}for(a in z)!(r=s[a])||r[e]&&!n||p(r,e,t)}},getTypedArrayConstructor:F,isView:function(e){if(!u(e))return!1;var t=g(e);return"DataView"===t||l(z,t)||l(B,t)},isTypedArray:U,TypedArray:D,TypedArrayPrototype:A}},41318:function(e,t,n){"use strict";var a=n(45656),r=n(51400),i=n(26244),o=function(e){return function(t,n,o){var d,s=a(t),c=i(s),u=r(o,c);if(e&&n!=n){for(;c>u;)if((d=s[u++])!=d)return!0}else for(;c>u;u++)if((e||u in s)&&s[u]===n)return e||u||0;return!e&&-1}};e.exports={includes:o(!0),indexOf:o(!1)}},41589:function(e,t,n){"use strict";var a=n(51400),r=n(26244),i=n(86135),o=Array,d=Math.max;e.exports=function(e,t,n){for(var s=r(e),c=a(t,s),u=a(void 0===n?s:n,s),l=o(d(u-c,0)),g=0;c<u;c++,g++)i(l,g,e[c]);return l.length=g,l}},94362:function(e,t,n){"use strict";var a=n(41589),r=Math.floor,i=function(e,t){var n=e.length,s=r(n/2);return n<8?o(e,t):d(e,i(a(e,0,s),t),i(a(e,s),t),t)},o=function(e,t){for(var n,a,r=e.length,i=1;i<r;){for(a=i,n=e[i];a&&t(e[a-1],n)>0;)e[a]=e[--a];a!==i++&&(e[a]=n)}return e},d=function(e,t,n,a){for(var r=t.length,i=n.length,o=0,d=0;o<r||d<i;)e[o+d]=o<r&&d<i?a(t[o],n[d])<=0?t[o++]:n[d++]:o<r?t[o++]:n[d++];return e};e.exports=i},84326:function(e,t,n){"use strict";var a=n(1702),r=a({}.toString),i=a("".slice);e.exports=function(e){return i(r(e),8,-1)}},70648:function(e,t,n){"use strict";var a=n(51694),r=n(60614),i=n(84326),o=n(5112)("toStringTag"),d=Object,s="Arguments"==i(function(){return arguments}());e.exports=a?i:function(e){var t,n,a;return void 0===e?"Undefined":null===e?"Null":"string"==typeof(n=function(e,t){try{return e[t]}catch(n){}}(t=d(e),o))?n:s?i(t):"Object"==(a=i(t))&&r(t.callee)?"Arguments":a}},99920:function(e,t,n){"use strict";var a=n(92597),r=n(53887),i=n(31236),o=n(3070);e.exports=function(e,t,n){for(var d=r(t),s=o.f,c=i.f,u=0;u<d.length;u++){var l=d[u];a(e,l)||n&&a(n,l)||s(e,l,c(t,l))}}},49920:function(e,t,n){"use strict";var a=n(47293);e.exports=!a((function(){function e(){}return e.prototype.constructor=null,Object.getPrototypeOf(new e)!==e.prototype}))},68880:function(e,t,n){"use strict";var a=n(19781),r=n(3070),i=n(79114);e.exports=a?function(e,t,n){return r.f(e,t,i(1,n))}:function(e,t,n){return e[t]=n,e}},79114:function(e){"use strict";e.exports=function(e,t){return{enumerable:!(1&e),configurable:!(2&e),writable:!(4&e),value:t}}},86135:function(e,t,n){"use strict";var a=n(34948),r=n(3070),i=n(79114);e.exports=function(e,t,n){var o=a(t);o in e?r.f(e,o,i(0,n)):e[o]=n}},47045:function(e,t,n){"use strict";var a=n(56339),r=n(3070);e.exports=function(e,t,n){return n.get&&a(n.get,t,{getter:!0}),n.set&&a(n.set,t,{setter:!0}),r.f(e,t,n)}},98052:function(e,t,n){"use strict";var a=n(60614),r=n(3070),i=n(56339),o=n(13072);e.exports=function(e,t,n,d){d||(d={});var s=d.enumerable,c=void 0!==d.name?d.name:t;if(a(n)&&i(n,c,d),d.global)s?e[t]=n:o(t,n);else{try{d.unsafe?e[t]&&(s=!0):delete e[t]}catch(u){}s?e[t]=n:r.f(e,t,{value:n,enumerable:!1,configurable:!d.nonConfigurable,writable:!d.nonWritable})}return e}},13072:function(e,t,n){"use strict";var a=n(17854),r=Object.defineProperty;e.exports=function(e,t){try{r(a,e,{value:t,configurable:!0,writable:!0})}catch(n){a[e]=t}return t}},19781:function(e,t,n){"use strict";var a=n(47293);e.exports=!a((function(){return 7!=Object.defineProperty({},1,{get:function(){return 7}})[1]}))},4154:function(e){"use strict";var t="object"==typeof document&&document.all,n=void 0===t&&void 0!==t;e.exports={all:t,IS_HTMLDDA:n}},80317:function(e,t,n){"use strict";var a=n(17854),r=n(70111),i=a.document,o=r(i)&&r(i.createElement);e.exports=function(e){return o?i.createElement(e):{}}},68886:function(e,t,n){"use strict";var a=n(88113).match(/firefox\/(\d+)/i);e.exports=!!a&&+a[1]},30256:function(e,t,n){"use strict";var a=n(88113);e.exports=/MSIE|Trident/.test(a)},88113:function(e){"use strict";e.exports="undefined"!=typeof navigator&&String(navigator.userAgent)||""},7392:function(e,t,n){"use strict";var a,r,i=n(17854),o=n(88113),d=i.process,s=i.Deno,c=d&&d.versions||s&&s.version,u=c&&c.v8;u&&(r=(a=u.split("."))[0]>0&&a[0]<4?1:+(a[0]+a[1])),!r&&o&&(!(a=o.match(/Edge\/(\d+)/))||a[1]>=74)&&(a=o.match(/Chrome\/(\d+)/))&&(r=+a[1]),e.exports=r},98008:function(e,t,n){"use strict";var a=n(88113).match(/AppleWebKit\/(\d+)\./);e.exports=!!a&&+a[1]},80748:function(e){"use strict";e.exports=["constructor","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","toLocaleString","toString","valueOf"]},82109:function(e,t,n){"use strict";var a=n(17854),r=n(31236).f,i=n(68880),o=n(98052),d=n(13072),s=n(99920),c=n(54705);e.exports=function(e,t){var n,u,l,g,h,f=e.target,p=e.global,m=e.stat;if(n=p?a:m?a[f]||d(f,{}):(a[f]||{}).prototype)for(u in t){if(g=t[u],l=e.dontCallGetSet?(h=r(n,u))&&h.value:n[u],!c(p?u:f+(m?".":"#")+u,e.forced)&&void 0!==l){if(typeof g==typeof l)continue;s(g,l)}(e.sham||l&&l.sham)&&i(g,"sham",!0),o(n,u,g,e)}}},47293:function(e){"use strict";e.exports=function(e){try{return!!e()}catch(t){return!0}}},34374:function(e,t,n){"use strict";var a=n(47293);e.exports=!a((function(){var e=function(){}.bind();return"function"!=typeof e||e.hasOwnProperty("prototype")}))},46916:function(e,t,n){"use strict";var a=n(34374),r=Function.prototype.call;e.exports=a?r.bind(r):function(){return r.apply(r,arguments)}},76530:function(e,t,n){"use strict";var a=n(19781),r=n(92597),i=Function.prototype,o=a&&Object.getOwnPropertyDescriptor,d=r(i,"name"),s=d&&"something"===function(){}.name,c=d&&(!a||a&&o(i,"name").configurable);e.exports={EXISTS:d,PROPER:s,CONFIGURABLE:c}},75668:function(e,t,n){"use strict";var a=n(1702),r=n(19662);e.exports=function(e,t,n){try{return a(r(Object.getOwnPropertyDescriptor(e,t)[n]))}catch(i){}}},21470:function(e,t,n){"use strict";var a=n(84326),r=n(1702);e.exports=function(e){if("Function"===a(e))return r(e)}},1702:function(e,t,n){"use strict";var a=n(34374),r=Function.prototype,i=r.call,o=a&&r.bind.bind(i,i);e.exports=a?o:function(e){return function(){return i.apply(e,arguments)}}},35005:function(e,t,n){"use strict";var a=n(17854),r=n(60614);e.exports=function(e,t){return arguments.length<2?(n=a[e],r(n)?n:void 0):a[e]&&a[e][t];var n}},58173:function(e,t,n){"use strict";var a=n(19662),r=n(68554);e.exports=function(e,t){var n=e[t];return r(n)?void 0:a(n)}},17854:function(e,t,n){"use strict";var a=function(e){return e&&e.Math==Math&&e};e.exports=a("object"==typeof globalThis&&globalThis)||a("object"==typeof window&&window)||a("object"==typeof self&&self)||a("object"==typeof n.g&&n.g)||function(){return this}()||this||Function("return this")()},92597:function(e,t,n){"use strict";var a=n(1702),r=n(47908),i=a({}.hasOwnProperty);e.exports=Object.hasOwn||function(e,t){return i(r(e),t)}},3501:function(e){"use strict";e.exports={}},64664:function(e,t,n){"use strict";var a=n(19781),r=n(47293),i=n(80317);e.exports=!a&&!r((function(){return 7!=Object.defineProperty(i("div"),"a",{get:function(){return 7}}).a}))},68361:function(e,t,n){"use strict";var a=n(1702),r=n(47293),i=n(84326),o=Object,d=a("".split);e.exports=r((function(){return!o("z").propertyIsEnumerable(0)}))?function(e){return"String"==i(e)?d(e,""):o(e)}:o},42788:function(e,t,n){"use strict";var a=n(1702),r=n(60614),i=n(5465),o=a(Function.toString);r(i.inspectSource)||(i.inspectSource=function(e){return o(e)}),e.exports=i.inspectSource},29909:function(e,t,n){"use strict";var a,r,i,o=n(94811),d=n(17854),s=n(70111),c=n(68880),u=n(92597),l=n(5465),g=n(6200),h=n(3501),f="Object already initialized",p=d.TypeError,m=d.WeakMap;if(o||l.state){var R=l.state||(l.state=new m);R.get=R.get,R.has=R.has,R.set=R.set,a=function(e,t){if(R.has(e))throw p(f);return t.facade=e,R.set(e,t),t},r=function(e){return R.get(e)||{}},i=function(e){return R.has(e)}}else{var b=g("state");h[b]=!0,a=function(e,t){if(u(e,b))throw p(f);return t.facade=e,c(e,b,t),t},r=function(e){return u(e,b)?e[b]:{}},i=function(e){return u(e,b)}}e.exports={set:a,get:r,has:i,enforce:function(e){return i(e)?r(e):a(e,{})},getterFor:function(e){return function(t){var n;if(!s(t)||(n=r(t)).type!==e)throw p("Incompatible receiver, "+e+" required");return n}}}},60614:function(e,t,n){"use strict";var a=n(4154),r=a.all;e.exports=a.IS_HTMLDDA?function(e){return"function"==typeof e||e===r}:function(e){return"function"==typeof e}},54705:function(e,t,n){"use strict";var a=n(47293),r=n(60614),i=/#|\.prototype\./,o=function(e,t){var n=s[d(e)];return n==u||n!=c&&(r(t)?a(t):!!t)},d=o.normalize=function(e){return String(e).replace(i,".").toLowerCase()},s=o.data={},c=o.NATIVE="N",u=o.POLYFILL="P";e.exports=o},68554:function(e){"use strict";e.exports=function(e){return null==e}},70111:function(e,t,n){"use strict";var a=n(60614),r=n(4154),i=r.all;e.exports=r.IS_HTMLDDA?function(e){return"object"==typeof e?null!==e:a(e)||e===i}:function(e){return"object"==typeof e?null!==e:a(e)}},31913:function(e){"use strict";e.exports=!1},52190:function(e,t,n){"use strict";var a=n(35005),r=n(60614),i=n(47976),o=n(43307),d=Object;e.exports=o?function(e){return"symbol"==typeof e}:function(e){var t=a("Symbol");return r(t)&&i(t.prototype,d(e))}},26244:function(e,t,n){"use strict";var a=n(17466);e.exports=function(e){return a(e.length)}},56339:function(e,t,n){"use strict";var a=n(1702),r=n(47293),i=n(60614),o=n(92597),d=n(19781),s=n(76530).CONFIGURABLE,c=n(42788),u=n(29909),l=u.enforce,g=u.get,h=String,f=Object.defineProperty,p=a("".slice),m=a("".replace),R=a([].join),b=d&&!r((function(){return 8!==f((function(){}),"length",{value:8}).length})),y=String(String).split("String"),v=e.exports=function(e,t,n){"Symbol("===p(h(t),0,7)&&(t="["+m(h(t),/^Symbol\(([^)]*)\)/,"$1")+"]"),n&&n.getter&&(t="get "+t),n&&n.setter&&(t="set "+t),(!o(e,"name")||s&&e.name!==t)&&(d?f(e,"name",{value:t,configurable:!0}):e.name=t),b&&n&&o(n,"arity")&&e.length!==n.arity&&f(e,"length",{value:n.arity});try{n&&o(n,"constructor")&&n.constructor?d&&f(e,"prototype",{writable:!1}):e.prototype&&(e.prototype=void 0)}catch(r){}var a=l(e);return o(a,"source")||(a.source=R(y,"string"==typeof t?t:"")),e};Function.prototype.toString=v((function(){return i(this)&&g(this).source||c(this)}),"toString")},74758:function(e){"use strict";var t=Math.ceil,n=Math.floor;e.exports=Math.trunc||function(e){var a=+e;return(a>0?n:t)(a)}},21574:function(e,t,n){"use strict";var a=n(19781),r=n(1702),i=n(46916),o=n(47293),d=n(81956),s=n(25181),c=n(55296),u=n(47908),l=n(68361),g=Object.assign,h=Object.defineProperty,f=r([].concat);e.exports=!g||o((function(){if(a&&1!==g({b:1},g(h({},"a",{enumerable:!0,get:function(){h(this,"b",{value:3,enumerable:!1})}}),{b:2})).b)return!0;var e={},t={},n=Symbol(),r="abcdefghijklmnopqrst";return e[n]=7,r.split("").forEach((function(e){t[e]=e})),7!=g({},e)[n]||d(g({},t)).join("")!=r}))?function(e,t){for(var n=u(e),r=arguments.length,o=1,g=s.f,h=c.f;r>o;)for(var p,m=l(arguments[o++]),R=g?f(d(m),g(m)):d(m),b=R.length,y=0;b>y;)p=R[y++],a&&!i(h,m,p)||(n[p]=m[p]);return n}:g},3070:function(e,t,n){"use strict";var a=n(19781),r=n(64664),i=n(3353),o=n(19670),d=n(34948),s=TypeError,c=Object.defineProperty,u=Object.getOwnPropertyDescriptor,l="enumerable",g="configurable",h="writable";t.f=a?i?function(e,t,n){if(o(e),t=d(t),o(n),"function"==typeof e&&"prototype"===t&&"value"in n&&h in n&&!n[h]){var a=u(e,t);a&&a[h]&&(e[t]=n.value,n={configurable:g in n?n[g]:a[g],enumerable:l in n?n[l]:a[l],writable:!1})}return c(e,t,n)}:c:function(e,t,n){if(o(e),t=d(t),o(n),r)try{return c(e,t,n)}catch(a){}if("get"in n||"set"in n)throw s("Accessors not supported");return"value"in n&&(e[t]=n.value),e}},31236:function(e,t,n){"use strict";var a=n(19781),r=n(46916),i=n(55296),o=n(79114),d=n(45656),s=n(34948),c=n(92597),u=n(64664),l=Object.getOwnPropertyDescriptor;t.f=a?l:function(e,t){if(e=d(e),t=s(t),u)try{return l(e,t)}catch(n){}if(c(e,t))return o(!r(i.f,e,t),e[t])}},8006:function(e,t,n){"use strict";var a=n(16324),r=n(80748).concat("length","prototype");t.f=Object.getOwnPropertyNames||function(e){return a(e,r)}},25181:function(e,t){"use strict";t.f=Object.getOwnPropertySymbols},79518:function(e,t,n){"use strict";var a=n(92597),r=n(60614),i=n(47908),o=n(6200),d=n(49920),s=o("IE_PROTO"),c=Object,u=c.prototype;e.exports=d?c.getPrototypeOf:function(e){var t=i(e);if(a(t,s))return t[s];var n=t.constructor;return r(n)&&t instanceof n?n.prototype:t instanceof c?u:null}},47976:function(e,t,n){"use strict";var a=n(1702);e.exports=a({}.isPrototypeOf)},16324:function(e,t,n){"use strict";var a=n(1702),r=n(92597),i=n(45656),o=n(41318).indexOf,d=n(3501),s=a([].push);e.exports=function(e,t){var n,a=i(e),c=0,u=[];for(n in a)!r(d,n)&&r(a,n)&&s(u,n);for(;t.length>c;)r(a,n=t[c++])&&(~o(u,n)||s(u,n));return u}},81956:function(e,t,n){"use strict";var a=n(16324),r=n(80748);e.exports=Object.keys||function(e){return a(e,r)}},55296:function(e,t){"use strict";var n={}.propertyIsEnumerable,a=Object.getOwnPropertyDescriptor,r=a&&!n.call({1:2},1);t.f=r?function(e){var t=a(this,e);return!!t&&t.enumerable}:n},27674:function(e,t,n){"use strict";var a=n(75668),r=n(19670),i=n(96077);e.exports=Object.setPrototypeOf||("__proto__"in{}?function(){var e,t=!1,n={};try{(e=a(Object.prototype,"__proto__","set"))(n,[]),t=n instanceof Array}catch(o){}return function(n,a){return r(n),i(a),t?e(n,a):n.__proto__=a,n}}():void 0)},92140:function(e,t,n){"use strict";var a=n(46916),r=n(60614),i=n(70111),o=TypeError;e.exports=function(e,t){var n,d;if("string"===t&&r(n=e.toString)&&!i(d=a(n,e)))return d;if(r(n=e.valueOf)&&!i(d=a(n,e)))return d;if("string"!==t&&r(n=e.toString)&&!i(d=a(n,e)))return d;throw o("Can't convert object to primitive value")}},53887:function(e,t,n){"use strict";var a=n(35005),r=n(1702),i=n(8006),o=n(25181),d=n(19670),s=r([].concat);e.exports=a("Reflect","ownKeys")||function(e){var t=i.f(d(e)),n=o.f;return n?s(t,n(e)):t}},40857:function(e,t,n){"use strict";var a=n(17854);e.exports=a},84488:function(e,t,n){"use strict";var a=n(68554),r=TypeError;e.exports=function(e){if(a(e))throw r("Can't call method on "+e);return e}},6200:function(e,t,n){"use strict";var a=n(72309),r=n(69711),i=a("keys");e.exports=function(e){return i[e]||(i[e]=r(e))}},5465:function(e,t,n){"use strict";var a=n(17854),r=n(13072),i="__core-js_shared__",o=a[i]||r(i,{});e.exports=o},72309:function(e,t,n){"use strict";var a=n(31913),r=n(5465);(e.exports=function(e,t){return r[e]||(r[e]=void 0!==t?t:{})})("versions",[]).push({version:"3.32.0",mode:a?"pure":"global",copyright:"© 2014-2023 Denis Pushkarev (zloirock.ru)",license:"https://github.com/zloirock/core-js/blob/v3.32.0/LICENSE",source:"https://github.com/zloirock/core-js"})},36293:function(e,t,n){"use strict";var a=n(7392),r=n(47293),i=n(17854).String;e.exports=!!Object.getOwnPropertySymbols&&!r((function(){var e=Symbol();return!i(e)||!(Object(e)instanceof Symbol)||!Symbol.sham&&a&&a<41}))},51400:function(e,t,n){"use strict";var a=n(19303),r=Math.max,i=Math.min;e.exports=function(e,t){var n=a(e);return n<0?r(n+t,0):i(n,t)}},45656:function(e,t,n){"use strict";var a=n(68361),r=n(84488);e.exports=function(e){return a(r(e))}},19303:function(e,t,n){"use strict";var a=n(74758);e.exports=function(e){var t=+e;return t!=t||0===t?0:a(t)}},17466:function(e,t,n){"use strict";var a=n(19303),r=Math.min;e.exports=function(e){return e>0?r(a(e),9007199254740991):0}},47908:function(e,t,n){"use strict";var a=n(84488),r=Object;e.exports=function(e){return r(a(e))}},84590:function(e,t,n){"use strict";var a=n(73002),r=RangeError;e.exports=function(e,t){var n=a(e);if(n%t)throw r("Wrong offset");return n}},73002:function(e,t,n){"use strict";var a=n(19303),r=RangeError;e.exports=function(e){var t=a(e);if(t<0)throw r("The argument can't be less than 0");return t}},57593:function(e,t,n){"use strict";var a=n(46916),r=n(70111),i=n(52190),o=n(58173),d=n(92140),s=n(5112),c=TypeError,u=s("toPrimitive");e.exports=function(e,t){if(!r(e)||i(e))return e;var n,s=o(e,u);if(s){if(void 0===t&&(t="default"),n=a(s,e,t),!r(n)||i(n))return n;throw c("Can't convert object to primitive value")}return void 0===t&&(t="number"),d(e,t)}},34948:function(e,t,n){"use strict";var a=n(57593),r=n(52190);e.exports=function(e){var t=a(e,"string");return r(t)?t:t+""}},51694:function(e,t,n){"use strict";var a={};a[n(5112)("toStringTag")]="z",e.exports="[object z]"===String(a)},66330:function(e){"use strict";var t=String;e.exports=function(e){try{return t(e)}catch(n){return"Object"}}},69711:function(e,t,n){"use strict";var a=n(1702),r=0,i=Math.random(),o=a(1..toString);e.exports=function(e){return"Symbol("+(void 0===e?"":e)+")_"+o(++r+i,36)}},43307:function(e,t,n){"use strict";var a=n(36293);e.exports=a&&!Symbol.sham&&"symbol"==typeof Symbol.iterator},3353:function(e,t,n){"use strict";var a=n(19781),r=n(47293);e.exports=a&&r((function(){return 42!=Object.defineProperty((function(){}),"prototype",{value:42,writable:!1}).prototype}))},94811:function(e,t,n){"use strict";var a=n(17854),r=n(60614),i=a.WeakMap;e.exports=r(i)&&/native code/.test(String(i))},5112:function(e,t,n){"use strict";var a=n(17854),r=n(72309),i=n(92597),o=n(69711),d=n(36293),s=n(43307),c=a.Symbol,u=r("wks"),l=s?c.for||c:c&&c.withoutSetter||o;e.exports=function(e){return i(u,e)||(u[e]=d&&i(c,e)?c[e]:l("Symbol."+e)),u[e]}},19601:function(e,t,n){"use strict";var a=n(82109),r=n(21574);a({target:"Object",stat:!0,arity:2,forced:Object.assign!==r},{assign:r})},3462:function(e,t,n){"use strict";var a=n(17854),r=n(46916),i=n(90260),o=n(26244),d=n(84590),s=n(47908),c=n(47293),u=a.RangeError,l=a.Int8Array,g=l&&l.prototype,h=g&&g.set,f=i.aTypedArray,p=i.exportTypedArrayMethod,m=!c((function(){var e=new Uint8ClampedArray(2);return r(h,e,{length:1,0:3},1),3!==e[1]})),R=m&&i.NATIVE_ARRAY_BUFFER_VIEWS&&c((function(){var e=new l(2);return e.set(1),e.set("2",1),0!==e[0]||2!==e[1]}));p("set",(function(e){f(this);var t=d(arguments.length>1?arguments[1]:void 0,1),n=s(e);if(m)return r(h,this,n,t);var a=this.length,i=o(n),c=0;if(i+t>a)throw u("Wrong length");for(;c<i;)this[t+c]=n[c++]}),!m||R)},33824:function(e,t,n){"use strict";var a=n(17854),r=n(21470),i=n(47293),o=n(19662),d=n(94362),s=n(90260),c=n(68886),u=n(30256),l=n(7392),g=n(98008),h=s.aTypedArray,f=s.exportTypedArrayMethod,p=a.Uint16Array,m=p&&r(p.prototype.sort),R=!(!m||i((function(){m(new p(2),null)}))&&i((function(){m(new p(2),{})}))),b=!!m&&!i((function(){if(l)return l<74;if(c)return c<67;if(u)return!0;if(g)return g<602;var e,t,n=new p(516),a=Array(516);for(e=0;e<516;e++)t=e%4,n[e]=515-e,a[e]=e-2*t+3;for(m(n,(function(e,t){return(e/4|0)-(t/4|0)})),e=0;e<516;e++)if(n[e]!==a[e])return!0}));f("sort",(function(e){return void 0!==e&&o(e),b?m(this,e):d(h(this),function(e){return function(t,n){return void 0!==e?+e(t,n)||0:n!=n?-1:t!=t?1:0===t&&0===n?1/t>0&&1/n<0?1:-1:t>n}}(e))}),!b||R)},4977:function(e,t,n){"use strict";var a=n(9116);e.exports=a},64506:function(e,t){"use strict";t.H=void 0;t.H=(e,t="always")=>{const n=e.endsWith(".html"),a=e.endsWith(".xml"),r=e.endsWith(".pdf");return"/"===e?e:((n||a||r)&&(t="never"),"always"===t?e.endsWith("/")?e:`${e}/`:"never"===t&&e.endsWith("/")?e.slice(0,-1):e)}},19679:function(e,t,n){"use strict";t.p2=t.$C=void 0;var a=n(61432);t.$C=a.ScrollHandler;var r=n(54855);t.p2=r.useScrollRestoration},61432:function(e,t,n){"use strict";var a=n(64836);t.__esModule=!0,t.ScrollHandler=t.ScrollContext=void 0;var r=a(n(66115)),i=a(n(7867)),o=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var n=c(t);if(n&&n.has(e))return n.get(e);var a={},r=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var i in e)if("default"!==i&&Object.prototype.hasOwnProperty.call(e,i)){var o=r?Object.getOwnPropertyDescriptor(e,i):null;o&&(o.get||o.set)?Object.defineProperty(a,i,o):a[i]=e[i]}a.default=e,n&&n.set(e,a);return a}(n(67294)),d=a(n(45697)),s=n(21142);function c(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(c=function(e){return e?n:t})(e)}var u=o.createContext(new s.SessionStorage);t.ScrollContext=u,u.displayName="GatsbyScrollContext";var l=function(e){function t(){for(var t,n=arguments.length,a=new Array(n),i=0;i<n;i++)a[i]=arguments[i];return(t=e.call.apply(e,[this].concat(a))||this)._stateStorage=new s.SessionStorage,t._isTicking=!1,t._latestKnownScrollY=0,t.scrollListener=function(){t._latestKnownScrollY=window.scrollY,t._isTicking||(t._isTicking=!0,requestAnimationFrame(t._saveScroll.bind((0,r.default)(t))))},t.windowScroll=function(e,n){t.shouldUpdateScroll(n,t.props)&&window.scrollTo(0,e)},t.scrollToHash=function(e,n){var a=document.getElementById(e.substring(1));a&&t.shouldUpdateScroll(n,t.props)&&a.scrollIntoView()},t.shouldUpdateScroll=function(e,n){var a=t.props.shouldUpdateScroll;return!a||a.call((0,r.default)(t),e,n)},t}(0,i.default)(t,e);var n=t.prototype;return n._saveScroll=function(){var e=this.props.location.key||null;e&&this._stateStorage.save(this.props.location,e,this._latestKnownScrollY),this._isTicking=!1},n.componentDidMount=function(){var e;window.addEventListener("scroll",this.scrollListener);var t=this.props.location,n=t.key,a=t.hash;n&&(e=this._stateStorage.read(this.props.location,n)),a?this.scrollToHash(decodeURI(a),void 0):e&&this.windowScroll(e,void 0)},n.componentWillUnmount=function(){window.removeEventListener("scroll",this.scrollListener)},n.componentDidUpdate=function(e){var t,n=this.props.location,a=n.hash,r=n.key;r&&(t=this._stateStorage.read(this.props.location,r)),a?this.scrollToHash(decodeURI(a),e):this.windowScroll(t,e)},n.render=function(){return o.createElement(u.Provider,{value:this._stateStorage},this.props.children)},t}(o.Component);t.ScrollHandler=l,l.propTypes={shouldUpdateScroll:d.default.func,children:d.default.element.isRequired,location:d.default.object.isRequired}},21142:function(e,t){"use strict";t.__esModule=!0,t.SessionStorage=void 0;var n="___GATSBY_REACT_ROUTER_SCROLL",a=function(){function e(){}var t=e.prototype;return t.read=function(e,t){var a=this.getStateKey(e,t);try{var r=window.sessionStorage.getItem(a);return r?JSON.parse(r):0}catch(i){return window&&window[n]&&window[n][a]?window[n][a]:0}},t.save=function(e,t,a){var r=this.getStateKey(e,t),i=JSON.stringify(a);try{window.sessionStorage.setItem(r,i)}catch(o){window&&window[n]||(window[n]={}),window[n][r]=JSON.parse(i)}},t.getStateKey=function(e,t){var n="@@scroll|"+e.pathname;return null==t?n:n+"|"+t},e}();t.SessionStorage=a},54855:function(e,t,n){"use strict";t.__esModule=!0,t.useScrollRestoration=function(e){var t=(0,i.useLocation)(),n=(0,r.useContext)(a.ScrollContext),o=(0,r.useRef)(null);return(0,r.useLayoutEffect)((function(){if(o.current){var a=n.read(t,e);o.current.scrollTo(0,a||0)}}),[t.key]),{ref:o,onScroll:function(){o.current&&n.save(t,e,o.current.scrollTop)}}};var a=n(61432),r=n(67294),i=n(87896)},24852:function(e){"use strict";e.exports=Object.assign},4094:function(e,t,n){"use strict";t.__esModule=!0,t.onInitialClientRender=void 0;n(83521),n(72731);t.onInitialClientRender=()=>{}},97730:function(e,t){"use strict";t.__esModule=!0,t.getForwards=function(e){return null==e?void 0:e.flatMap((e=>(null==e?void 0:e.forward)||[]))}},72731:function(e,t,n){"use strict";t.__esModule=!0,t.injectPartytownSnippet=function(e){if(!e.length)return;const t=document.querySelector("script[data-partytown]"),n=document.querySelector('iframe[src*="~partytown/partytown-sandbox-sw"]');t&&t.remove();n&&n.remove();const i=(0,r.getForwards)(e),o=document.createElement("script");o.dataset.partytown="",o.innerHTML=(0,a.partytownSnippet)({forward:i}),document.head.appendChild(o)};var a=n(72911),r=n(97730)},17882:function(e,t,n){"use strict";n.d(t,{B:function(){return c}});var a=n(80136),r=n(67294),i=n(7444),o=n(34300),d=n(68201),s={button:"Button-module_button__1msFE button_hds-button__2A0je",label:"Button-module_label__a4np1 button_hds-button__label__2EQa-",fullWidth:"Button-module_fullWidth__31eVK button_hds-button--fullwidth__1_hG9","size-small":"Button-module_size-small__3lizH button_hds-button--small__2NFef",icon:"Button-module_icon__O-h7R button_hds-icon__17j8Z",primary:"Button-module_primary__2LfKB button_hds-button--primary__2NVvO",secondary:"Button-module_secondary__1nABp button_hds-button--secondary__1NOWS",supplementary:"Button-module_supplementary__3YKiS button_hds-button--supplementary__GcHcV",isLoading:"Button-module_isLoading__3PK75 button_hds-button--loading__2mLjh",success:"Button-module_success__CU9nK button_hds-button--success__9hpuD",danger:"Button-module_danger__2el15 button_hds-button--danger__dEREN","theme-coat":"Button-module_theme-coat__2_3U7 button_hds-button--theme-coat__12cO0","theme-black":"Button-module_theme-black__m8giY button_hds-button--theme-black__3K_k4"};(0,i.s)('.button_hds-button__2A0je{--border-width:2px;--color:inherit;--min-size:44px;--outline-gutter:2px;--outline-width:3px;align-content:flex-start;align-items:center;-webkit-appearance:button;background-color:var(--background-color,transparent);border:var(--border-width) solid var(--border-color,transparent);border-radius:0;color:var(--color);cursor:pointer;display:inline-flex;font-family:inherit;font-size:100%;font-weight:500;justify-content:center;line-height:1.15;margin:0;min-height:var(--min-size);min-width:var(--min-size);padding:0 var(--spacing-2-xs);position:relative;text-decoration:none;text-transform:none;vertical-align:top}.button_hds-button__2A0je,.button_hds-button__2A0je *,.button_hds-button__2A0je:after,.button_hds-button__2A0je :after,.button_hds-button__2A0je:before,.button_hds-button__2A0je :before{box-sizing:border-box}.button_hds-button__2A0je[type=button],.button_hds-button__2A0je[type=reset],.button_hds-button__2A0je[type=submit]{-webkit-appearance:button}.button_hds-button__2A0je::-moz-focus-inner,.button_hds-button__2A0je[type=button]::-moz-focus-inner,.button_hds-button__2A0je[type=reset]::-moz-focus-inner,.button_hds-button__2A0je[type=submit]::-moz-focus-inner{border-style:none;padding:0}.button_hds-button__2A0je:-moz-focusring,.button_hds-button__2A0je[type=button]:-moz-focusring,.button_hds-button__2A0je[type=reset]:-moz-focusring,.button_hds-button__2A0je[type=submit]:-moz-focusring{outline:1px dotted ButtonText}.button_hds-button__2A0je.button_focus-visible__gEJLP,.button_hds-button__2A0je:focus-visible,.button_hds-button__2A0je:hover{transition-duration:85ms;transition-property:background-color,border-color,color;transition-timing-function:ease-out}.button_hds-button__2A0je:hover{background-color:var(--background-color-hover,transparent);color:var(--color-hover)}.button_hds-button__2A0je.button_focus-visible__gEJLP,.button_hds-button__2A0je:active,.button_hds-button__2A0je:focus-visible{background-color:var(--background-color-focus,transparent);color:var(--color-focus);outline:none}.button_hds-button__2A0je:not(:disabled){border-color:var(--border-color,transparent)}.button_hds-button__2A0je:disabled{background-color:var(--background-color-disabled,transparent);border-color:var(--border-color-disabled,transparent);color:var(--color-disabled);cursor:not-allowed}.button_hds-button__2A0je.button_focus-visible__gEJLP:hover,.button_hds-button__2A0je:active:hover,.button_hds-button__2A0je:focus-visible:hover{background-color:var(--background-color-hover-focus,transparent)}.button_hds-button__2A0je:not(:disabled):hover{border-color:var(--border-color-hover,transparent)}.button_hds-button__2A0je:not(:disabled).button_focus-visible__gEJLP,.button_hds-button__2A0je:not(:disabled):active,.button_hds-button__2A0je:not(:disabled):focus-visible{border-color:var(--border-color-focus,transparent)}.button_hds-button__2A0je:not(:disabled).button_focus-visible__gEJLP:hover,.button_hds-button__2A0je:not(:disabled):active:hover,.button_hds-button__2A0je:not(:disabled):focus-visible:hover{border-color:var(--border-color-hover-focus,transparent);color:var(--color-hover-focus)}.button_hds-button__2A0je:after{--size:100%;border:var(--outline-width) solid transparent;content:"";height:var(--size);position:absolute;width:var(--size)}.button_hds-button__2A0je.button_focus-visible__gEJLP:after,.button_hds-button__2A0je:active:after,.button_hds-button__2A0je:focus-visible:after{--size:calc(100% + calc(var(--outline-width) * 2 + var(--border-width) * 2 + var(--outline-gutter) * 2));border-color:var(--focus-outline-color)}.button_hds-button__label__2EQa-,input[type=submit].button_hds-button__2A0je{font-weight:inherit;line-height:1.25em;padding:var(--spacing-s)}input[type=submit].button_hds-button__2A0je{cursor:pointer;padding:var(--spacing-s) var(--spacing-l)}input[type=submit].button_hds-button__2A0je.button_focus-visible__gEJLP,input[type=submit].button_hds-button__2A0je:focus-visible{box-shadow:0 0 0 var(--outline-gutter) var(--submit-input-focus-gutter-color),0 0 0 calc(var(--outline-gutter) + var(--outline-width)) var(--focus-outline-color)}.button_hds-button__label__2EQa-:only-child{margin:0 var(--spacing-2-xs)}.button_hds-button--small__2NFef .button_hds-button__label__2EQa-,input[type=submit].button_hds-button--small__2NFef{line-height:var(--lineheight-s);padding:var(--spacing-2-xs) var(--spacing-xs)}.button_hds-button--supplementary__GcHcV .button_hds-button__label__2EQa-:first-child{padding-right:var(--spacing-2-xs)}.button_hds-button--small__2NFef .button_hds-button__label__2EQa-:only-child{margin:0 var(--spacing-xs)}.button_hds-button--supplementary__GcHcV .button_hds-icon__17j8Z+.button_hds-button__label__2EQa-:last-child{padding-left:var(--spacing-2-xs)}.button_hds-button--supplementary__GcHcV .button_hds-icon__17j8Z+.button_hds-button__label__2EQa-:not(:last-child){padding-left:var(--spacing-2-xs);padding-right:var(--spacing-2-xs)}.button_hds-button--small__2NFef{padding:0}input[type=submit].button_hds-button--small__2NFef{padding:var(--spacing-2-xs) var(--spacing-m)}.button_hds-button--small__2NFef .button_hds-button__label__2EQa-:not(:first-of-type):not(:last-of-type){padding:var(--spacing-2-xs) var(--spacing-2-xs)}.button_hds-button--fullwidth__1_hG9{width:100%}.button_hds-button__2A0je .button_hds-icon__17j8Z{height:var(--spacing-m);margin-left:var(--spacing-s);width:var(--spacing-m)}.button_hds-button__label__2EQa-~.button_hds-icon__17j8Z{margin:0 var(--spacing-s) 0 0}.button_hds-button--small__2NFef .button_hds-icon__17j8Z{margin-left:var(--spacing-2-xs)}.button_hds-button__2A0je .button_hds-button--small__2NFef .button_hds-button__label__2EQa-~.button_hds-icon__17j8Z{margin:0 var(--spacing-2-xs) 0 0}.button_hds-button__2A0je .button_hds-icon__17j8Z:first-of-type:not(:last-of-type){margin:0 0 0 var(--spacing-2-xs)}.button_hds-button__2A0je .button_hds-icon__17j8Z:last-of-type:not(:first-of-type){margin:0 var(--spacing-2-xs) 0 0}.button_hds-button--small__2NFef .button_hds-icon__17j8Z:first-child:not(:last-of-type){margin:0 0 0 var(--spacing-2-xs)}.button_hds-button--small__2NFef .button_hds-icon__17j8Z:last-child:not(:first-of-type){margin:0 var(--spacing-2-xs) 0 0}.button_hds-button--primary__2NVvO{--background-color:var(--color-bus);--background-color-hover:var(--color-bus-dark);--background-color-focus:var(--color-bus);--background-color-hover-focus:var(--color-bus-dark);--background-color-disabled:var(--color-black-20);--border-color:var(--color-bus);--border-color-hover:var(--color-bus-dark);--border-color-focus:var(--color-bus);--border-color-hover-focus:var(--color-bus-dark);--border-color-disabled:var(--color-black-20);--color:var(--color-white);--color-hover:var(--color-white);--color-focus:var(--color-white);--color-hover-focus:var(--color-white);--color-disabled:var(--color-white)}.button_hds-button--primary__2NVvO,.button_hds-button--secondary__1NOWS{--focus-outline-color:var(--color-focus-outline);--submit-input-focus-gutter-color:var(--color-white)}.button_hds-button--secondary__1NOWS{--border-color:var(--color-bus);--border-color-hover:var(--color-bus-dark);--border-color-focus:var(--color-bus);--border-color-hover-focus:var(--color-bus-dark);--border-color-disabled:var(--color-black-50)}.button_hds-button--secondary__1NOWS,.button_hds-button--supplementary__GcHcV{--background-color:transparent;--background-color-hover:var(--color-bus-light);--background-color-focus:transparent;--background-color-hover-focus:var(--color-bus-light);--background-color-disabled:transparent;--color:var(--color-bus);--color-hover:var(--color-bus-dark);--color-focus:var(--color-bus);--color-hover-focus:var(--color-bus-dark);--color-disabled:var(--color-black-40)}.button_hds-button--supplementary__GcHcV{--border-color:transparent;--border-color-hover:transparent;--border-color-focus:var(--color-focus-outline);--border-color-hover-focus:var(--color-focus-outline);--border-color-disabled:transparent;--focus-outline-color:transparent;--submit-input-focus-gutter-color:transparent}.button_hds-button--loading__2mLjh{--background-color:transparent;--background-color-hover:transparent;--background-color-focus:transparent;--background-color-hover-focus:transparent;--background-color-disabled:transparent;--border-color:transparent;--border-color-hover:transparent;--border-color-focus:transparent;--border-color-hover-focus:transparent;--border-color-disabled:transparent;--color:var(--color-black-90);--color-hover:var(--color-black-90);--color-focus:var(--color-black-90);--color-hover-focus:var(--color-black-90);--color-disabled:var(--color-black-90);cursor:wait}.button_hds-button--success__9hpuD{--background-color:var(--color-success);--background-color-hover:var(--color-success-dark);--background-color-focus:var(--color-success);--background-color-hover-focus:var(--color-success-dark);--border-color:var(--color-success);--border-color-hover:var(--color-success-dark);--border-color-focus:var(--color-success);--border-color-hover-focus:var(--color-success-dark)}.button_hds-button--danger__dEREN,.button_hds-button--success__9hpuD{--color:var(--color-white);--color-hover:var(--color-white);--color-focus:var(--color-white);--color-hover-focus:var(--color-white);--focus-outline-color:var(--color-focus-outline)}.button_hds-button--danger__dEREN{--background-color:var(--color-error);--background-color-hover:var(--color-error-dark);--background-color-focus:var(--color-error);--background-color-hover-focus:var(--color-error-dark);--border-color:var(--color-error);--border-color-hover:var(--color-error-dark);--border-color-focus:var(--color-error);--border-color-hover-focus:var(--color-error-dark)}.button_hds-button--primary__2NVvO.button_hds-button--theme-coat__12cO0{--background-color:var(--color-coat-of-arms);--background-color-hover:var(--color-coat-of-arms-dark);--background-color-focus:var(--color-coat-of-arms);--background-color-hover-focus:var(--color-coat-of-arms-dark);--color:var(--color-white);--color-hover:var(--color-white);--color-focus:var(--color-white);--color-hover-focus:var(--color-white)}.button_hds-button--primary__2NVvO.button_hds-button--theme-coat__12cO0,.button_hds-button--secondary__1NOWS.button_hds-button--theme-coat__12cO0{--border-color:var(--color-coat-of-arms);--border-color-hover:var(--color-coat-of-arms-dark);--border-color-focus:var(--color-coat-of-arms);--border-color-hover-focus:var(--color-coat-of-arms-dark)}.button_hds-button--secondary__1NOWS.button_hds-button--theme-coat__12cO0,.button_hds-button--supplementary__GcHcV.button_hds-button--theme-coat__12cO0{--background-color:transparent;--background-color-hover:var(--color-coat-of-arms-light);--background-color-focus:transparent;--background-color-hover-focus:var(--color-coat-of-arms-light);--color:var(--color-coat-of-arms);--color-hover:var(--color-coat-of-arms);--color-focus:var(--color-coat-of-arms);--color-hover-focus:var(--color-coat-of-arms)}.button_hds-button--supplementary__GcHcV.button_hds-button--theme-coat__12cO0{--border-color:transparent;--border-color-hover:transparent;--border-color-focus:var(--color-focus-outline);--border-color-hover-focus:var(--color-focus-outline)}.button_hds-button--primary__2NVvO.button_hds-button--theme-black__3K_k4{--background-color:var(--color-black);--background-color-hover:var(--color-black);--background-color-focus:var(--color-black);--background-color-hover-focus:var(--color-black);--color:var(--color-white);--color-hover:var(--color-white);--color-focus:var(--color-white);--color-hover-focus:var(--color-white)}.button_hds-button--primary__2NVvO.button_hds-button--theme-black__3K_k4,.button_hds-button--secondary__1NOWS.button_hds-button--theme-black__3K_k4{--border-color:var(--color-black);--border-color-hover:var(--color-black);--border-color-focus:var(--color-black);--border-color-hover-focus:var(--color-black)}.button_hds-button--secondary__1NOWS.button_hds-button--theme-black__3K_k4,.button_hds-button--supplementary__GcHcV.button_hds-button--theme-black__3K_k4{--background-color:transparent;--background-color-hover:var(--color-black-5);--background-color-focus:transparent;--background-color-hover-focus:var(--color-black-5);--color:var(--color-black);--color-hover:var(--color-black);--color-focus:var(--color-black);--color-hover-focus:var(--color-black)}.button_hds-button--supplementary__GcHcV.button_hds-button--theme-black__3K_k4{--border-color:transparent;--border-color-hover:transparent;--border-color-focus:var(--color-focus-outline);--border-color-hover-focus:var(--color-focus-outline)}.Button-module_icon__O-h7R svg{max-height:100%;max-width:100%}');const c=r.forwardRef(((e,t)=>{var{children:n,className:i,disabled:c=!1,fullWidth:u,size:l="default",theme:g="default",variant:h="primary",iconLeft:f,iconRight:p,isLoading:m=!1,loadingText:R,onClick:b}=e,y=(0,a._)(e,["children","className","disabled","fullWidth","size","theme","variant","iconLeft","iconRight","isLoading","loadingText","onClick"]);const v=f?r.createElement("div",{className:s.icon,"aria-hidden":"true"},f):null,_=p?r.createElement("div",{className:(0,o.c)(s.icon),"aria-hidden":"true"},p):null;return r.createElement("button",Object.assign({ref:t,disabled:c,"aria-disabled":m||c||void 0,"aria-label":m?R:void 0,type:"button",className:(0,o.c)(s.button,s[h],s["theme-"+g],s["size-"+l],u?s.fullWidth:"",m?s.isLoading:"",i),onClick:m?e=>{e.preventDefault()}:b},y),m?r.createElement(d.L,{small:!0}):v,r.createElement("span",{className:s.label},m?R:n),m?null:_)}))},89060:function(e,t,n){"use strict";function a(e,t){if(null==e)return{};var n,a,r={},i=Object.keys(e);for(a=0;a<i.length;a++)n=i[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}function r(){return r=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},r.apply(this,arguments)}n.d(t,{D:function(){return xn},a:function(){return tn},b:function(){return kn},c:function(){return jt},g:function(){return En},u:function(){return Mn}});var i=n(97326),o=n(94578),d=n(26917),s=n(67294),c=n(62004),u=n.n(c),l=n(34300),g=n(32659),h="function"==typeof Symbol&&Symbol.for,f=h?Symbol.for("react.element"):60103,p=h?Symbol.for("react.portal"):60106,m=h?Symbol.for("react.fragment"):60107,R=h?Symbol.for("react.strict_mode"):60108,b=h?Symbol.for("react.profiler"):60114,y=h?Symbol.for("react.provider"):60109,v=h?Symbol.for("react.context"):60110,_=h?Symbol.for("react.async_mode"):60111,w=h?Symbol.for("react.concurrent_mode"):60111,M=h?Symbol.for("react.forward_ref"):60112,x=h?Symbol.for("react.suspense"):60113,E=h?Symbol.for("react.suspense_list"):60120,S=h?Symbol.for("react.memo"):60115,k=h?Symbol.for("react.lazy"):60116,N=h?Symbol.for("react.block"):60121,D=h?Symbol.for("react.fundamental"):60117,A=h?Symbol.for("react.responder"):60118,j=h?Symbol.for("react.scope"):60119;function T(e){if("object"==typeof e&&null!==e){var t=e.$$typeof;switch(t){case f:switch(e=e.type){case _:case w:case m:case b:case R:case x:return e;default:switch(e=e&&e.$$typeof){case v:case M:case k:case S:case y:return e;default:return t}}case p:return t}}}function L(e){return T(e)===w}var I={AsyncMode:_,ConcurrentMode:w,ContextConsumer:v,ContextProvider:y,Element:f,ForwardRef:M,Fragment:m,Lazy:k,Memo:S,Portal:p,Profiler:b,StrictMode:R,Suspense:x,isAsyncMode:function(e){return L(e)||T(e)===_},isConcurrentMode:L,isContextConsumer:function(e){return T(e)===v},isContextProvider:function(e){return T(e)===y},isElement:function(e){return"object"==typeof e&&null!==e&&e.$$typeof===f},isForwardRef:function(e){return T(e)===M},isFragment:function(e){return T(e)===m},isLazy:function(e){return T(e)===k},isMemo:function(e){return T(e)===S},isPortal:function(e){return T(e)===p},isProfiler:function(e){return T(e)===b},isStrictMode:function(e){return T(e)===R},isSuspense:function(e){return T(e)===x},isValidElementType:function(e){return"string"==typeof e||"function"==typeof e||e===m||e===w||e===b||e===R||e===x||e===E||"object"==typeof e&&null!==e&&(e.$$typeof===k||e.$$typeof===S||e.$$typeof===y||e.$$typeof===v||e.$$typeof===M||e.$$typeof===D||e.$$typeof===A||e.$$typeof===j||e.$$typeof===N)},typeOf:T},C=((0,d.c)((function(e,t){})),(0,d.c)((function(e){e.exports=I})),Object.getOwnPropertySymbols),O=Object.prototype.hasOwnProperty,P=Object.prototype.propertyIsEnumerable,z=(function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;var a=Object.getOwnPropertyNames(t).map((function(e){return t[e]}));if("0123456789"!==a.join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach((function(e){r[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(e){return!1}}()&&Object.assign,"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");Function.call.bind(Object.prototype.hasOwnProperty);function B(e,t,n,a,r){}B.resetWarningCache=function(){};function F(){}function U(){}U.resetWarningCache=F;var $=(0,d.c)((function(e){e.exports=function(){function e(e,t,n,a,r,i){if(i!==z){var o=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw o.name="Invariant Violation",o}}function t(){return e}e.isRequired=e;var n={array:e,bigint:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:U,resetWarningCache:F};return n.PropTypes=n,n}()})),H="function"==typeof Symbol&&Symbol.for,q=H?Symbol.for("react.element"):60103,Y=H?Symbol.for("react.portal"):60106,G=H?Symbol.for("react.fragment"):60107,V=H?Symbol.for("react.strict_mode"):60108,Q=H?Symbol.for("react.profiler"):60114,W=H?Symbol.for("react.provider"):60109,K=H?Symbol.for("react.context"):60110,Z=H?Symbol.for("react.async_mode"):60111,X=H?Symbol.for("react.concurrent_mode"):60111,J=H?Symbol.for("react.forward_ref"):60112,ee=H?Symbol.for("react.suspense"):60113,te=H?Symbol.for("react.suspense_list"):60120,ne=H?Symbol.for("react.memo"):60115,ae=H?Symbol.for("react.lazy"):60116,re=H?Symbol.for("react.block"):60121,ie=H?Symbol.for("react.fundamental"):60117,oe=H?Symbol.for("react.responder"):60118,de=H?Symbol.for("react.scope"):60119;function se(e){if("object"==typeof e&&null!==e){var t=e.$$typeof;switch(t){case q:switch(e=e.type){case Z:case X:case G:case Q:case V:case ee:return e;default:switch(e=e&&e.$$typeof){case K:case J:case ae:case ne:case W:return e;default:return t}}case Y:return t}}}function ce(e){return se(e)===X}var ue={AsyncMode:Z,ConcurrentMode:X,ContextConsumer:K,ContextProvider:W,Element:q,ForwardRef:J,Fragment:G,Lazy:ae,Memo:ne,Portal:Y,Profiler:Q,StrictMode:V,Suspense:ee,isAsyncMode:function(e){return ce(e)||se(e)===Z},isConcurrentMode:ce,isContextConsumer:function(e){return se(e)===K},isContextProvider:function(e){return se(e)===W},isElement:function(e){return"object"==typeof e&&null!==e&&e.$$typeof===q},isForwardRef:function(e){return se(e)===J},isFragment:function(e){return se(e)===G},isLazy:function(e){return se(e)===ae},isMemo:function(e){return se(e)===ne},isPortal:function(e){return se(e)===Y},isProfiler:function(e){return se(e)===Q},isStrictMode:function(e){return se(e)===V},isSuspense:function(e){return se(e)===ee},isValidElementType:function(e){return"string"==typeof e||"function"==typeof e||e===G||e===X||e===Q||e===V||e===ee||e===te||"object"==typeof e&&null!==e&&(e.$$typeof===ae||e.$$typeof===ne||e.$$typeof===W||e.$$typeof===K||e.$$typeof===J||e.$$typeof===ie||e.$$typeof===oe||e.$$typeof===de||e.$$typeof===re)},typeOf:se};(0,d.c)((function(e,t){})),(0,d.c)((function(e){e.exports=ue}));function le(e){return"object"==typeof e&&null!=e&&1===e.nodeType}function ge(e,t){return(!t||"hidden"!==e)&&"visible"!==e&&"clip"!==e}function he(e,t){if(e.clientHeight<e.scrollHeight||e.clientWidth<e.scrollWidth){var n=getComputedStyle(e,null);return ge(n.overflowY,t)||ge(n.overflowX,t)||function(e){var t=function(e){if(!e.ownerDocument||!e.ownerDocument.defaultView)return null;try{return e.ownerDocument.defaultView.frameElement}catch(e){return null}}(e);return!!t&&(t.clientHeight<e.scrollHeight||t.clientWidth<e.scrollWidth)}(e)}return!1}function fe(e,t,n,a,r,i,o,d){return i<e&&o>t||i>e&&o<t?0:i<=e&&d<=n||o>=t&&d>=n?i-e-a:o>t&&d<n||i<e&&d>n?o-t+r:0}var pe=0;function me(e){return"function"==typeof e?e:Re}function Re(){}function be(e,t){if(e){var n=function(e,t){var n=window,a=t.scrollMode,r=t.block,i=t.inline,o=t.boundary,d=t.skipOverflowHiddenElements,s="function"==typeof o?o:function(e){return e!==o};if(!le(e))throw new TypeError("Invalid target");for(var c,u,l=document.scrollingElement||document.documentElement,g=[],h=e;le(h)&&s(h);){if((h=null==(u=(c=h).parentElement)?c.getRootNode().host||null:u)===l){g.push(h);break}null!=h&&h===document.body&&he(h)&&!he(document.documentElement)||null!=h&&he(h,d)&&g.push(h)}for(var f=n.visualViewport?n.visualViewport.width:innerWidth,p=n.visualViewport?n.visualViewport.height:innerHeight,m=window.scrollX||pageXOffset,R=window.scrollY||pageYOffset,b=e.getBoundingClientRect(),y=b.height,v=b.width,_=b.top,w=b.right,M=b.bottom,x=b.left,E="start"===r||"nearest"===r?_:"end"===r?M:_+y/2,S="center"===i?x+v/2:"end"===i?w:x,k=[],N=0;N<g.length;N++){var D=g[N],A=D.getBoundingClientRect(),j=A.height,T=A.width,L=A.top,I=A.right,C=A.bottom,O=A.left;if("if-needed"===a&&_>=0&&x>=0&&M<=p&&w<=f&&_>=L&&M<=C&&x>=O&&w<=I)return k;var P=getComputedStyle(D),z=parseInt(P.borderLeftWidth,10),B=parseInt(P.borderTopWidth,10),F=parseInt(P.borderRightWidth,10),U=parseInt(P.borderBottomWidth,10),$=0,H=0,q="offsetWidth"in D?D.offsetWidth-D.clientWidth-z-F:0,Y="offsetHeight"in D?D.offsetHeight-D.clientHeight-B-U:0,G="offsetWidth"in D?0===D.offsetWidth?0:T/D.offsetWidth:0,V="offsetHeight"in D?0===D.offsetHeight?0:j/D.offsetHeight:0;if(l===D)$="start"===r?E:"end"===r?E-p:"nearest"===r?fe(R,R+p,p,B,U,R+E,R+E+y,y):E-p/2,H="start"===i?S:"center"===i?S-f/2:"end"===i?S-f:fe(m,m+f,f,z,F,m+S,m+S+v,v),$=Math.max(0,$+R),H=Math.max(0,H+m);else{$="start"===r?E-L-B:"end"===r?E-C+U+Y:"nearest"===r?fe(L,C,j,B,U+Y,E,E+y,y):E-(L+j/2)+Y/2,H="start"===i?S-O-z:"center"===i?S-(O+T/2)+q/2:"end"===i?S-I+F+q:fe(O,I,T,z,F+q,S,S+v,v);var Q=D.scrollLeft,W=D.scrollTop;E+=W-($=Math.max(0,Math.min(W+$/V,D.scrollHeight-j/V+Y))),S+=Q-(H=Math.max(0,Math.min(Q+H/G,D.scrollWidth-T/G+q)))}k.push({el:D,top:$,left:H})}return k}(e,{boundary:t,block:"nearest",scrollMode:"if-needed"});n.forEach((function(e){var t=e.el,n=e.top,a=e.left;t.scrollTop=n,t.scrollLeft=a}))}}function ye(e,t){return e===t||e.contains&&e.contains(t)}function ve(e,t){var n;function a(){n&&clearTimeout(n)}function r(){for(var r=arguments.length,i=new Array(r),o=0;o<r;o++)i[o]=arguments[o];a(),n=setTimeout((function(){n=null,e.apply(void 0,i)}),t)}return r.cancel=a,r}function _e(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return function(e){for(var n=arguments.length,a=new Array(n>1?n-1:0),r=1;r<n;r++)a[r-1]=arguments[r];return t.some((function(t){return t&&t.apply(void 0,[e].concat(a)),e.preventDownshiftDefault||e.hasOwnProperty("nativeEvent")&&e.nativeEvent.preventDownshiftDefault}))}}function we(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return function(e){t.forEach((function(t){"function"==typeof t?t(e):t&&(t.current=e)}))}}function Me(){return String(pe++)}function xe(e){var t=e.isOpen,n=e.resultCount,a=e.previousResultCount;return t?n?n!==a?n+" result"+(1===n?" is":"s are")+" available, use up and down arrow keys to navigate. Press Enter key to select.":"":"No results are available.":""}function Ee(e,t){return!(e=Array.isArray(e)?e[0]:e)&&t?t:e}var Se=["highlightedIndex","inputValue","isOpen","selectedItem","type"];function ke(e){void 0===e&&(e={});var t={};return Se.forEach((function(n){e.hasOwnProperty(n)&&(t[n]=e[n])})),t}function Ne(e,t){return Object.keys(e).reduce((function(n,a){return n[a]=De(t,a)?t[a]:e[a],n}),{})}function De(e,t){return void 0!==e[t]}function Ae(e){var t=e.key,n=e.keyCode;return n>=37&&n<=40&&0!==t.indexOf("Arrow")?"Arrow"+t:t}function je(e,t,n,a,r){if(void 0===r&&(r=!0),0===n)return-1;var i=n-1;("number"!=typeof t||t<0||t>=n)&&(t=e>0?-1:i+1);var o=t+e;o<0?o=r?i:0:o>i&&(o=r?0:i);var d=Te(e,o,n,a,r);return-1===d?t>=n?-1:t:d}function Te(e,t,n,a,r){var i=a(t);if(!i||!i.hasAttribute("disabled"))return t;if(e>0){for(var o=t+1;o<n;o++)if(!a(o).hasAttribute("disabled"))return o}else for(var d=t-1;d>=0;d--)if(!a(d).hasAttribute("disabled"))return d;return r?e>0?Te(1,0,n,a,!1):Te(-1,n-1,n,a,!1):-1}function Le(e,t,n,a){return void 0===a&&(a=!0),t.some((function(t){return t&&(ye(t,e)||a&&ye(t,n.activeElement))}))}var Ie=ve((function(){Oe().textContent=""}),500);function Ce(e,t){var n=Oe(t);e&&(n.textContent=e,Ie())}function Oe(e){void 0===e&&(e=document);var t=e.getElementById("a11y-status-message");return t||((t=e.createElement("div")).setAttribute("id","a11y-status-message"),t.setAttribute("role","status"),t.setAttribute("aria-live","polite"),t.setAttribute("aria-relevant","additions text"),Object.assign(t.style,{border:"0",clip:"rect(0 0 0 0)",height:"1px",margin:"-1px",overflow:"hidden",padding:"0",position:"absolute",width:"1px"}),e.body.appendChild(t),t)}var Pe,ze=Object.freeze({__proto__:null,unknown:0,mouseUp:1,itemMouseEnter:2,keyDownArrowUp:3,keyDownArrowDown:4,keyDownEscape:5,keyDownEnter:6,keyDownHome:7,keyDownEnd:8,clickItem:9,blurInput:10,changeInput:11,keyDownSpaceButton:12,clickButton:13,blurButton:14,controlledPropUpdatedSelectedItem:15,touchEnd:16});Pe=function(e){function t(t){var n=e.call(this,t)||this;n.id=n.props.id||"downshift-"+Me(),n.menuId=n.props.menuId||n.id+"-menu",n.labelId=n.props.labelId||n.id+"-label",n.inputId=n.props.inputId||n.id+"-input",n.getItemId=n.props.getItemId||function(e){return n.id+"-item-"+e},n.input=null,n.items=[],n.itemCount=null,n.previousResultCount=0,n.timeoutIds=[],n.internalSetTimeout=function(e,t){var a=setTimeout((function(){n.timeoutIds=n.timeoutIds.filter((function(e){return e!==a})),e()}),t);n.timeoutIds.push(a)},n.setItemCount=function(e){n.itemCount=e},n.unsetItemCount=function(){n.itemCount=null},n.setHighlightedIndex=function(e,t){void 0===e&&(e=n.props.defaultHighlightedIndex),void 0===t&&(t={}),t=ke(t),n.internalSetState(r({highlightedIndex:e},t))},n.clearSelection=function(e){n.internalSetState({selectedItem:null,inputValue:"",highlightedIndex:n.props.defaultHighlightedIndex,isOpen:n.props.defaultIsOpen},e)},n.selectItem=function(e,t,a){t=ke(t),n.internalSetState(r({isOpen:n.props.defaultIsOpen,highlightedIndex:n.props.defaultHighlightedIndex,selectedItem:e,inputValue:n.props.itemToString(e)},t),a)},n.selectItemAtIndex=function(e,t,a){var r=n.items[e];null!=r&&n.selectItem(r,t,a)},n.selectHighlightedItem=function(e,t){return n.selectItemAtIndex(n.getState().highlightedIndex,e,t)},n.internalSetState=function(e,t){var a,i,o={},d="function"==typeof e;return!d&&e.hasOwnProperty("inputValue")&&n.props.onInputValueChange(e.inputValue,r({},n.getStateAndHelpers(),e)),n.setState((function(t){t=n.getState(t);var s=d?e(t):e;s=n.props.stateReducer(t,s),a=s.hasOwnProperty("selectedItem");var c={},u={};return a&&s.selectedItem!==t.selectedItem&&(i=s.selectedItem),s.type=s.type||0,Object.keys(s).forEach((function(e){t[e]!==s[e]&&(o[e]=s[e]),"type"!==e&&(u[e]=s[e],De(n.props,e)||(c[e]=s[e]))})),d&&s.hasOwnProperty("inputValue")&&n.props.onInputValueChange(s.inputValue,r({},n.getStateAndHelpers(),s)),c}),(function(){me(t)(),Object.keys(o).length>1&&n.props.onStateChange(o,n.getStateAndHelpers()),a&&n.props.onSelect(e.selectedItem,n.getStateAndHelpers()),void 0!==i&&n.props.onChange(i,n.getStateAndHelpers()),n.props.onUserAction(o,n.getStateAndHelpers())}))},n.rootRef=function(e){return n._rootNode=e},n.getRootProps=function(e,t){var i,o=void 0===e?{}:e,d=o.refKey,s=void 0===d?"ref":d,c=o.ref,u=a(o,["refKey","ref"]),l=(void 0===t?{}:t).suppressRefError,g=void 0!==l&&l;n.getRootProps.called=!0,n.getRootProps.refKey=s,n.getRootProps.suppressRefError=g;var h=n.getState().isOpen;return r(((i={})[s]=we(c,n.rootRef),i.role="combobox",i["aria-expanded"]=h,i["aria-haspopup"]="listbox",i["aria-owns"]=h?n.menuId:null,i["aria-labelledby"]=n.labelId,i),u)},n.keyDownHandlers={ArrowDown:function(e){var t=this;if(e.preventDefault(),this.getState().isOpen){var n=e.shiftKey?5:1;this.moveHighlightedIndex(n,{type:4})}else this.internalSetState({isOpen:!0,type:4},(function(){var e=t.getItemCount();if(e>0){var n=je(1,t.getState().highlightedIndex,e,(function(e){return t.getItemNodeFromIndex(e)}));t.setHighlightedIndex(n,{type:4})}}))},ArrowUp:function(e){var t=this;if(e.preventDefault(),this.getState().isOpen){var n=e.shiftKey?-5:-1;this.moveHighlightedIndex(n,{type:3})}else this.internalSetState({isOpen:!0,type:3},(function(){var e=t.getItemCount();if(e>0){var n=je(-1,t.getState().highlightedIndex,e,(function(e){return t.getItemNodeFromIndex(e)}));t.setHighlightedIndex(n,{type:3})}}))},Enter:function(e){if(229!==e.which){var t=this.getState(),n=t.isOpen,a=t.highlightedIndex;if(n&&null!=a){e.preventDefault();var r=this.items[a],i=this.getItemNodeFromIndex(a);if(null==r||i&&i.hasAttribute("disabled"))return;this.selectHighlightedItem({type:6})}}},Escape:function(e){e.preventDefault(),this.reset(r({type:5},!this.state.isOpen&&{selectedItem:null,inputValue:""}))}},n.buttonKeyDownHandlers=r({},n.keyDownHandlers,{" ":function(e){e.preventDefault(),this.toggleMenu({type:12})}}),n.inputKeyDownHandlers=r({},n.keyDownHandlers,{Home:function(e){var t=this;e.preventDefault();var n=this.getItemCount(),a=this.getState().isOpen;if(!(n<=0)&&a){var r=Te(1,0,n,(function(e){return t.getItemNodeFromIndex(e)}),!1);this.setHighlightedIndex(r,{type:7})}},End:function(e){var t=this;e.preventDefault();var n=this.getItemCount(),a=this.getState().isOpen;if(!(n<=0)&&a){var r=Te(-1,n-1,n,(function(e){return t.getItemNodeFromIndex(e)}),!1);this.setHighlightedIndex(r,{type:8})}}}),n.getToggleButtonProps=function(e){var t=void 0===e?{}:e,i=t.onClick;t.onPress;var o=t.onKeyDown,d=t.onKeyUp,s=t.onBlur,c=a(t,["onClick","onPress","onKeyDown","onKeyUp","onBlur"]),u=n.getState().isOpen,l={onClick:_e(i,n.buttonHandleClick),onKeyDown:_e(o,n.buttonHandleKeyDown),onKeyUp:_e(d,n.buttonHandleKeyUp),onBlur:_e(s,n.buttonHandleBlur)};return r({type:"button",role:"button","aria-label":u?"close menu":"open menu","aria-haspopup":!0,"data-toggle":!0},c.disabled?{}:l,c)},n.buttonHandleKeyUp=function(e){e.preventDefault()},n.buttonHandleKeyDown=function(e){var t=Ae(e);n.buttonKeyDownHandlers[t]&&n.buttonKeyDownHandlers[t].call((0,i.Z)(n),e)},n.buttonHandleClick=function(e){e.preventDefault(),n.props.environment.document.activeElement===n.props.environment.document.body&&e.target.focus(),n.internalSetTimeout((function(){return n.toggleMenu({type:13})}))},n.buttonHandleBlur=function(e){var t=e.target;n.internalSetTimeout((function(){n.isMouseDown||null!=n.props.environment.document.activeElement&&n.props.environment.document.activeElement.id===n.inputId||n.props.environment.document.activeElement===t||n.reset({type:14})}))},n.getLabelProps=function(e){return r({htmlFor:n.inputId,id:n.labelId},e)},n.getInputProps=function(e){var t=void 0===e?{}:e,i=t.onKeyDown,o=t.onBlur,d=t.onChange,s=t.onInput;t.onChangeText;var c,u=a(t,["onKeyDown","onBlur","onChange","onInput","onChangeText"]),l={},g=n.getState(),h=g.inputValue,f=g.isOpen,p=g.highlightedIndex;return u.disabled||((c={}).onChange=_e(d,s,n.inputHandleChange),c.onKeyDown=_e(i,n.inputHandleKeyDown),c.onBlur=_e(o,n.inputHandleBlur),l=c),r({"aria-autocomplete":"list","aria-activedescendant":f&&"number"==typeof p&&p>=0?n.getItemId(p):null,"aria-controls":f?n.menuId:null,"aria-labelledby":n.labelId,autoComplete:"off",value:h,id:n.inputId},l,u)},n.inputHandleKeyDown=function(e){var t=Ae(e);t&&n.inputKeyDownHandlers[t]&&n.inputKeyDownHandlers[t].call((0,i.Z)(n),e)},n.inputHandleChange=function(e){n.internalSetState({type:11,isOpen:!0,inputValue:e.target.value,highlightedIndex:n.props.defaultHighlightedIndex})},n.inputHandleBlur=function(){n.internalSetTimeout((function(){var e=n.props.environment.document&&!!n.props.environment.document.activeElement&&!!n.props.environment.document.activeElement.dataset&&n.props.environment.document.activeElement.dataset.toggle&&n._rootNode&&n._rootNode.contains(n.props.environment.document.activeElement);n.isMouseDown||e||n.reset({type:10})}))},n.menuRef=function(e){n._menuNode=e},n.getMenuProps=function(e,t){var i,o=void 0===e?{}:e,d=o.refKey,s=void 0===d?"ref":d,c=o.ref,u=a(o,["refKey","ref"]),l=(void 0===t?{}:t).suppressRefError,g=void 0!==l&&l;return n.getMenuProps.called=!0,n.getMenuProps.refKey=s,n.getMenuProps.suppressRefError=g,r(((i={})[s]=we(c,n.menuRef),i.role="listbox",i["aria-labelledby"]=u&&u["aria-label"]?null:n.labelId,i.id=n.menuId,i),u)},n.getItemProps=function(e){var t,i=void 0===e?{}:e,o=i.onMouseMove,d=i.onMouseDown,s=i.onClick;i.onPress;var c=i.index,u=i.item,l=void 0===u?void 0:u,g=a(i,["onMouseMove","onMouseDown","onClick","onPress","index","item"]);void 0===c?(n.items.push(l),c=n.items.indexOf(l)):n.items[c]=l;var h=s,f=((t={onMouseMove:_e(o,(function(){c!==n.getState().highlightedIndex&&(n.setHighlightedIndex(c,{type:2}),n.avoidScrolling=!0,n.internalSetTimeout((function(){return n.avoidScrolling=!1}),250))})),onMouseDown:_e(d,(function(e){e.preventDefault()}))}).onClick=_e(h,(function(){n.selectItemAtIndex(c,{type:9})})),t),p=g.disabled?{onMouseDown:f.onMouseDown}:f;return r({id:n.getItemId(c),role:"option","aria-selected":n.getState().highlightedIndex===c},p,g)},n.clearItems=function(){n.items=[]},n.reset=function(e,t){void 0===e&&(e={}),e=ke(e),n.internalSetState((function(t){var a=t.selectedItem;return r({isOpen:n.props.defaultIsOpen,highlightedIndex:n.props.defaultHighlightedIndex,inputValue:n.props.itemToString(a)},e)}),t)},n.toggleMenu=function(e,t){void 0===e&&(e={}),e=ke(e),n.internalSetState((function(t){var a=t.isOpen;return r({isOpen:!a},a&&{highlightedIndex:n.props.defaultHighlightedIndex},e)}),(function(){var a=n.getState(),r=a.isOpen,i=a.highlightedIndex;r&&n.getItemCount()>0&&"number"==typeof i&&n.setHighlightedIndex(i,e),me(t)()}))},n.openMenu=function(e){n.internalSetState({isOpen:!0},e)},n.closeMenu=function(e){n.internalSetState({isOpen:!1},e)},n.updateStatus=ve((function(){var e=n.getState(),t=n.items[e.highlightedIndex],a=n.getItemCount(),i=n.props.getA11yStatusMessage(r({itemToString:n.props.itemToString,previousResultCount:n.previousResultCount,resultCount:a,highlightedItem:t},e));n.previousResultCount=a,Ce(i,n.props.environment.document)}),200);var o=n.props,d=o.defaultHighlightedIndex,s=o.initialHighlightedIndex,c=void 0===s?d:s,u=o.defaultIsOpen,l=o.initialIsOpen,g=void 0===l?u:l,h=o.initialInputValue,f=void 0===h?"":h,p=o.initialSelectedItem,m=void 0===p?null:p,R=n.getState({highlightedIndex:c,isOpen:g,inputValue:f,selectedItem:m});return null!=R.selectedItem&&void 0===n.props.initialInputValue&&(R.inputValue=n.props.itemToString(R.selectedItem)),n.state=R,n}(0,o.Z)(t,e);var n=t.prototype;return n.internalClearTimeouts=function(){this.timeoutIds.forEach((function(e){clearTimeout(e)})),this.timeoutIds=[]},n.getState=function(e){return void 0===e&&(e=this.state),Ne(e,this.props)},n.getItemCount=function(){var e=this.items.length;return null!=this.itemCount?e=this.itemCount:void 0!==this.props.itemCount&&(e=this.props.itemCount),e},n.getItemNodeFromIndex=function(e){return this.props.environment.document.getElementById(this.getItemId(e))},n.scrollHighlightedItemIntoView=function(){var e=this.getItemNodeFromIndex(this.getState().highlightedIndex);this.props.scrollIntoView(e,this._menuNode)},n.moveHighlightedIndex=function(e,t){var n=this,a=this.getItemCount(),r=this.getState().highlightedIndex;if(a>0){var i=je(e,r,a,(function(e){return n.getItemNodeFromIndex(e)}));this.setHighlightedIndex(i,t)}},n.getStateAndHelpers=function(){var e=this.getState(),t=e.highlightedIndex,n=e.inputValue,a=e.selectedItem,r=e.isOpen,i=this.props.itemToString,o=this.id,d=this.getRootProps,s=this.getToggleButtonProps,c=this.getLabelProps,u=this.getMenuProps,l=this.getInputProps,g=this.getItemProps,h=this.openMenu,f=this.closeMenu,p=this.toggleMenu,m=this.selectItem,R=this.selectItemAtIndex,b=this.selectHighlightedItem,y=this.setHighlightedIndex,v=this.clearSelection,_=this.clearItems;return{getRootProps:d,getToggleButtonProps:s,getLabelProps:c,getMenuProps:u,getInputProps:l,getItemProps:g,reset:this.reset,openMenu:h,closeMenu:f,toggleMenu:p,selectItem:m,selectItemAtIndex:R,selectHighlightedItem:b,setHighlightedIndex:y,clearSelection:v,clearItems:_,setItemCount:this.setItemCount,unsetItemCount:this.unsetItemCount,setState:this.internalSetState,itemToString:i,id:o,highlightedIndex:t,inputValue:n,isOpen:r,selectedItem:a}},n.componentDidMount=function(){var e=this,t=function(){e.isMouseDown=!0},n=function(t){e.isMouseDown=!1,!Le(t.target,[e._rootNode,e._menuNode],e.props.environment.document)&&e.getState().isOpen&&e.reset({type:1},(function(){return e.props.onOuterClick(e.getStateAndHelpers())}))},a=function(){e.isTouchMove=!1},r=function(){e.isTouchMove=!0},i=function(t){var n=Le(t.target,[e._rootNode,e._menuNode],e.props.environment.document,!1);e.isTouchMove||n||!e.getState().isOpen||e.reset({type:16},(function(){return e.props.onOuterClick(e.getStateAndHelpers())}))},o=this.props.environment;o.addEventListener("mousedown",t),o.addEventListener("mouseup",n),o.addEventListener("touchstart",a),o.addEventListener("touchmove",r),o.addEventListener("touchend",i),this.cleanup=function(){e.internalClearTimeouts(),e.updateStatus.cancel(),o.removeEventListener("mousedown",t),o.removeEventListener("mouseup",n),o.removeEventListener("touchstart",a),o.removeEventListener("touchmove",r),o.removeEventListener("touchend",i)}},n.shouldScroll=function(e,t){var n=(void 0===this.props.highlightedIndex?this.getState():this.props).highlightedIndex,a=(void 0===t.highlightedIndex?e:t).highlightedIndex;return n&&this.getState().isOpen&&!e.isOpen||n!==a},n.componentDidUpdate=function(e,t){De(this.props,"selectedItem")&&this.props.selectedItemChanged(e.selectedItem,this.props.selectedItem)&&this.internalSetState({type:15,inputValue:this.props.itemToString(this.props.selectedItem)}),!this.avoidScrolling&&this.shouldScroll(t,e)&&this.scrollHighlightedItemIntoView(),this.updateStatus()},n.componentWillUnmount=function(){this.cleanup()},n.render=function(){var e=Ee(this.props.children,Re);this.clearItems(),this.getRootProps.called=!1,this.getRootProps.refKey=void 0,this.getRootProps.suppressRefError=void 0,this.getMenuProps.called=!1,this.getMenuProps.refKey=void 0,this.getMenuProps.suppressRefError=void 0,this.getLabelProps.called=!1,this.getInputProps.called=!1;var t=Ee(e(this.getStateAndHelpers()));return t?this.getRootProps.called||this.props.suppressRefError?t:function(e){return"string"==typeof e.type}(t)?(0,s.cloneElement)(t,this.getRootProps(function(e){return e.props}(t))):void 0:null},t}(s.Component),Pe.defaultProps={defaultHighlightedIndex:null,defaultIsOpen:!1,getA11yStatusMessage:xe,itemToString:function(e){return null==e?"":String(e)},onStateChange:Re,onInputValueChange:Re,onUserAction:Re,onChange:Re,onSelect:Re,onOuterClick:Re,selectedItemChanged:function(e,t){return e!==t},environment:"undefined"==typeof window?{}:window,stateReducer:function(e,t){return t},suppressRefError:!1,scrollIntoView:be},Pe.stateChangeTypes=ze;var Be={highlightedIndex:-1,isOpen:!1,selectedItem:null,inputValue:""};var Fe=ve((function(e,t){Ce(e(),t)}),200);function Ue(e){var t=e.id,n=e.labelId,a=e.menuId,r=e.getItemId,i=e.toggleButtonId,o=void 0===t?"downshift-"+Me():t;return{labelId:n||o+"-label",menuId:a||o+"-menu",getItemId:r||function(e){return o+"-item-"+e},toggleButtonId:i||o+"-toggle-button"}}function $e(e,t,n){return void 0!==e?e:0===n.length?-1:n.indexOf(t)}function He(e){return/^\S{1}$/.test(e)}function qe(e){return""+e.slice(0,1).toUpperCase()+e.slice(1)}function Ye(e){var t=(0,s.useRef)(e);return t.current=e,t}function Ge(e,t,n){var a=(0,s.useRef)(),i=(0,s.useRef)(),o=(0,s.useCallback)((function(t,n){i.current=n,t=Ne(t,n.props);var a=e(t,n);return n.props.stateReducer(t,r({},n,{changes:a}))}),[e]),d=(0,s.useReducer)(o,t),c=d[0],u=d[1],l=Ye(n),g=(0,s.useCallback)((function(e){return u(r({props:l.current},e))}),[l]),h=i.current;return(0,s.useEffect)((function(){h&&a.current&&a.current!==c&&function(e,t,n){var a=e.props,i=e.type,o={};Object.keys(t).forEach((function(a){!function(e,t,n,a){var i=t.props,o=t.type,d="on"+qe(e)+"Change";i[d]&&void 0!==a[e]&&a[e]!==n[e]&&i[d](r({type:o},a))}(a,e,t,n),n[a]!==t[a]&&(o[a]=n[a])})),a.onStateChange&&Object.keys(o).length&&a.onStateChange(r({type:i},o))}(h,Ne(a.current,h.props),c),a.current=c}),[c,n,h]),[c,g]}function Ve(e,t,n){var a=Ge(e,t,n),r=a[0],i=a[1];return[Ne(r,n),i]}var Qe={itemToString:function(e){return e?String(e):""},stateReducer:function(e,t){return t.changes},getA11ySelectionMessage:function(e){var t=e.selectedItem,n=e.itemToString;return t?n(t)+" has been selected.":""},scrollIntoView:be,circularNavigation:!1,environment:"undefined"==typeof window?{}:window};function We(e,t,n){void 0===n&&(n=Be);var a="default"+qe(t);return a in e?e[a]:n[t]}function Ke(e,t,n){if(void 0===n&&(n=Be),t in e)return e[t];var a="initial"+qe(t);return a in e?e[a]:We(e,t,n)}function Ze(e){var t=Ke(e,"selectedItem"),n=Ke(e,"isOpen"),a=Ke(e,"highlightedIndex"),r=Ke(e,"inputValue");return{highlightedIndex:a<0&&t&&n?e.items.indexOf(t):a,isOpen:n,selectedItem:t,inputValue:r}}function Xe(e,t,n,a){var r=e.items,i=e.initialHighlightedIndex,o=e.defaultHighlightedIndex,d=t.selectedItem,s=t.highlightedIndex;return 0===r.length?-1:void 0!==i&&s===i?i:void 0!==o?o:d?0===n?r.indexOf(d):je(n,r.indexOf(d),r.length,a,!1):0===n?-1:n<0?r.length-1:0}function Je(e,t,n,a){var r=(0,s.useRef)({isMouseDown:!1,isTouchMove:!1});return(0,s.useEffect)((function(){var i=function(){r.current.isMouseDown=!0},o=function(i){r.current.isMouseDown=!1,e&&!Le(i.target,t.map((function(e){return e.current})),n.document)&&a()},d=function(){r.current.isTouchMove=!1},s=function(){r.current.isTouchMove=!0},c=function(i){!e||r.current.isTouchMove||Le(i.target,t.map((function(e){return e.current})),n.document,!1)||a()};return n.addEventListener("mousedown",i),n.addEventListener("mouseup",o),n.addEventListener("touchstart",d),n.addEventListener("touchmove",s),n.addEventListener("touchend",c),function(){n.removeEventListener("mousedown",i),n.removeEventListener("mouseup",o),n.removeEventListener("touchstart",d),n.removeEventListener("touchmove",s),n.removeEventListener("touchend",c)}}),[e,n]),r}function et(){(0,s.useRef)(!0);for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];(0,s.useRef)(t.reduce((function(e,t){return e[t]={},e}),{}));return(0,s.useEffect)((function(){})),(0,s.useCallback)((function(e,t,n,a){}),[])}function tt(e,t,n){var i=n.isInitialMount,o=n.previousResultCount,d=n.highlightedIndex,c=n.items,u=n.environment,l=a(n,["isInitialMount","previousResultCount","highlightedIndex","items","environment"]);(0,s.useEffect)((function(){i||Fe((function(){return e(r({highlightedIndex:d,highlightedItem:c[d],resultCount:c.length,previousResultCount:o},l))}),u.document)}),t)}function nt(e){var t=e.highlightedIndex,n=e.isOpen,a=e.itemRefs,r=e.getItemNodeFromIndex,i=e.menuElement,o=e.scrollIntoView,d=(0,s.useRef)(!0);return(0,s.useEffect)((function(){t<0||!n||!Object.keys(a.current).length||(!1===d.current?d.current=!0:o(r(t),i))}),[t]),d}function at(e){var t=e.isInitialMount,n=e.props,a=e.state,r=(0,s.useRef)(n);(0,s.useEffect)((function(){t||(r.current,r.current=n)}),[a,n,t])}function rt(e,t,n,a,r){for(var i=n.map((function(e){return a(e).toLowerCase()})),o=e.toLowerCase(),d=function(e,t){var n=r(t);return e.startsWith(o)&&!(n&&n.hasAttribute("disabled"))},s=t+1;s<i.length;s++)if(d(i[s],s))return s;for(var c=0;c<t;c++)if(d(i[c],c))return c;return t}$.array.isRequired,$.func,$.func,$.func,$.bool,$.number,$.number,$.number,$.bool,$.bool,$.bool,$.any,$.any,$.any,$.string,$.string,$.string,$.func,$.string,$.func,$.func,$.func,$.func,$.func,$.shape({addEventListener:$.func,removeEventListener:$.func,document:$.shape({getElementById:$.func,activeElement:$.any,body:$.any})});var it=r({},Qe,{getA11yStatusMessage:function(e){var t=e.isOpen,n=e.resultCount,a=e.previousResultCount;return t?n?n!==a?n+" result"+(1===n?" is":"s are")+" available, use up and down arrow keys to navigate. Press Enter or Space Bar keys to select.":"":"No results are available.":""}}),ot=0,dt=1,st=2,ct=3,ut=4,lt=5,gt=6,ht=7,ft=8,pt=9,mt=10,Rt=11,bt=12,yt=13,vt=14,_t=15,wt=16,Mt=17,xt=18,Et=19,St=20,kt=21,Nt=22,Dt=Object.freeze({__proto__:null,MenuKeyDownArrowDown:ot,MenuKeyDownArrowUp:dt,MenuKeyDownEscape:st,MenuKeyDownHome:ct,MenuKeyDownEnd:ut,MenuKeyDownEnter:lt,MenuKeyDownSpaceButton:gt,MenuKeyDownCharacter:ht,MenuBlur:ft,MenuMouseLeave:pt,ItemMouseMove:mt,ItemClick:Rt,ToggleButtonClick:bt,ToggleButtonKeyDownArrowDown:yt,ToggleButtonKeyDownArrowUp:vt,ToggleButtonKeyDownCharacter:_t,FunctionToggleMenu:wt,FunctionOpenMenu:Mt,FunctionCloseMenu:xt,FunctionSetHighlightedIndex:Et,FunctionSelectItem:St,FunctionSetInputValue:kt,FunctionReset:Nt});function At(e,t){var n,a=t.type,i=t.props,o=t.shiftKey;switch(a){case mt:n={highlightedIndex:t.index};break;case Rt:n={isOpen:We(i,"isOpen"),highlightedIndex:We(i,"highlightedIndex"),selectedItem:i.items[t.index]};break;case _t:var d=t.key,s=""+e.inputValue+d,c=rt(s,e.selectedItem?i.items.indexOf(e.selectedItem):-1,i.items,i.itemToString,t.getItemNodeFromIndex);n=r({inputValue:s},c>=0&&{selectedItem:i.items[c]});break;case yt:n={highlightedIndex:Xe(i,e,1,t.getItemNodeFromIndex),isOpen:!0};break;case vt:n={highlightedIndex:Xe(i,e,-1,t.getItemNodeFromIndex),isOpen:!0};break;case lt:case gt:n=r({isOpen:We(i,"isOpen"),highlightedIndex:We(i,"highlightedIndex")},e.highlightedIndex>=0&&{selectedItem:i.items[e.highlightedIndex]});break;case ct:n={highlightedIndex:Te(1,0,i.items.length,t.getItemNodeFromIndex,!1)};break;case ut:n={highlightedIndex:Te(-1,i.items.length-1,i.items.length,t.getItemNodeFromIndex,!1)};break;case st:case ft:n={isOpen:!1,highlightedIndex:-1};break;case ht:var u=t.key,l=""+e.inputValue+u,g=rt(l,e.highlightedIndex,i.items,i.itemToString,t.getItemNodeFromIndex);n=r({inputValue:l},g>=0&&{highlightedIndex:g});break;case ot:n={highlightedIndex:je(o?5:1,e.highlightedIndex,i.items.length,t.getItemNodeFromIndex,i.circularNavigation)};break;case dt:n={highlightedIndex:je(o?-5:-1,e.highlightedIndex,i.items.length,t.getItemNodeFromIndex,i.circularNavigation)};break;case pt:n={highlightedIndex:-1};break;case bt:case wt:n={isOpen:!e.isOpen,highlightedIndex:e.isOpen?-1:Xe(i,e,0)};break;case Mt:n={isOpen:!0,highlightedIndex:Xe(i,e,0)};break;case xt:n={isOpen:!1};break;case Et:n={highlightedIndex:t.highlightedIndex};break;case St:n={selectedItem:t.selectedItem};break;case kt:n={inputValue:t.inputValue};break;case Nt:n={highlightedIndex:We(i,"highlightedIndex"),isOpen:We(i,"isOpen"),selectedItem:We(i,"selectedItem"),inputValue:We(i,"inputValue")};break;default:throw new Error("Reducer called without proper action type.")}return r({},e,n)}function jt(e){void 0===e&&(e={});var t=r({},it,e),n=t.items,i=t.scrollIntoView,o=t.environment,d=t.initialIsOpen,c=t.defaultIsOpen,u=t.itemToString,l=t.getA11ySelectionMessage,g=t.getA11yStatusMessage,h=Ve(At,Ze(t),t),f=h[0],p=h[1],m=f.isOpen,R=f.highlightedIndex,b=f.selectedItem,y=f.inputValue,v=(0,s.useRef)(null),_=(0,s.useRef)(null),w=(0,s.useRef)();w.current={};var M=(0,s.useRef)(!0),x=(0,s.useRef)(null),E=(0,s.useRef)(Ue(t)),S=(0,s.useRef)(),k=(0,s.useRef)(!0),N=Ye({state:f,props:t}),D=function(e){return w.current[E.current.getItemId(e)]};tt(g,[m,R,y,n],r({isInitialMount:k.current,previousResultCount:S.current,items:n,environment:o,itemToString:u},f)),tt(l,[b],r({isInitialMount:k.current,previousResultCount:S.current,items:n,environment:o,itemToString:u},f));var A=nt({menuElement:_.current,highlightedIndex:R,isOpen:m,itemRefs:w,scrollIntoView:i,getItemNodeFromIndex:D});(0,s.useEffect)((function(){k.current&&(x.current=ve((function(e){e({type:kt,inputValue:""})}),500)),y&&x.current(p)}),[p,y]),at({isInitialMount:k.current,props:t,state:f}),(0,s.useEffect)((function(){k.current?(d||c||m)&&_.current&&_.current.focus():m?_.current&&_.current.focus():o.document.activeElement===_.current&&v.current&&(M.current=!1,v.current.focus())}),[m]),(0,s.useEffect)((function(){k.current||(S.current=n.length)}));var j=Je(m,[_,v],o,(function(){p({type:ft})})),T=et("getMenuProps","getToggleButtonProps");(0,s.useEffect)((function(){k.current=!1}),[]);var L=(0,s.useMemo)((function(){return{ArrowDown:function(e){e.preventDefault(),p({type:yt,getItemNodeFromIndex:D,shiftKey:e.shiftKey})},ArrowUp:function(e){e.preventDefault(),p({type:vt,getItemNodeFromIndex:D,shiftKey:e.shiftKey})}}}),[p]),I=(0,s.useMemo)((function(){return{ArrowDown:function(e){e.preventDefault(),p({type:ot,getItemNodeFromIndex:D,shiftKey:e.shiftKey})},ArrowUp:function(e){e.preventDefault(),p({type:dt,getItemNodeFromIndex:D,shiftKey:e.shiftKey})},Home:function(e){e.preventDefault(),p({type:ct,getItemNodeFromIndex:D})},End:function(e){e.preventDefault(),p({type:ut,getItemNodeFromIndex:D})},Escape:function(){p({type:st})},Enter:function(e){e.preventDefault(),p({type:lt})}," ":function(e){e.preventDefault(),p({type:gt})}}}),[p]),C=(0,s.useCallback)((function(){p({type:wt})}),[p]),O=(0,s.useCallback)((function(){p({type:xt})}),[p]),P=(0,s.useCallback)((function(){p({type:Mt})}),[p]),z=(0,s.useCallback)((function(e){p({type:Et,highlightedIndex:e})}),[p]),B=(0,s.useCallback)((function(e){p({type:St,selectedItem:e})}),[p]),F=(0,s.useCallback)((function(){p({type:Nt})}),[p]),U=(0,s.useCallback)((function(e){p({type:kt,inputValue:e})}),[p]),$=(0,s.useCallback)((function(e){return r({id:E.current.labelId,htmlFor:E.current.toggleButtonId},e)}),[]),H=(0,s.useCallback)((function(e,t){var n,i=void 0===e?{}:e,o=i.onMouseLeave,d=i.refKey,s=void 0===d?"ref":d,c=i.onKeyDown,u=i.onBlur,l=i.ref,g=a(i,["onMouseLeave","refKey","onKeyDown","onBlur","ref"]),h=(void 0===t?{}:t).suppressRefError,f=void 0!==h&&h,m=N.current.state;return T("getMenuProps",f,s,_),r(((n={})[s]=we(l,(function(e){_.current=e})),n.id=E.current.menuId,n.role="listbox",n["aria-labelledby"]=E.current.labelId,n.tabIndex=-1,n),m.isOpen&&m.highlightedIndex>-1&&{"aria-activedescendant":E.current.getItemId(m.highlightedIndex)},{onMouseLeave:_e(o,(function(){p({type:pt})})),onKeyDown:_e(c,(function(e){var t=Ae(e);t&&I[t]?I[t](e):He(t)&&p({type:ht,key:t,getItemNodeFromIndex:D})})),onBlur:_e(u,(function(){!1!==M.current?!j.current.isMouseDown&&p({type:ft}):M.current=!0}))},g)}),[p,N,I,j,T]);return{getToggleButtonProps:(0,s.useCallback)((function(e,t){var n,i=void 0===e?{}:e,o=i.onClick,d=i.onKeyDown,s=i.refKey,c=void 0===s?"ref":s,u=i.ref,l=a(i,["onClick","onKeyDown","refKey","ref"]),g=(void 0===t?{}:t).suppressRefError,h=void 0!==g&&g,f=r(((n={})[c]=we(u,(function(e){v.current=e})),n.id=E.current.toggleButtonId,n["aria-haspopup"]="listbox",n["aria-expanded"]=N.current.state.isOpen,n["aria-labelledby"]=E.current.labelId+" "+E.current.toggleButtonId,n),l);return l.disabled||(f.onClick=_e(o,(function(){p({type:bt})})),f.onKeyDown=_e(d,(function(e){var t=Ae(e);t&&L[t]?L[t](e):He(t)&&p({type:_t,key:t,getItemNodeFromIndex:D})}))),T("getToggleButtonProps",h,c,v),f}),[p,N,L,T]),getLabelProps:$,getMenuProps:H,getItemProps:(0,s.useCallback)((function(e){var t,n=void 0===e?{}:e,i=n.item,o=n.index,d=n.onMouseMove,s=n.onClick,c=n.refKey,u=void 0===c?"ref":c,l=n.ref,g=a(n,["item","index","onMouseMove","onClick","refKey","ref"]),h=N.current,f=h.state,m=h.props,R=$e(o,i,m.items);if(R<0)throw new Error("Pass either item or item index in getItemProps!");var b=r(((t={role:"option","aria-selected":""+(R===f.highlightedIndex),id:E.current.getItemId(R)})[u]=we(l,(function(e){e&&(w.current[E.current.getItemId(R)]=e)})),t),g);return g.disabled||(b.onMouseMove=_e(d,(function(){o!==f.highlightedIndex&&(A.current=!1,p({type:mt,index:o}))})),b.onClick=_e(s,(function(){p({type:Rt,index:o})}))),b}),[p,N,A]),toggleMenu:C,openMenu:P,closeMenu:O,setHighlightedIndex:z,selectItem:B,reset:F,setInputValue:U,highlightedIndex:R,isOpen:m,selectedItem:b,inputValue:y}}jt.stateChangeTypes=Dt;var Tt=0,Lt=1,It=2,Ct=3,Ot=4,Pt=5,zt=6,Bt=7,Ft=8,Ut=9,$t=10,Ht=11,qt=12,Yt=13,Gt=14,Vt=15,Qt=16,Wt=17,Kt=18,Zt=19,Xt=Object.freeze({__proto__:null,InputKeyDownArrowDown:Tt,InputKeyDownArrowUp:Lt,InputKeyDownEscape:It,InputKeyDownHome:Ct,InputKeyDownEnd:Ot,InputKeyDownEnter:Pt,InputChange:zt,InputBlur:Bt,MenuMouseLeave:Ft,ItemMouseMove:Ut,ItemClick:$t,ToggleButtonClick:Ht,FunctionToggleMenu:qt,FunctionOpenMenu:Yt,FunctionCloseMenu:Gt,FunctionSetHighlightedIndex:Vt,FunctionSelectItem:Qt,FunctionSetInputValue:Wt,FunctionReset:Kt,ControlledPropUpdatedSelectedItem:Zt}),Jt=($.array.isRequired,$.func,$.func,$.func,$.bool,$.number,$.number,$.number,$.bool,$.bool,$.bool,$.any,$.any,$.any,$.string,$.string,$.string,$.string,$.string,$.string,$.func,$.string,$.string,$.func,$.func,$.func,$.func,$.func,$.func,$.shape({addEventListener:$.func,removeEventListener:$.func,document:$.shape({getElementById:$.func,activeElement:$.any,body:$.any})}),r({},Qe,{getA11yStatusMessage:xe,circularNavigation:!0}));function en(e,t){var n,a=t.type,i=t.props,o=t.shiftKey;switch(a){case Ut:n={highlightedIndex:t.index};break;case $t:n={isOpen:We(i,"isOpen"),highlightedIndex:We(i,"highlightedIndex"),selectedItem:i.items[t.index],inputValue:i.itemToString(i.items[t.index])};break;case Tt:n=e.isOpen?{highlightedIndex:je(o?5:1,e.highlightedIndex,i.items.length,t.getItemNodeFromIndex,i.circularNavigation)}:{highlightedIndex:Xe(i,e,1,t.getItemNodeFromIndex),isOpen:!0};break;case Lt:n=e.isOpen?{highlightedIndex:je(o?-5:-1,e.highlightedIndex,i.items.length,t.getItemNodeFromIndex,i.circularNavigation)}:{highlightedIndex:Xe(i,e,-1,t.getItemNodeFromIndex),isOpen:!0};break;case Pt:n=r({},e.isOpen&&e.highlightedIndex>=0&&{selectedItem:i.items[e.highlightedIndex],isOpen:We(i,"isOpen"),highlightedIndex:We(i,"highlightedIndex"),inputValue:i.itemToString(i.items[e.highlightedIndex])});break;case It:n=r({isOpen:!1,highlightedIndex:-1},!e.isOpen&&{selectedItem:null,inputValue:""});break;case Ct:n=r({},e.isOpen&&{highlightedIndex:Te(1,0,i.items.length,t.getItemNodeFromIndex,!1)});break;case Ot:n=r({},e.isOpen&&{highlightedIndex:Te(-1,i.items.length-1,i.items.length,t.getItemNodeFromIndex,!1)});break;case Bt:e.isOpen&&(n=r({isOpen:!1,highlightedIndex:-1},e.highlightedIndex>=0&&t.selectItem&&{selectedItem:i.items[e.highlightedIndex],inputValue:i.itemToString(i.items[e.highlightedIndex])}));break;case zt:n={isOpen:!0,highlightedIndex:We(i,"highlightedIndex"),inputValue:t.inputValue};break;case Ft:n={highlightedIndex:-1};break;case Ht:case qt:n={isOpen:!e.isOpen,highlightedIndex:e.isOpen?-1:Xe(i,e,0)};break;case Yt:n={isOpen:!0,highlightedIndex:Xe(i,e,0)};break;case Gt:n={isOpen:!1};break;case Vt:n={highlightedIndex:t.highlightedIndex};break;case Qt:n={selectedItem:t.selectedItem,inputValue:i.itemToString(t.selectedItem)};break;case Zt:case Wt:n={inputValue:t.inputValue};break;case Kt:n={highlightedIndex:We(i,"highlightedIndex"),isOpen:We(i,"isOpen"),selectedItem:We(i,"selectedItem"),inputValue:We(i,"inputValue")};break;default:throw new Error("Reducer called without proper action type.")}return r({},e,n)}function tn(e){void 0===e&&(e={});var t=r({},Jt,e),n=t.initialIsOpen,i=t.defaultIsOpen,o=t.items,d=t.scrollIntoView,c=t.environment,u=t.getA11yStatusMessage,l=t.getA11ySelectionMessage,g=t.itemToString,h=function(e){var t=Ze(e),n=t.selectedItem,a=t.inputValue;return""===a&&n&&void 0===e.defaultInputValue&&void 0===e.initialInputValue&&void 0===e.inputValue&&(a=e.itemToString(n)),r({},t,{inputValue:a})}(t),f=function(e,t,n){var a=(0,s.useRef)(),r=Ge(e,t,n),i=r[0],o=r[1];return(0,s.useEffect)((function(){De(n,"selectedItem")&&(a.current!==n.selectedItem&&o({type:Zt,inputValue:n.itemToString(n.selectedItem)}),a.current=i.selectedItem===a.current?n.selectedItem:i.selectedItem)})),[Ne(i,n),o]}(en,h,t),p=f[0],m=f[1],R=p.isOpen,b=p.highlightedIndex,y=p.selectedItem,v=p.inputValue,_=(0,s.useRef)(null),w=(0,s.useRef)(),M=(0,s.useRef)(null),x=(0,s.useRef)(null),E=(0,s.useRef)(null);w.current={};var S,k,N,D,A,j=(0,s.useRef)(!0),T=(0,s.useRef)((k=(S=t).id,N=S.inputId,D=a(S,["id","inputId"]),A=void 0===k?"downshift-"+Me():k,r({inputId:N||A+"-input"},Ue(r({id:k},D))))),L=(0,s.useRef)(),I=Ye({state:p,props:t}),C=function(e){return w.current[T.current.getItemId(e)]};tt(u,[R,b,v,o],r({isInitialMount:j.current,previousResultCount:L.current,items:o,environment:c,itemToString:g},p)),tt(l,[y],r({isInitialMount:j.current,previousResultCount:L.current,items:o,environment:c,itemToString:g},p));var O=nt({menuElement:_.current,highlightedIndex:b,isOpen:R,itemRefs:w,scrollIntoView:d,getItemNodeFromIndex:C});at({isInitialMount:j.current,props:t,state:p}),(0,s.useEffect)((function(){j.current&&(n||i||R)&&M.current&&M.current.focus()}),[R]),(0,s.useEffect)((function(){j.current||(L.current=o.length)}));var P=Je(R,[E,_,x],c,(function(){m({type:Bt,selectItem:!1})})),z=et("getInputProps","getComboboxProps","getMenuProps");(0,s.useEffect)((function(){j.current=!1}),[]);var B=(0,s.useMemo)((function(){return{ArrowDown:function(e){e.preventDefault(),m({type:Tt,shiftKey:e.shiftKey,getItemNodeFromIndex:C})},ArrowUp:function(e){e.preventDefault(),m({type:Lt,shiftKey:e.shiftKey,getItemNodeFromIndex:C})},Home:function(e){e.preventDefault(),m({type:Ct,getItemNodeFromIndex:C})},End:function(e){e.preventDefault(),m({type:Ot,getItemNodeFromIndex:C})},Escape:function(){m({type:It})},Enter:function(e){229!==e.which&&(I.current.state.isOpen&&e.preventDefault(),m({type:Pt,getItemNodeFromIndex:C}))}}}),[m,I]),F=(0,s.useCallback)((function(e){return r({id:T.current.labelId,htmlFor:T.current.inputId},e)}),[]),U=(0,s.useCallback)((function(e,t){var n,i=void 0===e?{}:e,o=i.onMouseLeave,d=i.refKey,s=void 0===d?"ref":d,c=i.ref,u=a(i,["onMouseLeave","refKey","ref"]),l=(void 0===t?{}:t).suppressRefError;return z("getMenuProps",void 0!==l&&l,s,_),r(((n={})[s]=we(c,(function(e){_.current=e})),n.id=T.current.menuId,n.role="listbox",n["aria-labelledby"]=T.current.labelId,n.onMouseLeave=_e(o,(function(){m({type:Ft})})),n),u)}),[m,z]),$=(0,s.useCallback)((function(e){var t,n,i=void 0===e?{}:e,o=i.item,d=i.index,s=i.refKey,c=void 0===s?"ref":s,u=i.ref,l=i.onMouseMove,g=i.onClick;i.onPress;var h=a(i,["item","index","refKey","ref","onMouseMove","onClick","onPress"]),f=I.current,p=f.props,R=f.state,b=$e(d,o,p.items);if(b<0)throw new Error("Pass either item or item index in getItemProps!");var y=g;return r(((t={})[c]=we(u,(function(e){e&&(w.current[T.current.getItemId(b)]=e)})),t.role="option",t["aria-selected"]=""+(b===R.highlightedIndex),t.id=T.current.getItemId(b),t),!h.disabled&&((n={onMouseMove:_e(l,(function(){d!==R.highlightedIndex&&(O.current=!1,m({type:Ut,index:d}))}))}).onClick=_e(y,(function(){m({type:$t,index:d}),M.current&&M.current.focus()})),n),h)}),[m,I,O]),H=(0,s.useCallback)((function(e){var t,n=void 0===e?{}:e,i=n.onClick;n.onPress;var o=n.refKey,d=void 0===o?"ref":o,s=n.ref,c=a(n,["onClick","onPress","refKey","ref"]);return r(((t={})[d]=we(s,(function(e){x.current=e})),t.id=T.current.toggleButtonId,t.tabIndex=-1,t),!c.disabled&&r({},{onClick:_e(i,(function(){m({type:Ht}),!I.current.state.isOpen&&M.current&&M.current.focus()}))}),c)}),[m,I]),q=(0,s.useCallback)((function(e,t){var n,i=void 0===e?{}:e,o=i.onKeyDown,d=i.onChange,s=i.onInput,c=i.onBlur;i.onChangeText;var u=i.refKey,l=void 0===u?"ref":u,g=i.ref,h=a(i,["onKeyDown","onChange","onInput","onBlur","onChangeText","refKey","ref"]),f=(void 0===t?{}:t).suppressRefError;z("getInputProps",void 0!==f&&f,l,M);var p,R=I.current.state,b={};return h.disabled||((p={}).onChange=_e(d,s,(function(e){m({type:zt,inputValue:e.target.value})})),p.onKeyDown=_e(o,(function(e){var t=Ae(e);t&&B[t]&&B[t](e)})),p.onBlur=_e(c,(function(){P.current.isMouseDown||m({type:Bt,selectItem:!0})})),b=p),r(((n={})[l]=we(g,(function(e){M.current=e})),n.id=T.current.inputId,n["aria-autocomplete"]="list",n["aria-controls"]=T.current.menuId,n),R.isOpen&&R.highlightedIndex>-1&&{"aria-activedescendant":T.current.getItemId(R.highlightedIndex)},{"aria-labelledby":T.current.labelId,autoComplete:"off",value:R.inputValue},b,h)}),[m,B,I,P,z]),Y=(0,s.useCallback)((function(e,t){var n,i=void 0===e?{}:e,o=i.refKey,d=void 0===o?"ref":o,s=i.ref,c=a(i,["refKey","ref"]),u=(void 0===t?{}:t).suppressRefError;return z("getComboboxProps",void 0!==u&&u,d,E),r(((n={})[d]=we(s,(function(e){E.current=e})),n.role="combobox",n["aria-haspopup"]="listbox",n["aria-owns"]=T.current.menuId,n["aria-expanded"]=I.current.state.isOpen,n),c)}),[I,z]),G=(0,s.useCallback)((function(){m({type:qt})}),[m]),V=(0,s.useCallback)((function(){m({type:Gt})}),[m]),Q=(0,s.useCallback)((function(){m({type:Yt})}),[m]),W=(0,s.useCallback)((function(e){m({type:Vt,highlightedIndex:e})}),[m]),K=(0,s.useCallback)((function(e){m({type:Qt,selectedItem:e})}),[m]);return{getItemProps:$,getLabelProps:F,getMenuProps:U,getInputProps:q,getComboboxProps:Y,getToggleButtonProps:H,toggleMenu:G,openMenu:Q,closeMenu:V,setHighlightedIndex:W,setInputValue:(0,s.useCallback)((function(e){m({type:Wt,inputValue:e})}),[m]),selectItem:K,reset:(0,s.useCallback)((function(){m({type:Kt})}),[m]),highlightedIndex:b,isOpen:R,selectedItem:y,inputValue:v}}tn.stateChangeTypes=Xt;var nn={activeIndex:-1,selectedItems:[]};function an(e,t){return Ke(e,t,nn)}function rn(e,t){return We(e,t,nn)}function on(e){if(e.shiftKey||e.metaKey||e.ctrlKey||e.altKey)return!1;var t=e.target;return!(t instanceof HTMLInputElement&&""!==t.value)||0===t.selectionStart&&0===t.selectionEnd}$.array,$.array,$.array,$.func,$.func,$.func,$.number,$.number,$.number,$.func,$.func,$.string,$.string,$.shape({addEventListener:$.func,removeEventListener:$.func,document:$.shape({getElementById:$.func,activeElement:$.any,body:$.any})});var dn={itemToString:Qe.itemToString,stateReducer:Qe.stateReducer,environment:Qe.environment,getA11yRemovalMessage:function(e){var t=e.removedSelectedItem;return(0,e.itemToString)(t)+" has been removed."},keyNavigationNext:"ArrowRight",keyNavigationPrevious:"ArrowLeft"},sn=0,cn=1,un=2,ln=3,gn=4,hn=5,fn=6,pn=7,mn=8,Rn=9,bn=10,yn=11,vn=12,_n=Object.freeze({__proto__:null,SelectedItemClick:sn,SelectedItemKeyDownDelete:cn,SelectedItemKeyDownBackspace:un,SelectedItemKeyDownNavigationNext:ln,SelectedItemKeyDownNavigationPrevious:gn,DropdownKeyDownNavigationPrevious:hn,DropdownKeyDownBackspace:fn,DropdownClick:pn,FunctionAddSelectedItem:mn,FunctionRemoveSelectedItem:Rn,FunctionSetSelectedItems:bn,FunctionSetActiveIndex:yn,FunctionReset:vn});function wn(e,t){var n,a=t.type,i=t.index,o=t.props,d=t.selectedItem,s=e.activeIndex,c=e.selectedItems;switch(a){case sn:n={activeIndex:i};break;case gn:n={activeIndex:s-1<0?0:s-1};break;case ln:n={activeIndex:s+1>=c.length?-1:s+1};break;case un:case cn:var u=s;1===c.length?u=-1:s===c.length-1&&(u=c.length-2),n=r({selectedItems:[].concat(c.slice(0,s),c.slice(s+1))},{activeIndex:u});break;case hn:n={activeIndex:c.length-1};break;case fn:n={selectedItems:c.slice(0,c.length-1)};break;case mn:n={selectedItems:[].concat(c,[d])};break;case pn:n={activeIndex:-1};break;case Rn:var l=s,g=c.indexOf(d);1===c.length?l=-1:g===c.length-1&&(l=c.length-2),n=r({selectedItems:[].concat(c.slice(0,g),c.slice(g+1))},{activeIndex:l});break;case bn:n={selectedItems:t.selectedItems};break;case yn:n={activeIndex:t.activeIndex};break;case vn:n={activeIndex:rn(o,"activeIndex"),selectedItems:rn(o,"selectedItems")};break;default:throw new Error("Reducer called without proper action type.")}return r({},e,n)}function Mn(e){void 0===e&&(e={});var t,n=r({},dn,e),i=n.getA11yRemovalMessage,o=n.itemToString,d=n.environment,c=n.keyNavigationNext,u=n.keyNavigationPrevious,l=Ve(wn,{activeIndex:an(t=n,"activeIndex"),selectedItems:an(t,"selectedItems")},n),g=l[0],h=l[1],f=g.activeIndex,p=g.selectedItems,m=(0,s.useRef)(!0),R=(0,s.useRef)(null),b=(0,s.useRef)(p),y=(0,s.useRef)();y.current=[];var v=Ye({state:g,props:n});(0,s.useEffect)((function(){if(!m.current){if(p.length<b.current.length){var e=b.current.find((function(e){return p.indexOf(e)<0}));Ce(i({itemToString:o,resultCount:p.length,removedSelectedItem:e,activeIndex:f,activeSelectedItem:p[f]}),d.document)}b.current=p}}),[p.length]),(0,s.useEffect)((function(){m.current||(-1===f&&R.current?R.current.focus():y.current[f]&&y.current[f].focus())}),[f]),at({isInitialMount:m.current,props:n,state:g});var _=et("getDropdownProps");(0,s.useEffect)((function(){m.current=!1}),[]);var w=(0,s.useMemo)((function(){var e;return(e={})[u]=function(){h({type:gn})},e[c]=function(){h({type:ln})},e.Delete=function(){h({type:cn})},e.Backspace=function(){h({type:un})},e}),[h,c,u]),M=(0,s.useMemo)((function(){var e;return(e={})[u]=function(e){on(e)&&h({type:hn})},e.Backspace=function(e){on(e)&&h({type:fn})},e}),[h,u]);return{getSelectedItemProps:(0,s.useCallback)((function(e){var t,n=void 0===e?{}:e,i=n.refKey,o=void 0===i?"ref":i,d=n.ref,s=n.onClick,c=n.onKeyDown,u=n.selectedItem,l=n.index,g=a(n,["refKey","ref","onClick","onKeyDown","selectedItem","index"]),f=v.current.state;if($e(l,u,f.selectedItems)<0)throw new Error("Pass either selectedItem or index in getSelectedItemProps!");return r(((t={})[o]=we(d,(function(e){e&&y.current.push(e)})),t.tabIndex=l===f.activeIndex?0:-1,t.onClick=_e(s,(function(){h({type:sn,index:l})})),t.onKeyDown=_e(c,(function(e){var t=Ae(e);t&&w[t]&&w[t](e)})),t),g)}),[h,v,w]),getDropdownProps:(0,s.useCallback)((function(e,t){var n,i=void 0===e?{}:e,o=i.refKey,d=void 0===o?"ref":o,s=i.ref,c=i.onKeyDown,u=i.onClick,l=i.preventKeyAction,g=void 0!==l&&l,f=a(i,["refKey","ref","onKeyDown","onClick","preventKeyAction"]),p=(void 0===t?{}:t).suppressRefError;return _("getDropdownProps",void 0!==p&&p,d,R),r(((n={})[d]=we(s,(function(e){e&&(R.current=e)})),n),!g&&{onKeyDown:_e(c,(function(e){var t=Ae(e);t&&M[t]&&M[t](e)})),onClick:_e(u,(function(){h({type:pn})}))},f)}),[h,M,_]),addSelectedItem:(0,s.useCallback)((function(e){h({type:mn,selectedItem:e})}),[h]),removeSelectedItem:(0,s.useCallback)((function(e){h({type:Rn,selectedItem:e})}),[h]),setSelectedItems:(0,s.useCallback)((function(e){h({type:bn,selectedItems:e})}),[h]),setActiveIndex:(0,s.useCallback)((function(e){h({type:yn,activeIndex:e})}),[h]),reset:(0,s.useCallback)((function(){h({type:vn})}),[h]),selectedItems:p,activeIndex:f}}Mn.stateChangeTypes=_n;const xn=52;function En(e,t){return e.some((e=>u()(e,t)))}const Sn=e=>{let{disabled:t,highlightValue:n,itemProps:a,label:r,menuStyles:i,multiselect:o,selected:d}=e;const c=e=>{return s.createElement("span",{className:i.highlighted,dangerouslySetInnerHTML:{__html:(t=e,t.replace(new RegExp(n,"gi"),(e=>"<mark>"+e+"</mark>")))}});var t};return s.createElement("li",Object.assign({},a,{"aria-selected":d},t&&{"aria-disabled":!0}),o?s.createElement(s.Fragment,null,s.createElement("span",{className:i.checkbox,"aria-hidden":!0},s.createElement(g.I,null)),n?c(r):r):s.createElement(s.Fragment,null,n?c(r):r,d&&s.createElement(g.I,{className:i.selectedIcon})))},kn=e=>{let{getItemProps:t,highlightValue:n,isOptionDisabled:a,menuProps:r,menuStyles:i,multiselect:o,open:d,optionLabelField:c,optionKeyField:g,options:h,selectedItem:f,selectedItems:p,virtualizer:m}=e;const R=!!m,b=R?m.virtualItems:h;return s.createElement("ul",Object.assign({},r,{className:(0,l.c)(i.menu)}),d&&s.createElement(s.Fragment,null,R&&s.createElement("li",{key:"total-size","aria-hidden":!0,style:{height:m.totalSize}}),b.map(((e,r)=>{let d=r,l=null;R&&(({index:d}=e),l=e);const m=h[d],b=m[c],y=m[g],v=o?En(p,m):u()(f,m),_="function"==typeof a&&a(m,d),w=t(m,d,v,_,l);return s.createElement(Sn,{key:y,disabled:_,highlightValue:n,itemProps:w,menuStyles:i,multiselect:o,label:b,selected:v})}))))}},41125:function(e,t,n){"use strict";n.d(t,{F:function(){return s}});var a=n(80136),r=n(67294),i=n(7444),o=n(91267),d=n(45422);(0,i.s)(".FieldLabel-module_hidden__3UWxI{border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.FieldLabel-module_label__1zrXK{color:var(--label-color-default,var(--color-black-90));display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.FieldLabel-module_tooltipButton__1My3f{position:absolute;right:0;top:0}");const s=e=>{var{hidden:t,id:n,inputId:i,isAriaLabelledBy:s,label:c,required:u,tooltipLabel:l,tooltipButtonLabel:g,tooltipText:h}=e,f=(0,a._)(e,["hidden","id","inputId","isAriaLabelledBy","label","required","tooltipLabel","tooltipButtonLabel","tooltipText"]);return r.createElement(r.Fragment,null,r.createElement("label",Object.assign({id:n},(!s||!n)&&{htmlFor:i},{className:"FieldLabel-module_label__1zrXK "+(t?"FieldLabel-module_hidden__3UWxI":"")},f),c,u&&r.createElement(o.R,null)),h&&r.createElement(d.T,{buttonClassName:"FieldLabel-module_tooltipButton__1My3f",tooltipLabel:l,buttonLabel:g},h))}},41110:function(e,t,n){"use strict";n.d(t,{F:function(){return N}});var a=n(15785),r=n(67294),i=n(7444),o=n(34300),d=n(42215),s=n(42858),c=n(80136),u=n(12670),l=n(77516),g=n(21662),h=n(32152),f=n(97640),p=n(55810),m={"small-down":"only screen and (max-width:767.98px)","x-small-down":"only screen and (max-width:575.98px)","x-large-up":"only screen and (min-width:1248px)",footer:"Footer-module_footer__1aD3T","theme-dark":"Footer-module_theme-dark__1TGCV",koros:"Footer-module_koros__Orx_W",basic:"Footer-module_basic__2VejY",beat:"Footer-module_beat__2_JDj",pulse:"Footer-module_pulse__Aq8zn",wave:"Footer-module_wave__368B6",vibration:"Footer-module_vibration___dfUS",footerContent:"Footer-module_footerContent__3MC14",footerSections:"Footer-module_footerSections__2nrr8",title:"Footer-module_title__269y7",titleWrapper:"Footer-module_titleWrapper__2YJVv"};(0,i.s)(".Footer-module_footer__1aD3T{--footer-background:var(--color-black-5);--footer-color:var(--color-black-90);--footer-divider-color:var(--color-black-20);--footer-focus-outline-border-radius:0px;--footer-focus-outline-color:var(--color-coat-of-arms);--footer-focus-outline-width:3px;--footer-padding:var(--spacing-l) var(--spacing-m) 0;color:var(--footer-color)}.Footer-module_footer__1aD3T.Footer-module_theme-dark__1TGCV{--footer-background:var(--color-black-80);--footer-color:var(--color-white);--footer-focus-outline-color:var(--color-white)}.Footer-module_koros__Orx_W{fill:var(--footer-background,transparent);overflow:hidden}.Footer-module_koros__Orx_W svg{left:50%;position:relative;transform:translateX(-50%);width:4028px}.Footer-module_koros__Orx_W.Footer-module_basic__2VejY{height:15px}.Footer-module_koros__Orx_W.Footer-module_beat__2_JDj{height:70px}.Footer-module_koros__Orx_W.Footer-module_pulse__Aq8zn{height:34px}.Footer-module_koros__Orx_W.Footer-module_wave__368B6{height:35px}.Footer-module_koros__Orx_W.Footer-module_vibration___dfUS{height:54px}.Footer-module_footerContent__3MC14{background-color:var(--footer-background)}.Footer-module_footerSections__2nrr8{display:flex;flex-direction:column;justify-content:flex-start;padding:var(--footer-padding)}.Footer-module_title__269y7{font-size:var(--fontsize-heading-m);font-weight:700;letter-spacing:.4px;line-height:var(--lineheight-l)}@media only screen and (max-width:575.98px){.Footer-module_footer__1aD3T{--footer-padding:var(--spacing-m) var(--spacing-s) 0}.Footer-module_footerSections__2nrr8{padding:var(--footer-padding)}}@media only screen and (max-width:767.98px){.Footer-module_titleWrapper__2YJVv{flex-direction:column}.Footer-module_title__269y7{font-size:var(--fontsize-heading-s)}}@media only screen and (min-width:1248px){.Footer-module_footerSections__2nrr8{margin:0 auto;max-width:var(--container-width-xl)}}");var R,b;(0,i.s)(".FooterNavigation-module_navigation__1gS9g{display:flex;flex-wrap:wrap;gap:var(--spacing-xs) var(--spacing-m);padding-bottom:var(--spacing-m)}"),(b=R||(R={})).Base="base",b.Navigation="navigation",b.Utility="utility";const y=e=>{let{ariaLabel:t,children:n,role:a}=e;const i=(0,d.g)(n);return r.createElement("div",{className:"FooterNavigation-module_navigation__1gS9g","aria-label":t,role:a},i.map(((e,t)=>r.createElement(r.Fragment,{key:t},(0,r.isValidElement)(e)?(0,r.cloneElement)(e,{variant:R.Navigation}):e))))};y.componentName="FooterNavigation";(0,i.s)(".FooterNavigationGroup-module_navigationGroup__1R66O{display:flex}.FooterNavigationGroup-module_navigationGroupList__1ylGW{display:flex;flex-direction:column;gap:var(--spacing-3-xs);justify-items:start;list-style:none;margin:0;padding:0;width:137px}@media only screen and (min-width:1248px){.FooterNavigationGroup-module_navigationGroupList__1ylGW{width:180px}}");const v=e=>{let{className:t,children:n,id:a,headingLink:i}=e;const c=(0,s.u)("l"),u=(0,d.g)(n),l=()=>(0,r.isValidElement)(i)?(0,r.cloneElement)(i,{variant:R.Navigation}):i;return c?r.createElement(r.Fragment,null,l()):r.createElement("div",{id:a,className:(0,o.c)("FooterNavigationGroup-module_navigationGroup__1R66O",t)},r.createElement("div",{className:"FooterNavigationGroup-module_navigationGroupList__1ylGW"},l(),u.map(((e,t)=>r.createElement(r.Fragment,{key:t},(0,r.isValidElement)(e)?(0,r.cloneElement)(e,{variant:R.Navigation,subItem:!0}):e)))))};v.componentName="FooterNavigationGroup";var _={"medium-down":"only screen and (max-width:991.98px)",heading:"FooterGroupHeading-module_heading__2iPBU",navigation:"FooterGroupHeading-module_navigation__10BLU",utility:"FooterGroupHeading-module_utility__2Nzq0"};(0,i.s)(".FooterGroupHeading-module_heading__2iPBU{background:none;border:none;cursor:pointer;font:inherit;padding:0;--outline-offset:2px;--outline-offset-small:1px;align-items:center;align-self:start;color:inherit;display:flex;font-size:var(--fontsize-body-l);outline:none;position:relative;text-decoration:none}.FooterGroupHeading-module_heading__2iPBU:hover:not(:focus){text-decoration:underline}.FooterGroupHeading-module_heading__2iPBU:focus{border:0;border-radius:var(--footer-focus-outline-border-radius);outline:var(--footer-focus-outline-width) solid var(--footer-focus-outline-color);outline-offset:var(--outline-offset)}.FooterGroupHeading-module_heading__2iPBU{font-weight:700;line-height:var(--lineheight-l)}.FooterGroupHeading-module_navigation__10BLU{font-size:var(--fontsize-body-m)}.FooterGroupHeading-module_utility__2Nzq0{font-size:var(--fontsize-heading-m)}@media only screen and (max-width:991.98px){.FooterGroupHeading-module_heading__2iPBU.FooterGroupHeading-module_navigation__10BLU{font-weight:400}}");const w=e=>{var{as:t,children:n,className:a,href:i,label:d,variant:s}=e,u=(0,c._)(e,["as","children","className","href","label","variant"]);const l=r.useMemo((()=>t?r.isValidElement(t)?t.type:t:i?"a":"span"),[t,i]);return r.createElement(l,Object.assign({className:(0,o.c)(_.heading,s&&_[s],a),href:i},u),d&&d,n)};w.componentName="FooterGroupHeading";var M={"medium-down":"only screen and (max-width:991.98px)","large-down":"only screen and (max-width:1247.98px)",item:"FooterLink-module_item__3Ig3B",base:"FooterLink-module_base__bzKoj",icon:"FooterLink-module_icon__3KZCE link_icon__1UA7k",navigation:"FooterLink-module_navigation__1pNfs",utility:"FooterLink-module_utility__3jLSl",subItem:"FooterLink-module_subItem__3unGg",subItemIcon:"FooterLink-module_subItemIcon__2UHZi"};(0,i.s)(".link_hds-icon__3Fh_V{--icon-size:100%;background-color:currentcolor;display:inline-block;height:var(--icon-size);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:auto;mask-size:auto;width:var(--icon-size)}.link_hds-icon__3Fh_V.link_hds-icon--size-xs__1DSX6{--icon-size:var(--spacing-layout-2-xs)}.link_hds-icon__3Fh_V.link_hds-icon--size-s__37i-o{--icon-size:var(--spacing-layout-xs)}.link_hds-icon__3Fh_V.link_hds-icon--size-m__f9-rK{--icon-size:var(--spacing-layout-s)}.link_hds-icon__3Fh_V.link_hds-icon--size-l__5qgwf{--icon-size:var(--spacing-layout-m)}.link_hds-icon__3Fh_V.link_hds-icon--size-xl__13Jqm{--icon-size:var(--spacing-layout-l)}.link_hds-icon--link-external__3gGsM{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 3v16h16v2H3V3h2zm16 0v9h-2V6.413L9.914 15.5 8.5 14.086 17.585 5H12V3h9z' fill='currentColor'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 3v16h16v2H3V3h2zm16 0v9h-2V6.413L9.914 15.5 8.5 14.086 17.585 5H12V3h9z' fill='currentColor'/%3E%3C/svg%3E\")}.link_hds-link__2WOKL{--link-visited-color:#551a8b;--link-color:var(--color-bus);border:3px solid transparent;box-sizing:border-box;color:var(--link-color);text-decoration:underline}.link_hds-link__2WOKL:visited{color:var(--link-visited-color)}.link_hds-link__2WOKL:visited svg g path{fill:var(--link-visited-color)}.link_hds-link__2WOKL:focus{border:3px solid var(--color-focus-outline);outline:none}.link_hds-link__2WOKL.link_focus-visible__2LDnI,.link_hds-link__2WOKL:focus-visible{outline:none}.link_hds-link__2WOKL .link_vertical-align-medium-icon___Ink7{vertical-align:sub}.link_hds-link__2WOKL .link_vertical-align-big-icon__3GKmw{vertical-align:middle}.link_hds-link__2WOKL .link_vertical-align-small-icon__Zw5g6{vertical-align:text-top}.link_hds-link--disable-visited-styles__7SQ6j:visited{color:var(--color-bus)}.link_hds-link--small__2n-M3{font-size:14px}.link_hds-link--medium__nURMR{font-size:16px}.link_hds-link--large__2MF4z{display:block;font-size:18px;width:-moz-fit-content;width:fit-content}.link_hds-link--small__2n-M3 .link_icon__1UA7k{margin-left:7px}.link_hds-link--medium__nURMR .link_icon__1UA7k{margin-left:var(--spacing-2-xs);margin-top:-3px}.link_hds-link--large__2MF4z .link_icon__1UA7k{margin-left:var(--spacing-s)}.link_hds-link--small__2n-M3 .link_hds-icon-left__1U3aD{margin-right:4px;vertical-align:text-top}.link_hds-link--medium__nURMR .link_hds-icon-left__1U3aD{margin-right:8px;vertical-align:sub}.link_hds-link--large__2MF4z .link_hds-icon-left__1U3aD{margin-right:16px;vertical-align:middle}.FooterLink-module_item__3Ig3B{background:none;border:none;cursor:pointer;font:inherit;padding:0;--outline-offset:2px;--outline-offset-small:1px;align-items:center;align-self:start;color:inherit;display:flex;font-size:var(--fontsize-body-l);outline:none;position:relative}.FooterLink-module_item__3Ig3B:hover:not(:focus){text-decoration:underline}.FooterLink-module_item__3Ig3B:focus{border:0;border-radius:var(--footer-focus-outline-border-radius);outline:var(--footer-focus-outline-width) solid var(--footer-focus-outline-color);outline-offset:var(--outline-offset)}.FooterLink-module_item__3Ig3B{--link-color:var(--footer-color);--link-visited-color:none;color:var(--link-color);font-weight:400;line-height:var(--lineheight-l);text-decoration:none}.FooterLink-module_base__bzKoj{align-self:unset;font-size:var(--fontsize-body-s);font-weight:500;margin:0;text-decoration:underline}.FooterLink-module_icon__3KZCE{margin-left:var(--spacing-3-xs)}.FooterLink-module_navigation__1pNfs,.FooterLink-module_utility__3jLSl{align-items:center;font-size:var(--fontsize-body-l)}.FooterLink-module_subItem__3unGg.FooterLink-module_subItem__3unGg{font-size:var(--fontsize-body-s);line-height:var(--lineheight-l);outline-offset:var(--outline-offset-small)}.FooterLink-module_subItemIcon__2UHZi{align-self:start;height:var(--spacing-xs);min-width:var(--spacing-xs);transform:translateY(4px);width:var(--spacing-xs)}@media only screen and (max-width:991.98px){.FooterLink-module_item__3Ig3B{outline-offset:var(--outline-offset-small)}.FooterLink-module_navigation__1pNfs,.FooterLink-module_utility__3jLSl{font-size:var(--fontsize-body-m)}}@media only screen and (max-width:1247.98px){.FooterLink-module_item__3Ig3B:not(.FooterLink-module_base__bzKoj):not(.FooterLink-module_navigation__1pNfs):not(.FooterLink-module_utility__3jLSl){font-size:var(--fontsize-body-m)}}");const x=e=>{var{ariaLabel:t,as:n,className:a,icon:i,external:d=!1,label:s,subItem:g=!1,variant:h}=e,f=(0,c._)(e,["ariaLabel","as","className","icon","external","label","subItem","variant"]);const p=r.isValidElement(n)?n.type:n;return r.createElement(p,Object.assign({"aria-label":t,className:(0,o.c)(M.item,g&&M.subItem,h&&M[h],a)},f),i,g&&r.createElement(u.I,{className:M.subItemIcon,"aria-hidden":!0}),s&&r.createElement("span",null,s),d&&s&&r.createElement(l.I,{size:h===R.Base?"xs":"s",className:M.icon,"aria-hidden":!0}))};x.defaultProps={as:g.L};(0,i.s)(".FooterUtilities-module_divider__2VjbX{background-color:var(--footer-divider-color);border:0;height:1px;margin:0 0 var(--spacing-xs);width:100%}.FooterUtilities-module_groups__1_Vi1{display:flex;flex-wrap:wrap;row-gap:var(--spacing-m)}.FooterUtilities-module_links__3P_Ga{display:flex;flex-wrap:wrap;gap:var(--spacing-xs) var(--spacing-m);max-width:60%}.FooterUtilities-module_soMe__2Pwin{display:grid;gap:var(--spacing-xs);grid-auto-flow:column}.FooterUtilities-module_soMe__2Pwin>*{align-self:center}.FooterUtilities-module_utilities__10PzW{align-items:center;display:flex;flex-wrap:wrap;justify-content:space-between;padding-bottom:var(--spacing-m)}.FooterUtilities-module_utilityLinks__2QjWF{display:grid;grid-auto-flow:column;position:relative}.FooterUtilities-module_widerLinks__1h7MT{max-width:none}@media only screen and (max-width:575.98px){.FooterUtilities-module_links__3P_Ga{flex-direction:column;gap:var(--spacing-xs);justify-items:flex-start}.FooterUtilities-module_utilities__10PzW{align-items:flex-start;flex-direction:column}}@media only screen and (max-width:767.98px){.FooterUtilities-module_divider__2VjbX{margin:0 0 var(--spacing-xs)}.FooterUtilities-module_utilities__10PzW{justify-items:flex-start}}@media only screen and (max-width:991.98px){.FooterUtilities-module_link__2Df11,.FooterUtilities-module_utilities__10PzW{gap:var(--spacing-xs)}}@media only screen and (min-width:992px){.FooterUtilities-module_divider__2VjbX{margin:0 0 var(--spacing-m)}}");var E="FooterUtilityGroup-module_utilityGroup__3Voeu";(0,i.s)(".FooterUtilityGroup-module_utilityGroup__3Voeu{display:flex;flex-direction:column;gap:var(--spacing-xs);justify-items:start;list-style:none;margin-bottom:var(--spacing-xs);padding:0;width:248px}@media only screen and (max-width:575.98px){.FooterUtilityGroup-module_utilityGroup__3Voeu:nth-last-child(-n+1){margin-bottom:0}}@media only screen and (min-width:576px) and (max-width:767.98px){.FooterUtilityGroup-module_utilityGroup__3Voeu:nth-last-child(-n+2){margin-bottom:0}}@media only screen and (min-width:768px){.FooterUtilityGroup-module_utilityGroup__3Voeu{width:214px}.FooterUtilityGroup-module_utilityGroup__3Voeu:nth-last-child(-n+1){margin-bottom:0}}@media only screen and (min-width:992px){.FooterUtilityGroup-module_utilityGroup__3Voeu{margin-bottom:0;width:204px}}@media only screen and (min-width:1248px){.FooterUtilityGroup-module_utilityGroup__3Voeu{width:268px}}");const S=e=>{let{className:t,children:n,id:a,headingLink:i}=e;const s=(0,d.g)(n);return r.createElement("div",{id:a,className:(0,o.c)(E,t)},r.createElement("div",{className:E},(0,r.isValidElement)(i)?(0,r.cloneElement)(i,{variant:R.Utility}):i,s.map(((e,t)=>r.createElement(r.Fragment,{key:t},(0,r.isValidElement)(e)?(0,r.cloneElement)(e,{variant:R.Utility}):e)))))};S.componentName="FooterUtilityGroup";var k={"x-small-down":"only screen and (max-width:575.98px)","small-down":"only screen and (max-width:767.98px)","small-up":"only screen and (min-width:576px)","medium-down":"only screen and (max-width:991.98px)","medium-up":"only screen and (min-width:768px)","large-up":"only screen and (min-width:992px)",backToTopButton:"FooterBase-module_backToTopButton__hXTHm",divider:"FooterBase-module_divider__3sz3q",base:"FooterBase-module_base__2f0eu",baseActions:"FooterBase-module_baseActions__1hCiR",copyright:"FooterBase-module_copyright__2iiev",links:"FooterBase-module_links__3lfLo",logoWrapper:"FooterBase-module_logoWrapper__3BI7d",separator:"FooterBase-module_separator__cwQTe",copyrightDot:"FooterBase-module_copyrightDot__2AfS6"};(0,i.s)(".FooterBase-module_backToTopButton__hXTHm{background:none;border:none;cursor:pointer;font:inherit;padding:0}.FooterBase-module_divider__3sz3q{background-color:var(--footer-divider-color);border:0;height:1px;margin:0 0 var(--spacing-xs);width:100%}.FooterBase-module_backToTopButton__hXTHm{--outline-offset:2px;--outline-offset-small:1px;align-items:center;align-self:start;color:inherit;display:flex;font-size:var(--fontsize-body-l);line-height:var(--lineheight-l);outline:none;position:relative;text-decoration:none}.FooterBase-module_backToTopButton__hXTHm:hover:not(:focus){text-decoration:underline}.FooterBase-module_backToTopButton__hXTHm:focus{border:0;border-radius:var(--footer-focus-outline-border-radius);outline:var(--footer-focus-outline-width) solid var(--footer-focus-outline-color);outline-offset:var(--outline-offset)}.FooterBase-module_backToTopButton__hXTHm{align-self:unset;font-size:20px;font-weight:700;line-height:30px;margin-left:auto}.FooterBase-module_base__2f0eu{display:flex;flex-direction:column;padding-bottom:var(--spacing-m)}.FooterBase-module_baseActions__1hCiR{display:flex;flex-grow:1}.FooterBase-module_copyright__2iiev{display:flex;font-size:var(--fontsize-body-s);gap:var(--spacing-3-xs);justify-content:flex-start;line-height:var(--lineheight-l);margin-right:var(--spacing-2-xs)}.FooterBase-module_links__3lfLo{align-items:center;display:flex;gap:var(--spacing-xs)}.FooterBase-module_logoWrapper__3BI7d{display:flex}.FooterBase-module_separator__cwQTe{font-size:var(--fontsize-body-s);font-weight:500;line-height:var(--lineheight-l)}@media only screen and (max-width:575.98px){.FooterBase-module_links__3lfLo{align-items:flex-start;flex-direction:column}.FooterBase-module_copyrightDot__2AfS6,.FooterBase-module_separator__cwQTe{display:none}}@media only screen and (max-width:767.98px){.FooterBase-module_baseActions__1hCiR{flex-direction:column}.FooterBase-module_backToTopButton__hXTHm{margin-top:var(--spacing-m)}}@media only screen and (max-width:991.98px){.FooterBase-module_copyright__2iiev{margin-bottom:var(--spacing-xs);margin-top:var(--spacing-s)}.FooterBase-module_divider__3sz3q{margin:0 0 var(--spacing-m)}.FooterBase-module_separator__cwQTe:first-of-type{display:none}}@media only screen and (min-width:992px){.FooterBase-module_base__2f0eu{align-items:center;flex-flow:row wrap}.FooterBase-module_copyright__2iiev{margin-left:var(--spacing-s)}}");(0,i.s)(".FooterCustom-module_divider__2pCd6{background-color:var(--footer-divider-color);border:0;height:1px;margin:0 0 var(--spacing-xs);width:100%}.FooterCustom-module_custom__3MIuC{padding-bottom:var(--spacing-m)}.FooterCustom-module_divider__2pCd6{margin:0 0 var(--spacing-m)}");const N=e=>{let{ariaLabel:t,children:n,className:a,footerProps:i,korosType:d="basic",theme:s="light",title:c}=e;const u=(0,f.u)(m.footer,s);return r.createElement("footer",Object.assign({},i,{className:(0,o.c)(m.footer,m["koros-"+d],"string"==typeof s&&m["theme-"+s],u,a),"aria-label":t}),r.createElement(p.K,{className:(0,o.c)(m.koros,m[d]),type:d}),r.createElement("div",{className:m.footerContent},r.createElement("div",{className:m.footerSections},c&&r.createElement("h2",{className:m.title},c),n)))};N.Navigation=y,N.NavigationGroup=v,N.GroupHeading=w,N.Link=x,N.Utilities=e=>{let{ariaLabel:t,children:n,soMeLinks:a,soMeSectionProps:i,role:s}=e;const c=(0,d.g)(n);return r.createElement("div",{className:"FooterUtilities-module_utilities__10PzW","aria-label":t,role:s},r.createElement("hr",{className:"FooterUtilities-module_divider__2VjbX","aria-hidden":!0}),r.createElement("div",{className:(0,o.c)("FooterUtilities-module_links__3P_Ga",!a&&"FooterUtilities-module_widerLinks__1h7MT")},c.map(((e,t)=>r.createElement(r.Fragment,{key:t},(0,r.isValidElement)(e)?(0,r.cloneElement)(e,{variant:R.Utility}):e)))),a&&r.createElement("section",Object.assign({className:"FooterUtilities-module_soMe__2Pwin"},i),a.map(((e,t)=>(0,r.isValidElement)(e)?(0,r.cloneElement)(e,{variant:null,key:t}):null))))},N.UtilityGroup=S,N.Base=e=>{let{ariaLabel:t,backToTopLabel:n,children:i,copyrightHolder:o,copyrightText:s,logo:c,logoHref:u,onBackToTopClick:l,role:g,showBackToTopButton:f=!0,year:p=(new Date).getFullYear()}=e;const m=(0,d.g)(i);return r.createElement("div",{className:k.base,"aria-label":t,role:g},r.createElement("hr",{className:k.divider,"aria-hidden":!0}),r.createElement("div",{className:k.logoWrapper},r.createElement(x,{tabIndex:0,icon:c,href:u})),(o||s)&&r.createElement("div",{className:k.copyright},r.createElement("span",{className:k.copyrightHolder},"© ",o," ",p),s&&r.createElement(r.Fragment,null,r.createElement("span",{className:k.copyrightDot},"•"),r.createElement("span",{className:k.copyrightText},s))),r.createElement("div",{className:k.baseActions},i&&r.createElement("div",{className:k.links},m.map(((e,t)=>(0,r.isValidElement)(e)?r.createElement(r.Fragment,{key:t},r.createElement("span",{className:k.separator},"|"),(0,r.cloneElement)(e,{variant:R.Base})):null))),f&&r.createElement("button",{type:"button",role:"link",className:k.backToTopButton,onClick:e=>"function"==typeof l?l(e):(()=>{var e;null===window||void 0===window||window.scrollTo({top:0}),null===(e=function(){return(0,a.Z)((arguments.length>0&&void 0!==arguments[0]?arguments[0]:document).querySelectorAll('a, button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])')).filter((e=>!e.hasAttribute("disabled")&&e.offsetWidth>0&&e.offsetHeight>0))}()[0])||void 0===e||e.focus()})()},n,r.createElement(h.I,{"aria-hidden":"true"}))))},N.Custom=e=>{let{ariaLabel:t,children:n,className:a,id:i,role:d}=e;return r.createElement("div",{className:(0,o.c)("FooterCustom-module_custom__3MIuC",a),id:i,"aria-label":t,role:d},r.createElement("hr",{className:"FooterCustom-module_divider__2pCd6","aria-hidden":!0}),n)}},11167:function(e,t,n){"use strict";n.d(t,{H:function(){return Se},T:function(){return be}});var a=n(15785),r=(n(3462),n(33824),n(80136)),i=n(67294),o=n(34300),d=n(42858),s=n(7444),c=n(42215),u=n(97640),l=n(12670),g=n(29928),h=n(44961),f=n(32337),p=n(21662),m=n(35828),R=n(56924),b=n(67470),y=n(27945),v=n(11078);const _=(0,i.createContext)({navigationContent:null,languageSelectorContent:null,universalContent:null}),w=(0,i.createContext)({setNavigationContent(){},setLanguageSelectorContent(){},setMobileMenuOpen(){},setUniversalContent(){},setOpenMainNavIndex(){}});_.displayName="HeaderContext",w.displayName="HeaderDispatchContext";const M=e=>{let{children:t}=e;const n=(0,d.u)("l"),[a,r]=(0,i.useState)(null),[o,s]=(0,i.useState)(null),[c,u]=(0,i.useState)(!1),[l,g]=(0,i.useState)(null),[h,f]=(0,i.useState)(-1);(0,i.useEffect)((()=>u(!1)),[n]);const p={isNotLargeScreen:n,mobileMenuOpen:c,navigationContent:a,hasNavigationContent:!!a,languageSelectorContent:o,hasUniversalContent:!!a,universalContent:l,openMainNavIndex:h},m={setNavigationContent:r,setLanguageSelectorContent:s,setMobileMenuOpen:u,setUniversalContent:g,setOpenMainNavIndex:f};return i.createElement(_.Provider,{value:p},i.createElement(w.Provider,{value:m},t))};function x(){return(0,i.useContext)(_)}function E(){return(0,i.useContext)(w)}var S="HeaderUniversalBar-module_universalBarLink___6ZN5";(0,s.s)(".HeaderUniversalBar-module_headerUniversalBar__1WF8C{align-items:center;box-sizing:border-box;display:flex;margin:0 auto;max-width:var(--header-max-width);min-height:48px;padding:0 var(--header-margin);width:100%}.HeaderUniversalBar-module_headerUniversalBarContainer__fckkA{background:var(--universal-bar-background-color);width:100%}.HeaderUniversalBar-module_headerUniversalBarList__1ci3u{display:flex;gap:0 var(--spacing-l);list-style:none;margin:0;padding:0;width:100%}.HeaderUniversalBar-module_universalBarMainLinkContainer__xZGVq{display:flex;flex:1;justify-self:start}.HeaderUniversalBar-module_universalBarSecondaryLinkContainer__3itUq{display:flex;justify-self:end}.HeaderUniversalBar-module_universalBarSecondaryLinkContainer__3itUq:last-child{margin-right:0}.HeaderUniversalBar-module_universalBarLink___6ZN5.HeaderUniversalBar-module_universalBarLink___6ZN5{font-size:var(--fontsize-body-m)}@media only screen and (max-width:767.98px){.HeaderUniversalBar-module_headerUniversalBarList__1ci3u{gap:0 var(--spacing-m)}}@media only screen and (max-width:575.98px){.HeaderUniversalBar-module_universalBarLink___6ZN5.HeaderUniversalBar-module_universalBarLink___6ZN5{font-size:var(--fontsize-body-s)}}");const k=new Uint8Array(256);let N=k.length;function D(){return N>k.length-16&&(f.randomFillSync(k),N=0),k.slice(N,N+=16)}const A=[];for(let ke=0;ke<256;++ke)A.push((ke+256).toString(16).slice(1));var j={randomUUID:f.randomUUID};function T(e,t,n){if(j.randomUUID&&!t&&!e)return j.randomUUID();const a=(e=e||{}).random||(e.rng||D)();if(a[6]=15&a[6]|64,a[8]=63&a[8]|128,t){n=n||0;for(let e=0;e<16;++e)t[n+e]=a[e];return t}return function(e,t){return void 0===t&&(t=0),(A[e[t+0]]+A[e[t+1]]+A[e[t+2]]+A[e[t+3]]+"-"+A[e[t+4]]+A[e[t+5]]+"-"+A[e[t+6]]+A[e[t+7]]+"-"+A[e[t+8]]+A[e[t+9]]+"-"+A[e[t+10]]+A[e[t+11]]+A[e[t+12]]+A[e[t+13]]+A[e[t+14]]+A[e[t+15]]).toLowerCase()}(a)}var L={header:"HeaderLink-module_header__3VgiJ","theme-dark":"HeaderLink-module_theme-dark__2BGmT",headerBackgroundWrapper:"HeaderLink-module_headerBackgroundWrapper__3Nqtq",headerLink:"HeaderLink-module_headerLink__2i9-J",active:"HeaderLink-module_active__287Pm",navigationLinkWrapper:"HeaderLink-module_navigationLinkWrapper__2jd7A",isNotLargeScreen:"HeaderLink-module_isNotLargeScreen__2dND6"};(0,s.s)(".HeaderLink-module_header__3VgiJ{--header-background-color:var(--color-white);--header-color:var(--color-black-90);--header-height:var(--spacing-4-xl);--header-focus-outline-width:3px;--header-focus-outline-border-radius:0;--header-focus-outline-color:var(--color-coat-of-arms);--header-divider-color:var(--color-black-20);--header-z-index:10;--header-margin:var(--spacing-m);--header-max-width:1440px;--header-item-border-color:var(--color-black-20);--header-item-hover-color:var(--color-black-20);--actionbar-background-color:var(--color-white);--action-bar-container-height:88px;--action-bar-section-gutter:var(--spacing-s);--action-bar-dropdown-menu-caret-width:64px;--action-bar-dropdown-menu-primary-item-height:64px;--action-bar-dropdown-menu-secondary-item-height:48px;--action-bar-button-size:64px;--action-bar-item-gutter:12px;--action-bar-item-title-font-size:var(--fontsize-body-s);--action-bar-item-title-font-color:var(--header-color);--lang-selector-mobile-background-color:var(--color-silver-light);--lang-selector-item-font-color:var(--header-color);--lang-selector-dropdown-background-color:var(--color-white);--nav-link-font-color:var(--header-color);--nav-border-color:var(--color-black-20);--nav-link-hover-color:var(--color-black-90);--nav-link-dropdown-background-color:var(--color-white);--nav-button-background-color:var(--color-black-5);--nav-button-hover-background-color:var(--color-black-5);--nav-search-color:var(--header-color);--nav-mobile-menu-background-color:var(--color-white);--nav-mobile-menu-bottom-background-color:var(--color-silver-light);--nav-mobile-margin-left:var(--spacing-s);--universal-bar-background-color:var(--color-black-5);--logo-height:56px;--icon-size:24px;--nav-drop-down-icon-color:var(--color-black);--nav-background-color:var(--color-white);background-color:var(--header-background-color);color:var(--header-color);position:relative;width:100%}@media only screen and (max-width:991px){.HeaderLink-module_header__3VgiJ{--action-bar-container-height:74px;--logo-height:48px}}@media only screen and (max-width:767px){.HeaderLink-module_header__3VgiJ{--header-margin:var(--spacing-s);--action-bar-container-height:64px;--logo-height:32px}}@media only screen and (max-width:575px){.HeaderLink-module_header__3VgiJ{--header-margin:var(--spacing-xs);--action-bar-container-height:64px;--logo-height:32px}}.HeaderLink-module_header__3VgiJ.HeaderLink-module_theme-dark__2BGmT{--color-focus-outline:var(--color-white);--header-color:var(--color-white);--header-focus-outline-color:var(--color-white);--header-background-color:var(--color-black-80);--nav-border-color:var(--color-white);--nav-link-hover-color:var(--color-white);--universal-bar-background-color:var(--color-black-60);--navigation-link-button-background-color:var(--color-black-60);--nav-link-dropdown-background-color:var(--color-black-80);--lang-selector-mobile-background-color:var(--color-black-80);--lang-selector-dropdown-background-color:var(--color-black-60);--nav-button-background-color:var(--color-black-60);--nav-button-hover-background-color:var(--color-black-60);--nav-drop-down-icon-color:var(--color-white);--actionbar-background-color:var(--color-black-80);--nav-background-color:var(--color-black-80);--nav-mobile-menu-background-color:var(--color-black-80);--nav-mobile-menu-bottom-background-color:var(--color-black-60)}.HeaderLink-module_headerBackgroundWrapper__3Nqtq{position:relative;z-index:var(--header-z-index)}.HeaderLink-module_headerLink__2i9-J.HeaderLink-module_headerLink__2i9-J{--link-color:var(--color-black-90);--link-font-size:var(--fontsize-body-s);--link-visited-color:none;border:0;color:var(--nav-link-font-color);display:flex;line-height:var(--lineheight-l);margin:0;text-decoration:none;word-wrap:break-word}.HeaderLink-module_headerLink__2i9-J.HeaderLink-module_headerLink__2i9-J:hover{text-decoration:underline;text-decoration-color:var(--nav-link-hover-color)}.HeaderLink-module_headerLink__2i9-J.HeaderLink-module_headerLink__2i9-J:focus-visible{border:none;outline:var(--header-focus-outline-width) solid var(--header-focus-outline-color);outline-offset:var(--header-focus-outline-width)}.HeaderLink-module_active__287Pm{font-weight:700;padding-left:var(--header-focus-outline-width)}.HeaderLink-module_navigationLinkWrapper__2jd7A{align-items:center;display:flex;height:100%;justify-content:space-between;position:relative}.HeaderLink-module_navigationLinkWrapper__2jd7A.HeaderLink-module_isNotLargeScreen__2dND6{width:100%}.HeaderLink-module_navigationLinkWrapper__2jd7A.HeaderLink-module_isNotLargeScreen__2dND6,.HeaderLink-module_navigationLinkWrapper__2jd7A.HeaderLink-module_isNotLargeScreen__2dND6:focus{border-top-width:1px}.HeaderLink-module_navigationLinkWrapper__2jd7A.HeaderLink-module_isNotLargeScreen__2dND6 ul{border:none}.HeaderLink-module_headerLink__2i9-J.HeaderLink-module_isNotLargeScreen__2dND6{align-self:center;border:none;box-sizing:border-box;color:var(--nav-link-font-color);font-size:var(--fontsize-body-xl);margin-left:var(--nav-mobile-margin-left);padding:0;word-wrap:break-word}.HeaderLink-module_headerLink__2i9-J.HeaderLink-module_isNotLargeScreen__2dND6:focus{border:none}");var I,C,O={header:"HeaderLinkDropdown-module_header__iHkRi","theme-dark":"HeaderLinkDropdown-module_theme-dark__1HjJY",headerBackgroundWrapper:"HeaderLinkDropdown-module_headerBackgroundWrapper__Dk3Dy",button:"HeaderLinkDropdown-module_button__2xVuy",isNotLargeScreen:"HeaderLinkDropdown-module_isNotLargeScreen__2LKN8","depth-0":"HeaderLinkDropdown-module_depth-0__Xeyks",chevron:"HeaderLinkDropdown-module_chevron__1KsTd",chevronOpen:"HeaderLinkDropdown-module_chevronOpen__Kv4NV",hidden:"HeaderLinkDropdown-module_hidden__BBuW2",dropdownMenu:"HeaderLinkDropdown-module_dropdownMenu__3oeWC",dropdownLink:"HeaderLinkDropdown-module_dropdownLink__2UIF3",activeLink:"HeaderLinkDropdown-module_activeLink__3WBvn",left:"HeaderLinkDropdown-module_left__19kgo",right:"HeaderLinkDropdown-module_right__3KSqY"};(0,s.s)('.HeaderLinkDropdown-module_header__iHkRi{--header-background-color:var(--color-white);--header-color:var(--color-black-90);--header-height:var(--spacing-4-xl);--header-focus-outline-width:3px;--header-focus-outline-border-radius:0;--header-focus-outline-color:var(--color-coat-of-arms);--header-divider-color:var(--color-black-20);--header-z-index:10;--header-margin:var(--spacing-m);--header-max-width:1440px;--header-item-border-color:var(--color-black-20);--header-item-hover-color:var(--color-black-20);--actionbar-background-color:var(--color-white);--action-bar-container-height:88px;--action-bar-section-gutter:var(--spacing-s);--action-bar-dropdown-menu-caret-width:64px;--action-bar-dropdown-menu-primary-item-height:64px;--action-bar-dropdown-menu-secondary-item-height:48px;--action-bar-button-size:64px;--action-bar-item-gutter:12px;--action-bar-item-title-font-size:var(--fontsize-body-s);--action-bar-item-title-font-color:var(--header-color);--lang-selector-mobile-background-color:var(--color-silver-light);--lang-selector-item-font-color:var(--header-color);--lang-selector-dropdown-background-color:var(--color-white);--nav-link-font-color:var(--header-color);--nav-border-color:var(--color-black-20);--nav-link-hover-color:var(--color-black-90);--nav-link-dropdown-background-color:var(--color-white);--nav-button-background-color:var(--color-black-5);--nav-button-hover-background-color:var(--color-black-5);--nav-search-color:var(--header-color);--nav-mobile-menu-background-color:var(--color-white);--nav-mobile-menu-bottom-background-color:var(--color-silver-light);--nav-mobile-margin-left:var(--spacing-s);--universal-bar-background-color:var(--color-black-5);--logo-height:56px;--icon-size:24px;--nav-drop-down-icon-color:var(--color-black);--nav-background-color:var(--color-white);background-color:var(--header-background-color);color:var(--header-color);position:relative;width:100%}@media only screen and (max-width:991px){.HeaderLinkDropdown-module_header__iHkRi{--action-bar-container-height:74px;--logo-height:48px}}@media only screen and (max-width:767px){.HeaderLinkDropdown-module_header__iHkRi{--header-margin:var(--spacing-s);--action-bar-container-height:64px;--logo-height:32px}}@media only screen and (max-width:575px){.HeaderLinkDropdown-module_header__iHkRi{--header-margin:var(--spacing-xs);--action-bar-container-height:64px;--logo-height:32px}}.HeaderLinkDropdown-module_header__iHkRi.HeaderLinkDropdown-module_theme-dark__1HjJY{--color-focus-outline:var(--color-white);--header-color:var(--color-white);--header-focus-outline-color:var(--color-white);--header-background-color:var(--color-black-80);--nav-border-color:var(--color-white);--nav-link-hover-color:var(--color-white);--universal-bar-background-color:var(--color-black-60);--navigation-link-button-background-color:var(--color-black-60);--nav-link-dropdown-background-color:var(--color-black-80);--lang-selector-mobile-background-color:var(--color-black-80);--lang-selector-dropdown-background-color:var(--color-black-60);--nav-button-background-color:var(--color-black-60);--nav-button-hover-background-color:var(--color-black-60);--nav-drop-down-icon-color:var(--color-white);--actionbar-background-color:var(--color-black-80);--nav-background-color:var(--color-black-80);--nav-mobile-menu-background-color:var(--color-black-80);--nav-mobile-menu-bottom-background-color:var(--color-black-60)}.HeaderLinkDropdown-module_headerBackgroundWrapper__Dk3Dy{position:relative;z-index:var(--header-z-index)}button.HeaderLinkDropdown-module_button__2xVuy{background-color:var(--nav-button-background-color);border:none;box-sizing:content-box;color:var(--nav-drop-down-icon-color);display:block;height:24px;margin:0 0 0 var(--spacing-s);padding:0;width:24px}button.HeaderLinkDropdown-module_button__2xVuy.HeaderLinkDropdown-module_isNotLargeScreen__2LKN8{background:transparent;border-left:1px solid var(--nav-button-background-color);box-sizing:border-box;flex:0 0 var(--action-bar-dropdown-menu-caret-width);height:var(--action-bar-dropdown-menu-secondary-item-height);width:unset}button.HeaderLinkDropdown-module_button__2xVuy.HeaderLinkDropdown-module_isNotLargeScreen__2LKN8.HeaderLinkDropdown-module_depth-0__Xeyks{height:var(--action-bar-dropdown-menu-primary-item-height)}button.HeaderLinkDropdown-module_button__2xVuy:hover{background-color:var(--nav-button-hover-background-color);cursor:pointer}button.HeaderLinkDropdown-module_button__2xVuy:focus-visible{outline:3px solid var(--header-focus-outline-color);outline-offset:var(--header-focus-outline-width)}.HeaderLinkDropdown-module_chevron__1KsTd{transition:transform .2s ease-in}.HeaderLinkDropdown-module_chevronOpen__Kv4NV{transform:rotate(180deg)}.HeaderLinkDropdown-module_hidden__BBuW2{display:none}.HeaderLinkDropdown-module_dropdownMenu__3oeWC{background-color:var(--nav-link-dropdown-background-color);border:1px solid var(--nav-border-color);box-sizing:border-box;display:flex;flex-direction:column;list-style:none;min-width:280px;padding:0;position:absolute;top:100%;z-index:calc(var(--header-z-index) + 1)}.HeaderLinkDropdown-module_dropdownMenu__3oeWC .HeaderLinkDropdown-module_dropdownLink__2UIF3{font-size:var(--fontsize-body-m);margin:var(--spacing-xs) var(--spacing-m) var(--spacing-xs) var(--header-margin);padding:0}.HeaderLinkDropdown-module_dropdownMenu__3oeWC .HeaderLinkDropdown-module_dropdownLink__2UIF3:focus{border:0}.HeaderLinkDropdown-module_dropdownMenu__3oeWC .HeaderLinkDropdown-module_dropdownLink__2UIF3:focus-visible{outline:3px solid var(--header-focus-outline-color);outline-offset:var(--header-focus-outline-width)}.HeaderLinkDropdown-module_dropdownMenu__3oeWC .HeaderLinkDropdown-module_dropdownLink__2UIF3:before{bottom:0;content:"";height:100%;left:0;margin:0;position:absolute;width:0}.HeaderLinkDropdown-module_dropdownMenu__3oeWC .HeaderLinkDropdown-module_dropdownLink__2UIF3:hover:before{border-left:4px solid var(--color-black);transition:border-left .1s ease-in}.HeaderLinkDropdown-module_dropdownMenu__3oeWC .HeaderLinkDropdown-module_activeLink__3WBvn:before{border-left:4px solid var(--color-black);padding-left:var(--spacing-xs)}.HeaderLinkDropdown-module_dropdownMenu__3oeWC .HeaderLinkDropdown-module_button__2xVuy{margin:0 var(--spacing-xs) 0 var(--spacing-s)}.HeaderLinkDropdown-module_left__19kgo{left:auto;right:100%;top:-1px}.HeaderLinkDropdown-module_right__3KSqY{left:100%;right:auto;top:-1px}'),(C=I||(I={})).Left="left",C.Right="right";const P=e=>{let{children:t,position:n=I.Right,className:a,index:r,open:d,setOpen:s,depth:f=0,closeDropdownAriaButtonLabel:p,openDropdownAriaButtonLabel:m,dropdownButtonClassName:R}=e;const{isNotLargeScreen:b}=x(),[y,v]=(0,i.useState)(-1),[_,w]=(0,i.useState)({left:0}),M=(0,i.useRef)(null),E=d?(0,o.c)(O.chevron,O.chevronOpen):O.chevron,S=1===f,k=O["depth-"+(f-1)],N=n?(0,o.c)(O.dropdownMenu,O[n]):O.dropdownMenu,D=(0,c.g)(t);return(0,u.a)((()=>{const e=e=>{if(null!=e){const{right:t,width:n}=e.getBoundingClientRect();window.innerWidth<=t?w({right:0}):window.innerWidth-t>n&&w({left:0})}};return S&&(e(M.current),d&&window.addEventListener("resize",(()=>e(M.current)))),()=>{window.removeEventListener("resize",(()=>e(M.current))),w({left:0})}}),[M.current,d,S]),i.createElement(i.Fragment,null,i.createElement("button",{type:"button",className:(0,o.c)(O.button,{isNotLargeScreen:b},k,R),onClick:e=>{e.preventDefault(),s(!d)},"data-testid":"dropdown-button-"+r,"aria-label":d?p||"Sulje alasvetovalikko.":m||"Avaa alasvetovalikko."},f>1&&n===I.Right?i.createElement(l.I,{className:E}):f>1&&n===I.Left?i.createElement(g.I,{className:E}):i.createElement(h.I,{className:E})),i.createElement("ul",Object.assign({style:S?_:{},className:(0,o.c)(N,{isNotLargeScreen:b},a)},!d&&{style:{display:"none"}},{"data-testid":"dropdown-menu-"+r,ref:M}),D.map(((e,t)=>i.createElement("li",{key:"link-dropdown-"+r+"-"+t},(0,i.isValidElement)(e)?(0,i.cloneElement)(e,{index:t,openSubNavIndex:y,setOpenSubNavIndex:v,depth:f,className:e.props.active?(0,o.c)(O.dropdownLink,O.activeLink):O.dropdownLink,dropdownButtonClassName:R}):e)))))};P.componentName="HDSNavigationLinkDropdown";const z=(0,o.s)(L),B=e=>{var{active:t,as:n,className:a,wrapperClassName:o,dropdownClassName:d,dropdownLinks:s,dropdownLinkClassName:c,href:l,index:g,label:h,openSubNavIndex:f,setOpenSubNavIndex:p,depth:m=0,openDropdownAriaButtonLabel:R,closeDropdownAriaButtonLabel:b,dropdownButtonClassName:y,onDropdownButtonClick:v}=e,_=(0,r._)(e,["active","as","className","wrapperClassName","dropdownClassName","dropdownLinks","dropdownLinkClassName","href","index","label","openSubNavIndex","setOpenSubNavIndex","depth","openDropdownAriaButtonLabel","closeDropdownAriaButtonLabel","dropdownButtonClassName","onDropdownButtonClick"]);const w=i.isValidElement(n)?n.type:n,{isNotLargeScreen:M}=x(),[S,k]=(0,i.useState)(!1),[N,D]=(0,i.useState)(null),{openMainNavIndex:A}=x(),{setOpenMainNavIndex:j}=E(),C=(0,i.useRef)(null),O=void 0!==f&&void 0!==p;(0,u.a)((()=>{1===m&&D((()=>{if(void 0===window)return I.Right;if(null!=C.current){const{x:e,width:t}=C.current.getBoundingClientRect(),n=e+t;return e>window.innerWidth-n?I.Left:I.Right}return I.Right})())}),[]);const B=()=>k(!1);(0,i.useEffect)((()=>{O||A!==g&&S&&B()}),[A]),(0,i.useEffect)((()=>{O&&f!==g&&S&&B()}),[f]);const F=(0,i.useCallback)((e=>{S&&C.current&&!C.current.contains(e.target)&&B()}),[S]);(0,i.useEffect)((()=>(S&&document.addEventListener("click",F),()=>document.removeEventListener("click",F))),[S]);const U=z({isNotLargeScreen:M},L.navigationLinkWrapper,L["depth-"+m],o),$=z(L.headerLink,L["depth-"+m],a,{active:t,isNotLargeScreen:M});return i.createElement("span",Object.assign({className:U,ref:C},Boolean(s)&&{"aria-expanded":S}),i.createElement(w,Object.assign({className:$,href:l},_),h),s&&i.createElement(P,{open:S,setOpen:e=>{M||k(e),v&&v(),O&&void 0!==g?p(e?g:-1):(e!==S&&A===g||e)&&j&&j(e?g:-1)},index:g,depth:m+1,className:d,position:N,openDropdownAriaButtonLabel:R,closeDropdownAriaButtonLabel:b,dropdownButtonClassName:y},s.map((e=>(0,i.cloneElement)(e,{key:T(),wrapperClassName:o,dropdownClassName:d,dropdownLinkClassName:c})))))};B.defaultProps={as:p.L,href:"#"};const F=e=>{const{children:t,href:n}=e,a=(0,r._)(e,["children","href"]);return n?i.createElement("a",Object.assign({href:n},a),t):i.createElement("span",Object.assign({},a),t)};var U={activeLinkWrapper:"HeaderActionBarNavigationMenu-module_activeLinkWrapper__YMM-z",previousLinkWrapper:"HeaderActionBarNavigationMenu-module_previousLinkWrapper__3PK9W",backIcon:"HeaderActionBarNavigationMenu-module_backIcon__1ndnU",headerNavigationMenu:"HeaderActionBarNavigationMenu-module_headerNavigationMenu__1meI5",menu:"HeaderActionBarNavigationMenu-module_menu__2c1ye",activeListItem:"HeaderActionBarNavigationMenu-module_activeListItem__2p3l5",activeMobileLink:"HeaderActionBarNavigationMenu-module_activeMobileLink__15KZk",hideDropdownButton:"HeaderActionBarNavigationMenu-module_hideDropdownButton__3UOcX",previousListItem:"HeaderActionBarNavigationMenu-module_previousListItem__2EaFO",previousButton:"HeaderActionBarNavigationMenu-module_previousButton__2IUsg",previousMobileLink:"HeaderActionBarNavigationMenu-module_previousMobileLink__tVb6d",mobileDropdownLink:"HeaderActionBarNavigationMenu-module_mobileDropdownLink__3CidI",mobileLinkDropdown:"HeaderActionBarNavigationMenu-module_mobileLinkDropdown__3gW4P",mobileLinkDropdownButton:"HeaderActionBarNavigationMenu-module_mobileLinkDropdownButton__2vn7b",mobileLinkWrapper:"HeaderActionBarNavigationMenu-module_mobileLinkWrapper__2RXG0",mobileLink:"HeaderActionBarNavigationMenu-module_mobileLink__17oiS",mobileMenuOpen:"HeaderActionBarNavigationMenu-module_mobileMenuOpen__kYn7o",mobileNavigationLink:"HeaderActionBarNavigationMenu-module_mobileNavigationLink__18T64",navigation:"HeaderActionBarNavigationMenu-module_navigation__3w3PU",navigationWrapper:"HeaderActionBarNavigationMenu-module_navigationWrapper__2lgqu",left0:"HeaderActionBarNavigationMenu-module_left0__2TmUK",left100:"HeaderActionBarNavigationMenu-module_left100__37ky0",left200:"HeaderActionBarNavigationMenu-module_left200__XXOux",universalList:"HeaderActionBarNavigationMenu-module_universalList__-H029",universalLink:"HeaderActionBarNavigationMenu-module_universalLink__YfWAC",logoLink:"HeaderActionBarNavigationMenu-module_logoLink__2OjCV",visible:"HeaderActionBarNavigationMenu-module_visible__2U3e0",hidden:"HeaderActionBarNavigationMenu-module_hidden__1w-LK"};(0,s.s)(".HeaderActionBarNavigationMenu-module_activeLinkWrapper__YMM-z,.HeaderActionBarNavigationMenu-module_previousLinkWrapper__3PK9W{align-items:center;background-color:transparent;border:none;cursor:pointer;display:flex;width:100%}.HeaderActionBarNavigationMenu-module_previousLinkWrapper__3PK9W{padding:0}.HeaderActionBarNavigationMenu-module_previousLinkWrapper__3PK9W:focus-visible .HeaderActionBarNavigationMenu-module_backIcon__1ndnU,.HeaderActionBarNavigationMenu-module_previousLinkWrapper__3PK9W:hover .HeaderActionBarNavigationMenu-module_backIcon__1ndnU{transform:translateX(-3px);transition:transform .2s linear}.HeaderActionBarNavigationMenu-module_previousLinkWrapper__3PK9W:focus-visible .HeaderActionBarNavigationMenu-module_backIcon__1ndnU,.HeaderActionBarNavigationMenu-module_previousLinkWrapper__3PK9W:not(:hover) .HeaderActionBarNavigationMenu-module_backIcon__1ndnU{transition:transform .2s linear}.HeaderActionBarNavigationMenu-module_activeLinkWrapper__YMM-z:focus-visible,.HeaderActionBarNavigationMenu-module_previousLinkWrapper__3PK9W:focus-visible{border:none;outline:var(--header-focus-outline-width) solid var(--header-focus-outline-color);outline-offset:var(--header-focus-outline-width)}.HeaderActionBarNavigationMenu-module_headerNavigationMenu__1meI5{background-color:var(--nav-mobile-menu-bottom-background-color);max-height:0;overflow:hidden;position:absolute;transition:max-height .3s;width:100%}.HeaderActionBarNavigationMenu-module_menu__2c1ye{display:flex;flex-flow:column nowrap;height:min-content;list-style:none;margin:-1px 0 0;overscroll-behavior:contain;padding:0;width:100vw}.HeaderActionBarNavigationMenu-module_menu__2c1ye .HeaderActionBarNavigationMenu-module_activeListItem__2p3l5{border-top:none;min-height:72px}.HeaderActionBarNavigationMenu-module_menu__2c1ye .HeaderActionBarNavigationMenu-module_activeMobileLink__15KZk.HeaderActionBarNavigationMenu-module_activeMobileLink__15KZk{font-size:var(--fontsize-heading-m);margin:var(--spacing-m) var(--spacing-s);text-decoration:underline}.HeaderActionBarNavigationMenu-module_menu__2c1ye .HeaderActionBarNavigationMenu-module_activeMobileLink__15KZk.HeaderActionBarNavigationMenu-module_activeMobileLink__15KZk:hover{text-decoration:none}.HeaderActionBarNavigationMenu-module_menu__2c1ye .HeaderActionBarNavigationMenu-module_activeMobileLink__15KZk.HeaderActionBarNavigationMenu-module_activeMobileLink__15KZk:focus-visible{border:none;outline:var(--header-focus-outline-width) solid var(--header-focus-outline-color);outline-offset:var(--header-focus-outline-width)}.HeaderActionBarNavigationMenu-module_menu__2c1ye .HeaderActionBarNavigationMenu-module_hideDropdownButton__3UOcX{display:none}.HeaderActionBarNavigationMenu-module_menu__2c1ye .HeaderActionBarNavigationMenu-module_previousListItem__2EaFO{align-items:center;display:flex;min-height:auto;padding:var(--spacing-m) calc(var(--header-focus-outline-width) * 2) 0}.HeaderActionBarNavigationMenu-module_menu__2c1ye .HeaderActionBarNavigationMenu-module_previousListItem__2EaFO .HeaderActionBarNavigationMenu-module_previousButton__2IUsg{align-items:center;background-color:var(--nav-button-background-color);border:none;color:var(--nav-link-font-color);display:flex;height:32px;justify-content:center;margin-left:var(--nav-mobile-margin-left);width:32px}.HeaderActionBarNavigationMenu-module_menu__2c1ye .HeaderActionBarNavigationMenu-module_previousMobileLink__tVb6d.HeaderActionBarNavigationMenu-module_previousMobileLink__tVb6d{color:var(--nav-link-font-color);font-size:var(--fontsize-body-m);font-weight:500;margin-left:var(--spacing-xs)}.HeaderActionBarNavigationMenu-module_mobileDropdownLink__3CidI{position:relative}.HeaderActionBarNavigationMenu-module_mobileLinkDropdown__3gW4P{display:block;left:0;position:relative;right:0;top:auto;width:100%}.HeaderActionBarNavigationMenu-module_mobileLinkDropdownButton__2vn7b.HeaderActionBarNavigationMenu-module_mobileLinkDropdownButton__2vn7b{background-color:transparent;margin:0;padding:20px;transform:rotate(-90deg)}.HeaderActionBarNavigationMenu-module_mobileLinkDropdownButton__2vn7b.HeaderActionBarNavigationMenu-module_mobileLinkDropdownButton__2vn7b:hover{background-color:transparent}.HeaderActionBarNavigationMenu-module_mobileLinkDropdownButton__2vn7b.HeaderActionBarNavigationMenu-module_mobileLinkDropdownButton__2vn7b svg:hover{transform:translateY(4px);transition:transform .2s linear}.HeaderActionBarNavigationMenu-module_mobileLinkDropdownButton__2vn7b.HeaderActionBarNavigationMenu-module_mobileLinkDropdownButton__2vn7b:focus-visible{border:none;outline:var(--header-focus-outline-width) solid var(--header-focus-outline-color);outline-offset:calc(var(--header-focus-outline-width) - var(--header-focus-outline-width) * 2)}.HeaderActionBarNavigationMenu-module_mobileLinkDropdownButton__2vn7b.HeaderActionBarNavigationMenu-module_mobileLinkDropdownButton__2vn7b:focus-visible svg{transform:translateY(4px);transition:transform .2s linear}.HeaderActionBarNavigationMenu-module_mobileLinkWrapper__2RXG0{box-sizing:border-box}.HeaderActionBarNavigationMenu-module_mobileLinkWrapper__2RXG0 .HeaderActionBarNavigationMenu-module_mobileLink__17oiS.HeaderActionBarNavigationMenu-module_mobileLink__17oiS{border-right:1px solid var(--color-black-20);box-sizing:border-box;flex-grow:1;margin:0;padding:17px 16px;position:relative}.HeaderActionBarNavigationMenu-module_mobileLinkWrapper__2RXG0 .HeaderActionBarNavigationMenu-module_mobileLink__17oiS.HeaderActionBarNavigationMenu-module_mobileLink__17oiS:focus-visible{border:none;outline:var(--header-focus-outline-width) solid var(--header-focus-outline-color);outline-offset:-3px}.HeaderActionBarNavigationMenu-module_mobileMenuOpen__kYn7o{display:flex;flex-direction:column;height:100vh;max-height:100vh}.HeaderActionBarNavigationMenu-module_mobileNavigationLink__18T64{border-top:1px solid var(--color-black-20);display:flex;min-height:var(--action-bar-dropdown-menu-primary-item-height);position:relative;width:100%}.HeaderActionBarNavigationMenu-module_navigation__3w3PU{background-color:var(--nav-mobile-menu-background-color);border-bottom:1px solid var(--color-black-20);display:flex}.HeaderActionBarNavigationMenu-module_navigationWrapper__2lgqu{display:flex;overflow:hidden;overscroll-behavior:contain;width:300%}.HeaderActionBarNavigationMenu-module_navigationWrapper__2lgqu.HeaderActionBarNavigationMenu-module_left0__2TmUK{transform:translateX(0);transition:transform .3s ease}.HeaderActionBarNavigationMenu-module_navigationWrapper__2lgqu.HeaderActionBarNavigationMenu-module_left100__37ky0{transform:translateX(-100vw);transition:transform .3s ease}.HeaderActionBarNavigationMenu-module_navigationWrapper__2lgqu.HeaderActionBarNavigationMenu-module_left200__XXOux{transform:translateX(-200vw);transition:transform .3s ease}.HeaderActionBarNavigationMenu-module_universalList__-H029{display:flex;flex-direction:column;gap:var(--spacing-xs) 0;list-style:none;margin:0;padding:var(--spacing-l) 0 var(--spacing-m) 0}.HeaderActionBarNavigationMenu-module_universalList__-H029 .HeaderActionBarNavigationMenu-module_universalLink__YfWAC.HeaderActionBarNavigationMenu-module_universalLink__YfWAC{font-size:var(--fontsize-body-m)}.HeaderActionBarNavigationMenu-module_logoLink__2OjCV{height:calc(var(--logo-height) * 1.5)!important;justify-content:center;margin-bottom:var(--spacing-m)}.HeaderActionBarNavigationMenu-module_visible__2U3e0{visibility:visible}.HeaderActionBarNavigationMenu-module_hidden__1w-LK{visibility:hidden}");(0,s.s)(".HeaderActionBarLogo-module_logoWrapper__8NgfS{align-items:center;display:flex;height:100%;max-height:100%;max-width:100%}");const $=e=>{let{logoProps:t,logo:n}=e;return i.createElement(F,Object.assign({},t),i.createElement("span",{className:"HeaderActionBarLogo-module_logoWrapper__8NgfS"},n))},H=e=>{var{children:t,className:n,universalLinks:a}=e,d=(0,r._)(e,["children","className","universalLinks"]);return i.createElement("section",Object.assign({},d,{className:(0,o.c)(U.navSection,n)}),i.createElement("nav",{className:U.navigation},i.createElement("ul",{className:U.menu},t)),i.createElement("ul",{className:U.universalList},a.map(((e,t)=>(0,i.isValidElement)(e)?i.createElement("li",{key:t},(0,i.cloneElement)(e,{className:U.universalLink})):null))))},q=e=>{let{link:t,frontPageLabel:n,onClick:a,titleHref:r,openFrontPageLinksAriaLabel:o}=e;const d=(null==t?void 0:t.props.label)||n,s=(null==t?void 0:t.props.openDropdownAriaButtonLabel)||o;return i.createElement("li",{className:U.previousListItem},i.createElement("button",{type:"button",className:U.previousLinkWrapper,onClick:()=>a(t||r),"aria-label":s},i.createElement("span",{className:U.previousButton},i.createElement(g.I,{className:U.backIcon})),i.createElement("span",{className:U.previousMobileLink},d)))},Y=e=>{let{id:t,link:n,frontPageLabel:a,titleHref:r,onLinkClick:o}=e;const d=U.activeMobileLink,s=n?(0,i.cloneElement)(n,{id:t,className:d,dropdownButtonClassName:U.hideDropdownButton,wrapperClassName:U.mobileLinkWrapper,onClick:e=>{n.props.onClick&&n.props.onClick(e),o(e)}}):i.createElement(B,{id:t,label:a,href:r,className:d,onClick:o});return i.createElement("li",{className:U.activeListItem},i.createElement("span",{className:U.activeLinkWrapper},s))},G=e=>{let{links:t,onDropdownButtonClick:n,onLinkClick:a}=e;return i.createElement(i.Fragment,null,t.filter((e=>(0,i.isValidElement)(e))).map(((e,t)=>i.createElement("li",{key:t},i.createElement("span",{className:U.mobileNavigationLink},(0,i.cloneElement)(e,{dropdownLinkClassName:U.mobileDropdownLink,dropdownClassName:U.mobileLinkDropdown,wrapperClassName:U.mobileLinkWrapper,dropdownButtonClassName:U.mobileLinkDropdownButton,className:(0,o.c)(e.props.className,U.mobileLink),index:t,onDropdownButtonClick:()=>n(e),onClick:t=>{e.props.onClick&&e.props.onClick(t),a(e)}}))))))};function V(e){const t=[];return e.props.active&&t.push(e),e.props.dropdownLinks&&e.props.dropdownLinks.length>0&&e.props.dropdownLinks.forEach((e=>{t.push.apply(t,(0,a.Z)(V(e)))})),t}const Q=e=>{let{frontPageLabel:t,titleHref:n,logo:d,logoProps:s,openFrontPageLinksAriaLabel:l}=e;const{navigationContent:g,mobileMenuOpen:h,hasUniversalContent:f,universalContent:p}=x(),{setMobileMenuOpen:m}=E(),[R,b]=(0,i.useState)([]),[y,v]=(0,i.useState)(null),[_,w]=(0,i.useState)("left0"),[M,S]=(0,i.useState)(!1),k=(0,i.useRef)(),N="current-active-link",D="string"==typeof y&&y===n,A=R.length>1,j=R[R.length-1],T=A?R[R.indexOf(j)-1]:null,L=R.length>0?j.props.dropdownLinks:g,I=A?R[R.indexOf(j)-1].props.dropdownLinks:g,C=f?(0,c.a)(p):[],O="left200"===_,P=e=>"string"!=typeof e&&!!R.includes(e);if((0,u.a)((()=>{const e=(0,c.a)(g).find((e=>(0,i.isValidElement)(e)&&e.props.active));if(e){const t=V((0,i.cloneElement)(e)).filter((e=>e.props.dropdownLinks)),n={0:"left0",1:"left100",2:"left200"};b(t),w(n[t.length])}}),[g]),(0,i.useEffect)((()=>{y&&P(y)||y===n?"left100"===_?w("left0"):"left200"===_&&w("left100"):y&&!P(y)&&("left0"===_?w("left100"):"left100"===_&&w("left200"))}),[y]),!h)return null;const z=e=>{v(e),S(!0)},B=e=>{v(e),S(!0)},F=()=>{m(!1)};return i.createElement("div",{className:(0,o.c)(U.headerNavigationMenu,h&&U.mobileMenuOpen)},i.createElement("div",{className:(0,o.c)(U.navigationWrapper,U[_]),onTransitionEnd:e=>(0,r.a)(void 0,void 0,void 0,(function*(){const t=e.target;if(y&&!D){let e=[];const t=y;e=P(y)?R.slice(0,-1):[].concat((0,a.Z)(R),[t]),b(e),v(null)}else D&&(b([]),v(null));var n;S(!1),"transform"===e.propertyName&&"SECTION"===t.firstChild.nodeName&&(yield(n="#"+N,(0,r.a)(void 0,void 0,void 0,(function*(){if(!document)return null;for(;null===document.querySelector(n);)yield new Promise((e=>requestAnimationFrame(e)));return document.querySelector(n)})))).focus()})),ref:k},R.length>=1&&i.createElement(H,{universalLinks:C,"aria-hidden":!0,className:M?U.visible:U.hidden},i.createElement(Y,{link:T,frontPageLabel:t,titleHref:n,onLinkClick:F}),i.createElement(G,{links:I,onDropdownButtonClick:z,onLinkClick:F})),i.createElement(H,{universalLinks:C,"aria-hidden":O,className:O?U.hidden:U.visible},R.length>0&&i.createElement(q,{link:T,frontPageLabel:t,titleHref:n,onClick:B,openFrontPageLinksAriaLabel:l}),i.createElement(Y,{id:O||M?void 0:N,link:O?T:j,frontPageLabel:t,titleHref:n,onLinkClick:F}),i.createElement(G,{links:L,onDropdownButtonClick:z,onLinkClick:F})),!y&&i.createElement(H,{universalLinks:C,"aria-hidden":!O,className:M||O?U.visible:U.hidden},i.createElement(q,{link:T,frontPageLabel:t,titleHref:n,onClick:B,openFrontPageLinksAriaLabel:l}),i.createElement(Y,{id:O?N:void 0,link:j,frontPageLabel:t,titleHref:n,onLinkClick:F}),i.createElement(G,{links:L,onDropdownButtonClick:z,onLinkClick:F})),y&&"string"!=typeof y&&i.createElement(H,{universalLinks:C,"aria-hidden":!y,className:M?U.visible:U.hidden},i.createElement(q,{link:j,frontPageLabel:t,titleHref:n,onClick:B,openFrontPageLinksAriaLabel:l}),i.createElement(Y,{link:y,frontPageLabel:t,titleHref:n,onLinkClick:F}),i.createElement(G,{links:y.props.dropdownLinks,onDropdownButtonClick:z,onLinkClick:F}))),i.createElement($,{logoProps:Object.assign(Object.assign({},s),{className:(0,o.c)(s.className,U.logoLink)}),logo:d}))},W=(0,i.createContext)({activeLanguage:"fi",availableLanguages:[]}),K=(0,i.createContext)({setLanguage:()=>{},setAvailableLanguages:()=>{}});function Z(e){let{children:t,defaultLanguage:n,onDidChangeLanguage:a,languages:r}=e;const[o,d]=(0,i.useState)(n),[s,c]=(0,i.useState)(r||[]);(0,i.useEffect)((()=>{a&&a(o)}),[o]);const u={activeLanguage:o,availableLanguages:s};return i.createElement(W.Provider,{value:u},i.createElement(K.Provider,{value:{setLanguage:e=>{if(-1===s.map((e=>e.value)).indexOf(e))throw new TypeError("Language not found in available languages");d(e)},setAvailableLanguages:e=>{c(e)}}},t))}function X(){const{activeLanguage:e}=(0,i.useContext)(W);return e}Z.defaultProps={defaultLanguage:"fi"};const J=e=>(0,i.useCallback)((t=>{e&&e(t)}),[e]),ee=e=>J((t=>{"Enter"!==t.key&&" "!==t.key||e(t)}));var te="HeaderActionBarItem-module_labelOnRight__3PkC_";(0,s.s)(".HeaderActionBarItem-module_header__3yIeQ{--header-background-color:var(--color-white);--header-color:var(--color-black-90);--header-height:var(--spacing-4-xl);--header-focus-outline-width:3px;--header-focus-outline-border-radius:0;--header-focus-outline-color:var(--color-coat-of-arms);--header-divider-color:var(--color-black-20);--header-z-index:10;--header-margin:var(--spacing-m);--header-max-width:1440px;--header-item-border-color:var(--color-black-20);--header-item-hover-color:var(--color-black-20);--actionbar-background-color:var(--color-white);--action-bar-container-height:88px;--action-bar-section-gutter:var(--spacing-s);--action-bar-dropdown-menu-caret-width:64px;--action-bar-dropdown-menu-primary-item-height:64px;--action-bar-dropdown-menu-secondary-item-height:48px;--action-bar-button-size:64px;--action-bar-item-gutter:12px;--action-bar-item-title-font-size:var(--fontsize-body-s);--action-bar-item-title-font-color:var(--header-color);--lang-selector-mobile-background-color:var(--color-silver-light);--lang-selector-item-font-color:var(--header-color);--lang-selector-dropdown-background-color:var(--color-white);--nav-link-font-color:var(--header-color);--nav-border-color:var(--color-black-20);--nav-link-hover-color:var(--color-black-90);--nav-link-dropdown-background-color:var(--color-white);--nav-button-background-color:var(--color-black-5);--nav-button-hover-background-color:var(--color-black-5);--nav-search-color:var(--header-color);--nav-mobile-menu-background-color:var(--color-white);--nav-mobile-menu-bottom-background-color:var(--color-silver-light);--nav-mobile-margin-left:var(--spacing-s);--universal-bar-background-color:var(--color-black-5);--logo-height:56px;--icon-size:24px;--nav-drop-down-icon-color:var(--color-black);--nav-background-color:var(--color-white);background-color:var(--header-background-color);color:var(--header-color);position:relative;width:100%}@media only screen and (max-width:991px){.HeaderActionBarItem-module_header__3yIeQ{--action-bar-container-height:74px;--logo-height:48px}}@media only screen and (max-width:767px){.HeaderActionBarItem-module_header__3yIeQ{--header-margin:var(--spacing-s);--action-bar-container-height:64px;--logo-height:32px}}@media only screen and (max-width:575px){.HeaderActionBarItem-module_header__3yIeQ{--header-margin:var(--spacing-xs);--action-bar-container-height:64px;--logo-height:32px}}.HeaderActionBarItem-module_header__3yIeQ.HeaderActionBarItem-module_theme-dark__2h8ns{--color-focus-outline:var(--color-white);--header-color:var(--color-white);--header-focus-outline-color:var(--color-white);--header-background-color:var(--color-black-80);--nav-border-color:var(--color-white);--nav-link-hover-color:var(--color-white);--universal-bar-background-color:var(--color-black-60);--navigation-link-button-background-color:var(--color-black-60);--nav-link-dropdown-background-color:var(--color-black-80);--lang-selector-mobile-background-color:var(--color-black-80);--lang-selector-dropdown-background-color:var(--color-black-60);--nav-button-background-color:var(--color-black-60);--nav-button-hover-background-color:var(--color-black-60);--nav-drop-down-icon-color:var(--color-white);--actionbar-background-color:var(--color-black-80);--nav-background-color:var(--color-black-80);--nav-mobile-menu-background-color:var(--color-black-80);--nav-mobile-menu-bottom-background-color:var(--color-black-60)}.HeaderActionBarItem-module_headerBackgroundWrapper__1iYrN{position:relative;z-index:var(--header-z-index)}button.HeaderActionBarItem-module_actionBarItem__2AJTk{align-self:center;appearance:none;background:transparent;border:none;color:var(--header-color);cursor:pointer;padding:0}button.HeaderActionBarItem-module_actionBarItem__2AJTk:focus-visible{border:none;outline:var(--header-focus-outline-width) solid var(--header-focus-outline-color);outline-offset:var(--header-focus-outline-width)}.HeaderActionBarItem-module_actionBarItemIcon__1l2lb{display:block;height:var(--icon-size);margin:0 auto;padding:3px 0 0;width:var(--icon-size)}.HeaderActionBarItem-module_actionBarItemIcon__1l2lb>svg{display:block;height:100%;width:auto}.HeaderActionBarItem-module_actionBarItemLabel__815JB{color:var(--action-bar-item-title-font-color);display:block;font-size:var(--action-bar-item-title-font-size);margin:0 auto;white-space:nowrap}.HeaderActionBarItem-module_actionBarItemLabel__815JB>svg{display:block}.HeaderActionBarItem-module_labelOnRight__3PkC_{display:inline-block}.HeaderActionBarItem-module_fixedRightPosition__1SJj5{display:block}");const ne=(0,i.forwardRef)(((e,t)=>{var{icon:n,label:a,labelOnRight:d,fixedRightPosition:s,className:c,ariaLabel:u,ariaControls:l}=e,g=(0,r._)(e,["icon","label","labelOnRight","fixedRightPosition","className","ariaLabel","ariaControls"]);const h=(0,o.c)({"HeaderActionBarItem-module_actionBarItem__2AJTk":!0,[c]:!0,"HeaderActionBarItem-module_fixedRightPosition__1SJj5":s}),f=(0,o.c)({"HeaderActionBarItem-module_actionBarItemIcon__1l2lb":!0,[te]:d}),p=(0,o.c)({"HeaderActionBarItem-module_actionBarItemLabel__815JB":!0,[te]:d});return i.createElement("button",Object.assign({type:"button"},g,u&&{"aria-label":u},l&&{"aria-controls":l},{className:h,ref:t}),n&&i.isValidElement(n)&&i.createElement("span",{className:f},(0,i.cloneElement)(n,{"aria-hidden":!0})),a&&i.createElement("span",{className:p},a))})),ae=e=>{let{ariaLabel:t,onClick:n}=e;const{hasNavigationContent:a,mobileMenuOpen:r,isNotLargeScreen:o}=x(),{setMobileMenuOpen:d}=E(),s={"aria-label":t,"aria-expanded":r,"aria-controls":r&&"hds-mobile-menu"},c=J(n);return a&&o?i.createElement(ne,Object.assign({label:"Menu"},s,{onClick:e=>{e.isPropagationStopped()||d(!r)},onClickCapture:c,icon:r?i.createElement(m.I,null):i.createElement(b.I,null)})):null};(0,s.s)("@layer actionBar{.HeaderActionBarItemWithDropdown-module_dropdownWrapper__Mb2ft{bottom:0;overflow:hidden;position:absolute;right:0;transform:translateY(100%) translateY(1px);transition-duration:0ms;transition-property:max-height,padding-bottom;z-index:20}.HeaderActionBarItemWithDropdown-module_container__2NETb{display:flex}.HeaderActionBarItemWithDropdown-module_container__2NETb .HeaderActionBarItemWithDropdown-module_dropdownWrapper__Mb2ft{max-height:0;min-width:300px;padding-bottom:0;transition-delay:.4s}.HeaderActionBarItemWithDropdown-module_container__2NETb.HeaderActionBarItemWithDropdown-module_visible__IJQWz .HeaderActionBarItemWithDropdown-module_dropdownWrapper__Mb2ft{max-height:1000vh;padding-bottom:20px;transition-delay:0ms}.HeaderActionBarItemWithDropdown-module_container__2NETb:not(.HeaderActionBarItemWithDropdown-module_hasContent__1nypi){display:none}.HeaderActionBarItemWithDropdown-module_container__2NETb:not(.HeaderActionBarItemWithDropdown-module_fullWidth__3B-JV){display:flex;position:relative}.HeaderActionBarItemWithDropdown-module_container__2NETb.HeaderActionBarItemWithDropdown-module_fullWidth__3B-JV>.HeaderActionBarItemWithDropdown-module_dropdownWrapper__Mb2ft{left:0}.HeaderActionBarItemWithDropdown-module_icon__-TAc5{display:block}.HeaderActionBarItemWithDropdown-module_dropdown__2M8r7{background:#fff;border:1px solid var(--color-black-10);margin-top:-1px;position:relative;right:0;transform:translateY(-100%);transition:transform .25s .15s,visibility 0ms .4s;visibility:hidden}.HeaderActionBarItemWithDropdown-module_dropdown__2M8r7.HeaderActionBarItemWithDropdown-module_fullWidth__3B-JV{left:0}.HeaderActionBarItemWithDropdown-module_dropdown__2M8r7.HeaderActionBarItemWithDropdown-module_visible__IJQWz{transform:translateY(0);transition:transform .25s 0ms,visibility 0ms 0ms;visibility:visible}.HeaderActionBarItemWithDropdown-module_dropdown__2M8r7>*{padding:var(--spacing-xs) var(--spacing-s);width:100%}}");const re=e=>{const{id:t,children:n,label:a,fullWidth:d,className:s,iconClassName:c,dropdownClassName:u,closeLabel:l,icon:g,closeIcon:h=m.I,ariaLabel:f,labelOnRight:p,fixedRightPosition:R}=e,b=(0,r._)(e,["id","children","label","fullWidth","className","iconClassName","dropdownClassName","closeLabel","icon","closeIcon","ariaLabel","labelOnRight","fixedRightPosition"]),y=(0,i.useRef)(null),v=(0,i.useRef)(null),[_,w]=(0,i.useState)(!1),[M,x]=(0,i.useState)(!1),E=()=>v.current,S=e=>{const t=E(),n=e.target;t.contains(n)||w(!1)};(0,i.useEffect)((()=>(_&&document.addEventListener("click",S),()=>document.removeEventListener("click",S))),[v.current,_]),(0,i.useEffect)((()=>{var e;x(0!==(null===(e=y.current)||void 0===e?void 0:e.childNodes.length))}),[n]);const k=_?l:a,N=_?h:g,D={visible:_,"HeaderActionBarItemWithDropdown-module_visible__IJQWz":_,"HeaderActionBarItemWithDropdown-module_hasContent__1nypi":M,"HeaderActionBarItemWithDropdown-module_fullWidth__3B-JV":d},A=(0,o.c)("HeaderActionBarItemWithDropdown-module_container__2NETb",s,D),j=(0,o.c)("HeaderActionBarItemWithDropdown-module_icon__-TAc5",c),T=(0,o.c)("HeaderActionBarItemWithDropdown-module_dropdown__2M8r7",u,D);return i.createElement("div",Object.assign({},b,{id:t,className:A,ref:v,onBlur:e=>{const t=E(),n=e.relatedTarget;t.contains(n)||w(!1)}}),i.createElement(ne,{className:j,onClick:()=>{w(!_)},label:k,icon:N,"aria-expanded":_,"aria-label":f,"aria-controls":t+"-dropdown",labelOnRight:p,fixedRightPosition:R}),i.createElement("div",{className:"HeaderActionBarItemWithDropdown-module_dropdownWrapper__Mb2ft"},i.createElement("aside",{id:t+"-dropdown",className:T,ref:y},n)))};re.defaultProps={fullWidth:!1,closeLabel:"Sulje"};var ie="HeaderLanguageSelector-module_languageNodes__lTe8p";(0,s.s)(".HeaderLanguageSelector-module_header__3x8fD{--header-background-color:var(--color-white);--header-color:var(--color-black-90);--header-height:var(--spacing-4-xl);--header-focus-outline-width:3px;--header-focus-outline-border-radius:0;--header-focus-outline-color:var(--color-coat-of-arms);--header-divider-color:var(--color-black-20);--header-z-index:10;--header-margin:var(--spacing-m);--header-max-width:1440px;--header-item-border-color:var(--color-black-20);--header-item-hover-color:var(--color-black-20);--actionbar-background-color:var(--color-white);--action-bar-container-height:88px;--action-bar-section-gutter:var(--spacing-s);--action-bar-dropdown-menu-caret-width:64px;--action-bar-dropdown-menu-primary-item-height:64px;--action-bar-dropdown-menu-secondary-item-height:48px;--action-bar-button-size:64px;--action-bar-item-gutter:12px;--action-bar-item-title-font-size:var(--fontsize-body-s);--action-bar-item-title-font-color:var(--header-color);--lang-selector-mobile-background-color:var(--color-silver-light);--lang-selector-item-font-color:var(--header-color);--lang-selector-dropdown-background-color:var(--color-white);--nav-link-font-color:var(--header-color);--nav-border-color:var(--color-black-20);--nav-link-hover-color:var(--color-black-90);--nav-link-dropdown-background-color:var(--color-white);--nav-button-background-color:var(--color-black-5);--nav-button-hover-background-color:var(--color-black-5);--nav-search-color:var(--header-color);--nav-mobile-menu-background-color:var(--color-white);--nav-mobile-menu-bottom-background-color:var(--color-silver-light);--nav-mobile-margin-left:var(--spacing-s);--universal-bar-background-color:var(--color-black-5);--logo-height:56px;--icon-size:24px;--nav-drop-down-icon-color:var(--color-black);--nav-background-color:var(--color-white);background-color:var(--header-background-color);color:var(--header-color);position:relative;width:100%}@media only screen and (max-width:991px){.HeaderLanguageSelector-module_header__3x8fD{--action-bar-container-height:74px;--logo-height:48px}}@media only screen and (max-width:767px){.HeaderLanguageSelector-module_header__3x8fD{--header-margin:var(--spacing-s);--action-bar-container-height:64px;--logo-height:32px}}@media only screen and (max-width:575px){.HeaderLanguageSelector-module_header__3x8fD{--header-margin:var(--spacing-xs);--action-bar-container-height:64px;--logo-height:32px}}.HeaderLanguageSelector-module_header__3x8fD.HeaderLanguageSelector-module_theme-dark__1Y6Z6{--color-focus-outline:var(--color-white);--header-color:var(--color-white);--header-focus-outline-color:var(--color-white);--header-background-color:var(--color-black-80);--nav-border-color:var(--color-white);--nav-link-hover-color:var(--color-white);--universal-bar-background-color:var(--color-black-60);--navigation-link-button-background-color:var(--color-black-60);--nav-link-dropdown-background-color:var(--color-black-80);--lang-selector-mobile-background-color:var(--color-black-80);--lang-selector-dropdown-background-color:var(--color-black-60);--nav-button-background-color:var(--color-black-60);--nav-button-hover-background-color:var(--color-black-60);--nav-drop-down-icon-color:var(--color-white);--actionbar-background-color:var(--color-black-80);--nav-background-color:var(--color-black-80);--nav-mobile-menu-background-color:var(--color-black-80);--nav-mobile-menu-bottom-background-color:var(--color-black-60)}.HeaderLanguageSelector-module_headerBackgroundWrapper__3js89{position:relative;z-index:var(--header-z-index)}.HeaderLanguageSelector-module_languageSelector__3d38B{display:flex;gap:var(--spacing-s);justify-content:space-between}.HeaderLanguageSelector-module_languageSelectorDropdownIcon__3uQwS{align-items:center;margin-top:1px;padding-top:3px}.HeaderLanguageSelector-module_languageSelectorDropdownIcon__3uQwS:focus-visible{outline-offset:0}.HeaderLanguageSelector-module_languageSelectorDropdown__2D4yu{align-items:flex-start;background-color:var(--lang-selector-dropdown-background-color);display:flex;flex-flow:column nowrap}.HeaderLanguageSelector-module_languageSelectorDropdown__2D4yu>*{align-items:center;display:flex;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin:0}.HeaderLanguageSelector-module_languageSelectorDropdown__2D4yu>h3{border-bottom:1px solid var(--header-divider-color)}.HeaderLanguageSelector-module_languageSelectorDropdown__2D4yu>h3:not(:first-of-type){border-top:1px solid var(--header-divider-color)}.HeaderLanguageSelector-module_languageSelectorDropdown__2D4yu>a{color:var(--lang-selector-item-font-color);text-decoration:none}.HeaderLanguageSelector-module_languageSelectorDropdown__2D4yu>button{border:var(--header-focus-outline-width) solid transparent}[type=button].HeaderLanguageSelector-module_item__3_I7N,button.HeaderLanguageSelector-module_item__3_I7N{appearance:none;background:transparent;color:var(--lang-selector-item-font-color);cursor:pointer;line-height:var(--lineheight-l);outline:0;white-space:nowrap}[type=button].HeaderLanguageSelector-module_item__3_I7N:focus-visible,button.HeaderLanguageSelector-module_item__3_I7N:focus-visible{border:var(--header-focus-outline-width) solid var(--header-focus-outline-color)}.HeaderLanguageSelector-module_activeItem__15LKg{font-weight:700}.HeaderLanguageSelector-module_activeItem__15LKg span{border-bottom:2px solid}.HeaderLanguageSelector-module_languageNodes__lTe8p{display:flex;gap:var(--spacing-s)}.HeaderLanguageSelector-module_languageNodes__lTe8p [type=button].HeaderLanguageSelector-module_item__3_I7N,.HeaderLanguageSelector-module_languageNodes__lTe8p button.HeaderLanguageSelector-module_item__3_I7N{align-self:center;border:none;padding:0}.HeaderLanguageSelector-module_languageNodes__lTe8p [type=button].HeaderLanguageSelector-module_item__3_I7N:focus-visible,.HeaderLanguageSelector-module_languageNodes__lTe8p button.HeaderLanguageSelector-module_item__3_I7N:focus-visible{border:none;outline:var(--header-focus-outline-width) solid var(--header-focus-outline-color);outline-offset:var(--header-focus-outline-width)}.HeaderLanguageSelector-module_simpleLanguageNodes__3uEk-{gap:var(--action-bar-item-gutter)}.HeaderLanguageSelector-module_fullWidthForMobile__37l-I{background-color:var(--lang-selector-mobile-background-color);border-bottom:1px solid var(--color-black-20);box-sizing:border-box;display:flex;height:var(--spacing-layout-m);padding:0 var(--header-margin);width:100%}.HeaderLanguageSelector-module_fullWidthForMobile__37l-I .HeaderLanguageSelector-module_languageSelectorDropdownIcon__3uQwS:focus-visible{outline-offset:0}");const oe=e=>{let{value:t,label:n}=e;const a=X(),r=function(){const{setLanguage:e}=(0,i.useContext)(K);return e}(),d=(0,o.c)("HeaderLanguageSelector-module_item__3_I7N",{"HeaderLanguageSelector-module_activeItem__15LKg":a===t}),s=(c=()=>r(t),function(e){return e.preventDefault(),c.call(c,e)});var c;return i.createElement("button",{key:t,lang:t,onClick:s,type:"button",className:d},i.createElement("span",null,n))},de=e=>i.createElement(oe,{key:e.value,value:e.value,label:e.label}),se=(e,t)=>{const n=e.some((e=>void 0!==e.isPrimary)),a=e.find((e=>e.value===t));return n&&!0!==a.isPrimary?[[a],e.filter((e=>e.value!==a.value))]:n?[e.filter((e=>!!e.isPrimary)),e.filter((e=>!e.isPrimary))]:[e,[]]};function ce(e){return null}ce.componentName="HeaderLanguageSelector";const ue=e=>{let{children:t,ariaLabel:n,languageHeading:a,sortLanguageOptions:r=se,fullWidthForMobile:d=!1}=e;const{isNotLargeScreen:s,mobileMenuOpen:c}=x(),u=function(){const{availableLanguages:e}=(0,i.useContext)(W);return e}(),l=X(),[g,f]=r(u,l),p=g.map(de),m=()=>0===f.length?null:i.createElement(i.Fragment,null,a&&i.createElement("h3",null,a),f.map(de));if(!(s&&d&&!c||!s&&!d))return null;const y=t&&Array.isArray(t)&&t.length>0,v=f.length>0;return i.createElement("div",{className:(0,o.c)("HeaderLanguageSelector-module_languageSelector__3d38B",{"HeaderLanguageSelector-module_fullWidthForMobile__37l-I":d})},i.createElement("div",{className:(0,o.c)(ie)},p),(y||v)&&i.createElement(re,{id:"language-selection-more",iconClassName:"HeaderLanguageSelector-module_languageSelectorDropdownIcon__3uQwS",dropdownClassName:"HeaderLanguageSelector-module_languageSelectorDropdown__2D4yu",label:i.createElement(h.I,{"aria-hidden":!0}),closeLabel:i.createElement(R.I,{"aria-hidden":!0}),icon:i.createElement(b.a,{"aria-hidden":!0}),closeIcon:i.createElement(b.a,{"aria-hidden":!0}),fullWidth:s,ariaLabel:n,labelOnRight:!0},i.createElement(m,null),t))};var le={header:"HeaderActionBar-module_header__wl6JO","theme-dark":"HeaderActionBar-module_theme-dark__17LMS",headerBackgroundWrapper:"HeaderActionBar-module_headerBackgroundWrapper__QoNCR",headerActionBar:"HeaderActionBar-module_headerActionBar__lPeGE",headerActionBarContainer:"HeaderActionBar-module_headerActionBarContainer__5tfj-",headerActions:"HeaderActionBar-module_headerActions__3lNnM",titleAndLogoContainer:"HeaderActionBar-module_titleAndLogoContainer__2LEAb",title:"HeaderActionBar-module_title__opzt9",normal:"HeaderActionBar-module_normal__3B4qi",bold:"HeaderActionBar-module_bold__1Lhkz",black:"HeaderActionBar-module_black__2P2h1",logo:"HeaderActionBar-module_logo__2r2T0"};(0,s.s)('.HeaderActionBar-module_header__wl6JO{--header-background-color:var(--color-white);--header-color:var(--color-black-90);--header-height:var(--spacing-4-xl);--header-focus-outline-width:3px;--header-focus-outline-border-radius:0;--header-focus-outline-color:var(--color-coat-of-arms);--header-divider-color:var(--color-black-20);--header-z-index:10;--header-margin:var(--spacing-m);--header-max-width:1440px;--header-item-border-color:var(--color-black-20);--header-item-hover-color:var(--color-black-20);--actionbar-background-color:var(--color-white);--action-bar-container-height:88px;--action-bar-section-gutter:var(--spacing-s);--action-bar-dropdown-menu-caret-width:64px;--action-bar-dropdown-menu-primary-item-height:64px;--action-bar-dropdown-menu-secondary-item-height:48px;--action-bar-button-size:64px;--action-bar-item-gutter:12px;--action-bar-item-title-font-size:var(--fontsize-body-s);--action-bar-item-title-font-color:var(--header-color);--lang-selector-mobile-background-color:var(--color-silver-light);--lang-selector-item-font-color:var(--header-color);--lang-selector-dropdown-background-color:var(--color-white);--nav-link-font-color:var(--header-color);--nav-border-color:var(--color-black-20);--nav-link-hover-color:var(--color-black-90);--nav-link-dropdown-background-color:var(--color-white);--nav-button-background-color:var(--color-black-5);--nav-button-hover-background-color:var(--color-black-5);--nav-search-color:var(--header-color);--nav-mobile-menu-background-color:var(--color-white);--nav-mobile-menu-bottom-background-color:var(--color-silver-light);--nav-mobile-margin-left:var(--spacing-s);--universal-bar-background-color:var(--color-black-5);--logo-height:56px;--icon-size:24px;--nav-drop-down-icon-color:var(--color-black);--nav-background-color:var(--color-white);background-color:var(--header-background-color);color:var(--header-color);position:relative;width:100%}@media only screen and (max-width:991px){.HeaderActionBar-module_header__wl6JO{--action-bar-container-height:74px;--logo-height:48px}}@media only screen and (max-width:767px){.HeaderActionBar-module_header__wl6JO{--header-margin:var(--spacing-s);--action-bar-container-height:64px;--logo-height:32px}}@media only screen and (max-width:575px){.HeaderActionBar-module_header__wl6JO{--header-margin:var(--spacing-xs);--action-bar-container-height:64px;--logo-height:32px}}.HeaderActionBar-module_header__wl6JO.HeaderActionBar-module_theme-dark__17LMS{--color-focus-outline:var(--color-white);--header-color:var(--color-white);--header-focus-outline-color:var(--color-white);--header-background-color:var(--color-black-80);--nav-border-color:var(--color-white);--nav-link-hover-color:var(--color-white);--universal-bar-background-color:var(--color-black-60);--navigation-link-button-background-color:var(--color-black-60);--nav-link-dropdown-background-color:var(--color-black-80);--lang-selector-mobile-background-color:var(--color-black-80);--lang-selector-dropdown-background-color:var(--color-black-60);--nav-button-background-color:var(--color-black-60);--nav-button-hover-background-color:var(--color-black-60);--nav-drop-down-icon-color:var(--color-white);--actionbar-background-color:var(--color-black-80);--nav-background-color:var(--color-black-80);--nav-mobile-menu-background-color:var(--color-black-80);--nav-mobile-menu-bottom-background-color:var(--color-black-60)}.HeaderActionBar-module_headerBackgroundWrapper__QoNCR{position:relative;z-index:var(--header-z-index)}.HeaderActionBar-module_headerActionBar__lPeGE{align-items:stretch;box-sizing:border-box;color:var(--header-color);display:flex;gap:calc(var(--header-margin) / 2);height:var(--action-bar-container-height);justify-content:space-between;margin:0 auto;max-width:var(--header-max-width);padding-left:var(--header-margin);padding-right:var(--header-margin);position:relative}.HeaderActionBar-module_headerActionBar__lPeGE hr{border:0;border-left:1px solid var(--color-black-20);display:inline-block;height:100%;margin:0 5px;width:0}.HeaderActionBar-module_headerActionBarContainer__5tfj-{background-color:var(--actionbar-background-color);border-bottom:1px solid var(--header-divider-color);width:100%}.HeaderActionBar-module_headerActions__3lNnM{align-items:stretch;display:flex;flex-grow:1;gap:var(--action-bar-item-gutter);justify-content:flex-end}.HeaderActionBar-module_titleAndLogoContainer__2LEAb{align-items:center;color:inherit;cursor:pointer;display:flex;flex:0 0 auto;outline:none;position:relative;text-decoration:none;white-space:nowrap}.HeaderActionBar-module_titleAndLogoContainer__2LEAb:focus-visible{border:none;outline:var(--header-focus-outline-width) solid var(--header-focus-outline-color);outline-offset:var(--header-focus-outline-width)}.HeaderActionBar-module_titleAndLogoContainer__2LEAb:not([href]):not([tabindex="0"]){cursor:auto}.HeaderActionBar-module_title__opzt9{align-self:center;margin-top:-2px;padding:1px}.HeaderActionBar-module_normal__3B4qi>.HeaderActionBar-module_title__opzt9{font-family:var(--font-default);font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-.2px;line-height:var(--lineheight-s)}@media only screen and (max-width:991px){.HeaderActionBar-module_normal__3B4qi>.HeaderActionBar-module_title__opzt9{font-size:var(--fontsize-heading-s);font-weight:500;letter-spacing:-.2px;line-height:var(--lineheight-s)}}@media only screen and (max-width:767px){.HeaderActionBar-module_normal__3B4qi>.HeaderActionBar-module_title__opzt9{font-size:var(--fontsize-body-s);font-weight:500;letter-spacing:-.1px;line-height:var(--lineheight-s)}}.HeaderActionBar-module_bold__1Lhkz>.HeaderActionBar-module_title__opzt9{font-family:var(--font-default);font-size:var(--fontsize-heading-m);font-weight:700;letter-spacing:-.2px;line-height:var(--lineheight-s)}@media only screen and (max-width:991px){.HeaderActionBar-module_bold__1Lhkz>.HeaderActionBar-module_title__opzt9{font-size:var(--fontsize-heading-s);font-weight:700;letter-spacing:-.2px;line-height:var(--lineheight-s)}}@media only screen and (max-width:767px){.HeaderActionBar-module_bold__1Lhkz>.HeaderActionBar-module_title__opzt9{font-size:var(--fontsize-body-s);font-weight:700;letter-spacing:-.1px;line-height:var(--lineheight-s)}}.HeaderActionBar-module_black__2P2h1>.HeaderActionBar-module_title__opzt9{font-family:var(--font-default);font-size:var(--fontsize-heading-l);font-weight:900;letter-spacing:-.2px;line-height:var(--lineheight-s)}@media only screen and (max-width:991px){.HeaderActionBar-module_black__2P2h1>.HeaderActionBar-module_title__opzt9{font-size:var(--fontsize-heading-m);font-weight:900;letter-spacing:-.2px;line-height:var(--lineheight-s)}}@media only screen and (max-width:767px){.HeaderActionBar-module_black__2P2h1>.HeaderActionBar-module_title__opzt9{font-size:var(--fontsize-heading-xxs);font-weight:900;letter-spacing:-.1px;line-height:var(--lineheight-s)}}.HeaderActionBar-module_logo__2r2T0{align-self:center;box-sizing:content-box;height:var(--logo-height)}');const ge=(0,o.s)(le);var he;!function(e){e.top="top",e.bottom="bottom"}(he||(he={}));const fe={tabIndex:0,"aria-hidden":!0},pe=(e,t)=>{if(t){const n=(e=>{const t=e.querySelectorAll('a, button, textarea, input[type="text"], select');return Array.from(t).filter((e=>(e=>{if(!window)return!1;const{innerHeight:t,innerWidth:n}=window,{top:a,left:r,bottom:i,right:o,width:d,height:s}=e.getBoundingClientRect(),c=a>=0&&r>=0&&i<=t&&o<=n,u=e.tabIndex>=0,l=!1===Boolean(e.getAttribute("disabled"));return c&&u&&l&&d>0&&s>0})(e)))})(t);n.length&&n[e===he.top?0:n.length-1].focus()}},me=e=>{let{onFocus:t}=e;return i.createElement("div",Object.assign({},fe,{onFocus:t}))},Re=(e,t)=>{const n=document.createElement("div");return n.className="hds-actionbar-tab-barrier",n.tabIndex=fe.tabIndex,n["aria-hidden"]=fe["aria-hidden"],n.addEventListener("focus",(()=>pe(e,t))),e===he.top?document.body.insertBefore(n,document.body.firstChild):document.body.appendChild(n),()=>n.remove()};var be;!function(e){e.Normal="normal",e.Bold="bold"}(be||(be={}));const ye=e=>{let{title:t,titleStyle:n,titleAriaLabel:a,logoAriaLabel:o,menuButtonAriaLabel:d,titleHref:s,logoHref:u,logo:l,onTitleClick:g,onLogoClick:h,children:f,className:p,ariaLabel:m,role:R,frontPageLabel:b,openFrontPageLinksAriaLabel:y}=e;const v=J(g),_=J(h),w=ee(v),M=ee(_),{mobileMenuOpen:E}=x(),S=(0,i.useRef)();(0,i.useEffect)((()=>{if(E&&void 0!==S){const e=Re(he.top,S.current),t=Re(he.bottom,S.current);return()=>{e(),t()}}}),[S,E]);const k={"aria-label":o,href:u,className:ge(le.titleAndLogoContainer,le.logo),onClick:_,onKeyPress:M},N={"aria-label":a,href:s,className:ge(le.titleAndLogoContainer,le.title,le[n]),onClick:g,onKeyPress:M};N.href||N.onClick?(N.onKeyPress=w,N.onClick=v):N.role=a&&"img";const D=Array.isArray(f)?f.filter((e=>i.isValidElement(e)&&!e.props.fixedRightPosition)):[f],A=Array.isArray(f)?f.filter((e=>i.isValidElement(e)&&!!e.props.fixedRightPosition)):[],{children:j,props:T,componentExists:L}=(e=>{const t=(e=>{const t=(0,c.b)(e,ce.componentName);return t[0]&&t[0][0]})(e),n=t&&t.props||{},{children:a}=n;return{children:a,props:(0,r._)(n,["children"]),componentExists:!!t}})(f),I=(0,i.useMemo)((()=>j?(0,c.g)(j):null),[j]);return i.createElement(i.Fragment,null,E&&i.createElement(me,{onFocus:()=>pe(he.bottom,S.current)}),i.createElement("div",{className:le.headerActionBarContainer,ref:S},i.createElement("div",{className:ge(le.headerActionBar,p),role:R,"aria-label":m},i.createElement($,{logo:l,logoProps:k}),t&&i.createElement(F,Object.assign({},N),i.createElement("span",{className:ge(le.title)},t)),i.createElement("div",{className:le.headerActions},L&&i.createElement(ue,Object.assign({},T),I),D,i.createElement(ae,{ariaLabel:d}),A.length>0&&i.createElement(i.Fragment,null,i.createElement("hr",null),A))),i.createElement(Q,{frontPageLabel:b,titleHref:s,logo:l,logoProps:k,openFrontPageLinksAriaLabel:y})),L&&i.createElement(ue,Object.assign({},T,{fullWidthForMobile:!0}),I),E&&i.createElement(me,{onFocus:()=>pe(he.top,S.current)}))};ye.defaultProps={titleStyle:be.Normal};var ve={headerNavigationMenu:"HeaderNavigationMenu-module_headerNavigationMenu__3G6-N",headerNavigationMenuContainer:"HeaderNavigationMenu-module_headerNavigationMenuContainer__2nK9z",headerNavigationMenuList:"HeaderNavigationMenu-module_headerNavigationMenuList__3HIzx",headerNavigationMenuLinkContent:"HeaderNavigationMenu-module_headerNavigationMenuLinkContent__3zC2j",headerNavigationMenuLinkContentActive:"HeaderNavigationMenu-module_headerNavigationMenuLinkContentActive__3QtW_",headerNavigationMenuLink:"HeaderNavigationMenu-module_headerNavigationMenuLink__H_ogS"};(0,s.s)(".HeaderNavigationMenu-module_headerNavigationMenu__3G6-N{background-color:var(--nav-background-color);box-sizing:border-box;display:flex;margin:0 auto;max-width:var(--header-max-width);min-height:var(--spacing-layout-l);padding:0 var(--header-margin);width:100%}.HeaderNavigationMenu-module_headerNavigationMenuContainer__2nK9z{border-bottom:1px solid var(--header-divider-color)}.HeaderNavigationMenu-module_headerNavigationMenuList__3HIzx{column-gap:var(--spacing-l);display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0;width:100%}.HeaderNavigationMenu-module_headerNavigationMenuLinkContent__3zC2j{align-items:center;display:flex;height:100%}.HeaderNavigationMenu-module_headerNavigationMenuLinkContentActive__3QtW_{box-shadow:inset 0 -4px 0 0 var(--nav-link-hover-color)}.HeaderNavigationMenu-module_headerNavigationMenuLinkContentActive__3QtW_ .HeaderNavigationMenu-module_headerNavigationMenuLink__H_ogS{font-weight:700}.HeaderNavigationMenu-module_headerNavigationMenuLink__H_ogS.HeaderNavigationMenu-module_headerNavigationMenuLink__H_ogS{border:0;color:var(--nav-link-font-color);font-size:var(--fontsize-body-l);margin:var(--spacing-s) 0;padding:0}");const _e=()=>{const{isNotLargeScreen:e,navigationContent:t}=x(),n=(0,c.a)(t);return i.createElement(i.Fragment,null,n.map(((t,n)=>(0,i.isValidElement)(t)?((e,t,n)=>{const a=n?ve.headerNavigationMenuLinkContentMobile:ve.headerNavigationMenuLinkContent,r=(0,o.c)(a,ve.headerNavigationMenuLinkContentActive),d=e.props.active&&!n?r:a,s=(0,i.cloneElement)(e,{dropdownLinkClassName:ve.headerNavigationMenuDropdownLinkMobile,dropdownClassName:ve.headerNavigationMenuDropdownMobile,wrapperClassName:ve.headerNavigationMenuLinkWrapperMobile,dropdownButtonClassName:ve.headerNavigationMenuDropdownButtonMobile,className:(0,o.c)(e.props.className,ve.headerNavigationMenuLinkMobile),index:t}),c=(0,i.cloneElement)(e,{className:(0,o.c)(e.props.className,ve.headerNavigationMenuLink),index:t}),u=n?s:c;return i.createElement("li",{key:t},i.createElement("span",{className:d},u))})(t,n,e):null)))};(0,s.s)(".HeaderSearch-module_searchContainer__3NfSd{align-items:center;border-radius:0;color:var(--nav-search-color);display:flex;position:relative;width:100%}");const we=e=>{let{onChange:t,onSubmit:n,label:a}=e;const[r,o]=(0,i.useState)("");return(0,i.useEffect)((()=>{t&&t(r)}),[r]),i.createElement("div",{className:"HeaderSearch-module_searchContainer__3NfSd",role:"search"},i.createElement(y.S,{label:a,onSubmit:()=>{n&&n(r)},onChange:o}))};we.displayName="HeaderSearch";var Me={header:"Header-module_header__291GF","theme-dark":"Header-module_theme-dark__1srRp",headerBackgroundWrapper:"Header-module_headerBackgroundWrapper__KsFy2"};(0,s.s)(".Header-module_header__291GF{--header-background-color:var(--color-white);--header-color:var(--color-black-90);--header-height:var(--spacing-4-xl);--header-focus-outline-width:3px;--header-focus-outline-border-radius:0;--header-focus-outline-color:var(--color-coat-of-arms);--header-divider-color:var(--color-black-20);--header-z-index:10;--header-margin:var(--spacing-m);--header-max-width:1440px;--header-item-border-color:var(--color-black-20);--header-item-hover-color:var(--color-black-20);--actionbar-background-color:var(--color-white);--action-bar-container-height:88px;--action-bar-section-gutter:var(--spacing-s);--action-bar-dropdown-menu-caret-width:64px;--action-bar-dropdown-menu-primary-item-height:64px;--action-bar-dropdown-menu-secondary-item-height:48px;--action-bar-button-size:64px;--action-bar-item-gutter:12px;--action-bar-item-title-font-size:var(--fontsize-body-s);--action-bar-item-title-font-color:var(--header-color);--lang-selector-mobile-background-color:var(--color-silver-light);--lang-selector-item-font-color:var(--header-color);--lang-selector-dropdown-background-color:var(--color-white);--nav-link-font-color:var(--header-color);--nav-border-color:var(--color-black-20);--nav-link-hover-color:var(--color-black-90);--nav-link-dropdown-background-color:var(--color-white);--nav-button-background-color:var(--color-black-5);--nav-button-hover-background-color:var(--color-black-5);--nav-search-color:var(--header-color);--nav-mobile-menu-background-color:var(--color-white);--nav-mobile-menu-bottom-background-color:var(--color-silver-light);--nav-mobile-margin-left:var(--spacing-s);--universal-bar-background-color:var(--color-black-5);--logo-height:56px;--icon-size:24px;--nav-drop-down-icon-color:var(--color-black);--nav-background-color:var(--color-white);background-color:var(--header-background-color);color:var(--header-color);position:relative;width:100%}@media only screen and (max-width:991px){.Header-module_header__291GF{--action-bar-container-height:74px;--logo-height:48px}}@media only screen and (max-width:767px){.Header-module_header__291GF{--header-margin:var(--spacing-s);--action-bar-container-height:64px;--logo-height:32px}}@media only screen and (max-width:575px){.Header-module_header__291GF{--header-margin:var(--spacing-xs);--action-bar-container-height:64px;--logo-height:32px}}.Header-module_header__291GF.Header-module_theme-dark__1srRp{--color-focus-outline:var(--color-white);--header-color:var(--color-white);--header-focus-outline-color:var(--color-white);--header-background-color:var(--color-black-80);--nav-border-color:var(--color-white);--nav-link-hover-color:var(--color-white);--universal-bar-background-color:var(--color-black-60);--navigation-link-button-background-color:var(--color-black-60);--nav-link-dropdown-background-color:var(--color-black-80);--lang-selector-mobile-background-color:var(--color-black-80);--lang-selector-dropdown-background-color:var(--color-black-60);--nav-button-background-color:var(--color-black-60);--nav-button-hover-background-color:var(--color-black-60);--nav-drop-down-icon-color:var(--color-white);--actionbar-background-color:var(--color-black-80);--nav-background-color:var(--color-black-80);--nav-mobile-menu-background-color:var(--color-black-80);--nav-mobile-menu-bottom-background-color:var(--color-black-60)}.Header-module_headerBackgroundWrapper__KsFy2{position:relative;z-index:var(--header-z-index)}");const xe=(0,o.s)(Me),Ee=e=>{var{ariaLabel:t,children:n,className:a}=e,o=(0,r._)(e,["ariaLabel","children","className"]);const{isNotLargeScreen:d}=x(),{theme:s}=o,c=(0,u.u)(Me.header,s),l=xe("hds-header",Me.header,s&&Me["theme-"+s],a,c,{isNotLargeScreen:d});return i.createElement("header",Object.assign({className:l},o,{"aria-label":t}),i.createElement("div",{className:Me.headerBackgroundWrapper},n))},Se=e=>{var{onDidChangeLanguage:t,defaultLanguage:n,languages:a}=e,o=(0,r._)(e,["onDidChangeLanguage","defaultLanguage","languages"]);return i.createElement(M,null,i.createElement(Z,{onDidChangeLanguage:t,defaultLanguage:n,languages:a},i.createElement(Ee,Object.assign({},o))))};Se.UniversalBar=e=>{let{ariaLabel:t,className:n,children:a,id:r,primaryLinkHref:d,primaryLinkText:s,role:u}=e;const{isNotLargeScreen:l}=x(),g=(0,c.g)(a),{setUniversalContent:h}=E();return(0,i.useEffect)((()=>{const e=(0,c.g)(a);h(e)}),[a]),l?null:i.createElement("div",{className:"HeaderUniversalBar-module_headerUniversalBarContainer__fckkA"},i.createElement("div",{role:u,"aria-label":t,id:r,className:(0,o.c)("HeaderUniversalBar-module_headerUniversalBar__1WF8C",n)},i.createElement("ul",{className:"HeaderUniversalBar-module_headerUniversalBarList__1ci3u"},i.createElement("li",{className:"HeaderUniversalBar-module_universalBarMainLinkContainer__xZGVq"},i.createElement(B,{href:d,label:s,className:S})),g.map(((e,t)=>i.isValidElement(e)?i.createElement("li",{key:"secondary-link-"+t,className:"HeaderUniversalBar-module_universalBarSecondaryLinkContainer__3itUq"},(0,i.cloneElement)(e,{className:(0,o.c)(e.props.className,S)})):null)))))},Se.ActionBar=ye,Se.TitleStyleType=be,Se.NavigationMenu=e=>{let{ariaLabel:t,children:n,id:a}=e;const{isNotLargeScreen:r}=x(),{setNavigationContent:o}=E();return(0,i.useEffect)((()=>{const e=(0,c.g)(n);o(e)}),[n]),r?null:i.createElement("div",{className:ve.headerNavigationMenuContainer},i.createElement("nav",{"aria-label":t,id:a,className:ve.headerNavigationMenu},i.createElement("ul",{className:ve.headerNavigationMenuList},i.createElement(_e,null))))},Se.ActionBarItem=re,Se.Link=B,Se.LanguageSelector=ce,Se.Search=we,Se.SkipLink=v.S,Se.LanguageButton=oe,Se.SimpleLanguageOptions=e=>{let{languages:t}=e;return i.createElement("div",{className:(0,o.c)(ie,"HeaderLanguageSelector-module_simpleLanguageNodes__3uEk-")},t.map(de))}},32719:function(e,t,n){"use strict";n.d(t,{s:function(){return r}});var a=n(7444),r={icon:"Icon-module_icon__1Jtzj icon_hds-icon__1YqNC",xs:"Icon-module_xs__3kAOj icon_hds-icon--size-xs__3dAMZ",s:"Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik",m:"Icon-module_m__3edUY icon_hds-icon--size-m__1mcHv",l:"Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy",xl:"Icon-module_xl__1M6cO icon_hds-icon--size-xl__1Jes8"};(0,a.s)(".icon_hds-icon__1YqNC{--icon-size:100%;background-color:currentcolor;display:inline-block;height:var(--icon-size);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:auto;mask-size:auto;width:var(--icon-size)}.icon_hds-icon__1YqNC.icon_hds-icon--size-xs__3dAMZ{--icon-size:var(--spacing-layout-2-xs)}.icon_hds-icon__1YqNC.icon_hds-icon--size-s__2Lkik{--icon-size:var(--spacing-layout-xs)}.icon_hds-icon__1YqNC.icon_hds-icon--size-m__1mcHv{--icon-size:var(--spacing-layout-s)}.icon_hds-icon__1YqNC.icon_hds-icon--size-l__3Zczy{--icon-size:var(--spacing-layout-m)}.icon_hds-icon__1YqNC.icon_hds-icon--size-xl__1Jes8{--icon-size:var(--spacing-layout-l)}.Icon-module_icon__1Jtzj{background-color:transparent}")},41011:function(e,t,n){"use strict";n.d(t,{I:function(){return i}});var a=n(67294),r=n(32719);const i=e=>{let{ariaLabel:t="alert-circle-fill",ariaLabelledby:n,ariaHidden:i=!0,className:o="",color:d,size:s="s",style:c={}}=e;return a.createElement("svg",{className:[r.s.icon,r.s[s],o].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":n,"aria-hidden":i,color:d,style:c},a.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3ZM13 16V18H11V16H13ZM13 6V14H11V6H13Z",fill:"currentColor"}))}},44961:function(e,t,n){"use strict";n.d(t,{I:function(){return i}});var a=n(67294),r=n(32719);const i=e=>{let{ariaLabel:t="angle-down",ariaLabelledby:n,ariaHidden:i=!0,className:o="",color:d,size:s="s",style:c={}}=e;return a.createElement("svg",{className:[r.s.icon,r.s[s],o].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":n,"aria-hidden":i,color:d,style:c},a.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M12 13.5L17 8.5L18.5 10L12 16.5L5.5 10L7 8.5L12 13.5Z",fill:"currentColor"}))}},29928:function(e,t,n){"use strict";n.d(t,{I:function(){return i}});var a=n(67294),r=n(32719);const i=e=>{let{ariaLabel:t="angle-left",ariaLabelledby:n,ariaHidden:i=!0,className:o="",color:d,size:s="s",style:c={}}=e;return a.createElement("svg",{className:[r.s.icon,r.s[s],o].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":n,"aria-hidden":i,color:d,style:c},a.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M10.5 12L15.5 17L14 18.5L7.5 12L14 5.5L15.5 7L10.5 12Z",fill:"currentColor"}))}},12670:function(e,t,n){"use strict";n.d(t,{I:function(){return i}});var a=n(67294),r=n(32719);const i=e=>{let{ariaLabel:t="angle-right",ariaLabelledby:n,ariaHidden:i=!0,className:o="",color:d,size:s="s",style:c={}}=e;return a.createElement("svg",{className:[r.s.icon,r.s[s],o].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":n,"aria-hidden":i,color:d,style:c},a.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z",fill:"currentColor"}))}},56924:function(e,t,n){"use strict";n.d(t,{I:function(){return i}});var a=n(67294),r=n(32719);const i=e=>{let{ariaLabel:t="angle-up",ariaLabelledby:n,ariaHidden:i=!0,className:o="",color:d,size:s="s",style:c={}}=e;return a.createElement("svg",{className:[r.s.icon,r.s[s],o].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":n,"aria-hidden":i,color:d,style:c},a.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M12 11.5L17 16.5L18.5 15L12 8.5L5.5 15L7 16.5L12 11.5Z",fill:"currentColor"}))}},32152:function(e,t,n){"use strict";n.d(t,{I:function(){return i}});var a=n(67294),r=n(32719);const i=e=>{let{ariaLabel:t="arrow-up",ariaLabelledby:n,ariaHidden:i=!0,className:o="",color:d,size:s="s",style:c={}}=e;return a.createElement("svg",{className:[r.s.icon,r.s[s],o].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":n,"aria-hidden":i,color:d,style:c},a.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z",fill:"currentColor"}))}},32659:function(e,t,n){"use strict";n.d(t,{I:function(){return i}});var a=n(67294),r=n(32719);const i=e=>{let{ariaLabel:t="check",ariaLabelledby:n,ariaHidden:i=!0,className:o="",color:d,size:s="s",style:c={}}=e;return a.createElement("svg",{className:[r.s.icon,r.s[s],o].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":n,"aria-hidden":i,color:d,style:c},a.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M21 7L10 18L4.5 12.5L6 11L10 15L19.5 5.5L21 7Z",fill:"currentColor"}))}},8381:function(e,t,n){"use strict";n.d(t,{I:function(){return i}});var a=n(67294),r=n(32719);const i=e=>{let{ariaLabel:t="check-circle-fill",ariaLabelledby:n,ariaHidden:i=!0,className:o="",color:d,size:s="s",style:c={}}=e;return a.createElement("svg",{className:[r.s.icon,r.s[s],o].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":n,"aria-hidden":i,color:d,style:c},a.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM16.5 8L18 9.5L10.5 17L6 12.5L7.5 11L10.5 14L16.5 8Z",fill:"currentColor"}))}},35828:function(e,t,n){"use strict";n.d(t,{I:function(){return i}});var a=n(67294),r=n(32719);const i=e=>{let{ariaLabel:t="cross",ariaLabelledby:n,ariaHidden:i=!0,className:o="",color:d,size:s="s",style:c={}}=e;return a.createElement("svg",{className:[r.s.icon,r.s[s],o].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":n,"aria-hidden":i,color:d,style:c},a.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M18 7.5L13.5 12L18 16.5L16.5 18L12 13.5L7.5 18L6 16.5L10.5 12L6 7.5L7.5 6L12 10.5L16.5 6L18 7.5Z",fill:"currentColor"}))}},96293:function(e,t,n){"use strict";n.d(t,{I:function(){return i}});var a=n(67294),r=n(32719);const i=e=>{let{ariaLabel:t="cross-circle",ariaLabelledby:n,ariaHidden:i=!0,className:o="",color:d,size:s="s",style:c={}}=e;return a.createElement("svg",{className:[r.s.icon,r.s[s],o].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":n,"aria-hidden":i,color:d,style:c},a.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM15 7.5L16.5 9L13.5 12L16.5 15L15 16.5L12 13.5L9 16.5L7.5 15L10.5 12L7.5 9L9 7.5L12 10.5L15 7.5Z",fill:"currentColor"}))}},48915:function(e,t,n){"use strict";n.d(t,{I:function(){return o},a:function(){return i}});var a=n(67294),r=n(32719);const i=e=>{let{ariaLabel:t="error-fill",ariaLabelledby:n,ariaHidden:i=!0,className:o="",color:d,size:s="s",style:c={}}=e;return a.createElement("svg",{className:[r.s.icon,r.s[s],o].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":n,"aria-hidden":i,color:d,style:c},a.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z",fill:"currentColor"}))},o=e=>{let{ariaLabel:t="info-circle-fill",ariaLabelledby:n,ariaHidden:i=!0,className:o="",color:d,size:s="s",style:c={}}=e;return a.createElement("svg",{className:[r.s.icon,r.s[s],o].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":n,"aria-hidden":i,color:d,style:c},a.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM13 10V16.5H15V18H9V16.5H11V11.5H9V10H13ZM11.8125 6C12.5374 6 13.125 6.5876 13.125 7.3125C13.125 8.03735 12.5374 8.625 11.8125 8.625C11.0876 8.625 10.5 8.03735 10.5 7.3125C10.5 6.5876 11.0876 6 11.8125 6Z",fill:"currentColor"}))}},77516:function(e,t,n){"use strict";n.d(t,{I:function(){return i}});var a=n(67294),r=n(32719);const i=e=>{let{ariaLabel:t="link-external",ariaLabelledby:n,ariaHidden:i=!0,className:o="",color:d,size:s="s",style:c={}}=e;return a.createElement("svg",{className:[r.s.icon,r.s[s],o].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":n,"aria-hidden":i,color:d,style:c},a.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z",fill:"currentColor"}))}},67470:function(e,t,n){"use strict";n.d(t,{I:function(){return o},a:function(){return i}});var a=n(67294),r=n(32719);const i=e=>{let{ariaLabel:t="globe",ariaLabelledby:n,ariaHidden:i=!0,className:o="",color:d,size:s="s",style:c={}}=e;return a.createElement("svg",{className:[r.s.icon,r.s[s],o].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":n,"aria-hidden":i,color:d,style:c},a.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM7.34528 17.0409C6.67886 17.1107 6.01455 17.1966 5.35359 17.2978C6.35409 18.5525 7.70206 19.5167 9.25161 20.0458C8.46819 19.1304 7.82833 18.12 7.34528 17.0409ZM16.6562 17.0485C16.1741 18.124 15.5362 19.131 14.7561 20.0435C16.2981 19.515 17.6403 18.5556 18.6386 17.3089L17.9422 17.2065C17.5147 17.1474 17.0859 17.0948 16.6562 17.0485ZM12.7504 16.8043L12.7506 19.9839C13.7114 19.0818 14.4909 18.0425 15.0671 16.908C14.2961 16.8523 13.5235 16.8182 12.7504 16.8043ZM11.25 16.803C10.513 16.8149 9.77633 16.8453 9.04149 16.8941L8.93557 16.9019C9.51103 18.0367 10.2897 19.0764 11.2498 19.9789L11.25 16.803ZM20.4674 12.7501L17.7084 12.7503C17.65 13.7296 17.4775 14.6853 17.1983 15.6034C17.9806 15.6941 18.7599 15.8058 19.5343 15.9379C20.0415 14.9704 20.3675 13.8927 20.4674 12.7501ZM4.45923 15.9264L4.50876 15.9176C5.26998 15.7899 6.0359 15.6818 6.80501 15.5936C6.52698 14.6791 6.35546 13.7264 6.29728 12.7502L3.53265 12.7501C3.63214 13.888 3.95581 14.9615 4.45923 15.9264ZM12.75 12.75L12.7502 15.3058C13.727 15.3228 14.7036 15.3714 15.6767 15.4516C15.9671 14.5863 16.1477 13.6805 16.211 12.7503L12.75 12.75ZM11.25 12.75L7.7947 12.7503C7.85783 13.6784 8.03782 14.5821 8.32667 15.4459C9.2991 15.3667 10.2745 15.3198 11.2503 15.3045L11.25 12.75ZM19.5342 8.0611L19.2178 8.11547C18.5477 8.2247 17.874 8.31874 17.1977 8.3975C17.4776 9.31479 17.65 10.2704 17.7084 11.2495L20.4674 11.2499C20.3674 10.1071 20.0414 9.0292 19.5342 8.0611ZM4.45946 8.07443L4.4418 8.10721C3.94833 9.06338 3.63098 10.1252 3.53265 11.2499L6.29733 11.2495C6.35557 10.2734 6.52713 9.32081 6.80481 8.40549C6.01907 8.31617 5.23673 8.20561 4.45946 8.07443ZM15.6769 8.54819L15.2071 8.58474C14.3898 8.64341 13.5703 8.67995 12.7505 8.69423L12.75 11.2495L16.211 11.2496C16.1477 10.3195 15.967 9.4138 15.6769 8.54819ZM8.32718 8.55501L8.2883 8.67145C8.0219 9.49964 7.85505 10.3635 7.79474 11.2496L11.25 11.2495L11.2502 8.69551C10.2747 8.68016 9.29928 8.63326 8.32718 8.55501ZM11.2498 4.0215C10.2896 4.92418 9.51076 5.96406 8.93527 7.09907C9.7058 7.15244 10.4778 7.18523 11.2503 7.19771L11.2498 4.0215ZM12.7506 4.01655L12.7501 7.19642C13.5236 7.1826 14.2965 7.14842 15.0673 7.09389C14.4911 5.95831 13.7116 4.91879 12.7506 4.01655ZM9.25296 3.95332L9.2262 3.96288C7.68691 4.49402 6.3479 5.45492 5.35257 6.70215C6.01404 6.80395 6.67871 6.88991 7.34571 6.96049C7.8289 5.88027 8.46925 4.8692 9.25296 3.95332ZM14.7569 3.95705L14.8992 4.12587C15.615 4.99324 16.2047 5.94229 16.6572 6.95147C17.3202 6.88074 17.9812 6.79415 18.6388 6.6923C17.6409 5.44494 16.2989 4.4855 14.7569 3.95705Z",fill:"currentColor"}))},o=e=>{let{ariaLabel:t="menu-hamburger",ariaLabelledby:n,ariaHidden:i=!0,className:o="",color:d,size:s="s",style:c={}}=e;return a.createElement("svg",{className:[r.s.icon,r.s[s],o].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":n,"aria-hidden":i,color:d,style:c},a.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M22 17V19H2V17H22ZM22 11V13H2V11H22ZM22 5V7H2V5H22Z",fill:"currentColor"}))}},89836:function(e,t,n){"use strict";n.d(t,{I:function(){return i}});var a=n(67294),r=n(32719);const i=e=>{let{ariaLabel:t="question-circle",ariaLabelledby:n,ariaHidden:i=!0,className:o="",color:d,size:s="s",style:c={}}=e;return a.createElement("svg",{className:[r.s.icon,r.s[s],o].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":n,"aria-hidden":i,color:d,style:c},a.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM13 16V18H11V16H13ZM12.0437 5.75C14.0343 5.75 15.7173 7.29464 15.7173 9.42361C15.7173 10.7806 15.2461 11.489 14.161 12.306L13.9187 12.4844C13.1753 13.0295 12.9556 13.3359 12.9386 14.142L12.9375 14.25H10.9375C10.9375 12.6746 11.4591 11.8378 12.6143 10.9622L12.8618 10.7796C13.5685 10.2628 13.7173 10.0539 13.7173 9.42361C13.7173 8.43934 12.9662 7.75 12.0437 7.75C11.1907 7.75 10.4785 8.34077 10.3816 9.20835L10.3734 9.30587L8.37663 9.19182C8.49191 7.17347 10.1344 5.75 12.0437 5.75Z",fill:"currentColor"}))}},11303:function(e,t,n){"use strict";n.d(t,{I:function(){return i}});var a=n(67294),r=n(32719);const i=e=>{let{ariaLabel:t="search",ariaLabelledby:n,ariaHidden:i=!0,className:o="",color:d,size:s="s",style:c={}}=e;return a.createElement("svg",{className:[r.s.icon,r.s[s],o].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":n,"aria-hidden":i,color:d,style:c},a.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M15 1C19.4183 1 23 4.58172 23 9C23 13.4183 19.4183 17 15 17C13.2001 17 11.539 16.4056 10.2023 15.4023L3.80101 21.8021L2.21002 20.2111L8.60822 13.8117C7.59861 12.4726 7.00002 10.8062 7.00002 9C7.00002 4.58172 10.5817 1 15 1ZM15 3C11.6863 3 9.00002 5.68629 9.00002 9C9.00002 12.3137 11.6863 15 15 15C18.3137 15 21 12.3137 21 9C21 5.68629 18.3137 3 15 3Z",fill:"currentColor"}))}},55810:function(e,t,n){"use strict";n.d(t,{K:function(){return l},g:function(){return u}});var a=n(67294),r=n(5871),i=n.n(r),o=n(34300),d=n(7444),s={koros:"Koros-module_koros__1r3rg",rotate:"Koros-module_rotate__3Iy1a"};(0,d.s)(".Koros-module_koros__1r3rg{line-height:0;width:100%}.Koros-module_rotate__3Iy1a{will-change:transform}");const c={basic:[15,5],beat:[70,24],pulse:[34,12],wave:[35,12],vibration:[54,18],calm:[0,0]},u=e=>{let{dense:t=!1,type:n="basic"}=e;const a=c[n];return a&&a[t?1:0]||0},l=e=>{let{dense:t=!1,flipVertical:n=!1,type:r="basic",rotate:d,className:c="",style:u}=e;const l="koros_"+r,[g]=(0,a.useState)(i()(l+"-")),h=[n&&"scaleY(-1)",d&&"rotate("+d+") translateZ(0)"].filter((e=>!!e));return a.createElement("div",{className:(0,o.c)(s.koros,s[r],d&&s.rotate,c),style:Object.assign(Object.assign({},u),h.length>0?{transform:h.join(" ")}:{})},((e,t,n)=>{const r="scale("+(e?1:3)+")",i={basic:a.createElement("path",{transform:r,d:"m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"}),beat:a.createElement("path",{transform:r,d:"m0 21v64h32v-64c-4 0-5.4-4-5.4-4l-5.2-13s-1.4-4-5.4-4-5.4 4-5.4 4l-5.2 13s-1.4 4-5.4 4z"}),pulse:a.createElement("path",{transform:r,d:"m0 10v75h32v-75c-8 0-8-10-16-10s-8 10-16 10z"}),wave:a.createElement("path",{transform:r,d:"m0 10v75h32v-75c-8 0-13-3.7-16-10-3 6.3-8 10-16 10z"}),vibration:a.createElement("path",{transform:r,d:"m0 0v85h32v-85l-16 16z"}),calm:a.createElement("path",{transform:r,d:"m0 0v85h32v-85z"})};return a.createElement("svg",{xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",width:"100%",height:"85"},a.createElement("defs",null,a.createElement("pattern",{id:""+n,x:"0",y:"0",width:""+(e?32:96),height:"85",patternUnits:"userSpaceOnUse"},i[t])),a.createElement("rect",{fill:"url(#"+n+")",width:"100%",height:"85",style:{shapeRendering:"crispEdges"}}))})(t,r,g))}},21662:function(e,t,n){"use strict";n.d(t,{L:function(){return g}});var a=n(80136),r=n(67294),i=n(7444),o=n(34300),d=n(77516),s={link:"Link-module_link__TeBQo link_hds-link__5Oxo-",icon:"Link-module_icon__3ReCc link_icon__i_HqN",iconLeft:"Link-module_iconLeft__3j0X3 link_hds-icon-left__1aufP",verticalAlignMediumIcon:"Link-module_verticalAlignMediumIcon__12PVa link_vertical-align-medium-icon__3IWi1",verticalAlignBigIcon:"Link-module_verticalAlignBigIcon__2L0Ln link_vertical-align-big-icon__3yWNL",verticalAlignSmallIcon:"Link-module_verticalAlignSmallIcon__2IwL7 link_vertical-align-small-icon__3lxhH",disableVisitedStyles:"Link-module_disableVisitedStyles__3wG_H link_hds-link--disable-visited-styles__2gk1d",linkS:"Link-module_linkS__3wxtt link_hds-link--small__2ldrg",linkM:"Link-module_linkM__30gsY link_hds-link--medium__xEU_F",linkL:"Link-module_linkL__1zczk link_hds-link--large__D3jO3"};(0,i.s)(".link_hds-icon__2pRV-{--icon-size:100%;background-color:currentcolor;display:inline-block;height:var(--icon-size);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:auto;mask-size:auto;width:var(--icon-size)}.link_hds-icon__2pRV-.link_hds-icon--size-xs__2RlDP{--icon-size:var(--spacing-layout-2-xs)}.link_hds-icon__2pRV-.link_hds-icon--size-s__2iqHu{--icon-size:var(--spacing-layout-xs)}.link_hds-icon__2pRV-.link_hds-icon--size-m__19mxF{--icon-size:var(--spacing-layout-s)}.link_hds-icon__2pRV-.link_hds-icon--size-l__2JXJt{--icon-size:var(--spacing-layout-m)}.link_hds-icon__2pRV-.link_hds-icon--size-xl__1oFrI{--icon-size:var(--spacing-layout-l)}.link_hds-icon--link-external__1R5f9{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 3v16h16v2H3V3h2zm16 0v9h-2V6.413L9.914 15.5 8.5 14.086 17.585 5H12V3h9z' fill='currentColor'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 3v16h16v2H3V3h2zm16 0v9h-2V6.413L9.914 15.5 8.5 14.086 17.585 5H12V3h9z' fill='currentColor'/%3E%3C/svg%3E\")}.link_hds-link__5Oxo-{--link-visited-color:#551a8b;--link-color:var(--color-bus);border:3px solid transparent;box-sizing:border-box;color:var(--link-color);text-decoration:underline}.link_hds-link__5Oxo-:visited{color:var(--link-visited-color)}.link_hds-link__5Oxo-:visited svg g path{fill:var(--link-visited-color)}.link_hds-link__5Oxo-:focus{border:3px solid var(--color-focus-outline);outline:none}.link_hds-link__5Oxo-.link_focus-visible__36mmB,.link_hds-link__5Oxo-:focus-visible{outline:none}.link_hds-link__5Oxo- .link_vertical-align-medium-icon__3IWi1{vertical-align:sub}.link_hds-link__5Oxo- .link_vertical-align-big-icon__3yWNL{vertical-align:middle}.link_hds-link__5Oxo- .link_vertical-align-small-icon__3lxhH{vertical-align:text-top}.link_hds-link--disable-visited-styles__2gk1d:visited{color:var(--color-bus)}.link_hds-link--small__2ldrg{font-size:14px}.link_hds-link--medium__xEU_F{font-size:16px}.link_hds-link--large__D3jO3{display:block;font-size:18px;width:-moz-fit-content;width:fit-content}.link_hds-link--small__2ldrg .link_icon__i_HqN{margin-left:7px}.link_hds-link--medium__xEU_F .link_icon__i_HqN{margin-left:var(--spacing-2-xs);margin-top:-3px}.link_hds-link--large__D3jO3 .link_icon__i_HqN{margin-left:var(--spacing-s)}.link_hds-link--small__2ldrg .link_hds-icon-left__1aufP{margin-right:4px;vertical-align:text-top}.link_hds-link--medium__xEU_F .link_hds-icon-left__1aufP{margin-right:8px;vertical-align:sub}.link_hds-link--large__D3jO3 .link_hds-icon-left__1aufP{margin-right:16px;vertical-align:middle}");const c=e=>(0,r.isValidElement)(e)&&Boolean(e.props.children),u=e=>null==e||"boolean"==typeof e||"{}"===JSON.stringify(e)?"":e.toString(),l=e=>e instanceof Array||(0,r.isValidElement)(e)?r.Children.toArray(e).reduce(((e,t)=>{let n="";return n=(0,r.isValidElement)(t)&&c(t)?l(t.props.children):(0,r.isValidElement)(t)&&!c(t)?"":u(t),e.concat(n)}),""):u(e),g=r.forwardRef(((e,t)=>{var{ariaLabel:n,children:i,className:c,disableVisitedStyles:u=!1,external:g=!1,href:h,iconLeft:f,openInNewTab:p=!1,openInExternalDomainAriaLabel:m,openInNewTabAriaLabel:R,style:b={},size:y="M"}=e,v=(0,a._)(e,["ariaLabel","children","className","disableVisitedStyles","external","href","iconLeft","openInNewTab","openInExternalDomainAriaLabel","openInNewTabAriaLabel","style","size"]);const _={L:s.verticalAlignBigIcon,M:s.verticalAlignMediumIcon,S:s.verticalAlignSmallIcon};return r.createElement("a",Object.assign({"aria-label":n,className:(0,o.c)(s.link,s["link"+y],u?s.disableVisitedStyles:"",c),href:h,style:b},p&&{target:"_blank",rel:"noopener"},(p||g||n)&&{"aria-label":(()=>{let e=n||l(i);const t=p?R||"Avautuu uudessa välilehdessä.":"",a=g?m||"Siirtyy toiseen sivustoon.":"";return e&&"."!==e.slice(-1)&&(e+="."),[e,t,a].filter((e=>e)).join(" ")})()},{ref:t},v),f&&r.createElement("span",{className:s.iconLeft,"aria-hidden":"true"},f),i,g&&r.createElement(d.I,{size:{L:"l",M:"s",S:"xs"}[y],className:(0,o.c)(s.icon,_[y]),"aria-hidden":!0}))}))},68201:function(e,t,n){"use strict";n.d(t,{L:function(){return f}});var a=n(80136),r=n(67294),i=n(7444),o=n(34300),d=n(97640),s=n(5871),c=n.n(s),u="LoadingSpinner-module_loadingSpinner__2xHT_";(0,i.s)(".LoadingSpinner-module_notificationArea__1arIM{border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.LoadingSpinner-module_loadingSpinner__2xHT_{--spinner-size:4rem;--spinner-color:var(--color-coat-of-arms);--spinner-thickness:0.5rem;--spinner-rotation-animation-duration:1.5s;--spinner-color-animation-duration:4.5s;--spinner-color-stage1:var(--color-coat-of-arms);--spinner-color-stage2:var(--color-copper);--spinner-color-stage3:var(--color-suomenlinna);border-top-color:var(--spinner-color);height:var(--spinner-size);position:relative;width:var(--spinner-size)}.LoadingSpinner-module_loadingSpinner__2xHT_ div{animation:LoadingSpinner-module_spinner-rotation-animation__PEk45 var(--spinner-rotation-animation-duration) cubic-bezier(.6,.2,.4,.8) infinite;border:var(--spinner-thickness) solid transparent;border-radius:50%;border-top-color:inherit;box-sizing:border-box;height:100%;position:absolute;width:100%}.LoadingSpinner-module_loadingSpinner__2xHT_ div:nth-child(2){animation-delay:-.15s}.LoadingSpinner-module_loadingSpinner__2xHT_ div:nth-child(3){animation-delay:-.3s}.LoadingSpinner-module_small__1McRk{--spinner-size:1.5rem;--spinner-thickness:0.1875rem}.LoadingSpinner-module_multicolor__1qbEF{animation:LoadingSpinner-module_spinner-color-animation__Yu7Cr var(--spinner-color-animation-duration) cubic-bezier(.6,.2,.4,.9) infinite;border-top-color:var(--spinner-color-stage1)}@keyframes LoadingSpinner-module_spinner-rotation-animation__PEk45{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes LoadingSpinner-module_spinner-color-animation__Yu7Cr{33.3%{border-top-color:var(--spinner-color-stage2)}66.6%{border-top-color:var(--spinner-color-stage3)}}");const l="hds-loading-spinner-notification-area",g="data-active-spinners",h=()=>"undefined"==typeof document?null:document.getElementById(l)||(()=>{const e=document.createElement("div");return e.id=l,e.className="LoadingSpinner-module_notificationArea__1arIM",e.setAttribute("role","status"),document.body.appendChild(e),e})(),f=e=>{var{className:t,multicolor:n=!1,small:i=!1,theme:s,loadingText:l="Page is loading",loadingFinishedText:f="Page has finished loading"}=e,p=(0,a._)(e,["className","multicolor","small","theme","loadingText","loadingFinishedText"]);const m=(0,d.u)(u,s);return((e,t)=>{const[n]=(0,r.useState)(c()()),[a]=(0,r.useState)(e),[i]=(0,r.useState)(t),o=(0,r.useRef)(h()),d=(0,r.useCallback)((()=>{null!==o.current&&(o.current.textContent=a)}),[o,a]),s=(0,r.useCallback)((()=>{o.current.textContent=i}),[o,i]),u=(0,r.useCallback)((()=>(o.current.getAttribute(g)||"").split(",").filter((e=>""!==e))),[o]),l=(0,r.useCallback)((()=>{const e=u();e.push(n),o.current.setAttribute(g,e.join(","))}),[u,o,n]),f=(0,r.useCallback)((()=>{const e=u().filter((e=>e!==n));o.current.setAttribute(g,e.join(","))}),[u,o,n]),p=(0,r.useCallback)((()=>{0===u().length&&(s(),setTimeout((()=>{0===u().length&&o.current.parentNode&&o.current.parentNode.removeChild(o.current)}),1e3))}),[u,s,o]);(0,r.useEffect)((()=>null===o.current?()=>null:(d(),l(),()=>{f(),p()})),[d,l,f,p])})(l,f),r.createElement("div",Object.assign({className:(0,o.c)(u,i&&"LoadingSpinner-module_small__1McRk",n&&"LoadingSpinner-module_multicolor__1qbEF",m,t)},p),r.createElement("div",null),r.createElement("div",null),r.createElement("div",null))}},71015:function(e,t,n){"use strict";n.d(t,{L:function(){return f},a:function(){return c},b:function(){return u},c:function(){return l},d:function(){return g},e:function(){return h},l:function(){return s}});var a=n(80136),r=n(67294),i=n(7444),o=n(34300),d={logo:"Logo-module_logo__Y2mwP",small:"Logo-module_small__1Ecbu",medium:"Logo-module_medium__1zyWm",large:"Logo-module_large__3Tjj3"};(0,i.s)(".Logo-module_logo__Y2mwP{height:100%;max-height:100%;max-width:100%}.Logo-module_small__1Ecbu{height:var(--spacing-l)}.Logo-module_medium__1zyWm{height:var(--spacing-xl)}.Logo-module_large__3Tjj3{height:var(--spacing-2-xl)}");const s="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg==",c="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCFET0NUWVBFIHN2Zz4KPHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICAgY2xhc3M9IkxvZ28tbW9kdWxlX2xvZ29fX1kybXdQIExvZ28tbW9kdWxlX21lZGl1bV9fMXp5V20iIGFyaWEtaGlkZGVuPSJ0cnVlIiBzdHlsZT0iCiAgICBjb2xvcjogd2hpdGU7CiI+CiAgICA8cGF0aAogICAgICAgIGQ9Ik03NS43NTMgMi4yNTF2MjAuN2MwIDMuOTUtMy4yNzUgNy4xNzgtNy4zMSA3LjE3OGgtMjIuMjZjLTIuNjc0IDAtNS4yMDUuOTYtNy4xODMgMi43MzlhMTAuNzQ5IDEwLjc0OSAwIDAwLTcuMTgzLTIuNzRIOS41MDljLTQuMDAzIDAtNy4yNDctMy4yMS03LjI0Ny03LjE3N1YyLjI1aDczLjQ5MXpNNDAuMTg3IDM0LjgzNWE4LjQ3IDguNDcgMCAwMTYuMDEyLTIuNDcxaDIyLjI0NWM1LjI2OCAwIDkuNTU2LTQuMjE5IDkuNTU2LTkuNDEzVjBIMHYyMi45MzVjMCA1LjE5NCA0LjI1NiA5LjQxMyA5LjUwOSA5LjQxM2gyMi4zMDhjMi4yNjMgMCA0LjM5OC44ODIgNi4wMTIgMi40NzFMMzkuMDE2IDM2bDEuMTctMS4xNjV6IgogICAgICAgIGZpbGw9ImN1cnJlbnRDb2xvciI+PC9wYXRoPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiPjwvcGF0aD4KPC9zdmc+",u="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTA0IDM2IiB0aXRsZT0iSGVsc2luZ2ZvcnMgc3RhZCIgcm9sZT0iaW1nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGgKICAgICAgICBkPSJNMTAzLjEwNSAwdjIyLjkzNWMwIDUuMTc5LTQuMjY2IDkuMzk3LTkuNTI0IDkuMzk3bC0zNC44NjcuMDMyYTguNDYgOC40NiAwIDAwLTUuOTgxIDIuNDcxTDUxLjU1MyAzNmwtMS4xODEtMS4xNjVhOC40MDUgOC40MDUgMCAwMC01Ljk4Mi0yLjQ3MUg5LjQ3NkM0LjI1IDMyLjM2NCAwIDI4LjE0NSAwIDIyLjk2NlYwaDEwMy4xMDV6bS0yLjIzNiAyLjIzNUgyLjI1MXYyMC43MzFjMCAzLjk1MSAzLjI0MyA3LjE2MyA3LjIyNSA3LjE2M0g0NC4zOWMyLjY3NiAwIDUuMTk1Ljk2IDcuMTYyIDIuNzM5IDEuOTY4LTEuNzggNC40ODYtMi43NCA3LjE2Mi0yLjc0bDM0Ljg2Ny0uMDNjNC4wMTQgMCA3LjI4OC0zLjIxMiA3LjI4OC03LjE2M3YtMjAuN3pNNjIuMDIgMTIuMDlsMiAxLjE1Yy0uMDMyIDEuMDA3LS40ODkgMS40NzktMS4zNTQgMS40NzktLjIwNSAwLS40NzMtLjA0Ny0uNjE0LS4wOTR2LjA2MmMuNDI1LjMzMS45NDQuODgyLjk0NCAxLjc2MyAwIDEuNTEyLTEuNDY0IDIuNDcyLTMuMjc0IDIuNDcyLS44MzQgMC0xLjU1OC4yNjctMS41NTguNjc3IDAgLjMxNS4yNjcuNDU2LjkxMy40NTYuNjQ1IDAgMS4zNjktLjEyNiAyLjIwMy0uMTI2IDEuNjUzIDAgMi43NTUuNjYxIDIuNzU1IDIuMTU3IDAgMS43OTQtMi4wMTUgMi41MDMtNC4yODIgMi41MDMtMi4xMDkgMC00LjAzLS41OTgtNC4wMy0xLjk1MiAwLS44MTkuODUtMS4zMDcgMS42MjItMS40NDh2LS4wNDhjLS41ODItLjE3My0xLjEwMi0uNTUtMS4xMDItMS4yMTIgMC0uODY1Ljg4Mi0xLjMzOCAxLjc3OS0xLjUyN3YtLjA0N2MtLjgzNC0uMzMtMS41NDMtMS4wMDctMS41NDMtMi4xODggMC0xLjUxMSAxLjMyMi0yLjU1IDMuMTMzLTIuNTUuNjkyIDAgMS4wODYuMTQyIDEuNjA1LjE0Mi42NDYgMCAuODgyLS4zNjIuODgyLS45NDUgMC0uMjY3LS4wNDctLjUzNS0uMDc5LS43MjR6bS0xLjczMSA5LjU0Yy0uOTMgMC0yLjcyNC4wNzgtMi43MjQuNzg2IDAgLjUzNi44OTguNzg3IDIuMTU3LjgwMyAxLjQxNyAwIDIuMjM1LS4yNjcgMi4yMzUtLjkxMyAwLS41MDQtLjc1NS0uNjc3LTEuNjY4LS42Nzd6bTI4Ljk5NS04LjAxM2MxLjUyNyAwIDIuOTI4LjcyNCAzLjUyNiAxLjc0N2wtMS44NDIgMS4wNGExLjYyNCAxLjYyNCAwIDAwLTEuNjA2LTEuMjEzYy0uNTUgMC0xLjAwNy4yMzYtMS4wMDcuNjc3IDAgLjU4MiAxLjAwNy42NDUgMi4xNTcgMS4wMDggMS4xOTYuMzc3IDIuMjk4LjkyOCAyLjI5OCAyLjMzIDAgMS41NDItMS40MzMgMi40NTUtMy4xMDEgMi40NTUtMS43OTUgMC0zLjIxMS0uNzcxLTMuODQxLTEuOTg0bDEuODczLTEuMDU0Yy4yNTIuODM0LjkxMyAxLjQ2NCAxLjkzNiAxLjQ2NC41OTggMCAxLjAyMy0uMjY4IDEuMDIzLS43NCAwLS42MTQtLjg1LS43NTYtMS44NDEtMS4wMjMtMS4xNjUtLjMxNS0yLjYxMy0uODgyLTIuNjEzLTIuMzQ2IDAtMS40NDggMS4zODUtMi4zNiAzLjAzOC0yLjM2em0tMTQuNjU1IDBjMi4wNzggMCAzLjY5OSAxLjUyNyAzLjY5OSA0LjAxNHMtMS42MDYgNC4wMTQtMy43IDQuMDE0Yy0yLjEwOSAwLTMuNzE0LTEuNTI3LTMuNzE0LTQuMDE0czEuNjA1LTQuMDE0IDMuNzE1LTQuMDE0em0tNDkuNjggMGMyLjA2MyAwIDMuNDMyIDEuNDY0IDMuNDMyIDMuNTQyLjAxNi42MTQtLjA5NCAxLjAzOS0uMDk0IDEuMDM5aC00Ljk3NGMuMDk0IDEuMjQzLjc4NyAxLjg1NyAxLjY4NCAxLjg1Ny44MDMgMCAxLjM1NC0uNTM1IDEuNDgtMS4yNmwxLjgxIDEuMDI0Yy0uNTM1Ljk3Ni0xLjY4NCAxLjgyNi0zLjI5IDEuODI2LTIuMTQgMC0zLjcxNS0xLjQ5NS0zLjcxNS00LjAxNCAwLTIuNDg3IDEuNjA2LTQuMDE0IDMuNjY4LTQuMDE0em0xMy4wNjYtLjAxNmMxLjUyNyAwIDIuOTI4LjcyNCAzLjUyNiAxLjc0OGwtMS44NDIgMS4wMzljLS4xODktLjY3Ny0uNzU1LTEuMjEzLTEuNjA1LTEuMjEzLS41NTEgMC0xLjAwOC4yMzctMS4wMDguNjc3IDAgLjU4MyAxLjAwOC42NDYgMi4xNCAxLjAwOCAxLjE5Ny4zNzggMi4zLjkyOCAyLjMgMi4zMyAwIDEuNTQyLTEuNDMzIDIuNDQtMy4wODYgMi40NC0xLjc5NSAwLTMuMjExLS43NTYtMy44NDEtMS45ODRsMS44NzMtMS4wNTVjLjIzNi44MzUuOTEzIDEuNDY0IDEuOTM2IDEuNDY0LjU4My4wMTYgMS4wMDgtLjIzNiAxLjAwOC0uNzI0IDAtLjYxNC0uODUtLjc0LTEuODQyLTEuMDIzLTEuMTY1LS4zLTIuNTk3LS44ODItMi41OTctMi4zNDUgMC0xLjQ0OSAxLjM4NS0yLjM2MiAzLjAzOC0yLjM2MnpNMzIuMyAxMC41M3Y4LjUwMWMwIC4zNjIuMDQ3LjYxNC4xNTcuNzU2LjA5NS4xNTcuMjIuMjIuNTA0LjIyLjE3MyAwIC4zMyAwIC40NTYtLjAzMWEyLjAxIDIuMDEgMCAwMC40NTctLjEyNmwtLjE4OSAxLjQ0OGEyLjUzMiAyLjUzMiAwIDAxLS42NDUuMjM2Yy0uMjUyLjA0Ny0uNTIuMDc5LS43NzIuMDc5LS43NCAwLTEuMjc1LS4xNzQtMS42MjEtLjUzNi0uMzMtLjM2Mi0uNTA0LS45NDQtLjUwNC0xLjczMVYxMC41M2gyLjE1N3ptMTkuODE4IDMuMDg2YzEuNDggMCAyLjQwOCAxLjAyMyAyLjQwOCAyLjkyOHY0LjkxMWgtMi4xNTZWMTYuOTdjMC0xLjAwNy0uMzYyLTEuNTQzLTEuMTY1LTEuNTQzcy0xLjMyMi42MTQtMS4zMjIgMS40OTZ2NC41NDloLTIuMTQxdi03LjY2NmgyLjE0bC0uMTEgMS4yNmguMDQ4Yy4zNzgtLjcxIDEuMDM5LTEuNDQ5IDIuMjk4LTEuNDQ5em0xNi43MzMtMy4zMzdhMy4yNyAzLjI3IDAgMDEyLjczOSAxLjRsLTEuODU4IDEuMTM0Yy0uMDMxLS40NTYtLjI1Mi0uOTI4LS43NzEtLjkyOC0uNTM1IDAtLjc4Ny40MDktLjc4NyAxLjA4NnYuODM0aDEuNjg0djEuNjM3aC0xLjY4NHY2LjAyOWgtMi4xNHYtNi4wMjloLTEuMTgxdi0xLjYzN2gxLjE4di0uODE5YzAtMS43OTQgMS4xOC0yLjcwNyAyLjgxOC0yLjcwN3ptMTQuODEyIDMuMzg0YzEuMDg2IDAgMS42ODQuOTEzIDEuNjg0IDIuMDMgMCAuNTA1LS4wNzguODk4LS4wNzguODk4bC0xLjkzNiAxLjExOGMuMDMxLS4yMi4xMjYtLjc0LjEyNi0xLjI2IDAtLjUwMy0uMTktLjk3NS0uNzI1LS45NzUtLjY3NiAwLS45NDQuNjMtLjk0NCAxLjYydjQuMzc3aC0yLjE1N3YtNy42NWgyLjE1N2wtLjExIDEuMjU5aC4wNDdjLjM3OC0uNzQuOTYtMS40MTcgMS45MzYtMS40MTd6bS03MC41Mi0yLjcyM3Y0LjE3MWg0LjIwM3YtNC4xN2gyLjIzNXYxMC41MTRoLTIuMjM1di00LjM2aC00LjIwM3Y0LjM2aC0yLjIzNVYxMC45NGgyLjIzNXptMzIuMzMyIDIuODV2Ny42NjVINDMuMzJWMTMuNzloMi4xNTZ6bTI5LjE1MyAxLjQ2M2MtMS4wNyAwLTEuNTQzIDEuMDA4LTEuNTQzIDIuMzc3IDAgMS4zNy40NzIgMi4zNzcgMS41NDMgMi4zNzcgMS4wNTQgMCAxLjUyNy0xLjAwNyAxLjUyNy0yLjM3NyAwLTEuMzctLjQ3My0yLjM3Ny0xLjUyNy0yLjM3N3ptLTE0Ljg5MS0uMTg5Yy0uNzI0IDAtMS4zMDcuNDczLTEuMzA3IDEuMTk3IDAgLjc0LjU4MyAxLjIxMiAxLjMwNyAxLjE5Ni43MjQgMCAxLjMwNi0uNDcyIDEuMzA2LTEuMTk2cy0uNTgyLTEuMTk3LTEuMzA2LTEuMTk3em0tMzQuNzczLjA5NWMtLjc4NyAwLTEuNDMyLjU2Ni0xLjYwNSAxLjYwNWgzLjAzOGMwLS45MTMtLjU5OC0xLjYwNS0xLjQzMy0xLjYwNXptMTkuNDQtNC42NzVjLjY5MyAwIDEuMjQ0LjUwMyAxLjI0NCAxLjE5NnMtLjU1IDEuMTk2LTEuMjQzIDEuMTk2Yy0uNzA5IDAtMS4yNDQtLjUwMy0xLjI0NC0xLjE5NnMuNTUxLTEuMTk2IDEuMjQ0LTEuMTk2eiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg==",l="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCFET0NUWVBFIHN2Zz4KPHN2ZyB2aWV3Qm94PSIwIDAgMTA0IDM2IiB0aXRsZT0iSGVsc2luZ2ZvcnMgc3RhZCIgcm9sZT0iaW1nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgICBjbGFzcz0iTG9nby1tb2R1bGVfbG9nb19fWTJtd1AgTG9nby1tb2R1bGVfbWVkaXVtX18xenlXbSIgc3R5bGU9Im1hcmdpbi1yaWdodDogdmFyKC0tc3BhY2luZy14cyk7Ij4KICAgIDxwYXRoCiAgICAgICAgZD0iTTEwMy4xMDUgMHYyMi45MzVjMCA1LjE3OS00LjI2NiA5LjM5Ny05LjUyNCA5LjM5N2wtMzQuODY3LjAzMmE4LjQ2IDguNDYgMCAwMC01Ljk4MSAyLjQ3MUw1MS41NTMgMzZsLTEuMTgxLTEuMTY1YTguNDA1IDguNDA1IDAgMDAtNS45ODItMi40NzFIOS40NzZDNC4yNSAzMi4zNjQgMCAyOC4xNDUgMCAyMi45NjZWMGgxMDMuMTA1em0tMi4yMzYgMi4yMzVIMi4yNTF2MjAuNzMxYzAgMy45NTEgMy4yNDMgNy4xNjMgNy4yMjUgNy4xNjNINDQuMzljMi42NzYgMCA1LjE5NS45NiA3LjE2MiAyLjczOSAxLjk2OC0xLjc4IDQuNDg2LTIuNzQgNy4xNjItMi43NGwzNC44NjctLjAzYzQuMDE0IDAgNy4yODgtMy4yMTIgNy4yODgtNy4xNjN2LTIwLjd6TTYyLjAyIDEyLjA5bDIgMS4xNWMtLjAzMiAxLjAwNy0uNDg5IDEuNDc5LTEuMzU0IDEuNDc5LS4yMDUgMC0uNDczLS4wNDctLjYxNC0uMDk0di4wNjJjLjQyNS4zMzEuOTQ0Ljg4Mi45NDQgMS43NjMgMCAxLjUxMi0xLjQ2NCAyLjQ3Mi0zLjI3NCAyLjQ3Mi0uODM0IDAtMS41NTguMjY3LTEuNTU4LjY3NyAwIC4zMTUuMjY3LjQ1Ni45MTMuNDU2LjY0NSAwIDEuMzY5LS4xMjYgMi4yMDMtLjEyNiAxLjY1MyAwIDIuNzU1LjY2MSAyLjc1NSAyLjE1NyAwIDEuNzk0LTIuMDE1IDIuNTAzLTQuMjgyIDIuNTAzLTIuMTA5IDAtNC4wMy0uNTk4LTQuMDMtMS45NTIgMC0uODE5Ljg1LTEuMzA3IDEuNjIyLTEuNDQ4di0uMDQ4Yy0uNTgyLS4xNzMtMS4xMDItLjU1LTEuMTAyLTEuMjEyIDAtLjg2NS44ODItMS4zMzggMS43NzktMS41Mjd2LS4wNDdjLS44MzQtLjMzLTEuNTQzLTEuMDA3LTEuNTQzLTIuMTg4IDAtMS41MTEgMS4zMjItMi41NSAzLjEzMy0yLjU1LjY5MiAwIDEuMDg2LjE0MiAxLjYwNS4xNDIuNjQ2IDAgLjg4Mi0uMzYyLjg4Mi0uOTQ1IDAtLjI2Ny0uMDQ3LS41MzUtLjA3OS0uNzI0em0tMS43MzEgOS41NGMtLjkzIDAtMi43MjQuMDc4LTIuNzI0Ljc4NiAwIC41MzYuODk4Ljc4NyAyLjE1Ny44MDMgMS40MTcgMCAyLjIzNS0uMjY3IDIuMjM1LS45MTMgMC0uNTA0LS43NTUtLjY3Ny0xLjY2OC0uNjc3em0yOC45OTUtOC4wMTNjMS41MjcgMCAyLjkyOC43MjQgMy41MjYgMS43NDdsLTEuODQyIDEuMDRhMS42MjQgMS42MjQgMCAwMC0xLjYwNi0xLjIxM2MtLjU1IDAtMS4wMDcuMjM2LTEuMDA3LjY3NyAwIC41ODIgMS4wMDcuNjQ1IDIuMTU3IDEuMDA4IDEuMTk2LjM3NyAyLjI5OC45MjggMi4yOTggMi4zMyAwIDEuNTQyLTEuNDMzIDIuNDU1LTMuMTAxIDIuNDU1LTEuNzk1IDAtMy4yMTEtLjc3MS0zLjg0MS0xLjk4NGwxLjg3My0xLjA1NGMuMjUyLjgzNC45MTMgMS40NjQgMS45MzYgMS40NjQuNTk4IDAgMS4wMjMtLjI2OCAxLjAyMy0uNzQgMC0uNjE0LS44NS0uNzU2LTEuODQxLTEuMDIzLTEuMTY1LS4zMTUtMi42MTMtLjg4Mi0yLjYxMy0yLjM0NiAwLTEuNDQ4IDEuMzg1LTIuMzYgMy4wMzgtMi4zNnptLTE0LjY1NSAwYzIuMDc4IDAgMy42OTkgMS41MjcgMy42OTkgNC4wMTRzLTEuNjA2IDQuMDE0LTMuNyA0LjAxNGMtMi4xMDkgMC0zLjcxNC0xLjUyNy0zLjcxNC00LjAxNHMxLjYwNS00LjAxNCAzLjcxNS00LjAxNHptLTQ5LjY4IDBjMi4wNjMgMCAzLjQzMiAxLjQ2NCAzLjQzMiAzLjU0Mi4wMTYuNjE0LS4wOTQgMS4wMzktLjA5NCAxLjAzOWgtNC45NzRjLjA5NCAxLjI0My43ODcgMS44NTcgMS42ODQgMS44NTcuODAzIDAgMS4zNTQtLjUzNSAxLjQ4LTEuMjZsMS44MSAxLjAyNGMtLjUzNS45NzYtMS42ODQgMS44MjYtMy4yOSAxLjgyNi0yLjE0IDAtMy43MTUtMS40OTUtMy43MTUtNC4wMTQgMC0yLjQ4NyAxLjYwNi00LjAxNCAzLjY2OC00LjAxNHptMTMuMDY2LS4wMTZjMS41MjcgMCAyLjkyOC43MjQgMy41MjYgMS43NDhsLTEuODQyIDEuMDM5Yy0uMTg5LS42NzctLjc1NS0xLjIxMy0xLjYwNS0xLjIxMy0uNTUxIDAtMS4wMDguMjM3LTEuMDA4LjY3NyAwIC41ODMgMS4wMDguNjQ2IDIuMTQgMS4wMDggMS4xOTcuMzc4IDIuMy45MjggMi4zIDIuMzMgMCAxLjU0Mi0xLjQzMyAyLjQ0LTMuMDg2IDIuNDQtMS43OTUgMC0zLjIxMS0uNzU2LTMuODQxLTEuOTg0bDEuODczLTEuMDU1Yy4yMzYuODM1LjkxMyAxLjQ2NCAxLjkzNiAxLjQ2NC41ODMuMDE2IDEuMDA4LS4yMzYgMS4wMDgtLjcyNCAwLS42MTQtLjg1LS43NC0xLjg0Mi0xLjAyMy0xLjE2NS0uMy0yLjU5Ny0uODgyLTIuNTk3LTIuMzQ1IDAtMS40NDkgMS4zODUtMi4zNjIgMy4wMzgtMi4zNjJ6TTMyLjMgMTAuNTN2OC41MDFjMCAuMzYyLjA0Ny42MTQuMTU3Ljc1Ni4wOTUuMTU3LjIyLjIyLjUwNC4yMi4xNzMgMCAuMzMgMCAuNDU2LS4wMzFhMi4wMSAyLjAxIDAgMDAuNDU3LS4xMjZsLS4xODkgMS40NDhhMi41MzIgMi41MzIgMCAwMS0uNjQ1LjIzNmMtLjI1Mi4wNDctLjUyLjA3OS0uNzcyLjA3OS0uNzQgMC0xLjI3NS0uMTc0LTEuNjIxLS41MzYtLjMzLS4zNjItLjUwNC0uOTQ0LS41MDQtMS43MzFWMTAuNTNoMi4xNTd6bTE5LjgxOCAzLjA4NmMxLjQ4IDAgMi40MDggMS4wMjMgMi40MDggMi45Mjh2NC45MTFoLTIuMTU2VjE2Ljk3YzAtMS4wMDctLjM2Mi0xLjU0My0xLjE2NS0xLjU0M3MtMS4zMjIuNjE0LTEuMzIyIDEuNDk2djQuNTQ5aC0yLjE0MXYtNy42NjZoMi4xNGwtLjExIDEuMjZoLjA0OGMuMzc4LS43MSAxLjAzOS0xLjQ0OSAyLjI5OC0xLjQ0OXptMTYuNzMzLTMuMzM3YTMuMjcgMy4yNyAwIDAxMi43MzkgMS40bC0xLjg1OCAxLjEzNGMtLjAzMS0uNDU2LS4yNTItLjkyOC0uNzcxLS45MjgtLjUzNSAwLS43ODcuNDA5LS43ODcgMS4wODZ2LjgzNGgxLjY4NHYxLjYzN2gtMS42ODR2Ni4wMjloLTIuMTR2LTYuMDI5aC0xLjE4MXYtMS42MzdoMS4xOHYtLjgxOWMwLTEuNzk0IDEuMTgtMi43MDcgMi44MTgtMi43MDd6bTE0LjgxMiAzLjM4NGMxLjA4NiAwIDEuNjg0LjkxMyAxLjY4NCAyLjAzIDAgLjUwNS0uMDc4Ljg5OC0uMDc4Ljg5OGwtMS45MzYgMS4xMThjLjAzMS0uMjIuMTI2LS43NC4xMjYtMS4yNiAwLS41MDMtLjE5LS45NzUtLjcyNS0uOTc1LS42NzYgMC0uOTQ0LjYzLS45NDQgMS42MnY0LjM3N2gtMi4xNTd2LTcuNjVoMi4xNTdsLS4xMSAxLjI1OWguMDQ3Yy4zNzgtLjc0Ljk2LTEuNDE3IDEuOTM2LTEuNDE3em0tNzAuNTItMi43MjN2NC4xNzFoNC4yMDN2LTQuMTdoMi4yMzV2MTAuNTE0aC0yLjIzNXYtNC4zNmgtNC4yMDN2NC4zNmgtMi4yMzVWMTAuOTRoMi4yMzV6bTMyLjMzMiAyLjg1djcuNjY1SDQzLjMyVjEzLjc5aDIuMTU2em0yOS4xNTMgMS40NjNjLTEuMDcgMC0xLjU0MyAxLjAwOC0xLjU0MyAyLjM3NyAwIDEuMzcuNDcyIDIuMzc3IDEuNTQzIDIuMzc3IDEuMDU0IDAgMS41MjctMS4wMDcgMS41MjctMi4zNzcgMC0xLjM3LS40NzMtMi4zNzctMS41MjctMi4zNzd6bS0xNC44OTEtLjE4OWMtLjcyNCAwLTEuMzA3LjQ3My0xLjMwNyAxLjE5NyAwIC43NC41ODMgMS4yMTIgMS4zMDcgMS4xOTYuNzI0IDAgMS4zMDYtLjQ3MiAxLjMwNi0xLjE5NnMtLjU4Mi0xLjE5Ny0xLjMwNi0xLjE5N3ptLTM0Ljc3My4wOTVjLS43ODcgMC0xLjQzMi41NjYtMS42MDUgMS42MDVoMy4wMzhjMC0uOTEzLS41OTgtMS42MDUtMS40MzMtMS42MDV6bTE5LjQ0LTQuNjc1Yy42OTMgMCAxLjI0NC41MDMgMS4yNDQgMS4xOTZzLS41NSAxLjE5Ni0xLjI0MyAxLjE5NmMtLjcwOSAwLTEuMjQ0LS41MDMtMS4yNDQtMS4xOTZzLjU1MS0xLjE5NiAxLjI0NC0xLjE5NnoiCiAgICAgICAgZmlsbD0id2hpdGUiPjwvcGF0aD4KPC9zdmc+",g="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTExIDQwIiB0aXRsZT0iWNC10LvRjNGB0LjQvdC60LgiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTExMSwwIEwxMTEsMjUuNTAwNDM2NiBDMTExLDMxLjI2NTQwMTIgMTA2LjI2MjcyNSwzNS45NTU0Mzc3IDEwMC40Mzk5ODYsMzUuOTU1NDM3NyBMNjMuMzU2MjA3MiwzNS45NTU0Mzc3IEM2MC44NTAyNzE0LDM1Ljk1NTQzNzcgNTguNDk0NTU2MSwzNi45Mjg4MjMyIDU2LjcyMjI3NzcsMzguNjk1NzkyOCBMNTUuNDE2MTY3Myw0MCBMNTQuMTA5NDEwOCwzOC42OTU3OTI4IEM1Mi4zMzc3Nzg1LDM2LjkyODgyMzIgNDkuOTgxNzQwMSwzNS45NTU0Mzc3IDQ3LjQ3NjEyNzQsMzUuOTU1NDM3NyBMMTAuNDk1NDAzLDM1Ljk1NTQzNzcgQzQuNzA4MjAwMDYsMzUuOTU1NDM3NyAwLDMxLjI2NTQwMTIgMCwyNS41MDA0MzY2IEwwLDAgTDExMSwwIFogTTEwOC41MTYwMzIsMi40ODYxNzUzNCBMMi40ODM2NDQ5OSwyLjQ4NjE3NTM0IEwyLjQ4MzY0NDk5LDI1LjUwMDQzNjYgQzIuNDgzNjQ0OTksMjkuODk0MjUzNSA2LjA3Nzk1MjI0LDMzLjQ2OTI2MjQgMTAuNDk1NDAzLDMzLjQ2OTI2MjQgTDQ3LjQ3NjEyNzQsMzMuNDY5MjYyNCBDNTAuNDM3MjQ3MywzMy40NjkyNjI0IDUzLjIzMzYwOTMsMzQuNTQ0ODM3MiA1NS40MTYxNjczLDM2LjUxMTAxMTIgQzU3LjU5OTM3MTQsMzQuNTQ0NTEzOCA2MC4zOTUwODcyLDMzLjQ2OTI2MjQgNjMuMzU2MjA3MiwzMy40NjkyNjI0IEwxMDAuNDM5OTg2LDMzLjQ2OTI2MjQgQzEwNC44OTI5NzMsMzMuNDY5MjYyNCAxMDguNTE2MDMyLDI5Ljg5NDI1MzUgMTA4LjUxNjAzMiwyNS41MDA0MzY2IEwxMDguNTE2MDMyLDIuNDg2MTc1MzQgWiIgLz4KICAgIDxwYXRoCiAgICAgICAgZD0iTTI2Ljc1ODMwMjcsMTUuMTAyMzUxIEMyOS4wMzkzOTIzLDE1LjEwMjM1MSAzMC41NjAwMTExLDE2LjcyNjA2MTUgMzAuNTYwMDExMSwxOS4wNDM0MzA1IEMzMC41NjAwMTExLDE5LjI3Njc2NDQgMzAuNTQ2NjE5NiwxOS40ODUyMjkzIDMwLjUyODg1MDMsMTkuNjU5MTM3MSBMMzAuNTA2MDAyNCwxOS44NTA2MTg5IEwzMC41MDYwMDI0LDE5Ljg1MDYxODkgTDMwLjQ3MTQyMTcsMjAuMDY3NTAwNSBMMzAuNDcxNDIxNywyMC4wNjc1MDA1IEwzMC40NDE3NzMsMjAuMjEwNTIyOSBMMjQuOTMzMzY2MywyMC4yMTA1MjI5IEMyNS4wMzQ4MDU1LDIxLjU5NzgzOTggMjUuODExNzUyMiwyMi4yNzQwMzU1IDI2LjgwODY5OTIsMjIuMjc0MDM1NSBDMjcuNjYzODEwNSwyMi4yNzQwMzU1IDI4LjI1Njk0NywyMS43MzQ1MjQ5IDI4LjQyNjU0ODgsMjAuOTc5NTE1NSBMMjguNDQ3ODc5LDIwLjg3MDIyNiBMMzAuNDU4ODk0OSwyMi4wMDM2ODY2IEMyOS44NjczODE3LDIzLjA4NjA1MjUgMjguNTgzMjM5LDI0LjAzMzI0MzkgMjYuODA4Njk5MiwyNC4wMzMyNDM5IEMyNC40MjY0OTM0LDI0LjAzMzI0MzkgMjIuNjg1ODc0NCwyMi4zNzU5MDE0IDIyLjY4NTg3NDQsMTkuNTY3NjM1NyBDMjIuNjg1ODc0NCwxNi43OTM5NzIxIDI0LjQ2MDQxNDIsMTUuMTAyMzUxIDI2Ljc1ODMwMjcsMTUuMTAyMzUxIFogTTU1LjY5NTYwOTcsMTUuMTAyMzUxIEM1Ny44MDgwNjQ3LDE1LjEwMjM1MSA1OS4wOTIyMDc0LDE2LjUwNjE2MDUgNTkuMzYyNjA0MiwxNy44NzYwMTQ2IEw1Ny4xODI5NTM4LDE4Ljk5MjY1OTIgQzU3LjE4Mjk1MzgsMTcuODU5MTk4NyA1Ni43NDMyNzYyLDE2LjkyOTE0NjYgNTUuNjk1NjA5NywxNi45MjkxNDY2IEM1NC41NDY4MjY5LDE2LjkyOTE0NjYgNTQuMDU2NzUyOSwxOC4wNDU0Njc4IDU0LjA1Njc1MjksMTkuNTY3NjM1NyBDNTQuMDU2NzUyOSwyMS4wOTAxMjcxIDU0LjU0NjgyNjksMjIuMjA2NzcxNyA1NS42OTU2MDk3LDIyLjIwNjc3MTcgQzU2Ljc0MzI3NjIsMjIuMjA2NzcxNyA1Ny4xODI5NTM4LDIxLjI3NjM5NjIgNTcuMTgyOTUzOCwyMC4xNDI5MzU3IEw1OS4zNjI2MDQyLDIxLjI1OTI1NjkgQzU5LjA5MjIwNzQsMjIuNjI5NDM0NCA1Ny44MDgwNjQ3LDI0LjAzMzI0MzkgNTUuNjk1NjA5NywyNC4wMzMyNDM5IEM1My4zNjM4MDA0LDI0LjAzMzI0MzkgNTEuNjQwMzAzMywyMi4zNDE5NDYxIDUxLjY0MDMwMzMsMTkuNTY3NjM1NyBDNTEuNjQwMzAzMywxNi43OTM5NzIxIDUzLjM2MzgwMDQsMTUuMTAyMzUxIDU1LjY5NTYwOTcsMTUuMTAyMzUxIFogTTQwLjI3NjIwNiwxNS4xMTk0OTAzIEw0MC4yNzYyMDYsMjMuODMwMTU4OCBMMzguMDExOTE1MiwyMy44MzAxNTg4IEwzOC4wMTE5MTUyLDE2Ljg0NDQyIEwzNS44MzgwNzk3LDE2Ljg0NDQyIEwzNS44MzgwNzk3LDIwLjAwNzc2MTIgQzM1LjgzODA3OTcsMjIuMTA0OTA1NyAzNS4yODIxMDI1LDIzLjUyNjE3NzkgMzMuNDkwNDQwOCwyNC4wMzMyNDM5IEwzMS40MTI1NTI2LDIyLjQ0MzE2NTMgQzMzLjAwMDY4OTgsMjIuMTA0OTA1NyAzMy41NDE0ODM0LDIxLjUyOTkyOTIgMzMuNTQxNDgzNCwxOS43ODc4NjAyIEwzMy41MzQwNTMyLDE1LjExOTQ5MDMgTDQwLjI3NjIwNiwxNS4xMTk0OTAzIFogTTEyLjAyNjAzNjUsMTIuMTI1Mjc4OSBMMTQuNzgwMDc4MywxMi4xMjUyNzg5IEwxNi4yNzE3NDY0LDE0Ljk3MjUyMzQgTDE2LjI3MTc0NjQsMTQuOTcyNTIzNCBMMTYuNDM0MTc0OCwxNS4yOTUzNDQxIEwxNi40MzQxNzQ4LDE1LjI5NTM0NDEgTDE2LjY3ODg0OTEsMTUuODAzNzMzOSBMMTYuNjc4ODQ5MSwxNS44MDM3MzM5IEwxNi45NzY4NTA3LDE2LjQ1NTM4OTIgTDE2Ljk3Njg1MDcsMTYuNDU1Mzg5MiBMMTcuMDI3NTcwMiwxNi40NTUzODkyIEwxNy40NDMwNDI2LDE1LjYwMTAzMjkgTDE3LjQ0MzA0MjYsMTUuNjAxMDMyOSBMMTcuNzY2MDUwOSwxNC45NzAzNDQ0IEwxNy43NjYwNTA5LDE0Ljk3MDM0NDQgTDE5LjI5MTg2MTEsMTIuMTI1Mjc4OSBMMjEuODc3MjY4MywxMi4xMjUyNzg5IEwxOC43Njc4NjYyLDE3Ljc1Nzk3OTUgTDIyLjIxNTE4MzYsMjMuODMwMTU4OCBMMTkuNDc3NjE3NSwyMy44MzAxNTg4IEwxNy43ODgwNDEyLDIwLjczNDcyODIgTDE3LjM0Nzc4MjEsMTkuODkzNDg1MSBMMTcuMzQ3NzgyMSwxOS44OTM0ODUxIEwxNi45OTM2NDk1LDE5LjE5NTc0NDMgTDE2Ljk5MzY0OTUsMTkuMTk1NzQ0MyBMMTYuOTQyOTI5OSwxOS4xOTU3NDQzIEwxNi40Mjk2NjY2LDIwLjIwMTc2MTIgTDE2LjQyOTY2NjYsMjAuMjAxNzYxMiBMMTYuMTQ4ODYxMywyMC43MzQ3MjgyIEwxNi4xNDg4NjEzLDIwLjczNDcyODIgTDE0LjQ1ODk2MTksMjMuODMwMTU4OCBMMTEuODA2MDM2MiwyMy44MzAxNTg4IEwxNS4xODU4MzUxLDE3Ljg0MjM4MjcgTDEyLjAyNjAzNjUsMTIuMTI1Mjc4OSBaIE03My42MzI5MDIxLDE1LjMwODk5MzMgTDczLjYzMjkwMjEsMTguNDk4MjA1MiBMNzYuNzM4NDI3NSwxOC40OTgyMDUyIEw3Ni43Mzg0Mjc1LDE1LjMwODk5MzMgTDc5LjAyNjMwMTMsMTUuMzA4OTkzMyBMNzkuMDI2MzAxMywyMy44MzAxNTg4IEw3Ni43Mzg0Mjc1LDIzLjgzMDE1ODggTDc2LjczODQyNzUsMjAuNTMwMDI2MiBMNzMuNjMyOTAyMSwyMC41MzAwMjYyIEw3My42MzI5MDIxLDIzLjgzMDE1ODggTDcxLjM0NDM4MjIsMjMuODMwMTU4OCBMNzEuMzQ0MzgyMiwxNS4zMDg5OTMzIEw3My42MzI5MDIxLDE1LjMwODk5MzMgWiBNODEuNzUwOTQ1MiwxNS4zMDg5OTMzIEw4NC4wMzg4MTksMTUuMzA4OTkzMyBMODQuMDM4MjgyNiwxNy43NjI1MTQ2IEw4NC4wMzgyODI2LDE3Ljc2MjUxNDYgTDg0LjAyNzI1OTcsMTguMjI3Mjg1MyBMODQuMDI3MjU5NywxOC4yMjcyODUzIEw4NC4wMDczNTkyLDE4LjY2NzY2NjQgTDg0LjAwNzM1OTIsMTguNjY3NjY2NCBMODMuOTY0ODM5NCwxOS4zMjM0ODA5IEw4My45NjQ4Mzk0LDE5LjMyMzQ4MDkgTDg0LjAxMzk0MzcsMTkuMzIzNDgwOSBMODQuMTY5Mzc5LDE5LjAyNjQ5MDYgTDg0LjE2OTM3OSwxOS4wMjY0OTA2IEw4NC4yOTY4OTkzLDE4Ljc5Mzg5OTQgTDg0LjI5Njg5OTMsMTguNzkzODk5NCBMODQuNTEzMDQxLDE4LjQxNzg1MTkgTDg0LjUxMzA0MSwxOC40MTc4NTE5IEw4NC42Mzc2MjgxLDE4LjIxMTA2OTggTDg0LjYzNzYyODEsMTguMjExMDY5OCBMODQuNzcxMzAxNywxNy45OTc0MDkyIEw4NC43NzEzMDE3LDE3Ljk5NzQwOTIgTDg0LjkxMjYxODcsMTcuNzgxMDkwNCBMODQuOTEyNjE4NywxNy43ODEwOTA0IEw4Ni41OTc0MTI3LDE1LjMwODk5MzMgTDg5LjIxNzcwOTgsMTUuMzA4OTkzMyBMODYuNTg1MTM2NiwxOC43OTM3NzgxIEw4OS4zNzc2MjE5LDIzLjgzMDE1ODggTDg2Ljg0MzI1NzMsMjMuODMwMTU4OCBMODUuMTA4Nzc2MywyMC42Nzc4MTI2IEw4NC4wMzg4MTksMjIuMTQzMDY1IEw4NC4wMzg4MTksMjMuODMwMTU4OCBMODEuNzUwOTQ1MiwyMy44MzAxNTg4IEw4MS43NTA5NDUyLDE1LjMwODk5MzMgWiBNNjEuNDAxMjQxMywxNS4zMDY2MDAzIEw2My41Mjk1MjYsMTUuMzA2NjAwMyBMNjMuNTI4OTgzNSwxOS4xODg4MTg1IEw2My41Mjg5ODM1LDE5LjE4ODgxODUgTDYzLjUyMTYyMjEsMTkuNTE1NzU4NSBMNjMuNTIxNjIyMSwxOS41MTU3NTg1IEw2My41MDc3MDEyLDE5Ljg1Nzg5MDcgTDYzLjUwNzcwMTIsMTkuODU3ODkwNyBMNjMuNDc3MDQ5MiwyMC40MDMwNDcyIEw2My40NzcwNDkyLDIwLjQwMzA0NzIgTDYzLjQzMDk5NDMsMjEuMDQ1MDQ3NCBMNjMuNDgwMDk4NywyMS4wNDUwNDc0IEw2My43NzE2ODc0LDIwLjI1MzY0MSBMNjMuNzcxNjg3NCwyMC4yNTM2NDEgTDYzLjkzMTEzODQsMTkuODQwNTcyNCBMNjQuMDc4Njg3MSwxOS40Nzc0OTQ3IEM2NC4wOTQ0MjQ1LDE5LjQ0MDE3IDY0LjEwOTg0NTIsMTkuNDA0MTUwNyA2NC4xMjQ4NTEzLDE5LjM2OTczNjcgTDY0LjE2ODUyODQsMTkuMjcxNjEwMSBMNjUuOTg5NTg4LDE1LjMwNjYwMDMgTDY4Ljk0MTk4NTUsMTUuMzA2NjAwMyBMNjguOTQxOTg1NSwyMy44MjgwODkxIEw2Ni44MjU5NzY4LDIzLjgyODA4OTEgTDY2LjgyNjcyMjIsMTkuOTQ1NTA4OSBMNjYuODI2NzIyMiwxOS45NDU1MDg5IEw2Ni44MzIyODQ4LDE5LjczMDI0OTMgTDY2LjgzMjI4NDgsMTkuNzMwMjQ5MyBMNjYuODQyMzg2NCwxOS41MDUwNTI3IEw2Ni44NDIzODY0LDE5LjUwNTA1MjcgTDY2Ljg3MTkzNDksMTkuMDUwNTAxOCBMNjYuODcxOTM0OSwxOS4wNTA1MDE4IEw2Ni45MjM2MDAyLDE4LjQ1NDQ4MTIgTDY2LjkyMzYwMDIsMTguNDU0NDgxMiBMNjYuOTYxMzM2NywxOC4wODkzMTg2IEw2Ni45MTE5MDk0LDE4LjA4OTMxODYgTDY2LjU5NzYxMTgsMTguODY2NzU3OCBMNjYuNTk3NjExOCwxOC44NjY3NTc4IEw2Ni4zMzI1NDk0LDE5LjUwMTMyMDEgTDY2LjMzMjU0OTQsMTkuNTAxMzIwMSBMNjYuMTczNzI5MiwxOS44NjI3NTU5IEw2NC4wOTYxNjQxLDIzLjgyODA4OTEgTDYxLjQwMTI0MTMsMjMuODI4MDg5MSBMNjEuNDAxMjQxMywxNS4zMDY2MDAzIFogTTkzLjE0ODk2MzIsMTUuMzA2NjAwMyBMOTMuMTQ4OTYzMiwxOS4wODY5NTc5IEM5My4xNDg5NjMyLDE5LjI4NjA0OTkgOTMuMTQyMjU3OCwxOS41MTQ1MjE2IDkzLjEzMjM0NTUsMTkuNzQzNDk1NSBMOTMuMTA5MjgxNiwyMC4xOTM1NTcgTDkzLjEwOTI4MTYsMjAuMTkzNTU3IEw5My4wNTA0MzE1LDIxLjA0NTA0NzQgTDkzLjA5OTUzNTgsMjEuMDQ1MDQ3NCBMOTMuNDI4ODk5NCwyMC4xNTQ4NDc1IEw5My40Mjg4OTk0LDIwLjE1NDg0NzUgTDkzLjYwMDk2NDgsMTkuNzE0NzExMiBMOTMuNjAwOTY0OCwxOS43MTQ3MTEyIEw5My43NDQ2MDg3LDE5LjM2OTczNjcgTDkzLjc0NDYwODcsMTkuMzY5NzM2NyBMOTMuNzg4Mjg4NSwxOS4yNzE2MTAxIEw5NS42MDkwMjUyLDE1LjMwNjYwMDMgTDk4LjU2MTQyMjYsMTUuMzA2NjAwMyBMOTguNTYxNDIyNiwyMy44MjgwODkxIEw5Ni40NDU3MzcsMjMuODI4MDg5MSBMOTYuNDQ2NDgwNiwxOS45NDU1MDg5IEw5Ni40NDY0ODA2LDE5Ljk0NTUwODkgTDk2LjQ1MjAyOTksMTkuNzMwMjQ5MyBMOTYuNDUyMDI5OSwxOS43MzAyNDkzIEw5Ni40NjIxMDc0LDE5LjUwNTA1MjcgTDk2LjQ2MjEwNzQsMTkuNTA1MDUyNyBMOTYuNDkxNTg1NCwxOS4wNTA1MDE4IEw5Ni40OTE1ODU0LDE5LjA1MDUwMTggTDk2LjUzNDkyNTUsMTguNTQwNjU0OSBMOTYuNTM0OTI1NSwxOC41NDA2NTQ5IEw5Ni41ODA3NzM5LDE4LjA4OTMxODYgTDk2LjUzMTM0NjUsMTguMDg5MzE4NiBMOTYuMTczNjYxLDE4Ljk3MjQxMjUgTDk2LjE3MzY2MSwxOC45NzI0MTI1IEw5NS45NjA3OTQ2LDE5LjQ4MTEwOTQgTDk1Ljk2MDc5NDYsMTkuNDgxMTA5NCBMOTUuODQ1MzMyNywxOS43NDcyOSBMOTUuODQ1MzMyNywxOS43NDcyOSBMOTUuNzkzNDg5NCwxOS44NjI3NTU5IEw5My43MTU2MDEyLDIzLjgyODA4OTEgTDkxLjAyMDY3ODQsMjMuODI4MDg5MSBMOTEuMDIwNjc4NCwxNS4zMDY2MDAzIEw5My4xNDg5NjMyLDE1LjMwNjYwMDMgWiBNNDQuOTAwODk2NCwxNC45OTI0NjUyIEw0NC45MDA4OTY0LDE4LjA2NDYxMjEgTDQ3LjEwNTQyMjEsMTguMDY0NjEyMSBDNDcuNjE4NzU2MSwxOC4wNjQ2MTIxIDQ4LjA3NzgxNjksMTguMTIxMjA0MyA0OC40ODE5NTg0LDE4LjIzNDcxMiBDNDguODg2MDk5OSwxOC4zNDgyMTk4IDQ5LjIyODIxNDksMTguNTI0MTQwNiA0OS41MDc2NTczLDE4Ljc2MTUwNDQgQzQ5Ljc4NzQyMjcsMTguOTk5MTkxNSA1MC4wMDA5NjE5LDE5LjMwMDU4NTMgNTAuMTQ4NTk3OSwxOS42NjUzNjI0IEM1MC4yOTU5MTA5LDIwLjAzMDEzOTQgNTAuMzY5NTY3NCwyMC40NjEyMTAxIDUwLjM2OTU2NzQsMjAuOTU4MjUxMSBDNTAuMzY5NTY3NCwyMS40MDcxMDggNTAuMzA4NTEsMjEuNzkwMzE3OSA1MC4xODY3MTg0LDIyLjEwOTQ5NzggQzUwLjA2NDI4MDYsMjIuNDI4MDMwOSA0OS45MDgyNDUyLDIyLjY5NDE3NTkgNDkuNzE3NjQyOSwyMi45MDc2MDkyIEM0OS41MjY3MTc1LDIzLjEyMTA0MjYgNDkuMzE0NDcwNSwyMy4yODg4Nzg4IDQ5LjA4MDU3ODksMjMuNDEwNDcxMiBDNDguODQ2Njg3MiwyMy41MzIwNjM1IDQ4LjYxNzY0MTQsMjMuNjIzOTA0NSA0OC4zOTQwODc1LDIzLjY4NTk5NDIgQzQ4LjE3MDUzMzYsMjMuNzQ4MDg0IDQ3Ljk2MzEzMjUsMjMuNzg3MjEzNCA0Ny43NzI1MzAyLDIzLjgwMzM4MjYgTDQ3LjU2NDkzMjYsMjMuODE4OTA1IEw0Ny41NjQ5MzI2LDIzLjgxODkwNSBMNDcuNDAwMTk1MywyMy44MjY2NjYyIEw0Ny40MDAxOTUzLDIzLjgyNjY2NjIgTDQyLjc0MjI0NDUsMjMuODI3NjM2NCBMNDIuNzQyMjQ0NSwxNC45OTI0NjUyIEw0NC45MDA4OTY0LDE0Ljk5MjQ2NTIgWiBNNDYuNTQwNzIyNCwxOS43OTA4MzUzIEw0NC45MDA4OTY0LDE5Ljc5MDgzNTMgTDQ0LjkwMDg5NjQsMjIuMTAxNDEzMiBMNDYuNzIzNTcxNCwyMi4xMDE0MTMyIEM0Ni44OTE1NTk4LDIyLjEwMTQxMzIgNDcuMDU3OTMzLDIyLjA4NjUzNzUgNDcuMjIzMzM3MSwyMi4wNTY0NjI4IEM0Ny4zODg3NDExLDIyLjAyNzAzNDkgNDcuNTM4NjM4NSwyMS45NzA0NDI3IDQ3LjY3MzM1MjMsMjEuODg2MzYyOSBDNDcuODA4MDY2MiwyMS44MDI2MDY1IDQ3LjkxNjI4OTUsMjEuNjg2NTExNyA0Ny45OTc2OTkzLDIxLjUzNzc1NTEgQzQ4LjA3OTEwOTEsMjEuMzg5MzIxOSA0OC4xMTk4MTQsMjEuMTk1OTM4MyA0OC4xMTk4MTQsMjAuOTU4MjUxMSBDNDguMTE5ODE0LDIwLjcyNjA2MTUgNDguMDc3ODE2OSwyMC41MzM5NzE1IDQ3Ljk5MzgyMjcsMjAuMzgyOTUxMiBDNDcuOTA5ODI4NCwyMC4yMzE2MDc1IDQ3Ljc5NTc5MDEsMjAuMTEyNjAyMyA0Ny42NTA0MTU1LDIwLjAyNjI1ODggQzQ3LjUwNTM2MzksMTkuOTM5OTE1MyA0Ny4zMzgwMjE1LDE5Ljg3ODc5NTcgNDcuMTQ3MDk2MSwxOS44NDM1NDY5IEM0Ny4wMDQxNDQ0LDE5LjgxNzM1MjggNDYuODU0NjUwOCwxOS44MDA3OTk2IDQ2LjY5ODc1MTcsMTkuNzk0MTYwMSBMNDYuNTQwNzIyNCwxOS43OTA4MzUzIFogTTI2Ljc1ODMwMjcsMTYuODI3NjA0IEMyNS45MTYyMDY2LDE2LjgyNzYwNCAyNS4yMjkyODE3LDE3LjQwMjU4OTYgMjUuMDEwMDA4OSwxOC40Nzc3MDUxIEwyNC45ODQwODU5LDE4LjYyMDc2NzcgTDI4LjM0Njc2MjksMTguNjIwNzY3NyBDMjguMzQ2NzYyOSwxNy41ODg4NDk3IDI3LjY4NzczMTIsMTYuODI3NjA0IDI2Ljc1ODMwMjcsMTYuODI3NjA0IFoiIC8+Cjwvc3ZnPg==",h="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCFET0NUWVBFIHN2Zz4KPHN2ZyB2aWV3Qm94PSIwIDAgMTExIDQwIiB0aXRsZT0iWNC10LvRjNGB0LjQvdC60LgiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICAgY2xhc3M9IkxvZ28tbW9kdWxlX2xvZ29fX1kybXdQIExvZ28tbW9kdWxlX21lZGl1bV9fMXp5V20iPgogICAgPHBhdGgKICAgICAgICBmaWxsPSJ3aGl0ZSIgZD0iTTExMSwwIEwxMTEsMjUuNTAwNDM2NiBDMTExLDMxLjI2NTQwMTIgMTA2LjI2MjcyNSwzNS45NTU0Mzc3IDEwMC40Mzk5ODYsMzUuOTU1NDM3NyBMNjMuMzU2MjA3MiwzNS45NTU0Mzc3IEM2MC44NTAyNzE0LDM1Ljk1NTQzNzcgNTguNDk0NTU2MSwzNi45Mjg4MjMyIDU2LjcyMjI3NzcsMzguNjk1NzkyOCBMNTUuNDE2MTY3Myw0MCBMNTQuMTA5NDEwOCwzOC42OTU3OTI4IEM1Mi4zMzc3Nzg1LDM2LjkyODgyMzIgNDkuOTgxNzQwMSwzNS45NTU0Mzc3IDQ3LjQ3NjEyNzQsMzUuOTU1NDM3NyBMMTAuNDk1NDAzLDM1Ljk1NTQzNzcgQzQuNzA4MjAwMDYsMzUuOTU1NDM3NyAwLDMxLjI2NTQwMTIgMCwyNS41MDA0MzY2IEwwLDAgTDExMSwwIFogTTEwOC41MTYwMzIsMi40ODYxNzUzNCBMMi40ODM2NDQ5OSwyLjQ4NjE3NTM0IEwyLjQ4MzY0NDk5LDI1LjUwMDQzNjYgQzIuNDgzNjQ0OTksMjkuODk0MjUzNSA2LjA3Nzk1MjI0LDMzLjQ2OTI2MjQgMTAuNDk1NDAzLDMzLjQ2OTI2MjQgTDQ3LjQ3NjEyNzQsMzMuNDY5MjYyNCBDNTAuNDM3MjQ3MywzMy40NjkyNjI0IDUzLjIzMzYwOTMsMzQuNTQ0ODM3MiA1NS40MTYxNjczLDM2LjUxMTAxMTIgQzU3LjU5OTM3MTQsMzQuNTQ0NTEzOCA2MC4zOTUwODcyLDMzLjQ2OTI2MjQgNjMuMzU2MjA3MiwzMy40NjkyNjI0IEwxMDAuNDM5OTg2LDMzLjQ2OTI2MjQgQzEwNC44OTI5NzMsMzMuNDY5MjYyNCAxMDguNTE2MDMyLDI5Ljg5NDI1MzUgMTA4LjUxNjAzMiwyNS41MDA0MzY2IEwxMDguNTE2MDMyLDIuNDg2MTc1MzQgWiI+CiAgICA8L3BhdGg+CiAgICA8cGF0aAogICAgICAgIGZpbGw9IndoaXRlIiBkPSJNMjYuNzU4MzAyNywxNS4xMDIzNTEgQzI5LjAzOTM5MjMsMTUuMTAyMzUxIDMwLjU2MDAxMTEsMTYuNzI2MDYxNSAzMC41NjAwMTExLDE5LjA0MzQzMDUgQzMwLjU2MDAxMTEsMTkuMjc2NzY0NCAzMC41NDY2MTk2LDE5LjQ4NTIyOTMgMzAuNTI4ODUwMywxOS42NTkxMzcxIEwzMC41MDYwMDI0LDE5Ljg1MDYxODkgTDMwLjUwNjAwMjQsMTkuODUwNjE4OSBMMzAuNDcxNDIxNywyMC4wNjc1MDA1IEwzMC40NzE0MjE3LDIwLjA2NzUwMDUgTDMwLjQ0MTc3MywyMC4yMTA1MjI5IEwyNC45MzMzNjYzLDIwLjIxMDUyMjkgQzI1LjAzNDgwNTUsMjEuNTk3ODM5OCAyNS44MTE3NTIyLDIyLjI3NDAzNTUgMjYuODA4Njk5MiwyMi4yNzQwMzU1IEMyNy42NjM4MTA1LDIyLjI3NDAzNTUgMjguMjU2OTQ3LDIxLjczNDUyNDkgMjguNDI2NTQ4OCwyMC45Nzk1MTU1IEwyOC40NDc4NzksMjAuODcwMjI2IEwzMC40NTg4OTQ5LDIyLjAwMzY4NjYgQzI5Ljg2NzM4MTcsMjMuMDg2MDUyNSAyOC41ODMyMzksMjQuMDMzMjQzOSAyNi44MDg2OTkyLDI0LjAzMzI0MzkgQzI0LjQyNjQ5MzQsMjQuMDMzMjQzOSAyMi42ODU4NzQ0LDIyLjM3NTkwMTQgMjIuNjg1ODc0NCwxOS41Njc2MzU3IEMyMi42ODU4NzQ0LDE2Ljc5Mzk3MjEgMjQuNDYwNDE0MiwxNS4xMDIzNTEgMjYuNzU4MzAyNywxNS4xMDIzNTEgWiBNNTUuNjk1NjA5NywxNS4xMDIzNTEgQzU3LjgwODA2NDcsMTUuMTAyMzUxIDU5LjA5MjIwNzQsMTYuNTA2MTYwNSA1OS4zNjI2MDQyLDE3Ljg3NjAxNDYgTDU3LjE4Mjk1MzgsMTguOTkyNjU5MiBDNTcuMTgyOTUzOCwxNy44NTkxOTg3IDU2Ljc0MzI3NjIsMTYuOTI5MTQ2NiA1NS42OTU2MDk3LDE2LjkyOTE0NjYgQzU0LjU0NjgyNjksMTYuOTI5MTQ2NiA1NC4wNTY3NTI5LDE4LjA0NTQ2NzggNTQuMDU2NzUyOSwxOS41Njc2MzU3IEM1NC4wNTY3NTI5LDIxLjA5MDEyNzEgNTQuNTQ2ODI2OSwyMi4yMDY3NzE3IDU1LjY5NTYwOTcsMjIuMjA2NzcxNyBDNTYuNzQzMjc2MiwyMi4yMDY3NzE3IDU3LjE4Mjk1MzgsMjEuMjc2Mzk2MiA1Ny4xODI5NTM4LDIwLjE0MjkzNTcgTDU5LjM2MjYwNDIsMjEuMjU5MjU2OSBDNTkuMDkyMjA3NCwyMi42Mjk0MzQ0IDU3LjgwODA2NDcsMjQuMDMzMjQzOSA1NS42OTU2MDk3LDI0LjAzMzI0MzkgQzUzLjM2MzgwMDQsMjQuMDMzMjQzOSA1MS42NDAzMDMzLDIyLjM0MTk0NjEgNTEuNjQwMzAzMywxOS41Njc2MzU3IEM1MS42NDAzMDMzLDE2Ljc5Mzk3MjEgNTMuMzYzODAwNCwxNS4xMDIzNTEgNTUuNjk1NjA5NywxNS4xMDIzNTEgWiBNNDAuMjc2MjA2LDE1LjExOTQ5MDMgTDQwLjI3NjIwNiwyMy44MzAxNTg4IEwzOC4wMTE5MTUyLDIzLjgzMDE1ODggTDM4LjAxMTkxNTIsMTYuODQ0NDIgTDM1LjgzODA3OTcsMTYuODQ0NDIgTDM1LjgzODA3OTcsMjAuMDA3NzYxMiBDMzUuODM4MDc5NywyMi4xMDQ5MDU3IDM1LjI4MjEwMjUsMjMuNTI2MTc3OSAzMy40OTA0NDA4LDI0LjAzMzI0MzkgTDMxLjQxMjU1MjYsMjIuNDQzMTY1MyBDMzMuMDAwNjg5OCwyMi4xMDQ5MDU3IDMzLjU0MTQ4MzQsMjEuNTI5OTI5MiAzMy41NDE0ODM0LDE5Ljc4Nzg2MDIgTDMzLjUzNDA1MzIsMTUuMTE5NDkwMyBMNDAuMjc2MjA2LDE1LjExOTQ5MDMgWiBNMTIuMDI2MDM2NSwxMi4xMjUyNzg5IEwxNC43ODAwNzgzLDEyLjEyNTI3ODkgTDE2LjI3MTc0NjQsMTQuOTcyNTIzNCBMMTYuMjcxNzQ2NCwxNC45NzI1MjM0IEwxNi40MzQxNzQ4LDE1LjI5NTM0NDEgTDE2LjQzNDE3NDgsMTUuMjk1MzQ0MSBMMTYuNjc4ODQ5MSwxNS44MDM3MzM5IEwxNi42Nzg4NDkxLDE1LjgwMzczMzkgTDE2Ljk3Njg1MDcsMTYuNDU1Mzg5MiBMMTYuOTc2ODUwNywxNi40NTUzODkyIEwxNy4wMjc1NzAyLDE2LjQ1NTM4OTIgTDE3LjQ0MzA0MjYsMTUuNjAxMDMyOSBMMTcuNDQzMDQyNiwxNS42MDEwMzI5IEwxNy43NjYwNTA5LDE0Ljk3MDM0NDQgTDE3Ljc2NjA1MDksMTQuOTcwMzQ0NCBMMTkuMjkxODYxMSwxMi4xMjUyNzg5IEwyMS44NzcyNjgzLDEyLjEyNTI3ODkgTDE4Ljc2Nzg2NjIsMTcuNzU3OTc5NSBMMjIuMjE1MTgzNiwyMy44MzAxNTg4IEwxOS40Nzc2MTc1LDIzLjgzMDE1ODggTDE3Ljc4ODA0MTIsMjAuNzM0NzI4MiBMMTcuMzQ3NzgyMSwxOS44OTM0ODUxIEwxNy4zNDc3ODIxLDE5Ljg5MzQ4NTEgTDE2Ljk5MzY0OTUsMTkuMTk1NzQ0MyBMMTYuOTkzNjQ5NSwxOS4xOTU3NDQzIEwxNi45NDI5Mjk5LDE5LjE5NTc0NDMgTDE2LjQyOTY2NjYsMjAuMjAxNzYxMiBMMTYuNDI5NjY2NiwyMC4yMDE3NjEyIEwxNi4xNDg4NjEzLDIwLjczNDcyODIgTDE2LjE0ODg2MTMsMjAuNzM0NzI4MiBMMTQuNDU4OTYxOSwyMy44MzAxNTg4IEwxMS44MDYwMzYyLDIzLjgzMDE1ODggTDE1LjE4NTgzNTEsMTcuODQyMzgyNyBMMTIuMDI2MDM2NSwxMi4xMjUyNzg5IFogTTczLjYzMjkwMjEsMTUuMzA4OTkzMyBMNzMuNjMyOTAyMSwxOC40OTgyMDUyIEw3Ni43Mzg0Mjc1LDE4LjQ5ODIwNTIgTDc2LjczODQyNzUsMTUuMzA4OTkzMyBMNzkuMDI2MzAxMywxNS4zMDg5OTMzIEw3OS4wMjYzMDEzLDIzLjgzMDE1ODggTDc2LjczODQyNzUsMjMuODMwMTU4OCBMNzYuNzM4NDI3NSwyMC41MzAwMjYyIEw3My42MzI5MDIxLDIwLjUzMDAyNjIgTDczLjYzMjkwMjEsMjMuODMwMTU4OCBMNzEuMzQ0MzgyMiwyMy44MzAxNTg4IEw3MS4zNDQzODIyLDE1LjMwODk5MzMgTDczLjYzMjkwMjEsMTUuMzA4OTkzMyBaIE04MS43NTA5NDUyLDE1LjMwODk5MzMgTDg0LjAzODgxOSwxNS4zMDg5OTMzIEw4NC4wMzgyODI2LDE3Ljc2MjUxNDYgTDg0LjAzODI4MjYsMTcuNzYyNTE0NiBMODQuMDI3MjU5NywxOC4yMjcyODUzIEw4NC4wMjcyNTk3LDE4LjIyNzI4NTMgTDg0LjAwNzM1OTIsMTguNjY3NjY2NCBMODQuMDA3MzU5MiwxOC42Njc2NjY0IEw4My45NjQ4Mzk0LDE5LjMyMzQ4MDkgTDgzLjk2NDgzOTQsMTkuMzIzNDgwOSBMODQuMDEzOTQzNywxOS4zMjM0ODA5IEw4NC4xNjkzNzksMTkuMDI2NDkwNiBMODQuMTY5Mzc5LDE5LjAyNjQ5MDYgTDg0LjI5Njg5OTMsMTguNzkzODk5NCBMODQuMjk2ODk5MywxOC43OTM4OTk0IEw4NC41MTMwNDEsMTguNDE3ODUxOSBMODQuNTEzMDQxLDE4LjQxNzg1MTkgTDg0LjYzNzYyODEsMTguMjExMDY5OCBMODQuNjM3NjI4MSwxOC4yMTEwNjk4IEw4NC43NzEzMDE3LDE3Ljk5NzQwOTIgTDg0Ljc3MTMwMTcsMTcuOTk3NDA5MiBMODQuOTEyNjE4NywxNy43ODEwOTA0IEw4NC45MTI2MTg3LDE3Ljc4MTA5MDQgTDg2LjU5NzQxMjcsMTUuMzA4OTkzMyBMODkuMjE3NzA5OCwxNS4zMDg5OTMzIEw4Ni41ODUxMzY2LDE4Ljc5Mzc3ODEgTDg5LjM3NzYyMTksMjMuODMwMTU4OCBMODYuODQzMjU3MywyMy44MzAxNTg4IEw4NS4xMDg3NzYzLDIwLjY3NzgxMjYgTDg0LjAzODgxOSwyMi4xNDMwNjUgTDg0LjAzODgxOSwyMy44MzAxNTg4IEw4MS43NTA5NDUyLDIzLjgzMDE1ODggTDgxLjc1MDk0NTIsMTUuMzA4OTkzMyBaIE02MS40MDEyNDEzLDE1LjMwNjYwMDMgTDYzLjUyOTUyNiwxNS4zMDY2MDAzIEw2My41Mjg5ODM1LDE5LjE4ODgxODUgTDYzLjUyODk4MzUsMTkuMTg4ODE4NSBMNjMuNTIxNjIyMSwxOS41MTU3NTg1IEw2My41MjE2MjIxLDE5LjUxNTc1ODUgTDYzLjUwNzcwMTIsMTkuODU3ODkwNyBMNjMuNTA3NzAxMiwxOS44NTc4OTA3IEw2My40NzcwNDkyLDIwLjQwMzA0NzIgTDYzLjQ3NzA0OTIsMjAuNDAzMDQ3MiBMNjMuNDMwOTk0MywyMS4wNDUwNDc0IEw2My40ODAwOTg3LDIxLjA0NTA0NzQgTDYzLjc3MTY4NzQsMjAuMjUzNjQxIEw2My43NzE2ODc0LDIwLjI1MzY0MSBMNjMuOTMxMTM4NCwxOS44NDA1NzI0IEw2NC4wNzg2ODcxLDE5LjQ3NzQ5NDcgQzY0LjA5NDQyNDUsMTkuNDQwMTcgNjQuMTA5ODQ1MiwxOS40MDQxNTA3IDY0LjEyNDg1MTMsMTkuMzY5NzM2NyBMNjQuMTY4NTI4NCwxOS4yNzE2MTAxIEw2NS45ODk1ODgsMTUuMzA2NjAwMyBMNjguOTQxOTg1NSwxNS4zMDY2MDAzIEw2OC45NDE5ODU1LDIzLjgyODA4OTEgTDY2LjgyNTk3NjgsMjMuODI4MDg5MSBMNjYuODI2NzIyMiwxOS45NDU1MDg5IEw2Ni44MjY3MjIyLDE5Ljk0NTUwODkgTDY2LjgzMjI4NDgsMTkuNzMwMjQ5MyBMNjYuODMyMjg0OCwxOS43MzAyNDkzIEw2Ni44NDIzODY0LDE5LjUwNTA1MjcgTDY2Ljg0MjM4NjQsMTkuNTA1MDUyNyBMNjYuODcxOTM0OSwxOS4wNTA1MDE4IEw2Ni44NzE5MzQ5LDE5LjA1MDUwMTggTDY2LjkyMzYwMDIsMTguNDU0NDgxMiBMNjYuOTIzNjAwMiwxOC40NTQ0ODEyIEw2Ni45NjEzMzY3LDE4LjA4OTMxODYgTDY2LjkxMTkwOTQsMTguMDg5MzE4NiBMNjYuNTk3NjExOCwxOC44NjY3NTc4IEw2Ni41OTc2MTE4LDE4Ljg2Njc1NzggTDY2LjMzMjU0OTQsMTkuNTAxMzIwMSBMNjYuMzMyNTQ5NCwxOS41MDEzMjAxIEw2Ni4xNzM3MjkyLDE5Ljg2Mjc1NTkgTDY0LjA5NjE2NDEsMjMuODI4MDg5MSBMNjEuNDAxMjQxMywyMy44MjgwODkxIEw2MS40MDEyNDEzLDE1LjMwNjYwMDMgWiBNOTMuMTQ4OTYzMiwxNS4zMDY2MDAzIEw5My4xNDg5NjMyLDE5LjA4Njk1NzkgQzkzLjE0ODk2MzIsMTkuMjg2MDQ5OSA5My4xNDIyNTc4LDE5LjUxNDUyMTYgOTMuMTMyMzQ1NSwxOS43NDM0OTU1IEw5My4xMDkyODE2LDIwLjE5MzU1NyBMOTMuMTA5MjgxNiwyMC4xOTM1NTcgTDkzLjA1MDQzMTUsMjEuMDQ1MDQ3NCBMOTMuMDk5NTM1OCwyMS4wNDUwNDc0IEw5My40Mjg4OTk0LDIwLjE1NDg0NzUgTDkzLjQyODg5OTQsMjAuMTU0ODQ3NSBMOTMuNjAwOTY0OCwxOS43MTQ3MTEyIEw5My42MDA5NjQ4LDE5LjcxNDcxMTIgTDkzLjc0NDYwODcsMTkuMzY5NzM2NyBMOTMuNzQ0NjA4NywxOS4zNjk3MzY3IEw5My43ODgyODg1LDE5LjI3MTYxMDEgTDk1LjYwOTAyNTIsMTUuMzA2NjAwMyBMOTguNTYxNDIyNiwxNS4zMDY2MDAzIEw5OC41NjE0MjI2LDIzLjgyODA4OTEgTDk2LjQ0NTczNywyMy44MjgwODkxIEw5Ni40NDY0ODA2LDE5Ljk0NTUwODkgTDk2LjQ0NjQ4MDYsMTkuOTQ1NTA4OSBMOTYuNDUyMDI5OSwxOS43MzAyNDkzIEw5Ni40NTIwMjk5LDE5LjczMDI0OTMgTDk2LjQ2MjEwNzQsMTkuNTA1MDUyNyBMOTYuNDYyMTA3NCwxOS41MDUwNTI3IEw5Ni40OTE1ODU0LDE5LjA1MDUwMTggTDk2LjQ5MTU4NTQsMTkuMDUwNTAxOCBMOTYuNTM0OTI1NSwxOC41NDA2NTQ5IEw5Ni41MzQ5MjU1LDE4LjU0MDY1NDkgTDk2LjU4MDc3MzksMTguMDg5MzE4NiBMOTYuNTMxMzQ2NSwxOC4wODkzMTg2IEw5Ni4xNzM2NjEsMTguOTcyNDEyNSBMOTYuMTczNjYxLDE4Ljk3MjQxMjUgTDk1Ljk2MDc5NDYsMTkuNDgxMTA5NCBMOTUuOTYwNzk0NiwxOS40ODExMDk0IEw5NS44NDUzMzI3LDE5Ljc0NzI5IEw5NS44NDUzMzI3LDE5Ljc0NzI5IEw5NS43OTM0ODk0LDE5Ljg2Mjc1NTkgTDkzLjcxNTYwMTIsMjMuODI4MDg5MSBMOTEuMDIwNjc4NCwyMy44MjgwODkxIEw5MS4wMjA2Nzg0LDE1LjMwNjYwMDMgTDkzLjE0ODk2MzIsMTUuMzA2NjAwMyBaIE00NC45MDA4OTY0LDE0Ljk5MjQ2NTIgTDQ0LjkwMDg5NjQsMTguMDY0NjEyMSBMNDcuMTA1NDIyMSwxOC4wNjQ2MTIxIEM0Ny42MTg3NTYxLDE4LjA2NDYxMjEgNDguMDc3ODE2OSwxOC4xMjEyMDQzIDQ4LjQ4MTk1ODQsMTguMjM0NzEyIEM0OC44ODYwOTk5LDE4LjM0ODIxOTggNDkuMjI4MjE0OSwxOC41MjQxNDA2IDQ5LjUwNzY1NzMsMTguNzYxNTA0NCBDNDkuNzg3NDIyNywxOC45OTkxOTE1IDUwLjAwMDk2MTksMTkuMzAwNTg1MyA1MC4xNDg1OTc5LDE5LjY2NTM2MjQgQzUwLjI5NTkxMDksMjAuMDMwMTM5NCA1MC4zNjk1Njc0LDIwLjQ2MTIxMDEgNTAuMzY5NTY3NCwyMC45NTgyNTExIEM1MC4zNjk1Njc0LDIxLjQwNzEwOCA1MC4zMDg1MSwyMS43OTAzMTc5IDUwLjE4NjcxODQsMjIuMTA5NDk3OCBDNTAuMDY0MjgwNiwyMi40MjgwMzA5IDQ5LjkwODI0NTIsMjIuNjk0MTc1OSA0OS43MTc2NDI5LDIyLjkwNzYwOTIgQzQ5LjUyNjcxNzUsMjMuMTIxMDQyNiA0OS4zMTQ0NzA1LDIzLjI4ODg3ODggNDkuMDgwNTc4OSwyMy40MTA0NzEyIEM0OC44NDY2ODcyLDIzLjUzMjA2MzUgNDguNjE3NjQxNCwyMy42MjM5MDQ1IDQ4LjM5NDA4NzUsMjMuNjg1OTk0MiBDNDguMTcwNTMzNiwyMy43NDgwODQgNDcuOTYzMTMyNSwyMy43ODcyMTM0IDQ3Ljc3MjUzMDIsMjMuODAzMzgyNiBMNDcuNTY0OTMyNiwyMy44MTg5MDUgTDQ3LjU2NDkzMjYsMjMuODE4OTA1IEw0Ny40MDAxOTUzLDIzLjgyNjY2NjIgTDQ3LjQwMDE5NTMsMjMuODI2NjY2MiBMNDIuNzQyMjQ0NSwyMy44Mjc2MzY0IEw0Mi43NDIyNDQ1LDE0Ljk5MjQ2NTIgTDQ0LjkwMDg5NjQsMTQuOTkyNDY1MiBaIE00Ni41NDA3MjI0LDE5Ljc5MDgzNTMgTDQ0LjkwMDg5NjQsMTkuNzkwODM1MyBMNDQuOTAwODk2NCwyMi4xMDE0MTMyIEw0Ni43MjM1NzE0LDIyLjEwMTQxMzIgQzQ2Ljg5MTU1OTgsMjIuMTAxNDEzMiA0Ny4wNTc5MzMsMjIuMDg2NTM3NSA0Ny4yMjMzMzcxLDIyLjA1NjQ2MjggQzQ3LjM4ODc0MTEsMjIuMDI3MDM0OSA0Ny41Mzg2Mzg1LDIxLjk3MDQ0MjcgNDcuNjczMzUyMywyMS44ODYzNjI5IEM0Ny44MDgwNjYyLDIxLjgwMjYwNjUgNDcuOTE2Mjg5NSwyMS42ODY1MTE3IDQ3Ljk5NzY5OTMsMjEuNTM3NzU1MSBDNDguMDc5MTA5MSwyMS4zODkzMjE5IDQ4LjExOTgxNCwyMS4xOTU5MzgzIDQ4LjExOTgxNCwyMC45NTgyNTExIEM0OC4xMTk4MTQsMjAuNzI2MDYxNSA0OC4wNzc4MTY5LDIwLjUzMzk3MTUgNDcuOTkzODIyNywyMC4zODI5NTEyIEM0Ny45MDk4Mjg0LDIwLjIzMTYwNzUgNDcuNzk1NzkwMSwyMC4xMTI2MDIzIDQ3LjY1MDQxNTUsMjAuMDI2MjU4OCBDNDcuNTA1MzYzOSwxOS45Mzk5MTUzIDQ3LjMzODAyMTUsMTkuODc4Nzk1NyA0Ny4xNDcwOTYxLDE5Ljg0MzU0NjkgQzQ3LjAwNDE0NDQsMTkuODE3MzUyOCA0Ni44NTQ2NTA4LDE5LjgwMDc5OTYgNDYuNjk4NzUxNywxOS43OTQxNjAxIEw0Ni41NDA3MjI0LDE5Ljc5MDgzNTMgWiBNMjYuNzU4MzAyNywxNi44Mjc2MDQgQzI1LjkxNjIwNjYsMTYuODI3NjA0IDI1LjIyOTI4MTcsMTcuNDAyNTg5NiAyNS4wMTAwMDg5LDE4LjQ3NzcwNTEgTDI0Ljk4NDA4NTksMTguNjIwNzY3NyBMMjguMzQ2NzYyOSwxOC42MjA3Njc3IEMyOC4zNDY3NjI5LDE3LjU4ODg0OTcgMjcuNjg3NzMxMiwxNi44Mjc2MDQgMjYuNzU4MzAyNywxNi44Mjc2MDQgWiI+CiAgICA8L3BhdGg+Cjwvc3ZnPg==",f=e=>{var{alt:t,className:n,dataTestId:i,size:s="full",style:c}=e,u=(0,a._)(e,["alt","className","dataTestId","size","style"]);const l=Object.assign({alt:t,size:s,className:(0,o.c)(d.logo,"full"!==s&&d[s],n),style:c,"data-testid":i},u);return r.createElement("img",Object.assign({alt:t},l))}},12818:function(e,t,n){"use strict";n.d(t,{N:function(){return f}});var a=n(67294),r=n(64338),i=n(39440),o=n(34300),d=n(7661),s=n(35828),c=n(48915),u=n(8381),l=n(41011);const g={info:c.I,success:u.I,error:c.a,alert:l.I},h=e=>{let{visuallyHidden:t,children:n}=e;return t?a.createElement(i.T,null,n):n},f=a.forwardRef(((e,t)=>{let{autoClose:n=!1,autoCloseDuration:i=6e3,boxShadow:c=!1,children:u,className:l="",closeAnimationDuration:f=85,closeButtonLabelText:p,dataTestId:m,dismissible:R=!1,displayAutoCloseProgress:b=!0,invisible:y=!1,label:v,notificationAriaLabel:_="Notification",position:w="inline",onClose:M=(()=>null),size:x="default",style:E,type:S="info",headingLevel:k=2}=e;const N="inline"!==w;N&&"large"===x&&(console.warn("Size '"+x+"' is only allowed for inline positioned notifications"),x="default"),!N&&n&&(console.warn("The 'autoClose' property is not allowed for inline positioned notifications"),n=!1);const[D,A]=(0,a.useState)(!0),j=(0,a.useCallback)((()=>{A(!1),setTimeout((()=>M()),f)}),[M,f]);(0,a.useEffect)((()=>{const e=setTimeout((()=>{n&&j()}),i);return()=>clearTimeout(e)}),[n,i,j]);const T=g[S],L=N?(e=>{const t=e.includes("center");return{from:{transform:"translate3d("+(t?"-50%":"0")+", "+(e.includes("top")?"-":"")+"32px, 0)",opacity:.66},to:{transform:"translate3d("+(t?"-50%":"0")+", 0, 0)",opacity:1},config:{friction:30,tension:300}}})(w):{},I={from:{opacity:1},to:{opacity:0},config:{duration:f}},C=b?{from:{transform:"translate3d(-100%, 0, 0)"},to:{transform:"translate3d(0%, 0, 0)"},config:{duration:i}}:{},O=(0,r.useSpring)(D?L:I),P=(0,r.useSpring)(C);return a.createElement(h,{visuallyHidden:y},a.createElement(r.animated.section,{style:Object.assign(Object.assign({},O),E),className:(0,o.c)(d.n[w],d.n.notification,d.n[x],d.n[S],n&&d.n.noBorder,c&&d.n.boxShadow,l),"aria-label":_,"data-testid":m,role:N||y?"alert":void 0},n&&a.createElement(r.animated.div,{style:P,className:d.n.autoClose}),a.createElement("div",{className:d.n.content,ref:t},v&&a.createElement("div",Object.assign({className:d.n.label},N||y?{}:{role:"heading","aria-level":k}),a.createElement(T,{className:d.n.icon,"aria-hidden":!0}),a.createElement(h,{visuallyHidden:"small"===x},v)),u&&a.createElement("div",{className:d.n.body},u)),R&&a.createElement("button",{className:(0,o.c)(d.n.close,d.n[S]),type:"button",title:p,"aria-label":p,onClick:j},a.createElement(s.I,{"aria-hidden":!0}))))}))},7661:function(e,t,n){"use strict";n.d(t,{n:function(){return r}});var a=n(7444),r={notification:"Notification-module_notification__2hN3H notification_hds-notification__2DQPN",noBorder:"Notification-module_noBorder__1odYk",close:"Notification-module_close__JWYav notification_hds-notification__close-button__1yGIj",autoClose:"Notification-module_autoClose__v_pk-",content:"Notification-module_content__ZZKvE notification_hds-notification__content__5ylSS",icon:"Notification-module_icon__1ans7 notification_hds-icon__29HQM",label:"Notification-module_label__1bhNu notification_hds-notification__label__2t1lR",body:"Notification-module_body__9BSAD notification_hds-notification__body__3cobH",small:"Notification-module_small__pCXa_ notification_hds-notification--small__1wVl6",large:"Notification-module_large__3RTFp notification_hds-notification--large__260Qm","top-left":"Notification-module_top-left__2-Oyw notification_hds-notification--top-left__sIHO2","top-center":"Notification-module_top-center__MBPMY notification_hds-notification--top-center__GDWo5","top-right":"Notification-module_top-right__3TwE8 notification_hds-notification--top-right__3Wa5K","bottom-left":"Notification-module_bottom-left__tlQHs notification_hds-notification--bottom-left__eB4ZK","bottom-center":"Notification-module_bottom-center__CkUW8 notification_hds-notification--bottom-center__5EgOP","bottom-right":"Notification-module_bottom-right__3Gt6O notification_hds-notification--bottom-right__1SmfT",success:"Notification-module_success__1ttWZ notification_hds-notification--success__1_3XZ",alert:"Notification-module_alert__1Erry notification_hds-notification--alert__1MV7H",error:"Notification-module_error__2sn9y notification_hds-notification--error__3T1Of",boxShadow:"Notification-module_boxShadow__3bsIs notification_hds-notification--box-shadow__2kbD_"};(0,a.s)(".notification_hds-icon__29HQM{--icon-size:100%;background-color:currentcolor;display:inline-block;height:var(--icon-size);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:auto;mask-size:auto;width:var(--icon-size)}.notification_hds-icon__29HQM.notification_hds-icon--size-xs__19VKz{--icon-size:var(--spacing-layout-2-xs)}.notification_hds-icon__29HQM.notification_hds-icon--size-s__2Ffyw{--icon-size:var(--spacing-layout-xs)}.notification_hds-icon__29HQM.notification_hds-icon--size-m__28mpE{--icon-size:var(--spacing-layout-s)}.notification_hds-icon__29HQM.notification_hds-icon--size-l__T6YEf{--icon-size:var(--spacing-layout-m)}.notification_hds-icon__29HQM.notification_hds-icon--size-xl__18_OX{--icon-size:var(--spacing-layout-l)}.notification_hds-icon--alert-circle-fill__3er4k{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z' fill='currentColor'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z' fill='currentColor'/%3E%3C/svg%3E\")}.notification_hds-icon--check-circle-fill__2u1G4{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z' fill='currentColor'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z' fill='currentColor'/%3E%3C/svg%3E\")}.notification_hds-icon--error-fill__jPWn1{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.456c.349-.586 1.223-.607 1.61-.063l.04.063 9.052 15.21c.343.577-.072 1.285-.753 1.332l-.072.002H2.948c-.7 0-1.15-.689-.858-1.273l.033-.06 9.052-15.21zM13 16v2h-2v-2h2zm0-7.5v6h-2v-6h2z' fill='currentColor'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.456c.349-.586 1.223-.607 1.61-.063l.04.063 9.052 15.21c.343.577-.072 1.285-.753 1.332l-.072.002H2.948c-.7 0-1.15-.689-.858-1.273l.033-.06 9.052-15.21zM13 16v2h-2v-2h2zm0-7.5v6h-2v-6h2z' fill='currentColor'/%3E%3C/svg%3E\")}.notification_hds-icon--info-circle-fill__1gXDU{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3a9 9 0 100 18 9 9 0 000-18zm1 7v6.5h2V18H9v-1.5h2v-5H9V10h4zm-1.188-4a1.312 1.312 0 110 2.625 1.312 1.312 0 010-2.625z' fill='currentColor'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3a9 9 0 100 18 9 9 0 000-18zm1 7v6.5h2V18H9v-1.5h2v-5H9V10h4zm-1.188-4a1.312 1.312 0 110 2.625 1.312 1.312 0 010-2.625z' fill='currentColor'/%3E%3C/svg%3E\")}.notification_hds-notification__2DQPN{--notification-background-color:var(--color-info-light);--notification-border-color:var(--color-info);--notification-border-width:var(--spacing-2-xs);--notification-icon-color:var(--color-info);--notification-color:var(--color-black-90);--notification-max-width-inline:none;--notification-max-width-toast:21rem;--notification-z-index-inline:auto;--notification-z-index-toast:99;--notification-offset:var(--spacing-layout-s);--notification-padding:var(--spacing-s);background-color:var(--notification-background-color);border:solid var(--notification-border-color);border-left-width:var(--notification-border-width);border-bottom-width:0;border-right-width:0;border-top-width:0;box-sizing:border-box;color:var(--notification-color);max-width:var(--notification-max-width-inline);padding:var(--notification-padding);position:relative;width:100%;z-index:var(--notification-z-index-inline)}.notification_hds-notification__content__5ylSS{display:grid;grid-gap:var(--spacing-s);gap:var(--spacing-s)}.notification_hds-notification__label__2t1lR{align-items:flex-start;display:flex;font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:.4px;line-height:24px;margin-right:var(--spacing-l)}.notification_hds-notification__label__2t1lR>.notification_hds-icon__29HQM{color:var(--notification-icon-color);flex:none;margin-right:var(--spacing-2-xs)}.notification_hds-notification__body__3cobH{font-size:var(--fontsize-body-s);line-height:24px}.notification_hds-notification--small__1wVl6{--notification-padding:var(--spacing-2-xs)}.notification_hds-notification--small__1wVl6 .notification_hds-notification__content__5ylSS{display:flex;grid-gap:0;gap:0}.notification_hds-notification--small__1wVl6 .notification_hds-notification__label__2t1lR{margin-right:0}.notification_hds-notification--small__1wVl6 .notification_hds-notification__body__3cobH{margin-right:var(--spacing-l)}.notification_hds-notification--large__260Qm{--notification-padding:var(--spacing-l)}.notification_hds-notification--large__260Qm .notification_hds-notification__label__2t1lR{margin-right:0}.notification_hds-notification__2DQPN .notification_hds-icon__29HQM{--icon-size:var(--spacing-layout-xs)}.notification_hds-notification__close-button__1yGIj{--notification-close-button-offset:var(--spacing-s);background:none;border:none;cursor:pointer;display:flex;outline:none;padding:0;position:absolute;right:var(--notification-close-button-offset);top:var(--notification-close-button-offset)}.notification_hds-notification--large__260Qm .notification_hds-notification__close-button__1yGIj,.notification_hds-notification--small__1wVl6 .notification_hds-notification__close-button__1yGIj{--notification-close-button-offset:var(--spacing-2-xs)}.notification_hds-notification__close-button__1yGIj:focus{box-shadow:0 0 0 3px var(--color-focus-outline)}.notification_hds-notification--bottom-center__5EgOP,.notification_hds-notification--bottom-left__eB4ZK,.notification_hds-notification--bottom-right__1SmfT,.notification_hds-notification--top-center__GDWo5,.notification_hds-notification--top-left__sIHO2,.notification_hds-notification--top-right__3Wa5K{border-left-width:0;border-bottom-width:0;border-right-width:0;border-top-width:var(--notification-border-width);max-width:var(--notification-max-width-toast);position:fixed;width:calc(100% - var(--spacing-l));z-index:var(--notification-z-index-toast)}.notification_hds-notification--top-left__sIHO2{left:var(--notification-offset);top:var(--notification-offset)}.notification_hds-notification--top-center__GDWo5{left:50%;top:var(--notification-offset);transform:translateX(-50%)}.notification_hds-notification--top-right__3Wa5K{right:var(--notification-offset);top:var(--notification-offset)}.notification_hds-notification--bottom-left__eB4ZK{bottom:var(--notification-offset);left:var(--notification-offset)}.notification_hds-notification--bottom-center__5EgOP{bottom:var(--notification-offset);left:50%;transform:translateX(-50%)}.notification_hds-notification--bottom-right__1SmfT{bottom:var(--notification-offset);right:var(--notification-offset)}@media only screen and (max-width:765.98px){.notification_hds-notification__2DQPN{--notification-offset:var(--spacing-s)}}.notification_hds-notification--success__1_3XZ{--notification-background-color:var(--color-success-light);--notification-border-color:var(--color-success);--notification-icon-color:var(--color-success)}.notification_hds-notification--alert__1MV7H{--notification-background-color:var(--color-alert-light);--notification-border-color:var(--color-alert-dark);--notification-icon-color:var(--color-alert-dark)}.notification_hds-notification--error__3T1Of{--notification-background-color:var(--color-error-light);--notification-border-color:var(--color-error);--notification-icon-color:var(--color-error)}.notification_hds-notification--box-shadow__2kbD_{box-shadow:var(--box-shadow-l)}.Notification-module_notification__2hN3H{overflow:hidden}.Notification-module_notification__2hN3H.Notification-module_noBorder__1odYk{border:0;padding-top:calc(var(--notification-padding) + var(--notification-border-width))}.Notification-module_notification__2hN3H.Notification-module_noBorder__1odYk .Notification-module_close__JWYav{top:calc(var(--notification-close-button-offset) + var(--notification-border-width))}.Notification-module_autoClose__v_pk-{background-color:var(--notification-border-color);height:var(--notification-border-width);left:0;position:absolute;top:0;width:100%}.Notification-module_icon__1ans7{background-color:transparent}")},91267:function(e,t,n){"use strict";n.d(t,{R:function(){return o}});var a=n(67294),r=n(7444),i=n(34300);(0,r.s)("@keyframes text-input_fadeIn__2iVIH{0%{opacity:0}to{opacity:1}}.text-input_hds-text-input__2YbWJ{--border-width:2px;--outline-width:3px;--input-height:56px;--textarea-height:149px;--icon-size:var(--spacing-m);--helper-color-default:var(--color-black-60);--helper-color-invalid:var(--color-error);--helper-color-success:var(--color-success);--helper-color-info:var(--color-black-90);--helper-color-info-icon:var(--color-coat-of-arms);--icon-color-invalid:var(--color-error);--input-background-default:var(--color-white);--input-background-disabled:var(--color-black-10);--input-border-color-default:var(--color-black-50);--input-border-color-hover:var(--color-black-90);--input-border-color-focus:var(--color-black-90);--input-border-color-invalid:var(--color-error);--input-border-color-disabled:var(--color-black-10);--input-border-color-success:var(--color-success);--input-color-default:var(--color-black-90);--input-color-disabled:var(--color-black-40);--label-color-default:var(--color-black-90);--label-color-invalid:var(--color-black-90);--placeholder-color:var(--color-black-60)}.text-input_hds-text-input__2YbWJ .text-input_hds-text-input__input__BIkQu{-webkit-appearance:none;background-color:var(--input-background-default);border:var(--border-width) solid var(--input-border-color-default);border-radius:0;box-sizing:border-box;color:var(--input-color-default);font-family:inherit;font-size:1.125em;height:var(--input-height);line-height:normal;margin:0;padding:0 var(--spacing-s);width:100%;will-change:transform,box-shadow}.text-input_hds-text-input__2YbWJ .text-input_hds-text-input__input__BIkQu:hover{border-color:var(--input-border-color-hover);transition:border-color 85ms ease-out}.text-input_hds-text-input__input-wrapper__3qg76:focus-within .text-input_hds-text-input__input__BIkQu{border-color:var(--input-border-color-focus);outline:none}.text-input_hds-text-input__2YbWJ.text-input_hds-text-input--invalid__25oHc .text-input_hds-text-input__input__BIkQu{border-color:var(--input-border-color-invalid)}.text-input_hds-text-input__2YbWJ.text-input_hds-text-input--success__28-SV .text-input_hds-text-input__input__BIkQu{border-color:var(--input-border-color-success)}.text-input_hds-text-input__input-wrapper__3qg76:focus-within .text-input_hds-text-input__input__BIkQu:not([readonly]){box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);transform:translateZ(0);transition:85ms ease-out;transition-property:box-shadow,transform}.text-input_hds-text-input__label__15SYz{color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.text-input_hds-text-input--invalid__25oHc .text-input_hds-text-input__label__15SYz{color:var(--label-color-invalid);transition:color 85ms linear}.text-input_hds-text-input__required__2K-Bs{color:var(--color-black-90);display:inline-block;font-size:var(--fontsize-body-xl);line-height:1;margin-left:var(--spacing-2-xs);transform:translateY(var(--spacing-3-xs))}.text-input_hds-text-input__input-wrapper__3qg76{display:flex;position:relative}.text-input_hds-text-input__2YbWJ textarea.text-input_hds-text-input__input__BIkQu{font-family:inherit;height:var(--textarea-height);margin:0;min-height:var(--input-height);overflow:auto;padding:var(--spacing-s);resize:vertical}.text-input_hds-text-input__2YbWJ .text-input_hds-text-input__input__BIkQu::-moz-placeholder{color:var(--placeholder-color);opacity:1}.text-input_hds-text-input__2YbWJ .text-input_hds-text-input__input__BIkQu::placeholder{color:var(--placeholder-color);opacity:1}.text-input_hds-text-input__helper-text__gNPue{color:var(--helper-color-default)}.text-input_hds-text-input__error-text__2Qjmg,.text-input_hds-text-input__helper-text__gNPue{display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);white-space:pre-line}.text-input_hds-text-input__error-text__2Qjmg{color:var(--helper-color-invalid);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.text-input_hds-text-input__error-text__2Qjmg:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__error-text__2Qjmg:before{animation:text-input_fadeIn__2iVIH 85ms ease-out;background:var(--icon-color-invalid);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__success-text__274NH{color:var(--helper-color-success);display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative;white-space:pre-wrap}.text-input_hds-text-input__success-text__274NH:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__success-text__274NH:before{animation:text-input_fadeIn__2iVIH 85ms ease-out;background:var(--helper-color-success);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__info-text__1hF9o{color:var(--helper-color-info);display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.text-input_hds-text-input__info-text__1hF9o:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__info-text__1hF9o:before{animation:text-input_fadeIn__2iVIH 85ms ease-out;background:var(--helper-color-info-icon);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__2YbWJ .text-input_hds-text-input__input__BIkQu[disabled]{background-color:var(--input-background-disabled);border-color:var(--input-border-color-disabled);color:var(--input-color-disabled);cursor:not-allowed}.text-input_hds-text-input__2YbWJ .text-input_hds-text-input__input__BIkQu[readonly]{background-color:transparent;border:0;color:var(--input-color-default);padding:0;-webkit-text-fill-color:var(--input-color-default)}.text-input_hds-text-input__buttons__1eV1P{align-items:center;bottom:0;display:flex;font-size:1rem;justify-content:center;margin-right:calc(var(--spacing-s) - var(--spacing-xs) / 2);position:absolute;right:0;top:0}.text-input_hds-text-input__button__1JeYJ{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;display:flex;font:inherit;outline:none;padding:var(--spacing-xs) calc(var(--spacing-xs) / 2)}.text-input_hds-text-input__button__1JeYJ:focus{outline:var(--outline-width) solid var(--color-focus-outline)}");const o=e=>{let{className:t,style:n}=e;return a.createElement("span",{className:(0,i.c)("RequiredIndicator-module_indicator__Pt7GX text-input_hds-text-input__required__2K-Bs",t),style:n},"*")}},27945:function(e,t,n){"use strict";n.d(t,{S:function(){return m}});var a=n(94578),r=n(52146),i=n(67294),o=n(89060),d=n(7444),s=n(41125),c=n(34300),u=n(96293),l=n(11303),g=n(68201),h={input:"SearchInput-module_input__Addns",hidden:"SearchInput-module_hidden__OcXmJ",button:"SearchInput-module_button__z7NIp search-input_hds-search-input__button__1-cj-",wrapper:"SearchInput-module_wrapper__114JK",root:"SearchInput-module_root__sMwrY",open:"SearchInput-module_open__1zeft",angleIcon:"SearchInput-module_angleIcon__1PdxN",menu:"SearchInput-module_menu__2P8CO",loadingSpinnerContainer:"SearchInput-module_loadingSpinnerContainer__T6ZTc",menuItem:"SearchInput-module_menuItem__zIC_d",highlighted:"SearchInput-module_highlighted__3D7Hh",selected:"SearchInput-module_selected__30K7a",disabled:"SearchInput-module_disabled__akdv5",virtualized:"SearchInput-module_virtualized__xRfea",buttons:"SearchInput-module_buttons__2O_2t search-input_hds-search-input__buttons__3PawT",searchIcon:"SearchInput-module_searchIcon__l1_S4",noToggle:"SearchInput-module_noToggle__2rf7Y",helperText:"SearchInput-module_helperText__2AWSL",loadingSpinner:"SearchInput-module_loadingSpinner__3G_76"};(0,d.s)(".search-input_hds-icon__5eCQs{--icon-size:100%;background-color:currentcolor;display:inline-block;height:var(--icon-size);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:auto;mask-size:auto;width:var(--icon-size)}.search-input_hds-icon__5eCQs.search-input_hds-icon--size-xs__JNXQQ{--icon-size:var(--spacing-layout-2-xs)}.search-input_hds-icon__5eCQs.search-input_hds-icon--size-s__1UrrH{--icon-size:var(--spacing-layout-xs)}.search-input_hds-icon__5eCQs.search-input_hds-icon--size-m__2xJqk{--icon-size:var(--spacing-layout-s)}.search-input_hds-icon__5eCQs.search-input_hds-icon--size-l__9ZoGz{--icon-size:var(--spacing-layout-m)}.search-input_hds-icon__5eCQs.search-input_hds-icon--size-xl__33Ryp{--icon-size:var(--spacing-layout-l)}.search-input_hds-icon--search__1OHPF{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1a8 8 0 11-4.798 14.402l-6.401 6.4-1.591-1.59 6.398-6.4A8 8 0 0115 1zm0 2a6 6 0 100 12 6 6 0 000-12z' fill='currentColor'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1a8 8 0 11-4.798 14.402l-6.401 6.4-1.591-1.59 6.398-6.4A8 8 0 0115 1zm0 2a6 6 0 100 12 6 6 0 000-12z' fill='currentColor'/%3E%3C/svg%3E\")}.search-input_hds-search-input__3yDGf{--border-width:2px;--outline-width:3px;--input-height:56px;--helper-color-default:var(--color-black-60);--input-background-default:var(--color-white);--input-border-color-default:var(--color-black-50);--input-border-color-hover:var(--color-black-90);--input-border-color-focus:var(--color-black-90);--input-color-default:var(--color-black-90);--label-color-default:var(--color-black-90)}.search-input_hds-search-input__label__2XXxI{color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.search-input_hds-search-input__input-wrapper__2SHOr{display:flex;height:100%;position:relative}.search-input_hds-search-input__3yDGf .search-input_hds-search-input__input__3K908{-webkit-appearance:none;background-color:var(--input-background-default);border:var(--border-width) solid var(--input-border-color-default);box-sizing:border-box;color:var(--input-color-default);font-size:1.125em;height:var(--input-height);line-height:normal;padding:0 var(--spacing-s);width:100%}.search-input_hds-search-input__3yDGf .search-input_hds-search-input__input__3K908:hover{border-color:var(--input-border-color-hover);transition:border-color 85ms ease-out}.search-input_hds-search-input__3yDGf .search-input_hds-search-input__input__3K908:focus{border-color:var(--input-border-color-focus);outline:none}.search-input_hds-search-input__3yDGf .search-input_hds-search-input__input__3K908:not([readonly]):focus{outline:var(--outline-width) solid var(--color-focus-outline);transform:translateZ(0)}.search-input_hds-search-input__buttons__3PawT{align-items:center;bottom:0;display:flex;font-size:1rem;justify-content:center;margin-right:calc(var(--spacing-s) - var(--spacing-xs) / 2);position:absolute;right:0;top:0}.search-input_hds-search-input__button__1-cj-{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;color:inherit;color:var(--dropdown-color-default);cursor:pointer;display:flex;font:inherit;outline:none;padding:var(--spacing-xs) calc(var(--spacing-xs) / 2)}.search-input_hds-search-input__buttons__3PawT .search-input_hds-search-input__button__1-cj-:focus{outline:var(--outline-width) solid var(--color-focus-outline)}.search-input_hds-search-input__helper-text__25LCS{color:var(--helper-color-default);display:block;font-size:var(--fontsize-body-m);margin-top:var(--spacing-3-xs)}.SearchInput-module_button__z7NIp.SearchInput-module_hidden__OcXmJ,.SearchInput-module_input__Addns:not(:focus).SearchInput-module_hidden__OcXmJ{border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.SearchInput-module_wrapper__114JK:focus-within{box-shadow:0 0 0 var(--focus-outline-width) var(--focus-outline-color)}.SearchInput-module_root__sMwrY{--border-width:2px;--divider-width:1px;--focus-outline-width:3px;--dropdown-height:var(--spacing-3-xl);--menu-item-height:calc(var(--dropdown-height) - var(--border-width) * 2);--icon-size:var(--spacing-m);--menu-z-index:10;--dropdown-background-default:var(--color-white);--dropdown-background-disabled:var(--color-black-10);--dropdown-border-color-default:var(--color-black-50);--dropdown-border-color-hover:var(--color-black-90);--dropdown-border-color-hover-invalid:var(--color-error-dark);--dropdown-border-color-focus:var(--color-black-90);--dropdown-border-color-invalid:var(--color-error);--dropdown-border-color-disabled:var(--color-black-10);--dropdown-color-default:var(--color-black-90);--dropdown-color-disabled:var(--color-black-40);--focus-outline-color:var(--color-focus-outline);--helper-color-invalid:var(--color-error);--menu-divider-color:var(--color-black-20);--menu-item-background-default:var(--color-white);--menu-item-background-hover:var(--color-bus);--menu-item-background-selected:var(--color-white);--menu-item-background-selected-hover:var(--color-bus);--menu-item-background-disabled:var(--color-white);--menu-item-color-default:var(--color-black-90);--menu-item-color-hover:var(--color-white);--menu-item-color-selected:var(--color-black-90);--menu-item-color-selected-hover:var(--color-white);--menu-item-color-disabled:var(--color-black-40);--menu-item-icon-color-selected:var(--color-white);--menu-item-icon-color-disabled:var(--color-black-40);--multiselect-checkbox-background-selected:var(--color-bus);--multiselect-checkbox-background-disabled:var(--color-black-10);--multiselect-checkbox-border-default:var(--color-black-50);--multiselect-checkbox-border-hover:var(--color-black-90);--multiselect-checkbox-border-disabled:var(--color-black-10);--multiselect-checkbox-color-default:transparent;--multiselect-checkbox-color-selected:var(--color-white);--multiselect-checkbox-color-selected-disabled:var(--color-white);--placeholder-color:var(--color-black-60);position:relative}.SearchInput-module_open__1zeft.SearchInput-module_root__sMwrY .SearchInput-module_angleIcon__1PdxN{transform:rotateX(180deg)}.SearchInput-module_open__1zeft.SearchInput-module_root__sMwrY .SearchInput-module_menu__2P8CO{display:block}.SearchInput-module_root__sMwrY input{font-family:inherit;margin:0;overflow:auto}.SearchInput-module_wrapper__114JK{background-color:var(--dropdown-background-default);border:var(--border-width) solid var(--dropdown-border-color-default);box-sizing:border-box;min-height:var(--dropdown-height);position:relative;width:100%}.SearchInput-module_wrapper__114JK:focus-within{border-color:var(--dropdown-border-color-focus)}.SearchInput-module_wrapper__114JK:hover{border-color:var(--dropdown-border-color-hover)}.SearchInput-module_wrapper__114JK:focus-within,.SearchInput-module_wrapper__114JK:hover{transition:border-color 85ms ease-out}.SearchInput-module_loadingSpinnerContainer__T6ZTc,.SearchInput-module_menu__2P8CO{border:solid var(--dropdown-border-color-focus);border-top-color:var(--menu-divider-color);border-width:var(--divider-width) var(--border-width) var(--border-width);bottom:0;display:none;left:0;list-style:none;margin:0;outline:none;overflow-y:auto;padding:0;position:absolute;transform:translate(calc(var(--border-width) * -1),100%);width:100%;z-index:var(--menu-z-index)}.SearchInput-module_menuItem__zIC_d{align-items:center;background-color:var(--menu-item-background-default);box-sizing:border-box;color:var(--menu-item-color-default);cursor:pointer;display:flex;font-size:var(--fontsize-body-l);justify-content:space-between;line-height:var(--lineheight-m);min-height:var(--menu-item-height);padding:var(--spacing-xs) var(--spacing-s)}.SearchInput-module_highlighted__3D7Hh.SearchInput-module_menuItem__zIC_d{background-color:var(--menu-item-background-hover);color:var(--menu-item-color-hover)}.SearchInput-module_selected__30K7a.SearchInput-module_menuItem__zIC_d{background-color:var(--menu-item-background-selected);color:var(--menu-item-color-selected)}.SearchInput-module_highlighted__3D7Hh.SearchInput-module_selected__30K7a.SearchInput-module_menuItem__zIC_d{background-color:var(--menu-item-background-selected-hover);color:var(--menu-item-color-selected-hover)}.SearchInput-module_disabled__akdv5.SearchInput-module_menuItem__zIC_d{background-color:var(--menu-item-background-disabled);color:var(--menu-item-color-disabled);cursor:not-allowed}.SearchInput-module_virtualized__xRfea.SearchInput-module_menuItem__zIC_d{left:0;position:absolute;top:0;width:100%}.SearchInput-module_root__sMwrY{--helper-color-default:var(--color-black-60)}.SearchInput-module_wrapper__114JK{align-items:center;display:flex}.SearchInput-module_button__z7NIp{color:var(--dropdown-color-default)}.SearchInput-module_button__z7NIp:focus.SearchInput-module_button__z7NIp:focus{outline:3px solid var(--color-focus-outline)}.SearchInput-module_searchIcon__l1_S4{color:var(--dropdown-color-default);display:flex}.SearchInput-module_input__Addns{align-self:stretch;appearance:none;background-color:var(--input-background-default);border:none;box-sizing:border-box;color:var(--input-color-default);font-size:var(--fontsize-body-l);height:var(--menu-item-height);outline:none;padding:0 calc(var(--spacing-l) + var(--icon-size)) 0 0;width:100%}.SearchInput-module_input__Addns:first-child{padding-left:var(--spacing-s)}.SearchInput-module_input__Addns.SearchInput-module_noToggle__2rf7Y{padding-right:var(--spacing-s)}.SearchInput-module_input__Addns::placeholder{color:var(--placeholder-color);line-height:normal}.SearchInput-module_input__Addns:disabled::placeholder{color:var(--dropdown-color-disabled)}.SearchInput-module_menuItem__zIC_d .SearchInput-module_highlighted__3D7Hh{font-weight:700}.SearchInput-module_menuItem__zIC_d .SearchInput-module_highlighted__3D7Hh mark{background:none;color:inherit;font-weight:400}.SearchInput-module_helperText__2AWSL{color:var(--helper-color-default);display:block;font-size:var(--fontsize-body-m);margin-top:var(--spacing-3-xs)}.SearchInput-module_loadingSpinnerContainer__T6ZTc{align-items:center;background-color:var(--menu-item-background-default);display:flex;flex-direction:column;padding:var(--spacing-m) 0;text-align:center}.SearchInput-module_loadingSpinner__3G_76{margin-bottom:var(--spacing-2-xs)}");let f=function(e){function t(){return e.apply(this,arguments)||this}return(0,a.Z)(t,e),t}((0,r.Z)(Error));const p=(e,t,n)=>{const a=(0,i.useRef)(n),[r,o]=(0,i.useState)(!1),d=(0,i.useRef)((()=>null)),[s,c]=(0,i.useState)([]),u=(0,i.useCallback)((()=>{c([]),o(!1),d.current()}),[c,d]);return(0,i.useEffect)((()=>()=>{d.current()}),[d]),(0,i.useEffect)((()=>{a.current=n}),[n]),((e,t,n)=>{const a=(0,i.useCallback)(e,n);(0,i.useEffect)((()=>{const e=setTimeout((()=>{a()}),200);return()=>{clearTimeout(e)}}),[a,200])})((()=>{if("function"!=typeof t||!0===a.current)return;if(o(!0),d.current(),0===e.length)return o(!1),void c([]);const{promise:n,cancel:r}=(e=>{let t=!1;return{promise:new Promise(((n,a)=>{e.then((e=>{if(t)throw new f;n(e)})).catch((e=>{e instanceof f||a(e)}))})),cancel:()=>{t=!0}}})(t(e));d.current=r,n.then((e=>{o(!1),Array.isArray(e)&&"function"==typeof c&&!1===a.current&&c(e)}))}),0,[e,t,c]),{suggestions:s,isLoading:!a.current&&r,clearSuggestions:u}},m=e=>{let{className:t,clearButtonAriaLabel:n="Clear",getSuggestions:a,helperText:r,highlightSuggestions:d=!1,label:f,loadingSpinnerFinishedText:m="Finished loading suggestions",loadingSpinnerText:R="Loading suggestions",onSubmit:b,placeholder:y,searchButtonAriaLabel:v="Search",hideSearchButton:_=!1,style:w,suggestionKeyField:M,suggestionLabelField:x,visibleSuggestions:E=8,onChange:S,value:k}=e;const N=(0,i.useRef)(!1),D=(0,i.useRef)(null),A="userEnterKeyAction",[j,T]=(0,i.useState)(void 0),[L,I]=(0,i.useState)(""),C=k||L,O=()=>j===o.a.stateChangeTypes.InputKeyDownEnter,{suggestions:P,isLoading:z,clearSuggestions:B}=p(C,a,j===o.a.stateChangeTypes.ItemClick||j===A||O()),F=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:3e3;const[n,a]=(0,i.useState)(!1),r=(0,i.useRef)(null);return(0,i.useEffect)((()=>(clearTimeout(r.current),e?r.current=setTimeout((()=>{a(!0)}),t):a(!1),()=>{clearTimeout(r.current)})),[e,t,a]),n}(z,1300),U=void 0!==k&&S,$=e=>{U?S(e):I(e)},H=e=>{var t;const n=null===(t=D.current)||void 0===t?void 0:t.value;b(void 0!==e?e:n),B()},{isOpen:q,getLabelProps:Y,getMenuProps:G,getInputProps:V,getComboboxProps:Q,highlightedIndex:W,getItemProps:K,reset:Z}=(0,o.a)(Object.assign({items:P,onStateChange(e){var t;const{ItemClick:n,FunctionReset:a,InputKeyDownEnter:r}=o.a.stateChangeTypes;if([n,a,r].includes(e.type)){const r=e.type===n&&void 0===e.inputValue,i=r?null===(t=D.current)||void 0===t?void 0:t.value:e.inputValue;if(void 0===i)return;r||$(i),e.type!==a&&H(i),T(e.type)}else T(void 0)},itemToString:e=>e?""+e[x]:""},U&&{inputValue:C}));return(0,i.useEffect)((()=>{N.current?S&&void 0===k&&S(C):N.current=!0}),[S,C]),i.createElement("div",{className:(0,c.c)(h.root,q&&h.open,t),style:w},f&&i.createElement(s.F,Object.assign({label:f},Y())),i.createElement("div",{className:(0,c.c)(h.wrapper),ref:Q().ref},i.createElement("input",Object.assign({},V({onKeyUp:e=>{const t=e.key||e.keyCode,n="Enter"===t||13===t;!O()&&n&&H(),T(n?A:void 0)},onKeyDown:e=>{q&&P.length||"Home"!==e.key&&"End"!==e.key||(e.nativeEvent.preventDownshiftDefault=!0)},onChange:e=>{$(e.target.value)},ref:D,role:Q().role,"aria-expanded":Q()["aria-expanded"],"aria-haspopup":Q()["aria-haspopup"],"aria-owns":Q()["aria-owns"]}),{className:(0,c.c)(h.input),placeholder:y,enterKeyHint:"search"})),i.createElement("div",{className:h.buttons},C.length>0&&i.createElement("button",{type:"button","aria-label":n,className:(0,c.c)(h.button),onClick:()=>{Z(),D.current.focus(),B()}},i.createElement(u.I,{className:h.searchIcon,"aria-hidden":!0})),!_&&i.createElement("button",{type:"button","aria-label":v,className:(0,c.c)(h.button),onClick:()=>H()},i.createElement(l.I,{className:h.searchIcon,"aria-hidden":!0}))),F&&i.createElement("div",{className:h.loadingSpinnerContainer,"aria-hidden":!0},i.createElement(g.L,{loadingText:R,loadingFinishedText:m,small:!0,className:h.loadingSpinner}),R),i.createElement(o.b,{isOptionDisabled:()=>!1,multiselect:!1,open:q&&!F,selectedItem:null,selectedItems:[],highlightValue:d&&C.length>=3&&C,menuStyles:h,options:P,optionKeyField:""+String(M||x),optionLabelField:""+String(x),menuProps:G({style:{maxHeight:o.D*E}}),getItemProps:(e,t,n,a)=>K({item:e,index:t,disabled:a,className:(0,c.c)(h.menuItem,n&&h.selected,W===t&&h.highlighted)})})),r&&i.createElement("div",{className:h.helperText},r))}},32384:function(e,t,n){"use strict";n.d(t,{S:function(){return M}});var a=n(67294),r=n(7444),i=n(34300),o=n(75905),d=n(11078),s=n(80136),c=n(42215),u=n(56924),l=n(44961),g=n(77516),h=n(97640),f=n(17882),p="SideNavigation-module_sideNavigation__3X-9P";(0,r.s)(".SideNavigation-module_sideNavigation__3X-9P{--side-navigation-background-color:var(--color-white);--side-navigation-active-indicator-background-color:var(--color-bus);--side-navigation-icon-size:var(--spacing-m);--side-navigation-level-border-color:var(--color-white);--side-navigation-level-border-color-focus:var(--color-coat-of-arms);--side-navigation-level-border-color-hover:var(--color-black-5);--side-navigation-level-border-width:2px;--side-navigation-level-background-color:var(--color-white);--side-navigation-level-background-color-active:var(--color-black-5);--side-navigation-level-background-color-hover:var(--color-black-5);--side-navigation-level-color:var(--color-black);--side-navigation-level-color-active:var(--color-black);--side-navigation-level-color-hover:var(--color-black);--side-navigation-level-inset:var(--spacing-s);--side-navigation-mobile-menu-border-color:var(--color-black);--side-navigation-mobile-menu-border-width:2px;--side-navigation-mobile-menu-z-index:100;background-color:var(--side-navigation-background-color);box-sizing:border-box;position:relative}@media only screen and (min-width:768px){.SideNavigation-module_sideNavigation__3X-9P{height:100%}}@media only screen and (min-width:768px){.SideNavigation-module_toggleButton__10tXH{display:none}}.SideNavigation-module_mainLevelList__SLZKQ{list-style:none;margin:0;padding:0}@media only screen and (max-width:767.98px){.SideNavigation-module_mainLevelList__SLZKQ{max-height:0;overflow:hidden}.SideNavigation-module_mainLevelList__SLZKQ.SideNavigation-module_open__2QF0h{background-color:var(--side-navigation-background-color);border:var(--side-navigation-mobile-menu-border-width) solid var(--side-navigation-mobile-menu-border-color);max-height:none;will-change:max-height}}@media only screen and (min-width:768px){.SideNavigation-module_mainLevelList__SLZKQ{display:block}}");const m=a.createContext({mobileMenuOpen:!1,defaultOpenMainLevels:void 0,activeParentLevel:void 0,setMobileMenuOpen:()=>{},setActiveParentLevel:()=>{}});(0,r.s)('.MainLevel-module_mainLevel__2QZi_>button{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.MainLevel-module_mainLevel__2QZi_>a,.MainLevel-module_mainLevel__2QZi_>button{align-items:center;background-color:var(--side-navigation-level-background-color);border:var(--side-navigation-level-border-width) solid var(--side-navigation-level-border-color);box-sizing:border-box;color:var(--side-navigation-level-color);display:flex;margin:0;min-height:var(--spacing-2-xl);outline:none;padding:var(--spacing-2-xs) var(--side-navigation-level-inset);text-align:left;text-decoration:none;width:100%}.MainLevel-module_mainLevel__2QZi_>a:hover,.MainLevel-module_mainLevel__2QZi_>button:hover{background-color:var(--side-navigation-level-background-color-hover);border-color:var(--side-navigation-level-border-color-hover);color:var(--side-navigation-level-color-hover)}.MainLevel-module_mainLevel__2QZi_>a:focus,.MainLevel-module_mainLevel__2QZi_>button:focus{border-color:var(--side-navigation-level-border-color-focus)!important}.MainLevel-module_mainLevel__2QZi_>a span,.MainLevel-module_mainLevel__2QZi_>button span{display:flex}.MainLevel-module_active__3IkdI>a,.MainLevel-module_active__3IkdI>button{background-color:var(--side-navigation-level-background-color-active);border-color:var(--side-navigation-level-background-color-active);color:var(--side-navigation-level-color-active);font-weight:600;position:relative}.MainLevel-module_active__3IkdI>a:before,.MainLevel-module_active__3IkdI>button:before{background:var(--side-navigation-active-indicator-background-color);bottom:calc(0px - var(--side-navigation-level-border-width));content:"";display:block;left:calc(0px - var(--side-navigation-level-border-width));position:absolute;top:calc(0px - var(--side-navigation-level-border-width));width:var(--spacing-3-xs)}.MainLevel-module_mainLevel__2QZi_{font-size:var(--fontsize-body-m)}.MainLevel-module_mainLevel__2QZi_>a,.MainLevel-module_mainLevel__2QZi_>button{font-weight:500}.MainLevel-module_mainLevelListMenu__FG6Ed{display:none}.MainLevel-module_mainLevelWithDivider__1knXE:before{border-top:1px solid var(--color-black-20);content:"";display:block;height:1px;margin:var(--spacing-xs) var(--side-navigation-level-inset)}.MainLevel-module_label__uWKJ7,.MainLevel-module_leftIcon__3MvrC{margin-right:var(--spacing-xs)}.MainLevel-module_leftIcon__3MvrC,.MainLevel-module_rightIcon__2D9o7{width:var(--side-navigation-icon-size)}.MainLevel-module_rightIcon__2D9o7{margin-left:auto}.MainLevel-module_mainLevel__2QZi_.MainLevel-module_open__2yWFj .MainLevel-module_mainLevelListMenu__FG6Ed{display:block;list-style:none;padding:0}');const R=e=>{let{openInNewTab:t,openInNewTabAriaLabel:n,openInExternalDomainAriaLabel:a,label:r}=e;const i=t?n||"Avautuu uudessa välilehdessä.":"",o=a||"Siirtyy toiseen sivustoon.";return["."!==r.slice(-1)?r+".":r,i,o].filter((e=>e)).join(" ")},b=e=>{let{icon:t}=e;return a.createElement("span",{className:"MainLevel-module_leftIcon__3MvrC","aria-hidden":!0},t)},y=e=>{let{icon:t,className:n=""}=e;return a.createElement("span",{className:(0,i.c)("MainLevel-module_rightIcon__2D9o7",n),"aria-hidden":!0},t)},v=e=>{let{label:t}=e;return a.createElement("span",{className:"MainLevel-module_label__uWKJ7"},t)},_=e=>{var{active:t,children:n,className:r,href:o,icon:d,id:h,index:f,label:p,withDivider:_,external:w,openInNewTab:M,openInNewTabAriaLabel:x,openInExternalDomainAriaLabel:E,onClick:S,style:k}=e,N=(0,s._)(e,["active","children","className","href","icon","id","index","label","withDivider","external","openInNewTab","openInNewTabAriaLabel","openInExternalDomainAriaLabel","onClick","style"]);const D=h+"-menu",{defaultOpenMainLevels:A,activeParentLevel:j,setActiveParentLevel:T,setMobileMenuOpen:L}=(0,a.useContext)(m),[I,C]=(0,a.useState)(A.includes(f)),[O,P]=(0,a.useState)(!1),z=(0,c.a)(n).map(((e,t)=>(0,a.isValidElement)(e)&&"SubLevel"===e.type.componentName?(0,a.cloneElement)(e,{mainLevelIndex:f,key:t}):null)),B=Boolean(null==z?void 0:z.length),F=e=>{B?C(!I):(T(void 0),L(!1)),S&&S(e)};return(0,a.useEffect)((()=>{const e=j===f;e&&C(!0),P(e)}),[j,f,C,P]),a.createElement("li",{key:h,className:(0,i.c)("MainLevel-module_mainLevel__2QZi_",_&&"MainLevel-module_mainLevelWithDivider__1knXE",t&&"MainLevel-module_active__3IkdI",I&&"MainLevel-module_open__2yWFj",r),style:k},B?a.createElement(a.Fragment,null,a.createElement("button",{type:"button","aria-label":p,"aria-current":O,"aria-expanded":I,id:h,onClick:F},d&&a.createElement(b,{icon:d}),a.createElement(v,{label:p}),B&&a.createElement(y,{icon:I?a.createElement(u.I,{"aria-hidden":!0}):a.createElement(l.I,{"aria-hidden":!0})})),a.createElement("ul",{className:"MainLevel-module_mainLevelListMenu__FG6Ed",id:D,"aria-hidden":!I,"aria-labelledby":h},z)):a.createElement("a",Object.assign({},N,{"aria-current":t?"page":"false","aria-label":w?p+" "+(E||"Siirtyy toiseen sivustoon"):p,id:h,onClick:F,href:o},w&&M&&{target:"_blank",rel:"noopener","aria-label":R({label:p,openInNewTab:M,openInNewTabAriaLabel:x,openInExternalDomainAriaLabel:E})}),d&&a.createElement(b,{icon:d}),a.createElement(v,{label:p}),w&&a.createElement(y,{icon:a.createElement(g.I,{"aria-hidden":!0})})))};_.componentName="MainLevel";(0,r.s)('.SubLevel-module_subLevel__2TvTK>button{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.SubLevel-module_subLevel__2TvTK>a,.SubLevel-module_subLevel__2TvTK>button{align-items:center;background-color:var(--side-navigation-level-background-color);border:var(--side-navigation-level-border-width) solid var(--side-navigation-level-border-color);box-sizing:border-box;color:var(--side-navigation-level-color);display:flex;margin:0;min-height:var(--spacing-2-xl);outline:none;padding:var(--spacing-2-xs) var(--side-navigation-level-inset);text-align:left;text-decoration:none;width:100%}.SubLevel-module_subLevel__2TvTK>a:hover,.SubLevel-module_subLevel__2TvTK>button:hover{background-color:var(--side-navigation-level-background-color-hover);border-color:var(--side-navigation-level-border-color-hover);color:var(--side-navigation-level-color-hover)}.SubLevel-module_subLevel__2TvTK>a:focus,.SubLevel-module_subLevel__2TvTK>button:focus{border-color:var(--side-navigation-level-border-color-focus)!important}.SubLevel-module_subLevel__2TvTK>a span,.SubLevel-module_subLevel__2TvTK>button span{display:flex}.SubLevel-module_active__dtFES>a,.SubLevel-module_active__dtFES>button{background-color:var(--side-navigation-level-background-color-active);border-color:var(--side-navigation-level-background-color-active);color:var(--side-navigation-level-color-active);font-weight:600;position:relative}.SubLevel-module_active__dtFES>a:before,.SubLevel-module_active__dtFES>button:before{background:var(--side-navigation-active-indicator-background-color);bottom:calc(0px - var(--side-navigation-level-border-width));content:"";display:block;left:calc(0px - var(--side-navigation-level-border-width));position:absolute;top:calc(0px - var(--side-navigation-level-border-width));width:var(--spacing-3-xs)}.SubLevel-module_subLevel__2TvTK{font-size:var(--fontsize-body-s)}.SubLevel-module_subLevel__2TvTK>a,.SubLevel-module_subLevel__2TvTK>button{min-height:var(--spacing-xl);padding-bottom:var(--spacing-3-xs);padding-left:calc(var(--side-navigation-level-inset) + var(--spacing-2-xs));padding-top:var(--spacing-3-xs)}');const w=e=>{let{active:t,className:n,href:r,id:o,label:d,mainLevelIndex:s,onClick:c,style:u}=e;const{setActiveParentLevel:l,setMobileMenuOpen:g}=(0,a.useContext)(m);return(0,a.useEffect)((()=>{t&&l(s)}),[t,s,l]),a.createElement("li",{className:(0,i.c)("SubLevel-module_subLevel__2TvTK",t&&"SubLevel-module_active__dtFES",n),style:u},a.createElement("a",{id:o,"aria-current":t?"page":"false",onClick:e=>{g(!1),c&&c(e)},href:r},d))};w.componentName="SubLevel";const M=e=>{let{children:t,className:n,defaultOpenMainLevels:r=[],id:d,ariaLabel:s,style:g,theme:R,toggleButtonLabel:b}=e;const y=a.useRef(null),v=(0,h.u)(p,R),_=d+"-menu",[w,M]=a.useState(),[x,E]=a.useState(!1),S=!((0,o.u)()&&!x),k=(0,c.a)(t),N=k.map(((e,t)=>(0,a.isValidElement)(e)&&"MainLevel"===e.type.componentName?(0,a.cloneElement)(e,{key:t,index:t}):null)),D=k.find((e=>(0,a.isValidElement)(e)&&"SkipLink"===e.type.componentName));return(0,a.useEffect)((()=>{const e=e=>{const t=e.key||e.keyCode;!x||"Escape"!==t&&"Esc"!==t&&27!==t||E(!1)},t=e=>{const t=e.target;x&&!y.current.contains(t)&&E(!1)};return document.addEventListener("click",t),document.addEventListener("focusin",t),document.addEventListener("keyup",e),()=>{document.removeEventListener("click",t),document.removeEventListener("focusin",t),document.removeEventListener("keyup",e)}})),a.createElement(m.Provider,{value:{mobileMenuOpen:x,defaultOpenMainLevels:r,activeParentLevel:w,setMobileMenuOpen:E,setActiveParentLevel:M}},a.createElement("nav",{className:(0,i.c)(p,v,n),id:d,"aria-label":s,ref:y,style:g},D&&D,a.createElement(f.B,{"aria-controls":_,"aria-expanded":x,"aria-haspopup":!0,className:"SideNavigation-module_toggleButton__10tXH",fullWidth:!0,iconRight:x?a.createElement(u.I,{"aria-hidden":!0}):a.createElement(l.I,{"aria-hidden":!0}),onClick:()=>{E(!x)},variant:"secondary",type:"button"},b),S&&a.createElement("ul",Object.assign({},{className:(0,i.c)("SideNavigation-module_mainLevelList__SLZKQ",x&&"SideNavigation-module_open__2QF0h"),"aria-label":b},{id:_}),N)))};M.MainLevel=_,M.SubLevel=w,M.SkipLink=d.S},11078:function(e,t,n){"use strict";n.d(t,{S:function(){return s}});var a=n(67294),r=n(7444),i=n(97640),o=n(34300),d="SkipLink-module_skipLink__1knzF";(0,r.s)(".SkipLink-module_skipLink__1knzF:not(:focus){border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.SkipLink-module_skipLink__1knzF{--background-color:var(--color-white);--height:66px;--inner-outer-spacing:6px;--outline-color:var(--color-focus-outline);--outline-inner-color:var(--color-black-90);--outline-width:3px;--text-color:var(--color-black-90);--top:10px;--left:15px;--width:213px;display:flex;height:1px;position:absolute;top:calc(-1 * (var(--height) + var(--top)));width:1px}@media only screen and (max-width:991px){.SkipLink-module_skipLink__1knzF{--top:2px}}@media only screen and (max-width:767px){.SkipLink-module_skipLink__1knzF{--height:60px}}.SkipLink-module_skipLink__1knzF:focus-visible{outline-offset:0}.SkipLink-module_skipLink__1knzF:focus{align-items:center;background-color:var(--background-color);font-family:var(--font-default);font-weight:500;height:var(--height);justify-content:center;left:var(--left);outline:var(--outline-color) solid var(--outline-width);text-decoration:none;top:var(--top);transition:all .15s ease-in;width:var(--width);z-index:99}.SkipLink-module_skipLink__1knzF:focus>.SkipLink-module_skipLinkLabel__21n5B{align-items:center;color:var(--text-color);display:flex;height:calc(var(--height) - 2 * var(--inner-outer-spacing));justify-content:center;outline:var(--outline-inner-color) solid var(--outline-width);width:calc(var(--width) - 2 * var(--inner-outer-spacing))}");const s=e=>{let{ariaLabel:t,label:n,skipTo:r,theme:s}=e;const c=r.startsWith("#")?r:"#"+r,u=(0,i.u)(d,s);return a.createElement("a",{href:c,"aria-label":t,className:(0,o.c)(d,u)},a.createElement("span",{className:"SkipLink-module_skipLinkLabel__21n5B"},n))};s.componentName="SkipLink"},94671:function(e,t,n){"use strict";n.d(t,{T:function(){return h},a:function(){return m},b:function(){return f},c:function(){return p}});var a=n(67294),r=n(7444),i=n(34300),o=n(97640),d=n(42215),s=n(29928),c=n(12670),u="Tabs-module_scrollButton__3ufhP",l="Tabs-module_tabs__2Ww5F";(0,r.s)('.Tabs-module_scrollButton__3ufhP button{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.Tabs-module_tabs__2Ww5F{--tablist-border-color:var(--color-black-20);--tablist-border-size:1px;--tab-color:var(--color-bus);--tab-font-size:var(--fontsize-body-m);--tab-height:48px;--tab-min-width:148px;--tab-spacing:var(--spacing-s);--tab-active-border-size:5px;--tab-active-border-color:var(--color-bus);--tab-focus-outline-size:2px;--tab-focus-outline-color:var(--color-coat-of-arms)}.Tabs-module_tabs__2Ww5F.Tabs-module_small__1d6Xt{--tab-min-width:0;--tab-font-size:var(--fontsize-body-s);--tab-active-border-size:3px}.Tabs-module_tablistBar__elMv9{display:flex;flex-direction:row}.Tabs-module_scrollButton__3ufhP{align-items:center;color:var(--tab-color);display:flex;justify-content:center;margin-bottom:var(--tablist-border-size);position:relative;width:26px}.Tabs-module_scrollButton__3ufhP:before{background:var(--tablist-border-color);bottom:0;content:"";height:var(--tablist-border-size);position:absolute;width:100%;z-index:100}.Tabs-module_scrollButton__3ufhP button{align-items:center;border:var(--tab-focus-outline-size) solid transparent;border-radius:unset;box-sizing:border-box;display:inline-flex;height:26px;justify-content:center;overflow:hidden;width:100%}.Tabs-module_scrollButton__3ufhP button:focus{border:var(--tab-focus-outline-size) solid var(--tab-focus-outline-color);outline:none}.Tabs-module_tablist__1iuDO{box-sizing:border-box;flex-grow:1;margin-bottom:-1px;overflow-x:hidden;position:relative}.Tabs-module_tablist__1iuDO ul{box-sizing:border-box;list-style:none;margin:0;padding:0;padding:var(--tab-focus-outline-size) 0;white-space:nowrap}.Tabs-module_tab__3oOoX{display:inline-block;margin:0;outline:none;padding:0}.Tabs-module_tab__3oOoX span{align-items:center;box-sizing:border-box;color:var(--tab-color);cursor:pointer;display:flex;font-size:var(--tab-font-size);height:var(--tab-height);justify-content:center;margin:0;min-width:var(--tab-min-width);padding:0;padding-left:var(--tab-spacing);padding-right:var(--tab-spacing);position:relative}.Tabs-module_tab__3oOoX span:before{background:var(--tablist-border-color);bottom:0;content:"";height:var(--tablist-border-size);position:absolute;width:100%;z-index:100}.Tabs-module_tab__3oOoX:focus span{outline:none}.Tabs-module_tab__3oOoX:focus span:after{--size:calc(100% + var(--tab-focus-outline-size) * 2);border:var(--tab-focus-outline-size) solid var(--tab-focus-outline-color);box-sizing:border-box;content:"";height:var(--size);left:0;outline:none;position:absolute;top:calc(-1 * var(--tab-focus-outline-size));width:100%;z-index:200}.Tabs-module_tab__3oOoX.Tabs-module_active__1Ic3B span:before{background-color:var(--tab-active-border-color);bottom:0;content:"";height:var(--tab-active-border-size);position:absolute;width:100%;z-index:100}');const g=a.createContext({activeTab:0,setActiveTab:()=>{},focusedTab:null,setFocusedTab:()=>{}}),h=e=>{let{children:t,className:n,index:r,onClick:o,style:d}=e;const s=(0,a.useRef)(null),{activeTab:c,focusedTab:u,setFocusedTab:l,setActiveTab:h}=(0,a.useContext)(g),f=c===r;return(0,a.useEffect)((()=>{u===r&&s.current.focus({preventScroll:!0})}),[u,r]),a.createElement("li",{role:"tab","aria-selected":f,"aria-controls":"tab-"+r+"-panel",tabIndex:f?0:-1,id:"tab-"+r+"-button",className:(0,i.c)("Tabs-module_tab__3oOoX",f&&"Tabs-module_active__1Ic3B",n),style:d,onClick:()=>{o&&o(),h(r),l(r)},onKeyDown:e=>{const t="Enter"===e.key||13===e.keyCode,n=" "===e.key||32===e.keyCode;(t||n)&&(o&&o(),h(r))},onFocus:e=>{e.preventDefault(),u!==r&&l(r)},ref:s},a.createElement("span",null,t))};h.componentName="Tab";const f=e=>{let{children:t,className:n,style:r={}}=e;const o=(0,a.useRef)(null),l=(0,a.useRef)(null),{focusedTab:h,setFocusedTab:f}=(0,a.useContext)(g),[p,m]=(0,a.useState)(0),[R,b]=(0,a.useState)(null),[y,v]=(0,a.useState)(!0),[_,w]=(0,a.useState)(!0),[M,x]=(0,a.useState)(0),E=(0,d.a)(t).map(((e,t)=>a.isValidElement(e)&&"Tab"===e.type.componentName?a.cloneElement(e,{index:t,key:t}):null)),S=(0,a.useCallback)((()=>{const e=((e,t)=>{if(null!==e){const n=t.children[e];if(null!==n&&n instanceof HTMLElement)return n}return null})(R,o.current);if(null!==e){const t=e.offsetLeft+e.offsetWidth,n=e.offsetLeft,a=t-l.current.offsetWidth;a>0&&(M<a||R===o.current.children.length-1)?x(a):n<M&&x(n)}}),[R,M]),k=(0,a.useCallback)((()=>{const e=o.current;return Array.from(e.children).findIndex((e=>((e,t,n)=>{const a=e,r=t;return a.offsetLeft+a.offsetWidth>r.offsetWidth+n})(e,l.current,M)))}),[M]),N=(0,a.useCallback)((()=>{const e=o.current,t=Array.from(e.children).reverse().findIndex((e=>{return t=M,e.offsetLeft<t;var t}));return t>-1?e.children.length-t-1:-1}),[M]),D=(0,a.useCallback)((()=>{v(-1!==N()),w(-1!==k())}),[N,k]);return(0,a.useEffect)((()=>{const e=Array.from(o.current.children).reduce(((e,t)=>e+t.offsetWidth),0);m(e)}),[t]),(0,a.useEffect)((()=>{b(h)}),[h]),(0,a.useEffect)((()=>(D(),window.addEventListener("resize",D),()=>{window.removeEventListener("resize",D)})),[D]),(0,a.useEffect)((()=>{S()}),[S,R,y,_]),a.createElement("div",{className:(0,i.c)("Tabs-module_tablistBar__elMv9",n),style:r},y&&a.createElement("div",{className:u,"aria-hidden":"true"},a.createElement("button",{type:"button",onClick:()=>{const e=N();e>-1&&b(e)},tabIndex:-1},a.createElement(s.I,null))),a.createElement("div",{className:"Tabs-module_tablist__1iuDO",ref:l},a.createElement("ul",{role:"tablist",ref:o,onKeyDown:e=>{let t=null;"ArrowRight"===e.key&&(t=Math.min(h+1,E.length-1)),"ArrowLeft"===e.key&&(t=Math.max(h-1,0)),null!==t&&f(t)},style:{width:p+"px",transform:M?"translateX("+-1*M+"px)":void 0}},E)),_&&a.createElement("div",{className:u,"aria-hidden":"true"},a.createElement("button",{type:"button",onClick:()=>{const e=k();e>-1&&b(e)},tabIndex:-1},a.createElement(c.I,null))))};f.componentName="TabList";const p=e=>{let{children:t,className:n,index:r,style:i}=e;const{activeTab:o}=(0,a.useContext)(g);return o===r?a.createElement("div",{id:"tab-"+r+"-panel",role:"tabpanel","aria-labelledby":"tab-"+r+"-button",className:n,style:i},t):null};p.componentName="TabPanel";const m=e=>{let{children:t,initiallyActiveTab:n=0,small:r=!1,theme:s}=e;const[c,u]=(0,a.useState)(n),[h,f]=(0,a.useState)(null),p=(0,o.u)(l,s),m=(0,d.g)(t),R=m.filter((e=>a.isValidElement(e)&&"TabList"===e.type.componentName)),b=m.filter((e=>a.isValidElement(e)&&"TabPanel"===e.type.componentName)).map(((e,t)=>a.isValidElement(e)?a.cloneElement(e,{index:t,key:t}):e));return a.createElement(g.Provider,{value:{activeTab:c,setActiveTab:u,focusedTab:h,setFocusedTab:f}},a.createElement("div",{className:(0,i.c)(l,r&&"Tabs-module_small__1d6Xt",s&&p)},R,b))};m.TabList=f,m.TabPanel=p,m.Tab=h},45422:function(e,t,n){"use strict";n.d(t,{T:function(){return s}});var a=n(67294),r=n(46458),i=n(7444),o=n(89836),d=n(34300);(0,i.s)(".Tooltip-module_button__2x9m0{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.Tooltip-module_root__1Yo9t{--button-focus-outline-width:3px;--button-focus-outline-color:var(--color-coat-of-arms);--tooltip-arrow-size:8px;--tooltip-background:var(--color-coat-of-arms-light);--tooltip-border-color:var(--color-coat-of-arms);--tooltip-spacing-default:var(--spacing-s);--tooltip-spacing-small:var(--spacing-3-xs) var(--spacing-2-xs)}.Tooltip-module_tooltip__3x8S8{background-color:var(--tooltip-background);font-size:var(--fontsize-body-s);font-weight:400;line-height:24px;max-width:21.875rem;padding:var(--tooltip-spacing-default);z-index:1000}.Tooltip-module_boxShadow__3IzE-{box-shadow:var(--box-shadow-s)}.Tooltip-module_small__29mxd{padding:var(--tooltip-spacing-small)}.Tooltip-module_button__2x9m0>span{display:flex}.Tooltip-module_button__2x9m0:focus{box-shadow:0 0 0 var(--button-focus-outline-width) var(--button-focus-outline-color);outline:none}.Tooltip-module_tooltip__3x8S8[data-popper-placement^=bottom]{border-top:8px solid var(--tooltip-border-color)}.Tooltip-module_tooltip__3x8S8[data-popper-placement^=top]{border-bottom:8px solid var(--tooltip-border-color)}.Tooltip-module_tooltip__3x8S8[data-popper-placement^=left]{border-right:8px solid var(--tooltip-border-color)}.Tooltip-module_tooltip__3x8S8[data-popper-placement^=right]{border-left:8px solid var(--tooltip-border-color)}.Tooltip-module_tooltip__3x8S8 .Tooltip-module_arrow__210Rd{position:absolute}.Tooltip-module_tooltip__3x8S8[data-popper-placement^=bottom] .Tooltip-module_arrow__210Rd{border:var(--tooltip-arrow-size) solid transparent;border-bottom:var(--tooltip-arrow-size) solid var(--tooltip-border-color);top:calc(-1 * var(--tooltip-spacing-default) - var(--tooltip-arrow-size))}.Tooltip-module_tooltip__3x8S8[data-popper-placement^=top] .Tooltip-module_arrow__210Rd{border:var(--tooltip-arrow-size) solid transparent;border-top:var(--tooltip-arrow-size) solid var(--tooltip-border-color);bottom:calc(-1 * var(--tooltip-spacing-default) - var(--tooltip-arrow-size))}.Tooltip-module_tooltip__3x8S8[data-popper-placement^=left] .Tooltip-module_arrow__210Rd{border:var(--tooltip-arrow-size) solid transparent;border-left:var(--tooltip-arrow-size) solid var(--tooltip-border-color);right:calc(-1 * var(--tooltip-spacing-default) - var(--tooltip-arrow-size))}.Tooltip-module_tooltip__3x8S8[data-popper-placement^=right] .Tooltip-module_arrow__210Rd{border:var(--tooltip-arrow-size) solid transparent;border-right:var(--tooltip-arrow-size) solid var(--tooltip-border-color);left:calc(-1 * var(--tooltip-spacing-default) - var(--tooltip-arrow-size))}");const s=e=>{let{boxShadow:t=!1,children:n,placement:i="auto",small:s=!1,buttonLabel:c="Tooltip",tooltipLabel:u="Tooltip",className:l,buttonClassName:g,tooltipClassName:h}=e;const[f,p]=(0,a.useState)(!1),m=(0,a.useRef)(null),R=(0,a.useRef)(null),[b,y]=(0,a.useState)(null),{styles:v,attributes:_,forceUpdate:w}=(0,r.D)(m.current,R.current,{placement:i,modifiers:[{name:"arrow",options:{element:b}},{name:"offset",options:{offset:[0,10]}}]});return(0,a.useEffect)((()=>{null!==w&&!0===f&&w()}),[f,w]),(0,a.useEffect)((()=>{const e=e=>{const t=e.key||e.keyCode;!f||"Escape"!==t&&"Esc"!==t&&27!==t||p(!1)},t=e=>{const t=e.target;!f||m.current.contains(t)||R.current.contains(t)||p(!1)};return document.addEventListener("keyup",e),document.addEventListener("click",t),()=>{document.removeEventListener("keyup",e),document.removeEventListener("click",t)}})),a.createElement("div",{className:(0,d.c)("Tooltip-module_root__1Yo9t",l)},a.createElement("button",{ref:m,type:"button",className:(0,d.c)("Tooltip-module_button__2x9m0",g),title:c,"aria-label":c,"aria-expanded":f,onClick:()=>{p(!f)}},a.createElement("span",{"aria-hidden":"true"},a.createElement(o.I,null))),f&&a.createElement("section",Object.assign({"aria-label":u,ref:R,className:(0,d.c)("Tooltip-module_tooltip__3x8S8",s&&"Tooltip-module_small__29mxd",t&&"Tooltip-module_boxShadow__3IzE-",h),style:v.popper},_.popper),n,a.createElement("div",Object.assign({ref:y,className:"Tooltip-module_arrow__210Rd",style:v.arrow},_.arrow))))}},26917:function(e,t,n){"use strict";n.d(t,{a:function(){return a},c:function(){return r}});var a="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:void 0!==n.g?n.g:"undefined"!=typeof self?self:{};function r(e,t,n){return e(n={path:t,exports:{},require:function(e,t){return function(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}(null==t&&n.path)}},n.exports),n.exports}},34300:function(e,t,n){"use strict";n.d(t,{c:function(){return i},s:function(){return o}});const a={}.hasOwnProperty;function r(e){const t=typeof e;return e?"string"===t||"number"===t?e:Array.isArray(e)?e.length?e.map((e=>r(e))).filter(Boolean).join(" "):null:"object"===t?function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;if(e.toString!==Object.prototype.toString&&!e.toString.toString().includes("[native code]"))return e.toString();const n=Object.assign({},e);return t&&Object.keys(t).filter((t=>!!e[t])).forEach((e=>{n[t[e]]=!0})),Object.keys(n).filter((e=>a.call(n,e)&&!!n[e])).join(" ")}(e,this):null:null}var i=function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return t.map(r).filter(Boolean).join(" ")};const o=e=>{const t=r.bind(e);return function(){for(var e=arguments.length,n=new Array(e),a=0;a<e;a++)n[a]=arguments[a];return n.map(t).filter(Boolean).join(" ")}}},42215:function(e,t,n){"use strict";n.d(t,{a:function(){return x},b:function(){return E},g:function(){return S}});var a=n(15785),r=n(67294),i=n(26917),o=9007199254740991,d="[object Arguments]",s="[object Function]",c="[object GeneratorFunction]",u="object"==typeof i.a&&i.a&&i.a.Object===Object&&i.a,l="object"==typeof self&&self&&self.Object===Object&&self,g=u||l||Function("return this")();function h(e,t){for(var n=-1,a=t.length,r=e.length;++n<a;)e[r+n]=t[n];return e}var f=Object.prototype,p=f.hasOwnProperty,m=f.toString,R=g.Symbol,b=f.propertyIsEnumerable,y=R?R.isConcatSpreadable:void 0;function v(e,t,n,a,r){var i=-1,o=e.length;for(n||(n=_),r||(r=[]);++i<o;){var d=e[i];t>0&&n(d)?t>1?v(d,t-1,n,a,r):h(r,d):a||(r[r.length]=d)}return r}function _(e){return w(e)||function(e){return function(e){return function(e){return!!e&&"object"==typeof e}(e)&&function(e){return null!=e&&function(e){return"number"==typeof e&&e>-1&&e%1==0&&e<=o}(e.length)&&!function(e){var t=function(e){var t=typeof e;return!!e&&("object"==t||"function"==t)}(e)?m.call(e):"";return t==s||t==c}(e)}(e)}(e)&&p.call(e,"callee")&&(!b.call(e,"callee")||m.call(e)==d)}(e)||!!(y&&e&&e[y])}var w=Array.isArray,M=function(e){return e&&e.length?v(e,1):[]};const x=e=>void 0===e?[]:Array.isArray(e)?e:[e],E=(e,t)=>{const n=(0,a.Z)(x(e)),i=n.findIndex((e=>{var n;return(0,r.isValidElement)(e)&&(null===(n=e.type)||void 0===n?void 0:n.componentName)===t}));return[i>=0?n.splice(i,1):[],n]},S=e=>{const t=(0,a.Z)(x(e)),n=1===t.length&&r.isValidElement(t[0])&&Boolean(t[0].props.children)&&(r.isValidElement(t[0].props.children)||Array.isArray(t[0].props.children));return M(n&&r.isValidElement(t[0])?t[0].props.children:t)}},7444:function(e,t,n){"use strict";function a(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&a.firstChild?a.insertBefore(r,a.firstChild):a.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}n.d(t,{s:function(){return a}})},80136:function(e,t,n){"use strict";function a(e,t){var n={};for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&t.indexOf(a)<0&&(n[a]=e[a]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(a=Object.getOwnPropertySymbols(e);r<a.length;r++)t.indexOf(a[r])<0&&Object.prototype.propertyIsEnumerable.call(e,a[r])&&(n[a[r]]=e[a[r]])}return n}function r(e,t,n,a){return new(n||(n=Promise))((function(r,i){function o(e){try{s(a.next(e))}catch(e){i(e)}}function d(e){try{s(a.throw(e))}catch(e){i(e)}}function s(e){var t;e.done?r(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(o,d)}s((a=a.apply(e,t||[])).next())}))}n.d(t,{_:function(){return a},a:function(){return r}}),"function"==typeof SuppressedError&&SuppressedError},42858:function(e,t,n){"use strict";n.d(t,{a:function(){return s},g:function(){return c},u:function(){return d}});var a=n(67294);const r={xs:320,s:576,m:768,l:992,xl:1248},i=()=>"undefined"!=typeof window&&window.innerWidth?window.innerWidth:void 0,o=e=>{const[t,n]=(0,a.useState)(!1),r=(0,a.useRef)(t);return(0,a.useEffect)((()=>{const t=()=>{var t;t=e(),r.current!==t&&(r.current=t,n(t))};return window.addEventListener("resize",t),t(),()=>window.removeEventListener("resize",t)}),[]),t},d=e=>o((()=>{return t=r[e],void 0!==(n=i())&&n<t||!1;var t,n})),s=e=>o((()=>{return t=r[e],void 0!==(n=i())&&n>=t||!1;var t,n})),c=()=>{let e,t;const n=i(),a=Object.entries(r);for(;[e,t]=a.pop();)if(t<n)return e;return null}},75905:function(e,t,n){"use strict";n.d(t,{u:function(){return r}});var a=n(67294);const r=()=>{const[e,t]=(0,a.useState)(!1);return(0,a.useEffect)((()=>{const e=()=>t("undefined"!=typeof window&&window.innerWidth<768||!1);return window.addEventListener("resize",e),e(),()=>window.removeEventListener("resize",e)}),[]),e}},97640:function(e,t,n){"use strict";n.d(t,{a:function(){return d},u:function(){return s}});var a=n(15785),r=n(67294),i=n(5871),o=n.n(i);const d="undefined"!=typeof window&&window.document?r.useLayoutEffect:r.useEffect,s=(e,t)=>{const n=t&&"string"!=typeof t,i=(0,r.useRef)(n?o()("custom-theme-"):"").current;return d((()=>{n&&((e,t,n)=>{if("undefined"==typeof window)return;const r=t=>{var a;return null===(a=t.selectorText)||void 0===a?void 0:a.includes(e+"."+n)};try{let i=(0,a.Z)(document.styleSheets).findIndex((t=>{try{return(0,a.Z)(t.cssRules).findIndex((t=>{var n;return null===(n=t.selectorText)||void 0===n?void 0:n.includes(e)}))>=0}catch(e){return!1}}));if(-1===i){const e=document.createElement("style");document.head.appendChild(e),i=document.styleSheets.length-1}const o=document.styleSheets[i],d=o.cssRules;let s=(0,a.Z)(d).findIndex(r);-1===s&&(o.insertRule("."+e+"."+n+" { content: '' }",d.length),s=(0,a.Z)(d).findIndex(r));const c=d[s];Object.entries(t).forEach((e=>{let[t,n]=e;return c.style.setProperty(t,n)}))}catch(t){console.warn('Could not find the stylesheet to update with the "'+e+'" selector!')}})(e&&e.split(" ")[0],t,i)}),[e,t,i,n]),i}},85418:function(e,t,n){t.components={"component---src-docs-404-mdx":()=>n.e(3877).then(n.bind(n,5217)),"component---src-docs-about-accessibility-hds-accessibility-mdx":()=>n.e(8624).then(n.bind(n,32896)),"component---src-docs-about-accessibility-statement-mdx":()=>n.e(773).then(n.bind(n,12822)),"component---src-docs-about-index-mdx":()=>n.e(1323).then(n.bind(n,34646)),"component---src-docs-about-releases-mdx":()=>n.e(6496).then(n.bind(n,56151)),"component---src-docs-about-resources-mdx":()=>n.e(4984).then(n.bind(n,39441)),"component---src-docs-about-this-is-hds-index-jsx":()=>Promise.all([n.e(532),n.e(6978),n.e(8541),n.e(9677)]).then(n.bind(n,85442)),"component---src-docs-components-accordion-accessibility-mdx":()=>Promise.all([n.e(532),n.e(4602)]).then(n.bind(n,62784)),"component---src-docs-components-accordion-code-mdx":()=>Promise.all([n.e(532),n.e(4408),n.e(2786)]).then(n.bind(n,66047)),"component---src-docs-components-accordion-customisation-mdx":()=>Promise.all([n.e(532),n.e(2506)]).then(n.bind(n,3283)),"component---src-docs-components-accordion-index-mdx":()=>Promise.all([n.e(532),n.e(4408),n.e(4918)]).then(n.bind(n,56037)),"component---src-docs-components-accordion-tabs-mdx":()=>Promise.all([n.e(532),n.e(7407)]).then(n.bind(n,81074)),"component---src-docs-components-breadcrumb-accessibility-mdx":()=>Promise.all([n.e(532),n.e(6064)]).then(n.bind(n,42333)),"component---src-docs-components-breadcrumb-code-mdx":()=>Promise.all([n.e(532),n.e(6448)]).then(n.bind(n,16664)),"component---src-docs-components-breadcrumb-customisation-mdx":()=>Promise.all([n.e(532),n.e(761)]).then(n.bind(n,83498)),"component---src-docs-components-breadcrumb-index-mdx":()=>Promise.all([n.e(532),n.e(8726)]).then(n.bind(n,38192)),"component---src-docs-components-breadcrumb-tabs-mdx":()=>Promise.all([n.e(532),n.e(2291)]).then(n.bind(n,50275)),"component---src-docs-components-buttons-accessibility-mdx":()=>Promise.all([n.e(532),n.e(8863)]).then(n.bind(n,29626)),"component---src-docs-components-buttons-code-mdx":()=>Promise.all([n.e(532),n.e(7685)]).then(n.bind(n,23885)),"component---src-docs-components-buttons-customisation-mdx":()=>Promise.all([n.e(532),n.e(6408)]).then(n.bind(n,91264)),"component---src-docs-components-buttons-index-mdx":()=>Promise.all([n.e(532),n.e(8087)]).then(n.bind(n,30996)),"component---src-docs-components-buttons-tabs-mdx":()=>Promise.all([n.e(532),n.e(3223)]).then(n.bind(n,1862)),"component---src-docs-components-card-accessibility-mdx":()=>Promise.all([n.e(532),n.e(9787)]).then(n.bind(n,84545)),"component---src-docs-components-card-code-mdx":()=>Promise.all([n.e(532),n.e(5111)]).then(n.bind(n,17572)),"component---src-docs-components-card-customisation-mdx":()=>Promise.all([n.e(532),n.e(6351)]).then(n.bind(n,77482)),"component---src-docs-components-card-index-mdx":()=>Promise.all([n.e(532),n.e(5203)]).then(n.bind(n,61909)),"component---src-docs-components-card-tabs-mdx":()=>Promise.all([n.e(532),n.e(8247)]).then(n.bind(n,9256)),"component---src-docs-components-checkbox-accessibility-mdx":()=>Promise.all([n.e(532),n.e(1125)]).then(n.bind(n,13796)),"component---src-docs-components-checkbox-code-mdx":()=>Promise.all([n.e(532),n.e(399)]).then(n.bind(n,97452)),"component---src-docs-components-checkbox-customisation-mdx":()=>Promise.all([n.e(532),n.e(4782)]).then(n.bind(n,21330)),"component---src-docs-components-checkbox-index-mdx":()=>Promise.all([n.e(532),n.e(795)]).then(n.bind(n,99351)),"component---src-docs-components-checkbox-tabs-mdx":()=>Promise.all([n.e(532),n.e(8492)]).then(n.bind(n,23285)),"component---src-docs-components-cookie-consent-accessibility-mdx":()=>Promise.all([n.e(532),n.e(2798)]).then(n.bind(n,44665)),"component---src-docs-components-cookie-consent-api-mdx":()=>Promise.all([n.e(532),n.e(9235)]).then(n.bind(n,55503)),"component---src-docs-components-cookie-consent-code-mdx":()=>Promise.all([n.e(532),n.e(9379)]).then(n.bind(n,65587)),"component---src-docs-components-cookie-consent-index-mdx":()=>Promise.all([n.e(532),n.e(9805)]).then(n.bind(n,44108)),"component---src-docs-components-cookie-consent-tabs-mdx":()=>Promise.all([n.e(532),n.e(2166)]).then(n.bind(n,43161)),"component---src-docs-components-date-input-accessibility-mdx":()=>Promise.all([n.e(532),n.e(5407)]).then(n.bind(n,23744)),"component---src-docs-components-date-input-code-mdx":()=>Promise.all([n.e(532),n.e(6573),n.e(1969)]).then(n.bind(n,65873)),"component---src-docs-components-date-input-index-mdx":()=>Promise.all([n.e(532),n.e(6573),n.e(7390)]).then(n.bind(n,76510)),"component---src-docs-components-date-input-tabs-mdx":()=>Promise.all([n.e(532),n.e(2761)]).then(n.bind(n,94474)),"component---src-docs-components-dialog-accessibility-mdx":()=>Promise.all([n.e(532),n.e(9697)]).then(n.bind(n,20874)),"component---src-docs-components-dialog-code-mdx":()=>Promise.all([n.e(532),n.e(4393)]).then(n.bind(n,62172)),"component---src-docs-components-dialog-customisation-mdx":()=>Promise.all([n.e(532),n.e(2395)]).then(n.bind(n,37711)),"component---src-docs-components-dialog-index-mdx":()=>Promise.all([n.e(532),n.e(7056)]).then(n.bind(n,1542)),"component---src-docs-components-dialog-tabs-mdx":()=>Promise.all([n.e(532),n.e(6043)]).then(n.bind(n,65958)),"component---src-docs-components-dropdown-accessibility-mdx":()=>Promise.all([n.e(532),n.e(5706)]).then(n.bind(n,86314)),"component---src-docs-components-dropdown-code-mdx":()=>Promise.all([n.e(532),n.e(4408),n.e(930),n.e(8644)]).then(n.bind(n,53598)),"component---src-docs-components-dropdown-customisation-mdx":()=>Promise.all([n.e(532),n.e(4408),n.e(1332)]).then(n.bind(n,20489)),"component---src-docs-components-dropdown-index-mdx":()=>Promise.all([n.e(532),n.e(4408),n.e(930),n.e(7102)]).then(n.bind(n,11083)),"component---src-docs-components-dropdown-tabs-mdx":()=>Promise.all([n.e(532),n.e(6046)]).then(n.bind(n,13573)),"component---src-docs-components-fieldset-accessibility-mdx":()=>Promise.all([n.e(532),n.e(5574)]).then(n.bind(n,27483)),"component---src-docs-components-fieldset-code-mdx":()=>Promise.all([n.e(532),n.e(9065)]).then(n.bind(n,92494)),"component---src-docs-components-fieldset-index-mdx":()=>Promise.all([n.e(532),n.e(9098)]).then(n.bind(n,91950)),"component---src-docs-components-fieldset-tabs-mdx":()=>Promise.all([n.e(532),n.e(9933)]).then(n.bind(n,73831)),"component---src-docs-components-file-input-accessibility-mdx":()=>Promise.all([n.e(532),n.e(9166)]).then(n.bind(n,35075)),"component---src-docs-components-file-input-code-mdx":()=>Promise.all([n.e(532),n.e(1966)]).then(n.bind(n,78045)),"component---src-docs-components-file-input-index-mdx":()=>Promise.all([n.e(532),n.e(5189)]).then(n.bind(n,71366)),"component---src-docs-components-file-input-security-mdx":()=>Promise.all([n.e(532),n.e(6958)]).then(n.bind(n,90078)),"component---src-docs-components-file-input-tabs-mdx":()=>Promise.all([n.e(532),n.e(2965)]).then(n.bind(n,91388)),"component---src-docs-components-footer-accessibility-mdx":()=>Promise.all([n.e(532),n.e(9245)]).then(n.bind(n,1955)),"component---src-docs-components-footer-code-mdx":()=>Promise.all([n.e(532),n.e(7586)]).then(n.bind(n,63696)),"component---src-docs-components-footer-customisation-mdx":()=>Promise.all([n.e(532),n.e(7445)]).then(n.bind(n,39338)),"component---src-docs-components-footer-index-mdx":()=>Promise.all([n.e(532),n.e(1441)]).then(n.bind(n,55646)),"component---src-docs-components-footer-tabs-mdx":()=>Promise.all([n.e(532),n.e(4618)]).then(n.bind(n,68329)),"component---src-docs-components-header-accessibility-mdx":()=>Promise.all([n.e(532),n.e(8735)]).then(n.bind(n,12307)),"component---src-docs-components-header-code-mdx":()=>Promise.all([n.e(532),n.e(3524)]).then(n.bind(n,31729)),"component---src-docs-components-header-index-mdx":()=>Promise.all([n.e(532),n.e(5117)]).then(n.bind(n,78536)),"component---src-docs-components-header-tabs-mdx":()=>Promise.all([n.e(532),n.e(5387)]).then(n.bind(n,11690)),"component---src-docs-components-hero-accessibility-mdx":()=>Promise.all([n.e(532),n.e(1645)]).then(n.bind(n,91982)),"component---src-docs-components-hero-code-mdx":()=>Promise.all([n.e(532),n.e(9745)]).then(n.bind(n,96716)),"component---src-docs-components-hero-customisation-mdx":()=>Promise.all([n.e(532),n.e(750)]).then(n.bind(n,26436)),"component---src-docs-components-hero-index-mdx":()=>Promise.all([n.e(532),n.e(4365)]).then(n.bind(n,56097)),"component---src-docs-components-hero-tabs-mdx":()=>Promise.all([n.e(532),n.e(9598)]).then(n.bind(n,10857)),"component---src-docs-components-highlight-accessibility-mdx":()=>Promise.all([n.e(532),n.e(9153)]).then(n.bind(n,56474)),"component---src-docs-components-highlight-code-mdx":()=>Promise.all([n.e(532),n.e(963)]).then(n.bind(n,36811)),"component---src-docs-components-highlight-customisation-mdx":()=>Promise.all([n.e(532),n.e(7587)]).then(n.bind(n,13426)),"component---src-docs-components-highlight-index-mdx":()=>Promise.all([n.e(532),n.e(6497)]).then(n.bind(n,43591)),"component---src-docs-components-highlight-tabs-mdx":()=>Promise.all([n.e(532),n.e(7553)]).then(n.bind(n,90560)),"component---src-docs-components-icon-accessibility-mdx":()=>Promise.all([n.e(532),n.e(9922)]).then(n.bind(n,34759)),"component---src-docs-components-icon-code-mdx":()=>Promise.all([n.e(532),n.e(733)]).then(n.bind(n,61110)),"component---src-docs-components-icon-customisation-mdx":()=>Promise.all([n.e(532),n.e(6987)]).then(n.bind(n,52076)),"component---src-docs-components-icon-index-mdx":()=>Promise.all([n.e(532),n.e(3528)]).then(n.bind(n,49396)),"component---src-docs-components-icon-tabs-mdx":()=>Promise.all([n.e(532),n.e(623)]).then(n.bind(n,68601)),"component---src-docs-components-index-mdx":()=>Promise.all([n.e(532),n.e(348)]).then(n.bind(n,64208)),"component---src-docs-components-koros-accessibility-mdx":()=>Promise.all([n.e(532),n.e(3429)]).then(n.bind(n,58625)),"component---src-docs-components-koros-code-mdx":()=>Promise.all([n.e(532),n.e(1779)]).then(n.bind(n,85824)),"component---src-docs-components-koros-customisation-mdx":()=>Promise.all([n.e(532),n.e(2151)]).then(n.bind(n,45190)),"component---src-docs-components-koros-index-mdx":()=>Promise.all([n.e(532),n.e(9047)]).then(n.bind(n,3485)),"component---src-docs-components-koros-tabs-mdx":()=>Promise.all([n.e(532),n.e(8365)]).then(n.bind(n,90203)),"component---src-docs-components-link-accessibility-mdx":()=>Promise.all([n.e(532),n.e(5684)]).then(n.bind(n,86912)),"component---src-docs-components-link-code-mdx":()=>Promise.all([n.e(532),n.e(9416)]).then(n.bind(n,63909)),"component---src-docs-components-link-index-mdx":()=>Promise.all([n.e(532),n.e(4592)]).then(n.bind(n,83479)),"component---src-docs-components-link-tabs-mdx":()=>Promise.all([n.e(532),n.e(9195)]).then(n.bind(n,34517)),"component---src-docs-components-linkbox-accessibility-mdx":()=>Promise.all([n.e(532),n.e(5490)]).then(n.bind(n,64206)),"component---src-docs-components-linkbox-code-mdx":()=>Promise.all([n.e(532),n.e(4095)]).then(n.bind(n,94042)),"component---src-docs-components-linkbox-index-mdx":()=>Promise.all([n.e(532),n.e(5394)]).then(n.bind(n,55754)),"component---src-docs-components-linkbox-tabs-mdx":()=>Promise.all([n.e(532),n.e(3676)]).then(n.bind(n,88144)),"component---src-docs-components-loading-spinner-accessibility-mdx":()=>Promise.all([n.e(532),n.e(328)]).then(n.bind(n,68820)),"component---src-docs-components-loading-spinner-code-mdx":()=>Promise.all([n.e(532),n.e(9711)]).then(n.bind(n,32031)),"component---src-docs-components-loading-spinner-customisation-mdx":()=>Promise.all([n.e(532),n.e(6145)]).then(n.bind(n,67041)),"component---src-docs-components-loading-spinner-index-mdx":()=>Promise.all([n.e(532),n.e(6260)]).then(n.bind(n,31947)),"component---src-docs-components-loading-spinner-tabs-mdx":()=>Promise.all([n.e(532),n.e(3776)]).then(n.bind(n,24055)),"component---src-docs-components-logo-accessibility-mdx":()=>Promise.all([n.e(532),n.e(9559)]).then(n.bind(n,72618)),"component---src-docs-components-logo-code-mdx":()=>Promise.all([n.e(532),n.e(8595)]).then(n.bind(n,96888)),"component---src-docs-components-logo-customisation-mdx":()=>Promise.all([n.e(532),n.e(8751)]).then(n.bind(n,94831)),"component---src-docs-components-logo-index-mdx":()=>Promise.all([n.e(532),n.e(689)]).then(n.bind(n,68701)),"component---src-docs-components-logo-tabs-mdx":()=>Promise.all([n.e(532),n.e(571)]).then(n.bind(n,99701)),"component---src-docs-components-notification-accessibility-mdx":()=>Promise.all([n.e(532),n.e(4544)]).then(n.bind(n,76888)),"component---src-docs-components-notification-code-mdx":()=>Promise.all([n.e(532),n.e(7922)]).then(n.bind(n,3037)),"component---src-docs-components-notification-index-mdx":()=>Promise.all([n.e(532),n.e(7557)]).then(n.bind(n,41542)),"component---src-docs-components-notification-tabs-mdx":()=>Promise.all([n.e(532),n.e(965)]).then(n.bind(n,93204)),"component---src-docs-components-number-input-accessibility-mdx":()=>Promise.all([n.e(532),n.e(4428)]).then(n.bind(n,4965)),"component---src-docs-components-number-input-code-mdx":()=>Promise.all([n.e(532),n.e(4910)]).then(n.bind(n,48564)),"component---src-docs-components-number-input-index-mdx":()=>Promise.all([n.e(532),n.e(4929)]).then(n.bind(n,55297)),"component---src-docs-components-number-input-tabs-mdx":()=>Promise.all([n.e(532),n.e(198)]).then(n.bind(n,11757)),"component---src-docs-components-pagination-accessibility-mdx":()=>Promise.all([n.e(532),n.e(9992)]).then(n.bind(n,92931)),"component---src-docs-components-pagination-code-mdx":()=>Promise.all([n.e(532),n.e(2707),n.e(8690)]).then(n.bind(n,4602)),"component---src-docs-components-pagination-customisation-mdx":()=>Promise.all([n.e(532),n.e(2707),n.e(3098)]).then(n.bind(n,11119)),"component---src-docs-components-pagination-index-mdx":()=>Promise.all([n.e(532),n.e(2707),n.e(9708)]).then(n.bind(n,12119)),"component---src-docs-components-pagination-tabs-mdx":()=>Promise.all([n.e(532),n.e(3906)]).then(n.bind(n,406)),"component---src-docs-components-password-input-accessibility-mdx":()=>Promise.all([n.e(532),n.e(4763)]).then(n.bind(n,22677)),"component---src-docs-components-password-input-code-mdx":()=>Promise.all([n.e(532),n.e(5467)]).then(n.bind(n,5485)),"component---src-docs-components-password-input-index-mdx":()=>Promise.all([n.e(532),n.e(2629)]).then(n.bind(n,57220)),"component---src-docs-components-password-input-security-mdx":()=>Promise.all([n.e(532),n.e(2783)]).then(n.bind(n,37386)),"component---src-docs-components-password-input-tabs-mdx":()=>Promise.all([n.e(532),n.e(7187)]).then(n.bind(n,54716)),"component---src-docs-components-phone-input-accessibility-mdx":()=>Promise.all([n.e(532),n.e(2981)]).then(n.bind(n,86281)),"component---src-docs-components-phone-input-code-mdx":()=>Promise.all([n.e(532),n.e(4408),n.e(930),n.e(488)]).then(n.bind(n,74176)),"component---src-docs-components-phone-input-index-mdx":()=>Promise.all([n.e(532),n.e(4408),n.e(930),n.e(5166)]).then(n.bind(n,10324)),"component---src-docs-components-phone-input-tabs-mdx":()=>Promise.all([n.e(532),n.e(7002)]).then(n.bind(n,93998)),"component---src-docs-components-radio-button-accessibility-mdx":()=>Promise.all([n.e(532),n.e(2105)]).then(n.bind(n,31643)),"component---src-docs-components-radio-button-code-mdx":()=>Promise.all([n.e(532),n.e(3154)]).then(n.bind(n,13216)),"component---src-docs-components-radio-button-customisation-mdx":()=>Promise.all([n.e(532),n.e(7348)]).then(n.bind(n,20555)),"component---src-docs-components-radio-button-index-mdx":()=>Promise.all([n.e(532),n.e(4834)]).then(n.bind(n,83649)),"component---src-docs-components-radio-button-tabs-mdx":()=>Promise.all([n.e(532),n.e(7487)]).then(n.bind(n,33007)),"component---src-docs-components-search-input-accessibility-mdx":()=>Promise.all([n.e(532),n.e(5831)]).then(n.bind(n,20360)),"component---src-docs-components-search-input-code-mdx":()=>Promise.all([n.e(532),n.e(9574)]).then(n.bind(n,40022)),"component---src-docs-components-search-input-index-mdx":()=>Promise.all([n.e(532),n.e(1635)]).then(n.bind(n,1012)),"component---src-docs-components-search-input-tabs-mdx":()=>Promise.all([n.e(532),n.e(4744)]).then(n.bind(n,65945)),"component---src-docs-components-selection-group-accessibility-mdx":()=>Promise.all([n.e(532),n.e(9700)]).then(n.bind(n,16236)),"component---src-docs-components-selection-group-code-mdx":()=>Promise.all([n.e(532),n.e(2739)]).then(n.bind(n,80853)),"component---src-docs-components-selection-group-index-mdx":()=>Promise.all([n.e(532),n.e(7618)]).then(n.bind(n,29734)),"component---src-docs-components-selection-group-tabs-mdx":()=>Promise.all([n.e(532),n.e(1352)]).then(n.bind(n,1072)),"component---src-docs-components-side-navigation-accessibility-mdx":()=>Promise.all([n.e(532),n.e(5882)]).then(n.bind(n,27477)),"component---src-docs-components-side-navigation-code-mdx":()=>Promise.all([n.e(532),n.e(5757)]).then(n.bind(n,82731)),"component---src-docs-components-side-navigation-customisation-mdx":()=>Promise.all([n.e(532),n.e(6606)]).then(n.bind(n,10979)),"component---src-docs-components-side-navigation-index-mdx":()=>Promise.all([n.e(532),n.e(2456)]).then(n.bind(n,27006)),"component---src-docs-components-side-navigation-tabs-mdx":()=>Promise.all([n.e(532),n.e(636)]).then(n.bind(n,15595)),"component---src-docs-components-status-label-accessibility-mdx":()=>Promise.all([n.e(532),n.e(4360)]).then(n.bind(n,41062)),"component---src-docs-components-status-label-code-mdx":()=>Promise.all([n.e(532),n.e(1665)]).then(n.bind(n,36838)),"component---src-docs-components-status-label-index-mdx":()=>Promise.all([n.e(532),n.e(677)]).then(n.bind(n,27158)),"component---src-docs-components-status-label-tabs-mdx":()=>Promise.all([n.e(532),n.e(8619)]).then(n.bind(n,40637)),"component---src-docs-components-step-by-step-accessibility-mdx":()=>Promise.all([n.e(532),n.e(5932)]).then(n.bind(n,5869)),"component---src-docs-components-step-by-step-code-mdx":()=>Promise.all([n.e(532),n.e(7011)]).then(n.bind(n,42097)),"component---src-docs-components-step-by-step-index-mdx":()=>Promise.all([n.e(532),n.e(4442)]).then(n.bind(n,5184)),"component---src-docs-components-step-by-step-tabs-mdx":()=>Promise.all([n.e(532),n.e(4201)]).then(n.bind(n,12224)),"component---src-docs-components-stepper-accessibility-mdx":()=>Promise.all([n.e(532),n.e(1372)]).then(n.bind(n,27257)),"component---src-docs-components-stepper-code-mdx":()=>Promise.all([n.e(532),n.e(1817)]).then(n.bind(n,73862)),"component---src-docs-components-stepper-customisation-mdx":()=>Promise.all([n.e(532),n.e(8824)]).then(n.bind(n,36434)),"component---src-docs-components-stepper-index-mdx":()=>Promise.all([n.e(532),n.e(1176)]).then(n.bind(n,45399)),"component---src-docs-components-stepper-tabs-mdx":()=>Promise.all([n.e(532),n.e(6725)]).then(n.bind(n,61056)),"component---src-docs-components-table-accessibility-mdx":()=>Promise.all([n.e(532),n.e(4174)]).then(n.bind(n,14329)),"component---src-docs-components-table-code-mdx":()=>Promise.all([n.e(532),n.e(6978),n.e(3361)]).then(n.bind(n,89684)),"component---src-docs-components-table-customisation-mdx":()=>Promise.all([n.e(532),n.e(6978),n.e(363)]).then(n.bind(n,54808)),"component---src-docs-components-table-index-mdx":()=>Promise.all([n.e(532),n.e(6978),n.e(4614)]).then(n.bind(n,51345)),"component---src-docs-components-table-tabs-mdx":()=>Promise.all([n.e(532),n.e(3733)]).then(n.bind(n,13277)),"component---src-docs-components-tabs-accessibility-mdx":()=>Promise.all([n.e(532),n.e(6165)]).then(n.bind(n,14066)),"component---src-docs-components-tabs-code-mdx":()=>Promise.all([n.e(532),n.e(1457)]).then(n.bind(n,4613)),"component---src-docs-components-tabs-customisation-mdx":()=>Promise.all([n.e(532),n.e(9358)]).then(n.bind(n,84067)),"component---src-docs-components-tabs-index-mdx":()=>Promise.all([n.e(532),n.e(3346)]).then(n.bind(n,67606)),"component---src-docs-components-tabs-tabs-mdx":()=>Promise.all([n.e(532),n.e(3872)]).then(n.bind(n,64540)),"component---src-docs-components-tag-accessibility-mdx":()=>Promise.all([n.e(532),n.e(8236)]).then(n.bind(n,58152)),"component---src-docs-components-tag-code-mdx":()=>Promise.all([n.e(532),n.e(1993)]).then(n.bind(n,74166)),"component---src-docs-components-tag-customisation-mdx":()=>Promise.all([n.e(532),n.e(9679)]).then(n.bind(n,10166)),"component---src-docs-components-tag-index-mdx":()=>Promise.all([n.e(532),n.e(6377)]).then(n.bind(n,25335)),"component---src-docs-components-tag-tabs-mdx":()=>Promise.all([n.e(532),n.e(7770)]).then(n.bind(n,66170)),"component---src-docs-components-text-area-accessibility-mdx":()=>Promise.all([n.e(532),n.e(3245)]).then(n.bind(n,29874)),"component---src-docs-components-text-area-code-mdx":()=>Promise.all([n.e(532),n.e(8433)]).then(n.bind(n,85451)),"component---src-docs-components-text-area-index-mdx":()=>Promise.all([n.e(532),n.e(8552)]).then(n.bind(n,73272)),"component---src-docs-components-text-area-tabs-mdx":()=>Promise.all([n.e(532),n.e(630)]).then(n.bind(n,67523)),"component---src-docs-components-text-input-accessibility-mdx":()=>Promise.all([n.e(532),n.e(9081)]).then(n.bind(n,91497)),"component---src-docs-components-text-input-code-mdx":()=>Promise.all([n.e(532),n.e(6944)]).then(n.bind(n,27379)),"component---src-docs-components-text-input-index-mdx":()=>Promise.all([n.e(532),n.e(7846)]).then(n.bind(n,9736)),"component---src-docs-components-text-input-tabs-mdx":()=>Promise.all([n.e(532),n.e(3424)]).then(n.bind(n,59309)),"component---src-docs-components-time-input-accessibility-mdx":()=>Promise.all([n.e(532),n.e(9274)]).then(n.bind(n,65778)),"component---src-docs-components-time-input-code-mdx":()=>Promise.all([n.e(532),n.e(4408),n.e(9418)]).then(n.bind(n,99983)),"component---src-docs-components-time-input-index-mdx":()=>Promise.all([n.e(532),n.e(4408),n.e(8362)]).then(n.bind(n,89834)),"component---src-docs-components-time-input-tabs-mdx":()=>Promise.all([n.e(532),n.e(4740)]).then(n.bind(n,5627)),"component---src-docs-components-toggle-button-accessibility-mdx":()=>Promise.all([n.e(532),n.e(9441)]).then(n.bind(n,93945)),"component---src-docs-components-toggle-button-code-mdx":()=>Promise.all([n.e(532),n.e(9772)]).then(n.bind(n,96034)),"component---src-docs-components-toggle-button-customisation-mdx":()=>Promise.all([n.e(532),n.e(9367)]).then(n.bind(n,69783)),"component---src-docs-components-toggle-button-index-mdx":()=>Promise.all([n.e(532),n.e(2609)]).then(n.bind(n,99295)),"component---src-docs-components-toggle-button-tabs-mdx":()=>Promise.all([n.e(532),n.e(2862)]).then(n.bind(n,31252)),"component---src-docs-components-tooltip-accessibility-mdx":()=>Promise.all([n.e(532),n.e(7383)]).then(n.bind(n,99807)),"component---src-docs-components-tooltip-code-mdx":()=>Promise.all([n.e(532),n.e(6544)]).then(n.bind(n,56914)),"component---src-docs-components-tooltip-index-mdx":()=>Promise.all([n.e(532),n.e(237)]).then(n.bind(n,89674)),"component---src-docs-components-tooltip-tabs-mdx":()=>Promise.all([n.e(532),n.e(5165)]).then(n.bind(n,38516)),"component---src-docs-foundation-design-tokens-breakpoints-index-mdx":()=>Promise.all([n.e(532),n.e(7247)]).then(n.bind(n,25083)),"component---src-docs-foundation-design-tokens-breakpoints-tabs-mdx":()=>Promise.all([n.e(532),n.e(2190)]).then(n.bind(n,37964)),"component---src-docs-foundation-design-tokens-breakpoints-tokens-mdx":()=>Promise.all([n.e(532),n.e(4124)]).then(n.bind(n,5230)),"component---src-docs-foundation-design-tokens-colour-accessibility-mdx":()=>Promise.all([n.e(532),n.e(8403)]).then(n.bind(n,37680)),"component---src-docs-foundation-design-tokens-colour-index-mdx":()=>Promise.all([n.e(532),n.e(5322)]).then(n.bind(n,30533)),"component---src-docs-foundation-design-tokens-colour-tabs-mdx":()=>Promise.all([n.e(532),n.e(513)]).then(n.bind(n,28348)),"component---src-docs-foundation-design-tokens-colour-tokens-mdx":()=>Promise.all([n.e(532),n.e(8438)]).then(n.bind(n,51027)),"component---src-docs-foundation-design-tokens-spacing-index-mdx":()=>Promise.all([n.e(532),n.e(5234)]).then(n.bind(n,37222)),"component---src-docs-foundation-design-tokens-spacing-tabs-mdx":()=>Promise.all([n.e(532),n.e(3675)]).then(n.bind(n,62093)),"component---src-docs-foundation-design-tokens-spacing-tokens-mdx":()=>Promise.all([n.e(532),n.e(1042)]).then(n.bind(n,17697)),"component---src-docs-foundation-design-tokens-typography-index-mdx":()=>Promise.all([n.e(532),n.e(3204)]).then(n.bind(n,4406)),"component---src-docs-foundation-design-tokens-typography-tabs-mdx":()=>Promise.all([n.e(532),n.e(8976)]).then(n.bind(n,7866)),"component---src-docs-foundation-design-tokens-typography-tokens-mdx":()=>Promise.all([n.e(532),n.e(6188)]).then(n.bind(n,94125)),"component---src-docs-foundation-guidelines-checkbox-radiobutton-toggle-mdx":()=>n.e(1999).then(n.bind(n,4087)),"component---src-docs-foundation-guidelines-data-formats-mdx":()=>n.e(2595).then(n.bind(n,70816)),"component---src-docs-foundation-guidelines-grid-mdx":()=>Promise.all([n.e(532),n.e(2453)]).then(n.bind(n,64273)),"component---src-docs-foundation-guidelines-inclusivity-mdx":()=>n.e(8444).then(n.bind(n,14149)),"component---src-docs-foundation-guidelines-localisation-mdx":()=>n.e(9459).then(n.bind(n,66308)),"component---src-docs-foundation-guidelines-photography-mdx":()=>n.e(8632).then(n.bind(n,16163)),"component---src-docs-foundation-guidelines-server-side-rendering-mdx":()=>n.e(1722).then(n.bind(n,68563)),"component---src-docs-foundation-index-mdx":()=>Promise.all([n.e(532),n.e(598)]).then(n.bind(n,1877)),"component---src-docs-foundation-visual-assets-favicon-mdx":()=>n.e(6909).then(n.bind(n,1681)),"component---src-docs-foundation-visual-assets-icons-index-mdx":()=>Promise.all([n.e(532),n.e(3423)]).then(n.bind(n,26692)),"component---src-docs-foundation-visual-assets-icons-list-mdx":()=>Promise.all([n.e(532),n.e(6136),n.e(4408),n.e(6978),n.e(930),n.e(6573),n.e(2707),n.e(8541),n.e(3013)]).then(n.bind(n,28918)),"component---src-docs-foundation-visual-assets-icons-tabs-mdx":()=>Promise.all([n.e(532),n.e(5681)]).then(n.bind(n,87138)),"component---src-docs-foundation-visual-assets-logo-mdx":()=>Promise.all([n.e(532),n.e(7944)]).then(n.bind(n,32646)),"component---src-docs-foundation-visual-assets-placeholders-mdx":()=>Promise.all([n.e(532),n.e(2423)]).then(n.bind(n,44513)),"component---src-docs-foundation-visual-assets-wave-motifs-mdx":()=>Promise.all([n.e(532),n.e(3775)]).then(n.bind(n,17113)),"component---src-docs-getting-started-contributing-design-mdx":()=>Promise.all([n.e(532),n.e(9526)]).then(n.bind(n,22741)),"component---src-docs-getting-started-contributing-documentation-mdx":()=>n.e(5445).then(n.bind(n,39690)),"component---src-docs-getting-started-contributing-how-to-contribute-mdx":()=>Promise.all([n.e(532),n.e(7996)]).then(n.bind(n,40358)),"component---src-docs-getting-started-contributing-icons-mdx":()=>Promise.all([n.e(532),n.e(9438)]).then(n.bind(n,18176)),"component---src-docs-getting-started-contributing-implementation-mdx":()=>n.e(5066).then(n.bind(n,65116)),"component---src-docs-getting-started-designer-mdx":()=>n.e(2237).then(n.bind(n,20875)),"component---src-docs-getting-started-developer-mdx":()=>n.e(2962).then(n.bind(n,19763)),"component---src-docs-getting-started-faq-accessibility-mdx":()=>Promise.all([n.e(532),n.e(9175)]).then(n.bind(n,94275)),"component---src-docs-getting-started-faq-code-mdx":()=>Promise.all([n.e(532),n.e(626)]).then(n.bind(n,78740)),"component---src-docs-getting-started-faq-design-mdx":()=>Promise.all([n.e(532),n.e(7680)]).then(n.bind(n,33808)),"component---src-docs-getting-started-faq-index-mdx":()=>Promise.all([n.e(532),n.e(7173)]).then(n.bind(n,50854)),"component---src-docs-getting-started-faq-tabs-mdx":()=>Promise.all([n.e(532),n.e(4605)]).then(n.bind(n,69636)),"component---src-docs-getting-started-index-mdx":()=>Promise.all([n.e(532),n.e(6401)]).then(n.bind(n,62043)),"component---src-docs-getting-started-tutorials-abstract-tutorial-mdx":()=>Promise.all([n.e(532),n.e(3723)]).then(n.bind(n,1140)),"component---src-docs-getting-started-tutorials-migrate-to-3-0-0-mdx":()=>n.e(3609).then(n.bind(n,44310)),"component---src-docs-getting-started-versioning-mdx":()=>n.e(9860).then(n.bind(n,4928)),"component---src-docs-index-mdx":()=>Promise.all([n.e(532),n.e(2406)]).then(n.bind(n,11816)),"component---src-docs-patterns-cookies-basics-mdx":()=>Promise.all([n.e(532),n.e(1287)]).then(n.bind(n,77265)),"component---src-docs-patterns-cookies-common-helsinki-cookies-mdx":()=>n.e(5421).then(n.bind(n,58535)),"component---src-docs-patterns-cookies-using-the-cookieconsent-mdx":()=>Promise.all([n.e(532),n.e(2256)]).then(n.bind(n,19210)),"component---src-docs-patterns-forms-form-building-mdx":()=>Promise.all([n.e(532),n.e(411)]).then(n.bind(n,3823)),"component---src-docs-patterns-forms-form-multi-page-mdx":()=>Promise.all([n.e(532),n.e(791)]).then(n.bind(n,60258)),"component---src-docs-patterns-forms-form-validation-mdx":()=>Promise.all([n.e(532),n.e(6573),n.e(7720)]).then(n.bind(n,8416)),"component---src-docs-patterns-index-mdx":()=>Promise.all([n.e(532),n.e(4799)]).then(n.bind(n,255)),"component---src-docs-patterns-navigation-building-navigation-mdx":()=>Promise.all([n.e(532),n.e(6982)]).then(n.bind(n,74348)),"component---src-docs-patterns-navigation-examples-mdx":()=>Promise.all([n.e(532),n.e(4563)]).then(n.bind(n,14887))}},34741:function(e,t,n){e.exports=[{plugin:n(89650),options:{plugins:[],icon:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>',isIconAfterHeader:!0,className:"header-anchor",offsetY:0}},{plugin:n(29608),options:{plugins:[],name:"gatsby-starter-default",short_name:"starter",start_url:"/",theme_color:"#ffffff",background_color:"#ffffff",display:"minimal-ui",icons:[{src:"/favicon/light/favicon-32x32.ico",sizes:"any"},{src:"/favicon/light/apple-touch-icon.png"},{src:"/favicon/light/favicon-192x192.png",sizes:"192x192",type:"image/png"},{src:"/favicon/light/favicon-512x512.png",sizes:"512x512",type:"image/png"}],include_favicon:!1,legacy:!0,theme_color_in_head:!0,cache_busting_mode:"query",crossOrigin:"anonymous",cacheDigest:null}},{plugin:n(87495),options:{plugins:[],siteId:"831",matomoUrl:"https://webanalytics.digiaiiris.com/js",siteUrl:"https://hds.hel.fi",matomoJsScript:"piwik.min.js",matomoPhpScript:"tracker.php",requireCookieConsent:!0}},{plugin:n(47420),options:{plugins:[]}},{plugin:n(4094),options:{plugins:[]}}]},3092:function(e,t,n){const a=n(34741),{getResourceURLsForPathname:r,loadPage:i,loadPageSync:o}=n(1975).jN;t.h=function(e,t,n,d){void 0===t&&(t={});let s=a.map((n=>{if(!n.plugin[e])return;t.getResourceURLsForPathname=r,t.loadPage=i,t.loadPageSync=o;const a=n.plugin[e](t,n.options);return a&&d&&(t=d({args:t,result:a,plugin:n})),a}));return s=s.filter((e=>void 0!==e)),s.length>0?s:n?[n]:[]},t.I=(e,t,n)=>a.reduce(((n,a)=>a.plugin[e]?n.then((()=>a.plugin[e](t,a.options))):n),Promise.resolve())},84004:function(e,t){t.M=()=>""},68299:function(e,t,n){"use strict";n.d(t,{Z:function(){return a}});var a=function(e){return e=e||Object.create(null),{on:function(t,n){(e[t]||(e[t]=[])).push(n)},off:function(t,n){e[t]&&e[t].splice(e[t].indexOf(n)>>>0,1)},emit:function(t,n){(e[t]||[]).slice().map((function(e){e(n)})),(e["*"]||[]).slice().map((function(e){e(t,n)}))}}}()},17802:function(e,t,n){"use strict";n.d(t,{UD:function(){return g},Cj:function(){return f},GA:function(){return h},DS:function(){return l}});var a=n(87896),r=n(41505),i=e=>{if(void 0===e)return e;let[t,n=""]=e.split("?");return n&&(n="?"+n),"/"===t?"/"+n:"/"===t.charAt(t.length-1)?t.slice(0,-1)+n:t+n},o=n(96073);const d=new Map;let s=[];const c=e=>{let t=e;if(-1!==e.indexOf("?")){const[n,a]=e.split("?");t=n+"?"+encodeURIComponent(a)}const n=decodeURIComponent(t);return(0,r.Z)(n,decodeURIComponent("/hds-demo/hds-1817-stepbystep-docs")).split("#")[0]};function u(e){return e.startsWith("/")||e.startsWith("https://")||e.startsWith("http://")?e:new URL(e,window.location.href+(window.location.href.endsWith("/")?"":"/")).pathname}const l=e=>{s=e},g=e=>{const t=p(e),n=s.map((e=>{let{path:t,matchPath:n}=e;return{path:n,originalPath:t}})),r=(0,a.pick)(n,t);return r?i(r.route.originalPath):null},h=e=>{const t=p(e),n=s.map((e=>{let{path:t,matchPath:n}=e;return{path:n,originalPath:t}})),r=(0,a.pick)(n,t);return r?r.params:{}},f=e=>{const t=c(u(e));if(d.has(t))return d.get(t);const n=(0,o.J)(e);if(n)return f(n.toPath);let a=g(t);return a||(a=p(e)),d.set(t,a),a},p=e=>{let t=c(u(e));return"/index.html"===t&&(t="/"),t=i(t),t}},14160:function(e,t,n){"use strict";n.r(t),n.d(t,{Link:function(){return d.rU},PageRenderer:function(){return i()},Script:function(){return _.Script},ScriptStrategy:function(){return _.ScriptStrategy},Slice:function(){return b},StaticQuery:function(){return s.i1},StaticQueryContext:function(){return s.B9},collectedScriptsByPage:function(){return _.collectedScriptsByPage},graphql:function(){return M},navigate:function(){return d.c4},parsePath:function(){return d.cP},prefetchPathname:function(){return w},scriptCache:function(){return _.scriptCache},scriptCallbackCache:function(){return _.scriptCallbackCache},useScrollRestoration:function(){return o.p2},useStaticQuery:function(){return s.K2},withAssetPrefix:function(){return d.mc},withPrefix:function(){return d.dq}});var a=n(1975),r=n(82743),i=n.n(r),o=n(19679),d=n(71562),s=n(51757),c=n(97326),u=n(94578),l=n(52146),g=n(67294),h=n(84004),f=n(38995);const p=e=>{let{sliceId:t,children:n}=e;const a=[g.createElement("slice-start",{id:t+"-1"}),g.createElement("slice-end",{id:t+"-1"})];return n&&(a.push(n),a.push(g.createElement("slice-start",{id:t+"-2"}),g.createElement("slice-end",{id:t+"-2"}))),a},m=e=>{let{sliceName:t,allowEmpty:n,children:a,...r}=e;const i=(0,g.useContext)(f.u0),o=(0,g.useContext)(f.Db),d=i[t];if(!d){if(n)return null;throw new Error('Slice "'+d+'" for "'+t+'" slot not found')}const s=((e,t)=>Object.keys(t).length?e+"-"+(0,h.M)(t):e)(d,r);let c=o[s];return c?a&&(c.hasChildren=!0):o[s]=c={props:r,sliceName:d,hasChildren:!!a},g.createElement(p,{sliceId:s},a)},R=e=>{let{sliceName:t,allowEmpty:n,children:a,...r}=e;const i=(0,g.useContext)(f.u0),o=(0,g.useContext)(f.m3),d=i[t],s=o.get(d);if(!s){if(n)return null;throw new Error('Slice "'+d+'" for "'+t+'" slot not found')}return g.createElement(s.component,Object.assign({sliceContext:s.sliceContext,data:s.data},r),a)};function b(e){{const t={...e,sliceName:e.alias};delete t.alias,delete t.__renderedByLocation;const n=(0,g.useContext)(f.Bs),a=v(e);if(Object.keys(a).length)throw new y("browser"===n.renderEnvironment,t.sliceName,a,e.__renderedByLocation);if("server"===n.renderEnvironment)return g.createElement(m,t);if("browser"===n.renderEnvironment)return g.createElement(R,t);if("engines"===n.renderEnvironment||"dev-ssr"===n.renderEnvironment)return g.createElement(R,t);if("slices"===n.renderEnvironment){let t="";try{t='\n\nSlice component "'+n.sliceRoot.name+'" ('+n.sliceRoot.componentPath+') tried to render <Slice alias="'+e.alias+'"/>'}catch{}throw new Error("Nested slices are not supported."+t+"\n\nSee https://gatsbyjs.com/docs/reference/built-in-components/gatsby-slice#nested-slices")}throw new Error('Slice context "'+n.renderEnvironment+'" is not supported.')}}let y=function(e){function t(n,a,r,i){var o;const d=Object.entries(r).map((e=>{let[t,n]=e;return'not serializable "'+n+'" type passed to "'+t+'" prop'})).join(", "),s="SlicePropsError";let u="",l="";if(n){const e=g.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactDebugCurrentFrame.getCurrentStack().trim().split("\n").slice(1);e[0]=e[0].trim(),u="\n"+e.join("\n"),l='Slice "'+a+'" was passed props that are not serializable ('+d+")."}else{l=s+': Slice "'+a+'" was passed props that are not serializable ('+d+").";u=l+"\n"+(new Error).stack.trim().split("\n").slice(2).join("\n")}return(o=e.call(this,l)||this).name=s,u?o.stack=u:Error.captureStackTrace((0,c.Z)(o),t),i&&(o.forcedLocation={...i,functionName:"Slice"}),o}return(0,u.Z)(t,e),t}((0,l.Z)(Error));const v=function(e,t,n,a){void 0===t&&(t={}),void 0===n&&(n=[]),void 0===a&&(a=null);for(const[r,i]of Object.entries(e)){if(null==i||!a&&"children"===r)continue;const e=a?a+"."+r:r;"function"==typeof i?t[e]=typeof i:"object"==typeof i&&n.indexOf(i)<=0&&(n.push(i),v(i,t,n,e))}return t};var _=n(83521);const w=a.ZP.enqueue;function M(){throw new Error("It appears like Gatsby is misconfigured. Gatsby related `graphql` calls are supposed to only be evaluated at compile time, and then compiled away. Unfortunately, something went wrong and the query was left in the compiled code.\n\nUnless your site has a complex or custom babel/Gatsby configuration this is likely a bug in Gatsby.")}},1975:function(e,t,n){"use strict";n.d(t,{uQ:function(){return l},kL:function(){return _},ZP:function(){return x},Nt:function(){return S},hs:function(){return E},jN:function(){return M},N1:function(){return w}});var a=n(94578),r=n(15785),i=n(40904);const o=function(e){if("undefined"==typeof document)return!1;const t=document.createElement("link");try{if(t.relList&&"function"==typeof t.relList.supports)return t.relList.supports(e)}catch(n){return!1}return!1}("prefetch")?function(e,t){return new Promise(((n,a)=>{if("undefined"==typeof document)return void a();const r=document.createElement("link");r.setAttribute("rel","prefetch"),r.setAttribute("href",e),Object.keys(t).forEach((e=>{r.setAttribute(e,t[e])})),r.onload=n,r.onerror=a;(document.getElementsByTagName("head")[0]||document.getElementsByName("script")[0].parentNode).appendChild(r)}))}:function(e){return new Promise(((t,n)=>{const a=new XMLHttpRequest;a.open("GET",e,!0),a.onload=()=>{200===a.status?t():n()},a.send(null)}))},d={};var s=function(e,t){return new Promise((n=>{d[e]?n():o(e,t).then((()=>{n(),d[e]=!0})).catch((()=>{}))}))},c=n(68299),u=n(17802);const l={Error:"error",Success:"success"},g=e=>{const[t,n]=e.split("?");var a;return"/hds-demo/hds-1817-stepbystep-docs/page-data/"+("/"===t?"index":(a="/"===(a=t)[0]?a.slice(1):a).endsWith("/")?a.slice(0,-1):a)+"/page-data.json"+(n?"?"+n:"")},h=e=>e.startsWith("//");function f(e,t){return void 0===t&&(t="GET"),new Promise((n=>{const a=new XMLHttpRequest;a.open(t,e,!0),a.onreadystatechange=()=>{4==a.readyState&&n(a)},a.send(null)}))}const p=/bot|crawler|spider|crawling/i,m=function(e,t,n){var a;void 0===t&&(t=null);const r={componentChunkName:e.componentChunkName,path:e.path,webpackCompilationHash:e.webpackCompilationHash,matchPath:e.matchPath,staticQueryHashes:e.staticQueryHashes,getServerDataError:e.getServerDataError,slicesMap:null!==(a=e.slicesMap)&&void 0!==a?a:{}};return{component:t,head:n,json:e.result,page:r}};function R(e){return new Promise((t=>{try{const n=e.readRoot();t(n)}catch(n){if(!Object.hasOwnProperty.call(n,"_response")||!Object.hasOwnProperty.call(n,"_status"))throw n;setTimeout((()=>{R(e).then(t)}),200)}}))}let b=function(){function e(e,t){this.inFlightNetworkRequests=new Map,this.pageDb=new Map,this.inFlightDb=new Map,this.staticQueryDb={},this.pageDataDb=new Map,this.partialHydrationDb=new Map,this.slicesDataDb=new Map,this.sliceInflightDb=new Map,this.slicesDb=new Map,this.isPrefetchQueueRunning=!1,this.prefetchQueued=[],this.prefetchTriggered=new Set,this.prefetchCompleted=new Set,this.loadComponent=e,(0,u.DS)(t)}var t=e.prototype;return t.memoizedGet=function(e){let t=this.inFlightNetworkRequests.get(e);return t||(t=f(e,"GET"),this.inFlightNetworkRequests.set(e,t)),t.then((t=>(this.inFlightNetworkRequests.delete(e),t))).catch((t=>{throw this.inFlightNetworkRequests.delete(e),t}))},t.setApiRunner=function(e){this.apiRunner=e,this.prefetchDisabled=e("disableCorePrefetching").some((e=>e))},t.fetchPageDataJson=function(e){const{pagePath:t,retries:n=0}=e,a=g(t);return this.memoizedGet(a).then((a=>{const{status:r,responseText:i}=a;if(200===r)try{const n=JSON.parse(i);if(void 0===n.path)throw new Error("not a valid pageData response");const a=t.split("?")[1];return a&&!n.path.includes(a)&&(n.path+="?"+a),Object.assign(e,{status:l.Success,payload:n})}catch(o){}return 404===r||200===r?"/404.html"===t||"/500.html"===t?Object.assign(e,{status:l.Error}):this.fetchPageDataJson(Object.assign(e,{pagePath:"/404.html",notFound:!0})):500===r?this.fetchPageDataJson(Object.assign(e,{pagePath:"/500.html",internalServerError:!0})):n<3?this.fetchPageDataJson(Object.assign(e,{retries:n+1})):Object.assign(e,{status:l.Error})}))},t.fetchPartialHydrationJson=function(e){const{pagePath:t,retries:n=0}=e,a=g(t).replace(".json","-rsc.json");return this.memoizedGet(a).then((a=>{const{status:r,responseText:i}=a;if(200===r)try{return Object.assign(e,{status:l.Success,payload:i})}catch(o){}return 404===r||200===r?"/404.html"===t||"/500.html"===t?Object.assign(e,{status:l.Error}):this.fetchPartialHydrationJson(Object.assign(e,{pagePath:"/404.html",notFound:!0})):500===r?this.fetchPartialHydrationJson(Object.assign(e,{pagePath:"/500.html",internalServerError:!0})):n<3?this.fetchPartialHydrationJson(Object.assign(e,{retries:n+1})):Object.assign(e,{status:l.Error})}))},t.loadPageDataJson=function(e){const t=(0,u.Cj)(e);if(this.pageDataDb.has(t)){const e=this.pageDataDb.get(t);return Promise.resolve(e)}return this.fetchPageDataJson({pagePath:t}).then((e=>(this.pageDataDb.set(t,e),e)))},t.loadPartialHydrationJson=function(e){const t=(0,u.Cj)(e);if(this.partialHydrationDb.has(t)){const e=this.partialHydrationDb.get(t);return Promise.resolve(e)}return this.fetchPartialHydrationJson({pagePath:t}).then((e=>(this.partialHydrationDb.set(t,e),e)))},t.loadSliceDataJson=function(e){if(this.slicesDataDb.has(e)){const t=this.slicesDataDb.get(e);return Promise.resolve({sliceName:e,jsonPayload:t})}return f("/hds-demo/hds-1817-stepbystep-docs/slice-data/"+e+".json","GET").then((t=>{const n=JSON.parse(t.responseText);return this.slicesDataDb.set(e,n),{sliceName:e,jsonPayload:n}}))},t.findMatchPath=function(e){return(0,u.UD)(e)},t.loadPage=function(e){const t=(0,u.Cj)(e);if(this.pageDb.has(t)){const e=this.pageDb.get(t);return e.error?Promise.resolve({error:e.error,status:e.status}):Promise.resolve(e.payload)}if(this.inFlightDb.has(t))return this.inFlightDb.get(t);const n=[this.loadAppData(),this.loadPageDataJson(t)];const a=Promise.all(n).then((e=>{const[n,a,o]=e;if(a.status===l.Error||(null==o?void 0:o.status)===l.Error)return{status:l.Error};let d=a.payload;const{componentChunkName:s,staticQueryHashes:u=[],slicesMap:g={}}=d,h={},f=Array.from(new Set(Object.values(g))),p=e=>{if(this.slicesDb.has(e.name))return this.slicesDb.get(e.name);if(this.sliceInflightDb.has(e.name))return this.sliceInflightDb.get(e.name);const t=this.loadComponent(e.componentChunkName).then((t=>{return{component:(n=t,n&&n.default||n),sliceContext:e.result.sliceContext,data:e.result.data};var n}));return this.sliceInflightDb.set(e.name,t),t.then((t=>{this.slicesDb.set(e.name,t),this.sliceInflightDb.delete(e.name)})),t};return Promise.all(f.map((e=>this.loadSliceDataJson(e)))).then((e=>{const g=[],f=(0,r.Z)(u);for(const{jsonPayload:t,sliceName:n}of Object.values(e)){g.push({name:n,...t});for(const e of t.staticQueryHashes)f.includes(e)||f.push(e)}const b=[Promise.all(g.map(p)),this.loadComponent(s,"head")];b.push(this.loadComponent(s));const y=Promise.all(b).then((e=>{const[t,r,s]=e;h.createdAt=new Date;for(const n of t)(!n||n instanceof Error)&&(h.status=l.Error,h.error=n);let c;if((!s||s instanceof Error)&&(h.status=l.Error,h.error=s),h.status!==l.Error){if(h.status=l.Success,!0!==a.notFound&&!0!==(null==o?void 0:o.notFound)||(h.notFound=!0),d=Object.assign(d,{webpackCompilationHash:n?n.webpackCompilationHash:""}),"string"==typeof(null==o?void 0:o.payload)){c=m(d,null,r),c.partialHydration=o.payload;const e=new ReadableStream({start(e){const t=new TextEncoder;e.enqueue(t.encode(o.payload))},pull(e){e.close()},cancel(){}});return R((0,i.createFromReadableStream)(e)).then((e=>(c.partialHydration=e,c)))}c=m(d,s,r)}return c})),v=Promise.all(f.map((e=>{if(this.staticQueryDb[e]){const t=this.staticQueryDb[e];return{staticQueryHash:e,jsonPayload:t}}return this.memoizedGet("/hds-demo/hds-1817-stepbystep-docs/page-data/sq/d/"+e+".json").then((t=>{const n=JSON.parse(t.responseText);return{staticQueryHash:e,jsonPayload:n}})).catch((()=>{throw new Error("We couldn't load \"/hds-demo/hds-1817-stepbystep-docs/page-data/sq/d/"+e+'.json"')}))}))).then((e=>{const t={};return e.forEach((e=>{let{staticQueryHash:n,jsonPayload:a}=e;t[n]=a,this.staticQueryDb[n]=a})),t}));return Promise.all([y,v]).then((e=>{let n,[a,r]=e;return a&&(n={...a,staticQueryResults:r},h.payload=n,c.Z.emit("onPostLoadPageResources",{page:n,pageResources:n})),this.pageDb.set(t,h),h.error?{error:h.error,status:h.status}:n})).catch((e=>({error:e,status:l.Error})))}))}));return a.then((()=>{this.inFlightDb.delete(t)})).catch((e=>{throw this.inFlightDb.delete(t),e})),this.inFlightDb.set(t,a),a},t.loadPageSync=function(e,t){void 0===t&&(t={});const n=(0,u.Cj)(e);if(this.pageDb.has(n)){var a;const e=this.pageDb.get(n);if(e.payload)return e.payload;if(null!==(a=t)&&void 0!==a&&a.withErrorDetails)return{error:e.error,status:e.status}}},t.shouldPrefetch=function(e){return!!(()=>{if("connection"in navigator&&void 0!==navigator.connection){if((navigator.connection.effectiveType||"").includes("2g"))return!1;if(navigator.connection.saveData)return!1}return!0})()&&((!navigator.userAgent||!p.test(navigator.userAgent))&&!this.pageDb.has(e))},t.prefetch=function(e){if(!this.shouldPrefetch(e))return{then:e=>e(!1),abort:()=>{}};if(this.prefetchTriggered.has(e))return{then:e=>e(!0),abort:()=>{}};const t={resolve:null,reject:null,promise:null};t.promise=new Promise(((e,n)=>{t.resolve=e,t.reject=n})),this.prefetchQueued.push([e,t]);const n=new AbortController;return n.signal.addEventListener("abort",(()=>{const t=this.prefetchQueued.findIndex((t=>{let[n]=t;return n===e}));-1!==t&&this.prefetchQueued.splice(t,1)})),this.isPrefetchQueueRunning||(this.isPrefetchQueueRunning=!0,setTimeout((()=>{this._processNextPrefetchBatch()}),3e3)),{then:(e,n)=>t.promise.then(e,n),abort:n.abort.bind(n)}},t._processNextPrefetchBatch=function(){(window.requestIdleCallback||(e=>setTimeout(e,0)))((()=>{const e=this.prefetchQueued.splice(0,4),t=Promise.all(e.map((e=>{let[t,n]=e;return this.prefetchTriggered.has(t)||(this.apiRunner("onPrefetchPathname",{pathname:t}),this.prefetchTriggered.add(t)),this.prefetchDisabled?n.resolve(!1):this.doPrefetch((0,u.Cj)(t)).then((()=>{this.prefetchCompleted.has(t)||(this.apiRunner("onPostPrefetchPathname",{pathname:t}),this.prefetchCompleted.add(t)),n.resolve(!0)}))})));this.prefetchQueued.length?t.then((()=>{setTimeout((()=>{this._processNextPrefetchBatch()}),3e3)})):this.isPrefetchQueueRunning=!1}))},t.doPrefetch=function(e){const t=g(e);return s(t,{crossOrigin:"anonymous",as:"fetch"}).then((()=>this.loadPageDataJson(e)))},t.hovering=function(e){this.loadPage(e)},t.getResourceURLsForPathname=function(e){const t=(0,u.Cj)(e),n=this.pageDataDb.get(t);if(n){const e=m(n.payload);return[].concat((0,r.Z)(y(e.page.componentChunkName)),[g(t)])}return null},t.isPageNotFound=function(e){const t=(0,u.Cj)(e),n=this.pageDb.get(t);return!n||n.notFound},t.loadAppData=function(e){return void 0===e&&(e=0),this.memoizedGet("/hds-demo/hds-1817-stepbystep-docs/page-data/app-data.json").then((t=>{const{status:n,responseText:a}=t;let r;if(200!==n&&e<3)return this.loadAppData(e+1);if(200===n)try{const e=JSON.parse(a);if(void 0===e.webpackCompilationHash)throw new Error("not a valid app-data response");r=e}catch(i){}return r}))},e}();const y=e=>(window.___chunkMapping[e]||[]).map((e=>"/hds-demo/hds-1817-stepbystep-docs"+e));let v,_=function(e){function t(t,n,a){var r;return r=e.call(this,(function(e,n){if(void 0===n&&(n="components"),!t[n="components"][e])throw new Error("We couldn't find the correct component chunk with the name \""+e+'"');return t[n][e]().catch((e=>e))}),n)||this,a&&r.pageDataDb.set((0,u.Cj)(a.path),{pagePath:a.path,payload:a,status:"success"}),r}(0,a.Z)(t,e);var n=t.prototype;return n.doPrefetch=function(t){return e.prototype.doPrefetch.call(this,t).then((e=>{if(e.status!==l.Success)return Promise.resolve();const t=e.payload,n=t.componentChunkName,a=y(n);return Promise.all(a.map(s)).then((()=>t))}))},n.loadPageDataJson=function(t){return e.prototype.loadPageDataJson.call(this,t).then((e=>e.notFound?h(t)?e:f(t,"HEAD").then((t=>200===t.status?{status:l.Error}:e)):e))},n.loadPartialHydrationJson=function(t){return e.prototype.loadPartialHydrationJson.call(this,t).then((e=>e.notFound?h(t)?e:f(t,"HEAD").then((t=>200===t.status?{status:l.Error}:e)):e))},t}(b);const w=e=>{v=e},M={enqueue:e=>v.prefetch(e),getResourceURLsForPathname:e=>v.getResourceURLsForPathname(e),loadPage:e=>v.loadPage(e),loadPageSync:function(e,t){return void 0===t&&(t={}),v.loadPageSync(e,t)},prefetch:e=>v.prefetch(e),isPageNotFound:e=>v.isPageNotFound(e),hovering:e=>v.hovering(e),loadAppData:()=>v.loadAppData()};var x=M;function E(){return v?v.staticQueryDb:{}}function S(){return v?v.slicesDb:{}}},94779:function(e,t,n){"use strict";n.d(t,{Z:function(){return x}});var a=n(67294),r=n(45697),i=n.n(r),o=n(3092),d=n(17802),s=n(15785),c=n(14160),u=n(87896),l=n(24941);function g(e){let{children:t,callback:n}=e;return(0,a.useEffect)((()=>{n()})),t}const h=["link","meta","style","title","base","noscript","script","html","body"];function f(e,t){if(e instanceof HTMLElement&&t instanceof HTMLElement){const n=t.getAttribute("nonce");if(n&&!e.getAttribute("nonce")){const a=t.cloneNode(!0);return a.setAttribute("nonce",""),a.nonce=n,n===e.nonce&&e.isEqualNode(a)}}return e.isEqualNode(t)}function p(e,t){void 0===t&&(t={html:{},body:{}});const n=new Map,a=[];for(const c of e.childNodes){var r,i;const e=c.nodeName.toLowerCase(),u=null===(r=c.attributes)||void 0===r||null===(i=r.id)||void 0===i?void 0:i.value;if(b(c)){if(R(e))if("html"===e||"body"===e)for(const n of c.attributes){const a="style"===n.name;var o;if(t[e]={...t[e]},a||(t[e][n.name]=n.value),a)t[e].style=""+(null!==(o=t[e])&&void 0!==o&&o.style?t[e].style:"")+n.value+" "}else{let e=c.cloneNode(!0);if(e.setAttribute("data-gatsby-head",!0),"script"===e.nodeName.toLowerCase()&&(e=m(e)),u)if(n.has(u)){var d;const t=n.get(u);null===(d=a[t].parentNode)||void 0===d||d.removeChild(a[t]),a[t]=e}else a.push(e),n.set(u,a.length-1);else a.push(e)}c.childNodes.length&&a.push.apply(a,(0,s.Z)(p(c,t).validHeadNodes))}}return{validHeadNodes:a,htmlAndBodyAttributes:t}}function m(e){const t=document.createElement("script");for(const n of e.attributes)t.setAttribute(n.name,n.value);return t.innerHTML=e.innerHTML,t}function R(e){return h.includes(e)}function b(e){return 1===e.nodeType}const y=document.createElement("div"),v={html:[],body:[]},_=()=>{var e;const{validHeadNodes:t,htmlAndBodyAttributes:n}=p(y);v.html=Object.keys(n.html),v.body=Object.keys(n.body),function(e){if(!e)return;const{html:t,body:n}=e,a=document.querySelector("html");a&&Object.entries(t).forEach((e=>{let[t,n]=e;a.setAttribute(t,n)}));const r=document.querySelector("body");r&&Object.entries(n).forEach((e=>{let[t,n]=e;r.setAttribute(t,n)}))}(n);const a=document.querySelectorAll("[data-gatsby-head]");var r;if(0===a.length)return void(r=document.head).append.apply(r,(0,s.Z)(t));const i=[];!function(e){let{oldNodes:t,newNodes:n,onStale:a,onNew:r}=e;for(const i of t){const e=n.findIndex((e=>f(e,i)));-1===e?a(i):n.splice(e,1)}for(const i of n)r(i)}({oldNodes:a,newNodes:t,onStale:e=>e.parentNode.removeChild(e),onNew:e=>i.push(e)}),(e=document.head).append.apply(e,i)};function w(e){let{pageComponent:t,staticQueryResults:n,pageComponentProps:r}=e;(0,a.useEffect)((()=>{if(null!=t&&t.Head){!function(e){if("function"!=typeof e)throw new Error('Expected "Head" export to be a function got "'+typeof e+'".')}(t.Head);const{render:i}=(0,l.U)(),d=a.createElement(t.Head,{location:{pathname:(e=r).location.pathname},params:e.params,data:e.data||{},serverData:e.serverData,pageContext:e.pageContext}),s=(0,o.h)("wrapRootElement",{element:d},d,(e=>{let{result:t}=e;return{element:t}})).pop();i(a.createElement(g,{callback:_},a.createElement(c.StaticQueryContext.Provider,{value:n},a.createElement(u.LocationProvider,null,s))),y)}var e;return()=>{!function(){const e=document.querySelectorAll("[data-gatsby-head]");for(const t of e)t.parentNode.removeChild(t)}(),function(e){if(!e)return;const{html:t,body:n}=e;if(t){const e=document.querySelector("html");t.forEach((t=>{e&&e.removeAttribute(t)}))}if(n){const e=document.querySelector("body");n.forEach((t=>{e&&e.removeAttribute(t)}))}}(v)}}))}function M(e){const t={...e,params:{...(0,d.GA)(e.location.pathname),...e.pageResources.json.pageContext.__params}};let n;var r;n=e.pageResources.partialHydration?e.pageResources.partialHydration:(0,a.createElement)((r=e.pageResources.component)&&r.default||r,{...t,key:e.path||e.pageResources.page.path});w({pageComponent:e.pageResources.head,staticQueryResults:e.pageResources.staticQueryResults,pageComponentProps:t});return(0,o.h)("wrapPageElement",{element:n,props:t},n,(e=>{let{result:n}=e;return{element:n,props:t}})).pop()}M.propTypes={location:i().object.isRequired,pageResources:i().object.isRequired,data:i().object,pageContext:i().object.isRequired};var x=M},25824:function(e,t,n){"use strict";var a=n(94578),r=n(3092),i=n(67294),o=n(87896),d=n(19679),s=n(51757),c=n(38995),u=n(1975),l=n(96073),g=n(68299);const h={id:"gatsby-announcer",style:{position:"absolute",top:0,width:1,height:1,padding:0,overflow:"hidden",clip:"rect(0, 0, 0, 0)",whiteSpace:"nowrap",border:0},"aria-live":"assertive","aria-atomic":"true"};var f=n(71562);function p(e){const t=(0,l.J)(e),{hash:n,search:a}=window.location;return null!=t&&(window.___replace(t.toPath+a+n),!0)}let m="";window.addEventListener("unhandledrejection",(e=>{/loading chunk \d* failed./i.test(e.reason)&&m&&(window.location.pathname=m)}));const R=(e,t)=>{p(e.pathname)||(m=e.pathname,(0,r.h)("onPreRouteUpdate",{location:e,prevLocation:t}))},b=(e,t)=>{p(e.pathname)||(0,r.h)("onRouteUpdate",{location:e,prevLocation:t})},y=function(e,t){if(void 0===t&&(t={}),"number"==typeof e)return void o.globalHistory.navigate(e);const{pathname:n,search:a,hash:i}=(0,f.cP)(e),d=(0,l.J)(n);if(d&&(e=d.toPath+a+i),window.___swUpdated)return void(window.location=n+a+i);const s=setTimeout((()=>{g.Z.emit("onDelayedLoadPageResources",{pathname:n}),(0,r.h)("onRouteUpdateDelayed",{location:window.location})}),1e3);u.ZP.loadPage(n+a).then((r=>{if(!r||r.status===u.uQ.Error)return window.history.replaceState({},"",location.href),window.location=n,void clearTimeout(s);r&&r.page.webpackCompilationHash!==window.___webpackCompilationHash&&("serviceWorker"in navigator&&null!==navigator.serviceWorker.controller&&"activated"===navigator.serviceWorker.controller.state&&navigator.serviceWorker.controller.postMessage({gatsbyApi:"clearPathResources"}),window.location=n+a+i),(0,o.navigate)(e,t),clearTimeout(s)}))};function v(e,t){let{location:n}=t;const{pathname:a,hash:i}=n,o=(0,r.h)("shouldUpdateScroll",{prevRouterProps:e,pathname:a,routerProps:{location:n},getSavedScrollPosition:e=>[0,this._stateStorage.read(e,e.key)]});if(o.length>0)return o[o.length-1];if(e){const{location:{pathname:t}}=e;if(t===a)return i?decodeURI(i.slice(1)):[0,0]}return!0}let _=function(e){function t(t){var n;return(n=e.call(this,t)||this).announcementRef=i.createRef(),n}(0,a.Z)(t,e);var n=t.prototype;return n.componentDidUpdate=function(e,t){requestAnimationFrame((()=>{let e="new page at "+this.props.location.pathname;document.title&&(e=document.title);const t=document.querySelectorAll("#gatsby-focus-wrapper h1");t&&t.length&&(e=t[0].textContent);const n="Navigated to "+e;if(this.announcementRef.current){this.announcementRef.current.innerText!==n&&(this.announcementRef.current.innerText=n)}}))},n.render=function(){return i.createElement("div",Object.assign({},h,{ref:this.announcementRef}))},t}(i.Component);const w=(e,t)=>{var n,a;return e.href!==t.href||(null==e||null===(n=e.state)||void 0===n?void 0:n.key)!==(null==t||null===(a=t.state)||void 0===a?void 0:a.key)};let M=function(e){function t(t){var n;return n=e.call(this,t)||this,R(t.location,null),n}(0,a.Z)(t,e);var n=t.prototype;return n.componentDidMount=function(){b(this.props.location,null)},n.shouldComponentUpdate=function(e){return!!w(this.props.location,e.location)&&(R(e.location,this.props.location),!0)},n.componentDidUpdate=function(e){w(e.location,this.props.location)&&b(this.props.location,e.location)},n.render=function(){return i.createElement(i.Fragment,null,this.props.children,i.createElement(_,{location:location}))},t}(i.Component);var x=n(94779),E=n(85418);function S(e,t){for(var n in e)if(!(n in t))return!0;for(var a in t)if(e[a]!==t[a])return!0;return!1}var k=function(e){function t(t){var n;n=e.call(this)||this;const{location:a,pageResources:r}=t;return n.state={location:{...a},pageResources:r||u.ZP.loadPageSync(a.pathname+a.search,{withErrorDetails:!0})},n}(0,a.Z)(t,e),t.getDerivedStateFromProps=function(e,t){let{location:n}=e;if(t.location.href!==n.href){return{pageResources:u.ZP.loadPageSync(n.pathname+n.search,{withErrorDetails:!0}),location:{...n}}}return{location:{...n}}};var n=t.prototype;return n.loadResources=function(e){u.ZP.loadPage(e).then((t=>{t&&t.status!==u.uQ.Error?this.setState({location:{...window.location},pageResources:t}):(window.history.replaceState({},"",location.href),window.location=e)}))},n.shouldComponentUpdate=function(e,t){return t.pageResources?this.state.pageResources!==t.pageResources||(this.state.pageResources.component!==t.pageResources.component||(this.state.pageResources.json!==t.pageResources.json||(!(this.state.location.key===t.location.key||!t.pageResources.page||!t.pageResources.page.matchPath&&!t.pageResources.page.path)||function(e,t,n){return S(e.props,t)||S(e.state,n)}(this,e,t)))):(this.loadResources(e.location.pathname+e.location.search),!1)},n.render=function(){return this.props.children(this.state)},t}(i.Component),N=n(41505),D=n(24941);const A=new u.kL(E,[],window.pageData);(0,u.N1)(A),A.setApiRunner(r.h);const{render:j,hydrate:T}=(0,D.U)();window.asyncRequires=E,window.___emitter=g.Z,window.___loader=u.jN,o.globalHistory.listen((e=>{e.location.action=e.action})),window.___push=e=>y(e,{replace:!1}),window.___replace=e=>y(e,{replace:!0}),window.___navigate=(e,t)=>y(e,t);const L="gatsby-reload-compilation-hash-match";(0,r.I)("onClientEntry").then((()=>{(0,r.h)("registerServiceWorker").filter(Boolean).length>0&&n(29939);const e=e=>i.createElement(o.BaseContext.Provider,{value:{baseuri:"/",basepath:"/"}},i.createElement(x.Z,e)),t=i.createContext({}),l={renderEnvironment:"browser"};let g=function(e){function n(){return e.apply(this,arguments)||this}return(0,a.Z)(n,e),n.prototype.render=function(){const{children:e}=this.props;return i.createElement(o.Location,null,(n=>{let{location:a}=n;return i.createElement(k,{location:a},(n=>{let{pageResources:a,location:r}=n;const o=(0,u.hs)(),d=(0,u.Nt)();return i.createElement(s.B9.Provider,{value:o},i.createElement(c.Bs.Provider,{value:l},i.createElement(c.m3.Provider,{value:d},i.createElement(c.u0.Provider,{value:a.page.slicesMap},i.createElement(t.Provider,{value:{pageResources:a,location:r}},e)))))}))}))},n}(i.Component),h=function(n){function r(){return n.apply(this,arguments)||this}return(0,a.Z)(r,n),r.prototype.render=function(){return i.createElement(t.Consumer,null,(t=>{let{pageResources:n,location:a}=t;return i.createElement(M,{location:a},i.createElement(d.$C,{location:a,shouldUpdateScroll:v},i.createElement(o.Router,{basepath:"/hds-demo/hds-1817-stepbystep-docs",location:a,id:"gatsby-focus-wrapper"},i.createElement(e,Object.assign({path:"/404.html"===n.page.path||"/500.html"===n.page.path?(0,N.Z)(a.pathname,"/hds-demo/hds-1817-stepbystep-docs"):encodeURI((n.page.matchPath||n.page.path).split("?")[0])},this.props,{location:a,pageResources:n},n.json)))))}))},r}(i.Component);const{pagePath:f,location:p}=window;f&&"/hds-demo/hds-1817-stepbystep-docs"+f!==p.pathname+(f.includes("?")?p.search:"")&&!(A.findMatchPath((0,N.Z)(p.pathname,"/hds-demo/hds-1817-stepbystep-docs"))||f.match(/^\/(404|500)(\/?|.html)$/)||f.match(/^\/offline-plugin-app-shell-fallback\/?$/))&&(0,o.navigate)("/hds-demo/hds-1817-stepbystep-docs"+f+(f.includes("?")?"":p.search)+p.hash,{replace:!0});const m=()=>{try{return sessionStorage}catch{return null}};u.jN.loadPage(p.pathname+p.search).then((e=>{var t;const n=m();if(null!=e&&null!==(t=e.page)&&void 0!==t&&t.webpackCompilationHash&&e.page.webpackCompilationHash!==window.___webpackCompilationHash&&("serviceWorker"in navigator&&null!==navigator.serviceWorker.controller&&"activated"===navigator.serviceWorker.controller.state&&navigator.serviceWorker.controller.postMessage({gatsbyApi:"clearPathResources"}),n)){if(!("1"===n.getItem(L)))return n.setItem(L,"1"),void window.location.reload(!0)}if(n&&n.removeItem(L),!e||e.status===u.uQ.Error){const t="page resources for "+p.pathname+" not found. Not rendering React";if(e&&e.error)throw console.error(t),e.error;throw new Error(t)}const a=(0,r.h)("wrapRootElement",{element:i.createElement(h,null)},i.createElement(h,null),(e=>{let{result:t}=e;return{element:t}})).pop(),o=function(){const e=i.useRef(!1);return i.useEffect((()=>{e.current||(e.current=!0,performance.mark&&performance.mark("onInitialClientRender"),(0,r.h)("onInitialClientRender"))}),[]),i.createElement(g,null,a)},d=document.getElementById("gatsby-focus-wrapper");let s=j;d&&d.children.length&&(s=T);const c=(0,r.h)("replaceHydrateFunction",void 0,s)[0];function l(){const e="undefined"!=typeof window?document.getElementById("___gatsby"):null;c(i.createElement(o,null),e)}const f=document;if("complete"===f.readyState||"loading"!==f.readyState&&!f.documentElement.doScroll)setTimeout((function(){l()}),0);else{const e=function(){f.removeEventListener("DOMContentLoaded",e,!1),window.removeEventListener("load",e,!1),l()};f.addEventListener("DOMContentLoaded",e,!1),window.addEventListener("load",e,!1)}}))}))},90224:function(e,t,n){"use strict";n.r(t);var a=n(67294),r=n(1975),i=n(94779);t.default=e=>{let{location:t}=e;const n=r.ZP.loadPageSync(t.pathname);return n?a.createElement(i.Z,{location:t,pageResources:n,...n.json}):null}},82743:function(e,t,n){var a;e.exports=(a=n(90224))&&a.default||a},24941:function(e,t,n){"use strict";n.d(t,{U:function(){return r}});const a=new WeakMap;function r(){const e=n(20745);return{render:(t,n)=>{let r=a.get(n);r||a.set(n,r=e.createRoot(n)),r.render(t)},hydrate:(t,n)=>e.hydrateRoot(n,t)}}},96073:function(e,t,n){"use strict";n.d(t,{J:function(){return i}});const a=new Map,r=new Map;function i(e){let t=a.get(e);return t||(t=r.get(e.toLowerCase())),t}[].forEach((e=>{e.ignoreCase?r.set(e.fromPath,e):a.set(e.fromPath,e)}))},29939:function(e,t,n){"use strict";n.r(t);var a=n(3092);"https:"!==window.location.protocol&&"localhost"!==window.location.hostname?console.error("Service workers can only be used over HTTPS, or on localhost for development"):"serviceWorker"in navigator&&navigator.serviceWorker.register("/hds-demo/hds-1817-stepbystep-docs/sw.js").then((function(e){e.addEventListener("updatefound",(()=>{(0,a.h)("onServiceWorkerUpdateFound",{serviceWorker:e});const t=e.installing;console.log("installingWorker",t),t.addEventListener("statechange",(()=>{switch(t.state){case"installed":navigator.serviceWorker.controller?(window.___swUpdated=!0,(0,a.h)("onServiceWorkerUpdateReady",{serviceWorker:e}),window.___failedResources&&(console.log("resources failed, SW updated - reloading"),window.location.reload())):(console.log("Content is now available offline!"),(0,a.h)("onServiceWorkerInstalled",{serviceWorker:e}));break;case"redundant":console.error("The installing service worker became redundant."),(0,a.h)("onServiceWorkerRedundant",{serviceWorker:e});break;case"activated":(0,a.h)("onServiceWorkerActive",{serviceWorker:e})}}))}))})).catch((function(e){console.error("Error during service worker registration:",e)}))},38995:function(e,t,n){"use strict";n.d(t,{Bs:function(){return i},Db:function(){return d},m3:function(){return r},u0:function(){return o}});var a=n(67294);const r=a.createContext({}),i=a.createContext({}),o=a.createContext({}),d=a.createContext({})},51757:function(e,t,n){"use strict";n.d(t,{i1:function(){return s},B9:function(){return r},K2:function(){return c}});var a=n(67294);const r=(i="StaticQuery",o={},a.createServerContext?function(e,t){return void 0===t&&(t=null),globalThis.__SERVER_CONTEXT||(globalThis.__SERVER_CONTEXT={}),globalThis.__SERVER_CONTEXT[e]||(globalThis.__SERVER_CONTEXT[e]=a.createServerContext(e,t)),globalThis.__SERVER_CONTEXT[e]}(i,o):a.createContext(o));var i,o;function d(e){let{staticQueryData:t,data:n,query:r,render:i}=e;const o=n?n.data:t[r]&&t[r].data;return a.createElement(a.Fragment,null,o&&i(o),!o&&a.createElement("div",null,"Loading (StaticQuery)"))}const s=e=>{const{data:t,query:n,render:i,children:o}=e;return a.createElement(r.Consumer,null,(e=>a.createElement(d,{data:t,query:n,render:i||o,staticQueryData:e})))},c=e=>{var t;a.useContext;const n=a.useContext(r);if(isNaN(Number(e)))throw new Error("useStaticQuery was called with a string but expects to be called using `graphql`. Try this:\n\nimport { useStaticQuery, graphql } from 'gatsby';\n\nuseStaticQuery(graphql`"+e+"`);\n");if(null!==(t=n[e])&&void 0!==t&&t.data)return n[e].data;throw new Error("The result of this StaticQuery could not be fetched.\n\nThis is likely a bug in Gatsby and if refreshing the page does not fix it, please open an issue in https://github.com/gatsbyjs/gatsby/issues")}},41505:function(e,t,n){"use strict";function a(e,t){return void 0===t&&(t=""),t?e===t?"/":e.startsWith(t+"/")?e.slice(t.length):e:e}n.d(t,{Z:function(){return a}})},47420:function(e,t,n){const a=n(67294),r=n(18607).Z;t.wrapPageElement=e=>{let{element:t,props:n}=e;return n.location.pathname.includes("this-is-hds")?a.createElement(a.Fragment,n,t):a.createElement(r,n,t)}},29608:function(e,t,n){"use strict";n.r(t),n.d(t,{onRouteUpdate:function(){return a}});n(14160),n(20292);const a=function(e,t){let{location:n}=e}},20292:function(e,t,n){"use strict";var a=n(14160)},87495:function(e,t){"use strict";t.__esModule=!0,t.onRouteUpdate=void 0;var n=!0;t.onRouteUpdate=function(e,t){var a=e.location,r=e.prevLocation;if(window._paq){var i,o,d=window,s=d._paq,c=d.dev,u=a&&a.pathname+a.search+a.hash,l=r&&r.pathname+r.search+r.hash,g=t.trackLoad,h=void 0===g||g,f=Math.max(32,0);return setTimeout((function(){var e=document.title;l&&s.push(["setReferrerUrl",l]),s.push(["setCustomUrl",u]),s.push(["setDocumentTitle",e]),s.push(["trackPageView"]),s.push(["enableLinkTracking"]),s.push(["trackAllContentImpressions"]),c&&console.debug("[Matomo] Page view for: "+u+" - "+e)}),f),n&&(n=!1,h&&s.push(["trackEvent","javascript","load","duration",(i=window.start||new Date,o=(new Date).getTime()-i.getTime(),0===o?null:o)]),c&&console.debug("[Matomo] Tracking duration for: "+u)),null}}},89650:function(e,t){"use strict";var n=0,a=function(e){var t=window.decodeURI(e.replace("#",""));if(""!==t){var a=document.getElementById(t);if(a){var r=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop,i=document.documentElement.clientTop||document.body.clientTop||0,o=window.getComputedStyle(a),d=o.getPropertyValue("scroll-margin-top")||o.getPropertyValue("scroll-snap-margin-top")||"0px";return a.getBoundingClientRect().top+r-parseInt(d,10)-i-n}}return null};t.onInitialClientRender=function(e,t){t.offsetY&&(n=t.offsetY),requestAnimationFrame((function(){var e=a(window.location.hash);null!==e&&window.scrollTo(0,e)}))},t.shouldUpdateScroll=function(e){var t=e.routerProps.location,n=a(t.hash);return null===n||[0,n]}},80699:function(e,t,n){"use strict";var a=n(67294),r=n(21662);t.Z=e=>{let{href:t,children:n,openInNewTab:i,openInNewTabAriaLabel:o,openInExternalDomainAriaLabel:d,size:s}=e;const c=i?{openInNewTab:i,openInNewTabAriaLabel:o||"Opens in a new tab."}:{};return a.createElement(r.L,Object.assign({href:t,openInExternalDomainAriaLabel:d||"Opens a different website.",external:!0},c,{size:s}),n)}},1076:function(e,t,n){"use strict";var a=n(67294),r=n(21662),i=n(14160);t.Z=e=>{let{href:t,children:n,openInNewTab:o,openInNewTabAriaLabel:d,size:s}=e;const c=o?{openInNewTab:o,openInNewTabAriaLabel:d||"Opens in a new tab."}:{};return a.createElement(r.L,Object.assign({href:(0,i.withPrefix)(t)},c,{size:s,onClick:e=>{e.preventDefault(),(0,i.navigate)(t)}}),n)}},50246:function(e,t,n){"use strict";n.d(t,{Ee:function(){return pe},FY:function(){return se},ZP:function(){return ie}});var a=n(67294),r=n(11151),i=n(32062),o=n.n(i),d=function(){var e=/(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i,t=0,n={},a={util:{encode:function e(t){return t instanceof r?new r(t.type,e(t.content),t.alias):Array.isArray(t)?t.map(e):t.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).slice(8,-1)},objId:function(e){return e.__id||Object.defineProperty(e,"__id",{value:++t}),e.__id},clone:function e(t,n){var r,i;switch(n=n||{},a.util.type(t)){case"Object":if(i=a.util.objId(t),n[i])return n[i];for(var o in r={},n[i]=r,t)t.hasOwnProperty(o)&&(r[o]=e(t[o],n));return r;case"Array":return i=a.util.objId(t),n[i]?n[i]:(r=[],n[i]=r,t.forEach((function(t,a){r[a]=e(t,n)})),r);default:return t}},getLanguage:function(t){for(;t;){var n=e.exec(t.className);if(n)return n[1].toLowerCase();t=t.parentElement}return"none"},setLanguage:function(t,n){t.className=t.className.replace(RegExp(e,"gi"),""),t.classList.add("language-"+n)},isActive:function(e,t,n){for(var a="no-"+t;e;){var r=e.classList;if(r.contains(t))return!0;if(r.contains(a))return!1;e=e.parentElement}return!!n}},languages:{plain:n,plaintext:n,text:n,txt:n,extend:function(e,t){var n=a.util.clone(a.languages[e]);for(var r in t)n[r]=t[r];return n},insertBefore:function(e,t,n,r){var i=(r=r||a.languages)[e],o={};for(var d in i)if(i.hasOwnProperty(d)){if(d==t)for(var s in n)n.hasOwnProperty(s)&&(o[s]=n[s]);n.hasOwnProperty(d)||(o[d]=i[d])}var c=r[e];return r[e]=o,a.languages.DFS(a.languages,(function(t,n){n===c&&t!=e&&(this[t]=o)})),o},DFS:function e(t,n,r,i){i=i||{};var o=a.util.objId;for(var d in t)if(t.hasOwnProperty(d)){n.call(t,d,t[d],r||d);var s=t[d],c=a.util.type(s);"Object"!==c||i[o(s)]?"Array"!==c||i[o(s)]||(i[o(s)]=!0,e(s,n,d,i)):(i[o(s)]=!0,e(s,n,null,i))}}},plugins:{},highlight:function(e,t,n){var i={code:e,grammar:t,language:n};return a.hooks.run("before-tokenize",i),i.tokens=a.tokenize(i.code,i.grammar),a.hooks.run("after-tokenize",i),r.stringify(a.util.encode(i.tokens),i.language)},tokenize:function(e,t){var n=t.rest;if(n){for(var a in n)t[a]=n[a];delete t.rest}var r=new d;return s(r,r.head,e),o(e,r,t,r.head,0),function(e){var t=[],n=e.head.next;for(;n!==e.tail;)t.push(n.value),n=n.next;return t}(r)},hooks:{all:{},add:function(e,t){var n=a.hooks.all;n[e]=n[e]||[],n[e].push(t)},run:function(e,t){var n=a.hooks.all[e];if(n&&n.length)for(var r,i=0;r=n[i++];)r(t)}},Token:r};function r(e,t,n,a){this.type=e,this.content=t,this.alias=n,this.length=0|(a||"").length}function i(e,t,n,a){e.lastIndex=t;var r=e.exec(n);if(r&&a&&r[1]){var i=r[1].length;r.index+=i,r[0]=r[0].slice(i)}return r}function o(e,t,n,d,u,l){for(var g in n)if(n.hasOwnProperty(g)&&n[g]){var h=n[g];h=Array.isArray(h)?h:[h];for(var f=0;f<h.length;++f){if(l&&l.cause==g+","+f)return;var p=h[f],m=p.inside,R=!!p.lookbehind,b=!!p.greedy,y=p.alias;if(b&&!p.pattern.global){var v=p.pattern.toString().match(/[imsuy]*$/)[0];p.pattern=RegExp(p.pattern.source,v+"g")}for(var _=p.pattern||p,w=d.next,M=u;w!==t.tail&&!(l&&M>=l.reach);M+=w.value.length,w=w.next){var x=w.value;if(t.length>e.length)return;if(!(x instanceof r)){var E,S=1;if(b){if(!(E=i(_,M,e,R))||E.index>=e.length)break;var k=E.index,N=E.index+E[0].length,D=M;for(D+=w.value.length;k>=D;)D+=(w=w.next).value.length;if(M=D-=w.value.length,w.value instanceof r)continue;for(var A=w;A!==t.tail&&(D<N||"string"==typeof A.value);A=A.next)S++,D+=A.value.length;S--,x=e.slice(M,D),E.index-=M}else if(!(E=i(_,0,x,R)))continue;k=E.index;var j=E[0],T=x.slice(0,k),L=x.slice(k+j.length),I=M+x.length;l&&I>l.reach&&(l.reach=I);var C=w.prev;if(T&&(C=s(t,C,T),M+=T.length),c(t,C,S),w=s(t,C,new r(g,m?a.tokenize(j,m):j,y,j)),L&&s(t,w,L),S>1){var O={cause:g+","+f,reach:I};o(e,t,n,w.prev,M,O),l&&O.reach>l.reach&&(l.reach=O.reach)}}}}}}function d(){var e={value:null,prev:null,next:null},t={value:null,prev:e,next:null};e.next=t,this.head=e,this.tail=t,this.length=0}function s(e,t,n){var a=t.next,r={value:n,prev:t,next:a};return t.next=r,a.prev=r,e.length++,r}function c(e,t,n){for(var a=t.next,r=0;r<n&&a!==e.tail;r++)a=a.next;t.next=a,a.prev=t,e.length-=r}return r.stringify=function e(t,n){if("string"==typeof t)return t;if(Array.isArray(t)){var r="";return t.forEach((function(t){r+=e(t,n)})),r}var i={type:t.type,content:e(t.content,n),tag:"span",classes:["token",t.type],attributes:{},language:n},o=t.alias;o&&(Array.isArray(o)?Array.prototype.push.apply(i.classes,o):i.classes.push(o)),a.hooks.run("wrap",i);var d="";for(var s in i.attributes)d+=" "+s+'="'+(i.attributes[s]||"").replace(/"/g,"&quot;")+'"';return"<"+i.tag+' class="'+i.classes.join(" ")+'"'+d+">"+i.content+"</"+i.tag+">"},a}(),s=d;d.default=d,s.languages.markup={comment:{pattern:/<!--(?:(?!<!--)[\s\S])*?-->/,greedy:!0},prolog:{pattern:/<\?[\s\S]+?\?>/,greedy:!0},doctype:{pattern:/<!DOCTYPE(?:[^>"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|<!--(?:[^-]|-(?!->))*-->)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(^[^\[]*\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^<!|>$|[[\]]/,"doctype-tag":/^DOCTYPE/i,name:/[^\s<>'"]+/}},cdata:{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,greedy:!0},tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"special-attr":[],"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},s.languages.markup.tag.inside["attr-value"].inside.entity=s.languages.markup.entity,s.languages.markup.doctype.inside["internal-subset"].inside=s.languages.markup,s.hooks.add("wrap",(function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&amp;/,"&"))})),Object.defineProperty(s.languages.markup.tag,"addInlined",{value:function(e,t){var n={};n["language-"+t]={pattern:/(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,lookbehind:!0,inside:s.languages[t]},n.cdata=/^<!\[CDATA\[|\]\]>$/i;var a={"included-cdata":{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,inside:n}};a["language-"+t]={pattern:/[\s\S]+/,inside:s.languages[t]};var r={};r[e]={pattern:RegExp(/(<__[^>]*>)(?:<!\[CDATA\[(?:[^\]]|\](?!\]>))*\]\]>|(?!<!\[CDATA\[)[\s\S])*?(?=<\/__>)/.source.replace(/__/g,(function(){return e})),"i"),lookbehind:!0,greedy:!0,inside:a},s.languages.insertBefore("markup","cdata",r)}}),Object.defineProperty(s.languages.markup.tag,"addAttribute",{value:function(e,t){s.languages.markup.tag.inside["special-attr"].push({pattern:RegExp(/(^|["'\s])/.source+"(?:"+e+")"+/\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))/.source,"i"),lookbehind:!0,inside:{"attr-name":/^[^\s=]+/,"attr-value":{pattern:/=[\s\S]+/,inside:{value:{pattern:/(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,lookbehind:!0,alias:[t,"language-"+t],inside:s.languages[t]},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}}}})}}),s.languages.html=s.languages.markup,s.languages.mathml=s.languages.markup,s.languages.svg=s.languages.markup,s.languages.xml=s.languages.extend("markup",{}),s.languages.ssml=s.languages.xml,s.languages.atom=s.languages.xml,s.languages.rss=s.languages.xml,function(e){var t="\\b(?:BASH|BASHOPTS|BASH_ALIASES|BASH_ARGC|BASH_ARGV|BASH_CMDS|BASH_COMPLETION_COMPAT_DIR|BASH_LINENO|BASH_REMATCH|BASH_SOURCE|BASH_VERSINFO|BASH_VERSION|COLORTERM|COLUMNS|COMP_WORDBREAKS|DBUS_SESSION_BUS_ADDRESS|DEFAULTS_PATH|DESKTOP_SESSION|DIRSTACK|DISPLAY|EUID|GDMSESSION|GDM_LANG|GNOME_KEYRING_CONTROL|GNOME_KEYRING_PID|GPG_AGENT_INFO|GROUPS|HISTCONTROL|HISTFILE|HISTFILESIZE|HISTSIZE|HOME|HOSTNAME|HOSTTYPE|IFS|INSTANCE|JOB|LANG|LANGUAGE|LC_ADDRESS|LC_ALL|LC_IDENTIFICATION|LC_MEASUREMENT|LC_MONETARY|LC_NAME|LC_NUMERIC|LC_PAPER|LC_TELEPHONE|LC_TIME|LESSCLOSE|LESSOPEN|LINES|LOGNAME|LS_COLORS|MACHTYPE|MAILCHECK|MANDATORY_PATH|NO_AT_BRIDGE|OLDPWD|OPTERR|OPTIND|ORBIT_SOCKETDIR|OSTYPE|PAPERSIZE|PATH|PIPESTATUS|PPID|PS1|PS2|PS3|PS4|PWD|RANDOM|REPLY|SECONDS|SELINUX_INIT|SESSION|SESSIONTYPE|SESSION_MANAGER|SHELL|SHELLOPTS|SHLVL|SSH_AUTH_SOCK|TERM|UID|UPSTART_EVENTS|UPSTART_INSTANCE|UPSTART_JOB|UPSTART_SESSION|USER|WINDOWID|XAUTHORITY|XDG_CONFIG_DIRS|XDG_CURRENT_DESKTOP|XDG_DATA_DIRS|XDG_GREETER_DATA_DIR|XDG_MENU_PREFIX|XDG_RUNTIME_DIR|XDG_SEAT|XDG_SEAT_PATH|XDG_SESSION_DESKTOP|XDG_SESSION_ID|XDG_SESSION_PATH|XDG_SESSION_TYPE|XDG_VTNR|XMODIFIERS)\\b",n={pattern:/(^(["']?)\w+\2)[ \t]+\S.*/,lookbehind:!0,alias:"punctuation",inside:null},a={bash:n,environment:{pattern:RegExp("\\$"+t),alias:"constant"},variable:[{pattern:/\$?\(\([\s\S]+?\)\)/,greedy:!0,inside:{variable:[{pattern:/(^\$\(\([\s\S]+)\)\)/,lookbehind:!0},/^\$\(\(/],number:/\b0x[\dA-Fa-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:[Ee]-?\d+)?/,operator:/--|\+\+|\*\*=?|<<=?|>>=?|&&|\|\||[=!+\-*/%<>^&|]=?|[?~:]/,punctuation:/\(\(?|\)\)?|,|;/}},{pattern:/\$\((?:\([^)]+\)|[^()])+\)|`[^`]+`/,greedy:!0,inside:{variable:/^\$\(|^`|\)$|`$/}},{pattern:/\$\{[^}]+\}/,greedy:!0,inside:{operator:/:[-=?+]?|[!\/]|##?|%%?|\^\^?|,,?/,punctuation:/[\[\]]/,environment:{pattern:RegExp("(\\{)"+t),lookbehind:!0,alias:"constant"}}},/\$(?:\w+|[#?*!@$])/],entity:/\\(?:[abceEfnrtv\\"]|O?[0-7]{1,3}|U[0-9a-fA-F]{8}|u[0-9a-fA-F]{4}|x[0-9a-fA-F]{1,2})/};e.languages.bash={shebang:{pattern:/^#!\s*\/.*/,alias:"important"},comment:{pattern:/(^|[^"{\\$])#.*/,lookbehind:!0},"function-name":[{pattern:/(\bfunction\s+)[\w-]+(?=(?:\s*\(?:\s*\))?\s*\{)/,lookbehind:!0,alias:"function"},{pattern:/\b[\w-]+(?=\s*\(\s*\)\s*\{)/,alias:"function"}],"for-or-select":{pattern:/(\b(?:for|select)\s+)\w+(?=\s+in\s)/,alias:"variable",lookbehind:!0},"assign-left":{pattern:/(^|[\s;|&]|[<>]\()\w+(?=\+?=)/,inside:{environment:{pattern:RegExp("(^|[\\s;|&]|[<>]\\()"+t),lookbehind:!0,alias:"constant"}},alias:"variable",lookbehind:!0},string:[{pattern:/((?:^|[^<])<<-?\s*)(\w+)\s[\s\S]*?(?:\r?\n|\r)\2/,lookbehind:!0,greedy:!0,inside:a},{pattern:/((?:^|[^<])<<-?\s*)(["'])(\w+)\2\s[\s\S]*?(?:\r?\n|\r)\3/,lookbehind:!0,greedy:!0,inside:{bash:n}},{pattern:/(^|[^\\](?:\\\\)*)"(?:\\[\s\S]|\$\([^)]+\)|\$(?!\()|`[^`]+`|[^"\\`$])*"/,lookbehind:!0,greedy:!0,inside:a},{pattern:/(^|[^$\\])'[^']*'/,lookbehind:!0,greedy:!0},{pattern:/\$'(?:[^'\\]|\\[\s\S])*'/,greedy:!0,inside:{entity:a.entity}}],environment:{pattern:RegExp("\\$?"+t),alias:"constant"},variable:a.variable,function:{pattern:/(^|[\s;|&]|[<>]\()(?:add|apropos|apt|apt-cache|apt-get|aptitude|aspell|automysqlbackup|awk|basename|bash|bc|bconsole|bg|bzip2|cal|cat|cfdisk|chgrp|chkconfig|chmod|chown|chroot|cksum|clear|cmp|column|comm|composer|cp|cron|crontab|csplit|curl|cut|date|dc|dd|ddrescue|debootstrap|df|diff|diff3|dig|dir|dircolors|dirname|dirs|dmesg|docker|docker-compose|du|egrep|eject|env|ethtool|expand|expect|expr|fdformat|fdisk|fg|fgrep|file|find|fmt|fold|format|free|fsck|ftp|fuser|gawk|git|gparted|grep|groupadd|groupdel|groupmod|groups|grub-mkconfig|gzip|halt|head|hg|history|host|hostname|htop|iconv|id|ifconfig|ifdown|ifup|import|install|ip|jobs|join|kill|killall|less|link|ln|locate|logname|logrotate|look|lpc|lpr|lprint|lprintd|lprintq|lprm|ls|lsof|lynx|make|man|mc|mdadm|mkconfig|mkdir|mke2fs|mkfifo|mkfs|mkisofs|mknod|mkswap|mmv|more|most|mount|mtools|mtr|mutt|mv|nano|nc|netstat|nice|nl|node|nohup|notify-send|npm|nslookup|op|open|parted|passwd|paste|pathchk|ping|pkill|pnpm|podman|podman-compose|popd|pr|printcap|printenv|ps|pushd|pv|quota|quotacheck|quotactl|ram|rar|rcp|reboot|remsync|rename|renice|rev|rm|rmdir|rpm|rsync|scp|screen|sdiff|sed|sendmail|seq|service|sftp|sh|shellcheck|shuf|shutdown|sleep|slocate|sort|split|ssh|stat|strace|su|sudo|sum|suspend|swapon|sync|tac|tail|tar|tee|time|timeout|top|touch|tr|traceroute|tsort|tty|umount|uname|unexpand|uniq|units|unrar|unshar|unzip|update-grub|uptime|useradd|userdel|usermod|users|uudecode|uuencode|v|vcpkg|vdir|vi|vim|virsh|vmstat|wait|watch|wc|wget|whereis|which|who|whoami|write|xargs|xdg-open|yarn|yes|zenity|zip|zsh|zypper)(?=$|[)\s;|&])/,lookbehind:!0},keyword:{pattern:/(^|[\s;|&]|[<>]\()(?:case|do|done|elif|else|esac|fi|for|function|if|in|select|then|until|while)(?=$|[)\s;|&])/,lookbehind:!0},builtin:{pattern:/(^|[\s;|&]|[<>]\()(?:\.|:|alias|bind|break|builtin|caller|cd|command|continue|declare|echo|enable|eval|exec|exit|export|getopts|hash|help|let|local|logout|mapfile|printf|pwd|read|readarray|readonly|return|set|shift|shopt|source|test|times|trap|type|typeset|ulimit|umask|unalias|unset)(?=$|[)\s;|&])/,lookbehind:!0,alias:"class-name"},boolean:{pattern:/(^|[\s;|&]|[<>]\()(?:false|true)(?=$|[)\s;|&])/,lookbehind:!0},"file-descriptor":{pattern:/\B&\d\b/,alias:"important"},operator:{pattern:/\d?<>|>\||\+=|=[=~]?|!=?|<<[<-]?|[&\d]?>>|\d[<>]&?|[<>][&=]?|&[>&]?|\|[&|]?/,inside:{"file-descriptor":{pattern:/^\d/,alias:"important"}}},punctuation:/\$?\(\(?|\)\)?|\.\.|[{}[\];\\]/,number:{pattern:/(^|\s)(?:[1-9]\d*|0)(?:[.,]\d+)?\b/,lookbehind:!0}},n.inside=e.languages.bash;for(var r=["comment","function-name","for-or-select","assign-left","string","environment","function","keyword","builtin","boolean","file-descriptor","operator","punctuation","number"],i=a.variable[1].inside,o=0;o<r.length;o++)i[r[o]]=e.languages.bash[r[o]];e.languages.shell=e.languages.bash}(s),s.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0,greedy:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/(\b(?:class|extends|implements|instanceof|interface|new|trait)\s+|\bcatch\s+\()[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:break|catch|continue|do|else|finally|for|function|if|in|instanceof|new|null|return|throw|try|while)\b/,boolean:/\b(?:false|true)\b/,function:/\b\w+(?=\()/,number:/\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/},s.languages.c=s.languages.extend("clike",{comment:{pattern:/\/\/(?:[^\r\n\\]|\\(?:\r\n?|\n|(?![\r\n])))*|\/\*[\s\S]*?(?:\*\/|$)/,greedy:!0},string:{pattern:/"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"/,greedy:!0},"class-name":{pattern:/(\b(?:enum|struct)\s+(?:__attribute__\s*\(\([\s\S]*?\)\)\s*)?)\w+|\b[a-z]\w*_t\b/,lookbehind:!0},keyword:/\b(?:_Alignas|_Alignof|_Atomic|_Bool|_Complex|_Generic|_Imaginary|_Noreturn|_Static_assert|_Thread_local|__attribute__|asm|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|inline|int|long|register|return|short|signed|sizeof|static|struct|switch|typedef|typeof|union|unsigned|void|volatile|while)\b/,function:/\b[a-z_]\w*(?=\s*\()/i,number:/(?:\b0x(?:[\da-f]+(?:\.[\da-f]*)?|\.[\da-f]+)(?:p[+-]?\d+)?|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?)[ful]{0,4}/i,operator:/>>=?|<<=?|->|([-+&|:])\1|[?:~]|[-+*/%&|^!=<>]=?/}),s.languages.insertBefore("c","string",{char:{pattern:/'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n]){0,32}'/,greedy:!0}}),s.languages.insertBefore("c","string",{macro:{pattern:/(^[\t ]*)#\s*[a-z](?:[^\r\n\\/]|\/(?!\*)|\/\*(?:[^*]|\*(?!\/))*\*\/|\\(?:\r\n|[\s\S]))*/im,lookbehind:!0,greedy:!0,alias:"property",inside:{string:[{pattern:/^(#\s*include\s*)<[^>]+>/,lookbehind:!0},s.languages.c.string],char:s.languages.c.char,comment:s.languages.c.comment,"macro-name":[{pattern:/(^#\s*define\s+)\w+\b(?!\()/i,lookbehind:!0},{pattern:/(^#\s*define\s+)\w+\b(?=\()/i,lookbehind:!0,alias:"function"}],directive:{pattern:/^(#\s*)[a-z]+/,lookbehind:!0,alias:"keyword"},"directive-hash":/^#/,punctuation:/##|\\(?=[\r\n])/,expression:{pattern:/\S[\s\S]*/,inside:s.languages.c}}}}),s.languages.insertBefore("c","function",{constant:/\b(?:EOF|NULL|SEEK_CUR|SEEK_END|SEEK_SET|__DATE__|__FILE__|__LINE__|__TIMESTAMP__|__TIME__|__func__|stderr|stdin|stdout)\b/}),delete s.languages.c.boolean,function(e){var t=/\b(?:alignas|alignof|asm|auto|bool|break|case|catch|char|char16_t|char32_t|char8_t|class|co_await|co_return|co_yield|compl|concept|const|const_cast|consteval|constexpr|constinit|continue|decltype|default|delete|do|double|dynamic_cast|else|enum|explicit|export|extern|final|float|for|friend|goto|if|import|inline|int|int16_t|int32_t|int64_t|int8_t|long|module|mutable|namespace|new|noexcept|nullptr|operator|override|private|protected|public|register|reinterpret_cast|requires|return|short|signed|sizeof|static|static_assert|static_cast|struct|switch|template|this|thread_local|throw|try|typedef|typeid|typename|uint16_t|uint32_t|uint64_t|uint8_t|union|unsigned|using|virtual|void|volatile|wchar_t|while)\b/,n=/\b(?!<keyword>)\w+(?:\s*\.\s*\w+)*\b/.source.replace(/<keyword>/g,(function(){return t.source}));e.languages.cpp=e.languages.extend("c",{"class-name":[{pattern:RegExp(/(\b(?:class|concept|enum|struct|typename)\s+)(?!<keyword>)\w+/.source.replace(/<keyword>/g,(function(){return t.source}))),lookbehind:!0},/\b[A-Z]\w*(?=\s*::\s*\w+\s*\()/,/\b[A-Z_]\w*(?=\s*::\s*~\w+\s*\()/i,/\b\w+(?=\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>\s*::\s*\w+\s*\()/],keyword:t,number:{pattern:/(?:\b0b[01']+|\b0x(?:[\da-f']+(?:\.[\da-f']*)?|\.[\da-f']+)(?:p[+-]?[\d']+)?|(?:\b[\d']+(?:\.[\d']*)?|\B\.[\d']+)(?:e[+-]?[\d']+)?)[ful]{0,4}/i,greedy:!0},operator:/>>=?|<<=?|->|--|\+\+|&&|\|\||[?:~]|<=>|[-+*/%&|^!=<>]=?|\b(?:and|and_eq|bitand|bitor|not|not_eq|or|or_eq|xor|xor_eq)\b/,boolean:/\b(?:false|true)\b/}),e.languages.insertBefore("cpp","string",{module:{pattern:RegExp(/(\b(?:import|module)\s+)/.source+"(?:"+/"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|<[^<>\r\n]*>/.source+"|"+/<mod-name>(?:\s*:\s*<mod-name>)?|:\s*<mod-name>/.source.replace(/<mod-name>/g,(function(){return n}))+")"),lookbehind:!0,greedy:!0,inside:{string:/^[<"][\s\S]+/,operator:/:/,punctuation:/\./}},"raw-string":{pattern:/R"([^()\\ ]{0,16})\([\s\S]*?\)\1"/,alias:"string",greedy:!0}}),e.languages.insertBefore("cpp","keyword",{"generic-function":{pattern:/\b(?!operator\b)[a-z_]\w*\s*<(?:[^<>]|<[^<>]*>)*>(?=\s*\()/i,inside:{function:/^\w+/,generic:{pattern:/<[\s\S]+/,alias:"class-name",inside:e.languages.cpp}}}}),e.languages.insertBefore("cpp","operator",{"double-colon":{pattern:/::/,alias:"punctuation"}}),e.languages.insertBefore("cpp","class-name",{"base-clause":{pattern:/(\b(?:class|struct)\s+\w+\s*:\s*)[^;{}"'\s]+(?:\s+[^;{}"'\s]+)*(?=\s*[;{])/,lookbehind:!0,greedy:!0,inside:e.languages.extend("cpp",{})}}),e.languages.insertBefore("inside","double-colon",{"class-name":/\b[a-z_]\w*\b(?!\s*::)/i},e.languages.cpp["base-clause"])}(s),function(e){var t=/(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;e.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-](?:[^;{\s]|\s+(?![\s{]))*(?:;|(?=\s*\{))/,inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,lookbehind:!0,alias:"selector"},keyword:{pattern:/(^|[^\w-])(?:and|not|only|or)(?![\w-])/,lookbehind:!0}}},url:{pattern:RegExp("\\burl\\((?:"+t.source+"|"+/(?:[^\\\r\n()"']|\\[\s\S])*/.source+")\\)","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^\(|\)$/,string:{pattern:RegExp("^"+t.source+"$"),alias:"url"}}},selector:{pattern:RegExp("(^|[{}\\s])[^{}\\s](?:[^{};\"'\\s]|\\s+(?![\\s{])|"+t.source+")*(?=\\s*\\{)"),lookbehind:!0},string:{pattern:t,greedy:!0},property:{pattern:/(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,lookbehind:!0},important:/!important\b/i,function:{pattern:/(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i,lookbehind:!0},punctuation:/[(){};:,]/},e.languages.css.atrule.inside.rest=e.languages.css;var n=e.languages.markup;n&&(n.tag.addInlined("style","css"),n.tag.addAttribute("style","css"))}(s),function(e){var t,n=/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/;e.languages.css.selector={pattern:e.languages.css.selector.pattern,lookbehind:!0,inside:t={"pseudo-element":/:(?:after|before|first-letter|first-line|selection)|::[-\w]+/,"pseudo-class":/:[-\w]+/,class:/\.[-\w]+/,id:/#[-\w]+/,attribute:{pattern:RegExp("\\[(?:[^[\\]\"']|"+n.source+")*\\]"),greedy:!0,inside:{punctuation:/^\[|\]$/,"case-sensitivity":{pattern:/(\s)[si]$/i,lookbehind:!0,alias:"keyword"},namespace:{pattern:/^(\s*)(?:(?!\s)[-*\w\xA0-\uFFFF])*\|(?!=)/,lookbehind:!0,inside:{punctuation:/\|$/}},"attr-name":{pattern:/^(\s*)(?:(?!\s)[-\w\xA0-\uFFFF])+/,lookbehind:!0},"attr-value":[n,{pattern:/(=\s*)(?:(?!\s)[-\w\xA0-\uFFFF])+(?=\s*$)/,lookbehind:!0}],operator:/[|~*^$]?=/}},"n-th":[{pattern:/(\(\s*)[+-]?\d*[\dn](?:\s*[+-]\s*\d+)?(?=\s*\))/,lookbehind:!0,inside:{number:/[\dn]+/,operator:/[+-]/}},{pattern:/(\(\s*)(?:even|odd)(?=\s*\))/i,lookbehind:!0}],combinator:/>|\+|~|\|\|/,punctuation:/[(),]/}},e.languages.css.atrule.inside["selector-function-argument"].inside=t,e.languages.insertBefore("css","property",{variable:{pattern:/(^|[^-\w\xA0-\uFFFF])--(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*/i,lookbehind:!0}});var a={pattern:/(\b\d+)(?:%|[a-z]+(?![\w-]))/,lookbehind:!0},r={pattern:/(^|[^\w.-])-?(?:\d+(?:\.\d+)?|\.\d+)/,lookbehind:!0};e.languages.insertBefore("css","function",{operator:{pattern:/(\s)[+\-*\/](?=\s)/,lookbehind:!0},hexcode:{pattern:/\B#[\da-f]{3,8}\b/i,alias:"color"},color:[{pattern:/(^|[^\w-])(?:AliceBlue|AntiqueWhite|Aqua|Aquamarine|Azure|Beige|Bisque|Black|BlanchedAlmond|Blue|BlueViolet|Brown|BurlyWood|CadetBlue|Chartreuse|Chocolate|Coral|CornflowerBlue|Cornsilk|Crimson|Cyan|DarkBlue|DarkCyan|DarkGoldenRod|DarkGr[ae]y|DarkGreen|DarkKhaki|DarkMagenta|DarkOliveGreen|DarkOrange|DarkOrchid|DarkRed|DarkSalmon|DarkSeaGreen|DarkSlateBlue|DarkSlateGr[ae]y|DarkTurquoise|DarkViolet|DeepPink|DeepSkyBlue|DimGr[ae]y|DodgerBlue|FireBrick|FloralWhite|ForestGreen|Fuchsia|Gainsboro|GhostWhite|Gold|GoldenRod|Gr[ae]y|Green|GreenYellow|HoneyDew|HotPink|IndianRed|Indigo|Ivory|Khaki|Lavender|LavenderBlush|LawnGreen|LemonChiffon|LightBlue|LightCoral|LightCyan|LightGoldenRodYellow|LightGr[ae]y|LightGreen|LightPink|LightSalmon|LightSeaGreen|LightSkyBlue|LightSlateGr[ae]y|LightSteelBlue|LightYellow|Lime|LimeGreen|Linen|Magenta|Maroon|MediumAquaMarine|MediumBlue|MediumOrchid|MediumPurple|MediumSeaGreen|MediumSlateBlue|MediumSpringGreen|MediumTurquoise|MediumVioletRed|MidnightBlue|MintCream|MistyRose|Moccasin|NavajoWhite|Navy|OldLace|Olive|OliveDrab|Orange|OrangeRed|Orchid|PaleGoldenRod|PaleGreen|PaleTurquoise|PaleVioletRed|PapayaWhip|PeachPuff|Peru|Pink|Plum|PowderBlue|Purple|Red|RosyBrown|RoyalBlue|SaddleBrown|Salmon|SandyBrown|SeaGreen|SeaShell|Sienna|Silver|SkyBlue|SlateBlue|SlateGr[ae]y|Snow|SpringGreen|SteelBlue|Tan|Teal|Thistle|Tomato|Transparent|Turquoise|Violet|Wheat|White|WhiteSmoke|Yellow|YellowGreen)(?![\w-])/i,lookbehind:!0},{pattern:/\b(?:hsl|rgb)\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*\)\B|\b(?:hsl|rgb)a\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*,\s*(?:0|0?\.\d+|1)\s*\)\B/i,inside:{unit:a,number:r,function:/[\w-]+(?=\()/,punctuation:/[(),]/}}],entity:/\\[\da-f]{1,8}/i,unit:a,number:r})}(s),s.languages.javascript=s.languages.extend("clike",{"class-name":[s.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,lookbehind:!0}],keyword:[{pattern:/((?:^|\})\s*)catch\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:{pattern:RegExp(/(^|[^\w$])/.source+"(?:"+/NaN|Infinity/.source+"|"+/0[bB][01]+(?:_[01]+)*n?/.source+"|"+/0[oO][0-7]+(?:_[0-7]+)*n?/.source+"|"+/0[xX][\dA-Fa-f]+(?:_[\dA-Fa-f]+)*n?/.source+"|"+/\d+(?:_\d+)*n/.source+"|"+/(?:\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\.\d+(?:_\d+)*)(?:[Ee][+-]?\d+(?:_\d+)*)?/.source+")"+/(?![\w$])/.source),lookbehind:!0},operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),s.languages.javascript["class-name"][0].pattern=/(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/,s.languages.insertBefore("javascript","keyword",{regex:{pattern:/((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)\/(?:\[(?:[^\]\\\r\n]|\\.)*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/,lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:s.languages.regex},"regex-delimiter":/^\/|\/$/,"regex-flags":/^[a-z]+$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:s.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:s.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:s.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:s.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),s.languages.insertBefore("javascript","string",{hashbang:{pattern:/^#!.*/,greedy:!0,alias:"comment"},"template-string":{pattern:/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:s.languages.javascript}},string:/[\s\S]+/}},"string-property":{pattern:/((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,lookbehind:!0,greedy:!0,alias:"property"}}),s.languages.insertBefore("javascript","operator",{"literal-property":{pattern:/((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,lookbehind:!0,alias:"property"}}),s.languages.markup&&(s.languages.markup.tag.addInlined("script","javascript"),s.languages.markup.tag.addAttribute(/on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)/.source,"javascript")),s.languages.js=s.languages.javascript,function(e){var t=/#(?!\{).+/,n={pattern:/#\{[^}]+\}/,alias:"variable"};e.languages.coffeescript=e.languages.extend("javascript",{comment:t,string:[{pattern:/'(?:\\[\s\S]|[^\\'])*'/,greedy:!0},{pattern:/"(?:\\[\s\S]|[^\\"])*"/,greedy:!0,inside:{interpolation:n}}],keyword:/\b(?:and|break|by|catch|class|continue|debugger|delete|do|each|else|extend|extends|false|finally|for|if|in|instanceof|is|isnt|let|loop|namespace|new|no|not|null|of|off|on|or|own|return|super|switch|then|this|throw|true|try|typeof|undefined|unless|until|when|while|window|with|yes|yield)\b/,"class-member":{pattern:/@(?!\d)\w+/,alias:"variable"}}),e.languages.insertBefore("coffeescript","comment",{"multiline-comment":{pattern:/###[\s\S]+?###/,alias:"comment"},"block-regex":{pattern:/\/{3}[\s\S]*?\/{3}/,alias:"regex",inside:{comment:t,interpolation:n}}}),e.languages.insertBefore("coffeescript","string",{"inline-javascript":{pattern:/`(?:\\[\s\S]|[^\\`])*`/,inside:{delimiter:{pattern:/^`|`$/,alias:"punctuation"},script:{pattern:/[\s\S]+/,alias:"language-javascript",inside:e.languages.javascript}}},"multiline-string":[{pattern:/'''[\s\S]*?'''/,greedy:!0,alias:"string"},{pattern:/"""[\s\S]*?"""/,greedy:!0,alias:"string",inside:{interpolation:n}}]}),e.languages.insertBefore("coffeescript","keyword",{property:/(?!\d)\w+(?=\s*:(?!:))/}),delete e.languages.coffeescript["template-string"],e.languages.coffee=e.languages.coffeescript}(s),function(e){var t=/[*&][^\s[\]{},]+/,n=/!(?:<[\w\-%#;/?:@&=+$,.!~*'()[\]]+>|(?:[a-zA-Z\d-]*!)?[\w\-%#;/?:@&=+$.~*'()]+)?/,a="(?:"+n.source+"(?:[ \t]+"+t.source+")?|"+t.source+"(?:[ \t]+"+n.source+")?)",r=/(?:[^\s\x00-\x08\x0e-\x1f!"#%&'*,\-:>?@[\]`{|}\x7f-\x84\x86-\x9f\ud800-\udfff\ufffe\uffff]|[?:-]<PLAIN>)(?:[ \t]*(?:(?![#:])<PLAIN>|:<PLAIN>))*/.source.replace(/<PLAIN>/g,(function(){return/[^\s\x00-\x08\x0e-\x1f,[\]{}\x7f-\x84\x86-\x9f\ud800-\udfff\ufffe\uffff]/.source})),i=/"(?:[^"\\\r\n]|\\.)*"|'(?:[^'\\\r\n]|\\.)*'/.source;function o(e,t){t=(t||"").replace(/m/g,"")+"m";var n=/([:\-,[{]\s*(?:\s<<prop>>[ \t]+)?)(?:<<value>>)(?=[ \t]*(?:$|,|\]|\}|(?:[\r\n]\s*)?#))/.source.replace(/<<prop>>/g,(function(){return a})).replace(/<<value>>/g,(function(){return e}));return RegExp(n,t)}e.languages.yaml={scalar:{pattern:RegExp(/([\-:]\s*(?:\s<<prop>>[ \t]+)?[|>])[ \t]*(?:((?:\r?\n|\r)[ \t]+)\S[^\r\n]*(?:\2[^\r\n]+)*)/.source.replace(/<<prop>>/g,(function(){return a}))),lookbehind:!0,alias:"string"},comment:/#.*/,key:{pattern:RegExp(/((?:^|[:\-,[{\r\n?])[ \t]*(?:<<prop>>[ \t]+)?)<<key>>(?=\s*:\s)/.source.replace(/<<prop>>/g,(function(){return a})).replace(/<<key>>/g,(function(){return"(?:"+r+"|"+i+")"}))),lookbehind:!0,greedy:!0,alias:"atrule"},directive:{pattern:/(^[ \t]*)%.+/m,lookbehind:!0,alias:"important"},datetime:{pattern:o(/\d{4}-\d\d?-\d\d?(?:[tT]|[ \t]+)\d\d?:\d{2}:\d{2}(?:\.\d*)?(?:[ \t]*(?:Z|[-+]\d\d?(?::\d{2})?))?|\d{4}-\d{2}-\d{2}|\d\d?:\d{2}(?::\d{2}(?:\.\d*)?)?/.source),lookbehind:!0,alias:"number"},boolean:{pattern:o(/false|true/.source,"i"),lookbehind:!0,alias:"important"},null:{pattern:o(/null|~/.source,"i"),lookbehind:!0,alias:"important"},string:{pattern:o(i),lookbehind:!0,greedy:!0},number:{pattern:o(/[+-]?(?:0x[\da-f]+|0o[0-7]+|(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?|\.inf|\.nan)/.source,"i"),lookbehind:!0},tag:n,important:t,punctuation:/---|[:[\]{}\-,|>?]|\.\.\./},e.languages.yml=e.languages.yaml}(s),function(e){var t=/(?:\\.|[^\\\n\r]|(?:\n|\r\n?)(?![\r\n]))/.source;function n(e){return e=e.replace(/<inner>/g,(function(){return t})),RegExp(/((?:^|[^\\])(?:\\{2})*)/.source+"(?:"+e+")")}var a=/(?:\\.|``(?:[^`\r\n]|`(?!`))+``|`[^`\r\n]+`|[^\\|\r\n`])+/.source,r=/\|?__(?:\|__)+\|?(?:(?:\n|\r\n?)|(?![\s\S]))/.source.replace(/__/g,(function(){return a})),i=/\|?[ \t]*:?-{3,}:?[ \t]*(?:\|[ \t]*:?-{3,}:?[ \t]*)+\|?(?:\n|\r\n?)/.source;e.languages.markdown=e.languages.extend("markup",{}),e.languages.insertBefore("markdown","prolog",{"front-matter-block":{pattern:/(^(?:\s*[\r\n])?)---(?!.)[\s\S]*?[\r\n]---(?!.)/,lookbehind:!0,greedy:!0,inside:{punctuation:/^---|---$/,"front-matter":{pattern:/\S+(?:\s+\S+)*/,alias:["yaml","language-yaml"],inside:e.languages.yaml}}},blockquote:{pattern:/^>(?:[\t ]*>)*/m,alias:"punctuation"},table:{pattern:RegExp("^"+r+i+"(?:"+r+")*","m"),inside:{"table-data-rows":{pattern:RegExp("^("+r+i+")(?:"+r+")*$"),lookbehind:!0,inside:{"table-data":{pattern:RegExp(a),inside:e.languages.markdown},punctuation:/\|/}},"table-line":{pattern:RegExp("^("+r+")"+i+"$"),lookbehind:!0,inside:{punctuation:/\||:?-{3,}:?/}},"table-header-row":{pattern:RegExp("^"+r+"$"),inside:{"table-header":{pattern:RegExp(a),alias:"important",inside:e.languages.markdown},punctuation:/\|/}}}},code:[{pattern:/((?:^|\n)[ \t]*\n|(?:^|\r\n?)[ \t]*\r\n?)(?: {4}|\t).+(?:(?:\n|\r\n?)(?: {4}|\t).+)*/,lookbehind:!0,alias:"keyword"},{pattern:/^```[\s\S]*?^```$/m,greedy:!0,inside:{"code-block":{pattern:/^(```.*(?:\n|\r\n?))[\s\S]+?(?=(?:\n|\r\n?)^```$)/m,lookbehind:!0},"code-language":{pattern:/^(```).+/,lookbehind:!0},punctuation:/```/}}],title:[{pattern:/\S.*(?:\n|\r\n?)(?:==+|--+)(?=[ \t]*$)/m,alias:"important",inside:{punctuation:/==+$|--+$/}},{pattern:/(^\s*)#.+/m,lookbehind:!0,alias:"important",inside:{punctuation:/^#+|#+$/}}],hr:{pattern:/(^\s*)([*-])(?:[\t ]*\2){2,}(?=\s*$)/m,lookbehind:!0,alias:"punctuation"},list:{pattern:/(^\s*)(?:[*+-]|\d+\.)(?=[\t ].)/m,lookbehind:!0,alias:"punctuation"},"url-reference":{pattern:/!?\[[^\]]+\]:[\t ]+(?:\S+|<(?:\\.|[^>\\])+>)(?:[\t ]+(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\)))?/,inside:{variable:{pattern:/^(!?\[)[^\]]+/,lookbehind:!0},string:/(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\))$/,punctuation:/^[\[\]!:]|[<>]/},alias:"url"},bold:{pattern:n(/\b__(?:(?!_)<inner>|_(?:(?!_)<inner>)+_)+__\b|\*\*(?:(?!\*)<inner>|\*(?:(?!\*)<inner>)+\*)+\*\*/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^..)[\s\S]+(?=..$)/,lookbehind:!0,inside:{}},punctuation:/\*\*|__/}},italic:{pattern:n(/\b_(?:(?!_)<inner>|__(?:(?!_)<inner>)+__)+_\b|\*(?:(?!\*)<inner>|\*\*(?:(?!\*)<inner>)+\*\*)+\*/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^.)[\s\S]+(?=.$)/,lookbehind:!0,inside:{}},punctuation:/[*_]/}},strike:{pattern:n(/(~~?)(?:(?!~)<inner>)+\2/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^~~?)[\s\S]+(?=\1$)/,lookbehind:!0,inside:{}},punctuation:/~~?/}},"code-snippet":{pattern:/(^|[^\\`])(?:``[^`\r\n]+(?:`[^`\r\n]+)*``(?!`)|`[^`\r\n]+`(?!`))/,lookbehind:!0,greedy:!0,alias:["code","keyword"]},url:{pattern:n(/!?\[(?:(?!\])<inner>)+\](?:\([^\s)]+(?:[\t ]+"(?:\\.|[^"\\])*")?\)|[ \t]?\[(?:(?!\])<inner>)+\])/.source),lookbehind:!0,greedy:!0,inside:{operator:/^!/,content:{pattern:/(^\[)[^\]]+(?=\])/,lookbehind:!0,inside:{}},variable:{pattern:/(^\][ \t]?\[)[^\]]+(?=\]$)/,lookbehind:!0},url:{pattern:/(^\]\()[^\s)]+/,lookbehind:!0},string:{pattern:/(^[ \t]+)"(?:\\.|[^"\\])*"(?=\)$)/,lookbehind:!0}}}}),["url","bold","italic","strike"].forEach((function(t){["url","bold","italic","strike","code-snippet"].forEach((function(n){t!==n&&(e.languages.markdown[t].inside.content.inside[n]=e.languages.markdown[n])}))})),e.hooks.add("after-tokenize",(function(e){"markdown"!==e.language&&"md"!==e.language||function e(t){if(t&&"string"!=typeof t)for(var n=0,a=t.length;n<a;n++){var r=t[n];if("code"===r.type){var i=r.content[1],o=r.content[3];if(i&&o&&"code-language"===i.type&&"code-block"===o.type&&"string"==typeof i.content){var d=i.content.replace(/\b#/g,"sharp").replace(/\b\+\+/g,"pp"),s="language-"+(d=(/[a-z][\w-]*/i.exec(d)||[""])[0].toLowerCase());o.alias?"string"==typeof o.alias?o.alias=[o.alias,s]:o.alias.push(s):o.alias=[s]}}else e(r.content)}}(e.tokens)})),e.hooks.add("wrap",(function(t){if("code-block"===t.type){for(var n="",a=0,r=t.classes.length;a<r;a++){var i=t.classes[a],c=/language-(.+)/.exec(i);if(c){n=c[1];break}}var u,l=e.languages[n];if(l)t.content=e.highlight((u=t.content,u.replace(o,"").replace(/&(\w{1,8}|#x?[\da-f]{1,8});/gi,(function(e,t){var n;if("#"===(t=t.toLowerCase())[0])return n="x"===t[1]?parseInt(t.slice(2),16):Number(t.slice(1)),s(n);var a=d[t];return a||e}))),l,n);else if(n&&"none"!==n&&e.plugins.autoloader){var g="md-"+(new Date).valueOf()+"-"+Math.floor(1e16*Math.random());t.attributes.id=g,e.plugins.autoloader.loadLanguages(n,(function(){var t=document.getElementById(g);t&&(t.innerHTML=e.highlight(t.textContent,e.languages[n],n))}))}}}));var o=RegExp(e.languages.markup.tag.pattern.source,"gi"),d={amp:"&",lt:"<",gt:">",quot:'"'},s=String.fromCodePoint||String.fromCharCode;e.languages.md=e.languages.markdown}(s),s.languages.graphql={comment:/#.*/,description:{pattern:/(?:"""(?:[^"]|(?!""")")*"""|"(?:\\.|[^\\"\r\n])*")(?=\s*[a-z_])/i,greedy:!0,alias:"string",inside:{"language-markdown":{pattern:/(^"(?:"")?)(?!\1)[\s\S]+(?=\1$)/,lookbehind:!0,inside:s.languages.markdown}}},string:{pattern:/"""(?:[^"]|(?!""")")*"""|"(?:\\.|[^\\"\r\n])*"/,greedy:!0},number:/(?:\B-|\b)\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/i,boolean:/\b(?:false|true)\b/,variable:/\$[a-z_]\w*/i,directive:{pattern:/@[a-z_]\w*/i,alias:"function"},"attr-name":{pattern:/\b[a-z_]\w*(?=\s*(?:\((?:[^()"]|"(?:\\.|[^\\"\r\n])*")*\))?:)/i,greedy:!0},"atom-input":{pattern:/\b[A-Z]\w*Input\b/,alias:"class-name"},scalar:/\b(?:Boolean|Float|ID|Int|String)\b/,constant:/\b[A-Z][A-Z_\d]*\b/,"class-name":{pattern:/(\b(?:enum|implements|interface|on|scalar|type|union)\s+|&\s*|:\s*|\[)[A-Z_]\w*/,lookbehind:!0},fragment:{pattern:/(\bfragment\s+|\.{3}\s*(?!on\b))[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},"definition-mutation":{pattern:/(\bmutation\s+)[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},"definition-query":{pattern:/(\bquery\s+)[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},keyword:/\b(?:directive|enum|extend|fragment|implements|input|interface|mutation|on|query|repeatable|scalar|schema|subscription|type|union)\b/,operator:/[!=|&]|\.{3}/,"property-query":/\w+(?=\s*\()/,object:/\w+(?=\s*\{)/,punctuation:/[!(){}\[\]:=,]/,property:/\w+/},s.hooks.add("after-tokenize",(function(e){if("graphql"===e.language)for(var t=e.tokens.filter((function(e){return"string"!=typeof e&&"comment"!==e.type&&"scalar"!==e.type})),n=0;n<t.length;){var a=t[n++];if("keyword"===a.type&&"mutation"===a.content){var r=[];if(l(["definition-mutation","punctuation"])&&"("===u(1).content){n+=2;var i=g(/^\($/,/^\)$/);if(-1===i)continue;for(;n<i;n++){var o=u(0);"variable"===o.type&&(h(o,"variable-input"),r.push(o.content))}n=i+1}if(l(["punctuation","property-query"])&&"{"===u(0).content&&(n++,h(u(0),"property-mutation"),r.length>0)){var d=g(/^\{$/,/^\}$/);if(-1===d)continue;for(var s=n;s<d;s++){var c=t[s];"variable"===c.type&&r.indexOf(c.content)>=0&&h(c,"variable-input")}}}}function u(e){return t[n+e]}function l(e,t){t=t||0;for(var n=0;n<e.length;n++){var a=u(n+t);if(!a||a.type!==e[n])return!1}return!0}function g(e,a){for(var r=1,i=n;i<t.length;i++){var o=t[i],d=o.content;if("punctuation"===o.type&&"string"==typeof d)if(e.test(d))r++;else if(a.test(d)&&0===--r)return i}return-1}function h(e,t){var n=e.alias;n?Array.isArray(n)||(e.alias=n=[n]):e.alias=n=[],n.push(t)}})),s.languages.sql={comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|(?:--|\/\/|#).*)/,lookbehind:!0},variable:[{pattern:/@(["'`])(?:\\[\s\S]|(?!\1)[^\\])+\1/,greedy:!0},/@[\w.$]+/],string:{pattern:/(^|[^@\\])("|')(?:\\[\s\S]|(?!\2)[^\\]|\2\2)*\2/,greedy:!0,lookbehind:!0},identifier:{pattern:/(^|[^@\\])`(?:\\[\s\S]|[^`\\]|``)*`/,greedy:!0,lookbehind:!0,inside:{punctuation:/^`|`$/}},function:/\b(?:AVG|COUNT|FIRST|FORMAT|LAST|LCASE|LEN|MAX|MID|MIN|MOD|NOW|ROUND|SUM|UCASE)(?=\s*\()/i,keyword:/\b(?:ACTION|ADD|AFTER|ALGORITHM|ALL|ALTER|ANALYZE|ANY|APPLY|AS|ASC|AUTHORIZATION|AUTO_INCREMENT|BACKUP|BDB|BEGIN|BERKELEYDB|BIGINT|BINARY|BIT|BLOB|BOOL|BOOLEAN|BREAK|BROWSE|BTREE|BULK|BY|CALL|CASCADED?|CASE|CHAIN|CHAR(?:ACTER|SET)?|CHECK(?:POINT)?|CLOSE|CLUSTERED|COALESCE|COLLATE|COLUMNS?|COMMENT|COMMIT(?:TED)?|COMPUTE|CONNECT|CONSISTENT|CONSTRAINT|CONTAINS(?:TABLE)?|CONTINUE|CONVERT|CREATE|CROSS|CURRENT(?:_DATE|_TIME|_TIMESTAMP|_USER)?|CURSOR|CYCLE|DATA(?:BASES?)?|DATE(?:TIME)?|DAY|DBCC|DEALLOCATE|DEC|DECIMAL|DECLARE|DEFAULT|DEFINER|DELAYED|DELETE|DELIMITERS?|DENY|DESC|DESCRIBE|DETERMINISTIC|DISABLE|DISCARD|DISK|DISTINCT|DISTINCTROW|DISTRIBUTED|DO|DOUBLE|DROP|DUMMY|DUMP(?:FILE)?|DUPLICATE|ELSE(?:IF)?|ENABLE|ENCLOSED|END|ENGINE|ENUM|ERRLVL|ERRORS|ESCAPED?|EXCEPT|EXEC(?:UTE)?|EXISTS|EXIT|EXPLAIN|EXTENDED|FETCH|FIELDS|FILE|FILLFACTOR|FIRST|FIXED|FLOAT|FOLLOWING|FOR(?: EACH ROW)?|FORCE|FOREIGN|FREETEXT(?:TABLE)?|FROM|FULL|FUNCTION|GEOMETRY(?:COLLECTION)?|GLOBAL|GOTO|GRANT|GROUP|HANDLER|HASH|HAVING|HOLDLOCK|HOUR|IDENTITY(?:COL|_INSERT)?|IF|IGNORE|IMPORT|INDEX|INFILE|INNER|INNODB|INOUT|INSERT|INT|INTEGER|INTERSECT|INTERVAL|INTO|INVOKER|ISOLATION|ITERATE|JOIN|KEYS?|KILL|LANGUAGE|LAST|LEAVE|LEFT|LEVEL|LIMIT|LINENO|LINES|LINESTRING|LOAD|LOCAL|LOCK|LONG(?:BLOB|TEXT)|LOOP|MATCH(?:ED)?|MEDIUM(?:BLOB|INT|TEXT)|MERGE|MIDDLEINT|MINUTE|MODE|MODIFIES|MODIFY|MONTH|MULTI(?:LINESTRING|POINT|POLYGON)|NATIONAL|NATURAL|NCHAR|NEXT|NO|NONCLUSTERED|NULLIF|NUMERIC|OFF?|OFFSETS?|ON|OPEN(?:DATASOURCE|QUERY|ROWSET)?|OPTIMIZE|OPTION(?:ALLY)?|ORDER|OUT(?:ER|FILE)?|OVER|PARTIAL|PARTITION|PERCENT|PIVOT|PLAN|POINT|POLYGON|PRECEDING|PRECISION|PREPARE|PREV|PRIMARY|PRINT|PRIVILEGES|PROC(?:EDURE)?|PUBLIC|PURGE|QUICK|RAISERROR|READS?|REAL|RECONFIGURE|REFERENCES|RELEASE|RENAME|REPEAT(?:ABLE)?|REPLACE|REPLICATION|REQUIRE|RESIGNAL|RESTORE|RESTRICT|RETURN(?:ING|S)?|REVOKE|RIGHT|ROLLBACK|ROUTINE|ROW(?:COUNT|GUIDCOL|S)?|RTREE|RULE|SAVE(?:POINT)?|SCHEMA|SECOND|SELECT|SERIAL(?:IZABLE)?|SESSION(?:_USER)?|SET(?:USER)?|SHARE|SHOW|SHUTDOWN|SIMPLE|SMALLINT|SNAPSHOT|SOME|SONAME|SQL|START(?:ING)?|STATISTICS|STATUS|STRIPED|SYSTEM_USER|TABLES?|TABLESPACE|TEMP(?:ORARY|TABLE)?|TERMINATED|TEXT(?:SIZE)?|THEN|TIME(?:STAMP)?|TINY(?:BLOB|INT|TEXT)|TOP?|TRAN(?:SACTIONS?)?|TRIGGER|TRUNCATE|TSEQUAL|TYPES?|UNBOUNDED|UNCOMMITTED|UNDEFINED|UNION|UNIQUE|UNLOCK|UNPIVOT|UNSIGNED|UPDATE(?:TEXT)?|USAGE|USE|USER|USING|VALUES?|VAR(?:BINARY|CHAR|CHARACTER|YING)|VIEW|WAITFOR|WARNINGS|WHEN|WHERE|WHILE|WITH(?: ROLLUP|IN)?|WORK|WRITE(?:TEXT)?|YEAR)\b/i,boolean:/\b(?:FALSE|NULL|TRUE)\b/i,number:/\b0x[\da-f]+\b|\b\d+(?:\.\d*)?|\B\.\d+\b/i,operator:/[-+*\/=%^~]|&&?|\|\|?|!=?|<(?:=>?|<|>)?|>[>=]?|\b(?:AND|BETWEEN|DIV|ILIKE|IN|IS|LIKE|NOT|OR|REGEXP|RLIKE|SOUNDS LIKE|XOR)\b/i,punctuation:/[;[\]()`,.]/},function(e){var t=e.languages.javascript["template-string"],n=t.pattern.source,a=t.inside.interpolation,r=a.inside["interpolation-punctuation"],i=a.pattern.source;function o(t,a){if(e.languages[t])return{pattern:RegExp("((?:"+a+")\\s*)"+n),lookbehind:!0,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},"embedded-code":{pattern:/[\s\S]+/,alias:t}}}}function d(e,t){return"___"+t.toUpperCase()+"_"+e+"___"}function s(t,n,a){var r={code:t,grammar:n,language:a};return e.hooks.run("before-tokenize",r),r.tokens=e.tokenize(r.code,r.grammar),e.hooks.run("after-tokenize",r),r.tokens}function c(t){var n={};n["interpolation-punctuation"]=r;var i=e.tokenize(t,n);if(3===i.length){var o=[1,1];o.push.apply(o,s(i[1],e.languages.javascript,"javascript")),i.splice.apply(i,o)}return new e.Token("interpolation",i,a.alias,t)}function u(t,n,a){var r=e.tokenize(t,{interpolation:{pattern:RegExp(i),lookbehind:!0}}),o=0,u={},l=s(r.map((function(e){if("string"==typeof e)return e;for(var n,r=e.content;-1!==t.indexOf(n=d(o++,a)););return u[n]=r,n})).join(""),n,a),g=Object.keys(u);return o=0,function e(t){for(var n=0;n<t.length;n++){if(o>=g.length)return;var a=t[n];if("string"==typeof a||"string"==typeof a.content){var r=g[o],i="string"==typeof a?a:a.content,d=i.indexOf(r);if(-1!==d){++o;var s=i.substring(0,d),l=c(u[r]),h=i.substring(d+r.length),f=[];if(s&&f.push(s),f.push(l),h){var p=[h];e(p),f.push.apply(f,p)}"string"==typeof a?(t.splice.apply(t,[n,1].concat(f)),n+=f.length-1):a.content=f}}else{var m=a.content;Array.isArray(m)?e(m):e([m])}}}(l),new e.Token(a,l,"language-"+a,t)}e.languages.javascript["template-string"]=[o("css",/\b(?:styled(?:\([^)]*\))?(?:\s*\.\s*\w+(?:\([^)]*\))*)*|css(?:\s*\.\s*(?:global|resolve))?|createGlobalStyle|keyframes)/.source),o("html",/\bhtml|\.\s*(?:inner|outer)HTML\s*\+?=/.source),o("svg",/\bsvg/.source),o("markdown",/\b(?:markdown|md)/.source),o("graphql",/\b(?:gql|graphql(?:\s*\.\s*experimental)?)/.source),o("sql",/\bsql/.source),t].filter(Boolean);var l={javascript:!0,js:!0,typescript:!0,ts:!0,jsx:!0,tsx:!0};function g(e){return"string"==typeof e?e:Array.isArray(e)?e.map(g).join(""):g(e.content)}e.hooks.add("after-tokenize",(function(t){t.language in l&&function t(n){for(var a=0,r=n.length;a<r;a++){var i=n[a];if("string"!=typeof i){var o=i.content;if(Array.isArray(o))if("template-string"===i.type){var d=o[1];if(3===o.length&&"string"!=typeof d&&"embedded-code"===d.type){var s=g(d),c=d.alias,l=Array.isArray(c)?c[0]:c,h=e.languages[l];if(!h)continue;o[1]=u(s,h,l)}}else t(o);else"string"!=typeof o&&t([o])}}}(t.tokens)}))}(s),function(e){e.languages.typescript=e.languages.extend("javascript",{"class-name":{pattern:/(\b(?:class|extends|implements|instanceof|interface|new|type)\s+)(?!keyof\b)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?:\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>)?/,lookbehind:!0,greedy:!0,inside:null},builtin:/\b(?:Array|Function|Promise|any|boolean|console|never|number|string|symbol|unknown)\b/}),e.languages.typescript.keyword.push(/\b(?:abstract|declare|is|keyof|readonly|require)\b/,/\b(?:asserts|infer|interface|module|namespace|type)\b(?=\s*(?:[{_$a-zA-Z\xA0-\uFFFF]|$))/,/\btype\b(?=\s*(?:[\{*]|$))/),delete e.languages.typescript.parameter,delete e.languages.typescript["literal-property"];var t=e.languages.extend("typescript",{});delete t["class-name"],e.languages.typescript["class-name"].inside=t,e.languages.insertBefore("typescript","function",{decorator:{pattern:/@[$\w\xA0-\uFFFF]+/,inside:{at:{pattern:/^@/,alias:"operator"},function:/^[\s\S]+/}},"generic-function":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>(?=\s*\()/,greedy:!0,inside:{function:/^#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/,generic:{pattern:/<[\s\S]+/,alias:"class-name",inside:t}}}}),e.languages.ts=e.languages.typescript}(s),function(e){function t(e,t){return RegExp(e.replace(/<ID>/g,(function(){return/(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/.source})),t)}e.languages.insertBefore("javascript","function-variable",{"method-variable":{pattern:RegExp("(\\.\\s*)"+e.languages.javascript["function-variable"].pattern.source),lookbehind:!0,alias:["function-variable","method","function","property-access"]}}),e.languages.insertBefore("javascript","function",{method:{pattern:RegExp("(\\.\\s*)"+e.languages.javascript.function.source),lookbehind:!0,alias:["function","property-access"]}}),e.languages.insertBefore("javascript","constant",{"known-class-name":[{pattern:/\b(?:(?:Float(?:32|64)|(?:Int|Uint)(?:8|16|32)|Uint8Clamped)?Array|ArrayBuffer|BigInt|Boolean|DataView|Date|Error|Function|Intl|JSON|(?:Weak)?(?:Map|Set)|Math|Number|Object|Promise|Proxy|Reflect|RegExp|String|Symbol|WebAssembly)\b/,alias:"class-name"},{pattern:/\b(?:[A-Z]\w*)Error\b/,alias:"class-name"}]}),e.languages.insertBefore("javascript","keyword",{imports:{pattern:t(/(\bimport\b\s*)(?:<ID>(?:\s*,\s*(?:\*\s*as\s+<ID>|\{[^{}]*\}))?|\*\s*as\s+<ID>|\{[^{}]*\})(?=\s*\bfrom\b)/.source),lookbehind:!0,inside:e.languages.javascript},exports:{pattern:t(/(\bexport\b\s*)(?:\*(?:\s*as\s+<ID>)?(?=\s*\bfrom\b)|\{[^{}]*\})/.source),lookbehind:!0,inside:e.languages.javascript}}),e.languages.javascript.keyword.unshift({pattern:/\b(?:as|default|export|from|import)\b/,alias:"module"},{pattern:/\b(?:await|break|catch|continue|do|else|finally|for|if|return|switch|throw|try|while|yield)\b/,alias:"control-flow"},{pattern:/\bnull\b/,alias:["null","nil"]},{pattern:/\bundefined\b/,alias:"nil"}),e.languages.insertBefore("javascript","operator",{spread:{pattern:/\.{3}/,alias:"operator"},arrow:{pattern:/=>/,alias:"operator"}}),e.languages.insertBefore("javascript","punctuation",{"property-access":{pattern:t(/(\.\s*)#?<ID>/.source),lookbehind:!0},"maybe-class-name":{pattern:/(^|[^$\w\xA0-\uFFFF])[A-Z][$\w\xA0-\uFFFF]+/,lookbehind:!0},dom:{pattern:/\b(?:document|(?:local|session)Storage|location|navigator|performance|window)\b/,alias:"variable"},console:{pattern:/\bconsole(?=\s*\.)/,alias:"class-name"}});for(var n=["function","function-variable","method","method-variable","property-access"],a=0;a<n.length;a++){var r=n[a],i=e.languages.javascript[r];"RegExp"===e.util.type(i)&&(i=e.languages.javascript[r]={pattern:i});var o=i.inside||{};i.inside=o,o["maybe-class-name"]=/^[A-Z][\s\S]*/}}(s),function(e){var t=e.util.clone(e.languages.javascript),n=/(?:\s|\/\/.*(?!.)|\/\*(?:[^*]|\*(?!\/))\*\/)/.source,a=/(?:\{(?:\{(?:\{[^{}]*\}|[^{}])*\}|[^{}])*\})/.source,r=/(?:\{<S>*\.{3}(?:[^{}]|<BRACES>)*\})/.source;function i(e,t){return e=e.replace(/<S>/g,(function(){return n})).replace(/<BRACES>/g,(function(){return a})).replace(/<SPREAD>/g,(function(){return r})),RegExp(e,t)}r=i(r).source,e.languages.jsx=e.languages.extend("markup",t),e.languages.jsx.tag.pattern=i(/<\/?(?:[\w.:-]+(?:<S>+(?:[\w.:$-]+(?:=(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s{'"/>=]+|<BRACES>))?|<SPREAD>))*<S>*\/?)?>/.source),e.languages.jsx.tag.inside.tag.pattern=/^<\/?[^\s>\/]*/,e.languages.jsx.tag.inside["attr-value"].pattern=/=(?!\{)(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s'">]+)/,e.languages.jsx.tag.inside.tag.inside["class-name"]=/^[A-Z]\w*(?:\.[A-Z]\w*)*$/,e.languages.jsx.tag.inside.comment=t.comment,e.languages.insertBefore("inside","attr-name",{spread:{pattern:i(/<SPREAD>/.source),inside:e.languages.jsx}},e.languages.jsx.tag),e.languages.insertBefore("inside","special-attr",{script:{pattern:i(/=<BRACES>/.source),alias:"language-javascript",inside:{"script-punctuation":{pattern:/^=(?=\{)/,alias:"punctuation"},rest:e.languages.jsx}}},e.languages.jsx.tag);var o=function(e){return e?"string"==typeof e?e:"string"==typeof e.content?e.content:e.content.map(o).join(""):""},d=function(t){for(var n=[],a=0;a<t.length;a++){var r=t[a],i=!1;if("string"!=typeof r&&("tag"===r.type&&r.content[0]&&"tag"===r.content[0].type?"</"===r.content[0].content[0].content?n.length>0&&n[n.length-1].tagName===o(r.content[0].content[1])&&n.pop():"/>"===r.content[r.content.length-1].content||n.push({tagName:o(r.content[0].content[1]),openedBraces:0}):n.length>0&&"punctuation"===r.type&&"{"===r.content?n[n.length-1].openedBraces++:n.length>0&&n[n.length-1].openedBraces>0&&"punctuation"===r.type&&"}"===r.content?n[n.length-1].openedBraces--:i=!0),(i||"string"==typeof r)&&n.length>0&&0===n[n.length-1].openedBraces){var s=o(r);a<t.length-1&&("string"==typeof t[a+1]||"plain-text"===t[a+1].type)&&(s+=o(t[a+1]),t.splice(a+1,1)),a>0&&("string"==typeof t[a-1]||"plain-text"===t[a-1].type)&&(s=o(t[a-1])+s,t.splice(a-1,1),a--),t[a]=new e.Token("plain-text",s,null,s)}r.content&&"string"!=typeof r.content&&d(r.content)}};e.hooks.add("after-tokenize",(function(e){"jsx"!==e.language&&"tsx"!==e.language||d(e.tokens)}))}(s),function(e){e.languages.diff={coord:[/^(?:\*{3}|-{3}|\+{3}).*$/m,/^@@.*@@$/m,/^\d.*$/m]};var t={"deleted-sign":"-","deleted-arrow":"<","inserted-sign":"+","inserted-arrow":">",unchanged:" ",diff:"!"};Object.keys(t).forEach((function(n){var a=t[n],r=[];/^\w+$/.test(n)||r.push(/\w+/.exec(n)[0]),"diff"===n&&r.push("bold"),e.languages.diff[n]={pattern:RegExp("^(?:["+a+"].*(?:\r\n?|\n|(?![\\s\\S])))+","m"),alias:r,inside:{line:{pattern:/(.)(?=[\s\S]).*(?:\r\n?|\n)?/,lookbehind:!0},prefix:{pattern:/[\s\S]/,alias:/\w+/.exec(n)[0]}}}})),Object.defineProperty(e.languages.diff,"PREFIXES",{value:t})}(s),s.languages.git={comment:/^#.*/m,deleted:/^[-–].*/m,inserted:/^\+.*/m,string:/("|')(?:\\.|(?!\1)[^\\\r\n])*\1/,command:{pattern:/^.*\$ git .*$/m,inside:{parameter:/\s--?\w+/}},coord:/^@@.*@@$/m,"commit-sha1":/^commit \w{40}$/m},s.languages.go=s.languages.extend("clike",{string:{pattern:/(^|[^\\])"(?:\\.|[^"\\\r\n])*"|`[^`]*`/,lookbehind:!0,greedy:!0},keyword:/\b(?:break|case|chan|const|continue|default|defer|else|fallthrough|for|func|go(?:to)?|if|import|interface|map|package|range|return|select|struct|switch|type|var)\b/,boolean:/\b(?:_|false|iota|nil|true)\b/,number:[/\b0(?:b[01_]+|o[0-7_]+)i?\b/i,/\b0x(?:[a-f\d_]+(?:\.[a-f\d_]*)?|\.[a-f\d_]+)(?:p[+-]?\d+(?:_\d+)*)?i?(?!\w)/i,/(?:\b\d[\d_]*(?:\.[\d_]*)?|\B\.\d[\d_]*)(?:e[+-]?[\d_]+)?i?(?!\w)/i],operator:/[*\/%^!=]=?|\+[=+]?|-[=-]?|\|[=|]?|&(?:=|&|\^=?)?|>(?:>=?|=)?|<(?:<=?|=|-)?|:=|\.\.\./,builtin:/\b(?:append|bool|byte|cap|close|complex|complex(?:64|128)|copy|delete|error|float(?:32|64)|u?int(?:8|16|32|64)?|imag|len|make|new|panic|print(?:ln)?|real|recover|rune|string|uintptr)\b/}),s.languages.insertBefore("go","string",{char:{pattern:/'(?:\\.|[^'\\\r\n]){0,10}'/,greedy:!0}}),delete s.languages.go["class-name"],function(e){function t(e,t){return"___"+e.toUpperCase()+t+"___"}Object.defineProperties(e.languages["markup-templating"]={},{buildPlaceholders:{value:function(n,a,r,i){if(n.language===a){var o=n.tokenStack=[];n.code=n.code.replace(r,(function(e){if("function"==typeof i&&!i(e))return e;for(var r,d=o.length;-1!==n.code.indexOf(r=t(a,d));)++d;return o[d]=e,r})),n.grammar=e.languages.markup}}},tokenizePlaceholders:{value:function(n,a){if(n.language===a&&n.tokenStack){n.grammar=e.languages[a];var r=0,i=Object.keys(n.tokenStack);!function o(d){for(var s=0;s<d.length&&!(r>=i.length);s++){var c=d[s];if("string"==typeof c||c.content&&"string"==typeof c.content){var u=i[r],l=n.tokenStack[u],g="string"==typeof c?c:c.content,h=t(a,u),f=g.indexOf(h);if(f>-1){++r;var p=g.substring(0,f),m=new e.Token(a,e.tokenize(l,n.grammar),"language-"+a,l),R=g.substring(f+h.length),b=[];p&&b.push.apply(b,o([p])),b.push(m),R&&b.push.apply(b,o([R])),"string"==typeof c?d.splice.apply(d,[s,1].concat(b)):c.content=b}}else c.content&&o(c.content)}return d}(n.tokens)}}}})}(s),function(e){e.languages.handlebars={comment:/\{\{![\s\S]*?\}\}/,delimiter:{pattern:/^\{\{\{?|\}\}\}?$/,alias:"punctuation"},string:/(["'])(?:\\.|(?!\1)[^\\\r\n])*\1/,number:/\b0x[\dA-Fa-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:[Ee][+-]?\d+)?/,boolean:/\b(?:false|true)\b/,block:{pattern:/^(\s*(?:~\s*)?)[#\/]\S+?(?=\s*(?:~\s*)?$|\s)/,lookbehind:!0,alias:"keyword"},brackets:{pattern:/\[[^\]]+\]/,inside:{punctuation:/\[|\]/,variable:/[\s\S]+/}},punctuation:/[!"#%&':()*+,.\/;<=>@\[\\\]^`{|}~]/,variable:/[^!"#%&'()*+,\/;<=>@\[\\\]^`{|}~\s]+/},e.hooks.add("before-tokenize",(function(t){e.languages["markup-templating"].buildPlaceholders(t,"handlebars",/\{\{\{[\s\S]+?\}\}\}|\{\{[\s\S]+?\}\}/g)})),e.hooks.add("after-tokenize",(function(t){e.languages["markup-templating"].tokenizePlaceholders(t,"handlebars")})),e.languages.hbs=e.languages.handlebars}(s),s.languages.json={property:{pattern:/(^|[^\\])"(?:\\.|[^\\"\r\n])*"(?=\s*:)/,lookbehind:!0,greedy:!0},string:{pattern:/(^|[^\\])"(?:\\.|[^\\"\r\n])*"(?!\s*:)/,lookbehind:!0,greedy:!0},comment:{pattern:/\/\/.*|\/\*[\s\S]*?(?:\*\/|$)/,greedy:!0},number:/-?\b\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/i,punctuation:/[{}[\],]/,operator:/:/,boolean:/\b(?:false|true)\b/,null:{pattern:/\bnull\b/,alias:"keyword"}},s.languages.webmanifest=s.languages.json,s.languages.less=s.languages.extend("css",{comment:[/\/\*[\s\S]*?\*\//,{pattern:/(^|[^\\])\/\/.*/,lookbehind:!0}],atrule:{pattern:/@[\w-](?:\((?:[^(){}]|\([^(){}]*\))*\)|[^(){};\s]|\s+(?!\s))*?(?=\s*\{)/,inside:{punctuation:/[:()]/}},selector:{pattern:/(?:@\{[\w-]+\}|[^{};\s@])(?:@\{[\w-]+\}|\((?:[^(){}]|\([^(){}]*\))*\)|[^(){};@\s]|\s+(?!\s))*?(?=\s*\{)/,inside:{variable:/@+[\w-]+/}},property:/(?:@\{[\w-]+\}|[\w-])+(?:\+_?)?(?=\s*:)/,operator:/[+\-*\/]/}),s.languages.insertBefore("less","property",{variable:[{pattern:/@[\w-]+\s*:/,inside:{punctuation:/:/}},/@@?[\w-]+/],"mixin-usage":{pattern:/([{;]\s*)[.#](?!\d)[\w-].*?(?=[(;])/,lookbehind:!0,alias:"function"}}),s.languages.makefile={comment:{pattern:/(^|[^\\])#(?:\\(?:\r\n|[\s\S])|[^\\\r\n])*/,lookbehind:!0},string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"builtin-target":{pattern:/\.[A-Z][^:#=\s]+(?=\s*:(?!=))/,alias:"builtin"},target:{pattern:/^(?:[^:=\s]|[ \t]+(?![\s:]))+(?=\s*:(?!=))/m,alias:"symbol",inside:{variable:/\$+(?:(?!\$)[^(){}:#=\s]+|(?=[({]))/}},variable:/\$+(?:(?!\$)[^(){}:#=\s]+|\([@*%<^+?][DF]\)|(?=[({]))/,keyword:/-include\b|\b(?:define|else|endef|endif|export|ifn?def|ifn?eq|include|override|private|sinclude|undefine|unexport|vpath)\b/,function:{pattern:/(\()(?:abspath|addsuffix|and|basename|call|dir|error|eval|file|filter(?:-out)?|findstring|firstword|flavor|foreach|guile|if|info|join|lastword|load|notdir|or|origin|patsubst|realpath|shell|sort|strip|subst|suffix|value|warning|wildcard|word(?:list|s)?)(?=[ \t])/,lookbehind:!0},operator:/(?:::|[?:+!])?=|[|@]/,punctuation:/[:;(){}]/},s.languages.objectivec=s.languages.extend("c",{string:{pattern:/@?"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"/,greedy:!0},keyword:/\b(?:asm|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|in|inline|int|long|register|return|self|short|signed|sizeof|static|struct|super|switch|typedef|typeof|union|unsigned|void|volatile|while)\b|(?:@interface|@end|@implementation|@protocol|@class|@public|@protected|@private|@property|@try|@catch|@finally|@throw|@synthesize|@dynamic|@selector)\b/,operator:/-[->]?|\+\+?|!=?|<<?=?|>>?=?|==?|&&?|\|\|?|[~^%?*\/@]/}),delete s.languages.objectivec["class-name"],s.languages.objc=s.languages.objectivec,s.languages.ocaml={comment:{pattern:/\(\*[\s\S]*?\*\)/,greedy:!0},char:{pattern:/'(?:[^\\\r\n']|\\(?:.|[ox]?[0-9a-f]{1,3}))'/i,greedy:!0},string:[{pattern:/"(?:\\(?:[\s\S]|\r\n)|[^\\\r\n"])*"/,greedy:!0},{pattern:/\{([a-z_]*)\|[\s\S]*?\|\1\}/,greedy:!0}],number:[/\b(?:0b[01][01_]*|0o[0-7][0-7_]*)\b/i,/\b0x[a-f0-9][a-f0-9_]*(?:\.[a-f0-9_]*)?(?:p[+-]?\d[\d_]*)?(?!\w)/i,/\b\d[\d_]*(?:\.[\d_]*)?(?:e[+-]?\d[\d_]*)?(?!\w)/i],directive:{pattern:/\B#\w+/,alias:"property"},label:{pattern:/\B~\w+/,alias:"property"},"type-variable":{pattern:/\B'\w+/,alias:"function"},variant:{pattern:/`\w+/,alias:"symbol"},keyword:/\b(?:as|assert|begin|class|constraint|do|done|downto|else|end|exception|external|for|fun|function|functor|if|in|include|inherit|initializer|lazy|let|match|method|module|mutable|new|nonrec|object|of|open|private|rec|sig|struct|then|to|try|type|val|value|virtual|when|where|while|with)\b/,boolean:/\b(?:false|true)\b/,"operator-like-punctuation":{pattern:/\[[<>|]|[>|]\]|\{<|>\}/,alias:"punctuation"},operator:/\.[.~]|:[=>]|[=<>@^|&+\-*\/$%!?~][!$%&*+\-.\/:<=>?@^|~]*|\b(?:and|asr|land|lor|lsl|lsr|lxor|mod|or)\b/,punctuation:/;;|::|[(){}\[\].,:;#]|\b_\b/},s.languages.python={comment:{pattern:/(^|[^\\])#.*/,lookbehind:!0,greedy:!0},"string-interpolation":{pattern:/(?:f|fr|rf)(?:("""|''')[\s\S]*?\1|("|')(?:\\.|(?!\2)[^\\\r\n])*\2)/i,greedy:!0,inside:{interpolation:{pattern:/((?:^|[^{])(?:\{\{)*)\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}])+\})+\})+\}/,lookbehind:!0,inside:{"format-spec":{pattern:/(:)[^:(){}]+(?=\}$)/,lookbehind:!0},"conversion-option":{pattern:/![sra](?=[:}]$)/,alias:"punctuation"},rest:null}},string:/[\s\S]+/}},"triple-quoted-string":{pattern:/(?:[rub]|br|rb)?("""|''')[\s\S]*?\1/i,greedy:!0,alias:"string"},string:{pattern:/(?:[rub]|br|rb)?("|')(?:\\.|(?!\1)[^\\\r\n])*\1/i,greedy:!0},function:{pattern:/((?:^|\s)def[ \t]+)[a-zA-Z_]\w*(?=\s*\()/g,lookbehind:!0},"class-name":{pattern:/(\bclass\s+)\w+/i,lookbehind:!0},decorator:{pattern:/(^[\t ]*)@\w+(?:\.\w+)*/m,lookbehind:!0,alias:["annotation","punctuation"],inside:{punctuation:/\./}},keyword:/\b(?:_(?=\s*:)|and|as|assert|async|await|break|case|class|continue|def|del|elif|else|except|exec|finally|for|from|global|if|import|in|is|lambda|match|nonlocal|not|or|pass|print|raise|return|try|while|with|yield)\b/,builtin:/\b(?:__import__|abs|all|any|apply|ascii|basestring|bin|bool|buffer|bytearray|bytes|callable|chr|classmethod|cmp|coerce|compile|complex|delattr|dict|dir|divmod|enumerate|eval|execfile|file|filter|float|format|frozenset|getattr|globals|hasattr|hash|help|hex|id|input|int|intern|isinstance|issubclass|iter|len|list|locals|long|map|max|memoryview|min|next|object|oct|open|ord|pow|property|range|raw_input|reduce|reload|repr|reversed|round|set|setattr|slice|sorted|staticmethod|str|sum|super|tuple|type|unichr|unicode|vars|xrange|zip)\b/,boolean:/\b(?:False|None|True)\b/,number:/\b0(?:b(?:_?[01])+|o(?:_?[0-7])+|x(?:_?[a-f0-9])+)\b|(?:\b\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\B\.\d+(?:_\d+)*)(?:e[+-]?\d+(?:_\d+)*)?j?(?!\w)/i,operator:/[-+%=]=?|!=|:=|\*\*?=?|\/\/?=?|<[<=>]?|>[=>]?|[&|^~]/,punctuation:/[{}[\];(),.:]/},s.languages.python["string-interpolation"].inside.interpolation.inside.rest=s.languages.python,s.languages.py=s.languages.python,s.languages.reason=s.languages.extend("clike",{string:{pattern:/"(?:\\(?:\r\n|[\s\S])|[^\\\r\n"])*"/,greedy:!0},"class-name":/\b[A-Z]\w*/,keyword:/\b(?:and|as|assert|begin|class|constraint|do|done|downto|else|end|exception|external|for|fun|function|functor|if|in|include|inherit|initializer|lazy|let|method|module|mutable|new|nonrec|object|of|open|or|private|rec|sig|struct|switch|then|to|try|type|val|virtual|when|while|with)\b/,operator:/\.{3}|:[:=]|\|>|->|=(?:==?|>)?|<=?|>=?|[|^?'#!~`]|[+\-*\/]\.?|\b(?:asr|land|lor|lsl|lsr|lxor|mod)\b/}),s.languages.insertBefore("reason","class-name",{char:{pattern:/'(?:\\x[\da-f]{2}|\\o[0-3][0-7][0-7]|\\\d{3}|\\.|[^'\\\r\n])'/,greedy:!0},constructor:/\b[A-Z]\w*\b(?!\s*\.)/,label:{pattern:/\b[a-z]\w*(?=::)/,alias:"symbol"}}),delete s.languages.reason.function,function(e){e.languages.sass=e.languages.extend("css",{comment:{pattern:/^([ \t]*)\/[\/*].*(?:(?:\r?\n|\r)\1[ \t].+)*/m,lookbehind:!0,greedy:!0}}),e.languages.insertBefore("sass","atrule",{"atrule-line":{pattern:/^(?:[ \t]*)[@+=].+/m,greedy:!0,inside:{atrule:/(?:@[\w-]+|[+=])/}}}),delete e.languages.sass.atrule;var t=/\$[-\w]+|#\{\$[-\w]+\}/,n=[/[+*\/%]|[=!]=|<=?|>=?|\b(?:and|not|or)\b/,{pattern:/(\s)-(?=\s)/,lookbehind:!0}];e.languages.insertBefore("sass","property",{"variable-line":{pattern:/^[ \t]*\$.+/m,greedy:!0,inside:{punctuation:/:/,variable:t,operator:n}},"property-line":{pattern:/^[ \t]*(?:[^:\s]+ *:.*|:[^:\s].*)/m,greedy:!0,inside:{property:[/[^:\s]+(?=\s*:)/,{pattern:/(:)[^:\s]+/,lookbehind:!0}],punctuation:/:/,variable:t,operator:n,important:e.languages.sass.important}}}),delete e.languages.sass.property,delete e.languages.sass.important,e.languages.insertBefore("sass","punctuation",{selector:{pattern:/^([ \t]*)\S(?:,[^,\r\n]+|[^,\r\n]*)(?:,[^,\r\n]+)*(?:,(?:\r?\n|\r)\1[ \t]+\S(?:,[^,\r\n]+|[^,\r\n]*)(?:,[^,\r\n]+)*)*/m,lookbehind:!0,greedy:!0}})}(s),s.languages.scss=s.languages.extend("css",{comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|\/\/.*)/,lookbehind:!0},atrule:{pattern:/@[\w-](?:\([^()]+\)|[^()\s]|\s+(?!\s))*?(?=\s+[{;])/,inside:{rule:/@[\w-]+/}},url:/(?:[-a-z]+-)?url(?=\()/i,selector:{pattern:/(?=\S)[^@;{}()]?(?:[^@;{}()\s]|\s+(?!\s)|#\{\$[-\w]+\})+(?=\s*\{(?:\}|\s|[^}][^:{}]*[:{][^}]))/,inside:{parent:{pattern:/&/,alias:"important"},placeholder:/%[-\w]+/,variable:/\$[-\w]+|#\{\$[-\w]+\}/}},property:{pattern:/(?:[-\w]|\$[-\w]|#\{\$[-\w]+\})+(?=\s*:)/,inside:{variable:/\$[-\w]+|#\{\$[-\w]+\}/}}}),s.languages.insertBefore("scss","atrule",{keyword:[/@(?:content|debug|each|else(?: if)?|extend|for|forward|function|if|import|include|mixin|return|use|warn|while)\b/i,{pattern:/( )(?:from|through)(?= )/,lookbehind:!0}]}),s.languages.insertBefore("scss","important",{variable:/\$[-\w]+|#\{\$[-\w]+\}/}),s.languages.insertBefore("scss","function",{"module-modifier":{pattern:/\b(?:as|hide|show|with)\b/i,alias:"keyword"},placeholder:{pattern:/%[-\w]+/,alias:"selector"},statement:{pattern:/\B!(?:default|optional)\b/i,alias:"keyword"},boolean:/\b(?:false|true)\b/,null:{pattern:/\bnull\b/,alias:"keyword"},operator:{pattern:/(\s)(?:[-+*\/%]|[=!]=|<=?|>=?|and|not|or)(?=\s)/,lookbehind:!0}}),s.languages.scss.atrule.inside.rest=s.languages.scss,function(e){var t={pattern:/(\b\d+)(?:%|[a-z]+)/,lookbehind:!0},n={pattern:/(^|[^\w.-])-?(?:\d+(?:\.\d+)?|\.\d+)/,lookbehind:!0},a={comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|\/\/.*)/,lookbehind:!0},url:{pattern:/\burl\((["']?).*?\1\)/i,greedy:!0},string:{pattern:/("|')(?:(?!\1)[^\\\r\n]|\\(?:\r\n|[\s\S]))*\1/,greedy:!0},interpolation:null,func:null,important:/\B!(?:important|optional)\b/i,keyword:{pattern:/(^|\s+)(?:(?:else|for|if|return|unless)(?=\s|$)|@[\w-]+)/,lookbehind:!0},hexcode:/#[\da-f]{3,6}/i,color:[/\b(?:AliceBlue|AntiqueWhite|Aqua|Aquamarine|Azure|Beige|Bisque|Black|BlanchedAlmond|Blue|BlueViolet|Brown|BurlyWood|CadetBlue|Chartreuse|Chocolate|Coral|CornflowerBlue|Cornsilk|Crimson|Cyan|DarkBlue|DarkCyan|DarkGoldenRod|DarkGr[ae]y|DarkGreen|DarkKhaki|DarkMagenta|DarkOliveGreen|DarkOrange|DarkOrchid|DarkRed|DarkSalmon|DarkSeaGreen|DarkSlateBlue|DarkSlateGr[ae]y|DarkTurquoise|DarkViolet|DeepPink|DeepSkyBlue|DimGr[ae]y|DodgerBlue|FireBrick|FloralWhite|ForestGreen|Fuchsia|Gainsboro|GhostWhite|Gold|GoldenRod|Gr[ae]y|Green|GreenYellow|HoneyDew|HotPink|IndianRed|Indigo|Ivory|Khaki|Lavender|LavenderBlush|LawnGreen|LemonChiffon|LightBlue|LightCoral|LightCyan|LightGoldenRodYellow|LightGr[ae]y|LightGreen|LightPink|LightSalmon|LightSeaGreen|LightSkyBlue|LightSlateGr[ae]y|LightSteelBlue|LightYellow|Lime|LimeGreen|Linen|Magenta|Maroon|MediumAquaMarine|MediumBlue|MediumOrchid|MediumPurple|MediumSeaGreen|MediumSlateBlue|MediumSpringGreen|MediumTurquoise|MediumVioletRed|MidnightBlue|MintCream|MistyRose|Moccasin|NavajoWhite|Navy|OldLace|Olive|OliveDrab|Orange|OrangeRed|Orchid|PaleGoldenRod|PaleGreen|PaleTurquoise|PaleVioletRed|PapayaWhip|PeachPuff|Peru|Pink|Plum|PowderBlue|Purple|Red|RosyBrown|RoyalBlue|SaddleBrown|Salmon|SandyBrown|SeaGreen|SeaShell|Sienna|Silver|SkyBlue|SlateBlue|SlateGr[ae]y|Snow|SpringGreen|SteelBlue|Tan|Teal|Thistle|Tomato|Transparent|Turquoise|Violet|Wheat|White|WhiteSmoke|Yellow|YellowGreen)\b/i,{pattern:/\b(?:hsl|rgb)\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*\)\B|\b(?:hsl|rgb)a\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*,\s*(?:0|0?\.\d+|1)\s*\)\B/i,inside:{unit:t,number:n,function:/[\w-]+(?=\()/,punctuation:/[(),]/}}],entity:/\\[\da-f]{1,8}/i,unit:t,boolean:/\b(?:false|true)\b/,operator:[/~|[+!\/%<>?=]=?|[-:]=|\*[*=]?|\.{2,3}|&&|\|\||\B-\B|\b(?:and|in|is(?: a| defined| not|nt)?|not|or)\b/],number:n,punctuation:/[{}()\[\];:,]/};a.interpolation={pattern:/\{[^\r\n}:]+\}/,alias:"variable",inside:{delimiter:{pattern:/^\{|\}$/,alias:"punctuation"},rest:a}},a.func={pattern:/[\w-]+\([^)]*\).*/,inside:{function:/^[^(]+/,rest:a}},e.languages.stylus={"atrule-declaration":{pattern:/(^[ \t]*)@.+/m,lookbehind:!0,inside:{atrule:/^@[\w-]+/,rest:a}},"variable-declaration":{pattern:/(^[ \t]*)[\w$-]+\s*.?=[ \t]*(?:\{[^{}]*\}|\S.*|$)/m,lookbehind:!0,inside:{variable:/^\S+/,rest:a}},statement:{pattern:/(^[ \t]*)(?:else|for|if|return|unless)[ \t].+/m,lookbehind:!0,inside:{keyword:/^\S+/,rest:a}},"property-declaration":{pattern:/((?:^|\{)([ \t]*))(?:[\w-]|\{[^}\r\n]+\})+(?:\s*:\s*|[ \t]+)(?!\s)[^{\r\n]*(?:;|[^{\r\n,]$(?!(?:\r?\n|\r)(?:\{|\2[ \t])))/m,lookbehind:!0,inside:{property:{pattern:/^[^\s:]+/,inside:{interpolation:a.interpolation}},rest:a}},selector:{pattern:/(^[ \t]*)(?:(?=\S)(?:[^{}\r\n:()]|::?[\w-]+(?:\([^)\r\n]*\)|(?![\w-]))|\{[^}\r\n]+\})+)(?:(?:\r?\n|\r)(?:\1(?:(?=\S)(?:[^{}\r\n:()]|::?[\w-]+(?:\([^)\r\n]*\)|(?![\w-]))|\{[^}\r\n]+\})+)))*(?:,$|\{|(?=(?:\r?\n|\r)(?:\{|\1[ \t])))/m,lookbehind:!0,inside:{interpolation:a.interpolation,comment:a.comment,punctuation:/[{},]/}},func:a.func,string:a.string,comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|\/\/.*)/,lookbehind:!0,greedy:!0},interpolation:a.interpolation,punctuation:/[{}()\[\];:.]/}}(s),function(e){var t=e.util.clone(e.languages.typescript);e.languages.tsx=e.languages.extend("jsx",t),delete e.languages.tsx.parameter,delete e.languages.tsx["literal-property"];var n=e.languages.tsx.tag;n.pattern=RegExp(/(^|[^\w$]|(?=<\/))/.source+"(?:"+n.pattern.source+")",n.pattern.flags),n.lookbehind=!0}(s),s.languages.wasm={comment:[/\(;[\s\S]*?;\)/,{pattern:/;;.*/,greedy:!0}],string:{pattern:/"(?:\\[\s\S]|[^"\\])*"/,greedy:!0},keyword:[{pattern:/\b(?:align|offset)=/,inside:{operator:/=/}},{pattern:/\b(?:(?:f32|f64|i32|i64)(?:\.(?:abs|add|and|ceil|clz|const|convert_[su]\/i(?:32|64)|copysign|ctz|demote\/f64|div(?:_[su])?|eqz?|extend_[su]\/i32|floor|ge(?:_[su])?|gt(?:_[su])?|le(?:_[su])?|load(?:(?:8|16|32)_[su])?|lt(?:_[su])?|max|min|mul|neg?|nearest|or|popcnt|promote\/f32|reinterpret\/[fi](?:32|64)|rem_[su]|rot[lr]|shl|shr_[su]|sqrt|store(?:8|16|32)?|sub|trunc(?:_[su]\/f(?:32|64))?|wrap\/i64|xor))?|memory\.(?:grow|size))\b/,inside:{punctuation:/\./}},/\b(?:anyfunc|block|br(?:_if|_table)?|call(?:_indirect)?|data|drop|elem|else|end|export|func|get_(?:global|local)|global|if|import|local|loop|memory|module|mut|nop|offset|param|result|return|select|set_(?:global|local)|start|table|tee_local|then|type|unreachable)\b/],variable:/\$[\w!#$%&'*+\-./:<=>?@\\^`|~]+/,number:/[+-]?\b(?:\d(?:_?\d)*(?:\.\d(?:_?\d)*)?(?:[eE][+-]?\d(?:_?\d)*)?|0x[\da-fA-F](?:_?[\da-fA-F])*(?:\.[\da-fA-F](?:_?[\da-fA-D])*)?(?:[pP][+-]?\d(?:_?\d)*)?)\b|\binf\b|\bnan(?::0x[\da-fA-F](?:_?[\da-fA-D])*)?\b/,punctuation:/[()]/};var c=s;function u(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(){return l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l.apply(this,arguments)}var g=/\r\n|\r|\n/,h=function(e){0===e.length?e.push({types:["plain"],content:"\n",empty:!0}):1===e.length&&""===e[0].content&&(e[0].content="\n",e[0].empty=!0)},f=function(e,t){var n=e.length;return n>0&&e[n-1]===t?e:e.concat(t)};function p(e,t){var n={};for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&-1===t.indexOf(a)&&(n[a]=e[a]);return n}var m=function(e){function t(){for(var t=this,n=[],a=arguments.length;a--;)n[a]=arguments[a];e.apply(this,n),u(this,"getThemeDict",(function(e){if(void 0!==t.themeDict&&e.theme===t.prevTheme&&e.language===t.prevLanguage)return t.themeDict;t.prevTheme=e.theme,t.prevLanguage=e.language;var n=e.theme?function(e,t){var n=e.plain,a=Object.create(null),r=e.styles.reduce((function(e,n){var a=n.languages,r=n.style;return a&&!a.includes(t)||n.types.forEach((function(t){var n=l({},e[t],r);e[t]=n})),e}),a);return r.root=n,r.plain=l({},n,{backgroundColor:null}),r}(e.theme,e.language):void 0;return t.themeDict=n})),u(this,"getLineProps",(function(e){var n=e.key,a=e.className,r=e.style,i=l({},p(e,["key","className","style","line"]),{className:"token-line",style:void 0,key:void 0}),o=t.getThemeDict(t.props);return void 0!==o&&(i.style=o.plain),void 0!==r&&(i.style=void 0!==i.style?l({},i.style,r):r),void 0!==n&&(i.key=n),a&&(i.className+=" "+a),i})),u(this,"getStyleForToken",(function(e){var n=e.types,a=e.empty,r=n.length,i=t.getThemeDict(t.props);if(void 0!==i){if(1===r&&"plain"===n[0])return a?{display:"inline-block"}:void 0;if(1===r&&!a)return i[n[0]];var o=a?{display:"inline-block"}:{},d=n.map((function(e){return i[e]}));return Object.assign.apply(Object,[o].concat(d))}})),u(this,"getTokenProps",(function(e){var n=e.key,a=e.className,r=e.style,i=e.token,o=l({},p(e,["key","className","style","token"]),{className:"token "+i.types.join(" "),children:i.content,style:t.getStyleForToken(i),key:void 0});return void 0!==r&&(o.style=void 0!==o.style?l({},o.style,r):r),void 0!==n&&(o.key=n),a&&(o.className+=" "+a),o})),u(this,"tokenize",(function(e,t,n,a){var r={code:t,grammar:n,language:a,tokens:[]};e.hooks.run("before-tokenize",r);var i=r.tokens=e.tokenize(r.code,r.grammar,r.language);return e.hooks.run("after-tokenize",r),i}))}return e&&(t.__proto__=e),t.prototype=Object.create(e&&e.prototype),t.prototype.constructor=t,t.prototype.render=function(){var e=this.props,t=e.Prism,n=e.language,a=e.code,r=e.children,i=this.getThemeDict(this.props),o=t.languages[n];return r({tokens:function(e){for(var t=[[]],n=[e],a=[0],r=[e.length],i=0,o=0,d=[],s=[d];o>-1;){for(;(i=a[o]++)<r[o];){var c=void 0,u=t[o],l=n[o][i];if("string"==typeof l?(u=o>0?u:["plain"],c=l):(u=f(u,l.type),l.alias&&(u=f(u,l.alias)),c=l.content),"string"==typeof c){var p=c.split(g),m=p.length;d.push({types:u,content:p[0]});for(var R=1;R<m;R++)h(d),s.push(d=[]),d.push({types:u,content:p[R]})}else o++,t.push(u),n.push(c),a.push(0),r.push(c.length)}o--,t.pop(),n.pop(),a.pop(),r.pop()}return h(d),s}(void 0!==o?this.tokenize(t,a,o,n):[a]),className:"prism-code language-"+n,style:void 0!==i?i.root:{},getLineProps:this.getLineProps,getTokenProps:this.getTokenProps})},t}(a.Component),R=m,b=n(8446),y=n(77671),v=n.n(y);function _(){return _=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},_.apply(this,arguments)}function w(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function M(e,t){if(null==e)return{};var n,a,r={},i=Object.keys(e);for(a=0;a<i.length;a++)n=i[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}var x={plain:{color:"#C5C8C6",backgroundColor:"#1D1F21"},styles:[{types:["prolog","comment","doctype","cdata"],style:{color:"hsl(30, 20%, 50%)"}},{types:["property","tag","boolean","number","constant","symbol"],style:{color:"hsl(350, 40%, 70%)"}},{types:["attr-name","string","char","builtin","insterted"],style:{color:"hsl(75, 70%, 60%)"}},{types:["operator","entity","url","string","variable","language-css"],style:{color:"hsl(40, 90%, 60%)"}},{types:["deleted"],style:{color:"rgb(255, 85, 85)"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["regex","important"],style:{color:"#e90"}},{types:["atrule","attr-value","keyword"],style:{color:"hsl(350, 40%, 70%)"}},{types:["punctuation","symbol"],style:{opacity:"0.7"}}]},E=["style","theme","onChange"];function S(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function k(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?S(Object(n),!0).forEach((function(t){w(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):S(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var N=function(e){var t=(0,a.useState)({code:e.code||""}),n=t[0],r=t[1];(0,a.useEffect)((function(){n.prevCodeProp&&e.code!==n.prevCodeProp&&r({code:e.code,prevCodeProp:e.code})}),[e.code]);(0,a.useEffect)((function(){e.onChange&&e.onChange(n.code)}),[n.code]);var i=e.style,d=e.theme;e.onChange;var s=M(e,E),u=n.code,l=d&&"object"==typeof d.plain?d.plain:{};return a.createElement(o(),_({value:u,padding:10,highlight:function(t){return a.createElement(R,{Prism:c,code:t,theme:e.theme||x,language:e.language},(function(e){var t=e.tokens,n=e.getLineProps,r=e.getTokenProps;return a.createElement(a.Fragment,null,t.map((function(e,t){return a.createElement("div",n({line:e,key:t}),e.map((function(e,t){return a.createElement("span",r({token:e,key:t}))})))})))}))},onValueChange:function(e){r({code:e})},style:k(k({whiteSpace:"pre",fontFamily:"monospace"},l),i)},s))},D=(0,a.createContext)({});function A(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function j(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?A(Object(n),!0).forEach((function(t){w(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):A(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var T={assign:v()},L=function(e,t){void 0===t&&(t={});var n=j(j({},t),{},{objectAssign:"_poly.assign",transforms:j({dangerousForOf:!0,dangerousTaggedTemplateString:!0},t.transforms)});return(0,b.vs)(e,n).code};function I(e,t){return I=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},I(e,t)}function C(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,I(e,t)}var O=function(e,t){return function(n){function r(){return n.apply(this,arguments)||this}C(r,n);var i=r.prototype;return i.componentDidCatch=function(e){t(e)},i.render=function(){return"function"==typeof e?a.createElement(e,null):a.isValidElement(e)?e:null},r}(a.Component)};function P(e,t,n){return P=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}()?Reflect.construct:function(e,t,n){var a=[null];a.push.apply(a,t);var r=new(Function.bind.apply(e,a));return n&&I(r,n.prototype),r},P.apply(null,arguments)}var z=function(e,t){var n=Object.keys(t),r=n.map((function(e){return t[e]}));return P(Function,["_poly","React"].concat(n,[e])).apply(void 0,[T,a].concat(r))};function B(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function F(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?B(Object(n),!0).forEach((function(t){w(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):B(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function U(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function $(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?U(Object(n),!0).forEach((function(t){w(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):U(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function H(e){var t=e.children,n=e.code,r=e.language,i=e.theme,o=e.disabled,d=e.scope,s=e.transformCode,c=e.transpileOptions,u=e.noInline,l=void 0!==u&&u,g=(0,a.useState)({error:void 0,element:void 0}),h=g[0],f=g[1];function p(e){var t={code:s?s(e):e,scope:d,transpileOptions:c},n=function(e){return f({error:e.toString(),element:void 0})},a=function(e){return f({error:void 0,element:e})};try{l?(f({error:void 0,element:null}),function(e,t,n){var a=e.code,r=void 0===a?"":a,i=e.scope,o=void 0===i?{}:i,d=e.transpileOptions;if(!/render\s*\(/.test(r))return n(new SyntaxError("No-Inline evaluations must call `render`."));z(L(r,d),F(F({},o),{},{render:function(e){void 0===e?n(new SyntaxError("`render` must be called with valid JSX.")):t(O(e,n))}}))}(t,a,n)):a(function(e,t){var n=e.code,a=void 0===n?"":n,r=e.scope,i=void 0===r?{}:r,o=e.transpileOptions,d=a.trim().replace(/;$/,""),s=L("return ("+d+")",o).trim();return O(z(s,i),t)}(t,n))}catch(r){n(r)}}(0,a.useEffect)((function(){p(n)}),[n,d,l,s,c]);return a.createElement(D.Provider,{value:$($({},h),{},{code:n,language:r,theme:i,disabled:o,onError:function(e){return f({error:e.toString()})},onChange:function(e){return p(e)}})},t)}function q(e){var t=(0,a.useContext)(D),n=t.code,r=t.language,i=t.theme,o=t.disabled,d=t.onChange;return a.createElement(N,_({theme:i,code:n,language:r,disabled:o,onChange:d},e))}function Y(e){var t=(0,a.useContext)(D).error;return t?a.createElement("pre",e,t):null}H.defaultProps={code:"",noInline:!1,language:"jsx",disabled:!1};var G=["Component"];function V(e){var t=e.Component,n=M(e,G),r=(0,a.useContext)(D).element;return a.createElement(t,n,r?a.createElement(r,null):null)}V.defaultProps={Component:"div"};var Q=n(64926),W=n.n(Q),K=n(17882),Z=n(12818),X=n(70476),J=n(94671),ee=n(7694),te=JSON.parse('{"$schema":"https://html-validate.org/schemas/elements.json","*":{"attributes":{"contenteditable":{"omit":true,"enum":["true","false"]},"contextmenu":{"deprecated":true},"dir":{"enum":["ltr","rtl","auto"]},"draggable":{"enum":["true","false"]},"hidden":{"boolean":true},"id":{"enum":["/\\\\S+/"]},"tabindex":{"enum":["/-?\\\\d+/"]}}},"a":{"flow":true,"phrasing":true,"interactive":true,"transparent":true,"attributes":{"charset":{"deprecated":true},"coords":{"deprecated":true},"datafld":{"deprecated":true},"datasrc":{"deprecated":true},"download":{"omit":true,"enum":["/.+/"]},"href":{"enum":["/.*/"]},"methods":{"deprecated":true},"name":{"deprecated":true},"shape":{"deprecated":true},"urn":{"deprecated":true}},"permittedDescendants":[{"exclude":"@interactive"}]},"abbr":{"flow":true,"phrasing":true,"permittedContent":["@phrasing"]},"acronym":{"deprecated":{"message":"use <abbr> instead","documentation":"`<abbr>` can be used as a replacement.","source":"html5"}},"address":{"flow":true,"permittedContent":["@flow"],"permittedDescendants":[{"exclude":["address","header","footer","@heading","@sectioning"]}]},"applet":{"deprecated":{"source":"html5"},"attributes":{"datafld":{"deprecated":true},"datasrc":{"deprecated":true}}},"area":{"flow":["isDescendant","map"],"phrasing":["isDescendant","map"],"void":true,"attributes":{"nohref":{"deprecated":true},"shape":{"enum":["rect","circle","poly","default"]}},"requiredAncestors":["map"]},"article":{"flow":true,"sectioning":true,"permittedContent":["@flow"],"permittedDescendants":[{"exclude":["main"]}]},"aside":{"flow":true,"sectioning":true,"permittedContent":["@flow"],"permittedDescendants":[{"exclude":["main"]}]},"audio":{"flow":true,"phrasing":true,"embedded":true,"interactive":["hasAttribute","controls"],"transparent":["@flow"],"attributes":{"preload":{"omit":true,"enum":["none","metadata","auto"]}},"permittedContent":["@flow","track","source"],"permittedDescendants":[{"exclude":["audio","video"]}],"permittedOrder":["source","track","@flow"]},"b":{"flow":true,"phrasing":true,"permittedContent":["@phrasing"]},"base":{"metadata":true,"void":true},"basefont":{"deprecated":{"message":"use CSS instead","documentation":"Use CSS `font-size` property instead.","source":"html4"}},"bdi":{"flow":true,"phrasing":true,"permittedContent":["@phrasing"]},"bdo":{"flow":true,"phrasing":true,"permittedContent":["@phrasing"]},"bgsound":{"deprecated":{"message":"use <audio> instead","documentation":"Use the `<audio>` element instead but consider accessibility concerns with autoplaying sounds.","source":"non-standard"}},"big":{"deprecated":{"message":"use CSS instead","documentation":"Use CSS `font-size` property instead.","source":"html5"}},"blink":{"deprecated":{"documentation":"`<blink>` has no direct replacement and blinking text is frowned upon by accessibility standards.","source":"non-standard"}},"blockquote":{"flow":true,"sectioning":true,"permittedContent":["@flow"]},"body":{"attributes":{"alink":{"deprecated":true},"background":{"deprecated":true},"bgcolor":{"deprecated":true},"link":{"deprecated":true},"marginbottom":{"deprecated":true},"marginheight":{"deprecated":true},"marginleft":{"deprecated":true},"marginright":{"deprecated":true},"margintop":{"deprecated":true},"marginwidth":{"deprecated":true},"text":{"deprecated":true},"vlink":{"deprecated":true}}},"br":{"flow":true,"phrasing":true,"void":true,"attributes":{"clear":{"deprecated":true}}},"button":{"flow":true,"phrasing":true,"interactive":true,"labelable":true,"attributes":{"autofocus":{"boolean":true},"datafld":{"deprecated":true},"dataformatas":{"deprecated":true},"datasrc":{"deprecated":true},"disabled":{"boolean":true},"type":{"required":true,"enum":["submit","reset","button"]}},"permittedContent":["@phrasing"],"permittedDescendants":[{"exclude":["@interactive"]}],"textContent":"accessible"},"canvas":{"flow":true,"phrasing":true,"embedded":true,"transparent":true},"caption":{"permittedContent":["@flow"],"permittedDescendants":[{"exclude":["table"]}],"attributes":{"align":{"deprecated":true}}},"center":{"deprecated":{"message":"use CSS instead","documentation":"Use the CSS `text-align` or `margin: auto` properties instead.","source":"html4"}},"cite":{"flow":true,"phrasing":true,"permittedContent":["@phrasing"]},"code":{"flow":true,"phrasing":true,"permittedContent":["@phrasing"]},"col":{"attributes":{"align":{"deprecated":true},"char":{"deprecated":true},"charoff":{"deprecated":true},"span":{"enum":["/\\\\d+/"]},"valign":{"deprecated":true},"width":{"deprecated":true}},"void":true},"colgroup":{"implicitClosed":["colgroup"],"attributes":{"span":{"enum":["/\\\\d+/"]}},"permittedContent":["col","template"]},"data":{"flow":true,"phrasing":true,"permittedContent":["@phrasing"]},"datalist":{"flow":true,"phrasing":true,"permittedContent":["@phrasing","option"]},"dd":{"implicitClosed":["dd","dt"],"permittedContent":["@flow"],"requiredAncestors":["dl > dd","dl > div > dd"]},"del":{"flow":true,"phrasing":true,"transparent":true},"details":{"flow":true,"sectioning":true,"interactive":true,"attributes":{"open":{"boolean":true}},"permittedContent":["summary","@flow"],"permittedOrder":["summary","@flow"],"requiredContent":["summary"]},"dfn":{"flow":true,"phrasing":true,"permittedContent":["@phrasing"],"permittedDescendants":[{"exclude":["dfn"]}]},"dir":{"deprecated":{"documentation":"The non-standard `<dir>` element has no direct replacement but MDN recommends replacing with `<ul>` and CSS.","source":"html4"}},"div":{"flow":true,"permittedContent":["@flow","dt","dd"],"attributes":{"align":{"deprecated":true},"datafld":{"deprecated":true},"dataformatas":{"deprecated":true},"datasrc":{"deprecated":true}}},"dl":{"flow":true,"permittedContent":["@script","dt","dd","div"],"attributes":{"compact":{"deprecated":true}}},"dt":{"implicitClosed":["dd","dt"],"permittedContent":["@flow"],"permittedDescendants":[{"exclude":["header","footer","@sectioning","@heading"]}],"requiredAncestors":["dl > dt","dl > div > dt"]},"em":{"flow":true,"phrasing":true,"permittedContent":["@phrasing"]},"embed":{"flow":true,"phrasing":true,"embedded":true,"interactive":true,"void":true,"attributes":{"src":{"required":true,"enum":["/.+/"]},"title":{"required":true}}},"fieldset":{"flow":true,"attributes":{"datafld":{"deprecated":true},"disabled":{"boolean":true}},"permittedContent":["@flow","legend?"],"permittedOrder":["legend","@flow"]},"figcaption":{"permittedContent":["@flow"]},"figure":{"flow":true,"permittedContent":["@flow","figcaption?"],"permittedOrder":["figcaption","@flow","figcaption"]},"font":{"deprecated":{"message":"use CSS instead","documentation":"Use CSS font properties instead.","source":"html4"}},"footer":{"flow":true,"permittedContent":["@flow"],"permittedDescendants":[{"exclude":["header","footer","main"]}]},"form":{"flow":true,"form":true,"attributes":{"accept":{"deprecated":true},"autocomplete":{"enum":["on","off"]},"method":{"enum":["get","post"]},"novalidate":{"boolean":true}},"permittedContent":["@flow"],"permittedDescendants":[{"exclude":["@form"]}]},"frame":{"deprecated":{"documentation":"The `<frame>` element can be replaced with the `<iframe>` element but a better solution is to remove usage of frames entirely.","source":"html5"},"attributes":{"datafld":{"deprecated":true},"datasrc":{"deprecated":true},"title":{"required":true}}},"frameset":{"deprecated":{"documentation":"The `<frameset>` element can be replaced with the `<iframe>` element but a better solution is to remove usage of frames entirely.","source":"html5"}},"h1":{"flow":true,"heading":true,"permittedContent":["@phrasing"],"attributes":{"align":{"deprecated":true}}},"h2":{"flow":true,"heading":true,"permittedContent":["@phrasing"],"attributes":{"align":{"deprecated":true}}},"h3":{"flow":true,"heading":true,"permittedContent":["@phrasing"],"attributes":{"align":{"deprecated":true}}},"h4":{"flow":true,"heading":true,"permittedContent":["@phrasing"],"attributes":{"align":{"deprecated":true}}},"h5":{"flow":true,"heading":true,"permittedContent":["@phrasing"],"attributes":{"align":{"deprecated":true}}},"h6":{"flow":true,"heading":true,"permittedContent":["@phrasing"],"attributes":{"align":{"deprecated":true}}},"head":{"permittedContent":["base?","title?","@meta"],"requiredContent":["title"],"attributes":{"profile":{"deprecated":true}}},"header":{"flow":true,"permittedContent":["@flow"],"permittedDescendants":[{"exclude":["header","footer","main"]}]},"hgroup":{"deprecated":true},"hr":{"flow":true,"void":true,"attributes":{"align":{"deprecated":true},"color":{"deprecated":true},"noshade":{"deprecated":true},"size":{"deprecated":true},"width":{"deprecated":true}}},"html":{"permittedContent":["head?","body?"],"permittedOrder":["head","body"],"requiredContent":["head","body"],"attributes":{"lang":{"required":true},"version":{"deprecated":true}}},"i":{"flow":true,"phrasing":true,"permittedContent":["@phrasing"]},"iframe":{"flow":true,"phrasing":true,"embedded":true,"interactive":true,"attributes":{"align":{"deprecated":true},"allowtransparency":{"deprecated":true},"datafld":{"deprecated":true},"datasrc":{"deprecated":true},"frameborder":{"deprecated":true},"hspace":{"deprecated":true},"marginheight":{"deprecated":true},"marginwidth":{"deprecated":true},"scrolling":{"deprecated":true},"src":{"enum":["/.+/"]},"title":{"required":true},"vspace":{"deprecated":true}},"permittedContent":[]},"img":{"flow":true,"phrasing":true,"embedded":true,"interactive":["hasAttribute","usemap"],"void":true,"attributes":{"align":{"deprecated":true},"border":{"deprecated":true},"crossorigin":{"omit":true,"enum":["anonymous","use-credentials"]},"datafld":{"deprecated":true},"datasrc":{"deprecated":true},"decoding":{"enum":["sync","async","auto"]},"hspace":{"deprecated":true},"ismap":{"boolean":true},"lowsrc":{"deprecated":true},"name":{"deprecated":true},"src":{"required":true,"enum":["/.+/"]},"srcset":{"enum":["/[^]+/"]},"vspace":{"deprecated":true}}},"input":{"flow":true,"phrasing":true,"interactive":["matchAttribute",["type","!=","hidden"]],"void":true,"labelable":["matchAttribute",["type","!=","hidden"]],"attributes":{"align":{"deprecated":true},"autofocus":{"boolean":true},"capture":{"omit":true,"enum":["environment","user"]},"checked":{"boolean":true},"datafld":{"deprecated":true},"dataformatas":{"deprecated":true},"datasrc":{"deprecated":true},"disabled":{"boolean":true},"hspace":{"deprecated":true},"inputmode":{"enum":["none","text","decimal","numeric","tel","search","email","url"]},"ismap":{"deprecated":true},"multiple":{"boolean":true},"readonly":{"boolean":true},"required":{"boolean":true},"spellcheck":{"enum":["default","false","true"]},"type":{"required":true,"enum":["button","checkbox","color","date","datetime-local","email","file","hidden","image","month","number","password","radio","range","reset","search","submit","tel","text","time","url","week"]},"usemap":{"deprecated":true},"vspace":{"deprecated":true}}},"ins":{"flow":true,"phrasing":true,"transparent":true},"isindex":{"deprecated":{"source":"html4"}},"kbd":{"flow":true,"phrasing":true,"permittedContent":["@phrasing"]},"keygen":{"flow":true,"phrasing":true,"interactive":true,"void":true,"labelable":true},"label":{"flow":true,"phrasing":true,"interactive":true,"permittedContent":["@phrasing"],"permittedDescendants":[{"exclude":["label"]}],"attributes":{"datafld":{"deprecated":true},"dataformatas":{"deprecated":true},"datasrc":{"deprecated":true}}},"legend":{"permittedContent":["@phrasing","@heading"],"attributes":{"align":{"deprecated":true},"datafld":{"deprecated":true},"dataformatas":{"deprecated":true},"datasrc":{"deprecated":true}}},"li":{"implicitClosed":["li"],"permittedContent":["@flow"],"attributes":{"type":{"deprecated":true}}},"link":{"metadata":true,"void":true,"attributes":{"charset":{"deprecated":true},"crossorigin":{"omit":true,"enum":["anonymous","use-credentials"]},"href":{"required":true,"enum":["/.+/"]},"integrity":{"enum":["/.+/"]},"methods":{"deprecated":true},"target":{"deprecated":true},"urn":{"deprecated":true}}},"listing":{"deprecated":{"source":"html32"}},"main":{"flow":true},"map":{"flow":true,"phrasing":true,"transparent":true},"mark":{"flow":true,"phrasing":true,"permittedContent":["@phrasing"]},"marquee":{"deprecated":{"documentation":"Marked as obsolete by both W3C and WHATWG standards but still implemented in most browsers. Animated text should be avoided for accessibility reasons as well.","source":"html5"},"attributes":{"datafld":{"deprecated":true},"dataformatas":{"deprecated":true},"datasrc":{"deprecated":true}}},"math":{"flow":true,"foreign":true,"phrasing":true,"embedded":true,"attributes":{"align":{"deprecated":true},"dir":{"enum":["ltr","rtl"]},"display":{"enum":["block","inline"]},"hspace":{"deprecated":true},"name":{"deprecated":true},"overflow":{"enum":["linebreak","scroll","elide","truncate","scale"]},"vspace":{"deprecated":true}}},"meta":{"metadata":true,"void":true,"attributes":{"scheme":{"deprecated":true}}},"meter":{"flow":true,"phrasing":true,"labelable":true,"permittedContent":["@phrasing"],"permittedDescendants":[{"exclude":"meter"}]},"multicol":{"deprecated":{"message":"use CSS instead","documentation":"Use CSS columns instead.","source":"html5"}},"nav":{"flow":true,"sectioning":true,"permittedContent":["@flow"],"permittedDescendants":[{"exclude":"main"}]},"nextid":{"deprecated":{"source":"html32"}},"nobr":{"deprecated":{"message":"use CSS instead","documentation":"Use CSS `white-space` property instead.","source":"non-standard"}},"noembed":{"deprecated":{"source":"non-standard"}},"noframes":{"deprecated":{"source":"html5"}},"noscript":{"metadata":true,"flow":true,"phrasing":true,"transparent":true,"permittedDescendants":[{"exclude":"noscript"}]},"object":{"flow":true,"phrasing":true,"embedded":true,"interactive":["hasAttribute","usemap"],"transparent":true,"attributes":{"align":{"deprecated":true},"archive":{"deprecated":true},"border":{"deprecated":true},"classid":{"deprecated":true},"code":{"deprecated":true},"codebase":{"deprecated":true},"codetype":{"deprecated":true},"data":{"enum":["/.+/"]},"datafld":{"deprecated":true},"dataformatas":{"deprecated":true},"datasrc":{"deprecated":true},"declare":{"deprecated":true},"hspace":{"deprecated":true},"standby":{"deprecated":true},"vspace":{"deprecated":true}},"permittedContent":["param","@flow"],"permittedOrder":["param","@flow"]},"ol":{"flow":true,"attributes":{"compact":{"deprecated":true},"reversed":{"boolean":true},"type":{"enum":["a","A","i","I","1"]}},"permittedContent":["@script","li"]},"optgroup":{"implicitClosed":["optgroup"],"attributes":{"disabled":{"boolean":true}},"permittedContent":["@script","option"]},"option":{"implicitClosed":["option"],"attributes":{"dataformatas":{"deprecated":true},"datasrc":{"deprecated":true},"disabled":{"boolean":true},"name":{"deprecated":true},"selected":{"boolean":true}},"permittedContent":[]},"output":{"flow":true,"phrasing":true,"labelable":true,"permittedContent":["@phrasing"]},"p":{"flow":true,"implicitClosed":["address","article","aside","blockquote","div","dl","fieldset","footer","form","h1","h2","h3","h4","h5","h6","header","hgroup","hr","main","nav","ol","p","pre","section","table","ul"],"permittedContent":["@phrasing"],"attributes":{"align":{"deprecated":true}}},"param":{"void":true,"attributes":{"datafld":{"deprecated":true},"type":{"deprecated":true},"valuetype":{"deprecated":true}}},"picture":{"flow":true,"phrasing":true,"embedded":true,"permittedContent":["@script","source","img"],"permittedOrder":["source","img"]},"plaintext":{"deprecated":{"message":"use <pre> or CSS instead","documentation":"Use the `<pre>` element or use CSS to set a monospace font.","source":"html2"}},"pre":{"flow":true,"permittedContent":["@phrasing"],"attributes":{"width":{"deprecated":true}}},"progress":{"flow":true,"phrasing":true,"labelable":true,"permittedContent":["@phrasing"],"permittedDescendants":[{"exclude":"progress"}]},"q":{"flow":true,"phrasing":true,"permittedContent":["@phrasing"]},"rb":{"implicitClosed":["rb","rt","rtc","rp"],"permittedContent":["@phrasing"]},"rp":{"implicitClosed":["rb","rt","rtc","rp"],"permittedContent":["@phrasing"]},"rt":{"implicitClosed":["rb","rt","rtc","rp"],"permittedContent":["@phrasing"]},"rtc":{"implicitClosed":["rb","rtc","rp"],"permittedContent":["@phrasing","rt"]},"ruby":{"flow":true,"phrasing":true,"permittedContent":["@phrasing","rb","rp","rt","rtc"]},"s":{"flow":true,"phrasing":true,"permittedContent":["@phrasing"]},"samp":{"flow":true,"phrasing":true,"permittedContent":["@phrasing"]},"script":{"metadata":true,"flow":true,"phrasing":true,"scriptSupporting":true,"attributes":{"async":{"boolean":true},"crossorigin":{"omit":true,"enum":["anonymous","use-credentials"]},"defer":{"boolean":true},"event":{"deprecated":true},"for":{"deprecated":true},"integrity":{"enum":["/.+/"]},"language":{"deprecated":true},"nomodule":{"boolean":true},"src":{"enum":["/.+/"]}}},"section":{"flow":true,"sectioning":true,"permittedContent":["@flow"]},"select":{"flow":true,"phrasing":true,"interactive":true,"labelable":true,"attributes":{"autofocus":{"boolean":true},"disabled":{"boolean":true},"multiple":{"boolean":true},"required":{"boolean":true},"size":{"enum":["/\\\\d+/"]}},"permittedContent":["@script","datasrc","datafld","dataformatas","option","optgroup"]},"slot":{"flow":true,"phrasing":true,"transparent":true},"small":{"flow":true,"phrasing":true,"permittedContent":["@phrasing"]},"source":{"void":true},"spacer":{"deprecated":{"message":"use CSS instead","documentation":"Use CSS margin or padding instead.","source":"non-standard"}},"span":{"flow":true,"phrasing":true,"permittedContent":["@phrasing"],"attributes":{"datafld":{"deprecated":true},"dataformatas":{"deprecated":true},"datasrc":{"deprecated":true}}},"strike":{"deprecated":{"message":"use <del> or <s> instead","documentation":"Use the `<del>` or `<s>` element instead.","source":"html5"}},"strong":{"flow":true,"phrasing":true,"permittedContent":["@phrasing"]},"style":{"metadata":true},"sub":{"flow":true,"phrasing":true,"permittedContent":["@phrasing"]},"summary":{"permittedContent":["@phrasing","@heading"]},"sup":{"flow":true,"phrasing":true,"permittedContent":["@phrasing"]},"svg":{"flow":true,"foreign":true,"phrasing":true,"embedded":true},"table":{"flow":true,"permittedContent":["@script","caption?","colgroup","tbody","tfoot?","thead?","tr"],"permittedOrder":["caption","colgroup","thead","tbody","tr","tfoot"],"attributes":{"align":{"deprecated":true},"background":{"deprecated":true},"bgcolor":{"deprecated":true},"bordercolor":{"deprecated":true},"cellpadding":{"deprecated":true},"cellspacing":{"deprecated":true},"dataformatas":{"deprecated":true},"datapagesize":{"deprecated":true},"datasrc":{"deprecated":true},"frame":{"deprecated":true},"rules":{"deprecated":true},"summary":{"deprecated":true},"width":{"deprecated":true}}},"tbody":{"implicitClosed":["tbody","tfoot"],"permittedContent":["@script","tr"],"attributes":{"align":{"deprecated":true},"background":{"deprecated":true},"char":{"deprecated":true},"charoff":{"deprecated":true},"valign":{"deprecated":true}}},"td":{"flow":true,"implicitClosed":["td","th"],"attributes":{"align":{"deprecated":true},"axis":{"deprecated":true},"background":{"deprecated":true},"bgcolor":{"deprecated":true},"char":{"deprecated":true},"charoff":{"deprecated":true},"colspan":{"enum":["/\\\\d+/"]},"height":{"deprecated":true},"nowrap":{"deprecated":true},"rowspan":{"enum":["/\\\\d+/"]},"scope":{"deprecated":true},"valign":{"deprecated":true},"width":{"deprecated":true}},"permittedContent":["@flow"]},"template":{"metadata":true,"flow":true,"phrasing":true,"scriptSupporting":true},"textarea":{"flow":true,"phrasing":true,"interactive":true,"labelable":true,"attributes":{"autocomplete":{"enum":["on","off"]},"autofocus":{"boolean":true},"cols":{"enum":["/\\\\d+/"]},"datafld":{"deprecated":true},"datasrc":{"deprecated":true},"disabled":{"boolean":true},"maxlength":{"enum":["/\\\\d+/"]},"minlength":{"enum":["/\\\\d+/"]},"readonly":{"boolean":true},"required":{"boolean":true},"rows":{"enum":["/\\\\d+/"]},"spellcheck":{"enum":["true","default","false"]},"wrap":{"enum":["hard","soft"]}},"permittedContent":[]},"tfoot":{"implicitClosed":["tbody"],"permittedContent":["@script","tr"],"attributes":{"align":{"deprecated":true},"background":{"deprecated":true},"char":{"deprecated":true},"charoff":{"deprecated":true},"valign":{"deprecated":true}}},"th":{"flow":true,"implicitClosed":["td","th"],"attributes":{"align":{"deprecated":true},"axis":{"deprecated":true},"background":{"deprecated":true},"bgcolor":{"deprecated":true},"char":{"deprecated":true},"charoff":{"deprecated":true},"colspan":{"enum":["/\\\\d+/"]},"height":{"deprecated":true},"nowrap":{"deprecated":true},"rowspan":{"enum":["/\\\\d+/"]},"scope":{"required":true,"enum":["row","col","rowgroup","colgroup","auto"]},"valign":{"deprecated":true},"width":{"deprecated":true}},"permittedContent":["@flow"],"permittedDescendants":[{"exclude":["header","footer","@sectioning","@heading"]}]},"thead":{"implicitClosed":["tbody","tfoot"],"permittedContent":["@script","tr"],"attributes":{"align":{"deprecated":true},"background":{"deprecated":true},"char":{"deprecated":true},"charoff":{"deprecated":true},"valign":{"deprecated":true}}},"time":{"flow":true,"phrasing":true,"permittedContent":["@phrasing"]},"title":{"metadata":true,"permittedContent":[]},"tr":{"implicitClosed":["tr"],"permittedContent":["@script","td","th"],"attributes":{"align":{"deprecated":true},"background":{"deprecated":true},"bgcolor":{"deprecated":true},"char":{"deprecated":true},"charoff":{"deprecated":true},"valign":{"deprecated":true}}},"track":{"void":true},"tt":{"deprecated":{"documentation":"Use a more semantically correct element such as `<code>`, `<var>` or `<pre>`.","source":"html4"}},"u":{"flow":true,"phrasing":true,"permittedContent":["@phrasing"]},"ul":{"flow":true,"permittedContent":["@script","li"],"attributes":{"compact":{"deprecated":true},"type":{"deprecated":true}}},"var":{"flow":true,"phrasing":true,"permittedContent":["@phrasing"]},"video":{"flow":true,"phrasing":true,"embedded":true,"interactive":["hasAttribute","controls"],"transparent":["@flow"],"attributes":{"preload":{"omit":true,"enum":["none","metadata","auto"]}},"permittedContent":["@flow","track","source"],"permittedDescendants":[{"exclude":["audio","video"]}],"permittedOrder":["source","track","@flow"]},"wbr":{"flow":true,"phrasing":true,"void":true},"xmp":{"deprecated":{"documentation":"Use `<pre>` or `<code>` and escape content using HTML entities instead.","source":"html32"}}}'),ne=n(21258);var ae=e=>{let{code:t}=e;const{0:n,1:r}=(0,a.useState)(null),{0:i,1:o}=(0,a.useState)(void 0);return(0,a.useEffect)((()=>{if((()=>{try{return"foobarfoobehind"==="foobarfoofoo".replace(new RegExp("(?<=foo)foo","g"),"behind")}catch(n){return!1}})()){const e=new ne.bD({extends:["html-validate:standard"],elements:[te]});o(new ne.e5(e))}}),[]),(0,a.useEffect)((()=>{if(i){const e=i.validateString(t);e.valid?r(null):r(e.results[0].messages[0])}}),[t,i]),i&&n?a.createElement("pre",{className:"live-error-core"},"SyntaxError: ",n.message+" ("+n.line+":"+n.column+")"):null};const re={allowedTags:!1,disallowedTagsMode:"discard",allowedAttributes:{"*":["aria-describedby","aria-hidden","aria-label","aria-labelledby","aria-level","class","checked","d","data-*","disabled","fill","for","height","href","id","name","onclick","patternUnits","patternunits","placeholder","points","readonly","rel","required","role","scope","span","style","tabIndex","target","transform","type","value","width","x","xmlns","y"],a:["href","name","target"],img:["src","srcset","alt","title","width","height","loading"]},selfClosing:["img","br","hr","area","base","basefont","input","link","meta"],allowedSchemes:["http","https","ftp","mailto","tel"],allowedSchemesByTag:{},allowedSchemesAppliedToAttributes:["href","src","cite"],allowProtocolRelative:!0,enforceHtmlBoundary:!1};var ie=e=>{let{children:t}=e;return t?a.createElement("pre",null,t):null};const oe="playground-block-preview",de=e=>{let{children:t,className:n,...r}=e;return a.createElement("div",Object.assign({},r,{className:oe+" "+(null!=n?n:"")}),t)},se=e=>{let{...t}=e;return a.createElement(de,Object.assign({className:"playground-block-preview-light"},t))},ce=e=>"jsx"===e,ue=e=>{const t=e.trim();return t.startsWith("{")&&t.endsWith("}")?t.substr(1,t.length-2).trim():t};const le=e=>{let{code:t}=e;return a.createElement(de,{dangerouslySetInnerHTML:{__html:W()(t,re)}})},ge=(he=e=>{let{onChange:t,initialCode:n,code:r,language:i}=e;const o=(0,a.useRef)(),d=(0,a.useRef)(),{0:s,1:c}=(0,a.useState)(0),u="COPY_SUCCESS",l="COPY_ERROR",{0:g,1:h}=(0,a.useState)(""),f="code-block-textarea-"+i+"-"+s,p="code-block-helper-"+i+"-"+s,m=(0,a.useCallback)((e=>e.querySelector("#"+f)),[f]),R=(0,a.useCallback)((e=>{"Enter"===e.key&&o.current&&e.target===o.current&&(e.preventDefault(),m(o.current).focus())}),[m]);return(0,a.useEffect)((()=>{if(o.current){const e=m(o.current);e&&(e.setAttribute("aria-describedby",p),e.setAttribute("tabIndex","-1"),e.addEventListener("blur",(e=>{o.current&&!e.relatedTarget&&o.current.focus()})))}}),[m,p]),a.createElement(a.Fragment,null,a.createElement("div",{className:"playground-block-editor"},a.createElement("div",{className:"playground-block-editor-viewport",tabIndex:0,onKeyDown:R,ref:o},a.createElement("div",{className:"playground-block-editor-code"},a.createElement("div",{className:"playground-block-editor-texts"},a.createElement("label",{className:"playground-block-editor-label",htmlFor:f},"Editable code example"),a.createElement("span",{className:"playground-block-editor-helper",id:p},"Press Enter to start editing. Press Esc to stop editing.")),a.createElement("div",{className:"playground-block-editor-scrollbox",tabIndex:-1},a.createElement(q,{key:s,onChange:t,className:"playground-block-editor-code-input",textareaId:f,theme:ee.Z,language:i}))))),a.createElement("div",{className:"playground-block-buttons"},a.createElement(K.B,{ref:d,variant:"secondary",size:"small",onClick:async()=>{if(o.current&&d.current){const t=m(o.current);h("");try{await navigator.clipboard.writeText(t.value),h(u)}catch(e){h(l),console.warn("Copy failed: "+e)}window.getSelection?window.getSelection().removeAllRanges():document.selection&&document.selection.empty()}}},"Copy code"),g===u&&a.createElement(Z.N,{type:"success",label:"Code copied",position:"bottom-right",autoClose:!0,displayAutoCloseProgress:!1,onClose:()=>h("")},"Example code was copied to clipboard."),g===l&&a.createElement(Z.N,{type:"error",label:"Copy failed",position:"bottom-right",displayAutoCloseProgress:!1,dismissible:!0,closeButtonLabelText:"Close toast",onClose:()=>{h(""),d.current&&d.current.focus()}},"Try again or copy the code using the clipboard."),a.createElement(K.B,{variant:"secondary",iconLeft:a.createElement(X.i,{"aria-hidden":!0}),size:"small",disabled:n===r,onClick:()=>{t(n),c(s+1),o.current&&o.current.focus()}},"Reset example")),"jsx"===i&&a.createElement(Y,null),"jsx"!==i&&a.createElement(ae,{code:r}))},fe=function(e){function t(){return e.apply(this,arguments)||this}return C(t,e),t.prototype.render=function(){var e=this;return a.createElement(D.Consumer,null,(function(t){return a.createElement(he,_({live:t},e.props))}))},t}(a.Component),fe);var he,fe;const pe=e=>{const t={...(0,r.ah)(),...e.scope},n=(Array.isArray(e.children)?e.children:[e.children]).filter((e=>(0,a.isValidElement)(e))).map((e=>{let{props:t}=e;const n=t.children.props;return{code:n.children,language:n.className&&n.className.split("-")[1]}})),i=n.reduce(((e,t)=>(e[t.language]=t.code,e)),{}),{0:o,1:d}=(0,a.useState)(i),s=e=>t=>{d({...o,[e]:t})};return a.createElement("div",{className:"playground-block"},a.createElement(J.a,null,a.createElement(J.b,{className:"playground-block-tabs"},n.map((e=>{let{language:t}=e;return a.createElement(J.T,{key:t},ce(t)?"React":"Core")}))),n.map((e=>{let{code:n,language:r}=e;const i=ue(o[r]),d=()=>ce(r)?a.createElement(V,{className:oe}):a.createElement(le,{code:i});return a.createElement(J.c,{key:r},a.createElement(H,{code:i,transformCode:e=>""+function(e){return"render("+e.replace(/import\s*{\s*(\S+)(\s*,\s*\S+)*\s*}\s*from\s*'([^\s;]+)';?/g,"")+")"}(e),scope:t,language:r,noInline:!0},a.createElement("div",{className:"playground-block-content"},a.createElement(d,null),a.createElement(ge,{initialCode:ue(n),language:r,onChange:s(r),code:o[r]}))))}))))}},56302:function(e,t,n){"use strict";n.d(t,{Z:function(){return me}});var a,r,i,o,d=n(45697),s=n.n(d),c=n(83524),u=n.n(c),l=n(54335),g=n.n(l),h=n(67294),f=n(24852),p=n.n(f),m="bodyAttributes",R="htmlAttributes",b="titleAttributes",y={BASE:"base",BODY:"body",HEAD:"head",HTML:"html",LINK:"link",META:"meta",NOSCRIPT:"noscript",SCRIPT:"script",STYLE:"style",TITLE:"title"},v=(Object.keys(y).map((function(e){return y[e]})),"charset"),_="cssText",w="href",M="http-equiv",x="innerHTML",E="itemprop",S="name",k="property",N="rel",D="src",A="target",j={accesskey:"accessKey",charset:"charSet",class:"className",contenteditable:"contentEditable",contextmenu:"contextMenu","http-equiv":"httpEquiv",itemprop:"itemProp",tabindex:"tabIndex"},T="defaultTitle",L="defer",I="encodeSpecialCharacters",C="onChangeClientState",O="titleTemplate",P=Object.keys(j).reduce((function(e,t){return e[j[t]]=t,e}),{}),z=[y.NOSCRIPT,y.SCRIPT,y.STYLE],B="data-react-helmet",F="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},U=function(){function e(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}return function(t,n,a){return n&&e(t.prototype,n),a&&e(t,a),t}}(),$=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},H=function(e,t){var n={};for(var a in e)t.indexOf(a)>=0||Object.prototype.hasOwnProperty.call(e,a)&&(n[a]=e[a]);return n},q=function(e){return!1===(!(arguments.length>1&&void 0!==arguments[1])||arguments[1])?String(e):String(e).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#x27;")},Y=function(e){var t=K(e,y.TITLE),n=K(e,O);if(n&&t)return n.replace(/%s/g,(function(){return Array.isArray(t)?t.join(""):t}));var a=K(e,T);return t||a||void 0},G=function(e){return K(e,C)||function(){}},V=function(e,t){return t.filter((function(t){return void 0!==t[e]})).map((function(t){return t[e]})).reduce((function(e,t){return $({},e,t)}),{})},Q=function(e,t){return t.filter((function(e){return void 0!==e[y.BASE]})).map((function(e){return e[y.BASE]})).reverse().reduce((function(t,n){if(!t.length)for(var a=Object.keys(n),r=0;r<a.length;r++){var i=a[r].toLowerCase();if(-1!==e.indexOf(i)&&n[i])return t.concat(n)}return t}),[])},W=function(e,t,n){var a={};return n.filter((function(t){return!!Array.isArray(t[e])||(void 0!==t[e]&&te("Helmet: "+e+' should be of type "Array". Instead found type "'+F(t[e])+'"'),!1)})).map((function(t){return t[e]})).reverse().reduce((function(e,n){var r={};n.filter((function(e){for(var n=void 0,i=Object.keys(e),o=0;o<i.length;o++){var d=i[o],s=d.toLowerCase();-1===t.indexOf(s)||n===N&&"canonical"===e[n].toLowerCase()||s===N&&"stylesheet"===e[s].toLowerCase()||(n=s),-1===t.indexOf(d)||d!==x&&d!==_&&d!==E||(n=d)}if(!n||!e[n])return!1;var c=e[n].toLowerCase();return a[n]||(a[n]={}),r[n]||(r[n]={}),!a[n][c]&&(r[n][c]=!0,!0)})).reverse().forEach((function(t){return e.push(t)}));for(var i=Object.keys(r),o=0;o<i.length;o++){var d=i[o],s=p()({},a[d],r[d]);a[d]=s}return e}),[]).reverse()},K=function(e,t){for(var n=e.length-1;n>=0;n--){var a=e[n];if(a.hasOwnProperty(t))return a[t]}return null},Z=(a=Date.now(),function(e){var t=Date.now();t-a>16?(a=t,e(t)):setTimeout((function(){Z(e)}),0)}),X=function(e){return clearTimeout(e)},J="undefined"!=typeof window?window.requestAnimationFrame&&window.requestAnimationFrame.bind(window)||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||Z:n.g.requestAnimationFrame||Z,ee="undefined"!=typeof window?window.cancelAnimationFrame||window.webkitCancelAnimationFrame||window.mozCancelAnimationFrame||X:n.g.cancelAnimationFrame||X,te=function(e){return console&&"function"==typeof console.warn&&console.warn(e)},ne=null,ae=function(e,t){var n=e.baseTag,a=e.bodyAttributes,r=e.htmlAttributes,i=e.linkTags,o=e.metaTags,d=e.noscriptTags,s=e.onChangeClientState,c=e.scriptTags,u=e.styleTags,l=e.title,g=e.titleAttributes;oe(y.BODY,a),oe(y.HTML,r),ie(l,g);var h={baseTag:de(y.BASE,n),linkTags:de(y.LINK,i),metaTags:de(y.META,o),noscriptTags:de(y.NOSCRIPT,d),scriptTags:de(y.SCRIPT,c),styleTags:de(y.STYLE,u)},f={},p={};Object.keys(h).forEach((function(e){var t=h[e],n=t.newTags,a=t.oldTags;n.length&&(f[e]=n),a.length&&(p[e]=h[e].oldTags)})),t&&t(),s(e,f,p)},re=function(e){return Array.isArray(e)?e.join(""):e},ie=function(e,t){void 0!==e&&document.title!==e&&(document.title=re(e)),oe(y.TITLE,t)},oe=function(e,t){var n=document.getElementsByTagName(e)[0];if(n){for(var a=n.getAttribute(B),r=a?a.split(","):[],i=[].concat(r),o=Object.keys(t),d=0;d<o.length;d++){var s=o[d],c=t[s]||"";n.getAttribute(s)!==c&&n.setAttribute(s,c),-1===r.indexOf(s)&&r.push(s);var u=i.indexOf(s);-1!==u&&i.splice(u,1)}for(var l=i.length-1;l>=0;l--)n.removeAttribute(i[l]);r.length===i.length?n.removeAttribute(B):n.getAttribute(B)!==o.join(",")&&n.setAttribute(B,o.join(","))}},de=function(e,t){var n=document.head||document.querySelector(y.HEAD),a=n.querySelectorAll(e+"["+B+"]"),r=Array.prototype.slice.call(a),i=[],o=void 0;return t&&t.length&&t.forEach((function(t){var n=document.createElement(e);for(var a in t)if(t.hasOwnProperty(a))if(a===x)n.innerHTML=t.innerHTML;else if(a===_)n.styleSheet?n.styleSheet.cssText=t.cssText:n.appendChild(document.createTextNode(t.cssText));else{var d=void 0===t[a]?"":t[a];n.setAttribute(a,d)}n.setAttribute(B,"true"),r.some((function(e,t){return o=t,n.isEqualNode(e)}))?r.splice(o,1):i.push(n)})),r.forEach((function(e){return e.parentNode.removeChild(e)})),i.forEach((function(e){return n.appendChild(e)})),{oldTags:r,newTags:i}},se=function(e){return Object.keys(e).reduce((function(t,n){var a=void 0!==e[n]?n+'="'+e[n]+'"':""+n;return t?t+" "+a:a}),"")},ce=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return Object.keys(e).reduce((function(t,n){return t[j[n]||n]=e[n],t}),t)},ue=function(e,t,n){switch(e){case y.TITLE:return{toComponent:function(){return e=t.title,n=t.titleAttributes,(a={key:e})[B]=!0,r=ce(n,a),[h.createElement(y.TITLE,r,e)];var e,n,a,r},toString:function(){return function(e,t,n,a){var r=se(n),i=re(t);return r?"<"+e+" "+B+'="true" '+r+">"+q(i,a)+"</"+e+">":"<"+e+" "+B+'="true">'+q(i,a)+"</"+e+">"}(e,t.title,t.titleAttributes,n)}};case m:case R:return{toComponent:function(){return ce(t)},toString:function(){return se(t)}};default:return{toComponent:function(){return function(e,t){return t.map((function(t,n){var a,r=((a={key:n})[B]=!0,a);return Object.keys(t).forEach((function(e){var n=j[e]||e;if(n===x||n===_){var a=t.innerHTML||t.cssText;r.dangerouslySetInnerHTML={__html:a}}else r[n]=t[e]})),h.createElement(e,r)}))}(e,t)},toString:function(){return function(e,t,n){return t.reduce((function(t,a){var r=Object.keys(a).filter((function(e){return!(e===x||e===_)})).reduce((function(e,t){var r=void 0===a[t]?t:t+'="'+q(a[t],n)+'"';return e?e+" "+r:r}),""),i=a.innerHTML||a.cssText||"",o=-1===z.indexOf(e);return t+"<"+e+" "+B+'="true" '+r+(o?"/>":">"+i+"</"+e+">")}),"")}(e,t,n)}}}},le=function(e){var t=e.baseTag,n=e.bodyAttributes,a=e.encode,r=e.htmlAttributes,i=e.linkTags,o=e.metaTags,d=e.noscriptTags,s=e.scriptTags,c=e.styleTags,u=e.title,l=void 0===u?"":u,g=e.titleAttributes;return{base:ue(y.BASE,t,a),bodyAttributes:ue(m,n,a),htmlAttributes:ue(R,r,a),link:ue(y.LINK,i,a),meta:ue(y.META,o,a),noscript:ue(y.NOSCRIPT,d,a),script:ue(y.SCRIPT,s,a),style:ue(y.STYLE,c,a),title:ue(y.TITLE,{title:l,titleAttributes:g},a)}},ge=u()((function(e){return{baseTag:Q([w,A],e),bodyAttributes:V(m,e),defer:K(e,L),encode:K(e,I),htmlAttributes:V(R,e),linkTags:W(y.LINK,[N,w],e),metaTags:W(y.META,[S,v,M,k,E],e),noscriptTags:W(y.NOSCRIPT,[x],e),onChangeClientState:G(e),scriptTags:W(y.SCRIPT,[D,x],e),styleTags:W(y.STYLE,[_],e),title:Y(e),titleAttributes:V(b,e)}}),(function(e){ne&&ee(ne),e.defer?ne=J((function(){ae(e,(function(){ne=null}))})):(ae(e),ne=null)}),le)((function(){return null})),he=(r=ge,o=i=function(e){function t(){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,e.apply(this,arguments))}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,e),t.prototype.shouldComponentUpdate=function(e){return!g()(this.props,e)},t.prototype.mapNestedChildrenToProps=function(e,t){if(!t)return null;switch(e.type){case y.SCRIPT:case y.NOSCRIPT:return{innerHTML:t};case y.STYLE:return{cssText:t}}throw new Error("<"+e.type+" /> elements are self-closing and can not contain children. Refer to our API for more information.")},t.prototype.flattenArrayTypeChildren=function(e){var t,n=e.child,a=e.arrayTypeChildren,r=e.newChildProps,i=e.nestedChildren;return $({},a,((t={})[n.type]=[].concat(a[n.type]||[],[$({},r,this.mapNestedChildrenToProps(n,i))]),t))},t.prototype.mapObjectTypeChildren=function(e){var t,n,a=e.child,r=e.newProps,i=e.newChildProps,o=e.nestedChildren;switch(a.type){case y.TITLE:return $({},r,((t={})[a.type]=o,t.titleAttributes=$({},i),t));case y.BODY:return $({},r,{bodyAttributes:$({},i)});case y.HTML:return $({},r,{htmlAttributes:$({},i)})}return $({},r,((n={})[a.type]=$({},i),n))},t.prototype.mapArrayTypeChildrenToProps=function(e,t){var n=$({},t);return Object.keys(e).forEach((function(t){var a;n=$({},n,((a={})[t]=e[t],a))})),n},t.prototype.warnOnInvalidChildren=function(e,t){return!0},t.prototype.mapChildrenToProps=function(e,t){var n=this,a={};return h.Children.forEach(e,(function(e){if(e&&e.props){var r=e.props,i=r.children,o=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return Object.keys(e).reduce((function(t,n){return t[P[n]||n]=e[n],t}),t)}(H(r,["children"]));switch(n.warnOnInvalidChildren(e,i),e.type){case y.LINK:case y.META:case y.NOSCRIPT:case y.SCRIPT:case y.STYLE:a=n.flattenArrayTypeChildren({child:e,arrayTypeChildren:a,newChildProps:o,nestedChildren:i});break;default:t=n.mapObjectTypeChildren({child:e,newProps:t,newChildProps:o,nestedChildren:i})}}})),t=this.mapArrayTypeChildrenToProps(a,t)},t.prototype.render=function(){var e=this.props,t=e.children,n=H(e,["children"]),a=$({},n);return t&&(a=this.mapChildrenToProps(t,a)),h.createElement(r,a)},U(t,null,[{key:"canUseDOM",set:function(e){r.canUseDOM=e}}]),t}(h.Component),i.propTypes={base:s().object,bodyAttributes:s().object,children:s().oneOfType([s().arrayOf(s().node),s().node]),defaultTitle:s().string,defer:s().bool,encodeSpecialCharacters:s().bool,htmlAttributes:s().object,link:s().arrayOf(s().object),meta:s().arrayOf(s().object),noscript:s().arrayOf(s().object),onChangeClientState:s().func,script:s().arrayOf(s().object),style:s().arrayOf(s().object),title:s().string,titleAttributes:s().object,titleTemplate:s().string},i.defaultProps={defer:!0,encodeSpecialCharacters:!0},i.peek=r.peek,i.rewind=function(){var e=r.rewind();return e||(e=le({baseTag:[],bodyAttributes:{},encodeSpecialCharacters:!0,htmlAttributes:{},linkTags:[],metaTags:[],noscriptTags:[],scriptTags:[],styleTags:[],title:"",titleAttributes:{}})),e},o);he.renderStatic=he.rewind;var fe=n(14160);function pe(e){let{lang:t,meta:n,title:a,description:r,pageTitle:i}=e;const o=a+" | "+i;return h.createElement(he,{htmlAttributes:{lang:t},title:o,meta:[{name:"description",content:r},{property:"og:title",content:o},{property:"og:description",content:r},{property:"og:type",content:"website"},{property:"og:image",content:"https://hds.hel.fi/images/homepage/amos58.jpg"}].concat(n)},h.createElement("link",{rel:"icon",type:"image/svg+xml",href:(0,fe.withPrefix)("/favicon/light/favicon.svg"),media:"(prefers-color-scheme: light)"}),h.createElement("link",{rel:"icon",type:"image/png",sizes:"192x192",href:(0,fe.withPrefix)("/favicon/light/favicon-192x192.png"),media:"(prefers-color-scheme: light)"}),h.createElement("link",{rel:"icon",type:"image/png",sizes:"512x512",href:(0,fe.withPrefix)("/favicon/light/favicon-512x512.png"),media:"(prefers-color-scheme: light)"}),h.createElement("link",{rel:"apple-touch-icon",href:(0,fe.withPrefix)("/favicon/light/apple-touch-icon.png"),media:"(prefers-color-scheme: light)"}),h.createElement("link",{rel:"icon",sizes:"any",href:(0,fe.withPrefix)("/favicon/light/favicon-32x32.ico"),media:"(prefers-color-scheme: light)"}),h.createElement("link",{rel:"icon",type:"image/svg+xml",href:(0,fe.withPrefix)("/favicon/dark/favicon.svg"),media:"(prefers-color-scheme: dark)"}),h.createElement("link",{rel:"icon",type:"image/png",sizes:"192x192",href:(0,fe.withPrefix)("/favicon/dark/favicon-192x192.png"),media:"(prefers-color-scheme: dark)"}),h.createElement("link",{rel:"icon",type:"image/png",sizes:"512x512",href:(0,fe.withPrefix)("/favicon/dark/favicon-512x512.png"),media:"(prefers-color-scheme: dark)"}),h.createElement("link",{rel:"apple-touch-icon",href:(0,fe.withPrefix)("/favicon/dark/apple-touch-icon.png"),media:"(prefers-color-scheme: dark)"}),h.createElement("link",{rel:"icon",sizes:"any",href:(0,fe.withPrefix)("/favicon/dark/favicon-32x32.ico"),media:"(prefers-color-scheme: dark)"}))}pe.defaultProps={lang:"en",meta:[],description:""};var me=pe},18607:function(e,t,n){"use strict";n.d(t,{Z:function(){return U}});var a=n(15785),r=n(67294),i=n(14160),o=n(11151),d=n(8381),s=n(96293),c=n(21662),u=n(11167),l=n(71015),g=n(32384),h=n(41110),f=n(56302),p=n(50246),m=function(){var e=/(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i,t=0,n={},a={util:{encode:function e(t){return t instanceof r?new r(t.type,e(t.content),t.alias):Array.isArray(t)?t.map(e):t.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).slice(8,-1)},objId:function(e){return e.__id||Object.defineProperty(e,"__id",{value:++t}),e.__id},clone:function e(t,n){var r,i;switch(n=n||{},a.util.type(t)){case"Object":if(i=a.util.objId(t),n[i])return n[i];for(var o in r={},n[i]=r,t)t.hasOwnProperty(o)&&(r[o]=e(t[o],n));return r;case"Array":return i=a.util.objId(t),n[i]?n[i]:(r=[],n[i]=r,t.forEach((function(t,a){r[a]=e(t,n)})),r);default:return t}},getLanguage:function(t){for(;t;){var n=e.exec(t.className);if(n)return n[1].toLowerCase();t=t.parentElement}return"none"},setLanguage:function(t,n){t.className=t.className.replace(RegExp(e,"gi"),""),t.classList.add("language-"+n)},isActive:function(e,t,n){for(var a="no-"+t;e;){var r=e.classList;if(r.contains(t))return!0;if(r.contains(a))return!1;e=e.parentElement}return!!n}},languages:{plain:n,plaintext:n,text:n,txt:n,extend:function(e,t){var n=a.util.clone(a.languages[e]);for(var r in t)n[r]=t[r];return n},insertBefore:function(e,t,n,r){var i=(r=r||a.languages)[e],o={};for(var d in i)if(i.hasOwnProperty(d)){if(d==t)for(var s in n)n.hasOwnProperty(s)&&(o[s]=n[s]);n.hasOwnProperty(d)||(o[d]=i[d])}var c=r[e];return r[e]=o,a.languages.DFS(a.languages,(function(t,n){n===c&&t!=e&&(this[t]=o)})),o},DFS:function e(t,n,r,i){i=i||{};var o=a.util.objId;for(var d in t)if(t.hasOwnProperty(d)){n.call(t,d,t[d],r||d);var s=t[d],c=a.util.type(s);"Object"!==c||i[o(s)]?"Array"!==c||i[o(s)]||(i[o(s)]=!0,e(s,n,d,i)):(i[o(s)]=!0,e(s,n,null,i))}}},plugins:{},highlight:function(e,t,n){var i={code:e,grammar:t,language:n};return a.hooks.run("before-tokenize",i),i.tokens=a.tokenize(i.code,i.grammar),a.hooks.run("after-tokenize",i),r.stringify(a.util.encode(i.tokens),i.language)},tokenize:function(e,t){var n=t.rest;if(n){for(var a in n)t[a]=n[a];delete t.rest}var r=new d;return s(r,r.head,e),o(e,r,t,r.head,0),function(e){var t=[],n=e.head.next;for(;n!==e.tail;)t.push(n.value),n=n.next;return t}(r)},hooks:{all:{},add:function(e,t){var n=a.hooks.all;n[e]=n[e]||[],n[e].push(t)},run:function(e,t){var n=a.hooks.all[e];if(n&&n.length)for(var r,i=0;r=n[i++];)r(t)}},Token:r};function r(e,t,n,a){this.type=e,this.content=t,this.alias=n,this.length=0|(a||"").length}function i(e,t,n,a){e.lastIndex=t;var r=e.exec(n);if(r&&a&&r[1]){var i=r[1].length;r.index+=i,r[0]=r[0].slice(i)}return r}function o(e,t,n,d,u,l){for(var g in n)if(n.hasOwnProperty(g)&&n[g]){var h=n[g];h=Array.isArray(h)?h:[h];for(var f=0;f<h.length;++f){if(l&&l.cause==g+","+f)return;var p=h[f],m=p.inside,R=!!p.lookbehind,b=!!p.greedy,y=p.alias;if(b&&!p.pattern.global){var v=p.pattern.toString().match(/[imsuy]*$/)[0];p.pattern=RegExp(p.pattern.source,v+"g")}for(var _=p.pattern||p,w=d.next,M=u;w!==t.tail&&!(l&&M>=l.reach);M+=w.value.length,w=w.next){var x=w.value;if(t.length>e.length)return;if(!(x instanceof r)){var E,S=1;if(b){if(!(E=i(_,M,e,R))||E.index>=e.length)break;var k=E.index,N=E.index+E[0].length,D=M;for(D+=w.value.length;k>=D;)D+=(w=w.next).value.length;if(M=D-=w.value.length,w.value instanceof r)continue;for(var A=w;A!==t.tail&&(D<N||"string"==typeof A.value);A=A.next)S++,D+=A.value.length;S--,x=e.slice(M,D),E.index-=M}else if(!(E=i(_,0,x,R)))continue;k=E.index;var j=E[0],T=x.slice(0,k),L=x.slice(k+j.length),I=M+x.length;l&&I>l.reach&&(l.reach=I);var C=w.prev;if(T&&(C=s(t,C,T),M+=T.length),c(t,C,S),w=s(t,C,new r(g,m?a.tokenize(j,m):j,y,j)),L&&s(t,w,L),S>1){var O={cause:g+","+f,reach:I};o(e,t,n,w.prev,M,O),l&&O.reach>l.reach&&(l.reach=O.reach)}}}}}}function d(){var e={value:null,prev:null,next:null},t={value:null,prev:e,next:null};e.next=t,this.head=e,this.tail=t,this.length=0}function s(e,t,n){var a=t.next,r={value:n,prev:t,next:a};return t.next=r,a.prev=r,e.length++,r}function c(e,t,n){for(var a=t.next,r=0;r<n&&a!==e.tail;r++)a=a.next;t.next=a,a.prev=t,e.length-=r}return r.stringify=function e(t,n){if("string"==typeof t)return t;if(Array.isArray(t)){var r="";return t.forEach((function(t){r+=e(t,n)})),r}var i={type:t.type,content:e(t.content,n),tag:"span",classes:["token",t.type],attributes:{},language:n},o=t.alias;o&&(Array.isArray(o)?Array.prototype.push.apply(i.classes,o):i.classes.push(o)),a.hooks.run("wrap",i);var d="";for(var s in i.attributes)d+=" "+s+'="'+(i.attributes[s]||"").replace(/"/g,"&quot;")+'"';return"<"+i.tag+' class="'+i.classes.join(" ")+'"'+d+">"+i.content+"</"+i.tag+">"},a}(),R=m;m.default=m,R.languages.markup={comment:{pattern:/<!--(?:(?!<!--)[\s\S])*?-->/,greedy:!0},prolog:{pattern:/<\?[\s\S]+?\?>/,greedy:!0},doctype:{pattern:/<!DOCTYPE(?:[^>"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|<!--(?:[^-]|-(?!->))*-->)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(^[^\[]*\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^<!|>$|[[\]]/,"doctype-tag":/^DOCTYPE/i,name:/[^\s<>'"]+/}},cdata:{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,greedy:!0},tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"special-attr":[],"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},R.languages.markup.tag.inside["attr-value"].inside.entity=R.languages.markup.entity,R.languages.markup.doctype.inside["internal-subset"].inside=R.languages.markup,R.hooks.add("wrap",(function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&amp;/,"&"))})),Object.defineProperty(R.languages.markup.tag,"addInlined",{value:function(e,t){var n={};n["language-"+t]={pattern:/(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,lookbehind:!0,inside:R.languages[t]},n.cdata=/^<!\[CDATA\[|\]\]>$/i;var a={"included-cdata":{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,inside:n}};a["language-"+t]={pattern:/[\s\S]+/,inside:R.languages[t]};var r={};r[e]={pattern:RegExp(/(<__[^>]*>)(?:<!\[CDATA\[(?:[^\]]|\](?!\]>))*\]\]>|(?!<!\[CDATA\[)[\s\S])*?(?=<\/__>)/.source.replace(/__/g,(function(){return e})),"i"),lookbehind:!0,greedy:!0,inside:a},R.languages.insertBefore("markup","cdata",r)}}),Object.defineProperty(R.languages.markup.tag,"addAttribute",{value:function(e,t){R.languages.markup.tag.inside["special-attr"].push({pattern:RegExp(/(^|["'\s])/.source+"(?:"+e+")"+/\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))/.source,"i"),lookbehind:!0,inside:{"attr-name":/^[^\s=]+/,"attr-value":{pattern:/=[\s\S]+/,inside:{value:{pattern:/(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,lookbehind:!0,alias:[t,"language-"+t],inside:R.languages[t]},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}}}})}}),R.languages.html=R.languages.markup,R.languages.mathml=R.languages.markup,R.languages.svg=R.languages.markup,R.languages.xml=R.languages.extend("markup",{}),R.languages.ssml=R.languages.xml,R.languages.atom=R.languages.xml,R.languages.rss=R.languages.xml,function(e){var t="\\b(?:BASH|BASHOPTS|BASH_ALIASES|BASH_ARGC|BASH_ARGV|BASH_CMDS|BASH_COMPLETION_COMPAT_DIR|BASH_LINENO|BASH_REMATCH|BASH_SOURCE|BASH_VERSINFO|BASH_VERSION|COLORTERM|COLUMNS|COMP_WORDBREAKS|DBUS_SESSION_BUS_ADDRESS|DEFAULTS_PATH|DESKTOP_SESSION|DIRSTACK|DISPLAY|EUID|GDMSESSION|GDM_LANG|GNOME_KEYRING_CONTROL|GNOME_KEYRING_PID|GPG_AGENT_INFO|GROUPS|HISTCONTROL|HISTFILE|HISTFILESIZE|HISTSIZE|HOME|HOSTNAME|HOSTTYPE|IFS|INSTANCE|JOB|LANG|LANGUAGE|LC_ADDRESS|LC_ALL|LC_IDENTIFICATION|LC_MEASUREMENT|LC_MONETARY|LC_NAME|LC_NUMERIC|LC_PAPER|LC_TELEPHONE|LC_TIME|LESSCLOSE|LESSOPEN|LINES|LOGNAME|LS_COLORS|MACHTYPE|MAILCHECK|MANDATORY_PATH|NO_AT_BRIDGE|OLDPWD|OPTERR|OPTIND|ORBIT_SOCKETDIR|OSTYPE|PAPERSIZE|PATH|PIPESTATUS|PPID|PS1|PS2|PS3|PS4|PWD|RANDOM|REPLY|SECONDS|SELINUX_INIT|SESSION|SESSIONTYPE|SESSION_MANAGER|SHELL|SHELLOPTS|SHLVL|SSH_AUTH_SOCK|TERM|UID|UPSTART_EVENTS|UPSTART_INSTANCE|UPSTART_JOB|UPSTART_SESSION|USER|WINDOWID|XAUTHORITY|XDG_CONFIG_DIRS|XDG_CURRENT_DESKTOP|XDG_DATA_DIRS|XDG_GREETER_DATA_DIR|XDG_MENU_PREFIX|XDG_RUNTIME_DIR|XDG_SEAT|XDG_SEAT_PATH|XDG_SESSION_DESKTOP|XDG_SESSION_ID|XDG_SESSION_PATH|XDG_SESSION_TYPE|XDG_VTNR|XMODIFIERS)\\b",n={pattern:/(^(["']?)\w+\2)[ \t]+\S.*/,lookbehind:!0,alias:"punctuation",inside:null},a={bash:n,environment:{pattern:RegExp("\\$"+t),alias:"constant"},variable:[{pattern:/\$?\(\([\s\S]+?\)\)/,greedy:!0,inside:{variable:[{pattern:/(^\$\(\([\s\S]+)\)\)/,lookbehind:!0},/^\$\(\(/],number:/\b0x[\dA-Fa-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:[Ee]-?\d+)?/,operator:/--|\+\+|\*\*=?|<<=?|>>=?|&&|\|\||[=!+\-*/%<>^&|]=?|[?~:]/,punctuation:/\(\(?|\)\)?|,|;/}},{pattern:/\$\((?:\([^)]+\)|[^()])+\)|`[^`]+`/,greedy:!0,inside:{variable:/^\$\(|^`|\)$|`$/}},{pattern:/\$\{[^}]+\}/,greedy:!0,inside:{operator:/:[-=?+]?|[!\/]|##?|%%?|\^\^?|,,?/,punctuation:/[\[\]]/,environment:{pattern:RegExp("(\\{)"+t),lookbehind:!0,alias:"constant"}}},/\$(?:\w+|[#?*!@$])/],entity:/\\(?:[abceEfnrtv\\"]|O?[0-7]{1,3}|U[0-9a-fA-F]{8}|u[0-9a-fA-F]{4}|x[0-9a-fA-F]{1,2})/};e.languages.bash={shebang:{pattern:/^#!\s*\/.*/,alias:"important"},comment:{pattern:/(^|[^"{\\$])#.*/,lookbehind:!0},"function-name":[{pattern:/(\bfunction\s+)[\w-]+(?=(?:\s*\(?:\s*\))?\s*\{)/,lookbehind:!0,alias:"function"},{pattern:/\b[\w-]+(?=\s*\(\s*\)\s*\{)/,alias:"function"}],"for-or-select":{pattern:/(\b(?:for|select)\s+)\w+(?=\s+in\s)/,alias:"variable",lookbehind:!0},"assign-left":{pattern:/(^|[\s;|&]|[<>]\()\w+(?=\+?=)/,inside:{environment:{pattern:RegExp("(^|[\\s;|&]|[<>]\\()"+t),lookbehind:!0,alias:"constant"}},alias:"variable",lookbehind:!0},string:[{pattern:/((?:^|[^<])<<-?\s*)(\w+)\s[\s\S]*?(?:\r?\n|\r)\2/,lookbehind:!0,greedy:!0,inside:a},{pattern:/((?:^|[^<])<<-?\s*)(["'])(\w+)\2\s[\s\S]*?(?:\r?\n|\r)\3/,lookbehind:!0,greedy:!0,inside:{bash:n}},{pattern:/(^|[^\\](?:\\\\)*)"(?:\\[\s\S]|\$\([^)]+\)|\$(?!\()|`[^`]+`|[^"\\`$])*"/,lookbehind:!0,greedy:!0,inside:a},{pattern:/(^|[^$\\])'[^']*'/,lookbehind:!0,greedy:!0},{pattern:/\$'(?:[^'\\]|\\[\s\S])*'/,greedy:!0,inside:{entity:a.entity}}],environment:{pattern:RegExp("\\$?"+t),alias:"constant"},variable:a.variable,function:{pattern:/(^|[\s;|&]|[<>]\()(?:add|apropos|apt|apt-cache|apt-get|aptitude|aspell|automysqlbackup|awk|basename|bash|bc|bconsole|bg|bzip2|cal|cat|cfdisk|chgrp|chkconfig|chmod|chown|chroot|cksum|clear|cmp|column|comm|composer|cp|cron|crontab|csplit|curl|cut|date|dc|dd|ddrescue|debootstrap|df|diff|diff3|dig|dir|dircolors|dirname|dirs|dmesg|docker|docker-compose|du|egrep|eject|env|ethtool|expand|expect|expr|fdformat|fdisk|fg|fgrep|file|find|fmt|fold|format|free|fsck|ftp|fuser|gawk|git|gparted|grep|groupadd|groupdel|groupmod|groups|grub-mkconfig|gzip|halt|head|hg|history|host|hostname|htop|iconv|id|ifconfig|ifdown|ifup|import|install|ip|jobs|join|kill|killall|less|link|ln|locate|logname|logrotate|look|lpc|lpr|lprint|lprintd|lprintq|lprm|ls|lsof|lynx|make|man|mc|mdadm|mkconfig|mkdir|mke2fs|mkfifo|mkfs|mkisofs|mknod|mkswap|mmv|more|most|mount|mtools|mtr|mutt|mv|nano|nc|netstat|nice|nl|node|nohup|notify-send|npm|nslookup|op|open|parted|passwd|paste|pathchk|ping|pkill|pnpm|podman|podman-compose|popd|pr|printcap|printenv|ps|pushd|pv|quota|quotacheck|quotactl|ram|rar|rcp|reboot|remsync|rename|renice|rev|rm|rmdir|rpm|rsync|scp|screen|sdiff|sed|sendmail|seq|service|sftp|sh|shellcheck|shuf|shutdown|sleep|slocate|sort|split|ssh|stat|strace|su|sudo|sum|suspend|swapon|sync|tac|tail|tar|tee|time|timeout|top|touch|tr|traceroute|tsort|tty|umount|uname|unexpand|uniq|units|unrar|unshar|unzip|update-grub|uptime|useradd|userdel|usermod|users|uudecode|uuencode|v|vcpkg|vdir|vi|vim|virsh|vmstat|wait|watch|wc|wget|whereis|which|who|whoami|write|xargs|xdg-open|yarn|yes|zenity|zip|zsh|zypper)(?=$|[)\s;|&])/,lookbehind:!0},keyword:{pattern:/(^|[\s;|&]|[<>]\()(?:case|do|done|elif|else|esac|fi|for|function|if|in|select|then|until|while)(?=$|[)\s;|&])/,lookbehind:!0},builtin:{pattern:/(^|[\s;|&]|[<>]\()(?:\.|:|alias|bind|break|builtin|caller|cd|command|continue|declare|echo|enable|eval|exec|exit|export|getopts|hash|help|let|local|logout|mapfile|printf|pwd|read|readarray|readonly|return|set|shift|shopt|source|test|times|trap|type|typeset|ulimit|umask|unalias|unset)(?=$|[)\s;|&])/,lookbehind:!0,alias:"class-name"},boolean:{pattern:/(^|[\s;|&]|[<>]\()(?:false|true)(?=$|[)\s;|&])/,lookbehind:!0},"file-descriptor":{pattern:/\B&\d\b/,alias:"important"},operator:{pattern:/\d?<>|>\||\+=|=[=~]?|!=?|<<[<-]?|[&\d]?>>|\d[<>]&?|[<>][&=]?|&[>&]?|\|[&|]?/,inside:{"file-descriptor":{pattern:/^\d/,alias:"important"}}},punctuation:/\$?\(\(?|\)\)?|\.\.|[{}[\];\\]/,number:{pattern:/(^|\s)(?:[1-9]\d*|0)(?:[.,]\d+)?\b/,lookbehind:!0}},n.inside=e.languages.bash;for(var r=["comment","function-name","for-or-select","assign-left","string","environment","function","keyword","builtin","boolean","file-descriptor","operator","punctuation","number"],i=a.variable[1].inside,o=0;o<r.length;o++)i[r[o]]=e.languages.bash[r[o]];e.languages.shell=e.languages.bash}(R),R.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0,greedy:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/(\b(?:class|extends|implements|instanceof|interface|new|trait)\s+|\bcatch\s+\()[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:break|catch|continue|do|else|finally|for|function|if|in|instanceof|new|null|return|throw|try|while)\b/,boolean:/\b(?:false|true)\b/,function:/\b\w+(?=\()/,number:/\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/},R.languages.c=R.languages.extend("clike",{comment:{pattern:/\/\/(?:[^\r\n\\]|\\(?:\r\n?|\n|(?![\r\n])))*|\/\*[\s\S]*?(?:\*\/|$)/,greedy:!0},string:{pattern:/"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"/,greedy:!0},"class-name":{pattern:/(\b(?:enum|struct)\s+(?:__attribute__\s*\(\([\s\S]*?\)\)\s*)?)\w+|\b[a-z]\w*_t\b/,lookbehind:!0},keyword:/\b(?:_Alignas|_Alignof|_Atomic|_Bool|_Complex|_Generic|_Imaginary|_Noreturn|_Static_assert|_Thread_local|__attribute__|asm|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|inline|int|long|register|return|short|signed|sizeof|static|struct|switch|typedef|typeof|union|unsigned|void|volatile|while)\b/,function:/\b[a-z_]\w*(?=\s*\()/i,number:/(?:\b0x(?:[\da-f]+(?:\.[\da-f]*)?|\.[\da-f]+)(?:p[+-]?\d+)?|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?)[ful]{0,4}/i,operator:/>>=?|<<=?|->|([-+&|:])\1|[?:~]|[-+*/%&|^!=<>]=?/}),R.languages.insertBefore("c","string",{char:{pattern:/'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n]){0,32}'/,greedy:!0}}),R.languages.insertBefore("c","string",{macro:{pattern:/(^[\t ]*)#\s*[a-z](?:[^\r\n\\/]|\/(?!\*)|\/\*(?:[^*]|\*(?!\/))*\*\/|\\(?:\r\n|[\s\S]))*/im,lookbehind:!0,greedy:!0,alias:"property",inside:{string:[{pattern:/^(#\s*include\s*)<[^>]+>/,lookbehind:!0},R.languages.c.string],char:R.languages.c.char,comment:R.languages.c.comment,"macro-name":[{pattern:/(^#\s*define\s+)\w+\b(?!\()/i,lookbehind:!0},{pattern:/(^#\s*define\s+)\w+\b(?=\()/i,lookbehind:!0,alias:"function"}],directive:{pattern:/^(#\s*)[a-z]+/,lookbehind:!0,alias:"keyword"},"directive-hash":/^#/,punctuation:/##|\\(?=[\r\n])/,expression:{pattern:/\S[\s\S]*/,inside:R.languages.c}}}}),R.languages.insertBefore("c","function",{constant:/\b(?:EOF|NULL|SEEK_CUR|SEEK_END|SEEK_SET|__DATE__|__FILE__|__LINE__|__TIMESTAMP__|__TIME__|__func__|stderr|stdin|stdout)\b/}),delete R.languages.c.boolean,function(e){var t=/\b(?:alignas|alignof|asm|auto|bool|break|case|catch|char|char16_t|char32_t|char8_t|class|co_await|co_return|co_yield|compl|concept|const|const_cast|consteval|constexpr|constinit|continue|decltype|default|delete|do|double|dynamic_cast|else|enum|explicit|export|extern|final|float|for|friend|goto|if|import|inline|int|int16_t|int32_t|int64_t|int8_t|long|module|mutable|namespace|new|noexcept|nullptr|operator|override|private|protected|public|register|reinterpret_cast|requires|return|short|signed|sizeof|static|static_assert|static_cast|struct|switch|template|this|thread_local|throw|try|typedef|typeid|typename|uint16_t|uint32_t|uint64_t|uint8_t|union|unsigned|using|virtual|void|volatile|wchar_t|while)\b/,n=/\b(?!<keyword>)\w+(?:\s*\.\s*\w+)*\b/.source.replace(/<keyword>/g,(function(){return t.source}));e.languages.cpp=e.languages.extend("c",{"class-name":[{pattern:RegExp(/(\b(?:class|concept|enum|struct|typename)\s+)(?!<keyword>)\w+/.source.replace(/<keyword>/g,(function(){return t.source}))),lookbehind:!0},/\b[A-Z]\w*(?=\s*::\s*\w+\s*\()/,/\b[A-Z_]\w*(?=\s*::\s*~\w+\s*\()/i,/\b\w+(?=\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>\s*::\s*\w+\s*\()/],keyword:t,number:{pattern:/(?:\b0b[01']+|\b0x(?:[\da-f']+(?:\.[\da-f']*)?|\.[\da-f']+)(?:p[+-]?[\d']+)?|(?:\b[\d']+(?:\.[\d']*)?|\B\.[\d']+)(?:e[+-]?[\d']+)?)[ful]{0,4}/i,greedy:!0},operator:/>>=?|<<=?|->|--|\+\+|&&|\|\||[?:~]|<=>|[-+*/%&|^!=<>]=?|\b(?:and|and_eq|bitand|bitor|not|not_eq|or|or_eq|xor|xor_eq)\b/,boolean:/\b(?:false|true)\b/}),e.languages.insertBefore("cpp","string",{module:{pattern:RegExp(/(\b(?:import|module)\s+)/.source+"(?:"+/"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|<[^<>\r\n]*>/.source+"|"+/<mod-name>(?:\s*:\s*<mod-name>)?|:\s*<mod-name>/.source.replace(/<mod-name>/g,(function(){return n}))+")"),lookbehind:!0,greedy:!0,inside:{string:/^[<"][\s\S]+/,operator:/:/,punctuation:/\./}},"raw-string":{pattern:/R"([^()\\ ]{0,16})\([\s\S]*?\)\1"/,alias:"string",greedy:!0}}),e.languages.insertBefore("cpp","keyword",{"generic-function":{pattern:/\b(?!operator\b)[a-z_]\w*\s*<(?:[^<>]|<[^<>]*>)*>(?=\s*\()/i,inside:{function:/^\w+/,generic:{pattern:/<[\s\S]+/,alias:"class-name",inside:e.languages.cpp}}}}),e.languages.insertBefore("cpp","operator",{"double-colon":{pattern:/::/,alias:"punctuation"}}),e.languages.insertBefore("cpp","class-name",{"base-clause":{pattern:/(\b(?:class|struct)\s+\w+\s*:\s*)[^;{}"'\s]+(?:\s+[^;{}"'\s]+)*(?=\s*[;{])/,lookbehind:!0,greedy:!0,inside:e.languages.extend("cpp",{})}}),e.languages.insertBefore("inside","double-colon",{"class-name":/\b[a-z_]\w*\b(?!\s*::)/i},e.languages.cpp["base-clause"])}(R),function(e){var t=/(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;e.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-](?:[^;{\s]|\s+(?![\s{]))*(?:;|(?=\s*\{))/,inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,lookbehind:!0,alias:"selector"},keyword:{pattern:/(^|[^\w-])(?:and|not|only|or)(?![\w-])/,lookbehind:!0}}},url:{pattern:RegExp("\\burl\\((?:"+t.source+"|"+/(?:[^\\\r\n()"']|\\[\s\S])*/.source+")\\)","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^\(|\)$/,string:{pattern:RegExp("^"+t.source+"$"),alias:"url"}}},selector:{pattern:RegExp("(^|[{}\\s])[^{}\\s](?:[^{};\"'\\s]|\\s+(?![\\s{])|"+t.source+")*(?=\\s*\\{)"),lookbehind:!0},string:{pattern:t,greedy:!0},property:{pattern:/(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,lookbehind:!0},important:/!important\b/i,function:{pattern:/(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i,lookbehind:!0},punctuation:/[(){};:,]/},e.languages.css.atrule.inside.rest=e.languages.css;var n=e.languages.markup;n&&(n.tag.addInlined("style","css"),n.tag.addAttribute("style","css"))}(R),function(e){var t,n=/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/;e.languages.css.selector={pattern:e.languages.css.selector.pattern,lookbehind:!0,inside:t={"pseudo-element":/:(?:after|before|first-letter|first-line|selection)|::[-\w]+/,"pseudo-class":/:[-\w]+/,class:/\.[-\w]+/,id:/#[-\w]+/,attribute:{pattern:RegExp("\\[(?:[^[\\]\"']|"+n.source+")*\\]"),greedy:!0,inside:{punctuation:/^\[|\]$/,"case-sensitivity":{pattern:/(\s)[si]$/i,lookbehind:!0,alias:"keyword"},namespace:{pattern:/^(\s*)(?:(?!\s)[-*\w\xA0-\uFFFF])*\|(?!=)/,lookbehind:!0,inside:{punctuation:/\|$/}},"attr-name":{pattern:/^(\s*)(?:(?!\s)[-\w\xA0-\uFFFF])+/,lookbehind:!0},"attr-value":[n,{pattern:/(=\s*)(?:(?!\s)[-\w\xA0-\uFFFF])+(?=\s*$)/,lookbehind:!0}],operator:/[|~*^$]?=/}},"n-th":[{pattern:/(\(\s*)[+-]?\d*[\dn](?:\s*[+-]\s*\d+)?(?=\s*\))/,lookbehind:!0,inside:{number:/[\dn]+/,operator:/[+-]/}},{pattern:/(\(\s*)(?:even|odd)(?=\s*\))/i,lookbehind:!0}],combinator:/>|\+|~|\|\|/,punctuation:/[(),]/}},e.languages.css.atrule.inside["selector-function-argument"].inside=t,e.languages.insertBefore("css","property",{variable:{pattern:/(^|[^-\w\xA0-\uFFFF])--(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*/i,lookbehind:!0}});var a={pattern:/(\b\d+)(?:%|[a-z]+(?![\w-]))/,lookbehind:!0},r={pattern:/(^|[^\w.-])-?(?:\d+(?:\.\d+)?|\.\d+)/,lookbehind:!0};e.languages.insertBefore("css","function",{operator:{pattern:/(\s)[+\-*\/](?=\s)/,lookbehind:!0},hexcode:{pattern:/\B#[\da-f]{3,8}\b/i,alias:"color"},color:[{pattern:/(^|[^\w-])(?:AliceBlue|AntiqueWhite|Aqua|Aquamarine|Azure|Beige|Bisque|Black|BlanchedAlmond|Blue|BlueViolet|Brown|BurlyWood|CadetBlue|Chartreuse|Chocolate|Coral|CornflowerBlue|Cornsilk|Crimson|Cyan|DarkBlue|DarkCyan|DarkGoldenRod|DarkGr[ae]y|DarkGreen|DarkKhaki|DarkMagenta|DarkOliveGreen|DarkOrange|DarkOrchid|DarkRed|DarkSalmon|DarkSeaGreen|DarkSlateBlue|DarkSlateGr[ae]y|DarkTurquoise|DarkViolet|DeepPink|DeepSkyBlue|DimGr[ae]y|DodgerBlue|FireBrick|FloralWhite|ForestGreen|Fuchsia|Gainsboro|GhostWhite|Gold|GoldenRod|Gr[ae]y|Green|GreenYellow|HoneyDew|HotPink|IndianRed|Indigo|Ivory|Khaki|Lavender|LavenderBlush|LawnGreen|LemonChiffon|LightBlue|LightCoral|LightCyan|LightGoldenRodYellow|LightGr[ae]y|LightGreen|LightPink|LightSalmon|LightSeaGreen|LightSkyBlue|LightSlateGr[ae]y|LightSteelBlue|LightYellow|Lime|LimeGreen|Linen|Magenta|Maroon|MediumAquaMarine|MediumBlue|MediumOrchid|MediumPurple|MediumSeaGreen|MediumSlateBlue|MediumSpringGreen|MediumTurquoise|MediumVioletRed|MidnightBlue|MintCream|MistyRose|Moccasin|NavajoWhite|Navy|OldLace|Olive|OliveDrab|Orange|OrangeRed|Orchid|PaleGoldenRod|PaleGreen|PaleTurquoise|PaleVioletRed|PapayaWhip|PeachPuff|Peru|Pink|Plum|PowderBlue|Purple|Red|RosyBrown|RoyalBlue|SaddleBrown|Salmon|SandyBrown|SeaGreen|SeaShell|Sienna|Silver|SkyBlue|SlateBlue|SlateGr[ae]y|Snow|SpringGreen|SteelBlue|Tan|Teal|Thistle|Tomato|Transparent|Turquoise|Violet|Wheat|White|WhiteSmoke|Yellow|YellowGreen)(?![\w-])/i,lookbehind:!0},{pattern:/\b(?:hsl|rgb)\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*\)\B|\b(?:hsl|rgb)a\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*,\s*(?:0|0?\.\d+|1)\s*\)\B/i,inside:{unit:a,number:r,function:/[\w-]+(?=\()/,punctuation:/[(),]/}}],entity:/\\[\da-f]{1,8}/i,unit:a,number:r})}(R),R.languages.javascript=R.languages.extend("clike",{"class-name":[R.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,lookbehind:!0}],keyword:[{pattern:/((?:^|\})\s*)catch\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:{pattern:RegExp(/(^|[^\w$])/.source+"(?:"+/NaN|Infinity/.source+"|"+/0[bB][01]+(?:_[01]+)*n?/.source+"|"+/0[oO][0-7]+(?:_[0-7]+)*n?/.source+"|"+/0[xX][\dA-Fa-f]+(?:_[\dA-Fa-f]+)*n?/.source+"|"+/\d+(?:_\d+)*n/.source+"|"+/(?:\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\.\d+(?:_\d+)*)(?:[Ee][+-]?\d+(?:_\d+)*)?/.source+")"+/(?![\w$])/.source),lookbehind:!0},operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),R.languages.javascript["class-name"][0].pattern=/(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/,R.languages.insertBefore("javascript","keyword",{regex:{pattern:/((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)\/(?:\[(?:[^\]\\\r\n]|\\.)*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/,lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:R.languages.regex},"regex-delimiter":/^\/|\/$/,"regex-flags":/^[a-z]+$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:R.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:R.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:R.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:R.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),R.languages.insertBefore("javascript","string",{hashbang:{pattern:/^#!.*/,greedy:!0,alias:"comment"},"template-string":{pattern:/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:R.languages.javascript}},string:/[\s\S]+/}},"string-property":{pattern:/((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,lookbehind:!0,greedy:!0,alias:"property"}}),R.languages.insertBefore("javascript","operator",{"literal-property":{pattern:/((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,lookbehind:!0,alias:"property"}}),R.languages.markup&&(R.languages.markup.tag.addInlined("script","javascript"),R.languages.markup.tag.addAttribute(/on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)/.source,"javascript")),R.languages.js=R.languages.javascript,function(e){var t=/#(?!\{).+/,n={pattern:/#\{[^}]+\}/,alias:"variable"};e.languages.coffeescript=e.languages.extend("javascript",{comment:t,string:[{pattern:/'(?:\\[\s\S]|[^\\'])*'/,greedy:!0},{pattern:/"(?:\\[\s\S]|[^\\"])*"/,greedy:!0,inside:{interpolation:n}}],keyword:/\b(?:and|break|by|catch|class|continue|debugger|delete|do|each|else|extend|extends|false|finally|for|if|in|instanceof|is|isnt|let|loop|namespace|new|no|not|null|of|off|on|or|own|return|super|switch|then|this|throw|true|try|typeof|undefined|unless|until|when|while|window|with|yes|yield)\b/,"class-member":{pattern:/@(?!\d)\w+/,alias:"variable"}}),e.languages.insertBefore("coffeescript","comment",{"multiline-comment":{pattern:/###[\s\S]+?###/,alias:"comment"},"block-regex":{pattern:/\/{3}[\s\S]*?\/{3}/,alias:"regex",inside:{comment:t,interpolation:n}}}),e.languages.insertBefore("coffeescript","string",{"inline-javascript":{pattern:/`(?:\\[\s\S]|[^\\`])*`/,inside:{delimiter:{pattern:/^`|`$/,alias:"punctuation"},script:{pattern:/[\s\S]+/,alias:"language-javascript",inside:e.languages.javascript}}},"multiline-string":[{pattern:/'''[\s\S]*?'''/,greedy:!0,alias:"string"},{pattern:/"""[\s\S]*?"""/,greedy:!0,alias:"string",inside:{interpolation:n}}]}),e.languages.insertBefore("coffeescript","keyword",{property:/(?!\d)\w+(?=\s*:(?!:))/}),delete e.languages.coffeescript["template-string"],e.languages.coffee=e.languages.coffeescript}(R),function(e){var t=/[*&][^\s[\]{},]+/,n=/!(?:<[\w\-%#;/?:@&=+$,.!~*'()[\]]+>|(?:[a-zA-Z\d-]*!)?[\w\-%#;/?:@&=+$.~*'()]+)?/,a="(?:"+n.source+"(?:[ \t]+"+t.source+")?|"+t.source+"(?:[ \t]+"+n.source+")?)",r=/(?:[^\s\x00-\x08\x0e-\x1f!"#%&'*,\-:>?@[\]`{|}\x7f-\x84\x86-\x9f\ud800-\udfff\ufffe\uffff]|[?:-]<PLAIN>)(?:[ \t]*(?:(?![#:])<PLAIN>|:<PLAIN>))*/.source.replace(/<PLAIN>/g,(function(){return/[^\s\x00-\x08\x0e-\x1f,[\]{}\x7f-\x84\x86-\x9f\ud800-\udfff\ufffe\uffff]/.source})),i=/"(?:[^"\\\r\n]|\\.)*"|'(?:[^'\\\r\n]|\\.)*'/.source;function o(e,t){t=(t||"").replace(/m/g,"")+"m";var n=/([:\-,[{]\s*(?:\s<<prop>>[ \t]+)?)(?:<<value>>)(?=[ \t]*(?:$|,|\]|\}|(?:[\r\n]\s*)?#))/.source.replace(/<<prop>>/g,(function(){return a})).replace(/<<value>>/g,(function(){return e}));return RegExp(n,t)}e.languages.yaml={scalar:{pattern:RegExp(/([\-:]\s*(?:\s<<prop>>[ \t]+)?[|>])[ \t]*(?:((?:\r?\n|\r)[ \t]+)\S[^\r\n]*(?:\2[^\r\n]+)*)/.source.replace(/<<prop>>/g,(function(){return a}))),lookbehind:!0,alias:"string"},comment:/#.*/,key:{pattern:RegExp(/((?:^|[:\-,[{\r\n?])[ \t]*(?:<<prop>>[ \t]+)?)<<key>>(?=\s*:\s)/.source.replace(/<<prop>>/g,(function(){return a})).replace(/<<key>>/g,(function(){return"(?:"+r+"|"+i+")"}))),lookbehind:!0,greedy:!0,alias:"atrule"},directive:{pattern:/(^[ \t]*)%.+/m,lookbehind:!0,alias:"important"},datetime:{pattern:o(/\d{4}-\d\d?-\d\d?(?:[tT]|[ \t]+)\d\d?:\d{2}:\d{2}(?:\.\d*)?(?:[ \t]*(?:Z|[-+]\d\d?(?::\d{2})?))?|\d{4}-\d{2}-\d{2}|\d\d?:\d{2}(?::\d{2}(?:\.\d*)?)?/.source),lookbehind:!0,alias:"number"},boolean:{pattern:o(/false|true/.source,"i"),lookbehind:!0,alias:"important"},null:{pattern:o(/null|~/.source,"i"),lookbehind:!0,alias:"important"},string:{pattern:o(i),lookbehind:!0,greedy:!0},number:{pattern:o(/[+-]?(?:0x[\da-f]+|0o[0-7]+|(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?|\.inf|\.nan)/.source,"i"),lookbehind:!0},tag:n,important:t,punctuation:/---|[:[\]{}\-,|>?]|\.\.\./},e.languages.yml=e.languages.yaml}(R),function(e){var t=/(?:\\.|[^\\\n\r]|(?:\n|\r\n?)(?![\r\n]))/.source;function n(e){return e=e.replace(/<inner>/g,(function(){return t})),RegExp(/((?:^|[^\\])(?:\\{2})*)/.source+"(?:"+e+")")}var a=/(?:\\.|``(?:[^`\r\n]|`(?!`))+``|`[^`\r\n]+`|[^\\|\r\n`])+/.source,r=/\|?__(?:\|__)+\|?(?:(?:\n|\r\n?)|(?![\s\S]))/.source.replace(/__/g,(function(){return a})),i=/\|?[ \t]*:?-{3,}:?[ \t]*(?:\|[ \t]*:?-{3,}:?[ \t]*)+\|?(?:\n|\r\n?)/.source;e.languages.markdown=e.languages.extend("markup",{}),e.languages.insertBefore("markdown","prolog",{"front-matter-block":{pattern:/(^(?:\s*[\r\n])?)---(?!.)[\s\S]*?[\r\n]---(?!.)/,lookbehind:!0,greedy:!0,inside:{punctuation:/^---|---$/,"front-matter":{pattern:/\S+(?:\s+\S+)*/,alias:["yaml","language-yaml"],inside:e.languages.yaml}}},blockquote:{pattern:/^>(?:[\t ]*>)*/m,alias:"punctuation"},table:{pattern:RegExp("^"+r+i+"(?:"+r+")*","m"),inside:{"table-data-rows":{pattern:RegExp("^("+r+i+")(?:"+r+")*$"),lookbehind:!0,inside:{"table-data":{pattern:RegExp(a),inside:e.languages.markdown},punctuation:/\|/}},"table-line":{pattern:RegExp("^("+r+")"+i+"$"),lookbehind:!0,inside:{punctuation:/\||:?-{3,}:?/}},"table-header-row":{pattern:RegExp("^"+r+"$"),inside:{"table-header":{pattern:RegExp(a),alias:"important",inside:e.languages.markdown},punctuation:/\|/}}}},code:[{pattern:/((?:^|\n)[ \t]*\n|(?:^|\r\n?)[ \t]*\r\n?)(?: {4}|\t).+(?:(?:\n|\r\n?)(?: {4}|\t).+)*/,lookbehind:!0,alias:"keyword"},{pattern:/^```[\s\S]*?^```$/m,greedy:!0,inside:{"code-block":{pattern:/^(```.*(?:\n|\r\n?))[\s\S]+?(?=(?:\n|\r\n?)^```$)/m,lookbehind:!0},"code-language":{pattern:/^(```).+/,lookbehind:!0},punctuation:/```/}}],title:[{pattern:/\S.*(?:\n|\r\n?)(?:==+|--+)(?=[ \t]*$)/m,alias:"important",inside:{punctuation:/==+$|--+$/}},{pattern:/(^\s*)#.+/m,lookbehind:!0,alias:"important",inside:{punctuation:/^#+|#+$/}}],hr:{pattern:/(^\s*)([*-])(?:[\t ]*\2){2,}(?=\s*$)/m,lookbehind:!0,alias:"punctuation"},list:{pattern:/(^\s*)(?:[*+-]|\d+\.)(?=[\t ].)/m,lookbehind:!0,alias:"punctuation"},"url-reference":{pattern:/!?\[[^\]]+\]:[\t ]+(?:\S+|<(?:\\.|[^>\\])+>)(?:[\t ]+(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\)))?/,inside:{variable:{pattern:/^(!?\[)[^\]]+/,lookbehind:!0},string:/(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\))$/,punctuation:/^[\[\]!:]|[<>]/},alias:"url"},bold:{pattern:n(/\b__(?:(?!_)<inner>|_(?:(?!_)<inner>)+_)+__\b|\*\*(?:(?!\*)<inner>|\*(?:(?!\*)<inner>)+\*)+\*\*/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^..)[\s\S]+(?=..$)/,lookbehind:!0,inside:{}},punctuation:/\*\*|__/}},italic:{pattern:n(/\b_(?:(?!_)<inner>|__(?:(?!_)<inner>)+__)+_\b|\*(?:(?!\*)<inner>|\*\*(?:(?!\*)<inner>)+\*\*)+\*/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^.)[\s\S]+(?=.$)/,lookbehind:!0,inside:{}},punctuation:/[*_]/}},strike:{pattern:n(/(~~?)(?:(?!~)<inner>)+\2/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^~~?)[\s\S]+(?=\1$)/,lookbehind:!0,inside:{}},punctuation:/~~?/}},"code-snippet":{pattern:/(^|[^\\`])(?:``[^`\r\n]+(?:`[^`\r\n]+)*``(?!`)|`[^`\r\n]+`(?!`))/,lookbehind:!0,greedy:!0,alias:["code","keyword"]},url:{pattern:n(/!?\[(?:(?!\])<inner>)+\](?:\([^\s)]+(?:[\t ]+"(?:\\.|[^"\\])*")?\)|[ \t]?\[(?:(?!\])<inner>)+\])/.source),lookbehind:!0,greedy:!0,inside:{operator:/^!/,content:{pattern:/(^\[)[^\]]+(?=\])/,lookbehind:!0,inside:{}},variable:{pattern:/(^\][ \t]?\[)[^\]]+(?=\]$)/,lookbehind:!0},url:{pattern:/(^\]\()[^\s)]+/,lookbehind:!0},string:{pattern:/(^[ \t]+)"(?:\\.|[^"\\])*"(?=\)$)/,lookbehind:!0}}}}),["url","bold","italic","strike"].forEach((function(t){["url","bold","italic","strike","code-snippet"].forEach((function(n){t!==n&&(e.languages.markdown[t].inside.content.inside[n]=e.languages.markdown[n])}))})),e.hooks.add("after-tokenize",(function(e){"markdown"!==e.language&&"md"!==e.language||function e(t){if(t&&"string"!=typeof t)for(var n=0,a=t.length;n<a;n++){var r=t[n];if("code"===r.type){var i=r.content[1],o=r.content[3];if(i&&o&&"code-language"===i.type&&"code-block"===o.type&&"string"==typeof i.content){var d=i.content.replace(/\b#/g,"sharp").replace(/\b\+\+/g,"pp"),s="language-"+(d=(/[a-z][\w-]*/i.exec(d)||[""])[0].toLowerCase());o.alias?"string"==typeof o.alias?o.alias=[o.alias,s]:o.alias.push(s):o.alias=[s]}}else e(r.content)}}(e.tokens)})),e.hooks.add("wrap",(function(t){if("code-block"===t.type){for(var n="",a=0,r=t.classes.length;a<r;a++){var i=t.classes[a],c=/language-(.+)/.exec(i);if(c){n=c[1];break}}var u,l=e.languages[n];if(l)t.content=e.highlight((u=t.content,u.replace(o,"").replace(/&(\w{1,8}|#x?[\da-f]{1,8});/gi,(function(e,t){var n;if("#"===(t=t.toLowerCase())[0])return n="x"===t[1]?parseInt(t.slice(2),16):Number(t.slice(1)),s(n);var a=d[t];return a||e}))),l,n);else if(n&&"none"!==n&&e.plugins.autoloader){var g="md-"+(new Date).valueOf()+"-"+Math.floor(1e16*Math.random());t.attributes.id=g,e.plugins.autoloader.loadLanguages(n,(function(){var t=document.getElementById(g);t&&(t.innerHTML=e.highlight(t.textContent,e.languages[n],n))}))}}}));var o=RegExp(e.languages.markup.tag.pattern.source,"gi"),d={amp:"&",lt:"<",gt:">",quot:'"'},s=String.fromCodePoint||String.fromCharCode;e.languages.md=e.languages.markdown}(R),R.languages.graphql={comment:/#.*/,description:{pattern:/(?:"""(?:[^"]|(?!""")")*"""|"(?:\\.|[^\\"\r\n])*")(?=\s*[a-z_])/i,greedy:!0,alias:"string",inside:{"language-markdown":{pattern:/(^"(?:"")?)(?!\1)[\s\S]+(?=\1$)/,lookbehind:!0,inside:R.languages.markdown}}},string:{pattern:/"""(?:[^"]|(?!""")")*"""|"(?:\\.|[^\\"\r\n])*"/,greedy:!0},number:/(?:\B-|\b)\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/i,boolean:/\b(?:false|true)\b/,variable:/\$[a-z_]\w*/i,directive:{pattern:/@[a-z_]\w*/i,alias:"function"},"attr-name":{pattern:/\b[a-z_]\w*(?=\s*(?:\((?:[^()"]|"(?:\\.|[^\\"\r\n])*")*\))?:)/i,greedy:!0},"atom-input":{pattern:/\b[A-Z]\w*Input\b/,alias:"class-name"},scalar:/\b(?:Boolean|Float|ID|Int|String)\b/,constant:/\b[A-Z][A-Z_\d]*\b/,"class-name":{pattern:/(\b(?:enum|implements|interface|on|scalar|type|union)\s+|&\s*|:\s*|\[)[A-Z_]\w*/,lookbehind:!0},fragment:{pattern:/(\bfragment\s+|\.{3}\s*(?!on\b))[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},"definition-mutation":{pattern:/(\bmutation\s+)[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},"definition-query":{pattern:/(\bquery\s+)[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},keyword:/\b(?:directive|enum|extend|fragment|implements|input|interface|mutation|on|query|repeatable|scalar|schema|subscription|type|union)\b/,operator:/[!=|&]|\.{3}/,"property-query":/\w+(?=\s*\()/,object:/\w+(?=\s*\{)/,punctuation:/[!(){}\[\]:=,]/,property:/\w+/},R.hooks.add("after-tokenize",(function(e){if("graphql"===e.language)for(var t=e.tokens.filter((function(e){return"string"!=typeof e&&"comment"!==e.type&&"scalar"!==e.type})),n=0;n<t.length;){var a=t[n++];if("keyword"===a.type&&"mutation"===a.content){var r=[];if(l(["definition-mutation","punctuation"])&&"("===u(1).content){n+=2;var i=g(/^\($/,/^\)$/);if(-1===i)continue;for(;n<i;n++){var o=u(0);"variable"===o.type&&(h(o,"variable-input"),r.push(o.content))}n=i+1}if(l(["punctuation","property-query"])&&"{"===u(0).content&&(n++,h(u(0),"property-mutation"),r.length>0)){var d=g(/^\{$/,/^\}$/);if(-1===d)continue;for(var s=n;s<d;s++){var c=t[s];"variable"===c.type&&r.indexOf(c.content)>=0&&h(c,"variable-input")}}}}function u(e){return t[n+e]}function l(e,t){t=t||0;for(var n=0;n<e.length;n++){var a=u(n+t);if(!a||a.type!==e[n])return!1}return!0}function g(e,a){for(var r=1,i=n;i<t.length;i++){var o=t[i],d=o.content;if("punctuation"===o.type&&"string"==typeof d)if(e.test(d))r++;else if(a.test(d)&&0===--r)return i}return-1}function h(e,t){var n=e.alias;n?Array.isArray(n)||(e.alias=n=[n]):e.alias=n=[],n.push(t)}})),R.languages.sql={comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|(?:--|\/\/|#).*)/,lookbehind:!0},variable:[{pattern:/@(["'`])(?:\\[\s\S]|(?!\1)[^\\])+\1/,greedy:!0},/@[\w.$]+/],string:{pattern:/(^|[^@\\])("|')(?:\\[\s\S]|(?!\2)[^\\]|\2\2)*\2/,greedy:!0,lookbehind:!0},identifier:{pattern:/(^|[^@\\])`(?:\\[\s\S]|[^`\\]|``)*`/,greedy:!0,lookbehind:!0,inside:{punctuation:/^`|`$/}},function:/\b(?:AVG|COUNT|FIRST|FORMAT|LAST|LCASE|LEN|MAX|MID|MIN|MOD|NOW|ROUND|SUM|UCASE)(?=\s*\()/i,keyword:/\b(?:ACTION|ADD|AFTER|ALGORITHM|ALL|ALTER|ANALYZE|ANY|APPLY|AS|ASC|AUTHORIZATION|AUTO_INCREMENT|BACKUP|BDB|BEGIN|BERKELEYDB|BIGINT|BINARY|BIT|BLOB|BOOL|BOOLEAN|BREAK|BROWSE|BTREE|BULK|BY|CALL|CASCADED?|CASE|CHAIN|CHAR(?:ACTER|SET)?|CHECK(?:POINT)?|CLOSE|CLUSTERED|COALESCE|COLLATE|COLUMNS?|COMMENT|COMMIT(?:TED)?|COMPUTE|CONNECT|CONSISTENT|CONSTRAINT|CONTAINS(?:TABLE)?|CONTINUE|CONVERT|CREATE|CROSS|CURRENT(?:_DATE|_TIME|_TIMESTAMP|_USER)?|CURSOR|CYCLE|DATA(?:BASES?)?|DATE(?:TIME)?|DAY|DBCC|DEALLOCATE|DEC|DECIMAL|DECLARE|DEFAULT|DEFINER|DELAYED|DELETE|DELIMITERS?|DENY|DESC|DESCRIBE|DETERMINISTIC|DISABLE|DISCARD|DISK|DISTINCT|DISTINCTROW|DISTRIBUTED|DO|DOUBLE|DROP|DUMMY|DUMP(?:FILE)?|DUPLICATE|ELSE(?:IF)?|ENABLE|ENCLOSED|END|ENGINE|ENUM|ERRLVL|ERRORS|ESCAPED?|EXCEPT|EXEC(?:UTE)?|EXISTS|EXIT|EXPLAIN|EXTENDED|FETCH|FIELDS|FILE|FILLFACTOR|FIRST|FIXED|FLOAT|FOLLOWING|FOR(?: EACH ROW)?|FORCE|FOREIGN|FREETEXT(?:TABLE)?|FROM|FULL|FUNCTION|GEOMETRY(?:COLLECTION)?|GLOBAL|GOTO|GRANT|GROUP|HANDLER|HASH|HAVING|HOLDLOCK|HOUR|IDENTITY(?:COL|_INSERT)?|IF|IGNORE|IMPORT|INDEX|INFILE|INNER|INNODB|INOUT|INSERT|INT|INTEGER|INTERSECT|INTERVAL|INTO|INVOKER|ISOLATION|ITERATE|JOIN|KEYS?|KILL|LANGUAGE|LAST|LEAVE|LEFT|LEVEL|LIMIT|LINENO|LINES|LINESTRING|LOAD|LOCAL|LOCK|LONG(?:BLOB|TEXT)|LOOP|MATCH(?:ED)?|MEDIUM(?:BLOB|INT|TEXT)|MERGE|MIDDLEINT|MINUTE|MODE|MODIFIES|MODIFY|MONTH|MULTI(?:LINESTRING|POINT|POLYGON)|NATIONAL|NATURAL|NCHAR|NEXT|NO|NONCLUSTERED|NULLIF|NUMERIC|OFF?|OFFSETS?|ON|OPEN(?:DATASOURCE|QUERY|ROWSET)?|OPTIMIZE|OPTION(?:ALLY)?|ORDER|OUT(?:ER|FILE)?|OVER|PARTIAL|PARTITION|PERCENT|PIVOT|PLAN|POINT|POLYGON|PRECEDING|PRECISION|PREPARE|PREV|PRIMARY|PRINT|PRIVILEGES|PROC(?:EDURE)?|PUBLIC|PURGE|QUICK|RAISERROR|READS?|REAL|RECONFIGURE|REFERENCES|RELEASE|RENAME|REPEAT(?:ABLE)?|REPLACE|REPLICATION|REQUIRE|RESIGNAL|RESTORE|RESTRICT|RETURN(?:ING|S)?|REVOKE|RIGHT|ROLLBACK|ROUTINE|ROW(?:COUNT|GUIDCOL|S)?|RTREE|RULE|SAVE(?:POINT)?|SCHEMA|SECOND|SELECT|SERIAL(?:IZABLE)?|SESSION(?:_USER)?|SET(?:USER)?|SHARE|SHOW|SHUTDOWN|SIMPLE|SMALLINT|SNAPSHOT|SOME|SONAME|SQL|START(?:ING)?|STATISTICS|STATUS|STRIPED|SYSTEM_USER|TABLES?|TABLESPACE|TEMP(?:ORARY|TABLE)?|TERMINATED|TEXT(?:SIZE)?|THEN|TIME(?:STAMP)?|TINY(?:BLOB|INT|TEXT)|TOP?|TRAN(?:SACTIONS?)?|TRIGGER|TRUNCATE|TSEQUAL|TYPES?|UNBOUNDED|UNCOMMITTED|UNDEFINED|UNION|UNIQUE|UNLOCK|UNPIVOT|UNSIGNED|UPDATE(?:TEXT)?|USAGE|USE|USER|USING|VALUES?|VAR(?:BINARY|CHAR|CHARACTER|YING)|VIEW|WAITFOR|WARNINGS|WHEN|WHERE|WHILE|WITH(?: ROLLUP|IN)?|WORK|WRITE(?:TEXT)?|YEAR)\b/i,boolean:/\b(?:FALSE|NULL|TRUE)\b/i,number:/\b0x[\da-f]+\b|\b\d+(?:\.\d*)?|\B\.\d+\b/i,operator:/[-+*\/=%^~]|&&?|\|\|?|!=?|<(?:=>?|<|>)?|>[>=]?|\b(?:AND|BETWEEN|DIV|ILIKE|IN|IS|LIKE|NOT|OR|REGEXP|RLIKE|SOUNDS LIKE|XOR)\b/i,punctuation:/[;[\]()`,.]/},function(e){var t=e.languages.javascript["template-string"],n=t.pattern.source,a=t.inside.interpolation,r=a.inside["interpolation-punctuation"],i=a.pattern.source;function o(t,a){if(e.languages[t])return{pattern:RegExp("((?:"+a+")\\s*)"+n),lookbehind:!0,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},"embedded-code":{pattern:/[\s\S]+/,alias:t}}}}function d(e,t){return"___"+t.toUpperCase()+"_"+e+"___"}function s(t,n,a){var r={code:t,grammar:n,language:a};return e.hooks.run("before-tokenize",r),r.tokens=e.tokenize(r.code,r.grammar),e.hooks.run("after-tokenize",r),r.tokens}function c(t){var n={};n["interpolation-punctuation"]=r;var i=e.tokenize(t,n);if(3===i.length){var o=[1,1];o.push.apply(o,s(i[1],e.languages.javascript,"javascript")),i.splice.apply(i,o)}return new e.Token("interpolation",i,a.alias,t)}function u(t,n,a){var r=e.tokenize(t,{interpolation:{pattern:RegExp(i),lookbehind:!0}}),o=0,u={},l=s(r.map((function(e){if("string"==typeof e)return e;for(var n,r=e.content;-1!==t.indexOf(n=d(o++,a)););return u[n]=r,n})).join(""),n,a),g=Object.keys(u);return o=0,function e(t){for(var n=0;n<t.length;n++){if(o>=g.length)return;var a=t[n];if("string"==typeof a||"string"==typeof a.content){var r=g[o],i="string"==typeof a?a:a.content,d=i.indexOf(r);if(-1!==d){++o;var s=i.substring(0,d),l=c(u[r]),h=i.substring(d+r.length),f=[];if(s&&f.push(s),f.push(l),h){var p=[h];e(p),f.push.apply(f,p)}"string"==typeof a?(t.splice.apply(t,[n,1].concat(f)),n+=f.length-1):a.content=f}}else{var m=a.content;Array.isArray(m)?e(m):e([m])}}}(l),new e.Token(a,l,"language-"+a,t)}e.languages.javascript["template-string"]=[o("css",/\b(?:styled(?:\([^)]*\))?(?:\s*\.\s*\w+(?:\([^)]*\))*)*|css(?:\s*\.\s*(?:global|resolve))?|createGlobalStyle|keyframes)/.source),o("html",/\bhtml|\.\s*(?:inner|outer)HTML\s*\+?=/.source),o("svg",/\bsvg/.source),o("markdown",/\b(?:markdown|md)/.source),o("graphql",/\b(?:gql|graphql(?:\s*\.\s*experimental)?)/.source),o("sql",/\bsql/.source),t].filter(Boolean);var l={javascript:!0,js:!0,typescript:!0,ts:!0,jsx:!0,tsx:!0};function g(e){return"string"==typeof e?e:Array.isArray(e)?e.map(g).join(""):g(e.content)}e.hooks.add("after-tokenize",(function(t){t.language in l&&function t(n){for(var a=0,r=n.length;a<r;a++){var i=n[a];if("string"!=typeof i){var o=i.content;if(Array.isArray(o))if("template-string"===i.type){var d=o[1];if(3===o.length&&"string"!=typeof d&&"embedded-code"===d.type){var s=g(d),c=d.alias,l=Array.isArray(c)?c[0]:c,h=e.languages[l];if(!h)continue;o[1]=u(s,h,l)}}else t(o);else"string"!=typeof o&&t([o])}}}(t.tokens)}))}(R),function(e){e.languages.typescript=e.languages.extend("javascript",{"class-name":{pattern:/(\b(?:class|extends|implements|instanceof|interface|new|type)\s+)(?!keyof\b)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?:\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>)?/,lookbehind:!0,greedy:!0,inside:null},builtin:/\b(?:Array|Function|Promise|any|boolean|console|never|number|string|symbol|unknown)\b/}),e.languages.typescript.keyword.push(/\b(?:abstract|declare|is|keyof|readonly|require)\b/,/\b(?:asserts|infer|interface|module|namespace|type)\b(?=\s*(?:[{_$a-zA-Z\xA0-\uFFFF]|$))/,/\btype\b(?=\s*(?:[\{*]|$))/),delete e.languages.typescript.parameter,delete e.languages.typescript["literal-property"];var t=e.languages.extend("typescript",{});delete t["class-name"],e.languages.typescript["class-name"].inside=t,e.languages.insertBefore("typescript","function",{decorator:{pattern:/@[$\w\xA0-\uFFFF]+/,inside:{at:{pattern:/^@/,alias:"operator"},function:/^[\s\S]+/}},"generic-function":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>(?=\s*\()/,greedy:!0,inside:{function:/^#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/,generic:{pattern:/<[\s\S]+/,alias:"class-name",inside:t}}}}),e.languages.ts=e.languages.typescript}(R),function(e){function t(e,t){return RegExp(e.replace(/<ID>/g,(function(){return/(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/.source})),t)}e.languages.insertBefore("javascript","function-variable",{"method-variable":{pattern:RegExp("(\\.\\s*)"+e.languages.javascript["function-variable"].pattern.source),lookbehind:!0,alias:["function-variable","method","function","property-access"]}}),e.languages.insertBefore("javascript","function",{method:{pattern:RegExp("(\\.\\s*)"+e.languages.javascript.function.source),lookbehind:!0,alias:["function","property-access"]}}),e.languages.insertBefore("javascript","constant",{"known-class-name":[{pattern:/\b(?:(?:Float(?:32|64)|(?:Int|Uint)(?:8|16|32)|Uint8Clamped)?Array|ArrayBuffer|BigInt|Boolean|DataView|Date|Error|Function|Intl|JSON|(?:Weak)?(?:Map|Set)|Math|Number|Object|Promise|Proxy|Reflect|RegExp|String|Symbol|WebAssembly)\b/,alias:"class-name"},{pattern:/\b(?:[A-Z]\w*)Error\b/,alias:"class-name"}]}),e.languages.insertBefore("javascript","keyword",{imports:{pattern:t(/(\bimport\b\s*)(?:<ID>(?:\s*,\s*(?:\*\s*as\s+<ID>|\{[^{}]*\}))?|\*\s*as\s+<ID>|\{[^{}]*\})(?=\s*\bfrom\b)/.source),lookbehind:!0,inside:e.languages.javascript},exports:{pattern:t(/(\bexport\b\s*)(?:\*(?:\s*as\s+<ID>)?(?=\s*\bfrom\b)|\{[^{}]*\})/.source),lookbehind:!0,inside:e.languages.javascript}}),e.languages.javascript.keyword.unshift({pattern:/\b(?:as|default|export|from|import)\b/,alias:"module"},{pattern:/\b(?:await|break|catch|continue|do|else|finally|for|if|return|switch|throw|try|while|yield)\b/,alias:"control-flow"},{pattern:/\bnull\b/,alias:["null","nil"]},{pattern:/\bundefined\b/,alias:"nil"}),e.languages.insertBefore("javascript","operator",{spread:{pattern:/\.{3}/,alias:"operator"},arrow:{pattern:/=>/,alias:"operator"}}),e.languages.insertBefore("javascript","punctuation",{"property-access":{pattern:t(/(\.\s*)#?<ID>/.source),lookbehind:!0},"maybe-class-name":{pattern:/(^|[^$\w\xA0-\uFFFF])[A-Z][$\w\xA0-\uFFFF]+/,lookbehind:!0},dom:{pattern:/\b(?:document|(?:local|session)Storage|location|navigator|performance|window)\b/,alias:"variable"},console:{pattern:/\bconsole(?=\s*\.)/,alias:"class-name"}});for(var n=["function","function-variable","method","method-variable","property-access"],a=0;a<n.length;a++){var r=n[a],i=e.languages.javascript[r];"RegExp"===e.util.type(i)&&(i=e.languages.javascript[r]={pattern:i});var o=i.inside||{};i.inside=o,o["maybe-class-name"]=/^[A-Z][\s\S]*/}}(R),function(e){var t=e.util.clone(e.languages.javascript),n=/(?:\s|\/\/.*(?!.)|\/\*(?:[^*]|\*(?!\/))\*\/)/.source,a=/(?:\{(?:\{(?:\{[^{}]*\}|[^{}])*\}|[^{}])*\})/.source,r=/(?:\{<S>*\.{3}(?:[^{}]|<BRACES>)*\})/.source;function i(e,t){return e=e.replace(/<S>/g,(function(){return n})).replace(/<BRACES>/g,(function(){return a})).replace(/<SPREAD>/g,(function(){return r})),RegExp(e,t)}r=i(r).source,e.languages.jsx=e.languages.extend("markup",t),e.languages.jsx.tag.pattern=i(/<\/?(?:[\w.:-]+(?:<S>+(?:[\w.:$-]+(?:=(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s{'"/>=]+|<BRACES>))?|<SPREAD>))*<S>*\/?)?>/.source),e.languages.jsx.tag.inside.tag.pattern=/^<\/?[^\s>\/]*/,e.languages.jsx.tag.inside["attr-value"].pattern=/=(?!\{)(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s'">]+)/,e.languages.jsx.tag.inside.tag.inside["class-name"]=/^[A-Z]\w*(?:\.[A-Z]\w*)*$/,e.languages.jsx.tag.inside.comment=t.comment,e.languages.insertBefore("inside","attr-name",{spread:{pattern:i(/<SPREAD>/.source),inside:e.languages.jsx}},e.languages.jsx.tag),e.languages.insertBefore("inside","special-attr",{script:{pattern:i(/=<BRACES>/.source),alias:"language-javascript",inside:{"script-punctuation":{pattern:/^=(?=\{)/,alias:"punctuation"},rest:e.languages.jsx}}},e.languages.jsx.tag);var o=function(e){return e?"string"==typeof e?e:"string"==typeof e.content?e.content:e.content.map(o).join(""):""},d=function(t){for(var n=[],a=0;a<t.length;a++){var r=t[a],i=!1;if("string"!=typeof r&&("tag"===r.type&&r.content[0]&&"tag"===r.content[0].type?"</"===r.content[0].content[0].content?n.length>0&&n[n.length-1].tagName===o(r.content[0].content[1])&&n.pop():"/>"===r.content[r.content.length-1].content||n.push({tagName:o(r.content[0].content[1]),openedBraces:0}):n.length>0&&"punctuation"===r.type&&"{"===r.content?n[n.length-1].openedBraces++:n.length>0&&n[n.length-1].openedBraces>0&&"punctuation"===r.type&&"}"===r.content?n[n.length-1].openedBraces--:i=!0),(i||"string"==typeof r)&&n.length>0&&0===n[n.length-1].openedBraces){var s=o(r);a<t.length-1&&("string"==typeof t[a+1]||"plain-text"===t[a+1].type)&&(s+=o(t[a+1]),t.splice(a+1,1)),a>0&&("string"==typeof t[a-1]||"plain-text"===t[a-1].type)&&(s=o(t[a-1])+s,t.splice(a-1,1),a--),t[a]=new e.Token("plain-text",s,null,s)}r.content&&"string"!=typeof r.content&&d(r.content)}};e.hooks.add("after-tokenize",(function(e){"jsx"!==e.language&&"tsx"!==e.language||d(e.tokens)}))}(R),function(e){e.languages.diff={coord:[/^(?:\*{3}|-{3}|\+{3}).*$/m,/^@@.*@@$/m,/^\d.*$/m]};var t={"deleted-sign":"-","deleted-arrow":"<","inserted-sign":"+","inserted-arrow":">",unchanged:" ",diff:"!"};Object.keys(t).forEach((function(n){var a=t[n],r=[];/^\w+$/.test(n)||r.push(/\w+/.exec(n)[0]),"diff"===n&&r.push("bold"),e.languages.diff[n]={pattern:RegExp("^(?:["+a+"].*(?:\r\n?|\n|(?![\\s\\S])))+","m"),alias:r,inside:{line:{pattern:/(.)(?=[\s\S]).*(?:\r\n?|\n)?/,lookbehind:!0},prefix:{pattern:/[\s\S]/,alias:/\w+/.exec(n)[0]}}}})),Object.defineProperty(e.languages.diff,"PREFIXES",{value:t})}(R),R.languages.git={comment:/^#.*/m,deleted:/^[-–].*/m,inserted:/^\+.*/m,string:/("|')(?:\\.|(?!\1)[^\\\r\n])*\1/,command:{pattern:/^.*\$ git .*$/m,inside:{parameter:/\s--?\w+/}},coord:/^@@.*@@$/m,"commit-sha1":/^commit \w{40}$/m},R.languages.go=R.languages.extend("clike",{string:{pattern:/(^|[^\\])"(?:\\.|[^"\\\r\n])*"|`[^`]*`/,lookbehind:!0,greedy:!0},keyword:/\b(?:break|case|chan|const|continue|default|defer|else|fallthrough|for|func|go(?:to)?|if|import|interface|map|package|range|return|select|struct|switch|type|var)\b/,boolean:/\b(?:_|false|iota|nil|true)\b/,number:[/\b0(?:b[01_]+|o[0-7_]+)i?\b/i,/\b0x(?:[a-f\d_]+(?:\.[a-f\d_]*)?|\.[a-f\d_]+)(?:p[+-]?\d+(?:_\d+)*)?i?(?!\w)/i,/(?:\b\d[\d_]*(?:\.[\d_]*)?|\B\.\d[\d_]*)(?:e[+-]?[\d_]+)?i?(?!\w)/i],operator:/[*\/%^!=]=?|\+[=+]?|-[=-]?|\|[=|]?|&(?:=|&|\^=?)?|>(?:>=?|=)?|<(?:<=?|=|-)?|:=|\.\.\./,builtin:/\b(?:append|bool|byte|cap|close|complex|complex(?:64|128)|copy|delete|error|float(?:32|64)|u?int(?:8|16|32|64)?|imag|len|make|new|panic|print(?:ln)?|real|recover|rune|string|uintptr)\b/}),R.languages.insertBefore("go","string",{char:{pattern:/'(?:\\.|[^'\\\r\n]){0,10}'/,greedy:!0}}),delete R.languages.go["class-name"],function(e){function t(e,t){return"___"+e.toUpperCase()+t+"___"}Object.defineProperties(e.languages["markup-templating"]={},{buildPlaceholders:{value:function(n,a,r,i){if(n.language===a){var o=n.tokenStack=[];n.code=n.code.replace(r,(function(e){if("function"==typeof i&&!i(e))return e;for(var r,d=o.length;-1!==n.code.indexOf(r=t(a,d));)++d;return o[d]=e,r})),n.grammar=e.languages.markup}}},tokenizePlaceholders:{value:function(n,a){if(n.language===a&&n.tokenStack){n.grammar=e.languages[a];var r=0,i=Object.keys(n.tokenStack);!function o(d){for(var s=0;s<d.length&&!(r>=i.length);s++){var c=d[s];if("string"==typeof c||c.content&&"string"==typeof c.content){var u=i[r],l=n.tokenStack[u],g="string"==typeof c?c:c.content,h=t(a,u),f=g.indexOf(h);if(f>-1){++r;var p=g.substring(0,f),m=new e.Token(a,e.tokenize(l,n.grammar),"language-"+a,l),R=g.substring(f+h.length),b=[];p&&b.push.apply(b,o([p])),b.push(m),R&&b.push.apply(b,o([R])),"string"==typeof c?d.splice.apply(d,[s,1].concat(b)):c.content=b}}else c.content&&o(c.content)}return d}(n.tokens)}}}})}(R),function(e){e.languages.handlebars={comment:/\{\{![\s\S]*?\}\}/,delimiter:{pattern:/^\{\{\{?|\}\}\}?$/,alias:"punctuation"},string:/(["'])(?:\\.|(?!\1)[^\\\r\n])*\1/,number:/\b0x[\dA-Fa-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:[Ee][+-]?\d+)?/,boolean:/\b(?:false|true)\b/,block:{pattern:/^(\s*(?:~\s*)?)[#\/]\S+?(?=\s*(?:~\s*)?$|\s)/,lookbehind:!0,alias:"keyword"},brackets:{pattern:/\[[^\]]+\]/,inside:{punctuation:/\[|\]/,variable:/[\s\S]+/}},punctuation:/[!"#%&':()*+,.\/;<=>@\[\\\]^`{|}~]/,variable:/[^!"#%&'()*+,\/;<=>@\[\\\]^`{|}~\s]+/},e.hooks.add("before-tokenize",(function(t){e.languages["markup-templating"].buildPlaceholders(t,"handlebars",/\{\{\{[\s\S]+?\}\}\}|\{\{[\s\S]+?\}\}/g)})),e.hooks.add("after-tokenize",(function(t){e.languages["markup-templating"].tokenizePlaceholders(t,"handlebars")})),e.languages.hbs=e.languages.handlebars}(R),R.languages.json={property:{pattern:/(^|[^\\])"(?:\\.|[^\\"\r\n])*"(?=\s*:)/,lookbehind:!0,greedy:!0},string:{pattern:/(^|[^\\])"(?:\\.|[^\\"\r\n])*"(?!\s*:)/,lookbehind:!0,greedy:!0},comment:{pattern:/\/\/.*|\/\*[\s\S]*?(?:\*\/|$)/,greedy:!0},number:/-?\b\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/i,punctuation:/[{}[\],]/,operator:/:/,boolean:/\b(?:false|true)\b/,null:{pattern:/\bnull\b/,alias:"keyword"}},R.languages.webmanifest=R.languages.json,R.languages.less=R.languages.extend("css",{comment:[/\/\*[\s\S]*?\*\//,{pattern:/(^|[^\\])\/\/.*/,lookbehind:!0}],atrule:{pattern:/@[\w-](?:\((?:[^(){}]|\([^(){}]*\))*\)|[^(){};\s]|\s+(?!\s))*?(?=\s*\{)/,inside:{punctuation:/[:()]/}},selector:{pattern:/(?:@\{[\w-]+\}|[^{};\s@])(?:@\{[\w-]+\}|\((?:[^(){}]|\([^(){}]*\))*\)|[^(){};@\s]|\s+(?!\s))*?(?=\s*\{)/,inside:{variable:/@+[\w-]+/}},property:/(?:@\{[\w-]+\}|[\w-])+(?:\+_?)?(?=\s*:)/,operator:/[+\-*\/]/}),R.languages.insertBefore("less","property",{variable:[{pattern:/@[\w-]+\s*:/,inside:{punctuation:/:/}},/@@?[\w-]+/],"mixin-usage":{pattern:/([{;]\s*)[.#](?!\d)[\w-].*?(?=[(;])/,lookbehind:!0,alias:"function"}}),R.languages.makefile={comment:{pattern:/(^|[^\\])#(?:\\(?:\r\n|[\s\S])|[^\\\r\n])*/,lookbehind:!0},string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"builtin-target":{pattern:/\.[A-Z][^:#=\s]+(?=\s*:(?!=))/,alias:"builtin"},target:{pattern:/^(?:[^:=\s]|[ \t]+(?![\s:]))+(?=\s*:(?!=))/m,alias:"symbol",inside:{variable:/\$+(?:(?!\$)[^(){}:#=\s]+|(?=[({]))/}},variable:/\$+(?:(?!\$)[^(){}:#=\s]+|\([@*%<^+?][DF]\)|(?=[({]))/,keyword:/-include\b|\b(?:define|else|endef|endif|export|ifn?def|ifn?eq|include|override|private|sinclude|undefine|unexport|vpath)\b/,function:{pattern:/(\()(?:abspath|addsuffix|and|basename|call|dir|error|eval|file|filter(?:-out)?|findstring|firstword|flavor|foreach|guile|if|info|join|lastword|load|notdir|or|origin|patsubst|realpath|shell|sort|strip|subst|suffix|value|warning|wildcard|word(?:list|s)?)(?=[ \t])/,lookbehind:!0},operator:/(?:::|[?:+!])?=|[|@]/,punctuation:/[:;(){}]/},R.languages.objectivec=R.languages.extend("c",{string:{pattern:/@?"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"/,greedy:!0},keyword:/\b(?:asm|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|in|inline|int|long|register|return|self|short|signed|sizeof|static|struct|super|switch|typedef|typeof|union|unsigned|void|volatile|while)\b|(?:@interface|@end|@implementation|@protocol|@class|@public|@protected|@private|@property|@try|@catch|@finally|@throw|@synthesize|@dynamic|@selector)\b/,operator:/-[->]?|\+\+?|!=?|<<?=?|>>?=?|==?|&&?|\|\|?|[~^%?*\/@]/}),delete R.languages.objectivec["class-name"],R.languages.objc=R.languages.objectivec,R.languages.ocaml={comment:{pattern:/\(\*[\s\S]*?\*\)/,greedy:!0},char:{pattern:/'(?:[^\\\r\n']|\\(?:.|[ox]?[0-9a-f]{1,3}))'/i,greedy:!0},string:[{pattern:/"(?:\\(?:[\s\S]|\r\n)|[^\\\r\n"])*"/,greedy:!0},{pattern:/\{([a-z_]*)\|[\s\S]*?\|\1\}/,greedy:!0}],number:[/\b(?:0b[01][01_]*|0o[0-7][0-7_]*)\b/i,/\b0x[a-f0-9][a-f0-9_]*(?:\.[a-f0-9_]*)?(?:p[+-]?\d[\d_]*)?(?!\w)/i,/\b\d[\d_]*(?:\.[\d_]*)?(?:e[+-]?\d[\d_]*)?(?!\w)/i],directive:{pattern:/\B#\w+/,alias:"property"},label:{pattern:/\B~\w+/,alias:"property"},"type-variable":{pattern:/\B'\w+/,alias:"function"},variant:{pattern:/`\w+/,alias:"symbol"},keyword:/\b(?:as|assert|begin|class|constraint|do|done|downto|else|end|exception|external|for|fun|function|functor|if|in|include|inherit|initializer|lazy|let|match|method|module|mutable|new|nonrec|object|of|open|private|rec|sig|struct|then|to|try|type|val|value|virtual|when|where|while|with)\b/,boolean:/\b(?:false|true)\b/,"operator-like-punctuation":{pattern:/\[[<>|]|[>|]\]|\{<|>\}/,alias:"punctuation"},operator:/\.[.~]|:[=>]|[=<>@^|&+\-*\/$%!?~][!$%&*+\-.\/:<=>?@^|~]*|\b(?:and|asr|land|lor|lsl|lsr|lxor|mod|or)\b/,punctuation:/;;|::|[(){}\[\].,:;#]|\b_\b/},R.languages.python={comment:{pattern:/(^|[^\\])#.*/,lookbehind:!0,greedy:!0},"string-interpolation":{pattern:/(?:f|fr|rf)(?:("""|''')[\s\S]*?\1|("|')(?:\\.|(?!\2)[^\\\r\n])*\2)/i,greedy:!0,inside:{interpolation:{pattern:/((?:^|[^{])(?:\{\{)*)\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}])+\})+\})+\}/,lookbehind:!0,inside:{"format-spec":{pattern:/(:)[^:(){}]+(?=\}$)/,lookbehind:!0},"conversion-option":{pattern:/![sra](?=[:}]$)/,alias:"punctuation"},rest:null}},string:/[\s\S]+/}},"triple-quoted-string":{pattern:/(?:[rub]|br|rb)?("""|''')[\s\S]*?\1/i,greedy:!0,alias:"string"},string:{pattern:/(?:[rub]|br|rb)?("|')(?:\\.|(?!\1)[^\\\r\n])*\1/i,greedy:!0},function:{pattern:/((?:^|\s)def[ \t]+)[a-zA-Z_]\w*(?=\s*\()/g,lookbehind:!0},"class-name":{pattern:/(\bclass\s+)\w+/i,lookbehind:!0},decorator:{pattern:/(^[\t ]*)@\w+(?:\.\w+)*/m,lookbehind:!0,alias:["annotation","punctuation"],inside:{punctuation:/\./}},keyword:/\b(?:_(?=\s*:)|and|as|assert|async|await|break|case|class|continue|def|del|elif|else|except|exec|finally|for|from|global|if|import|in|is|lambda|match|nonlocal|not|or|pass|print|raise|return|try|while|with|yield)\b/,builtin:/\b(?:__import__|abs|all|any|apply|ascii|basestring|bin|bool|buffer|bytearray|bytes|callable|chr|classmethod|cmp|coerce|compile|complex|delattr|dict|dir|divmod|enumerate|eval|execfile|file|filter|float|format|frozenset|getattr|globals|hasattr|hash|help|hex|id|input|int|intern|isinstance|issubclass|iter|len|list|locals|long|map|max|memoryview|min|next|object|oct|open|ord|pow|property|range|raw_input|reduce|reload|repr|reversed|round|set|setattr|slice|sorted|staticmethod|str|sum|super|tuple|type|unichr|unicode|vars|xrange|zip)\b/,boolean:/\b(?:False|None|True)\b/,number:/\b0(?:b(?:_?[01])+|o(?:_?[0-7])+|x(?:_?[a-f0-9])+)\b|(?:\b\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\B\.\d+(?:_\d+)*)(?:e[+-]?\d+(?:_\d+)*)?j?(?!\w)/i,operator:/[-+%=]=?|!=|:=|\*\*?=?|\/\/?=?|<[<=>]?|>[=>]?|[&|^~]/,punctuation:/[{}[\];(),.:]/},R.languages.python["string-interpolation"].inside.interpolation.inside.rest=R.languages.python,R.languages.py=R.languages.python,R.languages.reason=R.languages.extend("clike",{string:{pattern:/"(?:\\(?:\r\n|[\s\S])|[^\\\r\n"])*"/,greedy:!0},"class-name":/\b[A-Z]\w*/,keyword:/\b(?:and|as|assert|begin|class|constraint|do|done|downto|else|end|exception|external|for|fun|function|functor|if|in|include|inherit|initializer|lazy|let|method|module|mutable|new|nonrec|object|of|open|or|private|rec|sig|struct|switch|then|to|try|type|val|virtual|when|while|with)\b/,operator:/\.{3}|:[:=]|\|>|->|=(?:==?|>)?|<=?|>=?|[|^?'#!~`]|[+\-*\/]\.?|\b(?:asr|land|lor|lsl|lsr|lxor|mod)\b/}),R.languages.insertBefore("reason","class-name",{char:{pattern:/'(?:\\x[\da-f]{2}|\\o[0-3][0-7][0-7]|\\\d{3}|\\.|[^'\\\r\n])'/,greedy:!0},constructor:/\b[A-Z]\w*\b(?!\s*\.)/,label:{pattern:/\b[a-z]\w*(?=::)/,alias:"symbol"}}),delete R.languages.reason.function,function(e){e.languages.sass=e.languages.extend("css",{comment:{pattern:/^([ \t]*)\/[\/*].*(?:(?:\r?\n|\r)\1[ \t].+)*/m,lookbehind:!0,greedy:!0}}),e.languages.insertBefore("sass","atrule",{"atrule-line":{pattern:/^(?:[ \t]*)[@+=].+/m,greedy:!0,inside:{atrule:/(?:@[\w-]+|[+=])/}}}),delete e.languages.sass.atrule;var t=/\$[-\w]+|#\{\$[-\w]+\}/,n=[/[+*\/%]|[=!]=|<=?|>=?|\b(?:and|not|or)\b/,{pattern:/(\s)-(?=\s)/,lookbehind:!0}];e.languages.insertBefore("sass","property",{"variable-line":{pattern:/^[ \t]*\$.+/m,greedy:!0,inside:{punctuation:/:/,variable:t,operator:n}},"property-line":{pattern:/^[ \t]*(?:[^:\s]+ *:.*|:[^:\s].*)/m,greedy:!0,inside:{property:[/[^:\s]+(?=\s*:)/,{pattern:/(:)[^:\s]+/,lookbehind:!0}],punctuation:/:/,variable:t,operator:n,important:e.languages.sass.important}}}),delete e.languages.sass.property,delete e.languages.sass.important,e.languages.insertBefore("sass","punctuation",{selector:{pattern:/^([ \t]*)\S(?:,[^,\r\n]+|[^,\r\n]*)(?:,[^,\r\n]+)*(?:,(?:\r?\n|\r)\1[ \t]+\S(?:,[^,\r\n]+|[^,\r\n]*)(?:,[^,\r\n]+)*)*/m,lookbehind:!0,greedy:!0}})}(R),R.languages.scss=R.languages.extend("css",{comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|\/\/.*)/,lookbehind:!0},atrule:{pattern:/@[\w-](?:\([^()]+\)|[^()\s]|\s+(?!\s))*?(?=\s+[{;])/,inside:{rule:/@[\w-]+/}},url:/(?:[-a-z]+-)?url(?=\()/i,selector:{pattern:/(?=\S)[^@;{}()]?(?:[^@;{}()\s]|\s+(?!\s)|#\{\$[-\w]+\})+(?=\s*\{(?:\}|\s|[^}][^:{}]*[:{][^}]))/,inside:{parent:{pattern:/&/,alias:"important"},placeholder:/%[-\w]+/,variable:/\$[-\w]+|#\{\$[-\w]+\}/}},property:{pattern:/(?:[-\w]|\$[-\w]|#\{\$[-\w]+\})+(?=\s*:)/,inside:{variable:/\$[-\w]+|#\{\$[-\w]+\}/}}}),R.languages.insertBefore("scss","atrule",{keyword:[/@(?:content|debug|each|else(?: if)?|extend|for|forward|function|if|import|include|mixin|return|use|warn|while)\b/i,{pattern:/( )(?:from|through)(?= )/,lookbehind:!0}]}),R.languages.insertBefore("scss","important",{variable:/\$[-\w]+|#\{\$[-\w]+\}/}),R.languages.insertBefore("scss","function",{"module-modifier":{pattern:/\b(?:as|hide|show|with)\b/i,alias:"keyword"},placeholder:{pattern:/%[-\w]+/,alias:"selector"},statement:{pattern:/\B!(?:default|optional)\b/i,alias:"keyword"},boolean:/\b(?:false|true)\b/,null:{pattern:/\bnull\b/,alias:"keyword"},operator:{pattern:/(\s)(?:[-+*\/%]|[=!]=|<=?|>=?|and|not|or)(?=\s)/,lookbehind:!0}}),R.languages.scss.atrule.inside.rest=R.languages.scss,function(e){var t={pattern:/(\b\d+)(?:%|[a-z]+)/,lookbehind:!0},n={pattern:/(^|[^\w.-])-?(?:\d+(?:\.\d+)?|\.\d+)/,lookbehind:!0},a={comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|\/\/.*)/,lookbehind:!0},url:{pattern:/\burl\((["']?).*?\1\)/i,greedy:!0},string:{pattern:/("|')(?:(?!\1)[^\\\r\n]|\\(?:\r\n|[\s\S]))*\1/,greedy:!0},interpolation:null,func:null,important:/\B!(?:important|optional)\b/i,keyword:{pattern:/(^|\s+)(?:(?:else|for|if|return|unless)(?=\s|$)|@[\w-]+)/,lookbehind:!0},hexcode:/#[\da-f]{3,6}/i,color:[/\b(?:AliceBlue|AntiqueWhite|Aqua|Aquamarine|Azure|Beige|Bisque|Black|BlanchedAlmond|Blue|BlueViolet|Brown|BurlyWood|CadetBlue|Chartreuse|Chocolate|Coral|CornflowerBlue|Cornsilk|Crimson|Cyan|DarkBlue|DarkCyan|DarkGoldenRod|DarkGr[ae]y|DarkGreen|DarkKhaki|DarkMagenta|DarkOliveGreen|DarkOrange|DarkOrchid|DarkRed|DarkSalmon|DarkSeaGreen|DarkSlateBlue|DarkSlateGr[ae]y|DarkTurquoise|DarkViolet|DeepPink|DeepSkyBlue|DimGr[ae]y|DodgerBlue|FireBrick|FloralWhite|ForestGreen|Fuchsia|Gainsboro|GhostWhite|Gold|GoldenRod|Gr[ae]y|Green|GreenYellow|HoneyDew|HotPink|IndianRed|Indigo|Ivory|Khaki|Lavender|LavenderBlush|LawnGreen|LemonChiffon|LightBlue|LightCoral|LightCyan|LightGoldenRodYellow|LightGr[ae]y|LightGreen|LightPink|LightSalmon|LightSeaGreen|LightSkyBlue|LightSlateGr[ae]y|LightSteelBlue|LightYellow|Lime|LimeGreen|Linen|Magenta|Maroon|MediumAquaMarine|MediumBlue|MediumOrchid|MediumPurple|MediumSeaGreen|MediumSlateBlue|MediumSpringGreen|MediumTurquoise|MediumVioletRed|MidnightBlue|MintCream|MistyRose|Moccasin|NavajoWhite|Navy|OldLace|Olive|OliveDrab|Orange|OrangeRed|Orchid|PaleGoldenRod|PaleGreen|PaleTurquoise|PaleVioletRed|PapayaWhip|PeachPuff|Peru|Pink|Plum|PowderBlue|Purple|Red|RosyBrown|RoyalBlue|SaddleBrown|Salmon|SandyBrown|SeaGreen|SeaShell|Sienna|Silver|SkyBlue|SlateBlue|SlateGr[ae]y|Snow|SpringGreen|SteelBlue|Tan|Teal|Thistle|Tomato|Transparent|Turquoise|Violet|Wheat|White|WhiteSmoke|Yellow|YellowGreen)\b/i,{pattern:/\b(?:hsl|rgb)\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*\)\B|\b(?:hsl|rgb)a\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*,\s*(?:0|0?\.\d+|1)\s*\)\B/i,inside:{unit:t,number:n,function:/[\w-]+(?=\()/,punctuation:/[(),]/}}],entity:/\\[\da-f]{1,8}/i,unit:t,boolean:/\b(?:false|true)\b/,operator:[/~|[+!\/%<>?=]=?|[-:]=|\*[*=]?|\.{2,3}|&&|\|\||\B-\B|\b(?:and|in|is(?: a| defined| not|nt)?|not|or)\b/],number:n,punctuation:/[{}()\[\];:,]/};a.interpolation={pattern:/\{[^\r\n}:]+\}/,alias:"variable",inside:{delimiter:{pattern:/^\{|\}$/,alias:"punctuation"},rest:a}},a.func={pattern:/[\w-]+\([^)]*\).*/,inside:{function:/^[^(]+/,rest:a}},e.languages.stylus={"atrule-declaration":{pattern:/(^[ \t]*)@.+/m,lookbehind:!0,inside:{atrule:/^@[\w-]+/,rest:a}},"variable-declaration":{pattern:/(^[ \t]*)[\w$-]+\s*.?=[ \t]*(?:\{[^{}]*\}|\S.*|$)/m,lookbehind:!0,inside:{variable:/^\S+/,rest:a}},statement:{pattern:/(^[ \t]*)(?:else|for|if|return|unless)[ \t].+/m,lookbehind:!0,inside:{keyword:/^\S+/,rest:a}},"property-declaration":{pattern:/((?:^|\{)([ \t]*))(?:[\w-]|\{[^}\r\n]+\})+(?:\s*:\s*|[ \t]+)(?!\s)[^{\r\n]*(?:;|[^{\r\n,]$(?!(?:\r?\n|\r)(?:\{|\2[ \t])))/m,lookbehind:!0,inside:{property:{pattern:/^[^\s:]+/,inside:{interpolation:a.interpolation}},rest:a}},selector:{pattern:/(^[ \t]*)(?:(?=\S)(?:[^{}\r\n:()]|::?[\w-]+(?:\([^)\r\n]*\)|(?![\w-]))|\{[^}\r\n]+\})+)(?:(?:\r?\n|\r)(?:\1(?:(?=\S)(?:[^{}\r\n:()]|::?[\w-]+(?:\([^)\r\n]*\)|(?![\w-]))|\{[^}\r\n]+\})+)))*(?:,$|\{|(?=(?:\r?\n|\r)(?:\{|\1[ \t])))/m,lookbehind:!0,inside:{interpolation:a.interpolation,comment:a.comment,punctuation:/[{},]/}},func:a.func,string:a.string,comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|\/\/.*)/,lookbehind:!0,greedy:!0},interpolation:a.interpolation,punctuation:/[{}()\[\];:.]/}}(R),function(e){var t=e.util.clone(e.languages.typescript);e.languages.tsx=e.languages.extend("jsx",t),delete e.languages.tsx.parameter,delete e.languages.tsx["literal-property"];var n=e.languages.tsx.tag;n.pattern=RegExp(/(^|[^\w$]|(?=<\/))/.source+"(?:"+n.pattern.source+")",n.pattern.flags),n.lookbehind=!0}(R),R.languages.wasm={comment:[/\(;[\s\S]*?;\)/,{pattern:/;;.*/,greedy:!0}],string:{pattern:/"(?:\\[\s\S]|[^"\\])*"/,greedy:!0},keyword:[{pattern:/\b(?:align|offset)=/,inside:{operator:/=/}},{pattern:/\b(?:(?:f32|f64|i32|i64)(?:\.(?:abs|add|and|ceil|clz|const|convert_[su]\/i(?:32|64)|copysign|ctz|demote\/f64|div(?:_[su])?|eqz?|extend_[su]\/i32|floor|ge(?:_[su])?|gt(?:_[su])?|le(?:_[su])?|load(?:(?:8|16|32)_[su])?|lt(?:_[su])?|max|min|mul|neg?|nearest|or|popcnt|promote\/f32|reinterpret\/[fi](?:32|64)|rem_[su]|rot[lr]|shl|shr_[su]|sqrt|store(?:8|16|32)?|sub|trunc(?:_[su]\/f(?:32|64))?|wrap\/i64|xor))?|memory\.(?:grow|size))\b/,inside:{punctuation:/\./}},/\b(?:anyfunc|block|br(?:_if|_table)?|call(?:_indirect)?|data|drop|elem|else|end|export|func|get_(?:global|local)|global|if|import|local|loop|memory|module|mut|nop|offset|param|result|return|select|set_(?:global|local)|start|table|tee_local|then|type|unreachable)\b/],variable:/\$[\w!#$%&'*+\-./:<=>?@\\^`|~]+/,number:/[+-]?\b(?:\d(?:_?\d)*(?:\.\d(?:_?\d)*)?(?:[eE][+-]?\d(?:_?\d)*)?|0x[\da-fA-F](?:_?[\da-fA-F])*(?:\.[\da-fA-F](?:_?[\da-fA-D])*)?(?:[pP][+-]?\d(?:_?\d)*)?)\b|\binf\b|\bnan(?::0x[\da-fA-F](?:_?[\da-fA-D])*)?\b/,punctuation:/[()]/};var b={Prism:R,theme:{plain:{backgroundColor:"#2a2734",color:"#9a86fd"},styles:[{types:["comment","prolog","doctype","cdata","punctuation"],style:{color:"#6c6783"}},{types:["namespace"],style:{opacity:.7}},{types:["tag","operator","number"],style:{color:"#e09142"}},{types:["property","function"],style:{color:"#9a86fd"}},{types:["tag-id","selector","atrule-id"],style:{color:"#eeebff"}},{types:["attr-name"],style:{color:"#c4b9fe"}},{types:["boolean","string","entity","url","attr-value","keyword","control","directive","unit","statement","regex","atrule","placeholder","variable"],style:{color:"#ffcc99"}},{types:["deleted"],style:{textDecorationLine:"line-through"}},{types:["inserted"],style:{textDecorationLine:"underline"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["important"],style:{color:"#c4b9fe"}}]}};function y(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function v(){return v=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},v.apply(this,arguments)}var _=/\r\n|\r|\n/,w=function(e){0===e.length?e.push({types:["plain"],content:"\n",empty:!0}):1===e.length&&""===e[0].content&&(e[0].content="\n",e[0].empty=!0)},M=function(e,t){var n=e.length;return n>0&&e[n-1]===t?e:e.concat(t)};function x(e,t){var n={};for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&-1===t.indexOf(a)&&(n[a]=e[a]);return n}var E=function(e){function t(){for(var t=this,n=[],a=arguments.length;a--;)n[a]=arguments[a];e.apply(this,n),y(this,"getThemeDict",(function(e){if(void 0!==t.themeDict&&e.theme===t.prevTheme&&e.language===t.prevLanguage)return t.themeDict;t.prevTheme=e.theme,t.prevLanguage=e.language;var n=e.theme?function(e,t){var n=e.plain,a=Object.create(null),r=e.styles.reduce((function(e,n){var a=n.languages,r=n.style;return a&&!a.includes(t)||n.types.forEach((function(t){var n=v({},e[t],r);e[t]=n})),e}),a);return r.root=n,r.plain=v({},n,{backgroundColor:null}),r}(e.theme,e.language):void 0;return t.themeDict=n})),y(this,"getLineProps",(function(e){var n=e.key,a=e.className,r=e.style,i=v({},x(e,["key","className","style","line"]),{className:"token-line",style:void 0,key:void 0}),o=t.getThemeDict(t.props);return void 0!==o&&(i.style=o.plain),void 0!==r&&(i.style=void 0!==i.style?v({},i.style,r):r),void 0!==n&&(i.key=n),a&&(i.className+=" "+a),i})),y(this,"getStyleForToken",(function(e){var n=e.types,a=e.empty,r=n.length,i=t.getThemeDict(t.props);if(void 0!==i){if(1===r&&"plain"===n[0])return a?{display:"inline-block"}:void 0;if(1===r&&!a)return i[n[0]];var o=a?{display:"inline-block"}:{},d=n.map((function(e){return i[e]}));return Object.assign.apply(Object,[o].concat(d))}})),y(this,"getTokenProps",(function(e){var n=e.key,a=e.className,r=e.style,i=e.token,o=v({},x(e,["key","className","style","token"]),{className:"token "+i.types.join(" "),children:i.content,style:t.getStyleForToken(i),key:void 0});return void 0!==r&&(o.style=void 0!==o.style?v({},o.style,r):r),void 0!==n&&(o.key=n),a&&(o.className+=" "+a),o})),y(this,"tokenize",(function(e,t,n,a){var r={code:t,grammar:n,language:a,tokens:[]};e.hooks.run("before-tokenize",r);var i=r.tokens=e.tokenize(r.code,r.grammar,r.language);return e.hooks.run("after-tokenize",r),i}))}return e&&(t.__proto__=e),t.prototype=Object.create(e&&e.prototype),t.prototype.constructor=t,t.prototype.render=function(){var e=this.props,t=e.Prism,n=e.language,a=e.code,r=e.children,i=this.getThemeDict(this.props),o=t.languages[n];return r({tokens:function(e){for(var t=[[]],n=[e],a=[0],r=[e.length],i=0,o=0,d=[],s=[d];o>-1;){for(;(i=a[o]++)<r[o];){var c=void 0,u=t[o],l=n[o][i];if("string"==typeof l?(u=o>0?u:["plain"],c=l):(u=M(u,l.type),l.alias&&(u=M(u,l.alias)),c=l.content),"string"==typeof c){var g=c.split(_),h=g.length;d.push({types:u,content:g[0]});for(var f=1;f<h;f++)w(d),s.push(d=[]),d.push({types:u,content:g[f]})}else o++,t.push(u),n.push(c),a.push(0),r.push(c.length)}o--,t.pop(),n.pop(),a.pop(),r.pop()}return w(d),s}(void 0!==o?this.tokenize(t,a,o,n):[a]),className:"prism-code language-"+n,style:void 0!==i?i.root:{},getLineProps:this.getLineProps,getTokenProps:this.getTokenProps})},t}(r.Component),S=E,k=n(7694);var N=e=>{const t=e.children.props.className.match(/language-(?<lang>.*)/);return r.createElement(S,Object.assign({},b,{code:e.children.props.children.trim(),theme:k.Z,language:t&&t.groups&&t.groups.lang?t.groups.lang:""}),(e=>{let{className:t,style:n,tokens:a,getLineProps:i,getTokenProps:o}=e;return r.createElement("pre",{className:t+" syntax-highlighter",style:n},a.map(((e,t)=>r.createElement("div",i({line:e,key:t}),e.map(((e,t)=>r.createElement("span",o({token:e,key:t}))))))))}))};const D=e=>{var t;const n=e.children[0],i=e.children[1],o=(null===(t=i.props)||void 0===t?void 0:t.children)||[],d=Array.isArray(o)?o:[o],[s,c]=d.filter((e=>(0,r.isValidElement)(e))).reduce(((e,t,n,r)=>{var i,o;return n===r.length-1&&("string"==typeof(o=null===(i=t.props.children)||void 0===i?void 0:i[0].props.children)&&o.startsWith("[")&&o.endsWith("]"))?[e[0],t.props.children[0].props.children]:[[].concat((0,a.Z)(e[0]),[t]),e[1]]}),[[],""]),u=[n,{...i,props:{...i.props,children:s}}],[l,g]=c?(e=>e.replace("[","").replace("]","").split(":"))(c):[void 0,void 0];return r.createElement("div",{className:"hds-table-container",tabIndex:"0",style:{marginBottom:"var(--spacing-layout-xs)"}},r.createElement("table",{className:"hds-table hds-table--dark","aria-label":"Service users (dark variant)"},l&&g&&r.createElement("caption",{className:"hds-table__caption"},r.createElement("b",null,l),": ",g),u))};D.Head=e=>{const t={...e.children,props:{...e.children.props,className:"hds-table__header-row dark"}};return r.createElement("thead",null,t)},D.Body=e=>r.createElement("tbody",{className:"hds-table__content"},e.children),D.Th=e=>r.createElement("th",{scope:"col"},e.children);var A=D,j=n(1076),T=n(80699);const L=function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return t.filter((e=>e)).join(" ")},I={IconCheckCircleFill:d.I,IconCrossCircle:s.I,InternalLink:j.Z,ExternalLink:T.Z,Link:c.L,Playground:p.Ee,PlaygroundPreview:p.FY,pre:N,table:A,thead:A.Head,tbody:A.Body,th:A.Th,h1:e=>r.createElement("h1",Object.assign({},e,{className:L("page-heading-1 heading-xl-mobile",e.className)}),e.children),h2:e=>r.createElement("h2",Object.assign({},e,{className:L("page-heading-2 heading-l",e.className)}),e.children),h3:e=>r.createElement("h3",Object.assign({},e,{className:L("page-heading-3 heading-m",e.className)}),e.children),h4:e=>r.createElement("h4",Object.assign({},e,{className:L("page-heading-4 heading-s",e.className)}),e.children),h5:e=>r.createElement("h5",Object.assign({},e,{className:L("page-heading-5 heading-xs",e.className)}),e.children),h6:e=>r.createElement("h6",Object.assign({},e,{className:L("page-heading-6 heading-xxs",e.className)}),e.children)},C=(e,t)=>t+"-"+(e||"/"!==e?e.split("/").filter((e=>!!e)).join("-"):"home"),O=e=>e.slug&&e.navTitle,P=e=>e.split("/").filter((e=>!!e)),z=(e,t)=>n=>{const a=P(n.slug);return a.length===t&&a.slice(0,-1).every((t=>e.includes(t)))},B=(e,t)=>e.title.localeCompare(t.title),F=(e,t)=>{const n=P(e),a=P(t).slice(0,-1);return n.length===a.length&&n.length>=2&&n.every(((e,t)=>e===a[t]))};var U=e=>{var t;let{children:n,pageContext:d}=e;const{title:s,slug:c,customLayout:p}=d.frontmatter,m=(0,i.withPrefix)(c),R=(0,i.useStaticQuery)("3948634751"),b=R.site.siteMetadata,y=((null===(t=R.allMdx)||void 0===t?void 0:t.edges)||[]).map((e=>{let{node:t}=e;return{...t.frontmatter,...t.fields}})),v=(null==b?void 0:b.title)||"Title",_=null==b?void 0:b.siteUrl,w=null==b?void 0:b.description,M=(null==b?void 0:b.footerTitle)||v,x=null==b?void 0:b.footerAriaLabel,E=((null==b?void 0:b.menuLinks)||[]).map((e=>({...e,uiId:C(e.link,"nav")}))),S=((e,t)=>{const n=(0,i.withPrefix)("/");return t===n?e.find((e=>{let{link:t}=e;return(0,i.withPrefix)(t)===n})):e.filter((e=>{let{link:t}=e;return(0,i.withPrefix)(t)!==n})).find((e=>t.startsWith((0,i.withPrefix)(e.link))))})(E,m),k=(null==S?void 0:S.subMenuLinks)||[],N=S&&S.link?y.filter(O).filter(z(S.link,2)).map((e=>({name:e.title,title:e.title,link:e.slug}))).sort(B):[],D=[].concat((0,a.Z)(k),(0,a.Z)(N)).map((e=>({...e,prefixedLink:(0,i.withPrefix)(e.link),uiId:C(e.link,"side-nav"),subLevels:y.filter(O).filter(z(e.link,3)).map((e=>({...e,uiId:C(e.slug,"side-nav-sub"),prefixedLink:(0,i.withPrefix)(e.slug)}))).sort(B)}))),A="content",j=()=>r.createElement("div",{className:"page-header-title"},r.createElement("div",null,v),r.createElement("div",{className:"page-header-title-badge"},r.createElement("img",{style:{filter:"invert(1)"},alt:"HDS version number: 2.15.0",src:"https://img.shields.io/github/v/release/City-of-Helsinki/helsinki-design-system?label=&style=for-the-badge&color=1a1a1a"})));return r.createElement(r.Fragment,null,r.createElement(f.Z,{title:v,pageTitle:s,description:w,meta:[{property:"og:url",content:_}]}),r.createElement("div",{className:"page text-body"},r.createElement(u.H,{id:"page-header",className:"pageHeader"},r.createElement(u.H.SkipLink,{skipTo:"#"+A,label:"Skip to content"}),r.createElement(u.H.ActionBar,{title:r.createElement(j,null),titleAriaLabel:"Helsinki: Helsinki Design System",titleHref:_,logoHref:_,logoAriaLabel:"City of Helsinki Logo",logo:r.createElement(l.L,{src:l.l,alt:"Helsingin kaupunki"})}),r.createElement(u.H.NavigationMenu,null,E.map((e=>{let{name:t,link:n,uiId:a}=e;return r.createElement(u.H.Link,{active:(0,i.withPrefix)((null==S?void 0:S.link)||"")===(0,i.withPrefix)(n),key:a,label:t,to:n,as:i.Link})})))),r.createElement("div",{className:p?void 0:"page-content"},D.length>0&&r.createElement("aside",{className:"side-content",key:"side-navigation"},r.createElement(g.S,{defaultOpenMainLevels:(0,a.Z)(Array(D.length).keys()),id:"side-navigation",toggleButtonLabel:"Navigate to page",ariaLabel:""+S.name},D.map((e=>{let{name:t,link:n,prefixedLink:a,uiId:o,withDivider:d,subLevels:s}=e;const u=s.length>0;return r.createElement(g.S.MainLevel,Object.assign({key:o,id:o,label:t,active:m===a||!u&&F(n,c),withDivider:d},u?{}:{href:a,onClick:e=>{e.preventDefault(),(0,i.navigate)(n)}}),s.map((e=>{let{navTitle:t,slug:n,prefixedLink:a,uiId:o}=e;return r.createElement(g.S.SubLevel,{key:o,href:a,label:t,active:m===a||F(n,c),onClick:e=>{e.preventDefault(),(0,i.navigate)(n)}})})))})))),p?r.createElement(o.Zo,{components:I},n):r.createElement("main",{id:A,className:"main-content"},r.createElement(o.Zo,{components:I},n))),r.createElement(h.F,{id:"page-footer",className:"page-footer",title:M,footerAriaLabel:x},r.createElement(h.F.Navigation,null,E.map((e=>{let{name:t,link:n,uiId:a}=e;return r.createElement(h.F.Link,{key:a,label:t,to:n,as:i.Link})}))),r.createElement(h.F.Base,{copyrightHolder:"Copyright",backToTopLabel:"Back to top",logo:r.createElement(l.L,{src:l.l,size:"medium",alt:"Helsingin kaupunki"})},r.createElement(h.F.Link,{label:"Contribution",href:(0,i.withPrefix)("/getting-started/contributing/how-to-contribute")}),r.createElement(h.F.Link,{label:"Accessibility",href:(0,i.withPrefix)("/about/accessibility/statement")}),r.createElement(h.F.Link,{label:"GitHub",href:"https://github.com/City-of-Helsinki/helsinki-design-system"})))))}},54849:function(e){e.exports={existsSync:function(){return!1}}},41143:function(e){"use strict";e.exports=function(e,t,n,a,r,i,o,d){if(!e){var s;if(void 0===t)s=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[n,a,r,i,o,d],u=0;(s=new Error(t.replace(/%s/g,(function(){return c[u++]})))).name="Invariant Violation"}throw s.framesToPop=1,s}}},7694:function(e,t){"use strict";t.Z={plain:{color:"#393A34",backgroundColor:"#f6f8fa"},styles:[{types:["comment","prolog","doctype","cdata"],style:{color:"#999988",fontStyle:"italic"}},{types:["namespace"],style:{opacity:.7}},{types:["string","attr-value"],style:{color:"#e3116c"}},{types:["punctuation","operator"],style:{color:"#393A34"}},{types:["entity","url","symbol","number","boolean","variable","constant","property","regex","inserted"],style:{color:"#36acaa"}},{types:["atrule","keyword","attr-name","selector"],style:{color:"#00a4db"}},{types:["function","deleted","tag"],style:{color:"#d73a49"}},{types:["function-variable"],style:{color:"#6f42c1"}},{types:["tag","selector","keyword"],style:{color:"#00009f"}}]}},59730:function(e,t,n){"use strict";var a=n(67294),r={stream:!0},i=new Map,o=Symbol.for("react.element"),d=Symbol.for("react.lazy"),s=Symbol.for("react.default_value"),c=a.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ContextRegistry;function u(e,t,n){this._status=e,this._value=t,this._response=n}function l(e){switch(e._status){case 3:return e._value;case 1:var t=JSON.parse(e._value,e._response._fromJSON);return e._status=3,e._value=t;case 2:for(var a=(t=e._value).chunks,r=0;r<a.length;r++){var o=i.get(a[r]);if(null!==o)throw o}return a=n(t.id),t="*"===t.name?a:""===t.name?a.__esModule?a.default:a:a[t.name],e._status=3,e._value=t;case 0:throw e;default:throw e._value}}function g(){return l(R(this,0))}function h(e,t){return new u(3,t,e)}function f(e){if(null!==e)for(var t=0;t<e.length;t++)(0,e[t])()}function p(e,t){if(0===e._status){var n=e._value;e._status=4,e._value=t,f(n)}}function m(e,t){e._chunks.forEach((function(e){p(e,t)}))}function R(e,t){var n=e._chunks,a=n.get(t);return a||(a=new u(0,null,e),n.set(t,a)),a}function b(e){m(e,Error("Connection closed."))}function y(e,t){if(""!==t){var r=t[0],o=t.indexOf(":",1),d=parseInt(t.substring(1,o),16);switch(o=t.substring(o+1),r){case"J":(r=(t=e._chunks).get(d))?0===r._status&&(e=r._value,r._status=1,r._value=o,f(e)):t.set(d,new u(1,o,e));break;case"M":r=(t=e._chunks).get(d),o=JSON.parse(o,e._fromJSON);var l=e._bundlerConfig;l=(o=l?l[o.id][o.name]:o).chunks;for(var g=0;g<l.length;g++){var m=l[g];if(void 0===i.get(m)){var R=n.e(m),b=i.set.bind(i,m,null),y=i.set.bind(i,m);R.then(b,y),i.set(m,R)}}r?0===r._status&&(e=r._value,r._status=2,r._value=o,f(e)):t.set(d,new u(2,o,e));break;case"P":e._chunks.set(d,h(e,function(e){return c[e]||(c[e]=a.createServerContext(e,s)),c[e]}(o).Provider));break;case"S":r=JSON.parse(o),e._chunks.set(d,h(e,Symbol.for(r)));break;case"E":t=JSON.parse(o),(r=Error(t.message)).stack=t.stack,(o=(t=e._chunks).get(d))?p(o,r):t.set(d,new u(4,r,e));break;default:throw Error("Error parsing the data. It's probably an error code or network corruption.")}}}function v(e){return function(t,n){return"string"==typeof n?function(e,t,n){switch(n[0]){case"$":return"$"===n?o:"$"===n[1]||"@"===n[1]?n.substring(1):l(e=R(e,parseInt(n.substring(1),16)));case"@":return e=R(e,parseInt(n.substring(1),16)),{$$typeof:d,_payload:e,_init:l}}return n}(e,0,n):"object"==typeof n&&null!==n?n[0]===o?{$$typeof:o,type:n[1],key:n[2],ref:null,props:n[3],_owner:null}:n:n}}function _(e){var t=new TextDecoder;return(e={_bundlerConfig:e,_chunks:new Map,readRoot:g,_partialRow:"",_stringDecoder:t})._fromJSON=v(e),e}function w(e,t){function n(t){m(e,t)}var a=t.getReader();a.read().then((function t(i){var o=i.value;if(!i.done){i=o,o=e._stringDecoder;for(var d=i.indexOf(10);-1<d;){var s=e._partialRow,c=i.subarray(0,d);c=o.decode(c),y(e,s+c),e._partialRow="",d=(i=i.subarray(d+1)).indexOf(10)}return e._partialRow+=o.decode(i,r),a.read().then(t,n)}b(e)}),n)}u.prototype.then=function(e){0===this._status?(null===this._value&&(this._value=[]),this._value.push(e)):e()},t.createFromReadableStream=function(e,t){return w(t=_(t&&t.moduleMap?t.moduleMap:null),e),t}},40904:function(e,t,n){"use strict";e.exports=n(59730)},83524:function(e,t,n){"use strict";var a,r=n(67294),i=(a=r)&&"object"==typeof a&&"default"in a?a.default:a;function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var d=!("undefined"==typeof window||!window.document||!window.document.createElement);e.exports=function(e,t,n){if("function"!=typeof e)throw new Error("Expected reducePropsToState to be a function.");if("function"!=typeof t)throw new Error("Expected handleStateChangeOnClient to be a function.");if(void 0!==n&&"function"!=typeof n)throw new Error("Expected mapStateOnServer to either be undefined or a function.");return function(a){if("function"!=typeof a)throw new Error("Expected WrappedComponent to be a React component.");var s,c=[];function u(){s=e(c.map((function(e){return e.props}))),l.canUseDOM?t(s):n&&(s=n(s))}var l=function(e){var t,n;function r(){return e.apply(this,arguments)||this}n=e,(t=r).prototype=Object.create(n.prototype),t.prototype.constructor=t,t.__proto__=n,r.peek=function(){return s},r.rewind=function(){if(r.canUseDOM)throw new Error("You may only call rewind() on the server. Call peek() to read the current state.");var e=s;return s=void 0,c=[],e};var o=r.prototype;return o.UNSAFE_componentWillMount=function(){c.push(this),u()},o.componentDidUpdate=function(){u()},o.componentWillUnmount=function(){var e=c.indexOf(this);c.splice(e,1),u()},o.render=function(){return i.createElement(a,this.props)},r}(r.PureComponent);return o(l,"displayName","SideEffect("+function(e){return e.displayName||e.name||"Component"}(a)+")"),o(l,"canUseDOM",d),l}}},45545:function(){},46047:function(){},78028:function(){},50695:function(){},84215:function(){},47021:function(){},40512:function(){},24318:function(){},3967:function(){},25219:function(){},14029:function(){},61305:function(){},16659:function(){},99994:function(e,t,n){"use strict";var a=n(27061);Object.defineProperty(t,"__esModule",{value:!0}),t.codeFrameColumns=d,t.default=function(e,t,n,r={}){if(!i){i=!0;const e="Passing lineNumber and colNumber is deprecated to @babel/code-frame. Please use `codeFrameColumns`.";if(a.emitWarning)a.emitWarning(e,"DeprecationWarning");else{new Error(e).name="DeprecationWarning",console.warn(new Error(e))}}n=Math.max(n,0);return d(e,{start:{column:n,line:t}},r)};var r=n(71298);let i=!1;const o=/\r\n|[\n\r\u2028\u2029]/;function d(e,t,n={}){const a=(n.highlightCode||n.forceColor)&&(0,r.shouldHighlight)(n),i=(0,r.getChalk)(n),d=function(e){return{gutter:e.grey,marker:e.red.bold,message:e.red.bold}}(i),s=(e,t)=>a?e(t):t,c=e.split(o),{start:u,end:l,markerLines:g}=function(e,t,n){const a=Object.assign({column:0,line:-1},e.start),r=Object.assign({},a,e.end),{linesAbove:i=2,linesBelow:o=3}=n||{},d=a.line,s=a.column,c=r.line,u=r.column;let l=Math.max(d-(i+1),0),g=Math.min(t.length,c+o);-1===d&&(l=0),-1===c&&(g=t.length);const h=c-d,f={};if(h)for(let p=0;p<=h;p++){const e=p+d;if(s)if(0===p){const n=t[e-1].length;f[e]=[s,n-s+1]}else if(p===h)f[e]=[0,u];else{const n=t[e-p].length;f[e]=[0,n]}else f[e]=!0}else f[d]=s===u?!s||[s,0]:[s,u-s];return{start:l,end:g,markerLines:f}}(t,c,n),h=t.start&&"number"==typeof t.start.column,f=String(l).length;let p=(a?(0,r.default)(e,n):e).split(o,l).slice(u,l).map(((e,t)=>{const a=u+1+t,r=` ${` ${a}`.slice(-f)} |`,i=g[a],o=!g[a+1];if(i){let t="";if(Array.isArray(i)){const a=e.slice(0,Math.max(i[0]-1,0)).replace(/[^\t]/g," "),c=i[1]||1;t=["\n ",s(d.gutter,r.replace(/\d/g," "))," ",a,s(d.marker,"^").repeat(c)].join(""),o&&n.message&&(t+=" "+s(d.message,n.message))}return[s(d.marker,">"),s(d.gutter,r),e.length>0?` ${e}`:"",t].join("")}return` ${s(d.gutter,r)}${e.length>0?` ${e}`:""}`})).join("\n");return n.message&&!h&&(p=`${" ".repeat(f+1)}${n.message}\n${p}`),a?i.reset(p):p}},58179:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.isIdentifierChar=u,t.isIdentifierName=function(e){let t=!0;for(let n=0;n<e.length;n++){let a=e.charCodeAt(n);if(55296==(64512&a)&&n+1<e.length){const t=e.charCodeAt(++n);56320==(64512&t)&&(a=65536+((1023&a)<<10)+(1023&t))}if(t){if(t=!1,!c(a))return!1}else if(!u(a))return!1}return!t},t.isIdentifierStart=c;let n="ªµºÀ-ÖØ-öø-ˁˆ-ˑˠ-ˤˬˮͰ-ʹͶͷͺ-ͽͿΆΈ-ΊΌΎ-ΡΣ-ϵϷ-ҁҊ-ԯԱ-Ֆՙՠ-ֈא-תׯ-ײؠ-يٮٯٱ-ۓەۥۦۮۯۺ-ۼۿܐܒ-ܯݍ-ޥޱߊ-ߪߴߵߺࠀ-ࠕࠚࠤࠨࡀ-ࡘࡠ-ࡪࡰ-ࢇࢉ-ࢎࢠ-ࣉऄ-हऽॐक़-ॡॱ-ঀঅ-ঌএঐও-নপ-রলশ-হঽৎড়ঢ়য়-ৡৰৱৼਅ-ਊਏਐਓ-ਨਪ-ਰਲਲ਼ਵਸ਼ਸਹਖ਼-ੜਫ਼ੲ-ੴઅ-ઍએ-ઑઓ-નપ-રલળવ-હઽૐૠૡૹଅ-ଌଏଐଓ-ନପ-ରଲଳଵ-ହଽଡ଼ଢ଼ୟ-ୡୱஃஅ-ஊஎ-ஐஒ-கஙசஜஞடணதந-பம-ஹௐఅ-ఌఎ-ఐఒ-నప-హఽౘ-ౚౝౠౡಀಅ-ಌಎ-ಐಒ-ನಪ-ಳವ-ಹಽೝೞೠೡೱೲഄ-ഌഎ-ഐഒ-ഺഽൎൔ-ൖൟ-ൡൺ-ൿඅ-ඖක-නඳ-රලව-ෆก-ะาำเ-ๆກຂຄຆ-ຊຌ-ຣລວ-ະາຳຽເ-ໄໆໜ-ໟༀཀ-ཇཉ-ཬྈ-ྌက-ဪဿၐ-ၕၚ-ၝၡၥၦၮ-ၰၵ-ႁႎႠ-ჅჇჍა-ჺჼ-ቈቊ-ቍቐ-ቖቘቚ-ቝበ-ኈኊ-ኍነ-ኰኲ-ኵኸ-ኾዀዂ-ዅወ-ዖዘ-ጐጒ-ጕጘ-ፚᎀ-ᎏᎠ-Ᏽᏸ-ᏽᐁ-ᙬᙯ-ᙿᚁ-ᚚᚠ-ᛪᛮ-ᛸᜀ-ᜑᜟ-ᜱᝀ-ᝑᝠ-ᝬᝮ-ᝰក-ឳៗៜᠠ-ᡸᢀ-ᢨᢪᢰ-ᣵᤀ-ᤞᥐ-ᥭᥰ-ᥴᦀ-ᦫᦰ-ᧉᨀ-ᨖᨠ-ᩔᪧᬅ-ᬳᭅ-ᭌᮃ-ᮠᮮᮯᮺ-ᯥᰀ-ᰣᱍ-ᱏᱚ-ᱽᲀ-ᲈᲐ-ᲺᲽ-Ჿᳩ-ᳬᳮ-ᳳᳵᳶᳺᴀ-ᶿḀ-ἕἘ-Ἕἠ-ὅὈ-Ὅὐ-ὗὙὛὝὟ-ώᾀ-ᾴᾶ-ᾼιῂ-ῄῆ-ῌῐ-ΐῖ-Ίῠ-Ῥῲ-ῴῶ-ῼⁱⁿₐ-ₜℂℇℊ-ℓℕ℘-ℝℤΩℨK-ℹℼ-ℿⅅ-ⅉⅎⅠ-ↈⰀ-ⳤⳫ-ⳮⳲⳳⴀ-ⴥⴧⴭⴰ-ⵧⵯⶀ-ⶖⶠ-ⶦⶨ-ⶮⶰ-ⶶⶸ-ⶾⷀ-ⷆⷈ-ⷎⷐ-ⷖⷘ-ⷞ々-〇〡-〩〱-〵〸-〼ぁ-ゖ゛-ゟァ-ヺー-ヿㄅ-ㄯㄱ-ㆎㆠ-ㆿㇰ-ㇿ㐀-䶿一-ꒌꓐ-ꓽꔀ-ꘌꘐ-ꘟꘪꘫꙀ-ꙮꙿ-ꚝꚠ-ꛯꜗ-ꜟꜢ-ꞈꞋ-ꟊꟐꟑꟓꟕ-ꟙꟲ-ꠁꠃ-ꠅꠇ-ꠊꠌ-ꠢꡀ-ꡳꢂ-ꢳꣲ-ꣷꣻꣽꣾꤊ-ꤥꤰ-ꥆꥠ-ꥼꦄ-ꦲꧏꧠ-ꧤꧦ-ꧯꧺ-ꧾꨀ-ꨨꩀ-ꩂꩄ-ꩋꩠ-ꩶꩺꩾ-ꪯꪱꪵꪶꪹ-ꪽꫀꫂꫛ-ꫝꫠ-ꫪꫲ-ꫴꬁ-ꬆꬉ-ꬎꬑ-ꬖꬠ-ꬦꬨ-ꬮꬰ-ꭚꭜ-ꭩꭰ-ꯢ가-힣ힰ-ퟆퟋ-ퟻ豈-舘並-龎ff-stﬓ-ﬗיִײַ-ﬨשׁ-זּטּ-לּמּנּסּףּפּצּ-ﮱﯓ-ﴽﵐ-ﶏﶒ-ﷇﷰ-ﷻﹰ-ﹴﹶ-ﻼＡ-Ｚａ-ｚｦ-ﾾￂ-ￇￊ-ￏￒ-ￗￚ-ￜ",a="‌‍·̀-ͯ·҃-֑҇-ׇֽֿׁׂׅׄؐ-ًؚ-٩ٰۖ-ۜ۟-۪ۤۧۨ-ۭ۰-۹ܑܰ-݊ަ-ް߀-߉߫-߽߳ࠖ-࠙ࠛ-ࠣࠥ-ࠧࠩ-࡙࠭-࡛࢘-࢟࣊-ࣣ࣡-ःऺ-़ा-ॏ॑-ॗॢॣ०-९ঁ-ঃ়া-ৄেৈো-্ৗৢৣ০-৯৾ਁ-ਃ਼ਾ-ੂੇੈੋ-੍ੑ੦-ੱੵઁ-ઃ઼ા-ૅે-ૉો-્ૢૣ૦-૯ૺ-૿ଁ-ଃ଼ା-ୄେୈୋ-୍୕-ୗୢୣ୦-୯ஂா-ூெ-ைொ-்ௗ௦-௯ఀ-ఄ఼ా-ౄె-ైొ-్ౕౖౢౣ౦-౯ಁ-ಃ಼ಾ-ೄೆ-ೈೊ-್ೕೖೢೣ೦-೯ೳഀ-ഃ഻഼ാ-ൄെ-ൈൊ-്ൗൢൣ൦-൯ඁ-ඃ්ා-ුූෘ-ෟ෦-෯ෲෳัิ-ฺ็-๎๐-๙ັິ-ຼ່-໎໐-໙༘༙༠-༩༹༵༷༾༿ཱ-྄྆྇ྍ-ྗྙ-ྼ࿆ါ-ှ၀-၉ၖ-ၙၞ-ၠၢ-ၤၧ-ၭၱ-ၴႂ-ႍႏ-ႝ፝-፟፩-፱ᜒ-᜕ᜲ-᜴ᝒᝓᝲᝳ឴-៓៝០-៩᠋-᠍᠏-᠙ᢩᤠ-ᤫᤰ-᤻᥆-᥏᧐-᧚ᨗ-ᨛᩕ-ᩞ᩠-᩿᩼-᪉᪐-᪙᪰-᪽ᪿ-ᫎᬀ-ᬄ᬴-᭄᭐-᭙᭫-᭳ᮀ-ᮂᮡ-ᮭ᮰-᮹᯦-᯳ᰤ-᰷᱀-᱉᱐-᱙᳐-᳔᳒-᳨᳭᳴᳷-᳹᷀-᷿‿⁀⁔⃐-⃥⃜⃡-⃰⳯-⵿⳱ⷠ-〪ⷿ-゙゚〯꘠-꘩꙯ꙴ-꙽ꚞꚟ꛰꛱ꠂ꠆ꠋꠣ-ꠧ꠬ꢀꢁꢴ-ꣅ꣐-꣙꣠-꣱ꣿ-꤉ꤦ-꤭ꥇ-꥓ꦀ-ꦃ꦳-꧀꧐-꧙ꧥ꧰-꧹ꨩ-ꨶꩃꩌꩍ꩐-꩙ꩻ-ꩽꪰꪲ-ꪴꪷꪸꪾ꪿꫁ꫫ-ꫯꫵ꫶ꯣ-ꯪ꯬꯭꯰-꯹ﬞ︀-️︠-︯︳︴﹍-﹏０-９＿";const r=new RegExp("["+n+"]"),i=new RegExp("["+n+a+"]");n=a=null;const o=[0,11,2,25,2,18,2,1,2,14,3,13,35,122,70,52,268,28,4,48,48,31,14,29,6,37,11,29,3,35,5,7,2,4,43,157,19,35,5,35,5,39,9,51,13,10,2,14,2,6,2,1,2,10,2,14,2,6,2,1,68,310,10,21,11,7,25,5,2,41,2,8,70,5,3,0,2,43,2,1,4,0,3,22,11,22,10,30,66,18,2,1,11,21,11,25,71,55,7,1,65,0,16,3,2,2,2,28,43,28,4,28,36,7,2,27,28,53,11,21,11,18,14,17,111,72,56,50,14,50,14,35,349,41,7,1,79,28,11,0,9,21,43,17,47,20,28,22,13,52,58,1,3,0,14,44,33,24,27,35,30,0,3,0,9,34,4,0,13,47,15,3,22,0,2,0,36,17,2,24,20,1,64,6,2,0,2,3,2,14,2,9,8,46,39,7,3,1,3,21,2,6,2,1,2,4,4,0,19,0,13,4,159,52,19,3,21,2,31,47,21,1,2,0,185,46,42,3,37,47,21,0,60,42,14,0,72,26,38,6,186,43,117,63,32,7,3,0,3,7,2,1,2,23,16,0,2,0,95,7,3,38,17,0,2,0,29,0,11,39,8,0,22,0,12,45,20,0,19,72,264,8,2,36,18,0,50,29,113,6,2,1,2,37,22,0,26,5,2,1,2,31,15,0,328,18,16,0,2,12,2,33,125,0,80,921,103,110,18,195,2637,96,16,1071,18,5,4026,582,8634,568,8,30,18,78,18,29,19,47,17,3,32,20,6,18,689,63,129,74,6,0,67,12,65,1,2,0,29,6135,9,1237,43,8,8936,3,2,6,2,1,2,290,16,0,30,2,3,0,15,3,9,395,2309,106,6,12,4,8,8,9,5991,84,2,70,2,1,3,0,3,1,3,3,2,11,2,0,2,6,2,64,2,3,3,7,2,6,2,27,2,3,2,4,2,0,4,6,2,339,3,24,2,24,2,30,2,24,2,30,2,24,2,30,2,24,2,30,2,24,2,7,1845,30,7,5,262,61,147,44,11,6,17,0,322,29,19,43,485,27,757,6,2,3,2,1,2,14,2,196,60,67,8,0,1205,3,2,26,2,1,2,0,3,0,2,9,2,3,2,0,2,0,7,0,5,0,2,0,2,0,2,2,2,1,2,0,3,0,2,0,2,0,2,0,2,0,2,1,2,0,3,3,2,6,2,3,2,3,2,0,2,9,2,16,6,2,2,4,2,16,4421,42719,33,4153,7,221,3,5761,15,7472,3104,541,1507,4938,6,4191],d=[509,0,227,0,150,4,294,9,1368,2,2,1,6,3,41,2,5,0,166,1,574,3,9,9,370,1,81,2,71,10,50,3,123,2,54,14,32,10,3,1,11,3,46,10,8,0,46,9,7,2,37,13,2,9,6,1,45,0,13,2,49,13,9,3,2,11,83,11,7,0,3,0,158,11,6,9,7,3,56,1,2,6,3,1,3,2,10,0,11,1,3,6,4,4,193,17,10,9,5,0,82,19,13,9,214,6,3,8,28,1,83,16,16,9,82,12,9,9,84,14,5,9,243,14,166,9,71,5,2,1,3,3,2,0,2,1,13,9,120,6,3,6,4,0,29,9,41,6,2,3,9,0,10,10,47,15,406,7,2,7,17,9,57,21,2,13,123,5,4,0,2,1,2,6,2,0,9,9,49,4,2,1,2,4,9,9,330,3,10,1,2,0,49,6,4,4,14,9,5351,0,7,14,13835,9,87,9,39,4,60,6,26,9,1014,0,2,54,8,3,82,0,12,1,19628,1,4706,45,3,22,543,4,4,5,9,7,3,6,31,3,149,2,1418,49,513,54,5,49,9,0,15,0,23,4,2,14,1361,6,2,16,3,6,2,1,2,4,101,0,161,6,10,9,357,0,62,13,499,13,983,6,110,6,6,9,4759,9,787719,239];function s(e,t){let n=65536;for(let a=0,r=t.length;a<r;a+=2){if(n+=t[a],n>e)return!1;if(n+=t[a+1],n>=e)return!0}return!1}function c(e){return e<65?36===e:e<=90||(e<97?95===e:e<=122||(e<=65535?e>=170&&r.test(String.fromCharCode(e)):s(e,o)))}function u(e){return e<48?36===e:e<58||!(e<65)&&(e<=90||(e<97?95===e:e<=122||(e<=65535?e>=170&&i.test(String.fromCharCode(e)):s(e,o)||s(e,d))))}},60881:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"isIdentifierChar",{enumerable:!0,get:function(){return a.isIdentifierChar}}),Object.defineProperty(t,"isIdentifierName",{enumerable:!0,get:function(){return a.isIdentifierName}}),Object.defineProperty(t,"isIdentifierStart",{enumerable:!0,get:function(){return a.isIdentifierStart}}),Object.defineProperty(t,"isKeyword",{enumerable:!0,get:function(){return r.isKeyword}}),Object.defineProperty(t,"isReservedWord",{enumerable:!0,get:function(){return r.isReservedWord}}),Object.defineProperty(t,"isStrictBindOnlyReservedWord",{enumerable:!0,get:function(){return r.isStrictBindOnlyReservedWord}}),Object.defineProperty(t,"isStrictBindReservedWord",{enumerable:!0,get:function(){return r.isStrictBindReservedWord}}),Object.defineProperty(t,"isStrictReservedWord",{enumerable:!0,get:function(){return r.isStrictReservedWord}});var a=n(58179),r=n(44671)},44671:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.isKeyword=function(e){return r.has(e)},t.isReservedWord=d,t.isStrictBindOnlyReservedWord=c,t.isStrictBindReservedWord=function(e,t){return s(e,t)||c(e)},t.isStrictReservedWord=s;const n=["implements","interface","let","package","private","protected","public","static","yield"],a=["eval","arguments"],r=new Set(["break","case","catch","continue","debugger","default","do","else","finally","for","function","if","return","switch","throw","try","var","const","while","with","new","this","super","class","extends","export","import","null","true","false","in","instanceof","typeof","void","delete"]),i=new Set(n),o=new Set(a);function d(e,t){return t&&"await"===e||"enum"===e}function s(e,t){return d(e,t)||i.has(e)}function c(e){return o.has(e)}},71298:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t={}){if(""!==e&&u(t)){const n=function(e){return{keyword:e.cyan,capitalized:e.yellow,jsxIdentifier:e.yellow,punctuator:e.yellow,number:e.magenta,string:e.green,regex:e.magenta,comment:e.grey,invalid:e.white.bgRed.bold}}(l(t));return function(e,t){let n="";for(const{type:a,value:r}of c(t)){const t=e[a];n+=t?r.split(d).map((e=>t(e))).join("\n"):r}return n}(n,e)}return e},t.getChalk=l,t.shouldHighlight=u;var a=n(70572),r=n(60881),i=n(50949);const o=new Set(["as","async","from","get","of","set"]);const d=/\r\n|[\n\r\u2028\u2029]/,s=/^[()[\]{}]$/;let c;{const e=/^[a-z][\w-]*$/i,t=function(t,n,a){if("name"===t.type){if((0,r.isKeyword)(t.value)||(0,r.isStrictReservedWord)(t.value,!0)||o.has(t.value))return"keyword";if(e.test(t.value)&&("<"===a[n-1]||"</"==a.slice(n-2,n)))return"jsxIdentifier";if(t.value[0]!==t.value[0].toLowerCase())return"capitalized"}return"punctuator"===t.type&&s.test(t.value)?"bracket":"invalid"!==t.type||"@"!==t.value&&"#"!==t.value?t.type:"punctuator"};c=function*(e){let n;for(;n=a.default.exec(e);){const r=a.matchToToken(n);yield{type:t(r,n.index,e),value:r.value}}}}function u(e){return!!i.supportsColor||e.forceColor}function l(e){return e.forceColor?new i.constructor({enabled:!0,level:1}):i}},52998:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const n={ArrayExpression:["elements"],ArrayPattern:["elements"],ArrowFunctionExpression:["params","body"],AssignmentExpression:["left","right"],AssignmentPattern:["left","right"],AwaitExpression:["argument"],BinaryExpression:["left","right"],BlockStatement:["body"],BreakStatement:["label"],CallExpression:["callee","arguments"],CatchClause:["param","body"],ChainExpression:["expression"],ClassBody:["body"],ClassDeclaration:["id","superClass","body"],ClassExpression:["id","superClass","body"],ConditionalExpression:["test","consequent","alternate"],ContinueStatement:["label"],DebuggerStatement:[],DoWhileStatement:["body","test"],EmptyStatement:[],ExperimentalRestProperty:["argument"],ExperimentalSpreadProperty:["argument"],ExportAllDeclaration:["exported","source"],ExportDefaultDeclaration:["declaration"],ExportNamedDeclaration:["declaration","specifiers","source"],ExportSpecifier:["exported","local"],ExpressionStatement:["expression"],ForInStatement:["left","right","body"],ForOfStatement:["left","right","body"],ForStatement:["init","test","update","body"],FunctionDeclaration:["id","params","body"],FunctionExpression:["id","params","body"],Identifier:[],IfStatement:["test","consequent","alternate"],ImportDeclaration:["specifiers","source"],ImportDefaultSpecifier:["local"],ImportExpression:["source"],ImportNamespaceSpecifier:["local"],ImportSpecifier:["imported","local"],JSXAttribute:["name","value"],JSXClosingElement:["name"],JSXClosingFragment:[],JSXElement:["openingElement","children","closingElement"],JSXEmptyExpression:[],JSXExpressionContainer:["expression"],JSXFragment:["openingFragment","children","closingFragment"],JSXIdentifier:[],JSXMemberExpression:["object","property"],JSXNamespacedName:["namespace","name"],JSXOpeningElement:["name","attributes"],JSXOpeningFragment:[],JSXSpreadAttribute:["argument"],JSXSpreadChild:["expression"],JSXText:[],LabeledStatement:["label","body"],Literal:[],LogicalExpression:["left","right"],MemberExpression:["object","property"],MetaProperty:["meta","property"],MethodDefinition:["key","value"],NewExpression:["callee","arguments"],ObjectExpression:["properties"],ObjectPattern:["properties"],PrivateIdentifier:[],Program:["body"],Property:["key","value"],PropertyDefinition:["key","value"],RestElement:["argument"],ReturnStatement:["argument"],SequenceExpression:["expressions"],SpreadElement:["argument"],StaticBlock:["body"],Super:[],SwitchCase:["test","consequent"],SwitchStatement:["discriminant","cases"],TaggedTemplateExpression:["tag","quasi"],TemplateElement:[],TemplateLiteral:["quasis","expressions"],ThisExpression:[],ThrowStatement:["argument"],TryStatement:["block","handler","finalizer"],UnaryExpression:["argument"],UpdateExpression:["argument"],VariableDeclaration:["declarations"],VariableDeclarator:["id","init"],WhileStatement:["test","body"],WithStatement:["object","body"],YieldExpression:["argument"]},a=Object.keys(n);for(const o of a)Object.freeze(n[o]);Object.freeze(n);const r=new Set(["parent","leadingComments","trailingComments"]);function i(e){return!r.has(e)&&"_"!==e[0]}t.KEYS=n,t.getKeys=function(e){return Object.keys(e).filter(i)},t.unionWith=function(e){const t=Object.assign({},n);for(const n of Object.keys(e))if(Object.prototype.hasOwnProperty.call(t,n)){const a=new Set(e[n]);for(const e of t[n])a.add(e);t[n]=Object.freeze(Array.from(a))}else t[n]=Object.freeze(Array.from(e[n]));return Object.freeze(t)}},21258:function(e,t,n){"use strict";var a=n(24583);n(54849),n(38873),n(66897),n(81294),n(80624),n(21857),n(3214),n(99994),n(68194),a.Config,a.ConfigError,a.ConfigLoader,a.DynamicValue,a.EventHandler,a.HtmlElement,t.e5=a.HtmlValidate,a.MetaCopyableProperty,a.MetaTable,a.Parser,a.Reporter,a.Rule,a.SchemaValidationError,t.bD=a.StaticConfigLoader,a.TemplateExtractor,a.TextNode,a.UserError,a.presets,a.ruleExists,a.version},81294:function(e,t,n){var a=Object.create,r=Object.defineProperty,i=Object.defineProperties,o=Object.getOwnPropertyDescriptor,d=Object.getOwnPropertyDescriptors,s=Object.getOwnPropertyNames,c=Object.getOwnPropertySymbols,u=Object.getPrototypeOf,l=Object.prototype.hasOwnProperty,g=Object.prototype.propertyIsEnumerable,h=(e,t,n)=>t in e?r(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,f=(e,t)=>{for(var n in t||(t={}))l.call(t,n)&&h(e,n,t[n]);if(c)for(var n of c(t))g.call(t,n)&&h(e,n,t[n]);return e},p=(e,t)=>i(e,d(t)),m=e=>r(e,"__esModule",{value:!0}),R=(e,t)=>function(){return t||(0,e[s(e)[0]])((t={exports:{}}).exports,t),t.exports},b=(e,t,n,a)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let i of s(t))l.call(e,i)||!n&&"default"===i||r(e,i,{get:()=>t[i],enumerable:!(a=o(t,i))||a.enumerable});return e},y=(e,t)=>b(m(r(null!=e?a(u(e)):{},"default",!t&&e&&e.__esModule?{get:()=>e.default,enumerable:!0}:{value:e,enumerable:!0})),e),v=(e=>(t,n)=>e&&e.get(t)||(n=b(m({}),t,1),e&&e.set(t,n),n))("undefined"!=typeof WeakMap?new WeakMap:0),_=R({"node_modules/@humanwhocodes/momoa/api.js"(e){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var t="true",n="false",a="null",r=new Map([["t",t],["f",n],["n",a]]),i=new Map([['"','"'],["\\","\\"],["/","/"],["b","\b"],["n","\n"],["f","\f"],["r","\r"],["t","\t"]]),o=new Map([["[","Punctuator"],["]","Punctuator"],["{","Punctuator"],["}","Punctuator"],[":","Punctuator"],[",","Punctuator"],[t,"Boolean"],[n,"Boolean"],[a,"Null"]]),d=class extends Error{constructor(e,{line:t,column:n,index:a}){super(`${e} (${t}:${n})`),this.line=t,this.column=n,this.index=a}},s=class extends d{constructor(e,t){super(`Unexpected character ${e} found.`,t)}},c=class extends d{constructor(e){super(`Unexpected token ${e.type}(${e.value}) found.`,e.loc.start)}},u=class extends d{constructor(e){super("Unexpected end of input found.",e)}},l={comments:!1,ranges:!1};function g(e){return/[\s\n]/.test(e)}function h(e){return e>="0"&&e<="9"}function p(e){return h(e)||/[a-f]/i.test(e)}function m(e){return/[tfn]/.test(e)}function R(e){return h(e)||"."===e||"-"===e}function b(e,t){t=Object.freeze(f(f({},l),t));let n=-1,a=1,d=0,c=!1;const b=[];function y(e,n,a,r){const i=a.offset+n.length;let o=t.ranges?{range:[a.offset,i]}:void 0;return f({type:e,value:n,loc:{start:a,end:r||{line:a.line,column:a.column+n.length,offset:i}}},o)}function v(){let t=e.charAt(++n);return c?(a++,d=1,c=!1):d++,"\r"===t?(c=!0,"\n"===e.charAt(n+1)&&n++):"\n"===t&&(c=!0),t}function _(){return{line:a,column:d,offset:n}}function w(t){let a=r.get(t);if(e.slice(n,n+a.length)===a)return n+=a.length-1,d+=a.length-1,{value:a,c:v()};for(let r=1;r<a.length;r++)a[r]!==e.charAt(n+r)&&S(v())}function M(e){let t=e;for(e=v();e&&'"'!==e;){if("\\"===e)if(t+=e,e=v(),i.has(e))t+=e;else if("u"===e){t+=e;for(let n=0;n<4;n++)p(e=v())?t+=e:S(e)}else S(e);else t+=e;e=v()}return e||k(),t+=e,{value:t,c:v()}}function x(e){let t="";if("-"===e&&(t+=e,h(e=v())||S(e)),"0"===e)t+=e,h(e=v())&&S(e);else{(function(e){return e>="1"&&e<="9"})(e)||S(e);do{t+=e,e=v()}while(h(e))}if("."===e)do{t+=e,e=v()}while(h(e));if("e"===e||"E"===e)for(t+=e,"+"!==(e=v())&&"-"!==e||(t+=e,e=v());h(e);)t+=e,e=v();return{value:t,c:e}}function E(e){let t=e;if("/"===(e=v())){do{t+=e,e=v()}while(e&&"\r"!==e&&"\n"!==e);return{value:t,c:e}}if("*"===e){for(;e;)if(t+=e,"*"===(e=v())&&(t+=e,"/"===(e=v())))return t+=e,{value:t,c:e=v()};k()}S(e)}function S(e){throw new s(e,_())}function k(){throw new u(_())}let N=v();for(;n<e.length;){for(;g(N);)N=v();if(!N)break;const e=_();if(o.has(N))b.push(y(o.get(N),N,e)),N=v();else if(m(N)){const t=w(N);let n=t.value;N=t.c,b.push(y(o.get(n),n,e))}else if(R(N)){const t=x(N);let n=t.value;N=t.c,b.push(y("Number",n,e))}else if('"'===N){const t=M(N);let n=t.value;N=t.c,b.push(y("String",n,e))}else if("/"===N&&t.comments){const t=E(N);let n=t.value;N=t.c,b.push(y(n.startsWith("//")?"LineComment":"BlockComment",n,e,_()))}else S(N)}return b}var y={document(e,t={}){return f({type:"Document",body:e},t)},string(e,t={}){return f({type:"String",value:e},t)},number(e,t={}){return f({type:"Number",value:e},t)},boolean(e,t={}){return f({type:"Boolean",value:e},t)},null(e={}){return f({type:"Null",value:"null"},e)},array(e,t={}){return f({type:"Array",elements:e},t)},object(e,t={}){return f({type:"Object",members:e},t)},member(e,t,n={}){return f({type:"Member",name:e,value:t},n)}},v={tokens:!1,comments:!1,ranges:!1};function _(e){switch(e.type){case"Boolean":return"true"===e.value;case"Number":return Number(e.value);case"Null":return null;case"String":return function(e){let t=e.value.slice(1,-1),n="",a=t.indexOf("\\"),r=0;for(;a>=0;){n+=t.slice(r,a);const o=t.charAt(a+1);if(i.has(o))n+=i.get(o),r=a+2;else{if("u"!==o)throw new d(`Invalid escape \\${o}.`,{line:e.loc.start.line,column:e.loc.start.column+a,offset:e.loc.start.offset+a});{const i=t.slice(a+2,a+6);if(i.length<4||/[^0-9a-f]/i.test(i))throw new d(`Invalid unicode escape \\u${i}.`,{line:e.loc.start.line,column:e.loc.start.column+a,offset:e.loc.start.offset+a});n+=String.fromCharCode(parseInt(i,16)),r=a+6}}a=t.indexOf("\\",r)}return n+=t.slice(r),n}(e)}}var w=new Map([["Document",["body"]],["Object",["members"]],["Member",["name","value"]],["Array",["elements"]],["String",[]],["Number",[]],["Boolean",[]],["Null",[]]]);function M(e){return e&&"object"==typeof e}function x(e){return M(e)&&"string"==typeof e.type}function E(e,t){!function e(n,a){"function"==typeof t.enter&&t.enter(n,a);for(const t of w.get(n.type)){const a=n[t];M(a)&&(Array.isArray(a)?a.forEach((t=>e(t,n))):x(a)&&e(a,n))}"function"==typeof t.exit&&t.exit(n,a)}(e)}function S(e){switch(e.type){case"String":case"Number":case"Boolean":return e.value;case"Null":return null;case"Array":return e.elements.map(S);case"Object":{const t={};return e.members.forEach((e=>{t[S(e.name)]=S(e.value)})),t}case"Document":return S(e.body);case"Property":throw new Error("Cannot evaluate object property outside of an object.");default:throw new Error(`Unknown node type ${e.type}.`)}}e.evaluate=S,e.iterator=function(e,t=(()=>!0)){const n=[];return E(e,{enter(e,t){n.push({node:e,parent:t,phase:"enter"})},exit(e,t){n.push({node:e,parent:t,phase:"exit"})}}),n.filter(t).values()},e.parse=function(e,t){const n=b(e,{comments:!!(t=Object.freeze(f(f({},v),t))).comments,ranges:!!t.ranges});let a=0;const r=t.comments?function e(){const t=n[a++];return t&&t.type.endsWith("Comment")?e():t}:function(){return n[a++]};function i(e,t){if(!e||e.value!==t)throw new c(e)}function o(e,n){return t.ranges?{range:[e.offset,n.offset]}:void 0}function d(e){const t=o(e.loc.start,e.loc.end);return f({type:e.type,value:_(e),loc:{start:f({},e.loc.start),end:f({},e.loc.end)}},t)}function s(e){!function(e,t){if(!e||e.type!==t)throw new c(e)}(e,"String");const t=d(e);i(e=r(),":");const n=u(),a=o(t.loc.start,n.loc.end);return y.member(t,n,f({loc:{start:f({},t.loc.start),end:f({},n.loc.end)}},a))}function u(e){switch((e=e||r()).type){case"String":case"Boolean":case"Number":case"Null":return d(e);case"Punctuator":if("{"===e.value)return function(e){i(e,"{");const t=[];let n=r();if(n&&"}"!==n.value)do{if(t.push(s(n)),n=r(),","!==n.value)break;n=r()}while(n);i(n,"}");const a=o(e.loc.start,n.loc.end);return y.object(t,f({loc:{start:f({},e.loc.start),end:f({},n.loc.end)}},a))}(e);if("["===e.value)return function(e){i(e,"[");const t=[];let n=r();for(;n&&"]"!==n.value&&(t.push(u(n)),n=r(),","===n.value);)n=r();i(n,"]");const a=o(e.loc.start,n.loc.end);return y.array(t,f({type:"Array",elements:t,loc:{start:f({},e.loc.start),end:f({},n.loc.end)}},a))}(e);default:throw new c(e)}}const l=u(),g=r();if(g)throw new c(g);const h={loc:{start:{line:1,column:1,offset:0},end:f({},l.loc.end)}};return t.tokens&&(h.tokens=n),t.ranges&&(h.range=o(h.loc.start,h.loc.end)),y.document(l,h)},e.print=function(e,{indent:t=0}={}){const n=S(e);return JSON.stringify(n,null,t)},e.tokenize=b,e.traverse=E,e.types=y}}),w=R({"node_modules/leven/index.js"(e,t){"use strict";var n=[],a=[],r=(e,t)=>{if(e===t)return 0;const r=e;e.length>t.length&&(e=t,t=r);let i=e.length,o=t.length;for(;i>0&&e.charCodeAt(~-i)===t.charCodeAt(~-o);)i--,o--;let d,s,c,u,l=0;for(;l<i&&e.charCodeAt(l)===t.charCodeAt(l);)l++;if(i-=l,o-=l,0===i)return o;let g=0,h=0;for(;g<i;)a[g]=e.charCodeAt(l+g),n[g]=++g;for(;h<o;)for(d=t.charCodeAt(l+h),c=h++,s=h,g=0;g<i;g++)u=d===a[g]?c:c+1,c=n[g],s=n[g]=c>s?u>s?s+1:u:u>c?c+1:u;return s};t.exports=r,t.exports.default=r}}),M=R({"node_modules/jsonpointer/jsonpointer.js"(e){var t=/~/,n=/~[01]/g;function a(e){switch(e){case"~1":return"/";case"~0":return"~"}throw new Error("Invalid tilde escape: "+e)}function r(e){return t.test(e)?e.replace(n,a):e}function i(e){if("string"==typeof e){if(""===(e=e.split("/"))[0])return e;throw new Error("Invalid JSON pointer.")}if(Array.isArray(e)){for(const t of e)if("string"!=typeof t&&"number"!=typeof t)throw new Error("Invalid JSON pointer. Must be of type string or number.");return e}throw new Error("Invalid JSON pointer.")}function o(e,t){if("object"!=typeof e)throw new Error("Invalid input object.");var n=(t=i(t)).length;if(1===n)return e;for(var a=1;a<n;){if(e=e[r(t[a++])],n===a)return e;if("object"!=typeof e)return}}function d(e,t,n){if("object"!=typeof e)throw new Error("Invalid input object.");if(0===(t=i(t)).length)throw new Error("Invalid JSON pointer for set.");return function(e,t,n){for(var a,i,o=1,d=t.length;o<d;){if("constructor"===t[o]||"prototype"===t[o]||"__proto__"===t[o])return e;if(a=r(t[o++]),i=d>o,void 0===e[a]&&(Array.isArray(e)&&"-"===a&&(a=e.length),i&&(""!==t[o]&&t[o]<1/0||"-"===t[o]?e[a]=[]:e[a]={})),!i)break;e=e[a]}var s=e[a];return void 0===n?delete e[a]:e[a]=n,s}(e,t,n)}e.get=o,e.set=d,e.compile=function(e){var t=i(e);return{get:function(e){return o(e,t)},set:function(e,n){return d(e,t,n)}}}}}),x={};((e,t)=>{for(var n in t)r(e,n,{get:t[n],enumerable:!0})})(x,{default:()=>Z});var E=y(_()),S=e=>void 0!==e,k=e=>t=>t.keyword===e,N=k("required"),D=k("anyOf"),A=k("enum"),j=e=>e&&e.errors||[],T=e=>{return e&&(t=e.children,Object.values(t))||[];var t},L=e=>t=>t.reduce(((e,t)=>e.concat(t)),e),I=y(n(75479)),C=n(99994),O=e=>{const t=e.split("/").slice(1);for(const n in t)t[n]=t[n].split("~1").join("/").split("~0").join("~");return t};var P=class{constructor(e={isIdentifierLocation:!1},{data:t,schema:n,jsonAst:a,jsonRaw:r}){this.options=e,this.data=t,this.schema=n,this.jsonAst=a,this.jsonRaw=r}getLocation(e=this.instancePath){const{isIdentifierLocation:t,isSkipEndLocation:n}=this.options,{loc:a}=function(e,t,n){const a=O(t),r=a.length-1;return a.reduce(((e,a,i)=>{switch(e.type){case"Object":{const o=e.members.filter((e=>e.name.value===a));if(1!==o.length)throw new Error(`Couldn't find property ${a} of ${t}`);const{name:d,value:s}=o[0];return n&&i===r?d:s}case"Array":return e.elements[a];default:console.log(e)}}),e.body)}(this.jsonAst,e,t);return{start:a.start,end:n?void 0:a.end}}getDecoratedPath(e=this.instancePath){const t=function(e,t){let n="";return O(t).reduce(((e,a)=>{switch(e.type){case"Object":{n+=`/${a}`;const r=e.members.filter((e=>e.name.value===a));if(1!==r.length)throw new Error(`Couldn't find property ${a} of ${t}`);return r[0].value}case"Array":return n+=`/${a}${function(e){if(!e||!e.elements)return"";const t=e.elements.filter((e=>e&&e.name&&"type"===e.name.value));return t.length&&t[0].value&&`:${t[0].value.value}`||""}(e.elements[a])}`,e.elements[a];default:console.log(e)}}),e.body),n}(this.jsonAst,e);return t}getCodeFrame(e,t=this.instancePath){return(0,C.codeFrameColumns)(this.jsonRaw,this.getLocation(t),{highlightCode:!0,message:e})}get instancePath(){return void 0!==this.options.instancePath?this.options.instancePath:this.options.dataPath}print(){throw new Error(`Implement the 'print' method inside ${this.constructor.name}!`)}getError(){throw new Error(`Implement the 'getError' method inside ${this.constructor.name}!`)}},z=class extends P{getLocation(e=this.instancePath){const{start:t}=super.getLocation(e);return{start:t}}print(){const{message:e,params:t}=this.options;return[I.default`{red {bold REQUIRED} ${e}}\n`].concat(this.getCodeFrame(I.default`☹️  {magentaBright ${t.missingProperty}} is missing here!`))}getError(){const{message:e}=this.options;return p(f({},this.getLocation()),{error:`${this.getDecoratedPath()} ${e}`,path:this.instancePath})}},B=y(n(75479)),F=class extends P{constructor(...e){super(...e),this.options.isIdentifierLocation=!0}print(){const{message:e,params:t}=this.options;return[B.default`{red {bold ADDTIONAL PROPERTY} ${e}}\n`].concat(this.getCodeFrame(B.default`😲  {magentaBright ${t.additionalProperty}} is not expected to be here!`,`${this.instancePath}/${t.additionalProperty}`))}getError(){const{params:e}=this.options;return p(f({},this.getLocation(`${this.instancePath}/${e.additionalProperty}`)),{error:`${this.getDecoratedPath()} Property ${e.additionalProperty} is not expected to be here`,path:this.instancePath})}},U=y(n(75479)),$=y(w()),H=y(M()),q=class extends P{print(){const{message:e,params:{allowedValues:t}}=this.options,n=this.findBestMatch();return[U.default`{red {bold ENUM} ${e}}`,U.default`{red (${t.join(", ")})}\n`].concat(this.getCodeFrame(null!==n?U.default`👈🏽  Did you mean {magentaBright ${n}} here?`:U.default`👈🏽  Unexpected value, should be equal to one of the allowed values`))}getError(){const{message:e,params:t}=this.options,n=this.findBestMatch(),a=t.allowedValues.join(", "),r=p(f({},this.getLocation()),{error:`${this.getDecoratedPath()} ${e}: ${a}`,path:this.instancePath});return null!==n&&(r.suggestion=`Did you mean ${n}?`),r}findBestMatch(){const{params:{allowedValues:e}}=this.options,t=""===this.instancePath?this.data:H.default.get(this.data,this.instancePath);if(!t)return null;const n=e.map((e=>({value:e,weight:(0,$.default)(e,t.toString())}))).sort(((e,t)=>e.weight>t.weight?1:e.weight<t.weight?-1:0))[0];return 1===e.length||n.weight<n.value.length?n.value:null}},Y=y(n(75479)),G=class extends P{print(){const{keyword:e,message:t}=this.options;return[Y.default`{red {bold ${e.toUpperCase()}} ${t}}\n`].concat(this.getCodeFrame(Y.default`👈🏽  {magentaBright ${e}} ${t}`))}getError(){const{keyword:e,message:t}=this.options;return p(f({},this.getLocation()),{error:`${this.getDecoratedPath()}: ${e} ${t}`,path:this.instancePath})}},V=/\/[\w_-]+(\/\d+)?/g;function Q(e,t,n){j(e).forEach((t=>{N(t)&&(e.errors=[t],e.children={})})),j(e).some(D)&&Object.keys(e.children).length>0&&delete e.errors,e.errors&&e.errors.length&&j(e).every(A)&&(e=>t=>{return T(e).filter((a=t,n=e=>a===e,e=>!n(e)));var n,a})(t)(e).filter(S).some(j)&&delete t.children[n],Object.entries(e.children).forEach((([t,n])=>Q(n,e,t)))}function W(e,t){const n=j(e);if(n.length&&n.every(A)){const e=[...new Set(L([])(n.map((e=>e.params.allowedValues))))],a=n[0];return[new q(p(f({},a),{params:{allowedValues:e}}),t)]}return L(n.reduce(((e,n)=>{switch(n.keyword){case"additionalProperties":return e.concat(new F(n,t));case"enum":return e.concat(new q(n,t));case"required":return e.concat(new z(n,t));default:return e.concat(new G(n,t))}}),[]))(T(e).map((e=>W(e,t))))}var K=(e,t)=>{const n=function(e=[]){const t={children:{}};return e.forEach((e=>{const n=void 0!==e.instancePath?e.instancePath:e.dataPath,a=""===n?[""]:n.match(V);a&&a.reduce(((t,n,r)=>(t.children[n]=t.children[n]||{children:{},errors:[]},r===a.length-1&&t.children[n].errors.push(e),t.children[n])),t)})),t}(e||[]);return Q(n),W(n,t)},Z=(e,t,n,a={})=>{const{format:r="cli",indent:i=null,json:o=null}=a,d=o||JSON.stringify(t,null,i),s=(0,E.parse)(d),c=e=>e.print().join("\n"),u=e=>e.getError(),l=K(n,{data:t,schema:e,jsonAst:s,jsonRaw:d});return"cli"===r?l.map(c).join("\n\n"):l.map(u)};e.exports=v(x)},88789:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var a=n(77440),r=n(17370),i=n(52998);function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function d(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var a=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,a.get?a:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var s=d(a),c=o(r),u=d(i);const l="Boolean",g="Identifier",h="PrivateIdentifier",f="Keyword",p="Null",m="Numeric",R="Punctuator",b="String",y="RegularExpression",v="Template",_="JSXIdentifier",w="JSXText";function M(e,t){this._acornTokTypes=e,this._tokens=[],this._curlyBrace=null,this._code=t}M.prototype={constructor:M,translate(e,t){const n=e.type,a=this._acornTokTypes;if(n===a.name)e.type=g,"static"===e.value&&(e.type=f),t.ecmaVersion>5&&("yield"===e.value||"let"===e.value)&&(e.type=f);else if(n===a.privateId)e.type=h;else if(n===a.semi||n===a.comma||n===a.parenL||n===a.parenR||n===a.braceL||n===a.braceR||n===a.dot||n===a.bracketL||n===a.colon||n===a.question||n===a.bracketR||n===a.ellipsis||n===a.arrow||n===a.jsxTagStart||n===a.incDec||n===a.starstar||n===a.jsxTagEnd||n===a.prefix||n===a.questionDot||n.binop&&!n.keyword||n.isAssign)e.type=R,e.value=this._code.slice(e.start,e.end);else if(n===a.jsxName)e.type=_;else if("jsxText"===n.label||n===a.jsxAttrValueToken)e.type=w;else if(n.keyword)"true"===n.keyword||"false"===n.keyword?e.type=l:"null"===n.keyword?e.type=p:e.type=f;else if(n===a.num)e.type=m,e.value=this._code.slice(e.start,e.end);else if(n===a.string)t.jsxAttrValueToken?(t.jsxAttrValueToken=!1,e.type=w):e.type=b,e.value=this._code.slice(e.start,e.end);else if(n===a.regexp){e.type=y;const t=e.value;e.regex={flags:t.flags,pattern:t.pattern},e.value=`/${t.pattern}/${t.flags}`}return e},onToken(e,t){const n=this._acornTokTypes,a=t.tokens,r=this._tokens,i=()=>{a.push(function(e,t){const n=e[0],a=e[e.length-1],r={type:v,value:t.slice(n.start,a.end)};return n.loc&&(r.loc={start:n.loc.start,end:a.loc.end}),n.range&&(r.start=n.range[0],r.end=a.range[1],r.range=[r.start,r.end]),r}(this._tokens,this._code)),this._tokens=[]};if(e.type!==n.eof){if(e.type===n.backQuote)return this._curlyBrace&&(a.push(this.translate(this._curlyBrace,t)),this._curlyBrace=null),r.push(e),void(r.length>1&&i());if(e.type===n.dollarBraceL)return r.push(e),void i();if(e.type===n.braceR)return this._curlyBrace&&a.push(this.translate(this._curlyBrace,t)),void(this._curlyBrace=e);if(e.type===n.template||e.type===n.invalidTemplate)return this._curlyBrace&&(r.push(this._curlyBrace),this._curlyBrace=null),void r.push(e);this._curlyBrace&&(a.push(this.translate(this._curlyBrace,t)),this._curlyBrace=null),a.push(this.translate(e,t))}else this._curlyBrace&&a.push(this.translate(this._curlyBrace,t))}};const x=[3,5,6,7,8,9,10,11,12,13,14,15];function E(){return x[x.length-1]}function S(e){const t=function(e=5){let t="latest"===e?E():e;if("number"!=typeof t)throw new Error(`ecmaVersion must be a number or "latest". Received value of type ${typeof e} instead.`);if(t>=2015&&(t-=2009),!x.includes(t))throw new Error("Invalid ecmaVersion.");return t}(e.ecmaVersion),n=function(e="script"){if("script"===e||"module"===e)return e;if("commonjs"===e)return"script";throw new Error("Invalid sourceType.")}(e.sourceType),a=!0===e.range,r=!0===e.loc;if(3!==t&&e.allowReserved)throw new Error("`allowReserved` is only supported when ecmaVersion is 3");if(void 0!==e.allowReserved&&"boolean"!=typeof e.allowReserved)throw new Error("`allowReserved`, when present, must be `true` or `false`");const i=3===t&&(e.allowReserved||"never"),o=e.ecmaFeatures||{},d="commonjs"===e.sourceType||Boolean(o.globalReturn);if("module"===n&&t<6)throw new Error("sourceType 'module' is not supported when ecmaVersion < 2015. Consider adding `{ ecmaVersion: 2015 }` to the parser options.");return Object.assign({},e,{ecmaVersion:t,sourceType:n,ranges:a,locations:r,allowReserved:i,allowReturnOutsideFunction:d})}const k=Symbol("espree's internal state"),N=Symbol("espree's esprimaFinishNode");var D=()=>e=>{const t=Object.assign({},e.acorn.tokTypes);return e.acornJsx&&Object.assign(t,e.acornJsx.tokTypes),class extends e{constructor(e,n){"object"==typeof e&&null!==e||(e={}),"string"==typeof n||n instanceof String||(n=String(n));const a=e.sourceType,r=S(e),i=r.ecmaFeatures||{},o=!0===r.tokens?new M(t,n):null,d={originalSourceType:a||r.sourceType,tokens:o?[]:null,comments:!0===r.comment?[]:null,impliedStrict:!0===i.impliedStrict&&r.ecmaVersion>=5,ecmaVersion:r.ecmaVersion,jsxAttrValueToken:!1,lastToken:null,templateElements:[]};super({ecmaVersion:r.ecmaVersion,sourceType:r.sourceType,ranges:r.ranges,locations:r.locations,allowReserved:r.allowReserved,allowReturnOutsideFunction:r.allowReturnOutsideFunction,onToken(e){o&&o.onToken(e,d),e.type!==t.eof&&(d.lastToken=e)},onComment(e,t,a,r,i,o){if(d.comments){const s=function(e,t,n,a,r,i,o){let d;d=e?"Block":"#!"===o.slice(n,n+2)?"Hashbang":"Line";const s={type:d,value:t};return"number"==typeof n&&(s.start=n,s.end=a,s.range=[n,a]),"object"==typeof r&&(s.loc={start:r,end:i}),s}(e,t,a,r,i,o,n);d.comments.push(s)}}},n),this[k]=d}tokenize(){do{this.next()}while(this.type!==t.eof);this.next();const e=this[k],n=e.tokens;return e.comments&&(n.comments=e.comments),n}finishNode(...e){const t=super.finishNode(...e);return this[N](t)}finishNodeAt(...e){const t=super.finishNodeAt(...e);return this[N](t)}parse(){const e=this[k],t=super.parse();if(t.sourceType=e.originalSourceType,e.comments&&(t.comments=e.comments),e.tokens&&(t.tokens=e.tokens),t.body.length){const[e]=t.body;t.range&&(t.range[0]=e.range[0]),t.loc&&(t.loc.start=e.loc.start),t.start=e.start}return e.lastToken&&(t.range&&(t.range[1]=e.lastToken.range[1]),t.loc&&(t.loc.end=e.lastToken.loc.end),t.end=e.lastToken.end),this[k].templateElements.forEach((e=>{const t=e.tail?1:2;e.start+=-1,e.end+=t,e.range&&(e.range[0]+=-1,e.range[1]+=t),e.loc&&(e.loc.start.column+=-1,e.loc.end.column+=t)})),t}parseTopLevel(e){return this[k].impliedStrict&&(this.strict=!0),super.parseTopLevel(e)}raise(t,n){const a=e.acorn.getLineInfo(this.input,t),r=new SyntaxError(n);throw r.index=t,r.lineNumber=a.line,r.column=a.column+1,r}raiseRecoverable(e,t){this.raise(e,t)}unexpected(e){let t="Unexpected token";if(null!=e){if(this.pos=e,this.options.locations)for(;this.pos<this.lineStart;)this.lineStart=this.input.lastIndexOf("\n",this.lineStart-2)+1,--this.curLine;this.nextToken()}this.end>this.start&&(t+=` ${this.input.slice(this.start,this.end)}`),this.raise(this.start,t)}jsx_readString(e){const n=super.jsx_readString(e);return this.type===t.string&&(this[k].jsxAttrValueToken=!0),n}[N](e){return"TemplateElement"===e.type&&this[k].templateElements.push(e),e.type.includes("Function")&&!e.generator&&(e.generator=!1),e}}};const A={_regular:null,_jsx:null,get regular(){return null===this._regular&&(this._regular=s.Parser.extend(D())),this._regular},get jsx(){return null===this._jsx&&(this._jsx=s.Parser.extend(c.default(),D())),this._jsx},get(e){return Boolean(e&&e.ecmaFeatures&&e.ecmaFeatures.jsx)?this.jsx:this.regular}};const j=u.KEYS,T=function(){let e,t={};for(e in"function"==typeof Object.create&&(t=Object.create(null)),j)Object.hasOwnProperty.call(j,e)&&(t[e]=e);return"function"==typeof Object.freeze&&Object.freeze(t),t}(),L=E(),I=[...x];t.Syntax=T,t.VisitorKeys=j,t.latestEcmaVersion=L,t.name="espree",t.parse=function(e,t){return new(A.get(t))(t,e).parse()},t.supportedEcmaVersions=I,t.tokenize=function(e,t){const n=A.get(t);return t&&!0===t.tokens||(t=Object.assign({},t,{tokens:!0})),new n(t,e).tokenize()},t.version="9.6.1"},88773:function(e){e.exports={nanoid:(e=21)=>{let t="",n=e;for(;n--;)t+="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict"[64*Math.random()|0];return t},customAlphabet:(e,t=21)=>(n=t)=>{let a="",r=n;for(;r--;)a+=e[Math.random()*e.length|0];return a}}},66115:function(e){e.exports=function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e},e.exports.__esModule=!0,e.exports.default=e.exports},7867:function(e,t,n){var a=n(6015);e.exports=function(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,a(e,t)},e.exports.__esModule=!0,e.exports.default=e.exports},64836:function(e){e.exports=function(e){return e&&e.__esModule?e:{default:e}},e.exports.__esModule=!0,e.exports.default=e.exports},6015:function(e){function t(n,a){return e.exports=t=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},e.exports.__esModule=!0,e.exports.default=e.exports,t(n,a)}e.exports=t,e.exports.__esModule=!0,e.exports.default=e.exports},72911:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.SCRIPT_TYPE="text/partytown",t.partytownSnippet=e=>((e,t)=>{const{forward:n=[],...a}=e||{},r=JSON.stringify(a,((e,t)=>("function"==typeof t&&(t=String(t)).startsWith(e+"(")&&(t="function "+t),t)));return["!(function(w,p,f,c){",Object.keys(a).length>0?`c=w[p]=Object.assign(w[p]||{},${r});`:"c=w[p]=w[p]||{};","c[f]=(c[f]||[])",n.length>0?`.concat(${JSON.stringify(n)})`:"","})(window,'partytown','forward');",t].join("")})(e,'/* Partytown 0.7.6 - MIT builder.io */\n!function(t,e,n,i,r,o,a,d,s,c,p,l){function u(){l||(l=1,"/"==(a=(o.lib||"/~partytown/")+(o.debug?"debug/":""))[0]&&(s=e.querySelectorAll(\'script[type="text/partytown"]\'),i!=t?i.dispatchEvent(new CustomEvent("pt1",{detail:t})):(d=setTimeout(f,1e4),e.addEventListener("pt0",w),r?h(1):n.serviceWorker?n.serviceWorker.register(a+(o.swPath||"partytown-sw.js"),{scope:a}).then((function(t){t.active?h():t.installing&&t.installing.addEventListener("statechange",(function(t){"activated"==t.target.state&&h()}))}),console.error):f())))}function h(t){c=e.createElement(t?"script":"iframe"),t||(c.setAttribute("style","display:block;width:0;height:0;border:0;visibility:hidden"),c.setAttribute("aria-hidden",!0)),c.src=a+"partytown-"+(t?"atomics.js?v=0.7.6":"sandbox-sw.html?"+Date.now()),e.body.appendChild(c)}function f(n,r){for(w(),i==t&&(o.forward||[]).map((function(e){delete t[e.split(".")[0]]})),n=0;n<s.length;n++)(r=e.createElement("script")).innerHTML=s[n].innerHTML,e.head.appendChild(r);c&&c.parentNode.removeChild(c)}function w(){clearTimeout(d)}o=t.partytown||{},i==t&&(o.forward||[]).map((function(e){p=t,e.split(".").map((function(e,n,i){p=p[i[n]]=n+1<i.length?"push"==i[n+1]?[]:p[i[n]]||{}:function(){(t._ptf=t._ptf||[]).push(i,arguments)}}))})),"complete"==e.readyState?u():(t.addEventListener("DOMContentLoaded",u),t.addEventListener("load",u))}(window,document,navigator,top,window.crossOriginIsolated);')},39440:function(e,t,n){"use strict";n.d(t,{T:function(){return P}});var a=n(67294);function r(e){var t,n,a="";if("string"==typeof e||"number"==typeof e)a+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(n=r(e[t]))&&(a&&(a+=" "),a+=n);else for(t in e)e[t]&&(a&&(a+=" "),a+=t);return a}var i=function(){for(var e,t,n=0,a="";n<arguments.length;)(e=arguments[n++])&&(t=r(e))&&(a&&(a+=" "),a+=t);return a};const o="undefined"!=typeof window?a.useLayoutEffect:()=>{};let d=new Map;function s(e,t){if(e===t)return e;let n=d.get(e);if(n)return n(t),t;let a=d.get(t);return a?(a(e),e):t}function c(...e){return(...t)=>{for(let n of e)"function"==typeof n&&n(...t)}}function u(...e){let t={...e[0]};for(let n=1;n<e.length;n++){let a=e[n];for(let e in a){let n=t[e],r=a[e];"function"==typeof n&&"function"==typeof r&&"o"===e[0]&&"n"===e[1]&&e.charCodeAt(2)>=65&&e.charCodeAt(2)<=90?t[e]=c(n,r):"className"!==e&&"UNSAFE_className"!==e||"string"!=typeof n||"string"!=typeof r?"id"===e&&n&&r?t.id=s(n,r):t[e]=void 0!==r?r:n:t[e]=i(n,r)}}return t}new Set(["id"]),new Set(["aria-label","aria-labelledby","aria-describedby","aria-details"]);let l=new Map,g=new Set;function h(){if("undefined"==typeof window)return;let e=t=>{let n=l.get(t.target);if(n&&(n.delete(t.propertyName),0===n.size&&(t.target.removeEventListener("transitioncancel",e),l.delete(t.target)),0===l.size)){for(let e of g)e();g.clear()}};document.body.addEventListener("transitionrun",(t=>{let n=l.get(t.target);n||(n=new Set,l.set(t.target,n),t.target.addEventListener("transitioncancel",e)),n.add(t.propertyName)})),document.body.addEventListener("transitionend",e)}"undefined"!=typeof document&&("loading"!==document.readyState?h():document.addEventListener("DOMContentLoaded",h));"undefined"!=typeof window&&window.visualViewport;new Map;function f(e){var t;return"undefined"!=typeof window&&null!=window.navigator&&((null===(t=window.navigator.userAgentData)||void 0===t?void 0:t.brands.some((t=>e.test(t.brand))))||e.test(window.navigator.userAgent))}function p(e){var t;return"undefined"!=typeof window&&null!=window.navigator&&e.test((null===(t=window.navigator.userAgentData)||void 0===t?void 0:t.platform)||window.navigator.platform)}function m(){return p(/^Mac/i)}function R(e){const t=(0,a.useRef)(null);return o((()=>{t.current=e}),[e]),(0,a.useCallback)(((...e)=>(0,t.current)(...e)),[])}function b(e){return!(0!==e.mozInputSource||!e.isTrusted)||(f(/Android/i)&&e.pointerType?"click"===e.type&&1===e.buttons:0===e.detail&&!e.pointerType)}new WeakMap;const y=a.createContext(null);y.displayName="PressResponderContext";new Set(["checkbox","radio","range","color","file","image","button","submit","reset"]);class v{isDefaultPrevented(){return this.nativeEvent.defaultPrevented}preventDefault(){this.defaultPrevented=!0,this.nativeEvent.preventDefault()}stopPropagation(){this.nativeEvent.stopPropagation(),this.isPropagationStopped=()=>!0}isPropagationStopped(){return!1}persist(){}constructor(e,t){this.nativeEvent=t,this.target=t.target,this.currentTarget=t.currentTarget,this.relatedTarget=t.relatedTarget,this.bubbles=t.bubbles,this.cancelable=t.cancelable,this.defaultPrevented=t.defaultPrevented,this.eventPhase=t.eventPhase,this.isTrusted=t.isTrusted,this.timeStamp=t.timeStamp,this.type=e}}function _(e){let t=(0,a.useRef)({isFocused:!1,observer:null});o((()=>{const e=t.current;return()=>{e.observer&&(e.observer.disconnect(),e.observer=null)}}),[]);let n=R((t=>{null==e||e(t)}));return(0,a.useCallback)((e=>{if(e.target instanceof HTMLButtonElement||e.target instanceof HTMLInputElement||e.target instanceof HTMLTextAreaElement||e.target instanceof HTMLSelectElement){t.current.isFocused=!0;let a=e.target,r=e=>{t.current.isFocused=!1,a.disabled&&n(new v("blur",e)),t.current.observer&&(t.current.observer.disconnect(),t.current.observer=null)};a.addEventListener("focusout",r,{once:!0}),t.current.observer=new MutationObserver((()=>{if(t.current.isFocused&&a.disabled){t.current.observer.disconnect();let e=a===document.activeElement?null:document.activeElement;a.dispatchEvent(new FocusEvent("blur",{relatedTarget:e})),a.dispatchEvent(new FocusEvent("focusout",{bubbles:!0,relatedTarget:e}))}})),t.current.observer.observe(a,{attributes:!0,attributeFilter:["disabled"]})}}),[n])}let w=null,M=new Set,x=!1,E=!1,S=!1;function k(e,t){for(let n of M)n(e,t)}function N(e){E=!0,function(e){return!(e.metaKey||!m()&&e.altKey||e.ctrlKey||"Control"===e.key||"Shift"===e.key||"Meta"===e.key)}(e)&&(w="keyboard",k("keyboard",e))}function D(e){w="pointer","mousedown"!==e.type&&"pointerdown"!==e.type||(E=!0,k("pointer",e))}function A(e){b(e)&&(E=!0,w="virtual")}function j(e){e.target!==window&&e.target!==document&&(E||S||(w="virtual",k("virtual",e)),E=!1,S=!1)}function T(){E=!1,S=!0}function L(){if("undefined"==typeof window||x)return;let e=HTMLElement.prototype.focus;HTMLElement.prototype.focus=function(){E=!0,e.apply(this,arguments)},document.addEventListener("keydown",N,!0),document.addEventListener("keyup",N,!0),document.addEventListener("click",A,!0),window.addEventListener("focus",j,!0),window.addEventListener("blur",T,!1),"undefined"!=typeof PointerEvent?(document.addEventListener("pointerdown",D,!0),document.addEventListener("pointermove",D,!0),document.addEventListener("pointerup",D,!0)):(document.addEventListener("mousedown",D,!0),document.addEventListener("mousemove",D,!0),document.addEventListener("mouseup",D,!0)),x=!0}function I(e){let{isDisabled:t,onBlurWithin:n,onFocusWithin:r,onFocusWithinChange:i}=e,o=(0,a.useRef)({isFocusWithin:!1}),d=(0,a.useCallback)((e=>{o.current.isFocusWithin&&!e.currentTarget.contains(e.relatedTarget)&&(o.current.isFocusWithin=!1,n&&n(e),i&&i(!1))}),[n,i,o]),s=_(d),c=(0,a.useCallback)((e=>{o.current.isFocusWithin||document.activeElement!==e.target||(r&&r(e),i&&i(!0),o.current.isFocusWithin=!0,s(e))}),[r,i,s]);return t?{focusWithinProps:{onFocus:null,onBlur:null}}:{focusWithinProps:{onFocus:c,onBlur:d}}}"undefined"!=typeof document&&("loading"!==document.readyState?L():document.addEventListener("DOMContentLoaded",L));const C={border:0,clip:"rect(0 0 0 0)",clipPath:"inset(50%)",height:"1px",margin:"-1px",overflow:"hidden",padding:0,position:"absolute",width:"1px",whiteSpace:"nowrap"};function O(e={}){let{style:t,isFocusable:n}=e,[r,i]=(0,a.useState)(!1),{focusWithinProps:o}=I({isDisabled:!n,onFocusWithinChange:e=>i(e)});return{visuallyHiddenProps:{...o,style:(0,a.useMemo)((()=>r?t:t?{...C,...t}:C),[r])}}}function P(e){let{children:t,elementType:n="div",isFocusable:r,style:i,...o}=e,{visuallyHiddenProps:d}=O(e);return a.createElement(n,u(o,d),t)}},97326:function(e,t,n){"use strict";function a(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}n.d(t,{Z:function(){return a}})},94578:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var a=n(89611);function r(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,(0,a.Z)(e,t)}},89611:function(e,t,n){"use strict";function a(e,t){return a=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},a(e,t)}n.d(t,{Z:function(){return a}})},15785:function(e,t,n){"use strict";function a(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,a=new Array(t);n<t;n++)a[n]=e[n];return a}function r(e){return function(e){if(Array.isArray(e))return a(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,t){if(e){if("string"==typeof e)return a(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?a(e,t):void 0}}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}n.d(t,{Z:function(){return r}})},52146:function(e,t,n){"use strict";function a(e){return a=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},a(e)}n.d(t,{Z:function(){return o}});var r=n(89611);function i(e,t,n){return i=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}()?Reflect.construct.bind():function(e,t,n){var a=[null];a.push.apply(a,t);var i=new(Function.bind.apply(e,a));return n&&(0,r.Z)(i,n.prototype),i},i.apply(null,arguments)}function o(e){var t="function"==typeof Map?new Map:void 0;return o=function(e){if(null===e||(n=e,-1===Function.toString.call(n).indexOf("[native code]")))return e;var n;if("function"!=typeof e)throw new TypeError("Super expression must either be null or a function");if(void 0!==t){if(t.has(e))return t.get(e);t.set(e,o)}function o(){return i(e,arguments,a(this).constructor)}return o.prototype=Object.create(e.prototype,{constructor:{value:o,enumerable:!1,writable:!0,configurable:!0}}),(0,r.Z)(o,e)},o(e)}},87896:function(e,t,n){"use strict";var a;n.r(t),n.d(t,{BaseContext:function(){return m},Link:function(){return V},Location:function(){return X},LocationContext:function(){return R},LocationProvider:function(){return Z},Match:function(){return ee},Redirect:function(){return x},Router:function(){return de},ServerLocation:function(){return J},createHistory:function(){return u},createMemorySource:function(){return l},globalHistory:function(){return h},insertParams:function(){return D},isRedirect:function(){return _},match:function(){return k},navigate:function(){return f},pick:function(){return S},redirectTo:function(){return w},resolve:function(){return N},shallowCompare:function(){return B},startsWith:function(){return E},useBaseContext:function(){return b},useLocation:function(){return ce},useLocationContext:function(){return y},useMatch:function(){return ge},useNavigate:function(){return ue},useParams:function(){return le},validateRedirect:function(){return A}});var r=n(67294),i=n(45697),o=n(41143);function d(){return d=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},d.apply(this,arguments)}function s(e,t){if(null==e)return{};var n,a,r={},i=Object.keys(e);for(a=0;a<i.length;a++)t.indexOf(n=i[a])>=0||(r[n]=e[n]);return r}const c=e=>{const{search:t,hash:n,href:a,origin:r,protocol:i,host:o,hostname:d,port:s}=e.location;let{pathname:c}=e.location;return!c&&a&&g&&(c=new URL(a).pathname),{pathname:encodeURI(decodeURI(c)),search:t,hash:n,href:a,origin:r,protocol:i,host:o,hostname:d,port:s,state:e.history.state,key:e.history.state&&e.history.state.key||"initial"}},u=(e,t)=>{let n=[],a=c(e),r=!1,i=()=>{};return{get location(){return a},get transitioning(){return r},_onTransitionComplete(){r=!1,i()},listen(t){n.push(t);const r=()=>{a=c(e),t({location:a,action:"POP"})};return e.addEventListener("popstate",r),()=>{e.removeEventListener("popstate",r),n=n.filter((e=>e!==t))}},navigate(t,{state:o,replace:s=!1}={}){if("number"==typeof t)e.history.go(t);else{o=d({},o,{key:Date.now()+""});try{r||s?e.history.replaceState(o,null,t):e.history.pushState(o,null,t)}catch(n){e.location[s?"replace":"assign"](t)}}a=c(e),r=!0;const u=new Promise((e=>i=e));return n.forEach((e=>e({location:a,action:"PUSH"}))),u}}},l=(e="/")=>{const t=e.indexOf("?"),n={pathname:t>-1?e.substr(0,t):e,search:t>-1?e.substr(t):""};let a=0;const r=[n],i=[null];return{get location(){return r[a]},addEventListener(e,t){},removeEventListener(e,t){},history:{get entries(){return r},get index(){return a},get state(){return i[a]},pushState(e,t,n){const[o,d=""]=n.split("?");a++,r.push({pathname:o,search:d.length?`?${d}`:d}),i.push(e)},replaceState(e,t,n){const[o,d=""]=n.split("?");r[a]={pathname:o,search:d},i[a]=e},go(e){const t=a+e;t<0||t>i.length-1||(a=t)}}}},g=!("undefined"==typeof window||!window.document||!window.document.createElement),h=u(g?window:l()),{navigate:f}=h;function p(e,t){return r.createServerContext?((e,t=null)=>(globalThis.__SERVER_CONTEXT||(globalThis.__SERVER_CONTEXT={}),globalThis.__SERVER_CONTEXT[e]||(globalThis.__SERVER_CONTEXT[e]=r.createServerContext(e,t)),globalThis.__SERVER_CONTEXT[e]))(e,t):r.createContext(t)}const m=p("Base",{baseuri:"/",basepath:"/"}),R=p("Location"),b=()=>r.useContext(m),y=()=>r.useContext(R);function v(e){this.uri=e}const _=e=>e instanceof v,w=e=>{throw new v(e)};function M(e){const{to:t,replace:n=!0,state:a,noThrow:i,baseuri:o}=e;r.useEffect((()=>{Promise.resolve().then((()=>{const r=N(t,o);f(D(r,e),{replace:n,state:a})}))}),[]);const d=N(t,o);return i||w(D(d,e)),null}const x=e=>{const t=y(),{baseuri:n}=b();return r.createElement(M,d({},t,{baseuri:n},e))};x.propTypes={from:i.string,to:i.string.isRequired};const E=(e,t)=>e.substr(0,t.length)===t,S=(e,t)=>{let n,a;const[r]=t.split("?"),i=O(r),d=""===i[0],s=C(e);for(let c=0,u=s.length;c<u;c++){let e=!1;const r=s[c].route;if(r.default){a={route:r,params:{},uri:t};continue}const u=O(r.path),l={},g=Math.max(i.length,u.length);let h=0;for(;h<g;h++){const t=u[h],n=i[h];if(L(t)){l[t.slice(1)||"*"]=i.slice(h).map(decodeURIComponent).join("/");break}if(void 0===n){e=!0;break}const a=j.exec(t);if(a&&!d){const e=-1===z.indexOf(a[1]);o(e,`<Router> dynamic segment "${a[1]}" is a reserved name. Please use a different name in path "${r.path}".`);const t=decodeURIComponent(n);l[a[1]]=t}else if(t!==n){e=!0;break}}if(!e){n={route:r,params:l,uri:"/"+i.slice(0,h).join("/")};break}}return n||a||null},k=(e,t)=>S([{path:e}],t),N=(e,t)=>{if(E(e,"/"))return e;const[n,a]=e.split("?"),[r]=t.split("?"),i=O(n),o=O(r);if(""===i[0])return P(r,a);if(!E(i[0],".")){const e=o.concat(i).join("/");return P(("/"===r?"":"/")+e,a)}const d=o.concat(i),s=[];for(let c=0,u=d.length;c<u;c++){const e=d[c];".."===e?s.pop():"."!==e&&s.push(e)}return P("/"+s.join("/"),a)},D=(e,t)=>{const[n,a=""]=e.split("?");let r="/"+O(n).map((e=>{const n=j.exec(e);return n?t[n[1]]:e})).join("/");const{location:{search:i=""}={}}=t,o=i.split("?")[1]||"";return r=P(r,a,o),r},A=(e,t)=>{const n=e=>T(e);return O(e).filter(n).sort().join("/")===O(t).filter(n).sort().join("/")},j=/^:(.+)/,T=e=>j.test(e),L=e=>e&&"*"===e[0],I=(e,t)=>({route:e,score:e.default?0:O(e.path).reduce(((e,t)=>(e+=4,(e=>""===e)(t)?e+=1:T(t)?e+=2:L(t)?e-=5:e+=3,e)),0),index:t}),C=e=>e.map(I).sort(((e,t)=>e.score<t.score?1:e.score>t.score?-1:e.index-t.index)),O=e=>e.replace(/(^\/+|\/+$)/g,"").split("/"),P=(e,...t)=>e+((t=t.filter((e=>e&&e.length>0)))&&t.length>0?`?${t.join("&")}`:""),z=["uri","path"],B=(e,t)=>{const n=Object.keys(e);return n.length===Object.keys(t).length&&n.every((n=>t.hasOwnProperty(n)&&e[n]===t[n]))},F=e=>e.replace(/(^\/+|\/+$)/g,""),U=e=>t=>{if(!t)return null;if(t.type===r.Fragment&&t.props.children)return r.Children.map(t.props.children,U(e));if(o(t.props.path||t.props.default||t.type===x,`<Router>: Children of <Router> must have a \`path\` or \`default\` prop, or be a \`<Redirect>\`. None found on element type \`${t.type}\``),o(!!(t.type!==x||t.props.from&&t.props.to),`<Redirect from="${t.props.from}" to="${t.props.to}"/> requires both "from" and "to" props when inside a <Router>.`),o(!(t.type===x&&!A(t.props.from,t.props.to)),`<Redirect from="${t.props.from} to="${t.props.to}"/> has mismatched dynamic segments, ensure both paths have the exact same dynamic segments.`),t.props.default)return{value:t,default:!0};const n=t.type===x?t.props.from:t.props.path,a="/"===n?e:`${F(e)}/${F(n)}`;return{value:t,default:t.props.default,path:t.props.children?`${F(a)}/*`:a}},$=["innerRef"],H=["to","state","replace","getProps"],q=["key"];let{forwardRef:Y}=a||(a=n.t(r,2));void 0===Y&&(Y=e=>e);const G=()=>{},V=Y(((e,t)=>{let{innerRef:n}=e,a=s(e,$);const{baseuri:i}=b(),{location:o}=y(),{to:c,state:u,replace:l,getProps:g=G}=a,h=s(a,H),p=N(c,i),m=encodeURI(p),R=o.pathname===m,v=E(o.pathname,m);return r.createElement("a",d({ref:t||n,"aria-current":R?"page":void 0},h,g({isCurrent:R,isPartiallyCurrent:v,href:p,location:o}),{href:p,onClick:e=>{if(h.onClick&&h.onClick(e),(e=>!e.defaultPrevented&&0===e.button&&!(e.metaKey||e.altKey||e.ctrlKey||e.shiftKey))(e)){e.preventDefault();let t=l;if("boolean"!=typeof l&&R){const e=s(d({},o.state),q);t=B(d({},u),e)}f(p,{state:u,replace:t})}}}))}));V.displayName="Link",V.propTypes={to:i.string.isRequired};class Q extends r.Component{constructor(...e){super(...e),this.displayName="ReactUseErrorBoundary"}componentDidCatch(...e){this.setState({}),this.props.onError(...e)}render(){return this.props.children}}const W=r.createContext({componentDidCatch:{current:void 0},error:void 0,setError:()=>!1});function K({children:e}){const[t,n]=r.useState(),a=r.useRef(),i=r.useMemo((()=>({componentDidCatch:a,error:t,setError:n})),[t]);return r.createElement(W.Provider,{value:i},r.createElement(Q,{error:t,onError:(e,t)=>{n(e),null==a.current||a.current(e,t)}},e))}K.displayName="ReactUseErrorBoundaryContext";const Z=function(e){var t,n;function a(t){return r.createElement(K,null,r.createElement(e,d({key:"WrappedComponent"},t)))}return a.displayName=`WithErrorBoundary(${null!=(t=null!=(n=e.displayName)?n:e.name)?t:"Component"})`,a}((({history:e=h,children:t})=>{const{location:n}=e,[a,i]=r.useState({location:n}),[o]=function(e){const t=r.useContext(W);t.componentDidCatch.current=void 0;const n=r.useCallback((()=>{t.setError(void 0)}),[]);return[t.error,n]}();if(r.useEffect((()=>{e._onTransitionComplete()}),[a.location]),r.useEffect((()=>{let t=!1;const n=e.listen((({location:e})=>{Promise.resolve().then((()=>{requestAnimationFrame((()=>{t||i({location:e})}))}))}));return()=>{t=!0,n()}}),[]),o){if(!_(o))throw o;f(o.uri,{replace:!0})}return r.createElement(R.Provider,{value:a},"function"==typeof t?t(a):t||null)})),X=({children:e})=>{const t=y();return t?e(t):r.createElement(Z,null,e)},J=({url:e,children:t})=>{const n=e.indexOf("?");let a,i="";return n>-1?(a=e.substring(0,n),i=e.substring(n)):a=e,r.createElement(R.Provider,{value:{location:{pathname:a,search:i,hash:""}}},t)},ee=({path:e,children:t})=>{const{baseuri:n}=b(),{location:a}=y(),r=N(e,n),i=k(r,a.pathname);return t({location:a,match:i?d({},i.params,{uri:i.uri,path:e}):null})},te=["uri","location","component"],ne=["children","style","component","uri","location"],ae=e=>{let{uri:t,location:n,component:a}=e,i=s(e,te);return r.createElement(ie,d({},i,{component:a,uri:t,location:n}))};let re=0;const ie=e=>{let{children:t,style:n,component:a="div",uri:i,location:o}=e,c=s(e,ne);const u=r.useRef(),l=r.useRef(!0),g=r.useRef(i),h=r.useRef(o.pathname),f=r.useRef(!1);r.useEffect((()=>(re++,p(),()=>{re--,0===re&&(l.current=!0)})),[]),r.useEffect((()=>{let e=!1,t=!1;i!==g.current&&(g.current=i,e=!0),o.pathname!==h.current&&(h.current=o.pathname,t=!0),f.current=e||t&&o.pathname===i,f.current&&p()}),[i,o]);const p=r.useCallback((()=>{var e;l.current?l.current=!1:(e=u.current,f.current&&e&&e.focus())}),[]);return r.createElement(a,d({style:d({outline:"none"},n),tabIndex:"-1",ref:u},c),t)},oe=["location","primary","children","basepath","baseuri","component"],de=e=>{const t=b(),n=y();return r.createElement(se,d({},t,n,e))};function se(e){const{location:t,primary:n=!0,children:a,basepath:i,component:o="div"}=e,c=s(e,oe),u=r.Children.toArray(a).reduce(((e,t)=>{const n=U(i)(t);return e.concat(n)}),[]),{pathname:l}=t,g=S(u,l);if(g){const{params:e,uri:a,route:s,route:{value:u}}=g,l=s.default?i:s.path.replace(/\*$/,""),h=d({},e,{uri:a,location:t}),f=r.cloneElement(u,h,u.props.children?r.createElement(de,{location:t,primary:n},u.props.children):void 0),p=n?ae:o,R=n?d({uri:a,location:t,component:o},c):c;return r.createElement(m.Provider,{value:{baseuri:a,basepath:l}},r.createElement(p,R,f))}return null}const ce=()=>{const e=y();if(!e)throw new Error("useLocation hook was used but a LocationContext.Provider was not found in the parent tree. Make sure this is used in a component that is a child of Router");return e.location},ue=()=>{throw new Error("useNavigate is removed. Use import { navigate } from 'gatsby' instead")},le=()=>{const e=b();if(!e)throw new Error("useParams hook was used but a LocationContext.Provider was not found in the parent tree. Make sure this is used in a component that is a child of Router");const t=ce(),n=k(e.basepath,t.pathname);return n?n.params:null},ge=e=>{if(!e)throw new Error("useMatch(path: string) requires an argument of a string to match against");const t=b();if(!t)throw new Error("useMatch hook was used but a LocationContext.Provider was not found in the parent tree. Make sure this is used in a component that is a child of Router");const n=ce(),a=N(e,t.baseuri),r=k(a,n.pathname);return r?d({},r.params,{uri:r.uri,path:e}):null}},11151:function(e,t,n){"use strict";n.d(t,{Zo:function(){return d},ah:function(){return i}});var a=n(67294);const r=a.createContext({});function i(e){const t=a.useContext(r);return a.useMemo((()=>"function"==typeof e?e(t):{...t,...e}),[t,e])}const o={};function d({components:e,children:t,disableParentContext:n}){let d;return d=n?"function"==typeof e?e({}):e||o:i(e),a.createElement(r.Provider,{value:d},t)}},71562:function(e,t,n){"use strict";n.d(t,{c4:function(){return M},cP:function(){return s},dq:function(){return h},mc:function(){return b},rU:function(){return w}});var a=n(45697),r=n(67294),i=n(87896),o=n(64506);function d(){return d=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},d.apply(this,arguments)}function s(e){let t=e||"/",n="",a="";const r=t.indexOf("#");-1!==r&&(a=t.slice(r),t=t.slice(0,r));const i=t.indexOf("?");return-1!==i&&(n=t.slice(i),t=t.slice(0,i)),{pathname:t,search:"?"===n?"":n,hash:"#"===a?"":a}}const c=/^[a-zA-Z][a-zA-Z\d+\-.]*?:/,u=e=>{if("string"==typeof e)return!(e=>c.test(e))(e)},l=()=>"/hds-demo/hds-1817-stepbystep-docs",g=()=>"/hds-demo/hds-1817-stepbystep-docs";function h(e,t=l()){var n;if(!u(e))return e;if(e.startsWith("./")||e.startsWith("../"))return e;const a=null!=(n=null!=t?t:g())?n:"/";return`${null!=a&&a.endsWith("/")?a.slice(0,-1):a}${e.startsWith("/")?e:`/${e}`}`}const f=e=>null==e?void 0:e.startsWith("/");function p(e,t){const{pathname:n,search:a,hash:r}=s(e);return`${(0,o.H)(n,t)}${a}${r}`}const m=(e,t)=>"number"==typeof e?e:u(e)?f(e)?function(e){const t=h(e),n="always";return p(t,n)}(e):function(e,t){if(f(e))return e;const n="always",a=(0,i.resolve)(e,t);return p(a,n)}(e,t):e,R=["to","getProps","onClick","onMouseEnter","activeClassName","activeStyle","innerRef","partiallyActive","state","replace","_location"];function b(e){return h(e,g())}const y={activeClassName:a.string,activeStyle:a.object,partiallyActive:a.bool};function v(e){return r.createElement(i.Location,null,(({location:t})=>r.createElement(_,d({},e,{_location:t}))))}class _ extends r.Component{constructor(e){super(e),this.defaultGetProps=({isPartiallyCurrent:e,isCurrent:t})=>(this.props.partiallyActive?e:t)?{className:[this.props.className,this.props.activeClassName].filter(Boolean).join(" "),style:d({},this.props.style,this.props.activeStyle)}:null;let t=!1;"undefined"!=typeof window&&window.IntersectionObserver&&(t=!0),this.state={IOSupported:t},this.abortPrefetch=null,this.handleRef=this.handleRef.bind(this)}_prefetch(){let e=window.location.pathname+window.location.search;this.props._location&&this.props._location.pathname&&(e=this.props._location.pathname+this.props._location.search);const t=s(m(this.props.to,e)),n=t.pathname+t.search;if(e!==n)return ___loader.enqueue(n)}componentWillUnmount(){if(!this.io)return;const{instance:e,el:t}=this.io;this.abortPrefetch&&this.abortPrefetch.abort(),e.unobserve(t),e.disconnect()}handleRef(e){this.props.innerRef&&Object.prototype.hasOwnProperty.call(this.props.innerRef,"current")?this.props.innerRef.current=e:this.props.innerRef&&this.props.innerRef(e),this.state.IOSupported&&e&&(this.io=((e,t)=>{const n=new window.IntersectionObserver((n=>{n.forEach((n=>{e===n.target&&t(n.isIntersecting||n.intersectionRatio>0)}))}));return n.observe(e),{instance:n,el:e}})(e,(e=>{e?this.abortPrefetch=this._prefetch():this.abortPrefetch&&this.abortPrefetch.abort()})))}render(){const e=this.props,{to:t,getProps:n=this.defaultGetProps,onClick:a,onMouseEnter:o,state:c,replace:l,_location:g}=e,h=function(e,t){if(null==e)return{};var n,a,r={},i=Object.keys(e);for(a=0;a<i.length;a++)t.indexOf(n=i[a])>=0||(r[n]=e[n]);return r}(e,R),f=m(t,g.pathname);return u(f)?r.createElement(i.Link,d({to:f,state:c,getProps:n,innerRef:this.handleRef,onMouseEnter:e=>{o&&o(e);const t=s(f);___loader.hovering(t.pathname+t.search)},onClick:e=>{if(a&&a(e),!(0!==e.button||this.props.target||e.defaultPrevented||e.metaKey||e.altKey||e.ctrlKey||e.shiftKey)){e.preventDefault();let t=l;const n=encodeURI(f)===g.pathname;"boolean"!=typeof l&&n&&(t=!0),window.___navigate(f,{state:c,replace:t})}return!0}},h)):r.createElement("a",d({href:f},h))}}_.propTypes=d({},y,{onClick:a.func,to:a.string.isRequired,replace:a.bool,state:a.object});const w=r.forwardRef(((e,t)=>r.createElement(v,d({innerRef:t},e)))),M=(e,t)=>{window.___navigate(m(e,window.location.pathname),t)}},83521:function(e,t,n){"use strict";n.r(t),n.d(t,{Script:function(){return f},ScriptStrategy:function(){return c},collectedScriptsByPage:function(){return d},scriptCache:function(){return g},scriptCallbackCache:function(){return h}});var a=n(67294),r=n(87896);function i(){return i=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i.apply(this,arguments)}const o=new Map,d={get:e=>o.get(e)||[],set(e,t){const n=o.get(e)||[];n.push(t),o.set(e,n)},delete(e){o.delete(e)}},s="undefined"!=typeof self&&self.requestIdleCallback&&self.requestIdleCallback.bind(window)||function(e){const t=Date.now();return setTimeout((function(){e({didTimeout:!1,timeRemaining:function(){return Math.max(0,50-(Date.now()-t))}})}),1)};var c,u;(u=c||(c={})).postHydrate="post-hydrate",u.idle="idle",u.offMainThread="off-main-thread";const l=new Set(["src","strategy","dangerouslySetInnerHTML","children","onLoad","onError"]),g=new Set,h=new Map;function f(e){return a.createElement(r.Location,null,(()=>a.createElement(p,e)))}function p(e){const{src:t,strategy:n=c.postHydrate}=e||{},{pathname:o}=(0,r.useLocation)();if((0,a.useEffect)((()=>{let t;switch(n){case c.postHydrate:t=m(e);break;case c.idle:s((()=>{t=m(e)}));break;case c.offMainThread:{const t=b(e);d.set(o,t)}}return()=>{const{script:e,loadCallback:n,errorCallback:a}=t||{};n&&(null==e||e.removeEventListener("load",n)),a&&(null==e||e.removeEventListener("error",a)),null==e||e.remove()}}),[]),n===c.offMainThread){const r=R(e),s=b(e);return"undefined"==typeof window&&d.set(o,s),a.createElement("script",r?i({type:"text/partytown","data-strategy":n,crossOrigin:"anonymous"},s,{dangerouslySetInnerHTML:{__html:R(e)}}):i({type:"text/partytown",src:y(t),"data-strategy":n,crossOrigin:"anonymous"},s))}return null}function m(e){const{id:t,src:n,strategy:a=c.postHydrate,onLoad:r,onError:o}=e||{},d=t||n,s=["load","error"],u={load:r,error:o};if(d){for(const e of s)if(null!=u&&u[e]){var l;const t=h.get(d)||{},{callbacks:n=[]}=(null==t?void 0:t[e])||{};var f,p;n.push(null==u?void 0:u[e]),null!=t&&null!=(l=t[e])&&l.event?null==u||null==(f=u[e])||f.call(u,null==t||null==(p=t[e])?void 0:p.event):h.set(d,i({},t,{[e]:{callbacks:n}}))}if(g.has(d))return null}const m=R(e),y=b(e),_=document.createElement("script");t&&(_.id=t),_.dataset.strategy=a;for(const[i,c]of Object.entries(y))_.setAttribute(i,c);m&&(_.textContent=m),n&&(_.src=n);const w={};if(d){for(const e of s){const t=t=>v(t,d,e);_.addEventListener(e,t),w[`${e}Callback`]=t}g.add(d)}return document.body.appendChild(_),{script:_,loadCallback:w.loadCallback,errorCallback:w.errorCallback}}function R(e){const{dangerouslySetInnerHTML:t,children:n=""}=e||{},{__html:a=""}=t||{};return a||n}function b(e){const t={};for(const[n,a]of Object.entries(e))l.has(n)||(t[n]=a);return t}function y(e){if(e)return`/__third-party-proxy?url=${encodeURIComponent(e)}`}function v(e,t,n){const a=h.get(t)||{};for(const i of(null==a||null==(r=a[n])?void 0:r.callbacks)||[]){var r;i(e)}h.set(t,{[n]:{event:e}})}},74923:function(e){"use strict";e.exports=JSON.parse('{"aes-128-ecb":{"cipher":"AES","key":128,"iv":0,"mode":"ECB","type":"block"},"aes-192-ecb":{"cipher":"AES","key":192,"iv":0,"mode":"ECB","type":"block"},"aes-256-ecb":{"cipher":"AES","key":256,"iv":0,"mode":"ECB","type":"block"},"aes-128-cbc":{"cipher":"AES","key":128,"iv":16,"mode":"CBC","type":"block"},"aes-192-cbc":{"cipher":"AES","key":192,"iv":16,"mode":"CBC","type":"block"},"aes-256-cbc":{"cipher":"AES","key":256,"iv":16,"mode":"CBC","type":"block"},"aes128":{"cipher":"AES","key":128,"iv":16,"mode":"CBC","type":"block"},"aes192":{"cipher":"AES","key":192,"iv":16,"mode":"CBC","type":"block"},"aes256":{"cipher":"AES","key":256,"iv":16,"mode":"CBC","type":"block"},"aes-128-cfb":{"cipher":"AES","key":128,"iv":16,"mode":"CFB","type":"stream"},"aes-192-cfb":{"cipher":"AES","key":192,"iv":16,"mode":"CFB","type":"stream"},"aes-256-cfb":{"cipher":"AES","key":256,"iv":16,"mode":"CFB","type":"stream"},"aes-128-cfb8":{"cipher":"AES","key":128,"iv":16,"mode":"CFB8","type":"stream"},"aes-192-cfb8":{"cipher":"AES","key":192,"iv":16,"mode":"CFB8","type":"stream"},"aes-256-cfb8":{"cipher":"AES","key":256,"iv":16,"mode":"CFB8","type":"stream"},"aes-128-cfb1":{"cipher":"AES","key":128,"iv":16,"mode":"CFB1","type":"stream"},"aes-192-cfb1":{"cipher":"AES","key":192,"iv":16,"mode":"CFB1","type":"stream"},"aes-256-cfb1":{"cipher":"AES","key":256,"iv":16,"mode":"CFB1","type":"stream"},"aes-128-ofb":{"cipher":"AES","key":128,"iv":16,"mode":"OFB","type":"stream"},"aes-192-ofb":{"cipher":"AES","key":192,"iv":16,"mode":"OFB","type":"stream"},"aes-256-ofb":{"cipher":"AES","key":256,"iv":16,"mode":"OFB","type":"stream"},"aes-128-ctr":{"cipher":"AES","key":128,"iv":16,"mode":"CTR","type":"stream"},"aes-192-ctr":{"cipher":"AES","key":192,"iv":16,"mode":"CTR","type":"stream"},"aes-256-ctr":{"cipher":"AES","key":256,"iv":16,"mode":"CTR","type":"stream"},"aes-128-gcm":{"cipher":"AES","key":128,"iv":12,"mode":"GCM","type":"auth"},"aes-192-gcm":{"cipher":"AES","key":192,"iv":12,"mode":"GCM","type":"auth"},"aes-256-gcm":{"cipher":"AES","key":256,"iv":12,"mode":"GCM","type":"auth"}}')},17536:function(e){"use strict";e.exports=JSON.parse('{"sha224WithRSAEncryption":{"sign":"rsa","hash":"sha224","id":"302d300d06096086480165030402040500041c"},"RSA-SHA224":{"sign":"ecdsa/rsa","hash":"sha224","id":"302d300d06096086480165030402040500041c"},"sha256WithRSAEncryption":{"sign":"rsa","hash":"sha256","id":"3031300d060960864801650304020105000420"},"RSA-SHA256":{"sign":"ecdsa/rsa","hash":"sha256","id":"3031300d060960864801650304020105000420"},"sha384WithRSAEncryption":{"sign":"rsa","hash":"sha384","id":"3041300d060960864801650304020205000430"},"RSA-SHA384":{"sign":"ecdsa/rsa","hash":"sha384","id":"3041300d060960864801650304020205000430"},"sha512WithRSAEncryption":{"sign":"rsa","hash":"sha512","id":"3051300d060960864801650304020305000440"},"RSA-SHA512":{"sign":"ecdsa/rsa","hash":"sha512","id":"3051300d060960864801650304020305000440"},"RSA-SHA1":{"sign":"rsa","hash":"sha1","id":"3021300906052b0e03021a05000414"},"ecdsa-with-SHA1":{"sign":"ecdsa","hash":"sha1","id":""},"sha256":{"sign":"ecdsa","hash":"sha256","id":""},"sha224":{"sign":"ecdsa","hash":"sha224","id":""},"sha384":{"sign":"ecdsa","hash":"sha384","id":""},"sha512":{"sign":"ecdsa","hash":"sha512","id":""},"DSA-SHA":{"sign":"dsa","hash":"sha1","id":""},"DSA-SHA1":{"sign":"dsa","hash":"sha1","id":""},"DSA":{"sign":"dsa","hash":"sha1","id":""},"DSA-WITH-SHA224":{"sign":"dsa","hash":"sha224","id":""},"DSA-SHA224":{"sign":"dsa","hash":"sha224","id":""},"DSA-WITH-SHA256":{"sign":"dsa","hash":"sha256","id":""},"DSA-SHA256":{"sign":"dsa","hash":"sha256","id":""},"DSA-WITH-SHA384":{"sign":"dsa","hash":"sha384","id":""},"DSA-SHA384":{"sign":"dsa","hash":"sha384","id":""},"DSA-WITH-SHA512":{"sign":"dsa","hash":"sha512","id":""},"DSA-SHA512":{"sign":"dsa","hash":"sha512","id":""},"DSA-RIPEMD160":{"sign":"dsa","hash":"rmd160","id":""},"ripemd160WithRSA":{"sign":"rsa","hash":"rmd160","id":"3021300906052b2403020105000414"},"RSA-RIPEMD160":{"sign":"rsa","hash":"rmd160","id":"3021300906052b2403020105000414"},"md5WithRSAEncryption":{"sign":"rsa","hash":"md5","id":"3020300c06082a864886f70d020505000410"},"RSA-MD5":{"sign":"rsa","hash":"md5","id":"3020300c06082a864886f70d020505000410"}}')},87330:function(e){"use strict";e.exports=JSON.parse('{"1.3.132.0.10":"secp256k1","1.3.132.0.33":"p224","1.2.840.10045.3.1.1":"p192","1.2.840.10045.3.1.7":"p256","1.3.132.0.34":"p384","1.3.132.0.35":"p521"}')},87064:function(e){"use strict";e.exports=JSON.parse('{"modp1":{"gen":"02","prime":"ffffffffffffffffc90fdaa22168c234c4c6628b80dc1cd129024e088a67cc74020bbea63b139b22514a08798e3404ddef9519b3cd3a431b302b0a6df25f14374fe1356d6d51c245e485b576625e7ec6f44c42e9a63a3620ffffffffffffffff"},"modp2":{"gen":"02","prime":"ffffffffffffffffc90fdaa22168c234c4c6628b80dc1cd129024e088a67cc74020bbea63b139b22514a08798e3404ddef9519b3cd3a431b302b0a6df25f14374fe1356d6d51c245e485b576625e7ec6f44c42e9a637ed6b0bff5cb6f406b7edee386bfb5a899fa5ae9f24117c4b1fe649286651ece65381ffffffffffffffff"},"modp5":{"gen":"02","prime":"ffffffffffffffffc90fdaa22168c234c4c6628b80dc1cd129024e088a67cc74020bbea63b139b22514a08798e3404ddef9519b3cd3a431b302b0a6df25f14374fe1356d6d51c245e485b576625e7ec6f44c42e9a637ed6b0bff5cb6f406b7edee386bfb5a899fa5ae9f24117c4b1fe649286651ece45b3dc2007cb8a163bf0598da48361c55d39a69163fa8fd24cf5f83655d23dca3ad961c62f356208552bb9ed529077096966d670c354e4abc9804f1746c08ca237327ffffffffffffffff"},"modp14":{"gen":"02","prime":"ffffffffffffffffc90fdaa22168c234c4c6628b80dc1cd129024e088a67cc74020bbea63b139b22514a08798e3404ddef9519b3cd3a431b302b0a6df25f14374fe1356d6d51c245e485b576625e7ec6f44c42e9a637ed6b0bff5cb6f406b7edee386bfb5a899fa5ae9f24117c4b1fe649286651ece45b3dc2007cb8a163bf0598da48361c55d39a69163fa8fd24cf5f83655d23dca3ad961c62f356208552bb9ed529077096966d670c354e4abc9804f1746c08ca18217c32905e462e36ce3be39e772c180e86039b2783a2ec07a28fb5c55df06f4c52c9de2bcbf6955817183995497cea956ae515d2261898fa051015728e5a8aacaa68ffffffffffffffff"},"modp15":{"gen":"02","prime":"ffffffffffffffffc90fdaa22168c234c4c6628b80dc1cd129024e088a67cc74020bbea63b139b22514a08798e3404ddef9519b3cd3a431b302b0a6df25f14374fe1356d6d51c245e485b576625e7ec6f44c42e9a637ed6b0bff5cb6f406b7edee386bfb5a899fa5ae9f24117c4b1fe649286651ece45b3dc2007cb8a163bf0598da48361c55d39a69163fa8fd24cf5f83655d23dca3ad961c62f356208552bb9ed529077096966d670c354e4abc9804f1746c08ca18217c32905e462e36ce3be39e772c180e86039b2783a2ec07a28fb5c55df06f4c52c9de2bcbf6955817183995497cea956ae515d2261898fa051015728e5a8aaac42dad33170d04507a33a85521abdf1cba64ecfb850458dbef0a8aea71575d060c7db3970f85a6e1e4c7abf5ae8cdb0933d71e8c94e04a25619dcee3d2261ad2ee6bf12ffa06d98a0864d87602733ec86a64521f2b18177b200cbbe117577a615d6c770988c0bad946e208e24fa074e5ab3143db5bfce0fd108e4b82d120a93ad2caffffffffffffffff"},"modp16":{"gen":"02","prime":"ffffffffffffffffc90fdaa22168c234c4c6628b80dc1cd129024e088a67cc74020bbea63b139b22514a08798e3404ddef9519b3cd3a431b302b0a6df25f14374fe1356d6d51c245e485b576625e7ec6f44c42e9a637ed6b0bff5cb6f406b7edee386bfb5a899fa5ae9f24117c4b1fe649286651ece45b3dc2007cb8a163bf0598da48361c55d39a69163fa8fd24cf5f83655d23dca3ad961c62f356208552bb9ed529077096966d670c354e4abc9804f1746c08ca18217c32905e462e36ce3be39e772c180e86039b2783a2ec07a28fb5c55df06f4c52c9de2bcbf6955817183995497cea956ae515d2261898fa051015728e5a8aaac42dad33170d04507a33a85521abdf1cba64ecfb850458dbef0a8aea71575d060c7db3970f85a6e1e4c7abf5ae8cdb0933d71e8c94e04a25619dcee3d2261ad2ee6bf12ffa06d98a0864d87602733ec86a64521f2b18177b200cbbe117577a615d6c770988c0bad946e208e24fa074e5ab3143db5bfce0fd108e4b82d120a92108011a723c12a787e6d788719a10bdba5b2699c327186af4e23c1a946834b6150bda2583e9ca2ad44ce8dbbbc2db04de8ef92e8efc141fbecaa6287c59474e6bc05d99b2964fa090c3a2233ba186515be7ed1f612970cee2d7afb81bdd762170481cd0069127d5b05aa993b4ea988d8fddc186ffb7dc90a6c08f4df435c934063199ffffffffffffffff"},"modp17":{"gen":"02","prime":"ffffffffffffffffc90fdaa22168c234c4c6628b80dc1cd129024e088a67cc74020bbea63b139b22514a08798e3404ddef9519b3cd3a431b302b0a6df25f14374fe1356d6d51c245e485b576625e7ec6f44c42e9a637ed6b0bff5cb6f406b7edee386bfb5a899fa5ae9f24117c4b1fe649286651ece45b3dc2007cb8a163bf0598da48361c55d39a69163fa8fd24cf5f83655d23dca3ad961c62f356208552bb9ed529077096966d670c354e4abc9804f1746c08ca18217c32905e462e36ce3be39e772c180e86039b2783a2ec07a28fb5c55df06f4c52c9de2bcbf6955817183995497cea956ae515d2261898fa051015728e5a8aaac42dad33170d04507a33a85521abdf1cba64ecfb850458dbef0a8aea71575d060c7db3970f85a6e1e4c7abf5ae8cdb0933d71e8c94e04a25619dcee3d2261ad2ee6bf12ffa06d98a0864d87602733ec86a64521f2b18177b200cbbe117577a615d6c770988c0bad946e208e24fa074e5ab3143db5bfce0fd108e4b82d120a92108011a723c12a787e6d788719a10bdba5b2699c327186af4e23c1a946834b6150bda2583e9ca2ad44ce8dbbbc2db04de8ef92e8efc141fbecaa6287c59474e6bc05d99b2964fa090c3a2233ba186515be7ed1f612970cee2d7afb81bdd762170481cd0069127d5b05aa993b4ea988d8fddc186ffb7dc90a6c08f4df435c93402849236c3fab4d27c7026c1d4dcb2602646dec9751e763dba37bdf8ff9406ad9e530ee5db382f413001aeb06a53ed9027d831179727b0865a8918da3edbebcf9b14ed44ce6cbaced4bb1bdb7f1447e6cc254b332051512bd7af426fb8f401378cd2bf5983ca01c64b92ecf032ea15d1721d03f482d7ce6e74fef6d55e702f46980c82b5a84031900b1c9e59e7c97fbec7e8f323a97a7e36cc88be0f1d45b7ff585ac54bd407b22b4154aacc8f6d7ebf48e1d814cc5ed20f8037e0a79715eef29be32806a1d58bb7c5da76f550aa3d8a1fbff0eb19ccb1a313d55cda56c9ec2ef29632387fe8d76e3c0468043e8f663f4860ee12bf2d5b0b7474d6e694f91e6dcc4024ffffffffffffffff"},"modp18":{"gen":"02","prime":"ffffffffffffffffc90fdaa22168c234c4c6628b80dc1cd129024e088a67cc74020bbea63b139b22514a08798e3404ddef9519b3cd3a431b302b0a6df25f14374fe1356d6d51c245e485b576625e7ec6f44c42e9a637ed6b0bff5cb6f406b7edee386bfb5a899fa5ae9f24117c4b1fe649286651ece45b3dc2007cb8a163bf0598da48361c55d39a69163fa8fd24cf5f83655d23dca3ad961c62f356208552bb9ed529077096966d670c354e4abc9804f1746c08ca18217c32905e462e36ce3be39e772c180e86039b2783a2ec07a28fb5c55df06f4c52c9de2bcbf6955817183995497cea956ae515d2261898fa051015728e5a8aaac42dad33170d04507a33a85521abdf1cba64ecfb850458dbef0a8aea71575d060c7db3970f85a6e1e4c7abf5ae8cdb0933d71e8c94e04a25619dcee3d2261ad2ee6bf12ffa06d98a0864d87602733ec86a64521f2b18177b200cbbe117577a615d6c770988c0bad946e208e24fa074e5ab3143db5bfce0fd108e4b82d120a92108011a723c12a787e6d788719a10bdba5b2699c327186af4e23c1a946834b6150bda2583e9ca2ad44ce8dbbbc2db04de8ef92e8efc141fbecaa6287c59474e6bc05d99b2964fa090c3a2233ba186515be7ed1f612970cee2d7afb81bdd762170481cd0069127d5b05aa993b4ea988d8fddc186ffb7dc90a6c08f4df435c93402849236c3fab4d27c7026c1d4dcb2602646dec9751e763dba37bdf8ff9406ad9e530ee5db382f413001aeb06a53ed9027d831179727b0865a8918da3edbebcf9b14ed44ce6cbaced4bb1bdb7f1447e6cc254b332051512bd7af426fb8f401378cd2bf5983ca01c64b92ecf032ea15d1721d03f482d7ce6e74fef6d55e702f46980c82b5a84031900b1c9e59e7c97fbec7e8f323a97a7e36cc88be0f1d45b7ff585ac54bd407b22b4154aacc8f6d7ebf48e1d814cc5ed20f8037e0a79715eef29be32806a1d58bb7c5da76f550aa3d8a1fbff0eb19ccb1a313d55cda56c9ec2ef29632387fe8d76e3c0468043e8f663f4860ee12bf2d5b0b7474d6e694f91e6dbe115974a3926f12fee5e438777cb6a932df8cd8bec4d073b931ba3bc832b68d9dd300741fa7bf8afc47ed2576f6936ba424663aab639c5ae4f5683423b4742bf1c978238f16cbe39d652de3fdb8befc848ad922222e04a4037c0713eb57a81a23f0c73473fc646cea306b4bcbc8862f8385ddfa9d4b7fa2c087e879683303ed5bdd3a062b3cf5b3a278a66d2a13f83f44f82ddf310ee074ab6a364597e899a0255dc164f31cc50846851df9ab48195ded7ea1b1d510bd7ee74d73faf36bc31ecfa268359046f4eb879f924009438b481c6cd7889a002ed5ee382bc9190da6fc026e479558e4475677e9aa9e3050e2765694dfc81f56e880b96e7160c980dd98edd3dfffffffffffffffff"}}')},80312:function(e){"use strict";e.exports={i8:"6.5.4"}},37705:function(e){"use strict";e.exports=JSON.parse('{"$id":"https://raw.githubusercontent.com/ajv-validator/ajv/master/lib/refs/data.json#","description":"Meta-schema for $data reference (JSON AnySchema extension proposal)","type":"object","required":["$data"],"properties":{"$data":{"type":"string","anyOf":[{"format":"relative-json-pointer"},{"format":"json-pointer"}]}},"additionalProperties":false}')},16649:function(e){"use strict";e.exports=JSON.parse('{"$schema":"http://json-schema.org/draft-07/schema#","$id":"http://json-schema.org/draft-07/schema#","title":"Core schema meta-schema","definitions":{"schemaArray":{"type":"array","minItems":1,"items":{"$ref":"#"}},"nonNegativeInteger":{"type":"integer","minimum":0},"nonNegativeIntegerDefault0":{"allOf":[{"$ref":"#/definitions/nonNegativeInteger"},{"default":0}]},"simpleTypes":{"enum":["array","boolean","integer","null","number","object","string"]},"stringArray":{"type":"array","items":{"type":"string"},"uniqueItems":true,"default":[]}},"type":["object","boolean"],"properties":{"$id":{"type":"string","format":"uri-reference"},"$schema":{"type":"string","format":"uri"},"$ref":{"type":"string","format":"uri-reference"},"$comment":{"type":"string"},"title":{"type":"string"},"description":{"type":"string"},"default":true,"readOnly":{"type":"boolean","default":false},"examples":{"type":"array","items":true},"multipleOf":{"type":"number","exclusiveMinimum":0},"maximum":{"type":"number"},"exclusiveMaximum":{"type":"number"},"minimum":{"type":"number"},"exclusiveMinimum":{"type":"number"},"maxLength":{"$ref":"#/definitions/nonNegativeInteger"},"minLength":{"$ref":"#/definitions/nonNegativeIntegerDefault0"},"pattern":{"type":"string","format":"regex"},"additionalItems":{"$ref":"#"},"items":{"anyOf":[{"$ref":"#"},{"$ref":"#/definitions/schemaArray"}],"default":true},"maxItems":{"$ref":"#/definitions/nonNegativeInteger"},"minItems":{"$ref":"#/definitions/nonNegativeIntegerDefault0"},"uniqueItems":{"type":"boolean","default":false},"contains":{"$ref":"#"},"maxProperties":{"$ref":"#/definitions/nonNegativeInteger"},"minProperties":{"$ref":"#/definitions/nonNegativeIntegerDefault0"},"required":{"$ref":"#/definitions/stringArray"},"additionalProperties":{"$ref":"#"},"definitions":{"type":"object","additionalProperties":{"$ref":"#"},"default":{}},"properties":{"type":"object","additionalProperties":{"$ref":"#"},"default":{}},"patternProperties":{"type":"object","additionalProperties":{"$ref":"#"},"propertyNames":{"format":"regex"},"default":{}},"dependencies":{"type":"object","additionalProperties":{"anyOf":[{"$ref":"#"},{"$ref":"#/definitions/stringArray"}]}},"propertyNames":{"$ref":"#"},"const":true,"enum":{"type":"array","items":true,"minItems":1,"uniqueItems":true},"type":{"anyOf":[{"$ref":"#/definitions/simpleTypes"},{"type":"array","items":{"$ref":"#/definitions/simpleTypes"},"minItems":1,"uniqueItems":true}]},"format":{"type":"string"},"contentMediaType":{"type":"string"},"contentEncoding":{"type":"string"},"if":{"$ref":"#"},"then":{"$ref":"#"},"else":{"$ref":"#"},"allOf":{"$ref":"#/definitions/schemaArray"},"anyOf":{"$ref":"#/definitions/schemaArray"},"oneOf":{"$ref":"#/definitions/schemaArray"},"not":{"$ref":"#"}},"default":true}')},41095:function(e){"use strict";e.exports=JSON.parse('{"2.16.840.1.101.3.4.1.1":"aes-128-ecb","2.16.840.1.101.3.4.1.2":"aes-128-cbc","2.16.840.1.101.3.4.1.3":"aes-128-ofb","2.16.840.1.101.3.4.1.4":"aes-128-cfb","2.16.840.1.101.3.4.1.21":"aes-192-ecb","2.16.840.1.101.3.4.1.22":"aes-192-cbc","2.16.840.1.101.3.4.1.23":"aes-192-ofb","2.16.840.1.101.3.4.1.24":"aes-192-cfb","2.16.840.1.101.3.4.1.41":"aes-256-ecb","2.16.840.1.101.3.4.1.42":"aes-256-cbc","2.16.840.1.101.3.4.1.43":"aes-256-ofb","2.16.840.1.101.3.4.1.44":"aes-256-cfb"}')}},function(e){e.O(0,[532,9774,3387,4923,5124,1955,9072],(function(){return t=25824,e(e.s=t);var t}));e.O()}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/app-20033eb70b2caf24e830.js.LICENSE.txt b/docs/hds-1817-stepbystep-docs/app-20033eb70b2caf24e830.js.LICENSE.txt
new file mode 100644
index 00000000000..ba26da5b838
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/app-20033eb70b2caf24e830.js.LICENSE.txt
@@ -0,0 +1,37 @@
+/*!
+ * The buffer module from node.js, for the browser.
+ *
+ * @author   Feross Aboukhadijeh <http://feross.org>
+ * @license  MIT
+ */
+
+/*!
+ * is-plain-object <https://github.com/jonschlinkert/is-plain-object>
+ *
+ * Copyright (c) 2014-2017, Jon Schlinkert.
+ * Released under the MIT License.
+ */
+
+/*!
+ * regjsgen 0.5.2
+ * Copyright 2014-2020 Benjamin Tan <https://ofcr.se/>
+ * Available under the MIT license <https://github.com/bnjmnt4n/regjsgen/blob/master/LICENSE-MIT.txt>
+ */
+
+/*! https://mths.be/regenerate v1.4.2 by @mathias | MIT license */
+
+/*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh <https://feross.org/opensource> */
+
+/*! safe-buffer. MIT License. Feross Aboukhadijeh <https://feross.org/opensource> */
+
+/**
+ * @license React
+ * react-server-dom-webpack.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license URI.js v4.4.1 (c) 2011 Gary Court. License: http://github.com/garycourt/uri-js */
diff --git a/docs/hds-1817-stepbystep-docs/b123bb55-73388f463f51189e5870.js b/docs/hds-1817-stepbystep-docs/b123bb55-73388f463f51189e5870.js
new file mode 100644
index 00000000000..ae8849d734e
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/b123bb55-73388f463f51189e5870.js
@@ -0,0 +1,2 @@
+/*! For license information please see b123bb55-73388f463f51189e5870.js.LICENSE.txt */
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[6136],{66227:function(o,e){e.Z="html{line-height:1.15}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}@keyframes base-min_fadeIn__1eL7b{0%{opacity:0}to{opacity:1}}.base-min_visually-hidden__2X9es{border:0;clip:\"rect(0 0 0 0)\";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.base-min_button-reset__1DpKC{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.base-min_text-body__3BoE9{color:var(--color-black-90);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.base-min_text-body__3BoE9,.base-min_text-medium__3mQy-{font-family:var(--font-default)}.base-min_text-medium__3mQy-{font-weight:500}.base-min_text-bold__3vbqu{font-family:var(--font-default);font-weight:700}.base-min_text-xl__otWNO{font-size:var(--fontsize-heading-m)}.base-min_text-lg__23w6P{font-size:var(--fontsize-heading-s)}.base-min_text-md__4FgZi{font-size:var(--fontsize-heading-xs)}.base-min_subtitle__1npRt{font-size:var(--fontsize-body-m)}.base-min_text-sm__1_dmI{font-size:var(--fontsize-body-s);line-height:var(--lineheight-xl)}.base-min_heading-xxl__DU1O5{font-size:var(--fontsize-heading-xxl);letter-spacing:-1.2px}.base-min_heading-xl__2X67k,.base-min_heading-xxl__DU1O5{font-weight:400;line-height:var(--lineheight-s)}.base-min_heading-xl__2X67k{font-size:var(--fontsize-heading-xl);letter-spacing:-1px}.base-min_heading-xl-mobile__wsjuU{font-size:var(--fontsize-heading-xl-mobile);letter-spacing:-.8px}.base-min_heading-l__2jPN5,.base-min_heading-xl-mobile__wsjuU{font-weight:400;line-height:var(--lineheight-s)}.base-min_heading-l__2jPN5{font-size:var(--fontsize-heading-l);letter-spacing:-.4px}.base-min_heading-m__rYAVF{font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-.2px;line-height:32px}.base-min_heading-s__3TqeA{font-size:var(--fontsize-heading-s);font-weight:500;letter-spacing:.2px;line-height:1.4}.base-min_heading-xs__tmFku{font-size:var(--fontsize-heading-xs);line-height:1.33}.base-min_heading-xs__tmFku,.base-min_heading-xxs__3Wb8h{font-weight:700;letter-spacing:.4px}.base-min_heading-xxs__3Wb8h{font-size:var(--fontsize-heading-xxs);line-height:var(--lineheight-l)}.base-min_helper-text__119xK{color:var(--color-black-60);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs)}@media (min-width:769px){.Columns-module_columns__JsDXe{display:grid;grid-template-columns:50% 50%}.Columns-module_columns__JsDXe>div{margin-left:1em;width:calc(100% - 3em)}}@media (max-width:768px){.Columns-module_columns__JsDXe>div{display:block;margin:0;width:100%}}.DateInput-module_wrapper__HHa75{position:relative}.ErrorSummary-module_errorSummaryBody__3WOh8{font-size:var(--fontsize-body-s);line-height:24px}.ErrorSummary-module_errorSummaryBody__3WOh8 ul{margin:0;padding:0 0 0 var(--spacing-s)}.ErrorSummary-module_errorSummaryBody__3WOh8 li{margin-bottom:.125rem}.ErrorSummary-module_errorSummaryBody__3WOh8 a{color:var(--color-bus)}.ErrorSummary-module_label__1fMZ9:focus{outline:3px solid var(--color-coat-of-arms)}.checkbox_hds-checkbox__9HMCz{--size:24px;--icon-scale:1;--border-width:2px;--outline-width:3px;--label-font-size:var(--fontsize-body-m);--label-padding:var(--spacing-2-xs);--background-unselected:transparent;--background-selected:var(--color-bus);--background-hover:var(--color-bus-dark);--background-disabled:var(--color-black-10);--border-color-selected:var(--color-bus);--border-color-selected-hover:var(--color-bus-dark);--border-color-selected-focus:var(--color-bus);--border-color-unselected:var(--color-black-50);--border-color-unselected-hover:var(--color-black-90);--border-color-unselected-focus:var(--color-black-90);--border-color-disabled:var(--color-black-10);--icon-color-unselected:transparent;--icon-color-selected:var(--color-white);--icon-color-disabled:var(--color-white);--label-color:var(--color-black-90);--label-color-disabled:var(--color-black-40);--icon-size:var(--spacing-m);display:flex;flex-wrap:wrap;min-height:var(--size);position:relative}.checkbox_hds-checkbox__9HMCz,.checkbox_hds-checkbox__9HMCz *,.checkbox_hds-checkbox__9HMCz :after,.checkbox_hds-checkbox__9HMCz :before{box-sizing:border-box}.checkbox_hds-checkbox__9HMCz:not(:first-of-type){margin-top:var(--spacing-2-xs)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:before,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__label__3HoD3:before{content:\"\";left:0;position:absolute;top:0}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:before{background-color:var(--icon-color-unselected);height:var(--size);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M21 7L10 18l-5.5-5.5L6 11l4 4 9.5-9.5z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M21 7L10 18l-5.5-5.5L6 11l4 4 9.5-9.5z'/%3E%3C/g%3E%3C/svg%3E\");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:calc(var(--size)*var(--icon-scale));mask-size:calc(var(--size)*var(--icon-scale));transform:scale(.6);width:var(--size);z-index:1}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__label__3HoD3:before{height:var(--size);width:var(--size)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__label__3HoD3:after{background-color:var(--background-unselected);border:var(--border-width) solid var(--border-color-unselected);height:var(--size);width:var(--size)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:focus+.checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:focus:before,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:hover+.checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:hover:before{transition:85ms ease-out;transition-property:background-color,border-color,transform}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:focus+.checkbox_hds-checkbox__label__3HoD3:before{box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);transform:translateZ(0);transition:85ms ease-out;transition-property:box-shadow,transform}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;font-family:inherit;font-size:100%;height:var(--size);left:0;line-height:1.15;margin:0;outline:none;position:absolute;top:0;width:var(--size)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__label__3HoD3{color:var(--label-color);cursor:pointer;font-size:var(--label-font-size);line-height:var(--lineheight-m);padding-left:calc(var(--size) + var(--label-padding));padding-top:calc(var(--size)/2 - var(--label-font-size)*var(--lineheight-m)/2);position:relative}.checkbox_hds-checkbox__error-text__2aFst{color:var(--color-error);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.checkbox_hds-checkbox__error-text__2aFst:before{background:var(--color-error);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:checked:before{background-color:var(--icon-color-selected);transform:scale(1)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:checked):indeterminate:before{background-color:var(--icon-color-selected);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M6 11h12v2H6z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M6 11h12v2H6z'/%3E%3C/g%3E%3C/svg%3E\");transform:scale(1)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:checked+.checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:indeterminate+.checkbox_hds-checkbox__label__3HoD3:after{background-color:var(--background-selected);border-color:var(--border-color-selected)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:disabled+.checkbox_hds-checkbox__label__3HoD3:after{background-color:var(--background-disabled);border-color:var(--border-color-disabled)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):focus+.checkbox_hds-checkbox__label__3HoD3:after{border-color:var(--border-color-unselected-focus)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):hover+.checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):hover:focus+.checkbox_hds-checkbox__label__3HoD3:after{border-color:var(--border-color-unselected-hover)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):checked:focus+.checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):indeterminate:focus+.checkbox_hds-checkbox__label__3HoD3:after{border-color:var(--border-color-selected-focus)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):checked:hover+.checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):checked:hover:focus+.checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):indeterminate:hover+.checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):indeterminate:hover:focus+.checkbox_hds-checkbox__label__3HoD3:after{background-color:var(--background-hover);border-color:var(--border-color-selected-hover)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:disabled+.checkbox_hds-checkbox__label__3HoD3{color:var(--label-color-disabled)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:checked:disabled:before{background-color:var(--icon-color-disabled)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:disabled,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:disabled+.checkbox_hds-checkbox__label__3HoD3{cursor:not-allowed}.helpers_visually-hidden__3lBcX{border:0;clip:\"rect(0 0 0 0)\";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.helpers_button-reset__2d38b{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.helpers_text-body__FA9G-{color:var(--color-black-90);font-family:var(--font-default);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.helpers_text-medium__3Hiiz{font-family:var(--font-default);font-weight:500}.helpers_text-bold__2QyP8{font-family:var(--font-default);font-weight:700}.helpers_text-xl__33T1r{font-size:var(--fontsize-heading-m)}.helpers_text-lg__1_8nq{font-size:var(--fontsize-heading-s)}.helpers_text-md__RyeCd{font-size:var(--fontsize-heading-xs)}.helpers_subtitle__RE8f_{font-size:var(--fontsize-body-m)}.helpers_text-sm__AxqmS{font-size:var(--fontsize-body-s);line-height:var(--lineheight-xl)}.helpers_heading-xxl__1GAqs{font-size:var(--fontsize-heading-xxl);font-weight:400;letter-spacing:-1.2px;line-height:var(--lineheight-s)}.helpers_heading-xl__u_X50{font-size:var(--fontsize-heading-xl);font-weight:400;letter-spacing:-1px;line-height:var(--lineheight-s)}.helpers_heading-xl-mobile__gKona{font-size:var(--fontsize-heading-xl-mobile);font-weight:400;letter-spacing:-.8px;line-height:var(--lineheight-s)}.helpers_heading-l__3EMpz{font-size:var(--fontsize-heading-l);font-weight:400;letter-spacing:-.4px;line-height:var(--lineheight-s)}.helpers_heading-m__1Lsy-{font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-.2px;line-height:32px}.helpers_heading-s__1EK5w{font-size:var(--fontsize-heading-s);font-weight:500;letter-spacing:.2px;line-height:1.4}.helpers_heading-xs__iZYJi{font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:.4px;line-height:1.33}.helpers_heading-xxs__jqtFk{font-size:var(--fontsize-heading-xxs);font-weight:700;letter-spacing:.4px;line-height:var(--lineheight-l)}.helpers_helper-text__YRZTD{color:var(--color-black-60);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs)}.Checkbox-module_tooltipButton__2shV1{display:inline-block;margin-left:var(--spacing-2-xs)}.breadcrumb_hds-breadcrumb__3JFPo{--horizontal-margin-small:var(--spacing-layout-2-xs);--horizontal-margin-medium:var(--spacing-layout-xs);--horizontal-margin-large:var(--spacing-layout-xs);--horizontal-margin-x-large:var(--spacing-layout-s);--horizontal-margin:var(--horizontal-margin-small);display:flex;margin:0 var(--horizontal-margin);padding:var(--spacing-s) 0}.breadcrumb_hds-breadcrumb__list__3qyFn{align-items:center;flex-direction:row;word-wrap:break-word}.breadcrumb_hds-breadcrumb__list--mobile__3k5FD{display:flex}.breadcrumb_hds-breadcrumb__list--desktop__2mWwT{display:none}.breadcrumb_hds-breadcrumb__list-item__2IJfr{align-items:center;display:flex;line-height:var(--lineheight-l)}.breadcrumb_hds-breadcrumb__list-item--active__cHQPc{font-weight:700;padding:3px}.breadcrumb_hds-breadcrumb__link__mhqc3.breadcrumb_hds-breadcrumb__link__mhqc3{--link-visited-color:none;--link-color:var(--color-black-90)}.breadcrumb_hds-breadcrumb__link__mhqc3:focus,.breadcrumb_hds-breadcrumb__link__mhqc3:hover{-webkit-text-decoration-color:var(--color-black-90);text-decoration-color:var(--color-black-90)}.breadcrumb_hds-breadcrumb__list--mobile__3k5FD .breadcrumb_hds-breadcrumb__link__mhqc3{font-size:var(--fontsize-body-l)}.breadcrumb_hds-breadcrumb__back-arrow__S8SMr.breadcrumb_hds-breadcrumb__back-arrow__S8SMr{display:inline-flex;margin-left:-5px;margin-right:-3px;--icon-size:var(--spacing-m)}.breadcrumb_hds-breadcrumb__separator__2oJ4Y.breadcrumb_hds-breadcrumb__separator__2oJ4Y{display:inline-flex;padding-left:var(--spacing-3-xs);--icon-size:var(--spacing-s)}@media (min-width:768px){.breadcrumb_hds-breadcrumb__3JFPo{--horizontal-margin:var(--horizontal-margin-medium)}.breadcrumb_hds-breadcrumb__list--mobile__3k5FD{display:none}.breadcrumb_hds-breadcrumb__list--desktop__2mWwT{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0}}@media (min-width:992px){.breadcrumb_hds-breadcrumb__3JFPo{--horizontal-margin:var(--horizontal-margin-large)}}@media (min-width:1248px){.breadcrumb_hds-breadcrumb__3JFPo{--horizontal-margin:var(--horizontal-margin-x-large)}}.Breadcrumb-module_separator__3Xxu5.Breadcrumb-module_separator__3Xxu5{padding-left:2px;padding-right:2px}.FileInput-module_fileInput__hClRc{border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.FileInput-module_dragAndDropHelperText__31Ljw{color:var(--label-color-default,var(--color-black-90));display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.FileInput-module_dragAndDrop__3d3xe{align-items:center;border:2px dotted var(--color-coat-of-arms);box-sizing:border-box;color:var(--color-coat-of-arms);cursor:pointer;display:flex;justify-content:center;margin-top:var(--spacing-xs);max-width:500px;padding:var(--spacing-s);width:100%}.FileInput-module_dragAndDropActive__3hREg{background-color:var(--color-silver-light);border-color:var(--color-coat-of-arms-dark);color:var(--color-coat-of-arms-dark)}.FileInput-module_dragAndDropDisabled__Ek-uE{border-color:var(--color-black-50);color:var(--color-black-50);cursor:not-allowed}.FileInput-module_dragAndDropLabel__1pDQN{align-items:center;display:flex}.FileInput-module_dragAndDropLabelText__3AJ4P{margin-left:var(--spacing-s)}.FileInput-module_dragAndDropHelperText__31Ljw{margin:var(--spacing-s) 0 var(--spacing-2-xs)}.FileInput-module_fileInputContainer__9N5TG{flex:1}.FileInput-module_fileInputWrapper__1E8Jf{display:inline-block;margin:var(--spacing-2-xs) 0;position:relative}.FileInput-module_fileInputWrapper__1E8Jf:focus-within>button:after{--size:calc(100% + var(--outline-width)*2 + var(--border-width)*2 + var(--outline-gutter)*2);border-color:var(--color-focus-outline)}.FileInput-module_fileList__drFD1{list-style:none;margin:var(--spacing-s) 0 0;padding:0}.FileInput-module_fileListItem__2fomf{align-items:flex-start;background-color:var(--color-info-light);border-bottom:2px dotted var(--color-coat-of-arms);box-sizing:border-box;display:flex;max-width:100%;padding:var(--spacing-s) var(--spacing-2-xs);width:500px}.FileInput-module_fileListItem__2fomf+.FileInput-module_fileListItem__2fomf{margin-top:var(--spacing-s)}.FileInput-module_fileListItemTitle__15-8y{align-items:flex-start;display:flex;flex:1;flex-wrap:nowrap;font-size:var(--fontsize-body-s);margin:2px var(--spacing-xs) 0 var(--spacing-2-xs)}.FileInput-module_fileListItemName__1BqM7{hyphens:auto;word-break:break-word}.FileInput-module_fileListItemSize__1ZMYb{margin-left:var(--spacing-2-xs);text-align:right;white-space:nowrap}.FileInput-module_fileListItemButton__3HfCX{--file-list-item-button-y-offset:calc(var(--spacing-2-xs)*-1 - 2px);display:flex;margin:var(--file-list-item-button-y-offset) auto var(--file-list-item-button-y-offset) 0}.FileInput-module_fileListItemButtonLabel__2FIPm{margin-left:var(--spacing-3-xs)}.card_hds-card__227qQ{--background-color:var(--color-white);--border-color:var(--color-black-90);--color:var(--color-black-90);--border-width:2px;--padding-horizontal:var(--spacing-l);--padding-vertical:var(--spacing-m);background-color:var(--background-color);color:var(--color);padding:var(--padding-vertical) var(--padding-horizontal)}.card_hds-card--border__c2dBc{border:var(--border-width) solid var(--border-color)}.card_hds-card--box-shadow__1LWxe{box-shadow:var(--box-shadow-m)}.card_hds-card__body__M27Up{display:grid;grid-gap:var(--spacing-s);gap:var(--spacing-s);margin-bottom:var(--spacing-l)}.card_hds-card__body__M27Up:last-child{margin-bottom:0}.card_hds-card__text__n7A0r{font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.Card-module_card__1WbKx{--background-color:var(--color-white);--border-color:var(--color-black-90);--color:var(--color-black-90);--border-width:2px;--padding-horizontal:var(--spacing-l);--padding-vertical:var(--spacing-m);background-color:var(--background-color);color:var(--color);padding:var(--padding-vertical) var(--padding-horizontal)}.container_hds-container__ZG2BQ{box-sizing:border-box;padding-left:var(--spacing-layout-2-xs);padding-right:var(--spacing-layout-2-xs)}@media(min-width:768px){.container_hds-container__ZG2BQ{padding-left:var(--spacing-layout-xs);padding-right:var(--spacing-layout-xs)}}@media (min-width:1248px){.container_hds-container__ZG2BQ{max-width:var(--container-width-xl);padding-left:0;padding-right:0}}.notification_hds-icon__29HQM{--icon-size:100%;background-color:currentcolor;display:inline-block;height:var(--icon-size);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:auto;mask-size:auto;width:var(--icon-size)}.notification_hds-icon__29HQM.notification_hds-icon--size-xs__19VKz{--icon-size:var(--spacing-layout-2-xs)}.notification_hds-icon__29HQM.notification_hds-icon--size-s__2Ffyw{--icon-size:var(--spacing-layout-xs)}.notification_hds-icon__29HQM.notification_hds-icon--size-m__28mpE{--icon-size:var(--spacing-layout-s)}.notification_hds-icon__29HQM.notification_hds-icon--size-l__T6YEf{--icon-size:var(--spacing-layout-m)}.notification_hds-icon__29HQM.notification_hds-icon--size-xl__18_OX{--icon-size:var(--spacing-layout-l)}.notification_hds-icon--alert-circle-fill__3er4k{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z' fill='currentColor'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z' fill='currentColor'/%3E%3C/svg%3E\")}.notification_hds-icon--check-circle-fill__2u1G4{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z' fill='currentColor'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z' fill='currentColor'/%3E%3C/svg%3E\")}.notification_hds-icon--error-fill__jPWn1{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.456c.349-.586 1.223-.607 1.61-.063l.04.063 9.052 15.21c.343.577-.072 1.285-.753 1.332l-.072.002H2.948c-.7 0-1.15-.689-.858-1.273l.033-.06 9.052-15.21zM13 16v2h-2v-2h2zm0-7.5v6h-2v-6h2z' fill='currentColor'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.456c.349-.586 1.223-.607 1.61-.063l.04.063 9.052 15.21c.343.577-.072 1.285-.753 1.332l-.072.002H2.948c-.7 0-1.15-.689-.858-1.273l.033-.06 9.052-15.21zM13 16v2h-2v-2h2zm0-7.5v6h-2v-6h2z' fill='currentColor'/%3E%3C/svg%3E\")}.notification_hds-icon--info-circle-fill__1gXDU{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3a9 9 0 100 18 9 9 0 000-18zm1 7v6.5h2V18H9v-1.5h2v-5H9V10h4zm-1.188-4a1.312 1.312 0 110 2.625 1.312 1.312 0 010-2.625z' fill='currentColor'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3a9 9 0 100 18 9 9 0 000-18zm1 7v6.5h2V18H9v-1.5h2v-5H9V10h4zm-1.188-4a1.312 1.312 0 110 2.625 1.312 1.312 0 010-2.625z' fill='currentColor'/%3E%3C/svg%3E\")}.notification_hds-notification__2DQPN{--notification-background-color:var(--color-info-light);--notification-border-color:var(--color-info);--notification-border-width:var(--spacing-2-xs);--notification-icon-color:var(--color-info);--notification-color:var(--color-black-90);--notification-max-width-inline:none;--notification-max-width-toast:21rem;--notification-z-index-inline:auto;--notification-z-index-toast:99;--notification-offset:var(--spacing-layout-s);--notification-padding:var(--spacing-s);background-color:var(--notification-background-color);border:solid var(--notification-border-color);border-left-width:var(--notification-border-width);border-bottom-width:0;border-right-width:0;border-top-width:0;box-sizing:border-box;color:var(--notification-color);max-width:var(--notification-max-width-inline);padding:var(--notification-padding);position:relative;width:100%;z-index:var(--notification-z-index-inline)}.notification_hds-notification__content__5ylSS{display:grid;grid-gap:var(--spacing-s);gap:var(--spacing-s)}.notification_hds-notification__label__2t1lR{align-items:flex-start;display:flex;font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:.4px;line-height:24px;margin-right:var(--spacing-l)}.notification_hds-notification__label__2t1lR>.notification_hds-icon__29HQM{color:var(--notification-icon-color);flex:none;margin-right:var(--spacing-2-xs)}.notification_hds-notification__body__3cobH{font-size:var(--fontsize-body-s);line-height:24px}.notification_hds-notification--small__1wVl6{--notification-padding:var(--spacing-2-xs)}.notification_hds-notification--small__1wVl6 .notification_hds-notification__content__5ylSS{display:flex;grid-gap:0;gap:0}.notification_hds-notification--small__1wVl6 .notification_hds-notification__label__2t1lR{margin-right:0}.notification_hds-notification--small__1wVl6 .notification_hds-notification__body__3cobH{margin-right:var(--spacing-l)}.notification_hds-notification--large__260Qm{--notification-padding:var(--spacing-l)}.notification_hds-notification--large__260Qm .notification_hds-notification__label__2t1lR{margin-right:0}.notification_hds-notification__2DQPN .notification_hds-icon__29HQM{--icon-size:var(--spacing-layout-xs)}.notification_hds-notification__close-button__1yGIj{--notification-close-button-offset:var(--spacing-s);background:none;border:none;cursor:pointer;display:flex;outline:none;padding:0;position:absolute;right:var(--notification-close-button-offset);top:var(--notification-close-button-offset)}.notification_hds-notification--large__260Qm .notification_hds-notification__close-button__1yGIj,.notification_hds-notification--small__1wVl6 .notification_hds-notification__close-button__1yGIj{--notification-close-button-offset:var(--spacing-2-xs)}.notification_hds-notification__close-button__1yGIj:focus{box-shadow:0 0 0 3px var(--color-focus-outline)}.notification_hds-notification--bottom-center__5EgOP,.notification_hds-notification--bottom-left__eB4ZK,.notification_hds-notification--bottom-right__1SmfT,.notification_hds-notification--top-center__GDWo5,.notification_hds-notification--top-left__sIHO2,.notification_hds-notification--top-right__3Wa5K{border-left-width:0;border-bottom-width:0;border-right-width:0;border-top-width:var(--notification-border-width);max-width:var(--notification-max-width-toast);position:fixed;width:calc(100% - var(--spacing-l));z-index:var(--notification-z-index-toast)}.notification_hds-notification--top-left__sIHO2{left:var(--notification-offset);top:var(--notification-offset)}.notification_hds-notification--top-center__GDWo5{left:50%;top:var(--notification-offset);transform:translateX(-50%)}.notification_hds-notification--top-right__3Wa5K{right:var(--notification-offset);top:var(--notification-offset)}.notification_hds-notification--bottom-left__eB4ZK{bottom:var(--notification-offset);left:var(--notification-offset)}.notification_hds-notification--bottom-center__5EgOP{bottom:var(--notification-offset);left:50%;transform:translateX(-50%)}.notification_hds-notification--bottom-right__1SmfT{bottom:var(--notification-offset);right:var(--notification-offset)}@media only screen and (max-width:765.98px){.notification_hds-notification__2DQPN{--notification-offset:var(--spacing-s)}}.notification_hds-notification--success__1_3XZ{--notification-background-color:var(--color-success-light);--notification-border-color:var(--color-success);--notification-icon-color:var(--color-success)}.notification_hds-notification--alert__1MV7H{--notification-background-color:var(--color-alert-light);--notification-border-color:var(--color-alert-dark);--notification-icon-color:var(--color-alert-dark)}.notification_hds-notification--error__3T1Of{--notification-background-color:var(--color-error-light);--notification-border-color:var(--color-error);--notification-icon-color:var(--color-error)}.notification_hds-notification--box-shadow__2kbD_{box-shadow:var(--box-shadow-l)}.Notification-module_notification__2hN3H{overflow:hidden}.Notification-module_notification__2hN3H.Notification-module_noBorder__1odYk{border:0;padding-top:calc(var(--notification-padding) + var(--notification-border-width))}.Notification-module_notification__2hN3H.Notification-module_noBorder__1odYk .Notification-module_close__JWYav{top:calc(var(--notification-close-button-offset) + var(--notification-border-width))}.Notification-module_autoClose__v_pk-{background-color:var(--notification-border-color);height:var(--notification-border-width);left:0;position:absolute;top:0;width:100%}.Notification-module_icon__1ans7{background-color:transparent}.Dialog-module_dialogVisibleBodyWithHiddenScrollbars__3M__P{overflow:hidden!important}.Dialog-module_dialogBackdrop__2Pg2X{inset:0;position:fixed}.Dialog-module_dialog__2t3d4{background:#fff;box-sizing:border-box;display:flex;flex-direction:column;margin:auto var(--spacing-s);max-width:100%;position:relative;visibility:hidden;z-index:900}.Dialog-module_dialogContainer__10Y03{--accent-line-color:var(--color-bus);--overlay-color:rgba(0,0,0,0.3);align-items:center;display:flex;inset:0;justify-content:center;overflow:auto;-webkit-overflow-scrolling:unset;overscroll-behavior:none;position:fixed;touch-action:none;z-index:800}.Dialog-module_dialogContainer__10Y03 .Dialog-module_dialogBackdrop__2Pg2X{background:var(--overlay-color)}.Dialog-module_dialogContainer__10Y03 .Dialog-module_dialog__2t3d4{border-top:10px solid var(--accent-line-color);width:558px}.Dialog-module_dialogContainer__10Y03 .Dialog-module_dialog__2t3d4.Dialog-module_danger__yTstu{border-top-color:var(--color-error)}.Dialog-module_dialogVisible__6zvp4{visibility:visible!important}.Dialog-module_dialogScrollable__3W-hK{max-height:calc(100% - 4rem);overflow:hidden}@media only screen and (min-width:768px){.Dialog-module_dialog__2t3d4{margin:auto}}.Dialog-module_boxShadow__3qt5w{box-shadow:var(--box-shadow-l)}.hero_hds-hero__2NmPy{--background-color:var(--color-white);--color:var(--color-black-90);--image-position:bottom right;--koros-color:var(--color-white);--koros-height:85px;--diagonal-koros-position:45%;--horizontal-padding-small:var(--spacing-layout-2-xs);--horizontal-padding-medium:var(--spacing-layout-xs);--horizontal-padding-large:var(--spacing-layout-xs);--horizontal-padding-x-large:var(--spacing-layout-xs);--padding-horizontal:var(--horizontal-padding-small);--padding-vertical:var(--spacing-xl);background-color:var(--background-color);color:var(--color);display:flex;flex-direction:column;position:relative;z-index:1}.hero_hds-hero__title__3Ue67{font-size:var(--fontsize-heading-xl);font-weight:400;letter-spacing:-1px;line-height:1em;margin-top:0}.hero_hds-hero__text__3K95k{font-size:var(--fontsize-body-l)}.hero_hds-hero__container__1Di91{margin-left:auto;margin-right:auto;max-width:var(--container-width-xl)}.hero_hds-hero__content__1Gtc5{display:flex;padding:var(--padding-vertical) var(--padding-horizontal)}.hero_hds-hero__content--single-column__iqfBL,.hero_hds-hero__content--two-columns__3Q1x5{display:flex;flex-direction:column}.hero_hds-hero__content--two-columns__3Q1x5{align-items:center}.hero_hds-hero__content--two-columns__image-container__2CX-9{display:none}.hero_hds-hero__card__3TyQe{display:block;max-width:var(--container-width-xl)}.hero_hds-hero__koros-container--inward-koros__3hMd7,.hero_hds-hero__koros-container--overflow-bottom__1sOA8,.hero_hds-hero__koros-container__2Ab9n{height:var(--koros-height);top:0;right:0;bottom:0;left:0;overflow:hidden;position:absolute;z-index:1}.hero_hds-hero__koros-container--inward-koros__3hMd7{position:relative}.hero_hds-hero__koros-container--overflow-bottom__1sOA8{bottom:calc(var(--koros-height)*-1);display:flex;flex-direction:column;justify-content:flex-end;top:auto}.hero_hds-hero__koros-container__2Ab9n>div{bottom:0;height:100%;position:absolute;width:100%}.hero_hds-hero__card--centered-content__3HHG6{text-align:center;width:100%}.hero_hds-hero__image__ZfJbX{display:block;width:100%}.hero_hds-hero__koros-and-image-container__2-9vj{display:block;position:relative}.hero_hds-hero__image-below-koros__1LSUL{display:block}.hero_hds-hero__image-below-koros__1LSUL .hero_hds-hero__image__ZfJbX{height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:var(--image-position);object-position:var(--image-position)}.hero_hds-hero--with-background__container__1jpi7{position:relative}.hero_hds-hero--with-background__background__JEVuN{position:relative;width:100%}.hero_hds-hero--with-background__background__JEVuN .hero_hds-hero__image__ZfJbX{height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:var(--image-position);object-position:var(--image-position)}.hero_hds-hero--with-background__content-columns__1NT1u{display:flex;margin:0 auto;max-width:var(--container-width-xl)}.hero_hds-hero--with-background__empty-column__21yM0{display:none}.hero_hds-hero--background-image__2Wse1 .hero_hds-hero__content__1Gtc5{padding:0}.hero_hds-hero--background-image__2Wse1 .hero_hds-hero__card__3TyQe{background-color:var(--background-color);padding:var(--padding-vertical) var(--padding-horizontal)}.hero_hds-hero--background-image__koros__2nudG{bottom:0;height:var(--koros-height);overflow:hidden;position:absolute;width:100%;--koros-color:var(--top-koros-color)}.hero_hds-hero--diagonal-koros__1gvD8 .hero_hds-hero--with-background__container__1jpi7{display:flex;flex-direction:column;overflow:hidden;position:relative;z-index:1}.hero_hds-hero--diagonal-koros__1gvD8 .hero_hds-hero__content__1Gtc5{box-sizing:border-box;display:block;padding:0;width:100%;z-index:2}.hero_hds-hero--diagonal-koros__1gvD8 .hero_hds-hero__card__3TyQe{background-color:var(--background-color);padding:var(--padding-vertical) var(--padding-horizontal)}.hero_hds-hero--diagonal-koros__koros-and-background__1U31N{height:var(--koros-height);position:absolute;transform:rotate(180deg);width:100%}.hero_hds-hero--diagonal-koros__koros-aligner__80AA4{position:relative;z-index:1}.hero_hds-hero--diagonal-koros__koros-and-background__1U31N .hero_hds-hero__koros-container__2Ab9n{height:100%;overflow:hidden;position:absolute;top:0;width:100%}.hero_hds-hero--with-background__background__JEVuN,.hero_hds-hero__image-below-koros__1LSUL{height:300px}@media only screen and (min-width:768px){.hero_hds-hero__2NmPy{--padding-horizontal:var(--horizontal-padding-medium);--padding-vertical:var(--spacing-layout-m)}.hero_hds-hero--with-background__background__JEVuN,.hero_hds-hero__image-below-koros__1LSUL{height:400px}}@media only screen and (min-width:992px){.hero_hds-hero__2NmPy{--padding-horizontal:var(--horizontal-padding-large);--padding-vertical:var(--spacing-layout-xl)}.hero_hds-hero__text__3K95k{font-size:var(--fontsize-body-xl)}.hero_hds-hero--image-left__11ngD .hero_hds-hero__image-below-koros__1LSUL,.hero_hds-hero--image-right__3r8N5 .hero_hds-hero__image-below-koros__1LSUL{display:none}.hero_hds-hero__content--two-columns__3Q1x5{flex-direction:row}.hero_hds-hero__content--two-columns__3Q1x5>*{width:50%}.hero_hds-hero__content--two-columns__3Q1x5>:first-child{margin-right:var(--spacing-xl)}.hero_hds-hero__content--two-columns__3Q1x5>:last-child{margin-left:var(--spacing-xl)}.hero_hds-hero__content--two-columns__image-container__2CX-9{display:block}.hero_hds-hero--background-image__2Wse1 .hero_hds-hero--with-background__container__1jpi7{padding:var(--padding-vertical) var(--padding-horizontal)}.hero_hds-hero--background-image__2Wse1 .hero_hds-hero__content__1Gtc5{--padding-vertical:var(--spacing-2-xl);display:flex;flex-direction:row;margin:0 auto;max-width:var(--container-width-xl)}.hero_hds-hero--background-image__2Wse1 .hero_hds-hero__card__3TyQe{width:50%}.hero_hds-hero--with-background__background__JEVuN{height:auto;top:0;right:0;bottom:0;left:0;position:absolute;width:auto;z-index:-1}.hero_hds-hero--with-background__empty-column__21yM0{display:block;width:45%}.hero_hds-hero--diagonal-koros__1gvD8 .hero_hds-hero__content__1Gtc5{background-color:transparent;padding:var(--padding-vertical) 0}.hero_hds-hero--diagonal-koros__1gvD8 .hero_hds-hero__card__3TyQe{background:none;padding:0 var(--padding-horizontal);width:55%}.hero_hds-hero--diagonal-koros__koros-aligner__80AA4{bottom:0;max-width:var(--container-width-xl);position:absolute;right:var(--diagonal-koros-position);top:0;width:100%;z-index:1}.hero_hds-hero--diagonal-koros__koros-and-background__1U31N{display:block;height:100%;top:0;right:0;bottom:0;left:0;overflow:visible;position:absolute;transform:rotate(135deg);transform-origin:center;width:150%}.hero_hds-hero--diagonal-koros__koros-and-background__1U31N:after{background-color:var(--koros-color);content:\"\";display:block;height:1500px;left:0;position:absolute;top:50px;width:150%}.hero_hds-hero--diagonal-koros__koros-and-background__1U31N .hero_hds-hero__koros-container__2Ab9n{height:100%;overflow:hidden;position:absolute;top:0;width:100%;z-index:1}.hero_hds-hero--background-image__koros__2nudG{--koros-color:var(--bottom-koros-color)}}@media only screen and (min-width:1248px){.hero_hds-hero__2NmPy{--padding-horizontal:var(--horizontal-padding-x-large)}.hero_hds-hero__title__3Ue67{font-size:var(--fontsize-heading-xxl);letter-spacing:-1.2px}.hero_hds-hero--diagonal-koros__1gvD8 .hero_hds-hero__text__3K95k{padding-right:var(--spacing-l)}.hero_hds-hero__content--two-columns__3Q1x5>:first-child{margin-right:var(--spacing-2-xl)}.hero_hds-hero__content--two-columns__3Q1x5>:last-child{margin-left:var(--spacing-2-xl)}}.fieldset_hds-fieldset__2FPi3{--border-style:0 none;--padding-top:4px;--padding-sides:0;--padding-bottom:var(--spacing-s);border:var(--border-style);box-sizing:border-box;padding:var(--padding-top) var(--padding-sides) var(--padding-bottom)}.fieldset_hds-fieldset-legend__2-X6z{font-weight:700;padding:0}.fieldset_hds-fieldset--border__3aSAk{--border-style:2px inset var(--color-black-90);--padding-top:2px;--padding-sides:12px}.fieldset_hds-fieldset--border__3aSAk>.fieldset_hds-fieldset-legend__2-X6z{margin-left:calc(var(--padding-sides)/-2);padding:0 6px}.helpers_visually-hidden__1wQpN{border:0;clip:\"rect(0 0 0 0)\";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.helpers_button-reset__1oMEE{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.helpers_text-body__cNGRV{color:var(--color-black-90);font-family:var(--font-default);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.helpers_text-medium__36w-m{font-family:var(--font-default);font-weight:500}.helpers_text-bold__3Mr-E{font-family:var(--font-default);font-weight:700}.helpers_text-xl__2Tx_B{font-size:var(--fontsize-heading-m)}.helpers_text-lg__cuO5Z{font-size:var(--fontsize-heading-s)}.helpers_text-md__tJ793{font-size:var(--fontsize-heading-xs)}.helpers_subtitle__2zu-B{font-size:var(--fontsize-body-m)}.helpers_text-sm__1Bfuk{font-size:var(--fontsize-body-s);line-height:var(--lineheight-xl)}.helpers_heading-xxl__2Lhb0{font-size:var(--fontsize-heading-xxl);font-weight:400;letter-spacing:-1.2px;line-height:var(--lineheight-s)}.helpers_heading-xl__1VOyZ{font-size:var(--fontsize-heading-xl);font-weight:400;letter-spacing:-1px;line-height:var(--lineheight-s)}.helpers_heading-xl-mobile__16ACR{font-size:var(--fontsize-heading-xl-mobile);font-weight:400;letter-spacing:-.8px;line-height:var(--lineheight-s)}.helpers_heading-l__3kdJ7{font-size:var(--fontsize-heading-l);font-weight:400;letter-spacing:-.4px;line-height:var(--lineheight-s)}.helpers_heading-m__3pwdU{font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-.2px;line-height:32px}.helpers_heading-s__1lQJG{font-size:var(--fontsize-heading-s);font-weight:500;letter-spacing:.2px;line-height:1.4}.helpers_heading-xs__U5AY1{font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:.4px;line-height:1.33}.helpers_heading-xxs__1-Y0n{font-size:var(--fontsize-heading-xxs);font-weight:700;letter-spacing:.4px;line-height:var(--lineheight-l)}.helpers_helper-text__1eU9U{color:var(--color-black-60);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs)}.Fieldset-module_legendWithTooltip__1fDha{align-items:center;display:flex;grid-column-gap:var(--spacing-2-xs);justify-content:flex-start}.Fieldset-module_tooltipButton__2lhCc{align-items:center;display:flex}.Koros-module_koros__1r3rg{line-height:0;width:100%}.Koros-module_rotate__3Iy1a{will-change:transform}.Footer-module_footer__1aD3T{--footer-background:var(--color-black-5);--footer-color:var(--color-black-90);--footer-divider-color:var(--color-black-20);--footer-focus-outline-border-radius:0px;--footer-focus-outline-color:var(--color-coat-of-arms);--footer-focus-outline-width:3px;--footer-padding:var(--spacing-l) var(--spacing-m) 0;color:var(--footer-color)}.Footer-module_footer__1aD3T.Footer-module_theme-dark__1TGCV{--footer-background:var(--color-black-80);--footer-color:var(--color-white);--footer-focus-outline-color:var(--color-white)}.Footer-module_koros__Orx_W{fill:var(--footer-background,transparent);overflow:hidden}.Footer-module_koros__Orx_W svg{left:50%;position:relative;transform:translateX(-50%);width:4028px}.Footer-module_koros__Orx_W.Footer-module_basic__2VejY{height:15px}.Footer-module_koros__Orx_W.Footer-module_beat__2_JDj{height:70px}.Footer-module_koros__Orx_W.Footer-module_pulse__Aq8zn{height:34px}.Footer-module_koros__Orx_W.Footer-module_wave__368B6{height:35px}.Footer-module_koros__Orx_W.Footer-module_vibration___dfUS{height:54px}.Footer-module_footerContent__3MC14{background-color:var(--footer-background)}.Footer-module_footerSections__2nrr8{display:flex;flex-direction:column;justify-content:flex-start;padding:var(--footer-padding)}.Footer-module_title__269y7{font-size:var(--fontsize-heading-m);font-weight:700;letter-spacing:.4px;line-height:var(--lineheight-l)}@media only screen and (max-width:575.98px){.Footer-module_footer__1aD3T{--footer-padding:var(--spacing-m) var(--spacing-s) 0}.Footer-module_footerSections__2nrr8{padding:var(--footer-padding)}}@media only screen and (max-width:767.98px){.Footer-module_titleWrapper__2YJVv{flex-direction:column}.Footer-module_title__269y7{font-size:var(--fontsize-heading-s)}}@media only screen and (min-width:1248px){.Footer-module_footerSections__2nrr8{margin:0 auto;max-width:var(--container-width-xl)}}.Logo-module_logo__Y2mwP{height:100%;max-height:100%;max-width:100%}.Logo-module_small__1Ecbu{height:var(--spacing-l)}.Logo-module_medium__1zyWm{height:var(--spacing-xl)}.Logo-module_large__3Tjj3{height:var(--spacing-2-xl)}.NumberInput-module_numberInputContainer__hKNPp{width:100%}.NumberInput-module_numberInputContainer__hKNPp input::-webkit-inner-spin-button,.NumberInput-module_numberInputContainer__hKNPp input::-webkit-outer-spin-button{appearance:none!important;height:auto;margin:0!important}.NumberInput-module_numberInputContainer__hKNPp input[type=number]{appearance:textfield!important}.NumberInput-module_numberInputWithSteps__3q7N7{padding-left:68px!important;padding-right:68px!important;text-align:center}.NumberInput-module_minusButtonWrapper__3PHN9{border-right:1px solid #ccc}.NumberInput-module_minusButtonWrapper__3PHN9,.NumberInput-module_minusButtonWrapperWithoutBorder__2g42V{align-items:center;bottom:0;display:flex;font-size:1rem;justify-content:center;margin:2px;position:absolute;top:0;width:52px;z-index:1;left:0}.NumberInput-module_plusButtonWrapper__Wwq5t{border-left:1px solid #ccc}.NumberInput-module_plusButtonWrapper__Wwq5t,.NumberInput-module_plusButtonWrapperWithoutBorder__2xb6t{align-items:center;bottom:0;display:flex;font-size:1rem;justify-content:center;margin:2px;position:absolute;top:0;width:52px;z-index:1;right:0}.NumberInput-module_button__2Shu7{align-items:center;appearance:none;background:transparent;border:0;cursor:pointer;display:flex;font-size:1rem;height:100%;justify-content:center;overflow:hidden;padding:0;width:100%}.NumberInput-module_button__2Shu7:disabled{cursor:not-allowed}.NumberInput-module_button__2Shu7:focus{outline:3px solid var(--color-focus-outline);outline-offset:-5px}.helpers_visually-hidden__37yaO{border:0;clip:\"rect(0 0 0 0)\";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.helpers_button-reset__29Iqt{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.helpers_text-body__3IBcQ{color:var(--color-black-90);font-family:var(--font-default);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.helpers_text-medium__2kf1v{font-family:var(--font-default);font-weight:500}.helpers_text-bold__2GKli{font-family:var(--font-default);font-weight:700}.helpers_text-xl__YRDM3{font-size:var(--fontsize-heading-m)}.helpers_text-lg__2BNN-{font-size:var(--fontsize-heading-s)}.helpers_text-md__302xO{font-size:var(--fontsize-heading-xs)}.helpers_subtitle__th2cf{font-size:var(--fontsize-body-m)}.helpers_text-sm__3KQkJ{font-size:var(--fontsize-body-s);line-height:var(--lineheight-xl)}.helpers_heading-xxl__2AubY{font-size:var(--fontsize-heading-xxl);font-weight:400;letter-spacing:-1.2px;line-height:var(--lineheight-s)}.helpers_heading-xl__2Q5tU{font-size:var(--fontsize-heading-xl);font-weight:400;letter-spacing:-1px;line-height:var(--lineheight-s)}.helpers_heading-xl-mobile__1Si-F{font-size:var(--fontsize-heading-xl-mobile);font-weight:400;letter-spacing:-.8px;line-height:var(--lineheight-s)}.helpers_heading-l__2iDF9{font-size:var(--fontsize-heading-l);font-weight:400;letter-spacing:-.4px;line-height:var(--lineheight-s)}.helpers_heading-m__2nmV6{font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-.2px;line-height:32px}.helpers_heading-s__8baFT{font-size:var(--fontsize-heading-s);font-weight:500;letter-spacing:.2px;line-height:1.4}.helpers_heading-xs__34U6S{font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:.4px;line-height:1.33}.helpers_heading-xxs__gtf0G{font-size:var(--fontsize-heading-xxs);font-weight:700;letter-spacing:.4px;line-height:var(--lineheight-l)}.helpers_helper-text__20Oh_{color:var(--color-black-60);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs)}.ImageWithCard-module_wrapper__364Ke{--card-background-primary:var(--color-coat-of-arms);--card-background-secondary:var(--color-fog);--card-background-tertiary:var(--color-suomenlinna);--card-color-primary:var(--color-white);--card-color-secondary:var(--color-black-90);--card-color-tertiary:var(--color-white);height:34.375em;margin:0 auto;top:0;width:72em}.ImageWithCard-module_image__2d_XB{background-position:50% 50%;background-size:cover;height:100%;width:100%}.ImageWithCard-module_cardContainer__29OyT{height:100%;margin:0 auto;max-width:72em;padding:3.625em;position:relative;top:-100%}.ImageWithCard-module_card__1SlWZ{background:#fff;min-height:100%;padding:1em 3em;width:45%}.ImageWithCard-module_leftAlignment__2kkFG .ImageWithCard-module_image__2d_XB,.ImageWithCard-module_rightAlignment__1rq79 .ImageWithCard-module_card__1SlWZ{margin-left:auto;margin-right:0}.ImageWithCard-module_splitLayout__2uePR{height:40.625em}.ImageWithCard-module_splitLayout__2uePR .ImageWithCard-module_cardContainer__29OyT{padding:0}@media (min-width:769px){.ImageWithCard-module_splitLayout__2uePR .ImageWithCard-module_image__2d_XB{width:57.5%}.ImageWithCard-module_splitLayout__2uePR .ImageWithCard-module_card__1SlWZ{width:42.5%}}.ImageWithCard-module_hoverLayout__2qfa2 .ImageWithCard-module_cardContainer__29OyT{padding-left:0;padding-right:0}@media (min-width:769px){.ImageWithCard-module_hoverLayout__2qfa2 .ImageWithCard-module_image__2d_XB{width:70%}.ImageWithCard-module_hoverLayout__2qfa2 .ImageWithCard-module_card__1SlWZ{width:38.5%}}.ImageWithCard-module_fullWidth__3dymi,.ImageWithCard-module_fullWidth__3dymi:not(.ImageWithCard-module_splitLayout__2uePR) .ImageWithCard-module_image__2d_XB{width:100%}.ImageWithCard-module_fullWidth__3dymi.ImageWithCard-module_primary__31Po9,.ImageWithCard-module_primary__31Po9 .ImageWithCard-module_card__1SlWZ{background-color:var(--card-background-primary);color:var(--card-color-primary)}.ImageWithCard-module_fullWidth__3dymi.ImageWithCard-module_secondary__36TSl,.ImageWithCard-module_secondary__36TSl .ImageWithCard-module_card__1SlWZ{background-color:var(--card-background-secondary);color:var(--card-color-secondary)}.ImageWithCard-module_fullWidth__3dymi.ImageWithCard-module_tertiary__266JJ,.ImageWithCard-module_tertiary__266JJ .ImageWithCard-module_card__1SlWZ{background-color:var(--card-background-tertiary);color:var(--card-color-tertiary)}@media (max-width:768px){.ImageWithCard-module_wrapper__364Ke{height:auto;width:auto}.ImageWithCard-module_wrapper__364Ke.ImageWithCard-module_fullWidth__3dymi{background:none}.ImageWithCard-module_image__2d_XB{height:26.25em;width:auto}.ImageWithCard-module_cardContainer__29OyT{height:auto;margin:-4.625em 1em 0;padding:0;width:auto}.ImageWithCard-module_card__1SlWZ{padding:1em;width:auto}}@media (max-width:768px){.ImageWithCard-module_hoverLayout__2qfa2.ImageWithCard-module_leftAlignment__2kkFG .ImageWithCard-module_image__2d_XB{margin-left:2.5em}.ImageWithCard-module_hoverLayout__2qfa2.ImageWithCard-module_leftAlignment__2kkFG .ImageWithCard-module_card__1SlWZ{margin-right:2.25em}.ImageWithCard-module_hoverLayout__2qfa2.ImageWithCard-module_rightAlignment__1rq79 .ImageWithCard-module_image__2d_XB{margin-right:2.5em}.ImageWithCard-module_hoverLayout__2qfa2.ImageWithCard-module_rightAlignment__1rq79 .ImageWithCard-module_card__1SlWZ{margin-left:2.25em}.ImageWithCard-module_hoverLayout__2qfa2 .ImageWithCard-module_cardContainer__29OyT{margin:-2.875em 0 0}}.PasswordInput-module_disabledShowPasswordButton__8eYej{color:var(--color-black-40)}.radio-button_hds-radio-button__1kktv{--size:24px;--icon-scale:0.5;--border-width:2px;--outline-width:3px;--label-font-size:var(--fontsize-body-m);--label-padding:var(--spacing-2-xs);--background:var(--color-white);--background-hover:var(--color-white);--background-focus:var(--color-white);--background-unselected-disabled:var(--color-black-10);--background-selected-disabled:var(--color-white);--border-color-focus:var(--color-black-90);--border-color-selected:var(--color-bus);--border-color-selected-hover:var(--color-bus-dark);--border-color-selected-disabled:var(--color-black-20);--border-color-unselected:var(--color-black-50);--border-color-unselected-hover:var(--color-black-90);--border-color-unselected-disabled:var(--color-black-10);--icon-color-selected:var(--color-bus);--icon-color-unselected:transparent;--icon-color-hover:var(--color-bus-dark);--icon-color-disabled:var(--color-black-10);--label-color:var(--color-black-90);--label-color-disabled:var(--color-black-40);display:flex;flex-wrap:wrap;min-height:var(--size);position:relative}.radio-button_hds-radio-button__1kktv,.radio-button_hds-radio-button__1kktv *,.radio-button_hds-radio-button__1kktv :after,.radio-button_hds-radio-button__1kktv :before{box-sizing:border-box}.radio-button_hds-radio-button__1kktv:not(:first-of-type){margin-top:var(--spacing-2-xs)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__label__1XnIa:after,.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__label__1XnIa:before{border-radius:50%;content:\"\";left:0;position:absolute;top:0}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__label__1XnIa:after{background-clip:content-box;background-color:var(--icon-color-unselected);border:var(--border-width) solid var(--border-color-unselected);height:var(--size);padding:calc((var(--size)/2 - var(--border-width)*2)*(1 - var(--icon-scale)));width:var(--size)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:checked+.radio-button_hds-radio-button__label__1XnIa:after{background-color:var(--icon-color-selected);border-color:var(--border-color-selected)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:focus+.radio-button_hds-radio-button__label__1XnIa:after,.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:hover+.radio-button_hds-radio-button__label__1XnIa:after{transition:85ms ease-out;transition-property:background-color,border-color}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:disabled+.radio-button_hds-radio-button__label__1XnIa:after{border-color:var(--border-color-unselected-disabled)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:checked:disabled+.radio-button_hds-radio-button__label__1XnIa:after{background-color:var(--icon-color-disabled);border-color:var(--border-color-selected-disabled)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:not(:disabled):focus+.radio-button_hds-radio-button__label__1XnIa:after{border-color:var(--border-color-focus)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:not(:disabled):hover+.radio-button_hds-radio-button__label__1XnIa:after,.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:not(:disabled):hover:focus+.radio-button_hds-radio-button__label__1XnIa:after{border-color:var(--border-color-unselected-hover)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__label__1XnIa:before{background-color:var(--background);height:var(--size);width:var(--size)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:focus+.radio-button_hds-radio-button__label__1XnIa:before,.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:hover+.radio-button_hds-radio-button__label__1XnIa:before{transition:85ms ease-out;transition-property:background-color,box-shadow,transform}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6{font-family:inherit;font-size:100%;height:var(--size);left:0;line-height:1.15;margin:0;opacity:0;position:absolute;top:0;width:var(--size)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__label__1XnIa{color:var(--label-color);cursor:pointer;font-size:var(--label-font-size);line-height:var(--lineheight-m);padding-left:calc(var(--size) + var(--label-padding));padding-top:calc(var(--size)/2 - var(--label-font-size)*var(--lineheight-m)/2);position:relative}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:hover+.radio-button_hds-radio-button__label__1XnIa:before{background-color:var(--background-hover)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:focus+.radio-button_hds-radio-button__label__1XnIa:before{box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);transform:translateZ(0)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:not(:disabled):checked:hover+.radio-button_hds-radio-button__label__1XnIa:after,.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:not(:disabled):checked:hover:focus+.radio-button_hds-radio-button__label__1XnIa:after{background-color:var(--icon-color-hover);border-color:var(--border-color-selected-hover)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:disabled+.radio-button_hds-radio-button__label__1XnIa{color:var(--label-color-disabled)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:disabled+.radio-button_hds-radio-button__label__1XnIa:before{background-color:var(--background-unselected-disabled)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:checked:disabled+.radio-button_hds-radio-button__label__1XnIa:before{background-color:var(--background-selected-disabled)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:disabled,.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:disabled+.radio-button_hds-radio-button__label__1XnIa{cursor:not-allowed}.helpers_visually-hidden__2SQYx{border:0;clip:\"rect(0 0 0 0)\";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.helpers_button-reset__2Gr5D{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.helpers_text-body__1-RNd{color:var(--color-black-90);font-family:var(--font-default);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.helpers_text-medium__WvSD9{font-family:var(--font-default);font-weight:500}.helpers_text-bold__RHjJI{font-family:var(--font-default);font-weight:700}.helpers_text-xl__2rpQg{font-size:var(--fontsize-heading-m)}.helpers_text-lg__2dciy{font-size:var(--fontsize-heading-s)}.helpers_text-md__-y1dr{font-size:var(--fontsize-heading-xs)}.helpers_subtitle__3x21G{font-size:var(--fontsize-body-m)}.helpers_text-sm__238bH{font-size:var(--fontsize-body-s);line-height:var(--lineheight-xl)}.helpers_heading-xxl__1KEkh{font-size:var(--fontsize-heading-xxl);font-weight:400;letter-spacing:-1.2px;line-height:var(--lineheight-s)}.helpers_heading-xl__GYTuO{font-size:var(--fontsize-heading-xl);font-weight:400;letter-spacing:-1px;line-height:var(--lineheight-s)}.helpers_heading-xl-mobile__1Dfib{font-size:var(--fontsize-heading-xl-mobile);font-weight:400;letter-spacing:-.8px;line-height:var(--lineheight-s)}.helpers_heading-l__1BzbR{font-size:var(--fontsize-heading-l);font-weight:400;letter-spacing:-.4px;line-height:var(--lineheight-s)}.helpers_heading-m__2APFi{font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-.2px;line-height:32px}.helpers_heading-s__2adCF{font-size:var(--fontsize-heading-s);font-weight:500;letter-spacing:.2px;line-height:1.4}.helpers_heading-xs__uSPiv{font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:.4px;line-height:1.33}.helpers_heading-xxs__37xm2{font-size:var(--fontsize-heading-xxs);font-weight:700;letter-spacing:.4px;line-height:var(--lineheight-l)}.helpers_helper-text__awnLq{color:var(--color-black-60);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs)}@keyframes text-input_fadeIn__2IDZ8{0%{opacity:0}to{opacity:1}}.text-input_hds-text-input__2LODq{--border-width:2px;--outline-width:3px;--input-height:56px;--textarea-height:149px;--icon-size:var(--spacing-m);--helper-color-default:var(--color-black-60);--helper-color-invalid:var(--color-error);--helper-color-success:var(--color-success);--helper-color-info:var(--color-black-90);--helper-color-info-icon:var(--color-coat-of-arms);--icon-color-invalid:var(--color-error);--input-background-default:var(--color-white);--input-background-disabled:var(--color-black-10);--input-border-color-default:var(--color-black-50);--input-border-color-hover:var(--color-black-90);--input-border-color-focus:var(--color-black-90);--input-border-color-invalid:var(--color-error);--input-border-color-disabled:var(--color-black-10);--input-border-color-success:var(--color-success);--input-color-default:var(--color-black-90);--input-color-disabled:var(--color-black-40);--label-color-default:var(--color-black-90);--label-color-invalid:var(--color-black-90);--placeholder-color:var(--color-black-60)}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C{-webkit-appearance:none;background-color:var(--input-background-default);border:var(--border-width) solid var(--input-border-color-default);border-radius:0;box-sizing:border-box;color:var(--input-color-default);font-family:inherit;font-size:1.125em;height:var(--input-height);line-height:normal;margin:0;padding:0 var(--spacing-s);width:100%;will-change:transform,box-shadow}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C:hover{border-color:var(--input-border-color-hover);transition:border-color 85ms ease-out}.text-input_hds-text-input__input-wrapper__1OqYG:focus-within .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-focus);outline:none}.text-input_hds-text-input__2LODq.text-input_hds-text-input--invalid__1UfKC .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-invalid)}.text-input_hds-text-input__2LODq.text-input_hds-text-input--success__3dm2J .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-success)}.text-input_hds-text-input__input-wrapper__1OqYG:focus-within .text-input_hds-text-input__input__GJm5C:not([readonly]){box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);transform:translateZ(0);transition:85ms ease-out;transition-property:box-shadow,transform}.text-input_hds-text-input__label__15F2V{color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.text-input_hds-text-input--invalid__1UfKC .text-input_hds-text-input__label__15F2V{color:var(--label-color-invalid);transition:color 85ms linear}.text-input_hds-text-input__required__z3Hm0{color:var(--color-black-90);display:inline-block;font-size:var(--fontsize-body-xl);line-height:1;margin-left:var(--spacing-2-xs);transform:translateY(var(--spacing-3-xs))}.text-input_hds-text-input__input-wrapper__1OqYG{display:flex;position:relative}.text-input_hds-text-input__2LODq textarea.text-input_hds-text-input__input__GJm5C{font-family:inherit;height:var(--textarea-height);margin:0;min-height:var(--input-height);overflow:auto;padding:var(--spacing-s);resize:vertical}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C::-moz-placeholder{color:var(--placeholder-color);opacity:1}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C::placeholder{color:var(--placeholder-color);opacity:1}.text-input_hds-text-input__helper-text__3V2KM{color:var(--helper-color-default)}.text-input_hds-text-input__error-text__1GLYk,.text-input_hds-text-input__helper-text__3V2KM{display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);white-space:pre-line}.text-input_hds-text-input__error-text__1GLYk{color:var(--helper-color-invalid);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.text-input_hds-text-input__error-text__1GLYk:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__error-text__1GLYk:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--icon-color-invalid);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__success-text__3EOiy{color:var(--helper-color-success);display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative;white-space:pre-wrap}.text-input_hds-text-input__success-text__3EOiy:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__success-text__3EOiy:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--helper-color-success);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__info-text__3bqzy{color:var(--helper-color-info);display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.text-input_hds-text-input__info-text__3bqzy:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__info-text__3bqzy:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--helper-color-info-icon);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C[disabled]{background-color:var(--input-background-disabled);border-color:var(--input-border-color-disabled);color:var(--input-color-disabled);cursor:not-allowed}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C[readonly]{background-color:transparent;border:0;color:var(--input-color-default);padding:0;-webkit-text-fill-color:var(--input-color-default)}.text-input_hds-text-input__buttons__1RMzT{align-items:center;bottom:0;display:flex;font-size:1rem;justify-content:center;margin-right:calc(var(--spacing-s) - var(--spacing-xs)/2);position:absolute;right:0;top:0}.text-input_hds-text-input__button__1Fh0I{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;display:flex;font:inherit;outline:none;padding:var(--spacing-xs) calc(var(--spacing-xs)/2)}.text-input_hds-text-input__button__1Fh0I:focus{outline:var(--outline-width) solid var(--color-focus-outline)}.TextInput-module_root__2CMNr{position:relative}.TextInput-module_input__1BlHi.TextInput-module_hasButton__2KCM1{padding-right:calc(var(--spacing-s)*2 + 1.5rem)}.TextInput-module_button__1ySMX:disabled{cursor:not-allowed}.TextInput-module_button__1ySMX:focus{outline:var(--outline-width) solid var(--color-focus-outline)}.Section-module_section__11UMY{--section-background-plain:var(--color-white);--section-background-primary:var(--color-coat-of-arms);--section-background-secondary:var(--color-fog);--section-background-tertiary:var(--color-suomenlinna);--section-color-plain:var(--color-black-90);--section-color-primary:var(--color-white);--section-color-secondary:var(--color-black-90);--section-color-tertiary:var(--color-white);position:relative}.Section-module_section__11UMY.Section-module_withKoros__3igcQ{padding:2em 0;z-index:1}.Section-module_section__11UMY:not(.Section-module_withKoros__3igcQ){padding:4em 0}.Section-module_content__1zko5{margin:0 auto;max-width:72em;padding:var(--spacing-layout-s) var(--spacing-layout-xl);position:relative;z-index:1}.Section-module_section__11UMY.Section-module_plain__2LGd4{background-color:var(--section-background-plain);color:var(--section-color-plain)}.Section-module_section__11UMY.Section-module_primary__PCOSJ{background-color:var(--section-background-primary);color:var(--section-color-primary)}.Section-module_section__11UMY.Section-module_secondary__21zO2{background-color:var(--section-background-secondary);color:var(--section-color-secondary)}.Section-module_section__11UMY.Section-module_tertiary__3-HvA{background-color:var(--section-background-tertiary);color:var(--section-color-tertiary)}.Section-module_koros__1eyqM{position:absolute}.Section-module_section__11UMY.Section-module_plain__2LGd4 .Section-module_koros__1eyqM{fill:var(--section-background-plain)}.Section-module_section__11UMY.Section-module_primary__PCOSJ .Section-module_koros__1eyqM{fill:var(--section-background-primary)}.Section-module_section__11UMY.Section-module_secondary__21zO2 .Section-module_koros__1eyqM{fill:var(--section-background-secondary)}.Section-module_section__11UMY.Section-module_tertiary__3-HvA .Section-module_koros__1eyqM{fill:var(--section-background-tertiary)}.Section-module_koros__1eyqM.Section-module_basic__lpGss.Section-module_topKoros__3wEjr{top:-1em}.Section-module_koros__1eyqM.Section-module_beat__3nhuM.Section-module_topKoros__3wEjr{top:-4.5em}.Section-module_koros__1eyqM.Section-module_pulse__3JqAl.Section-module_topKoros__3wEjr{top:-2.2em}.Section-module_koros__1eyqM.Section-module_wave__3v_Be.Section-module_topKoros__3wEjr{top:-2.3em}.Section-module_koros__1eyqM.Section-module_vibration__Cxg94.Section-module_topKoros__3wEjr{top:-3.4em}.Section-module_koros__1eyqM.Section-module_basic__lpGss.Section-module_bottomKoros__2tMWb{bottom:-1em}.Section-module_koros__1eyqM.Section-module_beat__3nhuM.Section-module_bottomKoros__2tMWb{bottom:-4.5em}.Section-module_koros__1eyqM.Section-module_pulse__3JqAl.Section-module_bottomKoros__2tMWb{bottom:-2.2em}.Section-module_koros__1eyqM.Section-module_wave__3v_Be.Section-module_bottomKoros__2tMWb{bottom:-2.3em}.Section-module_koros__1eyqM.Section-module_vibration__Cxg94.Section-module_bottomKoros__2tMWb{bottom:-3.4em}@media (max-width:768px){.Section-module_content__1zko5{padding:.5em 1em}}.highlight_hds-highlight___uE3p{--accent-line-color:var(--color-bus);--text-color:var(--color-black-90);--size-width-s:264px;--size-width-m:536px;--size-width-l:680px;--width:var(--size-width-m);--margin:var(--spacing-m) 0;border-left:8px solid var(--accent-line-color);color:var(--text-color);display:flex;flex-direction:column;justify-content:center;margin:var(--margin);max-width:100%;padding:0;padding-left:var(--spacing-s);grid-row-gap:var(--spacing-m);row-gap:var(--spacing-m);width:var(--width)}.highlight_hds-blockquote__1QLSQ{margin:0;padding:0}.highlight_hds-highlight__text__31xf_{color:var(--text-color);font-size:var(--fontsize-heading-m);line-height:var(--lineheight-m);margin:0;padding:0}.highlight_hds-highlight--small__11cWK{--margin:var(--spacing-s) 0;--width:var(--size-width-s)}.highlight_hds-highlight--large__1EjiL{--margin:var(--spacing-l) 0;--width:var(--size-width-l)}.highlight_hds-highlight--large__1EjiL .highlight_hds-highlight__text__31xf_{font-size:var(--fontsize-heading-l);line-height:var(--lineheight-l)}.highlight_hds-highlight__quote__3ed0C:after,.highlight_hds-highlight__quote__3ed0C:before{content:'\"';display:inline}.highlight_hds-highlight__reference__3_4ca{font-size:var(--fontsize-heading-xs);line-height:var(--lineheight-m)}.link_hds-icon__2pRV-{--icon-size:100%;background-color:currentcolor;display:inline-block;height:var(--icon-size);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:auto;mask-size:auto;width:var(--icon-size)}.link_hds-icon__2pRV-.link_hds-icon--size-xs__2RlDP{--icon-size:var(--spacing-layout-2-xs)}.link_hds-icon__2pRV-.link_hds-icon--size-s__2iqHu{--icon-size:var(--spacing-layout-xs)}.link_hds-icon__2pRV-.link_hds-icon--size-m__19mxF{--icon-size:var(--spacing-layout-s)}.link_hds-icon__2pRV-.link_hds-icon--size-l__2JXJt{--icon-size:var(--spacing-layout-m)}.link_hds-icon__2pRV-.link_hds-icon--size-xl__1oFrI{--icon-size:var(--spacing-layout-l)}.link_hds-icon--link-external__1R5f9{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 3v16h16v2H3V3h2zm16 0v9h-2V6.413L9.914 15.5 8.5 14.086 17.585 5H12V3h9z' fill='currentColor'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 3v16h16v2H3V3h2zm16 0v9h-2V6.413L9.914 15.5 8.5 14.086 17.585 5H12V3h9z' fill='currentColor'/%3E%3C/svg%3E\")}.link_hds-link__5Oxo-{--link-visited-color:#551a8b;--link-color:var(--color-bus);border:3px solid transparent;box-sizing:border-box;color:var(--link-color);text-decoration:underline}.link_hds-link__5Oxo-:visited{color:var(--link-visited-color)}.link_hds-link__5Oxo-:visited svg g path{fill:var(--link-visited-color)}.link_hds-link__5Oxo-:focus{border:3px solid var(--color-focus-outline);outline:none}.link_hds-link__5Oxo-.link_focus-visible__36mmB,.link_hds-link__5Oxo-:focus-visible{outline:none}.link_hds-link__5Oxo- .link_vertical-align-medium-icon__3IWi1{vertical-align:sub}.link_hds-link__5Oxo- .link_vertical-align-big-icon__3yWNL{vertical-align:middle}.link_hds-link__5Oxo- .link_vertical-align-small-icon__3lxhH{vertical-align:text-top}.link_hds-link--disable-visited-styles__2gk1d:visited{color:var(--color-bus)}.link_hds-link--small__2ldrg{font-size:14px}.link_hds-link--medium__xEU_F{font-size:16px}.link_hds-link--large__D3jO3{display:block;font-size:18px;width:-moz-fit-content;width:fit-content}.link_hds-link--small__2ldrg .link_icon__i_HqN{margin-left:7px}.link_hds-link--medium__xEU_F .link_icon__i_HqN{margin-left:var(--spacing-2-xs);margin-top:-3px}.link_hds-link--large__D3jO3 .link_icon__i_HqN{margin-left:var(--spacing-s)}.link_hds-link--small__2ldrg .link_hds-icon-left__1aufP{margin-right:4px;vertical-align:text-top}.link_hds-link--medium__xEU_F .link_hds-icon-left__1aufP{margin-right:8px;vertical-align:sub}.link_hds-link--large__D3jO3 .link_hds-icon-left__1aufP{margin-right:16px;vertical-align:middle}.pagination_hds-button__3dRON{--border-width:2px;--color:inherit;--min-size:44px;--outline-gutter:2px;--outline-width:3px;align-content:flex-start;align-items:center;-webkit-appearance:button;background-color:var(--background-color,transparent);border:var(--border-width) solid var(--border-color,transparent);border-radius:0;color:var(--color);cursor:pointer;display:inline-flex;font-family:inherit;font-size:100%;font-weight:500;justify-content:center;line-height:1.15;margin:0;min-height:var(--min-size);min-width:var(--min-size);padding:0 var(--spacing-2-xs);position:relative;text-decoration:none;text-transform:none;vertical-align:top}.pagination_hds-button__3dRON,.pagination_hds-button__3dRON *,.pagination_hds-button__3dRON:after,.pagination_hds-button__3dRON :after,.pagination_hds-button__3dRON:before,.pagination_hds-button__3dRON :before{box-sizing:border-box}.pagination_hds-button__3dRON[type=button],.pagination_hds-button__3dRON[type=reset],.pagination_hds-button__3dRON[type=submit]{-webkit-appearance:button}.pagination_hds-button__3dRON::-moz-focus-inner,.pagination_hds-button__3dRON[type=button]::-moz-focus-inner,.pagination_hds-button__3dRON[type=reset]::-moz-focus-inner,.pagination_hds-button__3dRON[type=submit]::-moz-focus-inner{border-style:none;padding:0}.pagination_hds-button__3dRON:-moz-focusring,.pagination_hds-button__3dRON[type=button]:-moz-focusring,.pagination_hds-button__3dRON[type=reset]:-moz-focusring,.pagination_hds-button__3dRON[type=submit]:-moz-focusring{outline:1px dotted ButtonText}.pagination_hds-button__3dRON.pagination_focus-visible__1kbON,.pagination_hds-button__3dRON:focus-visible,.pagination_hds-button__3dRON:hover{transition-duration:85ms;transition-property:background-color,border-color,color;transition-timing-function:ease-out}.pagination_hds-button__3dRON:hover{background-color:var(--background-color-hover,transparent);color:var(--color-hover)}.pagination_hds-button__3dRON.pagination_focus-visible__1kbON,.pagination_hds-button__3dRON:active,.pagination_hds-button__3dRON:focus-visible{background-color:var(--background-color-focus,transparent);color:var(--color-focus);outline:none}.pagination_hds-button__3dRON:not(:disabled){border-color:var(--border-color,transparent)}.pagination_hds-button__3dRON:disabled{background-color:var(--background-color-disabled,transparent);border-color:var(--border-color-disabled,transparent);color:var(--color-disabled);cursor:not-allowed}.pagination_hds-button__3dRON.pagination_focus-visible__1kbON:hover,.pagination_hds-button__3dRON:active:hover,.pagination_hds-button__3dRON:focus-visible:hover{background-color:var(--background-color-hover-focus,transparent)}.pagination_hds-button__3dRON:not(:disabled):hover{border-color:var(--border-color-hover,transparent)}.pagination_hds-button__3dRON:not(:disabled).pagination_focus-visible__1kbON,.pagination_hds-button__3dRON:not(:disabled):active,.pagination_hds-button__3dRON:not(:disabled):focus-visible{border-color:var(--border-color-focus,transparent)}.pagination_hds-button__3dRON:not(:disabled).pagination_focus-visible__1kbON:hover,.pagination_hds-button__3dRON:not(:disabled):active:hover,.pagination_hds-button__3dRON:not(:disabled):focus-visible:hover{border-color:var(--border-color-hover-focus,transparent);color:var(--color-hover-focus)}.pagination_hds-button__3dRON:after{--size:100%;border:var(--outline-width) solid transparent;content:\"\";height:var(--size);position:absolute;width:var(--size)}.pagination_hds-button__3dRON.pagination_focus-visible__1kbON:after,.pagination_hds-button__3dRON:active:after,.pagination_hds-button__3dRON:focus-visible:after{--size:calc(100% + var(--outline-width)*2 + var(--border-width)*2 + var(--outline-gutter)*2);border-color:var(--focus-outline-color)}.pagination_hds-button__label__1gotO,input[type=submit].pagination_hds-button__3dRON{font-weight:inherit;line-height:1.25em;padding:var(--spacing-s)}input[type=submit].pagination_hds-button__3dRON{cursor:pointer;padding:var(--spacing-s) var(--spacing-l)}input[type=submit].pagination_hds-button__3dRON.pagination_focus-visible__1kbON,input[type=submit].pagination_hds-button__3dRON:focus-visible{box-shadow:0 0 0 var(--outline-gutter) var(--submit-input-focus-gutter-color),0 0 0 calc(var(--outline-gutter) + var(--outline-width)) var(--focus-outline-color)}.pagination_hds-button__label__1gotO:only-child{margin:0 var(--spacing-2-xs)}.pagination_hds-button--small__2DCzg .pagination_hds-button__label__1gotO,input[type=submit].pagination_hds-button--small__2DCzg{line-height:var(--lineheight-s);padding:var(--spacing-2-xs) var(--spacing-xs)}.pagination_hds-button--supplementary__3Sxaw .pagination_hds-button__label__1gotO:first-child{padding-right:var(--spacing-2-xs)}.pagination_hds-button--small__2DCzg .pagination_hds-button__label__1gotO:only-child{margin:0 var(--spacing-xs)}.pagination_hds-button--supplementary__3Sxaw .pagination_hds-icon__2xNck+.pagination_hds-button__label__1gotO:last-child{padding-left:var(--spacing-2-xs)}.pagination_hds-button--supplementary__3Sxaw .pagination_hds-icon__2xNck+.pagination_hds-button__label__1gotO:not(:last-child){padding-left:var(--spacing-2-xs);padding-right:var(--spacing-2-xs)}.pagination_hds-button--small__2DCzg{padding:0}input[type=submit].pagination_hds-button--small__2DCzg{padding:var(--spacing-2-xs) var(--spacing-m)}.pagination_hds-button--small__2DCzg .pagination_hds-button__label__1gotO:not(:first-of-type):not(:last-of-type){padding:var(--spacing-2-xs) var(--spacing-2-xs)}.pagination_hds-button--fullwidth__3j7LJ{width:100%}.pagination_hds-button__3dRON .pagination_hds-icon__2xNck{height:var(--spacing-m);margin-left:var(--spacing-s);width:var(--spacing-m)}.pagination_hds-button__label__1gotO~.pagination_hds-icon__2xNck{margin:0 var(--spacing-s) 0 0}.pagination_hds-button--small__2DCzg .pagination_hds-icon__2xNck{margin-left:var(--spacing-2-xs)}.pagination_hds-button__3dRON .pagination_hds-button--small__2DCzg .pagination_hds-button__label__1gotO~.pagination_hds-icon__2xNck{margin:0 var(--spacing-2-xs) 0 0}.pagination_hds-button__3dRON .pagination_hds-icon__2xNck:first-of-type:not(:last-of-type){margin:0 0 0 var(--spacing-2-xs)}.pagination_hds-button__3dRON .pagination_hds-icon__2xNck:last-of-type:not(:first-of-type){margin:0 var(--spacing-2-xs) 0 0}.pagination_hds-button--small__2DCzg .pagination_hds-icon__2xNck:first-child:not(:last-of-type){margin:0 0 0 var(--spacing-2-xs)}.pagination_hds-button--small__2DCzg .pagination_hds-icon__2xNck:last-child:not(:first-of-type){margin:0 var(--spacing-2-xs) 0 0}.pagination_hds-button--primary__1slzh{--background-color:var(--color-bus);--background-color-hover:var(--color-bus-dark);--background-color-focus:var(--color-bus);--background-color-hover-focus:var(--color-bus-dark);--background-color-disabled:var(--color-black-20);--border-color:var(--color-bus);--border-color-hover:var(--color-bus-dark);--border-color-focus:var(--color-bus);--border-color-hover-focus:var(--color-bus-dark);--border-color-disabled:var(--color-black-20);--color:var(--color-white);--color-hover:var(--color-white);--color-focus:var(--color-white);--color-hover-focus:var(--color-white);--color-disabled:var(--color-white);--focus-outline-color:var(--color-focus-outline);--submit-input-focus-gutter-color:var(--color-white)}.pagination_hds-button--secondary__1UmEB{--border-color:var(--color-bus);--border-color-hover:var(--color-bus-dark);--border-color-focus:var(--color-bus);--border-color-hover-focus:var(--color-bus-dark);--border-color-disabled:var(--color-black-50);--focus-outline-color:var(--color-focus-outline);--submit-input-focus-gutter-color:var(--color-white)}.pagination_hds-button--secondary__1UmEB,.pagination_hds-button--supplementary__3Sxaw{--background-color:transparent;--background-color-hover:var(--color-bus-light);--background-color-focus:transparent;--background-color-hover-focus:var(--color-bus-light);--background-color-disabled:transparent;--color:var(--color-bus);--color-hover:var(--color-bus-dark);--color-focus:var(--color-bus);--color-hover-focus:var(--color-bus-dark);--color-disabled:var(--color-black-40)}.pagination_hds-button--supplementary__3Sxaw{--border-color:transparent;--border-color-hover:transparent;--border-color-focus:var(--color-focus-outline);--border-color-hover-focus:var(--color-focus-outline);--border-color-disabled:transparent;--focus-outline-color:transparent;--submit-input-focus-gutter-color:transparent}.pagination_hds-button--loading__3FhxW{--background-color:transparent;--background-color-hover:transparent;--background-color-focus:transparent;--background-color-hover-focus:transparent;--background-color-disabled:transparent;--border-color:transparent;--border-color-hover:transparent;--border-color-focus:transparent;--border-color-hover-focus:transparent;--border-color-disabled:transparent;--color:var(--color-black-90);--color-hover:var(--color-black-90);--color-focus:var(--color-black-90);--color-hover-focus:var(--color-black-90);--color-disabled:var(--color-black-90);cursor:wait}.pagination_hds-button--success__YPE42{--background-color:var(--color-success);--background-color-hover:var(--color-success-dark);--background-color-focus:var(--color-success);--background-color-hover-focus:var(--color-success-dark);--border-color:var(--color-success);--border-color-hover:var(--color-success-dark);--border-color-focus:var(--color-success);--border-color-hover-focus:var(--color-success-dark)}.pagination_hds-button--danger__2lQn3,.pagination_hds-button--success__YPE42{--color:var(--color-white);--color-hover:var(--color-white);--color-focus:var(--color-white);--color-hover-focus:var(--color-white);--focus-outline-color:var(--color-focus-outline)}.pagination_hds-button--danger__2lQn3{--background-color:var(--color-error);--background-color-hover:var(--color-error-dark);--background-color-focus:var(--color-error);--background-color-hover-focus:var(--color-error-dark);--border-color:var(--color-error);--border-color-hover:var(--color-error-dark);--border-color-focus:var(--color-error);--border-color-hover-focus:var(--color-error-dark)}.pagination_hds-button--primary__1slzh.pagination_hds-button--theme-coat__1LoSY{--background-color:var(--color-coat-of-arms);--background-color-hover:var(--color-coat-of-arms-dark);--background-color-focus:var(--color-coat-of-arms);--background-color-hover-focus:var(--color-coat-of-arms-dark);--border-color:var(--color-coat-of-arms);--border-color-hover:var(--color-coat-of-arms-dark);--border-color-focus:var(--color-coat-of-arms);--border-color-hover-focus:var(--color-coat-of-arms-dark);--color:var(--color-white);--color-hover:var(--color-white);--color-focus:var(--color-white);--color-hover-focus:var(--color-white)}.pagination_hds-button--secondary__1UmEB.pagination_hds-button--theme-coat__1LoSY{--border-color:var(--color-coat-of-arms);--border-color-hover:var(--color-coat-of-arms-dark);--border-color-focus:var(--color-coat-of-arms);--border-color-hover-focus:var(--color-coat-of-arms-dark)}.pagination_hds-button--secondary__1UmEB.pagination_hds-button--theme-coat__1LoSY,.pagination_hds-button--supplementary__3Sxaw.pagination_hds-button--theme-coat__1LoSY{--background-color:transparent;--background-color-hover:var(--color-coat-of-arms-light);--background-color-focus:transparent;--background-color-hover-focus:var(--color-coat-of-arms-light);--color:var(--color-coat-of-arms);--color-hover:var(--color-coat-of-arms);--color-focus:var(--color-coat-of-arms);--color-hover-focus:var(--color-coat-of-arms)}.pagination_hds-button--supplementary__3Sxaw.pagination_hds-button--theme-coat__1LoSY{--border-color:transparent;--border-color-hover:transparent;--border-color-focus:var(--color-focus-outline);--border-color-hover-focus:var(--color-focus-outline)}.pagination_hds-button--primary__1slzh.pagination_hds-button--theme-black__3SxEc{--background-color:var(--color-black);--background-color-hover:var(--color-black);--background-color-focus:var(--color-black);--background-color-hover-focus:var(--color-black);--border-color:var(--color-black);--border-color-hover:var(--color-black);--border-color-focus:var(--color-black);--border-color-hover-focus:var(--color-black);--color:var(--color-white);--color-hover:var(--color-white);--color-focus:var(--color-white);--color-hover-focus:var(--color-white)}.pagination_hds-button--secondary__1UmEB.pagination_hds-button--theme-black__3SxEc{--border-color:var(--color-black);--border-color-hover:var(--color-black);--border-color-focus:var(--color-black);--border-color-hover-focus:var(--color-black)}.pagination_hds-button--secondary__1UmEB.pagination_hds-button--theme-black__3SxEc,.pagination_hds-button--supplementary__3Sxaw.pagination_hds-button--theme-black__3SxEc{--background-color:transparent;--background-color-hover:var(--color-black-5);--background-color-focus:transparent;--background-color-hover-focus:var(--color-black-5);--color:var(--color-black);--color-hover:var(--color-black);--color-focus:var(--color-black);--color-hover-focus:var(--color-black)}.pagination_hds-button--supplementary__3Sxaw.pagination_hds-button--theme-black__3SxEc{--border-color:transparent;--border-color-hover:transparent;--border-color-focus:var(--color-focus-outline);--border-color-hover-focus:var(--color-focus-outline)}.pagination_hds-icon__2xNck{--icon-size:100%;background-color:currentcolor;display:inline-block;height:var(--icon-size);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:auto;mask-size:auto;width:var(--icon-size)}.pagination_hds-icon__2xNck.pagination_hds-icon--size-xs__CjXSz{--icon-size:var(--spacing-layout-2-xs)}.pagination_hds-icon__2xNck.pagination_hds-icon--size-s__3RA9y{--icon-size:var(--spacing-layout-xs)}.pagination_hds-icon__2xNck.pagination_hds-icon--size-m__1N6t0{--icon-size:var(--spacing-layout-s)}.pagination_hds-icon__2xNck.pagination_hds-icon--size-l__2jmWx{--icon-size:var(--spacing-layout-m)}.pagination_hds-icon__2xNck.pagination_hds-icon--size-xl__1-kUH{--icon-size:var(--spacing-layout-l)}.pagination_hds-icon--angle-right__Rs96-{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.5 12l-5-5L10 5.5l6.5 6.5-6.5 6.5L8.5 17l5-5z' fill='currentColor'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.5 12l-5-5L10 5.5l6.5 6.5-6.5 6.5L8.5 17l5-5z' fill='currentColor'/%3E%3C/svg%3E\")}.pagination_hds-icon--angle-left__FTtfY{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.5 12l5 5-1.5 1.5L7.5 12 14 5.5 15.5 7l-5 5z' fill='currentColor'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.5 12l5 5-1.5 1.5L7.5 12 14 5.5 15.5 7l-5 5z' fill='currentColor'/%3E%3C/svg%3E\")}.pagination_hds-pagination-container__1VSKQ{text-align:center}.pagination_hds-pagination__27cG_{display:inline-block;font-size:var(--fontsize-body-m);font-weight:700;line-height:var(--lineheight-l);position:relative;transform:scaleY(-1);--active-page-background-color:var(--color-black);--link-height:40px}.pagination_hds-pagination__27cG_:before{content:attr(data-next);content:attr(data-next)/\"\";display:block;float:right;line-height:56px;padding-left:80px;speak:never;visibility:hidden}.pagination_hds-pagination__27cG_ .pagination_hds-pagination__button-prev__2jMJV{float:left;margin-right:8px;transform:scaleY(-1);white-space:nowrap}.pagination_hds-pagination__27cG_ .pagination_hds-pagination__button-next__27KYr{position:absolute;right:0;top:0;transform:scaleY(-1);white-space:nowrap}.pagination_hds-pagination__pages__3VLjt{display:inline-flex;flex-wrap:wrap;grid-gap:var(--spacing-2-xs);gap:var(--spacing-2-xs);justify-content:center;list-style:none;margin-bottom:0;margin-top:8px;padding:0;transform:scaleY(-1)}.pagination_hds-pagination__item-link__2RWwS{align-items:center;border-radius:21px;color:var(--color-black-90);display:flex;height:var(--link-height);justify-content:center;min-width:32px;padding-left:var(--spacing-3-xs);padding-right:var(--spacing-3-xs);text-decoration:none}.pagination_hds-pagination__item-link__2RWwS:hover{text-decoration:underline}.pagination_hds-pagination__item-link__2RWwS:active,.pagination_hds-pagination__item-link__2RWwS:focus{outline:solid var(--color-focus-outline) 3px;outline-offset:1px}.pagination_hds-pagination__item-link__2RWwS.pagination_hds-pagination__item-link--active__2kPO_{background-color:var(--active-page-background-color);color:var(--color-white)}.pagination_hds-pagination__item-link__2RWwS.pagination_hds-pagination__item-link--active__2kPO_:hover{text-decoration:none}.pagination_hds-pagination__item-ellipsis__3I881{align-items:center;color:var(--color-black-90);display:flex;height:var(--link-height);justify-content:center;width:40px}.Pagination-module_container__yyY59 .Pagination-module_hideNextButton__3GdZ4:before{content:\"\";line-height:0;padding-left:0}.Pagination-module_pagination__kmXIf .Pagination-module_buttonNext__2K9q4 div{margin-right:var(--spacing-2-xs)}.Pagination-module_pagination__kmXIf .Pagination-module_buttonPrevious__11PbF div{margin-left:var(--spacing-2-xs)}.helpers_visually-hidden__2yHIV{border:0;clip:\"rect(0 0 0 0)\";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.helpers_button-reset__3h-7X{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.helpers_text-body__3Ktbd{color:var(--color-black-90);font-family:var(--font-default);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.helpers_text-medium__5kads{font-family:var(--font-default);font-weight:500}.helpers_text-bold__2hO0s{font-family:var(--font-default);font-weight:700}.helpers_text-xl__3r8PW{font-size:var(--fontsize-heading-m)}.helpers_text-lg__2vaNo{font-size:var(--fontsize-heading-s)}.helpers_text-md__2uXml{font-size:var(--fontsize-heading-xs)}.helpers_subtitle__3gee2{font-size:var(--fontsize-body-m)}.helpers_text-sm__3mxQW{font-size:var(--fontsize-body-s);line-height:var(--lineheight-xl)}.helpers_heading-xxl__1uNdU{font-size:var(--fontsize-heading-xxl);font-weight:400;letter-spacing:-1.2px;line-height:var(--lineheight-s)}.helpers_heading-xl__k-Z6c{font-size:var(--fontsize-heading-xl);font-weight:400;letter-spacing:-1px;line-height:var(--lineheight-s)}.helpers_heading-xl-mobile__1PMGL{font-size:var(--fontsize-heading-xl-mobile);font-weight:400;letter-spacing:-.8px;line-height:var(--lineheight-s)}.helpers_heading-l__2DLQU{font-size:var(--fontsize-heading-l);font-weight:400;letter-spacing:-.4px;line-height:var(--lineheight-s)}.helpers_heading-m__3vHem{font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-.2px;line-height:32px}.helpers_heading-s__1HNlW{font-size:var(--fontsize-heading-s);font-weight:500;letter-spacing:.2px;line-height:1.4}.helpers_heading-xs__23mRf{font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:.4px;line-height:1.33}.helpers_heading-xxs__1Tc8t{font-size:var(--fontsize-heading-xxs);font-weight:700;letter-spacing:.4px;line-height:var(--lineheight-l)}.helpers_helper-text__2eYfy{color:var(--color-black-60);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs)}.Linkbox-module_linkbox__15LUm{cursor:pointer;position:relative}.Linkbox-module_linkbox__15LUm:focus-within{outline:var(--color-coat-of-arms) 3px solid}.Linkbox-module_withBackground__1xdbp{background-color:var(--color-white)}.Linkbox-module_withoutBackground__2p7A4{background:transparent;padding-bottom:var(--spacing-2-xl)!important;padding-left:0!important;padding-right:0!important}.Linkbox-module_paddingWithoutImageAndWithBackground__xar7n{padding-top:var(--spacing-m)}.Linkbox-module_paddingWithoutImageAndWithoutBackground__1zCpz{padding:0}.Linkbox-module_withMediumImage__O0JFd,.Linkbox-module_withSmallImage__3E12M{padding-top:var(--spacing-s)}.Linkbox-module_withLargeImage__3M-5l{padding-top:var(--spacing-m)}.Linkbox-module_contentMedium__naQyB,.Linkbox-module_contentSmall__2WG1n{padding-bottom:var(--spacing-4-xl);padding-left:var(--spacing-s);padding-right:var(--spacing-s)}.Linkbox-module_contentLarge__1j0J8{padding-bottom:var(--spacing-5-xl);padding-left:var(--spacing-m);padding-right:var(--spacing-m)}.Linkbox-module_icon__1e7kG{bottom:var(--spacing-s);left:var(--spacing-s);position:absolute;vertical-align:bottom}.Linkbox-module_border__3lfzt{border:2px solid var(--color-black-90)}.Linkbox-module_border__3lfzt:focus-within{border:2px solid var(--color-black-90)!important;outline:var(--color-coat-of-arms) 3px solid}.Linkbox-module_border__3lfzt .Linkbox-module_contentMedium__naQyB,.Linkbox-module_border__3lfzt .Linkbox-module_contentSmall__2WG1n{padding-bottom:62px;padding-left:14px;padding-right:14px}.Linkbox-module_border__3lfzt .Linkbox-module_contentLarge__1j0J8{padding-bottom:70px;padding-left:22px;padding-right:22px}.Linkbox-module_border__3lfzt .Linkbox-module_icon__1e7kG{bottom:14px;left:14px}.Linkbox-module_border__3lfzt .Linkbox-module_paddingWithoutImageAndWithBackground__xar7n{padding-top:22px}.Linkbox-module_text__2lkl4{color:var(--color-black-90);font-family:var(--font-default);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-bottom:var(--spacing-s);margin-top:var(--spacing-2-xs)}.Linkbox-module_contentLarge__1j0J8 .Linkbox-module_text__2lkl4{margin-bottom:var(--spacing-m)}.Linkbox-module_headingSmall__1-9yw{padding-bottom:0}.Linkbox-module_headingLarge__1IWlD{padding-bottom:var(--spacing-2-xs)}.Linkbox-module_link__3tFuW{color:var(--color-black-90);display:inline-block;height:100%;left:0;line-height:var(--lineheight-l);position:absolute;top:0;width:100%}.Linkbox-module_link__3tFuW:focus{border:none;outline:none}.Linkbox-module_iconWhenNoBackground__3RJw_{bottom:0;left:0}.Linkbox-module_iconPositionForLinkboxLargeVariant__3vQvC{bottom:22px;left:22px}.Linkbox-module_image__2GxFx{display:block;height:auto;object-fit:contain;width:100%}.search-input_hds-icon__5eCQs{--icon-size:100%;background-color:currentcolor;display:inline-block;height:var(--icon-size);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:auto;mask-size:auto;width:var(--icon-size)}.search-input_hds-icon__5eCQs.search-input_hds-icon--size-xs__JNXQQ{--icon-size:var(--spacing-layout-2-xs)}.search-input_hds-icon__5eCQs.search-input_hds-icon--size-s__1UrrH{--icon-size:var(--spacing-layout-xs)}.search-input_hds-icon__5eCQs.search-input_hds-icon--size-m__2xJqk{--icon-size:var(--spacing-layout-s)}.search-input_hds-icon__5eCQs.search-input_hds-icon--size-l__9ZoGz{--icon-size:var(--spacing-layout-m)}.search-input_hds-icon__5eCQs.search-input_hds-icon--size-xl__33Ryp{--icon-size:var(--spacing-layout-l)}.search-input_hds-icon--search__1OHPF{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1a8 8 0 11-4.798 14.402l-6.401 6.4-1.591-1.59 6.398-6.4A8 8 0 0115 1zm0 2a6 6 0 100 12 6 6 0 000-12z' fill='currentColor'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1a8 8 0 11-4.798 14.402l-6.401 6.4-1.591-1.59 6.398-6.4A8 8 0 0115 1zm0 2a6 6 0 100 12 6 6 0 000-12z' fill='currentColor'/%3E%3C/svg%3E\")}.search-input_hds-search-input__3yDGf{--border-width:2px;--outline-width:3px;--input-height:56px;--helper-color-default:var(--color-black-60);--input-background-default:var(--color-white);--input-border-color-default:var(--color-black-50);--input-border-color-hover:var(--color-black-90);--input-border-color-focus:var(--color-black-90);--input-color-default:var(--color-black-90);--label-color-default:var(--color-black-90)}.search-input_hds-search-input__label__2XXxI{color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.search-input_hds-search-input__input-wrapper__2SHOr{display:flex;height:100%;position:relative}.search-input_hds-search-input__3yDGf .search-input_hds-search-input__input__3K908{-webkit-appearance:none;background-color:var(--input-background-default);border:var(--border-width) solid var(--input-border-color-default);box-sizing:border-box;color:var(--input-color-default);font-size:1.125em;height:var(--input-height);line-height:normal;padding:0 var(--spacing-s);width:100%}.search-input_hds-search-input__3yDGf .search-input_hds-search-input__input__3K908:hover{border-color:var(--input-border-color-hover);transition:border-color 85ms ease-out}.search-input_hds-search-input__3yDGf .search-input_hds-search-input__input__3K908:focus{border-color:var(--input-border-color-focus);outline:none}.search-input_hds-search-input__3yDGf .search-input_hds-search-input__input__3K908:not([readonly]):focus{outline:var(--outline-width) solid var(--color-focus-outline);transform:translateZ(0)}.search-input_hds-search-input__buttons__3PawT{align-items:center;bottom:0;display:flex;font-size:1rem;justify-content:center;margin-right:calc(var(--spacing-s) - var(--spacing-xs)/2);position:absolute;right:0;top:0}.search-input_hds-search-input__button__1-cj-{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;color:inherit;color:var(--dropdown-color-default);cursor:pointer;display:flex;font:inherit;outline:none;padding:var(--spacing-xs) calc(var(--spacing-xs)/2)}.search-input_hds-search-input__buttons__3PawT .search-input_hds-search-input__button__1-cj-:focus{outline:var(--outline-width) solid var(--color-focus-outline)}.search-input_hds-search-input__helper-text__25LCS{color:var(--helper-color-default);display:block;font-size:var(--fontsize-body-m);margin-top:var(--spacing-3-xs)}.SearchInput-module_button__z7NIp.SearchInput-module_hidden__OcXmJ,.SearchInput-module_input__Addns:not(:focus).SearchInput-module_hidden__OcXmJ{border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.SearchInput-module_wrapper__114JK:focus-within{box-shadow:0 0 0 var(--focus-outline-width) var(--focus-outline-color)}.SearchInput-module_root__sMwrY{--border-width:2px;--divider-width:1px;--focus-outline-width:3px;--dropdown-height:var(--spacing-3-xl);--menu-item-height:calc(var(--dropdown-height) - var(--border-width)*2);--icon-size:var(--spacing-m);--menu-z-index:10;--dropdown-background-default:var(--color-white);--dropdown-background-disabled:var(--color-black-10);--dropdown-border-color-default:var(--color-black-50);--dropdown-border-color-hover:var(--color-black-90);--dropdown-border-color-hover-invalid:var(--color-error-dark);--dropdown-border-color-focus:var(--color-black-90);--dropdown-border-color-invalid:var(--color-error);--dropdown-border-color-disabled:var(--color-black-10);--dropdown-color-default:var(--color-black-90);--dropdown-color-disabled:var(--color-black-40);--focus-outline-color:var(--color-focus-outline);--helper-color-invalid:var(--color-error);--menu-divider-color:var(--color-black-20);--menu-item-background-default:var(--color-white);--menu-item-background-hover:var(--color-bus);--menu-item-background-selected:var(--color-white);--menu-item-background-selected-hover:var(--color-bus);--menu-item-background-disabled:var(--color-white);--menu-item-color-default:var(--color-black-90);--menu-item-color-hover:var(--color-white);--menu-item-color-selected:var(--color-black-90);--menu-item-color-selected-hover:var(--color-white);--menu-item-color-disabled:var(--color-black-40);--menu-item-icon-color-selected:var(--color-white);--menu-item-icon-color-disabled:var(--color-black-40);--multiselect-checkbox-background-selected:var(--color-bus);--multiselect-checkbox-background-disabled:var(--color-black-10);--multiselect-checkbox-border-default:var(--color-black-50);--multiselect-checkbox-border-hover:var(--color-black-90);--multiselect-checkbox-border-disabled:var(--color-black-10);--multiselect-checkbox-color-default:transparent;--multiselect-checkbox-color-selected:var(--color-white);--multiselect-checkbox-color-selected-disabled:var(--color-white);--placeholder-color:var(--color-black-60);position:relative}.SearchInput-module_open__1zeft.SearchInput-module_root__sMwrY .SearchInput-module_angleIcon__1PdxN{transform:rotateX(180deg)}.SearchInput-module_open__1zeft.SearchInput-module_root__sMwrY .SearchInput-module_menu__2P8CO{display:block}.SearchInput-module_root__sMwrY input{font-family:inherit;margin:0;overflow:auto}.SearchInput-module_wrapper__114JK{background-color:var(--dropdown-background-default);border:var(--border-width) solid var(--dropdown-border-color-default);box-sizing:border-box;min-height:var(--dropdown-height);position:relative;width:100%}.SearchInput-module_wrapper__114JK:focus-within{border-color:var(--dropdown-border-color-focus)}.SearchInput-module_wrapper__114JK:hover{border-color:var(--dropdown-border-color-hover)}.SearchInput-module_wrapper__114JK:focus-within,.SearchInput-module_wrapper__114JK:hover{transition:border-color 85ms ease-out}.SearchInput-module_loadingSpinnerContainer__T6ZTc,.SearchInput-module_menu__2P8CO{border:solid var(--dropdown-border-color-focus);border-top-color:var(--menu-divider-color);border-width:var(--divider-width) var(--border-width) var(--border-width);bottom:0;display:none;left:0;list-style:none;margin:0;outline:none;overflow-y:auto;padding:0;position:absolute;transform:translate(calc(var(--border-width)*-1),100%);width:100%;z-index:var(--menu-z-index)}.SearchInput-module_menuItem__zIC_d{align-items:center;background-color:var(--menu-item-background-default);box-sizing:border-box;color:var(--menu-item-color-default);cursor:pointer;display:flex;font-size:var(--fontsize-body-l);justify-content:space-between;line-height:var(--lineheight-m);min-height:var(--menu-item-height);padding:var(--spacing-xs) var(--spacing-s)}.SearchInput-module_highlighted__3D7Hh.SearchInput-module_menuItem__zIC_d{background-color:var(--menu-item-background-hover);color:var(--menu-item-color-hover)}.SearchInput-module_selected__30K7a.SearchInput-module_menuItem__zIC_d{background-color:var(--menu-item-background-selected);color:var(--menu-item-color-selected)}.SearchInput-module_highlighted__3D7Hh.SearchInput-module_selected__30K7a.SearchInput-module_menuItem__zIC_d{background-color:var(--menu-item-background-selected-hover);color:var(--menu-item-color-selected-hover)}.SearchInput-module_disabled__akdv5.SearchInput-module_menuItem__zIC_d{background-color:var(--menu-item-background-disabled);color:var(--menu-item-color-disabled);cursor:not-allowed}.SearchInput-module_virtualized__xRfea.SearchInput-module_menuItem__zIC_d{left:0;position:absolute;top:0;width:100%}.SearchInput-module_root__sMwrY{--helper-color-default:var(--color-black-60)}.SearchInput-module_wrapper__114JK{align-items:center;display:flex}.SearchInput-module_button__z7NIp{color:var(--dropdown-color-default)}.SearchInput-module_button__z7NIp:focus.SearchInput-module_button__z7NIp:focus{outline:3px solid var(--color-focus-outline)}.SearchInput-module_searchIcon__l1_S4{color:var(--dropdown-color-default);display:flex}.SearchInput-module_input__Addns{align-self:stretch;appearance:none;background-color:var(--input-background-default);border:none;box-sizing:border-box;color:var(--input-color-default);font-size:var(--fontsize-body-l);height:var(--menu-item-height);outline:none;padding:0 calc(var(--spacing-l) + var(--icon-size)) 0 0;width:100%}.SearchInput-module_input__Addns:first-child{padding-left:var(--spacing-s)}.SearchInput-module_input__Addns.SearchInput-module_noToggle__2rf7Y{padding-right:var(--spacing-s)}.SearchInput-module_input__Addns::placeholder{color:var(--placeholder-color);line-height:normal}.SearchInput-module_input__Addns:disabled::placeholder{color:var(--dropdown-color-disabled)}.SearchInput-module_menuItem__zIC_d .SearchInput-module_highlighted__3D7Hh{font-weight:700}.SearchInput-module_menuItem__zIC_d .SearchInput-module_highlighted__3D7Hh mark{background:none;color:inherit;font-weight:400}.SearchInput-module_helperText__2AWSL{color:var(--helper-color-default);display:block;font-size:var(--fontsize-body-m);margin-top:var(--spacing-3-xs)}.SearchInput-module_loadingSpinnerContainer__T6ZTc{align-items:center;background-color:var(--menu-item-background-default);display:flex;flex-direction:column;padding:var(--spacing-m) 0;text-align:center}.SearchInput-module_loadingSpinner__3G_76{margin-bottom:var(--spacing-2-xs)}.Tabs-module_scrollButton__3ufhP button{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.Tabs-module_tabs__2Ww5F{--tablist-border-color:var(--color-black-20);--tablist-border-size:1px;--tab-color:var(--color-bus);--tab-font-size:var(--fontsize-body-m);--tab-height:48px;--tab-min-width:148px;--tab-spacing:var(--spacing-s);--tab-active-border-size:5px;--tab-active-border-color:var(--color-bus);--tab-focus-outline-size:2px;--tab-focus-outline-color:var(--color-coat-of-arms)}.Tabs-module_tabs__2Ww5F.Tabs-module_small__1d6Xt{--tab-min-width:0;--tab-font-size:var(--fontsize-body-s);--tab-active-border-size:3px}.Tabs-module_tablistBar__elMv9{display:flex;flex-direction:row}.Tabs-module_scrollButton__3ufhP{align-items:center;color:var(--tab-color);display:flex;justify-content:center;margin-bottom:var(--tablist-border-size);position:relative;width:26px}.Tabs-module_scrollButton__3ufhP:before{background:var(--tablist-border-color);bottom:0;content:\"\";height:var(--tablist-border-size);position:absolute;width:100%;z-index:100}.Tabs-module_scrollButton__3ufhP button{align-items:center;border:var(--tab-focus-outline-size) solid transparent;border-radius:unset;box-sizing:border-box;display:inline-flex;height:26px;justify-content:center;overflow:hidden;width:100%}.Tabs-module_scrollButton__3ufhP button:focus{border:var(--tab-focus-outline-size) solid var(--tab-focus-outline-color);outline:none}.Tabs-module_tablist__1iuDO{box-sizing:border-box;flex-grow:1;margin-bottom:-1px;overflow-x:hidden;position:relative}.Tabs-module_tablist__1iuDO ul{box-sizing:border-box;list-style:none;margin:0;padding:0;padding:var(--tab-focus-outline-size) 0;white-space:nowrap}.Tabs-module_tab__3oOoX{display:inline-block;margin:0;outline:none;padding:0}.Tabs-module_tab__3oOoX span{align-items:center;box-sizing:border-box;color:var(--tab-color);cursor:pointer;display:flex;font-size:var(--tab-font-size);height:var(--tab-height);justify-content:center;margin:0;min-width:var(--tab-min-width);padding:0;padding-left:var(--tab-spacing);padding-right:var(--tab-spacing);position:relative}.Tabs-module_tab__3oOoX span:before{background:var(--tablist-border-color);bottom:0;content:\"\";height:var(--tablist-border-size);position:absolute;width:100%;z-index:100}.Tabs-module_tab__3oOoX:focus span{outline:none}.Tabs-module_tab__3oOoX:focus span:after{--size:calc(100% + var(--tab-focus-outline-size)*2);border:var(--tab-focus-outline-size) solid var(--tab-focus-outline-color);box-sizing:border-box;content:\"\";height:var(--size);left:0;outline:none;position:absolute;top:calc(var(--tab-focus-outline-size)*-1);width:100%;z-index:200}.Tabs-module_tab__3oOoX.Tabs-module_active__1Ic3B span:before{background-color:var(--tab-active-border-color);bottom:0;content:\"\";height:var(--tab-active-border-size);position:absolute;width:100%;z-index:100}.TimeInput-module_fullInput__w1g3j,.TimeInput-module_partialInput__1wN8K{font-family:inherit;font-size:100%;line-height:1.15;margin:0}.TimeInput-module_partialInputLabel__30tUk{border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.TimeInput-module_timeInputFrame__gax8Y{align-items:center;display:inline-flex;padding:0 calc(var(--spacing-s) - 3px)}.TimeInput-module_timeInputFrame__gax8Y.TimeInput-module_disabled__23DEW{background-color:var(--input-background-disabled);border-color:var(--input-border-color-disabled);color:var(--input-color-disabled);cursor:not-allowed}.TimeInput-module_timeInputFrame__gax8Y.TimeInput-module_disabled__23DEW:hover{border-color:var(--input-border-color-disabled)}.TimeInput-module_fullInput__w1g3j{height:0;opacity:0;overflow:hidden;pointer-events:none;position:absolute;width:0}.TimeInput-module_divider__7JLmX,.TimeInput-module_partialInput__1wN8K{appearance:none;background:transparent;border:0;box-sizing:border-box;color:var(--input-color-default);font-size:1.125rem;line-height:normal;padding:0}.TimeInput-module_partialInput__1wN8K{overflow:visible;padding:0;text-align:center;width:1.4rem;will-change:transform,box-shadow}.TimeInput-module_partialInput__1wN8K:focus{box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);outline:none;transform:translateZ(0)}.TimeInput-module_partialInput__1wN8K:focus::placeholder{opacity:0}.TimeInput-module_divider__7JLmX{display:inline-block;margin:0 5px;pointer-events:none;width:auto}.TimeInput-module_input__1KAUR.TimeInput-module_disabled__23DEW .TimeInput-module_divider__7JLmX,.TimeInput-module_input__1KAUR.TimeInput-module_disabled__23DEW .TimeInput-module_partialInput__1wN8K{background-color:var(--input-background-disabled);border-color:var(--input-border-color-disabled);color:var(--input-color-disabled);cursor:not-allowed}.status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}.SideNavigation-module_sideNavigation__3X-9P{--side-navigation-background-color:var(--color-white);--side-navigation-active-indicator-background-color:var(--color-bus);--side-navigation-icon-size:var(--spacing-m);--side-navigation-level-border-color:var(--color-white);--side-navigation-level-border-color-focus:var(--color-coat-of-arms);--side-navigation-level-border-color-hover:var(--color-black-5);--side-navigation-level-border-width:2px;--side-navigation-level-background-color:var(--color-white);--side-navigation-level-background-color-active:var(--color-black-5);--side-navigation-level-background-color-hover:var(--color-black-5);--side-navigation-level-color:var(--color-black);--side-navigation-level-color-active:var(--color-black);--side-navigation-level-color-hover:var(--color-black);--side-navigation-level-inset:var(--spacing-s);--side-navigation-mobile-menu-border-color:var(--color-black);--side-navigation-mobile-menu-border-width:2px;--side-navigation-mobile-menu-z-index:100;background-color:var(--side-navigation-background-color);box-sizing:border-box;position:relative}@media only screen and (min-width:768px){.SideNavigation-module_sideNavigation__3X-9P{height:100%}}@media only screen and (min-width:768px){.SideNavigation-module_toggleButton__10tXH{display:none}}.SideNavigation-module_mainLevelList__SLZKQ{list-style:none;margin:0;padding:0}@media only screen and (max-width:767.98px){.SideNavigation-module_mainLevelList__SLZKQ{max-height:0;overflow:hidden}.SideNavigation-module_mainLevelList__SLZKQ.SideNavigation-module_open__2QF0h{background-color:var(--side-navigation-background-color);border:var(--side-navigation-mobile-menu-border-width) solid var(--side-navigation-mobile-menu-border-color);max-height:none;will-change:max-height}}@media only screen and (min-width:768px){.SideNavigation-module_mainLevelList__SLZKQ{display:block}}.selection-group_hds-selection-group__2bwsd{--spacing-col:1.25rem;--spacing-row:var(--spacing-s);--label-color-default:var(--color-black-90);--icon-size:var(--spacing-m);border:0;padding:0}.selection-group_hds-selection-group__2bwsd>:not(.selection-group_hds-selection-group__items__21yOL){float:left}.selection-group_hds-selection-group__legend__149U2{box-sizing:border-box;color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-row);max-width:100%;padding:0;white-space:normal}.selection-group_hds-selection-group__required__3XPYK{color:var(--label-color-default);display:inline-block;font-size:var(--fontsize-body-xl);line-height:1;margin-left:var(--spacing-2-xs);transform:translateY(var(--spacing-3-xs))}.selection-group_hds-selection-group__items__21yOL{clear:left;display:grid;grid-gap:var(--spacing-row) var(--spacing-col);gap:var(--spacing-row) var(--spacing-col);justify-content:start}.selection-group_hds-selection-group__items--vertical__1v39g{grid-auto-flow:row}.selection-group_hds-selection-group__items--horizontal__3-_1w{grid-auto-flow:column}.selection-group_hds-selection-group__error-text__1Ynb9{color:var(--color-error);display:block;font-size:var(--fontsize-body-m);margin-top:var(--spacing-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.selection-group_hds-selection-group__error-text__1Ynb9:before{background:var(--color-error);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.helpers_visually-hidden__8xzsB{border:0;clip:\"rect(0 0 0 0)\";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.helpers_button-reset__D5XBg{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.helpers_text-body__kuwbN{color:var(--color-black-90);font-family:var(--font-default);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.helpers_text-medium__3yuel{font-family:var(--font-default);font-weight:500}.helpers_text-bold__2m1Nh{font-family:var(--font-default);font-weight:700}.helpers_text-xl__3Q3g5{font-size:var(--fontsize-heading-m)}.helpers_text-lg__3N-Yu{font-size:var(--fontsize-heading-s)}.helpers_text-md__1iyYX{font-size:var(--fontsize-heading-xs)}.helpers_subtitle__28FvQ{font-size:var(--fontsize-body-m)}.helpers_text-sm__OuSWo{font-size:var(--fontsize-body-s);line-height:var(--lineheight-xl)}.helpers_heading-xxl__1KMqh{font-size:var(--fontsize-heading-xxl);font-weight:400;letter-spacing:-1.2px;line-height:var(--lineheight-s)}.helpers_heading-xl__G41Bl{font-size:var(--fontsize-heading-xl);font-weight:400;letter-spacing:-1px;line-height:var(--lineheight-s)}.helpers_heading-xl-mobile__uKZqQ{font-size:var(--fontsize-heading-xl-mobile);font-weight:400;letter-spacing:-.8px;line-height:var(--lineheight-s)}.helpers_heading-l__29CXO{font-size:var(--fontsize-heading-l);font-weight:400;letter-spacing:-.4px;line-height:var(--lineheight-s)}.helpers_heading-m__16IDL{font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-.2px;line-height:32px}.helpers_heading-s__17rm-{font-size:var(--fontsize-heading-s);font-weight:500;letter-spacing:.2px;line-height:1.4}.helpers_heading-xs__rPz00{font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:.4px;line-height:1.33}.helpers_heading-xxs__Onkxt{font-size:var(--fontsize-heading-xxs);font-weight:700;letter-spacing:.4px;line-height:var(--lineheight-l)}.helpers_helper-text__3QI7A{color:var(--color-black-60);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs)}.SelectionGroup-module_label__qlluz{color:var(--label-color-default,var(--color-black-90));display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.SelectionGroup-module_selectionGroup__6Jxu8{--spacing-col:1.25rem;--spacing-row:var(--spacing-s);--label-color-default:var(--color-black-90);--icon-size:var(--spacing-m);border:0;padding:0}.SelectionGroup-module_selectionGroup__6Jxu8>:not(.SelectionGroup-module_items__28m_S){float:left}.SelectionGroup-module_label__qlluz{margin-bottom:var(--spacing-row);padding:0}.SelectionGroup-module_items__28m_S{clear:left;display:grid;gap:var(--spacing-row) var(--spacing-col);justify-content:start}.SelectionGroup-module_items__28m_S.SelectionGroup-module_vertical__3iorC{grid-auto-flow:row}.SelectionGroup-module_items__28m_S.SelectionGroup-module_horizontal__2eiY9{grid-auto-flow:column}.SelectionGroup-module_tooltipButton__2ibjm{margin-left:var(--spacing-2-xs)}.ToggleButton-module_toggleButton__1-KAF{font-family:inherit;font-size:100%;line-height:1.15;margin:0}.ToggleButton-module_label__1dFTc{color:var(--label-color-default,var(--color-black-90));display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.ToggleButton-module_toggleButtonContainer__2YMDa{--toggle-button-color:var(--color-bus);--toggle-button-hover-color:var(--color-bus-dark);--toggle-button-unselected-color:var(--color-black-90)}.ToggleButton-module_onIcon__29twM{color:#fff;opacity:0}.ToggleButton-module_offIcon__bWWxh{color:var(--toggle-button-unselected-color);opacity:1}.ToggleButton-module_toggleButton__1-KAF{background:#fff;border:2px solid var(--toggle-button-unselected-color);border-radius:20px;cursor:pointer;display:inline-block;height:32px;inset:0;position:relative;transition:all .2s;width:56px}.ToggleButton-module_toggleButton__1-KAF:after{border-radius:25px;content:\"\";display:block;inset:-7px;position:absolute}.ToggleButton-module_toggleButton__1-KAF:focus{outline:none}.ToggleButton-module_toggleButton__1-KAF:focus:after{border:3px solid var(--color-coat-of-arms);box-sizing:content-box}.ToggleButton-module_toggleButton__1-KAF[aria-pressed=true]{background-color:var(--toggle-button-color);border-color:var(--toggle-button-color)}.ToggleButton-module_toggleButton__1-KAF[aria-pressed=true]:hover{background-color:var(--toggle-button-hover-color);border-color:var(--toggle-button-hover-color)}.ToggleButton-module_toggleButton__1-KAF[aria-pressed=true][disabled],.ToggleButton-module_toggleButton__1-KAF[aria-pressed=true][disabled]:hover{background-color:var(--color-black-10);border-color:var(--color-black-10)}.ToggleButton-module_toggleButton__1-KAF[aria-pressed=true] .ToggleButton-module_onIcon__29twM{margin-left:24px!important;opacity:1}.ToggleButton-module_toggleButton__1-KAF[aria-pressed=true] .ToggleButton-module_offIcon__bWWxh{margin-left:24px!important;opacity:0}.ToggleButton-module_toggleButton__1-KAF[disabled],.ToggleButton-module_toggleButton__1-KAF[disabled]:hover{border-color:var(--color-black-20);cursor:not-allowed}.ToggleButton-module_toggleButton__1-KAF[disabled] .ToggleButton-module_offIcon__bWWxh,.ToggleButton-module_toggleButton__1-KAF[disabled]:hover .ToggleButton-module_offIcon__bWWxh{color:var(--color-black-10)}.ToggleButton-module_toggleButtonContainerInlineVariant__1YSw9{align-items:center;display:flex;flex-wrap:wrap}.ToggleButton-module_toggleButtonContainerInlineVariant__1YSw9 .ToggleButton-module_label__1dFTc{margin-bottom:0}.ToggleButton-module_toggleButtonContainerInlineVariant__1YSw9 .ToggleButton-module_toggleButton__1-KAF{margin-left:auto}.ToggleButton-module_labelContainer__xg3OB{align-items:flex-start;display:flex}.ToggleButton-module_tooltipButton__1F3Sx{display:block;margin-left:var(--spacing-2-xs)}.ToggleButton-module_toggleButtonIcon__RXT8O{cursor:pointer;left:-2px;position:absolute;top:-2px;transition:all .2s}.Tooltip-module_button__2x9m0{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.Tooltip-module_root__1Yo9t{--button-focus-outline-width:3px;--button-focus-outline-color:var(--color-coat-of-arms);--tooltip-arrow-size:8px;--tooltip-background:var(--color-coat-of-arms-light);--tooltip-border-color:var(--color-coat-of-arms);--tooltip-spacing-default:var(--spacing-s);--tooltip-spacing-small:var(--spacing-3-xs) var(--spacing-2-xs)}.Tooltip-module_tooltip__3x8S8{background-color:var(--tooltip-background);font-size:var(--fontsize-body-s);font-weight:400;line-height:24px;max-width:21.875rem;padding:var(--tooltip-spacing-default);z-index:1000}.Tooltip-module_boxShadow__3IzE-{box-shadow:var(--box-shadow-s)}.Tooltip-module_small__29mxd{padding:var(--tooltip-spacing-small)}.Tooltip-module_button__2x9m0>span{display:flex}.Tooltip-module_button__2x9m0:focus{box-shadow:0 0 0 var(--button-focus-outline-width) var(--button-focus-outline-color);outline:none}.Tooltip-module_tooltip__3x8S8[data-popper-placement^=bottom]{border-top:8px solid var(--tooltip-border-color)}.Tooltip-module_tooltip__3x8S8[data-popper-placement^=top]{border-bottom:8px solid var(--tooltip-border-color)}.Tooltip-module_tooltip__3x8S8[data-popper-placement^=left]{border-right:8px solid var(--tooltip-border-color)}.Tooltip-module_tooltip__3x8S8[data-popper-placement^=right]{border-left:8px solid var(--tooltip-border-color)}.Tooltip-module_tooltip__3x8S8 .Tooltip-module_arrow__210Rd{position:absolute}.Tooltip-module_tooltip__3x8S8[data-popper-placement^=bottom] .Tooltip-module_arrow__210Rd{border:var(--tooltip-arrow-size) solid transparent;border-bottom:var(--tooltip-arrow-size) solid var(--tooltip-border-color);top:calc(var(--tooltip-spacing-default)*-1 - var(--tooltip-arrow-size))}.Tooltip-module_tooltip__3x8S8[data-popper-placement^=top] .Tooltip-module_arrow__210Rd{border:var(--tooltip-arrow-size) solid transparent;border-top:var(--tooltip-arrow-size) solid var(--tooltip-border-color);bottom:calc(var(--tooltip-spacing-default)*-1 - var(--tooltip-arrow-size))}.Tooltip-module_tooltip__3x8S8[data-popper-placement^=left] .Tooltip-module_arrow__210Rd{border:var(--tooltip-arrow-size) solid transparent;border-left:var(--tooltip-arrow-size) solid var(--tooltip-border-color);right:calc(var(--tooltip-spacing-default)*-1 - var(--tooltip-arrow-size))}.Tooltip-module_tooltip__3x8S8[data-popper-placement^=right] .Tooltip-module_arrow__210Rd{border:var(--tooltip-arrow-size) solid transparent;border-right:var(--tooltip-arrow-size) solid var(--tooltip-border-color);left:calc(var(--tooltip-spacing-default)*-1 - var(--tooltip-arrow-size))}.helpers_visually-hidden__2-1w5{border:0;clip:\"rect(0 0 0 0)\";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.helpers_button-reset__pnX2v{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.helpers_text-body__M8y8G{color:var(--color-black-90);font-family:var(--font-default);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.helpers_text-medium__1_L74{font-family:var(--font-default);font-weight:500}.helpers_text-bold__280xr{font-family:var(--font-default);font-weight:700}.helpers_text-xl__2ojJT{font-size:var(--fontsize-heading-m)}.helpers_text-lg__2PYVI{font-size:var(--fontsize-heading-s)}.helpers_text-md__1Iyod{font-size:var(--fontsize-heading-xs)}.helpers_subtitle__3LFb6{font-size:var(--fontsize-body-m)}.helpers_text-sm__3txMR{font-size:var(--fontsize-body-s);line-height:var(--lineheight-xl)}.helpers_heading-xxl__3v6Ao{font-size:var(--fontsize-heading-xxl);font-weight:400;letter-spacing:-1.2px;line-height:var(--lineheight-s)}.helpers_heading-xl__3KfQm{font-size:var(--fontsize-heading-xl);font-weight:400;letter-spacing:-1px;line-height:var(--lineheight-s)}.helpers_heading-xl-mobile__3j-7b{font-size:var(--fontsize-heading-xl-mobile);font-weight:400;letter-spacing:-.8px;line-height:var(--lineheight-s)}.helpers_heading-l__2uC7A{font-size:var(--fontsize-heading-l);font-weight:400;letter-spacing:-.4px;line-height:var(--lineheight-s)}.helpers_heading-m__1HM0E{font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-.2px;line-height:32px}.helpers_heading-s__1CUUr{font-size:var(--fontsize-heading-s);font-weight:500;letter-spacing:.2px;line-height:1.4}.helpers_heading-xs__3v3Lg{font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:.4px;line-height:1.33}.helpers_heading-xxs__uXGc-{font-size:var(--fontsize-heading-xxs);font-weight:700;letter-spacing:.4px;line-height:var(--lineheight-l)}.helpers_helper-text__4m81c{color:var(--color-black-60);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs)}.Stepper-module_scrollButton__3V4LM button{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.Stepper-module_step__sJ_fq{font-family:inherit;font-size:100%;line-height:1.15;margin:0}.Stepper-module_stepperContainer__2sBZh{background-color:var(--hds-stepper-background-color);position:relative;--hds-stepper-color:var(--color-bus);--hds-stepper-background-color:var(--color-white);--hds-stepper-disabled-color:var(--color-black-20);--hds-selected-step-label-color:var(--color-black-90);--hds-not-selected-step-label-color:var(--color-bus);--hds-step-background-color:var(--color-white);--hds-step-content-color:var(--color-bus);--hds-stepper-focus-border-color:var(--color-coat-of-arms);--hds-step-width:120px;--circle-container-size:36px;--progress-line-height:2px}.Stepper-module_stepper__W0Ugt{align-items:flex-start;display:flex;justify-content:space-between;overflow:scroll;-ms-overflow-style:none;position:relative;scroll-behavior:smooth;scrollbar-width:none;width:100%}.Stepper-module_stepper__W0Ugt:focus{outline:var(--hds-stepper-focus-border-color) 3px solid}.Stepper-module_stepper__W0Ugt::-webkit-scrollbar{display:none}.Stepper-module_stepper__W0Ugt.Stepper-module_small__2k5x8{--hds-step-width:44px}.Stepper-module_stepContainer__3jt3J{background-color:var(--hds-stepper-background-color);box-sizing:border-box;display:flex;flex-shrink:0;justify-content:center;padding:3px;width:var(--hds-step-width)}.Stepper-module_label__V9Nx6{color:var(--hds-not-selected-step-label-color);font-size:var(--fontsize-body-m);font-weight:500;line-height:var(--lineheight-l);margin-bottom:0;margin-top:6px;padding-left:var(--spacing-4-xs);padding-right:var(--spacing-4-xs);text-decoration:underline}.Stepper-module_disabled__sxc_0 .Stepper-module_label__V9Nx6{color:var(--hds-stepper-disabled-color);text-decoration:none}.Stepper-module_circle__2sJm2{align-items:center;background-color:var(--hds-step-background-color);border:2px solid var(--hds-stepper-color);border-radius:16px;color:var(--hds-step-content-color);display:flex;height:28px;justify-content:center;outline:2px solid var(--hds-stepper-background-color);text-align:center;width:28px}.Stepper-module_disabled__sxc_0 .Stepper-module_circle__2sJm2{background-color:var(--hds-stepper-background-color);border:2px solid var(--hds-stepper-disabled-color);color:var(--hds-stepper-disabled-color)}.Stepper-module_selected__3yhqv .Stepper-module_circle__2sJm2{border:4px solid var(--hds-stepper-color);border-radius:18px;outline:none}.Stepper-module_selected__3yhqv .Stepper-module_label__V9Nx6{color:var(--hds-selected-step-label-color);font-weight:700;text-decoration:none}.Stepper-module_completedContainer__1Ko_a{background-color:var(--hds-stepper-color);border-radius:16px;outline:2px solid var(--hds-stepper-background-color);padding:4px}.Stepper-module_completedContainer__1Ko_a .Stepper-module_completedIcon__2UDJK{color:var(--hds-step-background-color);vertical-align:middle}.Stepper-module_step__sJ_fq{align-items:center;appearance:none;background:transparent;border:0;color:var(--hds-stepper-color);cursor:pointer;display:flex;flex-direction:column;height:100%;justify-content:center;outline:none;overflow:visible;padding:0;position:relative}.Stepper-module_step__sJ_fq:focus .Stepper-module_circle__2sJm2,.Stepper-module_step__sJ_fq:focus .Stepper-module_completedContainer__1Ko_a,.Stepper-module_step__sJ_fq:focus .Stepper-module_label__V9Nx6{outline:2px solid var(--hds-stepper-focus-border-color)}.Stepper-module_step__sJ_fq:focus-visible{outline:none}.Stepper-module_step__sJ_fq.Stepper-module_disabled__sxc_0{color:var(--hds-stepper-disabled-color);cursor:not-allowed}.Stepper-module_number__2bmDN{font-size:var(--fontsize-body-m);font-weight:500;line-height:1.15}.Stepper-module_circleContainer__VIzlQ{align-items:center;display:flex;height:var(--circle-container-size);justify-content:center;width:var(--circle-container-size);z-index:2}.Stepper-module_line__2-_Vl{display:inline;height:var(--progress-line-height);left:calc(var(--hds-step-width)/2);line-height:var(--lineheight-l);position:absolute;transform:translateY(calc(var(--circle-container-size)/2 + var(--progress-line-height)/2));z-index:1}.Stepper-module_line__2-_Vl .Stepper-module_disabledLine__3Rc9w{display:inline-block;height:100%;position:relative;top:-15px;background-color:var(--hds-stepper-disabled-color)}.Stepper-module_line__2-_Vl .Stepper-module_enabledLine__2oFd_{display:inline-block;height:100%;position:relative;top:-15px;background-color:var(--hds-stepper-color)}.Stepper-module_heading__ZC5kr{margin-top:26px;width:fit-content}.Stepper-module_heading__ZC5kr:focus{border:none;outline:3px solid var(--hds-stepper-focus-border-color)}.Stepper-module_scrollButton__3V4LM{background-color:var(--hds-stepper-background-color);color:var(--hds-stepper-color);position:absolute;top:3px;z-index:10}.Stepper-module_scrollButton__3V4LM button{align-items:center;border:2px solid transparent;border-radius:unset;box-sizing:border-box;display:inline-flex;justify-content:center;overflow:hidden;width:100%}.Stepper-module_scrollButton__3V4LM button:focus{border:2px solid var(--hds-stepper-focus-border-color);outline:none}.Stepper-module_scrollButton__3V4LM.Stepper-module_scrollButtonPrevious__1LF1O{left:0}.Stepper-module_scrollButton__3V4LM.Stepper-module_scrollButtonNext__2OvI-{right:0}.table_hds-table-container__24SMd{overflow-x:auto}.table_hds-table-container__24SMd:focus{outline:var(--color-focus-outline) 3px solid}.table_hds-table__nft5d{--content-background-color:var(--color-white);border-collapse:collapse;line-height:1.5;width:100%}.table_hds-table__nft5d th{border-bottom:1px solid var(--color-black-20);font-size:var(--fontsize-body-m);font-weight:500;line-height:var(--lineheight-l);padding:var(--spacing-xs) var(--spacing-m);text-align:left;white-space:nowrap}.table_hds-table__content--text-align-td-right__3e6Sl td{text-align:right}.table_hds-table__content__3WvvL tr td{background-color:var(--content-background-color);border-bottom:1px solid var(--color-black-50);color:var(--color-black-90);font-size:var(--fontsize-body-m);font-weight:400;line-height:24px;padding:var(--spacing-xs) var(--spacing-m)}.table_hds-table__header-row__2UlyP{background-color:var(--header-background-color)}.table_hds-table__caption__2oBXN{font-size:var(--fontsize-body-l);font-weight:400;line-height:var(--lineheight-l);margin-bottom:var(--spacing-s);text-align:left}.table_hds-table--dark__1xzjv{--header-background-color:var(--color-bus)}.table_hds-table__nft5d.table_hds-table--dark__1xzjv th{color:var(--color-white)}.table_hds-table--light__3dLcZ{--header-background-color:var(--color-silver)}.table_hds-table__nft5d.table_hds-table--light__3dLcZ th{color:var(--color-black-90)}.table_hds-table--with-vertical-lines__nfbv_ .table_hds-table__content__3WvvL td{border-right:1px solid var(--color-black-50)}.table_hds-table--dense__s0iM1.table_hds-table__nft5d th{font-weight:700}.table_hds-table--dense__s0iM1 .table_hds-table__content__3WvvL tr td,.table_hds-table--dense__s0iM1.table_hds-table__nft5d th{font-size:var(--fontsize-body-s);padding:9px var(--spacing-s)}.table_hds-table--dense__s0iM1 .table_hds-table__caption__2oBXN{font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-bottom:var(--spacing-xs)}.table_hds-table--zebra__3wT9z .table_hds-table__content__3WvvL tr td{border-bottom:none}.table_hds-table--zebra__3wT9z .table_hds-table__content__3WvvL tr:nth-child(2n) td{background-color:var(--color-black-10)}.table_hds-table--with-vertical-lines__nfbv_ .table_hds-table__content__3WvvL{border-left:1px solid var(--color-black-50)}.table_hds-table--with-vertical-lines__nfbv_ .table_hds-table__header-row__2UlyP{border-left:1px solid var(--header-background-color);border-right:1px solid var(--header-background-color)}.table_hds-table__vertical-header-column__AQVBI{background-color:var(--header-background-color)}.table_hds-table--with-vertical-header__2z-_1.table_hds-table--with-vertical-lines__nfbv_ .table_hds-table__content__3WvvL,.table_hds-table--with-vertical-lines__nfbv_.table_hds-table--with-vertical-header__2z-_1 .table_hds-table__header-row__2UlyP{border-left:none}@media (max-width:767px){.table_hds-table__nft5d th{font-weight:700}.table_hds-table__content__3WvvL tr td,.table_hds-table__nft5d th{font-size:var(--fontsize-body-s);padding:9px var(--spacing-s)}.table_hds-table__caption__2oBXN{font-size:var(--fontsize-heading-xxs);line-height:var(--lineheight-l);margin-bottom:var(--spacing-xs)}}.table_hds-table--text-align-right__3mRmM{text-align:right}.Table-module_sortButton__12PQy{font-family:inherit;font-size:100%;line-height:1.15;margin:0}.Table-module_table__3pIAR{--content-background-color:var(--color-white)}.Table-module_table__3pIAR.Table-module_dark__3WxCw th{color:var(--color-white)}.Table-module_table__3pIAR.Table-module_light__3eGYC th{color:var(--color-black-90)}.Table-module_table__3pIAR .Table-module_checkbox__1IroH label{padding-left:0}.Table-module_container__1CPuY{height:inherit}.Table-module_sortButton__12PQy{align-items:center;appearance:none;background:transparent;border:0;cursor:pointer;display:flex;font-weight:500;height:100%;justify-content:center;overflow:hidden;padding:0}.Table-module_sortButton__12PQy .Table-module_sortIcon__2wYim{margin-left:10px}.Table-module_sortButton__12PQy:focus{outline:3px solid var(--color-white)}.Table-module_dark__3WxCw .Table-module_sortButton__12PQy{color:var(--color-white)}.Table-module_light__3eGYC .Table-module_sortButton__12PQy{color:var(--color-black-90)}.Table-module_dense__NnaBV .Table-module_sortButton__12PQy{font-size:var(--fontsize-body-s);font-weight:700}.Table-module_dark__3WxCw .Table-module_sortButton__12PQy:focus{outline:3px solid var(--color-white)}.Table-module_light__3eGYC .Table-module_sortButton__12PQy:focus{outline:3px solid var(--color-coat-of-arms)}.Table-module_dark__3WxCw{--header-background-color:var(--color-bus)}.Table-module_light__3eGYC{--header-background-color:var(--color-silver)}.Table-module_dense__NnaBV .Table-module_headerRow__1P1Ko .Table-module_sortingHeader__1eKrV{padding-bottom:7.5px!important;padding-top:7.5px!important}@media only screen and (max-width:767.98px){.Table-module_sortButton__12PQy{font-size:var(--fontsize-body-s);font-weight:700}.Table-module_table__3pIAR .Table-module_headerRow__1P1Ko .Table-module_sortingHeader__1eKrV{padding-bottom:7.5px;padding-top:7.5px}}.Table-module_sortColumnCell__1kfUB{align-items:center;display:flex}.Table-module_checkboxHeader__1fPYK{border-bottom:1px solid var(--color-black-20)}.Table-module_checkboxData__3TIG1{width:24px}.Table-module_actionContainer__2_TPi{align-items:flex-end;display:flex;flex-flow:row wrap;gap:var(--spacing-xs);justify-content:space-between;margin-bottom:var(--spacing-xs)}.Table-module_actionContainer__2_TPi .Table-module_heading__bGL4h{font-size:24px;font-weight:700;line-height:29px}.Table-module_actionContainer__2_TPi .Table-module_actionButtonContainer__qU3dF{display:flex;flex-wrap:wrap;gap:var(--spacing-2-xs)}.Table-module_actionContainer__2_TPi .Table-module_actionButton__3z2CX{flex-grow:0}@media only screen and (max-width:575.98px){.Table-module_actionContainer__2_TPi .Table-module_actionButton__3z2CX,.Table-module_actionContainer__2_TPi .Table-module_actionButtonContainer__qU3dF,.Table-module_actionContainer__2_TPi .Table-module_heading__bGL4h{width:100%}}.tag_hds-icon__2LFMT{--icon-size:100%;background-color:currentcolor;display:inline-block;height:var(--icon-size);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:auto;mask-size:auto;width:var(--icon-size)}.tag_hds-icon__2LFMT.tag_hds-icon--size-xs__L1nV_{--icon-size:var(--spacing-layout-2-xs)}.tag_hds-icon__2LFMT.tag_hds-icon--size-s__23CMA{--icon-size:var(--spacing-layout-xs)}.tag_hds-icon__2LFMT.tag_hds-icon--size-m__2zCBY{--icon-size:var(--spacing-layout-s)}.tag_hds-icon__2LFMT.tag_hds-icon--size-l__UuAMZ{--icon-size:var(--spacing-layout-m)}.tag_hds-icon__2LFMT.tag_hds-icon--size-xl__2f_bT{--icon-size:var(--spacing-layout-l)}.tag_hds-icon--cross__2tq88{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18 7.5L13.5 12l4.5 4.5-1.5 1.5-4.5-4.5L7.5 18 6 16.5l4.5-4.5L6 7.5 7.5 6l4.5 4.5L16.5 6 18 7.5z' fill='currentColor'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18 7.5L13.5 12l4.5 4.5-1.5 1.5-4.5-4.5L7.5 18 6 16.5l4.5-4.5L6 7.5 7.5 6l4.5 4.5L16.5 6 18 7.5z' fill='currentColor'/%3E%3C/svg%3E\")}.tag_hds-tag__3MKf3{--tag-background:var(--color-black-10);--tag-color:var(--color-black-90);--tag-font-size-large:var(--fontsize-body-m);--tag-font-size:var(--fontsize-body-s);--tag-height-large:48px;--tag-height:32px;--tag-line-height:var(--lineheight-xl);--tag-padding-large:10px 20px;--tag-padding:4px 12px;--tag-spacing-large:var(--spacing-s);--tag-spacing:var(--spacing-xs);align-items:center;background-color:var(--tag-background);border-radius:calc(var(--tag-height)/2);box-sizing:border-box;color:var(--tag-color);display:inline-flex;flex-direction:row;font-size:var(--tag-font-size);grid-gap:var(--spacing-2-xs);gap:var(--spacing-2-xs);justify-content:center;line-height:var(--tag-line-height);min-height:var(--tag-height);outline:none;padding:var(--tag-padding)}.tag_hds-tag--large__1bVs5{--tag-font-size:var(--tag-font-size-large);--tag-height:var(--tag-height-large);--tag-line-height:var(--lineheight-l);--tag-padding:var(--tag-padding-large);--tag-spacing:var(--tag-spacing-large)}.tag_hds-tag__3MKf3:focus,.tag_hds-tag__3MKf3:focus-within{box-shadow:0 0 0 3px var(--color-focus-outline)}.tag_hds-tag__3MKf3[tabindex=\"0\"]{cursor:pointer}.tag_hds-tag__delete-button__33Tgz{display:flex;flex-shrink:0;height:var(--spacing-m);margin:0 calc(0px - var(--spacing-3-xs));outline:none;width:var(--spacing-m)}.Tag-module_deleteButton__1diMR{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.Tag-module_visuallyHidden__3xPWW{border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.step-by-step_hds-step-by-step__container__3ENCq{position:relative}.step-by-step_hds-step-by-step__container__3ENCq h1{font-size:2em;margin:.67em 0}.step-by-step_hds-step-by-step__steps-container__3gYZa{--title-font-size:var(--fontsize-heading-m);--title-line-height:var(--lineheight-xl);counter-reset:item;margin:0;padding:0}ol.step-by-step_hds-step-by-step__steps-container__3gYZa{--circle-size:48px;--step-left-padding:96px}.step-by-step_hds-step-by-step__step-item__2bods:after,.step-by-step_hds-step-by-step__step-item__2bods:before{box-sizing:border-box;content:\"\";display:block;left:calc(var(--circle-size)/2 + var(--step-left-padding)/2);position:absolute;top:calc(var(--spacing-l) + var(--title-font-size)*var(--title-line-height)/2 - var(--circle-size)/2)}.step-by-step_hds-step-by-step__step-item__2bods:after{background-color:#fff;border:3px solid #000;border-radius:50%;height:var(--circle-size);transform:translateX(-100%);width:var(--circle-size);z-index:2}ol.step-by-step_hds-step-by-step__steps-container__3gYZa .step-by-step_hds-step-by-step__step-item__2bods:after{--line-height:1.3;align-items:center;content:counter(item);counter-increment:item;display:flex;font-size:1.25rem;font-weight:500;justify-content:center;line-height:var(--line-height)}.step-by-step_hds-step-by-step__step-item__2bods{background-color:var(--color-coat-of-arms-light);list-style:none;margin:var(--spacing-l) 0;position:relative}.step-by-step_hds-step-by-step__step-item__2bods,ol.step-by-step_hds-step-by-step__steps-container__3gYZa .step-by-step_hds-step-by-step__step-item__2bods{padding:var(--spacing-l) var(--spacing-l) var(--spacing-l) var(--step-left-padding)}ul.step-by-step_hds-step-by-step__steps-container__3gYZa{--circle-size:18px;--step-left-padding:var(--spacing-5-xl)}.step-by-step_hds-step-by-step__step-item-title__3vW57{font-size:var(--title-font-size);font-weight:500;line-height:var(--title-line-height);margin:0 0 16px}.step-by-step_hds-step-by-step__step-item__2bods:before{background-color:#000;height:calc(100% + var(--spacing-l));transform:translateX(-50%) translateX(calc(var(--circle-size)*-0.5));width:2px;z-index:1}.step-by-step_hds-step-by-step__step-item__2bods:last-of-type:before{display:none}.StepByStep-module_container__2EXO7{position:relative}.Combobox-module_button__1W9PN{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.Combobox-module_button__1W9PN.Combobox-module_hidden__kvDZZ,.Combobox-module_input__Dcmdn:not(:focus).Combobox-module_hidden__kvDZZ,.Combobox-module_multiselect__3vNbJ .Combobox-module_multiselectIconAndInputWrapper__Jnd9s:not(:focus-within).Combobox-module_hidden__kvDZZ{border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.Combobox-module_multiselect__3vNbJ .Combobox-module_menuItem__ydo3T.Combobox-module_highlighted__12UOf .Combobox-module_checkbox____J7P,.Combobox-module_multiselect__3vNbJ .Combobox-module_menuItem__ydo3T.Combobox-module_highlighted__12UOf.Combobox-module_selected__30nbv .Combobox-module_checkbox____J7P,.Combobox-module_wrapper__3kVTg:focus-within{box-shadow:0 0 0 var(--focus-outline-width) var(--focus-outline-color)}.Combobox-module_root__Hs8Hg{--border-width:2px;--divider-width:1px;--focus-outline-width:3px;--dropdown-height:var(--spacing-3-xl);--menu-item-height:calc(var(--dropdown-height) - var(--border-width)*2);--icon-size:var(--spacing-m);--menu-z-index:10;--dropdown-background-default:var(--color-white);--dropdown-background-disabled:var(--color-black-10);--dropdown-border-color-default:var(--color-black-50);--dropdown-border-color-hover:var(--color-black-90);--dropdown-border-color-hover-invalid:var(--color-error-dark);--dropdown-border-color-focus:var(--color-black-90);--dropdown-border-color-invalid:var(--color-error);--dropdown-border-color-disabled:var(--color-black-10);--dropdown-color-default:var(--color-black-90);--dropdown-color-disabled:var(--color-black-40);--focus-outline-color:var(--color-focus-outline);--helper-color-default:var(--color-black-60);--helper-color-invalid:var(--color-error);--menu-divider-color:var(--color-black-20);--menu-item-background-default:var(--color-white);--menu-item-background-hover:var(--color-bus);--menu-item-background-selected:var(--color-white);--menu-item-background-selected-hover:var(--color-bus);--menu-item-background-disabled:var(--color-white);--menu-item-color-default:var(--color-black-90);--menu-item-color-hover:var(--color-white);--menu-item-color-selected:var(--color-black-90);--menu-item-color-selected-hover:var(--color-white);--menu-item-color-disabled:var(--color-black-40);--menu-item-icon-color-selected:var(--color-white);--menu-item-icon-color-disabled:var(--color-black-40);--multiselect-checkbox-background-selected:var(--color-bus);--multiselect-checkbox-background-disabled:var(--color-black-10);--multiselect-checkbox-border-default:var(--color-black-50);--multiselect-checkbox-border-hover:var(--color-black-90);--multiselect-checkbox-border-disabled:var(--color-black-10);--multiselect-checkbox-color-default:transparent;--multiselect-checkbox-color-selected:var(--color-white);--multiselect-checkbox-color-selected-disabled:var(--color-white);--placeholder-color:var(--color-black-60);position:relative}.Combobox-module_open__MBBSi.Combobox-module_root__Hs8Hg .Combobox-module_angleIcon__10DvA{transform:rotateX(180deg)}.Combobox-module_open__MBBSi.Combobox-module_root__Hs8Hg .Combobox-module_menu__3jA0e{display:block}.Combobox-module_root__Hs8Hg input{font-family:inherit;margin:0;overflow:auto}.Combobox-module_wrapper__3kVTg{background-color:var(--dropdown-background-default);border:var(--border-width) solid var(--dropdown-border-color-default);box-sizing:border-box;min-height:var(--dropdown-height);position:relative;width:100%}.Combobox-module_wrapper__3kVTg:focus-within{border-color:var(--dropdown-border-color-focus)}.Combobox-module_wrapper__3kVTg:hover{border-color:var(--dropdown-border-color-hover)}.Combobox-module_wrapper__3kVTg:focus-within,.Combobox-module_wrapper__3kVTg:hover{transition:border-color 85ms ease-out}.Combobox-module_icon__3tOcB{color:var(--dropdown-color-default);display:flex;margin-right:var(--spacing-2-xs)}.Combobox-module_button__1W9PN{position:absolute;right:var(--spacing-s);top:var(--spacing-xs);transform:translateY(2px)}.Combobox-module_menu__3jA0e{border:solid var(--dropdown-border-color-focus);border-top-color:var(--menu-divider-color);border-width:var(--divider-width) var(--border-width) var(--border-width);bottom:0;display:none;left:0;list-style:none;margin:0;outline:none;overflow-y:auto;padding:0;position:absolute;transform:translate(calc(var(--border-width)*-1),100%);width:100%;z-index:var(--menu-z-index)}.Combobox-module_menuItem__ydo3T{align-items:center;background-color:var(--menu-item-background-default);box-sizing:border-box;color:var(--menu-item-color-default);cursor:pointer;display:flex;font-size:var(--fontsize-body-l);justify-content:space-between;line-height:var(--lineheight-m);min-height:var(--menu-item-height);padding:var(--spacing-xs) var(--spacing-s)}.Combobox-module_highlighted__12UOf.Combobox-module_menuItem__ydo3T{background-color:var(--menu-item-background-hover);color:var(--menu-item-color-hover)}.Combobox-module_selected__30nbv.Combobox-module_menuItem__ydo3T{background-color:var(--menu-item-background-selected);color:var(--menu-item-color-selected)}.Combobox-module_highlighted__12UOf.Combobox-module_selected__30nbv.Combobox-module_menuItem__ydo3T{background-color:var(--menu-item-background-selected-hover);color:var(--menu-item-color-selected-hover)}.Combobox-module_disabled__11PlF.Combobox-module_menuItem__ydo3T{background-color:var(--menu-item-background-disabled);color:var(--menu-item-color-disabled);cursor:not-allowed}.Combobox-module_virtualized__25LXa.Combobox-module_menuItem__ydo3T{left:0;position:absolute;top:0;width:100%}.Combobox-module_helperText__1qPYf{color:var(--helper-color-default);margin-top:var(--spacing-3-xs)}.Combobox-module_disabled__11PlF .Combobox-module_wrapper__3kVTg{background-color:var(--dropdown-background-disabled);border-color:var(--dropdown-border-color-disabled);color:var(--dropdown-color-disabled)}.Combobox-module_disabled__11PlF .Combobox-module_wrapper__3kVTg,.Combobox-module_disabled__11PlF .Combobox-module_wrapper__3kVTg>*{cursor:not-allowed}.Combobox-module_disabled__11PlF .Combobox-module_angleIcon__10DvA,.Combobox-module_disabled__11PlF .Combobox-module_icon__3tOcB{color:var(--dropdown-color-disabled)}.Combobox-module_invalid__8xyxV .Combobox-module_wrapper__3kVTg{border-color:var(--dropdown-border-color-invalid)}.Combobox-module_invalid__8xyxV .Combobox-module_wrapper__3kVTg:hover{border-color:var(--dropdown-border-color-hover-invalid)}.Combobox-module_invalid__8xyxV .Combobox-module_errorText__F29sh{align-items:center;color:var(--helper-color-invalid);display:flex;margin-top:var(--spacing-3-xs)}.Combobox-module_invalid__8xyxV .Combobox-module_invalidIcon__A760K{margin-right:var(--spacing-2-xs)}.Combobox-module_multiselect__3vNbJ .Combobox-module_menuItem__ydo3T{justify-content:flex-start}.Combobox-module_multiselect__3vNbJ .Combobox-module_menuItem__ydo3T.Combobox-module_highlighted__12UOf,.Combobox-module_multiselect__3vNbJ .Combobox-module_menuItem__ydo3T.Combobox-module_highlighted__12UOf.Combobox-module_selected__30nbv,.Combobox-module_multiselect__3vNbJ .Combobox-module_menuItem__ydo3T.Combobox-module_selected__30nbv{background-color:var(--menu-item-background-default);color:var(--menu-item-color-default)}.Combobox-module_multiselect__3vNbJ .Combobox-module_menuItem__ydo3T .Combobox-module_checkbox____J7P{border:var(--spacing-4-xs) solid var(--multiselect-checkbox-border-default);box-sizing:border-box;color:var(--multiselect-checkbox-color-default);height:var(--icon-size);margin-right:var(--spacing-xs);width:var(--icon-size)}.Combobox-module_multiselect__3vNbJ .Combobox-module_menuItem__ydo3T.Combobox-module_disabled__11PlF .Combobox-module_checkbox____J7P,.Combobox-module_multiselect__3vNbJ .Combobox-module_menuItem__ydo3T.Combobox-module_highlighted__12UOf .Combobox-module_checkbox____J7P{transition:border-color 85ms ease-out}.Combobox-module_multiselect__3vNbJ .Combobox-module_menuItem__ydo3T.Combobox-module_highlighted__12UOf .Combobox-module_checkbox____J7P{border-color:var(--multiselect-checkbox-border-hover)}.Combobox-module_multiselect__3vNbJ .Combobox-module_menuItem__ydo3T.Combobox-module_selected__30nbv .Combobox-module_checkbox____J7P{background-color:var(--multiselect-checkbox-background-selected);border:0;color:var(--multiselect-checkbox-color-selected)}.Combobox-module_multiselect__3vNbJ .Combobox-module_menuItem__ydo3T.Combobox-module_disabled__11PlF .Combobox-module_checkbox____J7P{background-color:var(--multiselect-checkbox-background-disabled);border-color:var(--multiselect-checkbox-border-disabled)}.Combobox-module_multiselect__3vNbJ .Combobox-module_menuItem__ydo3T.Combobox-module_disabled__11PlF.Combobox-module_selected__30nbv .Combobox-module_checkbox____J7P{color:var(--multiselect-checkbox-color-selected-disabled)}.Combobox-module_wrapper__3kVTg{align-items:center;display:flex}.Combobox-module_wrapper__3kVTg.Combobox-module_wrapperWithMultiSelectAndIcon__1YTgh{align-items:flex-start}.Combobox-module_button__1W9PN{color:var(--dropdown-color-default);display:flex;outline:none}.Combobox-module_icon__3tOcB{margin-left:var(--spacing-s)}.Combobox-module_input__Dcmdn{align-self:stretch;appearance:none;background-color:var(--input-background-default);border:none;box-sizing:border-box;color:var(--input-color-default);font-size:var(--fontsize-body-l);height:var(--menu-item-height);outline:none;padding:0 calc(var(--spacing-l) + var(--icon-size)) 0 0;width:100%}.Combobox-module_input__Dcmdn:first-child{padding-left:var(--spacing-s)}.Combobox-module_input__Dcmdn.Combobox-module_noToggle__1DCEd{padding-right:var(--spacing-s)}.Combobox-module_input__Dcmdn.Combobox-module_noToggle__1DCEd.Combobox-module_withClearButton__3Eol3{padding-right:calc(var(--spacing-l) + var(--icon-size))}.Combobox-module_input__Dcmdn.Combobox-module_withClearButton__3Eol3{padding-right:calc(var(--spacing-2-xl) + var(--icon-size))}.Combobox-module_input__Dcmdn::placeholder{color:var(--placeholder-color);opacity:1}.Combobox-module_input__Dcmdn:disabled::placeholder{color:var(--dropdown-color-disabled)}.Combobox-module_multiselect__3vNbJ .Combobox-module_wrapper__3kVTg{flex-direction:column}.Combobox-module_multiselect__3vNbJ .Combobox-module_selectedItems__2W0JL{align-self:stretch}.Combobox-module_multiselect__3vNbJ .Combobox-module_input__Dcmdn{align-self:unset;padding:0 calc(var(--spacing-l) + var(--icon-size)) 0 var(--spacing-s)}.Combobox-module_multiselect__3vNbJ .Combobox-module_input__Dcmdn.Combobox-module_noToggle__1DCEd{padding-right:var(--spacing-s)}.Combobox-module_multiselect__3vNbJ .Combobox-module_input__Dcmdn.Combobox-module_adjustSpacing__3O3Pe{margin-top:calc(var(--spacing-2-xs)*-1);padding:0 var(--spacing-s)}.Combobox-module_multiselect__3vNbJ .Combobox-module_inputWithIcon__3_F2e.Combobox-module_inputWithIcon__3_F2e{padding-left:0}.Combobox-module_multiselect__3vNbJ .Combobox-module_multiselectIconAndInputWrapper__Jnd9s{align-items:center;display:flex;flex-direction:row}.Combobox-module_multiselect__3vNbJ .Combobox-module_multiselectIconAndInputWrapper__Jnd9s .Combobox-module_icon__3tOcB.Combobox-module_adjustSpacingForIcon__38NQd{margin-top:calc(var(--spacing-2-xs)*-1)}.helpers_visually-hidden__2Qwo3{border:0;clip:\"rect(0 0 0 0)\";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.helpers_button-reset__3CUTO{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.helpers_text-body__32LvA{color:var(--color-black-90);font-family:var(--font-default);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.helpers_text-medium__1FL3H{font-family:var(--font-default);font-weight:500}.helpers_text-bold__27qeO{font-family:var(--font-default);font-weight:700}.helpers_text-xl__1SsX7{font-size:var(--fontsize-heading-m)}.helpers_text-lg__3G-IT{font-size:var(--fontsize-heading-s)}.helpers_text-md__mZGnz{font-size:var(--fontsize-heading-xs)}.helpers_subtitle__3l42Z{font-size:var(--fontsize-body-m)}.helpers_text-sm__3RQnh{font-size:var(--fontsize-body-s);line-height:var(--lineheight-xl)}.helpers_heading-xxl___0erl{font-size:var(--fontsize-heading-xxl);font-weight:400;letter-spacing:-1.2px;line-height:var(--lineheight-s)}.helpers_heading-xl__qqgBd{font-size:var(--fontsize-heading-xl);font-weight:400;letter-spacing:-1px;line-height:var(--lineheight-s)}.helpers_heading-xl-mobile__OjRix{font-size:var(--fontsize-heading-xl-mobile);font-weight:400;letter-spacing:-.8px;line-height:var(--lineheight-s)}.helpers_heading-l__2_FMY{font-size:var(--fontsize-heading-l);font-weight:400;letter-spacing:-.4px;line-height:var(--lineheight-s)}.helpers_heading-m__9vrUW{font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-.2px;line-height:32px}.helpers_heading-s__pR_fi{font-size:var(--fontsize-heading-s);font-weight:500;letter-spacing:.2px;line-height:1.4}.helpers_heading-xs__3Gk4X{font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:.4px;line-height:1.33}.helpers_heading-xxs__2g2cO{font-size:var(--fontsize-heading-xxs);font-weight:700;letter-spacing:.4px;line-height:var(--lineheight-l)}.helpers_helper-text__17nzy{color:var(--color-black-60);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs)}.CookieConsent-module_accordionButton__3R8Nn{font-family:inherit;font-size:100%;line-height:1.15;margin:0}.CookieConsent-module_container__1b4Lz{--common-spacing:var(--spacing-s);bottom:0;left:0;position:fixed;width:100vw;z-index:999}.CookieConsent-module_aligner__31kOx{background:var(--color-white);border-top:8px solid var(--color-bus);bottom:0;max-height:80vh;overflow-y:auto;position:absolute;width:100%;z-index:2}.CookieConsent-module_container__1b4Lz .CookieConsent-module_aligner__31kOx{transform:translateY(100%);transition:transform 1s}.CookieConsent-module_container__1b4Lz.CookieConsent-module_animateIn__3XGst .CookieConsent-module_aligner__31kOx{transform:translateY(0)}.CookieConsent-module_page__1BCN2{--common-spacing:var(--spacing-s)}.CookieConsent-module_buttons__4uWoN{display:flex;flex-direction:column;width:100%}.CookieConsent-module_buttons__4uWoN>:first-child{margin-right:var(--common-spacing)}.CookieConsent-module_buttons__4uWoN>*{margin:0 0 var(--common-spacing) 0;width:100%}.CookieConsent-module_emulatedH1__11RtZ{display:block;outline:none;padding:0}.CookieConsent-module_emulatedH1__11RtZ:focus{box-shadow:0 0 0 var(--outline-width) var(--focus-outline-color);transform:translateZ(0)}.CookieConsent-module_emulatedH2__3BlmG{display:block;padding:1.2em 0 .5em}.CookieConsent-module_content__3QPI4{--focus-outline-color:var(--color-focus-outline);--outline-width:3px;box-sizing:border-box;margin:0 auto;padding-left:var(--spacing-layout-2-xs);padding-right:var(--spacing-layout-2-xs);padding-top:var(--common-spacing);position:relative;width:100%}.CookieConsent-module_content__3QPI4 .CookieConsent-module_emulatedH1__11RtZ,.CookieConsent-module_content__3QPI4 .CookieConsent-module_emulatedH2__3BlmG,.CookieConsent-module_content__3QPI4 p{max-width:860px}@media (min-width:768px){.CookieConsent-module_content__3QPI4{padding-left:var(--spacing-layout-xs);padding-right:var(--spacing-layout-xs)}}@media (min-width:1248px){.CookieConsent-module_content__3QPI4{max-width:var(--container-width-xl);padding-left:0;padding-right:0}}.CookieConsent-module_page__1BCN2 .CookieConsent-module_content__3QPI4{padding-bottom:0;padding-top:0}.CookieConsent-module_languageSwitcher__3yGdW{left:calc(var(--common-spacing) - var(--spacing-3-xs));position:absolute;top:var(--common-spacing)}.CookieConsent-module_languageDropdown__1aINI{position:relative;right:unset}.CookieConsent-module_languageDropdown__1aINI button{padding-top:0}.CookieConsent-module_languageDropdown__1aINI.CookieConsent-module_languageDropdown__1aINI{--menu-button-focus-outline-color:var(--color-coat-of-arms)}.CookieConsent-module_languageDropdown__1aINI.CookieConsent-module_languageDropdown__1aINI>div{left:0;right:unset}@media (max-width:768px){.CookieConsent-module_languageDropdown__1aINI{position:absolute}}.CookieConsent-module_mainContent__35KR_,.CookieConsent-module_textContent__1H03u{padding:0}.CookieConsent-module_textContent__1H03u>p{padding-bottom:var(--spacing-l)}.CookieConsent-module_mainContent__35KR_{padding-top:calc(var(--common-spacing)*2)}.CookieConsent-module_emulatedH2__3BlmG+p{margin:0}.CookieConsent-module_list__145_H{list-style:none;margin:0;padding-left:0}.CookieConsent-module_accordionButton__3R8Nn{align-items:center;background:transparent;border:none;color:var(--color-bus);color:var(--color-black-90);cursor:pointer;display:flex;outline:none;text-decoration:underline;text-decoration:none}.CookieConsent-module_accordionButton__3R8Nn:focus{box-shadow:0 0 0 var(--outline-width) var(--focus-outline-color);transform:translateZ(0)}.CookieConsent-module_detailsAccordionButton__1IpgB{margin-left:3px;padding:var(--spacing-xs);padding-left:0}.CookieConsent-module_detailsAccordionButton__1IpgB span{padding-left:var(--spacing-3-xs)}.CookieConsent-module_accordionButtonSettingsClosed__hjrTJ{margin-bottom:var(--common-spacing)}.CookieConsent-module_consentCategory__iJprz{display:flex;flex-direction:column;padding-bottom:var(--spacing-l)}.CookieConsent-module_consentCategory__iJprz>p{margin-bottom:0}.CookieConsent-module_consentGroup__2i8Av{border-bottom:1px solid var(--color-black);display:flex;flex-direction:column;margin-left:0;padding:var(--spacing-m) 0;position:relative}.CookieConsent-module_consentGroupContent__1x4Uq{display:flex;flex-direction:column;padding:0}.CookieConsent-module_consentGroupContent__1x4Uq p{margin:0;padding:var(--spacing-m) 0 0}.CookieConsent-module_consentGroupContent__1x4Uq button{outline:none;padding:var(--spacing-3-xs);position:absolute;right:0;top:var(--spacing-m)}.CookieConsent-module_consentGroupContent__1x4Uq button:focus{box-shadow:0 0 0 var(--outline-width) var(--focus-outline-color);transform:translateZ(0)}.CookieConsent-module_titleWithCheckbox__1QVs0{display:flex;margin-right:var(--spacing-2-xl)}.CookieConsent-module_container__1b4Lz .CookieConsent-module_content__3QPI4 .CookieConsent-module_consentCategory__iJprz .CookieConsent-module_titleWithCheckbox__1QVs0 label,.CookieConsent-module_page__1BCN2 .CookieConsent-module_content__3QPI4 .CookieConsent-module_consentCategory__iJprz .CookieConsent-module_titleWithCheckbox__1QVs0 label{color:var(--color-black);font-weight:500}.CookieConsent-module_dataTableContainer__1cErs{border-left:1px solid var(--color-black);border-right:1px solid var(--color-black);margin:var(--spacing-l) 0 var(--spacing-xs)}.CookieConsent-module_dataTableContainer__1cErs table tbody tr>*{min-width:120px;vertical-align:top;width:20%;word-break:break-word}.CookieConsent-module_dataTableContainer__1cErs table tbody tr>:nth-child(3){width:40%}.CookieConsent-module_saveNotification__GROzc{margin-bottom:var(--spacing-xl)}.CookieConsent-module_readMoreButton__IPfMG{display:none}.CookieConsent-module_shrinkOnBlur__2FwjP:not(:focus-within){--common-spacing:var(--spacing-xs);outline:none;padding-bottom:var(--common-spacing);padding-top:var(--common-spacing)}.CookieConsent-module_shrinkOnBlur__2FwjP:not(:focus-within) .CookieConsent-module_visuallyHiddenWithoutFocus__3M4c4{clip-path:inset(0 0 0 0);display:block;height:1px;left:-1000px;line-height:0;opacity:0;overflow:hidden;position:absolute;width:1px}.CookieConsent-module_shrinkOnBlur__2FwjP:not(:focus-within) .CookieConsent-module_hiddenWithoutFocus__3CScq{display:none}.CookieConsent-module_shrinkOnBlur__2FwjP:not(:focus-within) .CookieConsent-module_mainContent__35KR_{align-items:flex-start;display:flex;flex-direction:column;padding-top:0}.CookieConsent-module_shrinkOnBlur__2FwjP:not(:focus-within) .CookieConsent-module_mainContent__35KR_ .CookieConsent-module_emulatedH1__11RtZ{font-size:var(--fontsize-heading-xs);margin-right:0}.CookieConsent-module_shrinkOnBlur__2FwjP:not(:focus-within) .CookieConsent-module_mainContent__35KR_ .CookieConsent-module_readMoreButton__IPfMG{display:flex;padding:var(--common-spacing) 0 0}.CookieConsent-module_shrinkOnBlur__2FwjP:not(:focus-within) .CookieConsent-module_mainContent__35KR_ .CookieConsent-module_readMoreButton__IPfMG span{padding-right:var(--spacing-xs)}@media (min-width:768px){.CookieConsent-module_shrinkOnBlur__2FwjP:not(:focus-within){--common-spacing:var(--spacing-l)}.CookieConsent-module_shrinkOnBlur__2FwjP:not(:focus-within) .CookieConsent-module_mainContent__35KR_{align-items:center;flex-direction:row;justify-content:space-between}.CookieConsent-module_shrinkOnBlur__2FwjP:not(:focus-within) .CookieConsent-module_mainContent__35KR_ .CookieConsent-module_emulatedH1__11RtZ{font-size:var(--fontsize-heading-s)}.CookieConsent-module_shrinkOnBlur__2FwjP:not(:focus-within) .CookieConsent-module_mainContent__35KR_ .CookieConsent-module_readMoreButton__IPfMG{line-height:var(--fontsize-heading-s);padding:0 var(--spacing-xs)}}@media (min-width:768px){.CookieConsent-module_container__1b4Lz,.CookieConsent-module_page__1BCN2{--common-spacing:var(--spacing-l)}.CookieConsent-module_languageSwitcher__3yGdW{left:unset;padding-top:15px;right:var(--common-spacing);top:calc(var(--common-spacing) + 4px)}.CookieConsent-module_mainContent__35KR_{padding-top:0}.CookieConsent-module_textContent__1H03u>p{padding-bottom:var(--spacing-2-xl)}.CookieConsent-module_content__3QPI4 .CookieConsent-module_emulatedH1__11RtZ{margin-right:200px}.CookieConsent-module_consentCategory__iJprz{padding-bottom:var(--spacing-2-xl)}.CookieConsent-module_consentGroup__2i8Av{margin-left:var(--spacing-s);padding:var(--spacing-l) 0}.CookieConsent-module_consentGroupContent__1x4Uq p{padding:var(--spacing-l) 0 0}.CookieConsent-module_buttons__4uWoN{flex-direction:row}.CookieConsent-module_buttons__4uWoN>*{width:auto}}.Select-module_button__1aIsm{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.Select-module_multiselect__fxewG .Select-module_button__1aIsm:focus:not(:active) .Select-module_angleIcon__2-9AD,.Select-module_multiselect__fxewG .Select-module_menuItem__3bgv5.Select-module_highlighted__2lpqn .Select-module_checkbox__22SQm,.Select-module_multiselect__fxewG .Select-module_menuItem__3bgv5.Select-module_highlighted__2lpqn.Select-module_selected__1tL2u .Select-module_checkbox__22SQm,.Select-module_wrapper__1WQXs:focus-within{box-shadow:0 0 0 var(--focus-outline-width) var(--focus-outline-color)}.Select-module_root__Ka5uO{--border-width:2px;--divider-width:1px;--focus-outline-width:3px;--dropdown-height:var(--spacing-3-xl);--menu-item-height:calc(var(--dropdown-height) - var(--border-width)*2);--icon-size:var(--spacing-m);--menu-z-index:10;--dropdown-background-default:var(--color-white);--dropdown-background-disabled:var(--color-black-10);--dropdown-border-color-default:var(--color-black-50);--dropdown-border-color-hover:var(--color-black-90);--dropdown-border-color-hover-invalid:var(--color-error-dark);--dropdown-border-color-focus:var(--color-black-90);--dropdown-border-color-invalid:var(--color-error);--dropdown-border-color-disabled:var(--color-black-10);--dropdown-color-default:var(--color-black-90);--dropdown-color-disabled:var(--color-black-40);--focus-outline-color:var(--color-focus-outline);--helper-color-default:var(--color-black-60);--helper-color-invalid:var(--color-error);--menu-divider-color:var(--color-black-20);--menu-item-background-default:var(--color-white);--menu-item-background-hover:var(--color-bus);--menu-item-background-selected:var(--color-white);--menu-item-background-selected-hover:var(--color-bus);--menu-item-background-disabled:var(--color-white);--menu-item-color-default:var(--color-black-90);--menu-item-color-hover:var(--color-white);--menu-item-color-selected:var(--color-black-90);--menu-item-color-selected-hover:var(--color-white);--menu-item-color-disabled:var(--color-black-40);--menu-item-icon-color-selected:var(--color-white);--menu-item-icon-color-disabled:var(--color-black-40);--multiselect-checkbox-background-selected:var(--color-bus);--multiselect-checkbox-background-disabled:var(--color-black-10);--multiselect-checkbox-border-default:var(--color-black-50);--multiselect-checkbox-border-hover:var(--color-black-90);--multiselect-checkbox-border-disabled:var(--color-black-10);--multiselect-checkbox-color-default:transparent;--multiselect-checkbox-color-selected:var(--color-white);--multiselect-checkbox-color-selected-disabled:var(--color-white);--placeholder-color:var(--color-black-60);position:relative}.Select-module_open__2jpqY.Select-module_root__Ka5uO .Select-module_angleIcon__2-9AD{transform:rotateX(180deg)}.Select-module_open__2jpqY.Select-module_root__Ka5uO .Select-module_menu__1H2aU{display:block}.Select-module_root__Ka5uO input{font-family:inherit;margin:0;overflow:auto}.Select-module_wrapper__1WQXs{background-color:var(--dropdown-background-default);border:var(--border-width) solid var(--dropdown-border-color-default);box-sizing:border-box;min-height:var(--dropdown-height);position:relative;width:100%}.Select-module_wrapper__1WQXs:focus-within{border-color:var(--dropdown-border-color-focus)}.Select-module_wrapper__1WQXs:hover{border-color:var(--dropdown-border-color-hover)}.Select-module_wrapper__1WQXs:focus-within,.Select-module_wrapper__1WQXs:hover{transition:border-color 85ms ease-out}.Select-module_icon___tUDP{color:var(--dropdown-color-default);display:flex;margin-right:var(--spacing-2-xs)}.Select-module_angleIcon__2-9AD{color:var(--dropdown-color-default);position:absolute;right:var(--spacing-s);top:var(--spacing-xs);transform:translateY(2px)}.Select-module_menu__1H2aU{border:solid var(--dropdown-border-color-focus);border-top-color:var(--menu-divider-color);border-width:var(--divider-width) var(--border-width) var(--border-width);bottom:0;display:none;left:0;list-style:none;margin:0;outline:none;overflow-y:auto;padding:0;position:absolute;transform:translate(calc(var(--border-width)*-1),100%);width:100%;z-index:var(--menu-z-index)}.Select-module_menuItem__3bgv5{align-items:center;background-color:var(--menu-item-background-default);box-sizing:border-box;color:var(--menu-item-color-default);cursor:pointer;display:flex;font-size:var(--fontsize-body-l);justify-content:space-between;line-height:var(--lineheight-m);min-height:var(--menu-item-height);padding:var(--spacing-xs) var(--spacing-s)}.Select-module_highlighted__2lpqn.Select-module_menuItem__3bgv5{background-color:var(--menu-item-background-hover);color:var(--menu-item-color-hover)}.Select-module_selected__1tL2u.Select-module_menuItem__3bgv5{background-color:var(--menu-item-background-selected);color:var(--menu-item-color-selected)}.Select-module_highlighted__2lpqn.Select-module_selected__1tL2u.Select-module_menuItem__3bgv5{background-color:var(--menu-item-background-selected-hover);color:var(--menu-item-color-selected-hover)}.Select-module_disabled__3MKDP.Select-module_menuItem__3bgv5{background-color:var(--menu-item-background-disabled);color:var(--menu-item-color-disabled);cursor:not-allowed}.Select-module_virtualized__2m1gf.Select-module_menuItem__3bgv5{left:0;position:absolute;top:0;width:100%}.Select-module_helperText__1Bnwn{color:var(--helper-color-default);margin-top:var(--spacing-3-xs)}.Select-module_disabled__3MKDP .Select-module_wrapper__1WQXs{background-color:var(--dropdown-background-disabled);border-color:var(--dropdown-border-color-disabled);color:var(--dropdown-color-disabled)}.Select-module_disabled__3MKDP .Select-module_wrapper__1WQXs,.Select-module_disabled__3MKDP .Select-module_wrapper__1WQXs>*{cursor:not-allowed}.Select-module_disabled__3MKDP .Select-module_angleIcon__2-9AD,.Select-module_disabled__3MKDP .Select-module_icon___tUDP{color:var(--dropdown-color-disabled)}.Select-module_invalid__2Vibs .Select-module_wrapper__1WQXs{border-color:var(--dropdown-border-color-invalid)}.Select-module_invalid__2Vibs .Select-module_wrapper__1WQXs:hover{border-color:var(--dropdown-border-color-hover-invalid)}.Select-module_invalid__2Vibs .Select-module_errorText__bT-Fo{align-items:center;color:var(--helper-color-invalid);display:flex;margin-top:var(--spacing-3-xs)}.Select-module_invalid__2Vibs .Select-module_invalidIcon__3AtaY{margin-right:var(--spacing-2-xs)}.Select-module_multiselect__fxewG .Select-module_menuItem__3bgv5{justify-content:flex-start}.Select-module_multiselect__fxewG .Select-module_menuItem__3bgv5.Select-module_highlighted__2lpqn,.Select-module_multiselect__fxewG .Select-module_menuItem__3bgv5.Select-module_highlighted__2lpqn.Select-module_selected__1tL2u,.Select-module_multiselect__fxewG .Select-module_menuItem__3bgv5.Select-module_selected__1tL2u{background-color:var(--menu-item-background-default);color:var(--menu-item-color-default)}.Select-module_multiselect__fxewG .Select-module_menuItem__3bgv5 .Select-module_checkbox__22SQm{border:var(--spacing-4-xs) solid var(--multiselect-checkbox-border-default);box-sizing:border-box;color:var(--multiselect-checkbox-color-default);height:var(--icon-size);margin-right:var(--spacing-xs);width:var(--icon-size)}.Select-module_multiselect__fxewG .Select-module_menuItem__3bgv5.Select-module_disabled__3MKDP .Select-module_checkbox__22SQm,.Select-module_multiselect__fxewG .Select-module_menuItem__3bgv5.Select-module_highlighted__2lpqn .Select-module_checkbox__22SQm{transition:border-color 85ms ease-out}.Select-module_multiselect__fxewG .Select-module_menuItem__3bgv5.Select-module_highlighted__2lpqn .Select-module_checkbox__22SQm{border-color:var(--multiselect-checkbox-border-hover)}.Select-module_multiselect__fxewG .Select-module_menuItem__3bgv5.Select-module_selected__1tL2u .Select-module_checkbox__22SQm{background-color:var(--multiselect-checkbox-background-selected);border:0;color:var(--multiselect-checkbox-color-selected)}.Select-module_multiselect__fxewG .Select-module_menuItem__3bgv5.Select-module_disabled__3MKDP .Select-module_checkbox__22SQm{background-color:var(--multiselect-checkbox-background-disabled);border-color:var(--multiselect-checkbox-border-disabled)}.Select-module_multiselect__fxewG .Select-module_menuItem__3bgv5.Select-module_disabled__3MKDP.Select-module_selected__1tL2u .Select-module_checkbox__22SQm{color:var(--multiselect-checkbox-color-selected-disabled)}.Select-module_button__1aIsm{align-items:center;color:var(--dropdown-color-default);display:flex;font-size:var(--fontsize-body-l);min-height:var(--menu-item-height);outline:none;padding:calc(var(--spacing-s) - var(--border-width)*2) var(--spacing-s);width:100%}.Select-module_button__1aIsm.Select-module_placeholder__21c0j{color:var(--placeholder-color)}.Select-module_button__1aIsm.Select-module_placeholder__21c0j:disabled{color:var(--dropdown-color-disabled)}.Select-module_buttonLabel__1fqu5{padding-right:var(--spacing-layout-xs)}.Select-module_buttonLabel__1fqu5.Select-module_buttonLabelWithClearButton__GtkUO{padding-right:var(--spacing-3-xl)}.Select-module_root__Ka5uO.Select-module_open__2jpqY .Select-module_angleIcon__2-9AD{transform:translateY(2px) rotateX(180deg)}.Select-module_multiselect__fxewG .Select-module_button__1aIsm{height:100%;left:0;position:absolute;top:0;width:100%;z-index:0}.FieldLabel-module_hidden__3UWxI{border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.FieldLabel-module_label__1zrXK{color:var(--label-color-default,var(--color-black-90));display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.FieldLabel-module_tooltipButton__1My3f{position:absolute;right:0;top:0}@keyframes text-input_fadeIn__2iVIH{0%{opacity:0}to{opacity:1}}.text-input_hds-text-input__2YbWJ{--border-width:2px;--outline-width:3px;--input-height:56px;--textarea-height:149px;--icon-size:var(--spacing-m);--helper-color-default:var(--color-black-60);--helper-color-invalid:var(--color-error);--helper-color-success:var(--color-success);--helper-color-info:var(--color-black-90);--helper-color-info-icon:var(--color-coat-of-arms);--icon-color-invalid:var(--color-error);--input-background-default:var(--color-white);--input-background-disabled:var(--color-black-10);--input-border-color-default:var(--color-black-50);--input-border-color-hover:var(--color-black-90);--input-border-color-focus:var(--color-black-90);--input-border-color-invalid:var(--color-error);--input-border-color-disabled:var(--color-black-10);--input-border-color-success:var(--color-success);--input-color-default:var(--color-black-90);--input-color-disabled:var(--color-black-40);--label-color-default:var(--color-black-90);--label-color-invalid:var(--color-black-90);--placeholder-color:var(--color-black-60)}.text-input_hds-text-input__2YbWJ .text-input_hds-text-input__input__BIkQu{-webkit-appearance:none;background-color:var(--input-background-default);border:var(--border-width) solid var(--input-border-color-default);border-radius:0;box-sizing:border-box;color:var(--input-color-default);font-family:inherit;font-size:1.125em;height:var(--input-height);line-height:normal;margin:0;padding:0 var(--spacing-s);width:100%;will-change:transform,box-shadow}.text-input_hds-text-input__2YbWJ .text-input_hds-text-input__input__BIkQu:hover{border-color:var(--input-border-color-hover);transition:border-color 85ms ease-out}.text-input_hds-text-input__input-wrapper__3qg76:focus-within .text-input_hds-text-input__input__BIkQu{border-color:var(--input-border-color-focus);outline:none}.text-input_hds-text-input__2YbWJ.text-input_hds-text-input--invalid__25oHc .text-input_hds-text-input__input__BIkQu{border-color:var(--input-border-color-invalid)}.text-input_hds-text-input__2YbWJ.text-input_hds-text-input--success__28-SV .text-input_hds-text-input__input__BIkQu{border-color:var(--input-border-color-success)}.text-input_hds-text-input__input-wrapper__3qg76:focus-within .text-input_hds-text-input__input__BIkQu:not([readonly]){box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);transform:translateZ(0);transition:85ms ease-out;transition-property:box-shadow,transform}.text-input_hds-text-input__label__15SYz{color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.text-input_hds-text-input--invalid__25oHc .text-input_hds-text-input__label__15SYz{color:var(--label-color-invalid);transition:color 85ms linear}.text-input_hds-text-input__required__2K-Bs{color:var(--color-black-90);display:inline-block;font-size:var(--fontsize-body-xl);line-height:1;margin-left:var(--spacing-2-xs);transform:translateY(var(--spacing-3-xs))}.text-input_hds-text-input__input-wrapper__3qg76{display:flex;position:relative}.text-input_hds-text-input__2YbWJ textarea.text-input_hds-text-input__input__BIkQu{font-family:inherit;height:var(--textarea-height);margin:0;min-height:var(--input-height);overflow:auto;padding:var(--spacing-s);resize:vertical}.text-input_hds-text-input__2YbWJ .text-input_hds-text-input__input__BIkQu::-moz-placeholder{color:var(--placeholder-color);opacity:1}.text-input_hds-text-input__2YbWJ .text-input_hds-text-input__input__BIkQu::placeholder{color:var(--placeholder-color);opacity:1}.text-input_hds-text-input__helper-text__gNPue{color:var(--helper-color-default)}.text-input_hds-text-input__error-text__2Qjmg,.text-input_hds-text-input__helper-text__gNPue{display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);white-space:pre-line}.text-input_hds-text-input__error-text__2Qjmg{color:var(--helper-color-invalid);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.text-input_hds-text-input__error-text__2Qjmg:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__error-text__2Qjmg:before{animation:text-input_fadeIn__2iVIH 85ms ease-out;background:var(--icon-color-invalid);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__success-text__274NH{color:var(--helper-color-success);display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative;white-space:pre-wrap}.text-input_hds-text-input__success-text__274NH:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__success-text__274NH:before{animation:text-input_fadeIn__2iVIH 85ms ease-out;background:var(--helper-color-success);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__info-text__1hF9o{color:var(--helper-color-info);display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.text-input_hds-text-input__info-text__1hF9o:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__info-text__1hF9o:before{animation:text-input_fadeIn__2iVIH 85ms ease-out;background:var(--helper-color-info-icon);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__2YbWJ .text-input_hds-text-input__input__BIkQu[disabled]{background-color:var(--input-background-disabled);border-color:var(--input-border-color-disabled);color:var(--input-color-disabled);cursor:not-allowed}.text-input_hds-text-input__2YbWJ .text-input_hds-text-input__input__BIkQu[readonly]{background-color:transparent;border:0;color:var(--input-color-default);padding:0;-webkit-text-fill-color:var(--input-color-default)}.text-input_hds-text-input__buttons__1eV1P{align-items:center;bottom:0;display:flex;font-size:1rem;justify-content:center;margin-right:calc(var(--spacing-s) - var(--spacing-xs)/2);position:absolute;right:0;top:0}.text-input_hds-text-input__button__1JeYJ{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;display:flex;font:inherit;outline:none;padding:var(--spacing-xs) calc(var(--spacing-xs)/2)}.text-input_hds-text-input__button__1JeYJ:focus{outline:var(--outline-width) solid var(--color-focus-outline)}.SelectedItems-module_selectedItems__2m24K .SelectedItems-module_hiddenItemsCount__3MAEc.SelectedItems-module_hidden__2hyRx,.SelectedItems-module_selectedItems__2m24K .SelectedItems-module_tag__13n3H.SelectedItems-module_hidden__2hyRx{left:-9999px;position:absolute;top:-9999px;visibility:hidden}.SelectedItems-module_selectedItems__2m24K{align-items:center;display:flex;flex-wrap:wrap;padding:var(--spacing-4-xs) calc(var(--spacing-s)*2 - var(--border-width)*2 + var(--icon-size)*2) calc(var(--spacing-2-xs) + var(--border-width)) var(--spacing-4-xs)}.SelectedItems-module_selectedItems__2m24K.SelectedItems-module_itemsHidden__2ewH3{box-sizing:border-box;height:var(--menu-item-height);overflow:hidden}.SelectedItems-module_selectedItems__2m24K.SelectedItems-module_noToggle__l2j9W{padding-right:calc(var(--spacing-s)*2 - var(--border-width)*2 + var(--icon-size))}.SelectedItems-module_selectedItems__2m24K .SelectedItems-module_tag__13n3H{margin:var(--spacing-2-xs) 0 0 var(--spacing-2-xs);position:relative;z-index:1}.SelectedItems-module_selectedItems__2m24K.SelectedItems-module_truncateFirstChild__192oz{flex-wrap:nowrap}.SelectedItems-module_selectedItems__2m24K.SelectedItems-module_truncateFirstChild__192oz>.SelectedItems-module_tag__13n3H:first-child{justify-content:flex-end;overflow:hidden}.SelectedItems-module_selectedItems__2m24K.SelectedItems-module_truncateFirstChild__192oz>.SelectedItems-module_tag__13n3H:first-child .SelectedItems-module_tagLabel__3qEgh{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.SelectedItems-module_selectedItems__2m24K .SelectedItems-module_hiddenItemsCount__3MAEc{font-weight:700;margin:var(--spacing-xs) 0 0 var(--spacing-xs);opacity:1;pointer-events:none;transition:50ms cubic-bezier(.47,0,.75,.72);user-select:none}.SelectedItems-module_selectedItems__2m24K .SelectedItems-module_hiddenItemsCount__3MAEc.SelectedItems-module_hidden__2hyRx{opacity:0}.SelectedItems-module_clearButton__35tnp{background:none;border:none;color:inherit;cursor:pointer;display:flex;font:inherit;outline:none;padding:0;position:absolute;right:calc(var(--border-width)*-1);top:0;transform:translate(calc(var(--spacing-2-xl)*-1),calc(var(--menu-item-height)/2 - 50%));z-index:1}.SelectedItems-module_clearButton__35tnp:focus{box-shadow:0 0 0 var(--focus-outline-width) var(--color-focus-outline)}.SelectedItems-module_clearButton__35tnp.SelectedItems-module_noToggle__l2j9W{transform:translate(calc(var(--spacing-s)*-1),calc(var(--menu-item-height)/2 - 50%))}.DialogContent-module_dialogContent__rNnIp{padding-left:var(--spacing-m);padding-right:var(--spacing-m);padding-bottom:var(--spacing-2-xs)}@media only screen and (min-width:768px){.DialogContent-module_dialogContent__rNnIp{padding-left:var(--spacing-l);padding-right:var(--spacing-l)}}.DialogContent-module_dialogContentScrollable__1oi2o{border-bottom:1px solid;border-top:1px solid;overflow-y:auto}.DialogActionButtons-module_dialogActionButtons__5m7AC{display:block;padding:var(--spacing-s) var(--spacing-m) var(--spacing-m)}@media only screen and (min-width:768px){.DialogActionButtons-module_dialogActionButtons__5m7AC{padding-left:var(--spacing-l);padding-right:var(--spacing-l)}}.DialogActionButtons-module_dialogActionButtons__5m7AC>*{width:100%}.DialogActionButtons-module_dialogActionButtons__5m7AC>*+*{margin-top:var(--spacing-s)}@media only screen and (min-width:768px){.DialogActionButtons-module_dialogActionButtons__5m7AC{display:flex;flex-wrap:wrap;gap:var(--spacing-s)}.DialogActionButtons-module_dialogActionButtons__5m7AC>*{width:auto}.DialogActionButtons-module_dialogActionButtons__5m7AC>*+*{margin-top:0}}.DialogHeader-module_dialogHeaderClose__36wOz{background:none;border:none;color:inherit;cursor:pointer;font:inherit}.DialogHeader-module_dialogHeader__32Rho{padding-left:var(--spacing-m);padding-right:var(--spacing-m);display:block;padding-bottom:0;padding-top:var(--spacing-m)}@media only screen and (min-width:768px){.DialogHeader-module_dialogHeader__32Rho{padding-left:var(--spacing-l);padding-right:var(--spacing-l)}}.DialogHeader-module_dialogHeaderContent__3K4i2{align-items:flex-start;display:flex;justify-content:space-between;min-height:36px}.DialogHeader-module_dialogTitle__1GeH_{--outline-x-gutter:4px;--outline-y-gutter:2px;--outline-width:3px;align-items:flex-start;box-sizing:border-box;display:flex;font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:.4px;line-height:24px;margin:0;order:0;outline:none;padding-right:var(--spacing-3-xs);position:relative}.DialogHeader-module_dialogTitle__1GeH_:after{border:var(--outline-width) solid transparent;box-sizing:border-box;content:\"\";display:block;height:100%;left:calc(var(--outline-width)*-1 + var(--outline-x-gutter)*-1);position:absolute;top:calc(var(--outline-width)*-1 + var(--outline-y-gutter)*-1);width:100%}.DialogHeader-module_dialogTitle__1GeH_:focus:after{border-color:var(--color-coat-of-arms);height:calc(100% + var(--outline-width)*2 + var(--outline-y-gutter)*2);width:calc(100% + var(--outline-width)*2 + var(--outline-x-gutter)*2)}.DialogHeader-module_dialogTitle__1GeH_ .DialogHeader-module_dialogTitleLeftIcon__1xWhC{display:inline-flex;margin-right:var(--spacing-2-xs)}.DialogHeader-module_dialogHeaderClose__36wOz{color:var(--dialog-close-button-color);display:block;font-size:0;height:44px;line-height:1;margin-left:var(--spacing-2-xs);margin-top:calc(var(--spacing-2-xs)*-1);min-width:44px;order:1;padding:0;vertical-align:middle}.DialogHeader-module_dialogHeaderClose__36wOz:focus{box-shadow:0 0 0 3px var(--color-coat-of-arms);outline:none;text-decoration:none}@media only screen and (min-width:768px){.DialogHeader-module_dialogHeader__32Rho{padding-bottom:var(--spacing-3-xs)}}.SubLevel-module_subLevel__2TvTK>button{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.SubLevel-module_subLevel__2TvTK>a,.SubLevel-module_subLevel__2TvTK>button{align-items:center;background-color:var(--side-navigation-level-background-color);border:var(--side-navigation-level-border-width) solid var(--side-navigation-level-border-color);box-sizing:border-box;color:var(--side-navigation-level-color);display:flex;margin:0;min-height:var(--spacing-2-xl);outline:none;padding:var(--spacing-2-xs) var(--side-navigation-level-inset);text-align:left;text-decoration:none;width:100%}.SubLevel-module_subLevel__2TvTK>a:hover,.SubLevel-module_subLevel__2TvTK>button:hover{background-color:var(--side-navigation-level-background-color-hover);border-color:var(--side-navigation-level-border-color-hover);color:var(--side-navigation-level-color-hover)}.SubLevel-module_subLevel__2TvTK>a:focus,.SubLevel-module_subLevel__2TvTK>button:focus{border-color:var(--side-navigation-level-border-color-focus)!important}.SubLevel-module_subLevel__2TvTK>a span,.SubLevel-module_subLevel__2TvTK>button span{display:flex}.SubLevel-module_active__dtFES>a,.SubLevel-module_active__dtFES>button{background-color:var(--side-navigation-level-background-color-active);border-color:var(--side-navigation-level-background-color-active);color:var(--side-navigation-level-color-active);font-weight:600;position:relative}.SubLevel-module_active__dtFES>a:before,.SubLevel-module_active__dtFES>button:before{background:var(--side-navigation-active-indicator-background-color);bottom:calc(0px - var(--side-navigation-level-border-width));content:\"\";display:block;left:calc(0px - var(--side-navigation-level-border-width));position:absolute;top:calc(0px - var(--side-navigation-level-border-width));width:var(--spacing-3-xs)}.SubLevel-module_subLevel__2TvTK{font-size:var(--fontsize-body-s)}.SubLevel-module_subLevel__2TvTK>a,.SubLevel-module_subLevel__2TvTK>button{min-height:var(--spacing-xl);padding-bottom:var(--spacing-3-xs);padding-left:calc(var(--side-navigation-level-inset) + var(--spacing-2-xs));padding-top:var(--spacing-3-xs)}.MainLevel-module_mainLevel__2QZi_>button{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.MainLevel-module_mainLevel__2QZi_>a,.MainLevel-module_mainLevel__2QZi_>button{align-items:center;background-color:var(--side-navigation-level-background-color);border:var(--side-navigation-level-border-width) solid var(--side-navigation-level-border-color);box-sizing:border-box;color:var(--side-navigation-level-color);display:flex;margin:0;min-height:var(--spacing-2-xl);outline:none;padding:var(--spacing-2-xs) var(--side-navigation-level-inset);text-align:left;text-decoration:none;width:100%}.MainLevel-module_mainLevel__2QZi_>a:hover,.MainLevel-module_mainLevel__2QZi_>button:hover{background-color:var(--side-navigation-level-background-color-hover);border-color:var(--side-navigation-level-border-color-hover);color:var(--side-navigation-level-color-hover)}.MainLevel-module_mainLevel__2QZi_>a:focus,.MainLevel-module_mainLevel__2QZi_>button:focus{border-color:var(--side-navigation-level-border-color-focus)!important}.MainLevel-module_mainLevel__2QZi_>a span,.MainLevel-module_mainLevel__2QZi_>button span{display:flex}.MainLevel-module_active__3IkdI>a,.MainLevel-module_active__3IkdI>button{background-color:var(--side-navigation-level-background-color-active);border-color:var(--side-navigation-level-background-color-active);color:var(--side-navigation-level-color-active);font-weight:600;position:relative}.MainLevel-module_active__3IkdI>a:before,.MainLevel-module_active__3IkdI>button:before{background:var(--side-navigation-active-indicator-background-color);bottom:calc(0px - var(--side-navigation-level-border-width));content:\"\";display:block;left:calc(0px - var(--side-navigation-level-border-width));position:absolute;top:calc(0px - var(--side-navigation-level-border-width));width:var(--spacing-3-xs)}.MainLevel-module_mainLevel__2QZi_{font-size:var(--fontsize-body-m)}.MainLevel-module_mainLevel__2QZi_>a,.MainLevel-module_mainLevel__2QZi_>button{font-weight:500}.MainLevel-module_mainLevelListMenu__FG6Ed{display:none}.MainLevel-module_mainLevelWithDivider__1knXE:before{border-top:1px solid var(--color-black-20);content:\"\";display:block;height:1px;margin:var(--spacing-xs) var(--side-navigation-level-inset)}.MainLevel-module_label__uWKJ7,.MainLevel-module_leftIcon__3MvrC{margin-right:var(--spacing-xs)}.MainLevel-module_leftIcon__3MvrC,.MainLevel-module_rightIcon__2D9o7{width:var(--side-navigation-icon-size)}.MainLevel-module_rightIcon__2D9o7{margin-left:auto}.MainLevel-module_mainLevel__2QZi_.MainLevel-module_open__2yWFj .MainLevel-module_mainLevelListMenu__FG6Ed{display:block;list-style:none;padding:0}.FooterNavigation-module_navigation__1gS9g{display:flex;flex-wrap:wrap;gap:var(--spacing-xs) var(--spacing-m);padding-bottom:var(--spacing-m)}.FooterCustom-module_divider__2pCd6{background-color:var(--footer-divider-color);border:0;height:1px;margin:0 0 var(--spacing-xs);width:100%}.FooterCustom-module_custom__3MIuC{padding-bottom:var(--spacing-m)}.FooterCustom-module_divider__2pCd6{margin:0 0 var(--spacing-m)}.FooterGroupHeading-module_heading__2iPBU{background:none;border:none;cursor:pointer;font:inherit;padding:0;--outline-offset:2px;--outline-offset-small:1px;align-items:center;align-self:start;color:inherit;display:flex;font-size:var(--fontsize-body-l);outline:none;position:relative;text-decoration:none}.FooterGroupHeading-module_heading__2iPBU:hover:not(:focus){text-decoration:underline}.FooterGroupHeading-module_heading__2iPBU:focus{border:0;border-radius:var(--footer-focus-outline-border-radius);outline:var(--footer-focus-outline-width) solid var(--footer-focus-outline-color);outline-offset:var(--outline-offset)}.FooterGroupHeading-module_heading__2iPBU{font-weight:700;line-height:var(--lineheight-l)}.FooterGroupHeading-module_navigation__10BLU{font-size:var(--fontsize-body-m)}.FooterGroupHeading-module_utility__2Nzq0{font-size:var(--fontsize-heading-m)}@media only screen and (max-width:991.98px){.FooterGroupHeading-module_heading__2iPBU.FooterGroupHeading-module_navigation__10BLU{font-weight:400}}.FooterNavigationGroup-module_navigationGroup__1R66O{display:flex}.FooterNavigationGroup-module_navigationGroupList__1ylGW{display:flex;flex-direction:column;gap:var(--spacing-3-xs);justify-items:start;list-style:none;margin:0;padding:0;width:137px}@media only screen and (min-width:1248px){.FooterNavigationGroup-module_navigationGroupList__1ylGW{width:180px}}.FooterUtilities-module_divider__2VjbX{background-color:var(--footer-divider-color);border:0;height:1px;margin:0 0 var(--spacing-xs);width:100%}.FooterUtilities-module_groups__1_Vi1{display:flex;flex-wrap:wrap;row-gap:var(--spacing-m)}.FooterUtilities-module_links__3P_Ga{display:flex;flex-wrap:wrap;gap:var(--spacing-xs) var(--spacing-m);max-width:60%}.FooterUtilities-module_soMe__2Pwin{display:grid;gap:var(--spacing-xs);grid-auto-flow:column}.FooterUtilities-module_soMe__2Pwin>*{align-self:center}.FooterUtilities-module_utilities__10PzW{align-items:center;display:flex;flex-wrap:wrap;justify-content:space-between;padding-bottom:var(--spacing-m)}.FooterUtilities-module_utilityLinks__2QjWF{display:grid;grid-auto-flow:column;position:relative}.FooterUtilities-module_widerLinks__1h7MT{max-width:none}@media only screen and (max-width:575.98px){.FooterUtilities-module_links__3P_Ga{flex-direction:column;gap:var(--spacing-xs);justify-items:flex-start}.FooterUtilities-module_utilities__10PzW{align-items:flex-start;flex-direction:column}}@media only screen and (max-width:767.98px){.FooterUtilities-module_divider__2VjbX{margin:0 0 var(--spacing-xs)}.FooterUtilities-module_utilities__10PzW{justify-items:flex-start}}@media only screen and (max-width:991.98px){.FooterUtilities-module_link__2Df11,.FooterUtilities-module_utilities__10PzW{gap:var(--spacing-xs)}}@media only screen and (min-width:992px){.FooterUtilities-module_divider__2VjbX{margin:0 0 var(--spacing-m)}}.link_hds-icon__3Fh_V{--icon-size:100%;background-color:currentcolor;display:inline-block;height:var(--icon-size);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:auto;mask-size:auto;width:var(--icon-size)}.link_hds-icon__3Fh_V.link_hds-icon--size-xs__1DSX6{--icon-size:var(--spacing-layout-2-xs)}.link_hds-icon__3Fh_V.link_hds-icon--size-s__37i-o{--icon-size:var(--spacing-layout-xs)}.link_hds-icon__3Fh_V.link_hds-icon--size-m__f9-rK{--icon-size:var(--spacing-layout-s)}.link_hds-icon__3Fh_V.link_hds-icon--size-l__5qgwf{--icon-size:var(--spacing-layout-m)}.link_hds-icon__3Fh_V.link_hds-icon--size-xl__13Jqm{--icon-size:var(--spacing-layout-l)}.link_hds-icon--link-external__3gGsM{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 3v16h16v2H3V3h2zm16 0v9h-2V6.413L9.914 15.5 8.5 14.086 17.585 5H12V3h9z' fill='currentColor'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 3v16h16v2H3V3h2zm16 0v9h-2V6.413L9.914 15.5 8.5 14.086 17.585 5H12V3h9z' fill='currentColor'/%3E%3C/svg%3E\")}.link_hds-link__2WOKL{--link-visited-color:#551a8b;--link-color:var(--color-bus);border:3px solid transparent;box-sizing:border-box;color:var(--link-color);text-decoration:underline}.link_hds-link__2WOKL:visited{color:var(--link-visited-color)}.link_hds-link__2WOKL:visited svg g path{fill:var(--link-visited-color)}.link_hds-link__2WOKL:focus{border:3px solid var(--color-focus-outline);outline:none}.link_hds-link__2WOKL.link_focus-visible__2LDnI,.link_hds-link__2WOKL:focus-visible{outline:none}.link_hds-link__2WOKL .link_vertical-align-medium-icon___Ink7{vertical-align:sub}.link_hds-link__2WOKL .link_vertical-align-big-icon__3GKmw{vertical-align:middle}.link_hds-link__2WOKL .link_vertical-align-small-icon__Zw5g6{vertical-align:text-top}.link_hds-link--disable-visited-styles__7SQ6j:visited{color:var(--color-bus)}.link_hds-link--small__2n-M3{font-size:14px}.link_hds-link--medium__nURMR{font-size:16px}.link_hds-link--large__2MF4z{display:block;font-size:18px;width:-moz-fit-content;width:fit-content}.link_hds-link--small__2n-M3 .link_icon__1UA7k{margin-left:7px}.link_hds-link--medium__nURMR .link_icon__1UA7k{margin-left:var(--spacing-2-xs);margin-top:-3px}.link_hds-link--large__2MF4z .link_icon__1UA7k{margin-left:var(--spacing-s)}.link_hds-link--small__2n-M3 .link_hds-icon-left__1U3aD{margin-right:4px;vertical-align:text-top}.link_hds-link--medium__nURMR .link_hds-icon-left__1U3aD{margin-right:8px;vertical-align:sub}.link_hds-link--large__2MF4z .link_hds-icon-left__1U3aD{margin-right:16px;vertical-align:middle}.FooterLink-module_item__3Ig3B{background:none;border:none;cursor:pointer;font:inherit;padding:0;--outline-offset:2px;--outline-offset-small:1px;align-items:center;align-self:start;color:inherit;display:flex;font-size:var(--fontsize-body-l);outline:none;position:relative}.FooterLink-module_item__3Ig3B:hover:not(:focus){text-decoration:underline}.FooterLink-module_item__3Ig3B:focus{border:0;border-radius:var(--footer-focus-outline-border-radius);outline:var(--footer-focus-outline-width) solid var(--footer-focus-outline-color);outline-offset:var(--outline-offset)}.FooterLink-module_item__3Ig3B{--link-color:var(--footer-color);--link-visited-color:none;color:var(--link-color);font-weight:400;line-height:var(--lineheight-l);text-decoration:none}.FooterLink-module_base__bzKoj{align-self:unset;font-size:var(--fontsize-body-s);font-weight:500;margin:0;text-decoration:underline}.FooterLink-module_icon__3KZCE{margin-left:var(--spacing-3-xs)}.FooterLink-module_navigation__1pNfs,.FooterLink-module_utility__3jLSl{align-items:center;font-size:var(--fontsize-body-l)}.FooterLink-module_subItem__3unGg.FooterLink-module_subItem__3unGg{font-size:var(--fontsize-body-s);line-height:var(--lineheight-l);outline-offset:var(--outline-offset-small)}.FooterLink-module_subItemIcon__2UHZi{align-self:start;height:var(--spacing-xs);min-width:var(--spacing-xs);transform:translateY(4px);width:var(--spacing-xs)}@media only screen and (max-width:991.98px){.FooterLink-module_item__3Ig3B{outline-offset:var(--outline-offset-small)}.FooterLink-module_navigation__1pNfs,.FooterLink-module_utility__3jLSl{font-size:var(--fontsize-body-m)}}@media only screen and (max-width:1247.98px){.FooterLink-module_item__3Ig3B:not(.FooterLink-module_base__bzKoj):not(.FooterLink-module_navigation__1pNfs):not(.FooterLink-module_utility__3jLSl){font-size:var(--fontsize-body-m)}}.FooterBase-module_backToTopButton__hXTHm{background:none;border:none;cursor:pointer;font:inherit;padding:0}.FooterBase-module_divider__3sz3q{background-color:var(--footer-divider-color);border:0;height:1px;margin:0 0 var(--spacing-xs);width:100%}.FooterBase-module_backToTopButton__hXTHm{--outline-offset:2px;--outline-offset-small:1px;align-items:center;align-self:start;color:inherit;display:flex;font-size:var(--fontsize-body-l);line-height:var(--lineheight-l);outline:none;position:relative;text-decoration:none}.FooterBase-module_backToTopButton__hXTHm:hover:not(:focus){text-decoration:underline}.FooterBase-module_backToTopButton__hXTHm:focus{border:0;border-radius:var(--footer-focus-outline-border-radius);outline:var(--footer-focus-outline-width) solid var(--footer-focus-outline-color);outline-offset:var(--outline-offset)}.FooterBase-module_backToTopButton__hXTHm{align-self:unset;font-size:20px;font-weight:700;line-height:30px;margin-left:auto}.FooterBase-module_base__2f0eu{display:flex;flex-direction:column;padding-bottom:var(--spacing-m)}.FooterBase-module_baseActions__1hCiR{display:flex;flex-grow:1}.FooterBase-module_copyright__2iiev{display:flex;font-size:var(--fontsize-body-s);gap:var(--spacing-3-xs);justify-content:flex-start;line-height:var(--lineheight-l);margin-right:var(--spacing-2-xs)}.FooterBase-module_links__3lfLo{align-items:center;display:flex;gap:var(--spacing-xs)}.FooterBase-module_logoWrapper__3BI7d{display:flex}.FooterBase-module_separator__cwQTe{font-size:var(--fontsize-body-s);font-weight:500;line-height:var(--lineheight-l)}@media only screen and (max-width:575.98px){.FooterBase-module_links__3lfLo{align-items:flex-start;flex-direction:column}.FooterBase-module_copyrightDot__2AfS6,.FooterBase-module_separator__cwQTe{display:none}}@media only screen and (max-width:767.98px){.FooterBase-module_baseActions__1hCiR{flex-direction:column}.FooterBase-module_backToTopButton__hXTHm{margin-top:var(--spacing-m)}}@media only screen and (max-width:991.98px){.FooterBase-module_copyright__2iiev{margin-bottom:var(--spacing-xs);margin-top:var(--spacing-s)}.FooterBase-module_divider__3sz3q{margin:0 0 var(--spacing-m)}.FooterBase-module_separator__cwQTe:first-of-type{display:none}}@media only screen and (min-width:992px){.FooterBase-module_base__2f0eu{align-items:center;flex-flow:row wrap}.FooterBase-module_copyright__2iiev{margin-left:var(--spacing-s)}}.FooterUtilityGroup-module_utilityGroup__3Voeu{display:flex;flex-direction:column;gap:var(--spacing-xs);justify-items:start;list-style:none;margin-bottom:var(--spacing-xs);padding:0;width:248px}@media only screen and (max-width:575.98px){.FooterUtilityGroup-module_utilityGroup__3Voeu:nth-last-child(-n+1){margin-bottom:0}}@media only screen and (min-width:576px) and (max-width:767.98px){.FooterUtilityGroup-module_utilityGroup__3Voeu:nth-last-child(-n+2){margin-bottom:0}}@media only screen and (min-width:768px){.FooterUtilityGroup-module_utilityGroup__3Voeu{width:214px}.FooterUtilityGroup-module_utilityGroup__3Voeu:nth-last-child(-n+1){margin-bottom:0}}@media only screen and (min-width:992px){.FooterUtilityGroup-module_utilityGroup__3Voeu{margin-bottom:0;width:204px}}@media only screen and (min-width:1248px){.FooterUtilityGroup-module_utilityGroup__3Voeu{width:268px}}.HeaderNavigationMenu-module_headerNavigationMenu__3G6-N{background-color:var(--nav-background-color);box-sizing:border-box;display:flex;margin:0 auto;max-width:var(--header-max-width);min-height:var(--spacing-layout-l);padding:0 var(--header-margin);width:100%}.HeaderNavigationMenu-module_headerNavigationMenuContainer__2nK9z{border-bottom:1px solid var(--header-divider-color)}.HeaderNavigationMenu-module_headerNavigationMenuList__3HIzx{column-gap:var(--spacing-l);display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0;width:100%}.HeaderNavigationMenu-module_headerNavigationMenuLinkContent__3zC2j{align-items:center;display:flex;height:100%}.HeaderNavigationMenu-module_headerNavigationMenuLinkContentActive__3QtW_{box-shadow:inset 0 -4px 0 0 var(--nav-link-hover-color)}.HeaderNavigationMenu-module_headerNavigationMenuLinkContentActive__3QtW_ .HeaderNavigationMenu-module_headerNavigationMenuLink__H_ogS{font-weight:700}.HeaderNavigationMenu-module_headerNavigationMenuLink__H_ogS.HeaderNavigationMenu-module_headerNavigationMenuLink__H_ogS{border:0;color:var(--nav-link-font-color);font-size:var(--fontsize-body-l);margin:var(--spacing-s) 0;padding:0}.Header-module_header__291GF{--header-background-color:var(--color-white);--header-color:var(--color-black-90);--header-height:var(--spacing-4-xl);--header-focus-outline-width:3px;--header-focus-outline-border-radius:0;--header-focus-outline-color:var(--color-coat-of-arms);--header-divider-color:var(--color-black-20);--header-z-index:10;--header-margin:var(--spacing-m);--header-max-width:1440px;--header-item-border-color:var(--color-black-20);--header-item-hover-color:var(--color-black-20);--actionbar-background-color:var(--color-white);--action-bar-container-height:88px;--action-bar-section-gutter:var(--spacing-s);--action-bar-dropdown-menu-caret-width:64px;--action-bar-dropdown-menu-primary-item-height:64px;--action-bar-dropdown-menu-secondary-item-height:48px;--action-bar-button-size:64px;--action-bar-item-gutter:12px;--action-bar-item-title-font-size:var(--fontsize-body-s);--action-bar-item-title-font-color:var(--header-color);--lang-selector-mobile-background-color:var(--color-silver-light);--lang-selector-item-font-color:var(--header-color);--lang-selector-dropdown-background-color:var(--color-white);--nav-link-font-color:var(--header-color);--nav-border-color:var(--color-black-20);--nav-link-hover-color:var(--color-black-90);--nav-link-dropdown-background-color:var(--color-white);--nav-button-background-color:var(--color-black-5);--nav-button-hover-background-color:var(--color-black-5);--nav-search-color:var(--header-color);--nav-mobile-menu-background-color:var(--color-white);--nav-mobile-menu-bottom-background-color:var(--color-silver-light);--nav-mobile-margin-left:var(--spacing-s);--universal-bar-background-color:var(--color-black-5);--logo-height:56px;--icon-size:24px;--nav-drop-down-icon-color:var(--color-black);--nav-background-color:var(--color-white);background-color:var(--header-background-color);color:var(--header-color);position:relative;width:100%}@media only screen and (max-width:991px){.Header-module_header__291GF{--action-bar-container-height:74px;--logo-height:48px}}@media only screen and (max-width:767px){.Header-module_header__291GF{--header-margin:var(--spacing-s);--action-bar-container-height:64px;--logo-height:32px}}@media only screen and (max-width:575px){.Header-module_header__291GF{--header-margin:var(--spacing-xs);--action-bar-container-height:64px;--logo-height:32px}}.Header-module_header__291GF.Header-module_theme-dark__1srRp{--color-focus-outline:var(--color-white);--header-color:var(--color-white);--header-focus-outline-color:var(--color-white);--header-background-color:var(--color-black-80);--nav-border-color:var(--color-white);--nav-link-hover-color:var(--color-white);--universal-bar-background-color:var(--color-black-60);--navigation-link-button-background-color:var(--color-black-60);--nav-link-dropdown-background-color:var(--color-black-80);--lang-selector-mobile-background-color:var(--color-black-80);--lang-selector-dropdown-background-color:var(--color-black-60);--nav-button-background-color:var(--color-black-60);--nav-button-hover-background-color:var(--color-black-60);--nav-drop-down-icon-color:var(--color-white);--actionbar-background-color:var(--color-black-80);--nav-background-color:var(--color-black-80);--nav-mobile-menu-background-color:var(--color-black-80);--nav-mobile-menu-bottom-background-color:var(--color-black-60)}.Header-module_headerBackgroundWrapper__KsFy2{position:relative;z-index:var(--header-z-index)}@layer actionBar{.HeaderActionBarItemWithDropdown-module_dropdownWrapper__Mb2ft{bottom:0;overflow:hidden;position:absolute;right:0;transform:translateY(100%) translateY(1px);transition-duration:0ms;transition-property:max-height,padding-bottom;z-index:20}.HeaderActionBarItemWithDropdown-module_container__2NETb{display:flex}.HeaderActionBarItemWithDropdown-module_container__2NETb .HeaderActionBarItemWithDropdown-module_dropdownWrapper__Mb2ft{max-height:0;min-width:300px;padding-bottom:0;transition-delay:.4s}.HeaderActionBarItemWithDropdown-module_container__2NETb.HeaderActionBarItemWithDropdown-module_visible__IJQWz .HeaderActionBarItemWithDropdown-module_dropdownWrapper__Mb2ft{max-height:1000vh;padding-bottom:20px;transition-delay:0ms}.HeaderActionBarItemWithDropdown-module_container__2NETb:not(.HeaderActionBarItemWithDropdown-module_hasContent__1nypi){display:none}.HeaderActionBarItemWithDropdown-module_container__2NETb:not(.HeaderActionBarItemWithDropdown-module_fullWidth__3B-JV){display:flex;position:relative}.HeaderActionBarItemWithDropdown-module_container__2NETb.HeaderActionBarItemWithDropdown-module_fullWidth__3B-JV>.HeaderActionBarItemWithDropdown-module_dropdownWrapper__Mb2ft{left:0}.HeaderActionBarItemWithDropdown-module_icon__-TAc5{display:block}.HeaderActionBarItemWithDropdown-module_dropdown__2M8r7{background:#fff;border:1px solid var(--color-black-10);margin-top:-1px;position:relative;right:0;transform:translateY(-100%);transition:transform .25s .15s,visibility 0ms .4s;visibility:hidden}.HeaderActionBarItemWithDropdown-module_dropdown__2M8r7.HeaderActionBarItemWithDropdown-module_fullWidth__3B-JV{left:0}.HeaderActionBarItemWithDropdown-module_dropdown__2M8r7.HeaderActionBarItemWithDropdown-module_visible__IJQWz{transform:translateY(0);transition:transform .25s 0ms,visibility 0ms 0ms;visibility:visible}.HeaderActionBarItemWithDropdown-module_dropdown__2M8r7>*{padding:var(--spacing-xs) var(--spacing-s);width:100%}}.DatePicker-module_hds-datepicker__day__wrapper-vhidden__3Brgt,.DatePicker-module_hds-datepicker__head__weekday-vhidden__Rkv0G{border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}:root{--date-background:transparent;--date-color:var(--color-black-90);--outside-date-background:transparent;--outside-date-color:var(--color-black-40);--selected-date-background:var(--color-bus);--selected-date-color:#fff;--table-width:100%;--horizontal-spacing:var(--spacing-s);--vertical-spacing:var(--spacing-s)}@media only screen and (min-width:576px){:root{--table-width:308px}}.DatePicker-module_pickerWrapper__3-V56{display:flex;justify-content:flex-end;opacity:0;pointer-events:none;transition:opacity .15s;visibility:hidden;will-change:opacity,visibility;z-index:900}.DatePicker-module_pickerWrapper__3-V56.DatePicker-module_isVisible__2h96J{opacity:1;visibility:visible}.DatePicker-module_pickerWrapper__3-V56>*{pointer-events:auto}.DatePicker-module_hds-datepicker__b0Y3P{background:#fff;box-shadow:0 2px 4px 0 rgba(0,0,0,.5);box-sizing:border-box;display:inline-block;min-width:calc(100vw - var(--spacing-s)*2);padding:var(--vertical-spacing) var(--horizontal-spacing);position:relative;width:100%}@media only screen and (min-width:576px){.DatePicker-module_hds-datepicker__b0Y3P{min-width:calc(var(--table-width) + var(--spacing-s)*2)}}.DatePicker-module_hds-datepicker__month-table__1XIn_{border-collapse:collapse;border-spacing:2px;max-width:var(--table-width);width:100%}.DatePicker-module_hds-datepicker__head__weekday__SwagI{font-size:var(--fontsize-body-m);font-weight:700;padding-bottom:6px;text-transform:uppercase}.DatePicker-module_hds-datepicker__day-cell__2YHPj{line-height:0;margin:0 4px 0 0;padding:3px;width:14.2857142857%}.DatePicker-module_hds-datepicker__day__2_8jB{align-items:center;appearance:none;background:transparent;border:0;box-sizing:border-box;display:inline-flex;line-height:1;margin:0;overflow:hidden;padding:0 0 100%;position:relative;vertical-align:middle;width:100%;--background-color:var(--date-background);--color:var(--date-color)}.DatePicker-module_hds-datepicker__day--selected__1QNyc{--background-color:var(--selected-date-background);--color:var(--selected-date-color)}.DatePicker-module_hds-datepicker__day--outside__1rUB8{pointer-events:none;--background-color:var(--outside-date-background);--color:var(--outside-date-color)}.DatePicker-module_hds-datepicker__day--today__1bi5J:after{background:var(--color);bottom:7px;content:\"\";height:2px;left:8px;position:absolute;right:8px}.DatePicker-module_hds-datepicker__day__2_8jB:focus{box-shadow:0 0 0 3px var(--color-coat-of-arms);outline:none}.DatePicker-module_hds-datepicker__day__wrapper__2cskJ{align-items:center;background:var(--background-color);color:var(--color);display:flex;font-size:1rem;inset:2px;justify-content:center;line-height:1rem;position:absolute}.DatePicker-module_hds-datepicker__navigation__3KlG-{align-items:center;display:flex;margin-bottom:var(--spacing-s)}.DatePicker-module_hds-datepicker__navigation__select__2K75T{--icon-size:24px;margin-right:var(--spacing-s);position:relative}.DatePicker-module_hds-datepicker__navigation__select__2K75T select{height:100%;left:0;opacity:0;position:absolute;text-transform:capitalize;top:0;width:100%}.DatePicker-module_hds-datepicker__navigation__select-label__3aEd9{--label-spacing:0.3rem;font-size:var(--fontsize-body-xl);font-weight:700;padding:.15rem calc(var(--icon-size)) .15rem .3rem;pointer-events:none;position:relative;text-transform:capitalize}select:focus+.DatePicker-module_hds-datepicker__navigation__select-label__3aEd9{box-shadow:0 0 0 3px var(--color-coat-of-arms)}.DatePicker-module_hds-datepicker__navigation__select-icon__25qBZ{align-items:center;bottom:0;display:flex;justify-content:center;pointer-events:none;position:absolute;right:0;top:0;width:var(--icon-size)}.DatePicker-module_hds-datepicker__navigation__select-icon__25qBZ svg{height:var(--icon-size);width:var(--icon-size)}.DatePicker-module_hds-datepicker__navigation__buttons__2UkbB{display:flex;flex-grow:1;justify-content:flex-end;transform:translateY(-3px)}.DatePicker-module_hds-datepicker__navigation__buttons__2UkbB [aria-disabled=true]{color:var(--color-black-30);cursor:not-allowed}.DatePicker-module_hds-datepicker__navigation__buttons__2UkbB button{align-items:center;background:transparent;border:0;cursor:pointer;display:inline-flex;height:calc(25px + .15rem);justify-content:center;padding:.15rem;width:calc(25px + .15rem)}.DatePicker-module_hds-datepicker__navigation__buttons__2UkbB button:focus{box-shadow:0 0 0 3px var(--color-coat-of-arms);outline:none}.DatePicker-module_hds-datepicker__bottom-buttons__20j4Y{display:flex;flex-direction:row;justify-content:center;margin:var(--spacing-s)}.DatePicker-module_hds-datepicker__bottom-buttons__20j4Y button:nth-child(2){margin-left:var(--spacing-s)}.HeaderUniversalBar-module_headerUniversalBar__1WF8C{align-items:center;box-sizing:border-box;display:flex;margin:0 auto;max-width:var(--header-max-width);min-height:48px;padding:0 var(--header-margin);width:100%}.HeaderUniversalBar-module_headerUniversalBarContainer__fckkA{background:var(--universal-bar-background-color);width:100%}.HeaderUniversalBar-module_headerUniversalBarList__1ci3u{display:flex;gap:0 var(--spacing-l);list-style:none;margin:0;padding:0;width:100%}.HeaderUniversalBar-module_universalBarMainLinkContainer__xZGVq{display:flex;flex:1;justify-self:start}.HeaderUniversalBar-module_universalBarSecondaryLinkContainer__3itUq{display:flex;justify-self:end}.HeaderUniversalBar-module_universalBarSecondaryLinkContainer__3itUq:last-child{margin-right:0}.HeaderUniversalBar-module_universalBarLink___6ZN5.HeaderUniversalBar-module_universalBarLink___6ZN5{font-size:var(--fontsize-body-m)}@media only screen and (max-width:767.98px){.HeaderUniversalBar-module_headerUniversalBarList__1ci3u{gap:0 var(--spacing-m)}}@media only screen and (max-width:575.98px){.HeaderUniversalBar-module_universalBarLink___6ZN5.HeaderUniversalBar-module_universalBarLink___6ZN5{font-size:var(--fontsize-body-s)}}.HeaderActionBar-module_header__wl6JO{--header-background-color:var(--color-white);--header-color:var(--color-black-90);--header-height:var(--spacing-4-xl);--header-focus-outline-width:3px;--header-focus-outline-border-radius:0;--header-focus-outline-color:var(--color-coat-of-arms);--header-divider-color:var(--color-black-20);--header-z-index:10;--header-margin:var(--spacing-m);--header-max-width:1440px;--header-item-border-color:var(--color-black-20);--header-item-hover-color:var(--color-black-20);--actionbar-background-color:var(--color-white);--action-bar-container-height:88px;--action-bar-section-gutter:var(--spacing-s);--action-bar-dropdown-menu-caret-width:64px;--action-bar-dropdown-menu-primary-item-height:64px;--action-bar-dropdown-menu-secondary-item-height:48px;--action-bar-button-size:64px;--action-bar-item-gutter:12px;--action-bar-item-title-font-size:var(--fontsize-body-s);--action-bar-item-title-font-color:var(--header-color);--lang-selector-mobile-background-color:var(--color-silver-light);--lang-selector-item-font-color:var(--header-color);--lang-selector-dropdown-background-color:var(--color-white);--nav-link-font-color:var(--header-color);--nav-border-color:var(--color-black-20);--nav-link-hover-color:var(--color-black-90);--nav-link-dropdown-background-color:var(--color-white);--nav-button-background-color:var(--color-black-5);--nav-button-hover-background-color:var(--color-black-5);--nav-search-color:var(--header-color);--nav-mobile-menu-background-color:var(--color-white);--nav-mobile-menu-bottom-background-color:var(--color-silver-light);--nav-mobile-margin-left:var(--spacing-s);--universal-bar-background-color:var(--color-black-5);--logo-height:56px;--icon-size:24px;--nav-drop-down-icon-color:var(--color-black);--nav-background-color:var(--color-white);background-color:var(--header-background-color);color:var(--header-color);position:relative;width:100%}@media only screen and (max-width:991px){.HeaderActionBar-module_header__wl6JO{--action-bar-container-height:74px;--logo-height:48px}}@media only screen and (max-width:767px){.HeaderActionBar-module_header__wl6JO{--header-margin:var(--spacing-s);--action-bar-container-height:64px;--logo-height:32px}}@media only screen and (max-width:575px){.HeaderActionBar-module_header__wl6JO{--header-margin:var(--spacing-xs);--action-bar-container-height:64px;--logo-height:32px}}.HeaderActionBar-module_header__wl6JO.HeaderActionBar-module_theme-dark__17LMS{--color-focus-outline:var(--color-white);--header-color:var(--color-white);--header-focus-outline-color:var(--color-white);--header-background-color:var(--color-black-80);--nav-border-color:var(--color-white);--nav-link-hover-color:var(--color-white);--universal-bar-background-color:var(--color-black-60);--navigation-link-button-background-color:var(--color-black-60);--nav-link-dropdown-background-color:var(--color-black-80);--lang-selector-mobile-background-color:var(--color-black-80);--lang-selector-dropdown-background-color:var(--color-black-60);--nav-button-background-color:var(--color-black-60);--nav-button-hover-background-color:var(--color-black-60);--nav-drop-down-icon-color:var(--color-white);--actionbar-background-color:var(--color-black-80);--nav-background-color:var(--color-black-80);--nav-mobile-menu-background-color:var(--color-black-80);--nav-mobile-menu-bottom-background-color:var(--color-black-60)}.HeaderActionBar-module_headerBackgroundWrapper__QoNCR{position:relative;z-index:var(--header-z-index)}.HeaderActionBar-module_headerActionBar__lPeGE{align-items:stretch;box-sizing:border-box;color:var(--header-color);display:flex;gap:calc(var(--header-margin)/2);height:var(--action-bar-container-height);justify-content:space-between;margin:0 auto;max-width:var(--header-max-width);padding-left:var(--header-margin);padding-right:var(--header-margin);position:relative}.HeaderActionBar-module_headerActionBar__lPeGE hr{border:0;border-left:1px solid var(--color-black-20);display:inline-block;height:100%;margin:0 5px;width:0}.HeaderActionBar-module_headerActionBarContainer__5tfj-{background-color:var(--actionbar-background-color);border-bottom:1px solid var(--header-divider-color);width:100%}.HeaderActionBar-module_headerActions__3lNnM{align-items:stretch;display:flex;flex-grow:1;gap:var(--action-bar-item-gutter);justify-content:flex-end}.HeaderActionBar-module_titleAndLogoContainer__2LEAb{align-items:center;color:inherit;cursor:pointer;display:flex;flex:0 0 auto;outline:none;position:relative;text-decoration:none;white-space:nowrap}.HeaderActionBar-module_titleAndLogoContainer__2LEAb:focus-visible{border:none;outline:var(--header-focus-outline-width) solid var(--header-focus-outline-color);outline-offset:var(--header-focus-outline-width)}.HeaderActionBar-module_titleAndLogoContainer__2LEAb:not([href]):not([tabindex=\"0\"]){cursor:auto}.HeaderActionBar-module_title__opzt9{align-self:center;margin-top:-2px;padding:1px}.HeaderActionBar-module_normal__3B4qi>.HeaderActionBar-module_title__opzt9{font-family:var(--font-default);font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-.2px;line-height:var(--lineheight-s)}@media only screen and (max-width:991px){.HeaderActionBar-module_normal__3B4qi>.HeaderActionBar-module_title__opzt9{font-size:var(--fontsize-heading-s);font-weight:500;letter-spacing:-.2px;line-height:var(--lineheight-s)}}@media only screen and (max-width:767px){.HeaderActionBar-module_normal__3B4qi>.HeaderActionBar-module_title__opzt9{font-size:var(--fontsize-body-s);font-weight:500;letter-spacing:-.1px;line-height:var(--lineheight-s)}}.HeaderActionBar-module_bold__1Lhkz>.HeaderActionBar-module_title__opzt9{font-family:var(--font-default);font-size:var(--fontsize-heading-m);font-weight:700;letter-spacing:-.2px;line-height:var(--lineheight-s)}@media only screen and (max-width:991px){.HeaderActionBar-module_bold__1Lhkz>.HeaderActionBar-module_title__opzt9{font-size:var(--fontsize-heading-s);font-weight:700;letter-spacing:-.2px;line-height:var(--lineheight-s)}}@media only screen and (max-width:767px){.HeaderActionBar-module_bold__1Lhkz>.HeaderActionBar-module_title__opzt9{font-size:var(--fontsize-body-s);font-weight:700;letter-spacing:-.1px;line-height:var(--lineheight-s)}}.HeaderActionBar-module_black__2P2h1>.HeaderActionBar-module_title__opzt9{font-family:var(--font-default);font-size:var(--fontsize-heading-l);font-weight:900;letter-spacing:-.2px;line-height:var(--lineheight-s)}@media only screen and (max-width:991px){.HeaderActionBar-module_black__2P2h1>.HeaderActionBar-module_title__opzt9{font-size:var(--fontsize-heading-m);font-weight:900;letter-spacing:-.2px;line-height:var(--lineheight-s)}}@media only screen and (max-width:767px){.HeaderActionBar-module_black__2P2h1>.HeaderActionBar-module_title__opzt9{font-size:var(--fontsize-heading-xxs);font-weight:900;letter-spacing:-.1px;line-height:var(--lineheight-s)}}.HeaderActionBar-module_logo__2r2T0{align-self:center;box-sizing:content-box;height:var(--logo-height)}.HeaderSearch-module_searchContainer__3NfSd{align-items:center;border-radius:0;color:var(--nav-search-color);display:flex;position:relative;width:100%}.HeaderLink-module_header__3VgiJ{--header-background-color:var(--color-white);--header-color:var(--color-black-90);--header-height:var(--spacing-4-xl);--header-focus-outline-width:3px;--header-focus-outline-border-radius:0;--header-focus-outline-color:var(--color-coat-of-arms);--header-divider-color:var(--color-black-20);--header-z-index:10;--header-margin:var(--spacing-m);--header-max-width:1440px;--header-item-border-color:var(--color-black-20);--header-item-hover-color:var(--color-black-20);--actionbar-background-color:var(--color-white);--action-bar-container-height:88px;--action-bar-section-gutter:var(--spacing-s);--action-bar-dropdown-menu-caret-width:64px;--action-bar-dropdown-menu-primary-item-height:64px;--action-bar-dropdown-menu-secondary-item-height:48px;--action-bar-button-size:64px;--action-bar-item-gutter:12px;--action-bar-item-title-font-size:var(--fontsize-body-s);--action-bar-item-title-font-color:var(--header-color);--lang-selector-mobile-background-color:var(--color-silver-light);--lang-selector-item-font-color:var(--header-color);--lang-selector-dropdown-background-color:var(--color-white);--nav-link-font-color:var(--header-color);--nav-border-color:var(--color-black-20);--nav-link-hover-color:var(--color-black-90);--nav-link-dropdown-background-color:var(--color-white);--nav-button-background-color:var(--color-black-5);--nav-button-hover-background-color:var(--color-black-5);--nav-search-color:var(--header-color);--nav-mobile-menu-background-color:var(--color-white);--nav-mobile-menu-bottom-background-color:var(--color-silver-light);--nav-mobile-margin-left:var(--spacing-s);--universal-bar-background-color:var(--color-black-5);--logo-height:56px;--icon-size:24px;--nav-drop-down-icon-color:var(--color-black);--nav-background-color:var(--color-white);background-color:var(--header-background-color);color:var(--header-color);position:relative;width:100%}@media only screen and (max-width:991px){.HeaderLink-module_header__3VgiJ{--action-bar-container-height:74px;--logo-height:48px}}@media only screen and (max-width:767px){.HeaderLink-module_header__3VgiJ{--header-margin:var(--spacing-s);--action-bar-container-height:64px;--logo-height:32px}}@media only screen and (max-width:575px){.HeaderLink-module_header__3VgiJ{--header-margin:var(--spacing-xs);--action-bar-container-height:64px;--logo-height:32px}}.HeaderLink-module_header__3VgiJ.HeaderLink-module_theme-dark__2BGmT{--color-focus-outline:var(--color-white);--header-color:var(--color-white);--header-focus-outline-color:var(--color-white);--header-background-color:var(--color-black-80);--nav-border-color:var(--color-white);--nav-link-hover-color:var(--color-white);--universal-bar-background-color:var(--color-black-60);--navigation-link-button-background-color:var(--color-black-60);--nav-link-dropdown-background-color:var(--color-black-80);--lang-selector-mobile-background-color:var(--color-black-80);--lang-selector-dropdown-background-color:var(--color-black-60);--nav-button-background-color:var(--color-black-60);--nav-button-hover-background-color:var(--color-black-60);--nav-drop-down-icon-color:var(--color-white);--actionbar-background-color:var(--color-black-80);--nav-background-color:var(--color-black-80);--nav-mobile-menu-background-color:var(--color-black-80);--nav-mobile-menu-bottom-background-color:var(--color-black-60)}.HeaderLink-module_headerBackgroundWrapper__3Nqtq{position:relative;z-index:var(--header-z-index)}.HeaderLink-module_headerLink__2i9-J.HeaderLink-module_headerLink__2i9-J{--link-color:var(--color-black-90);--link-font-size:var(--fontsize-body-s);--link-visited-color:none;border:0;color:var(--nav-link-font-color);display:flex;line-height:var(--lineheight-l);margin:0;text-decoration:none;word-wrap:break-word}.HeaderLink-module_headerLink__2i9-J.HeaderLink-module_headerLink__2i9-J:hover{text-decoration:underline;text-decoration-color:var(--nav-link-hover-color)}.HeaderLink-module_headerLink__2i9-J.HeaderLink-module_headerLink__2i9-J:focus-visible{border:none;outline:var(--header-focus-outline-width) solid var(--header-focus-outline-color);outline-offset:var(--header-focus-outline-width)}.HeaderLink-module_active__287Pm{font-weight:700;padding-left:var(--header-focus-outline-width)}.HeaderLink-module_navigationLinkWrapper__2jd7A{align-items:center;display:flex;height:100%;justify-content:space-between;position:relative}.HeaderLink-module_navigationLinkWrapper__2jd7A.HeaderLink-module_isNotLargeScreen__2dND6{width:100%}.HeaderLink-module_navigationLinkWrapper__2jd7A.HeaderLink-module_isNotLargeScreen__2dND6,.HeaderLink-module_navigationLinkWrapper__2jd7A.HeaderLink-module_isNotLargeScreen__2dND6:focus{border-top-width:1px}.HeaderLink-module_navigationLinkWrapper__2jd7A.HeaderLink-module_isNotLargeScreen__2dND6 ul{border:none}.HeaderLink-module_headerLink__2i9-J.HeaderLink-module_isNotLargeScreen__2dND6{align-self:center;border:none;box-sizing:border-box;color:var(--nav-link-font-color);font-size:var(--fontsize-body-xl);margin-left:var(--nav-mobile-margin-left);padding:0;word-wrap:break-word}.HeaderLink-module_headerLink__2i9-J.HeaderLink-module_isNotLargeScreen__2dND6:focus{border:none}.HeaderActionBarLogo-module_logoWrapper__8NgfS{align-items:center;display:flex;height:100%;max-height:100%;max-width:100%}.HeaderActionBarNavigationMenu-module_activeLinkWrapper__YMM-z,.HeaderActionBarNavigationMenu-module_previousLinkWrapper__3PK9W{align-items:center;background-color:transparent;border:none;cursor:pointer;display:flex;width:100%}.HeaderActionBarNavigationMenu-module_previousLinkWrapper__3PK9W{padding:0}.HeaderActionBarNavigationMenu-module_previousLinkWrapper__3PK9W:focus-visible .HeaderActionBarNavigationMenu-module_backIcon__1ndnU,.HeaderActionBarNavigationMenu-module_previousLinkWrapper__3PK9W:hover .HeaderActionBarNavigationMenu-module_backIcon__1ndnU{transform:translateX(-3px);transition:transform .2s linear}.HeaderActionBarNavigationMenu-module_previousLinkWrapper__3PK9W:focus-visible .HeaderActionBarNavigationMenu-module_backIcon__1ndnU,.HeaderActionBarNavigationMenu-module_previousLinkWrapper__3PK9W:not(:hover) .HeaderActionBarNavigationMenu-module_backIcon__1ndnU{transition:transform .2s linear}.HeaderActionBarNavigationMenu-module_activeLinkWrapper__YMM-z:focus-visible,.HeaderActionBarNavigationMenu-module_previousLinkWrapper__3PK9W:focus-visible{border:none;outline:var(--header-focus-outline-width) solid var(--header-focus-outline-color);outline-offset:var(--header-focus-outline-width)}.HeaderActionBarNavigationMenu-module_headerNavigationMenu__1meI5{background-color:var(--nav-mobile-menu-bottom-background-color);max-height:0;overflow:hidden;position:absolute;transition:max-height .3s;width:100%}.HeaderActionBarNavigationMenu-module_menu__2c1ye{display:flex;flex-flow:column nowrap;height:min-content;list-style:none;margin:-1px 0 0;overscroll-behavior:contain;padding:0;width:100vw}.HeaderActionBarNavigationMenu-module_menu__2c1ye .HeaderActionBarNavigationMenu-module_activeListItem__2p3l5{border-top:none;min-height:72px}.HeaderActionBarNavigationMenu-module_menu__2c1ye .HeaderActionBarNavigationMenu-module_activeMobileLink__15KZk.HeaderActionBarNavigationMenu-module_activeMobileLink__15KZk{font-size:var(--fontsize-heading-m);margin:var(--spacing-m) var(--spacing-s);text-decoration:underline}.HeaderActionBarNavigationMenu-module_menu__2c1ye .HeaderActionBarNavigationMenu-module_activeMobileLink__15KZk.HeaderActionBarNavigationMenu-module_activeMobileLink__15KZk:hover{text-decoration:none}.HeaderActionBarNavigationMenu-module_menu__2c1ye .HeaderActionBarNavigationMenu-module_activeMobileLink__15KZk.HeaderActionBarNavigationMenu-module_activeMobileLink__15KZk:focus-visible{border:none;outline:var(--header-focus-outline-width) solid var(--header-focus-outline-color);outline-offset:var(--header-focus-outline-width)}.HeaderActionBarNavigationMenu-module_menu__2c1ye .HeaderActionBarNavigationMenu-module_hideDropdownButton__3UOcX{display:none}.HeaderActionBarNavigationMenu-module_menu__2c1ye .HeaderActionBarNavigationMenu-module_previousListItem__2EaFO{align-items:center;display:flex;min-height:auto;padding:var(--spacing-m) calc(var(--header-focus-outline-width)*2) 0}.HeaderActionBarNavigationMenu-module_menu__2c1ye .HeaderActionBarNavigationMenu-module_previousListItem__2EaFO .HeaderActionBarNavigationMenu-module_previousButton__2IUsg{align-items:center;background-color:var(--nav-button-background-color);border:none;color:var(--nav-link-font-color);display:flex;height:32px;justify-content:center;margin-left:var(--nav-mobile-margin-left);width:32px}.HeaderActionBarNavigationMenu-module_menu__2c1ye .HeaderActionBarNavigationMenu-module_previousMobileLink__tVb6d.HeaderActionBarNavigationMenu-module_previousMobileLink__tVb6d{color:var(--nav-link-font-color);font-size:var(--fontsize-body-m);font-weight:500;margin-left:var(--spacing-xs)}.HeaderActionBarNavigationMenu-module_mobileDropdownLink__3CidI{position:relative}.HeaderActionBarNavigationMenu-module_mobileLinkDropdown__3gW4P{display:block;left:0;position:relative;right:0;top:auto;width:100%}.HeaderActionBarNavigationMenu-module_mobileLinkDropdownButton__2vn7b.HeaderActionBarNavigationMenu-module_mobileLinkDropdownButton__2vn7b{background-color:transparent;margin:0;padding:20px;transform:rotate(-90deg)}.HeaderActionBarNavigationMenu-module_mobileLinkDropdownButton__2vn7b.HeaderActionBarNavigationMenu-module_mobileLinkDropdownButton__2vn7b:hover{background-color:transparent}.HeaderActionBarNavigationMenu-module_mobileLinkDropdownButton__2vn7b.HeaderActionBarNavigationMenu-module_mobileLinkDropdownButton__2vn7b svg:hover{transform:translateY(4px);transition:transform .2s linear}.HeaderActionBarNavigationMenu-module_mobileLinkDropdownButton__2vn7b.HeaderActionBarNavigationMenu-module_mobileLinkDropdownButton__2vn7b:focus-visible{border:none;outline:var(--header-focus-outline-width) solid var(--header-focus-outline-color);outline-offset:calc(var(--header-focus-outline-width) - var(--header-focus-outline-width)*2)}.HeaderActionBarNavigationMenu-module_mobileLinkDropdownButton__2vn7b.HeaderActionBarNavigationMenu-module_mobileLinkDropdownButton__2vn7b:focus-visible svg{transform:translateY(4px);transition:transform .2s linear}.HeaderActionBarNavigationMenu-module_mobileLinkWrapper__2RXG0{box-sizing:border-box}.HeaderActionBarNavigationMenu-module_mobileLinkWrapper__2RXG0 .HeaderActionBarNavigationMenu-module_mobileLink__17oiS.HeaderActionBarNavigationMenu-module_mobileLink__17oiS{border-right:1px solid var(--color-black-20);box-sizing:border-box;flex-grow:1;margin:0;padding:17px 16px;position:relative}.HeaderActionBarNavigationMenu-module_mobileLinkWrapper__2RXG0 .HeaderActionBarNavigationMenu-module_mobileLink__17oiS.HeaderActionBarNavigationMenu-module_mobileLink__17oiS:focus-visible{border:none;outline:var(--header-focus-outline-width) solid var(--header-focus-outline-color);outline-offset:-3px}.HeaderActionBarNavigationMenu-module_mobileMenuOpen__kYn7o{display:flex;flex-direction:column;height:100vh;max-height:100vh}.HeaderActionBarNavigationMenu-module_mobileNavigationLink__18T64{border-top:1px solid var(--color-black-20);display:flex;min-height:var(--action-bar-dropdown-menu-primary-item-height);position:relative;width:100%}.HeaderActionBarNavigationMenu-module_navigation__3w3PU{background-color:var(--nav-mobile-menu-background-color);border-bottom:1px solid var(--color-black-20);display:flex}.HeaderActionBarNavigationMenu-module_navigationWrapper__2lgqu{display:flex;overflow:hidden;overscroll-behavior:contain;width:300%}.HeaderActionBarNavigationMenu-module_navigationWrapper__2lgqu.HeaderActionBarNavigationMenu-module_left0__2TmUK{transform:translateX(0);transition:transform .3s ease}.HeaderActionBarNavigationMenu-module_navigationWrapper__2lgqu.HeaderActionBarNavigationMenu-module_left100__37ky0{transform:translateX(-100vw);transition:transform .3s ease}.HeaderActionBarNavigationMenu-module_navigationWrapper__2lgqu.HeaderActionBarNavigationMenu-module_left200__XXOux{transform:translateX(-200vw);transition:transform .3s ease}.HeaderActionBarNavigationMenu-module_universalList__-H029{display:flex;flex-direction:column;gap:var(--spacing-xs) 0;list-style:none;margin:0;padding:var(--spacing-l) 0 var(--spacing-m) 0}.HeaderActionBarNavigationMenu-module_universalList__-H029 .HeaderActionBarNavigationMenu-module_universalLink__YfWAC.HeaderActionBarNavigationMenu-module_universalLink__YfWAC{font-size:var(--fontsize-body-m)}.HeaderActionBarNavigationMenu-module_logoLink__2OjCV{height:calc(var(--logo-height)*1.5)!important;justify-content:center;margin-bottom:var(--spacing-m)}.HeaderActionBarNavigationMenu-module_visible__2U3e0{visibility:visible}.HeaderActionBarNavigationMenu-module_hidden__1w-LK{visibility:hidden}.MenuButton-module_toggleButton__3WH1a{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.MenuButton-module_menuButton__3T9k9{--menu-border-width:1px;--menu-max-width:20rem;--menu-top-margin:0;--menu-item-min-height:var(--spacing-xl);--menu-button-focus-outline-color:var(--color-coat-of-arms);--menu-border-color:var(--color-black-90);--menu-item-background-color:var(--color-white);--menu-item-background-color-highlighted:var(--color-bus);--menu-item-color:var(--color-black-90);--menu-item-color-highlighted:var(--color-white);border-radius:0;position:relative}.MenuButton-module_menuButton__3T9k9:focus-within{box-shadow:0 0 0 3px var(--menu-button-focus-outline-color)}.MenuButton-module_toggleButton__3WH1a{align-items:center;display:flex;line-height:var(--lineheight-s);outline:none;padding:var(--spacing-3-xs) 0}.MenuButton-module_toggleButton__3WH1a>*{pointer-events:none}.MenuButton-module_toggleButtonLabel__3NiHR{margin:0 var(--spacing-3-xs)}@media only screen and (min-width:1248px){.MenuButton-module_toggleButtonLabel__3NiHR{margin:0 var(--spacing-2-xs)}}.HeaderLanguageSelector-module_header__3x8fD{--header-background-color:var(--color-white);--header-color:var(--color-black-90);--header-height:var(--spacing-4-xl);--header-focus-outline-width:3px;--header-focus-outline-border-radius:0;--header-focus-outline-color:var(--color-coat-of-arms);--header-divider-color:var(--color-black-20);--header-z-index:10;--header-margin:var(--spacing-m);--header-max-width:1440px;--header-item-border-color:var(--color-black-20);--header-item-hover-color:var(--color-black-20);--actionbar-background-color:var(--color-white);--action-bar-container-height:88px;--action-bar-section-gutter:var(--spacing-s);--action-bar-dropdown-menu-caret-width:64px;--action-bar-dropdown-menu-primary-item-height:64px;--action-bar-dropdown-menu-secondary-item-height:48px;--action-bar-button-size:64px;--action-bar-item-gutter:12px;--action-bar-item-title-font-size:var(--fontsize-body-s);--action-bar-item-title-font-color:var(--header-color);--lang-selector-mobile-background-color:var(--color-silver-light);--lang-selector-item-font-color:var(--header-color);--lang-selector-dropdown-background-color:var(--color-white);--nav-link-font-color:var(--header-color);--nav-border-color:var(--color-black-20);--nav-link-hover-color:var(--color-black-90);--nav-link-dropdown-background-color:var(--color-white);--nav-button-background-color:var(--color-black-5);--nav-button-hover-background-color:var(--color-black-5);--nav-search-color:var(--header-color);--nav-mobile-menu-background-color:var(--color-white);--nav-mobile-menu-bottom-background-color:var(--color-silver-light);--nav-mobile-margin-left:var(--spacing-s);--universal-bar-background-color:var(--color-black-5);--logo-height:56px;--icon-size:24px;--nav-drop-down-icon-color:var(--color-black);--nav-background-color:var(--color-white);background-color:var(--header-background-color);color:var(--header-color);position:relative;width:100%}@media only screen and (max-width:991px){.HeaderLanguageSelector-module_header__3x8fD{--action-bar-container-height:74px;--logo-height:48px}}@media only screen and (max-width:767px){.HeaderLanguageSelector-module_header__3x8fD{--header-margin:var(--spacing-s);--action-bar-container-height:64px;--logo-height:32px}}@media only screen and (max-width:575px){.HeaderLanguageSelector-module_header__3x8fD{--header-margin:var(--spacing-xs);--action-bar-container-height:64px;--logo-height:32px}}.HeaderLanguageSelector-module_header__3x8fD.HeaderLanguageSelector-module_theme-dark__1Y6Z6{--color-focus-outline:var(--color-white);--header-color:var(--color-white);--header-focus-outline-color:var(--color-white);--header-background-color:var(--color-black-80);--nav-border-color:var(--color-white);--nav-link-hover-color:var(--color-white);--universal-bar-background-color:var(--color-black-60);--navigation-link-button-background-color:var(--color-black-60);--nav-link-dropdown-background-color:var(--color-black-80);--lang-selector-mobile-background-color:var(--color-black-80);--lang-selector-dropdown-background-color:var(--color-black-60);--nav-button-background-color:var(--color-black-60);--nav-button-hover-background-color:var(--color-black-60);--nav-drop-down-icon-color:var(--color-white);--actionbar-background-color:var(--color-black-80);--nav-background-color:var(--color-black-80);--nav-mobile-menu-background-color:var(--color-black-80);--nav-mobile-menu-bottom-background-color:var(--color-black-60)}.HeaderLanguageSelector-module_headerBackgroundWrapper__3js89{position:relative;z-index:var(--header-z-index)}.HeaderLanguageSelector-module_languageSelector__3d38B{display:flex;gap:var(--spacing-s);justify-content:space-between}.HeaderLanguageSelector-module_languageSelectorDropdownIcon__3uQwS{align-items:center;margin-top:1px;padding-top:3px}.HeaderLanguageSelector-module_languageSelectorDropdownIcon__3uQwS:focus-visible{outline-offset:0}.HeaderLanguageSelector-module_languageSelectorDropdown__2D4yu{align-items:flex-start;background-color:var(--lang-selector-dropdown-background-color);display:flex;flex-flow:column nowrap}.HeaderLanguageSelector-module_languageSelectorDropdown__2D4yu>*{align-items:center;display:flex;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin:0}.HeaderLanguageSelector-module_languageSelectorDropdown__2D4yu>h3{border-bottom:1px solid var(--header-divider-color)}.HeaderLanguageSelector-module_languageSelectorDropdown__2D4yu>h3:not(:first-of-type){border-top:1px solid var(--header-divider-color)}.HeaderLanguageSelector-module_languageSelectorDropdown__2D4yu>a{color:var(--lang-selector-item-font-color);text-decoration:none}.HeaderLanguageSelector-module_languageSelectorDropdown__2D4yu>button{border:var(--header-focus-outline-width) solid transparent}[type=button].HeaderLanguageSelector-module_item__3_I7N,button.HeaderLanguageSelector-module_item__3_I7N{appearance:none;background:transparent;color:var(--lang-selector-item-font-color);cursor:pointer;line-height:var(--lineheight-l);outline:0;white-space:nowrap}[type=button].HeaderLanguageSelector-module_item__3_I7N:focus-visible,button.HeaderLanguageSelector-module_item__3_I7N:focus-visible{border:var(--header-focus-outline-width) solid var(--header-focus-outline-color)}.HeaderLanguageSelector-module_activeItem__15LKg{font-weight:700}.HeaderLanguageSelector-module_activeItem__15LKg span{border-bottom:2px solid}.HeaderLanguageSelector-module_languageNodes__lTe8p{display:flex;gap:var(--spacing-s)}.HeaderLanguageSelector-module_languageNodes__lTe8p [type=button].HeaderLanguageSelector-module_item__3_I7N,.HeaderLanguageSelector-module_languageNodes__lTe8p button.HeaderLanguageSelector-module_item__3_I7N{align-self:center;border:none;padding:0}.HeaderLanguageSelector-module_languageNodes__lTe8p [type=button].HeaderLanguageSelector-module_item__3_I7N:focus-visible,.HeaderLanguageSelector-module_languageNodes__lTe8p button.HeaderLanguageSelector-module_item__3_I7N:focus-visible{border:none;outline:var(--header-focus-outline-width) solid var(--header-focus-outline-color);outline-offset:var(--header-focus-outline-width)}.HeaderLanguageSelector-module_simpleLanguageNodes__3uEk-{gap:var(--action-bar-item-gutter)}.HeaderLanguageSelector-module_fullWidthForMobile__37l-I{background-color:var(--lang-selector-mobile-background-color);border-bottom:1px solid var(--color-black-20);box-sizing:border-box;display:flex;height:var(--spacing-layout-m);padding:0 var(--header-margin);width:100%}.HeaderLanguageSelector-module_fullWidthForMobile__37l-I .HeaderLanguageSelector-module_languageSelectorDropdownIcon__3uQwS:focus-visible{outline-offset:0}.SkipLink-module_skipLink__1knzF:not(:focus){border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.SkipLink-module_skipLink__1knzF{--background-color:var(--color-white);--height:66px;--inner-outer-spacing:6px;--outline-color:var(--color-focus-outline);--outline-inner-color:var(--color-black-90);--outline-width:3px;--text-color:var(--color-black-90);--top:10px;--left:15px;--width:213px;display:flex;height:1px;position:absolute;top:calc(var(--height)*-1 + var(--top)*-1);width:1px}@media only screen and (max-width:991px){.SkipLink-module_skipLink__1knzF{--top:2px}}@media only screen and (max-width:767px){.SkipLink-module_skipLink__1knzF{--height:60px}}.SkipLink-module_skipLink__1knzF:focus-visible{outline-offset:0}.SkipLink-module_skipLink__1knzF:focus{align-items:center;background-color:var(--background-color);font-family:var(--font-default);font-weight:500;height:var(--height);justify-content:center;left:var(--left);outline:var(--outline-color) solid var(--outline-width);text-decoration:none;top:var(--top);transition:all .15s ease-in;width:var(--width);z-index:99}.SkipLink-module_skipLink__1knzF:focus>.SkipLink-module_skipLinkLabel__21n5B{align-items:center;color:var(--text-color);display:flex;height:calc(var(--height) - var(--inner-outer-spacing)*2);justify-content:center;outline:var(--outline-inner-color) solid var(--outline-width);width:calc(var(--width) - var(--inner-outer-spacing)*2)}.button_hds-button__2ZUJx{--border-width:2px;--color:inherit;--min-size:44px;--outline-gutter:2px;--outline-width:3px;align-content:flex-start;align-items:center;-webkit-appearance:button;background-color:var(--background-color,transparent);border:var(--border-width) solid var(--border-color,transparent);border-radius:0;color:var(--color);cursor:pointer;display:inline-flex;font-family:inherit;font-size:100%;font-weight:500;justify-content:center;line-height:1.15;margin:0;min-height:var(--min-size);min-width:var(--min-size);padding:0 var(--spacing-2-xs);position:relative;text-decoration:none;text-transform:none;vertical-align:top}.button_hds-button__2ZUJx,.button_hds-button__2ZUJx *,.button_hds-button__2ZUJx:after,.button_hds-button__2ZUJx :after,.button_hds-button__2ZUJx:before,.button_hds-button__2ZUJx :before{box-sizing:border-box}.button_hds-button__2ZUJx[type=button],.button_hds-button__2ZUJx[type=reset],.button_hds-button__2ZUJx[type=submit]{-webkit-appearance:button}.button_hds-button__2ZUJx::-moz-focus-inner,.button_hds-button__2ZUJx[type=button]::-moz-focus-inner,.button_hds-button__2ZUJx[type=reset]::-moz-focus-inner,.button_hds-button__2ZUJx[type=submit]::-moz-focus-inner{border-style:none;padding:0}.button_hds-button__2ZUJx:-moz-focusring,.button_hds-button__2ZUJx[type=button]:-moz-focusring,.button_hds-button__2ZUJx[type=reset]:-moz-focusring,.button_hds-button__2ZUJx[type=submit]:-moz-focusring{outline:1px dotted ButtonText}.button_hds-button__2ZUJx.button_focus-visible__2Up1m,.button_hds-button__2ZUJx:focus-visible,.button_hds-button__2ZUJx:hover{transition-duration:85ms;transition-property:background-color,border-color,color;transition-timing-function:ease-out}.button_hds-button__2ZUJx:hover{background-color:var(--background-color-hover,transparent);color:var(--color-hover)}.button_hds-button__2ZUJx.button_focus-visible__2Up1m,.button_hds-button__2ZUJx:active,.button_hds-button__2ZUJx:focus-visible{background-color:var(--background-color-focus,transparent);color:var(--color-focus);outline:none}.button_hds-button__2ZUJx:not(:disabled){border-color:var(--border-color,transparent)}.button_hds-button__2ZUJx:disabled{background-color:var(--background-color-disabled,transparent);border-color:var(--border-color-disabled,transparent);color:var(--color-disabled);cursor:not-allowed}.button_hds-button__2ZUJx.button_focus-visible__2Up1m:hover,.button_hds-button__2ZUJx:active:hover,.button_hds-button__2ZUJx:focus-visible:hover{background-color:var(--background-color-hover-focus,transparent)}.button_hds-button__2ZUJx:not(:disabled):hover{border-color:var(--border-color-hover,transparent)}.button_hds-button__2ZUJx:not(:disabled).button_focus-visible__2Up1m,.button_hds-button__2ZUJx:not(:disabled):active,.button_hds-button__2ZUJx:not(:disabled):focus-visible{border-color:var(--border-color-focus,transparent)}.button_hds-button__2ZUJx:not(:disabled).button_focus-visible__2Up1m:hover,.button_hds-button__2ZUJx:not(:disabled):active:hover,.button_hds-button__2ZUJx:not(:disabled):focus-visible:hover{border-color:var(--border-color-hover-focus,transparent);color:var(--color-hover-focus)}.button_hds-button__2ZUJx:after{--size:100%;border:var(--outline-width) solid transparent;content:\"\";height:var(--size);position:absolute;width:var(--size)}.button_hds-button__2ZUJx.button_focus-visible__2Up1m:after,.button_hds-button__2ZUJx:active:after,.button_hds-button__2ZUJx:focus-visible:after{--size:calc(100% + var(--outline-width)*2 + var(--border-width)*2 + var(--outline-gutter)*2);border-color:var(--focus-outline-color)}.button_hds-button__label__Qw_Jx,input[type=submit].button_hds-button__2ZUJx{font-weight:inherit;line-height:1.25em;padding:var(--spacing-s)}input[type=submit].button_hds-button__2ZUJx{cursor:pointer;padding:var(--spacing-s) var(--spacing-l)}input[type=submit].button_hds-button__2ZUJx.button_focus-visible__2Up1m,input[type=submit].button_hds-button__2ZUJx:focus-visible{box-shadow:0 0 0 var(--outline-gutter) var(--submit-input-focus-gutter-color),0 0 0 calc(var(--outline-gutter) + var(--outline-width)) var(--focus-outline-color)}.button_hds-button__label__Qw_Jx:only-child{margin:0 var(--spacing-2-xs)}.button_hds-button--small__1Xo7e .button_hds-button__label__Qw_Jx,input[type=submit].button_hds-button--small__1Xo7e{line-height:var(--lineheight-s);padding:var(--spacing-2-xs) var(--spacing-xs)}.button_hds-button--supplementary__6Yi7z .button_hds-button__label__Qw_Jx:first-child{padding-right:var(--spacing-2-xs)}.button_hds-button--small__1Xo7e .button_hds-button__label__Qw_Jx:only-child{margin:0 var(--spacing-xs)}.button_hds-button--supplementary__6Yi7z .button_hds-icon__KLp4r+.button_hds-button__label__Qw_Jx:last-child{padding-left:var(--spacing-2-xs)}.button_hds-button--supplementary__6Yi7z .button_hds-icon__KLp4r+.button_hds-button__label__Qw_Jx:not(:last-child){padding-left:var(--spacing-2-xs);padding-right:var(--spacing-2-xs)}.button_hds-button--small__1Xo7e{padding:0}input[type=submit].button_hds-button--small__1Xo7e{padding:var(--spacing-2-xs) var(--spacing-m)}.button_hds-button--small__1Xo7e .button_hds-button__label__Qw_Jx:not(:first-of-type):not(:last-of-type){padding:var(--spacing-2-xs) var(--spacing-2-xs)}.button_hds-button--fullwidth__1Or7k{width:100%}.button_hds-button__2ZUJx .button_hds-icon__KLp4r{height:var(--spacing-m);margin-left:var(--spacing-s);width:var(--spacing-m)}.button_hds-button__label__Qw_Jx~.button_hds-icon__KLp4r{margin:0 var(--spacing-s) 0 0}.button_hds-button--small__1Xo7e .button_hds-icon__KLp4r{margin-left:var(--spacing-2-xs)}.button_hds-button__2ZUJx .button_hds-button--small__1Xo7e .button_hds-button__label__Qw_Jx~.button_hds-icon__KLp4r{margin:0 var(--spacing-2-xs) 0 0}.button_hds-button__2ZUJx .button_hds-icon__KLp4r:first-of-type:not(:last-of-type){margin:0 0 0 var(--spacing-2-xs)}.button_hds-button__2ZUJx .button_hds-icon__KLp4r:last-of-type:not(:first-of-type){margin:0 var(--spacing-2-xs) 0 0}.button_hds-button--small__1Xo7e .button_hds-icon__KLp4r:first-child:not(:last-of-type){margin:0 0 0 var(--spacing-2-xs)}.button_hds-button--small__1Xo7e .button_hds-icon__KLp4r:last-child:not(:first-of-type){margin:0 var(--spacing-2-xs) 0 0}.button_hds-button--primary__3n7lE{--background-color:var(--color-bus);--background-color-hover:var(--color-bus-dark);--background-color-focus:var(--color-bus);--background-color-hover-focus:var(--color-bus-dark);--background-color-disabled:var(--color-black-20);--border-color:var(--color-bus);--border-color-hover:var(--color-bus-dark);--border-color-focus:var(--color-bus);--border-color-hover-focus:var(--color-bus-dark);--border-color-disabled:var(--color-black-20);--color:var(--color-white);--color-hover:var(--color-white);--color-focus:var(--color-white);--color-hover-focus:var(--color-white);--color-disabled:var(--color-white);--focus-outline-color:var(--color-focus-outline);--submit-input-focus-gutter-color:var(--color-white)}.button_hds-button--secondary__20_I8{--border-color:var(--color-bus);--border-color-hover:var(--color-bus-dark);--border-color-focus:var(--color-bus);--border-color-hover-focus:var(--color-bus-dark);--border-color-disabled:var(--color-black-50);--focus-outline-color:var(--color-focus-outline);--submit-input-focus-gutter-color:var(--color-white)}.button_hds-button--secondary__20_I8,.button_hds-button--supplementary__6Yi7z{--background-color:transparent;--background-color-hover:var(--color-bus-light);--background-color-focus:transparent;--background-color-hover-focus:var(--color-bus-light);--background-color-disabled:transparent;--color:var(--color-bus);--color-hover:var(--color-bus-dark);--color-focus:var(--color-bus);--color-hover-focus:var(--color-bus-dark);--color-disabled:var(--color-black-40)}.button_hds-button--supplementary__6Yi7z{--border-color:transparent;--border-color-hover:transparent;--border-color-focus:var(--color-focus-outline);--border-color-hover-focus:var(--color-focus-outline);--border-color-disabled:transparent;--focus-outline-color:transparent;--submit-input-focus-gutter-color:transparent}.button_hds-button--loading__3igPU{--background-color:transparent;--background-color-hover:transparent;--background-color-focus:transparent;--background-color-hover-focus:transparent;--background-color-disabled:transparent;--border-color:transparent;--border-color-hover:transparent;--border-color-focus:transparent;--border-color-hover-focus:transparent;--border-color-disabled:transparent;--color:var(--color-black-90);--color-hover:var(--color-black-90);--color-focus:var(--color-black-90);--color-hover-focus:var(--color-black-90);--color-disabled:var(--color-black-90);cursor:wait}.button_hds-button--success__RHXHV{--background-color:var(--color-success);--background-color-hover:var(--color-success-dark);--background-color-focus:var(--color-success);--background-color-hover-focus:var(--color-success-dark);--border-color:var(--color-success);--border-color-hover:var(--color-success-dark);--border-color-focus:var(--color-success);--border-color-hover-focus:var(--color-success-dark)}.button_hds-button--danger__1iO6I,.button_hds-button--success__RHXHV{--color:var(--color-white);--color-hover:var(--color-white);--color-focus:var(--color-white);--color-hover-focus:var(--color-white);--focus-outline-color:var(--color-focus-outline)}.button_hds-button--danger__1iO6I{--background-color:var(--color-error);--background-color-hover:var(--color-error-dark);--background-color-focus:var(--color-error);--background-color-hover-focus:var(--color-error-dark);--border-color:var(--color-error);--border-color-hover:var(--color-error-dark);--border-color-focus:var(--color-error);--border-color-hover-focus:var(--color-error-dark)}.button_hds-button--primary__3n7lE.button_hds-button--theme-coat__3yrWi{--background-color:var(--color-coat-of-arms);--background-color-hover:var(--color-coat-of-arms-dark);--background-color-focus:var(--color-coat-of-arms);--background-color-hover-focus:var(--color-coat-of-arms-dark);--border-color:var(--color-coat-of-arms);--border-color-hover:var(--color-coat-of-arms-dark);--border-color-focus:var(--color-coat-of-arms);--border-color-hover-focus:var(--color-coat-of-arms-dark);--color:var(--color-white);--color-hover:var(--color-white);--color-focus:var(--color-white);--color-hover-focus:var(--color-white)}.button_hds-button--secondary__20_I8.button_hds-button--theme-coat__3yrWi{--border-color:var(--color-coat-of-arms);--border-color-hover:var(--color-coat-of-arms-dark);--border-color-focus:var(--color-coat-of-arms);--border-color-hover-focus:var(--color-coat-of-arms-dark)}.button_hds-button--secondary__20_I8.button_hds-button--theme-coat__3yrWi,.button_hds-button--supplementary__6Yi7z.button_hds-button--theme-coat__3yrWi{--background-color:transparent;--background-color-hover:var(--color-coat-of-arms-light);--background-color-focus:transparent;--background-color-hover-focus:var(--color-coat-of-arms-light);--color:var(--color-coat-of-arms);--color-hover:var(--color-coat-of-arms);--color-focus:var(--color-coat-of-arms);--color-hover-focus:var(--color-coat-of-arms)}.button_hds-button--supplementary__6Yi7z.button_hds-button--theme-coat__3yrWi{--border-color:transparent;--border-color-hover:transparent;--border-color-focus:var(--color-focus-outline);--border-color-hover-focus:var(--color-focus-outline)}.button_hds-button--primary__3n7lE.button_hds-button--theme-black__1axR7{--background-color:var(--color-black);--background-color-hover:var(--color-black);--background-color-focus:var(--color-black);--background-color-hover-focus:var(--color-black);--border-color:var(--color-black);--border-color-hover:var(--color-black);--border-color-focus:var(--color-black);--border-color-hover-focus:var(--color-black);--color:var(--color-white);--color-hover:var(--color-white);--color-focus:var(--color-white);--color-hover-focus:var(--color-white)}.button_hds-button--secondary__20_I8.button_hds-button--theme-black__1axR7{--border-color:var(--color-black);--border-color-hover:var(--color-black);--border-color-focus:var(--color-black);--border-color-hover-focus:var(--color-black)}.button_hds-button--secondary__20_I8.button_hds-button--theme-black__1axR7,.button_hds-button--supplementary__6Yi7z.button_hds-button--theme-black__1axR7{--background-color:transparent;--background-color-hover:var(--color-black-5);--background-color-focus:transparent;--background-color-hover-focus:var(--color-black-5);--color:var(--color-black);--color-hover:var(--color-black);--color-focus:var(--color-black);--color-hover-focus:var(--color-black)}.button_hds-button--supplementary__6Yi7z.button_hds-button--theme-black__1axR7{--border-color:transparent;--border-color-hover:transparent;--border-color-focus:var(--color-focus-outline);--border-color-hover-focus:var(--color-focus-outline)}.LanguageSwitcherItem-module_rowItem__2z76T{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.LanguageSwitcherItem-module_item__2V_Ne,.LanguageSwitcherItem-module_primary__1KCFc,.LanguageSwitcherItem-module_secondary__EQOcO,.LanguageSwitcherItem-module_supplementary__2nEPW{text-decoration:none}.LanguageSwitcherItem-module_item__2V_Ne:focus{transition:none}.LanguageSwitcherItem-module_supplementary__2nEPW{--border-width:3px}.LanguageSwitcherItem-module_primary__1KCFc:focus,.LanguageSwitcherItem-module_secondary__EQOcO:focus,.LanguageSwitcherItem-module_supplementary__2nEPW:focus{transition:none}.LanguageSwitcherItem-module_icon__3aKRE.LanguageSwitcherItem-module_icon__3aKRE{display:flex;height:unset;width:unset}.LanguageSwitcherItem-module_label__3Gub1{padding:0}.LanguageSwitcherItem-module_dropdownItem__eHUR9,.LanguageSwitcherItem-module_dropdownLinkItem__snkbq,.LanguageSwitcherItem-module_rowItem__2z76T{align-items:center;box-sizing:border-box;color:inherit;display:flex;font-weight:500;outline:none;text-decoration:none}.LanguageSwitcherItem-module_rowItem__2z76T .LanguageSwitcherItem-module_icon__3aKRE{margin:0 var(--spacing-2-xs) 0 calc(var(--spacing-3-xs)*-1)}.LanguageSwitcherItem-module_rowItem__2z76T .LanguageSwitcherItem-module_label__3Gub1{line-height:var(--lineheight-s);margin:0}@media only screen and (max-width:767.98px){.LanguageSwitcherItem-module_rowItem__2z76T{height:var(--spacing-xl);padding:var(--spacing-2-xs)}.LanguageSwitcherItem-module_rowItem__2z76T:focus{box-shadow:0 0 0 3px var(--color-coat-of-arms)}.LanguageSwitcherItem-module_dropdownItem__eHUR9:not(:first-child),.LanguageSwitcherItem-module_dropdownLinkItem__snkbq:not(:first-child),.LanguageSwitcherItem-module_rowItem__2z76T:not(:first-child){margin-top:var(--spacing-2-xs)}.LanguageSwitcherItem-module_icon__3aKRE.LanguageSwitcherItem-module_icon__3aKRE{align-self:center}}@media only screen and (min-width:768px){.LanguageSwitcherItem-module_rowItem__2z76T{padding:var(--spacing-3-xs);position:relative}.LanguageSwitcherItem-module_dropdownItem__eHUR9:focus-within:before,.LanguageSwitcherItem-module_dropdownLinkItem__snkbq a:focus-within:before,.LanguageSwitcherItem-module_dropdownLinkItem__snkbq button:focus-within:before,.LanguageSwitcherItem-module_rowItem__2z76T:focus:before{border-radius:0;box-shadow:0 0 0 3px var(--color-coat-of-arms);content:\"\";height:calc(100% - 6px);left:0;pointer-events:none;position:absolute;top:0;transform:translateY(3px);width:100%;z-index:1}.LanguageSwitcherItem-module_dropdownLinkItem__snkbq a,.LanguageSwitcherItem-module_dropdownLinkItem__snkbq button{position:relative}.LanguageSwitcherItem-module_dropdownItem__eHUR9.LanguageSwitcherItem-module_active__fJ-im:before,.LanguageSwitcherItem-module_dropdownLinkItem__snkbq.LanguageSwitcherItem-module_active__fJ-im:before,.LanguageSwitcherItem-module_rowItem__2z76T.LanguageSwitcherItem-module_active__fJ-im:before,.LanguageSwitcherItem-module_rowItem__2z76T:active:before{height:calc(100% - 3px)}.LanguageSwitcherItem-module_dropdownItem__eHUR9.LanguageSwitcherItem-module_active__fJ-im:after,.LanguageSwitcherItem-module_dropdownItem__eHUR9:hover:not(:focus-within):after,.LanguageSwitcherItem-module_dropdownLinkItem__snkbq.LanguageSwitcherItem-module_active__fJ-im:after,.LanguageSwitcherItem-module_dropdownLinkItem__snkbq:hover:not(:focus-within):after,.LanguageSwitcherItem-module_rowItem__2z76T.LanguageSwitcherItem-module_active__fJ-im:after,.LanguageSwitcherItem-module_rowItem__2z76T:active:after,.LanguageSwitcherItem-module_rowItem__2z76T:hover:not(:focus):after{background-color:var(--color-black-90);bottom:0;content:\"\";height:var(--spacing-3-xs);left:0;pointer-events:none;position:absolute;width:100%}.LanguageSwitcherItem-module_dropdownItem__eHUR9:not(.LanguageSwitcherItem-module_icon__3aKRE){width:max-content}}.Menu-module_menu__FuqT0:not(.Menu-module_open__RthSi){display:none}.Menu-module_menu__FuqT0.Menu-module_open__RthSi{background-color:var(--menu-item-background-color);border:var(--menu-border-width) solid var(--menu-border-color);left:0;margin:var(--menu-top-margin) 0 0;max-width:var(--menu-max-width);padding:var(--spacing-3-xs) 0;position:absolute;width:max-content}.Menu-module_item__3yQdE{align-items:center;box-sizing:border-box;color:var(--menu-item-color);display:flex;flex:1;line-height:var(--lineheight-m);min-height:var(--menu-item-min-height);outline:none;padding:var(--spacing-2-xs) var(--spacing-s);text-decoration:none}.Menu-module_item__3yQdE:focus,.Menu-module_item__3yQdE:hover{background-color:var(--menu-item-background-color-highlighted);color:var(--menu-item-color-highlighted)}.HeaderActionBarItem-module_header__3yIeQ{--header-background-color:var(--color-white);--header-color:var(--color-black-90);--header-height:var(--spacing-4-xl);--header-focus-outline-width:3px;--header-focus-outline-border-radius:0;--header-focus-outline-color:var(--color-coat-of-arms);--header-divider-color:var(--color-black-20);--header-z-index:10;--header-margin:var(--spacing-m);--header-max-width:1440px;--header-item-border-color:var(--color-black-20);--header-item-hover-color:var(--color-black-20);--actionbar-background-color:var(--color-white);--action-bar-container-height:88px;--action-bar-section-gutter:var(--spacing-s);--action-bar-dropdown-menu-caret-width:64px;--action-bar-dropdown-menu-primary-item-height:64px;--action-bar-dropdown-menu-secondary-item-height:48px;--action-bar-button-size:64px;--action-bar-item-gutter:12px;--action-bar-item-title-font-size:var(--fontsize-body-s);--action-bar-item-title-font-color:var(--header-color);--lang-selector-mobile-background-color:var(--color-silver-light);--lang-selector-item-font-color:var(--header-color);--lang-selector-dropdown-background-color:var(--color-white);--nav-link-font-color:var(--header-color);--nav-border-color:var(--color-black-20);--nav-link-hover-color:var(--color-black-90);--nav-link-dropdown-background-color:var(--color-white);--nav-button-background-color:var(--color-black-5);--nav-button-hover-background-color:var(--color-black-5);--nav-search-color:var(--header-color);--nav-mobile-menu-background-color:var(--color-white);--nav-mobile-menu-bottom-background-color:var(--color-silver-light);--nav-mobile-margin-left:var(--spacing-s);--universal-bar-background-color:var(--color-black-5);--logo-height:56px;--icon-size:24px;--nav-drop-down-icon-color:var(--color-black);--nav-background-color:var(--color-white);background-color:var(--header-background-color);color:var(--header-color);position:relative;width:100%}@media only screen and (max-width:991px){.HeaderActionBarItem-module_header__3yIeQ{--action-bar-container-height:74px;--logo-height:48px}}@media only screen and (max-width:767px){.HeaderActionBarItem-module_header__3yIeQ{--header-margin:var(--spacing-s);--action-bar-container-height:64px;--logo-height:32px}}@media only screen and (max-width:575px){.HeaderActionBarItem-module_header__3yIeQ{--header-margin:var(--spacing-xs);--action-bar-container-height:64px;--logo-height:32px}}.HeaderActionBarItem-module_header__3yIeQ.HeaderActionBarItem-module_theme-dark__2h8ns{--color-focus-outline:var(--color-white);--header-color:var(--color-white);--header-focus-outline-color:var(--color-white);--header-background-color:var(--color-black-80);--nav-border-color:var(--color-white);--nav-link-hover-color:var(--color-white);--universal-bar-background-color:var(--color-black-60);--navigation-link-button-background-color:var(--color-black-60);--nav-link-dropdown-background-color:var(--color-black-80);--lang-selector-mobile-background-color:var(--color-black-80);--lang-selector-dropdown-background-color:var(--color-black-60);--nav-button-background-color:var(--color-black-60);--nav-button-hover-background-color:var(--color-black-60);--nav-drop-down-icon-color:var(--color-white);--actionbar-background-color:var(--color-black-80);--nav-background-color:var(--color-black-80);--nav-mobile-menu-background-color:var(--color-black-80);--nav-mobile-menu-bottom-background-color:var(--color-black-60)}.HeaderActionBarItem-module_headerBackgroundWrapper__1iYrN{position:relative;z-index:var(--header-z-index)}button.HeaderActionBarItem-module_actionBarItem__2AJTk{align-self:center;appearance:none;background:transparent;border:none;color:var(--header-color);cursor:pointer;padding:0}button.HeaderActionBarItem-module_actionBarItem__2AJTk:focus-visible{border:none;outline:var(--header-focus-outline-width) solid var(--header-focus-outline-color);outline-offset:var(--header-focus-outline-width)}.HeaderActionBarItem-module_actionBarItemIcon__1l2lb{display:block;height:var(--icon-size);margin:0 auto;padding:3px 0 0;width:var(--icon-size)}.HeaderActionBarItem-module_actionBarItemIcon__1l2lb>svg{display:block;height:100%;width:auto}.HeaderActionBarItem-module_actionBarItemLabel__815JB{color:var(--action-bar-item-title-font-color);display:block;font-size:var(--action-bar-item-title-font-size);margin:0 auto;white-space:nowrap}.HeaderActionBarItem-module_actionBarItemLabel__815JB>svg{display:block}.HeaderActionBarItem-module_labelOnRight__3PkC_{display:inline-block}.HeaderActionBarItem-module_fixedRightPosition__1SJj5{display:block}.HeaderLinkDropdown-module_header__iHkRi{--header-background-color:var(--color-white);--header-color:var(--color-black-90);--header-height:var(--spacing-4-xl);--header-focus-outline-width:3px;--header-focus-outline-border-radius:0;--header-focus-outline-color:var(--color-coat-of-arms);--header-divider-color:var(--color-black-20);--header-z-index:10;--header-margin:var(--spacing-m);--header-max-width:1440px;--header-item-border-color:var(--color-black-20);--header-item-hover-color:var(--color-black-20);--actionbar-background-color:var(--color-white);--action-bar-container-height:88px;--action-bar-section-gutter:var(--spacing-s);--action-bar-dropdown-menu-caret-width:64px;--action-bar-dropdown-menu-primary-item-height:64px;--action-bar-dropdown-menu-secondary-item-height:48px;--action-bar-button-size:64px;--action-bar-item-gutter:12px;--action-bar-item-title-font-size:var(--fontsize-body-s);--action-bar-item-title-font-color:var(--header-color);--lang-selector-mobile-background-color:var(--color-silver-light);--lang-selector-item-font-color:var(--header-color);--lang-selector-dropdown-background-color:var(--color-white);--nav-link-font-color:var(--header-color);--nav-border-color:var(--color-black-20);--nav-link-hover-color:var(--color-black-90);--nav-link-dropdown-background-color:var(--color-white);--nav-button-background-color:var(--color-black-5);--nav-button-hover-background-color:var(--color-black-5);--nav-search-color:var(--header-color);--nav-mobile-menu-background-color:var(--color-white);--nav-mobile-menu-bottom-background-color:var(--color-silver-light);--nav-mobile-margin-left:var(--spacing-s);--universal-bar-background-color:var(--color-black-5);--logo-height:56px;--icon-size:24px;--nav-drop-down-icon-color:var(--color-black);--nav-background-color:var(--color-white);background-color:var(--header-background-color);color:var(--header-color);position:relative;width:100%}@media only screen and (max-width:991px){.HeaderLinkDropdown-module_header__iHkRi{--action-bar-container-height:74px;--logo-height:48px}}@media only screen and (max-width:767px){.HeaderLinkDropdown-module_header__iHkRi{--header-margin:var(--spacing-s);--action-bar-container-height:64px;--logo-height:32px}}@media only screen and (max-width:575px){.HeaderLinkDropdown-module_header__iHkRi{--header-margin:var(--spacing-xs);--action-bar-container-height:64px;--logo-height:32px}}.HeaderLinkDropdown-module_header__iHkRi.HeaderLinkDropdown-module_theme-dark__1HjJY{--color-focus-outline:var(--color-white);--header-color:var(--color-white);--header-focus-outline-color:var(--color-white);--header-background-color:var(--color-black-80);--nav-border-color:var(--color-white);--nav-link-hover-color:var(--color-white);--universal-bar-background-color:var(--color-black-60);--navigation-link-button-background-color:var(--color-black-60);--nav-link-dropdown-background-color:var(--color-black-80);--lang-selector-mobile-background-color:var(--color-black-80);--lang-selector-dropdown-background-color:var(--color-black-60);--nav-button-background-color:var(--color-black-60);--nav-button-hover-background-color:var(--color-black-60);--nav-drop-down-icon-color:var(--color-white);--actionbar-background-color:var(--color-black-80);--nav-background-color:var(--color-black-80);--nav-mobile-menu-background-color:var(--color-black-80);--nav-mobile-menu-bottom-background-color:var(--color-black-60)}.HeaderLinkDropdown-module_headerBackgroundWrapper__Dk3Dy{position:relative;z-index:var(--header-z-index)}button.HeaderLinkDropdown-module_button__2xVuy{background-color:var(--nav-button-background-color);border:none;box-sizing:content-box;color:var(--nav-drop-down-icon-color);display:block;height:24px;margin:0 0 0 var(--spacing-s);padding:0;width:24px}button.HeaderLinkDropdown-module_button__2xVuy.HeaderLinkDropdown-module_isNotLargeScreen__2LKN8{background:transparent;border-left:1px solid var(--nav-button-background-color);box-sizing:border-box;flex:0 0 var(--action-bar-dropdown-menu-caret-width);height:var(--action-bar-dropdown-menu-secondary-item-height);width:unset}button.HeaderLinkDropdown-module_button__2xVuy.HeaderLinkDropdown-module_isNotLargeScreen__2LKN8.HeaderLinkDropdown-module_depth-0__Xeyks{height:var(--action-bar-dropdown-menu-primary-item-height)}button.HeaderLinkDropdown-module_button__2xVuy:hover{background-color:var(--nav-button-hover-background-color);cursor:pointer}button.HeaderLinkDropdown-module_button__2xVuy:focus-visible{outline:3px solid var(--header-focus-outline-color);outline-offset:var(--header-focus-outline-width)}.HeaderLinkDropdown-module_chevron__1KsTd{transition:transform .2s ease-in}.HeaderLinkDropdown-module_chevronOpen__Kv4NV{transform:rotate(180deg)}.HeaderLinkDropdown-module_hidden__BBuW2{display:none}.HeaderLinkDropdown-module_dropdownMenu__3oeWC{background-color:var(--nav-link-dropdown-background-color);border:1px solid var(--nav-border-color);box-sizing:border-box;display:flex;flex-direction:column;list-style:none;min-width:280px;padding:0;position:absolute;top:100%;z-index:calc(var(--header-z-index) + 1)}.HeaderLinkDropdown-module_dropdownMenu__3oeWC .HeaderLinkDropdown-module_dropdownLink__2UIF3{font-size:var(--fontsize-body-m);margin:var(--spacing-xs) var(--spacing-m) var(--spacing-xs) var(--header-margin);padding:0}.HeaderLinkDropdown-module_dropdownMenu__3oeWC .HeaderLinkDropdown-module_dropdownLink__2UIF3:focus{border:0}.HeaderLinkDropdown-module_dropdownMenu__3oeWC .HeaderLinkDropdown-module_dropdownLink__2UIF3:focus-visible{outline:3px solid var(--header-focus-outline-color);outline-offset:var(--header-focus-outline-width)}.HeaderLinkDropdown-module_dropdownMenu__3oeWC .HeaderLinkDropdown-module_dropdownLink__2UIF3:before{bottom:0;content:\"\";height:100%;left:0;margin:0;position:absolute;width:0}.HeaderLinkDropdown-module_dropdownMenu__3oeWC .HeaderLinkDropdown-module_dropdownLink__2UIF3:hover:before{border-left:4px solid var(--color-black);transition:border-left .1s ease-in}.HeaderLinkDropdown-module_dropdownMenu__3oeWC .HeaderLinkDropdown-module_activeLink__3WBvn:before{border-left:4px solid var(--color-black);padding-left:var(--spacing-xs)}.HeaderLinkDropdown-module_dropdownMenu__3oeWC .HeaderLinkDropdown-module_button__2xVuy{margin:0 var(--spacing-xs) 0 var(--spacing-s)}.HeaderLinkDropdown-module_left__19kgo{left:auto;right:100%;top:-1px}.HeaderLinkDropdown-module_right__3KSqY{left:100%;right:auto;top:-1px}:root{--breakpoint-xs:320px;--breakpoint-s:576px;--breakpoint-m:768px;--breakpoint-l:992px;--breakpoint-xl:1248px;--container-width-xs:288px;--container-width-s:544px;--container-width-m:720px;--container-width-l:944px;--container-width-xl:1200px;--color-brick:#bd2719;--color-brick-light:#ffeeed;--color-brick-medium-light:#facbc8;--color-brick-dark:#800e04;--color-bus:#0000bf;--color-bus-light:#f0f0ff;--color-bus-medium-light:#ccf;--color-bus-dark:#00005e;--color-coat-of-arms:#0072c6;--color-coat-of-arms-light:#e6f4ff;--color-coat-of-arms-medium-light:#b5daf7;--color-coat-of-arms-dark:#005799;--color-copper:#00d7a7;--color-copper-light:#cffaf1;--color-copper-medium-light:#9ef0de;--color-copper-dark:#00a17d;--color-engel:#ffe977;--color-engel-light:#fff9db;--color-engel-medium-light:#fff3b8;--color-engel-dark:#dbc030;--color-fog:#9fc9eb;--color-fog-light:#e8f3fc;--color-fog-medium-light:#d0e6f7;--color-fog-dark:#72a5cf;--color-gold:#c2a251;--color-gold-light:#f7f2e4;--color-gold-medium-light:#e8d7a7;--color-gold-dark:#9e823c;--color-metro:#fd4f00;--color-metro-light:#ffeee6;--color-metro-medium-light:#ffcab3;--color-metro-dark:#bd2f00;--color-silver:#dedfe1;--color-silver-light:#f7f7f8;--color-silver-medium-light:#efeff0;--color-silver-dark:#b0b8bf;--color-summer:#ffc61e;--color-summer-light:#fff4d4;--color-summer-medium-light:#ffe49c;--color-summer-dark:#cc9200;--color-suomenlinna:#f5a3c7;--color-suomenlinna-light:#fff0f7;--color-suomenlinna-medium-light:#ffdbeb;--color-suomenlinna-dark:#e673a5;--color-tram:#008741;--color-tram-light:#dff7eb;--color-tram-medium-light:#a3e3c2;--color-tram-dark:#006631;--color-focus-outline:#0072c6;--color-black:#000;--color-white:#fff;--color-black-5:#f2f2f2;--color-black-10:#e6e6e6;--color-black-20:#ccc;--color-black-30:#b3b3b3;--color-black-40:#999;--color-black-50:grey;--color-black-60:#666;--color-black-70:#4d4d4d;--color-black-80:#333;--color-black-90:#1a1a1a;--color-error:#b01038;--color-error-light:#f6e2e6;--color-error-dark:#8d0d2d;--color-success:#007a64;--color-success-light:#e2f5f3;--color-success-dark:#006250;--color-alert:#ffda07;--color-alert-light:#fff4b4;--color-alert-dark:#d18200;--color-info:#0062b9;--color-info-light:#e5eff8;--color-info-dark:#004f94;--box-shadow-s:0px 2px 10px 0px rgba(0,0,0,0.07);--box-shadow-m:0px 2px 10px 0px rgba(0,0,0,0.1);--box-shadow-l:0px 2px 20px 0px rgba(0,0,0,0.2);--spacing-layout-2-xs:1rem;--spacing-layout-xs:1.5rem;--spacing-layout-s:2rem;--spacing-layout-m:3rem;--spacing-layout-l:4rem;--spacing-layout-xl:6rem;--spacing-layout-2-xl:8rem;--spacing-4-xs:0.125rem;--spacing-3-xs:0.25rem;--spacing-2-xs:0.5rem;--spacing-xs:0.75rem;--spacing-s:1rem;--spacing-m:1.5rem;--spacing-l:2rem;--spacing-xl:2.5rem;--spacing-2-xl:3.0rem;--spacing-3-xl:3.5rem;--spacing-4-xl:4rem;--spacing-5-xl:4.5rem;--fontsize-heading-xxl:4rem;--fontsize-heading-xl:3rem;--fontsize-heading-xl-mobile:2.5rem;--fontsize-heading-l:2rem;--fontsize-heading-m:1.5rem;--fontsize-heading-s:1.25rem;--fontsize-heading-xs:1.125rem;--fontsize-heading-xxs:1rem;--fontsize-body-s:0.875rem;--fontsize-body-m:1rem;--fontsize-body-l:1.125rem;--fontsize-body-xl:1.25rem;--font-default:HelsinkiGrotesk,Arial,sans-serif;--lineheight-s:1;--lineheight-m:1.2;--lineheight-l:1.5;--lineheight-xl:1.75}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.visually-hidden{border:0;clip:\"rect(0 0 0 0)\";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.button-reset{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.text-body{color:var(--color-black-90);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.text-body,.text-medium{font-family:var(--font-default)}.text-medium{font-weight:500}.text-bold{font-family:var(--font-default);font-weight:700}.text-xl{font-size:var(--fontsize-heading-m)}.text-lg{font-size:var(--fontsize-heading-s)}.text-md{font-size:var(--fontsize-heading-xs)}.subtitle{font-size:var(--fontsize-body-m)}.text-sm{font-size:var(--fontsize-body-s);line-height:var(--lineheight-xl)}.heading-xxl{font-size:var(--fontsize-heading-xxl);letter-spacing:-1.2px}.heading-xl,.heading-xxl{font-weight:400;line-height:var(--lineheight-s)}.heading-xl{font-size:var(--fontsize-heading-xl);letter-spacing:-1px}.heading-xl-mobile{font-size:var(--fontsize-heading-xl-mobile);letter-spacing:-.8px}.heading-l,.heading-xl-mobile{font-weight:400;line-height:var(--lineheight-s)}.heading-l{font-size:var(--fontsize-heading-l);letter-spacing:-.4px}.heading-m{font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-.2px;line-height:32px}.heading-s{font-size:var(--fontsize-heading-s);font-weight:500;letter-spacing:.2px;line-height:1.4}.heading-xs{font-size:var(--fontsize-heading-xs);line-height:1.33}.heading-xs,.heading-xxs{font-weight:700;letter-spacing:.4px}.heading-xxs{font-size:var(--fontsize-heading-xxs);line-height:var(--lineheight-l)}.helper-text{color:var(--color-black-60);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs)}html{-webkit-text-size-adjust:100%}.Accordion-module_accordion__2fPUT{--background-color:var(--color-white);--border-color:var(--color-black-60);--header-font-color:var(--color-black-90);--header-focus-outline-color:var(--color-coat-of-arms);--content-font-color:var(--color-black-90);--content-font-size:var(--fontsize-body-m);--content-line-height:var(--lineheight-l)}.Accordion-module_accordion__2fPUT:not(.Accordion-module_card__1iRKx){border-bottom:1px solid var(--border-color)}.Accordion-module_accordion__2fPUT.Accordion-module_card__1iRKx{background-color:var(--background-color);padding-left:var(--padding-horizontal);padding-right:var(--padding-horizontal)}.Accordion-module_accordion__2fPUT.Accordion-module_border__2AgQd{border:2px solid var(--border-color)}.Accordion-module_accordionHeader__3_uK7{align-items:center;color:var(--header-font-color);display:flex;font-size:var(--header-font-size);font-weight:var(--header-font-weight);justify-content:space-between;letter-spacing:var(--header-letter-spacing);line-height:var(--header-line-height);padding-bottom:var(--padding-vertical);padding-top:var(--padding-vertical);position:relative}.Accordion-module_accordionHeader__3_uK7>div{flex:1 1 auto}.Accordion-module_s__8gw4g{--header-font-size:var(--fontsize-heading-s);--padding-vertical:var(--spacing-s);--header-font-weight:700;--header-letter-spacing:0.2px;--header-line-height:1.4;--button-size:28px;--padding-horizontal:var(--spacing-2-xs)}.Accordion-module_s__8gw4g .Accordion-module_closeButton__1Qt8U div{margin-right:var(--spacing-4-xs)}.Accordion-module_m__2k6QY{--header-font-size:var(--fontsize-heading-m);--padding-vertical:var(--spacing-m);--header-font-weight:500;--header-letter-spacing:-0.2px;--header-line-height:32px;--button-size:36px;--padding-horizontal:var(--spacing-m)}.Accordion-module_m__2k6QY .Accordion-module_closeButton__1Qt8U div{margin-right:6px}.Accordion-module_l__gPzdT{--header-font-size:var(--fontsize-heading-l);--padding-vertical:var(--spacing-l);--header-font-weight:400;--header-letter-spacing:-0.4px;--header-line-height:var(--lineheight-s);--button-size:52px;--padding-horizontal:var(--spacing-l)}.Accordion-module_l__gPzdT .Accordion-module_closeButton__1Qt8U div{margin-right:var(--spacing-xs)}.Accordion-module_accordionContent__1umso{color:var(--content-font-color);font-size:var(--content-font-size);line-height:var(--content-line-height);padding-bottom:var(--spacing-m);position:relative}.Accordion-module_accordionContent__1umso .Accordion-module_closeButton__1Qt8U{bottom:0;color:var(--content-font-color);position:absolute;right:0}.Accordion-module_contentWithCloseButton__-einM{padding-bottom:44px}.Accordion-module_headingContainer__1DzX3{align-items:center;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:auto calc(var(--button-size));width:100%}.Accordion-module_headingContainer__1DzX3:focus{outline:2px solid var(--header-focus-outline-color,transparent)}.Accordion-module_accordionButtonIcon__MQu2J{border:2px solid transparent;box-sizing:border-box;height:var(--button-size)!important;margin:auto;width:var(--button-size)!important}.icon_hds-icon__1YqNC{--icon-size:100%;background-color:currentcolor;display:inline-block;height:var(--icon-size);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:auto;mask-size:auto;width:var(--icon-size)}.icon_hds-icon__1YqNC.icon_hds-icon--size-xs__3dAMZ{--icon-size:var(--spacing-layout-2-xs)}.icon_hds-icon__1YqNC.icon_hds-icon--size-s__2Lkik{--icon-size:var(--spacing-layout-xs)}.icon_hds-icon__1YqNC.icon_hds-icon--size-m__1mcHv{--icon-size:var(--spacing-layout-s)}.icon_hds-icon__1YqNC.icon_hds-icon--size-l__3Zczy{--icon-size:var(--spacing-layout-m)}.icon_hds-icon__1YqNC.icon_hds-icon--size-xl__1Jes8{--icon-size:var(--spacing-layout-l)}.Icon-module_icon__1Jtzj{background-color:transparent}.LoadingSpinner-module_notificationArea__1arIM{border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.LoadingSpinner-module_loadingSpinner__2xHT_{--spinner-size:4rem;--spinner-color:var(--color-coat-of-arms);--spinner-thickness:0.5rem;--spinner-rotation-animation-duration:1.5s;--spinner-color-animation-duration:4.5s;--spinner-color-stage1:var(--color-coat-of-arms);--spinner-color-stage2:var(--color-copper);--spinner-color-stage3:var(--color-suomenlinna);border-top-color:var(--spinner-color);height:var(--spinner-size);position:relative;width:var(--spinner-size)}.LoadingSpinner-module_loadingSpinner__2xHT_ div{animation:LoadingSpinner-module_spinner-rotation-animation__PEk45 var(--spinner-rotation-animation-duration) cubic-bezier(.6,.2,.4,.8) infinite;border:var(--spinner-thickness) solid transparent;border-radius:50%;border-top-color:inherit;box-sizing:border-box;height:100%;position:absolute;width:100%}.LoadingSpinner-module_loadingSpinner__2xHT_ div:nth-child(2){animation-delay:-.15s}.LoadingSpinner-module_loadingSpinner__2xHT_ div:nth-child(3){animation-delay:-.3s}.LoadingSpinner-module_small__1McRk{--spinner-size:1.5rem;--spinner-thickness:0.1875rem}.LoadingSpinner-module_multicolor__1qbEF{animation:LoadingSpinner-module_spinner-color-animation__Yu7Cr var(--spinner-color-animation-duration) cubic-bezier(.6,.2,.4,.9) infinite;border-top-color:var(--spinner-color-stage1)}@keyframes LoadingSpinner-module_spinner-rotation-animation__PEk45{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes LoadingSpinner-module_spinner-color-animation__Yu7Cr{33.3%{border-top-color:var(--spinner-color-stage2)}66.6%{border-top-color:var(--spinner-color-stage3)}}.button_hds-button__2A0je{--border-width:2px;--color:inherit;--min-size:44px;--outline-gutter:2px;--outline-width:3px;align-content:flex-start;align-items:center;-webkit-appearance:button;background-color:var(--background-color,transparent);border:var(--border-width) solid var(--border-color,transparent);border-radius:0;color:var(--color);cursor:pointer;display:inline-flex;font-family:inherit;font-size:100%;font-weight:500;justify-content:center;line-height:1.15;margin:0;min-height:var(--min-size);min-width:var(--min-size);padding:0 var(--spacing-2-xs);position:relative;text-decoration:none;text-transform:none;vertical-align:top}.button_hds-button__2A0je,.button_hds-button__2A0je *,.button_hds-button__2A0je:after,.button_hds-button__2A0je :after,.button_hds-button__2A0je:before,.button_hds-button__2A0je :before{box-sizing:border-box}.button_hds-button__2A0je[type=button],.button_hds-button__2A0je[type=reset],.button_hds-button__2A0je[type=submit]{-webkit-appearance:button}.button_hds-button__2A0je::-moz-focus-inner,.button_hds-button__2A0je[type=button]::-moz-focus-inner,.button_hds-button__2A0je[type=reset]::-moz-focus-inner,.button_hds-button__2A0je[type=submit]::-moz-focus-inner{border-style:none;padding:0}.button_hds-button__2A0je:-moz-focusring,.button_hds-button__2A0je[type=button]:-moz-focusring,.button_hds-button__2A0je[type=reset]:-moz-focusring,.button_hds-button__2A0je[type=submit]:-moz-focusring{outline:1px dotted ButtonText}.button_hds-button__2A0je.button_focus-visible__gEJLP,.button_hds-button__2A0je:focus-visible,.button_hds-button__2A0je:hover{transition-duration:85ms;transition-property:background-color,border-color,color;transition-timing-function:ease-out}.button_hds-button__2A0je:hover{background-color:var(--background-color-hover,transparent);color:var(--color-hover)}.button_hds-button__2A0je.button_focus-visible__gEJLP,.button_hds-button__2A0je:active,.button_hds-button__2A0je:focus-visible{background-color:var(--background-color-focus,transparent);color:var(--color-focus);outline:none}.button_hds-button__2A0je:not(:disabled){border-color:var(--border-color,transparent)}.button_hds-button__2A0je:disabled{background-color:var(--background-color-disabled,transparent);border-color:var(--border-color-disabled,transparent);color:var(--color-disabled);cursor:not-allowed}.button_hds-button__2A0je.button_focus-visible__gEJLP:hover,.button_hds-button__2A0je:active:hover,.button_hds-button__2A0je:focus-visible:hover{background-color:var(--background-color-hover-focus,transparent)}.button_hds-button__2A0je:not(:disabled):hover{border-color:var(--border-color-hover,transparent)}.button_hds-button__2A0je:not(:disabled).button_focus-visible__gEJLP,.button_hds-button__2A0je:not(:disabled):active,.button_hds-button__2A0je:not(:disabled):focus-visible{border-color:var(--border-color-focus,transparent)}.button_hds-button__2A0je:not(:disabled).button_focus-visible__gEJLP:hover,.button_hds-button__2A0je:not(:disabled):active:hover,.button_hds-button__2A0je:not(:disabled):focus-visible:hover{border-color:var(--border-color-hover-focus,transparent);color:var(--color-hover-focus)}.button_hds-button__2A0je:after{--size:100%;border:var(--outline-width) solid transparent;content:\"\";height:var(--size);position:absolute;width:var(--size)}.button_hds-button__2A0je.button_focus-visible__gEJLP:after,.button_hds-button__2A0je:active:after,.button_hds-button__2A0je:focus-visible:after{--size:calc(100% + var(--outline-width)*2 + var(--border-width)*2 + var(--outline-gutter)*2);border-color:var(--focus-outline-color)}.button_hds-button__label__2EQa-,input[type=submit].button_hds-button__2A0je{font-weight:inherit;line-height:1.25em;padding:var(--spacing-s)}input[type=submit].button_hds-button__2A0je{cursor:pointer;padding:var(--spacing-s) var(--spacing-l)}input[type=submit].button_hds-button__2A0je.button_focus-visible__gEJLP,input[type=submit].button_hds-button__2A0je:focus-visible{box-shadow:0 0 0 var(--outline-gutter) var(--submit-input-focus-gutter-color),0 0 0 calc(var(--outline-gutter) + var(--outline-width)) var(--focus-outline-color)}.button_hds-button__label__2EQa-:only-child{margin:0 var(--spacing-2-xs)}.button_hds-button--small__2NFef .button_hds-button__label__2EQa-,input[type=submit].button_hds-button--small__2NFef{line-height:var(--lineheight-s);padding:var(--spacing-2-xs) var(--spacing-xs)}.button_hds-button--supplementary__GcHcV .button_hds-button__label__2EQa-:first-child{padding-right:var(--spacing-2-xs)}.button_hds-button--small__2NFef .button_hds-button__label__2EQa-:only-child{margin:0 var(--spacing-xs)}.button_hds-button--supplementary__GcHcV .button_hds-icon__17j8Z+.button_hds-button__label__2EQa-:last-child{padding-left:var(--spacing-2-xs)}.button_hds-button--supplementary__GcHcV .button_hds-icon__17j8Z+.button_hds-button__label__2EQa-:not(:last-child){padding-left:var(--spacing-2-xs);padding-right:var(--spacing-2-xs)}.button_hds-button--small__2NFef{padding:0}input[type=submit].button_hds-button--small__2NFef{padding:var(--spacing-2-xs) var(--spacing-m)}.button_hds-button--small__2NFef .button_hds-button__label__2EQa-:not(:first-of-type):not(:last-of-type){padding:var(--spacing-2-xs) var(--spacing-2-xs)}.button_hds-button--fullwidth__1_hG9{width:100%}.button_hds-button__2A0je .button_hds-icon__17j8Z{height:var(--spacing-m);margin-left:var(--spacing-s);width:var(--spacing-m)}.button_hds-button__label__2EQa-~.button_hds-icon__17j8Z{margin:0 var(--spacing-s) 0 0}.button_hds-button--small__2NFef .button_hds-icon__17j8Z{margin-left:var(--spacing-2-xs)}.button_hds-button__2A0je .button_hds-button--small__2NFef .button_hds-button__label__2EQa-~.button_hds-icon__17j8Z{margin:0 var(--spacing-2-xs) 0 0}.button_hds-button__2A0je .button_hds-icon__17j8Z:first-of-type:not(:last-of-type){margin:0 0 0 var(--spacing-2-xs)}.button_hds-button__2A0je .button_hds-icon__17j8Z:last-of-type:not(:first-of-type){margin:0 var(--spacing-2-xs) 0 0}.button_hds-button--small__2NFef .button_hds-icon__17j8Z:first-child:not(:last-of-type){margin:0 0 0 var(--spacing-2-xs)}.button_hds-button--small__2NFef .button_hds-icon__17j8Z:last-child:not(:first-of-type){margin:0 var(--spacing-2-xs) 0 0}.button_hds-button--primary__2NVvO{--background-color:var(--color-bus);--background-color-hover:var(--color-bus-dark);--background-color-focus:var(--color-bus);--background-color-hover-focus:var(--color-bus-dark);--background-color-disabled:var(--color-black-20);--border-color:var(--color-bus);--border-color-hover:var(--color-bus-dark);--border-color-focus:var(--color-bus);--border-color-hover-focus:var(--color-bus-dark);--border-color-disabled:var(--color-black-20);--color:var(--color-white);--color-hover:var(--color-white);--color-focus:var(--color-white);--color-hover-focus:var(--color-white);--color-disabled:var(--color-white);--focus-outline-color:var(--color-focus-outline);--submit-input-focus-gutter-color:var(--color-white)}.button_hds-button--secondary__1NOWS{--border-color:var(--color-bus);--border-color-hover:var(--color-bus-dark);--border-color-focus:var(--color-bus);--border-color-hover-focus:var(--color-bus-dark);--border-color-disabled:var(--color-black-50);--focus-outline-color:var(--color-focus-outline);--submit-input-focus-gutter-color:var(--color-white)}.button_hds-button--secondary__1NOWS,.button_hds-button--supplementary__GcHcV{--background-color:transparent;--background-color-hover:var(--color-bus-light);--background-color-focus:transparent;--background-color-hover-focus:var(--color-bus-light);--background-color-disabled:transparent;--color:var(--color-bus);--color-hover:var(--color-bus-dark);--color-focus:var(--color-bus);--color-hover-focus:var(--color-bus-dark);--color-disabled:var(--color-black-40)}.button_hds-button--supplementary__GcHcV{--border-color:transparent;--border-color-hover:transparent;--border-color-focus:var(--color-focus-outline);--border-color-hover-focus:var(--color-focus-outline);--border-color-disabled:transparent;--focus-outline-color:transparent;--submit-input-focus-gutter-color:transparent}.button_hds-button--loading__2mLjh{--background-color:transparent;--background-color-hover:transparent;--background-color-focus:transparent;--background-color-hover-focus:transparent;--background-color-disabled:transparent;--border-color:transparent;--border-color-hover:transparent;--border-color-focus:transparent;--border-color-hover-focus:transparent;--border-color-disabled:transparent;--color:var(--color-black-90);--color-hover:var(--color-black-90);--color-focus:var(--color-black-90);--color-hover-focus:var(--color-black-90);--color-disabled:var(--color-black-90);cursor:wait}.button_hds-button--success__9hpuD{--background-color:var(--color-success);--background-color-hover:var(--color-success-dark);--background-color-focus:var(--color-success);--background-color-hover-focus:var(--color-success-dark);--border-color:var(--color-success);--border-color-hover:var(--color-success-dark);--border-color-focus:var(--color-success);--border-color-hover-focus:var(--color-success-dark)}.button_hds-button--danger__dEREN,.button_hds-button--success__9hpuD{--color:var(--color-white);--color-hover:var(--color-white);--color-focus:var(--color-white);--color-hover-focus:var(--color-white);--focus-outline-color:var(--color-focus-outline)}.button_hds-button--danger__dEREN{--background-color:var(--color-error);--background-color-hover:var(--color-error-dark);--background-color-focus:var(--color-error);--background-color-hover-focus:var(--color-error-dark);--border-color:var(--color-error);--border-color-hover:var(--color-error-dark);--border-color-focus:var(--color-error);--border-color-hover-focus:var(--color-error-dark)}.button_hds-button--primary__2NVvO.button_hds-button--theme-coat__12cO0{--background-color:var(--color-coat-of-arms);--background-color-hover:var(--color-coat-of-arms-dark);--background-color-focus:var(--color-coat-of-arms);--background-color-hover-focus:var(--color-coat-of-arms-dark);--border-color:var(--color-coat-of-arms);--border-color-hover:var(--color-coat-of-arms-dark);--border-color-focus:var(--color-coat-of-arms);--border-color-hover-focus:var(--color-coat-of-arms-dark);--color:var(--color-white);--color-hover:var(--color-white);--color-focus:var(--color-white);--color-hover-focus:var(--color-white)}.button_hds-button--secondary__1NOWS.button_hds-button--theme-coat__12cO0{--border-color:var(--color-coat-of-arms);--border-color-hover:var(--color-coat-of-arms-dark);--border-color-focus:var(--color-coat-of-arms);--border-color-hover-focus:var(--color-coat-of-arms-dark)}.button_hds-button--secondary__1NOWS.button_hds-button--theme-coat__12cO0,.button_hds-button--supplementary__GcHcV.button_hds-button--theme-coat__12cO0{--background-color:transparent;--background-color-hover:var(--color-coat-of-arms-light);--background-color-focus:transparent;--background-color-hover-focus:var(--color-coat-of-arms-light);--color:var(--color-coat-of-arms);--color-hover:var(--color-coat-of-arms);--color-focus:var(--color-coat-of-arms);--color-hover-focus:var(--color-coat-of-arms)}.button_hds-button--supplementary__GcHcV.button_hds-button--theme-coat__12cO0{--border-color:transparent;--border-color-hover:transparent;--border-color-focus:var(--color-focus-outline);--border-color-hover-focus:var(--color-focus-outline)}.button_hds-button--primary__2NVvO.button_hds-button--theme-black__3K_k4{--background-color:var(--color-black);--background-color-hover:var(--color-black);--background-color-focus:var(--color-black);--background-color-hover-focus:var(--color-black);--border-color:var(--color-black);--border-color-hover:var(--color-black);--border-color-focus:var(--color-black);--border-color-hover-focus:var(--color-black);--color:var(--color-white);--color-hover:var(--color-white);--color-focus:var(--color-white);--color-hover-focus:var(--color-white)}.button_hds-button--secondary__1NOWS.button_hds-button--theme-black__3K_k4{--border-color:var(--color-black);--border-color-hover:var(--color-black);--border-color-focus:var(--color-black);--border-color-hover-focus:var(--color-black)}.button_hds-button--secondary__1NOWS.button_hds-button--theme-black__3K_k4,.button_hds-button--supplementary__GcHcV.button_hds-button--theme-black__3K_k4{--background-color:transparent;--background-color-hover:var(--color-black-5);--background-color-focus:transparent;--background-color-hover-focus:var(--color-black-5);--color:var(--color-black);--color-hover:var(--color-black);--color-focus:var(--color-black);--color-hover-focus:var(--color-black)}.button_hds-button--supplementary__GcHcV.button_hds-button--theme-black__3K_k4{--border-color:transparent;--border-color-hover:transparent;--border-color-focus:var(--color-focus-outline);--border-color-hover-focus:var(--color-focus-outline)}.Button-module_icon__O-h7R svg{max-height:100%;max-width:100%}"}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/b123bb55-73388f463f51189e5870.js.LICENSE.txt b/docs/hds-1817-stepbystep-docs/b123bb55-73388f463f51189e5870.js.LICENSE.txt
new file mode 100644
index 00000000000..38435ec5e4f
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/b123bb55-73388f463f51189e5870.js.LICENSE.txt
@@ -0,0 +1 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-accordion-accessibility-mdx-2d600c846f83f5259de1.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-accordion-accessibility-mdx-2d600c846f83f5259de1.js
new file mode 100644
index 00000000000..327d80d9b9d
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-accordion-accessibility-mdx-2d600c846f83f5259de1.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[4602,7407],{83428:function(e,t,a){a.d(t,{S:function(){return c}});var l=a(80136),n=a(67294),s=a(7444),r=a(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,s.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const i=e=>{let{icon:t}=e;return n.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:s,type:c="neutral",iconLeft:u}=e,d=(0,l._)(e,["children","className","dataTestId","type","iconLeft"]);return n.createElement("span",Object.assign({className:(0,r.c)(o.statusLabel,o[c],u&&o.statusLabelWithIcon,a),"data-testid":s},d),u&&n.createElement(i,{icon:u}),t)}},62784:function(e,t,a){a.r(t);var l=a(11151),n=a(67294),s=a(80699),r=a(81074);const o=e=>{let{children:t,pageContext:a}=e;return n.createElement(r.default,{pageContext:a},t)};function i(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",code:"code"},(0,l.ah)(),e.components);return n.createElement(n.Fragment,null,n.createElement(t.h2,{id:"accessibility",style:{position:"relative"}},"Accessibility",n.createElement(t.a,{href:"#accessibility","aria-label":"accessibility permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.h3,{id:"pay-attention-to",style:{position:"relative"}},"Pay attention to",n.createElement(t.a,{href:"#pay-attention-to","aria-label":"pay attention to permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.ul,null,"\n",n.createElement(t.li,null,"Use HDS provided accordion elements when creating custom accordions. These elements pass accessibility testing."),"\n",n.createElement(t.li,null,"When creating custom accordions, make sure that the expanded accordion area directly follows the accordion button in the DOM tree.","\n",n.createElement(t.ul,null,"\n",n.createElement(t.li,null,"If you must place the accordion area somewhere else, use ",n.createElement(t.code,null,"aria-owns")," attribute to indicate the relationship. However, be aware that this attribute does not necessarily work with all screen readers."),"\n"),"\n"),"\n",n.createElement(t.li,null,"Make sure that the keyboard user can navigate out of the accordion area without closing the accordion. See ",n.createElement(s.Z,{href:"https://www.w3.org/TR/WCAG21/#no-keyboard-trap"},"WCAG 2.1.2 No Keyboard Trap guideline")," for more information."),"\n"))}t.default=function(e){return void 0===e&&(e={}),n.createElement(o,e,n.createElement(i,e))}},81074:function(e,t,a){a.r(t);var l=a(11151),n=a(67294),s=a(83428),r=a(57674),o=a(89482),i=(a(18607),a(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,l.ah)(),e.components);return i.Z||u("PageTabs",!1),i.Z.Tab||u("PageTabs.Tab",!0),i.Z.TabList||u("PageTabs.TabList",!0),i.Z.TabPanel||u("PageTabs.TabPanel",!0),n.createElement(n.Fragment,null,n.createElement(t.h1,{id:"accordion",style:{position:"relative"}},"Accordion",n.createElement(t.a,{href:"#accordion","aria-label":"accordion permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement("div",{class:"status-label-description"},n.createElement(s.S,{type:"info"},"Stable"),n.createElement(s.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),n.createElement(r.Z)),"\n",n.createElement(o.Z,null,"Accordions can be used to hide and reveal information. When used correctly, they are a good way to make a higher amount of information easier to digest for the user."),"\n",n.createElement(i.Z,{pageContext:e.pageContext},n.createElement(i.Z.TabList,null,n.createElement(i.Z.Tab,{href:"/"},"Usage"),n.createElement(i.Z.Tab,{href:"/code"},"Code"),n.createElement(i.Z.Tab,{href:"/accessibility"},"Accessibility"),n.createElement(i.Z.Tab,{href:"/customisation"},"Customisation")),n.createElement(i.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,l.ah)(),e.components);return t?n.createElement(t,e,n.createElement(c,e)):c(e)}},89482:function(e,t,a){var l=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:n={},children:s}=e;return l.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...n}},s)}},26127:function(e,t,a){var l=a(67294),n=a(14160),s=a(94671);const r="PageTabList",o="PageTabPanel",i="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const u=a.frontmatter.slug,d=Array.isArray(c)?c:[c],b=d.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===r)),h=d.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===o)),m=null===(t=b.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===i)),p=m.findIndex((e=>u.endsWith(e.props.href))),f=-1===p?0:p,g=0===f?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return l.createElement(s.a,{initiallyActiveTab:f},l.createElement(s.a.TabList,{className:"page-tabs-list"},m.map((e=>l.createElement(s.a.Tab,{key:e.props.href,onClick:()=>(0,n.navigate)(""+("/"===e.props.href?g:g+e.props.href))},e.props.children)))),m.map(((e,t)=>l.createElement(s.a.TabPanel,{key:e.props.href},f===t?h.props.children:l.createElement("div",null)))))},u=e=>{let{children:t}=e;return l.createElement(s.a.TabList,null,t)};u.componentName=r;const d=e=>{let{href:t,slug:a,children:n}=e;return l.createElement(s.a.Tab,null,n)};d.componentName=i;const b=e=>{let{children:t}=e;return l.createElement(s.a.TabPanel,null,t)};b.componentName=o,c.TabList=u,c.Tab=d,c.TabPanel=b,t.Z=c},57674:function(e,t,a){var l=a(67294),n=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return l.createElement(n.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},l.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>l.createElement("li",{key:t},l.createElement("span",{className:"status-name"},t),l.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-accordion-code-mdx-ee2418ec85b8653bba26.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-accordion-code-mdx-ee2418ec85b8653bba26.js
new file mode 100644
index 00000000000..8bfbf65865a
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-accordion-code-mdx-ee2418ec85b8653bba26.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[2786],{66625:function(e,t,n){n.d(t,{A:function(){return b}});var r=n(67294),a=n(5871),o=n.n(a),c=n(26917),l=n(7444),i=n(34300),d=n(41380),s=n(97640),u=n(17882),h=n(56924),p=n(44961),m=(0,c.c)((function(e,t){var n="__lodash_hash_undefined__",r=1,a=2,o=1/0,l=9007199254740991,i="[object Arguments]",d="[object Array]",s="[object Boolean]",u="[object Date]",h="[object Error]",p="[object Function]",m="[object GeneratorFunction]",f="[object Map]",g="[object Number]",b="[object Object]",_="[object Promise]",v="[object RegExp]",y="[object Set]",E="[object String]",A="[object Symbol]",x="[object WeakMap]",k="[object ArrayBuffer]",w="[object DataView]",j=/\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/,z=/^\w*$/,T=/^\./,C=/[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g,I=/\\(\\)?/g,S=/^\[object .+?Constructor\]$/,O=/^(?:0|[1-9]\d*)$/,N={};N["[object Float32Array]"]=N["[object Float64Array]"]=N["[object Int8Array]"]=N["[object Int16Array]"]=N["[object Int32Array]"]=N["[object Uint8Array]"]=N["[object Uint8ClampedArray]"]=N["[object Uint16Array]"]=N["[object Uint32Array]"]=!0,N[i]=N[d]=N[k]=N[s]=N[w]=N[u]=N[h]=N[p]=N[f]=N[g]=N[b]=N[v]=N[y]=N[E]=N[x]=!1;var P="object"==typeof c.a&&c.a&&c.a.Object===Object&&c.a,L="object"==typeof self&&self&&self.Object===Object&&self,B=P||L||Function("return this")(),H=t&&!t.nodeType&&t,M=H&&e&&!e.nodeType&&e,W=M&&M.exports===H&&P.process,U=function(){try{return W&&W.binding("util")}catch(e){}}(),D=U&&U.isTypedArray;function R(e,t){for(var n=-1,r=t.length,a=e.length;++n<r;)e[a+n]=t[n];return e}function Z(e,t){for(var n=-1,r=e?e.length:0;++n<r;)if(t(e[n],n,e))return!0;return!1}function Q(e){var t=!1;if(null!=e&&"function"!=typeof e.toString)try{t=!!(e+"")}catch(e){}return t}function F(e){var t=-1,n=Array(e.size);return e.forEach((function(e,r){n[++t]=[r,e]})),n}function K(e,t){return function(n){return e(t(n))}}function $(e){var t=-1,n=Array(e.size);return e.forEach((function(e){n[++t]=e})),n}var V,Y=Array.prototype,J=Function.prototype,X=Object.prototype,G=B["__core-js_shared__"],q=(V=/[^.]+$/.exec(G&&G.keys&&G.keys.IE_PROTO||""))?"Symbol(src)_1."+V:"",ee=J.toString,te=X.hasOwnProperty,ne=X.toString,re=RegExp("^"+ee.call(te).replace(/[\\^$.*+?()[\]{}|]/g,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$"),ae=B.Symbol,oe=B.Uint8Array,ce=K(Object.getPrototypeOf,Object),le=X.propertyIsEnumerable,ie=Y.splice,de=Object.getOwnPropertySymbols,se=K(Object.keys,Object),ue=Me(B,"DataView"),he=Me(B,"Map"),pe=Me(B,"Promise"),me=Me(B,"Set"),fe=Me(B,"WeakMap"),ge=Me(Object,"create"),be=Ye(ue),_e=Ye(he),ve=Ye(pe),ye=Ye(me),Ee=Ye(fe),Ae=ae?ae.prototype:void 0,xe=Ae?Ae.valueOf:void 0,ke=Ae?Ae.toString:void 0;function we(e){var t=-1,n=e?e.length:0;for(this.clear();++t<n;){var r=e[t];this.set(r[0],r[1])}}function je(e){var t=-1,n=e?e.length:0;for(this.clear();++t<n;){var r=e[t];this.set(r[0],r[1])}}function ze(e){var t=-1,n=e?e.length:0;for(this.clear();++t<n;){var r=e[t];this.set(r[0],r[1])}}function Te(e){var t=-1,n=e?e.length:0;for(this.__data__=new ze;++t<n;)this.add(e[t])}function Ce(e){this.__data__=new je(e)}function Ie(e,t){var n=qe(e)||Ge(e)?function(e,t){for(var n=-1,r=Array(e);++n<e;)r[n]=t(n);return r}(e.length,String):[],r=n.length,a=!!r;for(var o in e)!t&&!te.call(e,o)||a&&("length"==o||Re(o,r))||n.push(o);return n}function Se(e,t){for(var n=e.length;n--;)if(Xe(e[n][0],t))return n;return-1}function Oe(e,t){for(var n=0,r=(t=Ze(t,e)?[t]:Le(t)).length;null!=e&&n<r;)e=e[Ve(t[n++])];return n&&n==r?e:void 0}function Ne(e,t){return null!=e&&t in Object(e)}function Pe(e,t,n,o,c){return e===t||(null==e||null==t||!rt(e)&&!at(t)?e!=e&&t!=t:function(e,t,n,o,c,l){var p=qe(e),m=qe(t),_=d,x=d;p||(_=(_=De(e))==i?b:_),m||(x=(x=De(t))==i?b:x);var j=_==b&&!Q(e),z=x==b&&!Q(t),T=_==x;if(T&&!j)return l||(l=new Ce),p||lt(e)?Be(e,t,n,o,c,l):function(e,t,n,o,c,l,i){switch(n){case w:if(e.byteLength!=t.byteLength||e.byteOffset!=t.byteOffset)return!1;e=e.buffer,t=t.buffer;case k:return!(e.byteLength!=t.byteLength||!o(new oe(e),new oe(t)));case s:case u:case g:return Xe(+e,+t);case h:return e.name==t.name&&e.message==t.message;case v:case E:return e==t+"";case f:var d=F;case y:var p=l&a;if(d||(d=$),e.size!=t.size&&!p)return!1;var m=i.get(e);if(m)return m==t;l|=r,i.set(e,t);var b=Be(d(e),d(t),o,c,l,i);return i.delete(e),b;case A:if(xe)return xe.call(e)==xe.call(t)}return!1}(e,t,_,n,o,c,l);if(!(c&a)){var C=j&&te.call(e,"__wrapped__"),I=z&&te.call(t,"__wrapped__");if(C||I){var S=C?e.value():e,O=I?t.value():t;return l||(l=new Ce),n(S,O,o,c,l)}}return!!T&&(l||(l=new Ce),function(e,t,n,r,o,c){var l=o&a,i=it(e),d=i.length;if(d!=it(t).length&&!l)return!1;for(var s=d;s--;){var u=i[s];if(!(l?u in t:te.call(t,u)))return!1}var h=c.get(e);if(h&&c.get(t))return h==t;var p=!0;c.set(e,t),c.set(t,e);for(var m=l;++s<d;){var f=e[u=i[s]],g=t[u];if(r)var b=l?r(g,f,u,t,e,c):r(f,g,u,e,t,c);if(!(void 0===b?f===g||n(f,g,r,o,c):b)){p=!1;break}m||(m="constructor"==u)}if(p&&!m){var _=e.constructor,v=t.constructor;_==v||!("constructor"in e)||!("constructor"in t)||"function"==typeof _&&_ instanceof _&&"function"==typeof v&&v instanceof v||(p=!1)}return c.delete(e),c.delete(t),p}(e,t,n,o,c,l))}(e,t,Pe,n,o,c))}function Le(e){return qe(e)?e:$e(e)}function Be(e,t,n,o,c,l){var i=c&a,d=e.length,s=t.length;if(d!=s&&!(i&&s>d))return!1;var u=l.get(e);if(u&&l.get(t))return u==t;var h=-1,p=!0,m=c&r?new Te:void 0;for(l.set(e,t),l.set(t,e);++h<d;){var f=e[h],g=t[h];if(o)var b=i?o(g,f,h,t,e,l):o(f,g,h,e,t,l);if(void 0!==b){if(b)continue;p=!1;break}if(m){if(!Z(t,(function(e,t){if(!m.has(t)&&(f===e||n(f,e,o,c,l)))return m.add(t)}))){p=!1;break}}else if(f!==g&&!n(f,g,o,c,l)){p=!1;break}}return l.delete(e),l.delete(t),p}function He(e,t){var n,r,a=e.__data__;return("string"==(r=typeof(n=t))||"number"==r||"symbol"==r||"boolean"==r?"__proto__"!==n:null===n)?a["string"==typeof t?"string":"hash"]:a.map}function Me(e,t){var n=function(e,t){return null==e?void 0:e[t]}(e,t);return function(e){return!(!rt(e)||(t=e,q&&q in t))&&(tt(e)||Q(e)?re:S).test(Ye(e));var t}(n)?n:void 0}we.prototype.clear=function(){this.__data__=ge?ge(null):{}},we.prototype.delete=function(e){return this.has(e)&&delete this.__data__[e]},we.prototype.get=function(e){var t=this.__data__;if(ge){var r=t[e];return r===n?void 0:r}return te.call(t,e)?t[e]:void 0},we.prototype.has=function(e){var t=this.__data__;return ge?void 0!==t[e]:te.call(t,e)},we.prototype.set=function(e,t){return this.__data__[e]=ge&&void 0===t?n:t,this},je.prototype.clear=function(){this.__data__=[]},je.prototype.delete=function(e){var t=this.__data__,n=Se(t,e);return!(n<0||(n==t.length-1?t.pop():ie.call(t,n,1),0))},je.prototype.get=function(e){var t=this.__data__,n=Se(t,e);return n<0?void 0:t[n][1]},je.prototype.has=function(e){return Se(this.__data__,e)>-1},je.prototype.set=function(e,t){var n=this.__data__,r=Se(n,e);return r<0?n.push([e,t]):n[r][1]=t,this},ze.prototype.clear=function(){this.__data__={hash:new we,map:new(he||je),string:new we}},ze.prototype.delete=function(e){return He(this,e).delete(e)},ze.prototype.get=function(e){return He(this,e).get(e)},ze.prototype.has=function(e){return He(this,e).has(e)},ze.prototype.set=function(e,t){return He(this,e).set(e,t),this},Te.prototype.add=Te.prototype.push=function(e){return this.__data__.set(e,n),this},Te.prototype.has=function(e){return this.__data__.has(e)},Ce.prototype.clear=function(){this.__data__=new je},Ce.prototype.delete=function(e){return this.__data__.delete(e)},Ce.prototype.get=function(e){return this.__data__.get(e)},Ce.prototype.has=function(e){return this.__data__.has(e)},Ce.prototype.set=function(e,t){var n=this.__data__;if(n instanceof je){var r=n.__data__;if(!he||r.length<199)return r.push([e,t]),this;n=this.__data__=new ze(r)}return n.set(e,t),this};var We=de?K(de,Object):ut,Ue=de?function(e){for(var t=[];e;)R(t,We(e)),e=ce(e);return t}:ut,De=function(e){return ne.call(e)};function Re(e,t){return!!(t=null==t?l:t)&&("number"==typeof e||O.test(e))&&e>-1&&e%1==0&&e<t}function Ze(e,t){if(qe(e))return!1;var n=typeof e;return!("number"!=n&&"symbol"!=n&&"boolean"!=n&&null!=e&&!ot(e))||z.test(e)||!j.test(e)||null!=t&&e in Object(t)}function Qe(e){var t=e&&e.constructor;return e===("function"==typeof t&&t.prototype||X)}function Fe(e){return e==e&&!rt(e)}function Ke(e,t){return function(n){return null!=n&&n[e]===t&&(void 0!==t||e in Object(n))}}(ue&&De(new ue(new ArrayBuffer(1)))!=w||he&&De(new he)!=f||pe&&De(pe.resolve())!=_||me&&De(new me)!=y||fe&&De(new fe)!=x)&&(De=function(e){var t=ne.call(e),n=t==b?e.constructor:void 0,r=n?Ye(n):void 0;if(r)switch(r){case be:return w;case _e:return f;case ve:return _;case ye:return y;case Ee:return x}return t});var $e=Je((function(e){var t;e=null==(t=e)?"":function(e){if("string"==typeof e)return e;if(ot(e))return ke?ke.call(e):"";var t=e+"";return"0"==t&&1/e==-o?"-0":t}(t);var n=[];return T.test(e)&&n.push(""),e.replace(C,(function(e,t,r,a){n.push(r?a.replace(I,"$1"):t||e)})),n}));function Ve(e){if("string"==typeof e||ot(e))return e;var t=e+"";return"0"==t&&1/e==-o?"-0":t}function Ye(e){if(null!=e){try{return ee.call(e)}catch(e){}try{return e+""}catch(e){}}return""}function Je(e,t){if("function"!=typeof e||t&&"function"!=typeof t)throw new TypeError("Expected a function");var n=function(){var r=arguments,a=t?t.apply(this,r):r[0],o=n.cache;if(o.has(a))return o.get(a);var c=e.apply(this,r);return n.cache=o.set(a,c),c};return n.cache=new(Je.Cache||ze),n}function Xe(e,t){return e===t||e!=e&&t!=t}function Ge(e){return function(e){return at(e)&&et(e)}(e)&&te.call(e,"callee")&&(!le.call(e,"callee")||ne.call(e)==i)}Je.Cache=ze;var qe=Array.isArray;function et(e){return null!=e&&nt(e.length)&&!tt(e)}function tt(e){var t=rt(e)?ne.call(e):"";return t==p||t==m}function nt(e){return"number"==typeof e&&e>-1&&e%1==0&&e<=l}function rt(e){var t=typeof e;return!!e&&("object"==t||"function"==t)}function at(e){return!!e&&"object"==typeof e}function ot(e){return"symbol"==typeof e||at(e)&&ne.call(e)==A}var ct,lt=D?(ct=D,function(e){return ct(e)}):function(e){return at(e)&&nt(e.length)&&!!N[ne.call(e)]};function it(e){return et(e)?Ie(e):function(e){if(!Qe(e))return se(e);var t=[];for(var n in Object(e))te.call(e,n)&&"constructor"!=n&&t.push(n);return t}(e)}function dt(e){return et(e)?Ie(e,!0):function(e){if(!rt(e))return function(e){var t=[];if(null!=e)for(var n in Object(e))t.push(n);return t}(e);var t=Qe(e),n=[];for(var r in e)("constructor"!=r||!t&&te.call(e,r))&&n.push(r);return n}(e)}function st(e){return e}function ut(){return[]}e.exports=function(e,t){return null==e?{}:function(e,t,n){for(var r=-1,a=t.length,o={};++r<a;){var c=t[r],l=e[c];n(l,c)&&(o[c]=l)}return o}(e,function(e){return function(e,t,n){var r=t(e);return qe(e)?r:R(r,n(e))}(e,dt,Ue)}(e),function(e){return"function"==typeof e?e:null==e?st:"object"==typeof e?qe(e)?function(e,t){return Ze(e)&&Fe(t)?Ke(Ve(e),t):function(n){var o=function(e,t,n){var r=null==e?void 0:Oe(e,t);return void 0===r?void 0:r}(n,e);return void 0===o&&o===t?function(e,t){return null!=e&&function(e,t,n){for(var r,a=-1,o=(t=Ze(t,e)?[t]:Le(t)).length;++a<o;){var c=Ve(t[a]);if(!(r=null!=e&&n(e,c)))break;e=e[c]}return r||!!(o=e?e.length:0)&&nt(o)&&Re(c,o)&&(qe(e)||Ge(e))}(e,t,Ne)}(n,e):Pe(t,o,void 0,r|a)}}(e[0],e[1]):function(e){var t=function(e){for(var t=it(e),n=t.length;n--;){var r=t[n],a=e[r];t[n]=[r,a,Fe(a)]}return t}(e);return 1==t.length&&t[0][2]?Ke(t[0][0],t[0][1]):function(n){return n===e||function(e,t,n,o){var c=n.length,l=c;if(null==e)return!l;for(e=Object(e);c--;){var i=n[c];if(i[2]?i[1]!==e[i[0]]:!(i[0]in e))return!1}for(;++c<l;){var d=(i=n[c])[0],s=e[d],u=i[1];if(i[2]){if(void 0===s&&!(d in e))return!1}else{var h,p=new Ce;if(!(void 0===h?Pe(u,s,o,r|a,p):h))return!1}}return!0}(n,0,t)}}(e):Ze(t=e)?(n=Ve(t),function(e){return null==e?void 0:e[n]}):function(e){return function(t){return Oe(t,e)}}(t);var t,n}(t))}})),f={accordion:"Accordion-module_accordion__2fPUT",card:"Accordion-module_card__1iRKx",border:"Accordion-module_border__2AgQd",accordionHeader:"Accordion-module_accordionHeader__3_uK7",s:"Accordion-module_s__8gw4g",closeButton:"Accordion-module_closeButton__1Qt8U",m:"Accordion-module_m__2k6QY",l:"Accordion-module_l__gPzdT",accordionContent:"Accordion-module_accordionContent__1umso",contentWithCloseButton:"Accordion-module_contentWithCloseButton__-einM",headingContainer:"Accordion-module_headingContainer__1DzX3",accordionButtonIcon:"Accordion-module_accordionButtonIcon__MQu2J"};(0,l.s)(".Accordion-module_accordion__2fPUT{--background-color:var(--color-white);--border-color:var(--color-black-60);--header-font-color:var(--color-black-90);--header-focus-outline-color:var(--color-coat-of-arms);--content-font-color:var(--color-black-90);--content-font-size:var(--fontsize-body-m);--content-line-height:var(--lineheight-l)}.Accordion-module_accordion__2fPUT:not(.Accordion-module_card__1iRKx){border-bottom:1px solid var(--border-color)}.Accordion-module_accordion__2fPUT.Accordion-module_card__1iRKx{background-color:var(--background-color);padding-left:var(--padding-horizontal);padding-right:var(--padding-horizontal)}.Accordion-module_accordion__2fPUT.Accordion-module_border__2AgQd{border:2px solid var(--border-color)}.Accordion-module_accordionHeader__3_uK7{align-items:center;color:var(--header-font-color);display:flex;font-size:var(--header-font-size);font-weight:var(--header-font-weight);justify-content:space-between;letter-spacing:var(--header-letter-spacing);line-height:var(--header-line-height);padding-bottom:var(--padding-vertical);padding-top:var(--padding-vertical);position:relative}.Accordion-module_accordionHeader__3_uK7>div{flex:1 1 auto}.Accordion-module_s__8gw4g{--header-font-size:var(--fontsize-heading-s);--padding-vertical:var(--spacing-s);--header-font-weight:700;--header-letter-spacing:0.2px;--header-line-height:1.4;--button-size:28px;--padding-horizontal:var(--spacing-2-xs)}.Accordion-module_s__8gw4g .Accordion-module_closeButton__1Qt8U div{margin-right:var(--spacing-4-xs)}.Accordion-module_m__2k6QY{--header-font-size:var(--fontsize-heading-m);--padding-vertical:var(--spacing-m);--header-font-weight:500;--header-letter-spacing:-0.2px;--header-line-height:32px;--button-size:36px;--padding-horizontal:var(--spacing-m)}.Accordion-module_m__2k6QY .Accordion-module_closeButton__1Qt8U div{margin-right:6px}.Accordion-module_l__gPzdT{--header-font-size:var(--fontsize-heading-l);--padding-vertical:var(--spacing-l);--header-font-weight:400;--header-letter-spacing:-0.4px;--header-line-height:var(--lineheight-s);--button-size:52px;--padding-horizontal:var(--spacing-l)}.Accordion-module_l__gPzdT .Accordion-module_closeButton__1Qt8U div{margin-right:var(--spacing-xs)}.Accordion-module_accordionContent__1umso{color:var(--content-font-color);font-size:var(--content-font-size);line-height:var(--content-line-height);padding-bottom:var(--spacing-m);position:relative}.Accordion-module_accordionContent__1umso .Accordion-module_closeButton__1Qt8U{bottom:0;color:var(--content-font-color);position:absolute;right:0}.Accordion-module_contentWithCloseButton__-einM{padding-bottom:44px}.Accordion-module_headingContainer__1DzX3{align-items:center;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:auto calc(var(--button-size));width:100%}.Accordion-module_headingContainer__1DzX3:focus{outline:2px solid var(--header-focus-outline-color,transparent)}.Accordion-module_accordionButtonIcon__MQu2J{border:2px solid transparent;box-sizing:border-box;height:var(--button-size)!important;margin:auto;width:var(--button-size)!important}");const g=e=>({en:"Close",fi:"Sulje",sv:"Stäng"}[e]),b=e=>{let{border:t=!1,card:n=!1,children:a,className:c,closeButtonClassName:l,closeButton:b=!0,heading:_,headingLevel:v=2,id:y,initiallyOpen:E=!1,language:A="fi",size:x="m",style:k,theme:w}=e;const j=(0,r.useRef)(null),[z,T]=(0,r.useState)(!1),[C]=(0,r.useState)(y||o()("accordion-")),I=w&&{"--background-color":w["--background-color"],"--border-color":w["--border-color"],"--header-font-color":w["--header-font-color"],"--header-focus-outline-color":w["--header-focus-outline-color"],"--content-font-color":w["--content-font-color"],"--content-font-size":w["--content-font-size"],"--content-line-height":w["--content-line-height"]},S=m(I),O=(0,s.u)(f.accordion,Object.keys(S).length>0?S:void 0),N=w&&{"--header-font-size":w["--header-font-size"],"--padding-vertical":w["--padding-vertical"],"--padding-horizontal":w["--padding-horizontal"],"--header-font-weight":w["--header-font-weight"],"--header-letter-spacing":w["--header-letter-spacing"],"--header-line-height":w["--header-line-height"],"--button-size":w["--button-size"]},P=m(N),L=(0,s.u)(f[x],Object.keys(P).length>0?P:void 0),{isOpen:B,buttonProps:H,contentProps:M}=(0,d.u)({initiallyOpen:E}),W=B?r.createElement(h.I,{"aria-hidden":!0,className:f.accordionButtonIcon}):r.createElement(p.I,{"aria-hidden":!0,className:f.accordionButtonIcon}),U=function(){const[e,t]=r.useState(!1);return r.useEffect((()=>{t(!0)}),[]),e}();(0,r.useEffect)((()=>{if(!U)return;const e=setTimeout((()=>{j.current.focus(),!0===z&&(T(!1),H.onClick())}),50);return()=>clearTimeout(e)}),[z]);const D=()=>{T(!0)};return r.createElement("div",{className:(0,i.c)(f.accordion,n&&f.card,n&&t&&f.border,B&&f.isOpen,f[x],O,L,c),style:k,id:C},r.createElement("div",{className:(0,i.c)(f.accordionHeader)},r.createElement("div",{role:"heading","aria-level":v,id:C+"-heading"},r.createElement("div",Object.assign({ref:j,role:"button",tabIndex:0,onKeyPress:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),H.onClick())},className:f.headingContainer,"aria-labelledby":C+"-heading"},H,z?{"aria-expanded":!1}:{}),r.createElement("span",{className:"label"},_),W))),r.createElement("div",Object.assign({},M,{id:C+"-content",role:"region",className:(0,i.c)(f.accordionContent,n&&f.card,b&&f.contentWithCloseButton),"aria-labelledby":C+"-heading"}),a,b&&r.createElement(u.B,{"data-testid":C+"-closeButton","aria-label":g(A)+" "+_,className:(0,i.c)(f.closeButton,l),theme:"black",size:"small",onKeyPress:e=>{" "===e.key&&D()},onClick:()=>{D()},variant:"supplementary",iconRight:r.createElement(h.I,{"aria-hidden":!0,size:"xs",className:f.accordionButtonIcon})},g(A))))}},45433:function(e,t,n){n.d(t,{C:function(){return d}});var r=n(80136),a=n(67294),o=n(7444),c=n(34300),l=n(97640),i="Card-module_card__1WbKx";(0,o.s)(".card_hds-card__227qQ{--background-color:var(--color-white);--border-color:var(--color-black-90);--color:var(--color-black-90);--border-width:2px;--padding-horizontal:var(--spacing-l);--padding-vertical:var(--spacing-m);background-color:var(--background-color);color:var(--color);padding:var(--padding-vertical) var(--padding-horizontal)}.card_hds-card--border__c2dBc{border:var(--border-width) solid var(--border-color)}.card_hds-card--box-shadow__1LWxe{box-shadow:var(--box-shadow-m)}.card_hds-card__body__M27Up{display:grid;grid-gap:var(--spacing-s);gap:var(--spacing-s);margin-bottom:var(--spacing-l)}.card_hds-card__body__M27Up:last-child{margin-bottom:0}.card_hds-card__text__n7A0r{font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.Card-module_card__1WbKx{--background-color:var(--color-white);--border-color:var(--color-black-90);--color:var(--color-black-90);--border-width:2px;--padding-horizontal:var(--spacing-l);--padding-vertical:var(--spacing-m);background-color:var(--background-color);color:var(--color);padding:var(--padding-vertical) var(--padding-horizontal)}");const d=e=>{var{border:t,heading:n,headingAriaLevel:o=2,boxShadow:d=!1,text:s,className:u,theme:h,children:p}=e,m=(0,r._)(e,["border","heading","headingAriaLevel","boxShadow","text","className","theme","children"]);const f=(0,l.u)(i,h),g=!!n||!!s;return a.createElement("div",Object.assign({className:(0,c.c)(i,t&&"card_hds-card--border__c2dBc",d&&"Card-module_boxShadow__2-bIH card_hds-card--box-shadow__1LWxe",f,u),role:"region"},m),g&&a.createElement("div",{className:"Card-module_body__WJ4t2 card_hds-card__body__M27Up"},n&&a.createElement("div",{className:"heading-m",role:"heading","aria-level":o},n),s&&a.createElement("div",{className:"Card-module_text__28deG card_hds-card__text__n7A0r"},s)),p)}},41380:function(e,t,n){n.d(t,{u:function(){return a}});var r=n(67294);const a=e=>{let{initiallyOpen:t=!1}=e;const[n,a]=(0,r.useState)(t),o=()=>{a(!0)},c=()=>{a(!1)},l=()=>{n?c():o()},i={onClick:l,"aria-expanded":n},d={};return!1===n&&(d.style={display:"none"}),{isOpen:n,openAccordion:o,closeAccordion:c,toggleAccordion:l,buttonProps:i,contentProps:d}}},66047:function(e,t,n){n.r(t);var r=n(11151),a=n(67294),o=n(66625),c=n(45433),l=n(44961),i=n(56924),d=n(17882),s=n(74458),u=n(41380),h=n(81074);const p=e=>{let{children:t,pageContext:n}=e;return a.createElement(h.default,{pageContext:n},t)};function m(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",h4:"h4",pre:"pre",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",strong:"strong",p:"p"},(0,r.ah)(),e.components),{Playground:n,IconCheckCircleFill:h,Link:p,ExternalLink:m,IconCrossCircle:g}=t;return m||f("ExternalLink",!0),h||f("IconCheckCircleFill",!0),g||f("IconCrossCircle",!0),p||f("Link",!0),n||f("Playground",!0),a.createElement(a.Fragment,null,a.createElement(t.h2,{id:"code",style:{position:"relative"}},"Code",a.createElement(t.a,{href:"#code","aria-label":"code permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.h3,{id:"code-examples",style:{position:"relative"}},"Code examples",a.createElement(t.a,{href:"#code-examples","aria-label":"code examples permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.h4,{id:"default",style:{position:"relative"}},"Default",a.createElement(t.a,{href:"#default","aria-label":"default permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(n,{scope:{Accordion:o.A}},a.createElement(t.pre,null,a.createElement(t.code,{className:"language-jsx"},"import { Accordion } from 'hds-react';\n\n() => (\n  <Accordion heading=\"How to publish data?\" language=\"en\" style={{ maxWidth: '360px' }}>\n    To publish your data, open your profile settings and click the button 'Publish'.\n  </Accordion>\n)\n"))),"\n",a.createElement(t.h4,{id:"with-a-card",style:{position:"relative"}},"With a card",a.createElement(t.a,{href:"#with-a-card","aria-label":"with a card permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(n,{scope:{Accordion:o.A}},a.createElement(t.pre,null,a.createElement(t.code,{className:"language-jsx"},"import { Accordion } from 'hds-react';\n\n() => (\n  <Accordion card border heading=\"How to publish data?\" language=\"en\" style={{ maxWidth: '360px' }}>\n    To publish your data, open your profile settings and click the button 'Publish'.\n  </Accordion>\n)\n"))),"\n",a.createElement(t.h4,{id:"with-the-close-button-hidden",style:{position:"relative"}},"With the close button hidden",a.createElement(t.a,{href:"#with-the-close-button-hidden","aria-label":"with the close button hidden permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(n,{scope:{Accordion:o.A}},a.createElement(t.pre,null,a.createElement(t.code,{className:"language-jsx"},"import { Accordion } from 'hds-react';\n\n() => (\n  <Accordion card border heading=\"How to publish data?\" language=\"en\" style={{ maxWidth: '360px' }}>\n    To publish your data, open your profile settings and click the button 'Publish'.\n  </Accordion>\n)\n"))),"\n",a.createElement(t.h4,{id:"accordion-size-variants",style:{position:"relative"}},"Accordion size variants",a.createElement(t.a,{href:"#accordion-size-variants","aria-label":"accordion size variants permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(n,{scope:{Accordion:o.A}},a.createElement(t.pre,null,a.createElement(t.code,{className:"language-jsx"},"import { Accordion } from 'hds-react';\n\n() => (<>\n  <Accordion size=\"s\" card border heading=\"How to publish data?\" language=\"en\" style={{ maxWidth: '360px' }}>\n    To publish your data, open your profile settings and click the button 'Publish'.\n  </Accordion>\n  <Accordion size=\"m\" card border heading=\"How to publish data?\" language=\"en\" style={{ maxWidth: '360px', marginTop: 'var(--spacing-s)' }}>\n    To publish your data, open your profile settings and click the button 'Publish'.\n  </Accordion>\n  <Accordion size=\"l\" card border heading=\"How to publish data?\" language=\"en\" style={{ maxWidth: '360px', marginTop: 'var(--spacing-s)' }}>\n    To publish your data, open your profile settings and click the button 'Publish'.\n  </Accordion>\n</>)\n"))),"\n",a.createElement(t.h4,{id:"stacked-accordions",style:{position:"relative"}},"Stacked Accordions",a.createElement(t.a,{href:"#stacked-accordions","aria-label":"stacked accordions permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(n,{scope:{Accordion:o.A}},a.createElement(t.pre,null,a.createElement(t.code,{className:"language-jsx"},'import { Accordion } from \'hds-react\';\n\n() => (<>\n  <h5>Stacked Accordions</h5>\n  <Accordion size="s" headingLevel={6} card border heading="How to publish data?" language="en" style={{ maxWidth: \'360px\' }}>\n    To publish your data, open your profile settings and click the button \'Publish\'.\n  </Accordion>\n  <Accordion size="s" headingLevel={6} card border heading="How to publish data?" language="en" style={{ maxWidth: \'360px\', borderTop: 0 }}>\n    To publish your data, open your profile settings and click the button \'Publish\'.\n  </Accordion>\n  <Accordion size="s" headingLevel={6} card border heading="How to publish data?" language="en" style={{ maxWidth: \'360px\', borderTop: 0 }}>\n    To publish your data, open your profile settings and click the button \'Publish\'.\n  </Accordion>\n</>)\n'))),"\n",a.createElement(t.h4,{id:"custom-accordion",style:{position:"relative"}},"Custom accordion",a.createElement(t.a,{href:"#custom-accordion","aria-label":"custom accordion permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(n,{scope:{Accordion:o.A,Card:c.C,IconAngleDown:l.I,IconAngleUp:i.I,Button:d.B,Select:s.b,useAccordion:u.u}},a.createElement(t.pre,null,a.createElement(t.code,{className:"language-jsx"},"import { Accordion, Card, IconAngleDown, IconAngleUp, Button, Select, useAccordion } from 'hds-react';\n\n() => {\n  const initiallyOpen = false;\n  const { isOpen, buttonProps, contentProps } = useAccordion({ initiallyOpen });\n  const icon = isOpen ? <IconAngleUp aria-hidden /> : <IconAngleDown aria-hidden />;\n  return (\n    <>\n      <Button iconLeft={icon} {...buttonProps}>\n        Advanced filters\n      </Button>\n      <Card border aria-label=\"Advanced filters\" style={{ marginTop: 'var(--spacing-m)' }} {...contentProps}>\n        <Select\n          multiselect\n          label=\"Filter by event category\"\n          placeholder=\"No selected categories\"\n          options={[{ label: 'Culture & arts' }, { label: 'Sports' }, { label: 'Museums' }, { label: 'Music' }]}\n          clearButtonAriaLabel=\"Clear all selections\"\n          selectedItemRemoveButtonAriaLabel=\"Remove\"\n          style={{ maxWidth: '360px' }}\n        />\n        <Select\n          multiselect\n          label=\"Filter by event location\"\n          placeholder=\"No selected locations\"\n          options={[\n            { label: 'Haaga' },\n            { label: 'Herttoniemi' },\n            { label: 'Kallio' },\n            { label: 'Kamppi' },\n            { label: 'Laajasalo' },\n            { label: 'Lauttasaari' },\n            { label: 'Mellunkylä' },\n            { label: 'Pasila' },\n          ]}\n          clearButtonAriaLabel=\"Clear all selections\"\n          selectedItemRemoveButtonAriaLabel=\"Remove\"\n          style={{ maxWidth: '360px', marginTop: 'var(--spacing-s)' }}\n        />\n      </Card>\n    </>\n  );\n}\n"))),"\n",a.createElement(t.h3,{id:"packages",style:{position:"relative"}},"Packages",a.createElement(t.a,{href:"#packages","aria-label":"packages permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Package"),a.createElement(t.th,null,"Included"),a.createElement(t.th,null,"Storybook link"),a.createElement(t.th,null,"Source link"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.strong,null,"HDS React")),a.createElement(t.td,null,a.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},a.createElement(h)," Yes ")),a.createElement(t.td,null,a.createElement(p,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-accordion--default"},"View in Storybook")),a.createElement(t.td,null,a.createElement(m,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/blob/master/packages/react/src/components/accordion/Accordion.tsx"},"View source"))),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.strong,null,"HDS Core")),a.createElement(t.td,null,a.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},a.createElement(g)," No ")),a.createElement(t.td,null,"-"),a.createElement(t.td,null,"-")))),"\n",a.createElement(t.h3,{id:"properties",style:{position:"relative"}},"Properties",a.createElement(t.a,{href:"#properties","aria-label":"properties permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.p,null,"Note! You can find the full list of properties in the ",a.createElement(p,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/docs/components-accordion--default"},"React Storybook.")),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Property"),a.createElement(t.th,null,"Description"),a.createElement(t.th,null,"Values"),a.createElement(t.th,null,"Default value"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"heading")),a.createElement(t.td,null,"Heading of the accordion"),a.createElement(t.td,null,"-"),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"headingLevel")),a.createElement(t.td,null,"Sets the aria-level of the accordion header."),a.createElement(t.td,null,"1-6"),a.createElement(t.td,null,"2")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"border")),a.createElement(t.td,null,"If set to true, a border will be drawn around the accordion card."),a.createElement(t.td,null,a.createElement(t.code,null,"boolean")),a.createElement(t.td,null,"false")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"card")),a.createElement(t.td,null,"If set to true, the accordion will use HDS Card as its background element."),a.createElement(t.td,null,a.createElement(t.code,null,"boolean")),a.createElement(t.td,null,"false")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"closeButton")),a.createElement(t.td,null,"If set to true, a close button is shown at the bottom of an expanded accordion"),a.createElement(t.td,null,a.createElement(t.code,null,"boolean")),a.createElement(t.td,null,"true")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"initiallyOpen")),a.createElement(t.td,null,"If set to true, the accordion will be initially opened."),a.createElement(t.td,null,a.createElement(t.code,null,"boolean")),a.createElement(t.td,null,"false")))))}function f(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){return void 0===e&&(e={}),a.createElement(p,e,a.createElement(m,e))}},81074:function(e,t,n){n.r(t);var r=n(11151),a=n(67294),o=n(83428),c=n(57674),l=n(89482),i=(n(18607),n(26127));function d(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,r.ah)(),e.components);return i.Z||s("PageTabs",!1),i.Z.Tab||s("PageTabs.Tab",!0),i.Z.TabList||s("PageTabs.TabList",!0),i.Z.TabPanel||s("PageTabs.TabPanel",!0),a.createElement(a.Fragment,null,a.createElement(t.h1,{id:"accordion",style:{position:"relative"}},"Accordion",a.createElement(t.a,{href:"#accordion","aria-label":"accordion permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement("div",{class:"status-label-description"},a.createElement(o.S,{type:"info"},"Stable"),a.createElement(o.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),a.createElement(c.Z)),"\n",a.createElement(l.Z,null,"Accordions can be used to hide and reveal information. When used correctly, they are a good way to make a higher amount of information easier to digest for the user."),"\n",a.createElement(i.Z,{pageContext:e.pageContext},a.createElement(i.Z.TabList,null,a.createElement(i.Z.Tab,{href:"/"},"Usage"),a.createElement(i.Z.Tab,{href:"/code"},"Code"),a.createElement(i.Z.Tab,{href:"/accessibility"},"Accessibility"),a.createElement(i.Z.Tab,{href:"/customisation"},"Customisation")),a.createElement(i.Z.TabPanel,null,e.children)))}function s(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,r.ah)(),e.components);return t?a.createElement(t,e,a.createElement(d,e)):d(e)}},57674:function(e,t,n){var r=n(67294),a=n(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return r.createElement(a.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},r.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>r.createElement("li",{key:t},r.createElement("span",{className:"status-name"},t),r.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-accordion-customisation-mdx-57e8811d082cf9e65d84.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-accordion-customisation-mdx-57e8811d082cf9e65d84.js
new file mode 100644
index 00000000000..c47ee76cca0
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-accordion-customisation-mdx-57e8811d082cf9e65d84.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[2506,7407],{66625:function(e,t,n){n.d(t,{A:function(){return b}});var r=n(67294),o=n(5871),a=n.n(o),c=n(26917),l=n(7444),i=n(34300),s=n(41380),u=n(97640),d=n(17882),h=n(56924),f=n(44961),p=(0,c.c)((function(e,t){var n="__lodash_hash_undefined__",r=1,o=2,a=1/0,l=9007199254740991,i="[object Arguments]",s="[object Array]",u="[object Boolean]",d="[object Date]",h="[object Error]",f="[object Function]",p="[object GeneratorFunction]",m="[object Map]",_="[object Number]",b="[object Object]",g="[object Promise]",v="[object RegExp]",y="[object Set]",E="[object String]",A="[object Symbol]",j="[object WeakMap]",z="[object ArrayBuffer]",w="[object DataView]",k=/\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/,x=/^\w*$/,T=/^\./,O=/[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g,L=/\\(\\)?/g,S=/^\[object .+?Constructor\]$/,C=/^(?:0|[1-9]\d*)$/,P={};P["[object Float32Array]"]=P["[object Float64Array]"]=P["[object Int8Array]"]=P["[object Int16Array]"]=P["[object Int32Array]"]=P["[object Uint8Array]"]=P["[object Uint8ClampedArray]"]=P["[object Uint16Array]"]=P["[object Uint32Array]"]=!0,P[i]=P[s]=P[z]=P[u]=P[w]=P[d]=P[h]=P[f]=P[m]=P[_]=P[b]=P[v]=P[y]=P[E]=P[j]=!1;var N="object"==typeof c.a&&c.a&&c.a.Object===Object&&c.a,I="object"==typeof self&&self&&self.Object===Object&&self,B=N||I||Function("return this")(),U=t&&!t.nodeType&&t,Z=U&&e&&!e.nodeType&&e,H=Z&&Z.exports===U&&N.process,W=function(){try{return H&&H.binding("util")}catch(e){}}(),F=W&&W.isTypedArray;function M(e,t){for(var n=-1,r=t.length,o=e.length;++n<r;)e[o+n]=t[n];return e}function Q(e,t){for(var n=-1,r=e?e.length:0;++n<r;)if(t(e[n],n,e))return!0;return!1}function K(e){var t=!1;if(null!=e&&"function"!=typeof e.toString)try{t=!!(e+"")}catch(e){}return t}function D(e){var t=-1,n=Array(e.size);return e.forEach((function(e,r){n[++t]=[r,e]})),n}function R(e,t){return function(n){return e(t(n))}}function $(e){var t=-1,n=Array(e.size);return e.forEach((function(e){n[++t]=e})),n}var Y,V=Array.prototype,X=Function.prototype,J=Object.prototype,G=B["__core-js_shared__"],q=(Y=/[^.]+$/.exec(G&&G.keys&&G.keys.IE_PROTO||""))?"Symbol(src)_1."+Y:"",ee=X.toString,te=J.hasOwnProperty,ne=J.toString,re=RegExp("^"+ee.call(te).replace(/[\\^$.*+?()[\]{}|]/g,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$"),oe=B.Symbol,ae=B.Uint8Array,ce=R(Object.getPrototypeOf,Object),le=J.propertyIsEnumerable,ie=V.splice,se=Object.getOwnPropertySymbols,ue=R(Object.keys,Object),de=Ze(B,"DataView"),he=Ze(B,"Map"),fe=Ze(B,"Promise"),pe=Ze(B,"Set"),me=Ze(B,"WeakMap"),_e=Ze(Object,"create"),be=Ve(de),ge=Ve(he),ve=Ve(fe),ye=Ve(pe),Ee=Ve(me),Ae=oe?oe.prototype:void 0,je=Ae?Ae.valueOf:void 0,ze=Ae?Ae.toString:void 0;function we(e){var t=-1,n=e?e.length:0;for(this.clear();++t<n;){var r=e[t];this.set(r[0],r[1])}}function ke(e){var t=-1,n=e?e.length:0;for(this.clear();++t<n;){var r=e[t];this.set(r[0],r[1])}}function xe(e){var t=-1,n=e?e.length:0;for(this.clear();++t<n;){var r=e[t];this.set(r[0],r[1])}}function Te(e){var t=-1,n=e?e.length:0;for(this.__data__=new xe;++t<n;)this.add(e[t])}function Oe(e){this.__data__=new ke(e)}function Le(e,t){var n=qe(e)||Ge(e)?function(e,t){for(var n=-1,r=Array(e);++n<e;)r[n]=t(n);return r}(e.length,String):[],r=n.length,o=!!r;for(var a in e)!t&&!te.call(e,a)||o&&("length"==a||Me(a,r))||n.push(a);return n}function Se(e,t){for(var n=e.length;n--;)if(Je(e[n][0],t))return n;return-1}function Ce(e,t){for(var n=0,r=(t=Qe(t,e)?[t]:Ie(t)).length;null!=e&&n<r;)e=e[Ye(t[n++])];return n&&n==r?e:void 0}function Pe(e,t){return null!=e&&t in Object(e)}function Ne(e,t,n,a,c){return e===t||(null==e||null==t||!rt(e)&&!ot(t)?e!=e&&t!=t:function(e,t,n,a,c,l){var f=qe(e),p=qe(t),g=s,j=s;f||(g=(g=Fe(e))==i?b:g),p||(j=(j=Fe(t))==i?b:j);var k=g==b&&!K(e),x=j==b&&!K(t),T=g==j;if(T&&!k)return l||(l=new Oe),f||lt(e)?Be(e,t,n,a,c,l):function(e,t,n,a,c,l,i){switch(n){case w:if(e.byteLength!=t.byteLength||e.byteOffset!=t.byteOffset)return!1;e=e.buffer,t=t.buffer;case z:return!(e.byteLength!=t.byteLength||!a(new ae(e),new ae(t)));case u:case d:case _:return Je(+e,+t);case h:return e.name==t.name&&e.message==t.message;case v:case E:return e==t+"";case m:var s=D;case y:var f=l&o;if(s||(s=$),e.size!=t.size&&!f)return!1;var p=i.get(e);if(p)return p==t;l|=r,i.set(e,t);var b=Be(s(e),s(t),a,c,l,i);return i.delete(e),b;case A:if(je)return je.call(e)==je.call(t)}return!1}(e,t,g,n,a,c,l);if(!(c&o)){var O=k&&te.call(e,"__wrapped__"),L=x&&te.call(t,"__wrapped__");if(O||L){var S=O?e.value():e,C=L?t.value():t;return l||(l=new Oe),n(S,C,a,c,l)}}return!!T&&(l||(l=new Oe),function(e,t,n,r,a,c){var l=a&o,i=it(e),s=i.length;if(s!=it(t).length&&!l)return!1;for(var u=s;u--;){var d=i[u];if(!(l?d in t:te.call(t,d)))return!1}var h=c.get(e);if(h&&c.get(t))return h==t;var f=!0;c.set(e,t),c.set(t,e);for(var p=l;++u<s;){var m=e[d=i[u]],_=t[d];if(r)var b=l?r(_,m,d,t,e,c):r(m,_,d,e,t,c);if(!(void 0===b?m===_||n(m,_,r,a,c):b)){f=!1;break}p||(p="constructor"==d)}if(f&&!p){var g=e.constructor,v=t.constructor;g==v||!("constructor"in e)||!("constructor"in t)||"function"==typeof g&&g instanceof g&&"function"==typeof v&&v instanceof v||(f=!1)}return c.delete(e),c.delete(t),f}(e,t,n,a,c,l))}(e,t,Ne,n,a,c))}function Ie(e){return qe(e)?e:$e(e)}function Be(e,t,n,a,c,l){var i=c&o,s=e.length,u=t.length;if(s!=u&&!(i&&u>s))return!1;var d=l.get(e);if(d&&l.get(t))return d==t;var h=-1,f=!0,p=c&r?new Te:void 0;for(l.set(e,t),l.set(t,e);++h<s;){var m=e[h],_=t[h];if(a)var b=i?a(_,m,h,t,e,l):a(m,_,h,e,t,l);if(void 0!==b){if(b)continue;f=!1;break}if(p){if(!Q(t,(function(e,t){if(!p.has(t)&&(m===e||n(m,e,a,c,l)))return p.add(t)}))){f=!1;break}}else if(m!==_&&!n(m,_,a,c,l)){f=!1;break}}return l.delete(e),l.delete(t),f}function Ue(e,t){var n,r,o=e.__data__;return("string"==(r=typeof(n=t))||"number"==r||"symbol"==r||"boolean"==r?"__proto__"!==n:null===n)?o["string"==typeof t?"string":"hash"]:o.map}function Ze(e,t){var n=function(e,t){return null==e?void 0:e[t]}(e,t);return function(e){return!(!rt(e)||(t=e,q&&q in t))&&(tt(e)||K(e)?re:S).test(Ve(e));var t}(n)?n:void 0}we.prototype.clear=function(){this.__data__=_e?_e(null):{}},we.prototype.delete=function(e){return this.has(e)&&delete this.__data__[e]},we.prototype.get=function(e){var t=this.__data__;if(_e){var r=t[e];return r===n?void 0:r}return te.call(t,e)?t[e]:void 0},we.prototype.has=function(e){var t=this.__data__;return _e?void 0!==t[e]:te.call(t,e)},we.prototype.set=function(e,t){return this.__data__[e]=_e&&void 0===t?n:t,this},ke.prototype.clear=function(){this.__data__=[]},ke.prototype.delete=function(e){var t=this.__data__,n=Se(t,e);return!(n<0||(n==t.length-1?t.pop():ie.call(t,n,1),0))},ke.prototype.get=function(e){var t=this.__data__,n=Se(t,e);return n<0?void 0:t[n][1]},ke.prototype.has=function(e){return Se(this.__data__,e)>-1},ke.prototype.set=function(e,t){var n=this.__data__,r=Se(n,e);return r<0?n.push([e,t]):n[r][1]=t,this},xe.prototype.clear=function(){this.__data__={hash:new we,map:new(he||ke),string:new we}},xe.prototype.delete=function(e){return Ue(this,e).delete(e)},xe.prototype.get=function(e){return Ue(this,e).get(e)},xe.prototype.has=function(e){return Ue(this,e).has(e)},xe.prototype.set=function(e,t){return Ue(this,e).set(e,t),this},Te.prototype.add=Te.prototype.push=function(e){return this.__data__.set(e,n),this},Te.prototype.has=function(e){return this.__data__.has(e)},Oe.prototype.clear=function(){this.__data__=new ke},Oe.prototype.delete=function(e){return this.__data__.delete(e)},Oe.prototype.get=function(e){return this.__data__.get(e)},Oe.prototype.has=function(e){return this.__data__.has(e)},Oe.prototype.set=function(e,t){var n=this.__data__;if(n instanceof ke){var r=n.__data__;if(!he||r.length<199)return r.push([e,t]),this;n=this.__data__=new xe(r)}return n.set(e,t),this};var He=se?R(se,Object):dt,We=se?function(e){for(var t=[];e;)M(t,He(e)),e=ce(e);return t}:dt,Fe=function(e){return ne.call(e)};function Me(e,t){return!!(t=null==t?l:t)&&("number"==typeof e||C.test(e))&&e>-1&&e%1==0&&e<t}function Qe(e,t){if(qe(e))return!1;var n=typeof e;return!("number"!=n&&"symbol"!=n&&"boolean"!=n&&null!=e&&!at(e))||x.test(e)||!k.test(e)||null!=t&&e in Object(t)}function Ke(e){var t=e&&e.constructor;return e===("function"==typeof t&&t.prototype||J)}function De(e){return e==e&&!rt(e)}function Re(e,t){return function(n){return null!=n&&n[e]===t&&(void 0!==t||e in Object(n))}}(de&&Fe(new de(new ArrayBuffer(1)))!=w||he&&Fe(new he)!=m||fe&&Fe(fe.resolve())!=g||pe&&Fe(new pe)!=y||me&&Fe(new me)!=j)&&(Fe=function(e){var t=ne.call(e),n=t==b?e.constructor:void 0,r=n?Ve(n):void 0;if(r)switch(r){case be:return w;case ge:return m;case ve:return g;case ye:return y;case Ee:return j}return t});var $e=Xe((function(e){var t;e=null==(t=e)?"":function(e){if("string"==typeof e)return e;if(at(e))return ze?ze.call(e):"";var t=e+"";return"0"==t&&1/e==-a?"-0":t}(t);var n=[];return T.test(e)&&n.push(""),e.replace(O,(function(e,t,r,o){n.push(r?o.replace(L,"$1"):t||e)})),n}));function Ye(e){if("string"==typeof e||at(e))return e;var t=e+"";return"0"==t&&1/e==-a?"-0":t}function Ve(e){if(null!=e){try{return ee.call(e)}catch(e){}try{return e+""}catch(e){}}return""}function Xe(e,t){if("function"!=typeof e||t&&"function"!=typeof t)throw new TypeError("Expected a function");var n=function(){var r=arguments,o=t?t.apply(this,r):r[0],a=n.cache;if(a.has(o))return a.get(o);var c=e.apply(this,r);return n.cache=a.set(o,c),c};return n.cache=new(Xe.Cache||xe),n}function Je(e,t){return e===t||e!=e&&t!=t}function Ge(e){return function(e){return ot(e)&&et(e)}(e)&&te.call(e,"callee")&&(!le.call(e,"callee")||ne.call(e)==i)}Xe.Cache=xe;var qe=Array.isArray;function et(e){return null!=e&&nt(e.length)&&!tt(e)}function tt(e){var t=rt(e)?ne.call(e):"";return t==f||t==p}function nt(e){return"number"==typeof e&&e>-1&&e%1==0&&e<=l}function rt(e){var t=typeof e;return!!e&&("object"==t||"function"==t)}function ot(e){return!!e&&"object"==typeof e}function at(e){return"symbol"==typeof e||ot(e)&&ne.call(e)==A}var ct,lt=F?(ct=F,function(e){return ct(e)}):function(e){return ot(e)&&nt(e.length)&&!!P[ne.call(e)]};function it(e){return et(e)?Le(e):function(e){if(!Ke(e))return ue(e);var t=[];for(var n in Object(e))te.call(e,n)&&"constructor"!=n&&t.push(n);return t}(e)}function st(e){return et(e)?Le(e,!0):function(e){if(!rt(e))return function(e){var t=[];if(null!=e)for(var n in Object(e))t.push(n);return t}(e);var t=Ke(e),n=[];for(var r in e)("constructor"!=r||!t&&te.call(e,r))&&n.push(r);return n}(e)}function ut(e){return e}function dt(){return[]}e.exports=function(e,t){return null==e?{}:function(e,t,n){for(var r=-1,o=t.length,a={};++r<o;){var c=t[r],l=e[c];n(l,c)&&(a[c]=l)}return a}(e,function(e){return function(e,t,n){var r=t(e);return qe(e)?r:M(r,n(e))}(e,st,We)}(e),function(e){return"function"==typeof e?e:null==e?ut:"object"==typeof e?qe(e)?function(e,t){return Qe(e)&&De(t)?Re(Ye(e),t):function(n){var a=function(e,t,n){var r=null==e?void 0:Ce(e,t);return void 0===r?void 0:r}(n,e);return void 0===a&&a===t?function(e,t){return null!=e&&function(e,t,n){for(var r,o=-1,a=(t=Qe(t,e)?[t]:Ie(t)).length;++o<a;){var c=Ye(t[o]);if(!(r=null!=e&&n(e,c)))break;e=e[c]}return r||!!(a=e?e.length:0)&&nt(a)&&Me(c,a)&&(qe(e)||Ge(e))}(e,t,Pe)}(n,e):Ne(t,a,void 0,r|o)}}(e[0],e[1]):function(e){var t=function(e){for(var t=it(e),n=t.length;n--;){var r=t[n],o=e[r];t[n]=[r,o,De(o)]}return t}(e);return 1==t.length&&t[0][2]?Re(t[0][0],t[0][1]):function(n){return n===e||function(e,t,n,a){var c=n.length,l=c;if(null==e)return!l;for(e=Object(e);c--;){var i=n[c];if(i[2]?i[1]!==e[i[0]]:!(i[0]in e))return!1}for(;++c<l;){var s=(i=n[c])[0],u=e[s],d=i[1];if(i[2]){if(void 0===u&&!(s in e))return!1}else{var h,f=new Oe;if(!(void 0===h?Ne(d,u,a,r|o,f):h))return!1}}return!0}(n,0,t)}}(e):Qe(t=e)?(n=Ye(t),function(e){return null==e?void 0:e[n]}):function(e){return function(t){return Ce(t,e)}}(t);var t,n}(t))}})),m={accordion:"Accordion-module_accordion__2fPUT",card:"Accordion-module_card__1iRKx",border:"Accordion-module_border__2AgQd",accordionHeader:"Accordion-module_accordionHeader__3_uK7",s:"Accordion-module_s__8gw4g",closeButton:"Accordion-module_closeButton__1Qt8U",m:"Accordion-module_m__2k6QY",l:"Accordion-module_l__gPzdT",accordionContent:"Accordion-module_accordionContent__1umso",contentWithCloseButton:"Accordion-module_contentWithCloseButton__-einM",headingContainer:"Accordion-module_headingContainer__1DzX3",accordionButtonIcon:"Accordion-module_accordionButtonIcon__MQu2J"};(0,l.s)(".Accordion-module_accordion__2fPUT{--background-color:var(--color-white);--border-color:var(--color-black-60);--header-font-color:var(--color-black-90);--header-focus-outline-color:var(--color-coat-of-arms);--content-font-color:var(--color-black-90);--content-font-size:var(--fontsize-body-m);--content-line-height:var(--lineheight-l)}.Accordion-module_accordion__2fPUT:not(.Accordion-module_card__1iRKx){border-bottom:1px solid var(--border-color)}.Accordion-module_accordion__2fPUT.Accordion-module_card__1iRKx{background-color:var(--background-color);padding-left:var(--padding-horizontal);padding-right:var(--padding-horizontal)}.Accordion-module_accordion__2fPUT.Accordion-module_border__2AgQd{border:2px solid var(--border-color)}.Accordion-module_accordionHeader__3_uK7{align-items:center;color:var(--header-font-color);display:flex;font-size:var(--header-font-size);font-weight:var(--header-font-weight);justify-content:space-between;letter-spacing:var(--header-letter-spacing);line-height:var(--header-line-height);padding-bottom:var(--padding-vertical);padding-top:var(--padding-vertical);position:relative}.Accordion-module_accordionHeader__3_uK7>div{flex:1 1 auto}.Accordion-module_s__8gw4g{--header-font-size:var(--fontsize-heading-s);--padding-vertical:var(--spacing-s);--header-font-weight:700;--header-letter-spacing:0.2px;--header-line-height:1.4;--button-size:28px;--padding-horizontal:var(--spacing-2-xs)}.Accordion-module_s__8gw4g .Accordion-module_closeButton__1Qt8U div{margin-right:var(--spacing-4-xs)}.Accordion-module_m__2k6QY{--header-font-size:var(--fontsize-heading-m);--padding-vertical:var(--spacing-m);--header-font-weight:500;--header-letter-spacing:-0.2px;--header-line-height:32px;--button-size:36px;--padding-horizontal:var(--spacing-m)}.Accordion-module_m__2k6QY .Accordion-module_closeButton__1Qt8U div{margin-right:6px}.Accordion-module_l__gPzdT{--header-font-size:var(--fontsize-heading-l);--padding-vertical:var(--spacing-l);--header-font-weight:400;--header-letter-spacing:-0.4px;--header-line-height:var(--lineheight-s);--button-size:52px;--padding-horizontal:var(--spacing-l)}.Accordion-module_l__gPzdT .Accordion-module_closeButton__1Qt8U div{margin-right:var(--spacing-xs)}.Accordion-module_accordionContent__1umso{color:var(--content-font-color);font-size:var(--content-font-size);line-height:var(--content-line-height);padding-bottom:var(--spacing-m);position:relative}.Accordion-module_accordionContent__1umso .Accordion-module_closeButton__1Qt8U{bottom:0;color:var(--content-font-color);position:absolute;right:0}.Accordion-module_contentWithCloseButton__-einM{padding-bottom:44px}.Accordion-module_headingContainer__1DzX3{align-items:center;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:auto calc(var(--button-size));width:100%}.Accordion-module_headingContainer__1DzX3:focus{outline:2px solid var(--header-focus-outline-color,transparent)}.Accordion-module_accordionButtonIcon__MQu2J{border:2px solid transparent;box-sizing:border-box;height:var(--button-size)!important;margin:auto;width:var(--button-size)!important}");const _=e=>({en:"Close",fi:"Sulje",sv:"Stäng"}[e]),b=e=>{let{border:t=!1,card:n=!1,children:o,className:c,closeButtonClassName:l,closeButton:b=!0,heading:g,headingLevel:v=2,id:y,initiallyOpen:E=!1,language:A="fi",size:j="m",style:z,theme:w}=e;const k=(0,r.useRef)(null),[x,T]=(0,r.useState)(!1),[O]=(0,r.useState)(y||a()("accordion-")),L=w&&{"--background-color":w["--background-color"],"--border-color":w["--border-color"],"--header-font-color":w["--header-font-color"],"--header-focus-outline-color":w["--header-focus-outline-color"],"--content-font-color":w["--content-font-color"],"--content-font-size":w["--content-font-size"],"--content-line-height":w["--content-line-height"]},S=p(L),C=(0,u.u)(m.accordion,Object.keys(S).length>0?S:void 0),P=w&&{"--header-font-size":w["--header-font-size"],"--padding-vertical":w["--padding-vertical"],"--padding-horizontal":w["--padding-horizontal"],"--header-font-weight":w["--header-font-weight"],"--header-letter-spacing":w["--header-letter-spacing"],"--header-line-height":w["--header-line-height"],"--button-size":w["--button-size"]},N=p(P),I=(0,u.u)(m[j],Object.keys(N).length>0?N:void 0),{isOpen:B,buttonProps:U,contentProps:Z}=(0,s.u)({initiallyOpen:E}),H=B?r.createElement(h.I,{"aria-hidden":!0,className:m.accordionButtonIcon}):r.createElement(f.I,{"aria-hidden":!0,className:m.accordionButtonIcon}),W=function(){const[e,t]=r.useState(!1);return r.useEffect((()=>{t(!0)}),[]),e}();(0,r.useEffect)((()=>{if(!W)return;const e=setTimeout((()=>{k.current.focus(),!0===x&&(T(!1),U.onClick())}),50);return()=>clearTimeout(e)}),[x]);const F=()=>{T(!0)};return r.createElement("div",{className:(0,i.c)(m.accordion,n&&m.card,n&&t&&m.border,B&&m.isOpen,m[j],C,I,c),style:z,id:O},r.createElement("div",{className:(0,i.c)(m.accordionHeader)},r.createElement("div",{role:"heading","aria-level":v,id:O+"-heading"},r.createElement("div",Object.assign({ref:k,role:"button",tabIndex:0,onKeyPress:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),U.onClick())},className:m.headingContainer,"aria-labelledby":O+"-heading"},U,x?{"aria-expanded":!1}:{}),r.createElement("span",{className:"label"},g),H))),r.createElement("div",Object.assign({},Z,{id:O+"-content",role:"region",className:(0,i.c)(m.accordionContent,n&&m.card,b&&m.contentWithCloseButton),"aria-labelledby":O+"-heading"}),o,b&&r.createElement(d.B,{"data-testid":O+"-closeButton","aria-label":_(A)+" "+g,className:(0,i.c)(m.closeButton,l),theme:"black",size:"small",onKeyPress:e=>{" "===e.key&&F()},onClick:()=>{F()},variant:"supplementary",iconRight:r.createElement(h.I,{"aria-hidden":!0,size:"xs",className:m.accordionButtonIcon})},_(A))))}},83428:function(e,t,n){n.d(t,{S:function(){return s}});var r=n(80136),o=n(67294),a=n(7444),c=n(34300),l={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,a.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const i=e=>{let{icon:t}=e;return o.createElement("span",{className:l.statusLabelIcon,"aria-hidden":"true"},t)},s=e=>{var{children:t,className:n,dataTestId:a,type:s="neutral",iconLeft:u}=e,d=(0,r._)(e,["children","className","dataTestId","type","iconLeft"]);return o.createElement("span",Object.assign({className:(0,c.c)(l.statusLabel,l[s],u&&l.statusLabelWithIcon,n),"data-testid":a},d),u&&o.createElement(i,{icon:u}),t)}},41380:function(e,t,n){n.d(t,{u:function(){return o}});var r=n(67294);const o=e=>{let{initiallyOpen:t=!1}=e;const[n,o]=(0,r.useState)(t),a=()=>{o(!0)},c=()=>{o(!1)},l=()=>{n?c():a()},i={onClick:l,"aria-expanded":n},s={};return!1===n&&(s.style={display:"none"}),{isOpen:n,openAccordion:a,closeAccordion:c,toggleAccordion:l,buttonProps:i,contentProps:s}}},3283:function(e,t,n){n.r(t);var r=n(11151),o=n(67294),a=n(66625),c=n(81074);const l=e=>{let{children:t,pageContext:n}=e;return o.createElement(c.default,{pageContext:n},t)};function i(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",p:"p",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",pre:"pre"},(0,r.ah)(),e.components),{Playground:n}=t;return n||function(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Playground",!0),o.createElement(o.Fragment,null,o.createElement(t.h2,{id:"customisation",style:{position:"relative"}},"Customisation",o.createElement(t.a,{href:"#customisation","aria-label":"customisation permalink",className:"header-anchor after"},o.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",o.createElement(t.h3,{id:"customisation-properties",style:{position:"relative"}},"Customisation properties",o.createElement(t.a,{href:"#customisation-properties","aria-label":"customisation properties permalink",className:"header-anchor after"},o.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",o.createElement(t.p,null,"You can use the ",o.createElement(t.code,null,"theme")," property to customise the component. See all available theme variables in the table below."),"\n",o.createElement(t.table,null,o.createElement(t.thead,null,o.createElement(t.tr,null,o.createElement(t.th,null,"Theme variable"),o.createElement(t.th,null,"Description"))),o.createElement(t.tbody,null,o.createElement(t.tr,null,o.createElement(t.td,null,o.createElement("code",null,"--background-color")),o.createElement(t.td,null,"Background color of the accordion.")),o.createElement(t.tr,null,o.createElement(t.td,null,o.createElement("code",null,"--header-focus-outline-color")),o.createElement(t.td,null,"Accordion header focus outline color.")),o.createElement(t.tr,null,o.createElement(t.td,null,o.createElement("code",null,"--button-size")),o.createElement(t.td,null,"Size of the angle icon.")),o.createElement(t.tr,null,o.createElement(t.td,null,o.createElement("code",null,"--content-font-color")),o.createElement(t.td,null,"Font colour of the accordion content.")),o.createElement(t.tr,null,o.createElement(t.td,null,o.createElement("code",null,"--content-font-size")),o.createElement(t.td,null,"Font size of the accordion content.")),o.createElement(t.tr,null,o.createElement(t.td,null,o.createElement("code",null,"--content-line-height")),o.createElement(t.td,null,"Line height of the accordion content.")),o.createElement(t.tr,null,o.createElement(t.td,null,o.createElement("code",null,"--header-font-color")),o.createElement(t.td,null,"Font colour of the accordion header.")),o.createElement(t.tr,null,o.createElement(t.td,null,o.createElement("code",null,"--header-font-size")),o.createElement(t.td,null,"Font size of the accodion header.")),o.createElement(t.tr,null,o.createElement(t.td,null,o.createElement("code",null,"--header-line-height")),o.createElement(t.td,null,"Line height of the accordion header.")),o.createElement(t.tr,null,o.createElement(t.td,null,o.createElement("code",null,"--padding-horizontal")),o.createElement(t.td,null,"Left and right padding of the accordion.")),o.createElement(t.tr,null,o.createElement(t.td,null,o.createElement("code",null,"--padding-vertical")),o.createElement(t.td,null,"Top and bottom padding of the accordion.")))),"\n",o.createElement(t.h3,{id:"customisation-example",style:{position:"relative"}},"Customisation example",o.createElement(t.a,{href:"#customisation-example","aria-label":"customisation example permalink",className:"header-anchor after"},o.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",o.createElement(n,{scope:{Accordion:a.A}},o.createElement(t.pre,null,o.createElement(t.code,{className:"language-jsx"},"import { Accordion } from 'hds-react';\n\n() => (\n<Accordion\n  card\n  language=\"en\"\n  heading=\"Customised accordion\"\n  headingLevel={2}\n  style={{\n    maxWidth: '360px'\n  }}\n  theme={{\n    '--background-color': 'var(--color-bus)',\n    '--header-focus-outline-color': 'var(--color-white)',\n    '--button-size': '28px',\n    '--content-font-color': 'var(--color-white)',\n    '--content-font-size': 'var(--fontsize-body-m)',\n    '--content-line-height': 'var(--lineheight-l)',\n    '--header-font-color': 'var(--color-white)',\n    '--header-font-size': 'var(--fontsize-heading-s)',\n    '--header-line-height': 'var(--lineheight-s)',\n    '--padding-horizontal': 'var(--spacing-m)',\n    '--padding-vertical': '20px'\n  }}\n>\n  In order to customise the accordion component, use the theme property.\n</Accordion>)\n"))))}t.default=function(e){return void 0===e&&(e={}),o.createElement(l,e,o.createElement(i,e))}},81074:function(e,t,n){n.r(t);var r=n(11151),o=n(67294),a=n(83428),c=n(57674),l=n(89482),i=(n(18607),n(26127));function s(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,r.ah)(),e.components);return i.Z||u("PageTabs",!1),i.Z.Tab||u("PageTabs.Tab",!0),i.Z.TabList||u("PageTabs.TabList",!0),i.Z.TabPanel||u("PageTabs.TabPanel",!0),o.createElement(o.Fragment,null,o.createElement(t.h1,{id:"accordion",style:{position:"relative"}},"Accordion",o.createElement(t.a,{href:"#accordion","aria-label":"accordion permalink",className:"header-anchor after"},o.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",o.createElement("div",{class:"status-label-description"},o.createElement(a.S,{type:"info"},"Stable"),o.createElement(a.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),o.createElement(c.Z)),"\n",o.createElement(l.Z,null,"Accordions can be used to hide and reveal information. When used correctly, they are a good way to make a higher amount of information easier to digest for the user."),"\n",o.createElement(i.Z,{pageContext:e.pageContext},o.createElement(i.Z.TabList,null,o.createElement(i.Z.Tab,{href:"/"},"Usage"),o.createElement(i.Z.Tab,{href:"/code"},"Code"),o.createElement(i.Z.Tab,{href:"/accessibility"},"Accessibility"),o.createElement(i.Z.Tab,{href:"/customisation"},"Customisation")),o.createElement(i.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,r.ah)(),e.components);return t?o.createElement(t,e,o.createElement(s,e)):s(e)}},89482:function(e,t,n){var r=n(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:n="var(--fontsize-body-xl)",style:o={},children:a}=e;return r.createElement("p",{style:{fontSize:n,color:t,maxWidth:600,...o}},a)}},26127:function(e,t,n){var r=n(67294),o=n(14160),a=n(94671);const c="PageTabList",l="PageTabPanel",i="PageTab",s=e=>{var t;let{pageContext:n,children:s}=e;const u=n.frontmatter.slug,d=Array.isArray(s)?s:[s],h=d.find((e=>(0,r.isValidElement)(e)&&e.type.componentName===c)),f=d.find((e=>(0,r.isValidElement)(e)&&e.type.componentName===l)),p=null===(t=h.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===i)),m=p.findIndex((e=>u.endsWith(e.props.href))),_=-1===m?0:m,b=0===_?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return r.createElement(a.a,{initiallyActiveTab:_},r.createElement(a.a.TabList,{className:"page-tabs-list"},p.map((e=>r.createElement(a.a.Tab,{key:e.props.href,onClick:()=>(0,o.navigate)(""+("/"===e.props.href?b:b+e.props.href))},e.props.children)))),p.map(((e,t)=>r.createElement(a.a.TabPanel,{key:e.props.href},_===t?f.props.children:r.createElement("div",null)))))},u=e=>{let{children:t}=e;return r.createElement(a.a.TabList,null,t)};u.componentName=c;const d=e=>{let{href:t,slug:n,children:o}=e;return r.createElement(a.a.Tab,null,o)};d.componentName=i;const h=e=>{let{children:t}=e;return r.createElement(a.a.TabPanel,null,t)};h.componentName=l,s.TabList=u,s.Tab=d,s.TabPanel=h,t.Z=s},57674:function(e,t,n){var r=n(67294),o=n(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return r.createElement(o.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},r.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>r.createElement("li",{key:t},r.createElement("span",{className:"status-name"},t),r.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-accordion-index-mdx-fd8a3c41cd86641ad2f9.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-accordion-index-mdx-fd8a3c41cd86641ad2f9.js
new file mode 100644
index 00000000000..1c1c02c96b8
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-accordion-index-mdx-fd8a3c41cd86641ad2f9.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[4918],{66625:function(e,t,n){n.d(t,{A:function(){return b}});var r=n(67294),a=n(5871),o=n.n(a),i=n(26917),c=n(7444),l=n(34300),s=n(41380),d=n(97640),u=n(17882),h=n(56924),p=n(44961),m=(0,i.c)((function(e,t){var n="__lodash_hash_undefined__",r=1,a=2,o=1/0,c=9007199254740991,l="[object Arguments]",s="[object Array]",d="[object Boolean]",u="[object Date]",h="[object Error]",p="[object Function]",m="[object GeneratorFunction]",f="[object Map]",g="[object Number]",b="[object Object]",v="[object Promise]",_="[object RegExp]",y="[object Set]",E="[object String]",w="[object Symbol]",A="[object WeakMap]",x="[object ArrayBuffer]",k="[object DataView]",z=/\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/,T=/^\w*$/,j=/^\./,C=/[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g,O=/\\(\\)?/g,L=/^\[object .+?Constructor\]$/,S=/^(?:0|[1-9]\d*)$/,P={};P["[object Float32Array]"]=P["[object Float64Array]"]=P["[object Int8Array]"]=P["[object Int16Array]"]=P["[object Int32Array]"]=P["[object Uint8Array]"]=P["[object Uint8ClampedArray]"]=P["[object Uint16Array]"]=P["[object Uint32Array]"]=!0,P[l]=P[s]=P[x]=P[d]=P[k]=P[u]=P[h]=P[p]=P[f]=P[g]=P[b]=P[_]=P[y]=P[E]=P[A]=!1;var I="object"==typeof i.a&&i.a&&i.a.Object===Object&&i.a,B="object"==typeof self&&self&&self.Object===Object&&self,H=I||B||Function("return this")(),N=t&&!t.nodeType&&t,W=N&&e&&!e.nodeType&&e,M=W&&W.exports===N&&I.process,U=function(){try{return M&&M.binding("util")}catch(e){}}(),D=U&&U.isTypedArray;function Z(e,t){for(var n=-1,r=t.length,a=e.length;++n<r;)e[a+n]=t[n];return e}function Q(e,t){for(var n=-1,r=e?e.length:0;++n<r;)if(t(e[n],n,e))return!0;return!1}function F(e){var t=!1;if(null!=e&&"function"!=typeof e.toString)try{t=!!(e+"")}catch(e){}return t}function K(e){var t=-1,n=Array(e.size);return e.forEach((function(e,r){n[++t]=[r,e]})),n}function R(e,t){return function(n){return e(t(n))}}function $(e){var t=-1,n=Array(e.size);return e.forEach((function(e){n[++t]=e})),n}var Y,q=Array.prototype,J=Function.prototype,V=Object.prototype,X=H["__core-js_shared__"],G=(Y=/[^.]+$/.exec(X&&X.keys&&X.keys.IE_PROTO||""))?"Symbol(src)_1."+Y:"",ee=J.toString,te=V.hasOwnProperty,ne=V.toString,re=RegExp("^"+ee.call(te).replace(/[\\^$.*+?()[\]{}|]/g,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$"),ae=H.Symbol,oe=H.Uint8Array,ie=R(Object.getPrototypeOf,Object),ce=V.propertyIsEnumerable,le=q.splice,se=Object.getOwnPropertySymbols,de=R(Object.keys,Object),ue=We(H,"DataView"),he=We(H,"Map"),pe=We(H,"Promise"),me=We(H,"Set"),fe=We(H,"WeakMap"),ge=We(Object,"create"),be=qe(ue),ve=qe(he),_e=qe(pe),ye=qe(me),Ee=qe(fe),we=ae?ae.prototype:void 0,Ae=we?we.valueOf:void 0,xe=we?we.toString:void 0;function ke(e){var t=-1,n=e?e.length:0;for(this.clear();++t<n;){var r=e[t];this.set(r[0],r[1])}}function ze(e){var t=-1,n=e?e.length:0;for(this.clear();++t<n;){var r=e[t];this.set(r[0],r[1])}}function Te(e){var t=-1,n=e?e.length:0;for(this.clear();++t<n;){var r=e[t];this.set(r[0],r[1])}}function je(e){var t=-1,n=e?e.length:0;for(this.__data__=new Te;++t<n;)this.add(e[t])}function Ce(e){this.__data__=new ze(e)}function Oe(e,t){var n=Ge(e)||Xe(e)?function(e,t){for(var n=-1,r=Array(e);++n<e;)r[n]=t(n);return r}(e.length,String):[],r=n.length,a=!!r;for(var o in e)!t&&!te.call(e,o)||a&&("length"==o||Ze(o,r))||n.push(o);return n}function Le(e,t){for(var n=e.length;n--;)if(Ve(e[n][0],t))return n;return-1}function Se(e,t){for(var n=0,r=(t=Qe(t,e)?[t]:Be(t)).length;null!=e&&n<r;)e=e[Ye(t[n++])];return n&&n==r?e:void 0}function Pe(e,t){return null!=e&&t in Object(e)}function Ie(e,t,n,o,i){return e===t||(null==e||null==t||!rt(e)&&!at(t)?e!=e&&t!=t:function(e,t,n,o,i,c){var p=Ge(e),m=Ge(t),v=s,A=s;p||(v=(v=De(e))==l?b:v),m||(A=(A=De(t))==l?b:A);var z=v==b&&!F(e),T=A==b&&!F(t),j=v==A;if(j&&!z)return c||(c=new Ce),p||ct(e)?He(e,t,n,o,i,c):function(e,t,n,o,i,c,l){switch(n){case k:if(e.byteLength!=t.byteLength||e.byteOffset!=t.byteOffset)return!1;e=e.buffer,t=t.buffer;case x:return!(e.byteLength!=t.byteLength||!o(new oe(e),new oe(t)));case d:case u:case g:return Ve(+e,+t);case h:return e.name==t.name&&e.message==t.message;case _:case E:return e==t+"";case f:var s=K;case y:var p=c&a;if(s||(s=$),e.size!=t.size&&!p)return!1;var m=l.get(e);if(m)return m==t;c|=r,l.set(e,t);var b=He(s(e),s(t),o,i,c,l);return l.delete(e),b;case w:if(Ae)return Ae.call(e)==Ae.call(t)}return!1}(e,t,v,n,o,i,c);if(!(i&a)){var C=z&&te.call(e,"__wrapped__"),O=T&&te.call(t,"__wrapped__");if(C||O){var L=C?e.value():e,S=O?t.value():t;return c||(c=new Ce),n(L,S,o,i,c)}}return!!j&&(c||(c=new Ce),function(e,t,n,r,o,i){var c=o&a,l=lt(e),s=l.length;if(s!=lt(t).length&&!c)return!1;for(var d=s;d--;){var u=l[d];if(!(c?u in t:te.call(t,u)))return!1}var h=i.get(e);if(h&&i.get(t))return h==t;var p=!0;i.set(e,t),i.set(t,e);for(var m=c;++d<s;){var f=e[u=l[d]],g=t[u];if(r)var b=c?r(g,f,u,t,e,i):r(f,g,u,e,t,i);if(!(void 0===b?f===g||n(f,g,r,o,i):b)){p=!1;break}m||(m="constructor"==u)}if(p&&!m){var v=e.constructor,_=t.constructor;v==_||!("constructor"in e)||!("constructor"in t)||"function"==typeof v&&v instanceof v&&"function"==typeof _&&_ instanceof _||(p=!1)}return i.delete(e),i.delete(t),p}(e,t,n,o,i,c))}(e,t,Ie,n,o,i))}function Be(e){return Ge(e)?e:$e(e)}function He(e,t,n,o,i,c){var l=i&a,s=e.length,d=t.length;if(s!=d&&!(l&&d>s))return!1;var u=c.get(e);if(u&&c.get(t))return u==t;var h=-1,p=!0,m=i&r?new je:void 0;for(c.set(e,t),c.set(t,e);++h<s;){var f=e[h],g=t[h];if(o)var b=l?o(g,f,h,t,e,c):o(f,g,h,e,t,c);if(void 0!==b){if(b)continue;p=!1;break}if(m){if(!Q(t,(function(e,t){if(!m.has(t)&&(f===e||n(f,e,o,i,c)))return m.add(t)}))){p=!1;break}}else if(f!==g&&!n(f,g,o,i,c)){p=!1;break}}return c.delete(e),c.delete(t),p}function Ne(e,t){var n,r,a=e.__data__;return("string"==(r=typeof(n=t))||"number"==r||"symbol"==r||"boolean"==r?"__proto__"!==n:null===n)?a["string"==typeof t?"string":"hash"]:a.map}function We(e,t){var n=function(e,t){return null==e?void 0:e[t]}(e,t);return function(e){return!(!rt(e)||(t=e,G&&G in t))&&(tt(e)||F(e)?re:L).test(qe(e));var t}(n)?n:void 0}ke.prototype.clear=function(){this.__data__=ge?ge(null):{}},ke.prototype.delete=function(e){return this.has(e)&&delete this.__data__[e]},ke.prototype.get=function(e){var t=this.__data__;if(ge){var r=t[e];return r===n?void 0:r}return te.call(t,e)?t[e]:void 0},ke.prototype.has=function(e){var t=this.__data__;return ge?void 0!==t[e]:te.call(t,e)},ke.prototype.set=function(e,t){return this.__data__[e]=ge&&void 0===t?n:t,this},ze.prototype.clear=function(){this.__data__=[]},ze.prototype.delete=function(e){var t=this.__data__,n=Le(t,e);return!(n<0||(n==t.length-1?t.pop():le.call(t,n,1),0))},ze.prototype.get=function(e){var t=this.__data__,n=Le(t,e);return n<0?void 0:t[n][1]},ze.prototype.has=function(e){return Le(this.__data__,e)>-1},ze.prototype.set=function(e,t){var n=this.__data__,r=Le(n,e);return r<0?n.push([e,t]):n[r][1]=t,this},Te.prototype.clear=function(){this.__data__={hash:new ke,map:new(he||ze),string:new ke}},Te.prototype.delete=function(e){return Ne(this,e).delete(e)},Te.prototype.get=function(e){return Ne(this,e).get(e)},Te.prototype.has=function(e){return Ne(this,e).has(e)},Te.prototype.set=function(e,t){return Ne(this,e).set(e,t),this},je.prototype.add=je.prototype.push=function(e){return this.__data__.set(e,n),this},je.prototype.has=function(e){return this.__data__.has(e)},Ce.prototype.clear=function(){this.__data__=new ze},Ce.prototype.delete=function(e){return this.__data__.delete(e)},Ce.prototype.get=function(e){return this.__data__.get(e)},Ce.prototype.has=function(e){return this.__data__.has(e)},Ce.prototype.set=function(e,t){var n=this.__data__;if(n instanceof ze){var r=n.__data__;if(!he||r.length<199)return r.push([e,t]),this;n=this.__data__=new Te(r)}return n.set(e,t),this};var Me=se?R(se,Object):ut,Ue=se?function(e){for(var t=[];e;)Z(t,Me(e)),e=ie(e);return t}:ut,De=function(e){return ne.call(e)};function Ze(e,t){return!!(t=null==t?c:t)&&("number"==typeof e||S.test(e))&&e>-1&&e%1==0&&e<t}function Qe(e,t){if(Ge(e))return!1;var n=typeof e;return!("number"!=n&&"symbol"!=n&&"boolean"!=n&&null!=e&&!ot(e))||T.test(e)||!z.test(e)||null!=t&&e in Object(t)}function Fe(e){var t=e&&e.constructor;return e===("function"==typeof t&&t.prototype||V)}function Ke(e){return e==e&&!rt(e)}function Re(e,t){return function(n){return null!=n&&n[e]===t&&(void 0!==t||e in Object(n))}}(ue&&De(new ue(new ArrayBuffer(1)))!=k||he&&De(new he)!=f||pe&&De(pe.resolve())!=v||me&&De(new me)!=y||fe&&De(new fe)!=A)&&(De=function(e){var t=ne.call(e),n=t==b?e.constructor:void 0,r=n?qe(n):void 0;if(r)switch(r){case be:return k;case ve:return f;case _e:return v;case ye:return y;case Ee:return A}return t});var $e=Je((function(e){var t;e=null==(t=e)?"":function(e){if("string"==typeof e)return e;if(ot(e))return xe?xe.call(e):"";var t=e+"";return"0"==t&&1/e==-o?"-0":t}(t);var n=[];return j.test(e)&&n.push(""),e.replace(C,(function(e,t,r,a){n.push(r?a.replace(O,"$1"):t||e)})),n}));function Ye(e){if("string"==typeof e||ot(e))return e;var t=e+"";return"0"==t&&1/e==-o?"-0":t}function qe(e){if(null!=e){try{return ee.call(e)}catch(e){}try{return e+""}catch(e){}}return""}function Je(e,t){if("function"!=typeof e||t&&"function"!=typeof t)throw new TypeError("Expected a function");var n=function(){var r=arguments,a=t?t.apply(this,r):r[0],o=n.cache;if(o.has(a))return o.get(a);var i=e.apply(this,r);return n.cache=o.set(a,i),i};return n.cache=new(Je.Cache||Te),n}function Ve(e,t){return e===t||e!=e&&t!=t}function Xe(e){return function(e){return at(e)&&et(e)}(e)&&te.call(e,"callee")&&(!ce.call(e,"callee")||ne.call(e)==l)}Je.Cache=Te;var Ge=Array.isArray;function et(e){return null!=e&&nt(e.length)&&!tt(e)}function tt(e){var t=rt(e)?ne.call(e):"";return t==p||t==m}function nt(e){return"number"==typeof e&&e>-1&&e%1==0&&e<=c}function rt(e){var t=typeof e;return!!e&&("object"==t||"function"==t)}function at(e){return!!e&&"object"==typeof e}function ot(e){return"symbol"==typeof e||at(e)&&ne.call(e)==w}var it,ct=D?(it=D,function(e){return it(e)}):function(e){return at(e)&&nt(e.length)&&!!P[ne.call(e)]};function lt(e){return et(e)?Oe(e):function(e){if(!Fe(e))return de(e);var t=[];for(var n in Object(e))te.call(e,n)&&"constructor"!=n&&t.push(n);return t}(e)}function st(e){return et(e)?Oe(e,!0):function(e){if(!rt(e))return function(e){var t=[];if(null!=e)for(var n in Object(e))t.push(n);return t}(e);var t=Fe(e),n=[];for(var r in e)("constructor"!=r||!t&&te.call(e,r))&&n.push(r);return n}(e)}function dt(e){return e}function ut(){return[]}e.exports=function(e,t){return null==e?{}:function(e,t,n){for(var r=-1,a=t.length,o={};++r<a;){var i=t[r],c=e[i];n(c,i)&&(o[i]=c)}return o}(e,function(e){return function(e,t,n){var r=t(e);return Ge(e)?r:Z(r,n(e))}(e,st,Ue)}(e),function(e){return"function"==typeof e?e:null==e?dt:"object"==typeof e?Ge(e)?function(e,t){return Qe(e)&&Ke(t)?Re(Ye(e),t):function(n){var o=function(e,t,n){var r=null==e?void 0:Se(e,t);return void 0===r?void 0:r}(n,e);return void 0===o&&o===t?function(e,t){return null!=e&&function(e,t,n){for(var r,a=-1,o=(t=Qe(t,e)?[t]:Be(t)).length;++a<o;){var i=Ye(t[a]);if(!(r=null!=e&&n(e,i)))break;e=e[i]}return r||!!(o=e?e.length:0)&&nt(o)&&Ze(i,o)&&(Ge(e)||Xe(e))}(e,t,Pe)}(n,e):Ie(t,o,void 0,r|a)}}(e[0],e[1]):function(e){var t=function(e){for(var t=lt(e),n=t.length;n--;){var r=t[n],a=e[r];t[n]=[r,a,Ke(a)]}return t}(e);return 1==t.length&&t[0][2]?Re(t[0][0],t[0][1]):function(n){return n===e||function(e,t,n,o){var i=n.length,c=i;if(null==e)return!c;for(e=Object(e);i--;){var l=n[i];if(l[2]?l[1]!==e[l[0]]:!(l[0]in e))return!1}for(;++i<c;){var s=(l=n[i])[0],d=e[s],u=l[1];if(l[2]){if(void 0===d&&!(s in e))return!1}else{var h,p=new Ce;if(!(void 0===h?Ie(u,d,o,r|a,p):h))return!1}}return!0}(n,0,t)}}(e):Qe(t=e)?(n=Ye(t),function(e){return null==e?void 0:e[n]}):function(e){return function(t){return Se(t,e)}}(t);var t,n}(t))}})),f={accordion:"Accordion-module_accordion__2fPUT",card:"Accordion-module_card__1iRKx",border:"Accordion-module_border__2AgQd",accordionHeader:"Accordion-module_accordionHeader__3_uK7",s:"Accordion-module_s__8gw4g",closeButton:"Accordion-module_closeButton__1Qt8U",m:"Accordion-module_m__2k6QY",l:"Accordion-module_l__gPzdT",accordionContent:"Accordion-module_accordionContent__1umso",contentWithCloseButton:"Accordion-module_contentWithCloseButton__-einM",headingContainer:"Accordion-module_headingContainer__1DzX3",accordionButtonIcon:"Accordion-module_accordionButtonIcon__MQu2J"};(0,c.s)(".Accordion-module_accordion__2fPUT{--background-color:var(--color-white);--border-color:var(--color-black-60);--header-font-color:var(--color-black-90);--header-focus-outline-color:var(--color-coat-of-arms);--content-font-color:var(--color-black-90);--content-font-size:var(--fontsize-body-m);--content-line-height:var(--lineheight-l)}.Accordion-module_accordion__2fPUT:not(.Accordion-module_card__1iRKx){border-bottom:1px solid var(--border-color)}.Accordion-module_accordion__2fPUT.Accordion-module_card__1iRKx{background-color:var(--background-color);padding-left:var(--padding-horizontal);padding-right:var(--padding-horizontal)}.Accordion-module_accordion__2fPUT.Accordion-module_border__2AgQd{border:2px solid var(--border-color)}.Accordion-module_accordionHeader__3_uK7{align-items:center;color:var(--header-font-color);display:flex;font-size:var(--header-font-size);font-weight:var(--header-font-weight);justify-content:space-between;letter-spacing:var(--header-letter-spacing);line-height:var(--header-line-height);padding-bottom:var(--padding-vertical);padding-top:var(--padding-vertical);position:relative}.Accordion-module_accordionHeader__3_uK7>div{flex:1 1 auto}.Accordion-module_s__8gw4g{--header-font-size:var(--fontsize-heading-s);--padding-vertical:var(--spacing-s);--header-font-weight:700;--header-letter-spacing:0.2px;--header-line-height:1.4;--button-size:28px;--padding-horizontal:var(--spacing-2-xs)}.Accordion-module_s__8gw4g .Accordion-module_closeButton__1Qt8U div{margin-right:var(--spacing-4-xs)}.Accordion-module_m__2k6QY{--header-font-size:var(--fontsize-heading-m);--padding-vertical:var(--spacing-m);--header-font-weight:500;--header-letter-spacing:-0.2px;--header-line-height:32px;--button-size:36px;--padding-horizontal:var(--spacing-m)}.Accordion-module_m__2k6QY .Accordion-module_closeButton__1Qt8U div{margin-right:6px}.Accordion-module_l__gPzdT{--header-font-size:var(--fontsize-heading-l);--padding-vertical:var(--spacing-l);--header-font-weight:400;--header-letter-spacing:-0.4px;--header-line-height:var(--lineheight-s);--button-size:52px;--padding-horizontal:var(--spacing-l)}.Accordion-module_l__gPzdT .Accordion-module_closeButton__1Qt8U div{margin-right:var(--spacing-xs)}.Accordion-module_accordionContent__1umso{color:var(--content-font-color);font-size:var(--content-font-size);line-height:var(--content-line-height);padding-bottom:var(--spacing-m);position:relative}.Accordion-module_accordionContent__1umso .Accordion-module_closeButton__1Qt8U{bottom:0;color:var(--content-font-color);position:absolute;right:0}.Accordion-module_contentWithCloseButton__-einM{padding-bottom:44px}.Accordion-module_headingContainer__1DzX3{align-items:center;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:auto calc(var(--button-size));width:100%}.Accordion-module_headingContainer__1DzX3:focus{outline:2px solid var(--header-focus-outline-color,transparent)}.Accordion-module_accordionButtonIcon__MQu2J{border:2px solid transparent;box-sizing:border-box;height:var(--button-size)!important;margin:auto;width:var(--button-size)!important}");const g=e=>({en:"Close",fi:"Sulje",sv:"Stäng"}[e]),b=e=>{let{border:t=!1,card:n=!1,children:a,className:i,closeButtonClassName:c,closeButton:b=!0,heading:v,headingLevel:_=2,id:y,initiallyOpen:E=!1,language:w="fi",size:A="m",style:x,theme:k}=e;const z=(0,r.useRef)(null),[T,j]=(0,r.useState)(!1),[C]=(0,r.useState)(y||o()("accordion-")),O=k&&{"--background-color":k["--background-color"],"--border-color":k["--border-color"],"--header-font-color":k["--header-font-color"],"--header-focus-outline-color":k["--header-focus-outline-color"],"--content-font-color":k["--content-font-color"],"--content-font-size":k["--content-font-size"],"--content-line-height":k["--content-line-height"]},L=m(O),S=(0,d.u)(f.accordion,Object.keys(L).length>0?L:void 0),P=k&&{"--header-font-size":k["--header-font-size"],"--padding-vertical":k["--padding-vertical"],"--padding-horizontal":k["--padding-horizontal"],"--header-font-weight":k["--header-font-weight"],"--header-letter-spacing":k["--header-letter-spacing"],"--header-line-height":k["--header-line-height"],"--button-size":k["--button-size"]},I=m(P),B=(0,d.u)(f[A],Object.keys(I).length>0?I:void 0),{isOpen:H,buttonProps:N,contentProps:W}=(0,s.u)({initiallyOpen:E}),M=H?r.createElement(h.I,{"aria-hidden":!0,className:f.accordionButtonIcon}):r.createElement(p.I,{"aria-hidden":!0,className:f.accordionButtonIcon}),U=function(){const[e,t]=r.useState(!1);return r.useEffect((()=>{t(!0)}),[]),e}();(0,r.useEffect)((()=>{if(!U)return;const e=setTimeout((()=>{z.current.focus(),!0===T&&(j(!1),N.onClick())}),50);return()=>clearTimeout(e)}),[T]);const D=()=>{j(!0)};return r.createElement("div",{className:(0,l.c)(f.accordion,n&&f.card,n&&t&&f.border,H&&f.isOpen,f[A],S,B,i),style:x,id:C},r.createElement("div",{className:(0,l.c)(f.accordionHeader)},r.createElement("div",{role:"heading","aria-level":_,id:C+"-heading"},r.createElement("div",Object.assign({ref:z,role:"button",tabIndex:0,onKeyPress:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),N.onClick())},className:f.headingContainer,"aria-labelledby":C+"-heading"},N,T?{"aria-expanded":!1}:{}),r.createElement("span",{className:"label"},v),M))),r.createElement("div",Object.assign({},W,{id:C+"-content",role:"region",className:(0,l.c)(f.accordionContent,n&&f.card,b&&f.contentWithCloseButton),"aria-labelledby":C+"-heading"}),a,b&&r.createElement(u.B,{"data-testid":C+"-closeButton","aria-label":g(w)+" "+v,className:(0,l.c)(f.closeButton,c),theme:"black",size:"small",onKeyPress:e=>{" "===e.key&&D()},onClick:()=>{D()},variant:"supplementary",iconRight:r.createElement(h.I,{"aria-hidden":!0,size:"xs",className:f.accordionButtonIcon})},g(w))))}},45433:function(e,t,n){n.d(t,{C:function(){return s}});var r=n(80136),a=n(67294),o=n(7444),i=n(34300),c=n(97640),l="Card-module_card__1WbKx";(0,o.s)(".card_hds-card__227qQ{--background-color:var(--color-white);--border-color:var(--color-black-90);--color:var(--color-black-90);--border-width:2px;--padding-horizontal:var(--spacing-l);--padding-vertical:var(--spacing-m);background-color:var(--background-color);color:var(--color);padding:var(--padding-vertical) var(--padding-horizontal)}.card_hds-card--border__c2dBc{border:var(--border-width) solid var(--border-color)}.card_hds-card--box-shadow__1LWxe{box-shadow:var(--box-shadow-m)}.card_hds-card__body__M27Up{display:grid;grid-gap:var(--spacing-s);gap:var(--spacing-s);margin-bottom:var(--spacing-l)}.card_hds-card__body__M27Up:last-child{margin-bottom:0}.card_hds-card__text__n7A0r{font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.Card-module_card__1WbKx{--background-color:var(--color-white);--border-color:var(--color-black-90);--color:var(--color-black-90);--border-width:2px;--padding-horizontal:var(--spacing-l);--padding-vertical:var(--spacing-m);background-color:var(--background-color);color:var(--color);padding:var(--padding-vertical) var(--padding-horizontal)}");const s=e=>{var{border:t,heading:n,headingAriaLevel:o=2,boxShadow:s=!1,text:d,className:u,theme:h,children:p}=e,m=(0,r._)(e,["border","heading","headingAriaLevel","boxShadow","text","className","theme","children"]);const f=(0,c.u)(l,h),g=!!n||!!d;return a.createElement("div",Object.assign({className:(0,i.c)(l,t&&"card_hds-card--border__c2dBc",s&&"Card-module_boxShadow__2-bIH card_hds-card--box-shadow__1LWxe",f,u),role:"region"},m),g&&a.createElement("div",{className:"Card-module_body__WJ4t2 card_hds-card__body__M27Up"},n&&a.createElement("div",{className:"heading-m",role:"heading","aria-level":o},n),d&&a.createElement("div",{className:"Card-module_text__28deG card_hds-card__text__n7A0r"},d)),p)}},41380:function(e,t,n){n.d(t,{u:function(){return a}});var r=n(67294);const a=e=>{let{initiallyOpen:t=!1}=e;const[n,a]=(0,r.useState)(t),o=()=>{a(!0)},i=()=>{a(!1)},c=()=>{n?i():o()},l={onClick:c,"aria-expanded":n},s={};return!1===n&&(s.style={display:"none"}),{isOpen:n,openAccordion:o,closeAccordion:i,toggleAccordion:c,buttonProps:l,contentProps:s}}},56037:function(e,t,n){n.r(t),n.d(t,{AccordionExample:function(){return m}});var r=n(11151),a=n(67294),o=n(41380),i=n(56924),c=n(44961),l=n(17882),s=n(45433),d=n(74458),u=n(66625),h=n(81074);const p=e=>{let{children:t,pageContext:n}=e;return a.createElement(h.default,{pageContext:n},t)},m=()=>{const{isOpen:e,buttonProps:t,contentProps:n}=(0,o.u)({initiallyOpen:!1}),r=e?a.createElement(i.I,{"aria-hidden":!0}):a.createElement(c.I,{"aria-hidden":!0});return a.createElement(a.Fragment,null,a.createElement(l.B,Object.assign({iconLeft:r},t),"Advanced filters"),a.createElement(s.C,Object.assign({border:!0,"aria-label":"Advanced filters",style:{marginTop:"var(--spacing-m)"}},n),a.createElement(d.b,{multiselect:!0,label:"Filter by event category",placeholder:"No selected categories",options:[{label:"Culture & arts"},{label:"Sports"},{label:"Museums"},{label:"Music"}],clearButtonAriaLabel:"Clear all selections",selectedItemRemoveButtonAriaLabel:"Remove",style:{maxWidth:"360px"}}),a.createElement(d.b,{multiselect:!0,label:"Filter by event location",placeholder:"No selected locations",options:[{label:"Haaga"},{label:"Herttoniemi"},{label:"Kallio"},{label:"Kamppi"},{label:"Laajasalo"},{label:"Lauttasaari"},{label:"Mellunkylä"},{label:"Pasila"}],clearButtonAriaLabel:"Clear all selections",selectedItemRemoveButtonAriaLabel:"Remove",style:{maxWidth:"360px",marginTop:"var(--spacing-s)"}})))};function f(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",p:"p",ul:"ul",li:"li",strong:"strong",code:"code",h4:"h4"},(0,r.ah)(),e.components),{PlaygroundPreview:n,InternalLink:o}=t;return o||g("InternalLink",!0),n||g("PlaygroundPreview",!0),a.createElement(a.Fragment,null,a.createElement(t.h2,{id:"usage",style:{position:"relative"}},"Usage",a.createElement(t.a,{href:"#usage","aria-label":"usage permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.h3,{id:"example",style:{position:"relative"}},"Example",a.createElement(t.a,{href:"#example","aria-label":"example permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(n,null,a.createElement(u.A,{heading:"How to publish data?",language:"en",style:{maxWidth:"360px"}},a.createElement(t.p,null,"To publish your data, open your profile settings and click the button 'Publish'."))),"\n",a.createElement(t.h3,{id:"principles",style:{position:"relative"}},"Principles",a.createElement(t.a,{href:"#principles","aria-label":"principles permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.ul,null,"\n",a.createElement(t.li,null,"Use accordions to allow the user to quickly glance at the information and then choose to open sections that are interesting to them."),"\n",a.createElement(t.li,null,a.createElement(t.strong,null,"Accordions must be given a header that describes the accordion content.")," This header also acts as the label for the expand button. The header level can be chosen depending on the structure of the page.","\n",a.createElement(t.ul,null,"\n",a.createElement(t.li,null,"The ",a.createElement(t.code,null,"headingLevel")," given to the Accordion should be higher than the header in the page content preceeding it (if there is one). For example if the Accordion is nested inside content with a header ",a.createElement(t.code,null,"h2")," then the ",a.createElement(t.code,null,"headingLevel")," for the Accordion should be 3."),"\n"),"\n"),"\n",a.createElement(t.li,null,a.createElement(t.strong,null,"Do not put essential or must-read information inside accordions.")," If the user is expected to open all of the accordions while using the service, then it is likely that the information should not be inside accordions.","\n",a.createElement(t.ul,null,"\n",a.createElement(t.li,null,"Accordions work well when the user usually needs only part of the information. You may also consider placing parts of lower importance inside accordions while the most important parts are always visible."),"\n"),"\n"),"\n",a.createElement(t.li,null,"By default, accordions include a close button that is visible at the bottom of an expanded accordion. This is meant to allow the user to close the accordion quickly if needed.","\n",a.createElement(t.ul,null,"\n",a.createElement(t.li,null,"The close button can be hidden with the ",a.createElement(t.code,null,"closeButton")," property. While it is recommended to include the button, it can be left out in accordions with very little content."),"\n"),"\n"),"\n",a.createElement(t.li,null,"Do not use accordions to create step-by-step forms. You must not expect that the user opens all accordions in a specific order."),"\n",a.createElement(t.li,null,"It is recommended to have accordions closed when the page is loaded.","\n",a.createElement(t.ul,null,"\n",a.createElement(t.li,null,"If you need to have the accordion initially open, you can use the ",a.createElement(t.code,null,"initiallyOpen")," property to achieve this."),"\n",a.createElement(t.li,null,"Having an accordion initially open could be needed e.g. when the user returns to a page and you want to retain accordions' states."),"\n",a.createElement(t.li,null,"Accordions should initially be closed when the page is loaded."),"\n"),"\n"),"\n",a.createElement(t.li,null,"Expanding or closing the accordion should only affect the related accordion area. You also should not auto-close or auto-open accordions."),"\n"),"\n",a.createElement(t.h3,{id:"variations",style:{position:"relative"}},"Variations",a.createElement(t.a,{href:"#variations","aria-label":"variations permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.h4,{id:"default",style:{position:"relative"}},"Default",a.createElement(t.a,{href:"#default","aria-label":"default permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.p,null,"Basic HDS Accordions provide two different visuals to choose from. These implementations are easy to take into use if you do not need any special functionality or styling."),"\n",a.createElement(t.p,null,"This style is visually less distracting and it works well when there are multiple accordions one below another or nearby."),"\n",a.createElement(n,null,a.createElement(u.A,{heading:"How to publish data?",language:"en",style:{maxWidth:"360px"}},a.createElement(t.p,null,"To publish your data, open your profile settings and click the button 'Publish'."))),"\n",a.createElement(t.h4,{id:"with-a-card",style:{position:"relative"}},"With a card",a.createElement(t.a,{href:"#with-a-card","aria-label":"with a card permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.p,null,"You can also use HDS Cards as a container for your Accordions. Cards offer the same customizability options as default HDS Cards. To learn more about Cards and their customization, refer to ",a.createElement(o,{href:"/components/card"},"HDS Card documentation.")),"\n",a.createElement(t.p,null,"If you have multiple accordions one below another or many accordions in the same view, consider using the visually more light ",a.createElement(t.a,{href:"#default"},"default styling variant")," instead of this one. If stacking Accordions in a Card with borders, use the same sized variant for all and remove the top borders after the 1st Accordion as in ",a.createElement(o,{href:"/components/accordion/code#stacked-accordions"},"stacked Accordions example"),"."),"\n",a.createElement(n,null,a.createElement(u.A,{card:!0,border:!0,heading:"How to publish data?",language:"en",style:{maxWidth:"360px"}},a.createElement(t.p,null,"To publish your data, open your profile settings and click the button 'Publish'."))),"\n",a.createElement(t.h4,{id:"with-the-close-button-hidden",style:{position:"relative"}},"With the close button hidden",a.createElement(t.a,{href:"#with-the-close-button-hidden","aria-label":"with the close button hidden permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.p,null,"In accordions that have very little content the close button does not offer much utility to the user. In these cases the button can be hidden with the ",a.createElement(t.code,null,"closeButton")," property."),"\n",a.createElement(n,null,a.createElement(u.A,{heading:"How to publish data?",language:"en",style:{maxWidth:"360px"}},a.createElement(t.p,null,"To publish your data, open your profile settings and click the button 'Publish'."))),"\n",a.createElement(t.h4,{id:"accordion-size-variants",style:{position:"relative"}},"Accordion size variants",a.createElement(t.a,{href:"#accordion-size-variants","aria-label":"accordion size variants permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.p,null,"HDS Accordion includes three (3) size variants; small, default, and large. You can use different sizes depending on the screen size or use case. Use the ",a.createElement(t.code,null,"size")," property to alter the size."),"\n",a.createElement(n,null,a.createElement(u.A,{size:"s",card:!0,border:!0,heading:"How to publish data?",language:"en",style:{maxWidth:"360px"}},a.createElement(t.p,null,"To publish your data, open your profile settings and click the button 'Publish'.")),a.createElement(u.A,{size:"m",card:!0,border:!0,heading:"How to publish data?",language:"en",style:{maxWidth:"360px",marginTop:"var(--spacing-s)"}},a.createElement(t.p,null,"To publish your data, open your profile settings and click the button 'Publish'.")),a.createElement(u.A,{size:"l",card:!0,border:!0,heading:"How to publish data?",language:"en",style:{maxWidth:"360px",marginTop:"var(--spacing-s)"}},a.createElement(t.p,null,"To publish your data, open your profile settings and click the button 'Publish'."))),"\n",a.createElement(t.h4,{id:"accordions-heading-elements-and-headinglevel-property",style:{position:"relative"}},"Accordions, heading elements and ",a.createElement(t.code,null,"headingLevel"),"-property",a.createElement(t.a,{href:"#accordions-heading-elements-and-headinglevel-property","aria-label":"accordions heading elements and headinglevel property permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.p,null,"When using multiple Accordions as a group with a shared header or the page content has a header preceding the Accordion(s), keep in mind the basics of using the header elements, h1 being the most important header on the page down to h6 being the least important and give the Accordion the proper ",a.createElement(t.code,null,"headingLevel")," according to its position."),"\n",a.createElement(n,null,a.createElement("h5",null,"Header element for the content in which the following Accordions are nested in. (Here this is an h5 element)"),a.createElement(u.A,{headingLevel:"6",size:"s",card:!0,border:!0,heading:"headingLevel 6",language:"en",style:{maxWidth:"360px"}},a.createElement(t.p,null,"This is an Accordion with headingLevel 6")),a.createElement(u.A,{headingLevel:"6",size:"s",card:!0,border:!0,heading:"headingLevel 6",language:"en",style:{maxWidth:"360px",marginTop:0,borderTop:0}},a.createElement(t.p,null,"This is an Accordion with headingLevel 6")),a.createElement(u.A,{headingLevel:"6",size:"s",card:!0,border:!0,heading:"headingLevel 6",language:"en",style:{maxWidth:"360px",marginTop:0,borderTop:0}},a.createElement(t.p,null,"This is an Accordion with headingLevel 6"))),"\n",a.createElement(t.h4,{id:"custom-accordion",style:{position:"relative"}},"Custom accordion",a.createElement(t.a,{href:"#custom-accordion","aria-label":"custom accordion permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.p,null,"If the basic accordion components do not fit your needs, you can build a custom accordion by using HDS provided accordion elements."),"\n","\n",a.createElement(n,null,a.createElement(m)))}function g(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){return void 0===e&&(e={}),a.createElement(p,e,a.createElement(f,e))}},81074:function(e,t,n){n.r(t);var r=n(11151),a=n(67294),o=n(83428),i=n(57674),c=n(89482),l=(n(18607),n(26127));function s(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,r.ah)(),e.components);return l.Z||d("PageTabs",!1),l.Z.Tab||d("PageTabs.Tab",!0),l.Z.TabList||d("PageTabs.TabList",!0),l.Z.TabPanel||d("PageTabs.TabPanel",!0),a.createElement(a.Fragment,null,a.createElement(t.h1,{id:"accordion",style:{position:"relative"}},"Accordion",a.createElement(t.a,{href:"#accordion","aria-label":"accordion permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement("div",{class:"status-label-description"},a.createElement(o.S,{type:"info"},"Stable"),a.createElement(o.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),a.createElement(i.Z)),"\n",a.createElement(c.Z,null,"Accordions can be used to hide and reveal information. When used correctly, they are a good way to make a higher amount of information easier to digest for the user."),"\n",a.createElement(l.Z,{pageContext:e.pageContext},a.createElement(l.Z.TabList,null,a.createElement(l.Z.Tab,{href:"/"},"Usage"),a.createElement(l.Z.Tab,{href:"/code"},"Code"),a.createElement(l.Z.Tab,{href:"/accessibility"},"Accessibility"),a.createElement(l.Z.Tab,{href:"/customisation"},"Customisation")),a.createElement(l.Z.TabPanel,null,e.children)))}function d(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,r.ah)(),e.components);return t?a.createElement(t,e,a.createElement(s,e)):s(e)}},57674:function(e,t,n){var r=n(67294),a=n(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return r.createElement(a.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},r.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>r.createElement("li",{key:t},r.createElement("span",{className:"status-name"},t),r.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-accordion-tabs-mdx-964ab68c8cbe69db4a36.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-accordion-tabs-mdx-964ab68c8cbe69db4a36.js
new file mode 100644
index 00000000000..6a9f11c3b3c
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-accordion-tabs-mdx-964ab68c8cbe69db4a36.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[7407],{83428:function(e,a,t){t.d(a,{S:function(){return i}});var s=t(80136),l=t(67294),n=t(7444),r=t(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const c=e=>{let{icon:a}=e;return l.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},a)},i=e=>{var{children:a,className:t,dataTestId:n,type:i="neutral",iconLeft:u}=e,b=(0,s._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(o.statusLabel,o[i],u&&o.statusLabelWithIcon,t),"data-testid":n},b),u&&l.createElement(c,{icon:u}),a)}},81074:function(e,a,t){t.r(a);var s=t(11151),l=t(67294),n=t(83428),r=t(57674),o=t(89482),c=(t(18607),t(26127));function i(e){const a=Object.assign({h1:"h1",a:"a",span:"span"},(0,s.ah)(),e.components);return c.Z||u("PageTabs",!1),c.Z.Tab||u("PageTabs.Tab",!0),c.Z.TabList||u("PageTabs.TabList",!0),c.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(a.h1,{id:"accordion",style:{position:"relative"}},"Accordion",l.createElement(a.a,{href:"#accordion","aria-label":"accordion permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(n.S,{type:"info"},"Stable"),l.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(o.Z,null,"Accordions can be used to hide and reveal information. When used correctly, they are a good way to make a higher amount of information easier to digest for the user."),"\n",l.createElement(c.Z,{pageContext:e.pageContext},l.createElement(c.Z.TabList,null,l.createElement(c.Z.Tab,{href:"/"},"Usage"),l.createElement(c.Z.Tab,{href:"/code"},"Code"),l.createElement(c.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(c.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(c.Z.TabPanel,null,e.children)))}function u(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,s.ah)(),e.components);return a?l.createElement(a,e,l.createElement(i,e)):i(e)}},89482:function(e,a,t){var s=t(67294);a.Z=e=>{let{color:a="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:l={},children:n}=e;return s.createElement("p",{style:{fontSize:t,color:a,maxWidth:600,...l}},n)}},26127:function(e,a,t){var s=t(67294),l=t(14160),n=t(94671);const r="PageTabList",o="PageTabPanel",c="PageTab",i=e=>{var a;let{pageContext:t,children:i}=e;const u=t.frontmatter.slug,b=Array.isArray(i)?i:[i],d=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===r)),m=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===o)),h=null===(a=d.props)||void 0===a?void 0:a.children.filter((e=>e.type.componentName===c)),p=h.findIndex((e=>u.endsWith(e.props.href))),_=-1===p?0:p,f=0===_?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return s.createElement(n.a,{initiallyActiveTab:_},s.createElement(n.a.TabList,{className:"page-tabs-list"},h.map((e=>s.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),h.map(((e,a)=>s.createElement(n.a.TabPanel,{key:e.props.href},_===a?m.props.children:s.createElement("div",null)))))},u=e=>{let{children:a}=e;return s.createElement(n.a.TabList,null,a)};u.componentName=r;const b=e=>{let{href:a,slug:t,children:l}=e;return s.createElement(n.a.Tab,null,l)};b.componentName=c;const d=e=>{let{children:a}=e;return s.createElement(n.a.TabPanel,null,a)};d.componentName=o,i.TabList=u,i.Tab=b,i.TabPanel=d,a.Z=i},57674:function(e,a,t){var s=t(67294),l=t(45422);a.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return s.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},s.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((a=>s.createElement("li",{key:a},s.createElement("span",{className:"status-name"},a),s.createElement("span",null,e[a]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-breadcrumb-accessibility-mdx-c29db5ea73fef9ffbad7.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-breadcrumb-accessibility-mdx-c29db5ea73fef9ffbad7.js
new file mode 100644
index 00000000000..d721064f64b
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-breadcrumb-accessibility-mdx-c29db5ea73fef9ffbad7.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[6064,2291],{83428:function(e,a,t){t.d(a,{S:function(){return o}});var l=t(80136),s=t(67294),n=t(7444),r=t(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const c=e=>{let{icon:a}=e;return s.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},a)},o=e=>{var{children:a,className:t,dataTestId:n,type:o="neutral",iconLeft:u}=e,b=(0,l._)(e,["children","className","dataTestId","type","iconLeft"]);return s.createElement("span",Object.assign({className:(0,r.c)(i.statusLabel,i[o],u&&i.statusLabelWithIcon,t),"data-testid":n},b),u&&s.createElement(c,{icon:u}),a)}},42333:function(e,a,t){t.r(a);var l=t(11151),s=t(67294),n=t(50275);const r=e=>{let{children:a,pageContext:t}=e;return s.createElement(n.default,{pageContext:t},a)};function i(e){const a=Object.assign({h2:"h2",a:"a",span:"span",p:"p",h3:"h3",ul:"ul",li:"li",code:"code"},(0,l.ah)(),e.components);return s.createElement(s.Fragment,null,s.createElement(a.h2,{id:"accessibility",style:{position:"relative"}},"Accessibility",s.createElement(a.a,{href:"#accessibility","aria-label":"accessibility permalink",className:"header-anchor after"},s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(a.p,null,"The HDS breadcrumb component is a native HTML list with native HTML links."),"\n",s.createElement(a.h3,{id:"pay-attention-to",style:{position:"relative"}},"Pay attention to",s.createElement(a.a,{href:"#pay-attention-to","aria-label":"pay attention to permalink",className:"header-anchor after"},s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(a.ul,null,"\n",s.createElement(a.li,null,"The last element should have the attribute ",s.createElement(a.code,null,'aria-current="true"')," if it is the current page. Automatically added in React."),"\n",s.createElement(a.li,null,"Nav-element must have an ",s.createElement(a.code,null,"aria-label"),"."),"\n"))}a.default=function(e){return void 0===e&&(e={}),s.createElement(r,e,s.createElement(i,e))}},50275:function(e,a,t){t.r(a);var l=t(11151),s=t(67294),n=t(83428),r=t(89482),i=(t(18607),t(26127)),c=t(57674);function o(e){const a=Object.assign({h1:"h1",a:"a",span:"span"},(0,l.ah)(),e.components);return i.Z||u("PageTabs",!1),i.Z.Tab||u("PageTabs.Tab",!0),i.Z.TabList||u("PageTabs.TabList",!0),i.Z.TabPanel||u("PageTabs.TabPanel",!0),s.createElement(s.Fragment,null,s.createElement(a.h1,{id:"breadcrumb",style:{position:"relative"}},"Breadcrumb",s.createElement(a.a,{href:"#breadcrumb","aria-label":"breadcrumb permalink",className:"header-anchor after"},s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement("div",{class:"status-label-description"},s.createElement(n.S,{type:"alert"},"Beta"),s.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),s.createElement(c.Z)),"\n",s.createElement(r.Z,null,"Breadcrumb is a navigational element that provides links back to each previous page the user navigated through and\nshows the user's current location on a website."),"\n",s.createElement(i.Z,{pageContext:e.pageContext},s.createElement(i.Z.TabList,null,s.createElement(i.Z.Tab,{href:"/"},"Usage"),s.createElement(i.Z.Tab,{href:"/code"},"Code"),s.createElement(i.Z.Tab,{href:"/accessibility"},"Accessibility"),s.createElement(i.Z.Tab,{href:"/customisation"},"Customisation")),s.createElement(i.Z.TabPanel,null,e.children)))}function u(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,l.ah)(),e.components);return a?s.createElement(a,e,s.createElement(o,e)):o(e)}},89482:function(e,a,t){var l=t(67294);a.Z=e=>{let{color:a="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:s={},children:n}=e;return l.createElement("p",{style:{fontSize:t,color:a,maxWidth:600,...s}},n)}},26127:function(e,a,t){var l=t(67294),s=t(14160),n=t(94671);const r="PageTabList",i="PageTabPanel",c="PageTab",o=e=>{var a;let{pageContext:t,children:o}=e;const u=t.frontmatter.slug,b=Array.isArray(o)?o:[o],d=b.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===r)),m=b.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===i)),h=null===(a=d.props)||void 0===a?void 0:a.children.filter((e=>e.type.componentName===c)),p=h.findIndex((e=>u.endsWith(e.props.href))),_=-1===p?0:p,g=0===_?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return l.createElement(n.a,{initiallyActiveTab:_},l.createElement(n.a.TabList,{className:"page-tabs-list"},h.map((e=>l.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,s.navigate)(""+("/"===e.props.href?g:g+e.props.href))},e.props.children)))),h.map(((e,a)=>l.createElement(n.a.TabPanel,{key:e.props.href},_===a?m.props.children:l.createElement("div",null)))))},u=e=>{let{children:a}=e;return l.createElement(n.a.TabList,null,a)};u.componentName=r;const b=e=>{let{href:a,slug:t,children:s}=e;return l.createElement(n.a.Tab,null,s)};b.componentName=c;const d=e=>{let{children:a}=e;return l.createElement(n.a.TabPanel,null,a)};d.componentName=i,o.TabList=u,o.Tab=b,o.TabPanel=d,a.Z=o},57674:function(e,a,t){var l=t(67294),s=t(45422);a.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return l.createElement(s.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},l.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((a=>l.createElement("li",{key:a},l.createElement("span",{className:"status-name"},a),l.createElement("span",null,e[a]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-breadcrumb-code-mdx-823b5b268a1e4b6c21df.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-breadcrumb-code-mdx-823b5b268a1e4b6c21df.js
new file mode 100644
index 00000000000..b1fe5b8278f
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-breadcrumb-code-mdx-823b5b268a1e4b6c21df.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[6448,2291],{58808:function(e,a,t){t.d(a,{B:function(){return g}});var r=t(67294),l=t(7444),n=t(34300),s=t(97640),c=t(21662),i=t(12670),o=t(29928),d="Breadcrumb-module_breadcrumb__1m52F breadcrumb_hds-breadcrumb__3JFPo",m="Breadcrumb-module_list__3hw46 breadcrumb_hds-breadcrumb__list__3qyFn";(0,l.s)(".breadcrumb_hds-breadcrumb__3JFPo{--horizontal-margin-small:var(--spacing-layout-2-xs);--horizontal-margin-medium:var(--spacing-layout-xs);--horizontal-margin-large:var(--spacing-layout-xs);--horizontal-margin-x-large:var(--spacing-layout-s);--horizontal-margin:var(--horizontal-margin-small);display:flex;margin:0 var(--horizontal-margin);padding:var(--spacing-s) 0}.breadcrumb_hds-breadcrumb__list__3qyFn{align-items:center;flex-direction:row;word-wrap:break-word}.breadcrumb_hds-breadcrumb__list--mobile__3k5FD{display:flex}.breadcrumb_hds-breadcrumb__list--desktop__2mWwT{display:none}.breadcrumb_hds-breadcrumb__list-item__2IJfr{align-items:center;display:flex;line-height:var(--lineheight-l)}.breadcrumb_hds-breadcrumb__list-item--active__cHQPc{font-weight:700;padding:3px}.breadcrumb_hds-breadcrumb__link__mhqc3.breadcrumb_hds-breadcrumb__link__mhqc3{--link-visited-color:none;--link-color:var(--color-black-90)}.breadcrumb_hds-breadcrumb__link__mhqc3:focus,.breadcrumb_hds-breadcrumb__link__mhqc3:hover{-webkit-text-decoration-color:var(--color-black-90);text-decoration-color:var(--color-black-90)}.breadcrumb_hds-breadcrumb__list--mobile__3k5FD .breadcrumb_hds-breadcrumb__link__mhqc3{font-size:var(--fontsize-body-l)}.breadcrumb_hds-breadcrumb__back-arrow__S8SMr.breadcrumb_hds-breadcrumb__back-arrow__S8SMr{display:inline-flex;margin-left:-5px;margin-right:-3px;--icon-size:var(--spacing-m)}.breadcrumb_hds-breadcrumb__separator__2oJ4Y.breadcrumb_hds-breadcrumb__separator__2oJ4Y{display:inline-flex;padding-left:var(--spacing-3-xs);--icon-size:var(--spacing-s)}@media (min-width:768px){.breadcrumb_hds-breadcrumb__3JFPo{--horizontal-margin:var(--horizontal-margin-medium)}.breadcrumb_hds-breadcrumb__list--mobile__3k5FD{display:none}.breadcrumb_hds-breadcrumb__list--desktop__2mWwT{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0}}@media (min-width:992px){.breadcrumb_hds-breadcrumb__3JFPo{--horizontal-margin:var(--horizontal-margin-large)}}@media (min-width:1248px){.breadcrumb_hds-breadcrumb__3JFPo{--horizontal-margin:var(--horizontal-margin-x-large)}}.Breadcrumb-module_separator__3Xxu5.Breadcrumb-module_separator__3Xxu5{padding-left:2px;padding-right:2px}");const b=e=>{let{item:a}=e;return r.createElement(c.L,{href:a.path,className:"Breadcrumb-module_link__BSP1k breadcrumb_hds-breadcrumb__link__mhqc3"},a.title)},u=e=>{let{direction:a="right"}=e;const t="right"===a,l=t?i.I:o.I,n=t?"Breadcrumb-module_separator__3Xxu5 breadcrumb_hds-breadcrumb__separator__2oJ4Y":"Breadcrumb-module_backArrow__2eSmu breadcrumb_hds-breadcrumb__back-arrow__S8SMr",s=t?"xs":"s";return r.createElement("span",{className:n,"aria-hidden":!0},r.createElement(l,{size:s}))},h=e=>{let{item:a,showSeparator:t}=e;const l=null!==a.path;return r.createElement("li",{className:"Breadcrumb-module_listItem__2_AEc breadcrumb_hds-breadcrumb__list-item__2IJfr"},l?r.createElement(b,{item:a}):r.createElement("span",{"aria-current":!0,className:"Breadcrumb-module_activeListItem__2Gz5p breadcrumb_hds-breadcrumb__list-item--active__cHQPc"},a.title),t&&r.createElement(u,{key:"separator-"+a.title}))},_=e=>{let{item:a}=e;return r.createElement("div",{className:(0,n.c)(m,"Breadcrumb-module_mobileList__1rj5r breadcrumb_hds-breadcrumb__list--mobile__3k5FD")},r.createElement(u,{direction:"left"}),r.createElement(b,{item:a}))},p=e=>{let{list:a}=e;return r.createElement("ol",{className:(0,n.c)(m,"Breadcrumb-module_desktopList__3WHv- breadcrumb_hds-breadcrumb__list--desktop__2mWwT")},a.map(((e,t)=>r.createElement(r.Fragment,{key:e.title},r.createElement(h,{key:e.title,item:e,showSeparator:t<a.length-1})))))},g=e=>{let{list:a,ariaLabel:t,theme:l}=e;const c=(0,s.u)(d,l),i=a.reduceRight(((e,a)=>e||(a.path?a:void 0)),void 0);return i?r.createElement("nav",{"aria-label":t,className:(0,n.c)(d,c)},r.createElement(p,{list:a}),r.createElement(_,{item:i})):null}},83428:function(e,a,t){t.d(a,{S:function(){return o}});var r=t(80136),l=t(67294),n=t(7444),s=t(34300),c={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const i=e=>{let{icon:a}=e;return l.createElement("span",{className:c.statusLabelIcon,"aria-hidden":"true"},a)},o=e=>{var{children:a,className:t,dataTestId:n,type:o="neutral",iconLeft:d}=e,m=(0,r._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,s.c)(c.statusLabel,c[o],d&&c.statusLabelWithIcon,t),"data-testid":n},m),d&&l.createElement(i,{icon:d}),a)}},16664:function(e,a,t){t.r(a);var r=t(11151),l=t(67294),n=t(58808),s=t(50275);const c=e=>{let{children:a,pageContext:t}=e;return l.createElement(s.default,{pageContext:t},a)};function i(e){const a=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",pre:"pre",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",strong:"strong",p:"p"},(0,r.ah)(),e.components),{Playground:t,IconCheckCircleFill:s,Link:c,ExternalLink:i}=a;return i||o("ExternalLink",!0),s||o("IconCheckCircleFill",!0),c||o("Link",!0),t||o("Playground",!0),l.createElement(l.Fragment,null,l.createElement(a.h2,{id:"code",style:{position:"relative"}},"Code",l.createElement(a.a,{href:"#code","aria-label":"code permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.h3,{id:"code-examples",style:{position:"relative"}},"Code examples",l.createElement(a.a,{href:"#code-examples","aria-label":"code examples permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t,{scope:{Breadcrumb:n.B}},l.createElement(a.pre,null,l.createElement(a.code,{className:"language-jsx"},"import { Breadcrumb } from 'hds-react';\n\n() => (\n  <Breadcrumb\n    ariaLabel=\"Breadcrumb\"\n    list={[\n      { title: 'Front page', path: '/' },\n      { title: 'Health and social services', path: '/path' },\n      { title: 'Senior services', path: '/path/2ndLevelPath' },\n      { title: 'Informal care', path: '/path/2ndLevelPath/3rdLevelPath' },\n      { title: 'Care options', path: null },\n    ]}\n  />\n)\n")),l.createElement(a.pre,null,l.createElement(a.code,{className:"language-html"},'<nav aria-label="Breadcrumb" class="hds-breadcrumb">\n  <ol class="hds-breadcrumb__list hds-breadcrumb__list--desktop">\n    <li class="hds-breadcrumb__list-item">\n      <a class="hds-link hds-link--medium hds-breadcrumb__link" href="/">Front page</a>\n      <span class="hds-icon hds-icon--angle-right hds-breadcrumb__separator" aria-hidden="true"></span>\n    </li>\n    <li class="hds-breadcrumb__list-item">\n      <a class="hds-link hds-link--medium hds-breadcrumb__link" href="/path">Health and social services</a>\n      <span class="hds-icon hds-icon--angle-right hds-breadcrumb__separator" aria-hidden="true"></span>\n    </li>\n    <li class="hds-breadcrumb__list-item">\n      <a class="hds-link hds-link--medium hds-breadcrumb__link" href="/path/2ndLevelPath">Senior services</a>\n      <span class="hds-icon hds-icon--angle-right hds-breadcrumb__separator" aria-hidden="true"></span>\n    </li>\n    <li class="hds-breadcrumb__list-item">\n      <a class="hds-link hds-link--medium hds-breadcrumb__link" href="/path/2ndLevelPath/3rdLevelPath">Informal care</a>\n      <span class="hds-icon hds-icon--angle-right hds-breadcrumb__separator" aria-hidden="true"></span>\n    </li>\n    <li class="hds-breadcrumb__list-item hds-breadcrumb__list-item--active">\n      <span aria-current="true" class="Breadcrumb_active__02+NO">Care options</span>\n    </li>\n  </ol>\n  <div class="hds-breadcrumb__list hds-breadcrumb__list--mobile">\n    <span class="hds-icon hds-icon--angle-left hds-breadcrumb__back-arrow" aria-hidden="true"> </span>\n    <a class="hds-link hds-link--medium hds-breadcrumb__link" href="/path/2ndLevelPath/3rdLevelPath">Informal care</a>\n  </div>\n</nav>\n'))),"\n",l.createElement(a.h3,{id:"packages",style:{position:"relative"}},"Packages",l.createElement(a.a,{href:"#packages","aria-label":"packages permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.table,null,l.createElement(a.thead,null,l.createElement(a.tr,null,l.createElement(a.th,null,"Package"),l.createElement(a.th,null,"Included"),l.createElement(a.th,null,"Storybook link"),l.createElement(a.th,null,"Source link"))),l.createElement(a.tbody,null,l.createElement(a.tr,null,l.createElement(a.td,null,l.createElement(a.strong,null,"HDS React")),l.createElement(a.td,null,l.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},l.createElement(s)," Yes ")),l.createElement(a.td,null,l.createElement(c,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-breadcrumb--example"},"View in Storybook")),l.createElement(a.td,null,l.createElement(i,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/react/src/components/breadcrumb"},"View source"))),l.createElement(a.tr,null,l.createElement(a.td,null,l.createElement(a.strong,null,"HDS Core")),l.createElement(a.td,null,l.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},l.createElement(s)," Yes ")),l.createElement(a.td,null,l.createElement(c,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/core/?path=/story/components-breadcrumb--breadcrumb"},"View in Storybook")),l.createElement(a.td,null,l.createElement(i,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/core/src/components/breadcrumb"},"View source"))))),"\n",l.createElement(a.h3,{id:"properties",style:{position:"relative"}},"Properties",l.createElement(a.a,{href:"#properties","aria-label":"properties permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.p,null,"Note! You can find the full list of properties in the ",l.createElement(c,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-breadcrumb--example"},"React Storybook.")),"\n",l.createElement(a.table,null,l.createElement(a.thead,null,l.createElement(a.tr,null,l.createElement(a.th,null,"Property"),l.createElement(a.th,null,"Description"),l.createElement(a.th,null,"Values"),l.createElement(a.th,null,"Default value"))),l.createElement(a.tbody,null,l.createElement(a.tr,null,l.createElement(a.td,null,l.createElement(a.code,null,"ariaLabel")),l.createElement(a.td,null,l.createElement(a.code,null,"aria-label")," of the ",l.createElement(a.code,null,"<nav>")," element created by the component"),l.createElement(a.td,null,l.createElement(a.code,null,"string")),l.createElement(a.td,null,"-")),l.createElement(a.tr,null,l.createElement(a.td,null,l.createElement(a.code,null,"list")),l.createElement(a.td,null,"Array of breadcrumb items. Each item is an object with ",l.createElement(a.code,null,"title")," and ",l.createElement(a.code,null,"path")),l.createElement(a.td,null,l.createElement(a.code,null,"BreadcrumbListItem[]")),l.createElement(a.td,null,"-")))))}function o(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){return void 0===e&&(e={}),l.createElement(c,e,l.createElement(i,e))}},50275:function(e,a,t){t.r(a);var r=t(11151),l=t(67294),n=t(83428),s=t(89482),c=(t(18607),t(26127)),i=t(57674);function o(e){const a=Object.assign({h1:"h1",a:"a",span:"span"},(0,r.ah)(),e.components);return c.Z||d("PageTabs",!1),c.Z.Tab||d("PageTabs.Tab",!0),c.Z.TabList||d("PageTabs.TabList",!0),c.Z.TabPanel||d("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(a.h1,{id:"breadcrumb",style:{position:"relative"}},"Breadcrumb",l.createElement(a.a,{href:"#breadcrumb","aria-label":"breadcrumb permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(n.S,{type:"alert"},"Beta"),l.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(i.Z)),"\n",l.createElement(s.Z,null,"Breadcrumb is a navigational element that provides links back to each previous page the user navigated through and\nshows the user's current location on a website."),"\n",l.createElement(c.Z,{pageContext:e.pageContext},l.createElement(c.Z.TabList,null,l.createElement(c.Z.Tab,{href:"/"},"Usage"),l.createElement(c.Z.Tab,{href:"/code"},"Code"),l.createElement(c.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(c.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(c.Z.TabPanel,null,e.children)))}function d(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,r.ah)(),e.components);return a?l.createElement(a,e,l.createElement(o,e)):o(e)}},89482:function(e,a,t){var r=t(67294);a.Z=e=>{let{color:a="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:l={},children:n}=e;return r.createElement("p",{style:{fontSize:t,color:a,maxWidth:600,...l}},n)}},26127:function(e,a,t){var r=t(67294),l=t(14160),n=t(94671);const s="PageTabList",c="PageTabPanel",i="PageTab",o=e=>{var a;let{pageContext:t,children:o}=e;const d=t.frontmatter.slug,m=Array.isArray(o)?o:[o],b=m.find((e=>(0,r.isValidElement)(e)&&e.type.componentName===s)),u=m.find((e=>(0,r.isValidElement)(e)&&e.type.componentName===c)),h=null===(a=b.props)||void 0===a?void 0:a.children.filter((e=>e.type.componentName===i)),_=h.findIndex((e=>d.endsWith(e.props.href))),p=-1===_?0:_,g=0===p?d:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(d);return r.createElement(n.a,{initiallyActiveTab:p},r.createElement(n.a.TabList,{className:"page-tabs-list"},h.map((e=>r.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?g:g+e.props.href))},e.props.children)))),h.map(((e,a)=>r.createElement(n.a.TabPanel,{key:e.props.href},p===a?u.props.children:r.createElement("div",null)))))},d=e=>{let{children:a}=e;return r.createElement(n.a.TabList,null,a)};d.componentName=s;const m=e=>{let{href:a,slug:t,children:l}=e;return r.createElement(n.a.Tab,null,l)};m.componentName=i;const b=e=>{let{children:a}=e;return r.createElement(n.a.TabPanel,null,a)};b.componentName=c,o.TabList=d,o.Tab=m,o.TabPanel=b,a.Z=o},57674:function(e,a,t){var r=t(67294),l=t(45422);a.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return r.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},r.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((a=>r.createElement("li",{key:a},r.createElement("span",{className:"status-name"},a),r.createElement("span",null,e[a]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-breadcrumb-customisation-mdx-056818ca5baea2516dc3.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-breadcrumb-customisation-mdx-056818ca5baea2516dc3.js
new file mode 100644
index 00000000000..8e53e611311
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-breadcrumb-customisation-mdx-056818ca5baea2516dc3.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[761,2291],{58808:function(e,a,t){t.d(a,{B:function(){return g}});var r=t(67294),l=t(7444),n=t(34300),s=t(97640),i=t(21662),c=t(12670),o=t(29928),d="Breadcrumb-module_breadcrumb__1m52F breadcrumb_hds-breadcrumb__3JFPo",m="Breadcrumb-module_list__3hw46 breadcrumb_hds-breadcrumb__list__3qyFn";(0,l.s)(".breadcrumb_hds-breadcrumb__3JFPo{--horizontal-margin-small:var(--spacing-layout-2-xs);--horizontal-margin-medium:var(--spacing-layout-xs);--horizontal-margin-large:var(--spacing-layout-xs);--horizontal-margin-x-large:var(--spacing-layout-s);--horizontal-margin:var(--horizontal-margin-small);display:flex;margin:0 var(--horizontal-margin);padding:var(--spacing-s) 0}.breadcrumb_hds-breadcrumb__list__3qyFn{align-items:center;flex-direction:row;word-wrap:break-word}.breadcrumb_hds-breadcrumb__list--mobile__3k5FD{display:flex}.breadcrumb_hds-breadcrumb__list--desktop__2mWwT{display:none}.breadcrumb_hds-breadcrumb__list-item__2IJfr{align-items:center;display:flex;line-height:var(--lineheight-l)}.breadcrumb_hds-breadcrumb__list-item--active__cHQPc{font-weight:700;padding:3px}.breadcrumb_hds-breadcrumb__link__mhqc3.breadcrumb_hds-breadcrumb__link__mhqc3{--link-visited-color:none;--link-color:var(--color-black-90)}.breadcrumb_hds-breadcrumb__link__mhqc3:focus,.breadcrumb_hds-breadcrumb__link__mhqc3:hover{-webkit-text-decoration-color:var(--color-black-90);text-decoration-color:var(--color-black-90)}.breadcrumb_hds-breadcrumb__list--mobile__3k5FD .breadcrumb_hds-breadcrumb__link__mhqc3{font-size:var(--fontsize-body-l)}.breadcrumb_hds-breadcrumb__back-arrow__S8SMr.breadcrumb_hds-breadcrumb__back-arrow__S8SMr{display:inline-flex;margin-left:-5px;margin-right:-3px;--icon-size:var(--spacing-m)}.breadcrumb_hds-breadcrumb__separator__2oJ4Y.breadcrumb_hds-breadcrumb__separator__2oJ4Y{display:inline-flex;padding-left:var(--spacing-3-xs);--icon-size:var(--spacing-s)}@media (min-width:768px){.breadcrumb_hds-breadcrumb__3JFPo{--horizontal-margin:var(--horizontal-margin-medium)}.breadcrumb_hds-breadcrumb__list--mobile__3k5FD{display:none}.breadcrumb_hds-breadcrumb__list--desktop__2mWwT{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0}}@media (min-width:992px){.breadcrumb_hds-breadcrumb__3JFPo{--horizontal-margin:var(--horizontal-margin-large)}}@media (min-width:1248px){.breadcrumb_hds-breadcrumb__3JFPo{--horizontal-margin:var(--horizontal-margin-x-large)}}.Breadcrumb-module_separator__3Xxu5.Breadcrumb-module_separator__3Xxu5{padding-left:2px;padding-right:2px}");const u=e=>{let{item:a}=e;return r.createElement(i.L,{href:a.path,className:"Breadcrumb-module_link__BSP1k breadcrumb_hds-breadcrumb__link__mhqc3"},a.title)},b=e=>{let{direction:a="right"}=e;const t="right"===a,l=t?c.I:o.I,n=t?"Breadcrumb-module_separator__3Xxu5 breadcrumb_hds-breadcrumb__separator__2oJ4Y":"Breadcrumb-module_backArrow__2eSmu breadcrumb_hds-breadcrumb__back-arrow__S8SMr",s=t?"xs":"s";return r.createElement("span",{className:n,"aria-hidden":!0},r.createElement(l,{size:s}))},h=e=>{let{item:a,showSeparator:t}=e;const l=null!==a.path;return r.createElement("li",{className:"Breadcrumb-module_listItem__2_AEc breadcrumb_hds-breadcrumb__list-item__2IJfr"},l?r.createElement(u,{item:a}):r.createElement("span",{"aria-current":!0,className:"Breadcrumb-module_activeListItem__2Gz5p breadcrumb_hds-breadcrumb__list-item--active__cHQPc"},a.title),t&&r.createElement(b,{key:"separator-"+a.title}))},_=e=>{let{item:a}=e;return r.createElement("div",{className:(0,n.c)(m,"Breadcrumb-module_mobileList__1rj5r breadcrumb_hds-breadcrumb__list--mobile__3k5FD")},r.createElement(b,{direction:"left"}),r.createElement(u,{item:a}))},p=e=>{let{list:a}=e;return r.createElement("ol",{className:(0,n.c)(m,"Breadcrumb-module_desktopList__3WHv- breadcrumb_hds-breadcrumb__list--desktop__2mWwT")},a.map(((e,t)=>r.createElement(r.Fragment,{key:e.title},r.createElement(h,{key:e.title,item:e,showSeparator:t<a.length-1})))))},g=e=>{let{list:a,ariaLabel:t,theme:l}=e;const i=(0,s.u)(d,l),c=a.reduceRight(((e,a)=>e||(a.path?a:void 0)),void 0);return c?r.createElement("nav",{"aria-label":t,className:(0,n.c)(d,i)},r.createElement(p,{list:a}),r.createElement(_,{item:c})):null}},83428:function(e,a,t){t.d(a,{S:function(){return o}});var r=t(80136),l=t(67294),n=t(7444),s=t(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const c=e=>{let{icon:a}=e;return l.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},a)},o=e=>{var{children:a,className:t,dataTestId:n,type:o="neutral",iconLeft:d}=e,m=(0,r._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,s.c)(i.statusLabel,i[o],d&&i.statusLabelWithIcon,t),"data-testid":n},m),d&&l.createElement(c,{icon:d}),a)}},83498:function(e,a,t){t.r(a);var r=t(11151),l=t(67294),n=t(58808),s=t(50275);const i=e=>{let{children:a,pageContext:t}=e;return l.createElement(s.default,{pageContext:t},a)};function c(e){const a=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",p:"p",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",pre:"pre"},(0,r.ah)(),e.components),{Playground:t}=a;return t||function(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Playground",!0),l.createElement(l.Fragment,null,l.createElement(a.h2,{id:"customisation",style:{position:"relative"}},"Customisation",l.createElement(a.a,{href:"#customisation","aria-label":"customisation permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.h3,{id:"customisation-properties",style:{position:"relative"}},"Customisation properties",l.createElement(a.a,{href:"#customisation-properties","aria-label":"customisation properties permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.p,null,"In Core version, you can either use the ",l.createElement(a.code,null,"style")," or ",l.createElement(a.code,null,"class")," attributes in the HTML to customise the component."),"\n",l.createElement(a.p,null,"In React version, you can use the ",l.createElement(a.code,null,"theme")," property to customise the component."),"\n",l.createElement(a.p,null,"See all available theme variables in the table below."),"\n",l.createElement(a.table,null,l.createElement(a.thead,null,l.createElement(a.tr,null,l.createElement(a.th,null,"Theme variable"),l.createElement(a.th,null,"Description"))),l.createElement(a.tbody,null,l.createElement(a.tr,null,l.createElement(a.td,null,l.createElement(a.code,null,"--horizontal-margin-small")),l.createElement(a.td,null,"Horizontal margin on small screens (< 768px). Default is ",l.createElement(a.code,null,"--spacing-layout-2-xs"))),l.createElement(a.tr,null,l.createElement(a.td,null,l.createElement(a.code,null,"--horizontal-margin-medium")),l.createElement(a.td,null,"Horizontal margin on medium screens (>=768px). Default is ",l.createElement(a.code,null,"--spacing-layout-xs"))),l.createElement(a.tr,null,l.createElement(a.td,null,l.createElement(a.code,null,"--horizontal-margin-large")),l.createElement(a.td,null,"Horizontal margin on large screens (>= 992px). Default is ",l.createElement(a.code,null,"--spacing-layout-xs"))),l.createElement(a.tr,null,l.createElement(a.td,null,l.createElement(a.code,null,"--horizontal-margin-x-large")),l.createElement(a.td,null,"Horizontal margin on xtra large screens (>= 1248px). Default is ",l.createElement(a.code,null,"--spacing-layout-s"))))),"\n",l.createElement(a.h3,{id:"customisation-example",style:{position:"relative"}},"Customisation example",l.createElement(a.a,{href:"#customisation-example","aria-label":"customisation example permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t,{scope:{Breadcrumb:n.B}},l.createElement(a.pre,null,l.createElement(a.code,{className:"language-jsx"},"import { Breadcrumb } from 'hds-react';\n\n() => (\n<Breadcrumb\n  ariaLabel=\"Breadcrumb\"\n  list={[\n    { title: 'Front page', path: '/' },\n    { title: 'Health and social services', path: '/path' },\n    { title: 'Senior services', path: '/path/2ndLevelPath' },\n    { title: 'Informal care', path: '/path/2ndLevelPath/3rdLevelPath' },\n    { title: 'Care options', path: null },\n  ]}\n  theme={{\n    '--horizontal-margin-small': 'var(--spacing-layout-s)',\n    '--horizontal-margin-medium': 'var(--spacing-layout-m)',\n    '--horizontal-margin-large': 'var(--spacing-layout-l)',\n    '--horizontal-margin-x-large': 'var(--spacing-layout-xl)',\n  }}\n/>)\n")),l.createElement(a.pre,null,l.createElement(a.code,{className:"language-html"},'<style scoped>\n  .custom-theme {\n    --horizontal-margin-small: var(--spacing-layout-s);\n    --horizontal-margin-medium: var(--spacing-layout-m);\n    --horizontal-margin-large: var(--spacing-layout-l);\n    --horizontal-margin-x-large: var(--spacing-layout-xl);\n  }\n</style>\n<nav aria-label="Breadcrumb" class="hds-breadcrumb custom-theme">\n  <ol class="hds-breadcrumb__list hds-breadcrumb__list--desktop">\n    <li class="hds-breadcrumb__list-item">\n      <a class="hds-link hds-link--medium hds-breadcrumb__link" href="/">Front page</a>\n      <span class="hds-icon hds-icon--angle-right hds-breadcrumb__separator" aria-hidden="true"></span>\n    </li>\n    <li class="hds-breadcrumb__list-item">\n      <a class="hds-link hds-link--medium hds-breadcrumb__link" href="/path">Health and social services</a>\n      <span class="hds-icon hds-icon--angle-right hds-breadcrumb__separator" aria-hidden="true"></span>\n    </li>\n    <li class="hds-breadcrumb__list-item">\n      <a class="hds-link hds-link--medium hds-breadcrumb__link" href="/path/2ndLevelPath">Senior services</a>\n      <span class="hds-icon hds-icon--angle-right hds-breadcrumb__separator" aria-hidden="true"></span>\n    </li>\n    <li class="hds-breadcrumb__list-item">\n      <a class="hds-link hds-link--medium hds-breadcrumb__link" href="/path/2ndLevelPath/3rdLevelPath">Informal care</a>\n      <span class="hds-icon hds-icon--angle-right hds-breadcrumb__separator" aria-hidden="true"></span>\n    </li>\n    <li class="hds-breadcrumb__list-item hds-breadcrumb__list-item--active">\n      <span aria-current="true" class="Breadcrumb_active__02+NO">Care options</span>\n    </li>\n  </ol>\n  <div class="hds-breadcrumb__list hds-breadcrumb__list--mobile">\n    <span class="hds-icon hds-icon--angle-left hds-breadcrumb__back-arrow" aria-hidden="true"> </span>\n    <a class="hds-link hds-link--medium hds-breadcrumb__link" href="/path/2ndLevelPath/3rdLevelPath">Informal care</a>\n  </div>\n</nav>\n'))))}a.default=function(e){return void 0===e&&(e={}),l.createElement(i,e,l.createElement(c,e))}},50275:function(e,a,t){t.r(a);var r=t(11151),l=t(67294),n=t(83428),s=t(89482),i=(t(18607),t(26127)),c=t(57674);function o(e){const a=Object.assign({h1:"h1",a:"a",span:"span"},(0,r.ah)(),e.components);return i.Z||d("PageTabs",!1),i.Z.Tab||d("PageTabs.Tab",!0),i.Z.TabList||d("PageTabs.TabList",!0),i.Z.TabPanel||d("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(a.h1,{id:"breadcrumb",style:{position:"relative"}},"Breadcrumb",l.createElement(a.a,{href:"#breadcrumb","aria-label":"breadcrumb permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(n.S,{type:"alert"},"Beta"),l.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(c.Z)),"\n",l.createElement(s.Z,null,"Breadcrumb is a navigational element that provides links back to each previous page the user navigated through and\nshows the user's current location on a website."),"\n",l.createElement(i.Z,{pageContext:e.pageContext},l.createElement(i.Z.TabList,null,l.createElement(i.Z.Tab,{href:"/"},"Usage"),l.createElement(i.Z.Tab,{href:"/code"},"Code"),l.createElement(i.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(i.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(i.Z.TabPanel,null,e.children)))}function d(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,r.ah)(),e.components);return a?l.createElement(a,e,l.createElement(o,e)):o(e)}},89482:function(e,a,t){var r=t(67294);a.Z=e=>{let{color:a="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:l={},children:n}=e;return r.createElement("p",{style:{fontSize:t,color:a,maxWidth:600,...l}},n)}},26127:function(e,a,t){var r=t(67294),l=t(14160),n=t(94671);const s="PageTabList",i="PageTabPanel",c="PageTab",o=e=>{var a;let{pageContext:t,children:o}=e;const d=t.frontmatter.slug,m=Array.isArray(o)?o:[o],u=m.find((e=>(0,r.isValidElement)(e)&&e.type.componentName===s)),b=m.find((e=>(0,r.isValidElement)(e)&&e.type.componentName===i)),h=null===(a=u.props)||void 0===a?void 0:a.children.filter((e=>e.type.componentName===c)),_=h.findIndex((e=>d.endsWith(e.props.href))),p=-1===_?0:_,g=0===p?d:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(d);return r.createElement(n.a,{initiallyActiveTab:p},r.createElement(n.a.TabList,{className:"page-tabs-list"},h.map((e=>r.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?g:g+e.props.href))},e.props.children)))),h.map(((e,a)=>r.createElement(n.a.TabPanel,{key:e.props.href},p===a?b.props.children:r.createElement("div",null)))))},d=e=>{let{children:a}=e;return r.createElement(n.a.TabList,null,a)};d.componentName=s;const m=e=>{let{href:a,slug:t,children:l}=e;return r.createElement(n.a.Tab,null,l)};m.componentName=c;const u=e=>{let{children:a}=e;return r.createElement(n.a.TabPanel,null,a)};u.componentName=i,o.TabList=d,o.Tab=m,o.TabPanel=u,a.Z=o},57674:function(e,a,t){var r=t(67294),l=t(45422);a.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return r.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},r.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((a=>r.createElement("li",{key:a},r.createElement("span",{className:"status-name"},a),r.createElement("span",null,e[a]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-breadcrumb-index-mdx-679117619f6885e3d2fc.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-breadcrumb-index-mdx-679117619f6885e3d2fc.js
new file mode 100644
index 00000000000..8e171786003
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-breadcrumb-index-mdx-679117619f6885e3d2fc.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[8726,2291],{58808:function(e,a,t){t.d(a,{B:function(){return g}});var r=t(67294),l=t(7444),s=t(34300),n=t(97640),i=t(21662),c=t(12670),o=t(29928),d="Breadcrumb-module_breadcrumb__1m52F breadcrumb_hds-breadcrumb__3JFPo",m="Breadcrumb-module_list__3hw46 breadcrumb_hds-breadcrumb__list__3qyFn";(0,l.s)(".breadcrumb_hds-breadcrumb__3JFPo{--horizontal-margin-small:var(--spacing-layout-2-xs);--horizontal-margin-medium:var(--spacing-layout-xs);--horizontal-margin-large:var(--spacing-layout-xs);--horizontal-margin-x-large:var(--spacing-layout-s);--horizontal-margin:var(--horizontal-margin-small);display:flex;margin:0 var(--horizontal-margin);padding:var(--spacing-s) 0}.breadcrumb_hds-breadcrumb__list__3qyFn{align-items:center;flex-direction:row;word-wrap:break-word}.breadcrumb_hds-breadcrumb__list--mobile__3k5FD{display:flex}.breadcrumb_hds-breadcrumb__list--desktop__2mWwT{display:none}.breadcrumb_hds-breadcrumb__list-item__2IJfr{align-items:center;display:flex;line-height:var(--lineheight-l)}.breadcrumb_hds-breadcrumb__list-item--active__cHQPc{font-weight:700;padding:3px}.breadcrumb_hds-breadcrumb__link__mhqc3.breadcrumb_hds-breadcrumb__link__mhqc3{--link-visited-color:none;--link-color:var(--color-black-90)}.breadcrumb_hds-breadcrumb__link__mhqc3:focus,.breadcrumb_hds-breadcrumb__link__mhqc3:hover{-webkit-text-decoration-color:var(--color-black-90);text-decoration-color:var(--color-black-90)}.breadcrumb_hds-breadcrumb__list--mobile__3k5FD .breadcrumb_hds-breadcrumb__link__mhqc3{font-size:var(--fontsize-body-l)}.breadcrumb_hds-breadcrumb__back-arrow__S8SMr.breadcrumb_hds-breadcrumb__back-arrow__S8SMr{display:inline-flex;margin-left:-5px;margin-right:-3px;--icon-size:var(--spacing-m)}.breadcrumb_hds-breadcrumb__separator__2oJ4Y.breadcrumb_hds-breadcrumb__separator__2oJ4Y{display:inline-flex;padding-left:var(--spacing-3-xs);--icon-size:var(--spacing-s)}@media (min-width:768px){.breadcrumb_hds-breadcrumb__3JFPo{--horizontal-margin:var(--horizontal-margin-medium)}.breadcrumb_hds-breadcrumb__list--mobile__3k5FD{display:none}.breadcrumb_hds-breadcrumb__list--desktop__2mWwT{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0}}@media (min-width:992px){.breadcrumb_hds-breadcrumb__3JFPo{--horizontal-margin:var(--horizontal-margin-large)}}@media (min-width:1248px){.breadcrumb_hds-breadcrumb__3JFPo{--horizontal-margin:var(--horizontal-margin-x-large)}}.Breadcrumb-module_separator__3Xxu5.Breadcrumb-module_separator__3Xxu5{padding-left:2px;padding-right:2px}");const b=e=>{let{item:a}=e;return r.createElement(i.L,{href:a.path,className:"Breadcrumb-module_link__BSP1k breadcrumb_hds-breadcrumb__link__mhqc3"},a.title)},u=e=>{let{direction:a="right"}=e;const t="right"===a,l=t?c.I:o.I,s=t?"Breadcrumb-module_separator__3Xxu5 breadcrumb_hds-breadcrumb__separator__2oJ4Y":"Breadcrumb-module_backArrow__2eSmu breadcrumb_hds-breadcrumb__back-arrow__S8SMr",n=t?"xs":"s";return r.createElement("span",{className:s,"aria-hidden":!0},r.createElement(l,{size:n}))},_=e=>{let{item:a,showSeparator:t}=e;const l=null!==a.path;return r.createElement("li",{className:"Breadcrumb-module_listItem__2_AEc breadcrumb_hds-breadcrumb__list-item__2IJfr"},l?r.createElement(b,{item:a}):r.createElement("span",{"aria-current":!0,className:"Breadcrumb-module_activeListItem__2Gz5p breadcrumb_hds-breadcrumb__list-item--active__cHQPc"},a.title),t&&r.createElement(u,{key:"separator-"+a.title}))},h=e=>{let{item:a}=e;return r.createElement("div",{className:(0,s.c)(m,"Breadcrumb-module_mobileList__1rj5r breadcrumb_hds-breadcrumb__list--mobile__3k5FD")},r.createElement(u,{direction:"left"}),r.createElement(b,{item:a}))},p=e=>{let{list:a}=e;return r.createElement("ol",{className:(0,s.c)(m,"Breadcrumb-module_desktopList__3WHv- breadcrumb_hds-breadcrumb__list--desktop__2mWwT")},a.map(((e,t)=>r.createElement(r.Fragment,{key:e.title},r.createElement(_,{key:e.title,item:e,showSeparator:t<a.length-1})))))},g=e=>{let{list:a,ariaLabel:t,theme:l}=e;const i=(0,n.u)(d,l),c=a.reduceRight(((e,a)=>e||(a.path?a:void 0)),void 0);return c?r.createElement("nav",{"aria-label":t,className:(0,s.c)(d,i)},r.createElement(p,{list:a}),r.createElement(h,{item:c})):null}},83428:function(e,a,t){t.d(a,{S:function(){return o}});var r=t(80136),l=t(67294),s=t(7444),n=t(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,s.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const c=e=>{let{icon:a}=e;return l.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},a)},o=e=>{var{children:a,className:t,dataTestId:s,type:o="neutral",iconLeft:d}=e,m=(0,r._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,n.c)(i.statusLabel,i[o],d&&i.statusLabelWithIcon,t),"data-testid":s},m),d&&l.createElement(c,{icon:d}),a)}},38192:function(e,a,t){t.r(a);var r=t(11151),l=t(67294),s=t(58808),n=t(50275);const i=e=>{let{children:a,pageContext:t}=e;return l.createElement(n.default,{pageContext:t},a)};function c(e){const a=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li"},(0,r.ah)(),e.components),{PlaygroundPreview:t}=a;return t||function(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("PlaygroundPreview",!0),l.createElement(l.Fragment,null,l.createElement(a.h2,{id:"usage",style:{position:"relative"}},"Usage",l.createElement(a.a,{href:"#usage","aria-label":"usage permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.h3,{id:"example",style:{position:"relative"}},"Example",l.createElement(a.a,{href:"#example","aria-label":"example permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t,null,l.createElement(s.B,{ariaLabel:"Breadcrumb",list:[{title:"Front page",path:"/"},{title:"Health and social services",path:"/path"},{title:"Senior services",path:"/path/2ndLevelPath"},{title:"Informal care",path:"/path/2ndLevelPath/3rdLevelPath"},{title:"Care options",path:null}]})),"\n",l.createElement(a.h3,{id:"principles",style:{position:"relative"}},"Principles",l.createElement(a.a,{href:"#principles","aria-label":"principles permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.ul,null,"\n",l.createElement(a.li,null,"The breadcrumb may show the current page as the last item on the list. The current page should not be a link."),"\n",l.createElement(a.li,null,"The mobile version shows only one item which is a link to one step upward in the path."),"\n",l.createElement(a.li,null,"If there are no links to parent pages, breadcrumb should not be visible."),"\n"))}a.default=function(e){return void 0===e&&(e={}),l.createElement(i,e,l.createElement(c,e))}},50275:function(e,a,t){t.r(a);var r=t(11151),l=t(67294),s=t(83428),n=t(89482),i=(t(18607),t(26127)),c=t(57674);function o(e){const a=Object.assign({h1:"h1",a:"a",span:"span"},(0,r.ah)(),e.components);return i.Z||d("PageTabs",!1),i.Z.Tab||d("PageTabs.Tab",!0),i.Z.TabList||d("PageTabs.TabList",!0),i.Z.TabPanel||d("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(a.h1,{id:"breadcrumb",style:{position:"relative"}},"Breadcrumb",l.createElement(a.a,{href:"#breadcrumb","aria-label":"breadcrumb permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(s.S,{type:"alert"},"Beta"),l.createElement(s.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(c.Z)),"\n",l.createElement(n.Z,null,"Breadcrumb is a navigational element that provides links back to each previous page the user navigated through and\nshows the user's current location on a website."),"\n",l.createElement(i.Z,{pageContext:e.pageContext},l.createElement(i.Z.TabList,null,l.createElement(i.Z.Tab,{href:"/"},"Usage"),l.createElement(i.Z.Tab,{href:"/code"},"Code"),l.createElement(i.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(i.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(i.Z.TabPanel,null,e.children)))}function d(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,r.ah)(),e.components);return a?l.createElement(a,e,l.createElement(o,e)):o(e)}},89482:function(e,a,t){var r=t(67294);a.Z=e=>{let{color:a="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:l={},children:s}=e;return r.createElement("p",{style:{fontSize:t,color:a,maxWidth:600,...l}},s)}},26127:function(e,a,t){var r=t(67294),l=t(14160),s=t(94671);const n="PageTabList",i="PageTabPanel",c="PageTab",o=e=>{var a;let{pageContext:t,children:o}=e;const d=t.frontmatter.slug,m=Array.isArray(o)?o:[o],b=m.find((e=>(0,r.isValidElement)(e)&&e.type.componentName===n)),u=m.find((e=>(0,r.isValidElement)(e)&&e.type.componentName===i)),_=null===(a=b.props)||void 0===a?void 0:a.children.filter((e=>e.type.componentName===c)),h=_.findIndex((e=>d.endsWith(e.props.href))),p=-1===h?0:h,g=0===p?d:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(d);return r.createElement(s.a,{initiallyActiveTab:p},r.createElement(s.a.TabList,{className:"page-tabs-list"},_.map((e=>r.createElement(s.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?g:g+e.props.href))},e.props.children)))),_.map(((e,a)=>r.createElement(s.a.TabPanel,{key:e.props.href},p===a?u.props.children:r.createElement("div",null)))))},d=e=>{let{children:a}=e;return r.createElement(s.a.TabList,null,a)};d.componentName=n;const m=e=>{let{href:a,slug:t,children:l}=e;return r.createElement(s.a.Tab,null,l)};m.componentName=c;const b=e=>{let{children:a}=e;return r.createElement(s.a.TabPanel,null,a)};b.componentName=i,o.TabList=d,o.Tab=m,o.TabPanel=b,a.Z=o},57674:function(e,a,t){var r=t(67294),l=t(45422);a.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return r.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},r.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((a=>r.createElement("li",{key:a},r.createElement("span",{className:"status-name"},a),r.createElement("span",null,e[a]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-breadcrumb-tabs-mdx-fee2c2763290a354e310.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-breadcrumb-tabs-mdx-fee2c2763290a354e310.js
new file mode 100644
index 00000000000..eaf21ae96f7
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-breadcrumb-tabs-mdx-fee2c2763290a354e310.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[2291],{83428:function(e,a,t){t.d(a,{S:function(){return i}});var s=t(80136),l=t(67294),n=t(7444),r=t(34300),c={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:a}=e;return l.createElement("span",{className:c.statusLabelIcon,"aria-hidden":"true"},a)},i=e=>{var{children:a,className:t,dataTestId:n,type:i="neutral",iconLeft:u}=e,b=(0,s._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(c.statusLabel,c[i],u&&c.statusLabelWithIcon,t),"data-testid":n},b),u&&l.createElement(o,{icon:u}),a)}},50275:function(e,a,t){t.r(a);var s=t(11151),l=t(67294),n=t(83428),r=t(89482),c=(t(18607),t(26127)),o=t(57674);function i(e){const a=Object.assign({h1:"h1",a:"a",span:"span"},(0,s.ah)(),e.components);return c.Z||u("PageTabs",!1),c.Z.Tab||u("PageTabs.Tab",!0),c.Z.TabList||u("PageTabs.TabList",!0),c.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(a.h1,{id:"breadcrumb",style:{position:"relative"}},"Breadcrumb",l.createElement(a.a,{href:"#breadcrumb","aria-label":"breadcrumb permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(n.S,{type:"alert"},"Beta"),l.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(o.Z)),"\n",l.createElement(r.Z,null,"Breadcrumb is a navigational element that provides links back to each previous page the user navigated through and\nshows the user's current location on a website."),"\n",l.createElement(c.Z,{pageContext:e.pageContext},l.createElement(c.Z.TabList,null,l.createElement(c.Z.Tab,{href:"/"},"Usage"),l.createElement(c.Z.Tab,{href:"/code"},"Code"),l.createElement(c.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(c.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(c.Z.TabPanel,null,e.children)))}function u(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,s.ah)(),e.components);return a?l.createElement(a,e,l.createElement(i,e)):i(e)}},89482:function(e,a,t){var s=t(67294);a.Z=e=>{let{color:a="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:l={},children:n}=e;return s.createElement("p",{style:{fontSize:t,color:a,maxWidth:600,...l}},n)}},26127:function(e,a,t){var s=t(67294),l=t(14160),n=t(94671);const r="PageTabList",c="PageTabPanel",o="PageTab",i=e=>{var a;let{pageContext:t,children:i}=e;const u=t.frontmatter.slug,b=Array.isArray(i)?i:[i],d=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===r)),m=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===c)),h=null===(a=d.props)||void 0===a?void 0:a.children.filter((e=>e.type.componentName===o)),p=h.findIndex((e=>u.endsWith(e.props.href))),_=-1===p?0:p,g=0===_?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return s.createElement(n.a,{initiallyActiveTab:_},s.createElement(n.a.TabList,{className:"page-tabs-list"},h.map((e=>s.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?g:g+e.props.href))},e.props.children)))),h.map(((e,a)=>s.createElement(n.a.TabPanel,{key:e.props.href},_===a?m.props.children:s.createElement("div",null)))))},u=e=>{let{children:a}=e;return s.createElement(n.a.TabList,null,a)};u.componentName=r;const b=e=>{let{href:a,slug:t,children:l}=e;return s.createElement(n.a.Tab,null,l)};b.componentName=o;const d=e=>{let{children:a}=e;return s.createElement(n.a.TabPanel,null,a)};d.componentName=c,i.TabList=u,i.Tab=b,i.TabPanel=d,a.Z=i},57674:function(e,a,t){var s=t(67294),l=t(45422);a.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return s.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},s.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((a=>s.createElement("li",{key:a},s.createElement("span",{className:"status-name"},a),s.createElement("span",null,e[a]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-buttons-accessibility-mdx-26f0df0885e580f26a39.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-buttons-accessibility-mdx-26f0df0885e580f26a39.js
new file mode 100644
index 00000000000..7a29dd9262b
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-buttons-accessibility-mdx-26f0df0885e580f26a39.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[8863,3223],{83428:function(e,t,a){a.d(t,{S:function(){return c}});var n=a(80136),s=a(67294),l=a(7444),r=a(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,l.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:t}=e;return s.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:l,type:c="neutral",iconLeft:u}=e,d=(0,n._)(e,["children","className","dataTestId","type","iconLeft"]);return s.createElement("span",Object.assign({className:(0,r.c)(i.statusLabel,i[c],u&&i.statusLabelWithIcon,a),"data-testid":l},d),u&&s.createElement(o,{icon:u}),t)}},29626:function(e,t,a){a.r(t);var n=a(11151),s=a(67294),l=a(80699),r=a(1862),i=a(1076);const o=e=>{let{children:t,pageContext:a}=e;return s.createElement(r.default,{pageContext:a},t)};function c(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",strong:"strong",code:"code"},(0,n.ah)(),e.components);return s.createElement(s.Fragment,null,s.createElement(t.h2,{id:"accessibility",style:{position:"relative"}},"Accessibility",s.createElement(t.a,{href:"#accessibility","aria-label":"accessibility permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.h3,{id:"pay-attention-to",style:{position:"relative"}},"Pay attention to",s.createElement(t.a,{href:"#pay-attention-to","aria-label":"pay attention to permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.ul,null,"\n",s.createElement(t.li,null,s.createElement(t.strong,null,"It is advisable to use colour combinations provided by the implementation.")," These combinations are ensured to comply with WCAG AA requirements. When customising colours, refer to ",s.createElement(i.Z,{size:"M",href:"/foundation/design-tokens/colour"},"colour guidelines")," to ensure accessibility."),"\n",s.createElement(t.li,null,"In most cases, prefer using normal size buttons over small buttons. Default sized buttons are easier for users to notice and press."),"\n",s.createElement(t.li,null,"Pay attention to the button role. If you use the button as a link instead of an action (i.e. the button press causes a page load), you must specify a ",s.createElement(t.code,null,'role="link"')," attribute to the button."),"\n",s.createElement(t.li,null,"HDS Buttons (even the Small variant) comply with ",s.createElement(l.Z,{href:"https://www.w3.org/TR/WCAG21/#target-size"},"WCAG 2.5.5 Target Size (AAA) guideline"),". Customizing button sizes is not recommended."),"\n"),"\n",s.createElement(t.h3,{id:"related-accessibility-requirements",style:{position:"relative"}},"Related accessibility requirements",s.createElement(t.a,{href:"#related-accessibility-requirements","aria-label":"related accessibility requirements permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.ul,null,"\n",s.createElement(t.li,null,"\n",s.createElement(l.Z,{href:"https://www.w3.org/TR/WCAG21/#focus-visible"},"WCAG 2.4.7 - Focus visible"),"\n"),"\n",s.createElement(t.li,null,"\n",s.createElement(l.Z,{href:"https://www.w3.org/TR/WCAG21/#on-input"},"WCAG 3.2.2 - On input"),"\n"),"\n"))}t.default=function(e){return void 0===e&&(e={}),s.createElement(o,e,s.createElement(c,e))}},1862:function(e,t,a){a.r(t);var n=a(11151),s=a(67294),l=a(83428),r=a(57674),i=a(89482),o=(a(18607),a(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,n.ah)(),e.components);return o.Z||u("PageTabs",!1),o.Z.Tab||u("PageTabs.Tab",!0),o.Z.TabList||u("PageTabs.TabList",!0),o.Z.TabPanel||u("PageTabs.TabPanel",!0),s.createElement(s.Fragment,null,s.createElement(t.h1,{id:"button",style:{position:"relative"}},"Button",s.createElement(t.a,{href:"#button","aria-label":"button permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement("div",{class:"status-label-description"},s.createElement(l.S,{type:"info"},"Stable"),s.createElement(l.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),s.createElement(r.Z)),"\n",s.createElement(i.Z,null,"Buttons are meant to make actions easily visible and understandable to the user. HDS offers different kinds of button\nvariations which each suit for different needs."),"\n",s.createElement(o.Z,{pageContext:e.pageContext},s.createElement(o.Z.TabList,null,s.createElement(o.Z.Tab,{href:"/"},"Usage"),s.createElement(o.Z.Tab,{href:"/code"},"Code"),s.createElement(o.Z.Tab,{href:"/accessibility"},"Accessibility"),s.createElement(o.Z.Tab,{href:"/customisation"},"Customisation")),s.createElement(o.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,n.ah)(),e.components);return t?s.createElement(t,e,s.createElement(c,e)):c(e)}},89482:function(e,t,a){var n=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:s={},children:l}=e;return n.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...s}},l)}},26127:function(e,t,a){var n=a(67294),s=a(14160),l=a(94671);const r="PageTabList",i="PageTabPanel",o="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const u=a.frontmatter.slug,d=Array.isArray(c)?c:[c],b=d.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===r)),m=d.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===i)),h=null===(t=b.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===o)),p=h.findIndex((e=>u.endsWith(e.props.href))),f=-1===p?0:p,g=0===f?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return n.createElement(l.a,{initiallyActiveTab:f},n.createElement(l.a.TabList,{className:"page-tabs-list"},h.map((e=>n.createElement(l.a.Tab,{key:e.props.href,onClick:()=>(0,s.navigate)(""+("/"===e.props.href?g:g+e.props.href))},e.props.children)))),h.map(((e,t)=>n.createElement(l.a.TabPanel,{key:e.props.href},f===t?m.props.children:n.createElement("div",null)))))},u=e=>{let{children:t}=e;return n.createElement(l.a.TabList,null,t)};u.componentName=r;const d=e=>{let{href:t,slug:a,children:s}=e;return n.createElement(l.a.Tab,null,s)};d.componentName=o;const b=e=>{let{children:t}=e;return n.createElement(l.a.TabPanel,null,t)};b.componentName=i,c.TabList=u,c.Tab=d,c.TabPanel=b,t.Z=c},57674:function(e,t,a){var n=a(67294),s=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return n.createElement(s.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},n.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>n.createElement("li",{key:t},n.createElement("span",{className:"status-name"},t),n.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-buttons-code-mdx-fb6949b2d38e1b97b673.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-buttons-code-mdx-fb6949b2d38e1b97b673.js
new file mode 100644
index 00000000000..0a690caceb0
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-buttons-code-mdx-fb6949b2d38e1b97b673.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[7685,3223],{83428:function(e,t,n){n.d(t,{S:function(){return i}});var a=n(80136),l=n(67294),s=n(7444),r=n(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,s.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const c=e=>{let{icon:t}=e;return l.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},t)},i=e=>{var{children:t,className:n,dataTestId:s,type:i="neutral",iconLeft:u}=e,d=(0,a._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(o.statusLabel,o[i],u&&o.statusLabelWithIcon,n),"data-testid":s},d),u&&l.createElement(c,{icon:u}),t)}},23885:function(e,t,n){n.r(t);var a=n(11151),l=n(67294),s=n(17882),r=n(70476),o=n(12670),c=n(12818),i=n(1862);const u=e=>{let{children:t,pageContext:n}=e;return l.createElement(i.default,{pageContext:n},t)};function d(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",h4:"h4",pre:"pre",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",strong:"strong",p:"p"},(0,a.ah)(),e.components),{Playground:n,IconCheckCircleFill:i,Link:u,ExternalLink:d}=t;return d||m("ExternalLink",!0),i||m("IconCheckCircleFill",!0),u||m("Link",!0),n||m("Playground",!0),l.createElement(l.Fragment,null,l.createElement(t.h2,{id:"code",style:{position:"relative"}},"Code",l.createElement(t.a,{href:"#code","aria-label":"code permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h3,{id:"code-examples",style:{position:"relative"}},"Code examples",l.createElement(t.a,{href:"#code-examples","aria-label":"code examples permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h4,{id:"primary",style:{position:"relative"}},"Primary",l.createElement(t.a,{href:"#primary","aria-label":"primary permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n,{scope:{Button:s.B}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},"import { Button } from 'hds-react';\n\n() => <Button>Primary</Button>\n")),l.createElement(t.pre,null,l.createElement(t.code,{className:"language-html"},'<button type="button" class="hds-button hds-button--primary">\n  <span class="hds-button__label">Primary</span>\n</button>\n'))),"\n",l.createElement(t.h4,{id:"secondary",style:{position:"relative"}},"Secondary",l.createElement(t.a,{href:"#secondary","aria-label":"secondary permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n,{scope:{Button:s.B}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},"import { Button } from 'hds-react';\n\n() => <Button variant=\"secondary\">Secondary</Button>\n")),l.createElement(t.pre,null,l.createElement(t.code,{className:"language-html"},'<button type="button" class="hds-button hds-button--secondary">\n  <span class="hds-button__label">Secondary</span>\n</button>\n'))),"\n",l.createElement(t.h4,{id:"supplementary",style:{position:"relative"}},"Supplementary",l.createElement(t.a,{href:"#supplementary","aria-label":"supplementary permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n,{scope:{Button:s.B,IconTrash:r.bg}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},"import { Button, IconTrash } from 'hds-react';\n\n() => (\n  <Button variant=\"supplementary\" iconLeft={<IconTrash />}>\n    Supplementary\n  </Button>\n)\n")),l.createElement(t.pre,null,l.createElement(t.code,{className:"language-html"},'<button type="button" class="hds-button hds-button--supplementary">\n  <span aria-hidden="true" class="hds-icon hds-icon--trash"></span>\n  <span class="hds-button__label">Supplementary</span>\n</button>\n'))),"\n",l.createElement(t.h4,{id:"icon-button",style:{position:"relative"}},"Icon button",l.createElement(t.a,{href:"#icon-button","aria-label":"icon button permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n,{scope:{Button:s.B,IconShare:r.aW,IconAngleRight:o.I}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},"import { Button, IconShare, IconAngleRight } from 'hds-react';\n\n() => (\n  <div>\n    <Button iconLeft={<IconShare />}>Button</Button>\n    <Button iconRight={<IconAngleRight />}>Button</Button>\n    <Button iconLeft={<IconShare />} iconRight={<IconAngleRight />}>\n      Button\n    </Button>\n  </div>\n)\n")),l.createElement(t.pre,null,l.createElement(t.code,{className:"language-html"},'<div>\n  <button type="button" class="hds-button hds-button--primary">\n    <span aria-hidden="true" class="hds-icon hds-icon--share"></span>\n    <span class="hds-button__label">Button</span>\n  </button>\n\n  <button type="button" class="hds-button hds-button--primary">\n    <span class="hds-button__label">Button</span>\n    <span aria-hidden="true" class="hds-icon hds-icon--angle-right"></span>\n  </button>\n\n  <button type="button" class="hds-button hds-button--primary">\n    <span aria-hidden="true" class="hds-icon hds-icon--share"></span>\n    <span class="hds-button__label">Button</span>\n    <span aria-hidden="true" class="hds-icon hds-icon--angle-right"></span>\n  </button>\n</div>\n'))),"\n",l.createElement(t.h4,{id:"small-button",style:{position:"relative"}},"Small button",l.createElement(t.a,{href:"#small-button","aria-label":"small button permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n,{scope:{Button:s.B}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},'import { Button } from \'hds-react\';\n\n() => (\n  <div>\n    <Button size="small">Primary</Button>\n    <Button variant="secondary" size="small">\n      Secondary\n    </Button>\n    <Button variant="supplementary" size="small">\n      Supplementary\n    </Button>\n  </div>\n)\n')),l.createElement(t.pre,null,l.createElement(t.code,{className:"language-html"},'<div>\n  <button type="button" class="hds-button hds-button--primary hds-button--small">\n    <span class="hds-button__label">Primary</span>\n  </button>\n\n  <button type="button" class="hds-button hds-button--secondary hds-button--small">\n    <span class="hds-button__label">Secondary</span>\n  </button>\n\n  <button type="button" class="hds-button hds-button--supplementary hds-button--small">\n    <span class="hds-button__label">Supplementary</span>\n  </button>\n</div>\n'))),"\n",l.createElement(t.h4,{id:"utility-button",style:{position:"relative"}},"Utility button",l.createElement(t.a,{href:"#utility-button","aria-label":"utility button permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n,{scope:{Button:s.B,IconSaveDisketteFill:r.aQ,IconTrash:r.bg}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},"import { Button, IconSaveDisketteFill, IconTrash} from 'hds-react';\n\n() => (\n  <div>\n    <Button variant=\"success\" iconLeft={<IconSaveDisketteFill />}>Save</Button>\n    <Button\n      variant=\"danger\"\n      iconLeft={<IconTrash />}\n      style={{ marginLeft: 'var(--spacing-s)' }}\n    >\n      Delete\n    </Button>\n  </div>\n)\n")),l.createElement(t.pre,null,l.createElement(t.code,{className:"language-html"},'<div>\n  <button type="button" class="hds-button hds-button--success">\n    <span aria-hidden="true" class="hds-icon hds-icon--save-diskette-fill"></span>\n    <span class="hds-button__label">Save</span>\n  </button>\n\n  <button type="button" class="hds-button hds-button--danger">\n    <span aria-hidden="true" class="hds-icon hds-icon--trash"></span>\n    <span class="hds-button__label">Delete</span>\n  </button>\n</div>\n'))),"\n",l.createElement(t.h4,{id:"loading-button",style:{position:"relative"}},"Loading button",l.createElement(t.a,{href:"#loading-button","aria-label":"loading button permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n,{scope:{Button:s.B,Notification:c.N}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},'import { Button, Notification } from \'hds-react\';\n\n() => {\n  const [isLoading, setIsLoading] = React.useState(false);\n  const [showNotification, setShowNotification] = React.useState(false);\n  React.useEffect(() => {\n    let timeout;\n    if (isLoading) {\n      timeout = setTimeout(() => {\n        setShowNotification(true);\n        setIsLoading(false);\n      }, 2000);\n    }\n    return () => {\n      clearTimeout(timeout);\n    };\n  }, [isLoading]);\n  return (\n    <>\n      <Button\n        isLoading={isLoading}\n        loadingText="Saving form changes"\n        onClick={() => {\n          setShowNotification(false);\n          setIsLoading(true);\n        }}\n      >\n        Save form\n      </Button>\n      {showNotification && (\n        <Notification\n          key={new Date().toString()}\n          position="top-right"\n          displayAutoCloseProgress={false}\n          autoClose\n          dismissible\n          label="Form saved!"\n          type="success"\n          onClose={() => {\n            setShowNotification(false);\n          }}\n        >\n          Saving your form was successful.\n        </Notification>\n      )}\n    </>\n  );\n}\n'))),"\n",l.createElement(t.h4,{id:"link-button",style:{position:"relative"}},"Link button",l.createElement(t.a,{href:"#link-button","aria-label":"link button permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n,{scope:{Button:s.B}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},"import { Button } from 'hds-react';\n\n() => <Button role=\"link\" onClick={() => { window.open('/') }}>Link to page</Button>\n")),l.createElement(t.pre,null,l.createElement(t.code,{className:"language-html"},'<button role="link" type="button" class="hds-button hds-button--primary" onclick="window.open(\'/\')">\n  <span class="hds-button__label">Link to page</span>\n</button>\n'))),"\n",l.createElement(t.h3,{id:"packages",style:{position:"relative"}},"Packages",l.createElement(t.a,{href:"#packages","aria-label":"packages permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.table,null,l.createElement(t.thead,null,l.createElement(t.tr,null,l.createElement(t.th,null,"Package"),l.createElement(t.th,null,"Included"),l.createElement(t.th,null,"Storybook link"),l.createElement(t.th,null,"Source link"))),l.createElement(t.tbody,null,l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.strong,null,"HDS React")),l.createElement(t.td,null,l.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},l.createElement(i)," Yes ")),l.createElement(t.td,null,l.createElement(u,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-button--primary"},"View in Storybook")),l.createElement(t.td,null,l.createElement(d,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/react/src/components/button"},"View source"))),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.strong,null,"HDS Core")),l.createElement(t.td,null,l.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},l.createElement(i)," Yes ")),l.createElement(t.td,null,l.createElement(u,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/core/?path=/story/components-button--primary"},"View in Storybook")),l.createElement(t.td,null,l.createElement(d,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/core/src/components/button"},"View source"))))),"\n",l.createElement(t.h3,{id:"properties",style:{position:"relative"}},"Properties",l.createElement(t.a,{href:"#properties","aria-label":"properties permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"Note! You can find the full list of properties in the ",l.createElement(u,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/docs/components-button--primary"},"React Storybook.")),"\n",l.createElement(t.table,null,l.createElement(t.thead,null,l.createElement(t.tr,null,l.createElement(t.th,null,"Property"),l.createElement(t.th,null,"Description"),l.createElement(t.th,null,"Values"),l.createElement(t.th,null,"Default value"))),l.createElement(t.tbody,null,l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"variant")),l.createElement(t.td,null,"Variant of the button."),l.createElement(t.td,null,l.createElement(t.code,null,'"primary"')," ",l.createElement(t.code,null,'"secondary"')," ",l.createElement(t.code,null,'"supplementary"')," ",l.createElement(t.code,null,'"success"')," ",l.createElement(t.code,null,'"danger"')),l.createElement(t.td,null,l.createElement(t.code,null,'"primary"'))),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"size")),l.createElement(t.td,null,"Size of the button."),l.createElement(t.td,null,l.createElement(t.code,null,'"default"')," ",l.createElement(t.code,null,'"small"')),l.createElement(t.td,null,l.createElement(t.code,null,'"default"'))),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"iconLeft")),l.createElement(t.td,null,"Icon placed on the left side of the button label."),l.createElement(t.td,null,l.createElement(t.code,null,"ReactNode")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"iconRight")),l.createElement(t.td,null,"Icon placed on the right side of the button label."),l.createElement(t.td,null,l.createElement(t.code,null,"ReactNode")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"fullWidth")),l.createElement(t.td,null,"If set to true, the button will take full width of its container."),l.createElement(t.td,null,l.createElement(t.code,null,"boolean")),l.createElement(t.td,null,"false")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"isLoading")),l.createElement(t.td,null,"If set to true, a loading spinner is displayed inside the button."),l.createElement(t.td,null,l.createElement(t.code,null,"boolean")),l.createElement(t.td,null,"false")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"loadingText")),l.createElement(t.td,null,"Visible loading text to be shown next to the loading spinner."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,"-")))))}function m(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){return void 0===e&&(e={}),l.createElement(u,e,l.createElement(d,e))}},1862:function(e,t,n){n.r(t);var a=n(11151),l=n(67294),s=n(83428),r=n(57674),o=n(89482),c=(n(18607),n(26127));function i(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,a.ah)(),e.components);return c.Z||u("PageTabs",!1),c.Z.Tab||u("PageTabs.Tab",!0),c.Z.TabList||u("PageTabs.TabList",!0),c.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"button",style:{position:"relative"}},"Button",l.createElement(t.a,{href:"#button","aria-label":"button permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(s.S,{type:"info"},"Stable"),l.createElement(s.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(o.Z,null,"Buttons are meant to make actions easily visible and understandable to the user. HDS offers different kinds of button\nvariations which each suit for different needs."),"\n",l.createElement(c.Z,{pageContext:e.pageContext},l.createElement(c.Z.TabList,null,l.createElement(c.Z.Tab,{href:"/"},"Usage"),l.createElement(c.Z.Tab,{href:"/code"},"Code"),l.createElement(c.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(c.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(c.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,a.ah)(),e.components);return t?l.createElement(t,e,l.createElement(i,e)):i(e)}},89482:function(e,t,n){var a=n(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:n="var(--fontsize-body-xl)",style:l={},children:s}=e;return a.createElement("p",{style:{fontSize:n,color:t,maxWidth:600,...l}},s)}},26127:function(e,t,n){var a=n(67294),l=n(14160),s=n(94671);const r="PageTabList",o="PageTabPanel",c="PageTab",i=e=>{var t;let{pageContext:n,children:i}=e;const u=n.frontmatter.slug,d=Array.isArray(i)?i:[i],m=d.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===r)),h=d.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===o)),p=null===(t=m.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===c)),b=p.findIndex((e=>u.endsWith(e.props.href))),E=-1===b?0:b,g=0===E?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return a.createElement(s.a,{initiallyActiveTab:E},a.createElement(s.a.TabList,{className:"page-tabs-list"},p.map((e=>a.createElement(s.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?g:g+e.props.href))},e.props.children)))),p.map(((e,t)=>a.createElement(s.a.TabPanel,{key:e.props.href},E===t?h.props.children:a.createElement("div",null)))))},u=e=>{let{children:t}=e;return a.createElement(s.a.TabList,null,t)};u.componentName=r;const d=e=>{let{href:t,slug:n,children:l}=e;return a.createElement(s.a.Tab,null,l)};d.componentName=c;const m=e=>{let{children:t}=e;return a.createElement(s.a.TabPanel,null,t)};m.componentName=o,i.TabList=u,i.Tab=d,i.TabPanel=m,t.Z=i},57674:function(e,t,n){var a=n(67294),l=n(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return a.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},a.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>a.createElement("li",{key:t},a.createElement("span",{className:"status-name"},t),a.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-buttons-customisation-mdx-aad900d3f10e2d745c68.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-buttons-customisation-mdx-aad900d3f10e2d745c68.js
new file mode 100644
index 00000000000..5848a3cc89e
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-buttons-customisation-mdx-aad900d3f10e2d745c68.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[6408,3223],{36870:function(e,t,a){a.d(t,{I:function(){return s}});var l=a(67294),n=a(32719);const s=e=>{let{ariaLabel:t="arrow-right",ariaLabelledby:a,ariaHidden:s=!0,className:r="",color:o,size:c="s",style:i={}}=e;return l.createElement("svg",{className:[n.s.icon,n.s[c],r].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":a,"aria-hidden":s,color:o,style:i},l.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z",fill:"currentColor"}))}},83428:function(e,t,a){a.d(t,{S:function(){return i}});var l=a(80136),n=a(67294),s=a(7444),r=a(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,s.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const c=e=>{let{icon:t}=e;return n.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},t)},i=e=>{var{children:t,className:a,dataTestId:s,type:i="neutral",iconLeft:u}=e,d=(0,l._)(e,["children","className","dataTestId","type","iconLeft"]);return n.createElement("span",Object.assign({className:(0,r.c)(o.statusLabel,o[i],u&&o.statusLabelWithIcon,a),"data-testid":s},d),u&&n.createElement(c,{icon:u}),t)}},91264:function(e,t,a){a.r(t);var l=a(11151),n=a(67294),s=a(17882),r=a(36870),o=a(1862);const c=e=>{let{children:t,pageContext:a}=e;return n.createElement(o.default,{pageContext:a},t)};function i(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",p:"p",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",pre:"pre"},(0,l.ah)(),e.components),{Playground:a}=t;return a||function(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Playground",!0),n.createElement(n.Fragment,null,n.createElement(t.h2,{id:"customisation",style:{position:"relative"}},"Customisation",n.createElement(t.a,{href:"#customisation","aria-label":"customisation permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.h3,{id:"customisation-properties",style:{position:"relative"}},"Customisation properties",n.createElement(t.a,{href:"#customisation-properties","aria-label":"customisation properties permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.p,null,"In Core version, you can use button theme classes ",n.createElement(t.code,null,"hds-button--theme-black")," and ",n.createElement(t.code,null,"hds-button--theme-coat")," for different colour schemes."),"\n",n.createElement(t.p,null,"In React version, you can use the ",n.createElement(t.code,null,"theme")," property to customise the component."),"\n",n.createElement(t.p,null,"See all available theme variables in the table below."),"\n",n.createElement(t.table,null,n.createElement(t.thead,null,n.createElement(t.tr,null,n.createElement(t.th,null,"Theme variable"),n.createElement(t.th,null,"Description"))),n.createElement(t.tbody,null,n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement("code",null,"coat")),n.createElement(t.td,null,"Background color of the button is coat.")),n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement("code",null,"black")),n.createElement(t.td,null,"Background color of the button is black.")))),"\n",n.createElement(t.h3,{id:"customisation-example",style:{position:"relative"}},"Customisation example",n.createElement(t.a,{href:"#customisation-example","aria-label":"customisation example permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(a,{scope:{Button:s.B,IconArrowRight:r.I}},n.createElement(t.pre,null,n.createElement(t.code,{className:"language-jsx"},"import { Button, IconArrowRight } from 'hds-react';\n\n() => (<Button theme=\"coat\" iconRight={<IconArrowRight />}>Customised button</Button>)\n")),n.createElement(t.pre,null,n.createElement(t.code,{className:"language-html"},'<button type="button" class="hds-button hds-button--primary hds-button--theme-coat">\n  <span class="hds-button__label">Customised button</span>\n  <span aria-hidden="true" class="hds-icon hds-icon--arrow-right"></span>\n</button>\n'))))}t.default=function(e){return void 0===e&&(e={}),n.createElement(c,e,n.createElement(i,e))}},1862:function(e,t,a){a.r(t);var l=a(11151),n=a(67294),s=a(83428),r=a(57674),o=a(89482),c=(a(18607),a(26127));function i(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,l.ah)(),e.components);return c.Z||u("PageTabs",!1),c.Z.Tab||u("PageTabs.Tab",!0),c.Z.TabList||u("PageTabs.TabList",!0),c.Z.TabPanel||u("PageTabs.TabPanel",!0),n.createElement(n.Fragment,null,n.createElement(t.h1,{id:"button",style:{position:"relative"}},"Button",n.createElement(t.a,{href:"#button","aria-label":"button permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement("div",{class:"status-label-description"},n.createElement(s.S,{type:"info"},"Stable"),n.createElement(s.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),n.createElement(r.Z)),"\n",n.createElement(o.Z,null,"Buttons are meant to make actions easily visible and understandable to the user. HDS offers different kinds of button\nvariations which each suit for different needs."),"\n",n.createElement(c.Z,{pageContext:e.pageContext},n.createElement(c.Z.TabList,null,n.createElement(c.Z.Tab,{href:"/"},"Usage"),n.createElement(c.Z.Tab,{href:"/code"},"Code"),n.createElement(c.Z.Tab,{href:"/accessibility"},"Accessibility"),n.createElement(c.Z.Tab,{href:"/customisation"},"Customisation")),n.createElement(c.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,l.ah)(),e.components);return t?n.createElement(t,e,n.createElement(i,e)):i(e)}},89482:function(e,t,a){var l=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:n={},children:s}=e;return l.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...n}},s)}},26127:function(e,t,a){var l=a(67294),n=a(14160),s=a(94671);const r="PageTabList",o="PageTabPanel",c="PageTab",i=e=>{var t;let{pageContext:a,children:i}=e;const u=a.frontmatter.slug,d=Array.isArray(i)?i:[i],m=d.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===r)),b=d.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===o)),h=null===(t=m.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===c)),p=h.findIndex((e=>u.endsWith(e.props.href))),f=-1===p?0:p,E=0===f?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return l.createElement(s.a,{initiallyActiveTab:f},l.createElement(s.a.TabList,{className:"page-tabs-list"},h.map((e=>l.createElement(s.a.Tab,{key:e.props.href,onClick:()=>(0,n.navigate)(""+("/"===e.props.href?E:E+e.props.href))},e.props.children)))),h.map(((e,t)=>l.createElement(s.a.TabPanel,{key:e.props.href},f===t?b.props.children:l.createElement("div",null)))))},u=e=>{let{children:t}=e;return l.createElement(s.a.TabList,null,t)};u.componentName=r;const d=e=>{let{href:t,slug:a,children:n}=e;return l.createElement(s.a.Tab,null,n)};d.componentName=c;const m=e=>{let{children:t}=e;return l.createElement(s.a.TabPanel,null,t)};m.componentName=o,i.TabList=u,i.Tab=d,i.TabPanel=m,t.Z=i},57674:function(e,t,a){var l=a(67294),n=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return l.createElement(n.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},l.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>l.createElement("li",{key:t},l.createElement("span",{className:"status-name"},t),l.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-buttons-index-mdx-87b2da23a0923d27cfe5.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-buttons-index-mdx-87b2da23a0923d27cfe5.js
new file mode 100644
index 00000000000..9010afbc3a2
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-buttons-index-mdx-87b2da23a0923d27cfe5.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[8087,3223],{83428:function(e,t,a){a.d(t,{S:function(){return c}});var n=a(80136),s=a(67294),l=a(7444),r=a(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,l.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:t}=e;return s.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:l,type:c="neutral",iconLeft:d}=e,u=(0,n._)(e,["children","className","dataTestId","type","iconLeft"]);return s.createElement("span",Object.assign({className:(0,r.c)(i.statusLabel,i[c],d&&i.statusLabelWithIcon,a),"data-testid":l},u),d&&s.createElement(o,{icon:d}),t)}},30996:function(e,t,a){a.r(t),a.d(t,{LoadingButtonExample:function(){return u}});var n=a(11151),s=a(67294),l=a(17882),r=a(12818),i=a(70476),o=a(12670),c=a(1862);const d=e=>{let{children:t,pageContext:a}=e;return s.createElement(c.default,{pageContext:a},t)},u=()=>{const[e,t]=s.useState(!1),[a,n]=s.useState(!1);return s.useEffect((()=>{let a;return e&&(a=setTimeout((()=>{n(!0),t(!1)}),2e3)),()=>{clearTimeout(a)}}),[e]),s.createElement(s.Fragment,null,s.createElement(l.B,{isLoading:e,loadingText:"Saving form changes",onClick:()=>{n(!1),t(!0)}},"Save form"),a&&s.createElement(r.N,{key:(new Date).toString(),position:"top-right",displayAutoCloseProgress:!1,autoClose:!0,dismissible:!0,label:"Form saved!",type:"success",onClose:()=>{n(!1)}},"Saving your form was successful."))};function m(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",h4:"h4",p:"p",code:"code"},(0,n.ah)(),e.components),{PlaygroundPreview:a}=t;return a||function(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("PlaygroundPreview",!0),s.createElement(s.Fragment,null,s.createElement(t.h2,{id:"usage",style:{position:"relative"}},"Usage",s.createElement(t.a,{href:"#usage","aria-label":"usage permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.h3,{id:"example",style:{position:"relative"}},"Example",s.createElement(t.a,{href:"#example","aria-label":"example permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(a,null,s.createElement(l.B,null,"Button")),"\n",s.createElement(t.h3,{id:"principles",style:{position:"relative"}},"Principles",s.createElement(t.a,{href:"#principles","aria-label":"principles permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.ul,null,"\n",s.createElement(t.li,null,s.createElement("b",null,"Buttons are used to trigger an action.")," Be cautious when using buttons for navigating. In most cases, you should prefer links for this purpose."),"\n",s.createElement(t.li,null,"Button label should always describe the action that the buttons is going to trigger. A good practice is to start the label with a verb and use two-word labels at maximum."),"\n",s.createElement(t.li,null,"Use provided button types to control the visual priority of the view. Priority of the button types is the following: Primary -> Secondary -> Supplementary."),"\n",s.createElement(t.li,null,"In mobile screen sizes, use full-width buttons. In other sizes use buttons that scale according to their content."),"\n",s.createElement(t.li,null,"Try to keep the amount of buttons in one view low. If there is a need for several actions in one view, consider using the smaller button variant."),"\n"),"\n",s.createElement(t.h3,{id:"variations",style:{position:"relative"}},"Variations",s.createElement(t.a,{href:"#variations","aria-label":"variations permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.h4,{id:"primary",style:{position:"relative"}},"Primary",s.createElement(t.a,{href:"#primary","aria-label":"primary permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.p,null,"A Primary button is reserved for the most important action on the screen. Primary action is usually either mandatory\nor essential for the user. Primary buttons are designed to clearly highlight the most important action, and therefore\nyou should avoid having multiple primary buttons on one screen. For less important actions, consider using secondary\nor supplementary buttons instead."),"\n",s.createElement(a,null,s.createElement(l.B,null,"Primary")),"\n",s.createElement(t.h4,{id:"secondary",style:{position:"relative"}},"Secondary",s.createElement(t.a,{href:"#secondary","aria-label":"secondary permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.p,null,"Secondary buttons are used for actions which are not mandatory or essential for the user. Often screens will include\nmultiple secondary buttons alongside one primary button."),"\n",s.createElement(a,null,s.createElement(l.B,{variant:"secondary"},"Primary")),"\n",s.createElement(t.h4,{id:"supplementary",style:{position:"relative"}},"Supplementary",s.createElement(t.a,{href:"#supplementary","aria-label":"supplementary permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.p,null,"Supplementary buttons can be used in similar cases as secondary buttons. However, supplementary buttons are meant for\nactions which are intentionally wanted to be less visible to the user. These kind of actions include i.e. cancel and\ndismiss functionalities. Note! Since supplementary buttons do not have borders, an accompanying icon is required to\nclearly distinguish them from links and passive text elements."),"\n",s.createElement(a,null,s.createElement(l.B,{variant:"supplementary",iconLeft:s.createElement(i.bg)},s.createElement(t.p,null,"Supplementary"))),"\n",s.createElement(t.h4,{id:"with-icons",style:{position:"relative"}},"With icons",s.createElement(t.a,{href:"#with-icons","aria-label":"with icons permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.p,null,"Icons can be added to buttons to make the action easier to understand. Sometimes it can also be beneficial to add\nicons to make important actions more distinguishable. It is not recommended to use buttons with icons without text\nlabel because users interpret icons in different ways. More information on icon usage in the icon guidelines."),"\n",s.createElement(a,{style:{marginTop:"var(--spacing-m)"}},s.createElement(l.B,{iconLeft:s.createElement(i.aW)},"Button"),s.createElement(l.B,{iconRight:s.createElement(o.I),style:{marginLeft:"var(--spacing-s)"}},"Button"),s.createElement(l.B,{iconLeft:s.createElement(i.aW),iconRight:s.createElement(o.I),style:{marginLeft:"var(--spacing-s)"}},"Button")),"\n",s.createElement(t.h4,{id:"small",style:{position:"relative"}},"Small",s.createElement(t.a,{href:"#small","aria-label":"small permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.p,null,"It is recommended to use the standard button size in most cases. If there is a big number of actions in the same view,\nsmall buttons can be used instead of the normal sized buttons. Small buttons can be especially useful in mobile screen\nsizes to ensure uncluttered view with multiple available actions."),"\n",s.createElement(a,{style:{marginTop:"var(--spacing-m)"}},s.createElement(l.B,{size:"small"},"Primary"),s.createElement(l.B,{variant:"secondary",size:"small",style:{marginLeft:"var(--spacing-s)"}},"Secondary"),s.createElement(l.B,{variant:"supplementary",size:"small",style:{marginLeft:"var(--spacing-s)"}},"Supplementary")),"\n",s.createElement(t.h4,{id:"utility",style:{position:"relative"}},"Utility",s.createElement(t.a,{href:"#utility","aria-label":"utility permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.p,null,"If required, to achieve clearer user interface, you may also use additional utility colours. Different visual styles\nof these buttons can be used to better inform users of destructive or dangerous actions. To comply with WCAG\nrequirement 1.4.1 Use of Color, these colours are more accessible when paired with an icon."),"\n",s.createElement(a,{style:{marginTop:"var(--spacing-m)"}},s.createElement(l.B,{variant:"success",iconLeft:s.createElement(i.aQ)},"Save"),s.createElement(l.B,{variant:"danger",iconLeft:s.createElement(i.bg),style:{marginLeft:"var(--spacing-s)"}},"Delete")),"\n",s.createElement(t.h4,{id:"loading",style:{position:"relative"}},"Loading",s.createElement(t.a,{href:"#loading","aria-label":"loading permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.p,null,"If an action triggered by the button press is not immediate, a loading button state should be shown to the user to\nindicate the loading period. When the loading action is triggered at the button press, the button will change its\nstate to loading. After the loading is complete, either the next page loads or if the page stays the same, you should\nuse other methods (such as notifications) to indicate the loading result. Note! It is not recommended to use\nSupplementary buttons for loading actions since it can be difficult for the user to differentiate from the loading\nstate button."),"\n","\n",s.createElement(a,{style:{marginTop:"var(--spacing-m)"}},s.createElement(u)),"\n",s.createElement(t.h4,{id:"used-as-a-link",style:{position:"relative"}},"Used as a link",s.createElement(t.a,{href:"#used-as-a-link","aria-label":"used as a link permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.p,null,"If the button is used as a link instead of an action, a ",s.createElement(t.code,null,'role="link"')," attribute should be added to the button."),"\n",s.createElement(a,null,s.createElement(l.B,{role:"link",onClick:()=>window.open("/")},"Button")))}t.default=function(e){return void 0===e&&(e={}),s.createElement(d,e,s.createElement(m,e))}},1862:function(e,t,a){a.r(t);var n=a(11151),s=a(67294),l=a(83428),r=a(57674),i=a(89482),o=(a(18607),a(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,n.ah)(),e.components);return o.Z||d("PageTabs",!1),o.Z.Tab||d("PageTabs.Tab",!0),o.Z.TabList||d("PageTabs.TabList",!0),o.Z.TabPanel||d("PageTabs.TabPanel",!0),s.createElement(s.Fragment,null,s.createElement(t.h1,{id:"button",style:{position:"relative"}},"Button",s.createElement(t.a,{href:"#button","aria-label":"button permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement("div",{class:"status-label-description"},s.createElement(l.S,{type:"info"},"Stable"),s.createElement(l.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),s.createElement(r.Z)),"\n",s.createElement(i.Z,null,"Buttons are meant to make actions easily visible and understandable to the user. HDS offers different kinds of button\nvariations which each suit for different needs."),"\n",s.createElement(o.Z,{pageContext:e.pageContext},s.createElement(o.Z.TabList,null,s.createElement(o.Z.Tab,{href:"/"},"Usage"),s.createElement(o.Z.Tab,{href:"/code"},"Code"),s.createElement(o.Z.Tab,{href:"/accessibility"},"Accessibility"),s.createElement(o.Z.Tab,{href:"/customisation"},"Customisation")),s.createElement(o.Z.TabPanel,null,e.children)))}function d(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,n.ah)(),e.components);return t?s.createElement(t,e,s.createElement(c,e)):c(e)}},89482:function(e,t,a){var n=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:s={},children:l}=e;return n.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...s}},l)}},26127:function(e,t,a){var n=a(67294),s=a(14160),l=a(94671);const r="PageTabList",i="PageTabPanel",o="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const d=a.frontmatter.slug,u=Array.isArray(c)?c:[c],m=u.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===r)),h=u.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===i)),p=null===(t=m.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===o)),b=p.findIndex((e=>d.endsWith(e.props.href))),g=-1===b?0:b,f=0===g?d:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(d);return n.createElement(l.a,{initiallyActiveTab:g},n.createElement(l.a.TabList,{className:"page-tabs-list"},p.map((e=>n.createElement(l.a.Tab,{key:e.props.href,onClick:()=>(0,s.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),p.map(((e,t)=>n.createElement(l.a.TabPanel,{key:e.props.href},g===t?h.props.children:n.createElement("div",null)))))},d=e=>{let{children:t}=e;return n.createElement(l.a.TabList,null,t)};d.componentName=r;const u=e=>{let{href:t,slug:a,children:s}=e;return n.createElement(l.a.Tab,null,s)};u.componentName=o;const m=e=>{let{children:t}=e;return n.createElement(l.a.TabPanel,null,t)};m.componentName=i,c.TabList=d,c.Tab=u,c.TabPanel=m,t.Z=c},57674:function(e,t,a){var n=a(67294),s=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return n.createElement(s.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},n.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>n.createElement("li",{key:t},n.createElement("span",{className:"status-name"},t),n.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-buttons-tabs-mdx-cd46fdc2009425fae19e.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-buttons-tabs-mdx-cd46fdc2009425fae19e.js
new file mode 100644
index 00000000000..d800be33524
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-buttons-tabs-mdx-cd46fdc2009425fae19e.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[3223],{83428:function(e,t,a){a.d(t,{S:function(){return i}});var s=a(80136),l=a(67294),n=a(7444),r=a(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const c=e=>{let{icon:t}=e;return l.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},t)},i=e=>{var{children:t,className:a,dataTestId:n,type:i="neutral",iconLeft:u}=e,b=(0,s._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(o.statusLabel,o[i],u&&o.statusLabelWithIcon,a),"data-testid":n},b),u&&l.createElement(c,{icon:u}),t)}},1862:function(e,t,a){a.r(t);var s=a(11151),l=a(67294),n=a(83428),r=a(57674),o=a(89482),c=(a(18607),a(26127));function i(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,s.ah)(),e.components);return c.Z||u("PageTabs",!1),c.Z.Tab||u("PageTabs.Tab",!0),c.Z.TabList||u("PageTabs.TabList",!0),c.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"button",style:{position:"relative"}},"Button",l.createElement(t.a,{href:"#button","aria-label":"button permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(n.S,{type:"info"},"Stable"),l.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(o.Z,null,"Buttons are meant to make actions easily visible and understandable to the user. HDS offers different kinds of button\nvariations which each suit for different needs."),"\n",l.createElement(c.Z,{pageContext:e.pageContext},l.createElement(c.Z.TabList,null,l.createElement(c.Z.Tab,{href:"/"},"Usage"),l.createElement(c.Z.Tab,{href:"/code"},"Code"),l.createElement(c.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(c.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(c.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,s.ah)(),e.components);return t?l.createElement(t,e,l.createElement(i,e)):i(e)}},89482:function(e,t,a){var s=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:l={},children:n}=e;return s.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...l}},n)}},26127:function(e,t,a){var s=a(67294),l=a(14160),n=a(94671);const r="PageTabList",o="PageTabPanel",c="PageTab",i=e=>{var t;let{pageContext:a,children:i}=e;const u=a.frontmatter.slug,b=Array.isArray(i)?i:[i],d=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===r)),m=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===o)),h=null===(t=d.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===c)),p=h.findIndex((e=>u.endsWith(e.props.href))),_=-1===p?0:p,f=0===_?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return s.createElement(n.a,{initiallyActiveTab:_},s.createElement(n.a.TabList,{className:"page-tabs-list"},h.map((e=>s.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),h.map(((e,t)=>s.createElement(n.a.TabPanel,{key:e.props.href},_===t?m.props.children:s.createElement("div",null)))))},u=e=>{let{children:t}=e;return s.createElement(n.a.TabList,null,t)};u.componentName=r;const b=e=>{let{href:t,slug:a,children:l}=e;return s.createElement(n.a.Tab,null,l)};b.componentName=c;const d=e=>{let{children:t}=e;return s.createElement(n.a.TabPanel,null,t)};d.componentName=o,i.TabList=u,i.Tab=b,i.TabPanel=d,t.Z=i},57674:function(e,t,a){var s=a(67294),l=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return s.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},s.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>s.createElement("li",{key:t},s.createElement("span",{className:"status-name"},t),s.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-card-accessibility-mdx-3bb0e67c26ae23674fc2.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-card-accessibility-mdx-3bb0e67c26ae23674fc2.js
new file mode 100644
index 00000000000..ed052d39449
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-card-accessibility-mdx-3bb0e67c26ae23674fc2.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[9787,8247],{83428:function(e,t,a){a.d(t,{S:function(){return c}});var s=a(80136),l=a(67294),n=a(7444),r=a(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:t}=e;return l.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:n,type:c="neutral",iconLeft:u}=e,d=(0,s._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(i.statusLabel,i[c],u&&i.statusLabelWithIcon,a),"data-testid":n},d),u&&l.createElement(o,{icon:u}),t)}},84545:function(e,t,a){a.r(t);var s=a(11151),l=a(67294),n=a(80699),r=a(9256);const i=e=>{let{children:t,pageContext:a}=e;return l.createElement(r.default,{pageContext:a},t)};function o(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",code:"code"},(0,s.ah)(),e.components);return l.createElement(l.Fragment,null,l.createElement(t.h2,{id:"accessibility",style:{position:"relative"}},"Accessibility",l.createElement(t.a,{href:"#accessibility","aria-label":"accessibility permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h3,{id:"pay-attention-to",style:{position:"relative"}},"Pay attention to",l.createElement(t.a,{href:"#pay-attention-to","aria-label":"pay attention to permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,"Card must have either a visual heading or ",l.createElement(t.code,null,"aria-label")," as a title. This describes the Card's content for assistive technologies."),"\n",l.createElement(t.li,null,"If you use buttons in your cards, pay attention to the button role. If you use the button as a link instead of an action (i.e. the button press causes a page load), you must specify a ",l.createElement(t.code,null,'role="link"')," attribute to the button."),"\n",l.createElement(t.li,null,"The colour contrast between the Card and its background must comply with ",l.createElement(n.Z,{href:"https://www.w3.org/TR/WCAG21/#contrast-minimum"},"WCAG AA Level contrast ratios"),". If needed, you may use a Card border to increase the contrast to its background."),"\n"))}t.default=function(e){return void 0===e&&(e={}),l.createElement(i,e,l.createElement(o,e))}},9256:function(e,t,a){a.r(t);var s=a(11151),l=a(67294),n=a(83428),r=a(57674),i=a(89482),o=(a(18607),a(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,s.ah)(),e.components);return o.Z||u("PageTabs",!1),o.Z.Tab||u("PageTabs.Tab",!0),o.Z.TabList||u("PageTabs.TabList",!0),o.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"card",style:{position:"relative"}},"Card",l.createElement(t.a,{href:"#card","aria-label":"card permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(n.S,{type:"info"},"Stable"),l.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(i.Z,null,"Cards can be used to divide and organise interface content for better understandability and readability. When used correctly, Cards can help your users to scan through vast amounts of information quicker."),"\n",l.createElement(o.Z,{pageContext:e.pageContext},l.createElement(o.Z.TabList,null,l.createElement(o.Z.Tab,{href:"/"},"Usage"),l.createElement(o.Z.Tab,{href:"/code"},"Code"),l.createElement(o.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(o.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(o.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,s.ah)(),e.components);return t?l.createElement(t,e,l.createElement(c,e)):c(e)}},89482:function(e,t,a){var s=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:l={},children:n}=e;return s.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...l}},n)}},26127:function(e,t,a){var s=a(67294),l=a(14160),n=a(94671);const r="PageTabList",i="PageTabPanel",o="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const u=a.frontmatter.slug,d=Array.isArray(c)?c:[c],b=d.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===r)),h=d.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===i)),m=null===(t=b.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===o)),p=m.findIndex((e=>u.endsWith(e.props.href))),f=-1===p?0:p,_=0===f?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return s.createElement(n.a,{initiallyActiveTab:f},s.createElement(n.a.TabList,{className:"page-tabs-list"},m.map((e=>s.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?_:_+e.props.href))},e.props.children)))),m.map(((e,t)=>s.createElement(n.a.TabPanel,{key:e.props.href},f===t?h.props.children:s.createElement("div",null)))))},u=e=>{let{children:t}=e;return s.createElement(n.a.TabList,null,t)};u.componentName=r;const d=e=>{let{href:t,slug:a,children:l}=e;return s.createElement(n.a.Tab,null,l)};d.componentName=o;const b=e=>{let{children:t}=e;return s.createElement(n.a.TabPanel,null,t)};b.componentName=i,c.TabList=u,c.Tab=d,c.TabPanel=b,t.Z=c},57674:function(e,t,a){var s=a(67294),l=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return s.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},s.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>s.createElement("li",{key:t},s.createElement("span",{className:"status-name"},t),s.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-card-code-mdx-b8ba56226c3f22a1cd50.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-card-code-mdx-b8ba56226c3f22a1cd50.js
new file mode 100644
index 00000000000..9f89563a05e
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-card-code-mdx-b8ba56226c3f22a1cd50.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[5111,8247],{45433:function(e,a,t){t.d(a,{C:function(){return c}});var n=t(80136),l=t(67294),r=t(7444),s=t(34300),o=t(97640),i="Card-module_card__1WbKx";(0,r.s)(".card_hds-card__227qQ{--background-color:var(--color-white);--border-color:var(--color-black-90);--color:var(--color-black-90);--border-width:2px;--padding-horizontal:var(--spacing-l);--padding-vertical:var(--spacing-m);background-color:var(--background-color);color:var(--color);padding:var(--padding-vertical) var(--padding-horizontal)}.card_hds-card--border__c2dBc{border:var(--border-width) solid var(--border-color)}.card_hds-card--box-shadow__1LWxe{box-shadow:var(--box-shadow-m)}.card_hds-card__body__M27Up{display:grid;grid-gap:var(--spacing-s);gap:var(--spacing-s);margin-bottom:var(--spacing-l)}.card_hds-card__body__M27Up:last-child{margin-bottom:0}.card_hds-card__text__n7A0r{font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.Card-module_card__1WbKx{--background-color:var(--color-white);--border-color:var(--color-black-90);--color:var(--color-black-90);--border-width:2px;--padding-horizontal:var(--spacing-l);--padding-vertical:var(--spacing-m);background-color:var(--background-color);color:var(--color);padding:var(--padding-vertical) var(--padding-horizontal)}");const c=e=>{var{border:a,heading:t,headingAriaLevel:r=2,boxShadow:c=!1,text:d,className:m,theme:u,children:h}=e,b=(0,n._)(e,["border","heading","headingAriaLevel","boxShadow","text","className","theme","children"]);const p=(0,o.u)(i,u),g=!!t||!!d;return l.createElement("div",Object.assign({className:(0,s.c)(i,a&&"card_hds-card--border__c2dBc",c&&"Card-module_boxShadow__2-bIH card_hds-card--box-shadow__1LWxe",p,m),role:"region"},b),g&&l.createElement("div",{className:"Card-module_body__WJ4t2 card_hds-card__body__M27Up"},t&&l.createElement("div",{className:"heading-m",role:"heading","aria-level":r},t),d&&l.createElement("div",{className:"Card-module_text__28deG card_hds-card__text__n7A0r"},d)),h)}},83428:function(e,a,t){t.d(a,{S:function(){return c}});var n=t(80136),l=t(67294),r=t(7444),s=t(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,r.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const i=e=>{let{icon:a}=e;return l.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},a)},c=e=>{var{children:a,className:t,dataTestId:r,type:c="neutral",iconLeft:d}=e,m=(0,n._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,s.c)(o.statusLabel,o[c],d&&o.statusLabelWithIcon,t),"data-testid":r},m),d&&l.createElement(i,{icon:d}),a)}},17572:function(e,a,t){t.r(a);var n=t(11151),l=t(67294),r=t(45433),s=t(17882),o=t(9256);const i=e=>{let{children:a,pageContext:t}=e;return l.createElement(o.default,{pageContext:t},a)};function c(e){const a=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",h4:"h4",pre:"pre",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",strong:"strong",p:"p"},(0,n.ah)(),e.components),{Playground:t,IconCheckCircleFill:o,Link:i,ExternalLink:c}=a;return c||d("ExternalLink",!0),o||d("IconCheckCircleFill",!0),i||d("Link",!0),t||d("Playground",!0),l.createElement(l.Fragment,null,l.createElement(a.h2,{id:"code",style:{position:"relative"}},"Code",l.createElement(a.a,{href:"#code","aria-label":"code permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.h3,{id:"code-examples",style:{position:"relative"}},"Code examples",l.createElement(a.a,{href:"#code-examples","aria-label":"code examples permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.h4,{id:"empty",style:{position:"relative"}},"Empty",l.createElement(a.a,{href:"#empty","aria-label":"empty permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t,{scope:{Card:r.C}},l.createElement(a.pre,null,l.createElement(a.code,{className:"language-jsx"},"import { Card } from 'hds-react';\n\n() => (<>\n  <Card />\n  <Card border />\n</>)\n")),l.createElement(a.pre,null,l.createElement(a.code,{className:"language-html"},'  <div>\n    <div class="hds-card">\n    </div>\n    <div class="hds-card hds-card--border">\n    </div>\n  </div>\n'))),"\n",l.createElement(a.h4,{id:"with-heading-and-body-text",style:{position:"relative"}},"With heading and body text",l.createElement(a.a,{href:"#with-heading-and-body-text","aria-label":"with heading and body text permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t,{scope:{Card:r.C}},l.createElement(a.pre,null,l.createElement(a.code,{className:"language-jsx"},'import { Card } from \'hds-react\';\n\n() => (<>\n  <Card\n    heading="Card"\n    text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."\n  />\n  <Card\n    border\n    heading="Card"\n    text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."\n  />\n</>)\n')),l.createElement(a.pre,null,l.createElement(a.code,{className:"language-html"},'<div>\n  <div class="hds-card">\n    <div class="hds-card__body">\n      <div class="heading-m" role="heading" aria-level="2">Card</div>\n      <div class="hds-card__text">\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n        magna aliqua.\n      </div>\n    </div>\n  </div>\n\n  <div class="hds-card hds-card--border">\n    <div class="hds-card__body">\n      <div class="heading-m" role="heading" aria-level="2">Card</div>\n      <div class="hds-card__text">\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n        magna aliqua.\n      </div>\n    </div>\n  </div>\n</div>\n'))),"\n",l.createElement(a.h4,{id:"using-with-other-hds-components",style:{position:"relative"}},"Using with other HDS components",l.createElement(a.a,{href:"#using-with-other-hds-components","aria-label":"using with other hds components permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t,{scope:{Card:r.C,Button:s.B}},l.createElement(a.pre,null,l.createElement(a.code,{className:"language-jsx"},'import { Card, Button } from \'hds-react\';\n\n() => (<>\n  <Card\n    heading="Card"\n    text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."\n  >\n    <Button variant="secondary" theme="black" role="link">\n      Button\n    </Button>\n  </Card>\n  <Card\n    border\n    heading="Card"\n    text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."\n  >\n    <Button variant="secondary" theme="black" role="link">\n      Button\n    </Button>\n  </Card>\n</>)\n')),l.createElement(a.pre,null,l.createElement(a.code,{className:"language-html"},'<div>\n  <div class="hds-card">\n    <div class="hds-card__body">\n      <div class="heading-m" role="heading" aria-level="2">Card</div>\n      <div class="hds-card__text">\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n        magna aliqua.\n      </div>\n    </div>\n    <button type="button" class="hds-button hds-button--secondary hds-button--theme-black" role="link">\n      <span class="hds-button__label">Button</span>\n    </button>\n  </div>\n\n  <div class="hds-card hds-card--border">\n    <div class="hds-card__body">\n      <div class="heading-m" role="heading" aria-level="2">Card</div>\n      <div class="hds-card__text">\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n        magna aliqua.\n      </div>\n    </div>\n    <button type="button" class="hds-button hds-button--secondary hds-button--theme-black" role="link">\n      <span class="hds-button__label">Button</span>\n    </button>\n  </div>\n</div>\n'))),"\n",l.createElement(a.h3,{id:"packages",style:{position:"relative"}},"Packages",l.createElement(a.a,{href:"#packages","aria-label":"packages permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.table,null,l.createElement(a.thead,null,l.createElement(a.tr,null,l.createElement(a.th,null,"Package"),l.createElement(a.th,null,"Included"),l.createElement(a.th,null,"Storybook link"),l.createElement(a.th,null,"Source link"))),l.createElement(a.tbody,null,l.createElement(a.tr,null,l.createElement(a.td,null,l.createElement(a.strong,null,"HDS React")),l.createElement(a.td,null,l.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},l.createElement(o)," Yes ")),l.createElement(a.td,null,l.createElement(i,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=?path=/story/components-card--empty"},"View in Storybook")),l.createElement(a.td,null,l.createElement(c,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/blob/master/packages/react/src/components/card/Card.tsx"},"View source"))),l.createElement(a.tr,null,l.createElement(a.td,null,l.createElement(a.strong,null,"HDS Core")),l.createElement(a.td,null,l.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},l.createElement(o)," Yes ")),l.createElement(a.td,null,l.createElement(i,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/core/?path=/story/components-card--empty"},"View in Storybook")),l.createElement(a.td,null,l.createElement(c,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/core/src/components/card"},"View source"))))),"\n",l.createElement(a.h3,{id:"properties",style:{position:"relative"}},"Properties",l.createElement(a.a,{href:"#properties","aria-label":"properties permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.p,null,"Note! You can find the full list of properties in the ",l.createElement(i,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=?path=/story/components-card--empty"},"React Storybook.")),"\n",l.createElement(a.table,null,l.createElement(a.thead,null,l.createElement(a.tr,null,l.createElement(a.th,null,"Property"),l.createElement(a.th,null,"Description"),l.createElement(a.th,null,"Values"),l.createElement(a.th,null,"Default value"))),l.createElement(a.tbody,null,l.createElement(a.tr,null,l.createElement(a.td,null,l.createElement(a.code,null,"heading")),l.createElement(a.td,null,"Heading of the Card (uses the built-in heading)"),l.createElement(a.td,null,"-"),l.createElement(a.td,null,"-")),l.createElement(a.tr,null,l.createElement(a.td,null,l.createElement(a.code,null,"text")),l.createElement(a.td,null,"Content text of the Card (uses the built-in text)"),l.createElement(a.td,null,"-"),l.createElement(a.td,null,"-")),l.createElement(a.tr,null,l.createElement(a.td,null,l.createElement(a.code,null,"border")),l.createElement(a.td,null,"If set to true, a border will be drawn around the card."),l.createElement(a.td,null,"true, false"),l.createElement(a.td,null,"false")))))}function d(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){return void 0===e&&(e={}),l.createElement(i,e,l.createElement(c,e))}},9256:function(e,a,t){t.r(a);var n=t(11151),l=t(67294),r=t(83428),s=t(57674),o=t(89482),i=(t(18607),t(26127));function c(e){const a=Object.assign({h1:"h1",a:"a",span:"span"},(0,n.ah)(),e.components);return i.Z||d("PageTabs",!1),i.Z.Tab||d("PageTabs.Tab",!0),i.Z.TabList||d("PageTabs.TabList",!0),i.Z.TabPanel||d("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(a.h1,{id:"card",style:{position:"relative"}},"Card",l.createElement(a.a,{href:"#card","aria-label":"card permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(r.S,{type:"info"},"Stable"),l.createElement(r.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(s.Z)),"\n",l.createElement(o.Z,null,"Cards can be used to divide and organise interface content for better understandability and readability. When used correctly, Cards can help your users to scan through vast amounts of information quicker."),"\n",l.createElement(i.Z,{pageContext:e.pageContext},l.createElement(i.Z.TabList,null,l.createElement(i.Z.Tab,{href:"/"},"Usage"),l.createElement(i.Z.Tab,{href:"/code"},"Code"),l.createElement(i.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(i.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(i.Z.TabPanel,null,e.children)))}function d(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,n.ah)(),e.components);return a?l.createElement(a,e,l.createElement(c,e)):c(e)}},89482:function(e,a,t){var n=t(67294);a.Z=e=>{let{color:a="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:l={},children:r}=e;return n.createElement("p",{style:{fontSize:t,color:a,maxWidth:600,...l}},r)}},26127:function(e,a,t){var n=t(67294),l=t(14160),r=t(94671);const s="PageTabList",o="PageTabPanel",i="PageTab",c=e=>{var a;let{pageContext:t,children:c}=e;const d=t.frontmatter.slug,m=Array.isArray(c)?c:[c],u=m.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===s)),h=m.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===o)),b=null===(a=u.props)||void 0===a?void 0:a.children.filter((e=>e.type.componentName===i)),p=b.findIndex((e=>d.endsWith(e.props.href))),g=-1===p?0:p,_=0===g?d:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(d);return n.createElement(r.a,{initiallyActiveTab:g},n.createElement(r.a.TabList,{className:"page-tabs-list"},b.map((e=>n.createElement(r.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?_:_+e.props.href))},e.props.children)))),b.map(((e,a)=>n.createElement(r.a.TabPanel,{key:e.props.href},g===a?h.props.children:n.createElement("div",null)))))},d=e=>{let{children:a}=e;return n.createElement(r.a.TabList,null,a)};d.componentName=s;const m=e=>{let{href:a,slug:t,children:l}=e;return n.createElement(r.a.Tab,null,l)};m.componentName=i;const u=e=>{let{children:a}=e;return n.createElement(r.a.TabPanel,null,a)};u.componentName=o,c.TabList=d,c.Tab=m,c.TabPanel=u,a.Z=c},57674:function(e,a,t){var n=t(67294),l=t(45422);a.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return n.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},n.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((a=>n.createElement("li",{key:a},n.createElement("span",{className:"status-name"},a),n.createElement("span",null,e[a]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-card-customisation-mdx-b09b840bea7366669e84.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-card-customisation-mdx-b09b840bea7366669e84.js
new file mode 100644
index 00000000000..48eee7cb039
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-card-customisation-mdx-b09b840bea7366669e84.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[6351,8247],{45433:function(e,a,t){t.d(a,{C:function(){return i}});var l=t(80136),r=t(67294),n=t(7444),o=t(34300),s=t(97640),c="Card-module_card__1WbKx";(0,n.s)(".card_hds-card__227qQ{--background-color:var(--color-white);--border-color:var(--color-black-90);--color:var(--color-black-90);--border-width:2px;--padding-horizontal:var(--spacing-l);--padding-vertical:var(--spacing-m);background-color:var(--background-color);color:var(--color);padding:var(--padding-vertical) var(--padding-horizontal)}.card_hds-card--border__c2dBc{border:var(--border-width) solid var(--border-color)}.card_hds-card--box-shadow__1LWxe{box-shadow:var(--box-shadow-m)}.card_hds-card__body__M27Up{display:grid;grid-gap:var(--spacing-s);gap:var(--spacing-s);margin-bottom:var(--spacing-l)}.card_hds-card__body__M27Up:last-child{margin-bottom:0}.card_hds-card__text__n7A0r{font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.Card-module_card__1WbKx{--background-color:var(--color-white);--border-color:var(--color-black-90);--color:var(--color-black-90);--border-width:2px;--padding-horizontal:var(--spacing-l);--padding-vertical:var(--spacing-m);background-color:var(--background-color);color:var(--color);padding:var(--padding-vertical) var(--padding-horizontal)}");const i=e=>{var{border:a,heading:t,headingAriaLevel:n=2,boxShadow:i=!1,text:d,className:u,theme:m,children:h}=e,b=(0,l._)(e,["border","heading","headingAriaLevel","boxShadow","text","className","theme","children"]);const p=(0,s.u)(c,m),g=!!t||!!d;return r.createElement("div",Object.assign({className:(0,o.c)(c,a&&"card_hds-card--border__c2dBc",i&&"Card-module_boxShadow__2-bIH card_hds-card--box-shadow__1LWxe",p,u),role:"region"},b),g&&r.createElement("div",{className:"Card-module_body__WJ4t2 card_hds-card__body__M27Up"},t&&r.createElement("div",{className:"heading-m",role:"heading","aria-level":n},t),d&&r.createElement("div",{className:"Card-module_text__28deG card_hds-card__text__n7A0r"},d)),h)}},83428:function(e,a,t){t.d(a,{S:function(){return i}});var l=t(80136),r=t(67294),n=t(7444),o=t(34300),s={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const c=e=>{let{icon:a}=e;return r.createElement("span",{className:s.statusLabelIcon,"aria-hidden":"true"},a)},i=e=>{var{children:a,className:t,dataTestId:n,type:i="neutral",iconLeft:d}=e,u=(0,l._)(e,["children","className","dataTestId","type","iconLeft"]);return r.createElement("span",Object.assign({className:(0,o.c)(s.statusLabel,s[i],d&&s.statusLabelWithIcon,t),"data-testid":n},u),d&&r.createElement(c,{icon:d}),a)}},77482:function(e,a,t){t.r(a);var l=t(11151),r=t(67294),n=t(45433),o=t(9256);const s=e=>{let{children:a,pageContext:t}=e;return r.createElement(o.default,{pageContext:t},a)};function c(e){const a=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",p:"p",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",pre:"pre"},(0,l.ah)(),e.components),{Playground:t}=a;return t||function(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Playground",!0),r.createElement(r.Fragment,null,r.createElement(a.h2,{id:"customisation",style:{position:"relative"}},"Customisation",r.createElement(a.a,{href:"#customisation","aria-label":"customisation permalink",className:"header-anchor after"},r.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",r.createElement(a.h3,{id:"customisation-properties",style:{position:"relative"}},"Customisation properties",r.createElement(a.a,{href:"#customisation-properties","aria-label":"customisation properties permalink",className:"header-anchor after"},r.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",r.createElement(a.p,null,"In Core version, you can either use the ",r.createElement(a.code,null,"style")," or ",r.createElement(a.code,null,"class")," attributes in the HTML to customise the component."),"\n",r.createElement(a.p,null,"In React version, you can use the ",r.createElement(a.code,null,"theme")," property to customise the component."),"\n",r.createElement(a.p,null,"See all available theme variables in the table below."),"\n",r.createElement(a.table,null,r.createElement(a.thead,null,r.createElement(a.tr,null,r.createElement(a.th,null,"Theme variable"),r.createElement(a.th,null,"Description"))),r.createElement(a.tbody,null,r.createElement(a.tr,null,r.createElement(a.td,null,r.createElement(a.code,null,"--background-color")),r.createElement(a.td,null,"Background colour of the card.")),r.createElement(a.tr,null,r.createElement(a.td,null,r.createElement(a.code,null,"--border-color")),r.createElement(a.td,null,"Colour of the card's border")),r.createElement(a.tr,null,r.createElement(a.td,null,r.createElement(a.code,null,"--border-width")),r.createElement(a.td,null,"Width of the card's border")),r.createElement(a.tr,null,r.createElement(a.td,null,r.createElement(a.code,null,"--color")),r.createElement(a.td,null,"Colour of the built-in heading and text.")),r.createElement(a.tr,null,r.createElement(a.td,null,r.createElement(a.code,null,"--padding-horizontal")),r.createElement(a.td,null,"Left and right padding of the card.")),r.createElement(a.tr,null,r.createElement(a.td,null,r.createElement(a.code,null,"--padding-vertical")),r.createElement(a.td,null,"Top and bottom padding of the card.")))),"\n",r.createElement(a.h3,{id:"customisation-example",style:{position:"relative"}},"Customisation example",r.createElement(a.a,{href:"#customisation-example","aria-label":"customisation example permalink",className:"header-anchor after"},r.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",r.createElement(t,{scope:{Card:n.C}},r.createElement(a.pre,null,r.createElement(a.code,{className:"language-jsx"},"import { Card } from 'hds-react';\n\n() => (\n<Card\n  border\n  heading=\"Customised card\"\n  text=\"In order to customise the card component, use the theme property.\"\n  theme={{\n    '--background-color': 'var(--color-black-5)',\n    '--border-color': 'var(--color-black-90)',\n    '--border-width': '3px',\n    '--color': 'var(--color-black-90)',\n    '--padding-horizontal': 'var(--spacing-l)',\n    '--padding-vertical': 'var(--spacing-m)'\n  }}\n/>)\n")),r.createElement(a.pre,null,r.createElement(a.code,{className:"language-html"},'<div\n  class="hds-card hds-card--border"\n  role="region"\n  style="--background-color:var(--color-black-5); --border-color:var(--color-black-90); --border-width:3px;\n  --color:var(--color-black-90); --padding-horizontal:var(--spacing-l); --padding-vertical:var(--spacing-m);"\n>\n  <div class="hds-card__body">\n    <div class="heading-m" role="heading" aria-level="2">Customised card</div>\n    <div class="hds-card__text">In order to customise the card component, use the theme properties.</div>\n  </div>\n</div>\n'))))}a.default=function(e){return void 0===e&&(e={}),r.createElement(s,e,r.createElement(c,e))}},9256:function(e,a,t){t.r(a);var l=t(11151),r=t(67294),n=t(83428),o=t(57674),s=t(89482),c=(t(18607),t(26127));function i(e){const a=Object.assign({h1:"h1",a:"a",span:"span"},(0,l.ah)(),e.components);return c.Z||d("PageTabs",!1),c.Z.Tab||d("PageTabs.Tab",!0),c.Z.TabList||d("PageTabs.TabList",!0),c.Z.TabPanel||d("PageTabs.TabPanel",!0),r.createElement(r.Fragment,null,r.createElement(a.h1,{id:"card",style:{position:"relative"}},"Card",r.createElement(a.a,{href:"#card","aria-label":"card permalink",className:"header-anchor after"},r.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",r.createElement("div",{class:"status-label-description"},r.createElement(n.S,{type:"info"},"Stable"),r.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),r.createElement(o.Z)),"\n",r.createElement(s.Z,null,"Cards can be used to divide and organise interface content for better understandability and readability. When used correctly, Cards can help your users to scan through vast amounts of information quicker."),"\n",r.createElement(c.Z,{pageContext:e.pageContext},r.createElement(c.Z.TabList,null,r.createElement(c.Z.Tab,{href:"/"},"Usage"),r.createElement(c.Z.Tab,{href:"/code"},"Code"),r.createElement(c.Z.Tab,{href:"/accessibility"},"Accessibility"),r.createElement(c.Z.Tab,{href:"/customisation"},"Customisation")),r.createElement(c.Z.TabPanel,null,e.children)))}function d(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,l.ah)(),e.components);return a?r.createElement(a,e,r.createElement(i,e)):i(e)}},89482:function(e,a,t){var l=t(67294);a.Z=e=>{let{color:a="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:r={},children:n}=e;return l.createElement("p",{style:{fontSize:t,color:a,maxWidth:600,...r}},n)}},26127:function(e,a,t){var l=t(67294),r=t(14160),n=t(94671);const o="PageTabList",s="PageTabPanel",c="PageTab",i=e=>{var a;let{pageContext:t,children:i}=e;const d=t.frontmatter.slug,u=Array.isArray(i)?i:[i],m=u.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===o)),h=u.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===s)),b=null===(a=m.props)||void 0===a?void 0:a.children.filter((e=>e.type.componentName===c)),p=b.findIndex((e=>d.endsWith(e.props.href))),g=-1===p?0:p,_=0===g?d:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(d);return l.createElement(n.a,{initiallyActiveTab:g},l.createElement(n.a.TabList,{className:"page-tabs-list"},b.map((e=>l.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,r.navigate)(""+("/"===e.props.href?_:_+e.props.href))},e.props.children)))),b.map(((e,a)=>l.createElement(n.a.TabPanel,{key:e.props.href},g===a?h.props.children:l.createElement("div",null)))))},d=e=>{let{children:a}=e;return l.createElement(n.a.TabList,null,a)};d.componentName=o;const u=e=>{let{href:a,slug:t,children:r}=e;return l.createElement(n.a.Tab,null,r)};u.componentName=c;const m=e=>{let{children:a}=e;return l.createElement(n.a.TabPanel,null,a)};m.componentName=s,i.TabList=d,i.Tab=u,i.TabPanel=m,a.Z=i},57674:function(e,a,t){var l=t(67294),r=t(45422);a.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return l.createElement(r.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},l.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((a=>l.createElement("li",{key:a},l.createElement("span",{className:"status-name"},a),l.createElement("span",null,e[a]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-card-index-mdx-352fbad1dc2b65901a7d.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-card-index-mdx-352fbad1dc2b65901a7d.js
new file mode 100644
index 00000000000..d8abc8350dd
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-card-index-mdx-352fbad1dc2b65901a7d.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[5203,8247],{45433:function(e,a,t){t.d(a,{C:function(){return c}});var n=t(80136),l=t(67294),r=t(7444),s=t(34300),o=t(97640),i="Card-module_card__1WbKx";(0,r.s)(".card_hds-card__227qQ{--background-color:var(--color-white);--border-color:var(--color-black-90);--color:var(--color-black-90);--border-width:2px;--padding-horizontal:var(--spacing-l);--padding-vertical:var(--spacing-m);background-color:var(--background-color);color:var(--color);padding:var(--padding-vertical) var(--padding-horizontal)}.card_hds-card--border__c2dBc{border:var(--border-width) solid var(--border-color)}.card_hds-card--box-shadow__1LWxe{box-shadow:var(--box-shadow-m)}.card_hds-card__body__M27Up{display:grid;grid-gap:var(--spacing-s);gap:var(--spacing-s);margin-bottom:var(--spacing-l)}.card_hds-card__body__M27Up:last-child{margin-bottom:0}.card_hds-card__text__n7A0r{font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.Card-module_card__1WbKx{--background-color:var(--color-white);--border-color:var(--color-black-90);--color:var(--color-black-90);--border-width:2px;--padding-horizontal:var(--spacing-l);--padding-vertical:var(--spacing-m);background-color:var(--background-color);color:var(--color);padding:var(--padding-vertical) var(--padding-horizontal)}");const c=e=>{var{border:a,heading:t,headingAriaLevel:r=2,boxShadow:c=!1,text:d,className:m,theme:u,children:h}=e,b=(0,n._)(e,["border","heading","headingAriaLevel","boxShadow","text","className","theme","children"]);const p=(0,o.u)(i,u),g=!!t||!!d;return l.createElement("div",Object.assign({className:(0,s.c)(i,a&&"card_hds-card--border__c2dBc",c&&"Card-module_boxShadow__2-bIH card_hds-card--box-shadow__1LWxe",p,m),role:"region"},b),g&&l.createElement("div",{className:"Card-module_body__WJ4t2 card_hds-card__body__M27Up"},t&&l.createElement("div",{className:"heading-m",role:"heading","aria-level":r},t),d&&l.createElement("div",{className:"Card-module_text__28deG card_hds-card__text__n7A0r"},d)),h)}},83428:function(e,a,t){t.d(a,{S:function(){return c}});var n=t(80136),l=t(67294),r=t(7444),s=t(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,r.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const i=e=>{let{icon:a}=e;return l.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},a)},c=e=>{var{children:a,className:t,dataTestId:r,type:c="neutral",iconLeft:d}=e,m=(0,n._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,s.c)(o.statusLabel,o[c],d&&o.statusLabelWithIcon,t),"data-testid":r},m),d&&l.createElement(i,{icon:d}),a)}},61909:function(e,a,t){t.r(a);var n=t(11151),l=t(67294),r=t(45433),s=t(17882),o=t(9256);const i=e=>{let{children:a,pageContext:t}=e;return l.createElement(o.default,{pageContext:t},a)};function c(e){const a=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",strong:"strong",h4:"h4",p:"p"},(0,n.ah)(),e.components),{PlaygroundPreview:t,InternalLink:o,ExternalLink:i}=a;return i||d("ExternalLink",!0),o||d("InternalLink",!0),t||d("PlaygroundPreview",!0),l.createElement(l.Fragment,null,l.createElement(a.h2,{id:"usage",style:{position:"relative"}},"Usage",l.createElement(a.a,{href:"#usage","aria-label":"usage permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.h3,{id:"example",style:{position:"relative"}},"Example",l.createElement(a.a,{href:"#example","aria-label":"example permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t,{style:{backgroundColor:"var(--color-black-5)"}},l.createElement(r.C,{border:!0,heading:"Card",text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."})),"\n",l.createElement(a.h3,{id:"principles",style:{position:"relative"}},"Principles",l.createElement(a.a,{href:"#principles","aria-label":"principles permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.ul,null,"\n",l.createElement(a.li,null,l.createElement(a.strong,null,"Use Cards sparingly.")," While they can drastically improve service's understandability and readability, overusing them may result in confusing and complex user interfaces."),"\n",l.createElement(a.li,null,l.createElement(a.strong,null,"Cards work very well for listing heterogenous content")," such as news items, blog posts, or upcoming events."),"\n",l.createElement(a.li,null,l.createElement(a.strong,null,"Cards can also be used to emphasize important content")," such as site CTA (Call To Action)."),"\n",l.createElement(a.li,null,l.createElement(a.strong,null,"Cards must not be used as interactive elements themselves.")," This means that the whole Card should not be clickable. Elements inside the Card can still be interactable.","\n",l.createElement(a.ul,null,"\n",l.createElement(a.li,null,"If you need the whole element to be interactable, use ",l.createElement(o,{href:"/components/linkbox"},"HDS Linkbox")," instead."),"\n"),"\n"),"\n",l.createElement(a.li,null,"Currently, HDS offers base Cards that you can use to build custom Cards for your project's needs. For inspiration and guidelines, you can find custom card examples in ",l.createElement(i,{href:"https://share.goabstract.com/e6aa2ebd-1a49-4cb1-90ef-a44a6486c28b"},"HDS Example Custom Components - Abstract collection"),"."),"\n"),"\n",l.createElement(a.h4,{id:"should-i-use-a-card-or-a-linkbox",style:{position:"relative"}},"Should I use a Card or a Linkbox?",l.createElement(a.a,{href:"#should-i-use-a-card-or-a-linkbox","aria-label":"should i use a card or a linkbox permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.ul,null,"\n",l.createElement(a.li,null,l.createElement(a.strong,null,"Use the Card component when"),"\n",l.createElement(a.ul,null,"\n",l.createElement(a.li,null,"the whole Card does not need to be interactable"),"\n",l.createElement(a.li,null,"the Card contains multiple interactable elements (e.g. buttons or links)"),"\n"),"\n"),"\n",l.createElement(a.li,null,l.createElement(a.strong,null,"Use the ",l.createElement(o,{href:"/components/linkbox"},"Linkbox component")," when"),"\n",l.createElement(a.ul,null,"\n",l.createElement(a.li,null,"the whole element needs to be interactable"),"\n",l.createElement(a.li,null,"the element does not include multiple interactable elements"),"\n"),"\n"),"\n"),"\n",l.createElement(a.h3,{id:"variations",style:{position:"relative"}},"Variations",l.createElement(a.a,{href:"#variations","aria-label":"variations permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.h4,{id:"empty",style:{position:"relative"}},"Empty",l.createElement(a.a,{href:"#empty","aria-label":"empty permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.p,null,"Currently, HDS offers empty base Cards. These and other HDS components can be used to create custom Cards for your project. By default, HDS recommends Cards without border style."),"\n",l.createElement(t,{style:{backgroundColor:"var(--color-black-5)"}},l.createElement(r.C),l.createElement(r.C,{border:!0,style:{marginTop:"var(--spacing-s)"}})),"\n",l.createElement(a.h4,{id:"with-heading-and-body-text",style:{position:"relative"}},"With heading and body text",l.createElement(a.a,{href:"#with-heading-and-body-text","aria-label":"with heading and body text permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.p,null,"Additionally, HDS offers styling for basic heading and body text inside the Card component. These can be used instead of custom elements."),"\n",l.createElement(t,{style:{backgroundColor:"var(--color-black-5)"}},l.createElement(r.C,{heading:"Card",text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."}),l.createElement(r.C,{style:{marginTop:"var(--spacing-s)"},border:!0,heading:"Card",text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."})),"\n",l.createElement(a.h4,{id:"using-with-other-hds-components",style:{position:"relative"}},"Using with other HDS components",l.createElement(a.a,{href:"#using-with-other-hds-components","aria-label":"using with other hds components permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.p,null,"Custom Cards can be easily built by using other HDS components and typography inside the Card."),"\n",l.createElement(t,{style:{backgroundColor:"var(--color-black-5)"}},l.createElement(r.C,{heading:"Card",text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."},l.createElement(s.B,{variant:"secondary",theme:"black",role:"link"},l.createElement(a.p,null,"Button"))),l.createElement(r.C,{style:{marginTop:"var(--spacing-s)"},border:!0,heading:"Card",text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."},l.createElement(s.B,{variant:"secondary",theme:"black",role:"link"},l.createElement(a.p,null,"Button")))))}function d(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){return void 0===e&&(e={}),l.createElement(i,e,l.createElement(c,e))}},9256:function(e,a,t){t.r(a);var n=t(11151),l=t(67294),r=t(83428),s=t(57674),o=t(89482),i=(t(18607),t(26127));function c(e){const a=Object.assign({h1:"h1",a:"a",span:"span"},(0,n.ah)(),e.components);return i.Z||d("PageTabs",!1),i.Z.Tab||d("PageTabs.Tab",!0),i.Z.TabList||d("PageTabs.TabList",!0),i.Z.TabPanel||d("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(a.h1,{id:"card",style:{position:"relative"}},"Card",l.createElement(a.a,{href:"#card","aria-label":"card permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(r.S,{type:"info"},"Stable"),l.createElement(r.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(s.Z)),"\n",l.createElement(o.Z,null,"Cards can be used to divide and organise interface content for better understandability and readability. When used correctly, Cards can help your users to scan through vast amounts of information quicker."),"\n",l.createElement(i.Z,{pageContext:e.pageContext},l.createElement(i.Z.TabList,null,l.createElement(i.Z.Tab,{href:"/"},"Usage"),l.createElement(i.Z.Tab,{href:"/code"},"Code"),l.createElement(i.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(i.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(i.Z.TabPanel,null,e.children)))}function d(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,n.ah)(),e.components);return a?l.createElement(a,e,l.createElement(c,e)):c(e)}},89482:function(e,a,t){var n=t(67294);a.Z=e=>{let{color:a="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:l={},children:r}=e;return n.createElement("p",{style:{fontSize:t,color:a,maxWidth:600,...l}},r)}},26127:function(e,a,t){var n=t(67294),l=t(14160),r=t(94671);const s="PageTabList",o="PageTabPanel",i="PageTab",c=e=>{var a;let{pageContext:t,children:c}=e;const d=t.frontmatter.slug,m=Array.isArray(c)?c:[c],u=m.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===s)),h=m.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===o)),b=null===(a=u.props)||void 0===a?void 0:a.children.filter((e=>e.type.componentName===i)),p=b.findIndex((e=>d.endsWith(e.props.href))),g=-1===p?0:p,_=0===g?d:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(d);return n.createElement(r.a,{initiallyActiveTab:g},n.createElement(r.a.TabList,{className:"page-tabs-list"},b.map((e=>n.createElement(r.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?_:_+e.props.href))},e.props.children)))),b.map(((e,a)=>n.createElement(r.a.TabPanel,{key:e.props.href},g===a?h.props.children:n.createElement("div",null)))))},d=e=>{let{children:a}=e;return n.createElement(r.a.TabList,null,a)};d.componentName=s;const m=e=>{let{href:a,slug:t,children:l}=e;return n.createElement(r.a.Tab,null,l)};m.componentName=i;const u=e=>{let{children:a}=e;return n.createElement(r.a.TabPanel,null,a)};u.componentName=o,c.TabList=d,c.Tab=m,c.TabPanel=u,a.Z=c},57674:function(e,a,t){var n=t(67294),l=t(45422);a.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return n.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},n.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((a=>n.createElement("li",{key:a},n.createElement("span",{className:"status-name"},a),n.createElement("span",null,e[a]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-card-tabs-mdx-a3420096c837975e0721.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-card-tabs-mdx-a3420096c837975e0721.js
new file mode 100644
index 00000000000..189bf95a537
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-card-tabs-mdx-a3420096c837975e0721.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[8247],{83428:function(e,a,t){t.d(a,{S:function(){return i}});var s=t(80136),l=t(67294),n=t(7444),r=t(34300),c={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:a}=e;return l.createElement("span",{className:c.statusLabelIcon,"aria-hidden":"true"},a)},i=e=>{var{children:a,className:t,dataTestId:n,type:i="neutral",iconLeft:u}=e,b=(0,s._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(c.statusLabel,c[i],u&&c.statusLabelWithIcon,t),"data-testid":n},b),u&&l.createElement(o,{icon:u}),a)}},9256:function(e,a,t){t.r(a);var s=t(11151),l=t(67294),n=t(83428),r=t(57674),c=t(89482),o=(t(18607),t(26127));function i(e){const a=Object.assign({h1:"h1",a:"a",span:"span"},(0,s.ah)(),e.components);return o.Z||u("PageTabs",!1),o.Z.Tab||u("PageTabs.Tab",!0),o.Z.TabList||u("PageTabs.TabList",!0),o.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(a.h1,{id:"card",style:{position:"relative"}},"Card",l.createElement(a.a,{href:"#card","aria-label":"card permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(n.S,{type:"info"},"Stable"),l.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(c.Z,null,"Cards can be used to divide and organise interface content for better understandability and readability. When used correctly, Cards can help your users to scan through vast amounts of information quicker."),"\n",l.createElement(o.Z,{pageContext:e.pageContext},l.createElement(o.Z.TabList,null,l.createElement(o.Z.Tab,{href:"/"},"Usage"),l.createElement(o.Z.Tab,{href:"/code"},"Code"),l.createElement(o.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(o.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(o.Z.TabPanel,null,e.children)))}function u(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,s.ah)(),e.components);return a?l.createElement(a,e,l.createElement(i,e)):i(e)}},89482:function(e,a,t){var s=t(67294);a.Z=e=>{let{color:a="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:l={},children:n}=e;return s.createElement("p",{style:{fontSize:t,color:a,maxWidth:600,...l}},n)}},26127:function(e,a,t){var s=t(67294),l=t(14160),n=t(94671);const r="PageTabList",c="PageTabPanel",o="PageTab",i=e=>{var a;let{pageContext:t,children:i}=e;const u=t.frontmatter.slug,b=Array.isArray(i)?i:[i],d=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===r)),m=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===c)),h=null===(a=d.props)||void 0===a?void 0:a.children.filter((e=>e.type.componentName===o)),p=h.findIndex((e=>u.endsWith(e.props.href))),_=-1===p?0:p,f=0===_?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return s.createElement(n.a,{initiallyActiveTab:_},s.createElement(n.a.TabList,{className:"page-tabs-list"},h.map((e=>s.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),h.map(((e,a)=>s.createElement(n.a.TabPanel,{key:e.props.href},_===a?m.props.children:s.createElement("div",null)))))},u=e=>{let{children:a}=e;return s.createElement(n.a.TabList,null,a)};u.componentName=r;const b=e=>{let{href:a,slug:t,children:l}=e;return s.createElement(n.a.Tab,null,l)};b.componentName=o;const d=e=>{let{children:a}=e;return s.createElement(n.a.TabPanel,null,a)};d.componentName=c,i.TabList=u,i.Tab=b,i.TabPanel=d,a.Z=i},57674:function(e,a,t){var s=t(67294),l=t(45422);a.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return s.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},s.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((a=>s.createElement("li",{key:a},s.createElement("span",{className:"status-name"},a),s.createElement("span",null,e[a]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-checkbox-accessibility-mdx-85bf8a499b94a6020682.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-checkbox-accessibility-mdx-85bf8a499b94a6020682.js
new file mode 100644
index 00000000000..016cb6f4635
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-checkbox-accessibility-mdx-85bf8a499b94a6020682.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[1125,8492],{83428:function(e,t,a){a.d(t,{S:function(){return c}});var l=a(80136),s=a(67294),n=a(7444),r=a(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const i=e=>{let{icon:t}=e;return s.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:n,type:c="neutral",iconLeft:u}=e,b=(0,l._)(e,["children","className","dataTestId","type","iconLeft"]);return s.createElement("span",Object.assign({className:(0,r.c)(o.statusLabel,o[c],u&&o.statusLabelWithIcon,a),"data-testid":n},b),u&&s.createElement(i,{icon:u}),t)}},13796:function(e,t,a){a.r(t);var l=a(11151),s=a(67294),n=a(23285),r=a(1076);const o=e=>{let{children:t,pageContext:a}=e;return s.createElement(n.default,{pageContext:a},t)};function i(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",strong:"strong"},(0,l.ah)(),e.components);return s.createElement(s.Fragment,null,s.createElement(t.h2,{id:"accessibility",style:{position:"relative"}},"Accessibility",s.createElement(t.a,{href:"#accessibility","aria-label":"accessibility permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.h3,{id:"pay-attention-to",style:{position:"relative"}},"Pay attention to",s.createElement(t.a,{href:"#pay-attention-to","aria-label":"pay attention to permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.ul,null,"\n",s.createElement(t.li,null,s.createElement(t.strong,null,"It is advisable to use colour combinations provided by the implementation.")," These combinations are ensured to comply with WCAG AA requirements. When customising colors, refer to ",s.createElement(r.Z,{href:"/foundation/design-tokens/colour"},"colour guidelines")," to ensure accessibility."),"\n",s.createElement(t.li,null,"When multiple Checkboxes are related to each other, group them together using ",s.createElement(r.Z,{href:"/components/selection-group"},"HDS Selection group"),". Selection group also includes a title for the group."),"\n"))}t.default=function(e){return void 0===e&&(e={}),s.createElement(o,e,s.createElement(i,e))}},23285:function(e,t,a){a.r(t);var l=a(11151),s=a(67294),n=a(83428),r=a(57674),o=a(89482),i=(a(18607),a(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,l.ah)(),e.components);return i.Z||u("PageTabs",!1),i.Z.Tab||u("PageTabs.Tab",!0),i.Z.TabList||u("PageTabs.TabList",!0),i.Z.TabPanel||u("PageTabs.TabPanel",!0),s.createElement(s.Fragment,null,s.createElement(t.h1,{id:"checkbox",style:{position:"relative"}},"Checkbox",s.createElement(t.a,{href:"#checkbox","aria-label":"checkbox permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement("div",{class:"status-label-description"},s.createElement(n.S,{type:"info"},"Stable"),s.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),s.createElement(r.Z)),"\n",s.createElement(o.Z,null,"Checkboxes are used to pick an option when one or more options can be chosen."),"\n",s.createElement(i.Z,{pageContext:e.pageContext},s.createElement(i.Z.TabList,null,s.createElement(i.Z.Tab,{href:"/"},"Usage"),s.createElement(i.Z.Tab,{href:"/code"},"Code"),s.createElement(i.Z.Tab,{href:"/accessibility"},"Accessibility"),s.createElement(i.Z.Tab,{href:"/customisation"},"Customisation")),s.createElement(i.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,l.ah)(),e.components);return t?s.createElement(t,e,s.createElement(c,e)):c(e)}},89482:function(e,t,a){var l=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:s={},children:n}=e;return l.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...s}},n)}},26127:function(e,t,a){var l=a(67294),s=a(14160),n=a(94671);const r="PageTabList",o="PageTabPanel",i="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const u=a.frontmatter.slug,b=Array.isArray(c)?c:[c],d=b.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===r)),h=b.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===o)),m=null===(t=d.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===i)),p=m.findIndex((e=>u.endsWith(e.props.href))),g=-1===p?0:p,_=0===g?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return l.createElement(n.a,{initiallyActiveTab:g},l.createElement(n.a.TabList,{className:"page-tabs-list"},m.map((e=>l.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,s.navigate)(""+("/"===e.props.href?_:_+e.props.href))},e.props.children)))),m.map(((e,t)=>l.createElement(n.a.TabPanel,{key:e.props.href},g===t?h.props.children:l.createElement("div",null)))))},u=e=>{let{children:t}=e;return l.createElement(n.a.TabList,null,t)};u.componentName=r;const b=e=>{let{href:t,slug:a,children:s}=e;return l.createElement(n.a.Tab,null,s)};b.componentName=i;const d=e=>{let{children:t}=e;return l.createElement(n.a.TabPanel,null,t)};d.componentName=o,c.TabList=u,c.Tab=b,c.TabPanel=d,t.Z=c},57674:function(e,t,a){var l=a(67294),s=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return l.createElement(s.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},l.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>l.createElement("li",{key:t},l.createElement("span",{className:"status-name"},t),l.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-checkbox-code-mdx-b55bb52441b6f2aaa262.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-checkbox-code-mdx-b55bb52441b6f2aaa262.js
new file mode 100644
index 00000000000..37228490849
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-checkbox-code-mdx-b55bb52441b6f2aaa262.js
@@ -0,0 +1 @@
+(self.webpackChunksite=self.webpackChunksite||[]).push([[399,8492],{91309:function(e,t,n){var o="[object Null]",l="[object Undefined]",c="object"==typeof n.g&&n.g&&n.g.Object===Object&&n.g,a="object"==typeof self&&self&&self.Object===Object&&self,r=c||a||Function("return this")(),s=Object.prototype,i=s.hasOwnProperty,h=s.toString,d=r.Symbol,b=d?d.toStringTag:void 0;function _(e){return null==e?void 0===e?l:o:b&&b in Object(e)?function(e){var t=i.call(e,b),n=e[b];try{e[b]=void 0;var o=!0}catch(c){}var l=h.call(e);o&&(t?e[b]=n:delete e[b]);return l}(e):function(e){return h.call(e)}(e)}e.exports=function(e){if(!function(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}(e))return!1;var t=_(e);return"[object Function]"==t||"[object GeneratorFunction]"==t||"[object AsyncFunction]"==t||"[object Proxy]"==t}},2592:function(e,t,n){"use strict";n.d(t,{C:function(){return h}});var o=n(80136),l=n(67294),c=n(7444),a=n(34300),r=n(94330),s=n(37776),i=n(45422);(0,c.s)(".checkbox_hds-checkbox__9HMCz{--size:24px;--icon-scale:1;--border-width:2px;--outline-width:3px;--label-font-size:var(--fontsize-body-m);--label-padding:var(--spacing-2-xs);--background-unselected:transparent;--background-selected:var(--color-bus);--background-hover:var(--color-bus-dark);--background-disabled:var(--color-black-10);--border-color-selected:var(--color-bus);--border-color-selected-hover:var(--color-bus-dark);--border-color-selected-focus:var(--color-bus);--border-color-unselected:var(--color-black-50);--border-color-unselected-hover:var(--color-black-90);--border-color-unselected-focus:var(--color-black-90);--border-color-disabled:var(--color-black-10);--icon-color-unselected:transparent;--icon-color-selected:var(--color-white);--icon-color-disabled:var(--color-white);--label-color:var(--color-black-90);--label-color-disabled:var(--color-black-40);--icon-size:var(--spacing-m);display:flex;flex-wrap:wrap;min-height:var(--size);position:relative}.checkbox_hds-checkbox__9HMCz,.checkbox_hds-checkbox__9HMCz *,.checkbox_hds-checkbox__9HMCz :after,.checkbox_hds-checkbox__9HMCz :before{box-sizing:border-box}.checkbox_hds-checkbox__9HMCz:not(:first-of-type){margin-top:var(--spacing-2-xs)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:before,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__label__3HoD3:before{content:\"\";left:0;position:absolute;top:0}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:before{background-color:var(--icon-color-unselected);height:var(--size);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M21 7L10 18l-5.5-5.5L6 11l4 4 9.5-9.5z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M21 7L10 18l-5.5-5.5L6 11l4 4 9.5-9.5z'/%3E%3C/g%3E%3C/svg%3E\");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:calc(var(--size) * var(--icon-scale));mask-size:calc(var(--size) * var(--icon-scale));transform:scale(.6);width:var(--size);z-index:1}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__label__3HoD3:before{height:var(--size);width:var(--size)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__label__3HoD3:after{background-color:var(--background-unselected);border:var(--border-width) solid var(--border-color-unselected);height:var(--size);width:var(--size)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:focus+.checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:focus:before,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:hover+.checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:hover:before{transition:85ms ease-out;transition-property:background-color,border-color,transform}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:focus+.checkbox_hds-checkbox__label__3HoD3:before{box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);transform:translateZ(0);transition:85ms ease-out;transition-property:box-shadow,transform}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;font-family:inherit;font-size:100%;height:var(--size);left:0;line-height:1.15;margin:0;outline:none;position:absolute;top:0;width:var(--size)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__label__3HoD3{color:var(--label-color);cursor:pointer;font-size:var(--label-font-size);line-height:var(--lineheight-m);padding-left:calc(var(--size) + var(--label-padding));padding-top:calc((var(--size) - (var(--label-font-size) * var(--lineheight-m))) / 2);position:relative}.checkbox_hds-checkbox__error-text__2aFst{color:var(--color-error);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.checkbox_hds-checkbox__error-text__2aFst:before{background:var(--color-error);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:checked:before{background-color:var(--icon-color-selected);transform:scale(1)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:checked):indeterminate:before{background-color:var(--icon-color-selected);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M6 11h12v2H6z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M6 11h12v2H6z'/%3E%3C/g%3E%3C/svg%3E\");transform:scale(1)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:checked+.checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:indeterminate+.checkbox_hds-checkbox__label__3HoD3:after{background-color:var(--background-selected);border-color:var(--border-color-selected)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:disabled+.checkbox_hds-checkbox__label__3HoD3:after{background-color:var(--background-disabled);border-color:var(--border-color-disabled)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):focus+.checkbox_hds-checkbox__label__3HoD3:after{border-color:var(--border-color-unselected-focus)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):hover+.checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):hover:focus+.checkbox_hds-checkbox__label__3HoD3:after{border-color:var(--border-color-unselected-hover)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):checked:focus+.checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):indeterminate:focus+.checkbox_hds-checkbox__label__3HoD3:after{border-color:var(--border-color-selected-focus)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):checked:hover+.checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):checked:hover:focus+.checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):indeterminate:hover+.checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):indeterminate:hover:focus+.checkbox_hds-checkbox__label__3HoD3:after{background-color:var(--background-hover);border-color:var(--border-color-selected-hover)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:disabled+.checkbox_hds-checkbox__label__3HoD3{color:var(--label-color-disabled)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:checked:disabled:before{background-color:var(--icon-color-disabled)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:disabled,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:disabled+.checkbox_hds-checkbox__label__3HoD3{cursor:not-allowed}.helpers_visually-hidden__3lBcX{border:0;clip:\"rect(0 0 0 0)\";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.helpers_button-reset__2d38b{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.helpers_text-body__FA9G-{color:var(--color-black-90);font-family:var(--font-default);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.helpers_text-medium__3Hiiz{font-family:var(--font-default);font-weight:500}.helpers_text-bold__2QyP8{font-family:var(--font-default);font-weight:700}.helpers_text-xl__33T1r{font-size:var(--fontsize-heading-m)}.helpers_text-lg__1_8nq{font-size:var(--fontsize-heading-s)}.helpers_text-md__RyeCd{font-size:var(--fontsize-heading-xs)}.helpers_subtitle__RE8f_{font-size:var(--fontsize-body-m)}.helpers_text-sm__AxqmS{font-size:var(--fontsize-body-s);line-height:var(--lineheight-xl)}.helpers_heading-xxl__1GAqs{font-size:var(--fontsize-heading-xxl);font-weight:400;letter-spacing:-1.2px;line-height:var(--lineheight-s)}.helpers_heading-xl__u_X50{font-size:var(--fontsize-heading-xl);font-weight:400;letter-spacing:-1px;line-height:var(--lineheight-s)}.helpers_heading-xl-mobile__gKona{font-size:var(--fontsize-heading-xl-mobile);font-weight:400;letter-spacing:-.8px;line-height:var(--lineheight-s)}.helpers_heading-l__3EMpz{font-size:var(--fontsize-heading-l);font-weight:400;letter-spacing:-.4px;line-height:var(--lineheight-s)}.helpers_heading-m__1Lsy-{font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-.2px;line-height:32px}.helpers_heading-s__1EK5w{font-size:var(--fontsize-heading-s);font-weight:500;letter-spacing:.2px;line-height:1.4}.helpers_heading-xs__iZYJi{font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:.4px;line-height:1.33}.helpers_heading-xxs__jqtFk{font-size:var(--fontsize-heading-xxs);font-weight:700;letter-spacing:.4px;line-height:var(--lineheight-l)}.helpers_helper-text__YRZTD{color:var(--color-black-60);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs)}.Checkbox-module_tooltipButton__2shV1{display:inline-block;margin-left:var(--spacing-2-xs)}");const h=l.forwardRef(((e,t)=>{var{checked:n=!1,className:c,disabled:h=!1,errorText:d,helperText:b,id:_,indeterminate:u,label:p,onChange:x=(()=>null),style:k,value:m,tooltipText:g,tooltipLabel:f,tooltipButtonLabel:v}=e,E=(0,o._)(e,["checked","className","disabled","errorText","helperText","id","indeterminate","label","onChange","style","value","tooltipText","tooltipLabel","tooltipButtonLabel"]);const C=(0,l.useRef)(null);(0,l.useEffect)((()=>{t&&(0,r.m)(t,C),C.current.indeterminate=u}),[C,t,u]),p&&"string"!=typeof p&&"number"!=typeof p&&console.warn("Using ReactElement as a label is against good usability and accessibility practices. Please prefer plain strings.");const z=(0,s.c)(_,b,d,void 0,void 0);return l.createElement("div",{className:(0,a.c)("Checkbox-module_checkbox__3L0GR checkbox_hds-checkbox__9HMCz",c),style:k},l.createElement("input",Object.assign({ref:C,id:_,className:(0,a.c)("Checkbox-module_input__3VZvy checkbox_hds-checkbox__input__1w0pu"),onChange:x,value:m,type:"checkbox",disabled:h,checked:n,"aria-describedby":z.length>0?z:null},E)),l.createElement("label",{htmlFor:_,className:(0,a.c)("Checkbox-module_label__L5AN1 checkbox_hds-checkbox__label__3HoD3")},p),g&&l.createElement(i.T,{className:"Checkbox-module_tooltipButton__2shV1",buttonLabel:v,tooltipLabel:f},g),d&&l.createElement("div",{className:"Checkbox-module_errorText__5EREQ checkbox_hds-checkbox__error-text__2aFst",id:_+"-error"},d),b&&l.createElement("div",{className:"Checkbox-module_helperText__1vKwY helpers_helper-text__YRZTD",id:_+"-helper"},b))}))},61538:function(e,t,n){"use strict";n.d(t,{F:function(){return s}});var o=n(80136),l=n(67294),c=n(7444),a=n(34300),r=n(45422);(0,c.s)('.fieldset_hds-fieldset__2FPi3{--border-style:0 none;--padding-top:4px;--padding-sides:0;--padding-bottom:var(--spacing-s);border:var(--border-style);box-sizing:border-box;padding:var(--padding-top) var(--padding-sides) var(--padding-bottom)}.fieldset_hds-fieldset-legend__2-X6z{font-weight:700;padding:0}.fieldset_hds-fieldset--border__3aSAk{--border-style:2px inset var(--color-black-90);--padding-top:2px;--padding-sides:12px}.fieldset_hds-fieldset--border__3aSAk>.fieldset_hds-fieldset-legend__2-X6z{margin-left:calc(var(--padding-sides) / -2);padding:0 6px}.helpers_visually-hidden__1wQpN{border:0;clip:"rect(0 0 0 0)";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.helpers_button-reset__1oMEE{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.helpers_text-body__cNGRV{color:var(--color-black-90);font-family:var(--font-default);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.helpers_text-medium__36w-m{font-family:var(--font-default);font-weight:500}.helpers_text-bold__3Mr-E{font-family:var(--font-default);font-weight:700}.helpers_text-xl__2Tx_B{font-size:var(--fontsize-heading-m)}.helpers_text-lg__cuO5Z{font-size:var(--fontsize-heading-s)}.helpers_text-md__tJ793{font-size:var(--fontsize-heading-xs)}.helpers_subtitle__2zu-B{font-size:var(--fontsize-body-m)}.helpers_text-sm__1Bfuk{font-size:var(--fontsize-body-s);line-height:var(--lineheight-xl)}.helpers_heading-xxl__2Lhb0{font-size:var(--fontsize-heading-xxl);font-weight:400;letter-spacing:-1.2px;line-height:var(--lineheight-s)}.helpers_heading-xl__1VOyZ{font-size:var(--fontsize-heading-xl);font-weight:400;letter-spacing:-1px;line-height:var(--lineheight-s)}.helpers_heading-xl-mobile__16ACR{font-size:var(--fontsize-heading-xl-mobile);font-weight:400;letter-spacing:-.8px;line-height:var(--lineheight-s)}.helpers_heading-l__3kdJ7{font-size:var(--fontsize-heading-l);font-weight:400;letter-spacing:-.4px;line-height:var(--lineheight-s)}.helpers_heading-m__3pwdU{font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-.2px;line-height:32px}.helpers_heading-s__1lQJG{font-size:var(--fontsize-heading-s);font-weight:500;letter-spacing:.2px;line-height:1.4}.helpers_heading-xs__U5AY1{font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:.4px;line-height:1.33}.helpers_heading-xxs__1-Y0n{font-size:var(--fontsize-heading-xxs);font-weight:700;letter-spacing:.4px;line-height:var(--lineheight-l)}.helpers_helper-text__1eU9U{color:var(--color-black-60);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs)}.Fieldset-module_legendWithTooltip__1fDha{align-items:center;display:flex;grid-column-gap:var(--spacing-2-xs);justify-content:flex-start}.Fieldset-module_tooltipButton__2lhCc{align-items:center;display:flex}');const s=e=>{var{heading:t,border:n,className:c,helperText:s,tooltipText:i,tooltipLabel:h,tooltipButtonLabel:d,children:b}=e,_=(0,o._)(e,["heading","border","className","helperText","tooltipText","tooltipLabel","tooltipButtonLabel","children"]);return l.createElement("fieldset",Object.assign({className:(0,a.c)("Fieldset-module_fieldset__2OtST fieldset_hds-fieldset__2FPi3",n&&"fieldset_hds-fieldset--border__3aSAk",c)},_),l.createElement("legend",{className:i?"Fieldset-module_legendWithTooltip__1fDha fieldset_hds-fieldset-legend__2-X6z":"Fieldset-module_legend__35Acm fieldset_hds-fieldset-legend__2-X6z"},t,i&&l.createElement(r.T,{className:"Fieldset-module_tooltipButton__2lhCc",tooltipLabel:h,buttonLabel:d},i)),b,s&&l.createElement("div",{className:"Fieldset-module_helperText__BZXwu helpers_helper-text__1eU9U"},s))}},66016:function(e,t,n){"use strict";n.d(t,{S:function(){return d}});var o=n(80136),l=n(67294),c=n(7444),a=n(34300),r=n(91267),s=n(42215),i=n(45422),h={label:"SelectionGroup-module_label__qlluz",selectionGroup:"SelectionGroup-module_selectionGroup__6Jxu8",items:"SelectionGroup-module_items__28m_S",vertical:"SelectionGroup-module_vertical__3iorC",horizontal:"SelectionGroup-module_horizontal__2eiY9",tooltipButton:"SelectionGroup-module_tooltipButton__2ibjm",errorText:"SelectionGroup-module_errorText__3tOPD selection-group_hds-selection-group__error-text__1Ynb9",helperText:"SelectionGroup-module_helperText__2k_WY helpers_helper-text__3QI7A"};(0,c.s)(".selection-group_hds-selection-group__2bwsd{--spacing-col:1.25rem;--spacing-row:var(--spacing-s);--label-color-default:var(--color-black-90);--icon-size:var(--spacing-m);border:0;padding:0}.selection-group_hds-selection-group__2bwsd>:not(.selection-group_hds-selection-group__items__21yOL){float:left}.selection-group_hds-selection-group__legend__149U2{box-sizing:border-box;color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-row);max-width:100%;padding:0;white-space:normal}.selection-group_hds-selection-group__required__3XPYK{color:var(--label-color-default);display:inline-block;font-size:var(--fontsize-body-xl);line-height:1;margin-left:var(--spacing-2-xs);transform:translateY(var(--spacing-3-xs))}.selection-group_hds-selection-group__items__21yOL{clear:left;display:grid;grid-gap:var(--spacing-row) var(--spacing-col);gap:var(--spacing-row) var(--spacing-col);justify-content:start}.selection-group_hds-selection-group__items--vertical__1v39g{grid-auto-flow:row}.selection-group_hds-selection-group__items--horizontal__3-_1w{grid-auto-flow:column}.selection-group_hds-selection-group__error-text__1Ynb9{color:var(--color-error);display:block;font-size:var(--fontsize-body-m);margin-top:var(--spacing-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.selection-group_hds-selection-group__error-text__1Ynb9:before{background:var(--color-error);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.helpers_visually-hidden__8xzsB{border:0;clip:\"rect(0 0 0 0)\";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.helpers_button-reset__D5XBg{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.helpers_text-body__kuwbN{color:var(--color-black-90);font-family:var(--font-default);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.helpers_text-medium__3yuel{font-family:var(--font-default);font-weight:500}.helpers_text-bold__2m1Nh{font-family:var(--font-default);font-weight:700}.helpers_text-xl__3Q3g5{font-size:var(--fontsize-heading-m)}.helpers_text-lg__3N-Yu{font-size:var(--fontsize-heading-s)}.helpers_text-md__1iyYX{font-size:var(--fontsize-heading-xs)}.helpers_subtitle__28FvQ{font-size:var(--fontsize-body-m)}.helpers_text-sm__OuSWo{font-size:var(--fontsize-body-s);line-height:var(--lineheight-xl)}.helpers_heading-xxl__1KMqh{font-size:var(--fontsize-heading-xxl);font-weight:400;letter-spacing:-1.2px;line-height:var(--lineheight-s)}.helpers_heading-xl__G41Bl{font-size:var(--fontsize-heading-xl);font-weight:400;letter-spacing:-1px;line-height:var(--lineheight-s)}.helpers_heading-xl-mobile__uKZqQ{font-size:var(--fontsize-heading-xl-mobile);font-weight:400;letter-spacing:-.8px;line-height:var(--lineheight-s)}.helpers_heading-l__29CXO{font-size:var(--fontsize-heading-l);font-weight:400;letter-spacing:-.4px;line-height:var(--lineheight-s)}.helpers_heading-m__16IDL{font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-.2px;line-height:32px}.helpers_heading-s__17rm-{font-size:var(--fontsize-heading-s);font-weight:500;letter-spacing:.2px;line-height:1.4}.helpers_heading-xs__rPz00{font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:.4px;line-height:1.33}.helpers_heading-xxs__Onkxt{font-size:var(--fontsize-heading-xxs);font-weight:700;letter-spacing:.4px;line-height:var(--lineheight-l)}.helpers_helper-text__3QI7A{color:var(--color-black-60);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs)}.SelectionGroup-module_label__qlluz{color:var(--label-color-default,var(--color-black-90));display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.SelectionGroup-module_selectionGroup__6Jxu8{--spacing-col:1.25rem;--spacing-row:var(--spacing-s);--label-color-default:var(--color-black-90);--icon-size:var(--spacing-m);border:0;padding:0}.SelectionGroup-module_selectionGroup__6Jxu8>:not(.SelectionGroup-module_items__28m_S){float:left}.SelectionGroup-module_label__qlluz{margin-bottom:var(--spacing-row);padding:0}.SelectionGroup-module_items__28m_S{clear:left;display:grid;gap:var(--spacing-row) var(--spacing-col);justify-content:start}.SelectionGroup-module_items__28m_S.SelectionGroup-module_vertical__3iorC{grid-auto-flow:row}.SelectionGroup-module_items__28m_S.SelectionGroup-module_horizontal__2eiY9{grid-auto-flow:column}.SelectionGroup-module_tooltipButton__2ibjm{margin-left:var(--spacing-2-xs)}");const d=e=>{var{label:t,direction:n="vertical",errorText:c,helperText:d,required:b,tooltipLabel:_,tooltipButtonLabel:u,tooltipText:p,children:x,className:k}=e,m=(0,o._)(e,["label","direction","errorText","helperText","required","tooltipLabel","tooltipButtonLabel","tooltipText","children","className"]);const g=(0,s.a)(x);return(0,l.useEffect)((()=>{let e=!1,t=!1;g.forEach((n=>{const o=n,{displayName:l}=o.type;"RadioButton"===l&&(e=!0,!0===o.props.checked&&(t=!0))})),e&&!t&&console.warn("All radio buttons in a SelectionGroup are unchecked. One radio button should be checked by default.")}),[x]),l.createElement("fieldset",Object.assign({className:(0,a.c)(h.selectionGroup,k)},m),l.createElement("legend",{className:h.label},t," ",b&&l.createElement(r.R,null)),p&&l.createElement(i.T,{buttonClassName:h.tooltipButton,tooltipLabel:_,buttonLabel:u},p),l.createElement("div",{className:(0,a.c)(h.items,h[n])},g.map((e=>(0,l.isValidElement)(e)&&l.createElement("div",{key:e.props.id,className:h.item},e)))),c&&l.createElement("div",{className:h.errorText},c),d&&l.createElement("div",{className:h.helperText},d))}},83428:function(e,t,n){"use strict";n.d(t,{S:function(){return i}});var o=n(80136),l=n(67294),c=n(7444),a=n(34300),r={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,c.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const s=e=>{let{icon:t}=e;return l.createElement("span",{className:r.statusLabelIcon,"aria-hidden":"true"},t)},i=e=>{var{children:t,className:n,dataTestId:c,type:i="neutral",iconLeft:h}=e,d=(0,o._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,a.c)(r.statusLabel,r[i],h&&r.statusLabelWithIcon,n),"data-testid":c},d),h&&l.createElement(s,{icon:h}),t)}},37776:function(e,t,n){"use strict";n.d(t,{c:function(){return o}});var o=(e,t,n,o,l)=>[t&&e+"-helper",n&&e+"-error",o&&e+"-success",l&&e+"-info"].filter((e=>e)).join(" ")},94330:function(e,t,n){"use strict";n.d(t,{m:function(){return c}});var o=n(91309),l=n.n(o),c=(e,t)=>{l()(e)?e(t.current):e.current=t.current}},97452:function(e,t,n){"use strict";n.r(t);var o=n(11151),l=n(67294),c=n(2592),a=n(66016),r=n(61538),s=n(23285);const i=e=>{let{children:t,pageContext:n}=e;return l.createElement(s.default,{pageContext:n},t)};function h(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",h4:"h4",pre:"pre",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",strong:"strong",p:"p"},(0,o.ah)(),e.components),{Playground:n,IconCheckCircleFill:s,Link:i,ExternalLink:h}=t;return h||d("ExternalLink",!0),s||d("IconCheckCircleFill",!0),i||d("Link",!0),n||d("Playground",!0),l.createElement(l.Fragment,null,l.createElement(t.h2,{id:"code",style:{position:"relative"}},"Code",l.createElement(t.a,{href:"#code","aria-label":"code permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h3,{id:"code-examples",style:{position:"relative"}},"Code examples",l.createElement(t.a,{href:"#code-examples","aria-label":"code examples permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h4,{id:"checkbox-with-label",style:{position:"relative"}},"Checkbox with label",l.createElement(t.a,{href:"#checkbox-with-label","aria-label":"checkbox with label permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n,{scope:{Checkbox:c.C}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},'import { Checkbox } from \'hds-react\';\n\n() => {\n  const [checkedItems, setCheckedItems] = React.useState({ "checkbox-checked": true, "checkbox-checked-disabled": true });\n  const onChange = (event) => {\n    setCheckedItems({ ...checkedItems, [event.target.id]: event.target.checked });\n  };\n  return <>\n    <Checkbox label="Label" id="checkbox" checked={checkedItems["checkbox"]} onChange={onChange} />\n    <Checkbox label="Label" id="checkbox-checked" checked={checkedItems["checkbox-checked"]} onChange={onChange} />\n    <Checkbox label="Label" id="checkbox-disabled" checked={checkedItems["checkbox-disabled"]} onChange={onChange} disabled />\n    <Checkbox label="Label" id="checkbox-checked-disabled" checked={checkedItems["checkbox-checked-disabled"]} onChange={onChange} disabled />\n    <Checkbox label="Label" id="checkbox-checked-error-text" checked={checkedItems[\'checkbox-checked-error-text\']} onChange={onChange} errorText="Error text"/>\n    <Checkbox label="Label" id="checkbox-checked-helper-text" checked={checkedItems[\'checkbox-checked-helper-text\']} onChange={onChange} helperText="Helper text"/>\n    <Checkbox label="label" id="checkbox-with-tooltip" tooltipText="tooltip text" tooltipLabel="tooltip text aria label" tooltipButtonLabel="tooltip button aria label" checked={checkedItems[\'checkbox-with-tooltip\']} onChange={onChange}/>\n  </>\n}\n')),l.createElement(t.pre,null,l.createElement(t.code,{className:"language-html"},'<div>\n  <div class="hds-checkbox">\n    <input type="checkbox" id="checkbox-core" class="hds-checkbox__input" />\n    <label for="checkbox-core" class="hds-checkbox__label">Label</label>\n  </div>\n\n  <div class="hds-checkbox">\n    <input type="checkbox" id="checkbox-checked-core" class="hds-checkbox__input" checked />\n    <label for="checkbox-checked-core" class="hds-checkbox__label">Label</label>\n  </div>\n\n  <div class="hds-checkbox">\n    <input type="checkbox" id="checkbox-disabled-core" class="hds-checkbox__input" disabled />\n    <label for="checkbox-disabled-core" class="hds-checkbox__label">Label</label>\n  </div>\n\n  <div class="hds-checkbox">\n    <input type="checkbox" id="checkbox-checked-disabled" class="hds-checkbox__input" checked disabled />\n    <label for="checkbox-checked-disabled" class="hds-checkbox__label">Label</label>\n  </div>\n\n  <div class="hds-checkbox">\n    <input type="checkbox" id="checkbox-core-error-text" class="hds-checkbox__input" checked errorText="Error text"/>\n    <label for="checkbox-core-error-text" class="hds-checkbox__label">Label</label>\n  </div>\n</div>\n'))),"\n",l.createElement(t.h4,{id:"checkbox-group",style:{position:"relative"}},"Checkbox group",l.createElement(t.a,{href:"#checkbox-group","aria-label":"checkbox group permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n,{scope:{Checkbox:c.C,SelectionGroup:a.S}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},'import { Checkbox, SelectionGroup } from \'hds-react\';\n\n() => {\n  const [checkedItems, setCheckedItems] = React.useState({ "v-checkbox1": true, "v-checkbox2": true });\n  const onChange = (event) => {\n    setCheckedItems({ ...checkedItems, [event.target.name]: event.target.checked });\n  };\n  return (\n    <SelectionGroup label="Checkbox group">\n      <Checkbox id="v-checkbox1" name="v-checkbox1" label="Option" checked={checkedItems["v-checkbox1"]} onChange={onChange} />\n      <Checkbox id="v-checkbox2" name="v-checkbox2" label="Option" checked={checkedItems["v-checkbox2"]} onChange={onChange} />\n      <Checkbox id="v-checkbox3" name="v-checkbox3" label="Option" checked={checkedItems["v-checkbox3"]} onChange={onChange} />\n      <Checkbox id="v-checkbox4" name="v-checkbox4" label="Option" checked={checkedItems["v-checkbox4"]} onChange={onChange} />\n    </SelectionGroup>\n  );\n}\n')),l.createElement(t.pre,null,l.createElement(t.code,{className:"language-html"},'<fieldset class="hds-selection-group">\n  <legend class="hds-selection-group__legend">Checkbox group</legend>\n  <div class="hds-selection-group__items">\n    <div class="hds-selection-group__item">\n      <div class="hds-checkbox">\n        <input type="checkbox" id="v-checkbox1" name="v-checkbox1" class="hds-checkbox__input" value="foo" checked />\n        <label for="v-checkbox1" class="hds-checkbox__label">Option</label>\n      </div>\n    </div>\n    <div class="hds-selection-group__item">\n      <div class="hds-checkbox">\n        <input type="checkbox" id="v-checkbox2" name="v-checkbox2" class="hds-checkbox__input" value="bar" checked/>\n        <label for="v-checkbox2" class="hds-checkbox__label">Option</label>\n      </div>\n    </div>\n    <div class="hds-selection-group__item">\n      <div class="hds-checkbox">\n        <input type="checkbox" id="v-checkbox3" name="v-checkbox3" class="hds-checkbox__input" value="baz" />\n        <label for="v-checkbox3" class="hds-checkbox__label">Option</label>\n      </div>\n    </div>\n    <div class="hds-selection-group__item">\n      <div class="hds-checkbox">\n        <input type="checkbox" id="v-checkbox4" name="v-checkbox4" class="hds-checkbox__input" value="qux" />\n        <label for="v-checkbox4" class="hds-checkbox__label">Option</label>\n      </div>\n    </div>\n  </div>\n</fieldset>\n'))),"\n",l.createElement(t.h4,{id:"indeterminate",style:{position:"relative"}},"Indeterminate",l.createElement(t.a,{href:"#indeterminate","aria-label":"indeterminate permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n,{scope:{Checkbox:c.C,Fieldset:r.F,useReducer:l.useReducer}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},"import { Checkbox, Fieldset } from 'hds-react';\n\n() => {\n  const CheckboxState = {\n    checked: 0,\n    unchecked: 1,\n    indeterminate: 2,\n  };\n  const areAllChecked = (state) => {\n    let checkedCount = 0;\n    Object.keys(state).forEach((key) => {\n      if (key === 'controllerCheckbox') {\n        return;\n      }\n      if (state[key] === CheckboxState.checked) {\n        checkedCount += 1;\n      }\n    });\n    return checkedCount === 4;\n  };\n  const areAllUnchecked = (state) => {\n    let checkedCount = 0;\n    Object.keys(state).forEach((key) => {\n      if (key === 'controllerCheckbox') {\n        return;\n      }\n      if (state[key] === CheckboxState.checked) {\n        checkedCount += 1;\n      }\n    });\n    return checkedCount === 1;\n  };\n  const reducer = (state, action) => {\n    switch (action.type) {\n      case 'check': {\n        if (action.payload === 'controllerCheckbox') {\n          return {\n            controllerCheckbox: CheckboxState.checked,\n            checkbox1: CheckboxState.checked,\n            checkbox2: CheckboxState.checked,\n            checkbox3: CheckboxState.checked,\n            checkbox4: CheckboxState.checked,\n            checkbox5: CheckboxState.checked,\n          };\n        }\n        return {\n          ...state,\n          [action.payload]: CheckboxState.checked,\n          controllerCheckbox: areAllChecked(state) ? CheckboxState.checked : CheckboxState.indeterminate,\n        };\n      }\n      case 'uncheck': {\n        if (action.payload === 'controllerCheckbox') {\n          return {\n            controllerCheckbox: CheckboxState.unchecked,\n            checkbox1: CheckboxState.unchecked,\n            checkbox2: CheckboxState.unchecked,\n            checkbox3: CheckboxState.unchecked,\n            checkbox4: CheckboxState.unchecked,\n            checkbox5: CheckboxState.unchecked,\n          };\n        }\n        return {\n          ...state,\n          [action.payload]: CheckboxState.unchecked,\n          controllerCheckbox: areAllUnchecked(state) ? CheckboxState.unchecked : CheckboxState.indeterminate,\n        };\n      }\n      default:\n        throw new Error();\n    }\n  };\n  const initialState = {\n    controllerCheckbox: CheckboxState.indeterminate,\n    checkbox1: CheckboxState.checked,\n    checkbox2: CheckboxState.checked,\n    checkbox3: CheckboxState.unchecked,\n    checkbox4: CheckboxState.checked,\n    checkbox5: CheckboxState.unchecked,\n  };\n  const [state, dispatch] = useReducer(reducer, initialState);\n  return (\n    <Fieldset heading=\"Group label *\">\n      <Checkbox\n        aria-controls=\"checkbox1 checkbox2 checkbox3 checkbox4 checkbox5\"\n        id=\"controllerCheckbox\"\n        label=\"Label\"\n        indeterminate={state.controllerCheckbox === CheckboxState.indeterminate}\n        checked={state.controllerCheckbox === CheckboxState.checked}\n        style={{ marginTop: 'var(--spacing-xs)' }}\n        onChange={() => {\n          if (\n            state.controllerCheckbox === CheckboxState.unchecked ||\n            state.controllerCheckbox === CheckboxState.indeterminate\n          ) {\n            dispatch({ type: 'check', payload: 'controllerCheckbox' });\n          } else {\n            dispatch({ type: 'uncheck', payload: 'controllerCheckbox' });\n          }\n        }}\n      />\n      <ul style={{ marginLeft: 'var(--spacing-s)', paddingInlineStart: '0' }}>\n        {Object.entries(state).map((entry) => {\n          if (entry[0] === 'controllerCheckbox') {\n            return null;\n          }\n          return (\n            <li key={entry[0]} style={{ marginTop: 'var(--spacing-s)', listStyle: 'none' }}>\n              <Checkbox\n                id={entry[0]}\n                key={entry[0]}\n                label=\"Label\"\n                checked={entry[1] === CheckboxState.checked}\n                onChange={() => {\n                  if (entry[1] === CheckboxState.unchecked) {\n                    dispatch({ type: 'check', payload: entry[0] });\n                  } else {\n                    dispatch({ type: 'uncheck', payload: entry[0] });\n                  }\n                }}\n              />\n            </li>\n          );\n        })}\n      </ul>\n    </Fieldset>\n  );\n}\n"))),"\n",l.createElement(t.h3,{id:"packages",style:{position:"relative"}},"Packages",l.createElement(t.a,{href:"#packages","aria-label":"packages permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.table,null,l.createElement(t.thead,null,l.createElement(t.tr,null,l.createElement(t.th,null,"Package"),l.createElement(t.th,null,"Included"),l.createElement(t.th,null,"Storybook link"),l.createElement(t.th,null,"Source link"))),l.createElement(t.tbody,null,l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.strong,null,"HDS React")),l.createElement(t.td,null,l.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},l.createElement(s)," Yes ")),l.createElement(t.td,null,l.createElement(i,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-checkbox--default"},"View in Storybook")),l.createElement(t.td,null,l.createElement(h,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/blob/master/packages/react/src/components/checkbox/Checkbox.tsx"},"View source"))),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.strong,null,"HDS Core")),l.createElement(t.td,null,l.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},l.createElement(s)," Yes ")),l.createElement(t.td,null,l.createElement(i,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/core/?path=/story/components-checkbox--default"},"View in Storybook")),l.createElement(t.td,null,l.createElement(h,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/core/src/components/checkbox"},"View source"))))),"\n",l.createElement(t.h3,{id:"properties",style:{position:"relative"}},"Properties",l.createElement(t.a,{href:"#properties","aria-label":"properties permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"Note! You can find the full list of properties in the ",l.createElement(i,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-checkbox--default"},"React Storybook.")),"\n",l.createElement(t.table,null,l.createElement(t.thead,null,l.createElement(t.tr,null,l.createElement(t.th,null,"Property"),l.createElement(t.th,null,"Description"),l.createElement(t.th,null,"Values"),l.createElement(t.th,null,"Default value"))),l.createElement(t.tbody,null,l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"checked")),l.createElement(t.td,null,"If set to true, the component is checked."),l.createElement(t.td,null,l.createElement(t.code,null,"boolean")),l.createElement(t.td,null,"false")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"disabled")),l.createElement(t.td,null,"If set to true, the component is disabled."),l.createElement(t.td,null,l.createElement(t.code,null,"boolean")),l.createElement(t.td,null,"false")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"indeterminate")),l.createElement(t.td,null,"If set to true, the component is in indeterminate state."),l.createElement(t.td,null,l.createElement(t.code,null,"boolean")),l.createElement(t.td,null,"false")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"label")),l.createElement(t.td,null,"A text label for the checkbox."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"errorText")),l.createElement(t.td,null,"The error text content that will be shown below the checkbox."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"helperText")),l.createElement(t.td,null,"The helper text content that will be shown below the checkbox."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"tooltipLabel")),l.createElement(t.td,null,"The aria-label text for the tooltip."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"tooltipButtonLabel")),l.createElement(t.td,null,"The aria-label text for the tooltip trigger button."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"tooltipText")),l.createElement(t.td,null,"The text content of the tooltip."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"onChange")),l.createElement(t.td,null,"Callback fired when the state is changed."),l.createElement(t.td,null,l.createElement(t.code,null,"function")),l.createElement(t.td,null,"-")))))}function d(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){return void 0===e&&(e={}),l.createElement(i,e,l.createElement(h,e))}},23285:function(e,t,n){"use strict";n.r(t);var o=n(11151),l=n(67294),c=n(83428),a=n(57674),r=n(89482),s=(n(18607),n(26127));function i(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,o.ah)(),e.components);return s.Z||h("PageTabs",!1),s.Z.Tab||h("PageTabs.Tab",!0),s.Z.TabList||h("PageTabs.TabList",!0),s.Z.TabPanel||h("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"checkbox",style:{position:"relative"}},"Checkbox",l.createElement(t.a,{href:"#checkbox","aria-label":"checkbox permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(c.S,{type:"info"},"Stable"),l.createElement(c.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(a.Z)),"\n",l.createElement(r.Z,null,"Checkboxes are used to pick an option when one or more options can be chosen."),"\n",l.createElement(s.Z,{pageContext:e.pageContext},l.createElement(s.Z.TabList,null,l.createElement(s.Z.Tab,{href:"/"},"Usage"),l.createElement(s.Z.Tab,{href:"/code"},"Code"),l.createElement(s.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(s.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(s.Z.TabPanel,null,e.children)))}function h(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,o.ah)(),e.components);return t?l.createElement(t,e,l.createElement(i,e)):i(e)}},89482:function(e,t,n){"use strict";var o=n(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:n="var(--fontsize-body-xl)",style:l={},children:c}=e;return o.createElement("p",{style:{fontSize:n,color:t,maxWidth:600,...l}},c)}},26127:function(e,t,n){"use strict";var o=n(67294),l=n(14160),c=n(94671);const a="PageTabList",r="PageTabPanel",s="PageTab",i=e=>{var t;let{pageContext:n,children:i}=e;const h=n.frontmatter.slug,d=Array.isArray(i)?i:[i],b=d.find((e=>(0,o.isValidElement)(e)&&e.type.componentName===a)),_=d.find((e=>(0,o.isValidElement)(e)&&e.type.componentName===r)),u=null===(t=b.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===s)),p=u.findIndex((e=>h.endsWith(e.props.href))),x=-1===p?0:p,k=0===x?h:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(h);return o.createElement(c.a,{initiallyActiveTab:x},o.createElement(c.a.TabList,{className:"page-tabs-list"},u.map((e=>o.createElement(c.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?k:k+e.props.href))},e.props.children)))),u.map(((e,t)=>o.createElement(c.a.TabPanel,{key:e.props.href},x===t?_.props.children:o.createElement("div",null)))))},h=e=>{let{children:t}=e;return o.createElement(c.a.TabList,null,t)};h.componentName=a;const d=e=>{let{href:t,slug:n,children:l}=e;return o.createElement(c.a.Tab,null,l)};d.componentName=s;const b=e=>{let{children:t}=e;return o.createElement(c.a.TabPanel,null,t)};b.componentName=r,i.TabList=h,i.Tab=d,i.TabPanel=b,t.Z=i},57674:function(e,t,n){"use strict";var o=n(67294),l=n(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return o.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},o.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>o.createElement("li",{key:t},o.createElement("span",{className:"status-name"},t),o.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-checkbox-customisation-mdx-89fc13f983456262e82f.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-checkbox-customisation-mdx-89fc13f983456262e82f.js
new file mode 100644
index 00000000000..789bc125a61
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-checkbox-customisation-mdx-89fc13f983456262e82f.js
@@ -0,0 +1 @@
+(self.webpackChunksite=self.webpackChunksite||[]).push([[4782,8492],{91309:function(e,t,o){var c="[object Null]",l="[object Undefined]",a="object"==typeof o.g&&o.g&&o.g.Object===Object&&o.g,r="object"==typeof self&&self&&self.Object===Object&&self,n=a||r||Function("return this")(),s=Object.prototype,i=s.hasOwnProperty,h=s.toString,d=n.Symbol,b=d?d.toStringTag:void 0;function _(e){return null==e?void 0===e?l:c:b&&b in Object(e)?function(e){var t=i.call(e,b),o=e[b];try{e[b]=void 0;var c=!0}catch(a){}var l=h.call(e);c&&(t?e[b]=o:delete e[b]);return l}(e):function(e){return h.call(e)}(e)}e.exports=function(e){if(!function(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}(e))return!1;var t=_(e);return"[object Function]"==t||"[object GeneratorFunction]"==t||"[object AsyncFunction]"==t||"[object Proxy]"==t}},2592:function(e,t,o){"use strict";o.d(t,{C:function(){return h}});var c=o(80136),l=o(67294),a=o(7444),r=o(34300),n=o(94330),s=o(37776),i=o(45422);(0,a.s)(".checkbox_hds-checkbox__9HMCz{--size:24px;--icon-scale:1;--border-width:2px;--outline-width:3px;--label-font-size:var(--fontsize-body-m);--label-padding:var(--spacing-2-xs);--background-unselected:transparent;--background-selected:var(--color-bus);--background-hover:var(--color-bus-dark);--background-disabled:var(--color-black-10);--border-color-selected:var(--color-bus);--border-color-selected-hover:var(--color-bus-dark);--border-color-selected-focus:var(--color-bus);--border-color-unselected:var(--color-black-50);--border-color-unselected-hover:var(--color-black-90);--border-color-unselected-focus:var(--color-black-90);--border-color-disabled:var(--color-black-10);--icon-color-unselected:transparent;--icon-color-selected:var(--color-white);--icon-color-disabled:var(--color-white);--label-color:var(--color-black-90);--label-color-disabled:var(--color-black-40);--icon-size:var(--spacing-m);display:flex;flex-wrap:wrap;min-height:var(--size);position:relative}.checkbox_hds-checkbox__9HMCz,.checkbox_hds-checkbox__9HMCz *,.checkbox_hds-checkbox__9HMCz :after,.checkbox_hds-checkbox__9HMCz :before{box-sizing:border-box}.checkbox_hds-checkbox__9HMCz:not(:first-of-type){margin-top:var(--spacing-2-xs)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:before,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__label__3HoD3:before{content:\"\";left:0;position:absolute;top:0}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:before{background-color:var(--icon-color-unselected);height:var(--size);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M21 7L10 18l-5.5-5.5L6 11l4 4 9.5-9.5z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M21 7L10 18l-5.5-5.5L6 11l4 4 9.5-9.5z'/%3E%3C/g%3E%3C/svg%3E\");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:calc(var(--size) * var(--icon-scale));mask-size:calc(var(--size) * var(--icon-scale));transform:scale(.6);width:var(--size);z-index:1}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__label__3HoD3:before{height:var(--size);width:var(--size)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__label__3HoD3:after{background-color:var(--background-unselected);border:var(--border-width) solid var(--border-color-unselected);height:var(--size);width:var(--size)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:focus+.checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:focus:before,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:hover+.checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:hover:before{transition:85ms ease-out;transition-property:background-color,border-color,transform}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:focus+.checkbox_hds-checkbox__label__3HoD3:before{box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);transform:translateZ(0);transition:85ms ease-out;transition-property:box-shadow,transform}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;font-family:inherit;font-size:100%;height:var(--size);left:0;line-height:1.15;margin:0;outline:none;position:absolute;top:0;width:var(--size)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__label__3HoD3{color:var(--label-color);cursor:pointer;font-size:var(--label-font-size);line-height:var(--lineheight-m);padding-left:calc(var(--size) + var(--label-padding));padding-top:calc((var(--size) - (var(--label-font-size) * var(--lineheight-m))) / 2);position:relative}.checkbox_hds-checkbox__error-text__2aFst{color:var(--color-error);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.checkbox_hds-checkbox__error-text__2aFst:before{background:var(--color-error);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:checked:before{background-color:var(--icon-color-selected);transform:scale(1)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:checked):indeterminate:before{background-color:var(--icon-color-selected);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M6 11h12v2H6z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M6 11h12v2H6z'/%3E%3C/g%3E%3C/svg%3E\");transform:scale(1)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:checked+.checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:indeterminate+.checkbox_hds-checkbox__label__3HoD3:after{background-color:var(--background-selected);border-color:var(--border-color-selected)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:disabled+.checkbox_hds-checkbox__label__3HoD3:after{background-color:var(--background-disabled);border-color:var(--border-color-disabled)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):focus+.checkbox_hds-checkbox__label__3HoD3:after{border-color:var(--border-color-unselected-focus)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):hover+.checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):hover:focus+.checkbox_hds-checkbox__label__3HoD3:after{border-color:var(--border-color-unselected-hover)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):checked:focus+.checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):indeterminate:focus+.checkbox_hds-checkbox__label__3HoD3:after{border-color:var(--border-color-selected-focus)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):checked:hover+.checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):checked:hover:focus+.checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):indeterminate:hover+.checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):indeterminate:hover:focus+.checkbox_hds-checkbox__label__3HoD3:after{background-color:var(--background-hover);border-color:var(--border-color-selected-hover)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:disabled+.checkbox_hds-checkbox__label__3HoD3{color:var(--label-color-disabled)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:checked:disabled:before{background-color:var(--icon-color-disabled)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:disabled,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:disabled+.checkbox_hds-checkbox__label__3HoD3{cursor:not-allowed}.helpers_visually-hidden__3lBcX{border:0;clip:\"rect(0 0 0 0)\";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.helpers_button-reset__2d38b{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.helpers_text-body__FA9G-{color:var(--color-black-90);font-family:var(--font-default);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.helpers_text-medium__3Hiiz{font-family:var(--font-default);font-weight:500}.helpers_text-bold__2QyP8{font-family:var(--font-default);font-weight:700}.helpers_text-xl__33T1r{font-size:var(--fontsize-heading-m)}.helpers_text-lg__1_8nq{font-size:var(--fontsize-heading-s)}.helpers_text-md__RyeCd{font-size:var(--fontsize-heading-xs)}.helpers_subtitle__RE8f_{font-size:var(--fontsize-body-m)}.helpers_text-sm__AxqmS{font-size:var(--fontsize-body-s);line-height:var(--lineheight-xl)}.helpers_heading-xxl__1GAqs{font-size:var(--fontsize-heading-xxl);font-weight:400;letter-spacing:-1.2px;line-height:var(--lineheight-s)}.helpers_heading-xl__u_X50{font-size:var(--fontsize-heading-xl);font-weight:400;letter-spacing:-1px;line-height:var(--lineheight-s)}.helpers_heading-xl-mobile__gKona{font-size:var(--fontsize-heading-xl-mobile);font-weight:400;letter-spacing:-.8px;line-height:var(--lineheight-s)}.helpers_heading-l__3EMpz{font-size:var(--fontsize-heading-l);font-weight:400;letter-spacing:-.4px;line-height:var(--lineheight-s)}.helpers_heading-m__1Lsy-{font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-.2px;line-height:32px}.helpers_heading-s__1EK5w{font-size:var(--fontsize-heading-s);font-weight:500;letter-spacing:.2px;line-height:1.4}.helpers_heading-xs__iZYJi{font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:.4px;line-height:1.33}.helpers_heading-xxs__jqtFk{font-size:var(--fontsize-heading-xxs);font-weight:700;letter-spacing:.4px;line-height:var(--lineheight-l)}.helpers_helper-text__YRZTD{color:var(--color-black-60);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs)}.Checkbox-module_tooltipButton__2shV1{display:inline-block;margin-left:var(--spacing-2-xs)}");const h=l.forwardRef(((e,t)=>{var{checked:o=!1,className:a,disabled:h=!1,errorText:d,helperText:b,id:_,indeterminate:u,label:p,onChange:x=(()=>null),style:k,value:m,tooltipText:f,tooltipLabel:v,tooltipButtonLabel:g}=e,E=(0,c._)(e,["checked","className","disabled","errorText","helperText","id","indeterminate","label","onChange","style","value","tooltipText","tooltipLabel","tooltipButtonLabel"]);const z=(0,l.useRef)(null);(0,l.useEffect)((()=>{t&&(0,n.m)(t,z),z.current.indeterminate=u}),[z,t,u]),p&&"string"!=typeof p&&"number"!=typeof p&&console.warn("Using ReactElement as a label is against good usability and accessibility practices. Please prefer plain strings.");const w=(0,s.c)(_,b,d,void 0,void 0);return l.createElement("div",{className:(0,r.c)("Checkbox-module_checkbox__3L0GR checkbox_hds-checkbox__9HMCz",a),style:k},l.createElement("input",Object.assign({ref:z,id:_,className:(0,r.c)("Checkbox-module_input__3VZvy checkbox_hds-checkbox__input__1w0pu"),onChange:x,value:m,type:"checkbox",disabled:h,checked:o,"aria-describedby":w.length>0?w:null},E)),l.createElement("label",{htmlFor:_,className:(0,r.c)("Checkbox-module_label__L5AN1 checkbox_hds-checkbox__label__3HoD3")},p),f&&l.createElement(i.T,{className:"Checkbox-module_tooltipButton__2shV1",buttonLabel:g,tooltipLabel:v},f),d&&l.createElement("div",{className:"Checkbox-module_errorText__5EREQ checkbox_hds-checkbox__error-text__2aFst",id:_+"-error"},d),b&&l.createElement("div",{className:"Checkbox-module_helperText__1vKwY helpers_helper-text__YRZTD",id:_+"-helper"},b))}))},83428:function(e,t,o){"use strict";o.d(t,{S:function(){return i}});var c=o(80136),l=o(67294),a=o(7444),r=o(34300),n={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,a.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const s=e=>{let{icon:t}=e;return l.createElement("span",{className:n.statusLabelIcon,"aria-hidden":"true"},t)},i=e=>{var{children:t,className:o,dataTestId:a,type:i="neutral",iconLeft:h}=e,d=(0,c._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(n.statusLabel,n[i],h&&n.statusLabelWithIcon,o),"data-testid":a},d),h&&l.createElement(s,{icon:h}),t)}},37776:function(e,t,o){"use strict";o.d(t,{c:function(){return c}});var c=(e,t,o,c,l)=>[t&&e+"-helper",o&&e+"-error",c&&e+"-success",l&&e+"-info"].filter((e=>e)).join(" ")},94330:function(e,t,o){"use strict";o.d(t,{m:function(){return a}});var c=o(91309),l=o.n(c),a=(e,t)=>{l()(e)?e(t.current):e.current=t.current}},21330:function(e,t,o){"use strict";o.r(t);var c=o(11151),l=o(67294),a=o(12818),r=o(2592),n=o(23285);const s=e=>{let{children:t,pageContext:o}=e;return l.createElement(n.default,{pageContext:o},t)};function i(e){const t=Object.assign({h2:"h2",a:"a",span:"span",p:"p",h3:"h3",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",pre:"pre"},(0,c.ah)(),e.components),{Playground:o}=t;return o||function(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Playground",!0),l.createElement(l.Fragment,null,l.createElement(t.h2,{id:"customisation",style:{position:"relative"}},"Customisation",l.createElement(t.a,{href:"#customisation","aria-label":"customisation permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.N,{type:"alert",label:"Checkbox customisation works differently!",className:"siteNotification"},l.createElement(t.p,null,"Checkbox is an older HDS component and therefore its customisation works slightly differently. Instead of the\n",l.createElement("code",null,"theme")," property, you need to use the ",l.createElement("code",null,"style")," property. This will be fixed in a future update.")),"\n",l.createElement(t.h3,{id:"customisation-properties",style:{position:"relative"}},"Customisation properties",l.createElement(t.a,{href:"#customisation-properties","aria-label":"customisation properties permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"In Core version, you can either use the ",l.createElement(t.code,null,"style")," or ",l.createElement(t.code,null,"class")," attributes in the HTML to customise the component."),"\n",l.createElement(t.p,null,"In React version, you can either use the ",l.createElement(t.code,null,"style")," or ",l.createElement(t.code,null,"className")," properties to customise the component."),"\n",l.createElement(t.p,null,"See all available theme variables in the table below."),"\n",l.createElement(t.table,null,l.createElement(t.thead,null,l.createElement(t.tr,null,l.createElement(t.th,null,"Theme variable"),l.createElement(t.th,null,"Description"))),l.createElement(t.tbody,null,l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"--size")),l.createElement(t.td,null,"Size of the checkbox")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"--icon-scale")),l.createElement(t.td,null,"Scale of the checkbox check icon")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"--border-width")),l.createElement(t.td,null,"Width of the checkbox border")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"--outline-width")),l.createElement(t.td,null,"Width of the checkbox focus border")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"--background-selected")),l.createElement(t.td,null,"Colour of the checkbox background when selected")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"--background-hover")),l.createElement(t.td,null,"Colour of the checkbox background when hovered")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"--border-color-selected")),l.createElement(t.td,null,"Colour of the checkbox border when selected")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"--border-color-selected-hover")),l.createElement(t.td,null,"Colour of the checkbox border when selected and hovered")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"--border-color-selected-focus")),l.createElement(t.td,null,"Colour of the checkbox border when selected and focused")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"--focus-outline-color")),l.createElement(t.td,null,"Colour of the checkbox focus border")))),"\n",l.createElement(t.h3,{id:"customisation-example",style:{position:"relative"}},"Customisation example",l.createElement(t.a,{href:"#customisation-example","aria-label":"customisation example permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(o,{scope:{Checkbox:r.C,Notification:a.N}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},"import { Checkbox, Notification } from 'hds-react';\n\n() => {\n  const [checked, setChecked] = React.useState(false);\n  const customStyles = {\n    '--size': '40px',\n    '--icon-scale': 0.6,\n    '--border-width': '3px',\n    '--outline-width': '4px',\n    '--background-selected': 'var(--color-success)',\n    '--background-hover': 'var(--color-success-dark)',\n    '--border-color-selected': 'var(--color-success)',\n    '--border-color-selected-hover': 'var(--color-success-dark)',\n    '--border-color-selected-focus': 'var(--color-success)',\n    '--focus-outline-color': 'var(--color-black-20)',\n  };\n  return (\n    <Checkbox\n      id=\"checkbox5\"\n      label=\"Label\"\n      style={customStyles}\n      checked={checked}\n      onChange={() => setChecked(!checked)}\n    />\n  )\n}\n")),l.createElement(t.pre,null,l.createElement(t.code,{className:"language-html"},'<div\n  class="hds-checkbox"\n  style="--size: 40px; --icon-scale: 0.6; --border-width: 3px; --outline-width: 4px;\n  --background-selected: var(--color-success); --background-hover: var(--color-success-dark);\n  --border-color-selected: var(--color-success); --border-color-selected-hover: var(--color-success-dark);\n  --border-color-selected-focus: var(--color-success); --focus-outline-color: var(--color-black-20);"\n>\n  <input type="checkbox" id="checkbox1" class="hds-checkbox__input" value="foo" />\n  <label for="checkbox1" class="hds-checkbox__label">Label</label>\n</div>\n'))))}t.default=function(e){return void 0===e&&(e={}),l.createElement(s,e,l.createElement(i,e))}},23285:function(e,t,o){"use strict";o.r(t);var c=o(11151),l=o(67294),a=o(83428),r=o(57674),n=o(89482),s=(o(18607),o(26127));function i(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,c.ah)(),e.components);return s.Z||h("PageTabs",!1),s.Z.Tab||h("PageTabs.Tab",!0),s.Z.TabList||h("PageTabs.TabList",!0),s.Z.TabPanel||h("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"checkbox",style:{position:"relative"}},"Checkbox",l.createElement(t.a,{href:"#checkbox","aria-label":"checkbox permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(a.S,{type:"info"},"Stable"),l.createElement(a.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(n.Z,null,"Checkboxes are used to pick an option when one or more options can be chosen."),"\n",l.createElement(s.Z,{pageContext:e.pageContext},l.createElement(s.Z.TabList,null,l.createElement(s.Z.Tab,{href:"/"},"Usage"),l.createElement(s.Z.Tab,{href:"/code"},"Code"),l.createElement(s.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(s.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(s.Z.TabPanel,null,e.children)))}function h(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,c.ah)(),e.components);return t?l.createElement(t,e,l.createElement(i,e)):i(e)}},89482:function(e,t,o){"use strict";var c=o(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:o="var(--fontsize-body-xl)",style:l={},children:a}=e;return c.createElement("p",{style:{fontSize:o,color:t,maxWidth:600,...l}},a)}},26127:function(e,t,o){"use strict";var c=o(67294),l=o(14160),a=o(94671);const r="PageTabList",n="PageTabPanel",s="PageTab",i=e=>{var t;let{pageContext:o,children:i}=e;const h=o.frontmatter.slug,d=Array.isArray(i)?i:[i],b=d.find((e=>(0,c.isValidElement)(e)&&e.type.componentName===r)),_=d.find((e=>(0,c.isValidElement)(e)&&e.type.componentName===n)),u=null===(t=b.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===s)),p=u.findIndex((e=>h.endsWith(e.props.href))),x=-1===p?0:p,k=0===x?h:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(h);return c.createElement(a.a,{initiallyActiveTab:x},c.createElement(a.a.TabList,{className:"page-tabs-list"},u.map((e=>c.createElement(a.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?k:k+e.props.href))},e.props.children)))),u.map(((e,t)=>c.createElement(a.a.TabPanel,{key:e.props.href},x===t?_.props.children:c.createElement("div",null)))))},h=e=>{let{children:t}=e;return c.createElement(a.a.TabList,null,t)};h.componentName=r;const d=e=>{let{href:t,slug:o,children:l}=e;return c.createElement(a.a.Tab,null,l)};d.componentName=s;const b=e=>{let{children:t}=e;return c.createElement(a.a.TabPanel,null,t)};b.componentName=n,i.TabList=h,i.Tab=d,i.TabPanel=b,t.Z=i},57674:function(e,t,o){"use strict";var c=o(67294),l=o(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return c.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},c.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>c.createElement("li",{key:t},c.createElement("span",{className:"status-name"},t),c.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-checkbox-index-mdx-87268f0ebf26c7581711.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-checkbox-index-mdx-87268f0ebf26c7581711.js
new file mode 100644
index 00000000000..0fa926affe2
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-checkbox-index-mdx-87268f0ebf26c7581711.js
@@ -0,0 +1 @@
+(self.webpackChunksite=self.webpackChunksite||[]).push([[795,8492],{91309:function(e,t,o){var a="[object Null]",l="[object Undefined]",n="object"==typeof o.g&&o.g&&o.g.Object===Object&&o.g,c="object"==typeof self&&self&&self.Object===Object&&self,r=n||c||Function("return this")(),i=Object.prototype,s=i.hasOwnProperty,h=i.toString,d=r.Symbol,_=d?d.toStringTag:void 0;function b(e){return null==e?void 0===e?l:a:_&&_ in Object(e)?function(e){var t=s.call(e,_),o=e[_];try{e[_]=void 0;var a=!0}catch(n){}var l=h.call(e);a&&(t?e[_]=o:delete e[_]);return l}(e):function(e){return h.call(e)}(e)}e.exports=function(e){if(!function(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}(e))return!1;var t=b(e);return"[object Function]"==t||"[object GeneratorFunction]"==t||"[object AsyncFunction]"==t||"[object Proxy]"==t}},2592:function(e,t,o){"use strict";o.d(t,{C:function(){return h}});var a=o(80136),l=o(67294),n=o(7444),c=o(34300),r=o(94330),i=o(37776),s=o(45422);(0,n.s)(".checkbox_hds-checkbox__9HMCz{--size:24px;--icon-scale:1;--border-width:2px;--outline-width:3px;--label-font-size:var(--fontsize-body-m);--label-padding:var(--spacing-2-xs);--background-unselected:transparent;--background-selected:var(--color-bus);--background-hover:var(--color-bus-dark);--background-disabled:var(--color-black-10);--border-color-selected:var(--color-bus);--border-color-selected-hover:var(--color-bus-dark);--border-color-selected-focus:var(--color-bus);--border-color-unselected:var(--color-black-50);--border-color-unselected-hover:var(--color-black-90);--border-color-unselected-focus:var(--color-black-90);--border-color-disabled:var(--color-black-10);--icon-color-unselected:transparent;--icon-color-selected:var(--color-white);--icon-color-disabled:var(--color-white);--label-color:var(--color-black-90);--label-color-disabled:var(--color-black-40);--icon-size:var(--spacing-m);display:flex;flex-wrap:wrap;min-height:var(--size);position:relative}.checkbox_hds-checkbox__9HMCz,.checkbox_hds-checkbox__9HMCz *,.checkbox_hds-checkbox__9HMCz :after,.checkbox_hds-checkbox__9HMCz :before{box-sizing:border-box}.checkbox_hds-checkbox__9HMCz:not(:first-of-type){margin-top:var(--spacing-2-xs)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:before,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__label__3HoD3:before{content:\"\";left:0;position:absolute;top:0}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:before{background-color:var(--icon-color-unselected);height:var(--size);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M21 7L10 18l-5.5-5.5L6 11l4 4 9.5-9.5z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M21 7L10 18l-5.5-5.5L6 11l4 4 9.5-9.5z'/%3E%3C/g%3E%3C/svg%3E\");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:calc(var(--size) * var(--icon-scale));mask-size:calc(var(--size) * var(--icon-scale));transform:scale(.6);width:var(--size);z-index:1}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__label__3HoD3:before{height:var(--size);width:var(--size)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__label__3HoD3:after{background-color:var(--background-unselected);border:var(--border-width) solid var(--border-color-unselected);height:var(--size);width:var(--size)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:focus+.checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:focus:before,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:hover+.checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:hover:before{transition:85ms ease-out;transition-property:background-color,border-color,transform}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:focus+.checkbox_hds-checkbox__label__3HoD3:before{box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);transform:translateZ(0);transition:85ms ease-out;transition-property:box-shadow,transform}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;font-family:inherit;font-size:100%;height:var(--size);left:0;line-height:1.15;margin:0;outline:none;position:absolute;top:0;width:var(--size)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__label__3HoD3{color:var(--label-color);cursor:pointer;font-size:var(--label-font-size);line-height:var(--lineheight-m);padding-left:calc(var(--size) + var(--label-padding));padding-top:calc((var(--size) - (var(--label-font-size) * var(--lineheight-m))) / 2);position:relative}.checkbox_hds-checkbox__error-text__2aFst{color:var(--color-error);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.checkbox_hds-checkbox__error-text__2aFst:before{background:var(--color-error);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:checked:before{background-color:var(--icon-color-selected);transform:scale(1)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:checked):indeterminate:before{background-color:var(--icon-color-selected);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M6 11h12v2H6z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M6 11h12v2H6z'/%3E%3C/g%3E%3C/svg%3E\");transform:scale(1)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:checked+.checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:indeterminate+.checkbox_hds-checkbox__label__3HoD3:after{background-color:var(--background-selected);border-color:var(--border-color-selected)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:disabled+.checkbox_hds-checkbox__label__3HoD3:after{background-color:var(--background-disabled);border-color:var(--border-color-disabled)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):focus+.checkbox_hds-checkbox__label__3HoD3:after{border-color:var(--border-color-unselected-focus)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):hover+.checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):hover:focus+.checkbox_hds-checkbox__label__3HoD3:after{border-color:var(--border-color-unselected-hover)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):checked:focus+.checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):indeterminate:focus+.checkbox_hds-checkbox__label__3HoD3:after{border-color:var(--border-color-selected-focus)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):checked:hover+.checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):checked:hover:focus+.checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):indeterminate:hover+.checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):indeterminate:hover:focus+.checkbox_hds-checkbox__label__3HoD3:after{background-color:var(--background-hover);border-color:var(--border-color-selected-hover)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:disabled+.checkbox_hds-checkbox__label__3HoD3{color:var(--label-color-disabled)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:checked:disabled:before{background-color:var(--icon-color-disabled)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:disabled,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:disabled+.checkbox_hds-checkbox__label__3HoD3{cursor:not-allowed}.helpers_visually-hidden__3lBcX{border:0;clip:\"rect(0 0 0 0)\";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.helpers_button-reset__2d38b{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.helpers_text-body__FA9G-{color:var(--color-black-90);font-family:var(--font-default);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.helpers_text-medium__3Hiiz{font-family:var(--font-default);font-weight:500}.helpers_text-bold__2QyP8{font-family:var(--font-default);font-weight:700}.helpers_text-xl__33T1r{font-size:var(--fontsize-heading-m)}.helpers_text-lg__1_8nq{font-size:var(--fontsize-heading-s)}.helpers_text-md__RyeCd{font-size:var(--fontsize-heading-xs)}.helpers_subtitle__RE8f_{font-size:var(--fontsize-body-m)}.helpers_text-sm__AxqmS{font-size:var(--fontsize-body-s);line-height:var(--lineheight-xl)}.helpers_heading-xxl__1GAqs{font-size:var(--fontsize-heading-xxl);font-weight:400;letter-spacing:-1.2px;line-height:var(--lineheight-s)}.helpers_heading-xl__u_X50{font-size:var(--fontsize-heading-xl);font-weight:400;letter-spacing:-1px;line-height:var(--lineheight-s)}.helpers_heading-xl-mobile__gKona{font-size:var(--fontsize-heading-xl-mobile);font-weight:400;letter-spacing:-.8px;line-height:var(--lineheight-s)}.helpers_heading-l__3EMpz{font-size:var(--fontsize-heading-l);font-weight:400;letter-spacing:-.4px;line-height:var(--lineheight-s)}.helpers_heading-m__1Lsy-{font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-.2px;line-height:32px}.helpers_heading-s__1EK5w{font-size:var(--fontsize-heading-s);font-weight:500;letter-spacing:.2px;line-height:1.4}.helpers_heading-xs__iZYJi{font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:.4px;line-height:1.33}.helpers_heading-xxs__jqtFk{font-size:var(--fontsize-heading-xxs);font-weight:700;letter-spacing:.4px;line-height:var(--lineheight-l)}.helpers_helper-text__YRZTD{color:var(--color-black-60);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs)}.Checkbox-module_tooltipButton__2shV1{display:inline-block;margin-left:var(--spacing-2-xs)}");const h=l.forwardRef(((e,t)=>{var{checked:o=!1,className:n,disabled:h=!1,errorText:d,helperText:_,id:b,indeterminate:p,label:u,onChange:g=(()=>null),style:x,value:m,tooltipText:f,tooltipLabel:k,tooltipButtonLabel:v}=e,z=(0,a._)(e,["checked","className","disabled","errorText","helperText","id","indeterminate","label","onChange","style","value","tooltipText","tooltipLabel","tooltipButtonLabel"]);const E=(0,l.useRef)(null);(0,l.useEffect)((()=>{t&&(0,r.m)(t,E),E.current.indeterminate=p}),[E,t,p]),u&&"string"!=typeof u&&"number"!=typeof u&&console.warn("Using ReactElement as a label is against good usability and accessibility practices. Please prefer plain strings.");const w=(0,i.c)(b,_,d,void 0,void 0);return l.createElement("div",{className:(0,c.c)("Checkbox-module_checkbox__3L0GR checkbox_hds-checkbox__9HMCz",n),style:x},l.createElement("input",Object.assign({ref:E,id:b,className:(0,c.c)("Checkbox-module_input__3VZvy checkbox_hds-checkbox__input__1w0pu"),onChange:g,value:m,type:"checkbox",disabled:h,checked:o,"aria-describedby":w.length>0?w:null},z)),l.createElement("label",{htmlFor:b,className:(0,c.c)("Checkbox-module_label__L5AN1 checkbox_hds-checkbox__label__3HoD3")},u),f&&l.createElement(s.T,{className:"Checkbox-module_tooltipButton__2shV1",buttonLabel:v,tooltipLabel:k},f),d&&l.createElement("div",{className:"Checkbox-module_errorText__5EREQ checkbox_hds-checkbox__error-text__2aFst",id:b+"-error"},d),_&&l.createElement("div",{className:"Checkbox-module_helperText__1vKwY helpers_helper-text__YRZTD",id:b+"-helper"},_))}))},61538:function(e,t,o){"use strict";o.d(t,{F:function(){return i}});var a=o(80136),l=o(67294),n=o(7444),c=o(34300),r=o(45422);(0,n.s)('.fieldset_hds-fieldset__2FPi3{--border-style:0 none;--padding-top:4px;--padding-sides:0;--padding-bottom:var(--spacing-s);border:var(--border-style);box-sizing:border-box;padding:var(--padding-top) var(--padding-sides) var(--padding-bottom)}.fieldset_hds-fieldset-legend__2-X6z{font-weight:700;padding:0}.fieldset_hds-fieldset--border__3aSAk{--border-style:2px inset var(--color-black-90);--padding-top:2px;--padding-sides:12px}.fieldset_hds-fieldset--border__3aSAk>.fieldset_hds-fieldset-legend__2-X6z{margin-left:calc(var(--padding-sides) / -2);padding:0 6px}.helpers_visually-hidden__1wQpN{border:0;clip:"rect(0 0 0 0)";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.helpers_button-reset__1oMEE{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.helpers_text-body__cNGRV{color:var(--color-black-90);font-family:var(--font-default);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.helpers_text-medium__36w-m{font-family:var(--font-default);font-weight:500}.helpers_text-bold__3Mr-E{font-family:var(--font-default);font-weight:700}.helpers_text-xl__2Tx_B{font-size:var(--fontsize-heading-m)}.helpers_text-lg__cuO5Z{font-size:var(--fontsize-heading-s)}.helpers_text-md__tJ793{font-size:var(--fontsize-heading-xs)}.helpers_subtitle__2zu-B{font-size:var(--fontsize-body-m)}.helpers_text-sm__1Bfuk{font-size:var(--fontsize-body-s);line-height:var(--lineheight-xl)}.helpers_heading-xxl__2Lhb0{font-size:var(--fontsize-heading-xxl);font-weight:400;letter-spacing:-1.2px;line-height:var(--lineheight-s)}.helpers_heading-xl__1VOyZ{font-size:var(--fontsize-heading-xl);font-weight:400;letter-spacing:-1px;line-height:var(--lineheight-s)}.helpers_heading-xl-mobile__16ACR{font-size:var(--fontsize-heading-xl-mobile);font-weight:400;letter-spacing:-.8px;line-height:var(--lineheight-s)}.helpers_heading-l__3kdJ7{font-size:var(--fontsize-heading-l);font-weight:400;letter-spacing:-.4px;line-height:var(--lineheight-s)}.helpers_heading-m__3pwdU{font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-.2px;line-height:32px}.helpers_heading-s__1lQJG{font-size:var(--fontsize-heading-s);font-weight:500;letter-spacing:.2px;line-height:1.4}.helpers_heading-xs__U5AY1{font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:.4px;line-height:1.33}.helpers_heading-xxs__1-Y0n{font-size:var(--fontsize-heading-xxs);font-weight:700;letter-spacing:.4px;line-height:var(--lineheight-l)}.helpers_helper-text__1eU9U{color:var(--color-black-60);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs)}.Fieldset-module_legendWithTooltip__1fDha{align-items:center;display:flex;grid-column-gap:var(--spacing-2-xs);justify-content:flex-start}.Fieldset-module_tooltipButton__2lhCc{align-items:center;display:flex}');const i=e=>{var{heading:t,border:o,className:n,helperText:i,tooltipText:s,tooltipLabel:h,tooltipButtonLabel:d,children:_}=e,b=(0,a._)(e,["heading","border","className","helperText","tooltipText","tooltipLabel","tooltipButtonLabel","children"]);return l.createElement("fieldset",Object.assign({className:(0,c.c)("Fieldset-module_fieldset__2OtST fieldset_hds-fieldset__2FPi3",o&&"fieldset_hds-fieldset--border__3aSAk",n)},b),l.createElement("legend",{className:s?"Fieldset-module_legendWithTooltip__1fDha fieldset_hds-fieldset-legend__2-X6z":"Fieldset-module_legend__35Acm fieldset_hds-fieldset-legend__2-X6z"},t,s&&l.createElement(r.T,{className:"Fieldset-module_tooltipButton__2lhCc",tooltipLabel:h,buttonLabel:d},s)),_,i&&l.createElement("div",{className:"Fieldset-module_helperText__BZXwu helpers_helper-text__1eU9U"},i))}},66016:function(e,t,o){"use strict";o.d(t,{S:function(){return d}});var a=o(80136),l=o(67294),n=o(7444),c=o(34300),r=o(91267),i=o(42215),s=o(45422),h={label:"SelectionGroup-module_label__qlluz",selectionGroup:"SelectionGroup-module_selectionGroup__6Jxu8",items:"SelectionGroup-module_items__28m_S",vertical:"SelectionGroup-module_vertical__3iorC",horizontal:"SelectionGroup-module_horizontal__2eiY9",tooltipButton:"SelectionGroup-module_tooltipButton__2ibjm",errorText:"SelectionGroup-module_errorText__3tOPD selection-group_hds-selection-group__error-text__1Ynb9",helperText:"SelectionGroup-module_helperText__2k_WY helpers_helper-text__3QI7A"};(0,n.s)(".selection-group_hds-selection-group__2bwsd{--spacing-col:1.25rem;--spacing-row:var(--spacing-s);--label-color-default:var(--color-black-90);--icon-size:var(--spacing-m);border:0;padding:0}.selection-group_hds-selection-group__2bwsd>:not(.selection-group_hds-selection-group__items__21yOL){float:left}.selection-group_hds-selection-group__legend__149U2{box-sizing:border-box;color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-row);max-width:100%;padding:0;white-space:normal}.selection-group_hds-selection-group__required__3XPYK{color:var(--label-color-default);display:inline-block;font-size:var(--fontsize-body-xl);line-height:1;margin-left:var(--spacing-2-xs);transform:translateY(var(--spacing-3-xs))}.selection-group_hds-selection-group__items__21yOL{clear:left;display:grid;grid-gap:var(--spacing-row) var(--spacing-col);gap:var(--spacing-row) var(--spacing-col);justify-content:start}.selection-group_hds-selection-group__items--vertical__1v39g{grid-auto-flow:row}.selection-group_hds-selection-group__items--horizontal__3-_1w{grid-auto-flow:column}.selection-group_hds-selection-group__error-text__1Ynb9{color:var(--color-error);display:block;font-size:var(--fontsize-body-m);margin-top:var(--spacing-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.selection-group_hds-selection-group__error-text__1Ynb9:before{background:var(--color-error);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.helpers_visually-hidden__8xzsB{border:0;clip:\"rect(0 0 0 0)\";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.helpers_button-reset__D5XBg{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.helpers_text-body__kuwbN{color:var(--color-black-90);font-family:var(--font-default);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.helpers_text-medium__3yuel{font-family:var(--font-default);font-weight:500}.helpers_text-bold__2m1Nh{font-family:var(--font-default);font-weight:700}.helpers_text-xl__3Q3g5{font-size:var(--fontsize-heading-m)}.helpers_text-lg__3N-Yu{font-size:var(--fontsize-heading-s)}.helpers_text-md__1iyYX{font-size:var(--fontsize-heading-xs)}.helpers_subtitle__28FvQ{font-size:var(--fontsize-body-m)}.helpers_text-sm__OuSWo{font-size:var(--fontsize-body-s);line-height:var(--lineheight-xl)}.helpers_heading-xxl__1KMqh{font-size:var(--fontsize-heading-xxl);font-weight:400;letter-spacing:-1.2px;line-height:var(--lineheight-s)}.helpers_heading-xl__G41Bl{font-size:var(--fontsize-heading-xl);font-weight:400;letter-spacing:-1px;line-height:var(--lineheight-s)}.helpers_heading-xl-mobile__uKZqQ{font-size:var(--fontsize-heading-xl-mobile);font-weight:400;letter-spacing:-.8px;line-height:var(--lineheight-s)}.helpers_heading-l__29CXO{font-size:var(--fontsize-heading-l);font-weight:400;letter-spacing:-.4px;line-height:var(--lineheight-s)}.helpers_heading-m__16IDL{font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-.2px;line-height:32px}.helpers_heading-s__17rm-{font-size:var(--fontsize-heading-s);font-weight:500;letter-spacing:.2px;line-height:1.4}.helpers_heading-xs__rPz00{font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:.4px;line-height:1.33}.helpers_heading-xxs__Onkxt{font-size:var(--fontsize-heading-xxs);font-weight:700;letter-spacing:.4px;line-height:var(--lineheight-l)}.helpers_helper-text__3QI7A{color:var(--color-black-60);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs)}.SelectionGroup-module_label__qlluz{color:var(--label-color-default,var(--color-black-90));display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.SelectionGroup-module_selectionGroup__6Jxu8{--spacing-col:1.25rem;--spacing-row:var(--spacing-s);--label-color-default:var(--color-black-90);--icon-size:var(--spacing-m);border:0;padding:0}.SelectionGroup-module_selectionGroup__6Jxu8>:not(.SelectionGroup-module_items__28m_S){float:left}.SelectionGroup-module_label__qlluz{margin-bottom:var(--spacing-row);padding:0}.SelectionGroup-module_items__28m_S{clear:left;display:grid;gap:var(--spacing-row) var(--spacing-col);justify-content:start}.SelectionGroup-module_items__28m_S.SelectionGroup-module_vertical__3iorC{grid-auto-flow:row}.SelectionGroup-module_items__28m_S.SelectionGroup-module_horizontal__2eiY9{grid-auto-flow:column}.SelectionGroup-module_tooltipButton__2ibjm{margin-left:var(--spacing-2-xs)}");const d=e=>{var{label:t,direction:o="vertical",errorText:n,helperText:d,required:_,tooltipLabel:b,tooltipButtonLabel:p,tooltipText:u,children:g,className:x}=e,m=(0,a._)(e,["label","direction","errorText","helperText","required","tooltipLabel","tooltipButtonLabel","tooltipText","children","className"]);const f=(0,i.a)(g);return(0,l.useEffect)((()=>{let e=!1,t=!1;f.forEach((o=>{const a=o,{displayName:l}=a.type;"RadioButton"===l&&(e=!0,!0===a.props.checked&&(t=!0))})),e&&!t&&console.warn("All radio buttons in a SelectionGroup are unchecked. One radio button should be checked by default.")}),[g]),l.createElement("fieldset",Object.assign({className:(0,c.c)(h.selectionGroup,x)},m),l.createElement("legend",{className:h.label},t," ",_&&l.createElement(r.R,null)),u&&l.createElement(s.T,{buttonClassName:h.tooltipButton,tooltipLabel:b,buttonLabel:p},u),l.createElement("div",{className:(0,c.c)(h.items,h[o])},f.map((e=>(0,l.isValidElement)(e)&&l.createElement("div",{key:e.props.id,className:h.item},e)))),n&&l.createElement("div",{className:h.errorText},n),d&&l.createElement("div",{className:h.helperText},d))}},83428:function(e,t,o){"use strict";o.d(t,{S:function(){return s}});var a=o(80136),l=o(67294),n=o(7444),c=o(34300),r={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const i=e=>{let{icon:t}=e;return l.createElement("span",{className:r.statusLabelIcon,"aria-hidden":"true"},t)},s=e=>{var{children:t,className:o,dataTestId:n,type:s="neutral",iconLeft:h}=e,d=(0,a._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,c.c)(r.statusLabel,r[s],h&&r.statusLabelWithIcon,o),"data-testid":n},d),h&&l.createElement(i,{icon:h}),t)}},37776:function(e,t,o){"use strict";o.d(t,{c:function(){return a}});var a=(e,t,o,a,l)=>[t&&e+"-helper",o&&e+"-error",a&&e+"-success",l&&e+"-info"].filter((e=>e)).join(" ")},94330:function(e,t,o){"use strict";o.d(t,{m:function(){return n}});var a=o(91309),l=o.n(a),n=(e,t)=>{l()(e)?e(t.current):e.current=t.current}},99351:function(e,t,o){"use strict";o.r(t),o.d(t,{CheckboxDefaultExample:function(){return d},CheckboxExample:function(){return h},CheckboxGroupExample:function(){return _},IndeterminateExample:function(){return b}});var a=o(11151),l=o(67294),n=o(2592),c=o(66016),r=o(61538),i=o(23285);const s=e=>{let{children:t,pageContext:o}=e;return l.createElement(i.default,{pageContext:o},t)},h=()=>{const[e,t]=l.useState({"checkbox-checked":!0,"checkbox-checked-disabled":!0}),o=o=>{t({...e,[o.target.id]:o.target.checked})};return l.createElement(l.Fragment,null,l.createElement(n.C,{label:"Label",id:"checkbox-unchecked",checked:e["checkbox-unchecked"],onChange:o}),l.createElement(n.C,{label:"Label",id:"checkbox-checked",checked:e["checkbox-checked"],onChange:o}),l.createElement(n.C,{label:"Label",id:"checkbox-disabled",checked:e["checkbox-disabled"],onChange:o,disabled:!0}),l.createElement(n.C,{label:"Label",id:"checkbox-checked-disabled",checked:e["checkbox-checked-disabled"],onChange:o,disabled:!0}),l.createElement(n.C,{label:"Label",id:"checkbox-unchecked-error-text",checked:e["checkbox-unchecked-error-text"],onChange:o,errorText:"Error text"}),l.createElement(n.C,{label:"Label",id:"checkbox-unchecked-helper-text",checked:e["checkbox-unchecked-helper-text"],onChange:o,helperText:"Assistive text"}),l.createElement(n.C,{label:"label",id:"checkbox-with-tooltip",tooltipText:"tooltip text",tooltipLabel:"tooltip text aria label",tooltipButtonLabel:"tooltip button aria label",checked:e["checkbox-with-tooltip"],onChange:o}))},d=()=>{const[e,t]=l.useState({"checkbox-checked-2":!0,"checkbox-checked-disabled-2":!0}),o=o=>{t({...e,[o.target.id]:o.target.checked})};return l.createElement(l.Fragment,null,l.createElement(n.C,{label:"Label",id:"checkbox-unchecked-2",checked:e["checkbox-unchecked-2"],onChange:o}),l.createElement(n.C,{label:"Label",id:"checkbox-checked-2",checked:e["checkbox-checked-2"],onChange:o}),l.createElement(n.C,{label:"Label",id:"checkbox-disabled-2",checked:e["checkbox-disabled-2"],onChange:o,disabled:!0}),l.createElement(n.C,{label:"Label",id:"checkbox-checked-disabled-2",checked:e["checkbox-checked-disabled-2"],onChange:o,disabled:!0}))},_=()=>{const[e,t]=l.useState({"v-checkbox1":!0,"v-checkbox2":!0}),o=o=>{t({...e,[o.target.name]:o.target.checked})};return l.createElement(c.S,{label:"Checkbox group"},l.createElement(n.C,{id:"v-checkbox1",name:"v-checkbox1",label:"Option",checked:e["v-checkbox1"],onChange:o}),l.createElement(n.C,{id:"v-checkbox2",name:"v-checkbox2",label:"Option",checked:e["v-checkbox2"],onChange:o}),l.createElement(n.C,{id:"v-checkbox3",name:"v-checkbox3",label:"Option",checked:e["v-checkbox3"],onChange:o}),l.createElement(n.C,{id:"v-checkbox4",name:"v-checkbox4",label:"Option",checked:e["v-checkbox4"],onChange:o}))},b=()=>{const e=Object.assign({ul:"ul",li:"li"},(0,a.ah)()),t=0,o=1,c=2,i=e=>{let o=0;return Object.keys(e).forEach((a=>{"controllerCheckbox"!==a&&e[a]===t&&(o+=1)})),4===o},s=e=>{let o=0;return Object.keys(e).forEach((a=>{"controllerCheckbox"!==a&&e[a]===t&&(o+=1)})),1===o},h={controllerCheckbox:c,checkbox1:t,checkbox2:t,checkbox3:o,checkbox4:t,checkbox5:o},{0:d,1:_}=(0,l.useReducer)(((e,a)=>{switch(a.type){case"check":return"controllerCheckbox"===a.payload?{controllerCheckbox:t,checkbox1:t,checkbox2:t,checkbox3:t,checkbox4:t,checkbox5:t}:{...e,[a.payload]:t,controllerCheckbox:i(e)?t:c};case"uncheck":return"controllerCheckbox"===a.payload?{controllerCheckbox:o,checkbox1:o,checkbox2:o,checkbox3:o,checkbox4:o,checkbox5:o}:{...e,[a.payload]:o,controllerCheckbox:s(e)?o:c};default:throw new Error}}),h);return l.createElement(r.F,{heading:"Group label *"},l.createElement(n.C,{"aria-controls":"checkbox1 checkbox2 checkbox3 checkbox4 checkbox5",id:"controllerCheckbox",label:"Label",indeterminate:d.controllerCheckbox===c,checked:d.controllerCheckbox===t,style:{marginTop:"var(--spacing-xs)"},onChange:()=>{d.controllerCheckbox===o||d.controllerCheckbox===c?_({type:"check",payload:"controllerCheckbox"}):_({type:"uncheck",payload:"controllerCheckbox"})}}),l.createElement(e.ul,{style:{marginLeft:"var(--spacing-s)",paddingInlineStart:"0"}},Object.entries(d).map((a=>"controllerCheckbox"===a[0]?null:l.createElement(e.li,{key:a[0],style:{marginTop:"var(--spacing-s)",listStyle:"none"}},l.createElement(n.C,{id:a[0],key:a[0],label:"Label",checked:a[1]===t,onChange:()=>{a[1]===o?_({type:"check",payload:a[0]}):_({type:"uncheck",payload:a[0]})}}))))))};function p(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",h4:"h4",p:"p",code:"code"},(0,a.ah)(),e.components),{PlaygroundPreview:o,InternalLink:n}=t;return n||u("InternalLink",!0),o||u("PlaygroundPreview",!0),l.createElement(l.Fragment,null,l.createElement(t.h2,{id:"usage",style:{position:"relative"}},"Usage",l.createElement(t.a,{href:"#usage","aria-label":"usage permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h3,{id:"example",style:{position:"relative"}},"Example",l.createElement(t.a,{href:"#example","aria-label":"example permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n","\n",l.createElement(o,null,l.createElement(h)),"\n",l.createElement(t.h3,{id:"principles",style:{position:"relative"}},"Principles",l.createElement(t.a,{href:"#principles","aria-label":"principles permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,"If the user can only select one option from a list, use ",l.createElement(n,{href:"/components/radio-button"},"radio buttons")," instead."),"\n",l.createElement(t.li,null,"Checkbox label should always clearly describe what will happen if the specific option is chosen. A good practice is to keep labels a maximum of three words long."),"\n",l.createElement(t.li,null,"Checkboxes work independently from each other. This means that checking one option should never affect other checkboxes."),"\n",l.createElement(t.li,null,"If Checkboxes are related to each other, use ",l.createElement(n,{href:"/components/selection-group"},"HDS Selection group")," to achieve that."),"\n",l.createElement(t.li,null,"Checkboxes should not have any immediate effects. The checkbox selection takes effect when the user presses a submit button (e.g. in a form). If you need the selection to have an immediate effect, use ",l.createElement(n,{href:"/components/toggle-button"},"HDS Toggle button component")," instead. Also see ",l.createElement(n,{href:"/foundation/guidelines/checkbox-radiobutton-toggle"},"guidelines for choosing between radio buttons, checkboxes and toggles.")),"\n",l.createElement(t.li,null,"Checkbox can be provided with additional tooltip. Tooltip information should be considered as extra information. You can find more information about Tooltips how they are used from the ",l.createElement(n,{href:"/components/tooltip"},"Tooltip documentation page"),"."),"\n"),"\n",l.createElement(t.h3,{id:"variations",style:{position:"relative"}},"Variations",l.createElement(t.a,{href:"#variations","aria-label":"variations permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h4,{id:"default",style:{position:"relative"}},"Default",l.createElement(t.a,{href:"#default","aria-label":"default permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n","\n",l.createElement(o,null,l.createElement(d)),"\n",l.createElement(t.h4,{id:"checkbox-group",style:{position:"relative"}},"Checkbox group",l.createElement(t.a,{href:"#checkbox-group","aria-label":"checkbox group permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"Related checkboxes can be grouped together with the Selection group component. See ",l.createElement(n,{href:"components/selection-group"},"HDS Selection group page")," for full documentation."),"\n","\n",l.createElement(o,null,l.createElement(_)),"\n",l.createElement(t.h4,{id:"indeterminate",style:{position:"relative"}},"Indeterminate",l.createElement(t.a,{href:"#indeterminate","aria-label":"indeterminate permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,'Checkboxes also have a "mixed" state that is called an indeterminate state. This state is meant to be between the checked and unchecked states. While not very common, the usual use case for the indeterminate state is nested checkboxes. The parent checkbox can be in the indeterminate state when only part of the children checkboxes are checked.'),"\n",l.createElement(t.p,null,"Note! You will always have to use JavaScript to set a checkbox to the indeterminate state. Currently, it cannot be done through HTML. The HDS React component will do this part automatically when the ",l.createElement(t.code,null,"indeterminate")," property is given."),"\n","\n",l.createElement(o,null,l.createElement(b)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){return void 0===e&&(e={}),l.createElement(s,e,l.createElement(p,e))}},23285:function(e,t,o){"use strict";o.r(t);var a=o(11151),l=o(67294),n=o(83428),c=o(57674),r=o(89482),i=(o(18607),o(26127));function s(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,a.ah)(),e.components);return i.Z||h("PageTabs",!1),i.Z.Tab||h("PageTabs.Tab",!0),i.Z.TabList||h("PageTabs.TabList",!0),i.Z.TabPanel||h("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"checkbox",style:{position:"relative"}},"Checkbox",l.createElement(t.a,{href:"#checkbox","aria-label":"checkbox permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(n.S,{type:"info"},"Stable"),l.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(c.Z)),"\n",l.createElement(r.Z,null,"Checkboxes are used to pick an option when one or more options can be chosen."),"\n",l.createElement(i.Z,{pageContext:e.pageContext},l.createElement(i.Z.TabList,null,l.createElement(i.Z.Tab,{href:"/"},"Usage"),l.createElement(i.Z.Tab,{href:"/code"},"Code"),l.createElement(i.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(i.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(i.Z.TabPanel,null,e.children)))}function h(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,a.ah)(),e.components);return t?l.createElement(t,e,l.createElement(s,e)):s(e)}},89482:function(e,t,o){"use strict";var a=o(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:o="var(--fontsize-body-xl)",style:l={},children:n}=e;return a.createElement("p",{style:{fontSize:o,color:t,maxWidth:600,...l}},n)}},26127:function(e,t,o){"use strict";var a=o(67294),l=o(14160),n=o(94671);const c="PageTabList",r="PageTabPanel",i="PageTab",s=e=>{var t;let{pageContext:o,children:s}=e;const h=o.frontmatter.slug,d=Array.isArray(s)?s:[s],_=d.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===c)),b=d.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===r)),p=null===(t=_.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===i)),u=p.findIndex((e=>h.endsWith(e.props.href))),g=-1===u?0:u,x=0===g?h:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(h);return a.createElement(n.a,{initiallyActiveTab:g},a.createElement(n.a.TabList,{className:"page-tabs-list"},p.map((e=>a.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?x:x+e.props.href))},e.props.children)))),p.map(((e,t)=>a.createElement(n.a.TabPanel,{key:e.props.href},g===t?b.props.children:a.createElement("div",null)))))},h=e=>{let{children:t}=e;return a.createElement(n.a.TabList,null,t)};h.componentName=c;const d=e=>{let{href:t,slug:o,children:l}=e;return a.createElement(n.a.Tab,null,l)};d.componentName=i;const _=e=>{let{children:t}=e;return a.createElement(n.a.TabPanel,null,t)};_.componentName=r,s.TabList=h,s.Tab=d,s.TabPanel=_,t.Z=s},57674:function(e,t,o){"use strict";var a=o(67294),l=o(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return a.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},a.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>a.createElement("li",{key:t},a.createElement("span",{className:"status-name"},t),a.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-checkbox-tabs-mdx-bf8fd04b07ef1ff2be21.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-checkbox-tabs-mdx-bf8fd04b07ef1ff2be21.js
new file mode 100644
index 00000000000..b8dd737e285
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-checkbox-tabs-mdx-bf8fd04b07ef1ff2be21.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[8492],{83428:function(e,a,t){t.d(a,{S:function(){return i}});var s=t(80136),l=t(67294),n=t(7444),r=t(34300),c={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:a}=e;return l.createElement("span",{className:c.statusLabelIcon,"aria-hidden":"true"},a)},i=e=>{var{children:a,className:t,dataTestId:n,type:i="neutral",iconLeft:b}=e,u=(0,s._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(c.statusLabel,c[i],b&&c.statusLabelWithIcon,t),"data-testid":n},u),b&&l.createElement(o,{icon:b}),a)}},23285:function(e,a,t){t.r(a);var s=t(11151),l=t(67294),n=t(83428),r=t(57674),c=t(89482),o=(t(18607),t(26127));function i(e){const a=Object.assign({h1:"h1",a:"a",span:"span"},(0,s.ah)(),e.components);return o.Z||b("PageTabs",!1),o.Z.Tab||b("PageTabs.Tab",!0),o.Z.TabList||b("PageTabs.TabList",!0),o.Z.TabPanel||b("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(a.h1,{id:"checkbox",style:{position:"relative"}},"Checkbox",l.createElement(a.a,{href:"#checkbox","aria-label":"checkbox permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(n.S,{type:"info"},"Stable"),l.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(c.Z,null,"Checkboxes are used to pick an option when one or more options can be chosen."),"\n",l.createElement(o.Z,{pageContext:e.pageContext},l.createElement(o.Z.TabList,null,l.createElement(o.Z.Tab,{href:"/"},"Usage"),l.createElement(o.Z.Tab,{href:"/code"},"Code"),l.createElement(o.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(o.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(o.Z.TabPanel,null,e.children)))}function b(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,s.ah)(),e.components);return a?l.createElement(a,e,l.createElement(i,e)):i(e)}},89482:function(e,a,t){var s=t(67294);a.Z=e=>{let{color:a="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:l={},children:n}=e;return s.createElement("p",{style:{fontSize:t,color:a,maxWidth:600,...l}},n)}},26127:function(e,a,t){var s=t(67294),l=t(14160),n=t(94671);const r="PageTabList",c="PageTabPanel",o="PageTab",i=e=>{var a;let{pageContext:t,children:i}=e;const b=t.frontmatter.slug,u=Array.isArray(i)?i:[i],d=u.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===r)),m=u.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===c)),h=null===(a=d.props)||void 0===a?void 0:a.children.filter((e=>e.type.componentName===o)),p=h.findIndex((e=>b.endsWith(e.props.href))),_=-1===p?0:p,f=0===_?b:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(b);return s.createElement(n.a,{initiallyActiveTab:_},s.createElement(n.a.TabList,{className:"page-tabs-list"},h.map((e=>s.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),h.map(((e,a)=>s.createElement(n.a.TabPanel,{key:e.props.href},_===a?m.props.children:s.createElement("div",null)))))},b=e=>{let{children:a}=e;return s.createElement(n.a.TabList,null,a)};b.componentName=r;const u=e=>{let{href:a,slug:t,children:l}=e;return s.createElement(n.a.Tab,null,l)};u.componentName=o;const d=e=>{let{children:a}=e;return s.createElement(n.a.TabPanel,null,a)};d.componentName=c,i.TabList=b,i.Tab=u,i.TabPanel=d,a.Z=i},57674:function(e,a,t){var s=t(67294),l=t(45422);a.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return s.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},s.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((a=>s.createElement("li",{key:a},s.createElement("span",{className:"status-name"},a),s.createElement("span",null,e[a]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-cookie-consent-accessibility-mdx-6dc8a978256393ab3556.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-cookie-consent-accessibility-mdx-6dc8a978256393ab3556.js
new file mode 100644
index 00000000000..9470890f8b7
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-cookie-consent-accessibility-mdx-6dc8a978256393ab3556.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[2798,2166],{83428:function(e,t,a){a.d(t,{S:function(){return c}});var s=a(80136),n=a(67294),l=a(7444),r=a(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,l.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const i=e=>{let{icon:t}=e;return n.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:l,type:c="neutral",iconLeft:u}=e,b=(0,s._)(e,["children","className","dataTestId","type","iconLeft"]);return n.createElement("span",Object.assign({className:(0,r.c)(o.statusLabel,o[c],u&&o.statusLabelWithIcon,a),"data-testid":l},b),u&&n.createElement(i,{icon:u}),t)}},44665:function(e,t,a){a.r(t);var s=a(11151),n=a(67294),l=a(43161),r=a(1076);const o=e=>{let{children:t,pageContext:a}=e;return n.createElement(l.default,{pageContext:a},t)};function i(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li"},(0,s.ah)(),e.components);return n.createElement(n.Fragment,null,n.createElement(t.h2,{id:"accessibility",style:{position:"relative"}},"Accessibility",n.createElement(t.a,{href:"#accessibility","aria-label":"accessibility permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.h3,{id:"pay-attention-to",style:{position:"relative"}},"Pay attention to",n.createElement(t.a,{href:"#pay-attention-to","aria-label":"pay attention to permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.ul,null,"\n",n.createElement(t.li,null,"Make sure that cookie consent is the first item in the page tab order. By default, the component adds itself as the first element. This can be overridden. More info on the ",n.createElement(r.Z,{href:"components/cookie-consent/api"},"API tab"),"."),"\n",n.createElement(t.li,null,"The cookie consent modal should not prevent the user from using the web page. Never use an overlay behind the banner or otherwise restrict the use of the site. The component adds an element to the underlying page to compensate space it fills over the content."),"\n"))}t.default=function(e){return void 0===e&&(e={}),n.createElement(o,e,n.createElement(i,e))}},43161:function(e,t,a){a.r(t);var s=a(11151),n=a(67294),l=a(83428),r=a(57674),o=a(89482),i=(a(18607),a(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,s.ah)(),e.components);return i.Z||u("PageTabs",!1),i.Z.Tab||u("PageTabs.Tab",!0),i.Z.TabList||u("PageTabs.TabList",!0),i.Z.TabPanel||u("PageTabs.TabPanel",!0),n.createElement(n.Fragment,null,n.createElement(t.h1,{id:"cookieconsent",style:{position:"relative"}},"CookieConsent",n.createElement(t.a,{href:"#cookieconsent","aria-label":"cookieconsent permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement("div",{class:"status-label-description"},n.createElement(l.S,{type:"error"},"Draft"),n.createElement(l.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),n.createElement(r.Z)),"\n",n.createElement(o.Z,null,"The cookie compliance component informs users about cookie usage. This banner is shown when they visit a website or an\napplication for the first time."),"\n",n.createElement(i.Z,{pageContext:e.pageContext},n.createElement(i.Z.TabList,null,n.createElement(i.Z.Tab,{href:"/"},"Usage"),n.createElement(i.Z.Tab,{href:"/code"},"Code"),n.createElement(i.Z.Tab,{href:"/api"},"API"),n.createElement(i.Z.Tab,{href:"/accessibility"},"Accessibility")),n.createElement(i.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,s.ah)(),e.components);return t?n.createElement(t,e,n.createElement(c,e)):c(e)}},89482:function(e,t,a){var s=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:n={},children:l}=e;return s.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...n}},l)}},26127:function(e,t,a){var s=a(67294),n=a(14160),l=a(94671);const r="PageTabList",o="PageTabPanel",i="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const u=a.frontmatter.slug,b=Array.isArray(c)?c:[c],d=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===r)),h=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===o)),m=null===(t=d.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===i)),p=m.findIndex((e=>u.endsWith(e.props.href))),f=-1===p?0:p,_=0===f?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return s.createElement(l.a,{initiallyActiveTab:f},s.createElement(l.a.TabList,{className:"page-tabs-list"},m.map((e=>s.createElement(l.a.Tab,{key:e.props.href,onClick:()=>(0,n.navigate)(""+("/"===e.props.href?_:_+e.props.href))},e.props.children)))),m.map(((e,t)=>s.createElement(l.a.TabPanel,{key:e.props.href},f===t?h.props.children:s.createElement("div",null)))))},u=e=>{let{children:t}=e;return s.createElement(l.a.TabList,null,t)};u.componentName=r;const b=e=>{let{href:t,slug:a,children:n}=e;return s.createElement(l.a.Tab,null,n)};b.componentName=i;const d=e=>{let{children:t}=e;return s.createElement(l.a.TabPanel,null,t)};d.componentName=o,c.TabList=u,c.Tab=b,c.TabPanel=d,t.Z=c},57674:function(e,t,a){var s=a(67294),n=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return s.createElement(n.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},s.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>s.createElement("li",{key:t},s.createElement("span",{className:"status-name"},t),s.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-cookie-consent-api-mdx-2f85b9ab59b456a272cb.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-cookie-consent-api-mdx-2f85b9ab59b456a272cb.js
new file mode 100644
index 00000000000..0d480ad917a
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-cookie-consent-api-mdx-2f85b9ab59b456a272cb.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[9235,2166],{83428:function(e,t,n){n.d(t,{S:function(){return i}});var l=n(80136),a=n(67294),o=n(7444),r=n(34300),c={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,o.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const s=e=>{let{icon:t}=e;return a.createElement("span",{className:c.statusLabelIcon,"aria-hidden":"true"},t)},i=e=>{var{children:t,className:n,dataTestId:o,type:i="neutral",iconLeft:u}=e,m=(0,l._)(e,["children","className","dataTestId","type","iconLeft"]);return a.createElement("span",Object.assign({className:(0,r.c)(c.statusLabel,c[i],u&&c.statusLabelWithIcon,n),"data-testid":o},m),u&&a.createElement(s,{icon:u}),t)}},55503:function(e,t,n){n.r(t);var l=n(11151),a=n(67294),o=n(21662),r=n(43161),c=n(1076),s=n(80699);const i=e=>{let{children:t,pageContext:n}=e;return a.createElement(r.default,{pageContext:n},t)};function u(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",p:"p",h4:"h4",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",strong:"strong",h5:"h5"},(0,l.ah)(),e.components);return a.createElement(a.Fragment,null,a.createElement(t.h2,{id:"api",style:{position:"relative"}},"API",a.createElement(t.a,{href:"#api","aria-label":"api permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.h3,{id:"component-properties",style:{position:"relative"}},"Component properties",a.createElement(t.a,{href:"#component-properties","aria-label":"component properties permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.p,null,"Common texts, groups and cookie data can be found in ",a.createElement(s.Z,{openInExternalDomainAriaLabel:"Opens in a new domain",openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/blob/master/packages/react/src/components/cookieConsent/getContent.ts"},"HDS-provided content file"),". The file contains all user interface strings, language options, descriptions for common cookie groups, and details about common Helsinki cookies. By default, this content file is used. You can also override parts of it and add your project-specific groups and cookies."),"\n",a.createElement(t.h4,{id:"contentsource",style:{position:"relative"}},"ContentSource",a.createElement(t.a,{href:"#contentsource","aria-label":"contentsource permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.p,null,"The ",a.createElement(t.code,null,"contentSource")," property lists all content, language options, and callbacks for the component. The given source is merged with the default values from the ",a.createElement(c.Z,{href:"/components/cookie-consent/api#component-properties"},"content file")," to create a content-object."),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Property"),a.createElement(t.th,null,"Required"),a.createElement(t.th,null,"Description"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"siteName")),a.createElement(t.td,null,a.createElement(t.strong,null,"Yes")),a.createElement(t.td,null,"Cookie consent main heading.")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"currentLanguage")),a.createElement(t.td,null,a.createElement(t.strong,null,"Yes")),a.createElement(t.td,null,"Currently selected language. Used for picking translations from the ",a.createElement(c.Z,{href:"/components/cookie-consent/api#component-properties"},"content file.")," Is also set to ",a.createElement(t.code,null,"content.language.current"),". Supported values are ",a.createElement(t.code,null,"fi"),", ",a.createElement(t.code,null,"sv"),", and ",a.createElement(t.code,null,"en"),".")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"requiredCookies")),a.createElement(t.td,null,"No"),a.createElement(t.td,null,"Required cookies can have partial data or all data described in the table below. Missing texts are auto-filled. See examples below this table: ",a.createElement(c.Z,{href:"/components/cookie-consent/api#required-and-optional-cookies"},"Required and optional cookies."))),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"optionalCookies")),a.createElement(t.td,null,"No"),a.createElement(t.td,null,"Optional cookies can have partial data or all data described in the table below. Missing texts are auto-filled. See examples below this table: ",a.createElement(c.Z,{href:"/components/cookie-consent/api#required-and-optional-cookies"},"Required and optional cookies."))),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"requiredCookies.groups"),", ",a.createElement(t.code,null,"optionalCookies.groups")),a.createElement(t.td,null,"No"),a.createElement(t.td,null,"List of cookie groups. All cookies must belong to a group. Groups with the property ",a.createElement(t.code,null,"commonGroup")," will be auto-filled from the ",a.createElement(c.Z,{href:"/components/cookie-consent/api#component-properties"},"content file."))),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"requiredCookies.groups[].cookies"),", ",a.createElement(t.code,null,"requiredCookies.cookies"),", ",a.createElement(t.code,null,"optionalCookies.groups[].cookies"),", ",a.createElement(t.code,null,"optionalCookies.cookies")),a.createElement(t.td,null,"No"),a.createElement(t.td,null,"List of individual cookies. All cookies must belong to a group or they must have property ",a.createElement(t.code,null,"commonGroup")," or ",a.createElement(t.code,null,"groupId"),". The ",a.createElement(t.code,null,"groupId")," must match ",a.createElement(t.code,null,"group.id")," of a custom group and the ",a.createElement(t.code,null,"commonGroup")," must match groups in the ",a.createElement(c.Z,{href:"/components/cookie-consent/api#component-properties"},"content file.")," Do not give both.")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"texts")),a.createElement(t.td,null,"No"),a.createElement(t.td,null,"User interface string overrides. By default, strings are fetched from the ",a.createElement(c.Z,{href:"/components/cookie-consent/api#component-properties"},"content file")," and this object overrides one or multiple texts.")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"language")),a.createElement(t.td,null,"No"),a.createElement(t.td,null,"Overrides for default language options. By default, options are fetched from the ",a.createElement(c.Z,{href:"/components/cookie-consent/api#component-properties"},"content file")," and this object overrides one or more properties. ",a.createElement(t.code,null,"onLanguageChange")," callback is also added here.")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"onAllConsentsGiven")),a.createElement(t.td,null,"No"),a.createElement(t.td,null,"See Callbacks section below.")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"onConsentsParsed")),a.createElement(t.td,null,"No"),a.createElement(t.td,null,"See Callbacks section below.")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"noCommonConsentCookie")),a.createElement(t.td,null,"No"),a.createElement(t.td,null,"Consents are saved to a cookie and this option can prevent showing that cookie in the list of consents. If this is not true, ",a.createElement(t.code,null,"requiredConsents")," are always shown and a common group “sharedConsents” is added to it and also a common cookie “helConsentCookie” to that group. All content for those is in the ",a.createElement(c.Z,{href:"/components/cookie-consent/api#component-properties"},"content file."))),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"focusTargetSelector")),a.createElement(t.td,null,"No"),a.createElement(t.td,null,"When the modal is closed or the ESC key is pressed when it is open, the focus must be shifted outside the modal. This defines the element to set focus to with this selector (string). Not needed when modal is not used. Throws an error is not set for modal.")),a.createElement(t.tr,null,a.createElement(t.td,null,"[Table 1:ContentSource object properties]"),a.createElement(t.td),a.createElement(t.td)))),"\n",a.createElement(t.h5,{id:"contentsource-examples",style:{position:"relative"}},"ContentSource examples",a.createElement(t.a,{href:"#contentsource-examples","aria-label":"contentsource examples permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.p,null,"You can find examples of ContentSource property contents in ",a.createElement(o.L,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-cookieconsent--english-modal-version"},"the HDS CookieConsent Storybook examples"),"."),"\n",a.createElement(t.h4,{id:"cookiedomain",style:{position:"relative"}},"CookieDomain",a.createElement(t.a,{href:"#cookiedomain","aria-label":"cookiedomain permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.p,null,"The cookie domain is automatically detected from the site the component is on. By default, the component sets the cookie domain to be the root domain with ",a.createElement(t.code,null,"*.")," This way the cookie consents can be read from all subdomains. For example ",a.createElement(t.code,null,"*.hel.fi"),"."),"\n",a.createElement(t.p,null,"If your site domain is included in the ",a.createElement(t.a,{href:"https://publicsuffix.org/"},"public suffix list")," or you do not wish to expose your cookies to subdomains, or you want to set the domain manually for some reason, then use the ",a.createElement(t.code,null,"cookieDomain")," property."),"\n",a.createElement(t.p,null,"Cookies for domains on the public suffix list cannot accept subdomain cookies. E.g. ",a.createElement(t.code,null,"github.io"),"."),"\n",a.createElement(t.h4,{id:"detailed-info-about-properties",style:{position:"relative"}},"Detailed info about properties",a.createElement(t.a,{href:"#detailed-info-about-properties","aria-label":"detailed info about properties permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.h5,{id:"required-and-optional-cookies",style:{position:"relative"}},"Required and optional cookies",a.createElement(t.a,{href:"#required-and-optional-cookies","aria-label":"required and optional cookies permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Property"),a.createElement(t.th,null,"Description"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"requiredCookies")),a.createElement(t.td,null,"List of required consents and their descriptions.")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"optionalCookies")),a.createElement(t.td,null,"List of optional consents and their descriptions.")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"*.title")),a.createElement(t.td,null,"Title for the consent group. Optional.")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"*.text")),a.createElement(t.td,null,"Description for the consent group. Optional.")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"*.checkboxAriaDescription")),a.createElement(t.td,null,"Aria description of the checkbox shown with the category. Optional.")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"*.groups")),a.createElement(t.td,null,"Optional list of groups. More info is below: ",a.createElement(c.Z,{href:"/components/cookie-consent/api#cookie-groups"},"Cookie groups."))),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"*.cookies")),a.createElement(t.td,null,"Optional list of cookies. More info is below: ",a.createElement(c.Z,{href:"/components/cookie-consent/api#cookie-information"},"Cookie information."))),a.createElement(t.tr,null,a.createElement(t.td,null,"[Table 2:Cookie category properties]"),a.createElement(t.td)))),"\n",a.createElement(t.h5,{id:"cookie-groups",style:{position:"relative"}},"Cookie groups",a.createElement(t.a,{href:"#cookie-groups","aria-label":"cookie groups permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Property"),a.createElement(t.th,null,"Description"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"group[].groupId")," / ",a.createElement(t.code,null,"group[].commonGroup")),a.createElement(t.td,null,"Both optional. If a common group is used, then the ",a.createElement(t.code,null,"commonGroup"),". If this is a custom group provide an ",a.createElement(t.code,null,"groupId"),". Not required, if there are no cookies that have a ",a.createElement(t.code,null,"groupId")," set.")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"group[].title")),a.createElement(t.td,null,"Only for custom groups. Title of the group. Cannot be set for a common group. ",a.createElement(t.strong,null,"Must be unique."))),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"group[].text")),a.createElement(t.td,null,"Only for custom groups. Cannot be set for a common group. Description of the group.")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"group[].expandAriaLabel")),a.createElement(t.td,null,"Only for custom groups. Cannot be set for a common group. Aria-label for the button to show more details of the group.")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"group[].checkboxAriaDescription")),a.createElement(t.td,null,"Only for custom groups. Cannot be set for a common group. Aria-description for the checkbox for giving consent for all cookies in the group")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"group[].cookies")),a.createElement(t.td,null,"Optional list of cookies in this group.")),a.createElement(t.tr,null,a.createElement(t.td,null,"[Table 3:Cookie group properties]"),a.createElement(t.td)))),"\n",a.createElement(t.h5,{id:"cookie-information",style:{position:"relative"}},"Cookie information",a.createElement(t.a,{href:"#cookie-information","aria-label":"cookie information permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Property"),a.createElement(t.th,null,"Description"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"cookie[].groupId")," / ",a.createElement(t.code,null,"cookie[].commonGroup")),a.createElement(t.td,null,"The group this cookie belongs to. Optional. Not needed when the cookie is defined in an ",a.createElement(t.code,null,"optionalCookies")," / ",a.createElement(t.code,null,"requiredCookies.group")," If ",a.createElement(t.code,null,"commonGroup")," is used and the group itself is not listed, it is auto-added from the ",a.createElement(c.Z,{href:"/components/cookie-consent/api#component-properties"},"content file."))),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"cookie[].commonCookie")),a.createElement(t.td,null,"Optional. Use when the cookie is common.")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"cookie[].id")),a.createElement(t.td,null,"The ID of the consent. This ID is saved in the consent cookie. ",a.createElement(t.strong,null,"Must be unique.")," Only for custom cookies. Cannot be set for a common cookie.")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"cookie[].name")),a.createElement(t.td,null,"Readable cookie name. Only for custom cookies. Cannot be set for a common cookie.")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"cookie[].hostName")),a.createElement(t.td,null,"Hostname where it is used. Only for custom cookies. Cannot be set for a common cookie.")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"cookie[].description")),a.createElement(t.td,null,"Cookie usage description. Only for custom cookies. Cannot be set for a common cookie.")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"cookie[].expiration")),a.createElement(t.td,null,"When does the cookie expire. Only for custom cookies. Cannot be set for a common cookie.")),a.createElement(t.tr,null,a.createElement(t.td,null,"[Table 4:Cookie information properties]"),a.createElement(t.td)))),"\n",a.createElement(t.h5,{id:"callbacks",style:{position:"relative"}},"Callbacks",a.createElement(t.a,{href:"#callbacks","aria-label":"callbacks permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.p,null,"The ",a.createElement(t.code,null,"contentSource")," object passed to the component can also include callback functions:"),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Property"),a.createElement(t.th,null,"Usage"),a.createElement(t.th,null,"Arguments"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"onAllConsentsGiven")),a.createElement(t.td,null,"Called when the user has given all consents. Not called if consents are not asked for."),a.createElement(t.td,null,"Object with ",a.createElement(t.code,null,"cookie.id")," as the key and true/false as value ",a.createElement(t.code,null,"{matomo: true, marketing: false}"))),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"onConsentsParsed")),a.createElement(t.td,null,"Called when cookie consents are read from the browser, before the cookie modal will possibly be shown. Called always even if consent has been given. Called only once. If content source changes, for example on language change, the callback is called again."),a.createElement(t.td,null,"Object with ",a.createElement(t.code,null,"cookie.id")," as the key and true/false as value ",a.createElement(t.code,null,"{matomo: true, marketing: false}")," and boolean indicating are all consents handled. If true, the modal will not be shown.")),a.createElement(t.tr,null,a.createElement(t.td,null,"[Table 5:Component object callbacks]"),a.createElement(t.td),a.createElement(t.td)))),"\n",a.createElement(t.h5,{id:"strings-and-language",style:{position:"relative"}},"Strings and language",a.createElement(t.a,{href:"#strings-and-language","aria-label":"strings and language permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.p,null,"The following strings can be overridden if needed. Note that you also need to provide translations if you override these. It is recommended to use the provided strings."),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Property"),a.createElement(t.th,null,"Description"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"texts.sections.main.title")),a.createElement(t.td,null,"Top level heading.")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"texts.sections.main.text")),a.createElement(t.td,null,"Main description. ",a.createElement(t.strong,null,"The most common override because this is service-specific."))),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"texts.sections.details.title")),a.createElement(t.td,null,"Heading shown in the details. Seen when settings are opened.")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"texts.sections.details.text")),a.createElement(t.td,null,"Description shown in the details. Seen when settings are opened.")),a.createElement(t.tr,null,a.createElement(t.td,null,"[Table 6:Main text content overrides]"),a.createElement(t.td)))),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Property"),a.createElement(t.th,null,"Description"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"ui.showSettings")),a.createElement(t.td,null,"Text on the show/hide settings -button when settings are hidden.")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"ui.hideSettings")),a.createElement(t.td,null,"Text on the show/hide settings -button when settings are shown.")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"ui.approveAllConsents")),a.createElement(t.td,null,"Button text for giving consent to all cookies. Shown when settings are closed and the user cannot give optional consents.")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"ui.approveRequiredAndSelectedConsents")),a.createElement(t.td,null,"Button text for giving consent to required cookies and selected cookies. Shown when settings are open.")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"ui.approveOnlyRequiredConsents")),a.createElement(t.td,null,"Button text for giving consent to only to required cookies. All optional cookie consents are revoked.")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"ui.readMore")),a.createElement(t.td,null,"Text shown on a button when modal loses focus and is shrunk.")),a.createElement(t.tr,null,a.createElement(t.td,null,"[Table 7:User interface string overrides]"),a.createElement(t.td)))),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Property"),a.createElement(t.th,null,"Description"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"tableHeadings.name")),a.createElement(t.td,null,"Title of the “name” column in the cookie description.")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"tableHeadings.hostName")),a.createElement(t.td,null,"Title of the “hostName” column in the cookie description.")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"tableHeadings.description")),a.createElement(t.td,null,"Title of the “description” column in the cookie description.")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"tableHeadings.expiration")),a.createElement(t.td,null,"Title of the “expiration” column in the cookie description.")),a.createElement(t.tr,null,a.createElement(t.td,null,"[Table 8:Table heading string overrides]"),a.createElement(t.td)))),"\n",a.createElement(t.p,null,"The consent banner language is controlled via a language dropdown element. Note that the current language is passed in as ",a.createElement(t.code,null,"content.currentLanguage")," and that value is stored into ",a.createElement(t.code,null,"language.current"),"."),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Property"),a.createElement(t.th,null,"Description"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"language.languageOptions")),a.createElement(t.td,null,"List of selectable languages. Format: ",a.createElement(t.code,null,"[{ code: 'fi', label: 'Suomeksi (FI)' }]"))),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"language.current")),a.createElement(t.td,null,"Current language.")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"language.languageSelectorAriaLabel")),a.createElement(t.td,null,"Aria-label for the language selector button.")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"language.onLanguageChange")),a.createElement(t.td,null,"Callback called when a new language is selected. Called with new language.code as the argument.")),a.createElement(t.tr,null,a.createElement(t.td,null,"[Table 9:Language properties]"),a.createElement(t.td)))),"\n",a.createElement(t.h3,{id:"saving-consents",style:{position:"relative"}},"Saving consents",a.createElement(t.a,{href:"#saving-consents","aria-label":"saving consents permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.p,null,"Consents that the user has given are saved to a ",a.createElement(t.code,null,"city-of-helsinki-cookie-consents")," cookie."),"\n",a.createElement(t.p,null,"Cookies are always strings and consents are stored as a JSON-formatted string such as ",a.createElement(t.code,null,'{"cookie-id":"true","another-cookie-id":"false"}'),"."),"\n",a.createElement(t.p,null,"The ID of the cookie is stored as ",a.createElement(t.code,null,"cookie.id"),". ",a.createElement(t.code,null,"True")," means the user has given consent for that cookie. All required cookies are always stored ",a.createElement(t.code,null,"true"),", but other sites may list a common cookie optional, so the stored consent is not ",a.createElement(t.code,null,"true")," by default."))}t.default=function(e){return void 0===e&&(e={}),a.createElement(i,e,a.createElement(u,e))}},43161:function(e,t,n){n.r(t);var l=n(11151),a=n(67294),o=n(83428),r=n(57674),c=n(89482),s=(n(18607),n(26127));function i(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,l.ah)(),e.components);return s.Z||u("PageTabs",!1),s.Z.Tab||u("PageTabs.Tab",!0),s.Z.TabList||u("PageTabs.TabList",!0),s.Z.TabPanel||u("PageTabs.TabPanel",!0),a.createElement(a.Fragment,null,a.createElement(t.h1,{id:"cookieconsent",style:{position:"relative"}},"CookieConsent",a.createElement(t.a,{href:"#cookieconsent","aria-label":"cookieconsent permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement("div",{class:"status-label-description"},a.createElement(o.S,{type:"error"},"Draft"),a.createElement(o.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),a.createElement(r.Z)),"\n",a.createElement(c.Z,null,"The cookie compliance component informs users about cookie usage. This banner is shown when they visit a website or an\napplication for the first time."),"\n",a.createElement(s.Z,{pageContext:e.pageContext},a.createElement(s.Z.TabList,null,a.createElement(s.Z.Tab,{href:"/"},"Usage"),a.createElement(s.Z.Tab,{href:"/code"},"Code"),a.createElement(s.Z.Tab,{href:"/api"},"API"),a.createElement(s.Z.Tab,{href:"/accessibility"},"Accessibility")),a.createElement(s.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,l.ah)(),e.components);return t?a.createElement(t,e,a.createElement(i,e)):i(e)}},89482:function(e,t,n){var l=n(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:n="var(--fontsize-body-xl)",style:a={},children:o}=e;return l.createElement("p",{style:{fontSize:n,color:t,maxWidth:600,...a}},o)}},26127:function(e,t,n){var l=n(67294),a=n(14160),o=n(94671);const r="PageTabList",c="PageTabPanel",s="PageTab",i=e=>{var t;let{pageContext:n,children:i}=e;const u=n.frontmatter.slug,m=Array.isArray(i)?i:[i],d=m.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===r)),h=m.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===c)),E=null===(t=d.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===s)),p=E.findIndex((e=>u.endsWith(e.props.href))),g=-1===p?0:p,b=0===g?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return l.createElement(o.a,{initiallyActiveTab:g},l.createElement(o.a.TabList,{className:"page-tabs-list"},E.map((e=>l.createElement(o.a.Tab,{key:e.props.href,onClick:()=>(0,a.navigate)(""+("/"===e.props.href?b:b+e.props.href))},e.props.children)))),E.map(((e,t)=>l.createElement(o.a.TabPanel,{key:e.props.href},g===t?h.props.children:l.createElement("div",null)))))},u=e=>{let{children:t}=e;return l.createElement(o.a.TabList,null,t)};u.componentName=r;const m=e=>{let{href:t,slug:n,children:a}=e;return l.createElement(o.a.Tab,null,a)};m.componentName=s;const d=e=>{let{children:t}=e;return l.createElement(o.a.TabPanel,null,t)};d.componentName=c,i.TabList=u,i.Tab=m,i.TabPanel=d,t.Z=i},57674:function(e,t,n){var l=n(67294),a=n(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return l.createElement(a.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},l.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>l.createElement("li",{key:t},l.createElement("span",{className:"status-name"},t),l.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-cookie-consent-code-mdx-59226ca090fda1c505c3.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-cookie-consent-code-mdx-59226ca090fda1c505c3.js
new file mode 100644
index 00000000000..73d47c0ae60
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-cookie-consent-code-mdx-59226ca090fda1c505c3.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[9379,2166],{83428:function(e,t,n){n.d(t,{S:function(){return i}});var a=n(80136),l=n(67294),s=n(7444),o=n(34300),r={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,s.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const c=e=>{let{icon:t}=e;return l.createElement("span",{className:r.statusLabelIcon,"aria-hidden":"true"},t)},i=e=>{var{children:t,className:n,dataTestId:s,type:i="neutral",iconLeft:d}=e,m=(0,a._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,o.c)(r.statusLabel,r[i],d&&r.statusLabelWithIcon,n),"data-testid":s},m),d&&l.createElement(c,{icon:d}),t)}},65587:function(e,t,n){n.r(t);var a=n(11151),l=n(67294),s=n(43161);const o=e=>{let{children:t,pageContext:n}=e;return l.createElement(s.default,{pageContext:n},t)};function r(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",pre:"pre",code:"code",p:"p",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",strong:"strong"},(0,a.ah)(),e.components),{Link:n,IconCheckCircleFill:s,ExternalLink:o,IconCrossCircle:r,InternalLink:i}=t;return o||c("ExternalLink",!0),s||c("IconCheckCircleFill",!0),r||c("IconCrossCircle",!0),i||c("InternalLink",!0),n||c("Link",!0),l.createElement(l.Fragment,null,l.createElement(t.h2,{id:"code",style:{position:"relative"}},"Code",l.createElement(t.a,{href:"#code","aria-label":"code permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h3,{id:"code-examples",style:{position:"relative"}},"Code examples",l.createElement(t.a,{href:"#code-examples","aria-label":"code examples permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h3,{id:"modal",style:{position:"relative"}},"Modal",l.createElement(t.a,{href:"#modal","aria-label":"modal permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},"import { CookieModal } from 'hds-react';\n\nexport const SimpleModalVersion = () => {\n  const [language, setLanguage] = React.useState('en');\n  const onLanguageChange = (newLang) => setLanguage(newLang);\n  const contentSource = {\n    siteName: 'Test site',\n    currentLanguage: language,\n    optionalCookies: {\n      cookies: [\n        {\n          commonGroup: 'statistics',\n          commonCookie: 'matomo',\n        },\n      ],\n    },\n    language: {\n      onLanguageChange,\n    },\n    focusTargetSelector: '#focused-element-after-cookie-consent-closed',\n    onAllConsentsGiven: (consents) => {\n      // called when consents are saved\n      // handle changes like:\n      if (!consents.matomo) {\n        // stop matomo tracking\n      }\n    },\n  };\n\n  const Application = () => {\n    return (\n      <div>\n        <h1 id=\"focused-element-after-cookie-consent-closed\" tabIndex={0}>\n          Simple cookie consent example\n        </h1>\n      </div>\n    );\n  };\n\n  return (\n    <>\n      <CookieModal contentSource={contentSource} />\n      <Application />\n    </>\n  );\n};\n")),"\n",l.createElement(n,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-cookieconsent--english-modal-version"},l.createElement(t.p,null,"View working modal demo in Storybook")),"\n",l.createElement(t.h3,{id:"rendered-on-a-page",style:{position:"relative"}},"Rendered on a page",l.createElement(t.a,{href:"#rendered-on-a-page","aria-label":"rendered on a page permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},"import { CookiePage } from 'hds-react';\n\nexport const PageVersion = () => {\n  const contentSource = {\n    siteName: 'Test site',\n    currentLanguage: 'en',\n    optionalCookies: {\n      cookies: [\n        {\n          commonGroup: 'statistics',\n          commonCookie: 'matomo',\n        },\n      ],\n    },\n    onAllConsentsGiven: (consents) => {\n      // called when consents are saved\n      // handle changes like:\n      if (!consents.matomo) {\n        // stop matomo tracking\n      }\n    },\n  };\n\n  return (\n    <main>\n      <CookiePage contentSource={contentSource} />\n    </main>\n  );\n};\n")),"\n",l.createElement(n,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-cookieconsent--page-version"},l.createElement(t.p,null,"View working page example in Storybook")),"\n",l.createElement(t.h3,{id:"packages",style:{position:"relative"}},"Packages",l.createElement(t.a,{href:"#packages","aria-label":"packages permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.table,null,l.createElement(t.thead,null,l.createElement(t.tr,null,l.createElement(t.th,null,"Package"),l.createElement(t.th,null,"Included"),l.createElement(t.th,null,"Storybook link"),l.createElement(t.th,null,"Source link"))),l.createElement(t.tbody,null,l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.strong,null,"HDS React")),l.createElement(t.td,null,l.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},l.createElement(s)," Yes ")),l.createElement(t.td,null,l.createElement(n,{size:"M",openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-cookieconsent--english-modal-version"},"View in Storybook")),l.createElement(t.td,null,l.createElement(o,{size:"M",openInExternalDomainAriaLabel:"Opens in a new domain",openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/blob/master/packages/react/src/components/cookieConsent"},"View source"))),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.strong,null,"HDS Core")),l.createElement(t.td,null,l.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},l.createElement(r)," No ")),l.createElement(t.td,null,"-"),l.createElement(t.td,null,"-")))),"\n",l.createElement(t.h3,{id:"properties",style:{position:"relative"}},"Properties",l.createElement(t.a,{href:"#properties","aria-label":"properties permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"Note! You can find the full list of properties in the ",l.createElement(n,{size:"M",openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-cookieconsent--english-modal-version"},"React Storybook."),"\nAlso, you can find a detailed description of the ",l.createElement(t.code,null,"contentSource")," property in the ",l.createElement(i,{href:"/components/cookie-consent/api"},"API tab"),"."),"\n",l.createElement(t.table,null,l.createElement(t.thead,null,l.createElement(t.tr,null,l.createElement(t.th,null,"Property"),l.createElement(t.th,null,"Description"),l.createElement(t.th,null,"Values"),l.createElement(t.th,null,"Default value"))),l.createElement(t.tbody,null,l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"contentSource")),l.createElement(t.td,null,"Main configurations of the Cookie Consent."),l.createElement(t.td,null,l.createElement(t.code,null,"object")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"cookieDomain")),l.createElement(t.td,null,"A string representing the domain of the cookie."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,"Default value is the current domain")))))}function c(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){return void 0===e&&(e={}),l.createElement(o,e,l.createElement(r,e))}},43161:function(e,t,n){n.r(t);var a=n(11151),l=n(67294),s=n(83428),o=n(57674),r=n(89482),c=(n(18607),n(26127));function i(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,a.ah)(),e.components);return c.Z||d("PageTabs",!1),c.Z.Tab||d("PageTabs.Tab",!0),c.Z.TabList||d("PageTabs.TabList",!0),c.Z.TabPanel||d("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"cookieconsent",style:{position:"relative"}},"CookieConsent",l.createElement(t.a,{href:"#cookieconsent","aria-label":"cookieconsent permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(s.S,{type:"error"},"Draft"),l.createElement(s.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(o.Z)),"\n",l.createElement(r.Z,null,"The cookie compliance component informs users about cookie usage. This banner is shown when they visit a website or an\napplication for the first time."),"\n",l.createElement(c.Z,{pageContext:e.pageContext},l.createElement(c.Z.TabList,null,l.createElement(c.Z.Tab,{href:"/"},"Usage"),l.createElement(c.Z.Tab,{href:"/code"},"Code"),l.createElement(c.Z.Tab,{href:"/api"},"API"),l.createElement(c.Z.Tab,{href:"/accessibility"},"Accessibility")),l.createElement(c.Z.TabPanel,null,e.children)))}function d(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,a.ah)(),e.components);return t?l.createElement(t,e,l.createElement(i,e)):i(e)}},89482:function(e,t,n){var a=n(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:n="var(--fontsize-body-xl)",style:l={},children:s}=e;return a.createElement("p",{style:{fontSize:n,color:t,maxWidth:600,...l}},s)}},26127:function(e,t,n){var a=n(67294),l=n(14160),s=n(94671);const o="PageTabList",r="PageTabPanel",c="PageTab",i=e=>{var t;let{pageContext:n,children:i}=e;const d=n.frontmatter.slug,m=Array.isArray(i)?i:[i],u=m.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===o)),h=m.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===r)),p=null===(t=u.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===c)),b=p.findIndex((e=>d.endsWith(e.props.href))),g=-1===b?0:b,E=0===g?d:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(d);return a.createElement(s.a,{initiallyActiveTab:g},a.createElement(s.a.TabList,{className:"page-tabs-list"},p.map((e=>a.createElement(s.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?E:E+e.props.href))},e.props.children)))),p.map(((e,t)=>a.createElement(s.a.TabPanel,{key:e.props.href},g===t?h.props.children:a.createElement("div",null)))))},d=e=>{let{children:t}=e;return a.createElement(s.a.TabList,null,t)};d.componentName=o;const m=e=>{let{href:t,slug:n,children:l}=e;return a.createElement(s.a.Tab,null,l)};m.componentName=c;const u=e=>{let{children:t}=e;return a.createElement(s.a.TabPanel,null,t)};u.componentName=r,i.TabList=d,i.Tab=m,i.TabPanel=u,t.Z=i},57674:function(e,t,n){var a=n(67294),l=n(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return a.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},a.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>a.createElement("li",{key:t},a.createElement("span",{className:"status-name"},t),a.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-cookie-consent-index-mdx-e539e10bee02de9fe7af.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-cookie-consent-index-mdx-e539e10bee02de9fe7af.js
new file mode 100644
index 00000000000..6a70383523d
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-cookie-consent-index-mdx-e539e10bee02de9fe7af.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[9805,2166],{83428:function(e,a,t){t.d(a,{S:function(){return c}});var n=t(80136),s=t(67294),l=t(7444),r=t(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,l.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const i=e=>{let{icon:a}=e;return s.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},a)},c=e=>{var{children:a,className:t,dataTestId:l,type:c="neutral",iconLeft:h}=e,d=(0,n._)(e,["children","className","dataTestId","type","iconLeft"]);return s.createElement("span",Object.assign({className:(0,r.c)(o.statusLabel,o[c],h&&o.statusLabelWithIcon,t),"data-testid":l},d),h&&s.createElement(i,{icon:h}),a)}},44108:function(e,a,t){t.r(a);var n=t(11151),s=t(67294),l=t(21662),r=t(43161);const o=e=>{let{children:a,pageContext:t}=e;return s.createElement(r.default,{pageContext:t},a)};function i(e){const a=Object.assign({h2:"h2",a:"a",span:"span",p:"p",h3:"h3",ul:"ul",li:"li"},(0,n.ah)(),e.components),{InternalLink:t}=a;return t||function(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("InternalLink",!0),s.createElement(s.Fragment,null,s.createElement(a.h2,{id:"usage",style:{position:"relative"}},"Usage",s.createElement(a.a,{href:"#usage","aria-label":"usage permalink",className:"header-anchor after"},s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(a.p,null,"This documentation page is about HDS CookieCompliance component. If you are looking for documentation about cookies in general, please refer to the ",s.createElement(t,{href:"/patterns/cookies/basics"},"HDS cookie pattern documentation page"),"."),"\n",s.createElement(a.h3,{id:"example",style:{position:"relative"}},"Example",s.createElement(a.a,{href:"#example","aria-label":"example permalink",className:"header-anchor after"},s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(l.L,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-cookieconsent--english-modal-version"},s.createElement(a.p,null,"View modal example in Storybook")),"\n",s.createElement(a.h3,{id:"principles",style:{position:"relative"}},"Principles",s.createElement(a.a,{href:"#principles","aria-label":"principles permalink",className:"header-anchor after"},s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(a.ul,null,"\n",s.createElement(a.li,null,"Include the cookie consent component on every page of the service. The user may arrive on any page of the service (e.g. via a search engine). The component checks, if it should be rendered or not."),"\n",s.createElement(a.li,null,"The cookie consent can be rendered either as a modal or as a page. This allows using the same cookie data for both presentation variations.","\n",s.createElement(a.ul,null,"\n",s.createElement(a.li,null,"Use the modal variant as a banner when the user enters the site."),"\n",s.createElement(a.li,null,"Use the page variant as a full page that the user can access from the page ",s.createElement(t,{href:"/components/footer"},"Footer")," element."),"\n"),"\n"),"\n",s.createElement(a.li,null,"You must offer the cookie consent modal and page in all languages that your service supports.","\n",s.createElement(a.ul,null,"\n",s.createElement(a.li,null,"By default, the cookie consent banner should use the same language as the service is using."),"\n",s.createElement(a.li,null,"The component has its language switcher so the user can easily switch the language of the dialog even if they opened the service with a language they do not understand."),"\n",s.createElement(a.li,null,"The component supports Finnish, Swedish and English."),"\n"),"\n"),"\n"),"\n",s.createElement(a.h3,{id:"variations",style:{position:"relative"}},"Variations",s.createElement(a.a,{href:"#variations","aria-label":"variations permalink",className:"header-anchor after"},s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(a.h3,{id:"modal",style:{position:"relative"}},"Modal",s.createElement(a.a,{href:"#modal","aria-label":"modal permalink",className:"header-anchor after"},s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(a.p,null,"The default banner variant opens at the bottom of the viewport. It is opened if the consent for cookies has not been given or if the cookies have changed. The banner can be expanded to view and change cookie settings."),"\n",s.createElement(l.L,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-cookieconsent--english-modal-version"},s.createElement(a.p,null,"View modal example in Storybook")),"\n",s.createElement(a.h3,{id:"rendered-on-a-page",style:{position:"relative"}},"Rendered on a page",s.createElement(a.a,{href:"#rendered-on-a-page","aria-label":"rendered on a page permalink",className:"header-anchor after"},s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(a.p,null,"The cookie consent expanded settings page can be rendered as a separate page. This is used to create a cookie page that the user can access via a link in the ",s.createElement(t,{href:"/components/footer"},"Footer")," element. This allows the user to view or edit cookie settings after the initial consent has been given."),"\n",s.createElement(l.L,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-cookieconsent--page-version"},s.createElement(a.p,null,"View page example in Storybook")))}a.default=function(e){return void 0===e&&(e={}),s.createElement(o,e,s.createElement(i,e))}},43161:function(e,a,t){t.r(a);var n=t(11151),s=t(67294),l=t(83428),r=t(57674),o=t(89482),i=(t(18607),t(26127));function c(e){const a=Object.assign({h1:"h1",a:"a",span:"span"},(0,n.ah)(),e.components);return i.Z||h("PageTabs",!1),i.Z.Tab||h("PageTabs.Tab",!0),i.Z.TabList||h("PageTabs.TabList",!0),i.Z.TabPanel||h("PageTabs.TabPanel",!0),s.createElement(s.Fragment,null,s.createElement(a.h1,{id:"cookieconsent",style:{position:"relative"}},"CookieConsent",s.createElement(a.a,{href:"#cookieconsent","aria-label":"cookieconsent permalink",className:"header-anchor after"},s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement("div",{class:"status-label-description"},s.createElement(l.S,{type:"error"},"Draft"),s.createElement(l.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),s.createElement(r.Z)),"\n",s.createElement(o.Z,null,"The cookie compliance component informs users about cookie usage. This banner is shown when they visit a website or an\napplication for the first time."),"\n",s.createElement(i.Z,{pageContext:e.pageContext},s.createElement(i.Z.TabList,null,s.createElement(i.Z.Tab,{href:"/"},"Usage"),s.createElement(i.Z.Tab,{href:"/code"},"Code"),s.createElement(i.Z.Tab,{href:"/api"},"API"),s.createElement(i.Z.Tab,{href:"/accessibility"},"Accessibility")),s.createElement(i.Z.TabPanel,null,e.children)))}function h(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,n.ah)(),e.components);return a?s.createElement(a,e,s.createElement(c,e)):c(e)}},89482:function(e,a,t){var n=t(67294);a.Z=e=>{let{color:a="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:s={},children:l}=e;return n.createElement("p",{style:{fontSize:t,color:a,maxWidth:600,...s}},l)}},26127:function(e,a,t){var n=t(67294),s=t(14160),l=t(94671);const r="PageTabList",o="PageTabPanel",i="PageTab",c=e=>{var a;let{pageContext:t,children:c}=e;const h=t.frontmatter.slug,d=Array.isArray(c)?c:[c],u=d.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===r)),m=d.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===o)),p=null===(a=u.props)||void 0===a?void 0:a.children.filter((e=>e.type.componentName===i)),b=p.findIndex((e=>h.endsWith(e.props.href))),g=-1===b?0:b,f=0===g?h:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(h);return n.createElement(l.a,{initiallyActiveTab:g},n.createElement(l.a.TabList,{className:"page-tabs-list"},p.map((e=>n.createElement(l.a.Tab,{key:e.props.href,onClick:()=>(0,s.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),p.map(((e,a)=>n.createElement(l.a.TabPanel,{key:e.props.href},g===a?m.props.children:n.createElement("div",null)))))},h=e=>{let{children:a}=e;return n.createElement(l.a.TabList,null,a)};h.componentName=r;const d=e=>{let{href:a,slug:t,children:s}=e;return n.createElement(l.a.Tab,null,s)};d.componentName=i;const u=e=>{let{children:a}=e;return n.createElement(l.a.TabPanel,null,a)};u.componentName=o,c.TabList=h,c.Tab=d,c.TabPanel=u,a.Z=c},57674:function(e,a,t){var n=t(67294),s=t(45422);a.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return n.createElement(s.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},n.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((a=>n.createElement("li",{key:a},n.createElement("span",{className:"status-name"},a),n.createElement("span",null,e[a]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-cookie-consent-tabs-mdx-46255b8dbf76459e0c65.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-cookie-consent-tabs-mdx-46255b8dbf76459e0c65.js
new file mode 100644
index 00000000000..107d3fc0361
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-cookie-consent-tabs-mdx-46255b8dbf76459e0c65.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[2166],{83428:function(e,a,t){t.d(a,{S:function(){return i}});var s=t(80136),l=t(67294),n=t(7444),r=t(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const c=e=>{let{icon:a}=e;return l.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},a)},i=e=>{var{children:a,className:t,dataTestId:n,type:i="neutral",iconLeft:b}=e,u=(0,s._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(o.statusLabel,o[i],b&&o.statusLabelWithIcon,t),"data-testid":n},u),b&&l.createElement(c,{icon:b}),a)}},43161:function(e,a,t){t.r(a);var s=t(11151),l=t(67294),n=t(83428),r=t(57674),o=t(89482),c=(t(18607),t(26127));function i(e){const a=Object.assign({h1:"h1",a:"a",span:"span"},(0,s.ah)(),e.components);return c.Z||b("PageTabs",!1),c.Z.Tab||b("PageTabs.Tab",!0),c.Z.TabList||b("PageTabs.TabList",!0),c.Z.TabPanel||b("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(a.h1,{id:"cookieconsent",style:{position:"relative"}},"CookieConsent",l.createElement(a.a,{href:"#cookieconsent","aria-label":"cookieconsent permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(n.S,{type:"error"},"Draft"),l.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(o.Z,null,"The cookie compliance component informs users about cookie usage. This banner is shown when they visit a website or an\napplication for the first time."),"\n",l.createElement(c.Z,{pageContext:e.pageContext},l.createElement(c.Z.TabList,null,l.createElement(c.Z.Tab,{href:"/"},"Usage"),l.createElement(c.Z.Tab,{href:"/code"},"Code"),l.createElement(c.Z.Tab,{href:"/api"},"API"),l.createElement(c.Z.Tab,{href:"/accessibility"},"Accessibility")),l.createElement(c.Z.TabPanel,null,e.children)))}function b(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,s.ah)(),e.components);return a?l.createElement(a,e,l.createElement(i,e)):i(e)}},89482:function(e,a,t){var s=t(67294);a.Z=e=>{let{color:a="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:l={},children:n}=e;return s.createElement("p",{style:{fontSize:t,color:a,maxWidth:600,...l}},n)}},26127:function(e,a,t){var s=t(67294),l=t(14160),n=t(94671);const r="PageTabList",o="PageTabPanel",c="PageTab",i=e=>{var a;let{pageContext:t,children:i}=e;const b=t.frontmatter.slug,u=Array.isArray(i)?i:[i],d=u.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===r)),m=u.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===o)),h=null===(a=d.props)||void 0===a?void 0:a.children.filter((e=>e.type.componentName===c)),p=h.findIndex((e=>b.endsWith(e.props.href))),_=-1===p?0:p,f=0===_?b:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(b);return s.createElement(n.a,{initiallyActiveTab:_},s.createElement(n.a.TabList,{className:"page-tabs-list"},h.map((e=>s.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),h.map(((e,a)=>s.createElement(n.a.TabPanel,{key:e.props.href},_===a?m.props.children:s.createElement("div",null)))))},b=e=>{let{children:a}=e;return s.createElement(n.a.TabList,null,a)};b.componentName=r;const u=e=>{let{href:a,slug:t,children:l}=e;return s.createElement(n.a.Tab,null,l)};u.componentName=c;const d=e=>{let{children:a}=e;return s.createElement(n.a.TabPanel,null,a)};d.componentName=o,i.TabList=b,i.Tab=u,i.TabPanel=d,a.Z=i},57674:function(e,a,t){var s=t(67294),l=t(45422);a.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return s.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},s.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((a=>s.createElement("li",{key:a},s.createElement("span",{className:"status-name"},a),s.createElement("span",null,e[a]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-date-input-accessibility-mdx-dfa81df2f8badb5be261.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-date-input-accessibility-mdx-dfa81df2f8badb5be261.js
new file mode 100644
index 00000000000..85c7fc53f43
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-date-input-accessibility-mdx-dfa81df2f8badb5be261.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[5407,2761],{83428:function(e,t,a){a.d(t,{S:function(){return o}});var l=a(80136),s=a(67294),n=a(7444),r=a(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const c=e=>{let{icon:t}=e;return s.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},t)},o=e=>{var{children:t,className:a,dataTestId:n,type:o="neutral",iconLeft:u}=e,d=(0,l._)(e,["children","className","dataTestId","type","iconLeft"]);return s.createElement("span",Object.assign({className:(0,r.c)(i.statusLabel,i[o],u&&i.statusLabelWithIcon,a),"data-testid":n},d),u&&s.createElement(c,{icon:u}),t)}},23744:function(e,t,a){a.r(t);var l=a(11151),s=a(67294),n=a(94474);const r=e=>{let{children:t,pageContext:a}=e;return s.createElement(n.default,{pageContext:a},t)};function i(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",em:"em"},(0,l.ah)(),e.components);return s.createElement(s.Fragment,null,s.createElement(t.h2,{id:"accessibility",style:{position:"relative"}},"Accessibility",s.createElement(t.a,{href:"#accessibility","aria-label":"accessibility permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.h3,{id:"pay-attention-to",style:{position:"relative"}},"Pay attention to",s.createElement(t.a,{href:"#pay-attention-to","aria-label":"pay attention to permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.ul,null,"\n",s.createElement(t.li,null,"HDS date input allows the user to input the date manually without using the date picker. Whenever you require the user to input dates, you should also allow manual input."),"\n",s.createElement(t.li,null,"If your date picker includes dates that are disabled, make sure to describe this in the assistive text. The user must understand why some of the dates are disabled and some are not.","\n",s.createElement(t.ul,null,"\n",s.createElement(t.li,null,'E.g. "',s.createElement(t.em,null,"Appointments are only possible during weekdays."),'"'),"\n"),"\n"),"\n"))}t.default=function(e){return void 0===e&&(e={}),s.createElement(r,e,s.createElement(i,e))}},94474:function(e,t,a){a.r(t);var l=a(11151),s=a(67294),n=a(83428),r=a(57674),i=a(89482),c=(a(18607),a(26127));function o(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,l.ah)(),e.components);return c.Z||u("PageTabs",!1),c.Z.Tab||u("PageTabs.Tab",!0),c.Z.TabList||u("PageTabs.TabList",!0),c.Z.TabPanel||u("PageTabs.TabPanel",!0),s.createElement(s.Fragment,null,s.createElement(t.h1,{id:"dateinput",style:{position:"relative"}},"DateInput",s.createElement(t.a,{href:"#dateinput","aria-label":"dateinput permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement("div",{class:"status-label-description"},s.createElement(n.S,{type:"info"},"Stable"),s.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),s.createElement(r.Z)),"\n",s.createElement(i.Z,null,"Date input allows the user to easily input a specific date or a date range. By default, HDS date input is supplied with a date picker functionality."),"\n",s.createElement(c.Z,{pageContext:e.pageContext},s.createElement(c.Z.TabList,null,s.createElement(c.Z.Tab,{href:"/"},"Usage"),s.createElement(c.Z.Tab,{href:"/code"},"Code"),s.createElement(c.Z.Tab,{href:"/accessibility"},"Accessibility")),s.createElement(c.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,l.ah)(),e.components);return t?s.createElement(t,e,s.createElement(o,e)):o(e)}},89482:function(e,t,a){var l=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:s={},children:n}=e;return l.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...s}},n)}},26127:function(e,t,a){var l=a(67294),s=a(14160),n=a(94671);const r="PageTabList",i="PageTabPanel",c="PageTab",o=e=>{var t;let{pageContext:a,children:o}=e;const u=a.frontmatter.slug,d=Array.isArray(o)?o:[o],b=d.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===r)),h=d.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===i)),m=null===(t=b.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===c)),p=m.findIndex((e=>u.endsWith(e.props.href))),_=-1===p?0:p,f=0===_?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return l.createElement(n.a,{initiallyActiveTab:_},l.createElement(n.a.TabList,{className:"page-tabs-list"},m.map((e=>l.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,s.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),m.map(((e,t)=>l.createElement(n.a.TabPanel,{key:e.props.href},_===t?h.props.children:l.createElement("div",null)))))},u=e=>{let{children:t}=e;return l.createElement(n.a.TabList,null,t)};u.componentName=r;const d=e=>{let{href:t,slug:a,children:s}=e;return l.createElement(n.a.Tab,null,s)};d.componentName=c;const b=e=>{let{children:t}=e;return l.createElement(n.a.TabPanel,null,t)};b.componentName=i,o.TabList=u,o.Tab=d,o.TabPanel=b,t.Z=o},57674:function(e,t,a){var l=a(67294),s=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return l.createElement(s.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},l.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>l.createElement("li",{key:t},l.createElement("span",{className:"status-name"},t),l.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-date-input-code-mdx-5351cb0b41fba022b084.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-date-input-code-mdx-5351cb0b41fba022b084.js
new file mode 100644
index 00000000000..597ba0b8928
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-date-input-code-mdx-5351cb0b41fba022b084.js
@@ -0,0 +1 @@
+(self.webpackChunksite=self.webpackChunksite||[]).push([[1969,2761],{91309:function(e,t,n){var a="[object Null]",l="[object Undefined]",r="object"==typeof n.g&&n.g&&n.g.Object===Object&&n.g,c="object"==typeof self&&self&&self.Object===Object&&self,s=r||c||Function("return this")(),i=Object.prototype,o=i.hasOwnProperty,u=i.toString,d=s.Symbol,m=d?d.toStringTag:void 0;function p(e){return null==e?void 0===e?l:a:m&&m in Object(e)?function(e){var t=o.call(e,m),n=e[m];try{e[m]=void 0;var a=!0}catch(r){}var l=u.call(e);a&&(t?e[m]=n:delete e[m]);return l}(e):function(e){return u.call(e)}(e)}e.exports=function(e){if(!function(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}(e))return!1;var t=p(e);return"[object Function]"==t||"[object GeneratorFunction]"==t||"[object AsyncFunction]"==t||"[object Proxy]"==t}},83428:function(e,t,n){"use strict";n.d(t,{S:function(){return o}});var a=n(80136),l=n(67294),r=n(7444),c=n(34300),s={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,r.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const i=e=>{let{icon:t}=e;return l.createElement("span",{className:s.statusLabelIcon,"aria-hidden":"true"},t)},o=e=>{var{children:t,className:n,dataTestId:r,type:o="neutral",iconLeft:u}=e,d=(0,a._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,c.c)(s.statusLabel,s[o],u&&s.statusLabelWithIcon,n),"data-testid":r},d),u&&l.createElement(i,{icon:u}),t)}},37776:function(e,t,n){"use strict";n.d(t,{c:function(){return a}});var a=(e,t,n,a,l)=>[t&&e+"-helper",n&&e+"-error",a&&e+"-success",l&&e+"-info"].filter((e=>e)).join(" ")},94330:function(e,t,n){"use strict";n.d(t,{m:function(){return r}});var a=n(91309),l=n.n(a),r=(e,t)=>{l()(e)?e(t.current):e.current=t.current}},65873:function(e,t,n){"use strict";n.r(t);var a=n(11151),l=n(67294),r=n(41737),c=n(94474);const s=e=>{let{children:t,pageContext:n}=e;return l.createElement(c.default,{pageContext:n},t)};function i(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",h4:"h4",pre:"pre",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",strong:"strong",p:"p"},(0,a.ah)(),e.components),{Playground:n,IconCheckCircleFill:c,Link:s,ExternalLink:i,IconCrossCircle:u,InternalLink:d}=t;return i||o("ExternalLink",!0),c||o("IconCheckCircleFill",!0),u||o("IconCrossCircle",!0),d||o("InternalLink",!0),s||o("Link",!0),n||o("Playground",!0),l.createElement(l.Fragment,null,l.createElement(t.h2,{id:"code",style:{position:"relative"}},"Code",l.createElement(t.a,{href:"#code","aria-label":"code permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h3,{id:"code-examples",style:{position:"relative"}},"Code examples",l.createElement(t.a,{href:"#code-examples","aria-label":"code examples permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h4,{id:"date-input-with-a-picker",style:{position:"relative"}},"Date input with a picker",l.createElement(t.a,{href:"#date-input-with-a-picker","aria-label":"date input with a picker permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n,{scope:{DateInput:r.D}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},'import { DateInput } from \'hds-react\';\n\n() => (\n  <div style={{maxWidth: \'400px\'}}>\n    <DateInput\n      helperText="Use format D.M.YYYY"\n      id="date-input-example-1"\n      initialMonth={new Date()}\n      label="Choose a date"\n      language="en"\n      onChange={function noRefCheck(){}}\n      required\n    />\n  </div>\n)\n'))),"\n",l.createElement(t.h3,{id:"date-input-without-a-confirmation",style:{position:"relative"}},"Date input without a confirmation",l.createElement(t.a,{href:"#date-input-without-a-confirmation","aria-label":"date input without a confirmation permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n,{scope:{DateInput:r.D}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},'import { DateInput } from \'hds-react\';\n\n() => (\n  <div style={{maxWidth: \'400px\'}}>\n    <DateInput\n      disableConfirmation\n      helperText="Use format D.M.YYYY"\n      id="date-input-example-2"\n      initialMonth={new Date()}\n      label="Choose a date"\n      language="en"\n      onChange={function noRefCheck(){}}\n      required\n  />\n  </div>\n)\n'))),"\n",l.createElement(t.h3,{id:"date-input-without-a-picker",style:{position:"relative"}},"Date input without a picker",l.createElement(t.a,{href:"#date-input-without-a-picker","aria-label":"date input without a picker permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n,{scope:{DateInput:r.D}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},'import { DateInput } from \'hds-react\';\n\n() => (\n  <div style={{maxWidth: \'400px\'}}>\n    <DateInput\n      disableDatePicker\n      helperText="Use format D.M.YYYY"\n      id="date-input-example-3"\n      initialMonth={new Date()}\n      label="Choose a date"\n      language="en"\n      onChange={function noRefCheck(){}}\n      required\n    />\n  </div>\n)\n'))),"\n",l.createElement(t.h3,{id:"localised-date-inputs",style:{position:"relative"}},"Localised date inputs",l.createElement(t.a,{href:"#localised-date-inputs","aria-label":"localised date inputs permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n,{scope:{DateInput:r.D}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},'import { DateInput } from \'hds-react\';\n\n() => (\n  <div style={{maxWidth: \'400px\'}}>\n    <DateInput\n      helperText="Use format D.M.YYYY"\n      id="date-input-example-4"\n      initialMonth={new Date()}\n      label="Choose a date"\n      language="en"\n      onChange={function noRefCheck(){}}\n      required\n      style={{marginBottom: \'var(--spacing-s)\'}}\n    />\n\n    <DateInput\n      helperText="Käytä muotoa P.K.VVVV"\n      id="date-input-example-5"\n      initialMonth={new Date()}\n      label="Valitse päivämäärä"\n      language="fi"\n      onChange={function noRefCheck(){}}\n      required\n      style={{marginBottom: \'var(--spacing-s)\'}}\n    />\n\n    <DateInput\n      helperText="Använd ett format D.M.ÅÅÅÅ"\n      id="date-input-example-6"\n      initialMonth={new Date()}\n      label="Välj ett datum"\n      language="sv"\n      onChange={function noRefCheck(){}}\n      required\n    />\n  </div>\n)\n'))),"\n",l.createElement(t.h3,{id:"packages",style:{position:"relative"}},"Packages",l.createElement(t.a,{href:"#packages","aria-label":"packages permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.table,null,l.createElement(t.thead,null,l.createElement(t.tr,null,l.createElement(t.th,null,"Package"),l.createElement(t.th,null,"Included"),l.createElement(t.th,null,"Storybook link"),l.createElement(t.th,null,"Source link"))),l.createElement(t.tbody,null,l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.strong,null,"HDS React")),l.createElement(t.td,null,l.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},l.createElement(c)," Yes ")),l.createElement(t.td,null,l.createElement(s,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-dateinput--default"},"View in Storybook")),l.createElement(t.td,null,l.createElement(i,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/blob/master/packages/react/src/components/dateInput/DateInput.tsx"},"View source"))),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.strong,null,"HDS Core")),l.createElement(t.td,null,l.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},l.createElement(u)," No ")),l.createElement(t.td,null,"-"),l.createElement(t.td,null,"-")))),"\n",l.createElement(t.h3,{id:"properties",style:{position:"relative"}},"Properties",l.createElement(t.a,{href:"#properties","aria-label":"properties permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"Note! You can find the full list of properties in the ",l.createElement(s,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-dateinput--default"},"React Storybook.")),"\n",l.createElement(t.p,null,"Also, note that this component is an input. All features supported by the HDS TextInput are also supported by this component. See ",l.createElement(d,{href:"/components/text-input"},"TextInput documentation page")," for more information."),"\n",l.createElement(t.table,null,l.createElement(t.thead,null,l.createElement(t.tr,null,l.createElement(t.th,null,"Property"),l.createElement(t.th,null,"Description"),l.createElement(t.th,null,"Values"),l.createElement(t.th,null,"Default value"))),l.createElement(t.tbody,null,l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"helperText")),l.createElement(t.td,null,"Helper text to be displayed below the input."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"errorText")),l.createElement(t.td,null,"Error text to be displayed below the input."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"successText")),l.createElement(t.td,null,"Success text to be displayed below the input."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"infoText")),l.createElement(t.td,null,"Info text to be displayed below the input."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"initialMonth")),l.createElement(t.td,null,"The initial month open in calendar."),l.createElement(t.td,null,l.createElement(t.code,null,"Date")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"label")),l.createElement(t.td,null,"A text label for the input."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"onChange")),l.createElement(t.td,null,"Callback fired when the state is changed."),l.createElement(t.td,null,l.createElement(t.code,null,"event")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"language")),l.createElement(t.td,null,"Language of the date input."),l.createElement(t.td,null,l.createElement(t.code,null,"string")," (fi, en, sv)"),l.createElement(t.td,null,"en")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"minDate")),l.createElement(t.td,null,"Minimum date to show in the datepicker calendar."),l.createElement(t.td,null,l.createElement(t.code,null,"Date")),l.createElement(t.td,null,"Start of the month ten years before current date")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"maxDate")),l.createElement(t.td,null,"Maximum date to show in the datepicker calendar."),l.createElement(t.td,null,l.createElement(t.code,null,"Date")),l.createElement(t.td,null,"End of the month ten years from current date.")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"isDateDisabledBy")),l.createElement(t.td,null,"Disables date(s) based on conditional function."),l.createElement(t.td,null,l.createElement(t.code,null,"function")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"initialMonth")),l.createElement(t.td,null,"The initial month open in calendar."),l.createElement(t.td,null,l.createElement(t.code,null,"Date")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"disableDatePicker")),l.createElement(t.td,null,"If set to true, the date picker button is hidden."),l.createElement(t.td,null,l.createElement(t.code,null,"boolean")),l.createElement(t.td,null,"false")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"disableConfirmation")),l.createElement(t.td,null,"If set to true, the date picker does not require confirmation."),l.createElement(t.td,null,l.createElement(t.code,null,"boolean")),l.createElement(t.td,null,"false")))))}function o(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){return void 0===e&&(e={}),l.createElement(s,e,l.createElement(i,e))}},94474:function(e,t,n){"use strict";n.r(t);var a=n(11151),l=n(67294),r=n(83428),c=n(57674),s=n(89482),i=(n(18607),n(26127));function o(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,a.ah)(),e.components);return i.Z||u("PageTabs",!1),i.Z.Tab||u("PageTabs.Tab",!0),i.Z.TabList||u("PageTabs.TabList",!0),i.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"dateinput",style:{position:"relative"}},"DateInput",l.createElement(t.a,{href:"#dateinput","aria-label":"dateinput permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(r.S,{type:"info"},"Stable"),l.createElement(r.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(c.Z)),"\n",l.createElement(s.Z,null,"Date input allows the user to easily input a specific date or a date range. By default, HDS date input is supplied with a date picker functionality."),"\n",l.createElement(i.Z,{pageContext:e.pageContext},l.createElement(i.Z.TabList,null,l.createElement(i.Z.Tab,{href:"/"},"Usage"),l.createElement(i.Z.Tab,{href:"/code"},"Code"),l.createElement(i.Z.Tab,{href:"/accessibility"},"Accessibility")),l.createElement(i.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,a.ah)(),e.components);return t?l.createElement(t,e,l.createElement(o,e)):o(e)}},89482:function(e,t,n){"use strict";var a=n(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:n="var(--fontsize-body-xl)",style:l={},children:r}=e;return a.createElement("p",{style:{fontSize:n,color:t,maxWidth:600,...l}},r)}},26127:function(e,t,n){"use strict";var a=n(67294),l=n(14160),r=n(94671);const c="PageTabList",s="PageTabPanel",i="PageTab",o=e=>{var t;let{pageContext:n,children:o}=e;const u=n.frontmatter.slug,d=Array.isArray(o)?o:[o],m=d.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===c)),p=d.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===s)),h=null===(t=m.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===i)),E=h.findIndex((e=>u.endsWith(e.props.href))),b=-1===E?0:E,f=0===b?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return a.createElement(r.a,{initiallyActiveTab:b},a.createElement(r.a.TabList,{className:"page-tabs-list"},h.map((e=>a.createElement(r.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),h.map(((e,t)=>a.createElement(r.a.TabPanel,{key:e.props.href},b===t?p.props.children:a.createElement("div",null)))))},u=e=>{let{children:t}=e;return a.createElement(r.a.TabList,null,t)};u.componentName=c;const d=e=>{let{href:t,slug:n,children:l}=e;return a.createElement(r.a.Tab,null,l)};d.componentName=i;const m=e=>{let{children:t}=e;return a.createElement(r.a.TabPanel,null,t)};m.componentName=s,o.TabList=u,o.Tab=d,o.TabPanel=m,t.Z=o},57674:function(e,t,n){"use strict";var a=n(67294),l=n(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return a.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},a.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>a.createElement("li",{key:t},a.createElement("span",{className:"status-name"},t),a.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-date-input-index-mdx-55b0753e837fbc90c993.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-date-input-index-mdx-55b0753e837fbc90c993.js
new file mode 100644
index 00000000000..801e252c1ac
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-date-input-index-mdx-55b0753e837fbc90c993.js
@@ -0,0 +1 @@
+(self.webpackChunksite=self.webpackChunksite||[]).push([[7390,2761],{91309:function(e,t,a){var n="[object Null]",l="[object Undefined]",s="object"==typeof a.g&&a.g&&a.g.Object===Object&&a.g,i="object"==typeof self&&self&&self.Object===Object&&self,r=s||i||Function("return this")(),o=Object.prototype,c=o.hasOwnProperty,d=o.toString,u=r.Symbol,h=u?u.toStringTag:void 0;function p(e){return null==e?void 0===e?l:n:h&&h in Object(e)?function(e){var t=c.call(e,h),a=e[h];try{e[h]=void 0;var n=!0}catch(s){}var l=d.call(e);n&&(t?e[h]=a:delete e[h]);return l}(e):function(e){return d.call(e)}(e)}e.exports=function(e){if(!function(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}(e))return!1;var t=p(e);return"[object Function]"==t||"[object GeneratorFunction]"==t||"[object AsyncFunction]"==t||"[object Proxy]"==t}},83428:function(e,t,a){"use strict";a.d(t,{S:function(){return c}});var n=a(80136),l=a(67294),s=a(7444),i=a(34300),r={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,s.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:t}=e;return l.createElement("span",{className:r.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:s,type:c="neutral",iconLeft:d}=e,u=(0,n._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,i.c)(r.statusLabel,r[c],d&&r.statusLabelWithIcon,a),"data-testid":s},u),d&&l.createElement(o,{icon:d}),t)}},37776:function(e,t,a){"use strict";a.d(t,{c:function(){return n}});var n=(e,t,a,n,l)=>[t&&e+"-helper",a&&e+"-error",n&&e+"-success",l&&e+"-info"].filter((e=>e)).join(" ")},94330:function(e,t,a){"use strict";a.d(t,{m:function(){return s}});var n=a(91309),l=a.n(n),s=(e,t)=>{l()(e)?e(t.current):e.current=t.current}},76510:function(e,t,a){"use strict";a.r(t);var n=a(11151),l=a(67294),s=a(41737),i=a(94474);const r=e=>{let{children:t,pageContext:a}=e;return l.createElement(i.default,{pageContext:a},t)};function o(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",h4:"h4",strong:"strong",p:"p",code:"code"},(0,n.ah)(),e.components),{PlaygroundPreview:a,InternalLink:i,ExternalLink:r}=t;return r||c("ExternalLink",!0),i||c("InternalLink",!0),a||c("PlaygroundPreview",!0),l.createElement(l.Fragment,null,l.createElement(t.h2,{id:"usage",style:{position:"relative"}},"Usage",l.createElement(t.a,{href:"#usage","aria-label":"usage permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h3,{id:"example",style:{position:"relative"}},"Example",l.createElement(t.a,{href:"#example","aria-label":"example permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a,null,l.createElement("div",{style:{maxWidth:"400px"}},l.createElement(s.D,{helperText:"Use format D.M.YYYY",id:"date-input-example-1",initialMonth:new Date,label:"Choose a date",language:"en",onChange:function(){},required:!0}))),"\n",l.createElement(t.h3,{id:"principles",style:{position:"relative"}},"Principles",l.createElement(t.a,{href:"#principles","aria-label":"principles permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,"Only use a date input when you can expect the user to input a specific date. If it can be difficult for the user to determine which date they should choose or if the selected date can be vague, let the user choose, for example, a week, month or a date range.","\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,"When selecting weeks or months, it is usually better to use ",l.createElement(i,{size:"M",href:"/components/dropdown#select-single-selection"},"the dropdown select component"),"."),"\n"),"\n"),"\n",l.createElement(t.li,null,'Pay close attention to the date input label. It should clearly describe the date the user is expected to input. A good label describes the input, such as "Arrival date".'),"\n",l.createElement(t.li,null,"The date input should be provided with an assistive text which tells the user the expected date format. Avoid relying on a placeholder text alone because it will disappear when the user starts typing. The recommended way to show the expected format is to use the assistive text below the input.","\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,"As specified in ",l.createElement(i,{size:"M",href:"/foundation/guidelines/data-formats"},"the data format guidelines"),", Helsinki services will always use D.M.YYYY format. Do not use the English date format even if the user is using English locale."),"\n"),"\n"),"\n",l.createElement(t.li,null,"When asking for date ranges, you should use two separate date inputs instead of using one input or picker for both dates."),"\n",l.createElement(t.li,null,"HDS Date picker acts as a modal. This means that clicking outside of the date picker closes it. Closing the picker this way also cancels the selection made in the date picker."),"\n"),"\n",l.createElement(t.h4,{id:"when-to-use-the-date-picker",style:{position:"relative"}},"When to use the date picker?",l.createElement(t.a,{href:"#when-to-use-the-date-picker","aria-label":"when to use the date picker permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,l.createElement(t.strong,null,"Use the date picker")," (calendar) when it is useful for the user to see how the selected date is related to other dates and/or which weekday it is."),"\n",l.createElement(t.li,null,l.createElement(t.strong,null,"Do not use the date picker")," if the date is easily remembered or is obvious for the user or if the date is further into the past or the future. Date of birth is an example of a situation where the date picker should not be used."),"\n"),"\n",l.createElement(t.h3,{id:"variations",style:{position:"relative"}},"Variations",l.createElement(t.a,{href:"#variations","aria-label":"variations permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h4,{id:"date-input-with-a-picker",style:{position:"relative"}},"Date input with a picker",l.createElement(t.a,{href:"#date-input-with-a-picker","aria-label":"date input with a picker permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"Out of the box, HDS date input will include an openable date picker which allows the user to select the date via a calendar view. The date can be also inputted manually, which is the recommended setup for most use cases."),"\n",l.createElement(a,null,l.createElement("div",{style:{maxWidth:"400px"}},l.createElement(s.D,{helperText:"Use format D.M.YYYY",id:"date-input-example-2",initialMonth:new Date,label:"Choose a date",language:"en",onChange:function(){},required:!0}))),"\n",l.createElement(t.h4,{id:"date-input-without-a-confirmation",style:{position:"relative"}},"Date input without a confirmation",l.createElement(t.a,{href:"#date-input-without-a-confirmation","aria-label":"date input without a confirmation permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,l.createElement(t.strong,null,"Note!")," Since this variant closes the date picker immediately after selection, it violates ",l.createElement(r,{href:"https://www.w3.org/TR/WCAG21/#on-input"},"WCAG 3.2.2 On Input guideline"),". Therefore, this variant should only be used in administration and intranet type of services."),"\n",l.createElement(t.p,null,"The default HDS date picker requires a confirmation after the date has been selected from the calendar. If your service is mostly desktop or meant for administration, the confirmation can be disabled with ",l.createElement(t.code,null,"disableConfirmation")," prop to allow more fluid ser experience when selecting multiple dates in a row."),"\n",l.createElement(t.p,null,"In all other types of services, it is recommended to not disable the confirmation step."),"\n",l.createElement(a,null,l.createElement("div",{style:{maxWidth:"400px"}},l.createElement(s.D,{disableConfirmation:!0,helperText:"Use format D.M.YYYY",id:"date-input-example-3",initialMonth:new Date,label:"Choose a date",language:"en",onChange:function(){},required:!0}))),"\n",l.createElement(t.h4,{id:"date-input-without-a-picker",style:{position:"relative"}},"Date input without a picker",l.createElement(t.a,{href:"#date-input-without-a-picker","aria-label":"date input without a picker permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"It is possible to disable the date picker functionality by supplying a ",l.createElement(t.code,null,"disableDatePicker")," prop to the input. To learn when the date picker should be hidden, see ",l.createElement(t.a,{href:"#when-to-use-the-date-picker"},"when to use date picker")," above."),"\n",l.createElement(a,null,l.createElement("div",{style:{maxWidth:"400px"}},l.createElement(s.D,{disableDatePicker:!0,helperText:"Use format D.M.YYYY",id:"date-input-example-4",initialMonth:new Date,label:"Choose a date",language:"en",onChange:function(){},required:!0}))))}function c(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){return void 0===e&&(e={}),l.createElement(r,e,l.createElement(o,e))}},94474:function(e,t,a){"use strict";a.r(t);var n=a(11151),l=a(67294),s=a(83428),i=a(57674),r=a(89482),o=(a(18607),a(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,n.ah)(),e.components);return o.Z||d("PageTabs",!1),o.Z.Tab||d("PageTabs.Tab",!0),o.Z.TabList||d("PageTabs.TabList",!0),o.Z.TabPanel||d("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"dateinput",style:{position:"relative"}},"DateInput",l.createElement(t.a,{href:"#dateinput","aria-label":"dateinput permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(s.S,{type:"info"},"Stable"),l.createElement(s.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(i.Z)),"\n",l.createElement(r.Z,null,"Date input allows the user to easily input a specific date or a date range. By default, HDS date input is supplied with a date picker functionality."),"\n",l.createElement(o.Z,{pageContext:e.pageContext},l.createElement(o.Z.TabList,null,l.createElement(o.Z.Tab,{href:"/"},"Usage"),l.createElement(o.Z.Tab,{href:"/code"},"Code"),l.createElement(o.Z.Tab,{href:"/accessibility"},"Accessibility")),l.createElement(o.Z.TabPanel,null,e.children)))}function d(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,n.ah)(),e.components);return t?l.createElement(t,e,l.createElement(c,e)):c(e)}},89482:function(e,t,a){"use strict";var n=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:l={},children:s}=e;return n.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...l}},s)}},26127:function(e,t,a){"use strict";var n=a(67294),l=a(14160),s=a(94671);const i="PageTabList",r="PageTabPanel",o="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const d=a.frontmatter.slug,u=Array.isArray(c)?c:[c],h=u.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===i)),p=u.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===r)),m=null===(t=h.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===o)),b=m.findIndex((e=>d.endsWith(e.props.href))),f=-1===b?0:b,g=0===f?d:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(d);return n.createElement(s.a,{initiallyActiveTab:f},n.createElement(s.a.TabList,{className:"page-tabs-list"},m.map((e=>n.createElement(s.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?g:g+e.props.href))},e.props.children)))),m.map(((e,t)=>n.createElement(s.a.TabPanel,{key:e.props.href},f===t?p.props.children:n.createElement("div",null)))))},d=e=>{let{children:t}=e;return n.createElement(s.a.TabList,null,t)};d.componentName=i;const u=e=>{let{href:t,slug:a,children:l}=e;return n.createElement(s.a.Tab,null,l)};u.componentName=o;const h=e=>{let{children:t}=e;return n.createElement(s.a.TabPanel,null,t)};h.componentName=r,c.TabList=d,c.Tab=u,c.TabPanel=h,t.Z=c},57674:function(e,t,a){"use strict";var n=a(67294),l=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return n.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},n.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>n.createElement("li",{key:t},n.createElement("span",{className:"status-name"},t),n.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-date-input-tabs-mdx-48b5a1f56d2f89619665.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-date-input-tabs-mdx-48b5a1f56d2f89619665.js
new file mode 100644
index 00000000000..a41355859a7
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-date-input-tabs-mdx-48b5a1f56d2f89619665.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[2761],{83428:function(e,a,t){t.d(a,{S:function(){return o}});var s=t(80136),l=t(67294),n=t(7444),r=t(34300),c={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const i=e=>{let{icon:a}=e;return l.createElement("span",{className:c.statusLabelIcon,"aria-hidden":"true"},a)},o=e=>{var{children:a,className:t,dataTestId:n,type:o="neutral",iconLeft:u}=e,b=(0,s._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(c.statusLabel,c[o],u&&c.statusLabelWithIcon,t),"data-testid":n},b),u&&l.createElement(i,{icon:u}),a)}},94474:function(e,a,t){t.r(a);var s=t(11151),l=t(67294),n=t(83428),r=t(57674),c=t(89482),i=(t(18607),t(26127));function o(e){const a=Object.assign({h1:"h1",a:"a",span:"span"},(0,s.ah)(),e.components);return i.Z||u("PageTabs",!1),i.Z.Tab||u("PageTabs.Tab",!0),i.Z.TabList||u("PageTabs.TabList",!0),i.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(a.h1,{id:"dateinput",style:{position:"relative"}},"DateInput",l.createElement(a.a,{href:"#dateinput","aria-label":"dateinput permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(n.S,{type:"info"},"Stable"),l.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(c.Z,null,"Date input allows the user to easily input a specific date or a date range. By default, HDS date input is supplied with a date picker functionality."),"\n",l.createElement(i.Z,{pageContext:e.pageContext},l.createElement(i.Z.TabList,null,l.createElement(i.Z.Tab,{href:"/"},"Usage"),l.createElement(i.Z.Tab,{href:"/code"},"Code"),l.createElement(i.Z.Tab,{href:"/accessibility"},"Accessibility")),l.createElement(i.Z.TabPanel,null,e.children)))}function u(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,s.ah)(),e.components);return a?l.createElement(a,e,l.createElement(o,e)):o(e)}},89482:function(e,a,t){var s=t(67294);a.Z=e=>{let{color:a="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:l={},children:n}=e;return s.createElement("p",{style:{fontSize:t,color:a,maxWidth:600,...l}},n)}},26127:function(e,a,t){var s=t(67294),l=t(14160),n=t(94671);const r="PageTabList",c="PageTabPanel",i="PageTab",o=e=>{var a;let{pageContext:t,children:o}=e;const u=t.frontmatter.slug,b=Array.isArray(o)?o:[o],d=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===r)),p=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===c)),m=null===(a=d.props)||void 0===a?void 0:a.children.filter((e=>e.type.componentName===i)),h=m.findIndex((e=>u.endsWith(e.props.href))),_=-1===h?0:h,f=0===_?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return s.createElement(n.a,{initiallyActiveTab:_},s.createElement(n.a.TabList,{className:"page-tabs-list"},m.map((e=>s.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),m.map(((e,a)=>s.createElement(n.a.TabPanel,{key:e.props.href},_===a?p.props.children:s.createElement("div",null)))))},u=e=>{let{children:a}=e;return s.createElement(n.a.TabList,null,a)};u.componentName=r;const b=e=>{let{href:a,slug:t,children:l}=e;return s.createElement(n.a.Tab,null,l)};b.componentName=i;const d=e=>{let{children:a}=e;return s.createElement(n.a.TabPanel,null,a)};d.componentName=c,o.TabList=u,o.Tab=b,o.TabPanel=d,a.Z=o},57674:function(e,a,t){var s=t(67294),l=t(45422);a.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return s.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},s.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((a=>s.createElement("li",{key:a},s.createElement("span",{className:"status-name"},a),s.createElement("span",null,e[a]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-dialog-accessibility-mdx-d372732094ab19775b42.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-dialog-accessibility-mdx-d372732094ab19775b42.js
new file mode 100644
index 00000000000..886f6a8dc93
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-dialog-accessibility-mdx-d372732094ab19775b42.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[9697,6043],{83428:function(e,t,a){a.d(t,{S:function(){return c}});var l=a(80136),n=a(67294),s=a(7444),r=a(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,s.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const i=e=>{let{icon:t}=e;return n.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:s,type:c="neutral",iconLeft:u}=e,d=(0,l._)(e,["children","className","dataTestId","type","iconLeft"]);return n.createElement("span",Object.assign({className:(0,r.c)(o.statusLabel,o[c],u&&o.statusLabelWithIcon,a),"data-testid":s},d),u&&n.createElement(i,{icon:u}),t)}},20874:function(e,t,a){a.r(t);var l=a(11151),n=a(67294),s=a(65958);const r=e=>{let{children:t,pageContext:a}=e;return n.createElement(s.default,{pageContext:a},t)};function o(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",code:"code"},(0,l.ah)(),e.components);return n.createElement(n.Fragment,null,n.createElement(t.h2,{id:"accessibility",style:{position:"relative"}},"Accessibility",n.createElement(t.a,{href:"#accessibility","aria-label":"accessibility permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.h3,{id:"pay-attention-to",style:{position:"relative"}},"Pay attention to",n.createElement(t.a,{href:"#pay-attention-to","aria-label":"pay attention to permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.ul,null,"\n",n.createElement(t.li,null,"When the dialog is closed, the focus should return to the element that triggered the original dialog context. This allows keyboard and screen reader users to continue the context where they originally opened the dialog.","\n",n.createElement(t.ul,null,"\n",n.createElement(t.li,null,"If the dialog was opened on a page load, the focus should be returned to the start of the ",n.createElement(t.code,null,"body")," element."),"\n"),"\n"),"\n",n.createElement(t.li,null,"When the dialog is active, everything outside of the dialog should be inaccessible to the user."),"\n",n.createElement(t.li,null,"Pay attention to the roles of buttons of your dialog. If you use the button as a link instead of an action (i.e. the button press opens a new page), you must specify a ",n.createElement(t.code,null,'role="link"')," attribute to the button."),"\n"))}t.default=function(e){return void 0===e&&(e={}),n.createElement(r,e,n.createElement(o,e))}},65958:function(e,t,a){a.r(t);var l=a(11151),n=a(67294),s=a(83428),r=a(57674),o=a(89482),i=(a(18607),a(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,l.ah)(),e.components);return i.Z||u("PageTabs",!1),i.Z.Tab||u("PageTabs.Tab",!0),i.Z.TabList||u("PageTabs.TabList",!0),i.Z.TabPanel||u("PageTabs.TabPanel",!0),n.createElement(n.Fragment,null,n.createElement(t.h1,{id:"dialog",style:{position:"relative"}},"Dialog",n.createElement(t.a,{href:"#dialog","aria-label":"dialog permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement("div",{class:"status-label-description"},n.createElement(s.S,{type:"info"},"Stable"),n.createElement(s.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),n.createElement(r.Z)),"\n",n.createElement(o.Z,null,"Dialogs initiate a conversation between the service and the user. They are used when an input or a confirmation is needed from the user or when important information needs to be conveyed."),"\n",n.createElement(i.Z,{pageContext:e.pageContext},n.createElement(i.Z.TabList,null,n.createElement(i.Z.Tab,{href:"/"},"Usage"),n.createElement(i.Z.Tab,{href:"/code"},"Code"),n.createElement(i.Z.Tab,{href:"/accessibility"},"Accessibility"),n.createElement(i.Z.Tab,{href:"/customisation"},"Customisation")),n.createElement(i.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,l.ah)(),e.components);return t?n.createElement(t,e,n.createElement(c,e)):c(e)}},89482:function(e,t,a){var l=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:n={},children:s}=e;return l.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...n}},s)}},26127:function(e,t,a){var l=a(67294),n=a(14160),s=a(94671);const r="PageTabList",o="PageTabPanel",i="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const u=a.frontmatter.slug,d=Array.isArray(c)?c:[c],h=d.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===r)),b=d.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===o)),m=null===(t=h.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===i)),p=m.findIndex((e=>u.endsWith(e.props.href))),g=-1===p?0:p,f=0===g?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return l.createElement(s.a,{initiallyActiveTab:g},l.createElement(s.a.TabList,{className:"page-tabs-list"},m.map((e=>l.createElement(s.a.Tab,{key:e.props.href,onClick:()=>(0,n.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),m.map(((e,t)=>l.createElement(s.a.TabPanel,{key:e.props.href},g===t?b.props.children:l.createElement("div",null)))))},u=e=>{let{children:t}=e;return l.createElement(s.a.TabList,null,t)};u.componentName=r;const d=e=>{let{href:t,slug:a,children:n}=e;return l.createElement(s.a.Tab,null,n)};d.componentName=i;const h=e=>{let{children:t}=e;return l.createElement(s.a.TabPanel,null,t)};h.componentName=o,c.TabList=u,c.Tab=d,c.TabPanel=h,t.Z=c},57674:function(e,t,a){var l=a(67294),n=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return l.createElement(n.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},l.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>l.createElement("li",{key:t},l.createElement("span",{className:"status-name"},t),l.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-dialog-code-mdx-f12b1f7bfd7382b5d33b.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-dialog-code-mdx-f12b1f7bfd7382b5d33b.js
new file mode 100644
index 00000000000..9af0837a56f
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-dialog-code-mdx-f12b1f7bfd7382b5d33b.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[4393,6043],{84014:function(e,t,n){n.d(t,{D:function(){return E}});var a=n(80136),o=n(67294),i=n(73935),l=n(7444),r=n(34300),s=n(97640),d=n(35828),c={"medium-up":"only screen and (min-width:768px)",dialogVisibleBodyWithHiddenScrollbars:"Dialog-module_dialogVisibleBodyWithHiddenScrollbars__3M__P",dialogBackdrop:"Dialog-module_dialogBackdrop__2Pg2X",dialog:"Dialog-module_dialog__2t3d4",dialogContainer:"Dialog-module_dialogContainer__10Y03",danger:"Dialog-module_danger__yTstu",dialogVisible:"Dialog-module_dialogVisible__6zvp4",dialogScrollable:"Dialog-module_dialogScrollable__3W-hK",boxShadow:"Dialog-module_boxShadow__3qt5w"};(0,l.s)(".Dialog-module_dialogVisibleBodyWithHiddenScrollbars__3M__P{overflow:hidden!important}.Dialog-module_dialogBackdrop__2Pg2X{inset:0;position:fixed}.Dialog-module_dialog__2t3d4{background:#fff;box-sizing:border-box;display:flex;flex-direction:column;margin:auto var(--spacing-s);max-width:100%;position:relative;visibility:hidden;z-index:900}.Dialog-module_dialogContainer__10Y03{--accent-line-color:var(--color-bus);--overlay-color:rgba(0,0,0,0.3);align-items:center;display:flex;inset:0;justify-content:center;overflow:auto;-webkit-overflow-scrolling:unset;overscroll-behavior:none;position:fixed;touch-action:none;z-index:800}.Dialog-module_dialogContainer__10Y03 .Dialog-module_dialogBackdrop__2Pg2X{background:var(--overlay-color)}.Dialog-module_dialogContainer__10Y03 .Dialog-module_dialog__2t3d4{border-top:10px solid var(--accent-line-color);width:558px}.Dialog-module_dialogContainer__10Y03 .Dialog-module_dialog__2t3d4.Dialog-module_danger__yTstu{border-top-color:var(--color-error)}.Dialog-module_dialogVisible__6zvp4{visibility:visible!important}.Dialog-module_dialogScrollable__3W-hK{max-height:calc(100% - 4rem);overflow:hidden}@media only screen and (min-width:768px){.Dialog-module_dialog__2t3d4{margin:auto}}.Dialog-module_boxShadow__3qt5w{box-shadow:var(--box-shadow-l)}");(0,l.s)(".DialogActionButtons-module_dialogActionButtons__5m7AC{display:block;padding:var(--spacing-s) var(--spacing-m) var(--spacing-m)}@media only screen and (min-width:768px){.DialogActionButtons-module_dialogActionButtons__5m7AC{padding-left:var(--spacing-l);padding-right:var(--spacing-l)}}.DialogActionButtons-module_dialogActionButtons__5m7AC>*{width:100%}.DialogActionButtons-module_dialogActionButtons__5m7AC>*+*{margin-top:var(--spacing-s)}@media only screen and (min-width:768px){.DialogActionButtons-module_dialogActionButtons__5m7AC{display:flex;flex-wrap:wrap;gap:var(--spacing-s)}.DialogActionButtons-module_dialogActionButtons__5m7AC>*{width:auto}.DialogActionButtons-module_dialogActionButtons__5m7AC>*+*{margin-top:0}}");const u=e=>{let{children:t,className:n}=e;return o.createElement("div",{className:(0,r.c)("DialogActionButtons-module_dialogActionButtons__5m7AC",n)},t)};u.componentName="DialogActionButtons";(0,l.s)('.DialogHeader-module_dialogHeaderClose__36wOz{background:none;border:none;color:inherit;cursor:pointer;font:inherit}.DialogHeader-module_dialogHeader__32Rho{padding-left:var(--spacing-m);padding-right:var(--spacing-m);display:block;padding-bottom:0;padding-top:var(--spacing-m)}@media only screen and (min-width:768px){.DialogHeader-module_dialogHeader__32Rho{padding-left:var(--spacing-l);padding-right:var(--spacing-l)}}.DialogHeader-module_dialogHeaderContent__3K4i2{align-items:flex-start;display:flex;justify-content:space-between;min-height:36px}.DialogHeader-module_dialogTitle__1GeH_{--outline-x-gutter:4px;--outline-y-gutter:2px;--outline-width:3px;align-items:flex-start;box-sizing:border-box;display:flex;font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:.4px;line-height:24px;margin:0;order:0;outline:none;padding-right:var(--spacing-3-xs);position:relative}.DialogHeader-module_dialogTitle__1GeH_:after{border:var(--outline-width) solid transparent;box-sizing:border-box;content:"";display:block;height:100%;left:calc((var(--outline-width) + var(--outline-x-gutter)) * -1);position:absolute;top:calc((var(--outline-width) + var(--outline-y-gutter)) * -1);width:100%}.DialogHeader-module_dialogTitle__1GeH_:focus:after{border-color:var(--color-coat-of-arms);height:calc(100% + (var(--outline-width) + var(--outline-y-gutter)) * 2);width:calc(100% + (var(--outline-width) + var(--outline-x-gutter)) * 2)}.DialogHeader-module_dialogTitle__1GeH_ .DialogHeader-module_dialogTitleLeftIcon__1xWhC{display:inline-flex;margin-right:var(--spacing-2-xs)}.DialogHeader-module_dialogHeaderClose__36wOz{color:var(--dialog-close-button-color);display:block;font-size:0;height:44px;line-height:1;margin-left:var(--spacing-2-xs);margin-top:calc(-1 * var(--spacing-2-xs));min-width:44px;order:1;padding:0;vertical-align:middle}.DialogHeader-module_dialogHeaderClose__36wOz:focus{box-shadow:0 0 0 3px var(--color-coat-of-arms);outline:none;text-decoration:none}@media only screen and (min-width:768px){.DialogHeader-module_dialogHeader__32Rho{padding-bottom:var(--spacing-3-xs)}}');const m=o.createContext({}),p=e=>{let{id:t,title:n,iconLeft:a}=e;const{close:i,closeButtonLabelText:l,isReadyToShowDialog:r}=(0,o.useContext)(m),s=o.useRef();return(0,o.useEffect)((()=>{s&&r&&s.current.focus()}),[s,r]),o.createElement("div",{className:"DialogHeader-module_dialogHeader__32Rho"},o.createElement("div",{className:"DialogHeader-module_dialogHeaderContent__3K4i2"},i&&o.createElement("button",{className:"DialogHeader-module_dialogHeaderClose__36wOz",type:"button","aria-label":l||"Close",onClick:()=>i()},o.createElement(d.I,{"aria-hidden":"true"})),o.createElement("h2",{id:t,tabIndex:-1,className:"DialogHeader-module_dialogTitle__1GeH_",ref:s},a&&o.createElement("span",{className:"DialogHeader-module_dialogTitleLeftIcon__1xWhC","aria-hidden":"true"},a),n)))};p.componentName="DialogHeader";(0,l.s)(".DialogContent-module_dialogContent__rNnIp{padding-left:var(--spacing-m);padding-right:var(--spacing-m);padding-bottom:var(--spacing-2-xs)}@media only screen and (min-width:768px){.DialogContent-module_dialogContent__rNnIp{padding-left:var(--spacing-l);padding-right:var(--spacing-l)}}.DialogContent-module_dialogContentScrollable__1oi2o{border-bottom:1px solid;border-top:1px solid;overflow-y:auto}");const g=e=>{let{id:t,children:n}=e;const{scrollable:a}=(0,o.useContext)(m);return o.createElement("div",{id:t,className:(0,r.c)("DialogContent-module_dialogContent__rNnIp",a&&"DialogContent-module_dialogContentScrollable__1oi2o")},n)};var h,_;g.componentName="DialogContent",(_=h||(h={})).top="top",_.bottom="bottom";const b={tabIndex:0,"aria-hidden":!0},f=(e,t)=>{if(t){const n=(e=>e.querySelectorAll('a, button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select'))(t);n.length&&n[e===h.top?0:n.length-1].focus()}},v=e=>{let{onFocus:t}=e;return o.createElement("div",Object.assign({},b,{onFocus:t}))},x=(e,t)=>{const n=document.createElement("div");return n.className="hds-dialog-tab-barrier",n.tabIndex=b.tabIndex,n["aria-hidden"]=b.tabIndex["aria-hidden"],n.addEventListener("focus",(()=>f(e,t))),e===h.top?document.body.insertBefore(n,document.body.firstChild):document.body.appendChild(n),n},E=e=>{var{boxShadow:t=!1,id:n,isOpen:l,children:d,close:u,closeButtonLabelText:p,focusAfterCloseElement:g,focusAfterCloseRef:_,scrollable:b,variant:E="primary",style:y,theme:C,className:T,targetElement:D}=e,w=(0,a._)(e,["boxShadow","id","isOpen","children","close","closeButtonLabelText","focusAfterCloseElement","focusAfterCloseRef","scrollable","variant","style","theme","className","targetElement"]);const[q,I]=(0,o.useState)(!1),k={isReadyToShowDialog:q,scrollable:b,close:u,closeButtonLabelText:p},B=(0,s.u)(c.dialogContainer,C),L=(0,o.createRef)(),N=(0,o.useRef)(null);(0,o.useEffect)((()=>{if(l&&void 0!==L)return x(h.top,L.current),x(h.bottom,L.current),()=>{document.querySelectorAll(".hds-dialog-tab-barrier").forEach((e=>{e.remove()}))}}),[L,l]);const{"aria-labelledby":z,"aria-describedby":R}=w,A=(0,o.useCallback)((e=>{u&&"Escape"===e.key&&u()}),[u]),O=(0,o.useCallback)((()=>g||_&&_.current),[g,_]);return(0,o.useEffect)((()=>{if(l){const e=window.innerWidth-document.body.offsetWidth;if(e>0){N.current=document.body.style.paddingRight;const t=parseInt(window.getComputedStyle(document.body).paddingRight,10);document.body.style.paddingRight=t+e+"px"}document.body.classList.add(c.dialogVisibleBodyWithHiddenScrollbars),document.documentElement.classList.add(c.dialogVisibleBodyWithHiddenScrollbars),document.addEventListener("keydown",A,!1),I(!0)}return()=>{if(l){I(!1),document.body.classList.remove(c.dialogVisibleBodyWithHiddenScrollbars),document.documentElement.classList.remove(c.dialogVisibleBodyWithHiddenScrollbars),document.removeEventListener("keydown",A,!1),document.body.style.paddingRight=N.current||"";const e=O();e&&e.focus()}}}),[l,O]),l?i.createPortal(o.createElement(m.Provider,{value:k},o.createElement("div",{className:(0,r.c)(c.dialogContainer,B)},o.createElement(v,{onFocus:()=>f(h.bottom,L.current)}),o.createElement("div",{tabIndex:-1,className:c.dialogBackdrop}),o.createElement("div",{ref:L,role:"dialog","aria-modal":"true",id:n,className:(0,r.c)(c.dialog,q&&c.dialogVisible,b&&c.dialogScrollable,c[E],t&&c.boxShadow,T),style:y,"aria-labelledby":z,"aria-describedby":R},d),o.createElement(v,{onFocus:()=>f(h.top,L.current)}))),D||document.body):null};E.Header=p,E.Content=g,E.ActionButtons=u},93667:function(e,t,n){n.d(t,{I:function(){return s},t:function(){return r}});var a=n(67294),o=n(7444),i=n(34300),l=n(41125),r={root:"TextInput-module_root__2CMNr text-input_hds-text-input__2LODq",inputWrapper:"TextInput-module_inputWrapper__3Rvel text-input_hds-text-input__input-wrapper__1OqYG",input:"TextInput-module_input__1BlHi text-input_hds-text-input__input__GJm5C",hasButton:"TextInput-module_hasButton__2KCM1",errorText:"TextInput-module_errorText__3pizm text-input_hds-text-input__error-text__1GLYk",helperText:"TextInput-module_helperText__2dLR6 text-input_hds-text-input__helper-text__3V2KM",invalidText:"TextInput-module_invalidText__1w4sm text-input_hds-text-input__helper-text__3V2KM",successText:"TextInput-module_successText__2NMCP text-input_hds-text-input__success-text__3EOiy",infoText:"TextInput-module_infoText__zHOGs text-input_hds-text-input__info-text__3bqzy",invalid:"TextInput-module_invalid__2iYo2 text-input_hds-text-input--invalid__1UfKC",success:"TextInput-module_success__1kDOm text-input_hds-text-input--success__3dm2J",readOnly:"TextInput-module_readOnly__j615N undefined",buttonWrapper:"TextInput-module_buttonWrapper___filA text-input_hds-text-input__buttons__1RMzT",button:"TextInput-module_button__1ySMX text-input_hds-text-input__button__1Fh0I"};(0,o.s)("@keyframes text-input_fadeIn__2IDZ8{0%{opacity:0}to{opacity:1}}.text-input_hds-text-input__2LODq{--border-width:2px;--outline-width:3px;--input-height:56px;--textarea-height:149px;--icon-size:var(--spacing-m);--helper-color-default:var(--color-black-60);--helper-color-invalid:var(--color-error);--helper-color-success:var(--color-success);--helper-color-info:var(--color-black-90);--helper-color-info-icon:var(--color-coat-of-arms);--icon-color-invalid:var(--color-error);--input-background-default:var(--color-white);--input-background-disabled:var(--color-black-10);--input-border-color-default:var(--color-black-50);--input-border-color-hover:var(--color-black-90);--input-border-color-focus:var(--color-black-90);--input-border-color-invalid:var(--color-error);--input-border-color-disabled:var(--color-black-10);--input-border-color-success:var(--color-success);--input-color-default:var(--color-black-90);--input-color-disabled:var(--color-black-40);--label-color-default:var(--color-black-90);--label-color-invalid:var(--color-black-90);--placeholder-color:var(--color-black-60)}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C{-webkit-appearance:none;background-color:var(--input-background-default);border:var(--border-width) solid var(--input-border-color-default);border-radius:0;box-sizing:border-box;color:var(--input-color-default);font-family:inherit;font-size:1.125em;height:var(--input-height);line-height:normal;margin:0;padding:0 var(--spacing-s);width:100%;will-change:transform,box-shadow}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C:hover{border-color:var(--input-border-color-hover);transition:border-color 85ms ease-out}.text-input_hds-text-input__input-wrapper__1OqYG:focus-within .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-focus);outline:none}.text-input_hds-text-input__2LODq.text-input_hds-text-input--invalid__1UfKC .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-invalid)}.text-input_hds-text-input__2LODq.text-input_hds-text-input--success__3dm2J .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-success)}.text-input_hds-text-input__input-wrapper__1OqYG:focus-within .text-input_hds-text-input__input__GJm5C:not([readonly]){box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);transform:translateZ(0);transition:85ms ease-out;transition-property:box-shadow,transform}.text-input_hds-text-input__label__15F2V{color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.text-input_hds-text-input--invalid__1UfKC .text-input_hds-text-input__label__15F2V{color:var(--label-color-invalid);transition:color 85ms linear}.text-input_hds-text-input__required__z3Hm0{color:var(--color-black-90);display:inline-block;font-size:var(--fontsize-body-xl);line-height:1;margin-left:var(--spacing-2-xs);transform:translateY(var(--spacing-3-xs))}.text-input_hds-text-input__input-wrapper__1OqYG{display:flex;position:relative}.text-input_hds-text-input__2LODq textarea.text-input_hds-text-input__input__GJm5C{font-family:inherit;height:var(--textarea-height);margin:0;min-height:var(--input-height);overflow:auto;padding:var(--spacing-s);resize:vertical}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C::-moz-placeholder{color:var(--placeholder-color);opacity:1}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C::placeholder{color:var(--placeholder-color);opacity:1}.text-input_hds-text-input__helper-text__3V2KM{color:var(--helper-color-default)}.text-input_hds-text-input__error-text__1GLYk,.text-input_hds-text-input__helper-text__3V2KM{display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);white-space:pre-line}.text-input_hds-text-input__error-text__1GLYk{color:var(--helper-color-invalid);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.text-input_hds-text-input__error-text__1GLYk:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__error-text__1GLYk:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--icon-color-invalid);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__success-text__3EOiy{color:var(--helper-color-success);display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative;white-space:pre-wrap}.text-input_hds-text-input__success-text__3EOiy:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__success-text__3EOiy:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--helper-color-success);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__info-text__3bqzy{color:var(--helper-color-info);display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.text-input_hds-text-input__info-text__3bqzy:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__info-text__3bqzy:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--helper-color-info-icon);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C[disabled]{background-color:var(--input-background-disabled);border-color:var(--input-border-color-disabled);color:var(--input-color-disabled);cursor:not-allowed}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C[readonly]{background-color:transparent;border:0;color:var(--input-color-default);padding:0;-webkit-text-fill-color:var(--input-color-default)}.text-input_hds-text-input__buttons__1RMzT{align-items:center;bottom:0;display:flex;font-size:1rem;justify-content:center;margin-right:calc(var(--spacing-s) - var(--spacing-xs) / 2);position:absolute;right:0;top:0}.text-input_hds-text-input__button__1Fh0I{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;display:flex;font:inherit;outline:none;padding:var(--spacing-xs) calc(var(--spacing-xs) / 2)}.text-input_hds-text-input__button__1Fh0I:focus{outline:var(--outline-width) solid var(--color-focus-outline)}.TextInput-module_root__2CMNr{position:relative}.TextInput-module_input__1BlHi.TextInput-module_hasButton__2KCM1{padding-right:calc(2 * var(--spacing-s) + 1.5rem)}.TextInput-module_button__1ySMX:disabled{cursor:not-allowed}.TextInput-module_button__1ySMX:focus{outline:var(--outline-width) solid var(--color-focus-outline)}");const s=e=>{let{children:t,className:n="",errorText:o,helperText:s,hideLabel:d=!1,id:c,invalid:u=!1,isAriaLabelledBy:m=!1,label:p,labelId:g,onBlur:h,required:_=!1,style:b,successText:f,infoText:v,tooltipLabel:x,tooltipText:E,tooltipButtonLabel:y}=e;return a.createElement("div",{onBlur:h,className:(0,i.c)(r.root,u&&r.invalid,f&&r.success,n),style:b},p&&a.createElement(l.F,{id:g,inputId:c,isAriaLabelledBy:m,hidden:d,label:p,required:_,tooltipLabel:x,tooltipButtonLabel:y,tooltipText:E}),a.createElement("div",{className:(0,i.c)(r.inputWrapper)},t),o&&a.createElement("div",{className:r.errorText,id:c+"-error"},o),f&&a.createElement("div",{className:r.successText,id:c+"-success"},f),v&&a.createElement("div",{className:r.infoText,id:c+"-info"},v),s&&a.createElement("div",{className:r.helperText,id:c+"-helper"},s))}},83428:function(e,t,n){n.d(t,{S:function(){return d}});var a=n(80136),o=n(67294),i=n(7444),l=n(34300),r={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,i.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const s=e=>{let{icon:t}=e;return o.createElement("span",{className:r.statusLabelIcon,"aria-hidden":"true"},t)},d=e=>{var{children:t,className:n,dataTestId:i,type:d="neutral",iconLeft:c}=e,u=(0,a._)(e,["children","className","dataTestId","type","iconLeft"]);return o.createElement("span",Object.assign({className:(0,l.c)(r.statusLabel,r[d],c&&r.statusLabelWithIcon,n),"data-testid":i},u),c&&o.createElement(s,{icon:c}),t)}},3382:function(e,t,n){n.d(t,{T:function(){return r}});var a=n(80136),o=n(67294),i=n(93667),l=n(37776);const r=o.forwardRef(((e,t)=>{var{className:n="",disabled:r=!1,defaultValue:s,errorText:d,helperText:c,hideLabel:u,invalid:m,id:p,label:g,onChange:h=(()=>null),required:_,style:b,successText:f,infoText:v,tooltipLabel:x,tooltipText:E,tooltipButtonLabel:y}=e,C=(0,a._)(e,["className","disabled","defaultValue","errorText","helperText","hideLabel","invalid","id","label","onChange","required","style","successText","infoText","tooltipLabel","tooltipText","tooltipButtonLabel"]);const T={className:n,errorText:d,helperText:c,hideLabel:u,id:p,invalid:m,label:g,required:_,style:b,successText:f,infoText:v,tooltipLabel:x,tooltipText:E,tooltipButtonLabel:y},D=(0,l.c)(p,c,d,f,v);return o.createElement(i.I,Object.assign({},T),o.createElement("textarea",Object.assign({className:i.t.input,defaultValue:s,disabled:r,id:p,onChange:h,ref:t,required:_,"aria-describedby":D.length>0?D:null},C)))}))},24155:function(e,t,n){n.d(t,{T:function(){return s}});var a=n(80136),o=n(67294),i=n(93667),l=n(34300),r=n(37776);const s=o.forwardRef(((e,t)=>{var{className:n="",children:s,disabled:d=!1,defaultValue:c,errorText:u,helperText:m,hideLabel:p,invalid:g,id:h,label:_,onChange:b=(()=>null),required:f,style:v,successText:x,infoText:E,tooltipLabel:y,tooltipText:C,tooltipButtonLabel:T,type:D="text",buttonIcon:w,buttonAriaLabel:q,onButtonClick:I}=e,k=(0,a._)(e,["className","children","disabled","defaultValue","errorText","helperText","hideLabel","invalid","id","label","onChange","required","style","successText","infoText","tooltipLabel","tooltipText","tooltipButtonLabel","type","buttonIcon","buttonAriaLabel","onButtonClick"]);const B={className:n,errorText:u,helperText:m,hideLabel:p,id:h,invalid:g,label:_,required:f,style:v,successText:x,infoText:E,tooltipLabel:y,tooltipText:C,tooltipButtonLabel:T},L=(0,r.c)(h,m,u,x,E),N=Boolean(w&&I);return o.createElement(i.I,Object.assign({},B),o.createElement("input",Object.assign({className:(0,l.c)(i.t.input,N&&i.t.hasButton),defaultValue:c,disabled:d,id:h,onChange:b,ref:t,required:f,type:D,"aria-describedby":L.length>0?L:null},k)),N&&o.createElement("div",{className:i.t.buttonWrapper},o.createElement("button",{className:i.t.button,disabled:d,type:"button",onClick:I,"aria-label":q},w)),s)}))},37776:function(e,t,n){n.d(t,{c:function(){return a}});var a=(e,t,n,a,o)=>[t&&e+"-helper",n&&e+"-error",a&&e+"-success",o&&e+"-info"].filter((e=>e)).join(" ")},62172:function(e,t,n){n.r(t);var a=n(11151),o=n(67294),i=n(84014),l=n(17882),r=n(70476),s=n(89836),d=n(24155),c=n(3382),u=n(80699),m=n(65958);const p=e=>{let{children:t,pageContext:n}=e;return o.createElement(m.default,{pageContext:n},t)};function g(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",h4:"h4",pre:"pre",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",strong:"strong",p:"p"},(0,a.ah)(),e.components),{Playground:n,IconCheckCircleFill:m,Link:p,IconCrossCircle:g}=t;return m||h("IconCheckCircleFill",!0),g||h("IconCrossCircle",!0),p||h("Link",!0),n||h("Playground",!0),o.createElement(o.Fragment,null,o.createElement(t.h2,{id:"code",style:{position:"relative"}},"Code",o.createElement(t.a,{href:"#code","aria-label":"code permalink",className:"header-anchor after"},o.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",o.createElement(t.h3,{id:"code-examples",style:{position:"relative"}},"Code examples",o.createElement(t.a,{href:"#code-examples","aria-label":"code examples permalink",className:"header-anchor after"},o.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",o.createElement(t.h4,{id:"info-dialog",style:{position:"relative"}},"Info dialog",o.createElement(t.a,{href:"#info-dialog","aria-label":"info dialog permalink",className:"header-anchor after"},o.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",o.createElement(n,{scope:{Dialog:i.D,Button:l.B,IconInfoCircle:r.a5}},o.createElement(t.pre,null,o.createElement(t.code,{className:"language-jsx"},'import { Dialog, Button, IconInfoCircle } from \'hds-react\';\n\n() => {\n  const dialogTargetRef = React.useRef(null); // We need to render the dialog into a div inside the Playground component to ensure correct dialog styles in the HDS documentation. The dialog will be rendered into the document body by default.\n  const openInfoDialogButtonRef = React.useRef(null);\n  const [isOpen, setIsOpen] = React.useState(false);\n  const close = () => setIsOpen(false);\n  const titleId = "info-dialog-title";\n  const descriptionId = "info-dialog-content";\n  return (\n    <>\n      <div ref={dialogTargetRef}/>\n      <Button ref={openInfoDialogButtonRef} onClick={() => setIsOpen(true)}>\n        Open Info dialog\n      </Button>\n      <Dialog\n        id="info-dialog"\n        aria-labelledby={titleId}\n        aria-describedby={descriptionId}\n        isOpen={isOpen}\n        close={close}\n        closeButtonLabelText="Close info dialog"\n        focusAfterCloseRef={openInfoDialogButtonRef}\n        targetElement={dialogTargetRef.current}\n      >\n        <Dialog.Header\n          id={titleId}\n          title="Terms of service have changed"\n          iconLeft={<IconInfoCircle aria-hidden="true" />}\n        />\n        <Dialog.Content>\n          <p id={descriptionId} className="text-body">\n            Please note that the terms of this service have changed. You can review the changes in the user settings.</p>\n        </Dialog.Content>\n        <Dialog.ActionButtons>\n          <Button onClick={close}>\n            Close\n          </Button>\n        </Dialog.ActionButtons>\n      </Dialog>\n    </>\n  )\n}\n'))),"\n",o.createElement(t.h3,{id:"confirm-dialog",style:{position:"relative"}},"Confirm dialog",o.createElement(t.a,{href:"#confirm-dialog","aria-label":"confirm dialog permalink",className:"header-anchor after"},o.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",o.createElement(n,{scope:{Dialog:i.D,Button:l.B,IconQuestionCircle:s.I}},o.createElement(t.pre,null,o.createElement(t.code,{className:"language-jsx"},'import { Dialog, Button, IconQuestionCircle } from \'hds-react\';\n\n() => {\n  const confirmationDialogTarget = React.useRef(null); // We need to render the dialog into a div inside the Playground component to ensure correct dialog styles in the HDS documentation. The dialog will be rendered into the document body by default.\n  const openConfirmationDialogButtonRef = React.useRef(null);\n  const [isOpen, setIsOpen] = React.useState(false);\n  const close = () => setIsOpen(false);\n  const titleId = "confirmation-dialog-title";\n  const descriptionId = "confirmation-dialog-info";\n  return (\n    <>\n      <div ref={confirmationDialogTarget}/>\n      <Button ref={openConfirmationDialogButtonRef} onClick={() => setIsOpen(true)}>\n        Open Confirmation dialog\n      </Button>\n      <Dialog\n        id="confirmation-dialog"\n        aria-labelledby={titleId}\n        aria-describedby={descriptionId}\n        isOpen={isOpen}\n        focusAfterCloseRef={openConfirmationDialogButtonRef}\n        targetElement={confirmationDialogTarget.current}\n      >\n        <Dialog.Header\n          id={titleId}\n          title="Are you sure you want to continue?"\n          iconLeft={<IconQuestionCircle aria-hidden="true" />}\n        />\n        <Dialog.Content>\n          <p id={descriptionId} className="text-body">\n            You have not filled all form fields. Do you still want to continue? You can later return to edit this form. Saved forms can be accessed in your personal profile.\n          </p>\n        </Dialog.Content>\n        <Dialog.ActionButtons>\n          <Button onClick={close}>\n            Continue\n          </Button>\n          <Button onClick={close} variant="secondary">\n            Cancel\n          </Button>\n        </Dialog.ActionButtons>\n      </Dialog>\n    </>\n  )\n}\n'))),"\n",o.createElement(t.h3,{id:"danger-dialog",style:{position:"relative"}},"Danger dialog",o.createElement(t.a,{href:"#danger-dialog","aria-label":"danger dialog permalink",className:"header-anchor after"},o.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",o.createElement(n,{scope:{Dialog:i.D,Button:l.B,IconAlertCircle:r.I,IconTrash:r.bg}},o.createElement(t.pre,null,o.createElement(t.code,{className:"language-jsx"},'import { Dialog, Button, IconAlertCircle, IconTrash } from \'hds-react\';\n\n() => {\n  const dangerDialogTargetRef = React.useRef(null); // We need to render the dialog into a div inside the Playground component to ensure correct dialog styles in the HDS documentation. The dialog will be rendered into the document body by default.\n  const openDeleteDialogButtonRef = React.useRef(null);\n  const [isOpen, setIsOpen] = React.useState(false);\n  const close = () => setIsOpen(false);\n  const titleId = "delete-dialog-title";\n  const descriptionId = "delete-dialog-info";\n  return (\n    <>\n      <div ref={dangerDialogTargetRef}/>\n      <Button ref={openDeleteDialogButtonRef} onClick={() => setIsOpen(true)}>\n        Open Delete dialog\n      </Button>\n      <Dialog\n        variant="danger"\n        id="delete-dialog"\n        aria-labelledby={titleId}\n        aria-describedby={descriptionId}\n        isOpen={isOpen}\n        focusAfterCloseRef={openDeleteDialogButtonRef}\n        targetElement={dangerDialogTargetRef.current}\n      >\n        <Dialog.Header\n          id={titleId}\n          title="Are you sure you want to delete this blog post?"\n          iconLeft={<IconAlertCircle aria-hidden="true" />}\n        />\n        <Dialog.Content>\n          <p id={descriptionId} className="text-body">\n            The blog post will be deleted immediately. Deletion is permanent and it cannot be reverted.\n          </p>\n        </Dialog.Content>\n        <Dialog.ActionButtons>\n          <Button onClick={close} theme="black" variant="secondary">\n            Cancel\n          </Button>\n          <Button\n            variant="danger"\n            iconLeft={<IconTrash aria-hidden="true" />}\n            onClick={() => {\n              // Add confirm operations here\n              close();\n            }}\n          >\n            Delete the blog post\n          </Button>\n        </Dialog.ActionButtons>\n      </Dialog>\n    </>\n  )\n}\n'))),"\n",o.createElement(t.h3,{id:"scrollable-dialog",style:{position:"relative"}},"Scrollable dialog",o.createElement(t.a,{href:"#scrollable-dialog","aria-label":"scrollable dialog permalink",className:"header-anchor after"},o.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",o.createElement(n,{scope:{Dialog:i.D,Button:l.B,IconAlertCircle:r.I}},o.createElement(t.pre,null,o.createElement(t.code,{className:"language-jsx"},'import { Dialog, Button, IconAlertCircle } from \'hds-react\';\n\n() => {\n  const termsDialogTargetRef = React.useRef(null); // We need to render the dialog into a div inside the Playground component to ensure correct dialog styles in the HDS documentation. The dialog will be rendered into the document body by default.\n  const openTermsDialogButtonRef = React.useRef(null);\n  const [isOpen, setIsOpen] = React.useState(false);\n  const close = () => setIsOpen(false);\n  const titleId = "terms-dialog-title";\n  const descriptionId = "terms-dialog-info";\n  return (\n    <>\n      <div ref={termsDialogTargetRef}/>\n      <Button ref={openTermsDialogButtonRef} onClick={() => setIsOpen(true)}>\n        Open Terms dialog\n      </Button>\n      <Dialog\n        id="terms-dialog"\n        aria-labelledby={titleId}\n        aria-describedby={descriptionId}\n        isOpen={isOpen}\n        focusAfterCloseRef={openTermsDialogButtonRef}\n        targetElement={termsDialogTargetRef.current}\n        scrollable\n      >\n        <Dialog.Header\n          id={titleId}\n          title="Do you accept the terms of service?"\n          iconLeft={<IconAlertCircle aria-hidden="true" />}\n        />\n        <Dialog.Content>\n          <h3 id={descriptionId}>Terms of service</h3>\n          <p className="text-body">\n            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem\n            aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.\n            Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni\n            dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor\n            sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore\n            magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis\n            suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in\n            ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas\n            nulla pariatur?\n          </p>\n          <p className="text-body">\n            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem\n            aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.\n            Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni\n            dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor\n            sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore\n            magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis\n            suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in\n            ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas\n            nulla pariatur?\n          </p>\n          <p className="text-body">\n            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem\n            aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.\n            Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni\n            dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor\n            sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore\n            magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis\n            suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in\n            ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas\n            nulla pariatur?\n          </p>\n          <p className="text-body">\n            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem\n            aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.\n            Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni\n            dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor\n            sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore\n            magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis\n            suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in\n            ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas\n            nulla pariatur?\n          </p>\n          <p className="text-body">\n            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem\n            aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.\n            Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni\n            dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor\n            sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore\n            magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis\n            suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in\n            ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas\n            nulla pariatur?\n          </p>\n        </Dialog.Content>\n        <Dialog.ActionButtons>\n          <Button onClick={close}>\n            Accept terms\n          </Button>\n          <Button onClick={close} variant="secondary">\n            Cancel\n          </Button>\n        </Dialog.ActionButtons>\n      </Dialog>\n    </>\n  )\n}\n'))),"\n",o.createElement(t.h4,{id:"dialog-with-custom-content",style:{position:"relative"}},"Dialog with custom content",o.createElement(t.a,{href:"#dialog-with-custom-content","aria-label":"dialog with custom content permalink",className:"header-anchor after"},o.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",o.createElement(n,{scope:{Dialog:i.D,Button:l.B,TextInput:d.T,TextArea:c.T}},o.createElement(t.pre,null,o.createElement(t.code,{className:"language-jsx"},'import { Dialog, Button, TextInput, TextArea } from \'hds-react\';\n\n() => {\n  const customDialogTargetRef = React.useRef(null); // We need to render the dialog into a div inside the Playground component to ensure correct dialog styles in the HDS documentation. The dialog will be rendered into the document body by default.\n  const openCustomDialogButtonRef = React.useRef(null);\n  const [isOpen, setIsOpen] = React.useState(false);\n  const close = () => setIsOpen(false);\n  const titleId = "custom-dialog-title";\n  const descriptionId = "custom-dialog-info";\n  return (\n    <>\n      <div ref={customDialogTargetRef}/>\n      <Button ref={openCustomDialogButtonRef} onClick={() => setIsOpen(true)}>\n        Open Dialog with custom content\n      </Button>\n      <Dialog\n        id="custom-dialog"\n        aria-labelledby={titleId}\n        aria-describedby={descriptionId}\n        isOpen={isOpen}\n        focusAfterCloseRef={openCustomDialogButtonRef}\n        targetElement={customDialogTargetRef.current}\n      >\n      <Dialog.Header\n        id={titleId}\n        title="Add new item"\n      />\n      <Dialog.Content>\n        <p id={descriptionId} className="text-body">\n          Add a new item by filling the information below. All fields are mandatory.\n        </p>\n        <TextInput\n          id="item-name"\n          label="Item name"\n          placeholder="E.g. Item 1"\n          helperText="Item\'s name must be unique."\n          required\n        />\n        <br />\n        <TextArea\n          id="item-description"\n          label="Item description"\n          placeholder="E.g. Item 1 is the first item of the system."\n          required\n        />\n      </Dialog.Content>\n      <Dialog.ActionButtons>\n        <Button\n          onClick={() => {\n            // Add operations here\n            close();\n          }}\n        >\n          Add item\n        </Button>\n        <Button onClick={close} variant="secondary">\n          Cancel\n        </Button>\n      </Dialog.ActionButtons>\n    </Dialog>\n    </>\n  )\n}\n'))),"\n",o.createElement(t.h3,{id:"packages",style:{position:"relative"}},"Packages",o.createElement(t.a,{href:"#packages","aria-label":"packages permalink",className:"header-anchor after"},o.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",o.createElement(t.table,null,o.createElement(t.thead,null,o.createElement(t.tr,null,o.createElement(t.th,null,"Package"),o.createElement(t.th,null,"Included"),o.createElement(t.th,null,"Storybook link"),o.createElement(t.th,null,"Source link"))),o.createElement(t.tbody,null,o.createElement(t.tr,null,o.createElement(t.td,null,o.createElement(t.strong,null,"HDS React")),o.createElement(t.td,null,o.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},o.createElement(m)," Yes ")),o.createElement(t.td,null,o.createElement(p,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-dialog--default"},"View in Storybook")),o.createElement(t.td,null,o.createElement(u.Z,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/blob/master/packages/react/src/components/dialog/Dialog.tsx"},"View source"))),o.createElement(t.tr,null,o.createElement(t.td,null,o.createElement(t.strong,null,"HDS Core")),o.createElement(t.td,null,o.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},o.createElement(g)," No ")),o.createElement(t.td,null,"-"),o.createElement(t.td,null,"-")))),"\n",o.createElement(t.h3,{id:"properties",style:{position:"relative"}},"Properties",o.createElement(t.a,{href:"#properties","aria-label":"properties permalink",className:"header-anchor after"},o.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",o.createElement(t.p,null,"Note! You can find the full list of properties in the ",o.createElement(p,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-dialog--default"},"React Storybook.")),"\n",o.createElement(t.table,null,o.createElement(t.thead,null,o.createElement(t.tr,null,o.createElement(t.th,null,"Property"),o.createElement(t.th,null,"Description"),o.createElement(t.th,null,"Values"),o.createElement(t.th,null,"Default value"))),o.createElement(t.tbody,null,o.createElement(t.tr,null,o.createElement(t.td,null,o.createElement(t.code,null,"isOpen")),o.createElement(t.td,null,"If set to true, the dialog is visible."),o.createElement(t.td,null,o.createElement(t.code,null,"boolean")),o.createElement(t.td,null,"false")),o.createElement(t.tr,null,o.createElement(t.td,null,o.createElement(t.code,null,"focusAfterCloseRef")),o.createElement(t.td,null,"The element ref which will get focus after the dialog is closed."),o.createElement(t.td,null,o.createElement(t.code,null,"RefObject")),o.createElement(t.td,null,"-")),o.createElement(t.tr,null,o.createElement(t.td,null,o.createElement(t.code,null,"focusAfterCloseElement")),o.createElement(t.td,null,"The element which will get focus after the dialog is closed."),o.createElement(t.td,null,o.createElement(t.code,null,"Object")),o.createElement(t.td,null,"-")),o.createElement(t.tr,null,o.createElement(t.td,null,o.createElement(t.code,null,"scrollable")),o.createElement(t.td,null,"If set to true, the dialog content is scrollable if needed. Use only for long text contents."),o.createElement(t.td,null,o.createElement(t.code,null,"boolean")),o.createElement(t.td,null,"false")),o.createElement(t.tr,null,o.createElement(t.td,null,o.createElement(t.code,null,"variant")),o.createElement(t.td,null,"Defines the dialog variant."),o.createElement(t.td,null,"primary, danger"),o.createElement(t.td,null,"primary")),o.createElement(t.tr,null,o.createElement(t.td,null,o.createElement(t.code,null,"close")),o.createElement(t.td,null,"A function called when a dialog close button is pressed. The button if shown if this property exists."),o.createElement(t.td,null,o.createElement(t.code,null,"function")),o.createElement(t.td,null,"-")),o.createElement(t.tr,null,o.createElement(t.td,null,o.createElement(t.code,null,"closeButtonLabelText")),o.createElement(t.td,null,"The aria-label for the close button. Required with ",o.createElement(t.code,null,"close")," property."),o.createElement(t.td,null,o.createElement(t.code,null,"string")),o.createElement(t.td,null,"-")))))}function h(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){return void 0===e&&(e={}),o.createElement(p,e,o.createElement(g,e))}},65958:function(e,t,n){n.r(t);var a=n(11151),o=n(67294),i=n(83428),l=n(57674),r=n(89482),s=(n(18607),n(26127));function d(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,a.ah)(),e.components);return s.Z||c("PageTabs",!1),s.Z.Tab||c("PageTabs.Tab",!0),s.Z.TabList||c("PageTabs.TabList",!0),s.Z.TabPanel||c("PageTabs.TabPanel",!0),o.createElement(o.Fragment,null,o.createElement(t.h1,{id:"dialog",style:{position:"relative"}},"Dialog",o.createElement(t.a,{href:"#dialog","aria-label":"dialog permalink",className:"header-anchor after"},o.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",o.createElement("div",{class:"status-label-description"},o.createElement(i.S,{type:"info"},"Stable"),o.createElement(i.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),o.createElement(l.Z)),"\n",o.createElement(r.Z,null,"Dialogs initiate a conversation between the service and the user. They are used when an input or a confirmation is needed from the user or when important information needs to be conveyed."),"\n",o.createElement(s.Z,{pageContext:e.pageContext},o.createElement(s.Z.TabList,null,o.createElement(s.Z.Tab,{href:"/"},"Usage"),o.createElement(s.Z.Tab,{href:"/code"},"Code"),o.createElement(s.Z.Tab,{href:"/accessibility"},"Accessibility"),o.createElement(s.Z.Tab,{href:"/customisation"},"Customisation")),o.createElement(s.Z.TabPanel,null,e.children)))}function c(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,a.ah)(),e.components);return t?o.createElement(t,e,o.createElement(d,e)):d(e)}},89482:function(e,t,n){var a=n(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:n="var(--fontsize-body-xl)",style:o={},children:i}=e;return a.createElement("p",{style:{fontSize:n,color:t,maxWidth:600,...o}},i)}},26127:function(e,t,n){var a=n(67294),o=n(14160),i=n(94671);const l="PageTabList",r="PageTabPanel",s="PageTab",d=e=>{var t;let{pageContext:n,children:d}=e;const c=n.frontmatter.slug,u=Array.isArray(d)?d:[d],m=u.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===l)),p=u.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===r)),g=null===(t=m.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===s)),h=g.findIndex((e=>c.endsWith(e.props.href))),_=-1===h?0:h,b=0===_?c:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(c);return a.createElement(i.a,{initiallyActiveTab:_},a.createElement(i.a.TabList,{className:"page-tabs-list"},g.map((e=>a.createElement(i.a.Tab,{key:e.props.href,onClick:()=>(0,o.navigate)(""+("/"===e.props.href?b:b+e.props.href))},e.props.children)))),g.map(((e,t)=>a.createElement(i.a.TabPanel,{key:e.props.href},_===t?p.props.children:a.createElement("div",null)))))},c=e=>{let{children:t}=e;return a.createElement(i.a.TabList,null,t)};c.componentName=l;const u=e=>{let{href:t,slug:n,children:o}=e;return a.createElement(i.a.Tab,null,o)};u.componentName=s;const m=e=>{let{children:t}=e;return a.createElement(i.a.TabPanel,null,t)};m.componentName=r,d.TabList=c,d.Tab=u,d.TabPanel=m,t.Z=d},57674:function(e,t,n){var a=n(67294),o=n(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return a.createElement(o.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},a.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>a.createElement("li",{key:t},a.createElement("span",{className:"status-name"},t),a.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-dialog-customisation-mdx-2f40bcfe758a28669b24.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-dialog-customisation-mdx-2f40bcfe758a28669b24.js
new file mode 100644
index 00000000000..3d50acd3b4a
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-dialog-customisation-mdx-2f40bcfe758a28669b24.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[2395,6043],{84014:function(e,t,a){a.d(t,{D:function(){return x}});var o=a(80136),l=a(67294),n=a(73935),i=a(7444),r=a(34300),s=a(97640),d=a(35828),c={"medium-up":"only screen and (min-width:768px)",dialogVisibleBodyWithHiddenScrollbars:"Dialog-module_dialogVisibleBodyWithHiddenScrollbars__3M__P",dialogBackdrop:"Dialog-module_dialogBackdrop__2Pg2X",dialog:"Dialog-module_dialog__2t3d4",dialogContainer:"Dialog-module_dialogContainer__10Y03",danger:"Dialog-module_danger__yTstu",dialogVisible:"Dialog-module_dialogVisible__6zvp4",dialogScrollable:"Dialog-module_dialogScrollable__3W-hK",boxShadow:"Dialog-module_boxShadow__3qt5w"};(0,i.s)(".Dialog-module_dialogVisibleBodyWithHiddenScrollbars__3M__P{overflow:hidden!important}.Dialog-module_dialogBackdrop__2Pg2X{inset:0;position:fixed}.Dialog-module_dialog__2t3d4{background:#fff;box-sizing:border-box;display:flex;flex-direction:column;margin:auto var(--spacing-s);max-width:100%;position:relative;visibility:hidden;z-index:900}.Dialog-module_dialogContainer__10Y03{--accent-line-color:var(--color-bus);--overlay-color:rgba(0,0,0,0.3);align-items:center;display:flex;inset:0;justify-content:center;overflow:auto;-webkit-overflow-scrolling:unset;overscroll-behavior:none;position:fixed;touch-action:none;z-index:800}.Dialog-module_dialogContainer__10Y03 .Dialog-module_dialogBackdrop__2Pg2X{background:var(--overlay-color)}.Dialog-module_dialogContainer__10Y03 .Dialog-module_dialog__2t3d4{border-top:10px solid var(--accent-line-color);width:558px}.Dialog-module_dialogContainer__10Y03 .Dialog-module_dialog__2t3d4.Dialog-module_danger__yTstu{border-top-color:var(--color-error)}.Dialog-module_dialogVisible__6zvp4{visibility:visible!important}.Dialog-module_dialogScrollable__3W-hK{max-height:calc(100% - 4rem);overflow:hidden}@media only screen and (min-width:768px){.Dialog-module_dialog__2t3d4{margin:auto}}.Dialog-module_boxShadow__3qt5w{box-shadow:var(--box-shadow-l)}");(0,i.s)(".DialogActionButtons-module_dialogActionButtons__5m7AC{display:block;padding:var(--spacing-s) var(--spacing-m) var(--spacing-m)}@media only screen and (min-width:768px){.DialogActionButtons-module_dialogActionButtons__5m7AC{padding-left:var(--spacing-l);padding-right:var(--spacing-l)}}.DialogActionButtons-module_dialogActionButtons__5m7AC>*{width:100%}.DialogActionButtons-module_dialogActionButtons__5m7AC>*+*{margin-top:var(--spacing-s)}@media only screen and (min-width:768px){.DialogActionButtons-module_dialogActionButtons__5m7AC{display:flex;flex-wrap:wrap;gap:var(--spacing-s)}.DialogActionButtons-module_dialogActionButtons__5m7AC>*{width:auto}.DialogActionButtons-module_dialogActionButtons__5m7AC>*+*{margin-top:0}}");const u=e=>{let{children:t,className:a}=e;return l.createElement("div",{className:(0,r.c)("DialogActionButtons-module_dialogActionButtons__5m7AC",a)},t)};u.componentName="DialogActionButtons";(0,i.s)('.DialogHeader-module_dialogHeaderClose__36wOz{background:none;border:none;color:inherit;cursor:pointer;font:inherit}.DialogHeader-module_dialogHeader__32Rho{padding-left:var(--spacing-m);padding-right:var(--spacing-m);display:block;padding-bottom:0;padding-top:var(--spacing-m)}@media only screen and (min-width:768px){.DialogHeader-module_dialogHeader__32Rho{padding-left:var(--spacing-l);padding-right:var(--spacing-l)}}.DialogHeader-module_dialogHeaderContent__3K4i2{align-items:flex-start;display:flex;justify-content:space-between;min-height:36px}.DialogHeader-module_dialogTitle__1GeH_{--outline-x-gutter:4px;--outline-y-gutter:2px;--outline-width:3px;align-items:flex-start;box-sizing:border-box;display:flex;font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:.4px;line-height:24px;margin:0;order:0;outline:none;padding-right:var(--spacing-3-xs);position:relative}.DialogHeader-module_dialogTitle__1GeH_:after{border:var(--outline-width) solid transparent;box-sizing:border-box;content:"";display:block;height:100%;left:calc((var(--outline-width) + var(--outline-x-gutter)) * -1);position:absolute;top:calc((var(--outline-width) + var(--outline-y-gutter)) * -1);width:100%}.DialogHeader-module_dialogTitle__1GeH_:focus:after{border-color:var(--color-coat-of-arms);height:calc(100% + (var(--outline-width) + var(--outline-y-gutter)) * 2);width:calc(100% + (var(--outline-width) + var(--outline-x-gutter)) * 2)}.DialogHeader-module_dialogTitle__1GeH_ .DialogHeader-module_dialogTitleLeftIcon__1xWhC{display:inline-flex;margin-right:var(--spacing-2-xs)}.DialogHeader-module_dialogHeaderClose__36wOz{color:var(--dialog-close-button-color);display:block;font-size:0;height:44px;line-height:1;margin-left:var(--spacing-2-xs);margin-top:calc(-1 * var(--spacing-2-xs));min-width:44px;order:1;padding:0;vertical-align:middle}.DialogHeader-module_dialogHeaderClose__36wOz:focus{box-shadow:0 0 0 3px var(--color-coat-of-arms);outline:none;text-decoration:none}@media only screen and (min-width:768px){.DialogHeader-module_dialogHeader__32Rho{padding-bottom:var(--spacing-3-xs)}}');const m=l.createContext({}),g=e=>{let{id:t,title:a,iconLeft:o}=e;const{close:n,closeButtonLabelText:i,isReadyToShowDialog:r}=(0,l.useContext)(m),s=l.useRef();return(0,l.useEffect)((()=>{s&&r&&s.current.focus()}),[s,r]),l.createElement("div",{className:"DialogHeader-module_dialogHeader__32Rho"},l.createElement("div",{className:"DialogHeader-module_dialogHeaderContent__3K4i2"},n&&l.createElement("button",{className:"DialogHeader-module_dialogHeaderClose__36wOz",type:"button","aria-label":i||"Close",onClick:()=>n()},l.createElement(d.I,{"aria-hidden":"true"})),l.createElement("h2",{id:t,tabIndex:-1,className:"DialogHeader-module_dialogTitle__1GeH_",ref:s},o&&l.createElement("span",{className:"DialogHeader-module_dialogTitleLeftIcon__1xWhC","aria-hidden":"true"},o),a)))};g.componentName="DialogHeader";(0,i.s)(".DialogContent-module_dialogContent__rNnIp{padding-left:var(--spacing-m);padding-right:var(--spacing-m);padding-bottom:var(--spacing-2-xs)}@media only screen and (min-width:768px){.DialogContent-module_dialogContent__rNnIp{padding-left:var(--spacing-l);padding-right:var(--spacing-l)}}.DialogContent-module_dialogContentScrollable__1oi2o{border-bottom:1px solid;border-top:1px solid;overflow-y:auto}");const p=e=>{let{id:t,children:a}=e;const{scrollable:o}=(0,l.useContext)(m);return l.createElement("div",{id:t,className:(0,r.c)("DialogContent-module_dialogContent__rNnIp",o&&"DialogContent-module_dialogContentScrollable__1oi2o")},a)};var b,h;p.componentName="DialogContent",(h=b||(b={})).top="top",h.bottom="bottom";const _={tabIndex:0,"aria-hidden":!0},f=(e,t)=>{if(t){const a=(e=>e.querySelectorAll('a, button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select'))(t);a.length&&a[e===b.top?0:a.length-1].focus()}},v=e=>{let{onFocus:t}=e;return l.createElement("div",Object.assign({},_,{onFocus:t}))},y=(e,t)=>{const a=document.createElement("div");return a.className="hds-dialog-tab-barrier",a.tabIndex=_.tabIndex,a["aria-hidden"]=_.tabIndex["aria-hidden"],a.addEventListener("focus",(()=>f(e,t))),e===b.top?document.body.insertBefore(a,document.body.firstChild):document.body.appendChild(a),a},x=e=>{var{boxShadow:t=!1,id:a,isOpen:i,children:d,close:u,closeButtonLabelText:g,focusAfterCloseElement:p,focusAfterCloseRef:h,scrollable:_,variant:x="primary",style:E,theme:D,className:w,targetElement:C}=e,T=(0,o._)(e,["boxShadow","id","isOpen","children","close","closeButtonLabelText","focusAfterCloseElement","focusAfterCloseRef","scrollable","variant","style","theme","className","targetElement"]);const[k,H]=(0,l.useState)(!1),B={isReadyToShowDialog:k,scrollable:_,close:u,closeButtonLabelText:g},S=(0,s.u)(c.dialogContainer,D),L=(0,l.createRef)(),I=(0,l.useRef)(null);(0,l.useEffect)((()=>{if(i&&void 0!==L)return y(b.top,L.current),y(b.bottom,L.current),()=>{document.querySelectorAll(".hds-dialog-tab-barrier").forEach((e=>{e.remove()}))}}),[L,i]);const{"aria-labelledby":A,"aria-describedby":N}=T,R=(0,l.useCallback)((e=>{u&&"Escape"===e.key&&u()}),[u]),P=(0,l.useCallback)((()=>p||h&&h.current),[p,h]);return(0,l.useEffect)((()=>{if(i){const e=window.innerWidth-document.body.offsetWidth;if(e>0){I.current=document.body.style.paddingRight;const t=parseInt(window.getComputedStyle(document.body).paddingRight,10);document.body.style.paddingRight=t+e+"px"}document.body.classList.add(c.dialogVisibleBodyWithHiddenScrollbars),document.documentElement.classList.add(c.dialogVisibleBodyWithHiddenScrollbars),document.addEventListener("keydown",R,!1),H(!0)}return()=>{if(i){H(!1),document.body.classList.remove(c.dialogVisibleBodyWithHiddenScrollbars),document.documentElement.classList.remove(c.dialogVisibleBodyWithHiddenScrollbars),document.removeEventListener("keydown",R,!1),document.body.style.paddingRight=I.current||"";const e=P();e&&e.focus()}}}),[i,P]),i?n.createPortal(l.createElement(m.Provider,{value:B},l.createElement("div",{className:(0,r.c)(c.dialogContainer,S)},l.createElement(v,{onFocus:()=>f(b.bottom,L.current)}),l.createElement("div",{tabIndex:-1,className:c.dialogBackdrop}),l.createElement("div",{ref:L,role:"dialog","aria-modal":"true",id:a,className:(0,r.c)(c.dialog,k&&c.dialogVisible,_&&c.dialogScrollable,c[x],t&&c.boxShadow,w),style:E,"aria-labelledby":A,"aria-describedby":N},d),l.createElement(v,{onFocus:()=>f(b.top,L.current)}))),C||document.body):null};x.Header=g,x.Content=p,x.ActionButtons=u},83428:function(e,t,a){a.d(t,{S:function(){return d}});var o=a(80136),l=a(67294),n=a(7444),i=a(34300),r={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const s=e=>{let{icon:t}=e;return l.createElement("span",{className:r.statusLabelIcon,"aria-hidden":"true"},t)},d=e=>{var{children:t,className:a,dataTestId:n,type:d="neutral",iconLeft:c}=e,u=(0,o._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,i.c)(r.statusLabel,r[d],c&&r.statusLabelWithIcon,a),"data-testid":n},u),c&&l.createElement(s,{icon:c}),t)}},37711:function(e,t,a){a.r(t);var o=a(11151),l=a(67294),n=a(17882),i=a(84014),r=a(70476),s=a(65958);const d=e=>{let{children:t,pageContext:a}=e;return l.createElement(s.default,{pageContext:a},t)};function c(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",p:"p",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",pre:"pre"},(0,o.ah)(),e.components),{Playground:a}=t;return a||function(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Playground",!0),l.createElement(l.Fragment,null,l.createElement(t.h2,{id:"customisation",style:{position:"relative"}},"Customisation",l.createElement(t.a,{href:"#customisation","aria-label":"customisation permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h3,{id:"customisation-properties",style:{position:"relative"}},"Customisation properties",l.createElement(t.a,{href:"#customisation-properties","aria-label":"customisation properties permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"You can use the ",l.createElement(t.code,null,"theme")," property to customise the component. See all available theme variables in the table below."),"\n",l.createElement(t.table,null,l.createElement(t.thead,null,l.createElement(t.tr,null,l.createElement(t.th,null,"Theme variable"),l.createElement(t.th,null,"Description"))),l.createElement(t.tbody,null,l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"--accent-line-color")),l.createElement(t.td,null,"Color of the dialog accent line")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"--overlay-color")),l.createElement(t.td,null,"Color of the dialog overlay")))),"\n",l.createElement(t.h3,{id:"customisation-example",style:{position:"relative"}},"Customisation example",l.createElement(t.a,{href:"#customisation-example","aria-label":"customisation example permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a,{scope:{Button:n.B,Dialog:i.D,IconInfoCircle:r.a5}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},"import { Button, Dialog, IconInfoCircle } from 'hds-react';\n\n() => {\n  const dialogTargetRef = React.useRef(null); // We need to render the dialog into a div inside the Playground component to ensure correct dialog styles in the HDS documentation. The dialog will be rendered into the document body by default.\n  const openInfoDialogButtonRef = React.useRef(null);\n  const [isOpen, setIsOpen] = React.useState(false);\n  const close = () => setIsOpen(false);\n  const titleId = 'info-dialog-title';\n  const descriptionId = 'info-dialog-content';\n  return (\n    <>\n      <div ref={dialogTargetRef} />\n      <Button ref={openInfoDialogButtonRef} onClick={() => setIsOpen(true)}>\n        Open Info dialog\n      </Button>\n      <Dialog\n        id=\"info-dialog\"\n        aria-labelledby={titleId}\n        aria-describedby={descriptionId}\n        isOpen={isOpen}\n        close={close}\n        closeButtonLabelText=\"Close info dialog\"\n        focusAfterCloseRef={openInfoDialogButtonRef}\n        targetElement={dialogTargetRef.current}\n        theme={{\n          '--accent-line-color': 'var(--color-tram)',\n          '--overlay-color': 'rgba(0, 0, 0, 0.7)'\n        }}\n      >\n        <Dialog.Header\n          id={titleId}\n          title=\"Terms of service have changed\"\n          iconLeft={<IconInfoCircle aria-hidden=\"true\" />}\n        />\n        <Dialog.Content>\n          <p id={descriptionId} className=\"text-body\">\n            Please note that the terms of this service have changed. You can review the changes in the user settings.\n          </p>\n        </Dialog.Content>\n        <Dialog.ActionButtons>\n          <Button onClick={close}>Close</Button>\n        </Dialog.ActionButtons>\n      </Dialog>\n    </>\n  )\n}\n"))))}t.default=function(e){return void 0===e&&(e={}),l.createElement(d,e,l.createElement(c,e))}},65958:function(e,t,a){a.r(t);var o=a(11151),l=a(67294),n=a(83428),i=a(57674),r=a(89482),s=(a(18607),a(26127));function d(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,o.ah)(),e.components);return s.Z||c("PageTabs",!1),s.Z.Tab||c("PageTabs.Tab",!0),s.Z.TabList||c("PageTabs.TabList",!0),s.Z.TabPanel||c("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"dialog",style:{position:"relative"}},"Dialog",l.createElement(t.a,{href:"#dialog","aria-label":"dialog permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(n.S,{type:"info"},"Stable"),l.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(i.Z)),"\n",l.createElement(r.Z,null,"Dialogs initiate a conversation between the service and the user. They are used when an input or a confirmation is needed from the user or when important information needs to be conveyed."),"\n",l.createElement(s.Z,{pageContext:e.pageContext},l.createElement(s.Z.TabList,null,l.createElement(s.Z.Tab,{href:"/"},"Usage"),l.createElement(s.Z.Tab,{href:"/code"},"Code"),l.createElement(s.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(s.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(s.Z.TabPanel,null,e.children)))}function c(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,o.ah)(),e.components);return t?l.createElement(t,e,l.createElement(d,e)):d(e)}},89482:function(e,t,a){var o=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:l={},children:n}=e;return o.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...l}},n)}},26127:function(e,t,a){var o=a(67294),l=a(14160),n=a(94671);const i="PageTabList",r="PageTabPanel",s="PageTab",d=e=>{var t;let{pageContext:a,children:d}=e;const c=a.frontmatter.slug,u=Array.isArray(d)?d:[d],m=u.find((e=>(0,o.isValidElement)(e)&&e.type.componentName===i)),g=u.find((e=>(0,o.isValidElement)(e)&&e.type.componentName===r)),p=null===(t=m.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===s)),b=p.findIndex((e=>c.endsWith(e.props.href))),h=-1===b?0:b,_=0===h?c:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(c);return o.createElement(n.a,{initiallyActiveTab:h},o.createElement(n.a.TabList,{className:"page-tabs-list"},p.map((e=>o.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?_:_+e.props.href))},e.props.children)))),p.map(((e,t)=>o.createElement(n.a.TabPanel,{key:e.props.href},h===t?g.props.children:o.createElement("div",null)))))},c=e=>{let{children:t}=e;return o.createElement(n.a.TabList,null,t)};c.componentName=i;const u=e=>{let{href:t,slug:a,children:l}=e;return o.createElement(n.a.Tab,null,l)};u.componentName=s;const m=e=>{let{children:t}=e;return o.createElement(n.a.TabPanel,null,t)};m.componentName=r,d.TabList=c,d.Tab=u,d.TabPanel=m,t.Z=d},57674:function(e,t,a){var o=a(67294),l=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return o.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},o.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>o.createElement("li",{key:t},o.createElement("span",{className:"status-name"},t),o.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-dialog-index-mdx-ecb967e43f7048fb128d.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-dialog-index-mdx-ecb967e43f7048fb128d.js
new file mode 100644
index 00000000000..0e107ee9c2c
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-dialog-index-mdx-ecb967e43f7048fb128d.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[7056,6043],{84014:function(e,t,a){a.d(t,{D:function(){return y}});var n=a(80136),i=a(67294),l=a(73935),o=a(7444),r=a(34300),s=a(97640),d=a(35828),c={"medium-up":"only screen and (min-width:768px)",dialogVisibleBodyWithHiddenScrollbars:"Dialog-module_dialogVisibleBodyWithHiddenScrollbars__3M__P",dialogBackdrop:"Dialog-module_dialogBackdrop__2Pg2X",dialog:"Dialog-module_dialog__2t3d4",dialogContainer:"Dialog-module_dialogContainer__10Y03",danger:"Dialog-module_danger__yTstu",dialogVisible:"Dialog-module_dialogVisible__6zvp4",dialogScrollable:"Dialog-module_dialogScrollable__3W-hK",boxShadow:"Dialog-module_boxShadow__3qt5w"};(0,o.s)(".Dialog-module_dialogVisibleBodyWithHiddenScrollbars__3M__P{overflow:hidden!important}.Dialog-module_dialogBackdrop__2Pg2X{inset:0;position:fixed}.Dialog-module_dialog__2t3d4{background:#fff;box-sizing:border-box;display:flex;flex-direction:column;margin:auto var(--spacing-s);max-width:100%;position:relative;visibility:hidden;z-index:900}.Dialog-module_dialogContainer__10Y03{--accent-line-color:var(--color-bus);--overlay-color:rgba(0,0,0,0.3);align-items:center;display:flex;inset:0;justify-content:center;overflow:auto;-webkit-overflow-scrolling:unset;overscroll-behavior:none;position:fixed;touch-action:none;z-index:800}.Dialog-module_dialogContainer__10Y03 .Dialog-module_dialogBackdrop__2Pg2X{background:var(--overlay-color)}.Dialog-module_dialogContainer__10Y03 .Dialog-module_dialog__2t3d4{border-top:10px solid var(--accent-line-color);width:558px}.Dialog-module_dialogContainer__10Y03 .Dialog-module_dialog__2t3d4.Dialog-module_danger__yTstu{border-top-color:var(--color-error)}.Dialog-module_dialogVisible__6zvp4{visibility:visible!important}.Dialog-module_dialogScrollable__3W-hK{max-height:calc(100% - 4rem);overflow:hidden}@media only screen and (min-width:768px){.Dialog-module_dialog__2t3d4{margin:auto}}.Dialog-module_boxShadow__3qt5w{box-shadow:var(--box-shadow-l)}");(0,o.s)(".DialogActionButtons-module_dialogActionButtons__5m7AC{display:block;padding:var(--spacing-s) var(--spacing-m) var(--spacing-m)}@media only screen and (min-width:768px){.DialogActionButtons-module_dialogActionButtons__5m7AC{padding-left:var(--spacing-l);padding-right:var(--spacing-l)}}.DialogActionButtons-module_dialogActionButtons__5m7AC>*{width:100%}.DialogActionButtons-module_dialogActionButtons__5m7AC>*+*{margin-top:var(--spacing-s)}@media only screen and (min-width:768px){.DialogActionButtons-module_dialogActionButtons__5m7AC{display:flex;flex-wrap:wrap;gap:var(--spacing-s)}.DialogActionButtons-module_dialogActionButtons__5m7AC>*{width:auto}.DialogActionButtons-module_dialogActionButtons__5m7AC>*+*{margin-top:0}}");const u=e=>{let{children:t,className:a}=e;return i.createElement("div",{className:(0,r.c)("DialogActionButtons-module_dialogActionButtons__5m7AC",a)},t)};u.componentName="DialogActionButtons";(0,o.s)('.DialogHeader-module_dialogHeaderClose__36wOz{background:none;border:none;color:inherit;cursor:pointer;font:inherit}.DialogHeader-module_dialogHeader__32Rho{padding-left:var(--spacing-m);padding-right:var(--spacing-m);display:block;padding-bottom:0;padding-top:var(--spacing-m)}@media only screen and (min-width:768px){.DialogHeader-module_dialogHeader__32Rho{padding-left:var(--spacing-l);padding-right:var(--spacing-l)}}.DialogHeader-module_dialogHeaderContent__3K4i2{align-items:flex-start;display:flex;justify-content:space-between;min-height:36px}.DialogHeader-module_dialogTitle__1GeH_{--outline-x-gutter:4px;--outline-y-gutter:2px;--outline-width:3px;align-items:flex-start;box-sizing:border-box;display:flex;font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:.4px;line-height:24px;margin:0;order:0;outline:none;padding-right:var(--spacing-3-xs);position:relative}.DialogHeader-module_dialogTitle__1GeH_:after{border:var(--outline-width) solid transparent;box-sizing:border-box;content:"";display:block;height:100%;left:calc((var(--outline-width) + var(--outline-x-gutter)) * -1);position:absolute;top:calc((var(--outline-width) + var(--outline-y-gutter)) * -1);width:100%}.DialogHeader-module_dialogTitle__1GeH_:focus:after{border-color:var(--color-coat-of-arms);height:calc(100% + (var(--outline-width) + var(--outline-y-gutter)) * 2);width:calc(100% + (var(--outline-width) + var(--outline-x-gutter)) * 2)}.DialogHeader-module_dialogTitle__1GeH_ .DialogHeader-module_dialogTitleLeftIcon__1xWhC{display:inline-flex;margin-right:var(--spacing-2-xs)}.DialogHeader-module_dialogHeaderClose__36wOz{color:var(--dialog-close-button-color);display:block;font-size:0;height:44px;line-height:1;margin-left:var(--spacing-2-xs);margin-top:calc(-1 * var(--spacing-2-xs));min-width:44px;order:1;padding:0;vertical-align:middle}.DialogHeader-module_dialogHeaderClose__36wOz:focus{box-shadow:0 0 0 3px var(--color-coat-of-arms);outline:none;text-decoration:none}@media only screen and (min-width:768px){.DialogHeader-module_dialogHeader__32Rho{padding-bottom:var(--spacing-3-xs)}}');const m=i.createContext({}),g=e=>{let{id:t,title:a,iconLeft:n}=e;const{close:l,closeButtonLabelText:o,isReadyToShowDialog:r}=(0,i.useContext)(m),s=i.useRef();return(0,i.useEffect)((()=>{s&&r&&s.current.focus()}),[s,r]),i.createElement("div",{className:"DialogHeader-module_dialogHeader__32Rho"},i.createElement("div",{className:"DialogHeader-module_dialogHeaderContent__3K4i2"},l&&i.createElement("button",{className:"DialogHeader-module_dialogHeaderClose__36wOz",type:"button","aria-label":o||"Close",onClick:()=>l()},i.createElement(d.I,{"aria-hidden":"true"})),i.createElement("h2",{id:t,tabIndex:-1,className:"DialogHeader-module_dialogTitle__1GeH_",ref:s},n&&i.createElement("span",{className:"DialogHeader-module_dialogTitleLeftIcon__1xWhC","aria-hidden":"true"},n),a)))};g.componentName="DialogHeader";(0,o.s)(".DialogContent-module_dialogContent__rNnIp{padding-left:var(--spacing-m);padding-right:var(--spacing-m);padding-bottom:var(--spacing-2-xs)}@media only screen and (min-width:768px){.DialogContent-module_dialogContent__rNnIp{padding-left:var(--spacing-l);padding-right:var(--spacing-l)}}.DialogContent-module_dialogContentScrollable__1oi2o{border-bottom:1px solid;border-top:1px solid;overflow-y:auto}");const p=e=>{let{id:t,children:a}=e;const{scrollable:n}=(0,i.useContext)(m);return i.createElement("div",{id:t,className:(0,r.c)("DialogContent-module_dialogContent__rNnIp",n&&"DialogContent-module_dialogContentScrollable__1oi2o")},a)};var h,b;p.componentName="DialogContent",(b=h||(h={})).top="top",b.bottom="bottom";const f={tabIndex:0,"aria-hidden":!0},v=(e,t)=>{if(t){const a=(e=>e.querySelectorAll('a, button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select'))(t);a.length&&a[e===h.top?0:a.length-1].focus()}},_=e=>{let{onFocus:t}=e;return i.createElement("div",Object.assign({},f,{onFocus:t}))},E=(e,t)=>{const a=document.createElement("div");return a.className="hds-dialog-tab-barrier",a.tabIndex=f.tabIndex,a["aria-hidden"]=f.tabIndex["aria-hidden"],a.addEventListener("focus",(()=>v(e,t))),e===h.top?document.body.insertBefore(a,document.body.firstChild):document.body.appendChild(a),a},y=e=>{var{boxShadow:t=!1,id:a,isOpen:o,children:d,close:u,closeButtonLabelText:g,focusAfterCloseElement:p,focusAfterCloseRef:b,scrollable:f,variant:y="primary",style:x,theme:q,className:w,targetElement:D}=e,C=(0,n._)(e,["boxShadow","id","isOpen","children","close","closeButtonLabelText","focusAfterCloseElement","focusAfterCloseRef","scrollable","variant","style","theme","className","targetElement"]);const[k,T]=(0,i.useState)(!1),S={isReadyToShowDialog:k,scrollable:f,close:u,closeButtonLabelText:g},H=(0,s.u)(c.dialogContainer,q),N=(0,i.createRef)(),L=(0,i.useRef)(null);(0,i.useEffect)((()=>{if(o&&void 0!==N)return E(h.top,N.current),E(h.bottom,N.current),()=>{document.querySelectorAll(".hds-dialog-tab-barrier").forEach((e=>{e.remove()}))}}),[N,o]);const{"aria-labelledby":B,"aria-describedby":A}=C,I=(0,i.useCallback)((e=>{u&&"Escape"===e.key&&u()}),[u]),z=(0,i.useCallback)((()=>p||b&&b.current),[p,b]);return(0,i.useEffect)((()=>{if(o){const e=window.innerWidth-document.body.offsetWidth;if(e>0){L.current=document.body.style.paddingRight;const t=parseInt(window.getComputedStyle(document.body).paddingRight,10);document.body.style.paddingRight=t+e+"px"}document.body.classList.add(c.dialogVisibleBodyWithHiddenScrollbars),document.documentElement.classList.add(c.dialogVisibleBodyWithHiddenScrollbars),document.addEventListener("keydown",I,!1),T(!0)}return()=>{if(o){T(!1),document.body.classList.remove(c.dialogVisibleBodyWithHiddenScrollbars),document.documentElement.classList.remove(c.dialogVisibleBodyWithHiddenScrollbars),document.removeEventListener("keydown",I,!1),document.body.style.paddingRight=L.current||"";const e=z();e&&e.focus()}}}),[o,z]),o?l.createPortal(i.createElement(m.Provider,{value:S},i.createElement("div",{className:(0,r.c)(c.dialogContainer,H)},i.createElement(_,{onFocus:()=>v(h.bottom,N.current)}),i.createElement("div",{tabIndex:-1,className:c.dialogBackdrop}),i.createElement("div",{ref:N,role:"dialog","aria-modal":"true",id:a,className:(0,r.c)(c.dialog,k&&c.dialogVisible,f&&c.dialogScrollable,c[y],t&&c.boxShadow,w),style:x,"aria-labelledby":B,"aria-describedby":A},d),i.createElement(_,{onFocus:()=>v(h.top,N.current)}))),D||document.body):null};y.Header=g,y.Content=p,y.ActionButtons=u},83428:function(e,t,a){a.d(t,{S:function(){return d}});var n=a(80136),i=a(67294),l=a(7444),o=a(34300),r={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,l.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const s=e=>{let{icon:t}=e;return i.createElement("span",{className:r.statusLabelIcon,"aria-hidden":"true"},t)},d=e=>{var{children:t,className:a,dataTestId:l,type:d="neutral",iconLeft:c}=e,u=(0,n._)(e,["children","className","dataTestId","type","iconLeft"]);return i.createElement("span",Object.assign({className:(0,o.c)(r.statusLabel,r[d],c&&r.statusLabelWithIcon,a),"data-testid":l},u),c&&i.createElement(s,{icon:c}),t)}},1542:function(e,t,a){a.r(t),a.d(t,{ConfirmDialogExample:function(){return g},DangerDialogExample:function(){return p},DialogExample:function(){return u},InfoDialogExample:function(){return m},ScrollableDialogExample:function(){return h}});var n=a(11151),i=a(67294),l=a(17882),o=a(84014),r=a(70476),s=a(89836),d=a(65958);const c=e=>{let{children:t,pageContext:a}=e;return i.createElement(d.default,{pageContext:a},t)},u=()=>{const e=Object.assign({div:"div",p:"p"},(0,n.ah)()),t=i.useRef(null),a=i.useRef(null),[s,d]=i.useState(!1),c=()=>d(!1),u="info-dialog-title",m="info-dialog-content";return i.createElement(i.Fragment,null,i.createElement(e.div,{ref:t}),i.createElement(l.B,{ref:a,onClick:()=>d(!0)},"Open Info dialog"),i.createElement(o.D,{id:"info-dialog","aria-labelledby":u,"aria-describedby":m,isOpen:s,close:c,closeButtonLabelText:"Close info dialog",focusAfterCloseRef:a,targetElement:t.current},i.createElement(o.D.Header,{id:u,title:"Terms of service have changed",iconLeft:i.createElement(r.a5,{"aria-hidden":"true"})}),i.createElement(o.D.Content,null,i.createElement(e.p,{id:m,className:"text-body"},"Please note that the terms of this service have changed. You can review the changes in the user settings.")),i.createElement(o.D.ActionButtons,null,i.createElement(l.B,{onClick:c},"Close"))))},m=()=>{const e=Object.assign({p:"p"},(0,n.ah)()),t=i.useRef(null),[a,s]=i.useState(!1),d=()=>s(!1),c="info-dialog-title",u="info-dialog-content";return i.createElement(i.Fragment,null,i.createElement(l.B,{ref:t,onClick:()=>s(!0)},"Open Info dialog"),i.createElement(o.D,{id:"info-dialog","aria-labelledby":c,"aria-describedby":u,isOpen:a,close:d,closeButtonLabelText:"Close info dialog",focusAfterCloseRef:t},i.createElement(o.D.Header,{id:c,title:"Terms of service have changed",iconLeft:i.createElement(r.a5,{"aria-hidden":"true"})}),i.createElement(o.D.Content,null,i.createElement(e.p,{id:u,className:"text-body"},"Please note that the terms of this service have changed. You can review the changes in the user settings.")),i.createElement(o.D.ActionButtons,null,i.createElement(l.B,{onClick:d},"Close"))))},g=()=>{const e=Object.assign({p:"p"},(0,n.ah)()),t=i.useRef(null),[a,r]=i.useState(!1),d=()=>r(!1),c="confirmation-dialog-title",u="confirmation-dialog-info";return i.createElement(i.Fragment,null,i.createElement(l.B,{ref:t,onClick:()=>r(!0)},"Open Confirmation dialog"),i.createElement(o.D,{id:"confirmation-dialog","aria-labelledby":c,"aria-describedby":u,isOpen:a,focusAfterCloseRef:t},i.createElement(o.D.Header,{id:c,title:"Are you sure you want to continue?",iconLeft:i.createElement(s.I,{"aria-hidden":"true"})}),i.createElement(o.D.Content,null,i.createElement(e.p,{id:u,className:"text-body"},"You have not filled all form fields. Do you still want to continue? You can later return to edit this form. Saved forms can be accessed in your personal profile.")),i.createElement(o.D.ActionButtons,null,i.createElement(l.B,{onClick:d},"Continue"),i.createElement(l.B,{onClick:d,variant:"secondary"},"Cancel"))))},p=()=>{const e=Object.assign({p:"p"},(0,n.ah)()),t=i.useRef(null),[a,s]=i.useState(!1),d=()=>s(!1),c="delete-dialog-title",u="delete-dialog-info";return i.createElement(i.Fragment,null,i.createElement(l.B,{ref:t,onClick:()=>s(!0)},"Open Delete dialog"),i.createElement(o.D,{variant:"danger",id:"delete-dialog","aria-labelledby":c,"aria-describedby":u,isOpen:a,focusAfterCloseRef:t},i.createElement(o.D.Header,{id:c,title:"Are you sure you want to delete this blog post?",iconLeft:i.createElement(r.I,{"aria-hidden":"true"})}),i.createElement(o.D.Content,null,i.createElement(e.p,{id:u,className:"text-body"},"The blog post will be deleted immediately. Deletion is permanent and it cannot be reverted.")),i.createElement(o.D.ActionButtons,null,i.createElement(l.B,{onClick:d,theme:"black",variant:"secondary"},"Cancel"),i.createElement(l.B,{variant:"danger",iconLeft:i.createElement(r.bg,{"aria-hidden":"true"}),onClick:()=>{d()}},"Delete the blog post"))))},h=()=>{const e=Object.assign({div:"div",h3:"h3",p:"p"},(0,n.ah)()),t=i.useRef(null),a=i.useRef(null),[s,d]=i.useState(!1),c=()=>d(!1),u="terms-dialog-title",m="terms-dialog-info";return i.createElement(i.Fragment,null,i.createElement(e.div,{ref:t}),i.createElement(l.B,{ref:a,onClick:()=>d(!0)},"Open Terms dialog"),i.createElement(o.D,{id:"terms-dialog","aria-labelledby":u,"aria-describedby":m,isOpen:s,focusAfterCloseRef:a,targetElement:t.current,scrollable:!0},i.createElement(o.D.Header,{id:u,title:"Do you accept the terms of service?",iconLeft:i.createElement(r.I,{"aria-hidden":"true"})}),i.createElement(o.D.Content,null,i.createElement(e.h3,{id:m},"Terms of service"),i.createElement(e.p,{className:"text-body"},"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"),i.createElement(e.p,{className:"text-body"},"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"),i.createElement(e.p,{className:"text-body"},"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"),i.createElement(e.p,{className:"text-body"},"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"),i.createElement(e.p,{className:"text-body"},"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?")),i.createElement(o.D.ActionButtons,null,i.createElement(l.B,{onClick:c},"Accept terms"),i.createElement(l.B,{onClick:c,variant:"secondary"},"Cancel"))))};function b(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",strong:"strong",h4:"h4",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",p:"p"},(0,n.ah)(),e.components),{PlaygroundPreview:a,InternalLink:l}=t;return l||f("InternalLink",!0),a||f("PlaygroundPreview",!0),i.createElement(i.Fragment,null,i.createElement(t.h2,{id:"usage",style:{position:"relative"}},"Usage",i.createElement(t.a,{href:"#usage","aria-label":"usage permalink",className:"header-anchor after"},i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",i.createElement(t.h3,{id:"example",style:{position:"relative"}},"Example",i.createElement(t.a,{href:"#example","aria-label":"example permalink",className:"header-anchor after"},i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n","\n",i.createElement(a,null,i.createElement(u)),"\n",i.createElement(t.h3,{id:"principles",style:{position:"relative"}},"Principles",i.createElement(t.a,{href:"#principles","aria-label":"principles permalink",className:"header-anchor after"},i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",i.createElement(t.ul,null,"\n",i.createElement(t.li,null,"Dialogs capture the browser focus and the user is forced to react to the dialog.","\n",i.createElement(t.ul,null,"\n",i.createElement(t.li,null,"To emphasize this, a dark screen overlay must be used to cover the view content behind the dialog element."),"\n"),"\n"),"\n",i.createElement(t.li,null,i.createElement(t.strong,null,"Dialogs are a very intrusive pattern and they should only be used when the immediate actions or focus from the user are needed.")),"\n",i.createElement(t.li,null,'Be careful when including a separate close ("x") icon in the dialog. If there are more than one action available in the dialog, it can be ambiguous for the user which action is triggered when the close icon is pressed.',"\n",i.createElement(t.ul,null,"\n",i.createElement(t.li,null,"Generally, it is a good practise to omit the close icon if the dialog has more than one action available."),"\n"),"\n"),"\n",i.createElement(t.li,null,"If your dialog contains form elements, follow ",i.createElement(l,{href:"/patterns/forms/form-building"},"HDS form")," and ",i.createElement(l,{href:"/patterns/forms/form-validation"},"form validation patterns")," similarly as you would in a regular forms."),"\n",i.createElement(t.li,null,"As dialogs always contain buttons, pay close attention that the button labels describe the action it is going to trigger. You can read more information about this in the ",i.createElement(l,{href:"/components/buttons"},"HDS Button documentation page."),"\n",i.createElement(t.ul,null,"\n",i.createElement(t.li,null,"Following the same guidelines as the HDS Form pattern, dialog action buttons are placed at the left side of the dialog and the primary action will be the first one from the left."),"\n",i.createElement(t.li,null,"If some of the actions are destructive or irreversible, the button order should be reversed so so that the destructive actions are last in the button list. See ",i.createElement(t.a,{href:"#danger-dialog"},"Danger dialog example")," for more information."),"\n"),"\n"),"\n",i.createElement(t.li,null,"Opening a dialog should be always triggered by the user. Do not open dialogs without user action.","\n",i.createElement(t.ul,null,"\n",i.createElement(t.li,null,"Also make sure that the dialog is related to the current context."),"\n",i.createElement(t.li,null,"It is not recommended to open dialogs on top of other dialogs. However, this is supported by HDS Dialogs if it is needed."),"\n"),"\n"),"\n"),"\n",i.createElement(t.h4,{id:"when-to-use-each-dialog-type",style:{position:"relative"}},"When to use each dialog type?",i.createElement(t.a,{href:"#when-to-use-each-dialog-type","aria-label":"when to use each dialog type permalink",className:"header-anchor after"},i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",i.createElement(t.table,null,i.createElement(t.thead,null,i.createElement(t.tr,null,i.createElement(t.th,null,"Type"),i.createElement(t.th,null,"When to use it?"),i.createElement(t.th,null,"Example"))),i.createElement(t.tbody,null,i.createElement(t.tr,null,i.createElement(t.td,null,i.createElement(t.a,{href:"#info-dialog"},"Info")),i.createElement(t.td,null,"Important information needs to be conveyed to the user. Only requires acknowledgment and no choices from the user."),i.createElement(t.td,null,"Informing the user about changed terms of use.")),i.createElement(t.tr,null,i.createElement(t.td,null,i.createElement(t.a,{href:"#confirm-dialog"},"Confirm")),i.createElement(t.td,null,"An action is required from the user."),i.createElement(t.td,null,"Confirming that the user wants to continue even though all form fields are not filled.")),i.createElement(t.tr,null,i.createElement(t.td,null,i.createElement(t.a,{href:"#danger-dialog"},"Danger")),i.createElement(t.td,null,"An action is required from the user while ",i.createElement(t.strong,null,"the action results are destructive"),"."),i.createElement(t.td,null,"Confirming that the user wants to delete a blog post.")))),"\n",i.createElement(t.h3,{id:"variations",style:{position:"relative"}},"Variations",i.createElement(t.a,{href:"#variations","aria-label":"variations permalink",className:"header-anchor after"},i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",i.createElement(t.h4,{id:"info-dialog",style:{position:"relative"}},"Info dialog",i.createElement(t.a,{href:"#info-dialog","aria-label":"info dialog permalink",className:"header-anchor after"},i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",i.createElement(t.p,null,"Info dialogs are used to convey important information to the user. Info dialogs only include one button which the user can use to acknowledge the information."),"\n","\n",i.createElement(a,null,i.createElement(m)),"\n",i.createElement(t.h4,{id:"confirm-dialog",style:{position:"relative"}},"Confirm dialog",i.createElement(t.a,{href:"#confirm-dialog","aria-label":"confirm dialog permalink",className:"header-anchor after"},i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",i.createElement(t.p,null,"Confirm dialogs are used when an action is required from the user. Confirm dialogs always include at least two actions; one primary action (e.g. Confirm) and one secondary action (e.g. Cancel). However, more than two actions are allowed if it is needed."),"\n","\n",i.createElement(a,null,i.createElement(g)),"\n",i.createElement(t.h4,{id:"danger-dialog",style:{position:"relative"}},"Danger dialog",i.createElement(t.a,{href:"#danger-dialog","aria-label":"danger dialog permalink",className:"header-anchor after"},i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",i.createElement(t.p,null,"Danger dialog is a variant of a confirm dialog. They are used in similar use cases but Danger dialogs are meant for situations where the action user is going to choose may be destructive or otherwise irreversible or very critical. Danger dialog emphasizes this by using HDS error status colours. Also, it reverses the action button order so that the destructive action is last in the button list."),"\n","\n",i.createElement(a,null,i.createElement(p)),"\n",i.createElement(t.h4,{id:"scrollable-dialog",style:{position:"relative"}},"Scrollable dialog",i.createElement(t.a,{href:"#scrollable-dialog","aria-label":"scrollable dialog permalink",className:"header-anchor after"},i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",i.createElement(t.p,null,"While not recommended, HDS supports scrollable dialogs if there is a large amount of content (e.g. terms of use). ",i.createElement(t.strong,null,"It is recommended to consider other options than a dialog to present the same data since it can be difficult for the user to form a clear understanding of the presented content.")),"\n","\n",i.createElement(a,null,i.createElement(h)))}function f(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){return void 0===e&&(e={}),i.createElement(c,e,i.createElement(b,e))}},65958:function(e,t,a){a.r(t);var n=a(11151),i=a(67294),l=a(83428),o=a(57674),r=a(89482),s=(a(18607),a(26127));function d(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,n.ah)(),e.components);return s.Z||c("PageTabs",!1),s.Z.Tab||c("PageTabs.Tab",!0),s.Z.TabList||c("PageTabs.TabList",!0),s.Z.TabPanel||c("PageTabs.TabPanel",!0),i.createElement(i.Fragment,null,i.createElement(t.h1,{id:"dialog",style:{position:"relative"}},"Dialog",i.createElement(t.a,{href:"#dialog","aria-label":"dialog permalink",className:"header-anchor after"},i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",i.createElement("div",{class:"status-label-description"},i.createElement(l.S,{type:"info"},"Stable"),i.createElement(l.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),i.createElement(o.Z)),"\n",i.createElement(r.Z,null,"Dialogs initiate a conversation between the service and the user. They are used when an input or a confirmation is needed from the user or when important information needs to be conveyed."),"\n",i.createElement(s.Z,{pageContext:e.pageContext},i.createElement(s.Z.TabList,null,i.createElement(s.Z.Tab,{href:"/"},"Usage"),i.createElement(s.Z.Tab,{href:"/code"},"Code"),i.createElement(s.Z.Tab,{href:"/accessibility"},"Accessibility"),i.createElement(s.Z.Tab,{href:"/customisation"},"Customisation")),i.createElement(s.Z.TabPanel,null,e.children)))}function c(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,n.ah)(),e.components);return t?i.createElement(t,e,i.createElement(d,e)):d(e)}},89482:function(e,t,a){var n=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:i={},children:l}=e;return n.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...i}},l)}},26127:function(e,t,a){var n=a(67294),i=a(14160),l=a(94671);const o="PageTabList",r="PageTabPanel",s="PageTab",d=e=>{var t;let{pageContext:a,children:d}=e;const c=a.frontmatter.slug,u=Array.isArray(d)?d:[d],m=u.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===o)),g=u.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===r)),p=null===(t=m.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===s)),h=p.findIndex((e=>c.endsWith(e.props.href))),b=-1===h?0:h,f=0===b?c:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(c);return n.createElement(l.a,{initiallyActiveTab:b},n.createElement(l.a.TabList,{className:"page-tabs-list"},p.map((e=>n.createElement(l.a.Tab,{key:e.props.href,onClick:()=>(0,i.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),p.map(((e,t)=>n.createElement(l.a.TabPanel,{key:e.props.href},b===t?g.props.children:n.createElement("div",null)))))},c=e=>{let{children:t}=e;return n.createElement(l.a.TabList,null,t)};c.componentName=o;const u=e=>{let{href:t,slug:a,children:i}=e;return n.createElement(l.a.Tab,null,i)};u.componentName=s;const m=e=>{let{children:t}=e;return n.createElement(l.a.TabPanel,null,t)};m.componentName=r,d.TabList=c,d.Tab=u,d.TabPanel=m,t.Z=d},57674:function(e,t,a){var n=a(67294),i=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return n.createElement(i.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},n.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>n.createElement("li",{key:t},n.createElement("span",{className:"status-name"},t),n.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-dialog-tabs-mdx-72a4bd9691e003de9e05.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-dialog-tabs-mdx-72a4bd9691e003de9e05.js
new file mode 100644
index 00000000000..2aca00f7f4c
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-dialog-tabs-mdx-72a4bd9691e003de9e05.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[6043],{83428:function(e,a,t){t.d(a,{S:function(){return c}});var s=t(80136),l=t(67294),n=t(7444),r=t(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const i=e=>{let{icon:a}=e;return l.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},a)},c=e=>{var{children:a,className:t,dataTestId:n,type:c="neutral",iconLeft:u}=e,b=(0,s._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(o.statusLabel,o[c],u&&o.statusLabelWithIcon,t),"data-testid":n},b),u&&l.createElement(i,{icon:u}),a)}},65958:function(e,a,t){t.r(a);var s=t(11151),l=t(67294),n=t(83428),r=t(57674),o=t(89482),i=(t(18607),t(26127));function c(e){const a=Object.assign({h1:"h1",a:"a",span:"span"},(0,s.ah)(),e.components);return i.Z||u("PageTabs",!1),i.Z.Tab||u("PageTabs.Tab",!0),i.Z.TabList||u("PageTabs.TabList",!0),i.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(a.h1,{id:"dialog",style:{position:"relative"}},"Dialog",l.createElement(a.a,{href:"#dialog","aria-label":"dialog permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(n.S,{type:"info"},"Stable"),l.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(o.Z,null,"Dialogs initiate a conversation between the service and the user. They are used when an input or a confirmation is needed from the user or when important information needs to be conveyed."),"\n",l.createElement(i.Z,{pageContext:e.pageContext},l.createElement(i.Z.TabList,null,l.createElement(i.Z.Tab,{href:"/"},"Usage"),l.createElement(i.Z.Tab,{href:"/code"},"Code"),l.createElement(i.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(i.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(i.Z.TabPanel,null,e.children)))}function u(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,s.ah)(),e.components);return a?l.createElement(a,e,l.createElement(c,e)):c(e)}},89482:function(e,a,t){var s=t(67294);a.Z=e=>{let{color:a="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:l={},children:n}=e;return s.createElement("p",{style:{fontSize:t,color:a,maxWidth:600,...l}},n)}},26127:function(e,a,t){var s=t(67294),l=t(14160),n=t(94671);const r="PageTabList",o="PageTabPanel",i="PageTab",c=e=>{var a;let{pageContext:t,children:c}=e;const u=t.frontmatter.slug,b=Array.isArray(c)?c:[c],d=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===r)),m=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===o)),h=null===(a=d.props)||void 0===a?void 0:a.children.filter((e=>e.type.componentName===i)),p=h.findIndex((e=>u.endsWith(e.props.href))),_=-1===p?0:p,f=0===_?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return s.createElement(n.a,{initiallyActiveTab:_},s.createElement(n.a.TabList,{className:"page-tabs-list"},h.map((e=>s.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),h.map(((e,a)=>s.createElement(n.a.TabPanel,{key:e.props.href},_===a?m.props.children:s.createElement("div",null)))))},u=e=>{let{children:a}=e;return s.createElement(n.a.TabList,null,a)};u.componentName=r;const b=e=>{let{href:a,slug:t,children:l}=e;return s.createElement(n.a.Tab,null,l)};b.componentName=i;const d=e=>{let{children:a}=e;return s.createElement(n.a.TabPanel,null,a)};d.componentName=o,c.TabList=u,c.Tab=b,c.TabPanel=d,a.Z=c},57674:function(e,a,t){var s=t(67294),l=t(45422);a.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return s.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},s.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((a=>s.createElement("li",{key:a},s.createElement("span",{className:"status-name"},a),s.createElement("span",null,e[a]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-dropdown-accessibility-mdx-fd916ac3793f5e79062f.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-dropdown-accessibility-mdx-fd916ac3793f5e79062f.js
new file mode 100644
index 00000000000..6fc517a5bc7
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-dropdown-accessibility-mdx-fd916ac3793f5e79062f.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[5706,6046],{83428:function(e,t,a){a.d(t,{S:function(){return c}});var s=a(80136),l=a(67294),n=a(7444),o=a(34300),r={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const i=e=>{let{icon:t}=e;return l.createElement("span",{className:r.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:n,type:c="neutral",iconLeft:d}=e,u=(0,s._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,o.c)(r.statusLabel,r[c],d&&r.statusLabelWithIcon,a),"data-testid":n},u),d&&l.createElement(i,{icon:d}),t)}},86314:function(e,t,a){a.r(t);var s=a(11151),l=a(67294),n=a(13573);const o=e=>{let{children:t,pageContext:a}=e;return l.createElement(n.default,{pageContext:a},t)};function r(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",strong:"strong"},(0,s.ah)(),e.components);return l.createElement(l.Fragment,null,l.createElement(t.h2,{id:"accessibility",style:{position:"relative"}},"Accessibility",l.createElement(t.a,{href:"#accessibility","aria-label":"accessibility permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h3,{id:"pay-attention-to",style:{position:"relative"}},"Pay attention to",l.createElement(t.a,{href:"#pay-attention-to","aria-label":"pay attention to permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,"Dropdowns should be only used as form controls or as value pickers. Do not use dropdowns for menus or navigation since they cannot contain links or buttons."),"\n",l.createElement(t.li,null,"Do not use context change triggers (e.g. links) as dropdown options. See WCAG 3.2.2 On Input guideline for more information."),"\n",l.createElement(t.li,null,"Placeholder text can be used to give hints and examples to the user what is being selected with the dropdown. ",l.createElement(t.strong,null,"However, all assistive technologies do not treat placeholder texts as labels and therefore they may ignore them completely.")," Aim to provide the sufficient information to fill the input in the label or in the assistive text. Also if possible, set default option for the dropdown so the placeholder is not needed."),"\n",l.createElement(t.li,null,"In the case of an erroneous selection, aim to provide clear instructions to the user how to correct the mistake. Always provide text description of the error. In dropdowns it is usually possible to filter selectable options for the user to avoid errors completely."),"\n",l.createElement(t.li,null,"HDS Dropdowns support getA11ySelectionMessage that should be included to give screen reader better feedback when an option is selected."),"\n"))}t.default=function(e){return void 0===e&&(e={}),l.createElement(o,e,l.createElement(r,e))}},13573:function(e,t,a){a.r(t);var s=a(11151),l=a(67294),n=a(83428),o=a(57674),r=a(89482),i=(a(18607),a(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,s.ah)(),e.components);return i.Z||d("PageTabs",!1),i.Z.Tab||d("PageTabs.Tab",!0),i.Z.TabList||d("PageTabs.TabList",!0),i.Z.TabPanel||d("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"dropdown",style:{position:"relative"}},"Dropdown",l.createElement(t.a,{href:"#dropdown","aria-label":"dropdown permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(n.S,{type:"info"},"Stable"),l.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(o.Z)),"\n",l.createElement(r.Z,null,"A dropdown offers a user a list of options, of which one or multiple can be selected. Dropdowns are often used as part of forms and filters. HDS offers two types of dropdowns, a Select and a Combobox component."),"\n",l.createElement(i.Z,{pageContext:e.pageContext},l.createElement(i.Z.TabList,null,l.createElement(i.Z.Tab,{href:"/"},"Usage"),l.createElement(i.Z.Tab,{href:"/code"},"Code"),l.createElement(i.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(i.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(i.Z.TabPanel,null,e.children)))}function d(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,s.ah)(),e.components);return t?l.createElement(t,e,l.createElement(c,e)):c(e)}},89482:function(e,t,a){var s=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:l={},children:n}=e;return s.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...l}},n)}},26127:function(e,t,a){var s=a(67294),l=a(14160),n=a(94671);const o="PageTabList",r="PageTabPanel",i="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const d=a.frontmatter.slug,u=Array.isArray(c)?c:[c],b=u.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===o)),h=u.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===r)),m=null===(t=b.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===i)),p=m.findIndex((e=>d.endsWith(e.props.href))),f=-1===p?0:p,g=0===f?d:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(d);return s.createElement(n.a,{initiallyActiveTab:f},s.createElement(n.a.TabList,{className:"page-tabs-list"},m.map((e=>s.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?g:g+e.props.href))},e.props.children)))),m.map(((e,t)=>s.createElement(n.a.TabPanel,{key:e.props.href},f===t?h.props.children:s.createElement("div",null)))))},d=e=>{let{children:t}=e;return s.createElement(n.a.TabList,null,t)};d.componentName=o;const u=e=>{let{href:t,slug:a,children:l}=e;return s.createElement(n.a.Tab,null,l)};u.componentName=i;const b=e=>{let{children:t}=e;return s.createElement(n.a.TabPanel,null,t)};b.componentName=r,c.TabList=d,c.Tab=u,c.TabPanel=b,t.Z=c},57674:function(e,t,a){var s=a(67294),l=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return s.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},s.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>s.createElement("li",{key:t},s.createElement("span",{className:"status-name"},t),s.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-dropdown-code-mdx-20c39054bafa0f3a0f1c.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-dropdown-code-mdx-20c39054bafa0f3a0f1c.js
new file mode 100644
index 00000000000..1cf8fe9d55d
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-dropdown-code-mdx-20c39054bafa0f3a0f1c.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[8644],{53598:function(e,n,l){l.r(n);var t=l(11151),a=l(67294),r=l(74458),o=l(70476),c=l(68477),s=l(13573);const i=e=>{let{children:n,pageContext:l}=e;return a.createElement(s.default,{pageContext:l},n)};function m(e){const n=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",h4:"h4",pre:"pre",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",strong:"strong",p:"p"},(0,t.ah)(),e.components),{Playground:l,IconCheckCircleFill:s,Link:i,ExternalLink:m,IconCrossCircle:u,InternalLink:p}=n;return m||d("ExternalLink",!0),s||d("IconCheckCircleFill",!0),u||d("IconCrossCircle",!0),p||d("InternalLink",!0),i||d("Link",!0),l||d("Playground",!0),a.createElement(a.Fragment,null,a.createElement(n.h2,{id:"code",style:{position:"relative"}},"Code",a.createElement(n.a,{href:"#code","aria-label":"code permalink",className:"header-anchor after"},a.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(n.h3,{id:"code-examples",style:{position:"relative"}},"Code examples",a.createElement(n.a,{href:"#code-examples","aria-label":"code examples permalink",className:"header-anchor after"},a.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(n.h4,{id:"select-single-selection",style:{position:"relative"}},"Select (single selection)",a.createElement(n.a,{href:"#select-single-selection","aria-label":"select single selection permalink",className:"header-anchor after"},a.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(l,{scope:{Select:r.b,IconUser:o.bl}},a.createElement(n.pre,null,a.createElement(n.code,{className:"language-jsx"},"import { Select, IconUser } from 'hds-react';\n\n() => {\n  const options = [{ label: 'Plutonium' }, { label: 'Americium' }, { label: 'Copernicium' }, { label: 'Berkelium' }];\n  return (\n    <>\n      <Select required label=\"Label\" helper=\"Assistive text\" placeholder=\"Placeholder\" options={options} />\n      <Select\n        disabled\n        label=\"Label\"\n        helper=\"Assistive text\"\n        placeholder=\"Placeholder\"\n        options={options}\n        style={{ marginTop: 'var(--spacing-xs)' }}\n      />\n      <Select\n        invalid\n        required\n        label=\"Label\"\n        error=\"Error description\"\n        placeholder=\"Placeholder\"\n        options={options}\n        style={{ marginTop: 'var(--spacing-xs)' }}\n      />\n      <Select\n        required\n        label=\"Label\"\n        helper=\"Assistive text\"\n        placeholder=\"Placeholder\"\n        icon={<IconUser />}\n        options={[{ label: 'Adam' }, { label: 'Caitlyn' }, { label: 'Jack' }, { label: 'Sally' }]}\n        style={{ marginTop: 'var(--spacing-xs)' }}\n      />\n    </>\n  )\n}\n"))),"\n",a.createElement(n.h3,{id:"select-multi-selection",style:{position:"relative"}},"Select (multi-selection)",a.createElement(n.a,{href:"#select-multi-selection","aria-label":"select multi selection permalink",className:"header-anchor after"},a.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(l,{scope:{Select:r.b}},a.createElement(n.pre,null,a.createElement(n.code,{className:"language-jsx"},"import { Select } from 'hds-react';\n\n() => (\n  <Select\n    multiselect\n    required\n    label=\"Label\"\n    placeholder=\"Placeholder\"\n    helper=\"Assistive text\"\n    options={[\n      { label: 'Plutonium' },\n      { label: 'Americium' },\n      { label: 'Copernicium' },\n      { label: 'Berkelium' },\n    ]}\n    clearButtonAriaLabel=\"Clear all selections\"\n    selectedItemRemoveButtonAriaLabel=\"Remove ${value}\"\n  />\n)\n"))),"\n",a.createElement(n.h3,{id:"combobox-single-selection",style:{position:"relative"}},"Combobox (single selection)",a.createElement(n.a,{href:"#combobox-single-selection","aria-label":"combobox single selection permalink",className:"header-anchor after"},a.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(l,{scope:{Combobox:c.C,IconUser:o.bl}},a.createElement(n.pre,null,a.createElement(n.code,{className:"language-jsx"},"import { Combobox, IconUser } from 'hds-react';\n\n() => {\n  const options = [\n    { label: 'Americium' },\n    { label: 'Berkelium' },\n    { label: 'Californium' },\n    { label: 'Copernicium' },\n    { label: 'Einsteinium' },\n    { label: 'Fermium' },\n    { label: 'Mendelevium' },\n    { label: 'Plutonium' },\n  ]\n  return (\n    <>\n      <Combobox required label=\"Label\" helper=\"Assistive text\" placeholder=\"Placeholder\" toggleButtonAriaLabel=\"Toggle menu\" options={options} />\n      <Combobox\n        disabled\n        label=\"Label\"\n        helper=\"Assistive text\"\n        placeholder=\"Placeholder\"\n        toggleButtonAriaLabel=\"Toggle menu\"\n        options={options}\n        style={{ marginTop: 'var(--spacing-xs)' }}\n      />\n      <Combobox\n        invalid\n        required\n        label=\"Label\"\n        error=\"Error description\"\n        placeholder=\"Placeholder\"\n        toggleButtonAriaLabel=\"Toggle menu\"\n        options={options}\n        style={{ marginTop: 'var(--spacing-xs)' }}\n      />\n      <Combobox\n        required\n        label=\"Label\"\n        helper=\"Assistive text\"\n        placeholder=\"Placeholder\"\n        toggleButtonAriaLabel=\"Toggle menu\"\n        icon={<IconUser />}\n        options={[\n          { label: 'Adam' },\n          { label: 'Allie' },\n          { label: 'Bob' },\n          { label: 'Caitlyn' },\n          { label: 'Jack' },\n          { label: 'Olivia' },\n          { label: 'Sally' },\n          { label: 'Sam' },\n        ]}\n        style={{ marginTop: 'var(--spacing-xs)' }}\n      />\n    </>\n  )\n}\n"))),"\n",a.createElement(n.h3,{id:"combobox-multi-selection",style:{position:"relative"}},"Combobox (multi-selection)",a.createElement(n.a,{href:"#combobox-multi-selection","aria-label":"combobox multi selection permalink",className:"header-anchor after"},a.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(l,{scope:{Combobox:c.C}},a.createElement(n.pre,null,a.createElement(n.code,{className:"language-jsx"},"import { Combobox } from 'hds-react';\n\n() => (\n  <Combobox\n    multiselect\n    required\n    label=\"Label\"\n    helper=\"Assistive text\"\n    placeholder=\"Placeholder\"\n    options={[\n      { label: 'Americium' },\n      { label: 'Berkelium' },\n      { label: 'Californium' },\n      { label: 'Copernicium' },\n      { label: 'Einsteinium' },\n      { label: 'Fermium' },\n      { label: 'Mendelevium' },\n      { label: 'Plutonium' },\n    ]}\n    clearButtonAriaLabel=\"Clear all selections\"\n    selectedItemRemoveButtonAriaLabel=\"Remove ${value}\"\n    toggleButtonAriaLabel=\"Toggle menu\"\n  />\n)\n"))),"\n",a.createElement(n.h3,{id:"packages",style:{position:"relative"}},"Packages",a.createElement(n.a,{href:"#packages","aria-label":"packages permalink",className:"header-anchor after"},a.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(n.table,null,a.createElement(n.thead,null,a.createElement(n.tr,null,a.createElement(n.th,null,"Package"),a.createElement(n.th,null,"Included"),a.createElement(n.th,null,"Storybook link"),a.createElement(n.th,null,"Source link"))),a.createElement(n.tbody,null,a.createElement(n.tr,null,a.createElement(n.td,null,a.createElement(n.strong,null,"HDS React")),a.createElement(n.td,null,a.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},a.createElement(s)," Yes ")),a.createElement(n.td,null,a.createElement(i,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-dropdowns-select--default"},"View Select in Storybook")," ",a.createElement(i,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-dropdowns-combobox--default"},"View Combobox in Storybook")),a.createElement(n.td,null,a.createElement(m,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/react/src/components/dropdown"},"View source"))),a.createElement(n.tr,null,a.createElement(n.td,null,a.createElement(n.strong,null,"HDS Core")),a.createElement(n.td,null,a.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},a.createElement(u)," No ")),a.createElement(n.td,null,"-"),a.createElement(n.td,null,"-")))),"\n",a.createElement(n.h3,{id:"properties",style:{position:"relative"}},"Properties",a.createElement(n.a,{href:"#properties","aria-label":"properties permalink",className:"header-anchor after"},a.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(n.p,null,"Note! You can find the full list of properties in the ",a.createElement(i,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/docs/components-dropdowns-combobox--default"},"React Storybook.")),"\n",a.createElement(n.p,null,"Also, note that this component is an input. All features supported by the HDS TextInput are also supported by this component. See ",a.createElement(p,{href:"/components/text-input"},"TextInput documentation page")," for more information."),"\n",a.createElement(n.table,null,a.createElement(n.thead,null,a.createElement(n.tr,null,a.createElement(n.th,null,"Property"),a.createElement(n.th,null,"Description"),a.createElement(n.th,null,"Values"),a.createElement(n.th,null,"Default value"))),a.createElement(n.tbody,null,a.createElement(n.tr,null,a.createElement(n.td,null,a.createElement(n.code,null,"clearable")),a.createElement(n.td,null,"If set to true, the clear selections button is enabled."),a.createElement(n.td,null,a.createElement(n.code,null,"boolean")),a.createElement(n.td,null,"false")),a.createElement(n.tr,null,a.createElement(n.td,null,a.createElement(n.code,null,"disabled")),a.createElement(n.td,null,"If set to true, the dropdown is disabled."),a.createElement(n.td,null,a.createElement(n.code,null,"boolean")),a.createElement(n.td,null,"false")),a.createElement(n.tr,null,a.createElement(n.td,null,a.createElement(n.code,null,"helper")),a.createElement(n.td,null,"Helper text to be displayed below the input."),a.createElement(n.td,null,a.createElement(n.code,null,"string")),a.createElement(n.td,null,"-")),a.createElement(n.tr,null,a.createElement(n.td,null,a.createElement(n.code,null,"error")),a.createElement(n.td,null,"Error text to be displayed below the input."),a.createElement(n.td,null,a.createElement(n.code,null,"string")),a.createElement(n.td,null,"-")),a.createElement(n.tr,null,a.createElement(n.td,null,a.createElement(n.code,null,"icon")),a.createElement(n.td,null,"An icon to be shown in the beginning of the input."),a.createElement(n.td,null,a.createElement(n.code,null,"ReactNode")),a.createElement(n.td,null,"-")),a.createElement(n.tr,null,a.createElement(n.td,null,a.createElement(n.code,null,"label")),a.createElement(n.td,null,"A text label for the input."),a.createElement(n.td,null,a.createElement(n.code,null,"string")),a.createElement(n.td,null,"-")),a.createElement(n.tr,null,a.createElement(n.td,null,a.createElement(n.code,null,"options")),a.createElement(n.td,null,"The array of options shown in the input."),a.createElement(n.td,null,a.createElement(n.code,null,"OptionType[]")),a.createElement(n.td,null,"-")),a.createElement(n.tr,null,a.createElement(n.td,null,a.createElement(n.code,null,"placeholder")),a.createElement(n.td,null,"Short hint displayed in the input before the user enters a value."),a.createElement(n.td,null,a.createElement(n.code,null,"string")),a.createElement(n.td,null,"-")),a.createElement(n.tr,null,a.createElement(n.td,null,a.createElement(n.code,null,"required")),a.createElement(n.td,null,"If set to true, the input is marked as required."),a.createElement(n.td,null,a.createElement(n.code,null,"boolean")),a.createElement(n.td,null,"false")),a.createElement(n.tr,null,a.createElement(n.td,null,a.createElement(n.code,null,"multiselect")),a.createElement(n.td,null,"If set to true, the user can select multiple values."),a.createElement(n.td,null,a.createElement(n.code,null,"boolean")),a.createElement(n.td,null,"false")))))}function d(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}n.default=function(e){return void 0===e&&(e={}),a.createElement(i,e,a.createElement(m,e))}},13573:function(e,n,l){l.r(n);var t=l(11151),a=l(67294),r=l(83428),o=l(57674),c=l(89482),s=(l(18607),l(26127));function i(e){const n=Object.assign({h1:"h1",a:"a",span:"span"},(0,t.ah)(),e.components);return s.Z||m("PageTabs",!1),s.Z.Tab||m("PageTabs.Tab",!0),s.Z.TabList||m("PageTabs.TabList",!0),s.Z.TabPanel||m("PageTabs.TabPanel",!0),a.createElement(a.Fragment,null,a.createElement(n.h1,{id:"dropdown",style:{position:"relative"}},"Dropdown",a.createElement(n.a,{href:"#dropdown","aria-label":"dropdown permalink",className:"header-anchor after"},a.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement("div",{class:"status-label-description"},a.createElement(r.S,{type:"info"},"Stable"),a.createElement(r.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),a.createElement(o.Z)),"\n",a.createElement(c.Z,null,"A dropdown offers a user a list of options, of which one or multiple can be selected. Dropdowns are often used as part of forms and filters. HDS offers two types of dropdowns, a Select and a Combobox component."),"\n",a.createElement(s.Z,{pageContext:e.pageContext},a.createElement(s.Z.TabList,null,a.createElement(s.Z.Tab,{href:"/"},"Usage"),a.createElement(s.Z.Tab,{href:"/code"},"Code"),a.createElement(s.Z.Tab,{href:"/accessibility"},"Accessibility"),a.createElement(s.Z.Tab,{href:"/customisation"},"Customisation")),a.createElement(s.Z.TabPanel,null,e.children)))}function m(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}n.default=function(e){void 0===e&&(e={});const{wrapper:n}=Object.assign({},(0,t.ah)(),e.components);return n?a.createElement(n,e,a.createElement(i,e)):i(e)}},57674:function(e,n,l){var t=l(67294),a=l(45422);n.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return t.createElement(a.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},t.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((n=>t.createElement("li",{key:n},t.createElement("span",{className:"status-name"},n),t.createElement("span",null,e[n]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-dropdown-customisation-mdx-2804aba885c47e989972.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-dropdown-customisation-mdx-2804aba885c47e989972.js
new file mode 100644
index 00000000000..61cbeed8848
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-dropdown-customisation-mdx-2804aba885c47e989972.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[1332],{20489:function(e,l,t){t.r(l);var n=t(11151),r=t(67294),o=t(70476),c=t(74458),a=t(13573);const d=e=>{let{children:l,pageContext:t}=e;return r.createElement(a.default,{pageContext:t},l)};function m(e){const l=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",p:"p",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",pre:"pre"},(0,n.ah)(),e.components),{Playground:t}=l;return t||function(e,l){throw new Error("Expected "+(l?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Playground",!0),r.createElement(r.Fragment,null,r.createElement(l.h2,{id:"customisation",style:{position:"relative"}},"Customisation",r.createElement(l.a,{href:"#customisation","aria-label":"customisation permalink",className:"header-anchor after"},r.createElement(l.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",r.createElement(l.h3,{id:"customisation-properties",style:{position:"relative"}},"Customisation properties",r.createElement(l.a,{href:"#customisation-properties","aria-label":"customisation properties permalink",className:"header-anchor after"},r.createElement(l.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",r.createElement(l.p,null,"You can use the ",r.createElement(l.code,null,"theme")," property to customise the component. See all available theme variables in the table below."),"\n",r.createElement(l.table,null,r.createElement(l.thead,null,r.createElement(l.tr,null,r.createElement(l.th,null,"Theme variable"),r.createElement(l.th,null,"Description"))),r.createElement(l.tbody,null,r.createElement(l.tr,null,r.createElement(l.td,null,r.createElement(l.code,null,"--dropdown-background-default")),r.createElement(l.td,null,"Background color of dropdown")),r.createElement(l.tr,null,r.createElement(l.td,null,r.createElement(l.code,null,"--dropdown-background-disabled")),r.createElement(l.td,null,"Background color of disabled dropdown")),r.createElement(l.tr,null,r.createElement(l.td,null,r.createElement(l.code,null,"--dropdown-border-color-default")),r.createElement(l.td,null,"Border color of dropdown")),r.createElement(l.tr,null,r.createElement(l.td,null,r.createElement(l.code,null,"--dropdown-border-color-hover")),r.createElement(l.td,null,"Border color of hovered dropdown")),r.createElement(l.tr,null,r.createElement(l.td,null,r.createElement(l.code,null,"--dropdown-border-color-hover-invalid")),r.createElement(l.td,null,"Border color of hovered and invalid dropdown")),r.createElement(l.tr,null,r.createElement(l.td,null,r.createElement(l.code,null,"--dropdown-border-color-focus")),r.createElement(l.td,null,"Border color of focused dropdown")),r.createElement(l.tr,null,r.createElement(l.td,null,r.createElement(l.code,null,"--dropdown-border-color-invalid")),r.createElement(l.td,null,"Border color of invalid dropdown")),r.createElement(l.tr,null,r.createElement(l.td,null,r.createElement(l.code,null,"--dropdown-border-color-disabled")),r.createElement(l.td,null,"Border color of disabled dropdown")),r.createElement(l.tr,null,r.createElement(l.td,null,r.createElement(l.code,null,"--dropdown-color-default")),r.createElement(l.td,null,"Dropdown color")),r.createElement(l.tr,null,r.createElement(l.td,null,r.createElement(l.code,null,"--dropdown-color-disabled")),r.createElement(l.td,null,"Disabled dropdown color")),r.createElement(l.tr,null,r.createElement(l.td,null,r.createElement(l.code,null,"--focus-outline-color")),r.createElement(l.td,null,"Focus outline color")),r.createElement(l.tr,null,r.createElement(l.td,null,r.createElement(l.code,null,"--helper-color-default")),r.createElement(l.td,null,"Helper text color")),r.createElement(l.tr,null,r.createElement(l.td,null,r.createElement(l.code,null,"--helper-color-invalid")),r.createElement(l.td,null,"Helper text color when dropdown state is invalid")),r.createElement(l.tr,null,r.createElement(l.td,null,r.createElement(l.code,null,"--menu-divider-color")),r.createElement(l.td,null,"Menu divider color")),r.createElement(l.tr,null,r.createElement(l.td,null,r.createElement(l.code,null,"--menu-item-background-default")),r.createElement(l.td,null,"Background color of menu item")),r.createElement(l.tr,null,r.createElement(l.td,null,r.createElement(l.code,null,"--menu-item-background-hover")),r.createElement(l.td,null,"Background color of hovered menu item")),r.createElement(l.tr,null,r.createElement(l.td,null,r.createElement(l.code,null,"--menu-item-background-selected")),r.createElement(l.td,null,"Background color of selected menu item")),r.createElement(l.tr,null,r.createElement(l.td,null,r.createElement(l.code,null,"--menu-item-background-selected-hover")),r.createElement(l.td,null,"Background color of selected and hovered menu item")),r.createElement(l.tr,null,r.createElement(l.td,null,r.createElement(l.code,null,"--menu-item-background-disabled")),r.createElement(l.td,null,"Background color of disabled menu item")),r.createElement(l.tr,null,r.createElement(l.td,null,r.createElement(l.code,null,"--menu-item-color-default")),r.createElement(l.td,null,"Color of menu item")),r.createElement(l.tr,null,r.createElement(l.td,null,r.createElement(l.code,null,"--menu-item-color-hover")),r.createElement(l.td,null,"Color of hovered menu item")),r.createElement(l.tr,null,r.createElement(l.td,null,r.createElement(l.code,null,"--menu-item-color-selected")),r.createElement(l.td,null,"Color of selected menu item")),r.createElement(l.tr,null,r.createElement(l.td,null,r.createElement(l.code,null,"--menu-item-color-selected-hover")),r.createElement(l.td,null,"Color of selected and hovered menu item")),r.createElement(l.tr,null,r.createElement(l.td,null,r.createElement(l.code,null,"--menu-item-color-disabled")),r.createElement(l.td,null,"Color of disabled menu item")),r.createElement(l.tr,null,r.createElement(l.td,null,r.createElement(l.code,null,"--menu-item-icon-color-selected")),r.createElement(l.td,null,"Color of selected menu item icon")),r.createElement(l.tr,null,r.createElement(l.td,null,r.createElement(l.code,null,"--menu-item-icon-color-disabled")),r.createElement(l.td,null,"Color of disabled menu item icon")),r.createElement(l.tr,null,r.createElement(l.td,null,r.createElement(l.code,null,"--multiselect-checkbox-background-selected")),r.createElement(l.td,null,"Background color of selected multiselect checkbox")),r.createElement(l.tr,null,r.createElement(l.td,null,r.createElement(l.code,null,"--multiselect-checkbox-background-disabled")),r.createElement(l.td,null,"Background color of disabled multiselect checkbox")),r.createElement(l.tr,null,r.createElement(l.td,null,r.createElement(l.code,null,"--multiselect-checkbox-border-default")),r.createElement(l.td,null,"Color of multiselect checkbox border")),r.createElement(l.tr,null,r.createElement(l.td,null,r.createElement(l.code,null,"--multiselect-checkbox-border-hover")),r.createElement(l.td,null,"Color of hovered multiselect checkbox border")),r.createElement(l.tr,null,r.createElement(l.td,null,r.createElement(l.code,null,"--multiselect-checkbox-border-disabled")),r.createElement(l.td,null,"Color of disabled multiselect checkbox border")),r.createElement(l.tr,null,r.createElement(l.td,null,r.createElement(l.code,null,"--multiselect-checkbox-color-default")),r.createElement(l.td,null,"Color of multiselect checkbox")),r.createElement(l.tr,null,r.createElement(l.td,null,r.createElement(l.code,null,"--multiselect-checkbox-color-selected")),r.createElement(l.td,null,"Color of selected multiselect checkbox")),r.createElement(l.tr,null,r.createElement(l.td,null,r.createElement(l.code,null,"--multiselect-checkbox-color-selected-disabled")),r.createElement(l.td,null,"Color of selected and disabled multiselect checkbox")),r.createElement(l.tr,null,r.createElement(l.td,null,r.createElement(l.code,null,"--placeholder-color")),r.createElement(l.td,null,"Placeholder color")))),"\n",r.createElement(l.h3,{id:"customisation-example",style:{position:"relative"}},"Customisation example",r.createElement(l.a,{href:"#customisation-example","aria-label":"customisation example permalink",className:"header-anchor after"},r.createElement(l.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",r.createElement(t,{scope:{IconUser:o.bl,Select:c.b}},r.createElement(l.pre,null,r.createElement(l.code,{className:"language-jsx"},"import { Select, IconUser } from 'hds-react';\n\n() => {\n  const options = [{ label: 'Plutonium' }, { label: 'Americium' }, { label: 'Copernicium' }, { label: 'Berkelium' }];\n  return (\n    <>\n      <Select\n        required\n        label=\"Label\"\n        helper=\"Assistive text\"\n        placeholder=\"Placeholder\"\n        icon={<IconUser />}\n        options={options}\n        style={{ marginTop: 'var(--spacing-xs)' }}\n        theme={{\n          '--dropdown-background-default': 'var(--color-black-5)',\n          '--dropdown-background-disabled': 'var(--color-black-10)',\n          '--dropdown-border-color-default': 'var(--color-black-50)',\n          '--dropdown-border-color-hover': 'var(--color-black-90)',\n          '--dropdown-border-color-hover-invalid': 'var(--color-error-dark)',\n          '--dropdown-border-color-focus': 'var(--color-black-90)',\n          '--dropdown-border-color-invalid': 'var(--color-error)',\n          '--dropdown-border-color-disabled': 'var(--color-black-10)',\n          '--dropdown-color-default': 'var(--color-black-90)',\n          '--dropdown-color-disabled': 'var(--color-black-40)',\n          '--focus-outline-color': 'var(--color-coat-of-arms)',\n          '--helper-color-default': 'var(--color-black-60)',\n          '--helper-color-invalid': 'var(--color-error)',\n          '--menu-divider-color': 'var(--color-black-20)',\n          '--menu-item-background-default': 'var(--color-white)',\n          '--menu-item-background-hover': 'var(--color-bus)',\n          '--menu-item-background-selected': 'var(--color-white)',\n          '--menu-item-background-selected-hover': 'var(--color-bus)',\n          '--menu-item-background-disabled': 'var(--color-white)',\n          '--menu-item-color-default': 'var(--color-black-90)',\n          '--menu-item-color-hover': 'var(--color-white)',\n          '--menu-item-color-selected': 'var(--color-black-90)',\n          '--menu-item-color-selected-hover': 'var(--color-white)',\n          '--menu-item-color-disabled': 'var(--color-black-40)',\n          '--menu-item-icon-color-selected': 'var(--color-white)',\n          '--menu-item-icon-color-disabled': 'var(--color-black-40)',\n          '--multiselect-checkbox-background-selected': 'var(--color-bus)',\n          '--multiselect-checkbox-background-disabled': 'var(--color-black-10)',\n          '--multiselect-checkbox-border-default': 'var(--color-black-50)',\n          '--multiselect-checkbox-border-hover': 'var(--color-black-90)',\n          '--multiselect-checkbox-border-disabled': 'var(--color-black-10)',\n          '--multiselect-checkbox-color-default': 'transparent',\n          '--multiselect-checkbox-color-selected': 'var(--color-white)',\n          '--multiselect-checkbox-color-selected-disabled': 'var(--color-white)',\n          '--placeholder-color': 'var(--color-black-60)',\n        }}\n      />\n    </>\n  )\n}\n"))))}l.default=function(e){return void 0===e&&(e={}),r.createElement(d,e,r.createElement(m,e))}},13573:function(e,l,t){t.r(l);var n=t(11151),r=t(67294),o=t(83428),c=t(57674),a=t(89482),d=(t(18607),t(26127));function m(e){const l=Object.assign({h1:"h1",a:"a",span:"span"},(0,n.ah)(),e.components);return d.Z||u("PageTabs",!1),d.Z.Tab||u("PageTabs.Tab",!0),d.Z.TabList||u("PageTabs.TabList",!0),d.Z.TabPanel||u("PageTabs.TabPanel",!0),r.createElement(r.Fragment,null,r.createElement(l.h1,{id:"dropdown",style:{position:"relative"}},"Dropdown",r.createElement(l.a,{href:"#dropdown","aria-label":"dropdown permalink",className:"header-anchor after"},r.createElement(l.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",r.createElement("div",{class:"status-label-description"},r.createElement(o.S,{type:"info"},"Stable"),r.createElement(o.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),r.createElement(c.Z)),"\n",r.createElement(a.Z,null,"A dropdown offers a user a list of options, of which one or multiple can be selected. Dropdowns are often used as part of forms and filters. HDS offers two types of dropdowns, a Select and a Combobox component."),"\n",r.createElement(d.Z,{pageContext:e.pageContext},r.createElement(d.Z.TabList,null,r.createElement(d.Z.Tab,{href:"/"},"Usage"),r.createElement(d.Z.Tab,{href:"/code"},"Code"),r.createElement(d.Z.Tab,{href:"/accessibility"},"Accessibility"),r.createElement(d.Z.Tab,{href:"/customisation"},"Customisation")),r.createElement(d.Z.TabPanel,null,e.children)))}function u(e,l){throw new Error("Expected "+(l?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}l.default=function(e){void 0===e&&(e={});const{wrapper:l}=Object.assign({},(0,n.ah)(),e.components);return l?r.createElement(l,e,r.createElement(m,e)):m(e)}},57674:function(e,l,t){var n=t(67294),r=t(45422);l.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return n.createElement(r.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},n.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((l=>n.createElement("li",{key:l},n.createElement("span",{className:"status-name"},l),n.createElement("span",null,e[l]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-dropdown-index-mdx-23f7572fdb6c20007d82.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-dropdown-index-mdx-23f7572fdb6c20007d82.js
new file mode 100644
index 00000000000..ba323e839a1
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-dropdown-index-mdx-23f7572fdb6c20007d82.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[7102],{11083:function(e,l,n){n.r(l);var t=n(11151),a=n(67294),o=n(74458),i=n(68477),r=n(13573);const s=e=>{let{children:l,pageContext:n}=e;return a.createElement(r.default,{pageContext:n},l)};function c(e){const l=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",strong:"strong",em:"em",h4:"h4",p:"p"},(0,t.ah)(),e.components),{PlaygroundPreview:n,InternalLink:r}=l;return r||m("InternalLink",!0),n||m("PlaygroundPreview",!0),a.createElement(a.Fragment,null,a.createElement(l.h2,{id:"usage",style:{position:"relative"}},"Usage",a.createElement(l.a,{href:"#usage","aria-label":"usage permalink",className:"header-anchor after"},a.createElement(l.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(l.h3,{id:"example",style:{position:"relative"}},"Example",a.createElement(l.a,{href:"#example","aria-label":"example permalink",className:"header-anchor after"},a.createElement(l.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(n,null,a.createElement("div",{style:{maxWidth:"400px"}},a.createElement(o.b,{required:!0,label:"Select",helper:"Assistive text",placeholder:"Placeholder",options:[{label:"Americium"},{label:"Berkelium"},{label:"Californium"},{label:"Copernicium"}]}),a.createElement(i.C,{multiselect:!0,required:!0,label:"Combobox",helper:"Assistive text",placeholder:"Placeholder",options:[{label:"Americium"},{label:"Berkelium"},{label:"Californium"},{label:"Copernicium"},{label:"Einsteinium"},{label:"Fermium"},{label:"Mendelevium"},{label:"Plutonium"}],clearButtonAriaLabel:"Clear all selections",selectedItemRemoveButtonAriaLabel:"Remove ${value}",toggleButtonAriaLabel:"Toggle menu",style:{marginTop:"var(--spacing-s)"}}))),"\n",a.createElement(l.h3,{id:"principles",style:{position:"relative"}},"Principles",a.createElement(l.a,{href:"#principles","aria-label":"principles permalink",className:"header-anchor after"},a.createElement(l.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(l.ul,null,"\n",a.createElement(l.li,null,a.createElement(l.strong,null,"A label should always be provided with dropdowns.")," Aim for labels that are short, concise and easy to understand."),"\n",a.createElement(l.li,null,"Dropdowns usually have four (4) or more options. When having only 2-3 options, it is usually better to use ",a.createElement(r,{href:"/components/radio-button"},"radio buttons")," or ",a.createElement(r,{href:"/components/checkbox"},"checkboxes"),". Also, if options need to be easily comparable (for example, product pricing), prefer radio buttons over dropdown."),"\n",a.createElement(l.li,null,'It is recommended to set a default option for a single selection dropdown. If the default option is also the recommended option, you can mark the option with a text "',a.createElement(l.em,null,"(recommended)"),'".'),"\n",a.createElement(l.li,null,"If your dropdown has 8 or more options, consider using the ",a.createElement(l.a,{href:"#combobox-single-selection"},"Combobox")," variant which offers filtering options by typing."),"\n",a.createElement(l.li,null,"Try to avoid dropdown options that span over one line. Aim for short texts for all options."),"\n",a.createElement(l.li,null,"If possible, do input validation client-side in real-time and provide the user with immediate feedback after selection."),"\n"),"\n",a.createElement(l.h4,{id:"should-i-use-select-or-combobox",style:{position:"relative"}},"Should I use Select or Combobox?",a.createElement(l.a,{href:"#should-i-use-select-or-combobox","aria-label":"should i use select or combobox permalink",className:"header-anchor after"},a.createElement(l.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(l.ul,null,"\n",a.createElement(l.li,null,a.createElement(l.strong,null,"Use Select variant when"),"\n",a.createElement(l.ul,null,"\n",a.createElement(l.li,null,"there are less than 8 options"),"\n",a.createElement(l.li,null,"the user does not need to be able to filter options by typing"),"\n"),"\n"),"\n",a.createElement(l.li,null,a.createElement(l.strong,null,"Use Combobox variant when"),"\n",a.createElement(l.ul,null,"\n",a.createElement(l.li,null,"there are 8 or more options"),"\n",a.createElement(l.li,null,"the user needs to be able to filter options by typing"),"\n"),"\n"),"\n"),"\n",a.createElement(l.h4,{id:"icon-or-no-icon",style:{position:"relative"}},"Icon or no icon?",a.createElement(l.a,{href:"#icon-or-no-icon","aria-label":"icon or no icon permalink",className:"header-anchor after"},a.createElement(l.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(l.ul,null,"\n",a.createElement(l.li,null,a.createElement(l.strong,null,"Use an icon when"),"\n",a.createElement(l.ul,null,"\n",a.createElement(l.li,null,"there is a clear added value to using an icon"),"\n",a.createElement(l.li,null,"when the icon is not just for illustrative purposes"),"\n",a.createElement(l.li,null,"when you can add an icon to all select and combobox elements in the formgroup to maintain consistency"),"\n"),"\n"),"\n"),"\n",a.createElement(l.h3,{id:"variations",style:{position:"relative"}},"Variations",a.createElement(l.a,{href:"#variations","aria-label":"variations permalink",className:"header-anchor after"},a.createElement(l.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(l.h4,{id:"select-single-selection",style:{position:"relative"}},"Select (single selection)",a.createElement(l.a,{href:"#select-single-selection","aria-label":"select single selection permalink",className:"header-anchor after"},a.createElement(l.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(l.p,null,"Select dropdown serves in most use cases when the user needs to select one of 4 to 7 options. If there are 8 or more options available, consider using ",a.createElement(l.a,{href:"#combobox-single-selection"},"Combobox")," to allow filtering."),"\n",a.createElement(n,null,a.createElement(o.b,{required:!0,label:"Label",helper:"Assistive text",placeholder:"Placeholder",options:[{label:"Americium"},{label:"Berkelium"},{label:"Californium"},{label:"Copernicium"}],style:{maxWidth:"400px"}})),"\n",a.createElement(l.h4,{id:"select-multi-selection",style:{position:"relative"}},"Select (multi-selection)",a.createElement(l.a,{href:"#select-multi-selection","aria-label":"select multi selection permalink",className:"header-anchor after"},a.createElement(l.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(l.p,null,"Select multi-selection variant allows the user to select one or more options simultaneously. Note! Select dropdown does not feature filtering options by typing. When this feature is needed or there are a large number of options available, consider using consider using ",a.createElement(l.a,{href:"#combobox-multi-selection"},"Combobox"),"."),"\n",a.createElement(l.p,null,"Multi-select also supports icon if needed."),"\n",a.createElement(n,null,a.createElement(o.b,{multiselect:!0,required:!0,label:"Label",placeholder:"Placeholder",helper:"Assistive text",options:[{label:"Plutonium"},{label:"Americium"},{label:"Copernicium"},{label:"Berkelium"}],clearButtonAriaLabel:"Clear all selections",selectedItemRemoveButtonAriaLabel:"Remove ${value}",style:{maxWidth:"400px"}})),"\n",a.createElement(l.h4,{id:"combobox-single-selection",style:{position:"relative"}},"Combobox (single selection)",a.createElement(l.a,{href:"#combobox-single-selection","aria-label":"combobox single selection permalink",className:"header-anchor after"},a.createElement(l.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(l.p,null,"Combobox dropdown serves in most use cases when the user needs to select one from 8 or more options (up to hundreds of options). Combobox variant features filtering options by typing."),"\n",a.createElement(n,null,a.createElement(i.C,{required:!0,label:"Label",helper:"Assistive text",placeholder:"Placeholder",toggleButtonAriaLabel:"Toggle menu",options:[{label:"Americium"},{label:"Berkelium"},{label:"Californium"},{label:"Copernicium"},{label:"Einsteinium"},{label:"Fermium"},{label:"Mendelevium"},{label:"Plutonium"}],style:{maxWidth:"400px"}})),"\n",a.createElement(l.h4,{id:"combobox-multi-selection",style:{position:"relative"}},"Combobox (multi-selection)",a.createElement(l.a,{href:"#combobox-multi-selection","aria-label":"combobox multi selection permalink",className:"header-anchor after"},a.createElement(l.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(l.p,null,"Combobox multi-select variant allows the user to select one or more options simultaneously. Combobox variant features filtering options by typing."),"\n",a.createElement(l.p,null,"Multi-select also supports icon if needed."),"\n",a.createElement(n,null,a.createElement(i.C,{multiselect:!0,required:!0,label:"Label",helper:"Assistive text",placeholder:"Placeholder",options:[{label:"Americium"},{label:"Berkelium"},{label:"Californium"},{label:"Copernicium"},{label:"Einsteinium"},{label:"Fermium"},{label:"Mendelevium"},{label:"Plutonium"}],clearButtonAriaLabel:"Clear all selections",selectedItemRemoveButtonAriaLabel:"Remove ${value}",toggleButtonAriaLabel:"Toggle menu",style:{maxWidth:"400px"}})))}function m(e,l){throw new Error("Expected "+(l?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}l.default=function(e){return void 0===e&&(e={}),a.createElement(s,e,a.createElement(c,e))}},13573:function(e,l,n){n.r(l);var t=n(11151),a=n(67294),o=n(83428),i=n(57674),r=n(89482),s=(n(18607),n(26127));function c(e){const l=Object.assign({h1:"h1",a:"a",span:"span"},(0,t.ah)(),e.components);return s.Z||m("PageTabs",!1),s.Z.Tab||m("PageTabs.Tab",!0),s.Z.TabList||m("PageTabs.TabList",!0),s.Z.TabPanel||m("PageTabs.TabPanel",!0),a.createElement(a.Fragment,null,a.createElement(l.h1,{id:"dropdown",style:{position:"relative"}},"Dropdown",a.createElement(l.a,{href:"#dropdown","aria-label":"dropdown permalink",className:"header-anchor after"},a.createElement(l.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement("div",{class:"status-label-description"},a.createElement(o.S,{type:"info"},"Stable"),a.createElement(o.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),a.createElement(i.Z)),"\n",a.createElement(r.Z,null,"A dropdown offers a user a list of options, of which one or multiple can be selected. Dropdowns are often used as part of forms and filters. HDS offers two types of dropdowns, a Select and a Combobox component."),"\n",a.createElement(s.Z,{pageContext:e.pageContext},a.createElement(s.Z.TabList,null,a.createElement(s.Z.Tab,{href:"/"},"Usage"),a.createElement(s.Z.Tab,{href:"/code"},"Code"),a.createElement(s.Z.Tab,{href:"/accessibility"},"Accessibility"),a.createElement(s.Z.Tab,{href:"/customisation"},"Customisation")),a.createElement(s.Z.TabPanel,null,e.children)))}function m(e,l){throw new Error("Expected "+(l?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}l.default=function(e){void 0===e&&(e={});const{wrapper:l}=Object.assign({},(0,t.ah)(),e.components);return l?a.createElement(l,e,a.createElement(c,e)):c(e)}},57674:function(e,l,n){var t=n(67294),a=n(45422);l.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return t.createElement(a.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},t.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((l=>t.createElement("li",{key:l},t.createElement("span",{className:"status-name"},l),t.createElement("span",null,e[l]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-dropdown-tabs-mdx-5386e0b7c1774dae3239.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-dropdown-tabs-mdx-5386e0b7c1774dae3239.js
new file mode 100644
index 00000000000..3daae2e2810
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-dropdown-tabs-mdx-5386e0b7c1774dae3239.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[6046],{83428:function(e,a,t){t.d(a,{S:function(){return i}});var s=t(80136),l=t(67294),n=t(7444),r=t(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const c=e=>{let{icon:a}=e;return l.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},a)},i=e=>{var{children:a,className:t,dataTestId:n,type:i="neutral",iconLeft:b}=e,u=(0,s._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(o.statusLabel,o[i],b&&o.statusLabelWithIcon,t),"data-testid":n},u),b&&l.createElement(c,{icon:b}),a)}},13573:function(e,a,t){t.r(a);var s=t(11151),l=t(67294),n=t(83428),r=t(57674),o=t(89482),c=(t(18607),t(26127));function i(e){const a=Object.assign({h1:"h1",a:"a",span:"span"},(0,s.ah)(),e.components);return c.Z||b("PageTabs",!1),c.Z.Tab||b("PageTabs.Tab",!0),c.Z.TabList||b("PageTabs.TabList",!0),c.Z.TabPanel||b("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(a.h1,{id:"dropdown",style:{position:"relative"}},"Dropdown",l.createElement(a.a,{href:"#dropdown","aria-label":"dropdown permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(n.S,{type:"info"},"Stable"),l.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(o.Z,null,"A dropdown offers a user a list of options, of which one or multiple can be selected. Dropdowns are often used as part of forms and filters. HDS offers two types of dropdowns, a Select and a Combobox component."),"\n",l.createElement(c.Z,{pageContext:e.pageContext},l.createElement(c.Z.TabList,null,l.createElement(c.Z.Tab,{href:"/"},"Usage"),l.createElement(c.Z.Tab,{href:"/code"},"Code"),l.createElement(c.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(c.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(c.Z.TabPanel,null,e.children)))}function b(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,s.ah)(),e.components);return a?l.createElement(a,e,l.createElement(i,e)):i(e)}},89482:function(e,a,t){var s=t(67294);a.Z=e=>{let{color:a="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:l={},children:n}=e;return s.createElement("p",{style:{fontSize:t,color:a,maxWidth:600,...l}},n)}},26127:function(e,a,t){var s=t(67294),l=t(14160),n=t(94671);const r="PageTabList",o="PageTabPanel",c="PageTab",i=e=>{var a;let{pageContext:t,children:i}=e;const b=t.frontmatter.slug,u=Array.isArray(i)?i:[i],d=u.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===r)),m=u.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===o)),p=null===(a=d.props)||void 0===a?void 0:a.children.filter((e=>e.type.componentName===c)),h=p.findIndex((e=>b.endsWith(e.props.href))),f=-1===h?0:h,_=0===f?b:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(b);return s.createElement(n.a,{initiallyActiveTab:f},s.createElement(n.a.TabList,{className:"page-tabs-list"},p.map((e=>s.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?_:_+e.props.href))},e.props.children)))),p.map(((e,a)=>s.createElement(n.a.TabPanel,{key:e.props.href},f===a?m.props.children:s.createElement("div",null)))))},b=e=>{let{children:a}=e;return s.createElement(n.a.TabList,null,a)};b.componentName=r;const u=e=>{let{href:a,slug:t,children:l}=e;return s.createElement(n.a.Tab,null,l)};u.componentName=c;const d=e=>{let{children:a}=e;return s.createElement(n.a.TabPanel,null,a)};d.componentName=o,i.TabList=b,i.Tab=u,i.TabPanel=d,a.Z=i},57674:function(e,a,t){var s=t(67294),l=t(45422);a.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return s.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},s.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((a=>s.createElement("li",{key:a},s.createElement("span",{className:"status-name"},a),s.createElement("span",null,e[a]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-fieldset-accessibility-mdx-853e7c84d150d8d6b165.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-fieldset-accessibility-mdx-853e7c84d150d8d6b165.js
new file mode 100644
index 00000000000..63fa6c42a2a
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-fieldset-accessibility-mdx-853e7c84d150d8d6b165.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[5574,9933],{83428:function(e,t,a){a.d(t,{S:function(){return c}});var l=a(80136),s=a(67294),n=a(7444),r=a(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:t}=e;return s.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:n,type:c="neutral",iconLeft:d}=e,u=(0,l._)(e,["children","className","dataTestId","type","iconLeft"]);return s.createElement("span",Object.assign({className:(0,r.c)(i.statusLabel,i[c],d&&i.statusLabelWithIcon,a),"data-testid":n},u),d&&s.createElement(o,{icon:d}),t)}},27483:function(e,t,a){a.r(t);var l=a(11151),s=a(67294),n=a(80699),r=a(73831);const i=e=>{let{children:t,pageContext:a}=e;return s.createElement(r.default,{pageContext:a},t)};function o(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li"},(0,l.ah)(),e.components);return s.createElement(s.Fragment,null,s.createElement(t.h2,{id:"accessibility",style:{position:"relative"}},"Accessibility",s.createElement(t.a,{href:"#accessibility","aria-label":"accessibility permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.h3,{id:"pay-attention-to",style:{position:"relative"}},"Pay attention to",s.createElement(t.a,{href:"#pay-attention-to","aria-label":"pay attention to permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.ul,null,"\n",s.createElement(t.li,null,"Note that the heading is programmatically attached to each form element it contains. When assistive technologies focus a form element inside a Fieldset, they will announce the Fieldset heading in addition to the focused element information."),"\n",s.createElement(t.li,null,"Fieldset heading does not replace form element labels. Each form element still must have their own label. For more information, refer to ",s.createElement(n.Z,{href:"https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions.html"},"WCAG 3.3.2 Labels and Instructions guideline"),"."),"\n"))}t.default=function(e){return void 0===e&&(e={}),s.createElement(i,e,s.createElement(o,e))}},73831:function(e,t,a){a.r(t);var l=a(11151),s=a(67294),n=a(83428),r=a(57674),i=a(89482),o=(a(18607),a(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,l.ah)(),e.components);return o.Z||d("PageTabs",!1),o.Z.Tab||d("PageTabs.Tab",!0),o.Z.TabList||d("PageTabs.TabList",!0),o.Z.TabPanel||d("PageTabs.TabPanel",!0),s.createElement(s.Fragment,null,s.createElement(t.h1,{id:"fieldset",style:{position:"relative"}},"Fieldset",s.createElement(t.a,{href:"#fieldset","aria-label":"fieldset permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement("div",{class:"status-label-description"},s.createElement(n.S,{type:"info"},"Stable"),s.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),s.createElement(r.Z)),"\n",s.createElement(i.Z,null,"Fieldset groups multiple related form input fields together by giving them a common legend heading."),"\n",s.createElement(o.Z,{pageContext:e.pageContext},s.createElement(o.Z.TabList,null,s.createElement(o.Z.Tab,{href:"/"},"Usage"),s.createElement(o.Z.Tab,{href:"/code"},"Code"),s.createElement(o.Z.Tab,{href:"/accessibility"},"Accessibility")),s.createElement(o.Z.TabPanel,null,e.children)))}function d(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,l.ah)(),e.components);return t?s.createElement(t,e,s.createElement(c,e)):c(e)}},89482:function(e,t,a){var l=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:s={},children:n}=e;return l.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...s}},n)}},26127:function(e,t,a){var l=a(67294),s=a(14160),n=a(94671);const r="PageTabList",i="PageTabPanel",o="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const d=a.frontmatter.slug,u=Array.isArray(c)?c:[c],b=u.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===r)),m=u.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===i)),h=null===(t=b.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===o)),p=h.findIndex((e=>d.endsWith(e.props.href))),f=-1===p?0:p,g=0===f?d:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(d);return l.createElement(n.a,{initiallyActiveTab:f},l.createElement(n.a.TabList,{className:"page-tabs-list"},h.map((e=>l.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,s.navigate)(""+("/"===e.props.href?g:g+e.props.href))},e.props.children)))),h.map(((e,t)=>l.createElement(n.a.TabPanel,{key:e.props.href},f===t?m.props.children:l.createElement("div",null)))))},d=e=>{let{children:t}=e;return l.createElement(n.a.TabList,null,t)};d.componentName=r;const u=e=>{let{href:t,slug:a,children:s}=e;return l.createElement(n.a.Tab,null,s)};u.componentName=o;const b=e=>{let{children:t}=e;return l.createElement(n.a.TabPanel,null,t)};b.componentName=i,c.TabList=d,c.Tab=u,c.TabPanel=b,t.Z=c},57674:function(e,t,a){var l=a(67294),s=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return l.createElement(s.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},l.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>l.createElement("li",{key:t},l.createElement("span",{className:"status-name"},t),l.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-fieldset-code-mdx-6de86d7d500160a87ae8.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-fieldset-code-mdx-6de86d7d500160a87ae8.js
new file mode 100644
index 00000000000..184ed0ed2b8
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-fieldset-code-mdx-6de86d7d500160a87ae8.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[9065,9933],{61538:function(e,t,n){n.d(t,{F:function(){return o}});var a=n(80136),l=n(67294),i=n(7444),s=n(34300),r=n(45422);(0,i.s)('.fieldset_hds-fieldset__2FPi3{--border-style:0 none;--padding-top:4px;--padding-sides:0;--padding-bottom:var(--spacing-s);border:var(--border-style);box-sizing:border-box;padding:var(--padding-top) var(--padding-sides) var(--padding-bottom)}.fieldset_hds-fieldset-legend__2-X6z{font-weight:700;padding:0}.fieldset_hds-fieldset--border__3aSAk{--border-style:2px inset var(--color-black-90);--padding-top:2px;--padding-sides:12px}.fieldset_hds-fieldset--border__3aSAk>.fieldset_hds-fieldset-legend__2-X6z{margin-left:calc(var(--padding-sides) / -2);padding:0 6px}.helpers_visually-hidden__1wQpN{border:0;clip:"rect(0 0 0 0)";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.helpers_button-reset__1oMEE{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.helpers_text-body__cNGRV{color:var(--color-black-90);font-family:var(--font-default);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.helpers_text-medium__36w-m{font-family:var(--font-default);font-weight:500}.helpers_text-bold__3Mr-E{font-family:var(--font-default);font-weight:700}.helpers_text-xl__2Tx_B{font-size:var(--fontsize-heading-m)}.helpers_text-lg__cuO5Z{font-size:var(--fontsize-heading-s)}.helpers_text-md__tJ793{font-size:var(--fontsize-heading-xs)}.helpers_subtitle__2zu-B{font-size:var(--fontsize-body-m)}.helpers_text-sm__1Bfuk{font-size:var(--fontsize-body-s);line-height:var(--lineheight-xl)}.helpers_heading-xxl__2Lhb0{font-size:var(--fontsize-heading-xxl);font-weight:400;letter-spacing:-1.2px;line-height:var(--lineheight-s)}.helpers_heading-xl__1VOyZ{font-size:var(--fontsize-heading-xl);font-weight:400;letter-spacing:-1px;line-height:var(--lineheight-s)}.helpers_heading-xl-mobile__16ACR{font-size:var(--fontsize-heading-xl-mobile);font-weight:400;letter-spacing:-.8px;line-height:var(--lineheight-s)}.helpers_heading-l__3kdJ7{font-size:var(--fontsize-heading-l);font-weight:400;letter-spacing:-.4px;line-height:var(--lineheight-s)}.helpers_heading-m__3pwdU{font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-.2px;line-height:32px}.helpers_heading-s__1lQJG{font-size:var(--fontsize-heading-s);font-weight:500;letter-spacing:.2px;line-height:1.4}.helpers_heading-xs__U5AY1{font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:.4px;line-height:1.33}.helpers_heading-xxs__1-Y0n{font-size:var(--fontsize-heading-xxs);font-weight:700;letter-spacing:.4px;line-height:var(--lineheight-l)}.helpers_helper-text__1eU9U{color:var(--color-black-60);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs)}.Fieldset-module_legendWithTooltip__1fDha{align-items:center;display:flex;grid-column-gap:var(--spacing-2-xs);justify-content:flex-start}.Fieldset-module_tooltipButton__2lhCc{align-items:center;display:flex}');const o=e=>{var{heading:t,border:n,className:i,helperText:o,tooltipText:d,tooltipLabel:c,tooltipButtonLabel:u,children:p}=e,h=(0,a._)(e,["heading","border","className","helperText","tooltipText","tooltipLabel","tooltipButtonLabel","children"]);return l.createElement("fieldset",Object.assign({className:(0,s.c)("Fieldset-module_fieldset__2OtST fieldset_hds-fieldset__2FPi3",n&&"fieldset_hds-fieldset--border__3aSAk",i)},h),l.createElement("legend",{className:d?"Fieldset-module_legendWithTooltip__1fDha fieldset_hds-fieldset-legend__2-X6z":"Fieldset-module_legend__35Acm fieldset_hds-fieldset-legend__2-X6z"},t,d&&l.createElement(r.T,{className:"Fieldset-module_tooltipButton__2lhCc",tooltipLabel:c,buttonLabel:u},d)),p,o&&l.createElement("div",{className:"Fieldset-module_helperText__BZXwu helpers_helper-text__1eU9U"},o))}},93667:function(e,t,n){n.d(t,{I:function(){return o},t:function(){return r}});var a=n(67294),l=n(7444),i=n(34300),s=n(41125),r={root:"TextInput-module_root__2CMNr text-input_hds-text-input__2LODq",inputWrapper:"TextInput-module_inputWrapper__3Rvel text-input_hds-text-input__input-wrapper__1OqYG",input:"TextInput-module_input__1BlHi text-input_hds-text-input__input__GJm5C",hasButton:"TextInput-module_hasButton__2KCM1",errorText:"TextInput-module_errorText__3pizm text-input_hds-text-input__error-text__1GLYk",helperText:"TextInput-module_helperText__2dLR6 text-input_hds-text-input__helper-text__3V2KM",invalidText:"TextInput-module_invalidText__1w4sm text-input_hds-text-input__helper-text__3V2KM",successText:"TextInput-module_successText__2NMCP text-input_hds-text-input__success-text__3EOiy",infoText:"TextInput-module_infoText__zHOGs text-input_hds-text-input__info-text__3bqzy",invalid:"TextInput-module_invalid__2iYo2 text-input_hds-text-input--invalid__1UfKC",success:"TextInput-module_success__1kDOm text-input_hds-text-input--success__3dm2J",readOnly:"TextInput-module_readOnly__j615N undefined",buttonWrapper:"TextInput-module_buttonWrapper___filA text-input_hds-text-input__buttons__1RMzT",button:"TextInput-module_button__1ySMX text-input_hds-text-input__button__1Fh0I"};(0,l.s)("@keyframes text-input_fadeIn__2IDZ8{0%{opacity:0}to{opacity:1}}.text-input_hds-text-input__2LODq{--border-width:2px;--outline-width:3px;--input-height:56px;--textarea-height:149px;--icon-size:var(--spacing-m);--helper-color-default:var(--color-black-60);--helper-color-invalid:var(--color-error);--helper-color-success:var(--color-success);--helper-color-info:var(--color-black-90);--helper-color-info-icon:var(--color-coat-of-arms);--icon-color-invalid:var(--color-error);--input-background-default:var(--color-white);--input-background-disabled:var(--color-black-10);--input-border-color-default:var(--color-black-50);--input-border-color-hover:var(--color-black-90);--input-border-color-focus:var(--color-black-90);--input-border-color-invalid:var(--color-error);--input-border-color-disabled:var(--color-black-10);--input-border-color-success:var(--color-success);--input-color-default:var(--color-black-90);--input-color-disabled:var(--color-black-40);--label-color-default:var(--color-black-90);--label-color-invalid:var(--color-black-90);--placeholder-color:var(--color-black-60)}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C{-webkit-appearance:none;background-color:var(--input-background-default);border:var(--border-width) solid var(--input-border-color-default);border-radius:0;box-sizing:border-box;color:var(--input-color-default);font-family:inherit;font-size:1.125em;height:var(--input-height);line-height:normal;margin:0;padding:0 var(--spacing-s);width:100%;will-change:transform,box-shadow}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C:hover{border-color:var(--input-border-color-hover);transition:border-color 85ms ease-out}.text-input_hds-text-input__input-wrapper__1OqYG:focus-within .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-focus);outline:none}.text-input_hds-text-input__2LODq.text-input_hds-text-input--invalid__1UfKC .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-invalid)}.text-input_hds-text-input__2LODq.text-input_hds-text-input--success__3dm2J .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-success)}.text-input_hds-text-input__input-wrapper__1OqYG:focus-within .text-input_hds-text-input__input__GJm5C:not([readonly]){box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);transform:translateZ(0);transition:85ms ease-out;transition-property:box-shadow,transform}.text-input_hds-text-input__label__15F2V{color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.text-input_hds-text-input--invalid__1UfKC .text-input_hds-text-input__label__15F2V{color:var(--label-color-invalid);transition:color 85ms linear}.text-input_hds-text-input__required__z3Hm0{color:var(--color-black-90);display:inline-block;font-size:var(--fontsize-body-xl);line-height:1;margin-left:var(--spacing-2-xs);transform:translateY(var(--spacing-3-xs))}.text-input_hds-text-input__input-wrapper__1OqYG{display:flex;position:relative}.text-input_hds-text-input__2LODq textarea.text-input_hds-text-input__input__GJm5C{font-family:inherit;height:var(--textarea-height);margin:0;min-height:var(--input-height);overflow:auto;padding:var(--spacing-s);resize:vertical}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C::-moz-placeholder{color:var(--placeholder-color);opacity:1}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C::placeholder{color:var(--placeholder-color);opacity:1}.text-input_hds-text-input__helper-text__3V2KM{color:var(--helper-color-default)}.text-input_hds-text-input__error-text__1GLYk,.text-input_hds-text-input__helper-text__3V2KM{display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);white-space:pre-line}.text-input_hds-text-input__error-text__1GLYk{color:var(--helper-color-invalid);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.text-input_hds-text-input__error-text__1GLYk:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__error-text__1GLYk:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--icon-color-invalid);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__success-text__3EOiy{color:var(--helper-color-success);display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative;white-space:pre-wrap}.text-input_hds-text-input__success-text__3EOiy:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__success-text__3EOiy:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--helper-color-success);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__info-text__3bqzy{color:var(--helper-color-info);display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.text-input_hds-text-input__info-text__3bqzy:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__info-text__3bqzy:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--helper-color-info-icon);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C[disabled]{background-color:var(--input-background-disabled);border-color:var(--input-border-color-disabled);color:var(--input-color-disabled);cursor:not-allowed}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C[readonly]{background-color:transparent;border:0;color:var(--input-color-default);padding:0;-webkit-text-fill-color:var(--input-color-default)}.text-input_hds-text-input__buttons__1RMzT{align-items:center;bottom:0;display:flex;font-size:1rem;justify-content:center;margin-right:calc(var(--spacing-s) - var(--spacing-xs) / 2);position:absolute;right:0;top:0}.text-input_hds-text-input__button__1Fh0I{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;display:flex;font:inherit;outline:none;padding:var(--spacing-xs) calc(var(--spacing-xs) / 2)}.text-input_hds-text-input__button__1Fh0I:focus{outline:var(--outline-width) solid var(--color-focus-outline)}.TextInput-module_root__2CMNr{position:relative}.TextInput-module_input__1BlHi.TextInput-module_hasButton__2KCM1{padding-right:calc(2 * var(--spacing-s) + 1.5rem)}.TextInput-module_button__1ySMX:disabled{cursor:not-allowed}.TextInput-module_button__1ySMX:focus{outline:var(--outline-width) solid var(--color-focus-outline)}");const o=e=>{let{children:t,className:n="",errorText:l,helperText:o,hideLabel:d=!1,id:c,invalid:u=!1,isAriaLabelledBy:p=!1,label:h,labelId:m,onBlur:_,required:b=!1,style:x,successText:g,infoText:f,tooltipLabel:v,tooltipText:E,tooltipButtonLabel:y}=e;return a.createElement("div",{onBlur:_,className:(0,i.c)(r.root,u&&r.invalid,g&&r.success,n),style:x},h&&a.createElement(s.F,{id:m,inputId:c,isAriaLabelledBy:p,hidden:d,label:h,required:b,tooltipLabel:v,tooltipButtonLabel:y,tooltipText:E}),a.createElement("div",{className:(0,i.c)(r.inputWrapper)},t),l&&a.createElement("div",{className:r.errorText,id:c+"-error"},l),g&&a.createElement("div",{className:r.successText,id:c+"-success"},g),f&&a.createElement("div",{className:r.infoText,id:c+"-info"},f),o&&a.createElement("div",{className:r.helperText,id:c+"-helper"},o))}},83428:function(e,t,n){n.d(t,{S:function(){return d}});var a=n(80136),l=n(67294),i=n(7444),s=n(34300),r={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,i.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:t}=e;return l.createElement("span",{className:r.statusLabelIcon,"aria-hidden":"true"},t)},d=e=>{var{children:t,className:n,dataTestId:i,type:d="neutral",iconLeft:c}=e,u=(0,a._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,s.c)(r.statusLabel,r[d],c&&r.statusLabelWithIcon,n),"data-testid":i},u),c&&l.createElement(o,{icon:c}),t)}},24155:function(e,t,n){n.d(t,{T:function(){return o}});var a=n(80136),l=n(67294),i=n(93667),s=n(34300),r=n(37776);const o=l.forwardRef(((e,t)=>{var{className:n="",children:o,disabled:d=!1,defaultValue:c,errorText:u,helperText:p,hideLabel:h,invalid:m,id:_,label:b,onChange:x=(()=>null),required:g,style:f,successText:v,infoText:E,tooltipLabel:y,tooltipText:T,tooltipButtonLabel:w,type:k="text",buttonIcon:z,buttonAriaLabel:L,onButtonClick:C}=e,I=(0,a._)(e,["className","children","disabled","defaultValue","errorText","helperText","hideLabel","invalid","id","label","onChange","required","style","successText","infoText","tooltipLabel","tooltipText","tooltipButtonLabel","type","buttonIcon","buttonAriaLabel","onButtonClick"]);const N={className:n,errorText:u,helperText:p,hideLabel:h,id:_,invalid:m,label:b,required:g,style:f,successText:v,infoText:E,tooltipLabel:y,tooltipText:T,tooltipButtonLabel:w},q=(0,r.c)(_,p,u,v,E),F=Boolean(z&&C);return l.createElement(i.I,Object.assign({},N),l.createElement("input",Object.assign({className:(0,s.c)(i.t.input,F&&i.t.hasButton),defaultValue:c,disabled:d,id:_,onChange:x,ref:t,required:g,type:k,"aria-describedby":q.length>0?q:null},I)),F&&l.createElement("div",{className:i.t.buttonWrapper},l.createElement("button",{className:i.t.button,disabled:d,type:"button",onClick:C,"aria-label":L},z)),o)}))},37776:function(e,t,n){n.d(t,{c:function(){return a}});var a=(e,t,n,a,l)=>[t&&e+"-helper",n&&e+"-error",a&&e+"-success",l&&e+"-info"].filter((e=>e)).join(" ")},92494:function(e,t,n){n.r(t);var a=n(11151),l=n(67294),i=n(61538),s=n(24155),r=n(73831);const o=e=>{let{children:t,pageContext:n}=e;return l.createElement(r.default,{pageContext:n},t)};function d(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",h4:"h4",pre:"pre",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",strong:"strong",p:"p"},(0,a.ah)(),e.components),{Playground:n,IconCheckCircleFill:r,Link:o,ExternalLink:d}=t;return d||c("ExternalLink",!0),r||c("IconCheckCircleFill",!0),o||c("Link",!0),n||c("Playground",!0),l.createElement(l.Fragment,null,l.createElement(t.h2,{id:"code",style:{position:"relative"}},"Code",l.createElement(t.a,{href:"#code","aria-label":"code permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h3,{id:"code-examples",style:{position:"relative"}},"Code examples",l.createElement(t.a,{href:"#code-examples","aria-label":"code examples permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h4,{id:"default",style:{position:"relative"}},"Default",l.createElement(t.a,{href:"#default","aria-label":"default permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n,{scope:{Fieldset:i.F,TextInput:s.T}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},'import { Fieldset, TextInput } from \'hds-react\';\n\n() => (<>\n  <Fieldset heading="Child information" style={{ maxWidth: \'400px\' }} helperText=\'Assistive text\'>\n    <TextInput id="first-name-child" name="first-name" label="First name" required />\n    <TextInput id="last-name-child" name="last-name" label="Last name" required style={{ marginTop: \'12px\' }} />\n    <TextInput\n      id="social-security-number-child"\n      name="social-security-number"\n      label="Social security number"\n      placeholder="Eg. 111299-1234"\n      required\n      style={{ marginTop: \'12px\' }}\n    />\n  </Fieldset>\n\n  <Fieldset heading="Guardian information" style={{ maxWidth: \'400px\', marginTop: \'var(--spacing-s)\' }}>\n    <TextInput id="first-name-guardian" name="first-name" label="First name" required />\n    <TextInput id="last-name-guardian" name="last-name" label="Last name" required style={{ marginTop: \'12px\' }} />\n    <TextInput\n      id="social-security-number-guardian"\n      name="social-security-number"\n      label="Social security number"\n      placeholder="Eg. 111299-1234"\n      required\n      style={{ marginTop: \'12px\' }}\n    />\n  </Fieldset>\n\n  <Fieldset heading="Applicant information" style={{ maxWidth: \'400px\' }} tooltipText="tooltip text" tooltipLabel="tooltip text aria label" tooltipButtonLabel="tooltip button aria label">\n    <TextInput id="first-name-1" name="first-name" label="First name" />\n    <TextInput id="last-name-1" name="last-name" label="Last name" style={{ marginTop: \'12px\' }} />\n    <TextInput\n      id="social-security-number-1"\n      name="social-security-number"\n      label="Social security number"\n      placeholder="Eg. 111299-1234"\n      style={{ marginTop: \'12px\' }}\n    />\n  </Fieldset>\n\n</>)\n')),l.createElement(t.pre,null,l.createElement(t.code,{className:"language-html"},'<div>\n  <fieldset class="hds-fieldset" style="max-width: 400px">\n    <legend class="hds-fieldset-legend">Child information</legend>\n    <div class="hds-text-input">\n      <label for="first-name-child-1" class="hds-text-input__label">First name<span class="hds-text-input__required">*</span></label>\n      <div class="hds-text-input__input-wrapper">\n        <input id="first-name-child-1" name="first-name-child-1" class="hds-text-input__input" type="text" />\n      </div>\n    </div>\n    <div class="hds-text-input" style="margin-top: 12px">\n      <label for="last-name-child-1" class="hds-text-input__label">Last name<span class="hds-text-input__required">*</span></label>\n      <div class="hds-text-input__input-wrapper">\n        <input id="last-name-child-1" name="last-name-child-1" class="hds-text-input__input" type="text" />\n      </div>\n    </div>\n    <div class="hds-text-input" style="margin-top: 12px">\n      <label for="social-security-number-child-1" class="hds-text-input__label">Social security number<span class="hds-text-input__required">*</span></label>\n      <div class="hds-text-input__input-wrapper">\n        <input\n          id="social-security-number-child-1"\n          name="social-security-number-child-1"\n          class="hds-text-input__input"\n          type="text"\n          placeholder="Eg. 111299-1234"\n        />\n      </div>\n    </div>\n    <div class="helper-text">Assistive text</div>\n  </fieldset>\n  <fieldset class="hds-fieldset" style="max-width: 400px;margin-top: var(--spacing-s);">\n    <legend class="hds-fieldset-legend">Guardian information</legend>\n    <div class="hds-text-input">\n      <label for="first-name-guardian-1" class="hds-text-input__label">First name<span class="hds-text-input__required">*</span></label>\n      <div class="hds-text-input__input-wrapper">\n        <input id="first-name-guardian-1" name="first-name-guardian-1" class="hds-text-input__input" type="text" />\n      </div>\n    </div>\n    <div class="hds-text-input" style="margin-top: 12px">\n      <label for="last-name-guardian-1" class="hds-text-input__label">Last name<span class="hds-text-input__required">*</span></label>\n      <div class="hds-text-input__input-wrapper">\n        <input id="last-name-guardian-1" name="last-name-guardian-1" class="hds-text-input__input" type="text" />\n      </div>\n    </div>\n    <div class="hds-text-input" style="margin-top: 12px">\n      <label for="social-security-number-guardian-1" class="hds-text-input__label">Social security number<span class="hds-text-input__required">*</span></label>\n      <div class="hds-text-input__input-wrapper">\n        <input\n          id="social-security-number-guardian-1"\n          name="social-security-number-guardian-1"\n          class="hds-text-input__input"\n          type="text"\n        />\n      </div>\n    </div>\n  </fieldset>\n</div>\n'))),"\n",l.createElement(t.h3,{id:"with-border",style:{position:"relative"}},"With border",l.createElement(t.a,{href:"#with-border","aria-label":"with border permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n,{scope:{Fieldset:i.F,TextInput:s.T}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},'import { Fieldset, TextInput } from \'hds-react\';\n\n() => (<>\n  <Fieldset heading="Child information" border style={{ maxWidth: \'400px\' }}>\n    <TextInput id="first-name-child-2" name="first-name" label="First name" required />\n    <TextInput id="last-name-child-2" name="last-name" label="Last name" required style={{ marginTop: \'12px\' }} />\n    <TextInput\n      id="social-security-number-child-2"\n      name="social-security-number-child-2"\n      label="Social security number"\n      placeholder="Eg. 111299-1234"\n      required\n      style={{ marginTop: \'12px\' }}\n    />\n  </Fieldset>\n\n  <Fieldset heading="Guardian information" border style={{ maxWidth: \'400px\', marginTop: \'var(--spacing-s)\' }}>\n    <TextInput id="first-name-guardian-2" name="first-name" label="First name" required />\n    <TextInput id="last-name-guardian-2" name="last-name" label="Last name" required style={{ marginTop: \'12px\' }} />\n    <TextInput\n      id="social-security-number-guardian-2"\n      name="social-security-number-guardian-"\n      label="Social security number"\n      placeholder="Eg. 111299-1234"\n      required\n      style={{ marginTop: \'12px\' }}\n    />\n  </Fieldset>\n</>)\n')),l.createElement(t.pre,null,l.createElement(t.code,{className:"language-html"},'<div>\n  <fieldset class="hds-fieldset hds-fieldset--border" style="max-width: 400px;">\n    <legend class="hds-fieldset-legend">Child information</legend>\n    <div class="hds-text-input">\n      <label for="first-name-child-3" class="hds-text-input__label">First name<span class="hds-text-input__required">*</span></label>\n      <div class="hds-text-input__input-wrapper">\n        <input id="first-name-child-3" name="first-name-child-3" class="hds-text-input__input" type="text" />\n      </div>\n    </div>\n    <div class="hds-text-input" style="margin-top: 12px">\n      <label for="last-name-child-3" class="hds-text-input__label">Last name<span class="hds-text-input__required">*</span></label>\n      <div class="hds-text-input__input-wrapper">\n        <input id="last-name-child-3" name="last-name-child-3" class="hds-text-input__input" type="text" />\n      </div>\n    </div>\n    <div class="hds-text-input" style="margin-top: 12px">\n      <label for="social-security-number-child-3" class="hds-text-input__label">Social security number<span class="hds-text-input__required">*</span></label>\n      <div class="hds-text-input__input-wrapper">\n        <input\n          id="social-security-number-child-3"\n          name="social-security-number-child-3"\n          class="hds-text-input__input"\n          type="text"\n          placeholder="Eg. 111299-1234"\n        />\n      </div>\n    </div>\n  </fieldset>\n  <fieldset class="hds-fieldset hds-fieldset--border" style="max-width: 400px;margin-top: var(--spacing-s);">\n    <legend class="hds-fieldset-legend">Guardian information</legend>\n    <div class="hds-text-input">\n      <label for="first-name-guardian-3" class="hds-text-input__label">First name<span class="hds-text-input__required">*</span></label>\n      <div class="hds-text-input__input-wrapper">\n        <input id="first-name-guardian-3" name="first-name-guardian-3" class="hds-text-input__input" type="text" />\n      </div>\n    </div>\n    <div class="hds-text-input" style="margin-top: 12px">\n      <label for="last-name-guardian-3" class="hds-text-input__label">Last name<span class="hds-text-input__required">*</span></label>\n      <div class="hds-text-input__input-wrapper">\n        <input id="last-name-guardian-3" name="last-name-guardian-3" class="hds-text-input__input" type="text" />\n      </div>\n    </div>\n    <div class="hds-text-input" style="margin-top: 12px">\n      <label for="social-security-number-guardian-3" class="hds-text-input__label">Social security number<span class="hds-text-input__required">*</span></label>\n      <div class="hds-text-input__input-wrapper">\n        <input\n          id="social-security-number-guardian-3"\n          name="social-security-number-guardian-3"\n          class="hds-text-input__input"\n          type="text"\n          placeholder="Eg. 111299-1234"\n        />\n      </div>\n    </div>\n  </fieldset>\n</div>\n'))),"\n",l.createElement(t.h3,{id:"packages",style:{position:"relative"}},"Packages",l.createElement(t.a,{href:"#packages","aria-label":"packages permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.table,null,l.createElement(t.thead,null,l.createElement(t.tr,null,l.createElement(t.th,null,"Package"),l.createElement(t.th,null,"Included"),l.createElement(t.th,null,"Storybook link"),l.createElement(t.th,null,"Source link"))),l.createElement(t.tbody,null,l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.strong,null,"HDS React")),l.createElement(t.td,null,l.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},l.createElement(r)," Yes ")),l.createElement(t.td,null,l.createElement(o,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-fieldset--default"},"View in Storybook")),l.createElement(t.td,null,l.createElement(d,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/blob/master/packages/react/src/components/fieldset/Fieldset.tsx"},"View source"))),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.strong,null,"HDS Core")),l.createElement(t.td,null,l.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},l.createElement(r)," Yes ")),l.createElement(t.td,null,l.createElement(o,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/core/?path=/story/components-fieldset--default"},"View in Storybook")),l.createElement(t.td,null,l.createElement(d,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/core/src/components/fieldset"},"View source"))))),"\n",l.createElement(t.h3,{id:"properties",style:{position:"relative"}},"Properties",l.createElement(t.a,{href:"#properties","aria-label":"properties permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"Note! You can find the full list of properties in the ",l.createElement(o,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-dropdowns-select--default"},"React Storybook.")),"\n",l.createElement(t.table,null,l.createElement(t.thead,null,l.createElement(t.tr,null,l.createElement(t.th,null,"Property"),l.createElement(t.th,null,"Description"),l.createElement(t.th,null,"Values"),l.createElement(t.th,null,"Default value"))),l.createElement(t.tbody,null,l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"heading")),l.createElement(t.td,null,"Heading of the fieldset element."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"border")),l.createElement(t.td,null,"If set to true, a border is drawn around the fieldset."),l.createElement(t.td,null,l.createElement(t.code,null,"boolean")),l.createElement(t.td,null,"false")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"helperText")),l.createElement(t.td,null,"The help text content that will be shown below the fieldset content."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"tooltipLabel")),l.createElement(t.td,null,"The aria-label text for the tooltip."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"tooltipButtonLabel")),l.createElement(t.td,null,"The aria-label text for the tooltip trigger button."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"tooltipText")),l.createElement(t.td,null,"The text content of the tooltip."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,"-")))))}function c(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){return void 0===e&&(e={}),l.createElement(o,e,l.createElement(d,e))}},73831:function(e,t,n){n.r(t);var a=n(11151),l=n(67294),i=n(83428),s=n(57674),r=n(89482),o=(n(18607),n(26127));function d(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,a.ah)(),e.components);return o.Z||c("PageTabs",!1),o.Z.Tab||c("PageTabs.Tab",!0),o.Z.TabList||c("PageTabs.TabList",!0),o.Z.TabPanel||c("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"fieldset",style:{position:"relative"}},"Fieldset",l.createElement(t.a,{href:"#fieldset","aria-label":"fieldset permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(i.S,{type:"info"},"Stable"),l.createElement(i.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(s.Z)),"\n",l.createElement(r.Z,null,"Fieldset groups multiple related form input fields together by giving them a common legend heading."),"\n",l.createElement(o.Z,{pageContext:e.pageContext},l.createElement(o.Z.TabList,null,l.createElement(o.Z.Tab,{href:"/"},"Usage"),l.createElement(o.Z.Tab,{href:"/code"},"Code"),l.createElement(o.Z.Tab,{href:"/accessibility"},"Accessibility")),l.createElement(o.Z.TabPanel,null,e.children)))}function c(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,a.ah)(),e.components);return t?l.createElement(t,e,l.createElement(d,e)):d(e)}},89482:function(e,t,n){var a=n(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:n="var(--fontsize-body-xl)",style:l={},children:i}=e;return a.createElement("p",{style:{fontSize:n,color:t,maxWidth:600,...l}},i)}},26127:function(e,t,n){var a=n(67294),l=n(14160),i=n(94671);const s="PageTabList",r="PageTabPanel",o="PageTab",d=e=>{var t;let{pageContext:n,children:d}=e;const c=n.frontmatter.slug,u=Array.isArray(d)?d:[d],p=u.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===s)),h=u.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===r)),m=null===(t=p.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===o)),_=m.findIndex((e=>c.endsWith(e.props.href))),b=-1===_?0:_,x=0===b?c:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(c);return a.createElement(i.a,{initiallyActiveTab:b},a.createElement(i.a.TabList,{className:"page-tabs-list"},m.map((e=>a.createElement(i.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?x:x+e.props.href))},e.props.children)))),m.map(((e,t)=>a.createElement(i.a.TabPanel,{key:e.props.href},b===t?h.props.children:a.createElement("div",null)))))},c=e=>{let{children:t}=e;return a.createElement(i.a.TabList,null,t)};c.componentName=s;const u=e=>{let{href:t,slug:n,children:l}=e;return a.createElement(i.a.Tab,null,l)};u.componentName=o;const p=e=>{let{children:t}=e;return a.createElement(i.a.TabPanel,null,t)};p.componentName=r,d.TabList=c,d.Tab=u,d.TabPanel=p,t.Z=d},57674:function(e,t,n){var a=n(67294),l=n(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return a.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},a.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>a.createElement("li",{key:t},a.createElement("span",{className:"status-name"},t),a.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-fieldset-index-mdx-1ee096092d1f6fa88f17.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-fieldset-index-mdx-1ee096092d1f6fa88f17.js
new file mode 100644
index 00000000000..be439fc298f
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-fieldset-index-mdx-1ee096092d1f6fa88f17.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[9098,9933],{61538:function(e,t,a){a.d(t,{F:function(){return s}});var n=a(80136),l=a(67294),i=a(7444),r=a(34300),o=a(45422);(0,i.s)('.fieldset_hds-fieldset__2FPi3{--border-style:0 none;--padding-top:4px;--padding-sides:0;--padding-bottom:var(--spacing-s);border:var(--border-style);box-sizing:border-box;padding:var(--padding-top) var(--padding-sides) var(--padding-bottom)}.fieldset_hds-fieldset-legend__2-X6z{font-weight:700;padding:0}.fieldset_hds-fieldset--border__3aSAk{--border-style:2px inset var(--color-black-90);--padding-top:2px;--padding-sides:12px}.fieldset_hds-fieldset--border__3aSAk>.fieldset_hds-fieldset-legend__2-X6z{margin-left:calc(var(--padding-sides) / -2);padding:0 6px}.helpers_visually-hidden__1wQpN{border:0;clip:"rect(0 0 0 0)";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.helpers_button-reset__1oMEE{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.helpers_text-body__cNGRV{color:var(--color-black-90);font-family:var(--font-default);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.helpers_text-medium__36w-m{font-family:var(--font-default);font-weight:500}.helpers_text-bold__3Mr-E{font-family:var(--font-default);font-weight:700}.helpers_text-xl__2Tx_B{font-size:var(--fontsize-heading-m)}.helpers_text-lg__cuO5Z{font-size:var(--fontsize-heading-s)}.helpers_text-md__tJ793{font-size:var(--fontsize-heading-xs)}.helpers_subtitle__2zu-B{font-size:var(--fontsize-body-m)}.helpers_text-sm__1Bfuk{font-size:var(--fontsize-body-s);line-height:var(--lineheight-xl)}.helpers_heading-xxl__2Lhb0{font-size:var(--fontsize-heading-xxl);font-weight:400;letter-spacing:-1.2px;line-height:var(--lineheight-s)}.helpers_heading-xl__1VOyZ{font-size:var(--fontsize-heading-xl);font-weight:400;letter-spacing:-1px;line-height:var(--lineheight-s)}.helpers_heading-xl-mobile__16ACR{font-size:var(--fontsize-heading-xl-mobile);font-weight:400;letter-spacing:-.8px;line-height:var(--lineheight-s)}.helpers_heading-l__3kdJ7{font-size:var(--fontsize-heading-l);font-weight:400;letter-spacing:-.4px;line-height:var(--lineheight-s)}.helpers_heading-m__3pwdU{font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-.2px;line-height:32px}.helpers_heading-s__1lQJG{font-size:var(--fontsize-heading-s);font-weight:500;letter-spacing:.2px;line-height:1.4}.helpers_heading-xs__U5AY1{font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:.4px;line-height:1.33}.helpers_heading-xxs__1-Y0n{font-size:var(--fontsize-heading-xxs);font-weight:700;letter-spacing:.4px;line-height:var(--lineheight-l)}.helpers_helper-text__1eU9U{color:var(--color-black-60);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs)}.Fieldset-module_legendWithTooltip__1fDha{align-items:center;display:flex;grid-column-gap:var(--spacing-2-xs);justify-content:flex-start}.Fieldset-module_tooltipButton__2lhCc{align-items:center;display:flex}');const s=e=>{var{heading:t,border:a,className:i,helperText:s,tooltipText:d,tooltipLabel:c,tooltipButtonLabel:u,children:p}=e,h=(0,n._)(e,["heading","border","className","helperText","tooltipText","tooltipLabel","tooltipButtonLabel","children"]);return l.createElement("fieldset",Object.assign({className:(0,r.c)("Fieldset-module_fieldset__2OtST fieldset_hds-fieldset__2FPi3",a&&"fieldset_hds-fieldset--border__3aSAk",i)},h),l.createElement("legend",{className:d?"Fieldset-module_legendWithTooltip__1fDha fieldset_hds-fieldset-legend__2-X6z":"Fieldset-module_legend__35Acm fieldset_hds-fieldset-legend__2-X6z"},t,d&&l.createElement(o.T,{className:"Fieldset-module_tooltipButton__2lhCc",tooltipLabel:c,buttonLabel:u},d)),p,s&&l.createElement("div",{className:"Fieldset-module_helperText__BZXwu helpers_helper-text__1eU9U"},s))}},93667:function(e,t,a){a.d(t,{I:function(){return s},t:function(){return o}});var n=a(67294),l=a(7444),i=a(34300),r=a(41125),o={root:"TextInput-module_root__2CMNr text-input_hds-text-input__2LODq",inputWrapper:"TextInput-module_inputWrapper__3Rvel text-input_hds-text-input__input-wrapper__1OqYG",input:"TextInput-module_input__1BlHi text-input_hds-text-input__input__GJm5C",hasButton:"TextInput-module_hasButton__2KCM1",errorText:"TextInput-module_errorText__3pizm text-input_hds-text-input__error-text__1GLYk",helperText:"TextInput-module_helperText__2dLR6 text-input_hds-text-input__helper-text__3V2KM",invalidText:"TextInput-module_invalidText__1w4sm text-input_hds-text-input__helper-text__3V2KM",successText:"TextInput-module_successText__2NMCP text-input_hds-text-input__success-text__3EOiy",infoText:"TextInput-module_infoText__zHOGs text-input_hds-text-input__info-text__3bqzy",invalid:"TextInput-module_invalid__2iYo2 text-input_hds-text-input--invalid__1UfKC",success:"TextInput-module_success__1kDOm text-input_hds-text-input--success__3dm2J",readOnly:"TextInput-module_readOnly__j615N undefined",buttonWrapper:"TextInput-module_buttonWrapper___filA text-input_hds-text-input__buttons__1RMzT",button:"TextInput-module_button__1ySMX text-input_hds-text-input__button__1Fh0I"};(0,l.s)("@keyframes text-input_fadeIn__2IDZ8{0%{opacity:0}to{opacity:1}}.text-input_hds-text-input__2LODq{--border-width:2px;--outline-width:3px;--input-height:56px;--textarea-height:149px;--icon-size:var(--spacing-m);--helper-color-default:var(--color-black-60);--helper-color-invalid:var(--color-error);--helper-color-success:var(--color-success);--helper-color-info:var(--color-black-90);--helper-color-info-icon:var(--color-coat-of-arms);--icon-color-invalid:var(--color-error);--input-background-default:var(--color-white);--input-background-disabled:var(--color-black-10);--input-border-color-default:var(--color-black-50);--input-border-color-hover:var(--color-black-90);--input-border-color-focus:var(--color-black-90);--input-border-color-invalid:var(--color-error);--input-border-color-disabled:var(--color-black-10);--input-border-color-success:var(--color-success);--input-color-default:var(--color-black-90);--input-color-disabled:var(--color-black-40);--label-color-default:var(--color-black-90);--label-color-invalid:var(--color-black-90);--placeholder-color:var(--color-black-60)}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C{-webkit-appearance:none;background-color:var(--input-background-default);border:var(--border-width) solid var(--input-border-color-default);border-radius:0;box-sizing:border-box;color:var(--input-color-default);font-family:inherit;font-size:1.125em;height:var(--input-height);line-height:normal;margin:0;padding:0 var(--spacing-s);width:100%;will-change:transform,box-shadow}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C:hover{border-color:var(--input-border-color-hover);transition:border-color 85ms ease-out}.text-input_hds-text-input__input-wrapper__1OqYG:focus-within .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-focus);outline:none}.text-input_hds-text-input__2LODq.text-input_hds-text-input--invalid__1UfKC .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-invalid)}.text-input_hds-text-input__2LODq.text-input_hds-text-input--success__3dm2J .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-success)}.text-input_hds-text-input__input-wrapper__1OqYG:focus-within .text-input_hds-text-input__input__GJm5C:not([readonly]){box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);transform:translateZ(0);transition:85ms ease-out;transition-property:box-shadow,transform}.text-input_hds-text-input__label__15F2V{color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.text-input_hds-text-input--invalid__1UfKC .text-input_hds-text-input__label__15F2V{color:var(--label-color-invalid);transition:color 85ms linear}.text-input_hds-text-input__required__z3Hm0{color:var(--color-black-90);display:inline-block;font-size:var(--fontsize-body-xl);line-height:1;margin-left:var(--spacing-2-xs);transform:translateY(var(--spacing-3-xs))}.text-input_hds-text-input__input-wrapper__1OqYG{display:flex;position:relative}.text-input_hds-text-input__2LODq textarea.text-input_hds-text-input__input__GJm5C{font-family:inherit;height:var(--textarea-height);margin:0;min-height:var(--input-height);overflow:auto;padding:var(--spacing-s);resize:vertical}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C::-moz-placeholder{color:var(--placeholder-color);opacity:1}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C::placeholder{color:var(--placeholder-color);opacity:1}.text-input_hds-text-input__helper-text__3V2KM{color:var(--helper-color-default)}.text-input_hds-text-input__error-text__1GLYk,.text-input_hds-text-input__helper-text__3V2KM{display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);white-space:pre-line}.text-input_hds-text-input__error-text__1GLYk{color:var(--helper-color-invalid);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.text-input_hds-text-input__error-text__1GLYk:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__error-text__1GLYk:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--icon-color-invalid);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__success-text__3EOiy{color:var(--helper-color-success);display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative;white-space:pre-wrap}.text-input_hds-text-input__success-text__3EOiy:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__success-text__3EOiy:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--helper-color-success);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__info-text__3bqzy{color:var(--helper-color-info);display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.text-input_hds-text-input__info-text__3bqzy:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__info-text__3bqzy:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--helper-color-info-icon);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C[disabled]{background-color:var(--input-background-disabled);border-color:var(--input-border-color-disabled);color:var(--input-color-disabled);cursor:not-allowed}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C[readonly]{background-color:transparent;border:0;color:var(--input-color-default);padding:0;-webkit-text-fill-color:var(--input-color-default)}.text-input_hds-text-input__buttons__1RMzT{align-items:center;bottom:0;display:flex;font-size:1rem;justify-content:center;margin-right:calc(var(--spacing-s) - var(--spacing-xs) / 2);position:absolute;right:0;top:0}.text-input_hds-text-input__button__1Fh0I{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;display:flex;font:inherit;outline:none;padding:var(--spacing-xs) calc(var(--spacing-xs) / 2)}.text-input_hds-text-input__button__1Fh0I:focus{outline:var(--outline-width) solid var(--color-focus-outline)}.TextInput-module_root__2CMNr{position:relative}.TextInput-module_input__1BlHi.TextInput-module_hasButton__2KCM1{padding-right:calc(2 * var(--spacing-s) + 1.5rem)}.TextInput-module_button__1ySMX:disabled{cursor:not-allowed}.TextInput-module_button__1ySMX:focus{outline:var(--outline-width) solid var(--color-focus-outline)}");const s=e=>{let{children:t,className:a="",errorText:l,helperText:s,hideLabel:d=!1,id:c,invalid:u=!1,isAriaLabelledBy:p=!1,label:h,labelId:m,onBlur:_,required:b=!1,style:g,successText:f,infoText:x,tooltipLabel:v,tooltipText:E,tooltipButtonLabel:y}=e;return n.createElement("div",{onBlur:_,className:(0,i.c)(o.root,u&&o.invalid,f&&o.success,a),style:g},h&&n.createElement(r.F,{id:m,inputId:c,isAriaLabelledBy:p,hidden:d,label:h,required:b,tooltipLabel:v,tooltipButtonLabel:y,tooltipText:E}),n.createElement("div",{className:(0,i.c)(o.inputWrapper)},t),l&&n.createElement("div",{className:o.errorText,id:c+"-error"},l),f&&n.createElement("div",{className:o.successText,id:c+"-success"},f),x&&n.createElement("div",{className:o.infoText,id:c+"-info"},x),s&&n.createElement("div",{className:o.helperText,id:c+"-helper"},s))}},83428:function(e,t,a){a.d(t,{S:function(){return d}});var n=a(80136),l=a(67294),i=a(7444),r=a(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,i.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const s=e=>{let{icon:t}=e;return l.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},t)},d=e=>{var{children:t,className:a,dataTestId:i,type:d="neutral",iconLeft:c}=e,u=(0,n._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(o.statusLabel,o[d],c&&o.statusLabelWithIcon,a),"data-testid":i},u),c&&l.createElement(s,{icon:c}),t)}},24155:function(e,t,a){a.d(t,{T:function(){return s}});var n=a(80136),l=a(67294),i=a(93667),r=a(34300),o=a(37776);const s=l.forwardRef(((e,t)=>{var{className:a="",children:s,disabled:d=!1,defaultValue:c,errorText:u,helperText:p,hideLabel:h,invalid:m,id:_,label:b,onChange:g=(()=>null),required:f,style:x,successText:v,infoText:E,tooltipLabel:y,tooltipText:T,tooltipButtonLabel:w,type:z="text",buttonIcon:k,buttonAriaLabel:L,onButtonClick:C}=e,I=(0,n._)(e,["className","children","disabled","defaultValue","errorText","helperText","hideLabel","invalid","id","label","onChange","required","style","successText","infoText","tooltipLabel","tooltipText","tooltipButtonLabel","type","buttonIcon","buttonAriaLabel","onButtonClick"]);const N={className:a,errorText:u,helperText:p,hideLabel:h,id:_,invalid:m,label:b,required:f,style:x,successText:v,infoText:E,tooltipLabel:y,tooltipText:T,tooltipButtonLabel:w},F=(0,o.c)(_,p,u,v,E),S=Boolean(k&&C);return l.createElement(i.I,Object.assign({},N),l.createElement("input",Object.assign({className:(0,r.c)(i.t.input,S&&i.t.hasButton),defaultValue:c,disabled:d,id:_,onChange:g,ref:t,required:f,type:z,"aria-describedby":F.length>0?F:null},I)),S&&l.createElement("div",{className:i.t.buttonWrapper},l.createElement("button",{className:i.t.button,disabled:d,type:"button",onClick:C,"aria-label":L},k)),s)}))},37776:function(e,t,a){a.d(t,{c:function(){return n}});var n=(e,t,a,n,l)=>[t&&e+"-helper",a&&e+"-error",n&&e+"-success",l&&e+"-info"].filter((e=>e)).join(" ")},91950:function(e,t,a){a.r(t);var n=a(11151),l=a(67294),i=a(61538),r=a(24155),o=a(73831);const s=e=>{let{children:t,pageContext:a}=e;return l.createElement(o.default,{pageContext:a},t)};function d(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",em:"em",strong:"strong",h4:"h4",p:"p"},(0,n.ah)(),e.components),{PlaygroundPreview:a,InternalLink:o}=t;return o||c("InternalLink",!0),a||c("PlaygroundPreview",!0),l.createElement(l.Fragment,null,l.createElement(t.h2,{id:"usage",style:{position:"relative"}},"Usage",l.createElement(t.a,{href:"#usage","aria-label":"usage permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h3,{id:"example",style:{position:"relative"}},"Example",l.createElement(t.a,{href:"#example","aria-label":"example permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a,null,l.createElement(i.F,{heading:"Applicant information",style:{maxWidth:"400px"}},l.createElement(r.T,{id:"first-name",name:"first-name",label:"First name"}),l.createElement(r.T,{id:"last-name",name:"last-name",label:"Last name",style:{marginTop:"12px"}}),l.createElement(r.T,{id:"social-security-number",name:"social-security-number",label:"Social security number",placeholder:"Eg. 111299-1234",style:{marginTop:"12px"}}))),"\n",l.createElement(t.h3,{id:"principles",style:{position:"relative"}},"Principles",l.createElement(t.a,{href:"#principles","aria-label":"principles permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,"The Fieldset component should only contain form elements such as input fields and form controls. See ",l.createElement(o,{href:"/patterns/forms/form-building"},"HDS Form pattern documentation")," for more information about available form elements.","\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,"It is recommended that Fieldsets always contain at least two (2) form elements."),"\n"),"\n"),"\n",l.createElement(t.li,null,"As a rule of thumb, if a group of form elements require a heading, the usage of a Fieldset is recommended.","\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,"For example, multiple input fields related to inputting user's address can be grouped together with a Fieldset with a heading \"",l.createElement(t.em,null,"Address"),'".'),"\n"),"\n"),"\n",l.createElement(t.li,null,"A heading must be given to the Fieldset. The heading should be clear and describe the input group.","\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,'A good heading describes why the form element inside the Fieldset are grouped together. For example, a heading "',l.createElement(t.em,null,"Guardian information"),"\" tells the user that the following elements are meant to input personal information related to the child's guardian."),"\n"),"\n"),"\n",l.createElement(t.li,null,l.createElement(t.strong,null,"HDS Fieldset does not style the content in any way.")," Depending on the layout of the service, you may have to add space between the inputs to distinguish them from each other."),"\n",l.createElement(t.li,null,"Avoid using Fieldsets if the form elements are only loosely related. Use a standard heading element instead."),"\n",l.createElement(t.li,null,"For grouping checkboxes or radio buttons, use ",l.createElement(o,{href:"/components/selection-group"},"HDS Selection group component")," instead."),"\n"),"\n",l.createElement(t.h3,{id:"variations",style:{position:"relative"}},"Variations",l.createElement(t.a,{href:"#variations","aria-label":"variations permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h4,{id:"default",style:{position:"relative"}},"Default",l.createElement(t.a,{href:"#default","aria-label":"default permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"The default HDS Fieldset is a visually light since it omits the borders that are present in the default HTML fieldset. It is well suited for forms with a relatively low amount of fields where input groups are easily perceivable even without Fieldset borders."),"\n",l.createElement(a,null,l.createElement(i.F,{heading:"Applicant information",style:{maxWidth:"400px"},helperText:"Assistive text"},l.createElement(r.T,{id:"first-name-1",name:"first-name",label:"First name"}),l.createElement(r.T,{id:"last-name-1",name:"last-name",label:"Last name",style:{marginTop:"12px"}}),l.createElement(r.T,{id:"social-security-number-1",name:"social-security-number",label:"Social security number",placeholder:"Eg. 111299-1234",style:{marginTop:"12px"}}))),"\n",l.createElement(t.h4,{id:"with-border",style:{position:"relative"}},"With border",l.createElement(t.a,{href:"#with-border","aria-label":"with border permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"This Fieldset variant includes visual borders that are often present in the default HTML fieldsets. The borders help to distinguish groups from each other and they are useful when the form contains a large amount of form elements."),"\n",l.createElement(t.p,null,"Border variant is also useful when the form contains multiple form elements with a same label. For example, when the same contact information is asked for multiple different people in the same form."),"\n",l.createElement(a,null,l.createElement(i.F,{heading:"Applicant information",border:!0,style:{maxWidth:"400px"}},l.createElement(r.T,{id:"first-name-2",name:"first-name",label:"First name"}),l.createElement(r.T,{id:"last-name-2",name:"last-name",label:"Last name",style:{marginTop:"12px"}}),l.createElement(r.T,{id:"social-security-number-2",name:"social-security-number",label:"Social security number",placeholder:"Eg. 111299-1234",style:{marginTop:"12px"}}))),"\n",l.createElement(t.h4,{id:"with-tooltip",style:{position:"relative"}},"With tooltip",l.createElement(t.a,{href:"#with-tooltip","aria-label":"with tooltip permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"A Fieldset can be provided with additional tooltip. Tooltip information should be considered as extra information, for example, why this information is gathered or how is it used. You can find more information about Tooltips how they are used from the ",l.createElement(o,{href:"/components/tooltip"},"Tooltip documentation page"),"."),"\n",l.createElement(a,null,l.createElement(i.F,{heading:"Applicant information",style:{maxWidth:"400px"},tooltipText:"tooltip text",tooltipLabel:"tooltip text aria label",tooltipButtonLabel:"tooltip button aria label"},l.createElement(r.T,{id:"first-name-1",name:"first-name",label:"First name"}),l.createElement(r.T,{id:"last-name-1",name:"last-name",label:"Last name",style:{marginTop:"12px"}}),l.createElement(r.T,{id:"social-security-number-1",name:"social-security-number",label:"Social security number",placeholder:"Eg. 111299-1234",style:{marginTop:"12px"}}))))}function c(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){return void 0===e&&(e={}),l.createElement(s,e,l.createElement(d,e))}},73831:function(e,t,a){a.r(t);var n=a(11151),l=a(67294),i=a(83428),r=a(57674),o=a(89482),s=(a(18607),a(26127));function d(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,n.ah)(),e.components);return s.Z||c("PageTabs",!1),s.Z.Tab||c("PageTabs.Tab",!0),s.Z.TabList||c("PageTabs.TabList",!0),s.Z.TabPanel||c("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"fieldset",style:{position:"relative"}},"Fieldset",l.createElement(t.a,{href:"#fieldset","aria-label":"fieldset permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(i.S,{type:"info"},"Stable"),l.createElement(i.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(o.Z,null,"Fieldset groups multiple related form input fields together by giving them a common legend heading."),"\n",l.createElement(s.Z,{pageContext:e.pageContext},l.createElement(s.Z.TabList,null,l.createElement(s.Z.Tab,{href:"/"},"Usage"),l.createElement(s.Z.Tab,{href:"/code"},"Code"),l.createElement(s.Z.Tab,{href:"/accessibility"},"Accessibility")),l.createElement(s.Z.TabPanel,null,e.children)))}function c(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,n.ah)(),e.components);return t?l.createElement(t,e,l.createElement(d,e)):d(e)}},89482:function(e,t,a){var n=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:l={},children:i}=e;return n.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...l}},i)}},26127:function(e,t,a){var n=a(67294),l=a(14160),i=a(94671);const r="PageTabList",o="PageTabPanel",s="PageTab",d=e=>{var t;let{pageContext:a,children:d}=e;const c=a.frontmatter.slug,u=Array.isArray(d)?d:[d],p=u.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===r)),h=u.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===o)),m=null===(t=p.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===s)),_=m.findIndex((e=>c.endsWith(e.props.href))),b=-1===_?0:_,g=0===b?c:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(c);return n.createElement(i.a,{initiallyActiveTab:b},n.createElement(i.a.TabList,{className:"page-tabs-list"},m.map((e=>n.createElement(i.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?g:g+e.props.href))},e.props.children)))),m.map(((e,t)=>n.createElement(i.a.TabPanel,{key:e.props.href},b===t?h.props.children:n.createElement("div",null)))))},c=e=>{let{children:t}=e;return n.createElement(i.a.TabList,null,t)};c.componentName=r;const u=e=>{let{href:t,slug:a,children:l}=e;return n.createElement(i.a.Tab,null,l)};u.componentName=s;const p=e=>{let{children:t}=e;return n.createElement(i.a.TabPanel,null,t)};p.componentName=o,d.TabList=c,d.Tab=u,d.TabPanel=p,t.Z=d},57674:function(e,t,a){var n=a(67294),l=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return n.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},n.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>n.createElement("li",{key:t},n.createElement("span",{className:"status-name"},t),n.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-fieldset-tabs-mdx-0bc05792c89bbb9ffb2b.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-fieldset-tabs-mdx-0bc05792c89bbb9ffb2b.js
new file mode 100644
index 00000000000..570485c67f5
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-fieldset-tabs-mdx-0bc05792c89bbb9ffb2b.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[9933],{83428:function(e,t,a){a.d(t,{S:function(){return o}});var s=a(80136),l=a(67294),n=a(7444),r=a(34300),c={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const i=e=>{let{icon:t}=e;return l.createElement("span",{className:c.statusLabelIcon,"aria-hidden":"true"},t)},o=e=>{var{children:t,className:a,dataTestId:n,type:o="neutral",iconLeft:u}=e,b=(0,s._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(c.statusLabel,c[o],u&&c.statusLabelWithIcon,a),"data-testid":n},b),u&&l.createElement(i,{icon:u}),t)}},73831:function(e,t,a){a.r(t);var s=a(11151),l=a(67294),n=a(83428),r=a(57674),c=a(89482),i=(a(18607),a(26127));function o(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,s.ah)(),e.components);return i.Z||u("PageTabs",!1),i.Z.Tab||u("PageTabs.Tab",!0),i.Z.TabList||u("PageTabs.TabList",!0),i.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"fieldset",style:{position:"relative"}},"Fieldset",l.createElement(t.a,{href:"#fieldset","aria-label":"fieldset permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(n.S,{type:"info"},"Stable"),l.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(c.Z,null,"Fieldset groups multiple related form input fields together by giving them a common legend heading."),"\n",l.createElement(i.Z,{pageContext:e.pageContext},l.createElement(i.Z.TabList,null,l.createElement(i.Z.Tab,{href:"/"},"Usage"),l.createElement(i.Z.Tab,{href:"/code"},"Code"),l.createElement(i.Z.Tab,{href:"/accessibility"},"Accessibility")),l.createElement(i.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,s.ah)(),e.components);return t?l.createElement(t,e,l.createElement(o,e)):o(e)}},89482:function(e,t,a){var s=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:l={},children:n}=e;return s.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...l}},n)}},26127:function(e,t,a){var s=a(67294),l=a(14160),n=a(94671);const r="PageTabList",c="PageTabPanel",i="PageTab",o=e=>{var t;let{pageContext:a,children:o}=e;const u=a.frontmatter.slug,b=Array.isArray(o)?o:[o],d=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===r)),m=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===c)),h=null===(t=d.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===i)),p=h.findIndex((e=>u.endsWith(e.props.href))),_=-1===p?0:p,f=0===_?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return s.createElement(n.a,{initiallyActiveTab:_},s.createElement(n.a.TabList,{className:"page-tabs-list"},h.map((e=>s.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),h.map(((e,t)=>s.createElement(n.a.TabPanel,{key:e.props.href},_===t?m.props.children:s.createElement("div",null)))))},u=e=>{let{children:t}=e;return s.createElement(n.a.TabList,null,t)};u.componentName=r;const b=e=>{let{href:t,slug:a,children:l}=e;return s.createElement(n.a.Tab,null,l)};b.componentName=i;const d=e=>{let{children:t}=e;return s.createElement(n.a.TabPanel,null,t)};d.componentName=c,o.TabList=u,o.Tab=b,o.TabPanel=d,t.Z=o},57674:function(e,t,a){var s=a(67294),l=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return s.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},s.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>s.createElement("li",{key:t},s.createElement("span",{className:"status-name"},t),s.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-file-input-accessibility-mdx-cb5929d6e7acc9074e4a.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-file-input-accessibility-mdx-cb5929d6e7acc9074e4a.js
new file mode 100644
index 00000000000..d42c26e7535
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-file-input-accessibility-mdx-cb5929d6e7acc9074e4a.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[9166,2965],{83428:function(e,t,a){a.d(t,{S:function(){return o}});var l=a(80136),s=a(67294),n=a(7444),r=a(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const c=e=>{let{icon:t}=e;return s.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},t)},o=e=>{var{children:t,className:a,dataTestId:n,type:o="neutral",iconLeft:u}=e,d=(0,l._)(e,["children","className","dataTestId","type","iconLeft"]);return s.createElement("span",Object.assign({className:(0,r.c)(i.statusLabel,i[o],u&&i.statusLabelWithIcon,a),"data-testid":n},d),u&&s.createElement(c,{icon:u}),t)}},35075:function(e,t,a){a.r(t);var l=a(11151),s=a(67294),n=a(91388);const r=e=>{let{children:t,pageContext:a}=e;return s.createElement(n.default,{pageContext:a},t)};function i(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li"},(0,l.ah)(),e.components);return s.createElement(s.Fragment,null,s.createElement(t.h2,{id:"accessibility",style:{position:"relative"}},"Accessibility",s.createElement(t.a,{href:"#accessibility","aria-label":"accessibility permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.h3,{id:"pay-attention-to",style:{position:"relative"}},"Pay attention to",s.createElement(t.a,{href:"#pay-attention-to","aria-label":"pay attention to permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.ul,null,"\n",s.createElement(t.li,null,"While dragging and dropping files is not considered to be accessible, HDS will always include the default input below the drag and drop area. Clicking the drag and drop area also opens the device-specific file browser."),"\n",s.createElement(t.li,null,"For selecting files, HDS utilises the file browser native to the user's device. While all devices' file browsers do not have the best accessibility features, they are often the most familiar way of selecting files for the user."),"\n"))}t.default=function(e){return void 0===e&&(e={}),s.createElement(r,e,s.createElement(i,e))}},91388:function(e,t,a){a.r(t);var l=a(11151),s=a(67294),n=a(83428),r=a(57674),i=a(89482),c=(a(18607),a(26127));function o(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,l.ah)(),e.components);return c.Z||u("PageTabs",!1),c.Z.Tab||u("PageTabs.Tab",!0),c.Z.TabList||u("PageTabs.TabList",!0),c.Z.TabPanel||u("PageTabs.TabPanel",!0),s.createElement(s.Fragment,null,s.createElement(t.h1,{id:"fileinput",style:{position:"relative"}},"FileInput",s.createElement(t.a,{href:"#fileinput","aria-label":"fileinput permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement("div",{class:"status-label-description"},s.createElement(n.S,{type:"info"},"Stable"),s.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),s.createElement(r.Z)),"\n",s.createElement(i.Z,null,"A file input helps the user to browse and select one or multiple files to be uploaded to the service."),"\n",s.createElement(c.Z,{pageContext:e.pageContext},s.createElement(c.Z.TabList,null,s.createElement(c.Z.Tab,{href:"/"},"Usage"),s.createElement(c.Z.Tab,{href:"/code"},"Code"),s.createElement(c.Z.Tab,{href:"/accessibility"},"Accessibility"),s.createElement(c.Z.Tab,{href:"/security"},"Security")),s.createElement(c.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,l.ah)(),e.components);return t?s.createElement(t,e,s.createElement(o,e)):o(e)}},89482:function(e,t,a){var l=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:s={},children:n}=e;return l.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...s}},n)}},26127:function(e,t,a){var l=a(67294),s=a(14160),n=a(94671);const r="PageTabList",i="PageTabPanel",c="PageTab",o=e=>{var t;let{pageContext:a,children:o}=e;const u=a.frontmatter.slug,d=Array.isArray(o)?o:[o],b=d.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===r)),h=d.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===i)),m=null===(t=b.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===c)),p=m.findIndex((e=>u.endsWith(e.props.href))),f=-1===p?0:p,_=0===f?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return l.createElement(n.a,{initiallyActiveTab:f},l.createElement(n.a.TabList,{className:"page-tabs-list"},m.map((e=>l.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,s.navigate)(""+("/"===e.props.href?_:_+e.props.href))},e.props.children)))),m.map(((e,t)=>l.createElement(n.a.TabPanel,{key:e.props.href},f===t?h.props.children:l.createElement("div",null)))))},u=e=>{let{children:t}=e;return l.createElement(n.a.TabList,null,t)};u.componentName=r;const d=e=>{let{href:t,slug:a,children:s}=e;return l.createElement(n.a.Tab,null,s)};d.componentName=c;const b=e=>{let{children:t}=e;return l.createElement(n.a.TabPanel,null,t)};b.componentName=i,o.TabList=u,o.Tab=d,o.TabPanel=b,t.Z=o},57674:function(e,t,a){var l=a(67294),s=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return l.createElement(s.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},l.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>l.createElement("li",{key:t},l.createElement("span",{className:"status-name"},t),l.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-file-input-code-mdx-27937b20aa4ddfd28fc6.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-file-input-code-mdx-27937b20aa4ddfd28fc6.js
new file mode 100644
index 00000000000..6d2b9a1faaa
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-file-input-code-mdx-27937b20aa4ddfd28fc6.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[1966,2965],{96234:function(e,t,l){l.d(t,{F:function(){return N},f:function(){return b}});var n=l(15785),a=l(67294),i=l(5871),r=l.n(i),o=l(37776),s=l(34300),c=l(93667),u=l(7444),d=l(52708),p=l(63483),m=l(35828),h=l(17882);(0,u.s)(".FileInput-module_fileInput__hClRc{border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.FileInput-module_dragAndDropHelperText__31Ljw{color:var(--label-color-default,var(--color-black-90));display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.FileInput-module_dragAndDrop__3d3xe{align-items:center;border:2px dotted var(--color-coat-of-arms);box-sizing:border-box;color:var(--color-coat-of-arms);cursor:pointer;display:flex;justify-content:center;margin-top:var(--spacing-xs);max-width:500px;padding:var(--spacing-s);width:100%}.FileInput-module_dragAndDropActive__3hREg{background-color:var(--color-silver-light);border-color:var(--color-coat-of-arms-dark);color:var(--color-coat-of-arms-dark)}.FileInput-module_dragAndDropDisabled__Ek-uE{border-color:var(--color-black-50);color:var(--color-black-50);cursor:not-allowed}.FileInput-module_dragAndDropLabel__1pDQN{align-items:center;display:flex}.FileInput-module_dragAndDropLabelText__3AJ4P{margin-left:var(--spacing-s)}.FileInput-module_dragAndDropHelperText__31Ljw{margin:var(--spacing-s) 0 var(--spacing-2-xs)}.FileInput-module_fileInputContainer__9N5TG{flex:1}.FileInput-module_fileInputWrapper__1E8Jf{display:inline-block;margin:var(--spacing-2-xs) 0;position:relative}.FileInput-module_fileInputWrapper__1E8Jf:focus-within>button:after{--size:calc(100% + calc(var(--outline-width) * 2 + var(--border-width) * 2 + var(--outline-gutter) * 2));border-color:var(--color-focus-outline)}.FileInput-module_fileList__drFD1{list-style:none;margin:var(--spacing-s) 0 0;padding:0}.FileInput-module_fileListItem__2fomf{align-items:flex-start;background-color:var(--color-info-light);border-bottom:2px dotted var(--color-coat-of-arms);box-sizing:border-box;display:flex;max-width:100%;padding:var(--spacing-s) var(--spacing-2-xs);width:500px}.FileInput-module_fileListItem__2fomf+.FileInput-module_fileListItem__2fomf{margin-top:var(--spacing-s)}.FileInput-module_fileListItemTitle__15-8y{align-items:flex-start;display:flex;flex:1;flex-wrap:nowrap;font-size:var(--fontsize-body-s);margin:2px var(--spacing-xs) 0 var(--spacing-2-xs)}.FileInput-module_fileListItemName__1BqM7{hyphens:auto;word-break:break-word}.FileInput-module_fileListItemSize__1ZMYb{margin-left:var(--spacing-2-xs);text-align:right;white-space:nowrap}.FileInput-module_fileListItemButton__3HfCX{--file-list-item-button-y-offset:calc(-1 * var(--spacing-2-xs) - 2px);display:flex;margin:var(--file-list-item-button-y-offset) auto var(--file-list-item-button-y-offset) 0}.FileInput-module_fileListItemButtonLabel__2FIPm{margin-left:var(--spacing-3-xs)}");const _=e=>({file:e,uiId:r()(e.name)}),f=e=>e.file,b=e=>{if(0===e)return"0 B";const t=Math.floor(Math.log(e)/Math.log(1024)),l=e/Math.pow(1024,t);return(t<2||l%1==0?Math.round(l):l.toFixed(1))+" "+["B","KB","MB","GB","TB"][t]},g=e=>({en:"No file has been selected.",fi:"Yhtään tiedostoa ei ole valittu.",sv:"Ingen fil har valts."}[e]),v=(e,t)=>({en:"Remove "+t+" from the added files.",fi:"Poista tiedosto "+t+" lisätyistä tiedostoista.",sv:"Ta bort "+t+" från filerna som lagts till."}[e]),x=(e,t)=>({en:(0===t?"1 file":t+" files")+" added.",fi:(0===t?"1 tiedosto":t+" tiedostoa")+" added.",sv:(0===t?"1 fil":t+" filer")+" har lagts till."}[e]),E=(e,t,l)=>{const n=t===l?t:t+"/"+l;return{en:n+" file(s) added.",fi:n+" tiedosto(a) lisätty.",sv:n+" fil(er) har lagts till."}[e]},y=(e,t)=>{const l=b(t);return{en:"The maximum file size is "+l+".",fi:"Suurin sallittu tiedostokoko on "+l+".",sv:"Den maximala filstorleken är "+l+"."}[e]},w=(e,t)=>{const l=e.split(",");if(1===l.length)return l.toString();const n=l.pop();return l.join(", ")+" "+t+" "+n},I=(e,t)=>({en:"Only "+w(t,"and")+" files.",fi:"Vain "+w(t,"ja")+" tiedostoja.",sv:"Endast "+w(t,"och")+" filer."}[e]),k=(e,t,l)=>{const n=I(e,l);return{en:"The file type, "+t.name+", is not supported. "+n,fi:"Tiedoston, "+t.name+", tyyppi ei vastaa hyväksyttyjä tiedostotyppejä. "+n,sv:"Filformatet, "+t.name+", stöds inte. "+n}[e]},T=(e,t,l)=>{const n=b(t.size);return{en:"File, "+t.name+", is too large ("+n+"). "+y(e,l),fi:"Tiedosto, "+t.name+" on liian suuri ("+n+"). "+y(e,l),sv:"Filen, "+t.name+", är för stor ("+n+"). "+y(e,l)}[e]};var L,C;(C=L||(L={})).accept="accept",C.maxSize="maxSize";const z=(e,t)=>l=>{const n=(e=>{if(!e||"string"!=typeof e||""===e)return console.warn("FileInput: Path must be a non-empty string. Path is now "+JSON.stringify(e)),"";const t=e.lastIndexOf(".");if(-1===t)return console.warn("FileInput: File is missing extension"),"";const l=e.substring(t);return l.length<=1?(console.warn("FileInput: File is missing extension"),""):l})(l.name),a=l.type,i=t.split(",").map((e=>e.trim())),r=!!i.find((e=>e.includes(a)||e.includes(a.split("/")[0]+"/*"))),o=!!i.find((e=>e===n));return r||o||{type:L.accept,text:k(e,l,t)}},F=(e,t)=>l=>l.size<=t||{type:L.maxSize,text:T(e,l,t)},N=e=>{let{id:t,label:l,buttonLabel:i,language:r="fi",defaultValue:u,disabled:w,dragAndDrop:k,dragAndDropLabel:T,dragAndDropInputLabel:L,maxSize:C,className:N="",successText:D,errorText:H,helperText:M,infoText:S,onChange:V,required:j,style:A,accept:O,multiple:Z,tooltipLabel:B,tooltipButtonLabel:P,tooltipText:R}=e;const q=(0,a.useRef)(null),G=(0,a.useRef)(!1),[J,Y]=(0,a.useState)([]),[W,K]=(0,a.useState)(),[X,U]=(0,a.useState)(),[Q,$]=(0,a.useState)(),ee=J&&J.length>0,te=t+"-list",le=(0,a.useRef)(null),ne=(0,a.useRef)(),ae=(0,a.useRef)(null),[ie,re]=(0,a.useState)(!1),oe=[O&&I(r,O),C&&y(r,C)].filter((e=>!!e)).join(" "),se=M||oe,ce=H||X,ue=S||W,de={className:N,helperText:se,successText:D||Q,errorText:ce,infoText:w?void 0:ue,id:t,label:l,required:j,style:A,tooltipLabel:B,tooltipButtonLabel:P,tooltipText:R},pe=()=>{q.current&&q.current.click()},me=()=>{q.current&&q.current.focus()},he=()=>{$(void 0),K(void 0),U(void 0),ne.current=null},_e=[O?z(r,O):void 0,C?F(r,C):void 0].filter((e=>!!e)),fe=e=>0===_e.length?{validFiles:e,validationErrors:[]}:e.reduce(((e,t)=>{const l=_e.map((e=>e(t))).filter((e=>!0!==e));return l.length>0?Object.assign(Object.assign({},e),{validationErrors:[].concat((0,n.Z)(e.validationErrors),[l])}):Object.assign(Object.assign({},e),{validFiles:[].concat((0,n.Z)(e.validFiles),[t])})}),{validFiles:[],validationErrors:[]}),be=(e,t)=>""+((e,t,l)=>{const n=t+"/"+l;return{en:"File processing failed for "+n+" files:\n",fi:"Tiedostonlisäys epäonnistui "+n+" tiedoston kohdalla:\n",sv:"Filprocesseringen av filerna "+n+" misslyckades:\n"}[e]})(r,e.length,t)+e.map((e=>"- "+e[0].text)).join("\n"),ge=e=>{if(V){const t=e.map(f);V(t)}q.current&&(q.current.value="")},ve=e=>{he(),Z?(e=>{if(e.length>0){const{validFiles:t,validationErrors:l}=fe(e);if(l.length>0&&U(be(l,e.length)),t.length>0){const l=t.map(_),a=[].concat((0,n.Z)(J),(0,n.Z)(l));Y(a),$(E(r,t.length,e.length)),ge(a)}}})(e):(e=>{if(e.length>0){const{validFiles:t,validationErrors:l}=fe(e);if(l.length>0)U(be(l,1));else{const e=[_(t[0])];Y(e),$(E(r,1,1)),ge(e)}}})(e)},xe=e=>{e.preventDefault(),e.stopPropagation(),re(!0)},Ee=e=>{e.preventDefault(),e.stopPropagation(),re(!1)};(0,a.useEffect)((()=>{G.current||(K(g(r)),G.current=!0)}),[K,r]),(0,a.useEffect)((()=>{if(!ee&&u&&q.current){const e=new DataTransfer;u.forEach((t=>{const l=new File([t],t.name,{type:t.type,lastModified:t.lastModified});e.items.add(l)})),q.current.files=e.files;const t=new Event("change",{bubbles:!0});q.current.dispatchEvent(t)}}),[u]);const ye=[(0,o.c)(t,se,ce,D,ue),ee&&te].filter((e=>!!e)).join(" ");return a.createElement(a.Fragment,null,a.createElement(c.I,Object.assign({},de),a.createElement("div",{className:"FileInput-module_fileInputContainer__9N5TG"},k&&a.createElement(a.Fragment,null,a.createElement("div",Object.assign({"aria-hidden":!0,className:(0,s.c)("FileInput-module_dragAndDrop__3d3xe",ie&&"FileInput-module_dragAndDropActive__3hREg",w&&"FileInput-module_dragAndDropDisabled__Ek-uE"),ref:ae},w?{}:{onClick:()=>pe(),onDragEnter:xe,onDragOver:xe,onDragLeave:Ee,onDrop:e=>{const{dataTransfer:t}=e;Ee(e),ve(Array.from(t.files))}}),a.createElement("div",{className:"FileInput-module_dragAndDropLabel__1pDQN"},a.createElement(d.I,{"aria-hidden":!0}),a.createElement("span",{className:"FileInput-module_dragAndDropLabelText__3AJ4P"},T||(e=>({en:"Drag files here",fi:"Raahaa tiedostot tähän",sv:"Dra filerna hit"}[e]))(r)))),a.createElement("div",{className:"FileInput-module_dragAndDropHelperText__31Ljw"},L||(e=>({en:"or browse from your device",fi:"tai valitse tiedostot laitteeltasi",sv:"eller välj filerna från din enhet"}[e]))(r))),a.createElement("div",{className:"FileInput-module_fileInputWrapper__1E8Jf"},a.createElement(h.B,{"aria-hidden":!0,tabIndex:-1,variant:"secondary",iconLeft:a.createElement(p.I,{"aria-hidden":!0}),onClick:e=>{e.preventDefault(),e.stopPropagation(),me(),pe()},disabled:w},i||((e,t)=>({en:"Add "+(t?"files":"a file"),fi:"Lisää "+(t?"tiedostoja":"tiedosto"),sv:"Välj "+(t?"filer":"en fil")}[e]))(r,Z)),a.createElement("input",Object.assign({type:"file",ref:q,id:t,disabled:w,required:j,"aria-describedby":ye,className:"FileInput-module_fileInput__hClRc",onChange:e=>{ve(Array.from(e.target.files))}},O?{accept:O}:{},Z?{multiple:Z}:{}))))),a.createElement("ul",{id:te,ref:le,tabIndex:-1,className:"FileInput-module_fileList__drFD1","aria-label":ee?x(r,J.length):g(r)},J.map(((e,t)=>a.createElement("li",{key:e.uiId,className:"FileInput-module_fileListItem__2fomf",tabIndex:-1,ref:e=>{e&&le.current&&ne.current===t&&e.focus()}},e.file.type.startsWith("image")?a.createElement(d.a,{"aria-hidden":!0}):a.createElement(d.b,{"aria-hidden":!0}),a.createElement("div",{className:"FileInput-module_fileListItemTitle__15-8y"},a.createElement("span",{className:"FileInput-module_fileListItemName__1BqM7"},e.file.name),a.createElement("span",{className:"FileInput-module_fileListItemSize__1ZMYb"},"(",b(e.file.size),")")),a.createElement(h.B,{onClick:l=>{l.preventDefault(),l.stopPropagation(),((e,t)=>{he();const l=J.filter((t=>t.uiId!==e.uiId));Y(l),l.length>0?(ne.current=t>0?t-1:0,K((e=>({en:"The file has been deleted.",fi:"Tiedosto poistettu.",sv:"Filen har tagits bort."}[e]))(r))):(me(),K(g(r))),ge(l)})(e,t)},variant:"supplementary",size:"small",theme:"black",iconLeft:a.createElement(m.I,null),"aria-label":v(r,e.file.name),className:"FileInput-module_fileListItemButton__3HfCX",disabled:w},(e=>({en:"Remove",fi:"Poista",sv:"Ta bort"}[e]))(r)))))))}},63483:function(e,t,l){l.d(t,{I:function(){return i}});var n=l(67294),a=l(32719);const i=e=>{let{ariaLabel:t="plus",ariaLabelledby:l,ariaHidden:i=!0,className:r="",color:o,size:s="s",style:c={}}=e;return n.createElement("svg",{className:[a.s.icon,a.s[s],r].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":l,"aria-hidden":i,color:o,style:c},n.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M13 6V11H18V13H13V18H11V13H6V11H11V6H13Z",fill:"currentColor"}))}},52708:function(e,t,l){l.d(t,{I:function(){return o},a:function(){return r},b:function(){return i}});var n=l(67294),a=l(32719);const i=e=>{let{ariaLabel:t="document",ariaLabelledby:l,ariaHidden:i=!0,className:r="",color:o,size:s="s",style:c={}}=e;return n.createElement("svg",{className:[a.s.icon,a.s[s],r].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":l,"aria-hidden":i,color:o,style:c},n.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M15 2L20 7V22H4V2H15ZM14 4V8H18L14 4ZM14.0083 4L18 8V20H6V4H14.0083ZM17 16H7V18H17V16ZM17 12H7V14H17V12ZM13 8H7V10H13V8Z",fill:"currentColor"}))},r=e=>{let{ariaLabel:t="photo",ariaLabelledby:l,ariaHidden:i=!0,className:r="",color:o,size:s="s",style:c={}}=e;return n.createElement("svg",{className:[a.s.icon,a.s[s],r].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":l,"aria-hidden":i,color:o,style:c},n.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M20 2V22H4V2H20ZM16 15C15.1401 15 14.7159 15.2223 13.88 16.0363L13.7071 16.2071C12.4113 17.5029 11.5828 18 10 18C8.50049 18 7.67799 17.5539 6.49379 16.4051L6 15.92V20H18V15.922L17.958 15.8813C17.2256 15.1936 16.8025 15 16 15ZM18 4H6L6.00114 13.4397C6.50287 13.6831 6.92886 14.0298 7.51078 14.5986L7.70711 14.7929C8.6613 15.7471 9.08282 16 10 16C10.8599 16 11.2841 15.7777 12.12 14.9637L12.2929 14.7929C13.5887 13.4971 14.4172 13 16 13C16.8098 13 17.4222 13.1301 18.0007 13.4308L18 4ZM10 6C11.6569 6 13 7.34315 13 9C13 10.6569 11.6569 12 10 12C8.34315 12 7 10.6569 7 9C7 7.34315 8.34315 6 10 6ZM10 8C9.44772 8 9 8.44772 9 9C9 9.55228 9.44772 10 10 10C10.5523 10 11 9.55228 11 9C11 8.44772 10.5523 8 10 8Z",fill:"currentColor"}))},o=e=>{let{ariaLabel:t="upload",ariaLabelledby:l,ariaHidden:i=!0,className:r="",color:o,size:s="s",style:c={}}=e;return n.createElement("svg",{className:[a.s.icon,a.s[s],r].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":l,"aria-hidden":i,color:o,style:c},n.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M12 1.63605L17.6569 7.2929L16.2426 8.70712L13 5.46505V18H11V5.46505L7.75736 8.70712L6.34315 7.2929L12 1.63605ZM5 15V20H19V15H21V22H3V15H5Z",fill:"currentColor"}))}},93667:function(e,t,l){l.d(t,{I:function(){return s},t:function(){return o}});var n=l(67294),a=l(7444),i=l(34300),r=l(41125),o={root:"TextInput-module_root__2CMNr text-input_hds-text-input__2LODq",inputWrapper:"TextInput-module_inputWrapper__3Rvel text-input_hds-text-input__input-wrapper__1OqYG",input:"TextInput-module_input__1BlHi text-input_hds-text-input__input__GJm5C",hasButton:"TextInput-module_hasButton__2KCM1",errorText:"TextInput-module_errorText__3pizm text-input_hds-text-input__error-text__1GLYk",helperText:"TextInput-module_helperText__2dLR6 text-input_hds-text-input__helper-text__3V2KM",invalidText:"TextInput-module_invalidText__1w4sm text-input_hds-text-input__helper-text__3V2KM",successText:"TextInput-module_successText__2NMCP text-input_hds-text-input__success-text__3EOiy",infoText:"TextInput-module_infoText__zHOGs text-input_hds-text-input__info-text__3bqzy",invalid:"TextInput-module_invalid__2iYo2 text-input_hds-text-input--invalid__1UfKC",success:"TextInput-module_success__1kDOm text-input_hds-text-input--success__3dm2J",readOnly:"TextInput-module_readOnly__j615N undefined",buttonWrapper:"TextInput-module_buttonWrapper___filA text-input_hds-text-input__buttons__1RMzT",button:"TextInput-module_button__1ySMX text-input_hds-text-input__button__1Fh0I"};(0,a.s)("@keyframes text-input_fadeIn__2IDZ8{0%{opacity:0}to{opacity:1}}.text-input_hds-text-input__2LODq{--border-width:2px;--outline-width:3px;--input-height:56px;--textarea-height:149px;--icon-size:var(--spacing-m);--helper-color-default:var(--color-black-60);--helper-color-invalid:var(--color-error);--helper-color-success:var(--color-success);--helper-color-info:var(--color-black-90);--helper-color-info-icon:var(--color-coat-of-arms);--icon-color-invalid:var(--color-error);--input-background-default:var(--color-white);--input-background-disabled:var(--color-black-10);--input-border-color-default:var(--color-black-50);--input-border-color-hover:var(--color-black-90);--input-border-color-focus:var(--color-black-90);--input-border-color-invalid:var(--color-error);--input-border-color-disabled:var(--color-black-10);--input-border-color-success:var(--color-success);--input-color-default:var(--color-black-90);--input-color-disabled:var(--color-black-40);--label-color-default:var(--color-black-90);--label-color-invalid:var(--color-black-90);--placeholder-color:var(--color-black-60)}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C{-webkit-appearance:none;background-color:var(--input-background-default);border:var(--border-width) solid var(--input-border-color-default);border-radius:0;box-sizing:border-box;color:var(--input-color-default);font-family:inherit;font-size:1.125em;height:var(--input-height);line-height:normal;margin:0;padding:0 var(--spacing-s);width:100%;will-change:transform,box-shadow}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C:hover{border-color:var(--input-border-color-hover);transition:border-color 85ms ease-out}.text-input_hds-text-input__input-wrapper__1OqYG:focus-within .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-focus);outline:none}.text-input_hds-text-input__2LODq.text-input_hds-text-input--invalid__1UfKC .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-invalid)}.text-input_hds-text-input__2LODq.text-input_hds-text-input--success__3dm2J .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-success)}.text-input_hds-text-input__input-wrapper__1OqYG:focus-within .text-input_hds-text-input__input__GJm5C:not([readonly]){box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);transform:translateZ(0);transition:85ms ease-out;transition-property:box-shadow,transform}.text-input_hds-text-input__label__15F2V{color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.text-input_hds-text-input--invalid__1UfKC .text-input_hds-text-input__label__15F2V{color:var(--label-color-invalid);transition:color 85ms linear}.text-input_hds-text-input__required__z3Hm0{color:var(--color-black-90);display:inline-block;font-size:var(--fontsize-body-xl);line-height:1;margin-left:var(--spacing-2-xs);transform:translateY(var(--spacing-3-xs))}.text-input_hds-text-input__input-wrapper__1OqYG{display:flex;position:relative}.text-input_hds-text-input__2LODq textarea.text-input_hds-text-input__input__GJm5C{font-family:inherit;height:var(--textarea-height);margin:0;min-height:var(--input-height);overflow:auto;padding:var(--spacing-s);resize:vertical}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C::-moz-placeholder{color:var(--placeholder-color);opacity:1}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C::placeholder{color:var(--placeholder-color);opacity:1}.text-input_hds-text-input__helper-text__3V2KM{color:var(--helper-color-default)}.text-input_hds-text-input__error-text__1GLYk,.text-input_hds-text-input__helper-text__3V2KM{display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);white-space:pre-line}.text-input_hds-text-input__error-text__1GLYk{color:var(--helper-color-invalid);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.text-input_hds-text-input__error-text__1GLYk:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__error-text__1GLYk:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--icon-color-invalid);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__success-text__3EOiy{color:var(--helper-color-success);display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative;white-space:pre-wrap}.text-input_hds-text-input__success-text__3EOiy:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__success-text__3EOiy:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--helper-color-success);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__info-text__3bqzy{color:var(--helper-color-info);display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.text-input_hds-text-input__info-text__3bqzy:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__info-text__3bqzy:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--helper-color-info-icon);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C[disabled]{background-color:var(--input-background-disabled);border-color:var(--input-border-color-disabled);color:var(--input-color-disabled);cursor:not-allowed}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C[readonly]{background-color:transparent;border:0;color:var(--input-color-default);padding:0;-webkit-text-fill-color:var(--input-color-default)}.text-input_hds-text-input__buttons__1RMzT{align-items:center;bottom:0;display:flex;font-size:1rem;justify-content:center;margin-right:calc(var(--spacing-s) - var(--spacing-xs) / 2);position:absolute;right:0;top:0}.text-input_hds-text-input__button__1Fh0I{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;display:flex;font:inherit;outline:none;padding:var(--spacing-xs) calc(var(--spacing-xs) / 2)}.text-input_hds-text-input__button__1Fh0I:focus{outline:var(--outline-width) solid var(--color-focus-outline)}.TextInput-module_root__2CMNr{position:relative}.TextInput-module_input__1BlHi.TextInput-module_hasButton__2KCM1{padding-right:calc(2 * var(--spacing-s) + 1.5rem)}.TextInput-module_button__1ySMX:disabled{cursor:not-allowed}.TextInput-module_button__1ySMX:focus{outline:var(--outline-width) solid var(--color-focus-outline)}");const s=e=>{let{children:t,className:l="",errorText:a,helperText:s,hideLabel:c=!1,id:u,invalid:d=!1,isAriaLabelledBy:p=!1,label:m,labelId:h,onBlur:_,required:f=!1,style:b,successText:g,infoText:v,tooltipLabel:x,tooltipText:E,tooltipButtonLabel:y}=e;return n.createElement("div",{onBlur:_,className:(0,i.c)(o.root,d&&o.invalid,g&&o.success,l),style:b},m&&n.createElement(r.F,{id:h,inputId:u,isAriaLabelledBy:p,hidden:c,label:m,required:f,tooltipLabel:x,tooltipButtonLabel:y,tooltipText:E}),n.createElement("div",{className:(0,i.c)(o.inputWrapper)},t),a&&n.createElement("div",{className:o.errorText,id:u+"-error"},a),g&&n.createElement("div",{className:o.successText,id:u+"-success"},g),v&&n.createElement("div",{className:o.infoText,id:u+"-info"},v),s&&n.createElement("div",{className:o.helperText,id:u+"-helper"},s))}},83428:function(e,t,l){l.d(t,{S:function(){return c}});var n=l(80136),a=l(67294),i=l(7444),r=l(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,i.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const s=e=>{let{icon:t}=e;return a.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:l,dataTestId:i,type:c="neutral",iconLeft:u}=e,d=(0,n._)(e,["children","className","dataTestId","type","iconLeft"]);return a.createElement("span",Object.assign({className:(0,r.c)(o.statusLabel,o[c],u&&o.statusLabelWithIcon,l),"data-testid":i},d),u&&a.createElement(s,{icon:u}),t)}},37776:function(e,t,l){l.d(t,{c:function(){return n}});var n=(e,t,l,n,a)=>[t&&e+"-helper",l&&e+"-error",n&&e+"-success",a&&e+"-info"].filter((e=>e)).join(" ")},78045:function(e,t,l){l.r(t);var n=l(11151),a=l(67294),i=l(96234),r=l(91388);const o=e=>{let{children:t,pageContext:l}=e;return a.createElement(r.default,{pageContext:l},t)};function s(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",h4:"h4",pre:"pre",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",strong:"strong",p:"p"},(0,n.ah)(),e.components),{Playground:l,IconCheckCircleFill:r,Link:o,ExternalLink:s,IconCrossCircle:u,InternalLink:d}=t;return s||c("ExternalLink",!0),r||c("IconCheckCircleFill",!0),u||c("IconCrossCircle",!0),d||c("InternalLink",!0),o||c("Link",!0),l||c("Playground",!0),a.createElement(a.Fragment,null,a.createElement(t.h2,{id:"code",style:{position:"relative"}},"Code",a.createElement(t.a,{href:"#code","aria-label":"code permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.h3,{id:"code-examples",style:{position:"relative"}},"Code examples",a.createElement(t.a,{href:"#code-examples","aria-label":"code examples permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.h4,{id:"default",style:{position:"relative"}},"Default",a.createElement(t.a,{href:"#default","aria-label":"default permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(l,{scope:{FileInput:i.F}},a.createElement(t.pre,null,a.createElement(t.code,{className:"language-jsx"},'import { FileInput } from \'hds-react\';\n\n() => {\n  const [file, setFile] = React.useState([]);\n  console.log(\'selected file\', file);\n  return <FileInput\n    id="file-input-default"\n    label="Choose a file"\n    language="en"\n    maxSize={1.5 * 1024 * 1024}\n    accept=".png,.jpg"\n    onChange={setFile}\n  />\n}\n'))),"\n",a.createElement(t.h3,{id:"with-drag-and-drop",style:{position:"relative"}},"With drag and drop",a.createElement(t.a,{href:"#with-drag-and-drop","aria-label":"with drag and drop permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(l,{scope:{FileInput:i.F}},a.createElement(t.pre,null,a.createElement(t.code,{className:"language-jsx"},'import { FileInput } from \'hds-react\';\n\n() => {\n  const [files, setFiles] = React.useState([]);\n  console.log(\'selected files\', files);\n  return <FileInput\n    multiple\n    dragAndDrop\n    id="file-input-drag-and-drop"\n    label="Drag and drop files here"\n    language="en"\n    accept=".png,.jpg"\n    onChange={setFiles}\n  />\n}\n'))),"\n",a.createElement(t.h3,{id:"with-default-value",style:{position:"relative"}},"With default value",a.createElement(t.a,{href:"#with-default-value","aria-label":"with default value permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(l,{scope:{FileInput:i.F}},a.createElement(t.pre,null,a.createElement(t.code,{className:"language-jsx"},"import { FileInput } from 'hds-react';\n\n() => {\n  const [files, setFiles] = React.useState([\n    new File(['string content'], 'dummy.txt', { type: 'text/plain' }),\n    new File(['string content with more text'], 'anotherDummy.txt', { type: 'text/plain' }),\n  ]);\n  console.log('selected files', files);\n  return <FileInput\n    multiple\n    id=\"file-input-default-value\"\n    language=\"en\"\n    onChange={setFiles}\n    defaultValue={files}\n  />\n}\n"))),"\n",a.createElement(t.h3,{id:"packages",style:{position:"relative"}},"Packages",a.createElement(t.a,{href:"#packages","aria-label":"packages permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Package"),a.createElement(t.th,null,"Included"),a.createElement(t.th,null,"Storybook link"),a.createElement(t.th,null,"Source link"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.strong,null,"HDS React")),a.createElement(t.td,null,a.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},a.createElement(r)," Yes ")),a.createElement(t.td,null,a.createElement(o,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-fileinput--single"},"View in Storybook")),a.createElement(t.td,null,a.createElement(s,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/blob/master/packages/react/src/components/fileInput/FileInput.tsx"},"View source"))),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.strong,null,"HDS Core")),a.createElement(t.td,null,a.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},a.createElement(u)," No ")),a.createElement(t.td,null,"-"),a.createElement(t.td,null,"-")))),"\n",a.createElement(t.h3,{id:"properties",style:{position:"relative"}},"Properties",a.createElement(t.a,{href:"#properties","aria-label":"properties permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.p,null,"Note! This component is an input. Therefore it supports the same features that all HDS form components do. The below table only lists properties distinctive for this particular component. You can find the full list of properties in the ",a.createElement(o,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",size:"M",href:"/storybook/react/?path=/story/components-fileinput--single"},"React Storybook.")),"\n",a.createElement(t.p,null,"Also, note that this component is an input. All features supported by the HDS TextInput are also supported by this component. See ",a.createElement(d,{href:"/components/text-input"},"TextInput documentation page")," for more information."),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Property"),a.createElement(t.th,null,"Description"),a.createElement(t.th,null,"Values"),a.createElement(t.th,null,"Default value"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"accept")),a.createElement(t.td,null,"A comma-separated list of unique file type specifiers describing file types to allow. If present, the filename extension or filetype property is validated against the list."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"buttonLabel")),a.createElement(t.td,null,"The label for the file button. Overrides default text. The button is not visible for assistive technology."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"defaultValue")),a.createElement(t.td,null,"If set, pre-fill the file(s) selection"),a.createElement(t.td,null,a.createElement(t.code,null,"File[]")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"dragAndDrop")),a.createElement(t.td,null,"If set to true, the input will show a drag and rop area."),a.createElement(t.td,null,a.createElement(t.code,null,"boolean")),a.createElement(t.td,null,"false")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"language")),a.createElement(t.td,null,"The language of the component. It affects which language is used to present component-specific messages, labels, and aria-labels."),a.createElement(t.td,null,a.createElement(t.code,null,"string")," (fi, en, sv)"),a.createElement(t.td,null,"fi")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"maxSize")),a.createElement(t.td,null,"Maximum file size in bytes."),a.createElement(t.td,null,a.createElement(t.code,null,"number")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"multiple")),a.createElement(t.td,null,"If set to true, the input allows selecting multiple files."),a.createElement(t.td,null,a.createElement(t.code,null,"boolean")),a.createElement(t.td,null,"false")))))}function c(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){return void 0===e&&(e={}),a.createElement(o,e,a.createElement(s,e))}},91388:function(e,t,l){l.r(t);var n=l(11151),a=l(67294),i=l(83428),r=l(57674),o=l(89482),s=(l(18607),l(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,n.ah)(),e.components);return s.Z||u("PageTabs",!1),s.Z.Tab||u("PageTabs.Tab",!0),s.Z.TabList||u("PageTabs.TabList",!0),s.Z.TabPanel||u("PageTabs.TabPanel",!0),a.createElement(a.Fragment,null,a.createElement(t.h1,{id:"fileinput",style:{position:"relative"}},"FileInput",a.createElement(t.a,{href:"#fileinput","aria-label":"fileinput permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement("div",{class:"status-label-description"},a.createElement(i.S,{type:"info"},"Stable"),a.createElement(i.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),a.createElement(r.Z)),"\n",a.createElement(o.Z,null,"A file input helps the user to browse and select one or multiple files to be uploaded to the service."),"\n",a.createElement(s.Z,{pageContext:e.pageContext},a.createElement(s.Z.TabList,null,a.createElement(s.Z.Tab,{href:"/"},"Usage"),a.createElement(s.Z.Tab,{href:"/code"},"Code"),a.createElement(s.Z.Tab,{href:"/accessibility"},"Accessibility"),a.createElement(s.Z.Tab,{href:"/security"},"Security")),a.createElement(s.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,n.ah)(),e.components);return t?a.createElement(t,e,a.createElement(c,e)):c(e)}},89482:function(e,t,l){var n=l(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:l="var(--fontsize-body-xl)",style:a={},children:i}=e;return n.createElement("p",{style:{fontSize:l,color:t,maxWidth:600,...a}},i)}},26127:function(e,t,l){var n=l(67294),a=l(14160),i=l(94671);const r="PageTabList",o="PageTabPanel",s="PageTab",c=e=>{var t;let{pageContext:l,children:c}=e;const u=l.frontmatter.slug,d=Array.isArray(c)?c:[c],p=d.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===r)),m=d.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===o)),h=null===(t=p.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===s)),_=h.findIndex((e=>u.endsWith(e.props.href))),f=-1===_?0:_,b=0===f?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return n.createElement(i.a,{initiallyActiveTab:f},n.createElement(i.a.TabList,{className:"page-tabs-list"},h.map((e=>n.createElement(i.a.Tab,{key:e.props.href,onClick:()=>(0,a.navigate)(""+("/"===e.props.href?b:b+e.props.href))},e.props.children)))),h.map(((e,t)=>n.createElement(i.a.TabPanel,{key:e.props.href},f===t?m.props.children:n.createElement("div",null)))))},u=e=>{let{children:t}=e;return n.createElement(i.a.TabList,null,t)};u.componentName=r;const d=e=>{let{href:t,slug:l,children:a}=e;return n.createElement(i.a.Tab,null,a)};d.componentName=s;const p=e=>{let{children:t}=e;return n.createElement(i.a.TabPanel,null,t)};p.componentName=o,c.TabList=u,c.Tab=d,c.TabPanel=p,t.Z=c},57674:function(e,t,l){var n=l(67294),a=l(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return n.createElement(a.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},n.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>n.createElement("li",{key:t},n.createElement("span",{className:"status-name"},t),n.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-file-input-index-mdx-02335fc112a408ca1d0b.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-file-input-index-mdx-02335fc112a408ca1d0b.js
new file mode 100644
index 00000000000..bee4afec472
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-file-input-index-mdx-02335fc112a408ca1d0b.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[5189,2965],{96234:function(e,t,a){a.d(t,{F:function(){return N},f:function(){return g}});var n=a(15785),l=a(67294),i=a(5871),r=a.n(i),o=a(37776),s=a(34300),c=a(93667),d=a(7444),u=a(52708),p=a(63483),m=a(35828),h=a(17882);(0,d.s)(".FileInput-module_fileInput__hClRc{border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.FileInput-module_dragAndDropHelperText__31Ljw{color:var(--label-color-default,var(--color-black-90));display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.FileInput-module_dragAndDrop__3d3xe{align-items:center;border:2px dotted var(--color-coat-of-arms);box-sizing:border-box;color:var(--color-coat-of-arms);cursor:pointer;display:flex;justify-content:center;margin-top:var(--spacing-xs);max-width:500px;padding:var(--spacing-s);width:100%}.FileInput-module_dragAndDropActive__3hREg{background-color:var(--color-silver-light);border-color:var(--color-coat-of-arms-dark);color:var(--color-coat-of-arms-dark)}.FileInput-module_dragAndDropDisabled__Ek-uE{border-color:var(--color-black-50);color:var(--color-black-50);cursor:not-allowed}.FileInput-module_dragAndDropLabel__1pDQN{align-items:center;display:flex}.FileInput-module_dragAndDropLabelText__3AJ4P{margin-left:var(--spacing-s)}.FileInput-module_dragAndDropHelperText__31Ljw{margin:var(--spacing-s) 0 var(--spacing-2-xs)}.FileInput-module_fileInputContainer__9N5TG{flex:1}.FileInput-module_fileInputWrapper__1E8Jf{display:inline-block;margin:var(--spacing-2-xs) 0;position:relative}.FileInput-module_fileInputWrapper__1E8Jf:focus-within>button:after{--size:calc(100% + calc(var(--outline-width) * 2 + var(--border-width) * 2 + var(--outline-gutter) * 2));border-color:var(--color-focus-outline)}.FileInput-module_fileList__drFD1{list-style:none;margin:var(--spacing-s) 0 0;padding:0}.FileInput-module_fileListItem__2fomf{align-items:flex-start;background-color:var(--color-info-light);border-bottom:2px dotted var(--color-coat-of-arms);box-sizing:border-box;display:flex;max-width:100%;padding:var(--spacing-s) var(--spacing-2-xs);width:500px}.FileInput-module_fileListItem__2fomf+.FileInput-module_fileListItem__2fomf{margin-top:var(--spacing-s)}.FileInput-module_fileListItemTitle__15-8y{align-items:flex-start;display:flex;flex:1;flex-wrap:nowrap;font-size:var(--fontsize-body-s);margin:2px var(--spacing-xs) 0 var(--spacing-2-xs)}.FileInput-module_fileListItemName__1BqM7{hyphens:auto;word-break:break-word}.FileInput-module_fileListItemSize__1ZMYb{margin-left:var(--spacing-2-xs);text-align:right;white-space:nowrap}.FileInput-module_fileListItemButton__3HfCX{--file-list-item-button-y-offset:calc(-1 * var(--spacing-2-xs) - 2px);display:flex;margin:var(--file-list-item-button-y-offset) auto var(--file-list-item-button-y-offset) 0}.FileInput-module_fileListItemButtonLabel__2FIPm{margin-left:var(--spacing-3-xs)}");const _=e=>({file:e,uiId:r()(e.name)}),f=e=>e.file,g=e=>{if(0===e)return"0 B";const t=Math.floor(Math.log(e)/Math.log(1024)),a=e/Math.pow(1024,t);return(t<2||a%1==0?Math.round(a):a.toFixed(1))+" "+["B","KB","MB","GB","TB"][t]},b=e=>({en:"No file has been selected.",fi:"Yhtään tiedostoa ei ole valittu.",sv:"Ingen fil har valts."}[e]),v=(e,t)=>({en:"Remove "+t+" from the added files.",fi:"Poista tiedosto "+t+" lisätyistä tiedostoista.",sv:"Ta bort "+t+" från filerna som lagts till."}[e]),x=(e,t)=>({en:(0===t?"1 file":t+" files")+" added.",fi:(0===t?"1 tiedosto":t+" tiedostoa")+" added.",sv:(0===t?"1 fil":t+" filer")+" har lagts till."}[e]),E=(e,t,a)=>{const n=t===a?t:t+"/"+a;return{en:n+" file(s) added.",fi:n+" tiedosto(a) lisätty.",sv:n+" fil(er) har lagts till."}[e]},y=(e,t)=>{const a=g(t);return{en:"The maximum file size is "+a+".",fi:"Suurin sallittu tiedostokoko on "+a+".",sv:"Den maximala filstorleken är "+a+"."}[e]},w=(e,t)=>{const a=e.split(",");if(1===a.length)return a.toString();const n=a.pop();return a.join(", ")+" "+t+" "+n},I=(e,t)=>({en:"Only "+w(t,"and")+" files.",fi:"Vain "+w(t,"ja")+" tiedostoja.",sv:"Endast "+w(t,"och")+" filer."}[e]),T=(e,t,a)=>{const n=I(e,a);return{en:"The file type, "+t.name+", is not supported. "+n,fi:"Tiedoston, "+t.name+", tyyppi ei vastaa hyväksyttyjä tiedostotyppejä. "+n,sv:"Filformatet, "+t.name+", stöds inte. "+n}[e]},L=(e,t,a)=>{const n=g(t.size);return{en:"File, "+t.name+", is too large ("+n+"). "+y(e,a),fi:"Tiedosto, "+t.name+" on liian suuri ("+n+"). "+y(e,a),sv:"Filen, "+t.name+", är för stor ("+n+"). "+y(e,a)}[e]};var k,C;(C=k||(k={})).accept="accept",C.maxSize="maxSize";const z=(e,t)=>a=>{const n=(e=>{if(!e||"string"!=typeof e||""===e)return console.warn("FileInput: Path must be a non-empty string. Path is now "+JSON.stringify(e)),"";const t=e.lastIndexOf(".");if(-1===t)return console.warn("FileInput: File is missing extension"),"";const a=e.substring(t);return a.length<=1?(console.warn("FileInput: File is missing extension"),""):a})(a.name),l=a.type,i=t.split(",").map((e=>e.trim())),r=!!i.find((e=>e.includes(l)||e.includes(l.split("/")[0]+"/*"))),o=!!i.find((e=>e===n));return r||o||{type:k.accept,text:T(e,a,t)}},F=(e,t)=>a=>a.size<=t||{type:k.maxSize,text:L(e,a,t)},N=e=>{let{id:t,label:a,buttonLabel:i,language:r="fi",defaultValue:d,disabled:w,dragAndDrop:T,dragAndDropLabel:L,dragAndDropInputLabel:k,maxSize:C,className:N="",successText:D,errorText:M,helperText:H,infoText:S,onChange:V,required:j,style:A,accept:Z,multiple:O,tooltipLabel:B,tooltipButtonLabel:P,tooltipText:q}=e;const R=(0,l.useRef)(null),G=(0,l.useRef)(!1),[J,Y]=(0,l.useState)([]),[W,K]=(0,l.useState)(),[X,U]=(0,l.useState)(),[Q,$]=(0,l.useState)(),ee=J&&J.length>0,te=t+"-list",ae=(0,l.useRef)(null),ne=(0,l.useRef)(),le=(0,l.useRef)(null),[ie,re]=(0,l.useState)(!1),oe=[Z&&I(r,Z),C&&y(r,C)].filter((e=>!!e)).join(" "),se=H||oe,ce=M||X,de=S||W,ue={className:N,helperText:se,successText:D||Q,errorText:ce,infoText:w?void 0:de,id:t,label:a,required:j,style:A,tooltipLabel:B,tooltipButtonLabel:P,tooltipText:q},pe=()=>{R.current&&R.current.click()},me=()=>{R.current&&R.current.focus()},he=()=>{$(void 0),K(void 0),U(void 0),ne.current=null},_e=[Z?z(r,Z):void 0,C?F(r,C):void 0].filter((e=>!!e)),fe=e=>0===_e.length?{validFiles:e,validationErrors:[]}:e.reduce(((e,t)=>{const a=_e.map((e=>e(t))).filter((e=>!0!==e));return a.length>0?Object.assign(Object.assign({},e),{validationErrors:[].concat((0,n.Z)(e.validationErrors),[a])}):Object.assign(Object.assign({},e),{validFiles:[].concat((0,n.Z)(e.validFiles),[t])})}),{validFiles:[],validationErrors:[]}),ge=(e,t)=>""+((e,t,a)=>{const n=t+"/"+a;return{en:"File processing failed for "+n+" files:\n",fi:"Tiedostonlisäys epäonnistui "+n+" tiedoston kohdalla:\n",sv:"Filprocesseringen av filerna "+n+" misslyckades:\n"}[e]})(r,e.length,t)+e.map((e=>"- "+e[0].text)).join("\n"),be=e=>{if(V){const t=e.map(f);V(t)}R.current&&(R.current.value="")},ve=e=>{he(),O?(e=>{if(e.length>0){const{validFiles:t,validationErrors:a}=fe(e);if(a.length>0&&U(ge(a,e.length)),t.length>0){const a=t.map(_),l=[].concat((0,n.Z)(J),(0,n.Z)(a));Y(l),$(E(r,t.length,e.length)),be(l)}}})(e):(e=>{if(e.length>0){const{validFiles:t,validationErrors:a}=fe(e);if(a.length>0)U(ge(a,1));else{const e=[_(t[0])];Y(e),$(E(r,1,1)),be(e)}}})(e)},xe=e=>{e.preventDefault(),e.stopPropagation(),re(!0)},Ee=e=>{e.preventDefault(),e.stopPropagation(),re(!1)};(0,l.useEffect)((()=>{G.current||(K(b(r)),G.current=!0)}),[K,r]),(0,l.useEffect)((()=>{if(!ee&&d&&R.current){const e=new DataTransfer;d.forEach((t=>{const a=new File([t],t.name,{type:t.type,lastModified:t.lastModified});e.items.add(a)})),R.current.files=e.files;const t=new Event("change",{bubbles:!0});R.current.dispatchEvent(t)}}),[d]);const ye=[(0,o.c)(t,se,ce,D,de),ee&&te].filter((e=>!!e)).join(" ");return l.createElement(l.Fragment,null,l.createElement(c.I,Object.assign({},ue),l.createElement("div",{className:"FileInput-module_fileInputContainer__9N5TG"},T&&l.createElement(l.Fragment,null,l.createElement("div",Object.assign({"aria-hidden":!0,className:(0,s.c)("FileInput-module_dragAndDrop__3d3xe",ie&&"FileInput-module_dragAndDropActive__3hREg",w&&"FileInput-module_dragAndDropDisabled__Ek-uE"),ref:le},w?{}:{onClick:()=>pe(),onDragEnter:xe,onDragOver:xe,onDragLeave:Ee,onDrop:e=>{const{dataTransfer:t}=e;Ee(e),ve(Array.from(t.files))}}),l.createElement("div",{className:"FileInput-module_dragAndDropLabel__1pDQN"},l.createElement(u.I,{"aria-hidden":!0}),l.createElement("span",{className:"FileInput-module_dragAndDropLabelText__3AJ4P"},L||(e=>({en:"Drag files here",fi:"Raahaa tiedostot tähän",sv:"Dra filerna hit"}[e]))(r)))),l.createElement("div",{className:"FileInput-module_dragAndDropHelperText__31Ljw"},k||(e=>({en:"or browse from your device",fi:"tai valitse tiedostot laitteeltasi",sv:"eller välj filerna från din enhet"}[e]))(r))),l.createElement("div",{className:"FileInput-module_fileInputWrapper__1E8Jf"},l.createElement(h.B,{"aria-hidden":!0,tabIndex:-1,variant:"secondary",iconLeft:l.createElement(p.I,{"aria-hidden":!0}),onClick:e=>{e.preventDefault(),e.stopPropagation(),me(),pe()},disabled:w},i||((e,t)=>({en:"Add "+(t?"files":"a file"),fi:"Lisää "+(t?"tiedostoja":"tiedosto"),sv:"Välj "+(t?"filer":"en fil")}[e]))(r,O)),l.createElement("input",Object.assign({type:"file",ref:R,id:t,disabled:w,required:j,"aria-describedby":ye,className:"FileInput-module_fileInput__hClRc",onChange:e=>{ve(Array.from(e.target.files))}},Z?{accept:Z}:{},O?{multiple:O}:{}))))),l.createElement("ul",{id:te,ref:ae,tabIndex:-1,className:"FileInput-module_fileList__drFD1","aria-label":ee?x(r,J.length):b(r)},J.map(((e,t)=>l.createElement("li",{key:e.uiId,className:"FileInput-module_fileListItem__2fomf",tabIndex:-1,ref:e=>{e&&ae.current&&ne.current===t&&e.focus()}},e.file.type.startsWith("image")?l.createElement(u.a,{"aria-hidden":!0}):l.createElement(u.b,{"aria-hidden":!0}),l.createElement("div",{className:"FileInput-module_fileListItemTitle__15-8y"},l.createElement("span",{className:"FileInput-module_fileListItemName__1BqM7"},e.file.name),l.createElement("span",{className:"FileInput-module_fileListItemSize__1ZMYb"},"(",g(e.file.size),")")),l.createElement(h.B,{onClick:a=>{a.preventDefault(),a.stopPropagation(),((e,t)=>{he();const a=J.filter((t=>t.uiId!==e.uiId));Y(a),a.length>0?(ne.current=t>0?t-1:0,K((e=>({en:"The file has been deleted.",fi:"Tiedosto poistettu.",sv:"Filen har tagits bort."}[e]))(r))):(me(),K(b(r))),be(a)})(e,t)},variant:"supplementary",size:"small",theme:"black",iconLeft:l.createElement(m.I,null),"aria-label":v(r,e.file.name),className:"FileInput-module_fileListItemButton__3HfCX",disabled:w},(e=>({en:"Remove",fi:"Poista",sv:"Ta bort"}[e]))(r)))))))}},63483:function(e,t,a){a.d(t,{I:function(){return i}});var n=a(67294),l=a(32719);const i=e=>{let{ariaLabel:t="plus",ariaLabelledby:a,ariaHidden:i=!0,className:r="",color:o,size:s="s",style:c={}}=e;return n.createElement("svg",{className:[l.s.icon,l.s[s],r].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":a,"aria-hidden":i,color:o,style:c},n.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M13 6V11H18V13H13V18H11V13H6V11H11V6H13Z",fill:"currentColor"}))}},52708:function(e,t,a){a.d(t,{I:function(){return o},a:function(){return r},b:function(){return i}});var n=a(67294),l=a(32719);const i=e=>{let{ariaLabel:t="document",ariaLabelledby:a,ariaHidden:i=!0,className:r="",color:o,size:s="s",style:c={}}=e;return n.createElement("svg",{className:[l.s.icon,l.s[s],r].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":a,"aria-hidden":i,color:o,style:c},n.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M15 2L20 7V22H4V2H15ZM14 4V8H18L14 4ZM14.0083 4L18 8V20H6V4H14.0083ZM17 16H7V18H17V16ZM17 12H7V14H17V12ZM13 8H7V10H13V8Z",fill:"currentColor"}))},r=e=>{let{ariaLabel:t="photo",ariaLabelledby:a,ariaHidden:i=!0,className:r="",color:o,size:s="s",style:c={}}=e;return n.createElement("svg",{className:[l.s.icon,l.s[s],r].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":a,"aria-hidden":i,color:o,style:c},n.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M20 2V22H4V2H20ZM16 15C15.1401 15 14.7159 15.2223 13.88 16.0363L13.7071 16.2071C12.4113 17.5029 11.5828 18 10 18C8.50049 18 7.67799 17.5539 6.49379 16.4051L6 15.92V20H18V15.922L17.958 15.8813C17.2256 15.1936 16.8025 15 16 15ZM18 4H6L6.00114 13.4397C6.50287 13.6831 6.92886 14.0298 7.51078 14.5986L7.70711 14.7929C8.6613 15.7471 9.08282 16 10 16C10.8599 16 11.2841 15.7777 12.12 14.9637L12.2929 14.7929C13.5887 13.4971 14.4172 13 16 13C16.8098 13 17.4222 13.1301 18.0007 13.4308L18 4ZM10 6C11.6569 6 13 7.34315 13 9C13 10.6569 11.6569 12 10 12C8.34315 12 7 10.6569 7 9C7 7.34315 8.34315 6 10 6ZM10 8C9.44772 8 9 8.44772 9 9C9 9.55228 9.44772 10 10 10C10.5523 10 11 9.55228 11 9C11 8.44772 10.5523 8 10 8Z",fill:"currentColor"}))},o=e=>{let{ariaLabel:t="upload",ariaLabelledby:a,ariaHidden:i=!0,className:r="",color:o,size:s="s",style:c={}}=e;return n.createElement("svg",{className:[l.s.icon,l.s[s],r].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":a,"aria-hidden":i,color:o,style:c},n.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M12 1.63605L17.6569 7.2929L16.2426 8.70712L13 5.46505V18H11V5.46505L7.75736 8.70712L6.34315 7.2929L12 1.63605ZM5 15V20H19V15H21V22H3V15H5Z",fill:"currentColor"}))}},93667:function(e,t,a){a.d(t,{I:function(){return s},t:function(){return o}});var n=a(67294),l=a(7444),i=a(34300),r=a(41125),o={root:"TextInput-module_root__2CMNr text-input_hds-text-input__2LODq",inputWrapper:"TextInput-module_inputWrapper__3Rvel text-input_hds-text-input__input-wrapper__1OqYG",input:"TextInput-module_input__1BlHi text-input_hds-text-input__input__GJm5C",hasButton:"TextInput-module_hasButton__2KCM1",errorText:"TextInput-module_errorText__3pizm text-input_hds-text-input__error-text__1GLYk",helperText:"TextInput-module_helperText__2dLR6 text-input_hds-text-input__helper-text__3V2KM",invalidText:"TextInput-module_invalidText__1w4sm text-input_hds-text-input__helper-text__3V2KM",successText:"TextInput-module_successText__2NMCP text-input_hds-text-input__success-text__3EOiy",infoText:"TextInput-module_infoText__zHOGs text-input_hds-text-input__info-text__3bqzy",invalid:"TextInput-module_invalid__2iYo2 text-input_hds-text-input--invalid__1UfKC",success:"TextInput-module_success__1kDOm text-input_hds-text-input--success__3dm2J",readOnly:"TextInput-module_readOnly__j615N undefined",buttonWrapper:"TextInput-module_buttonWrapper___filA text-input_hds-text-input__buttons__1RMzT",button:"TextInput-module_button__1ySMX text-input_hds-text-input__button__1Fh0I"};(0,l.s)("@keyframes text-input_fadeIn__2IDZ8{0%{opacity:0}to{opacity:1}}.text-input_hds-text-input__2LODq{--border-width:2px;--outline-width:3px;--input-height:56px;--textarea-height:149px;--icon-size:var(--spacing-m);--helper-color-default:var(--color-black-60);--helper-color-invalid:var(--color-error);--helper-color-success:var(--color-success);--helper-color-info:var(--color-black-90);--helper-color-info-icon:var(--color-coat-of-arms);--icon-color-invalid:var(--color-error);--input-background-default:var(--color-white);--input-background-disabled:var(--color-black-10);--input-border-color-default:var(--color-black-50);--input-border-color-hover:var(--color-black-90);--input-border-color-focus:var(--color-black-90);--input-border-color-invalid:var(--color-error);--input-border-color-disabled:var(--color-black-10);--input-border-color-success:var(--color-success);--input-color-default:var(--color-black-90);--input-color-disabled:var(--color-black-40);--label-color-default:var(--color-black-90);--label-color-invalid:var(--color-black-90);--placeholder-color:var(--color-black-60)}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C{-webkit-appearance:none;background-color:var(--input-background-default);border:var(--border-width) solid var(--input-border-color-default);border-radius:0;box-sizing:border-box;color:var(--input-color-default);font-family:inherit;font-size:1.125em;height:var(--input-height);line-height:normal;margin:0;padding:0 var(--spacing-s);width:100%;will-change:transform,box-shadow}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C:hover{border-color:var(--input-border-color-hover);transition:border-color 85ms ease-out}.text-input_hds-text-input__input-wrapper__1OqYG:focus-within .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-focus);outline:none}.text-input_hds-text-input__2LODq.text-input_hds-text-input--invalid__1UfKC .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-invalid)}.text-input_hds-text-input__2LODq.text-input_hds-text-input--success__3dm2J .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-success)}.text-input_hds-text-input__input-wrapper__1OqYG:focus-within .text-input_hds-text-input__input__GJm5C:not([readonly]){box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);transform:translateZ(0);transition:85ms ease-out;transition-property:box-shadow,transform}.text-input_hds-text-input__label__15F2V{color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.text-input_hds-text-input--invalid__1UfKC .text-input_hds-text-input__label__15F2V{color:var(--label-color-invalid);transition:color 85ms linear}.text-input_hds-text-input__required__z3Hm0{color:var(--color-black-90);display:inline-block;font-size:var(--fontsize-body-xl);line-height:1;margin-left:var(--spacing-2-xs);transform:translateY(var(--spacing-3-xs))}.text-input_hds-text-input__input-wrapper__1OqYG{display:flex;position:relative}.text-input_hds-text-input__2LODq textarea.text-input_hds-text-input__input__GJm5C{font-family:inherit;height:var(--textarea-height);margin:0;min-height:var(--input-height);overflow:auto;padding:var(--spacing-s);resize:vertical}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C::-moz-placeholder{color:var(--placeholder-color);opacity:1}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C::placeholder{color:var(--placeholder-color);opacity:1}.text-input_hds-text-input__helper-text__3V2KM{color:var(--helper-color-default)}.text-input_hds-text-input__error-text__1GLYk,.text-input_hds-text-input__helper-text__3V2KM{display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);white-space:pre-line}.text-input_hds-text-input__error-text__1GLYk{color:var(--helper-color-invalid);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.text-input_hds-text-input__error-text__1GLYk:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__error-text__1GLYk:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--icon-color-invalid);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__success-text__3EOiy{color:var(--helper-color-success);display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative;white-space:pre-wrap}.text-input_hds-text-input__success-text__3EOiy:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__success-text__3EOiy:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--helper-color-success);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__info-text__3bqzy{color:var(--helper-color-info);display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.text-input_hds-text-input__info-text__3bqzy:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__info-text__3bqzy:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--helper-color-info-icon);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C[disabled]{background-color:var(--input-background-disabled);border-color:var(--input-border-color-disabled);color:var(--input-color-disabled);cursor:not-allowed}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C[readonly]{background-color:transparent;border:0;color:var(--input-color-default);padding:0;-webkit-text-fill-color:var(--input-color-default)}.text-input_hds-text-input__buttons__1RMzT{align-items:center;bottom:0;display:flex;font-size:1rem;justify-content:center;margin-right:calc(var(--spacing-s) - var(--spacing-xs) / 2);position:absolute;right:0;top:0}.text-input_hds-text-input__button__1Fh0I{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;display:flex;font:inherit;outline:none;padding:var(--spacing-xs) calc(var(--spacing-xs) / 2)}.text-input_hds-text-input__button__1Fh0I:focus{outline:var(--outline-width) solid var(--color-focus-outline)}.TextInput-module_root__2CMNr{position:relative}.TextInput-module_input__1BlHi.TextInput-module_hasButton__2KCM1{padding-right:calc(2 * var(--spacing-s) + 1.5rem)}.TextInput-module_button__1ySMX:disabled{cursor:not-allowed}.TextInput-module_button__1ySMX:focus{outline:var(--outline-width) solid var(--color-focus-outline)}");const s=e=>{let{children:t,className:a="",errorText:l,helperText:s,hideLabel:c=!1,id:d,invalid:u=!1,isAriaLabelledBy:p=!1,label:m,labelId:h,onBlur:_,required:f=!1,style:g,successText:b,infoText:v,tooltipLabel:x,tooltipText:E,tooltipButtonLabel:y}=e;return n.createElement("div",{onBlur:_,className:(0,i.c)(o.root,u&&o.invalid,b&&o.success,a),style:g},m&&n.createElement(r.F,{id:h,inputId:d,isAriaLabelledBy:p,hidden:c,label:m,required:f,tooltipLabel:x,tooltipButtonLabel:y,tooltipText:E}),n.createElement("div",{className:(0,i.c)(o.inputWrapper)},t),l&&n.createElement("div",{className:o.errorText,id:d+"-error"},l),b&&n.createElement("div",{className:o.successText,id:d+"-success"},b),v&&n.createElement("div",{className:o.infoText,id:d+"-info"},v),s&&n.createElement("div",{className:o.helperText,id:d+"-helper"},s))}},83428:function(e,t,a){a.d(t,{S:function(){return c}});var n=a(80136),l=a(67294),i=a(7444),r=a(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,i.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const s=e=>{let{icon:t}=e;return l.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:i,type:c="neutral",iconLeft:d}=e,u=(0,n._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(o.statusLabel,o[c],d&&o.statusLabelWithIcon,a),"data-testid":i},u),d&&l.createElement(s,{icon:d}),t)}},37776:function(e,t,a){a.d(t,{c:function(){return n}});var n=(e,t,a,n,l)=>[t&&e+"-helper",a&&e+"-error",n&&e+"-success",l&&e+"-info"].filter((e=>e)).join(" ")},71366:function(e,t,a){a.r(t),a.d(t,{FileInputDefault:function(){return c},FileInputDefaultValue:function(){return u},FileInputDragAndDrop:function(){return d},FileInputExample:function(){return s}});var n=a(11151),l=a(67294),i=a(96234),r=a(91388);const o=e=>{let{children:t,pageContext:a}=e;return l.createElement(r.default,{pageContext:a},t)},s=()=>{const[e,t]=l.useState([]);return console.log("selected file",e),l.createElement(i.F,{id:"file-input",label:"Choose a file",language:"en",maxSize:1572864,accept:".png,.jpg",onChange:t})},c=()=>{const[e,t]=l.useState([]);return console.log("selected file",e),l.createElement(i.F,{id:"file-input-default",label:"Choose a file",language:"en",maxSize:1572864,accept:".png,.jpg",onChange:t})},d=()=>{const[e,t]=l.useState([]);return console.log("selected files",e),l.createElement(i.F,{multiple:!0,dragAndDrop:!0,id:"file-input-drag-and-drop",label:"Drag and drop files here",language:"en",accept:".png,.jpg",onChange:t})},u=()=>{try{const[e,t]=l.useState([void 0!==typeof window?new window.File(["string content"],"dummy.txt",{type:"text/plain"}):null,void 0!==typeof window?new window.File(["string content with more text"],"anotherDummy.txt",{type:"text/plain"}):null]);return console.log("Selected files: ",e),l.createElement(i.F,{multiple:!0,id:"file-input-default-value",language:"en",onChange:t,defaultValue:e})}catch(e){console.error(e)}return null};function p(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",code:"code",h4:"h4",p:"p"},(0,n.ah)(),e.components),{PlaygroundPreview:a,InternalLink:i}=t;return i||m("InternalLink",!0),a||m("PlaygroundPreview",!0),l.createElement(l.Fragment,null,l.createElement(t.h2,{id:"usage",style:{position:"relative"}},"Usage",l.createElement(t.a,{href:"#usage","aria-label":"usage permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h3,{id:"example",style:{position:"relative"}},"Example",l.createElement(t.a,{href:"#example","aria-label":"example permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n","\n",l.createElement(a,null,l.createElement(s)),"\n",l.createElement(t.h3,{id:"principles",style:{position:"relative"}},"Principles",l.createElement(t.a,{href:"#principles","aria-label":"principles permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,"A label should always be provided with a FileInput. It should clearly describe what the user is expected to select."),"\n",l.createElement(t.li,null,"The helper text below the FileInput describes the file requirements to the user. It lists accepted file formats as well as the maximum size of a single file.","\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,"Note that the helper text is generated automatically from the ",l.createElement(t.code,null,"accept")," and ",l.createElement(t.code,null,"maxSize")," properties."),"\n"),"\n"),"\n",l.createElement(t.li,null,"The FileInput does not automatically upload files to any server. The user is required to submit the form before the actual upload happens."),"\n",l.createElement(t.li,null,"One FileInput can be configured to accept one or multiple files.","\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,"Make sure labels of the input indicate the number of expected files to the user."),"\n",l.createElement(t.li,null,"A FileInput allowing multiple files fits well for situations where all the files are related to each other (e.g. multiple photos from the same event)."),"\n",l.createElement(t.li,null,"If the user has to upload multiple files that are not related to each other, prefer using multiple file uploads - one for each file."),"\n"),"\n"),"\n",l.createElement(t.li,null,"Dragging and dropping files can be allowed by using the ",l.createElement(t.code,null,"dragAndDrop")," property."),"\n",l.createElement(t.li,null,"The FileInput uses an info text element to inform the user about the status of the component. You can read more about the usage of the info text element in the ",l.createElement(i,{href:"/patterns/forms/form-validation#3-info-message"},"HDS Form validation pattern documentation page"),"."),"\n",l.createElement(t.li,null,"The FileInput component resolves human-readable file size abbreviations based on a binary system. The file size texts are shown after the selected file name and in maxSize messages if maxSize validation is used."),"\n",l.createElement(t.li,null,"The accept parameter only checks and allows correct file types according to the file extension(s) or file types, instead of doing any in-depth analysis."),"\n"),"\n",l.createElement(t.h3,{id:"variations",style:{position:"relative"}},"Variations",l.createElement(t.a,{href:"#variations","aria-label":"variations permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h4,{id:"default",style:{position:"relative"}},"Default",l.createElement(t.a,{href:"#default","aria-label":"default permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"In its default form, the HDS FileInput offers a button-like element that opens a file browser native to the user's current device. Selected files are presented in a list below the input and files can be removed from the listing separately."),"\n","\n",l.createElement(a,null,l.createElement(c)),"\n",l.createElement(t.h4,{id:"with-drag-and-drop",style:{position:"relative"}},"With drag and drop",l.createElement(t.a,{href:"#with-drag-and-drop","aria-label":"with drag and drop permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"If in some cases having the ability to drag and drop files onto the page could help the user, this can be enabled with the ",l.createElement(t.code,null,"dragAndDrop")," property. Note that the traditional file input is still included below the drag and drop area. Therefore this property does not weaken the accessibility of the component."),"\n","\n",l.createElement(a,null,l.createElement(d)),"\n",l.createElement(t.h4,{id:"with-default-value",style:{position:"relative"}},"With default value",l.createElement(t.a,{href:"#with-default-value","aria-label":"with default value permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"If needed, the file input can be prefilled with pre-existing file(s). Useful, for example, if adding files in a multi-page form and coming back to the file-adding step again."),"\n","\n",l.createElement(a,null,l.createElement(u)))}function m(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){return void 0===e&&(e={}),l.createElement(o,e,l.createElement(p,e))}},91388:function(e,t,a){a.r(t);var n=a(11151),l=a(67294),i=a(83428),r=a(57674),o=a(89482),s=(a(18607),a(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,n.ah)(),e.components);return s.Z||d("PageTabs",!1),s.Z.Tab||d("PageTabs.Tab",!0),s.Z.TabList||d("PageTabs.TabList",!0),s.Z.TabPanel||d("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"fileinput",style:{position:"relative"}},"FileInput",l.createElement(t.a,{href:"#fileinput","aria-label":"fileinput permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(i.S,{type:"info"},"Stable"),l.createElement(i.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(o.Z,null,"A file input helps the user to browse and select one or multiple files to be uploaded to the service."),"\n",l.createElement(s.Z,{pageContext:e.pageContext},l.createElement(s.Z.TabList,null,l.createElement(s.Z.Tab,{href:"/"},"Usage"),l.createElement(s.Z.Tab,{href:"/code"},"Code"),l.createElement(s.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(s.Z.Tab,{href:"/security"},"Security")),l.createElement(s.Z.TabPanel,null,e.children)))}function d(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,n.ah)(),e.components);return t?l.createElement(t,e,l.createElement(c,e)):c(e)}},89482:function(e,t,a){var n=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:l={},children:i}=e;return n.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...l}},i)}},26127:function(e,t,a){var n=a(67294),l=a(14160),i=a(94671);const r="PageTabList",o="PageTabPanel",s="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const d=a.frontmatter.slug,u=Array.isArray(c)?c:[c],p=u.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===r)),m=u.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===o)),h=null===(t=p.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===s)),_=h.findIndex((e=>d.endsWith(e.props.href))),f=-1===_?0:_,g=0===f?d:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(d);return n.createElement(i.a,{initiallyActiveTab:f},n.createElement(i.a.TabList,{className:"page-tabs-list"},h.map((e=>n.createElement(i.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?g:g+e.props.href))},e.props.children)))),h.map(((e,t)=>n.createElement(i.a.TabPanel,{key:e.props.href},f===t?m.props.children:n.createElement("div",null)))))},d=e=>{let{children:t}=e;return n.createElement(i.a.TabList,null,t)};d.componentName=r;const u=e=>{let{href:t,slug:a,children:l}=e;return n.createElement(i.a.Tab,null,l)};u.componentName=s;const p=e=>{let{children:t}=e;return n.createElement(i.a.TabPanel,null,t)};p.componentName=o,c.TabList=d,c.Tab=u,c.TabPanel=p,t.Z=c},57674:function(e,t,a){var n=a(67294),l=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return n.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},n.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>n.createElement("li",{key:t},n.createElement("span",{className:"status-name"},t),n.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-file-input-security-mdx-25028be6a8c6b2887220.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-file-input-security-mdx-25028be6a8c6b2887220.js
new file mode 100644
index 00000000000..b3a1a4bd0b6
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-file-input-security-mdx-25028be6a8c6b2887220.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[6958,2965],{83428:function(e,t,a){a.d(t,{S:function(){return c}});var l=a(80136),n=a(67294),s=a(7444),r=a(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,s.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:t}=e;return n.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:s,type:c="neutral",iconLeft:u}=e,d=(0,l._)(e,["children","className","dataTestId","type","iconLeft"]);return n.createElement("span",Object.assign({className:(0,r.c)(i.statusLabel,i[c],u&&i.statusLabelWithIcon,a),"data-testid":s},d),u&&n.createElement(o,{icon:u}),t)}},90078:function(e,t,a){a.r(t);var l=a(11151),n=a(67294),s=a(91388),r=a(80699);const i=e=>{let{children:t,pageContext:a}=e;return n.createElement(s.default,{pageContext:a},t)};function o(e){const t=Object.assign({h2:"h2",a:"a",span:"span",p:"p",ul:"ul",li:"li"},(0,l.ah)(),e.components);return n.createElement(n.Fragment,null,n.createElement(t.h2,{id:"security",style:{position:"relative"}},"Security",n.createElement(t.a,{href:"#security","aria-label":"security permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.p,null,"As HDS FileInput provides only the front-end solution, remember that you need to take care of the security in your project.\nBelow are some good practices you need to consider. For more detailed checklist, please refer to ",n.createElement(r.Z,{href:"https://github.com/City-of-Helsinki/ASVS/blob/helsinki-4.0.1/4.0/en/0x20-V12-Files-Resources.md"},"Helsinki OWASP Application Security Verification Standard"),"."),"\n",n.createElement(t.ul,null,"\n",n.createElement(t.li,null,"Do not trust the front-end solution to validate the files for you. Validate files on the backend.","\n",n.createElement(t.ul,null,"\n",n.createElement(t.li,null,"Verify file type, file size, and name length."),"\n",n.createElement(t.li,null,"HDS FileInput verifies the file size and the file type based on the DOM File object properties. It does not examine the file contents. This validation is not sufficient in the backend since it can be bypassed for example by renaming the file."),"\n"),"\n"),"\n",n.createElement(t.li,null,"Always restrict and only allow file types related to the use case."),"\n",n.createElement(t.li,null,"Pay attention to error messages returned from the backend. Do not include information the user does not need, e.g. file paths."),"\n",n.createElement(t.li,null,"If files are uploaded from untrusted sources, make sure files are stored outside of the web root, with limited permissions, preferably with strong validation.","\n",n.createElement(t.ul,null,"\n",n.createElement(t.li,null,"Files from untrusted sources should also be scanned by antivirus scanners to prevent the upload of known malicious content."),"\n"),"\n"),"\n"))}t.default=function(e){return void 0===e&&(e={}),n.createElement(i,e,n.createElement(o,e))}},91388:function(e,t,a){a.r(t);var l=a(11151),n=a(67294),s=a(83428),r=a(57674),i=a(89482),o=(a(18607),a(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,l.ah)(),e.components);return o.Z||u("PageTabs",!1),o.Z.Tab||u("PageTabs.Tab",!0),o.Z.TabList||u("PageTabs.TabList",!0),o.Z.TabPanel||u("PageTabs.TabPanel",!0),n.createElement(n.Fragment,null,n.createElement(t.h1,{id:"fileinput",style:{position:"relative"}},"FileInput",n.createElement(t.a,{href:"#fileinput","aria-label":"fileinput permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement("div",{class:"status-label-description"},n.createElement(s.S,{type:"info"},"Stable"),n.createElement(s.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),n.createElement(r.Z)),"\n",n.createElement(i.Z,null,"A file input helps the user to browse and select one or multiple files to be uploaded to the service."),"\n",n.createElement(o.Z,{pageContext:e.pageContext},n.createElement(o.Z.TabList,null,n.createElement(o.Z.Tab,{href:"/"},"Usage"),n.createElement(o.Z.Tab,{href:"/code"},"Code"),n.createElement(o.Z.Tab,{href:"/accessibility"},"Accessibility"),n.createElement(o.Z.Tab,{href:"/security"},"Security")),n.createElement(o.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,l.ah)(),e.components);return t?n.createElement(t,e,n.createElement(c,e)):c(e)}},89482:function(e,t,a){var l=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:n={},children:s}=e;return l.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...n}},s)}},26127:function(e,t,a){var l=a(67294),n=a(14160),s=a(94671);const r="PageTabList",i="PageTabPanel",o="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const u=a.frontmatter.slug,d=Array.isArray(c)?c:[c],b=d.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===r)),m=d.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===i)),h=null===(t=b.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===o)),p=h.findIndex((e=>u.endsWith(e.props.href))),f=-1===p?0:p,_=0===f?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return l.createElement(s.a,{initiallyActiveTab:f},l.createElement(s.a.TabList,{className:"page-tabs-list"},h.map((e=>l.createElement(s.a.Tab,{key:e.props.href,onClick:()=>(0,n.navigate)(""+("/"===e.props.href?_:_+e.props.href))},e.props.children)))),h.map(((e,t)=>l.createElement(s.a.TabPanel,{key:e.props.href},f===t?m.props.children:l.createElement("div",null)))))},u=e=>{let{children:t}=e;return l.createElement(s.a.TabList,null,t)};u.componentName=r;const d=e=>{let{href:t,slug:a,children:n}=e;return l.createElement(s.a.Tab,null,n)};d.componentName=o;const b=e=>{let{children:t}=e;return l.createElement(s.a.TabPanel,null,t)};b.componentName=i,c.TabList=u,c.Tab=d,c.TabPanel=b,t.Z=c},57674:function(e,t,a){var l=a(67294),n=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return l.createElement(n.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},l.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>l.createElement("li",{key:t},l.createElement("span",{className:"status-name"},t),l.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-file-input-tabs-mdx-c6bbffabae8144a29e19.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-file-input-tabs-mdx-c6bbffabae8144a29e19.js
new file mode 100644
index 00000000000..c2bfd25c8c4
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-file-input-tabs-mdx-c6bbffabae8144a29e19.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[2965],{83428:function(e,t,a){a.d(t,{S:function(){return o}});var l=a(80136),s=a(67294),n=a(7444),r=a(34300),c={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const i=e=>{let{icon:t}=e;return s.createElement("span",{className:c.statusLabelIcon,"aria-hidden":"true"},t)},o=e=>{var{children:t,className:a,dataTestId:n,type:o="neutral",iconLeft:u}=e,b=(0,l._)(e,["children","className","dataTestId","type","iconLeft"]);return s.createElement("span",Object.assign({className:(0,r.c)(c.statusLabel,c[o],u&&c.statusLabelWithIcon,a),"data-testid":n},b),u&&s.createElement(i,{icon:u}),t)}},91388:function(e,t,a){a.r(t);var l=a(11151),s=a(67294),n=a(83428),r=a(57674),c=a(89482),i=(a(18607),a(26127));function o(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,l.ah)(),e.components);return i.Z||u("PageTabs",!1),i.Z.Tab||u("PageTabs.Tab",!0),i.Z.TabList||u("PageTabs.TabList",!0),i.Z.TabPanel||u("PageTabs.TabPanel",!0),s.createElement(s.Fragment,null,s.createElement(t.h1,{id:"fileinput",style:{position:"relative"}},"FileInput",s.createElement(t.a,{href:"#fileinput","aria-label":"fileinput permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement("div",{class:"status-label-description"},s.createElement(n.S,{type:"info"},"Stable"),s.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),s.createElement(r.Z)),"\n",s.createElement(c.Z,null,"A file input helps the user to browse and select one or multiple files to be uploaded to the service."),"\n",s.createElement(i.Z,{pageContext:e.pageContext},s.createElement(i.Z.TabList,null,s.createElement(i.Z.Tab,{href:"/"},"Usage"),s.createElement(i.Z.Tab,{href:"/code"},"Code"),s.createElement(i.Z.Tab,{href:"/accessibility"},"Accessibility"),s.createElement(i.Z.Tab,{href:"/security"},"Security")),s.createElement(i.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,l.ah)(),e.components);return t?s.createElement(t,e,s.createElement(o,e)):o(e)}},89482:function(e,t,a){var l=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:s={},children:n}=e;return l.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...s}},n)}},26127:function(e,t,a){var l=a(67294),s=a(14160),n=a(94671);const r="PageTabList",c="PageTabPanel",i="PageTab",o=e=>{var t;let{pageContext:a,children:o}=e;const u=a.frontmatter.slug,b=Array.isArray(o)?o:[o],d=b.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===r)),m=b.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===c)),h=null===(t=d.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===i)),p=h.findIndex((e=>u.endsWith(e.props.href))),_=-1===p?0:p,f=0===_?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return l.createElement(n.a,{initiallyActiveTab:_},l.createElement(n.a.TabList,{className:"page-tabs-list"},h.map((e=>l.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,s.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),h.map(((e,t)=>l.createElement(n.a.TabPanel,{key:e.props.href},_===t?m.props.children:l.createElement("div",null)))))},u=e=>{let{children:t}=e;return l.createElement(n.a.TabList,null,t)};u.componentName=r;const b=e=>{let{href:t,slug:a,children:s}=e;return l.createElement(n.a.Tab,null,s)};b.componentName=i;const d=e=>{let{children:t}=e;return l.createElement(n.a.TabPanel,null,t)};d.componentName=c,o.TabList=u,o.Tab=b,o.TabPanel=d,t.Z=o},57674:function(e,t,a){var l=a(67294),s=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return l.createElement(s.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},l.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>l.createElement("li",{key:t},l.createElement("span",{className:"status-name"},t),l.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-footer-accessibility-mdx-98232604165254f65c5b.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-footer-accessibility-mdx-98232604165254f65c5b.js
new file mode 100644
index 00000000000..ba28d744ef7
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-footer-accessibility-mdx-98232604165254f65c5b.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[9245,4618],{83428:function(e,t,a){a.d(t,{S:function(){return c}});var l=a(80136),n=a(67294),s=a(7444),r=a(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,s.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const i=e=>{let{icon:t}=e;return n.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:s,type:c="neutral",iconLeft:u}=e,d=(0,l._)(e,["children","className","dataTestId","type","iconLeft"]);return n.createElement("span",Object.assign({className:(0,r.c)(o.statusLabel,o[c],u&&o.statusLabelWithIcon,a),"data-testid":s},d),u&&n.createElement(i,{icon:u}),t)}},1955:function(e,t,a){a.r(t);var l=a(11151),n=a(67294),s=a(68329),r=a(1076);const o=e=>{let{children:t,pageContext:a}=e;return n.createElement(s.default,{pageContext:a},t)};function i(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",strong:"strong",code:"code"},(0,l.ah)(),e.components);return n.createElement(n.Fragment,null,n.createElement(t.h2,{id:"accessibility",style:{position:"relative"}},"Accessibility",n.createElement(t.a,{href:"#accessibility","aria-label":"accessibility permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.h3,{id:"pay-attention-to",style:{position:"relative"}},"Pay attention to",n.createElement(t.a,{href:"#pay-attention-to","aria-label":"pay attention to permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.ul,null,"\n",n.createElement(t.li,null,"HDS Footer is designed to support many different brand colours. When customising colours, refer to ",n.createElement(r.Z,{href:"/foundation/design-tokens/colour"},"colour guidelines")," to ensure accessibility."),"\n",n.createElement(t.li,null,n.createElement(t.strong,null,"When designing the footer link hierarchy, always think about keyboard and screen reader users.")," Remember that keyboard users need to manually navigate to each element."),"\n",n.createElement(t.li,null,"Footer landmark is provided automatically by the wrapping ",n.createElement(t.code,null,"<footer>")," element. In case you want more landmarks, all the Footer sub components support ",n.createElement(t.code,null,"role")," prop which should be used together with a descriptive ",n.createElement(t.code,null,"ariaLabel"),' prop. Just remember that landmarks should be used sparingly in order to avoid "noise" for screen readers and making the overall page layout difficult to understand.'),"\n"))}t.default=function(e){return void 0===e&&(e={}),n.createElement(o,e,n.createElement(i,e))}},68329:function(e,t,a){a.r(t);var l=a(11151),n=a(67294),s=a(83428),r=a(57674),o=a(89482),i=(a(18607),a(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,l.ah)(),e.components);return i.Z||u("PageTabs",!1),i.Z.Tab||u("PageTabs.Tab",!0),i.Z.TabList||u("PageTabs.TabList",!0),i.Z.TabPanel||u("PageTabs.TabPanel",!0),n.createElement(n.Fragment,null,n.createElement(t.h1,{id:"footer",style:{position:"relative"}},"Footer",n.createElement(t.a,{href:"#footer","aria-label":"footer permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement("div",{className:"status-label-description"},n.createElement(s.S,{type:"error"},"Draft"),n.createElement(s.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),n.createElement(r.Z)),"\n",n.createElement(o.Z,null,"The Footer component is located at the bottom of the page below the main body content. It provides a place for secondary navigation, site-wide actions, and additional information."),"\n",n.createElement(i.Z,{pageContext:e.pageContext},n.createElement(i.Z.TabList,null,n.createElement(i.Z.Tab,{href:"/"},"Usage"),n.createElement(i.Z.Tab,{href:"/code"},"Code"),n.createElement(i.Z.Tab,{href:"/accessibility"},"Accessibility"),n.createElement(i.Z.Tab,{href:"/customisation"},"Customisation")),n.createElement(i.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,l.ah)(),e.components);return t?n.createElement(t,e,n.createElement(c,e)):c(e)}},89482:function(e,t,a){var l=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:n={},children:s}=e;return l.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...n}},s)}},26127:function(e,t,a){var l=a(67294),n=a(14160),s=a(94671);const r="PageTabList",o="PageTabPanel",i="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const u=a.frontmatter.slug,d=Array.isArray(c)?c:[c],b=d.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===r)),m=d.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===o)),h=null===(t=b.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===i)),p=h.findIndex((e=>u.endsWith(e.props.href))),f=-1===p?0:p,g=0===f?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return l.createElement(s.a,{initiallyActiveTab:f},l.createElement(s.a.TabList,{className:"page-tabs-list"},h.map((e=>l.createElement(s.a.Tab,{key:e.props.href,onClick:()=>(0,n.navigate)(""+("/"===e.props.href?g:g+e.props.href))},e.props.children)))),h.map(((e,t)=>l.createElement(s.a.TabPanel,{key:e.props.href},f===t?m.props.children:l.createElement("div",null)))))},u=e=>{let{children:t}=e;return l.createElement(s.a.TabList,null,t)};u.componentName=r;const d=e=>{let{href:t,slug:a,children:n}=e;return l.createElement(s.a.Tab,null,n)};d.componentName=i;const b=e=>{let{children:t}=e;return l.createElement(s.a.TabPanel,null,t)};b.componentName=o,c.TabList=u,c.Tab=d,c.TabPanel=b,t.Z=c},57674:function(e,t,a){var l=a(67294),n=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return l.createElement(n.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},l.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>l.createElement("li",{key:t},l.createElement("span",{className:"status-name"},t),l.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-footer-code-mdx-55b9823f4a7f6567fb79.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-footer-code-mdx-55b9823f4a7f6567fb79.js
new file mode 100644
index 00000000000..bfb6d45d892
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-footer-code-mdx-55b9823f4a7f6567fb79.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[7586,4618],{83428:function(e,t,l){l.d(t,{S:function(){return s}});var n=l(80136),a=l(67294),r=l(7444),o=l(34300),c={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,r.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const i=e=>{let{icon:t}=e;return a.createElement("span",{className:c.statusLabelIcon,"aria-hidden":"true"},t)},s=e=>{var{children:t,className:l,dataTestId:r,type:s="neutral",iconLeft:m}=e,u=(0,n._)(e,["children","className","dataTestId","type","iconLeft"]);return a.createElement("span",Object.assign({className:(0,o.c)(c.statusLabel,c[s],m&&c.statusLabelWithIcon,l),"data-testid":r},u),m&&a.createElement(i,{icon:m}),t)}},63696:function(e,t,l){l.r(t);var n=l(11151),a=l(67294),r=l(41110),o=l(70476),c=l(71015),i=l(68329);const s=e=>{let{children:t,pageContext:l}=e;return a.createElement(i.default,{pageContext:l},t)};function m(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",h4:"h4",pre:"pre",code:"code",ul:"ul",li:"li",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",strong:"strong"},(0,n.ah)(),e.components),{Playground:l,InternalLink:i,IconCheckCircleFill:s,Link:m,ExternalLink:d,IconCrossCircle:E}=t;return d||u("ExternalLink",!0),s||u("IconCheckCircleFill",!0),E||u("IconCrossCircle",!0),i||u("InternalLink",!0),m||u("Link",!0),l||u("Playground",!0),a.createElement(a.Fragment,null,a.createElement(t.h2,{id:"code",style:{position:"relative"}},"Code",a.createElement(t.a,{href:"#code","aria-label":"code permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.h3,{id:"code-examples",style:{position:"relative"}},"Code examples",a.createElement(t.a,{href:"#code-examples","aria-label":"code examples permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.h4,{id:"default",style:{position:"relative"}},"Default",a.createElement(t.a,{href:"#default","aria-label":"default permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(l,{scope:{Footer:r.F,IconFacebook:o.V,IconTwitter:o.bj,IconInstagram:o.a6,IconYoutube:o.bB,IconTiktok:o.bf,Logo:c.L,logoFi:c.l}},a.createElement(t.pre,null,a.createElement(t.code,{className:"language-jsx"},'import { Footer, IconFacebook, IconTwitter, IconInstagram, IconYoutube, IconTiktok, Logo, logoFi } from \'hds-react\';\n\n() => (\n  <Footer title="Helsinki Design System">\n    <Footer.Navigation>\n      <Footer.Link label="Item" />\n      <Footer.Link label="Item" />\n      <Footer.Link label="Item" />\n      <Footer.Link label="Item" />\n      <Footer.Link label="Item" />\n      <Footer.Link label="Item" />\n      <Footer.Link label="Item" />\n      <Footer.Link label="Item" />\n    </Footer.Navigation>\n    <Footer.Utilities\n      soMeLinks={[\n        <Footer.Link title="Helsingin kaupungin Facebook-tili" icon={<IconFacebook />} />,\n        <Footer.Link title="Helsingin kaupungin Twitter-tili" icon={<IconTwitter />} />,\n        <Footer.Link title="Helsingin kaupungin Instagram-tili" icon={<IconInstagram />} />,\n        <Footer.Link title="Helsingin kaupungin Youtube-tili" icon={<IconYoutube />} />,\n        <Footer.Link title="Helsingin kaupungin Tiktok-tili" icon={<IconTiktok />} />,\n      ]}\n    >\n      <Footer.Link label="Contact us" />\n      <Footer.Link label="Give feedback" />\n    </Footer.Utilities>\n    <Footer.Base\n      copyrightHolder="Copyright"\n      copyrightText="All rights reserved"\n      backToTopLabel="Back to top"\n      logo={<Logo src={logoFi} size="medium" alt="Helsingin kaupunki" />}\n    >\n      <Footer.Link label="Link" />\n      <Footer.Link label="Link" />\n      <Footer.Link label="Link" />\n    </Footer.Base>\n  </Footer>\n)\n'))),"\n",a.createElement(t.h4,{id:"color-variations",style:{position:"relative"}},"Color variations",a.createElement(t.a,{href:"#color-variations","aria-label":"color variations permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.h3,{id:"color-variations-1",style:{position:"relative"}},"Color variations",a.createElement(t.a,{href:"#color-variations-1","aria-label":"color variations 1 permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(l,{scope:{Footer:r.F,Logo:c.L,logoFi:c.l,logoFiDark:c.a}},a.createElement(t.pre,null,a.createElement(t.code,{className:"language-jsx"},'import { Footer, Logo, logoFi, logoFiDark } from \'hds-react\';\n\n() => (\n  <>\n    <Footer title="Helsinki Design System">\n      <Footer.Navigation>\n        <Footer.Link label="Item" />\n        <Footer.Link label="Item" />\n        <Footer.Link label="Item" />\n        <Footer.Link label="Item" />\n        <Footer.Link label="Item" />\n        <Footer.Link label="Item" />\n      </Footer.Navigation>\n      <Footer.Base\n        copyrightHolder="Copyright"\n        copyrightText="All rights reserved"\n        backToTopLabel="Back to top"\n        logo={<Logo src={logoFi} size="medium" alt="Helsingin kaupunki" />}\n      >\n        <Footer.Link label="Link" />\n        <Footer.Link label="Link" />\n        <Footer.Link label="Link" />\n      </Footer.Base>\n    </Footer>\n    <br />\n    <Footer title="Helsinki Design System" theme="dark">\n      <Footer.Navigation>\n        <Footer.Link label="Item" />\n        <Footer.Link label="Item" />\n        <Footer.Link label="Item" />\n        <Footer.Link label="Item" />\n        <Footer.Link label="Item" />\n        <Footer.Link label="Item" />\n      </Footer.Navigation>\n      <Footer.Base\n        copyrightHolder="Copyright"\n        copyrightText="All rights reserved"\n        backToTopLabel="Back to top"\n        logo={<Logo src={logoFiDark} size="medium" alt="Helsingin kaupunki" />}\n      >\n        <Footer.Link label="Link" />\n        <Footer.Link label="Link" />\n        <Footer.Link label="Link" />\n      </Footer.Base>\n    </Footer>\n  </>\n)\n'))),"\n",a.createElement(t.h3,{id:"navigation-section-variations",style:{position:"relative"}},"Navigation section variations",a.createElement(t.a,{href:"#navigation-section-variations","aria-label":"navigation section variations permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(l,{scope:{Footer:r.F}},a.createElement(t.pre,null,a.createElement(t.code,{className:"language-jsx"},'import { Footer } from \'hds-react\';\n\n() => (\n  <>\n    <Footer title="Default">\n      <Footer.Navigation>\n        <Footer.Link label="Item" />\n        <Footer.Link label="Item" />\n        <Footer.Link label="Item" />\n        <Footer.Link label="Item" />\n        <Footer.Link label="Item" />\n        <Footer.Link label="Item" />\n        <Footer.Link label="Item" />\n        <Footer.Link label="Item" />\n      </Footer.Navigation>\n    </Footer>\n    <br />\n    <br />\n    <Footer title="Sitemap">\n      <Footer.Navigation>\n        {[1, 2, 3, 4].map((key) => (\n          <Footer.NavigationGroup key={key}>\n            <Footer.GroupHeading\n              onClick={(e) => e.preventDefault()}\n              label="Item"\n            />\n            <Footer.Link label="Sub item" />\n            <Footer.Link label="Sub item" />\n            <Footer.Link label="Sub item" />\n            <Footer.Link label="Sub item" />\n            <Footer.Link label="Sub item" />\n            <Footer.Link label="Sub item" />\n          </Footer.NavigationGroup>\n        ))}\n      </Footer.Navigation>\n    </Footer>\n    <br />\n    <Footer title="Hidden" />\n  </>\n)\n'))),"\n",a.createElement(t.h4,{id:"utility-section-variations",style:{position:"relative"}},"Utility section variations",a.createElement(t.a,{href:"#utility-section-variations","aria-label":"utility section variations permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(l,{scope:{Footer:r.F,IconFacebook:o.V,IconTwitter:o.bj,IconInstagram:o.a6,IconYoutube:o.bB,IconTiktok:o.bf}},a.createElement(t.pre,null,a.createElement(t.code,{className:"language-jsx"},'import { Footer, IconFacebook, IconTwitter, IconInstagram, IconYoutube, IconTiktok } from \'hds-react\';\n\n() => (\n  <>\n    <Footer title="Default">\n      <Footer.Utilities soMeLinks={[\n        <Footer.Link\n          title="Helsingin kaupungin Facebook-tili"\n          ariaLabel="Helsingin kaupungin Facebook-tili"\n          external\n          openInNewTab\n          icon={<IconFacebook aria-hidden />}\n          href="https://facebook.com"\n        />,\n        <Footer.Link\n          title="Helsingin kaupungin Twitter-tili"\n          ariaLabel="Helsingin kaupungin Twitter-tili"\n          external\n          openInNewTab\n          icon={<IconTwitter aria-hidden />}\n          href="https://twitter.com"\n        />,\n        <Footer.Link\n          title="Helsingin kaupungin Instagram-tili"\n          ariaLabel="Helsingin kaupungin Instagram-tili"\n          external\n          openInNewTab\n          icon={<IconInstagram aria-hidden />}\n          href="https://instagram.com"\n        />,\n        <Link\n          title="Helsingin kaupungin Youtube-tili"\n          ariaLabel="Helsingin kaupungin Youtube-tili"\n          external\n          openInNewTab\n          icon={<IconYoutube aria-hidden />}\n          href="https://youtube.com"\n        />,\n        <Footer.Link\n          title="Helsingin kaupungin Tiktok-tili"\n          ariaLabel="Helsingin kaupungin Tiktok-tili"\n          external\n          openInNewTab\n          icon={<IconTiktok aria-hidden />}\n          href="https://tiktok.com"\n        />,\n      ]}>\n        <Footer.Link onClick={(e) => e.preventDefault()} label="Contact us" />\n        <Footer.Link onClick={(e) => e.preventDefault()} label="Give feedback" />\n        <Footer.Link onClick={(e) => e.preventDefault()} label="Support" />\n        <Footer.Link onClick={(e) => e.preventDefault()} label="About" />\n      </Footer.Utilities>\n    </Footer>\n    <br />\n    <br />\n    <Footer title="Utility groups">\n      <Footer.Utilities>\n        <Footer.UtilityGroup\n          headingLink={<Footer.GroupHeading\n            onClick={(e) => e.preventDefault()}\n            label="Group"\n          />}\n        >\n          <Footer.Link label="Link" />\n          <Footer.Link label="Link" />\n          <Footer.Link label="Link" />\n        </Footer.UtilityGroup>\n        <Footer.UtilityGroup\n          headingLink={<Footer.GroupHeading\n            onClick={(e) => e.preventDefault()}\n            label="Group"\n          />}\n        >\n          <Footer.Link label="Link" />\n          <Footer.Link label="Link" />\n          <Footer.Link label="Link" />\n        </Footer.UtilityGroup>\n        <Footer.UtilityGroup\n          headingLink={<Footer.GroupHeading\n            onClick={(e) => e.preventDefault()}\n            label="Group"\n          />}\n        >\n          <Footer.Link label="Link" />\n          <Footer.Link label="Link" />\n          <Footer.Link label="Link" />\n        </Footer.UtilityGroup>\n        <Footer.UtilityGroup\n          headingLink={<Footer.GroupHeading\n            onClick={(e) => e.preventDefault()}\n            label="Group"\n          />}\n        >\n          <Footer.Link label="Link" />\n          <Footer.Link label="Link" />\n          <Footer.Link label="Link" />\n        </Footer.UtilityGroup>\n      </Footer.Utilities>\n    </Footer>\n  </>\n)\n'))),"\n",a.createElement(t.h4,{id:"custom-link",style:{position:"relative"}},"Custom Link",a.createElement(t.a,{href:"#custom-link","aria-label":"custom link permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.ul,null,"\n",a.createElement(t.li,null,"The Footer.Link component has the ",a.createElement(t.code,null,"as")," prop which you can use to use your own navigation link instead of our Footer.Link, which uses ",a.createElement(i,{href:"/components/"},"HDS Link")," underneath. You can pass it as an element ",a.createElement(t.code,null,"as={<CustomLink />}")," or as a component ",a.createElement(t.code,null,"as={CustomLink}"),"."),"\n"),"\n",a.createElement(l,{scope:{Footer:r.F,Logo:c.L,logoFi:c.l,IconFacebook:o.V,IconTwitter:o.bj,IconInstagram:o.a6,IconYoutube:o.bB,IconTiktok:o.bf}},a.createElement(t.pre,null,a.createElement(t.code,{className:"language-jsx"},'import { Footer, Logo, logoFi, IconFacebook, IconTwitter, IconInstagram, IconYoutube, IconTiktok } from \'hds-react\';\nimport { Link } from \'gatsby\';\n\n() => (\n  <Footer title="Helsinki Design System">\n    <Footer.Navigation>\n      <Footer.Link as={Link} label="Item" />\n      <Footer.Link as={Link} label="Item" />\n      <Footer.Link as={Link} label="Item" />\n      <Footer.Link as={Link} label="Item" />\n      <Footer.Link as={Link} label="Item" />\n      <Footer.Link as={Link} label="Item" />\n      <Footer.Link as={Link} label="Item" />\n      <Footer.Link as={Link} label="Item" />\n    </Footer.Navigation>\n    <Footer.Utilities\n      soMeLinks={[\n        <Footer.Link as={Link} title="Helsingin kaupungin Facebook-tili" icon={<IconFacebook />} />,\n        <Footer.Link as={Link} title="Helsingin kaupungin Twitter-tili" icon={<IconTwitter />} />,\n        <Footer.Link as={Link} title="Helsingin kaupungin Instagram-tili" icon={<IconInstagram />} />,\n        <Footer.Link as={Link} title="Helsingin kaupungin Youtube-tili" icon={<IconYoutube />} />,\n        <Footer.Link as={Link} title="Helsingin kaupungin Tiktok-tili" icon={<IconTiktok />} />,\n      ]}\n    >\n      <Footer.Link as={Link} label="Contact us" />\n      <Footer.Link as={Link} label="Give feedback" />\n    </Footer.Utilities>\n    <Footer.Base\n      copyrightHolder="Copyright"\n      copyrightText="All rights reserved"\n      backToTopLabel="Back to top"\n      logo={<Logo src={logoFi} size="medium" alt="Helsingin kaupunki" />}\n    >\n      <Footer.Link as={Link} label="Link" />\n      <Footer.Link as={Link} label="Link" />\n      <Footer.Link as={Link} label="Link" />\n    </Footer.Base>\n  </Footer>\n)\n'))),"\n",a.createElement(t.h3,{id:"packages",style:{position:"relative"}},"Packages",a.createElement(t.a,{href:"#packages","aria-label":"packages permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Package"),a.createElement(t.th,null,"Included"),a.createElement(t.th,null,"Storybook link"),a.createElement(t.th,null,"Source link"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.strong,null,"HDS React")),a.createElement(t.td,null,a.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},a.createElement(s)," Yes ")),a.createElement(t.td,null,a.createElement(m,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-footer--example"},"View in Storybook")),a.createElement(t.td,null,a.createElement(d,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/react/src/components/footer"},"View source"))),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.strong,null,"HDS Core")),a.createElement(t.td,null,a.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},a.createElement(E)," No ")),a.createElement(t.td,null,"-"),a.createElement(t.td,null,"-")))),"\n",a.createElement(t.h3,{id:"properties",style:{position:"relative"}},"Properties",a.createElement(t.a,{href:"#properties","aria-label":"properties permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Property"),a.createElement(t.th,null,"Description"),a.createElement(t.th,null,"Values"),a.createElement(t.th,null,"Default value"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"ariaLabel")),a.createElement(t.td,null,"Aria-label for describing footer."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"className")),a.createElement(t.td,null,"Additional class names to apply."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"footerProps")),a.createElement(t.td,null,"Additional props for the ",a.createElement(t.code,null,"<footer")," element."),a.createElement(t.td,null,a.createElement(t.code,null,"Object")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"korosType")),a.createElement(t.td,null,"Koros type to use in the footer."),a.createElement(t.td,null,a.createElement(t.code,null,"KorosType")),a.createElement(t.td,null,a.createElement(t.code,null,'"basic"'))),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"theme")),a.createElement(t.td,null,"Footer theme."),a.createElement(t.td,null,a.createElement(t.code,null,'"light')," ",a.createElement(t.code,null,'"dark"')," ",a.createElement(t.code,null,"FooterCustomTheme")),a.createElement(t.td,null,a.createElement(t.code,null,'"light"'))),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"title")),a.createElement(t.td,null,"Service name."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,"[Table 1:Footer properties]"),a.createElement(t.td),a.createElement(t.td),a.createElement(t.td)))),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Property"),a.createElement(t.th,null,"Description"),a.createElement(t.th,null,"Values"),a.createElement(t.th,null,"Default value"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"ariaLabel")),a.createElement(t.td,null,"Aria-label for describing the navigation."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"role")),a.createElement(t.td,null,"ARIA role to describe the contents."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,"[Table 2:Footer.Navigation properties]"),a.createElement(t.td),a.createElement(t.td),a.createElement(t.td)))),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Property"),a.createElement(t.th,null,"Description"),a.createElement(t.th,null,"Values"),a.createElement(t.th,null,"Default value"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"ariaLabel")),a.createElement(t.td,null,"Aria-label for describing the link."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"as")),a.createElement(t.td,null,"Element or component to use instead of the default HDS Link."),a.createElement(t.td,null,a.createElement(t.code,null,"Element")),a.createElement(t.td,null,a.createElement(i,{href:"/components/"},a.createElement(t.code,null,"Link")))),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"external")),a.createElement(t.td,null,"Boolean indicating whether the link will lead user to external domain."),a.createElement(t.td,null,a.createElement(t.code,null,"boolean")),a.createElement(t.td,null,a.createElement(t.code,null,"false"))),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"href")),a.createElement(t.td,null,"Hypertext Reference of the link."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"icon")),a.createElement(t.td,null,"Icon which will display on the left side of the label."),a.createElement(t.td,null,a.createElement(t.code,null,"ReactNode")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"label")),a.createElement(t.td,null,"Label for the link."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"openInNewTab")),a.createElement(t.td,null,"Boolean indicating whether the link will open in new tab."),a.createElement(t.td,null,a.createElement(t.code,null,"boolean")),a.createElement(t.td,null,a.createElement(t.code,null,"false"))),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"openInNewTabAriaLabel")),a.createElement(t.td,null,"Aria-label for opening link in a new tab."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"openInExternalDomainAriaLabel")),a.createElement(t.td,null,"Aria-label for opening link in an external domain."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,"[Table 3:Footer.Link properties]"),a.createElement(t.td),a.createElement(t.td),a.createElement(t.td)))),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Property"),a.createElement(t.th,null,"Description"),a.createElement(t.th,null,"Values"),a.createElement(t.th,null,"Default value"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"className")),a.createElement(t.td,null,"Additional classNames for the element."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"id")),a.createElement(t.td,null,"ID for the element."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"headingLink")),a.createElement(t.td,null,"Footer.GroupHeading component to display at the top of the group. On smaller screens only this will be displayed."),a.createElement(t.td,null,a.createElement(t.code,null,"Footer.GroupHeading")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,"[Table 4:Footer.NavigationGroup properties]"),a.createElement(t.td),a.createElement(t.td),a.createElement(t.td)))),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Property"),a.createElement(t.th,null,"Description"),a.createElement(t.th,null,"Values"),a.createElement(t.th,null,"Default value"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"as")),a.createElement(t.td,null,"Element or component to use instead of the default native link or ",a.createElement(t.code,null,"<span>")," when ",a.createElement(t.code,null,"href")," is omitted."),a.createElement(t.td,null,a.createElement(t.code,null,"Element")),a.createElement(t.td,null,a.createElement(t.code,null,"a")," ",a.createElement(t.code,null,"span"))),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"href")),a.createElement(t.td,null,"Hypertext Reference of the link. If omitted, heading will be a ",a.createElement(t.code,null,"<span>"),"element instead of ",a.createElement(t.code,null,"<a>"),"."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"id")),a.createElement(t.td,null,"ID for the element."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"label")),a.createElement(t.td,null,"Label for the heading."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,"[Table 5:Footer.GroupHeading properties]"),a.createElement(t.td),a.createElement(t.td),a.createElement(t.td)))),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Property"),a.createElement(t.th,null,"Description"),a.createElement(t.th,null,"Values"),a.createElement(t.th,null,"Default value"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"ariaLabel")),a.createElement(t.td,null,"Aria-label for describing the utilities."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"soMeLinks")),a.createElement(t.td,null,"Array of Footer.NavigationLinks to display in the social media section."),a.createElement(t.td,null,a.createElement(t.code,null,"[Footer.NavigationLink]")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"soMeSectionProps")),a.createElement(t.td,null,"Additional props for the native ",a.createElement(t.code,null,"<section>")," element which hold the ",a.createElement(t.code,null,"soMeLinks"),"."),a.createElement(t.td,null,a.createElement(t.code,null,"Object")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"role")),a.createElement(t.td,null,"ARIA role to describe the contents."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,"[Table 6:Footer.Utilities properties]"),a.createElement(t.td),a.createElement(t.td),a.createElement(t.td)))),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Property"),a.createElement(t.th,null,"Description"),a.createElement(t.th,null,"Values"),a.createElement(t.th,null,"Default value"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"className")),a.createElement(t.td,null,"Additional classNames for the element."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"id")),a.createElement(t.td,null,"ID for the element."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"headingLink")),a.createElement(t.td,null,"Footer.GroupHeading component to display at the top of the group."),a.createElement(t.td,null,a.createElement(t.code,null,"Footer.GroupHeading")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,"[Table 7:Footer.UtilityGroup properties]"),a.createElement(t.td),a.createElement(t.td),a.createElement(t.td)))),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Property"),a.createElement(t.th,null,"Description"),a.createElement(t.th,null,"Values"),a.createElement(t.th,null,"Default value"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"ariaLabel")),a.createElement(t.td,null,"Aria-label for describing the custom area."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"className")),a.createElement(t.td,null,"Additional classNames for the element."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"id")),a.createElement(t.td,null,"ID for the element."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"role")),a.createElement(t.td,null,"ARIA role to describe the contents."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,"[Table 8:Footer.Custom properties]"),a.createElement(t.td),a.createElement(t.td),a.createElement(t.td)))),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Property"),a.createElement(t.th,null,"Description"),a.createElement(t.th,null,"Values"),a.createElement(t.th,null,"Default value"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"ariaLabel")),a.createElement(t.td,null,"Aria-label for describing the element."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"backToTopLabel")),a.createElement(t.td,null,'Label for the "Back to top" button.'),a.createElement(t.td,null,a.createElement(t.code,null,"string")," ",a.createElement(t.code,null,"ReactNode")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"copyrightHolder")),a.createElement(t.td,null,"Text to be displayed next to the copyright symbol."),a.createElement(t.td,null,a.createElement(t.code,null,"string")," ",a.createElement(t.code,null,"ReactNode")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"copyrightText")),a.createElement(t.td,null,"Text to be displayed after the copyright holder text."),a.createElement(t.td,null,a.createElement(t.code,null,"string")," ",a.createElement(t.code,null,"ReactNode")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"logoHref")),a.createElement(t.td,null,"Link for the logo."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"logo")),a.createElement(t.td,null,"Logo component to use."),a.createElement(t.td,null,a.createElement(t.code,null,"Logo")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"onBackToTopClick")),a.createElement(t.td,null,'Callback fired when the "Back to top" button is clicked.'),a.createElement(t.td,null,a.createElement(t.code,null,"function")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"role")),a.createElement(t.td,null,"ARIA role to describe the contents."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"showBackToTopButton")),a.createElement(t.td,null,'Boolean for whether the "Back to top" button should be shown.'),a.createElement(t.td,null,a.createElement(t.code,null,"boolean")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"year")),a.createElement(t.td,null,"The year for copyright text. This can be useful in automated tests."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,"[Table 9:Footer.Base properties]"),a.createElement(t.td),a.createElement(t.td),a.createElement(t.td)))))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){return void 0===e&&(e={}),a.createElement(s,e,a.createElement(m,e))}},68329:function(e,t,l){l.r(t);var n=l(11151),a=l(67294),r=l(83428),o=l(57674),c=l(89482),i=(l(18607),l(26127));function s(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,n.ah)(),e.components);return i.Z||m("PageTabs",!1),i.Z.Tab||m("PageTabs.Tab",!0),i.Z.TabList||m("PageTabs.TabList",!0),i.Z.TabPanel||m("PageTabs.TabPanel",!0),a.createElement(a.Fragment,null,a.createElement(t.h1,{id:"footer",style:{position:"relative"}},"Footer",a.createElement(t.a,{href:"#footer","aria-label":"footer permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement("div",{className:"status-label-description"},a.createElement(r.S,{type:"error"},"Draft"),a.createElement(r.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),a.createElement(o.Z)),"\n",a.createElement(c.Z,null,"The Footer component is located at the bottom of the page below the main body content. It provides a place for secondary navigation, site-wide actions, and additional information."),"\n",a.createElement(i.Z,{pageContext:e.pageContext},a.createElement(i.Z.TabList,null,a.createElement(i.Z.Tab,{href:"/"},"Usage"),a.createElement(i.Z.Tab,{href:"/code"},"Code"),a.createElement(i.Z.Tab,{href:"/accessibility"},"Accessibility"),a.createElement(i.Z.Tab,{href:"/customisation"},"Customisation")),a.createElement(i.Z.TabPanel,null,e.children)))}function m(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,n.ah)(),e.components);return t?a.createElement(t,e,a.createElement(s,e)):s(e)}},89482:function(e,t,l){var n=l(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:l="var(--fontsize-body-xl)",style:a={},children:r}=e;return n.createElement("p",{style:{fontSize:l,color:t,maxWidth:600,...a}},r)}},26127:function(e,t,l){var n=l(67294),a=l(14160),r=l(94671);const o="PageTabList",c="PageTabPanel",i="PageTab",s=e=>{var t;let{pageContext:l,children:s}=e;const m=l.frontmatter.slug,u=Array.isArray(s)?s:[s],d=u.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===o)),E=u.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===c)),h=null===(t=d.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===i)),b=h.findIndex((e=>m.endsWith(e.props.href))),p=-1===b?0:b,k=0===p?m:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(m);return n.createElement(r.a,{initiallyActiveTab:p},n.createElement(r.a.TabList,{className:"page-tabs-list"},h.map((e=>n.createElement(r.a.Tab,{key:e.props.href,onClick:()=>(0,a.navigate)(""+("/"===e.props.href?k:k+e.props.href))},e.props.children)))),h.map(((e,t)=>n.createElement(r.a.TabPanel,{key:e.props.href},p===t?E.props.children:n.createElement("div",null)))))},m=e=>{let{children:t}=e;return n.createElement(r.a.TabList,null,t)};m.componentName=o;const u=e=>{let{href:t,slug:l,children:a}=e;return n.createElement(r.a.Tab,null,a)};u.componentName=i;const d=e=>{let{children:t}=e;return n.createElement(r.a.TabPanel,null,t)};d.componentName=c,s.TabList=m,s.Tab=u,s.TabPanel=d,t.Z=s},57674:function(e,t,l){var n=l(67294),a=l(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return n.createElement(a.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},n.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>n.createElement("li",{key:t},n.createElement("span",{className:"status-name"},t),n.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-footer-customisation-mdx-7a9a78f8d1a538f63ad4.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-footer-customisation-mdx-7a9a78f8d1a538f63ad4.js
new file mode 100644
index 00000000000..0560c97c5a0
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-footer-customisation-mdx-7a9a78f8d1a538f63ad4.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[7445,4618],{83428:function(e,t,a){a.d(t,{S:function(){return c}});var n=a(80136),l=a(67294),o=a(7444),r=a(34300),s={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,o.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const i=e=>{let{icon:t}=e;return l.createElement("span",{className:s.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:o,type:c="neutral",iconLeft:u}=e,d=(0,n._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(s.statusLabel,s[c],u&&s.statusLabelWithIcon,a),"data-testid":o},d),u&&l.createElement(i,{icon:u}),t)}},39338:function(e,t,a){a.r(t);var n=a(11151),l=a(67294),o=a(41110),r=a(71015),s=a(68329);const i=e=>{let{children:t,pageContext:a}=e;return l.createElement(s.default,{pageContext:a},t)};function c(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",p:"p",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",pre:"pre"},(0,n.ah)(),e.components),{Playground:a}=t;return a||function(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Playground",!0),l.createElement(l.Fragment,null,l.createElement(t.h2,{id:"customisation",style:{position:"relative"}},"Customisation",l.createElement(t.a,{href:"#customisation","aria-label":"customisation permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h3,{id:"customisation-properties",style:{position:"relative"}},"Customisation properties",l.createElement(t.a,{href:"#customisation-properties","aria-label":"customisation properties permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"You can use the ",l.createElement(t.code,null,"theme")," property to customise the component. See all available theme variables in the table below."),"\n",l.createElement(t.table,null,l.createElement(t.thead,null,l.createElement(t.tr,null,l.createElement(t.th,null,"Theme variable"),l.createElement(t.th,null,"Description"))),l.createElement(t.tbody,null,l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"--footer-background")),l.createElement(t.td,null,"Colour of the Footer background")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"--footer-color")),l.createElement(t.td,null,"Colour of the Footer elements (such as text and icons)")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"--footer-divider-color")),l.createElement(t.td,null,"Colour of the divider line between Footer sections")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"--footer-focus-outline-color'")),l.createElement(t.td,null,"Colour of the Footer element focus border")))),"\n",l.createElement(t.h3,{id:"colour-customisation-example",style:{position:"relative"}},"Colour customisation example",l.createElement(t.a,{href:"#colour-customisation-example","aria-label":"colour customisation example permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a,{scope:{Footer:o.F,Logo:r.L,logoFi:r.l}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},'import { Footer, Logo, logoFi } from \'hds-react\';\n\n() => (\n  <Footer\n    title="Helsinki Design System"\n    theme={{\n      \'--footer-background\': \'var(--color-engel)\',\n      \'--footer-color\': \'var(--color-black-90)\',\n      \'--footer-divider-color\': \'var(--color-black-90)\',\n      \'--footer-focus-outline-color\': \'var(--color-black-90)\',\n    }}\n  >\n    <Footer.Navigation>\n      <Footer.Link label="Item" />\n      <Footer.Link label="Item" />\n      <Footer.Link label="Item" />\n      <Footer.Link label="Item" />\n      <Footer.Link label="Item" />\n      <Footer.Link label="Item" />\n    </Footer.Navigation>\n    <Footer.Base\n      copyrightHolder="Copyright"\n      copyrightText="All rights reserved"\n      backToTopLabel="Back to top"\n      logo={<Logo src={logoFi} size="medium" alt="Helsingin kaupunki" />}\n    >\n      <Footer.Link label="Link" />\n      <Footer.Link label="Link" />\n      <Footer.Link label="Link" />\n    </Footer.Base>\n  </Footer>\n)\n'))),"\n",l.createElement(t.h3,{id:"custom-section",style:{position:"relative"}},"Custom section",l.createElement(t.a,{href:"#custom-section","aria-label":"custom section permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a,{scope:{Footer:o.F,Logo:r.L,logoFi:r.l}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},'import { Footer, Logo, logoFi } from \'hds-react\';\n\n() => (\n  <Footer\n    title="Helsinki Design System"\n  >\n    <Footer.Custom>\n      <Footer.GroupHeading label="Partners" id="partners" />\n      <div\n        aria-label="partners"\n        style={{ display: \'flex\', flexDirection: \'row\', gap: \'12px 24px\', flexWrap: \'wrap\', marginTop: \'8px\' }}\n      >\n        <Footer.Link label="Partner 1" external openInNewTab />\n        <Footer.Link label="Partner 1" external openInNewTab />\n        <Footer.Link label="Partner 1" external openInNewTab />\n      </div>\n    </Footer.Custom>\n    <Footer.Base\n      copyrightHolder="Copyright"\n      copyrightText="All rights reserved"\n      backToTopLabel="Back to top"\n      logo={<Logo src={logoFi} size="medium" alt="Helsingin kaupunki" />}\n    >\n      <Footer.Link label="Link" />\n      <Footer.Link label="Link" />\n      <Footer.Link label="Link" />\n    </Footer.Base>\n  </Footer>\n)\n'))))}t.default=function(e){return void 0===e&&(e={}),l.createElement(i,e,l.createElement(c,e))}},68329:function(e,t,a){a.r(t);var n=a(11151),l=a(67294),o=a(83428),r=a(57674),s=a(89482),i=(a(18607),a(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,n.ah)(),e.components);return i.Z||u("PageTabs",!1),i.Z.Tab||u("PageTabs.Tab",!0),i.Z.TabList||u("PageTabs.TabList",!0),i.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"footer",style:{position:"relative"}},"Footer",l.createElement(t.a,{href:"#footer","aria-label":"footer permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{className:"status-label-description"},l.createElement(o.S,{type:"error"},"Draft"),l.createElement(o.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(s.Z,null,"The Footer component is located at the bottom of the page below the main body content. It provides a place for secondary navigation, site-wide actions, and additional information."),"\n",l.createElement(i.Z,{pageContext:e.pageContext},l.createElement(i.Z.TabList,null,l.createElement(i.Z.Tab,{href:"/"},"Usage"),l.createElement(i.Z.Tab,{href:"/code"},"Code"),l.createElement(i.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(i.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(i.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,n.ah)(),e.components);return t?l.createElement(t,e,l.createElement(c,e)):c(e)}},89482:function(e,t,a){var n=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:l={},children:o}=e;return n.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...l}},o)}},26127:function(e,t,a){var n=a(67294),l=a(14160),o=a(94671);const r="PageTabList",s="PageTabPanel",i="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const u=a.frontmatter.slug,d=Array.isArray(c)?c:[c],m=d.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===r)),b=d.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===s)),h=null===(t=m.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===i)),p=h.findIndex((e=>u.endsWith(e.props.href))),g=-1===p?0:p,f=0===g?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return n.createElement(o.a,{initiallyActiveTab:g},n.createElement(o.a.TabList,{className:"page-tabs-list"},h.map((e=>n.createElement(o.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),h.map(((e,t)=>n.createElement(o.a.TabPanel,{key:e.props.href},g===t?b.props.children:n.createElement("div",null)))))},u=e=>{let{children:t}=e;return n.createElement(o.a.TabList,null,t)};u.componentName=r;const d=e=>{let{href:t,slug:a,children:l}=e;return n.createElement(o.a.Tab,null,l)};d.componentName=i;const m=e=>{let{children:t}=e;return n.createElement(o.a.TabPanel,null,t)};m.componentName=s,c.TabList=u,c.Tab=d,c.TabPanel=m,t.Z=c},57674:function(e,t,a){var n=a(67294),l=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return n.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},n.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>n.createElement("li",{key:t},n.createElement("span",{className:"status-name"},t),n.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-footer-index-mdx-3dfb5aa9719f31603352.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-footer-index-mdx-3dfb5aa9719f31603352.js
new file mode 100644
index 00000000000..938c84705c5
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-footer-index-mdx-3dfb5aa9719f31603352.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[1441,4618],{83428:function(e,t,a){a.d(t,{S:function(){return c}});var n=a(80136),l=a(67294),i=a(7444),r=a(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,i.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const s=e=>{let{icon:t}=e;return l.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:i,type:c="neutral",iconLeft:m}=e,u=(0,n._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(o.statusLabel,o[c],m&&o.statusLabelWithIcon,a),"data-testid":i},u),m&&l.createElement(s,{icon:m}),t)}},55646:function(e,t,a){a.r(t);var n=a(11151),l=a(67294),i=a(41110),r=a(70476),o=a(71015),s=a(68329);const c=e=>{let{children:t,pageContext:a}=e;return l.createElement(s.default,{pageContext:a},t)};function m(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",p:"p",ul:"ul",li:"li",strong:"strong",h4:"h4"},(0,n.ah)(),e.components),{PlaygroundPreview:a,InternalLink:s}=t;return i.F||u("Footer",!1),i.F.Base||u("Footer.Base",!0),i.F.GroupHeading||u("Footer.GroupHeading",!0),i.F.Link||u("Footer.Link",!0),i.F.Navigation||u("Footer.Navigation",!0),i.F.Utilities||u("Footer.Utilities",!0),i.F.UtilityGroup||u("Footer.UtilityGroup",!0),s||u("InternalLink",!0),a||u("PlaygroundPreview",!0),l.createElement(l.Fragment,null,l.createElement(t.h2,{id:"usage",style:{position:"relative"}},"Usage",l.createElement(t.a,{href:"#usage","aria-label":"usage permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h3,{id:"example",style:{position:"relative"}},"Example",l.createElement(t.a,{href:"#example","aria-label":"example permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a,null,l.createElement(i.F,{title:"Helsinki Design System",footerAriaLabel:"HDS Footer"},l.createElement(i.F.Navigation,{navigationAriaLabel:"HDS Footer navigation"},l.createElement(i.F.Link,{label:"Item"}),l.createElement(i.F.Link,{label:"Item"}),l.createElement(i.F.Link,{label:"Item"}),l.createElement(i.F.Link,{label:"Item"}),l.createElement(i.F.Link,{label:"Item"}),l.createElement(i.F.Link,{label:"Item"}),l.createElement(i.F.Link,{label:"Item"}),l.createElement(i.F.Link,{label:"Item"})),l.createElement(i.F.Utilities,{soMeLinks:[l.createElement(i.F.Link,{icon:l.createElement(r.V)}),l.createElement(i.F.Link,{icon:l.createElement(r.bj)}),l.createElement(i.F.Link,{icon:l.createElement(r.a6)}),l.createElement(i.F.Link,{icon:l.createElement(r.bB)}),l.createElement(i.F.Link,{icon:l.createElement(r.bf)})]},l.createElement(i.F.Link,{label:"Contact us"}),l.createElement(i.F.Link,{label:"Give feedback"})),l.createElement(i.F.Base,{copyrightHolder:"Copyright",copyrightText:"All rights reserved",backToTopLabel:"Back to top",logo:l.createElement(o.L,{src:o.l,size:"medium",alt:"Helsingin kaupunki"})},l.createElement(i.F.Link,{label:"Link"}),l.createElement(i.F.Link,{label:"Link"}),l.createElement(i.F.Link,{label:"Link"})))),"\n",l.createElement(t.p,null,"Footer stays consistent throughout the site and is often the place where users scroll to if they feel lost or don't find what they are looking for. It's a good place provide the user an additional way to navigate the service and to information that is hard to find through primary navigation, for example contact info, copyright and legal statements. The footer can also be used to engage the user with actions and links to social media."),"\n",l.createElement(t.h3,{id:"principles",style:{position:"relative"}},"Principles",l.createElement(t.a,{href:"#principles","aria-label":"principles permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,l.createElement(t.strong,null,"It is strongly recommended to always include the footer component in your service and on every page of the service.")),"\n",l.createElement(t.li,null,"Always position the footer to the bottom of the page."),"\n",l.createElement(t.li,null,"Footer component is built to follow HDS ",l.createElement(s,{href:"/foundation/design-tokens/breakpoints"},"breakpoint tokens"),". While it is recommended to follow HDS breakpoint tokens, you may alter footer width to fit your service's needs."),"\n",l.createElement(t.li,null,"Keep the order of footer sections (navigation, utility, custom, base) and actions consistent. Do not change the default order without a good reason."),"\n",l.createElement(t.li,null,"The footer navigation should follow the same structure and labelling as the primary navigation. All top level pages included in the primary navigation should also be visible in footer navigation."),"\n",l.createElement(t.li,null,"If sub-pages are included in the footer, they should also follow the same structure and labelling as in the primary navigation. All same-level sub-pages should be visible."),"\n"),"\n",l.createElement(t.h3,{id:"variations",style:{position:"relative"}},"Variations",l.createElement(t.a,{href:"#variations","aria-label":"variations permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"The Footer consists of four possible sections: navigation, utility, custom and base. Each section is customisable to fit the needs of the service. ",l.createElement(t.strong,null,"It is recommended that the footer includes at least navigation and base sections.")," The utility and custom sections can be omitted entirely if not needed."),"\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,l.createElement(t.strong,null,"Navigation section (recommended)")," contains the name of the service and footer navigation. See the ",l.createElement(t.a,{href:"#navigation-section-variations"},"Navigation section variations")," for more information about customising the footer navigation."),"\n",l.createElement(t.li,null,l.createElement(t.strong,null,"Utility section (optional)")," contains links and actions not listed in main navigation, for example, social media icons, and links to contact info, feedback, or back to top. See the ",l.createElement(t.a,{href:"#utility-section-variations"},"Utility section variations")," for more information."),"\n",l.createElement(t.li,null,l.createElement(t.strong,null,"Custom section (optional)")," is for any content that you wish to include in the footer that doesn't fit elsewhere. You can put whatever you wish there but we recommend to keep the styling consistent with the rest of the Footer."),"\n",l.createElement(t.li,null,l.createElement(t.strong,null,"Base section (recommended)")," contains the logo and is used for supplementary information, for example copyright information and links to other meta information, e.g. accessibility statement, privacy policy, terms of use, etc."),"\n"),"\n",l.createElement(t.h4,{id:"default",style:{position:"relative"}},"Default",l.createElement(t.a,{href:"#default","aria-label":"default permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"The default footer uses the black text colour variant and includes three sections."),"\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,"The navigation section shows the service name and navigation. Navigation is optimised for up to eight menu items."),"\n",l.createElement(t.li,null,"Utility section is optimised to display up to three action links and five social media icons. An icon can be added to action links."),"\n",l.createElement(t.li,null,"Base section includes the logo, text for copyright or other meta information. The base section is optimised for up to five supplementary links, depending on link length."),"\n"),"\n",l.createElement(a,null,l.createElement(i.F,{title:"Helsinki Design System",footerAriaLabel:"HDS Footer"},l.createElement(i.F.Navigation,{navigationAriaLabel:"HDS Footer navigation"},l.createElement(i.F.Link,{label:"Item"}),l.createElement(i.F.Link,{label:"Item"}),l.createElement(i.F.Link,{label:"Item"}),l.createElement(i.F.Link,{label:"Item"}),l.createElement(i.F.Link,{label:"Item"}),l.createElement(i.F.Link,{label:"Item"}),l.createElement(i.F.Link,{label:"Item"}),l.createElement(i.F.Link,{label:"Item"})),l.createElement(i.F.Utilities,{soMeLinks:[l.createElement(i.F.Link,{title:"Helsingin kaupungin Facebook-tili",icon:l.createElement(r.V)}),l.createElement(i.F.Link,{title:"Helsingin kaupungin Twitter-tili",icon:l.createElement(r.bj)}),l.createElement(i.F.Link,{title:"Helsingin kaupungin Instagram-tili",icon:l.createElement(r.a6)}),l.createElement(i.F.Link,{title:"Helsingin kaupungin Youtube-tili",icon:l.createElement(r.bB)}),l.createElement(i.F.Link,{title:"Helsingin kaupungin Tiktok-tili",icon:l.createElement(r.bf)})]},l.createElement(i.F.Link,{label:"Contact us"}),l.createElement(i.F.Link,{label:"Give feedback"})),l.createElement(i.F.Base,{copyrightHolder:"Copyright",copyrightText:"All rights reserved",backToTopLabel:"Back to top",logo:l.createElement(o.L,{src:o.l,size:"medium",alt:"Helsingin kaupunki"})},l.createElement(i.F.Link,{label:"Link"}),l.createElement(i.F.Link,{label:"Link"}),l.createElement(i.F.Link,{label:"Link"})))),"\n",l.createElement(t.h4,{id:"colour-variations",style:{position:"relative"}},"Colour variations",l.createElement(t.a,{href:"#colour-variations","aria-label":"colour variations permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"The Footer component supports light and dark themes."),"\n",l.createElement(a,null,l.createElement(i.F,{title:"Helsinki Design System"},l.createElement(i.F.Navigation,null,l.createElement(i.F.Link,{label:"Item"}),l.createElement(i.F.Link,{label:"Item"}),l.createElement(i.F.Link,{label:"Item"}),l.createElement(i.F.Link,{label:"Item"}),l.createElement(i.F.Link,{label:"Item"}),l.createElement(i.F.Link,{label:"Item"})),l.createElement(i.F.Base,{copyrightHolder:"Copyright",copyrightText:"All rights reserved",backToTopLabel:"Back to top",logo:l.createElement(o.L,{src:o.l,size:"medium",alt:"Helsingin kaupunki"})},l.createElement(i.F.Link,{label:"Link"}),l.createElement(i.F.Link,{label:"Link"}),l.createElement(i.F.Link,{label:"Link"}))),l.createElement("br"),l.createElement(i.F,{title:"Helsinki Design System",theme:"dark"},l.createElement(i.F.Navigation,null,l.createElement(i.F.Link,{label:"Item"}),l.createElement(i.F.Link,{label:"Item"}),l.createElement(i.F.Link,{label:"Item"}),l.createElement(i.F.Link,{label:"Item"}),l.createElement(i.F.Link,{label:"Item"}),l.createElement(i.F.Link,{label:"Item"})),l.createElement(i.F.Base,{copyrightHolder:"Copyright",copyrightText:"All rights reserved",backToTopLabel:"Back to top",logo:l.createElement(o.L,{src:o.a,size:"medium",alt:"Helsingin kaupunki"})},l.createElement(i.F.Link,{label:"Link"}),l.createElement(i.F.Link,{label:"Link"}),l.createElement(i.F.Link,{label:"Link"})))),"\n",l.createElement(t.h4,{id:"navigation-section-variations",style:{position:"relative"}},"Navigation section variations",l.createElement(t.a,{href:"#navigation-section-variations","aria-label":"navigation section variations permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"Navigation section two different layout options:"),"\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,l.createElement(t.strong,null,"Default navigation")," includes only the main level navigation items. The layout is optimised for up to eight menu items."),"\n",l.createElement(t.li,null,l.createElement(t.strong,null,"Sitemap navigation")," includes also second-level sub-pages. Sitemap can be used in footer to help the user find pages quickly from a complicated page hierarchy. Note that on smaller screens the second-level sub-pages are hidden."),"\n",l.createElement(t.li,null,"The navigation can also be omitted."),"\n"),"\n",l.createElement(a,null,l.createElement(i.F,{title:"Default",footerAriaLabel:"HDS Footer"},l.createElement(i.F.Navigation,{navigationAriaLabel:"HDS Footer navigation"},l.createElement(i.F.Link,{label:"Item"}),l.createElement(i.F.Link,{label:"Item"}),l.createElement(i.F.Link,{label:"Item"}),l.createElement(i.F.Link,{label:"Item"}),l.createElement(i.F.Link,{label:"Item"}),l.createElement(i.F.Link,{label:"Item"}),l.createElement(i.F.Link,{label:"Item"}),l.createElement(i.F.Link,{label:"Item"}))),l.createElement("br"),l.createElement("br"),l.createElement(i.F,{title:"Sitemap",footerAriaLabel:"HDS Footer"},l.createElement(i.F.Navigation,{navigationAriaLabel:"HDS Footer navigation"},[1,2,3,4].map((e=>l.createElement(i.F.NavigationGroup,{key:e,headingLink:l.createElement(i.F.GroupHeading,{href:"http://www.google.com",onClick:e=>e.preventDefault(),label:"Item"})},l.createElement(i.F.Link,{label:"Sub item"}),l.createElement(i.F.Link,{label:"Sub item"}),l.createElement(i.F.Link,{label:"Sub item"}),l.createElement(i.F.Link,{label:"Sub item"}),l.createElement(i.F.Link,{label:"Sub item"}),l.createElement(i.F.Link,{label:"Sub item"})))))),l.createElement("br"),l.createElement(i.F,{title:"Hidden",footerAriaLabel:"HDS Footer"})),"\n",l.createElement(t.h4,{id:"utility-section-variations",style:{position:"relative"}},"Utility section variations",l.createElement(t.a,{href:"#utility-section-variations","aria-label":"utility section variations permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"Utility section has two different layout options:"),"\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,l.createElement(t.strong,null,"Default"),": optimised to display up to three action links and five social media icons."),"\n",l.createElement(t.li,null,l.createElement(t.strong,null,"Utility groups"),": optimised to display up to four groups of utility links."),"\n",l.createElement(t.li,null,"The utility section can also be omitted."),"\n"),"\n",l.createElement(a,null,l.createElement(i.F,{title:"Default",footerAriaLabel:"HDS Footer"},l.createElement(i.F.Utilities,{soMeLinks:[l.createElement(i.F.Link,{title:"Helsingin kaupungin Facebook-tili",ariaLabel:"Helsingin kaupungin Facebook-tili",external:!0,openInNewTab:!0,icon:l.createElement(r.V,{"aria-hidden":!0}),href:"https://facebook.com"}),l.createElement(i.F.Link,{title:"Helsingin kaupungin Twitter-tili",ariaLabel:"Helsingin kaupungin Twitter-tili",external:!0,openInNewTab:!0,icon:l.createElement(r.bj,{"aria-hidden":!0}),href:"https://twitter.com"}),l.createElement(i.F.Link,{title:"Helsingin kaupungin Instagram-tili",ariaLabel:"Helsingin kaupungin Instagram-tili",external:!0,openInNewTab:!0,icon:l.createElement(r.a6,{"aria-hidden":!0}),href:"https://instagram.com"}),l.createElement(i.F.Link,{title:"Helsingin kaupungin Youtube-tili",ariaLabel:"Helsingin kaupungin Youtube-tili",external:!0,openInNewTab:!0,icon:l.createElement(r.bB,{"aria-hidden":!0}),href:"https://youtube.com"}),l.createElement(i.F.Link,{title:"Helsingin kaupungin Tiktok-tili",ariaLabel:"Helsingin kaupungin Tiktok-tili",external:!0,openInNewTab:!0,icon:l.createElement(r.bf,{"aria-hidden":!0}),href:"https://tiktok.com"})]},l.createElement(i.F.Link,{href:"https://google.com",onClick:e=>e.preventDefault(),label:"Contact us"}),l.createElement(i.F.Link,{href:"https://google.com",onClick:e=>e.preventDefault(),label:"Give feedback"}),l.createElement(i.F.Link,{href:"https://google.com",onClick:e=>e.preventDefault(),label:"Support"}),l.createElement(i.F.Link,{href:"https://google.com",onClick:e=>e.preventDefault(),label:"About"}))),l.createElement("br"),l.createElement("br"),l.createElement(i.F,{title:"Utility groups",footerAriaLabel:"HDS Footer"},l.createElement(i.F.Utilities,null,[{},{},{}].map((e=>l.createElement(i.F.UtilityGroup,{key:e,headingLink:l.createElement(i.F.GroupHeading,{href:"https://google.com",onClick:e=>e.preventDefault(),label:"Group heading link"})},[{},{},{}].map((e=>l.createElement(i.F.Link,{key:e,href:"https://google.com",onClick:e=>e.preventDefault(),label:"Group link"})))))),l.createElement(i.F.UtilityGroup,{key:6,headingLink:l.createElement(i.F.GroupHeading,{label:"Social media"})},l.createElement(i.F.Link,{title:"Helsingin kaupungin Facebook-tili",label:"Facebook",ariaLabel:"Helsingin kaupungin Facebook-tili",openInNewTabAriaLabel:"Avautuu uudessa välilehdessä.",openInExternalDomainAriaLabel:"Siirtyy toiseen sivustoon.",icon:l.createElement(r.V,{"aria-hidden":"true"}),href:"https://facebook.com/helsinginkaupunki/"}),l.createElement(i.F.Link,{title:"Helsingin kaupungin Facebook-tili",label:"Facebook",ariaLabel:"Helsingin kaupungin Facebook-tili",openInNewTabAriaLabel:"Avautuu uudessa välilehdessä.",openInExternalDomainAriaLabel:"Siirtyy toiseen sivustoon.",icon:l.createElement(r.V,{"aria-hidden":"true"}),href:"https://facebook.com/helsinginkaupunki/"}),l.createElement(i.F.Link,{title:"Helsingin kaupungin Twitter-tili",label:"Twitter",ariaLabel:"Helsingin kaupungin Twitter-tili",openInNewTabAriaLabel:"Avautuu uudessa välilehdessä.",openInExternalDomainAriaLabel:"Siirtyy toiseen sivustoon.",icon:l.createElement(r.bj,{"aria-hidden":"true"}),href:"https://twitter.com/helsinki"}),l.createElement(i.F.Link,{title:"Helsingin kaupungin Instagram-tili",label:"Instagram",ariaLabel:"Helsingin kaupungin Instagram-tili",openInNewTabAriaLabel:"Avautuu uudessa välilehdessä.",openInExternalDomainAriaLabel:"Siirtyy toiseen sivustoon.",icon:l.createElement(r.a6,{"aria-hidden":"true"}),href:"https://instagram.com/helsinki/"}))))))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){return void 0===e&&(e={}),l.createElement(c,e,l.createElement(m,e))}},68329:function(e,t,a){a.r(t);var n=a(11151),l=a(67294),i=a(83428),r=a(57674),o=a(89482),s=(a(18607),a(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,n.ah)(),e.components);return s.Z||m("PageTabs",!1),s.Z.Tab||m("PageTabs.Tab",!0),s.Z.TabList||m("PageTabs.TabList",!0),s.Z.TabPanel||m("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"footer",style:{position:"relative"}},"Footer",l.createElement(t.a,{href:"#footer","aria-label":"footer permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{className:"status-label-description"},l.createElement(i.S,{type:"error"},"Draft"),l.createElement(i.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(o.Z,null,"The Footer component is located at the bottom of the page below the main body content. It provides a place for secondary navigation, site-wide actions, and additional information."),"\n",l.createElement(s.Z,{pageContext:e.pageContext},l.createElement(s.Z.TabList,null,l.createElement(s.Z.Tab,{href:"/"},"Usage"),l.createElement(s.Z.Tab,{href:"/code"},"Code"),l.createElement(s.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(s.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(s.Z.TabPanel,null,e.children)))}function m(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,n.ah)(),e.components);return t?l.createElement(t,e,l.createElement(c,e)):c(e)}},89482:function(e,t,a){var n=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:l={},children:i}=e;return n.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...l}},i)}},26127:function(e,t,a){var n=a(67294),l=a(14160),i=a(94671);const r="PageTabList",o="PageTabPanel",s="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const m=a.frontmatter.slug,u=Array.isArray(c)?c:[c],d=u.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===r)),h=u.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===o)),b=null===(t=d.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===s)),p=b.findIndex((e=>m.endsWith(e.props.href))),g=-1===p?0:p,E=0===g?m:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(m);return n.createElement(i.a,{initiallyActiveTab:g},n.createElement(i.a.TabList,{className:"page-tabs-list"},b.map((e=>n.createElement(i.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?E:E+e.props.href))},e.props.children)))),b.map(((e,t)=>n.createElement(i.a.TabPanel,{key:e.props.href},g===t?h.props.children:n.createElement("div",null)))))},m=e=>{let{children:t}=e;return n.createElement(i.a.TabList,null,t)};m.componentName=r;const u=e=>{let{href:t,slug:a,children:l}=e;return n.createElement(i.a.Tab,null,l)};u.componentName=s;const d=e=>{let{children:t}=e;return n.createElement(i.a.TabPanel,null,t)};d.componentName=o,c.TabList=m,c.Tab=u,c.TabPanel=d,t.Z=c},57674:function(e,t,a){var n=a(67294),l=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return n.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},n.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>n.createElement("li",{key:t},n.createElement("span",{className:"status-name"},t),n.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-footer-tabs-mdx-04d6453ba70a5d91ca08.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-footer-tabs-mdx-04d6453ba70a5d91ca08.js
new file mode 100644
index 00000000000..44a249f7f54
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-footer-tabs-mdx-04d6453ba70a5d91ca08.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[4618],{83428:function(e,t,a){a.d(t,{S:function(){return i}});var s=a(80136),l=a(67294),n=a(7444),r=a(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const c=e=>{let{icon:t}=e;return l.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},t)},i=e=>{var{children:t,className:a,dataTestId:n,type:i="neutral",iconLeft:b}=e,u=(0,s._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(o.statusLabel,o[i],b&&o.statusLabelWithIcon,a),"data-testid":n},u),b&&l.createElement(c,{icon:b}),t)}},68329:function(e,t,a){a.r(t);var s=a(11151),l=a(67294),n=a(83428),r=a(57674),o=a(89482),c=(a(18607),a(26127));function i(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,s.ah)(),e.components);return c.Z||b("PageTabs",!1),c.Z.Tab||b("PageTabs.Tab",!0),c.Z.TabList||b("PageTabs.TabList",!0),c.Z.TabPanel||b("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"footer",style:{position:"relative"}},"Footer",l.createElement(t.a,{href:"#footer","aria-label":"footer permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{className:"status-label-description"},l.createElement(n.S,{type:"error"},"Draft"),l.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(o.Z,null,"The Footer component is located at the bottom of the page below the main body content. It provides a place for secondary navigation, site-wide actions, and additional information."),"\n",l.createElement(c.Z,{pageContext:e.pageContext},l.createElement(c.Z.TabList,null,l.createElement(c.Z.Tab,{href:"/"},"Usage"),l.createElement(c.Z.Tab,{href:"/code"},"Code"),l.createElement(c.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(c.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(c.Z.TabPanel,null,e.children)))}function b(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,s.ah)(),e.components);return t?l.createElement(t,e,l.createElement(i,e)):i(e)}},89482:function(e,t,a){var s=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:l={},children:n}=e;return s.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...l}},n)}},26127:function(e,t,a){var s=a(67294),l=a(14160),n=a(94671);const r="PageTabList",o="PageTabPanel",c="PageTab",i=e=>{var t;let{pageContext:a,children:i}=e;const b=a.frontmatter.slug,u=Array.isArray(i)?i:[i],d=u.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===r)),m=u.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===o)),h=null===(t=d.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===c)),p=h.findIndex((e=>b.endsWith(e.props.href))),_=-1===p?0:p,f=0===_?b:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(b);return s.createElement(n.a,{initiallyActiveTab:_},s.createElement(n.a.TabList,{className:"page-tabs-list"},h.map((e=>s.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),h.map(((e,t)=>s.createElement(n.a.TabPanel,{key:e.props.href},_===t?m.props.children:s.createElement("div",null)))))},b=e=>{let{children:t}=e;return s.createElement(n.a.TabList,null,t)};b.componentName=r;const u=e=>{let{href:t,slug:a,children:l}=e;return s.createElement(n.a.Tab,null,l)};u.componentName=c;const d=e=>{let{children:t}=e;return s.createElement(n.a.TabPanel,null,t)};d.componentName=o,i.TabList=b,i.Tab=u,i.TabPanel=d,t.Z=i},57674:function(e,t,a){var s=a(67294),l=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return s.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},s.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>s.createElement("li",{key:t},s.createElement("span",{className:"status-name"},t),s.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-header-accessibility-mdx-30f50becfde708c94cb6.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-header-accessibility-mdx-30f50becfde708c94cb6.js
new file mode 100644
index 00000000000..560374d958b
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-header-accessibility-mdx-30f50becfde708c94cb6.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[8735,5387],{83428:function(e,a,t){t.d(a,{S:function(){return c}});var n=t(80136),l=t(67294),s=t(7444),r=t(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,s.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const i=e=>{let{icon:a}=e;return l.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},a)},c=e=>{var{children:a,className:t,dataTestId:s,type:c="neutral",iconLeft:d}=e,u=(0,n._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(o.statusLabel,o[c],d&&o.statusLabelWithIcon,t),"data-testid":s},u),d&&l.createElement(i,{icon:d}),a)}},12307:function(e,a,t){t.r(a);var n=t(11151),l=t(67294),s=t(11690),r=t(1076);const o=e=>{let{children:a,pageContext:t}=e;return l.createElement(s.default,{pageContext:t},a)};function i(e){const a=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",strong:"strong",code:"code"},(0,n.ah)(),e.components);return l.createElement(l.Fragment,null,l.createElement(a.h2,{id:"accessibility",style:{position:"relative"}},"Accessibility",l.createElement(a.a,{href:"#accessibility","aria-label":"accessibility permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.h3,{id:"pay-attention-to",style:{position:"relative"}},"Pay attention to",l.createElement(a.a,{href:"#pay-attention-to","aria-label":"pay attention to permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.ul,null,"\n",l.createElement(a.li,null,"HDS Navigation is designed to support many different brand colours. When customising colours, refer to ",l.createElement(r.Z,{href:"/foundation/design-tokens/colour"},"colour guidelines")," to ensure accessibility."),"\n",l.createElement(a.li,null,l.createElement(a.strong,null,"When designing a menu link hierarchy, always think about keyboard and screen reader users.")," First, make sure top-level menu labels are clear, and submenu items contextually fit under it. Next, make sure the menu option order is logical and reasonable. Remember that keyboard users need to manually navigate to each element and thus placing a commonly used menu option last is not optimal."),"\n",l.createElement(a.li,null,"Landmarks are provided by the wrapping ",l.createElement(a.code,null,"<header>")," element, ",l.createElement(a.code,null,"<nav>")," element in the Header.NavigationMenu component and with ",l.createElement(a.code,null,'role="search"')," attribute on the Header.HeaderSearch component. In case you want more landmarks, the Header.UniversalBar, Header.ActionBar and Header.HeaderSearch components support ",l.createElement(a.code,null,"role")," prop which should be used together with a descriptive ",l.createElement(a.code,null,"ariaLabel"),' prop. Just remember that landmarks should be used sparingly in order to avoid "noise" for screen readers and making the overall page layout difficult to understand.'),"\n",l.createElement(a.li,null,"Header.NavigationMenu's dropdowns open only by clicking them. They don't open from hovering with the mouse as it can be difficult to navigate for people with motor and seeing challenges."),"\n",l.createElement(a.li,null,"Only use the elements you need. Avoid clutter."),"\n"))}a.default=function(e){return void 0===e&&(e={}),l.createElement(o,e,l.createElement(i,e))}},11690:function(e,a,t){t.r(a);var n=t(11151),l=t(67294),s=t(83428),r=t(12818),o=t(57674),i=t(89482),c=(t(18607),t(26127));function d(e){const a=Object.assign({h1:"h1",a:"a",span:"span",p:"p"},(0,n.ah)(),e.components);return c.Z||u("PageTabs",!1),c.Z.Tab||u("PageTabs.Tab",!0),c.Z.TabList||u("PageTabs.TabList",!0),c.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(a.h1,{id:"header",style:{position:"relative"}},"Header",l.createElement(a.a,{href:"#header","aria-label":"header permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{className:"status-label-description"},l.createElement(s.S,{type:"error"},"Draft"),l.createElement(s.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(o.Z)),"\n",l.createElement(i.Z,null,"The Header component is located at the top of the page above the main body content. It provides a place for levels of primary navigation and site-wide actions."),"\n",l.createElement(r.N,{label:"A work in progress!",className:"siteNotification"},l.createElement(a.p,null,"The Header components are a collection of new navigation components the HDS team is currently fine tuning. This means\nthat these components are subject to change. We are open to feedback regarding how they work.")),"\n",l.createElement(c.Z,{pageContext:e.pageContext},l.createElement(c.Z.TabList,null,l.createElement(c.Z.Tab,{href:"/"},"Usage"),l.createElement(c.Z.Tab,{href:"/code"},"Code"),l.createElement(c.Z.Tab,{href:"/accessibility"},"Accessibility")),l.createElement(c.Z.TabPanel,null,e.children)))}function u(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,n.ah)(),e.components);return a?l.createElement(a,e,l.createElement(d,e)):d(e)}},89482:function(e,a,t){var n=t(67294);a.Z=e=>{let{color:a="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:l={},children:s}=e;return n.createElement("p",{style:{fontSize:t,color:a,maxWidth:600,...l}},s)}},26127:function(e,a,t){var n=t(67294),l=t(14160),s=t(94671);const r="PageTabList",o="PageTabPanel",i="PageTab",c=e=>{var a;let{pageContext:t,children:c}=e;const d=t.frontmatter.slug,u=Array.isArray(c)?c:[c],m=u.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===r)),h=u.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===o)),b=null===(a=m.props)||void 0===a?void 0:a.children.filter((e=>e.type.componentName===i)),p=b.findIndex((e=>d.endsWith(e.props.href))),g=-1===p?0:p,f=0===g?d:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(d);return n.createElement(s.a,{initiallyActiveTab:g},n.createElement(s.a.TabList,{className:"page-tabs-list"},b.map((e=>n.createElement(s.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),b.map(((e,a)=>n.createElement(s.a.TabPanel,{key:e.props.href},g===a?h.props.children:n.createElement("div",null)))))},d=e=>{let{children:a}=e;return n.createElement(s.a.TabList,null,a)};d.componentName=r;const u=e=>{let{href:a,slug:t,children:l}=e;return n.createElement(s.a.Tab,null,l)};u.componentName=i;const m=e=>{let{children:a}=e;return n.createElement(s.a.TabPanel,null,a)};m.componentName=o,c.TabList=d,c.Tab=u,c.TabPanel=m,a.Z=c},57674:function(e,a,t){var n=t(67294),l=t(45422);a.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return n.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},n.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((a=>n.createElement("li",{key:a},n.createElement("span",{className:"status-name"},a),n.createElement("span",null,e[a]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-header-code-mdx-cddb16dd87adbbc7f3c6.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-header-code-mdx-cddb16dd87adbbc7f3c6.js
new file mode 100644
index 00000000000..dd9979e2902
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-header-code-mdx-cddb16dd87adbbc7f3c6.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[3524,5387],{83428:function(e,t,n){n.d(t,{S:function(){return s}});var l=n(80136),a=n(67294),r=n(7444),o=n(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,r.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const c=e=>{let{icon:t}=e;return a.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},t)},s=e=>{var{children:t,className:n,dataTestId:r,type:s="neutral",iconLeft:u}=e,d=(0,l._)(e,["children","className","dataTestId","type","iconLeft"]);return a.createElement("span",Object.assign({className:(0,o.c)(i.statusLabel,i[s],u&&i.statusLabelWithIcon,n),"data-testid":r},d),u&&a.createElement(c,{icon:u}),t)}},31729:function(e,t,n){n.r(t),n.d(t,{logoSrcFromLanguageAndTheme:function(){return m},translations:function(){return E}});var l=n(11151),a=n(67294),r=n(71015),o=n(11167),i=n(11303),c=n(70476),s=n(80699),u=n(11690);const d=e=>{let{children:t,pageContext:n}=e;return a.createElement(u.default,{pageContext:n},t)},m=(e,t)=>"sv"===e?"light"===t||"object"==typeof t?r.b:r.c:"light"===t||"object"==typeof t?r.l:r.a,E={en:{adultEducationCentres:"Adult education centres",ariaLanguageSelection:"Choose language",ariaLogo:"Service logo",ariaMenuButton:"Menu",basicEducation:"Basic education",business:"Business",businessAndWork:"Business and work",childHoodAndEducation:"Childhood and education",clearFinnish:"Clear finnish",close:"Close",dentalCare:"Dental care",earlyChildhoodEducation:"Early childhood education",education:"Education",employers:"Employers",entrepreneurs:"Entrepreneurs",feedback:"Give feedback",forImmigrants:"For immigrants",forTravellers:"For travellers",frontPage:"Frontpage",generalUpperSecondaryEducation:"General upper secondary education",headerAriaLabel:"City of Helsinki",headerLogin:"Login",headerMenuTitle:"Other languages",headerSearch:"Search",headerTitle:"City of Helsinki",healtcare:"Healt care",healthAndndSocialServices:"Health and social services",infoOtherLanguages:"Information in other languages",jobSeekers:"Jobseekers",loginOptions:"Login options",news:"News",online:"Online",openJobs:"Open jobs",otherLanguages:"Other languages",prePrimaryEducation:"Pre-primary education",search:"Search in the website",seniorServices:"Senior services",signLanguage:"Sign language",skipToContent:"Skip to content"},fi:{adultEducationCentres:"Työväenopistot",ariaLanguageSelection:"Kielen valinta",ariaLogo:"Palvelun logo",ariaMenuButton:"Valikko",basicEducation:"Perusopetus",business:"Yritykset",businessAndWork:"Yritykset ja työ",childHoodAndEducation:"Kasvatus ja koulutus",clearFinnish:"Selkosuomi",close:"Sulje",dentalCare:"Hammashoito",earlyChildhoodEducation:"Varhaiskasvatus",education:"Koulutus",employers:"Työnantajat",entrepreneurs:"Yrittäjät",feedback:"Anna palautetta",forImmigrants:"Maahanmuuttajille",forTravellers:"Matkailijoille",frontPage:"Etusivu",generalUpperSecondaryEducation:"Lukiokoulutus",headerAriaLabel:"Helsingin kaupunki",headerLogin:"Kirjaudu",headerMenuTitle:"Tietoa muilla kielillä",headerSearch:"Haku",headerTitle:"Helsingin kaupunki",healtcare:"Terveydenhoito",healthAndndSocialServices:"Sosiaali- ja terveyspalvelut",infoOtherLanguages:"Tietoa muilla kielillä",jobSeekers:"Työnhakijat",loginOptions:"Kirjautumisvalinnat",news:"Uutiset",online:"Asioi verkossa",openJobs:"Avoimet työpaikat",otherLanguages:"Muut kielet",prePrimaryEducation:"Esiopetus",search:"Hae sivustolta",seniorServices:"Senioripalvelut",signLanguage:"Viittomakieli",skipToContent:"Hyppää sisältöön"},sv:{adultEducationCentres:"Arbetarinstituten",ariaLanguageSelection:"Välja spräk",ariaLogo:"Service logo",ariaMenuButton:"Menu",basicEducation:"Grundläggande utbildning",business:"Företag",businessAndWork:"Företag och arbete",childHoodAndEducation:"Fostran och utbildning",clearFinnish:"Klara finska",close:"Stäng",dentalCare:"Tandvård",earlyChildhoodEducation:"Småbarnspedagogik",education:"Utbildning",employers:"Arbetsgivare",entrepreneurs:"Företagare",feedback:"Ge feedback",forImmigrants:"För migranter",forTravellers:"För turister",frontPage:"Hemsida",generalUpperSecondaryEducation:"Gymnasieutbildning",headerAriaLabel:"Helsingfors Stad",headerLogin:"Logga in",headerMenuTitle:"Andra språk",headerSearch:"Sök",headerTitle:"Helsingfors Stad",healtcare:"Hälsovärd",healthAndndSocialServices:"Social- och hälsovårdstjänster",infoOtherLanguages:"information på andra språk",jobSeekers:"Arbetssökande",loginOptions:"Logga in optioner",news:"Nyheter",online:"Göra affärer online",openJobs:"Lediga jobb",otherLanguages:"Andra språk",prePrimaryEducation:"Förskoleundervisning",search:"Sök på sidor",seniorServices:"Seniortjänster",signLanguage:"Teckenpsråk",skipToContent:"Hoppa till innehåll"},fr:{adultEducationCentres:"Centre d'éducation des adultes",ariaLanguageSelection:"Changez de langue",ariaLogo:"Logo de service",ariaMenuButton:"Menu",basicEducation:"École élémentaire",business:"Enteprises",businessAndWork:"Entreprises et travail",childHoodAndEducation:"Éducation",clearFinnish:"Finnois simple",close:"Fermer",dentalCare:"Soins dentaires",earlyChildhoodEducation:"L'éducation de la petite enfance",education:"Éducation",employers:"Employeurs",entrepreneurs:"Entrepreneur",feedback:"Remarques",forImmigrants:"Pour les immigrants",forTravellers:"Pour les touristes",frontPage:"Page d'accueil",generalUpperSecondaryEducation:"Lycèe",headerAriaLabel:"Ville de Helsinki",headerLogin:"Se connecter",headerMenuTitle:"Autres langues",headerSearch:"Reserche",headerTitle:"Ville de Helsinki",healtcare:"Soins de santé",healthAndndSocialServices:"Services sociaux et de santé",infoOtherLanguages:"Information en autres langues",jobSeekers:"Demandeurs d'emploi",loginOptions:"Choix pour se connecter",news:"Actualités",online:"e-Démarches",openJobs:"Emplois ouverts",otherLanguages:"Autres langages",prePrimaryEducation:"École maternelle",search:"Reserchez sur la site",seniorServices:"Service aux personnes âgées",signLanguage:"Langue des signes",skipToContent:"Passer au contenu"}};function h(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",h4:"h4",pre:"pre",code:"code",p:"p",strong:"strong",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td"},(0,l.ah)(),e.components),{Playground:n,Link:u,InternalLink:d,IconCheckCircleFill:h,IconCrossCircle:k}=t;return h||p("IconCheckCircleFill",!0),k||p("IconCrossCircle",!0),d||p("InternalLink",!0),u||p("Link",!0),n||p("Playground",!0),a.createElement(a.Fragment,null,a.createElement(t.h2,{id:"code",style:{position:"relative"}},"Code",a.createElement(t.a,{href:"#code","aria-label":"code permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.h3,{id:"code-examples",style:{position:"relative"}},"Code examples",a.createElement(t.a,{href:"#code-examples","aria-label":"code examples permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.h4,{id:"with-all-the-components",style:{position:"relative"}},"With all the components",a.createElement(t.a,{href:"#with-all-the-components","aria-label":"with all the components permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(n,{scope:{Header:o.H,IconSearch:i.I,IconUser:c.bl,Logo:r.L,logoFi:r.l,logoSv:r.b,logoSvDark:r.c,translations:E,logoSrcFromLanguageAndTheme:m}},a.createElement(t.pre,null,a.createElement(t.code,{className:"language-jsx"},"import { Header, IconSearch, IconUser, Logo, logoFi, logoSv, logoSvDark } from 'hds-react';\n\n() => {\n  const languages = [\n    { label: 'Suomi', value: 'fi', isPrimary: true },\n    { label: 'Svenska', value: 'sv', isPrimary: true },\n    { label: 'English', value: 'en', isPrimary: true },\n    { label: 'Français', value: 'fr' },\n  ];\n  const searchAction = () => {\n    console.log('Open search page');\n  };\n\n  const [href, setHref] = React.useState('');\n  const [lang, setLang] = React.useState('fi');\n\n  const languageChangedStateAction = (language) => {\n    setLang(language);\n  };\n\n  const [I18n, setI18n] = React.useState(translations[lang]);\n\n  React.useEffect(() => {\n    setI18n(translations[lang]);\n  }, [lang]);\n\n  return (\n    <>\n      <Header onDidChangeLanguage={languageChangedStateAction} languages={languages}>\n        <Header.SkipLink skipTo=\"#content\" label={I18n.skipToContent} />\n        <Header.UniversalBar primaryLinkText={I18n.headerTitle} primaryLinkHref=\"#\">\n          <Header.Link href=\"#uutiset\" label={I18n.news} />\n          <Header.Link href=\"#asioi_verkossa\" label={I18n.online} />\n          <Header.Link href=\"#anna_palautetta\" label={I18n.feedback} />\n        </Header.UniversalBar>\n\n        <Header.ActionBar\n          title={I18n.headerTitle}\n          frontPageLabel={I18n.frontPage}\n          titleAriaLabel={I18n.headerTitle}\n          titleHref=\"https://hel.fi\"\n          logo={<Logo src={logoSrcFromLanguageAndTheme(lang, 'light')} alt={I18n.headerTitle} />}\n          logoAriaLabel={I18n.ariaLogo}\n          logoHref=\"https://hel.fi\"\n          menuButtonAriaLabel={I18n.ariaMenuButton}\n          openFrontPageLinksAriaLabel=\"Avaa Etusivun linkkivalikko\"\n        >\n          <Header.LanguageSelector ariaLabel={I18n.ariaLanguageSelection} languageHeading={I18n.otherLanguages}>\n            <h3>{I18n.infoOtherLanguages}</h3>\n            <Link external href=\"www.example.com\" size=\"S\" lang=\"fi\">\n              {I18n.clearFinnish}\n            </Link>\n            <Link external href=\"www.example.com\" size=\"S\" lang=\"fse\">\n              {I18n.signLanguage}\n            </Link>\n            <h3>{I18n.forTravellers}</h3>\n            <Link external href=\"www.example.com\" size=\"S\" lang=\"fi\">\n              MyHelsinki.fi\n            </Link>\n            <h3>{I18n.forImmigrants}</h3>\n            <Link external href=\"www.example.com\" size=\"S\" lang=\"fi\">\n              InfoFinland.fi\n            </Link>\n          </Header.LanguageSelector>\n          <Header.ActionBarItem\n            label={I18n.headerSearch}\n            icon={<IconSearch />} \n            id=\"action-bar-search\" \n            onClick={searchAction} \n            closeLabel={I18n.close}/>\n          <Header.ActionBarItem\n            label={translations[lang].headerLogin}\n            fixedRightPosition\n            icon={<IconUser />}\n            id=\"action-bar-login\"\n            closeLabel={I18n.close}\n          >\n            <h3>{I18n.loginOptions}</h3>\n          </Header.ActionBarItem>\n        </Header.ActionBar>\n        <Header.NavigationMenu>\n          <Header.Link\n            label={I18n.healthAndndSocialServices}\n            onClick={(event) => {\n              event.preventDefault();\n              setHref('#sosiaali-_ja_terveyspalvelut');\n            }}\n            active={href.includes('#sosiaali-_ja_terveyspalvelut')}\n            dropdownLinks={[\n              <Header.Link\n                onClick={(event) => {\n                  event.preventDefault();\n                  setHref('#sosiaali-_ja_terveyspalvelut#terveydenhoito');\n                }}\n                label={I18n.healtcare}\n                active={href.includes('#terveydenhoito')}\n                dropdownLinks={[\n                  <Header.Link\n                    active={href.includes('#hammashoito')}\n                    onClick={(event) => {\n                      event.preventDefault();\n                      setHref('#sosiaali-_ja_terveyspalvelut#terveydenhoito#hammashoito');\n                    }}\n                    label={I18n.dentalCare}\n                  />,\n                ]}\n              />,\n              <Header.Link\n                active={href.includes('#senioripalvelut')}\n                onClick={(event) => {\n                  event.preventDefault();\n                  setHref('#sosiaali-_ja_terveyspalvelut#senioripalvelut');\n                }}\n                label={I18n.seniorServices}\n              />,\n            ]}\n          />\n          <Header.Link\n            active={href.includes('#kasvatus_ja_koulutus')}\n            onClick={(event) => {\n              event.preventDefault();\n              setHref('#kasvatus_ja_koulutus');\n            }}\n            label={I18n.childHoodAndEducation}\n            dropdownLinks={[\n              <Header.Link\n                active={href.includes('#varhaiskasvatus')}\n                onClick={(event) => {\n                  event.preventDefault();\n                  setHref('#kasvatus_ja_koulutus#varhaiskasvatus');\n                }}\n                label={I18n.earlyChildhoodEducation}\n              />,\n              <Header.Link\n                active={href.includes('#esiopetus')}\n                onClick={(event) => {\n                  event.preventDefault();\n                  setHref('#kasvatus_ja_koulutus#esiopetus');\n                }}\n                label={I18n.prePrimaryEducation}\n              />,\n              <Header.Link\n                active={href.includes('#koulutus')}\n                onClick={(event) => {\n                  event.preventDefault();\n                  setHref('#kasvatus_ja_koulutus#koulutus');\n                }}\n                label={I18n.education}\n                dropdownLinks={[\n                  <Header.Link\n                    active={href.includes('#perusopetus')}\n                    onClick={(event) => {\n                      event.preventDefault();\n                      setHref('#kasvatus_ja_koulutus#koulutus#perusopetus');\n                    }}\n                    label={I18n.basicEducation}\n                  />,\n                  <Header.Link\n                    label={I18n.generalUpperSecondaryEducation}\n                    active={href.includes('#lukiokoulutus')}\n                    onClick={(event) => {\n                      event.preventDefault();\n                      setHref('#kasvatus_ja_koulutus#koulutus#lukiokoulutus');\n                    }}\n                  />,\n                  <Header.Link\n                    label={I18n.adultEducationCentres}\n                    active={href.includes('#tyovaenopistot')}\n                    onClick={(event) => {\n                      event.preventDefault();\n                      setHref('#kasvatus_ja_koulutus#koulutus#tyovaenopistot');\n                    }}\n                  />,\n                ]}\n              />,\n            ]}\n          />\n          <Header.Link\n            active={href.includes('#yritykset_ja_tyo')}\n            onClick={(event) => {\n              event.preventDefault();\n              setHref('#yritykset_ja_tyo');\n            }}\n            label={I18n.businessAndWork}\n            dropdownLinks={[\n              <Header.Link\n                label={I18n.employers}\n                active={href.includes('#tyonantajat')}\n                onClick={(event) => {\n                  event.preventDefault();\n                  setHref('#yritykset_ja_tyo#tyonantajat');\n                }}\n                dropdownLinks={[\n                  <Header.Link\n                    label={I18n.business}\n                    active={href.includes('#yritykset_ja_tyo#tyonantajat#yritykset')}\n                    onClick={(event) => {\n                      event.preventDefault();\n                      setHref('#yritykset_ja_tyo#tyonantajat#yritykset');\n                    }}\n                  />,\n                  <Header.Link\n                    label={I18n.entrepreneurs}\n                    active={href.includes('#yrittajat')}\n                    onClick={(event) => {\n                      event.preventDefault();\n                      setHref('#yritykset_ja_tyo#tyonantajat#yrittajat');\n                    }}\n                  />,\n                ]}\n              />,\n              <Header.Link\n                active={href.includes('#yritykset_ja_tyo#tyonhakijat')}\n                onClick={(event) => {\n                  event.preventDefault();\n                  setHref('#yritykset_ja_tyo#tyonhakijat');\n                }}\n                label={I18n.jobSeekers}\n                dropdownLinks={[\n                  <Header.Link\n                    label={I18n.openJobs}\n                    active={href.includes('#yritykset_ja_tyo#tyonhakijat#avoimet_tyopaikat')}\n                    onClick={(event) => {\n                      event.preventDefault();\n                      setHref('#yritykset_ja_tyo#tyonhakijat#avoimet_tyopaikat');\n                    }}\n                  />,\n                ]}\n              />,\n            ]}\n          />\n        </ Header.NavigationMenu>\n      </Header>\n      <div id=\"content\" />\n    </>\n  )\n}\n"))),"\n",a.createElement(t.p,null,a.createElement(t.strong,null,"Note:")," Header is designed to be used full width at the top of the page above the main content. Preview here might not scale correctly, ",a.createElement(u,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-header--with-full-features"},"view full header example in Storybook"),"."),"\n",a.createElement(t.h4,{id:"custom-link",style:{position:"relative"}},"Custom Link",a.createElement(t.a,{href:"#custom-link","aria-label":"custom link permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.p,null,"The Header.Link component has the ",a.createElement(t.code,null,"as")," prop which you can use to use your own navigation link instead of our Header.Link, which uses ",a.createElement(d,{href:"/components/"},"HDS Link")," underneath. You can pass it as an element ",a.createElement(t.code,null,"as={<CustomLink />}")," or as a component ",a.createElement(t.code,null,"as={CustomLink}"),"."),"\n",a.createElement(n,{scope:{Header:o.H,Link:u,Logo:r.L,logoFi:r.l}},a.createElement(t.pre,null,a.createElement(t.code,{className:"language-jsx"},'import { Header, Logo, logoFi } from \'hds-react\';\nimport { Link } from \'gatsby\';\n\n() => {\n  return (\n    <>\n      <Header>\n        <Header.SkipLink skipTo="#content" label="Skip To Content" />\n        <Header.UniversalBar primaryLinkText="Helsingin kaupunki" primaryLinkHref="#">\n          <Header.Link href="#" label="Uutiset" />\n          <Header.Link href="#" label="Asioi verkossa" />\n          <Header.Link href="#" label="Anna palautetta" />\n        </Header.UniversalBar>\n\n        <Header.ActionBar\n          title="Helsingin kaupunki"\n          titleAriaLabel="Helsingin kaupunki"\n          titleHref="https://hel.fi"\n          logoAriaLabel="Service logo"\n          logoHref="https://hel.fi"\n          logo={<Logo src={logoFi} alt="Helsingin kaupunki" />}\n          menuButtonAriaLabel="Menu"\n        />\n        <Header.NavigationMenu>\n          <Header.Link\n            as={Link}\n            href="#"\n            label="Sosiaali- ja terveyspalvelut"\n            onClick={(event) => event.preventDefault()}\n            dropdownLinks={[\n              <Header.Link\n                as={Link}\n                href="#"\n                label="Terveydenhoito"\n                dropdownLinks={[\n                  <Header.Link as={Link} href="#" label="Hammashoito" />,\n                  <Header.Link as={Link} href="#" label="Julkinen terveydenhoito" />,\n                ]}\n              />,\n              <Header.Link\n                as={Link}\n                href="#"\n                label="Senioripalvelut"\n                dropdownLinks={[\n                  <Header.Link as={Link} href="#" label="Viriketoiminta" />,\n                  <Header.Link as={Link} href="#" label="Kuntouttavat palvelut" />,\n                ]}\n              />,\n            ]}\n          />\n          <Header.Link\n            as={Link}\n            href="#"\n            label="Kasvatus ja koulutus"\n            dropdownLinks={[\n              <Header.Link\n                as={Link}\n                href="#"\n                label="Kasvatus"\n                dropdownLinks={[\n                  <Header.Link as={Link} href="#" label="Varhaiskasvatus" />,\n                  <Header.Link as={Link} href="#" label="Esiopetus" />,\n                ]}\n              />,\n              <Header.Link\n                as={Link}\n                href="#"\n                label="Koulutus"\n                dropdownLinks={[\n                  <Header.Link as={Link} href="#" label="Perusopetus" />,\n                  <Header.Link as={Link} href="#" label="Toisen asteen koulutus" />,\n                  <Header.Link as={Link} href="#" label="Työväenopistot" />,\n                ]}\n              />,\n            ]}\n          />\n          <Header.Link as={Link} href="#" label="Asuminen" />\n        </Header.NavigationMenu>\n      </Header>\n      <div id="content" />\n    </>\n  )\n}\n'))),"\n",a.createElement(t.p,null,a.createElement(t.strong,null,"Note:")," Header is designed to be used full width at the top of the page above the main content. Preview here might not scale correctly, ",a.createElement(u,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-header--with-full-features"},"view full header example in Storybook"),"."),"\n",a.createElement(t.h4,{id:"dark-theme",style:{position:"relative"}},"Dark theme",a.createElement(t.a,{href:"#dark-theme","aria-label":"dark theme permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(n,{scope:{Header:o.H,Logo:r.L,logoFiDark:r.a}},a.createElement(t.pre,null,a.createElement(t.code,{className:"language-jsx"},'import { Header, Logo, logoFiDark } from \'hds-react\';\n\n() => (\n  <Header\n    theme="dark"\n  >\n    <Header.SkipLink skipTo="#content" label="Skip To Content" />\n    <Header.UniversalBar primaryLinkHref="#" primaryLinkText="Helsingin kaupunki">\n      <Header.Link href="#" label="Uutiset" />\n      <Header.Link href="#" label="Asioi verkossa" />\n      <Header.Link href="#" label="Anna palautetta" />\n    </Header.UniversalBar>\n    <Header.ActionBar\n      title="Helsingin kaupunki"\n      titleAriaLabel="Helsingin kaupunki"\n      titleHref="https://hel.fi"\n      logoAriaLabel="Service logo"\n      logoHref="https://hel.fi"\n      logo={<Logo src={logoFiDark} alt="Helsingin kaupunki" />}\n      menuButtonAriaLabel="Menu"\n    />\n    <Header.NavigationMenu>\n      <Header.Link\n        as={Link}\n        href="#"\n        label="Sosiaali- ja terveyspalvelut"\n        onClick={(event) => event.preventDefault()}\n        dropdownLinks={[\n          <Header.Link\n            as={Link}\n            href="#"\n            label="Terveydenhoito"\n            dropdownLinks={[\n              <Header.Link as={Link} href="#" label="Hammashoito" />,\n              <Header.Link as={Link} href="#" label="Julkinen terveydenhoito" />,\n            ]}\n          />,\n          <Header.Link\n            as={Link}\n            href="#"\n            label="Senioripalvelut"\n            dropdownLinks={[\n              <Header.Link as={Link} href="#" label="Viriketoiminta" />,\n              <Header.Link as={Link} href="#" label="Kuntouttavat palvelut" />,\n            ]}\n          />,\n        ]}\n      />\n      <Header.Link as={Link} href="#" label="Kasvatus ja koulutus" />\n      <Header.Link as={Link} href="#" label="Asuminen" />\n    </Header.NavigationMenu>\n  </Header>\n)\n'))),"\n",a.createElement(t.p,null,a.createElement(t.strong,null,"Note:")," Header is designed to be used full width at the top of the page above the main content. Preview here might not scale correctly, ",a.createElement(u,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-header--with-full-features"},"view full header with dark theme example in Storybook by changing the theme property."),"."),"\n",a.createElement(t.h4,{id:"custom-theme",style:{position:"relative"}},"Custom theme",a.createElement(t.a,{href:"#custom-theme","aria-label":"custom theme permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(n,{scope:{Header:o.H,Logo:r.L,logoFi:r.l}},a.createElement(t.pre,null,a.createElement(t.code,{className:"language-jsx"},'import { Header, Logo, logoFi } from \'hds-react\';\n\n() => (\n  <Header\n    theme={{\n      \'--color-focus-outline\': \'var(--color-metro-dark)\',\n      \'--header-color\': \'var(--color-black)\',\n      \'--header-focus-outline-color\': \'var(--color-metro-dark)\',\n      \'--actionbar-background-color\': \'var(--color-engel)\',\n      \'--nav-background-color\': \'var(--color-engel-light)\',\n      \'--nav-mobile-menu-background-color\': \'var(--color-engel-light)\',\n      \'--nav-border-color\': \'var(--color-black)\',\n      \'--nav-link-hover-color\': \'var(--color-black)\',\n      \'--universal-bar-background-color\': \'var(--color-black-20)\',\n      \'--nav-link-dropdown-background-color\': \'var(--color-engel-light)\',\n      \'--nav-button-background-color\': \'var(--color-black-20)\',\n      \'--nav-button-hover-background-color\': \'var(--color-black-40)\',\n      \'--nav-drop-down-icon-color\': \'var(--color-black)\',\n      \'--header-background-color\': \'var(--color-engel-light)\',\n    }}\n  >\n    <Header.SkipLink skipTo="#content" label="Skip To Content" />\n    <Header.UniversalBar primaryLinkHref="#" primaryLinkText="Helsingin kaupunki">\n      <Header.Link href="#" label="Uutiset" />\n      <Header.Link href="#" label="Asioi verkossa" />\n      <Header.Link href="#" label="Anna palautetta" />\n    </Header.UniversalBar>\n    <Header.ActionBar\n      title="Helsingin kaupunki"\n      titleAriaLabel="Helsingin kaupunki"\n      titleHref="https://hel.fi"\n      logoAriaLabel="Service logo"\n      logoHref="https://hel.fi"\n      logo={<Logo src={logoFi} alt="Helsingin kaupunki" />}\n      menuButtonAriaLabel="Menu"\n    />\n    <Header.NavigationMenu>\n      <Header.Link\n        as={Link}\n        href="#"\n        label="Sosiaali- ja terveyspalvelut"\n        onClick={(event) => event.preventDefault()}\n        dropdownLinks={[\n          <Header.Link\n            as={Link}\n            href="#"\n            label="Terveydenhoito"\n            dropdownLinks={[\n              <Header.Link as={Link} href="#" label="Hammashoito" />,\n              <Header.Link as={Link} href="#" label="Julkinen terveydenhoito" />,\n            ]}\n          />,\n          <Header.Link\n            as={Link}\n            href="#"\n            label="Senioripalvelut"\n            dropdownLinks={[\n              <Header.Link as={Link} href="#" label="Viriketoiminta" />,\n              <Header.Link as={Link} href="#" label="Kuntouttavat palvelut" />,\n            ]}\n          />,\n        ]}\n      />\n      <Header.Link as={Link} href="#" label="Kasvatus ja koulutus" />\n      <Header.Link as={Link} href="#" label="Asuminen" />\n    </Header.NavigationMenu>\n  </Header>\n)\n'))),"\n",a.createElement(t.p,null,a.createElement(t.strong,null,"Note:")," Header is designed to be used full width at the top of the page above the main content. Preview here might not scale correctly, ",a.createElement(u,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-header--with-full-features-custom-theme"},"view full header with custom theme example in Storybook"),"."),"\n",a.createElement(t.h3,{id:"packages",style:{position:"relative"}},"Packages",a.createElement(t.a,{href:"#packages","aria-label":"packages permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Package"),a.createElement(t.th,null,"Included"),a.createElement(t.th,null,"Storybook link"),a.createElement(t.th,null,"Source link"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.strong,null,"HDS React")),a.createElement(t.td,null,a.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},a.createElement(h)," Yes ")),a.createElement(t.td,null,a.createElement(u,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-header--with-full-features"},"View in Storybook")),a.createElement(t.td,null,a.createElement(s.Z,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/react/src/components/header"},"View source"))),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.strong,null,"HDS Core")),a.createElement(t.td,null,a.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},a.createElement(k)," No ")),a.createElement(t.td,null,"-"),a.createElement(t.td,null,"-")))),"\n",a.createElement(t.h3,{id:"properties",style:{position:"relative"}},"Properties",a.createElement(t.a,{href:"#properties","aria-label":"properties permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Property"),a.createElement(t.th,null,"Description"),a.createElement(t.th,null,"Values"),a.createElement(t.th,null,"Default value"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"ariaLabel")),a.createElement(t.td,null,"Aria-label for describing header."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"className")),a.createElement(t.td,null,"Additional class names to apply."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"id")),a.createElement(t.td,null,"Id for the element."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"theme")),a.createElement(t.td,null,"Header theme."),a.createElement(t.td,null,a.createElement(t.code,null,"light"),",",a.createElement(t.code,null,"dark"),", ",a.createElement(t.code,null,"HeaderCustomTheme")),a.createElement(t.td,null,a.createElement(t.code,null,"light"))),a.createElement(t.tr,null,a.createElement(t.td,null,"[Table 1:Header properties]"),a.createElement(t.td),a.createElement(t.td),a.createElement(t.td)))),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Property"),a.createElement(t.th,null,"Description"),a.createElement(t.th,null,"Values"),a.createElement(t.th,null,"Default value"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"ariaLabel")),a.createElement(t.td,null,"Aria-label for describing SkipLink in more detail."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"label")),a.createElement(t.td,null,"Label for the SkipLink."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"skipTo")),a.createElement(t.td,null,"Id of the element where the SkipLink jumps to."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"theme")),a.createElement(t.td,null,"Custom styling for SkipLink."),a.createElement(t.td,null,a.createElement(t.code,null,"SkipLinkTheme")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,"[Table 2:Header.SkipLink properties]"),a.createElement(t.td),a.createElement(t.td),a.createElement(t.td)))),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Property"),a.createElement(t.th,null,"Description"),a.createElement(t.th,null,"Values"),a.createElement(t.th,null,"Default value"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"ariaLabel")),a.createElement(t.td,null,"Aria-label for describing UniversalBar."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"className")),a.createElement(t.td,null,"Additional class names to apply."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"primaryLinkHref")),a.createElement(t.td,null,"Hypertext reference for the primary link."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"primaryLinkText")),a.createElement(t.td,null,"Link text for the primary link"),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"role")),a.createElement(t.td,null,"ARIA role to describe the contents."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,"[Table 3:Header.UniversalBar properties]"),a.createElement(t.td),a.createElement(t.td),a.createElement(t.td)))),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Property"),a.createElement(t.th,null,"Description"),a.createElement(t.th,null,"Values"),a.createElement(t.th,null,"Default value"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"ariaLabel")),a.createElement(t.td,null,"Aria-label for describing ActionBar."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"className")),a.createElement(t.td,null,"Additional class names to apply."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"logoAriaLabel")),a.createElement(t.td,null,"Aria-label for the logo."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"logoHref")),a.createElement(t.td,null,"URL for the logo."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"logo")),a.createElement(t.td,null,"Logo component."),a.createElement(t.td,null,a.createElement(t.code,null,"Logo")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"menuButtonAriaLabel")),a.createElement(t.td,null,"Aria-label for the menu button."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"onTitleClick")),a.createElement(t.td,null,"Callback function for when the title is clicked."),a.createElement(t.td,null,a.createElement(t.code,null,"MouseEventHandler")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"onLogoClick")),a.createElement(t.td,null,"Callback function for when the logo is clicked."),a.createElement(t.td,null,a.createElement(t.code,null,"MouseEventHandler")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"onMenuButtonClick")),a.createElement(t.td,null,"Callback function for when the menu button is clicked."),a.createElement(t.td,null,a.createElement(t.code,null,"MouseEventHandler")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"title")),a.createElement(t.td,null,"Service name."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"titleAriaLabel")),a.createElement(t.td,null,"Aria-label for the title."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"titleStyle")),a.createElement(t.td,null,"Style for the service name."),a.createElement(t.td,null,a.createElement(t.code,null,"TitleStyleType.Normal")," ",a.createElement(t.code,null,"TitleStyleType.Bold")),a.createElement(t.td,null,a.createElement(t.code,null,"Normal"))),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"titleHref")),a.createElement(t.td,null,"URL for the title."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"role")),a.createElement(t.td,null,"ARIA role to describe the contents."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,"[Table 4:Header.ActionBar properties]"),a.createElement(t.td),a.createElement(t.td),a.createElement(t.td)))),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Property"),a.createElement(t.th,null,"Description"),a.createElement(t.th,null,"Values"),a.createElement(t.th,null,"Default value"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"ariaLabel")),a.createElement(t.td,null,"Aria-label for describing the item."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"icon")),a.createElement(t.td,null,"Icon for the item."),a.createElement(t.td,null,a.createElement(t.code,null,"ReactNode")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"label")),a.createElement(t.td,null,"Label for the action bar item."),a.createElement(t.td,null,a.createElement(t.code,null,"string")," ",a.createElement(t.code,null,"JSX.Element")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,"[Table 5:Header.ActionBarItem properties]"),a.createElement(t.td),a.createElement(t.td),a.createElement(t.td)))),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Property"),a.createElement(t.th,null,"Description"),a.createElement(t.th,null,"Values"),a.createElement(t.th,null,"Default value"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"children")),a.createElement(t.td,null,"Additional languages to display in the dropdown."),a.createElement(t.td,null,a.createElement(t.code,null,"JSX.Element")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"languages")),a.createElement(t.td,null,"Array of languages to display in the Header.ActionBar."),a.createElement(t.td,null,a.createElement(t.code,null,"[LanguageOption]")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,"[Table 6:Header.LanguageSelector properties]"),a.createElement(t.td),a.createElement(t.td),a.createElement(t.td)))),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Property"),a.createElement(t.th,null,"Description"),a.createElement(t.th,null,"Values"),a.createElement(t.th,null,"Default value"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"label")),a.createElement(t.td,null,"Label for the search input."),a.createElement(t.td,null,a.createElement(t.code,null,"string")," ",a.createElement(t.code,null,"JSX.Element")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"onChange")),a.createElement(t.td,null,"Callback function for the input value changes."),a.createElement(t.td,null,a.createElement(t.code,null,"(inputValue: string) => void")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"onSubmit")),a.createElement(t.td,null,"Callback function for when input is submitted."),a.createElement(t.td,null,a.createElement(t.code,null,"(inputValue: string) => void")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,"[Table 7:Header.Search properties]"),a.createElement(t.td),a.createElement(t.td),a.createElement(t.td)))),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Property"),a.createElement(t.th,null,"Description"),a.createElement(t.th,null,"Values"),a.createElement(t.th,null,"Default value"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"ariaLabel")),a.createElement(t.td,null,"Aria-label for describing the item."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"ariaControls")),a.createElement(t.td,null,"Id of the controlled dropdown element."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"fixedRightPosition")),a.createElement(t.td,null,"Boolean to set the item in a fixed position on the right side of the action bar behind a dividing line."),a.createElement(t.td,null,a.createElement(t.code,null,"boolean")),a.createElement(t.td,null,a.createElement(t.code,null,"false"))),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"icon")),a.createElement(t.td,null,"Icon for the item."),a.createElement(t.td,null,a.createElement(t.code,null,"ReactNode")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"label")),a.createElement(t.td,null,"Label for the item."),a.createElement(t.td,null,a.createElement(t.code,null,"string")," ",a.createElement(t.code,null,"JSX.Element")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,"[Table 8:Header.ActionBarItem properties]"),a.createElement(t.td),a.createElement(t.td),a.createElement(t.td)))),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Property"),a.createElement(t.th,null,"Description"),a.createElement(t.th,null,"Values"),a.createElement(t.th,null,"Default value"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"ariaLabel")),a.createElement(t.td,null,"Aria-label for describing NavigationMenu."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"id")),a.createElement(t.td,null,"ID for the NavigationMenu."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,"[Table 9:Header.NavigationMenu properties]"),a.createElement(t.td),a.createElement(t.td),a.createElement(t.td)))),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Property"),a.createElement(t.th,null,"Description"),a.createElement(t.th,null,"Values"),a.createElement(t.th,null,"Default value"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"active")),a.createElement(t.td,null,"Set the link as the current page, giving it proper styles."),a.createElement(t.td,null,a.createElement(t.code,null,"boolean")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"ariaLabel")),a.createElement(t.td,null,"Aria-label for describing NavigationLink."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"as")),a.createElement(t.td,null,"Element or component to use instead of Header.Link."),a.createElement(t.td,null,a.createElement(t.code,null,"Element")),a.createElement(t.td,null,a.createElement(d,{href:"/components/"},a.createElement(t.code,null,"Link")))),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"className")),a.createElement(t.td,null,"Additional classNames to apply to the link."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"closeDropdownAriaButtonLabel")),a.createElement(t.td,null,"Aria-label for the dropdown button to describe the closing of the dropdown."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"dropdownButtonClassName")),a.createElement(t.td,null,"Additional classNames to apply to the dropdown button."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"dropdownClassName")),a.createElement(t.td,null,"Additional classNames to apply to the dropdown menu."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"dropdownLinkClassName")),a.createElement(t.td,null,"Additional classNames to apply to the dropdown links."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"dropdownLinks")),a.createElement(t.td,null,"Array of NavigationLink components to render in a dropdown."),a.createElement(t.td,null,a.createElement(t.code,null,"[<Header.Link>]")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"href")),a.createElement(t.td,null,"Hypertext Reference of the link."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"label")),a.createElement(t.td,null,"Label for the link."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"id")),a.createElement(t.td,null,"ID for the link."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"openDropdownAriaButtonLabel")),a.createElement(t.td,null,"Aria-label for the dropdown button to describe the opening of the dropdown."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"wrapperClassName")),a.createElement(t.td,null,"Additional classNames for the element wrapping the link."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,"[Table 10:Header.Link properties]"),a.createElement(t.td),a.createElement(t.td),a.createElement(t.td)))))}function p(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){return void 0===e&&(e={}),a.createElement(d,e,a.createElement(h,e))}},11690:function(e,t,n){n.r(t);var l=n(11151),a=n(67294),r=n(83428),o=n(12818),i=n(57674),c=n(89482),s=(n(18607),n(26127));function u(e){const t=Object.assign({h1:"h1",a:"a",span:"span",p:"p"},(0,l.ah)(),e.components);return s.Z||d("PageTabs",!1),s.Z.Tab||d("PageTabs.Tab",!0),s.Z.TabList||d("PageTabs.TabList",!0),s.Z.TabPanel||d("PageTabs.TabPanel",!0),a.createElement(a.Fragment,null,a.createElement(t.h1,{id:"header",style:{position:"relative"}},"Header",a.createElement(t.a,{href:"#header","aria-label":"header permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement("div",{className:"status-label-description"},a.createElement(r.S,{type:"error"},"Draft"),a.createElement(r.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),a.createElement(i.Z)),"\n",a.createElement(c.Z,null,"The Header component is located at the top of the page above the main body content. It provides a place for levels of primary navigation and site-wide actions."),"\n",a.createElement(o.N,{label:"A work in progress!",className:"siteNotification"},a.createElement(t.p,null,"The Header components are a collection of new navigation components the HDS team is currently fine tuning. This means\nthat these components are subject to change. We are open to feedback regarding how they work.")),"\n",a.createElement(s.Z,{pageContext:e.pageContext},a.createElement(s.Z.TabList,null,a.createElement(s.Z.Tab,{href:"/"},"Usage"),a.createElement(s.Z.Tab,{href:"/code"},"Code"),a.createElement(s.Z.Tab,{href:"/accessibility"},"Accessibility")),a.createElement(s.Z.TabPanel,null,e.children)))}function d(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,l.ah)(),e.components);return t?a.createElement(t,e,a.createElement(u,e)):u(e)}},89482:function(e,t,n){var l=n(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:n="var(--fontsize-body-xl)",style:a={},children:r}=e;return l.createElement("p",{style:{fontSize:n,color:t,maxWidth:600,...a}},r)}},26127:function(e,t,n){var l=n(67294),a=n(14160),r=n(94671);const o="PageTabList",i="PageTabPanel",c="PageTab",s=e=>{var t;let{pageContext:n,children:s}=e;const u=n.frontmatter.slug,d=Array.isArray(s)?s:[s],m=d.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===o)),E=d.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===i)),h=null===(t=m.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===c)),p=h.findIndex((e=>u.endsWith(e.props.href))),k=-1===p?0:p,g=0===k?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return l.createElement(r.a,{initiallyActiveTab:k},l.createElement(r.a.TabList,{className:"page-tabs-list"},h.map((e=>l.createElement(r.a.Tab,{key:e.props.href,onClick:()=>(0,a.navigate)(""+("/"===e.props.href?g:g+e.props.href))},e.props.children)))),h.map(((e,t)=>l.createElement(r.a.TabPanel,{key:e.props.href},k===t?E.props.children:l.createElement("div",null)))))},u=e=>{let{children:t}=e;return l.createElement(r.a.TabList,null,t)};u.componentName=o;const d=e=>{let{href:t,slug:n,children:a}=e;return l.createElement(r.a.Tab,null,a)};d.componentName=c;const m=e=>{let{children:t}=e;return l.createElement(r.a.TabPanel,null,t)};m.componentName=i,s.TabList=u,s.Tab=d,s.TabPanel=m,t.Z=s},57674:function(e,t,n){var l=n(67294),a=n(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return l.createElement(a.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},l.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>l.createElement("li",{key:t},l.createElement("span",{className:"status-name"},t),l.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-header-index-mdx-977359c9187b2489f566.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-header-index-mdx-977359c9187b2489f566.js
new file mode 100644
index 00000000000..e330b387f2e
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-header-index-mdx-977359c9187b2489f566.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[5117,5387],{83428:function(e,t,a){a.d(t,{S:function(){return c}});var n=a(80136),l=a(67294),r=a(7444),i=a(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,r.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const s=e=>{let{icon:t}=e;return l.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:r,type:c="neutral",iconLeft:m}=e,h=(0,n._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,i.c)(o.statusLabel,o[c],m&&o.statusLabelWithIcon,a),"data-testid":r},h),m&&l.createElement(s,{icon:m}),t)}},78536:function(e,t,a){a.r(t);var n=a(11151),l=a(67294),r=a(11167),i=a(71015),o=a(12818),s=a(11303),c=a(70476),m=a(11690),h=a(1076);const u=e=>{let{children:t,pageContext:a}=e;return l.createElement(m.default,{pageContext:a},t)};function d(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",p:"p",strong:"strong",ul:"ul",li:"li",h4:"h4",code:"code",h5:"h5"},(0,n.ah)(),e.components),{PlaygroundPreview:a,Link:m,ExternalLink:u}=t;return u||p("ExternalLink",!0),r.H||p("Header",!1),r.H.ActionBar||p("Header.ActionBar",!0),r.H.ActionBarItem||p("Header.ActionBarItem",!0),r.H.LanguageSelector||p("Header.LanguageSelector",!0),r.H.Link||p("Header.Link",!0),r.H.NavigationMenu||p("Header.NavigationMenu",!0),r.H.Search||p("Header.Search",!0),r.H.SkipLink||p("Header.SkipLink",!0),r.H.UniversalBar||p("Header.UniversalBar",!0),m||p("Link",!0),a||p("PlaygroundPreview",!0),l.createElement(l.Fragment,null,l.createElement(t.h2,{id:"usage",style:{position:"relative"}},"Usage",l.createElement(t.a,{href:"#usage","aria-label":"usage permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h3,{id:"example",style:{position:"relative"}},"Example",l.createElement(t.a,{href:"#example","aria-label":"example permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a,null,l.createElement(r.H,{languages:[{label:"Suomi",value:"fi"},{label:"Svenska",value:"sv"},{label:"English",value:"en"}]},l.createElement(r.H.SkipLink,{skipTo:"#content",label:"Skip To Content"}),l.createElement(r.H.UniversalBar,{primaryLinkText:"Helsingin kaupunki",primaryLinkHref:"#"},l.createElement(r.H.Link,{href:"#",label:"Uutiset"}),l.createElement(r.H.Link,{href:"#",label:"Asioi verkossa"}),l.createElement(r.H.Link,{href:"#",label:"Anna palautetta"})),l.createElement(r.H.ActionBar,{title:"Helsingin kaupunki",titleHref:"https://hel.fi",logoAriaLabel:"Service logo",logoHref:"https://hel.fi",logo:l.createElement(i.L,{src:i.l,alt:"Helsingin kaupunki"}),menuButtonAriaLabel:"Menu"},l.createElement(r.H.LanguageSelector,null,l.createElement("h3",null,"Muut kielet"),l.createElement(m,{href:"www.example.com",size:"S",lang:"de"},l.createElement(t.p,null,"Deutsch")),l.createElement(m,{href:"www.example.com",size:"S",lang:"es"},l.createElement(t.p,null,"Español")),l.createElement(m,{href:"www.example.com",size:"S",lang:"fr"},l.createElement(t.p,null,"Français")),l.createElement(m,{href:"www.example.com",size:"S",lang:"ru"},l.createElement(t.p,null,"Pусский")),l.createElement("h3",null,"Tietoa muilla kielillä"),l.createElement(m,{external:!0,href:"www.example.com",size:"S",lang:"fi"},l.createElement(t.p,null,"Selkosuomi")),l.createElement(m,{external:!0,href:"www.example.com",size:"S",lang:"fi"},l.createElement(t.p,null,"Viittomakieli")),l.createElement("h3",null,"Matkailijoille"),l.createElement(m,{external:!0,href:"www.example.com",size:"S",lang:"fi"},l.createElement(t.p,null,"MyHelsinki.fi")),l.createElement("h3",null,"Maahanmuuttajille"),l.createElement(m,{external:!0,href:"www.example.com",size:"S",lang:"fi"},l.createElement(t.p,null,"InfoFinland.fi")))),l.createElement(r.H.NavigationMenu,null,l.createElement(r.H.Link,{href:"#",label:"Sosiaali- ja terveyspalvelut",onClick:e=>e.preventDefault(),active:!0,dropdownLinks:[l.createElement(r.H.Link,{href:"#",label:"Terveydenhoito",active:!0,dropdownLinks:[l.createElement(r.H.Link,{href:"#",label:"Hammashoito"}),l.createElement(r.H.Link,{href:"#",label:"Julkinen terveydenhoito"})]}),l.createElement(r.H.Link,{href:"#",label:"Senioripalvelut",dropdownLinks:[l.createElement(r.H.Link,{href:"#",label:"Viriketoiminta"}),l.createElement(r.H.Link,{href:"#",label:"Kuntouttavat palvelut"})]})]}),l.createElement(r.H.Link,{href:"#",label:"Kasvatus ja koulutus",dropdownLinks:[l.createElement(r.H.Link,{href:"#",label:"Kasvatus",active:!0,dropdownLinks:[l.createElement(r.H.Link,{href:"#",label:"Varhaiskasvatus"}),l.createElement(r.H.Link,{href:"#",label:"Esiopetus"})]}),l.createElement(r.H.Link,{href:"#",label:"Koulutus",dropdownLinks:[l.createElement(r.H.Link,{href:"#",label:"Perusopetus"}),l.createElement(r.H.Link,{href:"#",label:"Toisen asteen koulutus"}),l.createElement(r.H.Link,{href:"#",label:"Työväenopistot"})]})]}),l.createElement(r.H.Link,{href:"#",label:"Asuminen"})))),"\n",l.createElement(t.p,null,l.createElement(t.strong,null,"Note:")," Header is designed to be used full width at the top of the page above the main content. Preview here might not scale correctly, ",l.createElement(m,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-header--with-full-features"},"view full header example in Storybook"),"."),"\n",l.createElement(t.h3,{id:"principles",style:{position:"relative"}},"Principles",l.createElement(t.a,{href:"#principles","aria-label":"principles permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,l.createElement(t.strong,null,"It is strongly recommended to always include the header component on every page in your service.")),"\n",l.createElement(t.li,null,"The Header component is a wrapper for the HDS header navigation components. This means you should put all the other header elements inside this component."),"\n",l.createElement(t.li,null,"The only mandatory component inside the header is HeaderActionBar. Other components may be used if needed."),"\n",l.createElement(t.li,null,"The inner components should ",l.createElement(t.strong,null,"always")," be in this order: Header.SkipLink, Header.UniversalBar, HeaderActionBar and HeaderNavigationBar."),"\n",l.createElement(t.li,null,"Try to keep the order of actions (language select, search, log in) consistent in navigation. Do not change the default order without a good reason."),"\n",l.createElement(t.li,null,"To better understand how the navigation elements work and how they should be combined, see also ",l.createElement(h.Z,{href:"/patterns/navigation"},"Navigation pattern.")),"\n"),"\n",l.createElement(t.h3,{id:"variations",style:{position:"relative"}},"Variations",l.createElement(t.a,{href:"#variations","aria-label":"variations permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"Variations are presented in the same order that they should be declared in inside the Header component."),"\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,l.createElement(t.a,{href:"#with-skip-link"},"With Header.SkipLink")),"\n",l.createElement(t.li,null,l.createElement(t.a,{href:"#with-universal-bar"},"With Header.UniversalBar")),"\n",l.createElement(t.li,null,l.createElement(t.a,{href:"#with-action-bar"},"With Header.ActionBar"),"\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,l.createElement(t.a,{href:"#with-navigation-language-selector"},"With Header.LanguageSelector")," inside the action bar"),"\n",l.createElement(t.li,null,l.createElement(t.a,{href:"#with-search"},"With Header.Search")," inside the action bar"),"\n"),"\n"),"\n",l.createElement(t.li,null,l.createElement(t.a,{href:"#with-search"},"With Header.NavigationMenu")),"\n"),"\n",l.createElement(t.h4,{id:"with-skip-link",style:{position:"relative"}},"With skip link",l.createElement(t.a,{href:"#with-skip-link","aria-label":"with skip link permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"Use the Header.SkipLink component to help keyboard-only users skip to the main content on a page."),"\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,"Using the Header.SkipLink component is optional but we recommend using it if you have any other header components beside the ActionBar."),"\n",l.createElement(t.li,null,"The Header.SkipLink supports ",l.createElement(t.code,null,"ariaLabel")," prop which gives possibility to define more informative text for screen readers."),"\n"),"\n",l.createElement(a,null,l.createElement(r.H,{languages:[{label:"Suomi",value:"fi"},{label:"Svenska",value:"sv"},{label:"English",value:"en"}]},l.createElement(r.H.SkipLink,{skipTo:"#content",label:"Skip To Content"}),l.createElement(r.H.ActionBar,{title:"Helsingin kaupunki",titleHref:"https://hel.fi",logoAriaLabel:"Service logo",logoHref:"https://hel.fi",logo:l.createElement(i.L,{src:i.l,alt:"Helsingin kaupunki"}),menuButtonAriaLabel:"Menu"},l.createElement(r.H.LanguageSelector,null,l.createElement("h3",null,"Tietoa muilla kielillä"),l.createElement(m,{external:!0,href:"www.example.com",size:"S"},l.createElement(t.p,null,"Selkosuomi")),l.createElement(m,{external:!0,href:"www.example.com",size:"S"},l.createElement(t.p,null,"Viittomakieli")))))),"\n",l.createElement(t.p,null,l.createElement(t.strong,null,"Note:")," Header is designed to be used full width at the top of the page above the main content. Preview here might not scale correctly, ",l.createElement(m,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-header--minimal"},"view minimal header example with skip link in Storybook"),"."),"\n",l.createElement(t.h4,{id:"with-universal-bar",style:{position:"relative"}},"With universal bar",l.createElement(t.a,{href:"#with-universal-bar","aria-label":"with universal bar permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"Header.UniversalBar is aimed to provide easy access for frequently visited and useful links, e.g. feedback and news."),"\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,"Using the Header.UniversalBar component is optional."),"\n",l.createElement(t.li,null,"If the primary link information is provided, it should direct to the webpage of City of Helsinki. We recommend using it if your service is outside the ",l.createElement(u,{href:"https://www.hel.fi/fi"},"hel.fi")," domain in order to provide a quick and easy access to the City of Helsinki web page."),"\n",l.createElement(t.li,null,"Keep the link labels clear and concise. Prefer max 1-2 word long labels so the labels don't go to the next line on smaller screens. Avoid starting multiple link labels with the same word."),"\n",l.createElement(t.li,null,"Under large sized screens (992px and down) the Header.UniversalBar is hidden and the contents are moved inside the ",l.createElement(t.a,{href:"#with-action-bar"},"the Header.ActionBar component's")," menu."),"\n"),"\n",l.createElement(a,null,l.createElement(r.H,null,l.createElement(r.H.UniversalBar,{primaryLinkText:"Helsingin kaupunki",primaryLinkHref:"#"},l.createElement(r.H.Link,{href:"#",label:"Uutiset"}),l.createElement(r.H.Link,{href:"#",label:"Asioi verkossa"}),l.createElement(r.H.Link,{href:"#",label:"Anna palautetta"})),l.createElement(r.H.ActionBar,{title:"Helsingin kaupunki",titleHref:"https://hel.fi",titleHref:"https://hel.fi",logoAriaLabel:"Service logo",logoHref:"https://hel.fi",logo:l.createElement(i.L,{src:i.l,alt:"Helsingin kaupunki"}),menuButtonAriaLabel:"Menu"}))),"\n",l.createElement(t.p,null,l.createElement(t.strong,null,"Note:")," Header is designed to be used full width at the top of the page above the main content. Preview here might not scale correctly, ",l.createElement(m,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-header--with-full-features"},"view full header example with universal bar in Storybook"),"."),"\n",l.createElement(t.h4,{id:"with-action-bar",style:{position:"relative"}},"With action bar",l.createElement(t.a,{href:"#with-action-bar","aria-label":"with action bar permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"Header.ActionBar is the section that makes your service recognizeable. It provides the logo, name of the service and language selection, search and login features when needed."),"\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,l.createElement(t.strong,null,"You should always include the Header.ActionBar component in your Header"),"."),"\n",l.createElement(t.li,null,"The component provides two different service name styles via the ",l.createElement(t.code,null,"titleStyle")," prop: ",l.createElement(t.code,null,"TitleStyleType.Normal"),", which is the default, and ",l.createElement(t.code,null,"TitleStyleType.Bold"),". We recommend to have a maximum of 22 character (including spaces) for title name regardless of which style is used."),"\n",l.createElement(t.li,null,"Under large sized screens (992px and down) the Header.ActionBar undergoes some visual changes:","\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,"The contents of Header.NavigationMenu and Header.UniversalBar, if you have provided either of them, will move inside Header.ActionBar's menu."),"\n",l.createElement(t.li,null,"The Header.LanguageSelector moves under the ActionBar."),"\n"),"\n"),"\n"),"\n",l.createElement(a,null,l.createElement(r.H,{languages:[{label:"Suomi",value:"fi"},{label:"Svenska",value:"sv"},{label:"English",value:"en"}]},l.createElement(r.H.ActionBar,{title:"Helsingin kaupunki",titleHref:"https://hel.fi",logoAriaLabel:"Service logo",logoHref:"https://hel.fi",logo:l.createElement(i.L,{src:i.l,alt:"Helsingin kaupunki"}),menuButtonAriaLabel:"Menu"},l.createElement(r.H.LanguageSelector,null,l.createElement("h3",null,"Tietoa muilla kielillä"),l.createElement(m,{external:!0,href:"www.example.com",size:"S"},l.createElement(t.p,null,"Selkosuomi")),l.createElement(m,{external:!0,href:"www.example.com",size:"S"},l.createElement(t.p,null,"Viittomakieli")))))),"\n",l.createElement(t.p,null,l.createElement(t.strong,null,"Note:")," Header is designed to be used full width at the top of the page above the main content. Preview here might not scale correctly, ",l.createElement(m,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-header--with-full-features"},"view full featured header example with action bar in Storybook"),"."),"\n",l.createElement(t.h5,{id:"with-language-selector",style:{position:"relative"}},"With language selector",l.createElement(t.a,{href:"#with-language-selector","aria-label":"with language selector permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(o.N,{label:"A work in progress!",className:"siteNotification"},l.createElement(t.p,null,"The Header.LanguageSelector component is subject to change, mainly regarding how the dropdown offering additional\nlanguages is going to look and work.")),"\n",l.createElement(t.p,null,"Header.LanguageSelector offers the languages for the whole service. It is recommended to offer full Finnish, Swedish and English versions. Other languages can be added based on the need and target audience of the service. Smaller subset of content can be separated from fully translated content."),"\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,"Using the Header.LanguageSelector is optional."),"\n",l.createElement(t.li,null,"The Header.LanguageSelector component doesn't offer localisation logic, it merely provides the UI for offering and changing languages. We trust HDS users have their own localisation libraries that they can integrate with our component."),"\n",l.createElement(t.li,null,"The Header component has ",l.createElement(t.code,null,"onDidChangeLanguage")," prop function, where user can define a callback function which gets the selected language key (value) as parameter."),"\n",l.createElement(t.li,null,"See example for Header.LanguageSelector ",l.createElement(m,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-header--with-full-features"},"in Storybook"),"."),"\n",l.createElement(t.li,null,"Under large sized screens (992px and down) the Header.LanguageSelector moves under the Header.ActionBar."),"\n"),"\n",l.createElement(t.h5,{id:"with-search",style:{position:"relative"}},"With search",l.createElement(t.a,{href:"#with-search","aria-label":"with search permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(o.N,{label:"A work in progress!",className:"siteNotification"},l.createElement(t.p,null,"The Header.Search component is still in design process! We are working on it and will provide a full-featured component later on.")),"\n",l.createElement(t.p,null,"The Header.Search component is to be used for whole site wide search. Currently HDS recommends putting the SearchIcon inside the Header.ActionBar, and making it open search in separate search page by pressing the search icon. This enables using all needed search functionalities. A code example can be found in the ",l.createElement(h.Z,{href:"/components/header/code/#with-all-the-components"},"Code")," page."),"\n",l.createElement(a,null,l.createElement(r.H,null,l.createElement(r.H.SkipLink,{skipTo:"#content",label:"Skip To Content"}),l.createElement(r.H.ActionBar,{title:"Helsingin kaupunki",titleHref:"https://hel.fi",logoAriaLabel:"Service logo",logoHref:"https://hel.fi",logo:l.createElement(i.L,{src:i.l,alt:"Helsingin kaupunki"}),menuButtonAriaLabel:"Menu"},l.createElement(r.H.ActionBarItem,{label:"Haku",icon:l.createElement(s.I),id:"action-bar-search"},l.createElement(r.H.Search,{label:"Hae palvelusta",onChange:()=>{},onSubmit:()=>{}}))))),"\n",l.createElement(t.p,null,l.createElement(t.strong,null,"Note:")," Header is designed to be used full width at the top of the page above the main content. Preview here might not scale correctly, ",l.createElement(m,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-header--minimal"},"view minimal header example with search in Storybook"),"."),"\n",l.createElement(t.h5,{id:"actionbaritem",style:{position:"relative"}},"ActionBarItem",l.createElement(t.a,{href:"#actionbaritem","aria-label":"actionbaritem permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(o.N,{label:"A work in progress!",className:"siteNotification"},l.createElement(t.p,null,"The Header.ActionBarItem component is subject to change.")),"\n",l.createElement(t.p,null,"The Header.ActionBarItem is a generic component for displaying icon buttons on the action bar, optionally accompanied with dropdowns."),"\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,"The Header.ActionBarItem extends native button element's attributes."),"\n",l.createElement(t.li,null,"The item can be positioned behind a dividing line, setting it apart from the rest of the items with the prop ",l.createElement(t.code,null,"fixedRightPosition"),". This is mainly reserved for log in button."),"\n"),"\n",l.createElement(a,null,l.createElement(r.H,{languages:[{label:"Suomi",value:"fi"},{label:"Svenska",value:"sv"},{label:"English",value:"en"}]},l.createElement(r.H.ActionBar,{title:"Helsingin kaupunki",titleHref:"https://hel.fi",logoAriaLabel:"Service logo",logoHref:"https://hel.fi",logo:l.createElement(i.L,{src:i.l,alt:"Helsingin kaupunki"}),menuButtonAriaLabel:"Menu"},l.createElement(r.H.LanguageSelector,null,l.createElement("h3",null,"Tietoa muilla kielillä"),l.createElement(m,{external:!0,href:"www.example.com",size:"S"},l.createElement(t.p,null,"Selkosuomi")),l.createElement(m,{external:!0,href:"www.example.com",size:"S"},l.createElement(t.p,null,"Viittomakieli"))),l.createElement(r.H.ActionBarItem,{label:"Ilmoitukset",icon:l.createElement(c.l),id:"action-bar-notifications"},l.createElement("p",null,"Ei uusi ilmoituksia."))),l.createElement(r.H.NavigationMenu,null,l.createElement(r.H.Link,{href:"#",label:"Sosiaali- ja terveyspalvelut",onClick:e=>e.preventDefault(),active:!0,dropdownLinks:[l.createElement(r.H.Link,{href:"#",label:"Terveydenhoito",active:!0,dropdownLinks:[l.createElement(r.H.Link,{href:"#",label:"Hammashoito"}),l.createElement(r.H.Link,{href:"#",label:"Julkinen terveydenhoito"})]}),l.createElement(r.H.Link,{href:"#",label:"Senioripalvelut",dropdownLinks:[l.createElement(r.H.Link,{href:"#",label:"Viriketoiminta"}),l.createElement(r.H.Link,{href:"#",label:"Kuntouttavat palvelut"})]})]}),l.createElement(r.H.Link,{href:"#",label:"Kasvatus ja koulutus",dropdownLinks:[l.createElement(r.H.Link,{href:"#",label:"Kasvatus",active:!0,dropdownLinks:[l.createElement(r.H.Link,{href:"#",label:"Varhaiskasvatus"}),l.createElement(r.H.Link,{href:"#",label:"Esiopetus"})]}),l.createElement(r.H.Link,{href:"#",label:"Koulutus",dropdownLinks:[l.createElement(r.H.Link,{href:"#",label:"Perusopetus"}),l.createElement(r.H.Link,{href:"#",label:"Toisen asteen koulutus"}),l.createElement(r.H.Link,{href:"#",label:"Työväenopistot"})]})]}),l.createElement(r.H.Link,{href:"#",label:"Asuminen"})))),"\n",l.createElement(t.p,null,l.createElement(t.strong,null,"Note:")," Header is designed to be used full width at the top of the page above the main content. Preview here might not scale correctly, ",l.createElement(m,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-header--with-full-features"},"view full header example with navigation menu in Storybook"),"."),"\n",l.createElement(t.h4,{id:"with-navigation-menu",style:{position:"relative"}},"With navigation menu",l.createElement(t.a,{href:"#with-navigation-menu","aria-label":"with navigation menu permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"The Header.NavigationMenu is enables users to navigate to different pages of the service. The navigation menu supports up to 3 levels of page hierarchy. For more levels and recommendations, see also Navigation pattern."),"\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,"The Header.NavigationMenu component should come after ",l.createElement(t.a,{href:"#with-action-bar"},"the Header.ActionBar component"),"."),"\n",l.createElement(t.li,null,"Keep navigation menu link labels clear and concise. Prefer max 1-2 word long labels. Avoid starting multiple menu link labels with the same word. See also our ",l.createElement(h.Z,{href:"/components/header/accessibility"},"accessibility notes")," about navigation menu's hierarchy."),"\n",l.createElement(t.li,null,"Under large sized screens (992px and down) the Header.NavigationMenu is hidden and the contents are moved inside the ",l.createElement(t.a,{href:"#with-action-bar"},"the Header.ActionBar component's")," menu."),"\n"),"\n",l.createElement(a,null,l.createElement(r.H,{languages:[{label:"Suomi",value:"fi"},{label:"Svenska",value:"sv"},{label:"English",value:"en"}]},l.createElement(r.H.ActionBar,{title:"Helsingin kaupunki",titleHref:"https://hel.fi",logoAriaLabel:"Service logo",logoHref:"https://hel.fi",logo:l.createElement(i.L,{src:i.l,alt:"Helsingin kaupunki"}),menuButtonAriaLabel:"Menu"},l.createElement(r.H.LanguageSelector,null,l.createElement("h3",null,"Muut kielet"),l.createElement(m,{href:"www.example.com",size:"S",lang:"de"},l.createElement(t.p,null,"Deutsch")),l.createElement(m,{href:"www.example.com",size:"S",lang:"es"},l.createElement(t.p,null,"Español")),l.createElement(m,{href:"www.example.com",size:"S",lang:"fr"},l.createElement(t.p,null,"Français")),l.createElement(m,{href:"www.example.com",size:"S",lang:"ru"},l.createElement(t.p,null,"Pусский")),l.createElement("h3",null,"Tietoa muilla kielillä"),l.createElement(m,{external:!0,href:"www.example.com",size:"S",lang:"fi"},l.createElement(t.p,null,"Selkosuomi")),l.createElement(m,{external:!0,href:"www.example.com",size:"S",lang:"fi"},l.createElement(t.p,null,"Viittomakieli")),l.createElement("h3",null,"Matkailijoille"),l.createElement(m,{external:!0,href:"www.example.com",size:"S",lang:"fi"},l.createElement(t.p,null,"MyHelsinki.fi")),l.createElement("h3",null,"Maahanmuuttajille"),l.createElement(m,{external:!0,href:"www.example.com",size:"S",lang:"fi"},l.createElement(t.p,null,"InfoFinland.fi")))),l.createElement(r.H.NavigationMenu,null,l.createElement(r.H.Link,{href:"#",label:"Sosiaali- ja terveyspalvelut",onClick:e=>e.preventDefault(),active:!0,dropdownLinks:[l.createElement(r.H.Link,{href:"#",label:"Terveydenhoito",active:!0,dropdownLinks:[l.createElement(r.H.Link,{href:"#",label:"Hammashoito"}),l.createElement(r.H.Link,{href:"#",label:"Julkinen terveydenhoito"})]}),l.createElement(r.H.Link,{href:"#",label:"Senioripalvelut",dropdownLinks:[l.createElement(r.H.Link,{href:"#",label:"Viriketoiminta"}),l.createElement(r.H.Link,{href:"#",label:"Kuntouttavat palvelut"})]})]}),l.createElement(r.H.Link,{href:"#",label:"Kasvatus ja koulutus",dropdownLinks:[l.createElement(r.H.Link,{href:"#",label:"Kasvatus",active:!0,dropdownLinks:[l.createElement(r.H.Link,{href:"#",label:"Varhaiskasvatus"}),l.createElement(r.H.Link,{href:"#",label:"Esiopetus"})]}),l.createElement(r.H.Link,{href:"#",label:"Koulutus",dropdownLinks:[l.createElement(r.H.Link,{href:"#",label:"Perusopetus"}),l.createElement(r.H.Link,{href:"#",label:"Toisen asteen koulutus"}),l.createElement(r.H.Link,{href:"#",label:"Työväenopistot"})]})]}),l.createElement(r.H.Link,{href:"#",label:"Asuminen"})))),"\n",l.createElement(t.p,null,l.createElement(t.strong,null,"Note:")," Header is designed to be used full width at the top of the page above the main content. Preview here might not scale correctly, ",l.createElement(m,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-header--with-full-features"},"view full header example with navigation menu in Storybook"),"."),"\n",l.createElement(t.h4,{id:"colour-variations",style:{position:"relative"}},"Colour variations",l.createElement(t.a,{href:"#colour-variations","aria-label":"colour variations permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"Header offers two variations with different backgrounds - one with white and one with black (default) text elements. Use variation that achieves better contrast with the brand background colour of your choice.\nHeader supports also custom theming — See variables in code tab.\nWhen customising colours, refer to ",l.createElement(h.Z,{href:"/foundation/design-tokens/colour"},"colour guidelines")," to ensure accessibility."),"\n",l.createElement(a,null,l.createElement("div",{style:{marginBottom:"1rem",position:"relative",zIndex:"13"}},l.createElement(r.H,{theme:"light",languages:[{label:"Suomi",value:"fi"},{label:"Svenska",value:"sv"},{label:"English",value:"en"}]},l.createElement(r.H.ActionBar,{title:"Helsingin kaupunki",titleHref:"https://hel.fi",logoAriaLabel:"Service logo",logoHref:"https://hel.fi",logo:l.createElement(i.L,{src:i.l,alt:"Helsingin kaupunki"}),menuButtonAriaLabel:"Menu"},l.createElement(r.H.LanguageSelector)),l.createElement(r.H.NavigationMenu,null,l.createElement(r.H.Link,{href:"#",label:"Sosiaali- ja terveyspalvelut",dropdownLinks:[l.createElement(r.H.Link,{as:m,href:"#",label:"Terveydenhoito",active:!0,dropdownLinks:[l.createElement(r.H.Link,{as:m,href:"#",label:"Hammashoito"}),l.createElement(r.H.Link,{as:m,href:"#",label:"Julkinen terveydenhoito"})]}),l.createElement(r.H.Link,{as:m,href:"#",label:"Senioripalvelut",dropdownLinks:[l.createElement(r.H.Link,{as:m,href:"#",label:"Viriketoiminta"}),l.createElement(r.H.Link,{as:m,href:"#",label:"Kuntouttavat palvelut"})]})]}),l.createElement(r.H.Link,{href:"#",label:"Kasvatus ja koulutus"}),l.createElement(r.H.Link,{href:"#",label:"Asuminen"})))),l.createElement("div",{style:{marginBottom:"1rem",position:"relative",zIndex:"12"}},l.createElement(r.H,{theme:"dark"},l.createElement(r.H.ActionBar,{title:"Helsingin kaupunki",titleHref:"https://hel.fi",logoAriaLabel:"Service logo",logoHref:"https://hel.fi",logo:l.createElement(i.L,{src:i.a,alt:"Helsingin kaupunki"}),menuButtonAriaLabel:"Menu"},l.createElement(r.H.LanguageSelector,{languages:[{label:"Suomi",value:"fi"},{label:"Svenska",value:"sv"},{label:"English",value:"en"}]})),l.createElement(r.H.NavigationMenu,null,l.createElement(r.H.Link,{href:"#",label:"Sosiaali- ja terveyspalvelut",dropdownLinks:[l.createElement(r.H.Link,{as:m,href:"#",label:"Terveydenhoito",active:!0,dropdownLinks:[l.createElement(r.H.Link,{as:m,href:"#",label:"Hammashoito"}),l.createElement(r.H.Link,{as:m,href:"#",label:"Julkinen terveydenhoito"})]}),l.createElement(r.H.Link,{as:m,href:"#",label:"Senioripalvelut",dropdownLinks:[l.createElement(r.H.Link,{as:m,href:"#",label:"Viriketoiminta"}),l.createElement(r.H.Link,{as:m,href:"#",label:"Kuntouttavat palvelut"})]})]}),l.createElement(r.H.Link,{href:"#",label:"Kasvatus ja koulutus"}),l.createElement(r.H.Link,{href:"#",label:"Asuminen"})))),l.createElement("div",{style:{position:"relative",zIndex:"11"}},l.createElement(r.H,{theme:{"--color-focus-outline":"var(--color-metro-dark)","--header-color":"var(--color-black)","--header-focus-outline-color":"var(--color-metro-dark)","--actionbar-background-color":"var(--color-engel)","--nav-background-color":"var(--color-engel-light)","--nav-mobile-menu-background-color":"var(--color-engel-light)","--nav-border-color":"var(--color-black)","--nav-link-hover-color":"var(--color-black)","--universal-bar-background-color":"var(--color-black-20)","--nav-link-dropdown-background-color":"var(--color-engel-light)","--nav-button-background-color":"var(--color-black-20)","--nav-button-hover-background-color":"var(--color-black-40)","--nav-drop-down-icon-color":"var(--color-black)","--header-background-color":"transparent"}},l.createElement(r.H.ActionBar,{title:"Helsingin kaupunki",titleHref:"https://hel.fi",logoAriaLabel:"Service logo",logoHref:"https://hel.fi",logo:l.createElement(i.L,{src:i.l,alt:"Helsingin kaupunki"}),menuButtonAriaLabel:"Menu"},l.createElement(r.H.LanguageSelector,{languages:[{label:"Suomi",value:"fi"},{label:"Svenska",value:"sv"},{label:"English",value:"en"}]})),l.createElement(r.H.NavigationMenu,null,l.createElement(r.H.Link,{href:"#",label:"Sosiaali- ja terveyspalvelut",dropdownLinks:[l.createElement(r.H.Link,{as:m,href:"#",label:"Terveydenhoito",active:!0,dropdownLinks:[l.createElement(r.H.Link,{as:m,href:"#",label:"Hammashoito"}),l.createElement(r.H.Link,{as:m,href:"#",label:"Julkinen terveydenhoito"})]}),l.createElement(r.H.Link,{as:m,href:"#",label:"Senioripalvelut",dropdownLinks:[l.createElement(r.H.Link,{as:m,href:"#",label:"Viriketoiminta"}),l.createElement(r.H.Link,{as:m,href:"#",label:"Kuntouttavat palvelut"})]})]}),l.createElement(r.H.Link,{href:"#",label:"Kasvatus ja koulutus"}),l.createElement(r.H.Link,{href:"#",label:"Asuminen"}))))),"\n",l.createElement(t.p,null,l.createElement(t.strong,null,"Note:")," Header is designed to be used full width at the top of the page above the main content. Preview here might not scale correctly, ",l.createElement(m,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-header--with-full-features-custom-theme"},"view full header with custom theme example in Storybook")," or toggle",l.createElement(m,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-header--with-full-features"},"the dark theme in full featured story"),"."))}function p(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){return void 0===e&&(e={}),l.createElement(u,e,l.createElement(d,e))}},11690:function(e,t,a){a.r(t);var n=a(11151),l=a(67294),r=a(83428),i=a(12818),o=a(57674),s=a(89482),c=(a(18607),a(26127));function m(e){const t=Object.assign({h1:"h1",a:"a",span:"span",p:"p"},(0,n.ah)(),e.components);return c.Z||h("PageTabs",!1),c.Z.Tab||h("PageTabs.Tab",!0),c.Z.TabList||h("PageTabs.TabList",!0),c.Z.TabPanel||h("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"header",style:{position:"relative"}},"Header",l.createElement(t.a,{href:"#header","aria-label":"header permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{className:"status-label-description"},l.createElement(r.S,{type:"error"},"Draft"),l.createElement(r.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(o.Z)),"\n",l.createElement(s.Z,null,"The Header component is located at the top of the page above the main body content. It provides a place for levels of primary navigation and site-wide actions."),"\n",l.createElement(i.N,{label:"A work in progress!",className:"siteNotification"},l.createElement(t.p,null,"The Header components are a collection of new navigation components the HDS team is currently fine tuning. This means\nthat these components are subject to change. We are open to feedback regarding how they work.")),"\n",l.createElement(c.Z,{pageContext:e.pageContext},l.createElement(c.Z.TabList,null,l.createElement(c.Z.Tab,{href:"/"},"Usage"),l.createElement(c.Z.Tab,{href:"/code"},"Code"),l.createElement(c.Z.Tab,{href:"/accessibility"},"Accessibility")),l.createElement(c.Z.TabPanel,null,e.children)))}function h(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,n.ah)(),e.components);return t?l.createElement(t,e,l.createElement(m,e)):m(e)}},89482:function(e,t,a){var n=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:l={},children:r}=e;return n.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...l}},r)}},26127:function(e,t,a){var n=a(67294),l=a(14160),r=a(94671);const i="PageTabList",o="PageTabPanel",s="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const m=a.frontmatter.slug,h=Array.isArray(c)?c:[c],u=h.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===i)),d=h.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===o)),p=null===(t=u.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===s)),b=p.findIndex((e=>m.endsWith(e.props.href))),g=-1===b?0:b,f=0===g?m:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(m);return n.createElement(r.a,{initiallyActiveTab:g},n.createElement(r.a.TabList,{className:"page-tabs-list"},p.map((e=>n.createElement(r.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),p.map(((e,t)=>n.createElement(r.a.TabPanel,{key:e.props.href},g===t?d.props.children:n.createElement("div",null)))))},m=e=>{let{children:t}=e;return n.createElement(r.a.TabList,null,t)};m.componentName=i;const h=e=>{let{href:t,slug:a,children:l}=e;return n.createElement(r.a.Tab,null,l)};h.componentName=s;const u=e=>{let{children:t}=e;return n.createElement(r.a.TabPanel,null,t)};u.componentName=o,c.TabList=m,c.Tab=h,c.TabPanel=u,t.Z=c},57674:function(e,t,a){var n=a(67294),l=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return n.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},n.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>n.createElement("li",{key:t},n.createElement("span",{className:"status-name"},t),n.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-header-tabs-mdx-e296284a31b64f02f630.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-header-tabs-mdx-e296284a31b64f02f630.js
new file mode 100644
index 00000000000..083484e5bf7
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-header-tabs-mdx-e296284a31b64f02f630.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[5387],{83428:function(e,a,t){t.d(a,{S:function(){return i}});var s=t(80136),l=t(67294),n=t(7444),r=t(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const c=e=>{let{icon:a}=e;return l.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},a)},i=e=>{var{children:a,className:t,dataTestId:n,type:i="neutral",iconLeft:b}=e,u=(0,s._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(o.statusLabel,o[i],b&&o.statusLabelWithIcon,t),"data-testid":n},u),b&&l.createElement(c,{icon:b}),a)}},11690:function(e,a,t){t.r(a);var s=t(11151),l=t(67294),n=t(83428),r=t(12818),o=t(57674),c=t(89482),i=(t(18607),t(26127));function b(e){const a=Object.assign({h1:"h1",a:"a",span:"span",p:"p"},(0,s.ah)(),e.components);return i.Z||u("PageTabs",!1),i.Z.Tab||u("PageTabs.Tab",!0),i.Z.TabList||u("PageTabs.TabList",!0),i.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(a.h1,{id:"header",style:{position:"relative"}},"Header",l.createElement(a.a,{href:"#header","aria-label":"header permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{className:"status-label-description"},l.createElement(n.S,{type:"error"},"Draft"),l.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(o.Z)),"\n",l.createElement(c.Z,null,"The Header component is located at the top of the page above the main body content. It provides a place for levels of primary navigation and site-wide actions."),"\n",l.createElement(r.N,{label:"A work in progress!",className:"siteNotification"},l.createElement(a.p,null,"The Header components are a collection of new navigation components the HDS team is currently fine tuning. This means\nthat these components are subject to change. We are open to feedback regarding how they work.")),"\n",l.createElement(i.Z,{pageContext:e.pageContext},l.createElement(i.Z.TabList,null,l.createElement(i.Z.Tab,{href:"/"},"Usage"),l.createElement(i.Z.Tab,{href:"/code"},"Code"),l.createElement(i.Z.Tab,{href:"/accessibility"},"Accessibility")),l.createElement(i.Z.TabPanel,null,e.children)))}function u(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,s.ah)(),e.components);return a?l.createElement(a,e,l.createElement(b,e)):b(e)}},89482:function(e,a,t){var s=t(67294);a.Z=e=>{let{color:a="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:l={},children:n}=e;return s.createElement("p",{style:{fontSize:t,color:a,maxWidth:600,...l}},n)}},26127:function(e,a,t){var s=t(67294),l=t(14160),n=t(94671);const r="PageTabList",o="PageTabPanel",c="PageTab",i=e=>{var a;let{pageContext:t,children:i}=e;const b=t.frontmatter.slug,u=Array.isArray(i)?i:[i],d=u.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===r)),m=u.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===o)),h=null===(a=d.props)||void 0===a?void 0:a.children.filter((e=>e.type.componentName===c)),p=h.findIndex((e=>b.endsWith(e.props.href))),_=-1===p?0:p,f=0===_?b:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(b);return s.createElement(n.a,{initiallyActiveTab:_},s.createElement(n.a.TabList,{className:"page-tabs-list"},h.map((e=>s.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),h.map(((e,a)=>s.createElement(n.a.TabPanel,{key:e.props.href},_===a?m.props.children:s.createElement("div",null)))))},b=e=>{let{children:a}=e;return s.createElement(n.a.TabList,null,a)};b.componentName=r;const u=e=>{let{href:a,slug:t,children:l}=e;return s.createElement(n.a.Tab,null,l)};u.componentName=c;const d=e=>{let{children:a}=e;return s.createElement(n.a.TabPanel,null,a)};d.componentName=o,i.TabList=b,i.Tab=u,i.TabPanel=d,a.Z=i},57674:function(e,a,t){var s=t(67294),l=t(45422);a.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return s.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},s.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((a=>s.createElement("li",{key:a},s.createElement("span",{className:"status-name"},a),s.createElement("span",null,e[a]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-hero-accessibility-mdx-d6db9703b8a1c4068b9e.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-hero-accessibility-mdx-d6db9703b8a1c4068b9e.js
new file mode 100644
index 00000000000..521796bedab
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-hero-accessibility-mdx-d6db9703b8a1c4068b9e.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[1645,9598],{83428:function(e,t,a){a.d(t,{S:function(){return c}});var l=a(80136),n=a(67294),s=a(7444),r=a(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,s.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:t}=e;return n.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:s,type:c="neutral",iconLeft:u}=e,d=(0,l._)(e,["children","className","dataTestId","type","iconLeft"]);return n.createElement("span",Object.assign({className:(0,r.c)(i.statusLabel,i[c],u&&i.statusLabelWithIcon,a),"data-testid":s},d),u&&n.createElement(o,{icon:u}),t)}},91982:function(e,t,a){a.r(t);var l=a(11151),n=a(67294),s=(a(80699),a(10857));const r=e=>{let{children:t,pageContext:a}=e;return n.createElement(s.default,{pageContext:a},t)};function i(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",code:"code"},(0,l.ah)(),e.components);return n.createElement(n.Fragment,null,n.createElement(t.h2,{id:"accessibility",style:{position:"relative"}},"Accessibility",n.createElement(t.a,{href:"#accessibility","aria-label":"accessibility permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.h3,{id:"pay-attention-to",style:{position:"relative"}},"Pay attention to",n.createElement(t.a,{href:"#pay-attention-to","aria-label":"pay attention to permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.ul,null,"\n",n.createElement(t.li,null,"Heading levels must be in hierarchical order. ",n.createElement(t.code,null,"Hero.Title")," is rendered as a ",n.createElement(t.code,null,"<h1>")," element by default. It can be changed with the ",n.createElement(t.code,null,"headingLevel")," property of the ",n.createElement(t.code,null,"Hero.Title"),"."),"\n",n.createElement(t.li,null,"The hero component is not interactable and does not have a focus state."),"\n",n.createElement(t.li,null,"If the Hero's CTA button is used as a link, remember to set 'role=\"link\"' to the button."),"\n",n.createElement(t.li,null,"Images in the hero component are hidden from assistive technologies and have an empty alt-text."),"\n"))}t.default=function(e){return void 0===e&&(e={}),n.createElement(r,e,n.createElement(i,e))}},10857:function(e,t,a){a.r(t);var l=a(11151),n=a(67294),s=a(83428),r=a(89482),i=(a(18607),a(26127)),o=a(57674);function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,l.ah)(),e.components);return i.Z||u("PageTabs",!1),i.Z.Tab||u("PageTabs.Tab",!0),i.Z.TabList||u("PageTabs.TabList",!0),i.Z.TabPanel||u("PageTabs.TabPanel",!0),n.createElement(n.Fragment,null,n.createElement(t.h1,{id:"hero",style:{position:"relative"}},"Hero",n.createElement(t.a,{href:"#hero","aria-label":"hero permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement("div",{className:"status-label-description"},n.createElement(s.S,{variant:"rounded",type:"info"},"Stable"),n.createElement(s.S,{variant:"rounded",type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),n.createElement(o.Z)),"\n",n.createElement(r.Z,null,"Hero elements are used below the main navigation as the first content element. They can be used for different purposes, but most often, they shortly describe the page's role and offer the page's essential function as a call-to-action button."),"\n",n.createElement(i.Z,{pageContext:e.pageContext},n.createElement(i.Z.TabList,null,n.createElement(i.Z.Tab,{href:"/"},"Usage"),n.createElement(i.Z.Tab,{href:"/code"},"Code"),n.createElement(i.Z.Tab,{href:"/accessibility"},"Accessibility"),n.createElement(i.Z.Tab,{href:"/customisation"},"Customisation")),n.createElement(i.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,l.ah)(),e.components);return t?n.createElement(t,e,n.createElement(c,e)):c(e)}},89482:function(e,t,a){var l=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:n={},children:s}=e;return l.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...n}},s)}},26127:function(e,t,a){var l=a(67294),n=a(14160),s=a(94671);const r="PageTabList",i="PageTabPanel",o="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const u=a.frontmatter.slug,d=Array.isArray(c)?c:[c],b=d.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===r)),h=d.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===i)),m=null===(t=b.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===o)),p=m.findIndex((e=>u.endsWith(e.props.href))),f=-1===p?0:p,_=0===f?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return l.createElement(s.a,{initiallyActiveTab:f},l.createElement(s.a.TabList,{className:"page-tabs-list"},m.map((e=>l.createElement(s.a.Tab,{key:e.props.href,onClick:()=>(0,n.navigate)(""+("/"===e.props.href?_:_+e.props.href))},e.props.children)))),m.map(((e,t)=>l.createElement(s.a.TabPanel,{key:e.props.href},f===t?h.props.children:l.createElement("div",null)))))},u=e=>{let{children:t}=e;return l.createElement(s.a.TabList,null,t)};u.componentName=r;const d=e=>{let{href:t,slug:a,children:n}=e;return l.createElement(s.a.Tab,null,n)};d.componentName=o;const b=e=>{let{children:t}=e;return l.createElement(s.a.TabPanel,null,t)};b.componentName=i,c.TabList=u,c.Tab=d,c.TabPanel=b,t.Z=c},57674:function(e,t,a){var l=a(67294),n=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return l.createElement(n.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},l.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>l.createElement("li",{key:t},l.createElement("span",{className:"status-name"},t),l.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-hero-code-mdx-09de62be2348ed264be4.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-hero-code-mdx-09de62be2348ed264be4.js
new file mode 100644
index 00000000000..85b98ed6e5b
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-hero-code-mdx-09de62be2348ed264be4.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[9745,9598],{46790:function(e,o,t){t.d(o,{H:function(){return d}});var a=t(80136),n=t(67294),r=t(7444),l=t(34300),s=t(97640),i=t(55810),c={"large-up":"only screen and (min-width:992px)",hero:"Hero-module_hero__1VoHZ hero_hds-hero__2NmPy",title:"Hero-module_title__3-FB4 hero_hds-hero__title__3Ue67",text:"Hero-module_text__ZzYyT hero_hds-hero__text__3K95k",container:"Hero-module_container__3HfYy hero_hds-hero__container__1Di91",content:"Hero-module_content__3qNYZ hero_hds-hero__content__1Gtc5",singleColumn:"Hero-module_singleColumn__b0Sxw hero_hds-hero__content--single-column__iqfBL",twoColumns:"Hero-module_twoColumns__3wl_x hero_hds-hero__content--two-columns__3Q1x5",twoColumnsImageContainer:"Hero-module_twoColumnsImageContainer__3jDE3 hero_hds-hero__content--two-columns__image-container__2CX-9",card:"Hero-module_card__JuJeG hero_hds-hero__card__3TyQe",centeredContent:"Hero-module_centeredContent__1VnN1 hero_hds-hero__card--centered-content__3HHG6",image:"Hero-module_image__VwcrU hero_hds-hero__image__ZfJbX",imageBelowKoros:"Hero-module_imageBelowKoros__30i8S hero_hds-hero__image-below-koros__1LSUL",withBackgroundContainer:"Hero-module_withBackgroundContainer__2jIxP hero_hds-hero--with-background__container__1jpi7",withBackgroundBackground:"Hero-module_withBackgroundBackground__Hv69M hero_hds-hero--with-background__background__JEVuN",backgroundImage:"Hero-module_backgroundImage__dSqiQ hero_hds-hero--background-image__2Wse1",backgroundImageKoros:"Hero-module_backgroundImageKoros__1yXtL hero_hds-hero--background-image__koros__2nudG",diagonalKoros:"Hero-module_diagonalKoros__Yj-M5 hero_hds-hero--diagonal-koros__1gvD8",diagonalKorosWithBackgroundContainer:"Hero-module_diagonalKorosWithBackgroundContainer__79wsC hero_hds-hero--diagonal-koros__1gvD8 hero_hds-hero--with-background__container__1jpi7",diagonalKorosAndBackground:"Hero-module_diagonalKorosAndBackground__1rGzm hero_hds-hero--diagonal-koros__koros-and-background__1U31N",contentColums:"Hero-module_contentColums__2GK_9 hero_hds-hero--with-background__content-columns__1NT1u",emptyColumn:"Hero-module_emptyColumn__3_c4m hero_hds-hero--with-background__empty-column__21yM0",imageLeft:"Hero-module_imageLeft__1QAb_ hero_hds-hero--image-left__11ngD",imageRight:"Hero-module_imageRight__CJzYp hero_hds-hero--image-right__3r8N5",korosContainer:"Hero-module_korosContainer__2UG8F hero_hds-hero__koros-container__2Ab9n",korosContainerInwardKoros:"Hero-module_korosContainerInwardKoros__L0Vt_ hero_hds-hero__koros-container--inward-koros__3hMd7",korosContainerOverflowBottom:"Hero-module_korosContainerOverflowBottom__2aHz0 hero_hds-hero__koros-container--overflow-bottom__1sOA8",korosAndImageContainer:"Hero-module_korosAndImageContainer__Phyhg hero_hds-hero__koros-and-image-container__2-9vj",korosAligner:"Hero-module_korosAligner__2Y1UK hero_hds-hero--diagonal-koros__koros-aligner__80AA4"};(0,r.s)('.hero_hds-hero__2NmPy{--background-color:var(--color-white);--color:var(--color-black-90);--image-position:bottom right;--koros-color:var(--color-white);--koros-height:85px;--diagonal-koros-position:45%;--horizontal-padding-small:var(--spacing-layout-2-xs);--horizontal-padding-medium:var(--spacing-layout-xs);--horizontal-padding-large:var(--spacing-layout-xs);--horizontal-padding-x-large:var(--spacing-layout-xs);--padding-horizontal:var(--horizontal-padding-small);--padding-vertical:var(--spacing-xl);background-color:var(--background-color);color:var(--color);display:flex;flex-direction:column;position:relative;z-index:1}.hero_hds-hero__title__3Ue67{font-size:var(--fontsize-heading-xl);font-weight:400;letter-spacing:-1px;line-height:1em;margin-top:0}.hero_hds-hero__text__3K95k{font-size:var(--fontsize-body-l)}.hero_hds-hero__container__1Di91{margin-left:auto;margin-right:auto;max-width:var(--container-width-xl)}.hero_hds-hero__content__1Gtc5{display:flex;padding:var(--padding-vertical) var(--padding-horizontal)}.hero_hds-hero__content--single-column__iqfBL,.hero_hds-hero__content--two-columns__3Q1x5{display:flex;flex-direction:column}.hero_hds-hero__content--two-columns__3Q1x5{align-items:center}.hero_hds-hero__content--two-columns__image-container__2CX-9{display:none}.hero_hds-hero__card__3TyQe{display:block;max-width:var(--container-width-xl)}.hero_hds-hero__koros-container--inward-koros__3hMd7,.hero_hds-hero__koros-container--overflow-bottom__1sOA8,.hero_hds-hero__koros-container__2Ab9n{height:var(--koros-height);top:0;right:0;bottom:0;left:0;overflow:hidden;position:absolute;z-index:1}.hero_hds-hero__koros-container--inward-koros__3hMd7{position:relative}.hero_hds-hero__koros-container--overflow-bottom__1sOA8{bottom:calc(-1 * var(--koros-height));display:flex;flex-direction:column;justify-content:flex-end;top:auto}.hero_hds-hero__koros-container__2Ab9n>div{bottom:0;height:100%;position:absolute;width:100%}.hero_hds-hero__card--centered-content__3HHG6{text-align:center;width:100%}.hero_hds-hero__image__ZfJbX{display:block;width:100%}.hero_hds-hero__koros-and-image-container__2-9vj{display:block;position:relative}.hero_hds-hero__image-below-koros__1LSUL{display:block}.hero_hds-hero__image-below-koros__1LSUL .hero_hds-hero__image__ZfJbX{height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:var(--image-position);object-position:var(--image-position)}.hero_hds-hero--with-background__container__1jpi7{position:relative}.hero_hds-hero--with-background__background__JEVuN{position:relative;width:100%}.hero_hds-hero--with-background__background__JEVuN .hero_hds-hero__image__ZfJbX{height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:var(--image-position);object-position:var(--image-position)}.hero_hds-hero--with-background__content-columns__1NT1u{display:flex;margin:0 auto;max-width:var(--container-width-xl)}.hero_hds-hero--with-background__empty-column__21yM0{display:none}.hero_hds-hero--background-image__2Wse1 .hero_hds-hero__content__1Gtc5{padding:0}.hero_hds-hero--background-image__2Wse1 .hero_hds-hero__card__3TyQe{background-color:var(--background-color);padding:var(--padding-vertical) var(--padding-horizontal)}.hero_hds-hero--background-image__koros__2nudG{bottom:0;height:var(--koros-height);overflow:hidden;position:absolute;width:100%;--koros-color:var(--top-koros-color)}.hero_hds-hero--diagonal-koros__1gvD8 .hero_hds-hero--with-background__container__1jpi7{display:flex;flex-direction:column;overflow:hidden;position:relative;z-index:1}.hero_hds-hero--diagonal-koros__1gvD8 .hero_hds-hero__content__1Gtc5{box-sizing:border-box;display:block;padding:0;width:100%;z-index:2}.hero_hds-hero--diagonal-koros__1gvD8 .hero_hds-hero__card__3TyQe{background-color:var(--background-color);padding:var(--padding-vertical) var(--padding-horizontal)}.hero_hds-hero--diagonal-koros__koros-and-background__1U31N{height:var(--koros-height);position:absolute;transform:rotate(180deg);width:100%}.hero_hds-hero--diagonal-koros__koros-aligner__80AA4{position:relative;z-index:1}.hero_hds-hero--diagonal-koros__koros-and-background__1U31N .hero_hds-hero__koros-container__2Ab9n{height:100%;overflow:hidden;position:absolute;top:0;width:100%}.hero_hds-hero--with-background__background__JEVuN,.hero_hds-hero__image-below-koros__1LSUL{height:300px}@media only screen and (min-width:768px){.hero_hds-hero__2NmPy{--padding-horizontal:var(--horizontal-padding-medium);--padding-vertical:var(--spacing-layout-m)}.hero_hds-hero--with-background__background__JEVuN,.hero_hds-hero__image-below-koros__1LSUL{height:400px}}@media only screen and (min-width:992px){.hero_hds-hero__2NmPy{--padding-horizontal:var(--horizontal-padding-large);--padding-vertical:var(--spacing-layout-xl)}.hero_hds-hero__text__3K95k{font-size:var(--fontsize-body-xl)}.hero_hds-hero--image-left__11ngD .hero_hds-hero__image-below-koros__1LSUL,.hero_hds-hero--image-right__3r8N5 .hero_hds-hero__image-below-koros__1LSUL{display:none}.hero_hds-hero__content--two-columns__3Q1x5{flex-direction:row}.hero_hds-hero__content--two-columns__3Q1x5>*{width:50%}.hero_hds-hero__content--two-columns__3Q1x5>:first-child{margin-right:var(--spacing-xl)}.hero_hds-hero__content--two-columns__3Q1x5>:last-child{margin-left:var(--spacing-xl)}.hero_hds-hero__content--two-columns__image-container__2CX-9{display:block}.hero_hds-hero--background-image__2Wse1 .hero_hds-hero--with-background__container__1jpi7{padding:var(--padding-vertical) var(--padding-horizontal)}.hero_hds-hero--background-image__2Wse1 .hero_hds-hero__content__1Gtc5{--padding-vertical:var(--spacing-2-xl);display:flex;flex-direction:row;margin:0 auto;max-width:var(--container-width-xl)}.hero_hds-hero--background-image__2Wse1 .hero_hds-hero__card__3TyQe{width:50%}.hero_hds-hero--with-background__background__JEVuN{height:auto;top:0;right:0;bottom:0;left:0;position:absolute;width:auto;z-index:-1}.hero_hds-hero--with-background__empty-column__21yM0{display:block;width:45%}.hero_hds-hero--diagonal-koros__1gvD8 .hero_hds-hero__content__1Gtc5{background-color:transparent;padding:var(--padding-vertical) 0}.hero_hds-hero--diagonal-koros__1gvD8 .hero_hds-hero__card__3TyQe{background:none;padding:0 var(--padding-horizontal);width:55%}.hero_hds-hero--diagonal-koros__koros-aligner__80AA4{bottom:0;max-width:var(--container-width-xl);position:absolute;right:var(--diagonal-koros-position);top:0;width:100%;z-index:1}.hero_hds-hero--diagonal-koros__koros-and-background__1U31N{display:block;height:100%;top:0;right:0;bottom:0;left:0;overflow:visible;position:absolute;transform:rotate(135deg);transform-origin:center;width:150%}.hero_hds-hero--diagonal-koros__koros-and-background__1U31N:after{background-color:var(--koros-color);content:"";display:block;height:1500px;left:0;position:absolute;top:50px;width:150%}.hero_hds-hero--diagonal-koros__koros-and-background__1U31N .hero_hds-hero__koros-container__2Ab9n{height:100%;overflow:hidden;position:absolute;top:0;width:100%;z-index:1}.hero_hds-hero--background-image__koros__2nudG{--koros-color:var(--bottom-koros-color)}}@media only screen and (min-width:1248px){.hero_hds-hero__2NmPy{--padding-horizontal:var(--horizontal-padding-x-large)}.hero_hds-hero__title__3Ue67{font-size:var(--fontsize-heading-xxl);letter-spacing:-1.2px}.hero_hds-hero--diagonal-koros__1gvD8 .hero_hds-hero__text__3K95k{padding-right:var(--spacing-l)}.hero_hds-hero__content--two-columns__3Q1x5>:first-child{margin-right:var(--spacing-2-xl)}.hero_hds-hero__content--two-columns__3Q1x5>:last-child{margin-left:var(--spacing-2-xl)}}');const d=e=>{var{children:o,variant:t,imageSrc:r,centeredContent:d,theme:h,koros:_}=e,m=(0,a._)(e,["children","variant","imageSrc","centeredContent","theme","koros"]);const u=Object.assign({},h);if(u["--koros-color"]||(u["--koros-color"]="var(--background-color)"),"backgroundImage"===t&&(u["--top-koros-color"]="var(--background-color)",u["--bottom-koros-color"]="var(--koros-color)"),!u["--koros-height"]){const e=(0,i.g)(_||{});e&&(u["--koros-height"]=e+"px")}const g=t||(r?"imageLeft":"noImage"),p=(0,s.u)(c.hero,u),b=Object.assign(Object.assign({},_),{style:{fill:"var(--koros-color)"}}),k=Object.assign(Object.assign({},m),{className:(0,l.c)(c.hero,p,c[g],m.className)}),v=()=>n.createElement("img",{className:c.image,src:r,"aria-hidden":!0,alt:""}),f=e=>n.createElement("div",{className:(0,l.c)(c.withBackgroundBackground,e&&e.className)},n.createElement(v,null)),E=()=>n.createElement("div",{key:"imageContainer-"+g,className:c.twoColumnsImageContainer},n.createElement(v,null)),w=()=>{const e=d?(0,l.c)(c.card,c.centeredContent):(0,l.c)(c.card);return n.createElement("div",{className:e},o)},y=e=>{const{inward:o,containerClassName:t,style:r}=e,l=(0,a._)(e,["inward","containerClassName","style"]),s=t||(!0!==o?c.korosContainer:c.korosContainerInwardKoros);return n.createElement("div",{className:s},n.createElement(i.K,Object.assign({},Object.assign(Object.assign({},l),{style:r,shift:!1,compact:!1}))))};if("backgroundImage"===g)return n.createElement("div",Object.assign({},k),n.createElement("div",{className:c.withBackgroundContainer},n.createElement("div",{className:(0,l.c)(c.withBackgroundBackground)},n.createElement(v,null),n.createElement(y,Object.assign({},b,{containerClassName:c.backgroundImageKoros}))),n.createElement("div",{className:(0,l.c)(c.content)},n.createElement(w,null),n.createElement("div",{className:c.emptyColumn}))));if("diagonalKoros"===g)return n.createElement("div",Object.assign({},k),n.createElement("div",{className:c.diagonalKorosWithBackgroundContainer},n.createElement("div",{className:c.content},n.createElement("div",{className:c.contentColums},n.createElement(w,null),n.createElement("div",{className:c.emptyColumn}))),n.createElement("div",{className:c.korosAligner},n.createElement("div",{className:c.diagonalKorosAndBackground},n.createElement(y,Object.assign({},b)))),n.createElement(f,{className:c.diagonalKorosBackgroundContainer})));const x=!!(null==_?void 0:_.hide),N=null==_?void 0:_.flipVertical,T=!!r&&"noImage"!==g,C=T&&"imageBottom"!==g?c.twoColumns:c.singleColumn;return n.createElement("div",Object.assign({},k),n.createElement("div",{className:c.container},n.createElement("div",{key:"content",className:(0,l.c)(c.content,C)},T&&"imageLeft"===g&&n.createElement(E,null),n.createElement(w,null),T&&"imageRight"===g&&n.createElement(E,null))),!T&&!x&&n.createElement(y,Object.assign({},b,{inward:!N,flipVertical:N,containerClassName:N?c.korosContainerOverflowBottom:void 0})),T&&n.createElement("div",{key:"korosAndImageContainer",className:(0,l.c)(c.korosAndImageContainer)},n.createElement(y,Object.assign({},b,{flipVertical:!1!==N})),n.createElement("div",{key:"imageContainer",className:(0,l.c)(c.imageBelowKoros)},n.createElement(v,null))))};d.Title=e=>{const{headingLevel:o=1,className:t,children:r}=e,s=(0,a._)(e,["headingLevel","className","children"]),i=(0,l.c)(c.title,t),d="h"+o;return n.createElement(d,Object.assign({},s,{className:i}),r)},d.Text=e=>{const{className:o,children:t}=e,r=(0,a._)(e,["className","children"]),s=(0,l.c)(c.text,o);return n.createElement("p",Object.assign({},r,{className:s}),t)}},83428:function(e,o,t){t.d(o,{S:function(){return c}});var a=t(80136),n=t(67294),r=t(7444),l=t(34300),s={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,r.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const i=e=>{let{icon:o}=e;return n.createElement("span",{className:s.statusLabelIcon,"aria-hidden":"true"},o)},c=e=>{var{children:o,className:t,dataTestId:r,type:c="neutral",iconLeft:d}=e,h=(0,a._)(e,["children","className","dataTestId","type","iconLeft"]);return n.createElement("span",Object.assign({className:(0,l.c)(s.statusLabel,s[c],d&&s.statusLabelWithIcon,t),"data-testid":r},h),d&&n.createElement(i,{icon:d}),o)}},96716:function(e,o,t){t.r(o);var a=t(11151),n=t(67294),r=t(46790),l=t(17882),s=t(10857);const i=e=>{let{children:o,pageContext:t}=e;return n.createElement(s.default,{pageContext:t},o)};function c(e){const o=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",h4:"h4",p:"p",code:"code",pre:"pre",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",strong:"strong"},(0,a.ah)(),e.components),{Playground:t,IconCheckCircleFill:s,Link:i,ExternalLink:c}=o;return c||d("ExternalLink",!0),s||d("IconCheckCircleFill",!0),i||d("Link",!0),t||d("Playground",!0),n.createElement(n.Fragment,null,n.createElement(o.h2,{id:"code",style:{position:"relative"}},"Code",n.createElement(o.a,{href:"#code","aria-label":"code permalink",className:"header-anchor after"},n.createElement(o.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(o.h3,{id:"code-examples",style:{position:"relative"}},"Code examples",n.createElement(o.a,{href:"#code-examples","aria-label":"code examples permalink",className:"header-anchor after"},n.createElement(o.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(o.h4,{id:"diagonal-koros",style:{position:"relative"}},"Diagonal koros",n.createElement(o.a,{href:"#diagonal-koros","aria-label":"diagonal koros permalink",className:"header-anchor after"},n.createElement(o.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(o.p,null,"Note that in order to customise the colour of the background with ",n.createElement(o.code,null,'variant="diagonalKoros"'),", you need to set the ",n.createElement(o.code,null,"--koros-color")," CSS variable."),"\n",n.createElement(t,{scope:{Hero:r.H,Button:l.B}},n.createElement(o.pre,null,n.createElement(o.code,{className:"language-jsx"},"import { Fieldset, TextInput } from 'hds-react';\n\n() => (\n  <Hero\n    imageSrc=\"https://hds.hel.fi/images/homepage/amos58.jpg\"\n    variant=\"diagonalKoros\"\n    theme={{\n      '--color': '#000',\n      '--koros-color': '#f5a3c7'\n    }}\n  >\n    <Hero.Title>Hero title</Hero.Title>\n    <Hero.Text>\n      This is an introduction text. The length is circa two sentences. The suitable total length of the title and\n      introduction is around 230 characters, including spaces. The intro ends with a period.\n    </Hero.Text>\n    <Button\n      variant=\"secondary\"\n      role=\"link\"\n      style={{ '--background-color': '#000', '--color': '#fff', '--border-color': '#000' }}\n    >\n      Call to action\n    </Button>\n  </Hero>\n)\n")),n.createElement(o.pre,null,n.createElement(o.code,{className:"language-html"},'<style scoped>\n  .custom-theme {\n    --koros-color: #f5a3c7;\n    --color: #000;\n    --koros-height: 34px;\n  }\n  .black-button.black-button {\n    --background-color: #000;\n    --color: #fff;\n    --border-color: #000;\n  }\n</style>\n<div>\n  <div class="hds-hero custom-theme hds-hero--diagonal-koros">\n    <div class="hds-hero--with-background__container">\n      <div class="hds-hero__content">\n        <div class="hds-hero--with-background__content-columns">\n          <div class="hds-hero__card">\n            <h1 class="hds-hero__title">Hero title</h1>\n            <p class="hds-hero__text">\n              This is an introduction text. The length is circa two sentences. The suitable total length of the title\n              and introduction is around 230 characters, including spaces. The intro ends with a period.\n            </p>\n            <button\n              type="button"\n              class="hds-button hds-button--secondary hds-button--theme-black black-button"\n              role="link"\n            >\n              <span class="hds-button__label">Call to action</span>\n            </button>\n          </div>\n          <div class="hds-hero--with-background__empty-column"></div>\n        </div>\n      </div>\n      <div class="hds-hero--diagonal-koros__koros-aligner">\n        <div class="hds-hero--diagonal-koros__koros-and-background">\n          <div class="hds-hero__koros-container">\n            <div class="hds-koros" style="fill: var(--koros-color);">\n              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85">\n                <defs>\n                  <pattern id="koros_basic-5" x="0" y="0" width="106" height="85" patternUnits="userSpaceOnUse">\n                    <path transform="scale(5.3)" d="M0,800h20V0c-4.9,0-5,2.6-9.9,2.6S5,0,0,0V800z"></path>\n                  </pattern>\n                </defs>\n                <rect fill="url(#koros_basic-5)" width="100%" height="85"></rect>\n              </svg>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class="hds-hero--with-background__background">\n        <img class="hds-hero__image" src="https://hds.hel.fi/images/homepage/amos58.jpg" aria-hidden="true" alt="" />\n      </div>\n    </div>\n  </div>\n</div>\n'))),"\n",n.createElement(o.h3,{id:"packages",style:{position:"relative"}},"Packages",n.createElement(o.a,{href:"#packages","aria-label":"packages permalink",className:"header-anchor after"},n.createElement(o.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(o.table,null,n.createElement(o.thead,null,n.createElement(o.tr,null,n.createElement(o.th,null,"Package"),n.createElement(o.th,null,"Included"),n.createElement(o.th,null,"Storybook link"),n.createElement(o.th,null,"Source link"))),n.createElement(o.tbody,null,n.createElement(o.tr,null,n.createElement(o.td,null,n.createElement(o.strong,null,"HDS React")),n.createElement(o.td,null,n.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},n.createElement(s)," Yes ")),n.createElement(o.td,null,n.createElement(i,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=?path=/story/components-hero--diagonal-koros"},"View in Storybook")),n.createElement(o.td,null,n.createElement(c,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/blob/master/packages/react/src/components/hero/Hero.tsx"},"View source"))),n.createElement(o.tr,null,n.createElement(o.td,null,n.createElement(o.strong,null,"HDS Core")),n.createElement(o.td,null,n.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},n.createElement(s)," Yes ")),n.createElement(o.td,null,n.createElement(i,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/core/?path=/story/components-hero--diagonal-koros"},"View in Storybook")),n.createElement(o.td,null,n.createElement(c,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/core/src/components/hero"},"View source"))))),"\n",n.createElement(o.h3,{id:"properties",style:{position:"relative"}},"Properties",n.createElement(o.a,{href:"#properties","aria-label":"properties permalink",className:"header-anchor after"},n.createElement(o.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(o.p,null,"Note! You can find the full list of properties in the ",n.createElement(i,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-hero--diagonal-koros"},"React Storybook.")),"\n",n.createElement(o.table,null,n.createElement(o.thead,null,n.createElement(o.tr,null,n.createElement(o.th,null,"Property"),n.createElement(o.th,null,"Description"),n.createElement(o.th,null,"Values"),n.createElement(o.th,null,"Default value"))),n.createElement(o.tbody,null,n.createElement(o.tr,null,n.createElement(o.td,null,n.createElement(o.code,null,"theme")),n.createElement(o.td,null,"Theme prop for customisation of the Hero component."),n.createElement(o.td,null,n.createElement(o.code,null,"object")),n.createElement(o.td,null,n.createElement(i,{href:"/components/hero/customisation"},"See customisation"))),n.createElement(o.tr,null,n.createElement(o.td,null,n.createElement(o.code,null,"koros")),n.createElement(o.td,null,"Koros prop for customisation of the Koros of the Hero component."),n.createElement(o.td,null,n.createElement(o.code,null,"object")),n.createElement(o.td,null,n.createElement(i,{href:"/components/koros/customisation"},"See koros"))),n.createElement(o.tr,null,n.createElement(o.td,null,n.createElement(o.code,null,"imageSrc")),n.createElement(o.td,null,"Url of the image"),n.createElement(o.td,null,n.createElement(o.code,null,"string")),n.createElement(o.td,null,"-")),n.createElement(o.tr,null,n.createElement(o.td,null,n.createElement(o.code,null,"centerContent")),n.createElement(o.td,null,"Should the text be aligned to center"),n.createElement(o.td,null,n.createElement(o.code,null,"boolean")),n.createElement(o.td,null,"false")),n.createElement(o.tr,null,n.createElement(o.td,null,n.createElement(o.code,null,"variant")),n.createElement(o.td,null,"Which variant to render. The default value is ",n.createElement(o.code,null,"noImage")," if ",n.createElement(o.code,null,"imageSrc")," is not set. Otherwise default is ",n.createElement(o.code,null,"imageLeft")),n.createElement(o.td,null,n.createElement(o.code,null,"imageLeft, imageRight, backgroundImage, imageBottom,diagonalKoros, noImage")),n.createElement(o.td,null,n.createElement(o.code,null,"noImage")," or ",n.createElement(o.code,null,"imageLeft"))))))}function d(e,o){throw new Error("Expected "+(o?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}o.default=function(e){return void 0===e&&(e={}),n.createElement(i,e,n.createElement(c,e))}},10857:function(e,o,t){t.r(o);var a=t(11151),n=t(67294),r=t(83428),l=t(89482),s=(t(18607),t(26127)),i=t(57674);function c(e){const o=Object.assign({h1:"h1",a:"a",span:"span"},(0,a.ah)(),e.components);return s.Z||d("PageTabs",!1),s.Z.Tab||d("PageTabs.Tab",!0),s.Z.TabList||d("PageTabs.TabList",!0),s.Z.TabPanel||d("PageTabs.TabPanel",!0),n.createElement(n.Fragment,null,n.createElement(o.h1,{id:"hero",style:{position:"relative"}},"Hero",n.createElement(o.a,{href:"#hero","aria-label":"hero permalink",className:"header-anchor after"},n.createElement(o.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement("div",{className:"status-label-description"},n.createElement(r.S,{variant:"rounded",type:"info"},"Stable"),n.createElement(r.S,{variant:"rounded",type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),n.createElement(i.Z)),"\n",n.createElement(l.Z,null,"Hero elements are used below the main navigation as the first content element. They can be used for different purposes, but most often, they shortly describe the page's role and offer the page's essential function as a call-to-action button."),"\n",n.createElement(s.Z,{pageContext:e.pageContext},n.createElement(s.Z.TabList,null,n.createElement(s.Z.Tab,{href:"/"},"Usage"),n.createElement(s.Z.Tab,{href:"/code"},"Code"),n.createElement(s.Z.Tab,{href:"/accessibility"},"Accessibility"),n.createElement(s.Z.Tab,{href:"/customisation"},"Customisation")),n.createElement(s.Z.TabPanel,null,e.children)))}function d(e,o){throw new Error("Expected "+(o?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}o.default=function(e){void 0===e&&(e={});const{wrapper:o}=Object.assign({},(0,a.ah)(),e.components);return o?n.createElement(o,e,n.createElement(c,e)):c(e)}},89482:function(e,o,t){var a=t(67294);o.Z=e=>{let{color:o="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:n={},children:r}=e;return a.createElement("p",{style:{fontSize:t,color:o,maxWidth:600,...n}},r)}},26127:function(e,o,t){var a=t(67294),n=t(14160),r=t(94671);const l="PageTabList",s="PageTabPanel",i="PageTab",c=e=>{var o;let{pageContext:t,children:c}=e;const d=t.frontmatter.slug,h=Array.isArray(c)?c:[c],_=h.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===l)),m=h.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===s)),u=null===(o=_.props)||void 0===o?void 0:o.children.filter((e=>e.type.componentName===i)),g=u.findIndex((e=>d.endsWith(e.props.href))),p=-1===g?0:g,b=0===p?d:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(d);return a.createElement(r.a,{initiallyActiveTab:p},a.createElement(r.a.TabList,{className:"page-tabs-list"},u.map((e=>a.createElement(r.a.Tab,{key:e.props.href,onClick:()=>(0,n.navigate)(""+("/"===e.props.href?b:b+e.props.href))},e.props.children)))),u.map(((e,o)=>a.createElement(r.a.TabPanel,{key:e.props.href},p===o?m.props.children:a.createElement("div",null)))))},d=e=>{let{children:o}=e;return a.createElement(r.a.TabList,null,o)};d.componentName=l;const h=e=>{let{href:o,slug:t,children:n}=e;return a.createElement(r.a.Tab,null,n)};h.componentName=i;const _=e=>{let{children:o}=e;return a.createElement(r.a.TabPanel,null,o)};_.componentName=s,c.TabList=d,c.Tab=h,c.TabPanel=_,o.Z=c},57674:function(e,o,t){var a=t(67294),n=t(45422);o.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return a.createElement(n.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},a.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((o=>a.createElement("li",{key:o},a.createElement("span",{className:"status-name"},o),a.createElement("span",null,e[o]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-hero-customisation-mdx-570db8e0c8d7e0d9a63a.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-hero-customisation-mdx-570db8e0c8d7e0d9a63a.js
new file mode 100644
index 00000000000..13cc9e3a34d
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-hero-customisation-mdx-570db8e0c8d7e0d9a63a.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[750,9598],{46790:function(e,o,t){t.d(o,{H:function(){return d}});var a=t(80136),n=t(67294),r=t(7444),l=t(34300),s=t(97640),i=t(55810),c={"large-up":"only screen and (min-width:992px)",hero:"Hero-module_hero__1VoHZ hero_hds-hero__2NmPy",title:"Hero-module_title__3-FB4 hero_hds-hero__title__3Ue67",text:"Hero-module_text__ZzYyT hero_hds-hero__text__3K95k",container:"Hero-module_container__3HfYy hero_hds-hero__container__1Di91",content:"Hero-module_content__3qNYZ hero_hds-hero__content__1Gtc5",singleColumn:"Hero-module_singleColumn__b0Sxw hero_hds-hero__content--single-column__iqfBL",twoColumns:"Hero-module_twoColumns__3wl_x hero_hds-hero__content--two-columns__3Q1x5",twoColumnsImageContainer:"Hero-module_twoColumnsImageContainer__3jDE3 hero_hds-hero__content--two-columns__image-container__2CX-9",card:"Hero-module_card__JuJeG hero_hds-hero__card__3TyQe",centeredContent:"Hero-module_centeredContent__1VnN1 hero_hds-hero__card--centered-content__3HHG6",image:"Hero-module_image__VwcrU hero_hds-hero__image__ZfJbX",imageBelowKoros:"Hero-module_imageBelowKoros__30i8S hero_hds-hero__image-below-koros__1LSUL",withBackgroundContainer:"Hero-module_withBackgroundContainer__2jIxP hero_hds-hero--with-background__container__1jpi7",withBackgroundBackground:"Hero-module_withBackgroundBackground__Hv69M hero_hds-hero--with-background__background__JEVuN",backgroundImage:"Hero-module_backgroundImage__dSqiQ hero_hds-hero--background-image__2Wse1",backgroundImageKoros:"Hero-module_backgroundImageKoros__1yXtL hero_hds-hero--background-image__koros__2nudG",diagonalKoros:"Hero-module_diagonalKoros__Yj-M5 hero_hds-hero--diagonal-koros__1gvD8",diagonalKorosWithBackgroundContainer:"Hero-module_diagonalKorosWithBackgroundContainer__79wsC hero_hds-hero--diagonal-koros__1gvD8 hero_hds-hero--with-background__container__1jpi7",diagonalKorosAndBackground:"Hero-module_diagonalKorosAndBackground__1rGzm hero_hds-hero--diagonal-koros__koros-and-background__1U31N",contentColums:"Hero-module_contentColums__2GK_9 hero_hds-hero--with-background__content-columns__1NT1u",emptyColumn:"Hero-module_emptyColumn__3_c4m hero_hds-hero--with-background__empty-column__21yM0",imageLeft:"Hero-module_imageLeft__1QAb_ hero_hds-hero--image-left__11ngD",imageRight:"Hero-module_imageRight__CJzYp hero_hds-hero--image-right__3r8N5",korosContainer:"Hero-module_korosContainer__2UG8F hero_hds-hero__koros-container__2Ab9n",korosContainerInwardKoros:"Hero-module_korosContainerInwardKoros__L0Vt_ hero_hds-hero__koros-container--inward-koros__3hMd7",korosContainerOverflowBottom:"Hero-module_korosContainerOverflowBottom__2aHz0 hero_hds-hero__koros-container--overflow-bottom__1sOA8",korosAndImageContainer:"Hero-module_korosAndImageContainer__Phyhg hero_hds-hero__koros-and-image-container__2-9vj",korosAligner:"Hero-module_korosAligner__2Y1UK hero_hds-hero--diagonal-koros__koros-aligner__80AA4"};(0,r.s)('.hero_hds-hero__2NmPy{--background-color:var(--color-white);--color:var(--color-black-90);--image-position:bottom right;--koros-color:var(--color-white);--koros-height:85px;--diagonal-koros-position:45%;--horizontal-padding-small:var(--spacing-layout-2-xs);--horizontal-padding-medium:var(--spacing-layout-xs);--horizontal-padding-large:var(--spacing-layout-xs);--horizontal-padding-x-large:var(--spacing-layout-xs);--padding-horizontal:var(--horizontal-padding-small);--padding-vertical:var(--spacing-xl);background-color:var(--background-color);color:var(--color);display:flex;flex-direction:column;position:relative;z-index:1}.hero_hds-hero__title__3Ue67{font-size:var(--fontsize-heading-xl);font-weight:400;letter-spacing:-1px;line-height:1em;margin-top:0}.hero_hds-hero__text__3K95k{font-size:var(--fontsize-body-l)}.hero_hds-hero__container__1Di91{margin-left:auto;margin-right:auto;max-width:var(--container-width-xl)}.hero_hds-hero__content__1Gtc5{display:flex;padding:var(--padding-vertical) var(--padding-horizontal)}.hero_hds-hero__content--single-column__iqfBL,.hero_hds-hero__content--two-columns__3Q1x5{display:flex;flex-direction:column}.hero_hds-hero__content--two-columns__3Q1x5{align-items:center}.hero_hds-hero__content--two-columns__image-container__2CX-9{display:none}.hero_hds-hero__card__3TyQe{display:block;max-width:var(--container-width-xl)}.hero_hds-hero__koros-container--inward-koros__3hMd7,.hero_hds-hero__koros-container--overflow-bottom__1sOA8,.hero_hds-hero__koros-container__2Ab9n{height:var(--koros-height);top:0;right:0;bottom:0;left:0;overflow:hidden;position:absolute;z-index:1}.hero_hds-hero__koros-container--inward-koros__3hMd7{position:relative}.hero_hds-hero__koros-container--overflow-bottom__1sOA8{bottom:calc(-1 * var(--koros-height));display:flex;flex-direction:column;justify-content:flex-end;top:auto}.hero_hds-hero__koros-container__2Ab9n>div{bottom:0;height:100%;position:absolute;width:100%}.hero_hds-hero__card--centered-content__3HHG6{text-align:center;width:100%}.hero_hds-hero__image__ZfJbX{display:block;width:100%}.hero_hds-hero__koros-and-image-container__2-9vj{display:block;position:relative}.hero_hds-hero__image-below-koros__1LSUL{display:block}.hero_hds-hero__image-below-koros__1LSUL .hero_hds-hero__image__ZfJbX{height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:var(--image-position);object-position:var(--image-position)}.hero_hds-hero--with-background__container__1jpi7{position:relative}.hero_hds-hero--with-background__background__JEVuN{position:relative;width:100%}.hero_hds-hero--with-background__background__JEVuN .hero_hds-hero__image__ZfJbX{height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:var(--image-position);object-position:var(--image-position)}.hero_hds-hero--with-background__content-columns__1NT1u{display:flex;margin:0 auto;max-width:var(--container-width-xl)}.hero_hds-hero--with-background__empty-column__21yM0{display:none}.hero_hds-hero--background-image__2Wse1 .hero_hds-hero__content__1Gtc5{padding:0}.hero_hds-hero--background-image__2Wse1 .hero_hds-hero__card__3TyQe{background-color:var(--background-color);padding:var(--padding-vertical) var(--padding-horizontal)}.hero_hds-hero--background-image__koros__2nudG{bottom:0;height:var(--koros-height);overflow:hidden;position:absolute;width:100%;--koros-color:var(--top-koros-color)}.hero_hds-hero--diagonal-koros__1gvD8 .hero_hds-hero--with-background__container__1jpi7{display:flex;flex-direction:column;overflow:hidden;position:relative;z-index:1}.hero_hds-hero--diagonal-koros__1gvD8 .hero_hds-hero__content__1Gtc5{box-sizing:border-box;display:block;padding:0;width:100%;z-index:2}.hero_hds-hero--diagonal-koros__1gvD8 .hero_hds-hero__card__3TyQe{background-color:var(--background-color);padding:var(--padding-vertical) var(--padding-horizontal)}.hero_hds-hero--diagonal-koros__koros-and-background__1U31N{height:var(--koros-height);position:absolute;transform:rotate(180deg);width:100%}.hero_hds-hero--diagonal-koros__koros-aligner__80AA4{position:relative;z-index:1}.hero_hds-hero--diagonal-koros__koros-and-background__1U31N .hero_hds-hero__koros-container__2Ab9n{height:100%;overflow:hidden;position:absolute;top:0;width:100%}.hero_hds-hero--with-background__background__JEVuN,.hero_hds-hero__image-below-koros__1LSUL{height:300px}@media only screen and (min-width:768px){.hero_hds-hero__2NmPy{--padding-horizontal:var(--horizontal-padding-medium);--padding-vertical:var(--spacing-layout-m)}.hero_hds-hero--with-background__background__JEVuN,.hero_hds-hero__image-below-koros__1LSUL{height:400px}}@media only screen and (min-width:992px){.hero_hds-hero__2NmPy{--padding-horizontal:var(--horizontal-padding-large);--padding-vertical:var(--spacing-layout-xl)}.hero_hds-hero__text__3K95k{font-size:var(--fontsize-body-xl)}.hero_hds-hero--image-left__11ngD .hero_hds-hero__image-below-koros__1LSUL,.hero_hds-hero--image-right__3r8N5 .hero_hds-hero__image-below-koros__1LSUL{display:none}.hero_hds-hero__content--two-columns__3Q1x5{flex-direction:row}.hero_hds-hero__content--two-columns__3Q1x5>*{width:50%}.hero_hds-hero__content--two-columns__3Q1x5>:first-child{margin-right:var(--spacing-xl)}.hero_hds-hero__content--two-columns__3Q1x5>:last-child{margin-left:var(--spacing-xl)}.hero_hds-hero__content--two-columns__image-container__2CX-9{display:block}.hero_hds-hero--background-image__2Wse1 .hero_hds-hero--with-background__container__1jpi7{padding:var(--padding-vertical) var(--padding-horizontal)}.hero_hds-hero--background-image__2Wse1 .hero_hds-hero__content__1Gtc5{--padding-vertical:var(--spacing-2-xl);display:flex;flex-direction:row;margin:0 auto;max-width:var(--container-width-xl)}.hero_hds-hero--background-image__2Wse1 .hero_hds-hero__card__3TyQe{width:50%}.hero_hds-hero--with-background__background__JEVuN{height:auto;top:0;right:0;bottom:0;left:0;position:absolute;width:auto;z-index:-1}.hero_hds-hero--with-background__empty-column__21yM0{display:block;width:45%}.hero_hds-hero--diagonal-koros__1gvD8 .hero_hds-hero__content__1Gtc5{background-color:transparent;padding:var(--padding-vertical) 0}.hero_hds-hero--diagonal-koros__1gvD8 .hero_hds-hero__card__3TyQe{background:none;padding:0 var(--padding-horizontal);width:55%}.hero_hds-hero--diagonal-koros__koros-aligner__80AA4{bottom:0;max-width:var(--container-width-xl);position:absolute;right:var(--diagonal-koros-position);top:0;width:100%;z-index:1}.hero_hds-hero--diagonal-koros__koros-and-background__1U31N{display:block;height:100%;top:0;right:0;bottom:0;left:0;overflow:visible;position:absolute;transform:rotate(135deg);transform-origin:center;width:150%}.hero_hds-hero--diagonal-koros__koros-and-background__1U31N:after{background-color:var(--koros-color);content:"";display:block;height:1500px;left:0;position:absolute;top:50px;width:150%}.hero_hds-hero--diagonal-koros__koros-and-background__1U31N .hero_hds-hero__koros-container__2Ab9n{height:100%;overflow:hidden;position:absolute;top:0;width:100%;z-index:1}.hero_hds-hero--background-image__koros__2nudG{--koros-color:var(--bottom-koros-color)}}@media only screen and (min-width:1248px){.hero_hds-hero__2NmPy{--padding-horizontal:var(--horizontal-padding-x-large)}.hero_hds-hero__title__3Ue67{font-size:var(--fontsize-heading-xxl);letter-spacing:-1.2px}.hero_hds-hero--diagonal-koros__1gvD8 .hero_hds-hero__text__3K95k{padding-right:var(--spacing-l)}.hero_hds-hero__content--two-columns__3Q1x5>:first-child{margin-right:var(--spacing-2-xl)}.hero_hds-hero__content--two-columns__3Q1x5>:last-child{margin-left:var(--spacing-2-xl)}}');const d=e=>{var{children:o,variant:t,imageSrc:r,centeredContent:d,theme:h,koros:_}=e,m=(0,a._)(e,["children","variant","imageSrc","centeredContent","theme","koros"]);const u=Object.assign({},h);if(u["--koros-color"]||(u["--koros-color"]="var(--background-color)"),"backgroundImage"===t&&(u["--top-koros-color"]="var(--background-color)",u["--bottom-koros-color"]="var(--koros-color)"),!u["--koros-height"]){const e=(0,i.g)(_||{});e&&(u["--koros-height"]=e+"px")}const g=t||(r?"imageLeft":"noImage"),p=(0,s.u)(c.hero,u),b=Object.assign(Object.assign({},_),{style:{fill:"var(--koros-color)"}}),k=Object.assign(Object.assign({},m),{className:(0,l.c)(c.hero,p,c[g],m.className)}),v=()=>n.createElement("img",{className:c.image,src:r,"aria-hidden":!0,alt:""}),f=e=>n.createElement("div",{className:(0,l.c)(c.withBackgroundBackground,e&&e.className)},n.createElement(v,null)),E=()=>n.createElement("div",{key:"imageContainer-"+g,className:c.twoColumnsImageContainer},n.createElement(v,null)),w=()=>{const e=d?(0,l.c)(c.card,c.centeredContent):(0,l.c)(c.card);return n.createElement("div",{className:e},o)},y=e=>{const{inward:o,containerClassName:t,style:r}=e,l=(0,a._)(e,["inward","containerClassName","style"]),s=t||(!0!==o?c.korosContainer:c.korosContainerInwardKoros);return n.createElement("div",{className:s},n.createElement(i.K,Object.assign({},Object.assign(Object.assign({},l),{style:r,shift:!1,compact:!1}))))};if("backgroundImage"===g)return n.createElement("div",Object.assign({},k),n.createElement("div",{className:c.withBackgroundContainer},n.createElement("div",{className:(0,l.c)(c.withBackgroundBackground)},n.createElement(v,null),n.createElement(y,Object.assign({},b,{containerClassName:c.backgroundImageKoros}))),n.createElement("div",{className:(0,l.c)(c.content)},n.createElement(w,null),n.createElement("div",{className:c.emptyColumn}))));if("diagonalKoros"===g)return n.createElement("div",Object.assign({},k),n.createElement("div",{className:c.diagonalKorosWithBackgroundContainer},n.createElement("div",{className:c.content},n.createElement("div",{className:c.contentColums},n.createElement(w,null),n.createElement("div",{className:c.emptyColumn}))),n.createElement("div",{className:c.korosAligner},n.createElement("div",{className:c.diagonalKorosAndBackground},n.createElement(y,Object.assign({},b)))),n.createElement(f,{className:c.diagonalKorosBackgroundContainer})));const x=!!(null==_?void 0:_.hide),N=null==_?void 0:_.flipVertical,C=!!r&&"noImage"!==g,T=C&&"imageBottom"!==g?c.twoColumns:c.singleColumn;return n.createElement("div",Object.assign({},k),n.createElement("div",{className:c.container},n.createElement("div",{key:"content",className:(0,l.c)(c.content,T)},C&&"imageLeft"===g&&n.createElement(E,null),n.createElement(w,null),C&&"imageRight"===g&&n.createElement(E,null))),!C&&!x&&n.createElement(y,Object.assign({},b,{inward:!N,flipVertical:N,containerClassName:N?c.korosContainerOverflowBottom:void 0})),C&&n.createElement("div",{key:"korosAndImageContainer",className:(0,l.c)(c.korosAndImageContainer)},n.createElement(y,Object.assign({},b,{flipVertical:!1!==N})),n.createElement("div",{key:"imageContainer",className:(0,l.c)(c.imageBelowKoros)},n.createElement(v,null))))};d.Title=e=>{const{headingLevel:o=1,className:t,children:r}=e,s=(0,a._)(e,["headingLevel","className","children"]),i=(0,l.c)(c.title,t),d="h"+o;return n.createElement(d,Object.assign({},s,{className:i}),r)},d.Text=e=>{const{className:o,children:t}=e,r=(0,a._)(e,["className","children"]),s=(0,l.c)(c.text,o);return n.createElement("p",Object.assign({},r,{className:s}),t)}},83428:function(e,o,t){t.d(o,{S:function(){return c}});var a=t(80136),n=t(67294),r=t(7444),l=t(34300),s={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,r.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const i=e=>{let{icon:o}=e;return n.createElement("span",{className:s.statusLabelIcon,"aria-hidden":"true"},o)},c=e=>{var{children:o,className:t,dataTestId:r,type:c="neutral",iconLeft:d}=e,h=(0,a._)(e,["children","className","dataTestId","type","iconLeft"]);return n.createElement("span",Object.assign({className:(0,l.c)(s.statusLabel,s[c],d&&s.statusLabelWithIcon,t),"data-testid":r},h),d&&n.createElement(i,{icon:d}),o)}},26436:function(e,o,t){t.r(o);var a=t(11151),n=t(67294),r=t(46790),l=t(17882),s=t(10857);const i=e=>{let{children:o,pageContext:t}=e;return n.createElement(s.default,{pageContext:t},o)};function c(e){const o=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",p:"p",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",pre:"pre"},(0,a.ah)(),e.components),{Link:t,Playground:s}=o;return t||d("Link",!0),s||d("Playground",!0),n.createElement(n.Fragment,null,n.createElement(o.h2,{id:"customisation",style:{position:"relative"}},"Customisation",n.createElement(o.a,{href:"#customisation","aria-label":"customisation permalink",className:"header-anchor after"},n.createElement(o.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(o.h3,{id:"customisation-properties",style:{position:"relative"}},"Customisation properties",n.createElement(o.a,{href:"#customisation-properties","aria-label":"customisation properties permalink",className:"header-anchor after"},n.createElement(o.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(o.p,null,"In Core version, you can either use the ",n.createElement(o.code,null,"style")," or ",n.createElement(o.code,null,"class")," attributes in the HTML to customise the component."),"\n",n.createElement(o.p,null,"In React version, you can use the ",n.createElement(o.code,null,"theme")," property to customise the component."),"\n",n.createElement(o.p,null,"See all available theme variables in the table below."),"\n",n.createElement(o.table,null,n.createElement(o.thead,null,n.createElement(o.tr,null,n.createElement(o.th,null,"Theme variable"),n.createElement(o.th,null,"Description"))),n.createElement(o.tbody,null,n.createElement(o.tr,null,n.createElement(o.td,null,n.createElement(o.code,null,"--background-color")),n.createElement(o.td,null,"Background color. Default is ",n.createElement(o.code,null,"--color-white"))),n.createElement(o.tr,null,n.createElement(o.td,null,n.createElement(o.code,null,"--color")),n.createElement(o.td,null,"Text color. Default is ",n.createElement(o.code,null,"--color-black-90"))),n.createElement(o.tr,null,n.createElement(o.td,null,n.createElement(o.code,null,"--image-position")),n.createElement(o.td,null,"How image is aligned if it does not fit the container. Default is ",n.createElement(o.code,null,"bottom right"))),n.createElement(o.tr,null,n.createElement(o.td,null,n.createElement(o.code,null,"--koros-color")),n.createElement(o.td,null,"Color of the koros. Defaults to ",n.createElement(o.code,null,"--background-color"))),n.createElement(o.tr,null,n.createElement(o.td,null,n.createElement(o.code,null,"--koros-height")),n.createElement(o.td,null,"Height of the koros. In React this defaults to the height of the koros shape")),n.createElement(o.tr,null,n.createElement(o.td,null,n.createElement(o.code,null,"--diagonal-koros-position")),n.createElement(o.td,null,"How is angled koros positioned. This is applied to the css property ",n.createElement(o.code,null,"right"),".Default is ",n.createElement(o.code,null,"right: 45%"),".")),n.createElement(o.tr,null,n.createElement(o.td,null,n.createElement(o.code,null,"--horizontal-padding-small")),n.createElement(o.td,null,"Horizontal padding on small screens (< 768px). Default is ",n.createElement(o.code,null,"--spacing-layout-2-xs"))),n.createElement(o.tr,null,n.createElement(o.td,null,n.createElement(o.code,null,"--horizontal-padding-medium")),n.createElement(o.td,null,"Horizontal padding on medium screens (>=768px). Default is ",n.createElement(o.code,null,"--spacing-layout-xs"))),n.createElement(o.tr,null,n.createElement(o.td,null,n.createElement(o.code,null,"--horizontal-padding-large")),n.createElement(o.td,null,"Horizontal padding on large screens (>= 992px). Default is ",n.createElement(o.code,null,"--spacing-layout-xs"))),n.createElement(o.tr,null,n.createElement(o.td,null,n.createElement(o.code,null,"--horizontal-padding-x-large")),n.createElement(o.td,null,"Horizontal padding on xtra large screens (>= 1248px). Default is ",n.createElement(o.code,null,"--spacing-layout-xs"))))),"\n",n.createElement(o.p,null,"In React version, you can use the ",n.createElement(o.code,null,"koros")," property to customise the Koros component."),"\n",n.createElement(o.p,null,"You can use the same properties as the ",n.createElement(t,{href:"/components/koros/customisation"},"Koros component")," and also an additional property ",n.createElement(o.code,null,"hide"),"."),"\n",n.createElement(o.table,null,n.createElement(o.thead,null,n.createElement(o.tr,null,n.createElement(o.th,null,"Koros property"),n.createElement(o.th,null,"Description"))),n.createElement(o.tbody,null,n.createElement(o.tr,null,n.createElement(o.td,null,n.createElement(o.code,null,"hide")),n.createElement(o.td,null,"If set to ",n.createElement(o.code,null,"true"),", koros is not shown")))),"\n",n.createElement(o.h3,{id:"customisation-example",style:{position:"relative"}},"Customisation example",n.createElement(o.a,{href:"#customisation-example","aria-label":"customisation example permalink",className:"header-anchor after"},n.createElement(o.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(s,{scope:{Hero:r.H,Button:l.B}},n.createElement(o.pre,null,n.createElement(o.code,{className:"language-jsx"},"import { Hero } from 'hds-react';\n\n() => (\n<Hero\n  imageSrc=\"https://hds.hel.fi/images/homepage/amos58.jpg\"\n  variant=\"imageBottom\"\n  theme={{\n    '--background-color': '#fff',\n  }}\n  koros={{ style: 'pulse', dense: true }}\n>\n  <Hero.Title>Hero title</Hero.Title>\n  <Hero.Text>\n    This is an introduction text. The length is circa two sentences. The suitable total length of the title and\n    introduction is around 230 characters, including spaces. The intro ends with a period.\n  </Hero.Text>\n  <Button\n    variant=\"secondary\"\n    role=\"link\"\n    style={{ '--background-color': '#000', '--color': '#fff', '--border-color': '#000' }}\n  >\n    Call to action\n  </Button>\n</Hero>)\n")),n.createElement(o.pre,null,n.createElement(o.code,{className:"language-html"},'<style scoped>\n  .custom-theme {\n    --koros-height: 5px;\n  }\n  .black-button.black-button {\n    --background-color: #000;\n    --color: #fff;\n    --border-color: #000;\n  }\n</style>\n<div class="hds-hero hds-hero--image-bottom custom-theme">\n  <div class="hds-hero__container">\n    <div class="hds-hero__content hds-hero__content--single-column">\n      <div class="hds-hero__card">\n        <h1 class="hds-hero__title">Hero title</h1>\n        <p class="hds-hero__text">\n          This is an introduction text. The length is circa two sentences. The suitable total length of the title and\n          introduction is around 230 characters, including spaces. The intro ends with a period.\n        </p>\n        <button type="button" class="hds-button hds-button--secondary hds-button--theme-black black-button" role="link">\n          <span class="hds-button__label">Call to action</span>\n        </button>\n      </div>\n    </div>\n  </div>\n  <div class="hds-hero__koros-and-image-container">\n    <div class="hds-hero__koros-container">\n      <div class="hds-koros" style="fill: var(--koros-color); transform: scaleY(-1);">\n        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85">\n          <defs>\n            <pattern id="koros_basic-1" x="0" y="0" width="35" height="85" patternUnits="userSpaceOnUse">\n              <path transform="scale(1.8)" d="M0,800h20V0c-4.9,0-5,2.6-9.9,2.6S5,0,0,0V800z"></path>\n            </pattern>\n          </defs>\n          <rect fill="url(#koros_basic-1)" width="100%" height="85"></rect>\n        </svg>\n      </div>\n    </div>\n    <div class="hds-hero__image-below-koros">\n      <img class="hds-hero__image" src="https://hds.hel.fi/images/homepage/amos58.jpg" aria-hidden="true" alt="" />\n    </div>\n  </div>\n</div>\n'))))}function d(e,o){throw new Error("Expected "+(o?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}o.default=function(e){return void 0===e&&(e={}),n.createElement(i,e,n.createElement(c,e))}},10857:function(e,o,t){t.r(o);var a=t(11151),n=t(67294),r=t(83428),l=t(89482),s=(t(18607),t(26127)),i=t(57674);function c(e){const o=Object.assign({h1:"h1",a:"a",span:"span"},(0,a.ah)(),e.components);return s.Z||d("PageTabs",!1),s.Z.Tab||d("PageTabs.Tab",!0),s.Z.TabList||d("PageTabs.TabList",!0),s.Z.TabPanel||d("PageTabs.TabPanel",!0),n.createElement(n.Fragment,null,n.createElement(o.h1,{id:"hero",style:{position:"relative"}},"Hero",n.createElement(o.a,{href:"#hero","aria-label":"hero permalink",className:"header-anchor after"},n.createElement(o.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement("div",{className:"status-label-description"},n.createElement(r.S,{variant:"rounded",type:"info"},"Stable"),n.createElement(r.S,{variant:"rounded",type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),n.createElement(i.Z)),"\n",n.createElement(l.Z,null,"Hero elements are used below the main navigation as the first content element. They can be used for different purposes, but most often, they shortly describe the page's role and offer the page's essential function as a call-to-action button."),"\n",n.createElement(s.Z,{pageContext:e.pageContext},n.createElement(s.Z.TabList,null,n.createElement(s.Z.Tab,{href:"/"},"Usage"),n.createElement(s.Z.Tab,{href:"/code"},"Code"),n.createElement(s.Z.Tab,{href:"/accessibility"},"Accessibility"),n.createElement(s.Z.Tab,{href:"/customisation"},"Customisation")),n.createElement(s.Z.TabPanel,null,e.children)))}function d(e,o){throw new Error("Expected "+(o?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}o.default=function(e){void 0===e&&(e={});const{wrapper:o}=Object.assign({},(0,a.ah)(),e.components);return o?n.createElement(o,e,n.createElement(c,e)):c(e)}},89482:function(e,o,t){var a=t(67294);o.Z=e=>{let{color:o="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:n={},children:r}=e;return a.createElement("p",{style:{fontSize:t,color:o,maxWidth:600,...n}},r)}},26127:function(e,o,t){var a=t(67294),n=t(14160),r=t(94671);const l="PageTabList",s="PageTabPanel",i="PageTab",c=e=>{var o;let{pageContext:t,children:c}=e;const d=t.frontmatter.slug,h=Array.isArray(c)?c:[c],_=h.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===l)),m=h.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===s)),u=null===(o=_.props)||void 0===o?void 0:o.children.filter((e=>e.type.componentName===i)),g=u.findIndex((e=>d.endsWith(e.props.href))),p=-1===g?0:g,b=0===p?d:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(d);return a.createElement(r.a,{initiallyActiveTab:p},a.createElement(r.a.TabList,{className:"page-tabs-list"},u.map((e=>a.createElement(r.a.Tab,{key:e.props.href,onClick:()=>(0,n.navigate)(""+("/"===e.props.href?b:b+e.props.href))},e.props.children)))),u.map(((e,o)=>a.createElement(r.a.TabPanel,{key:e.props.href},p===o?m.props.children:a.createElement("div",null)))))},d=e=>{let{children:o}=e;return a.createElement(r.a.TabList,null,o)};d.componentName=l;const h=e=>{let{href:o,slug:t,children:n}=e;return a.createElement(r.a.Tab,null,n)};h.componentName=i;const _=e=>{let{children:o}=e;return a.createElement(r.a.TabPanel,null,o)};_.componentName=s,c.TabList=d,c.Tab=h,c.TabPanel=_,o.Z=c},57674:function(e,o,t){var a=t(67294),n=t(45422);o.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return a.createElement(n.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},a.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((o=>a.createElement("li",{key:o},a.createElement("span",{className:"status-name"},o),a.createElement("span",null,e[o]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-hero-index-mdx-0a1c95c57d7ddbbc7ea4.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-hero-index-mdx-0a1c95c57d7ddbbc7ea4.js
new file mode 100644
index 00000000000..20c2a7f5e5c
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-hero-index-mdx-0a1c95c57d7ddbbc7ea4.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[4365,9598],{46790:function(e,o,t){t.d(o,{H:function(){return h}});var a=t(80136),n=t(67294),r=t(7444),l=t(34300),i=t(97640),s=t(55810),c={"large-up":"only screen and (min-width:992px)",hero:"Hero-module_hero__1VoHZ hero_hds-hero__2NmPy",title:"Hero-module_title__3-FB4 hero_hds-hero__title__3Ue67",text:"Hero-module_text__ZzYyT hero_hds-hero__text__3K95k",container:"Hero-module_container__3HfYy hero_hds-hero__container__1Di91",content:"Hero-module_content__3qNYZ hero_hds-hero__content__1Gtc5",singleColumn:"Hero-module_singleColumn__b0Sxw hero_hds-hero__content--single-column__iqfBL",twoColumns:"Hero-module_twoColumns__3wl_x hero_hds-hero__content--two-columns__3Q1x5",twoColumnsImageContainer:"Hero-module_twoColumnsImageContainer__3jDE3 hero_hds-hero__content--two-columns__image-container__2CX-9",card:"Hero-module_card__JuJeG hero_hds-hero__card__3TyQe",centeredContent:"Hero-module_centeredContent__1VnN1 hero_hds-hero__card--centered-content__3HHG6",image:"Hero-module_image__VwcrU hero_hds-hero__image__ZfJbX",imageBelowKoros:"Hero-module_imageBelowKoros__30i8S hero_hds-hero__image-below-koros__1LSUL",withBackgroundContainer:"Hero-module_withBackgroundContainer__2jIxP hero_hds-hero--with-background__container__1jpi7",withBackgroundBackground:"Hero-module_withBackgroundBackground__Hv69M hero_hds-hero--with-background__background__JEVuN",backgroundImage:"Hero-module_backgroundImage__dSqiQ hero_hds-hero--background-image__2Wse1",backgroundImageKoros:"Hero-module_backgroundImageKoros__1yXtL hero_hds-hero--background-image__koros__2nudG",diagonalKoros:"Hero-module_diagonalKoros__Yj-M5 hero_hds-hero--diagonal-koros__1gvD8",diagonalKorosWithBackgroundContainer:"Hero-module_diagonalKorosWithBackgroundContainer__79wsC hero_hds-hero--diagonal-koros__1gvD8 hero_hds-hero--with-background__container__1jpi7",diagonalKorosAndBackground:"Hero-module_diagonalKorosAndBackground__1rGzm hero_hds-hero--diagonal-koros__koros-and-background__1U31N",contentColums:"Hero-module_contentColums__2GK_9 hero_hds-hero--with-background__content-columns__1NT1u",emptyColumn:"Hero-module_emptyColumn__3_c4m hero_hds-hero--with-background__empty-column__21yM0",imageLeft:"Hero-module_imageLeft__1QAb_ hero_hds-hero--image-left__11ngD",imageRight:"Hero-module_imageRight__CJzYp hero_hds-hero--image-right__3r8N5",korosContainer:"Hero-module_korosContainer__2UG8F hero_hds-hero__koros-container__2Ab9n",korosContainerInwardKoros:"Hero-module_korosContainerInwardKoros__L0Vt_ hero_hds-hero__koros-container--inward-koros__3hMd7",korosContainerOverflowBottom:"Hero-module_korosContainerOverflowBottom__2aHz0 hero_hds-hero__koros-container--overflow-bottom__1sOA8",korosAndImageContainer:"Hero-module_korosAndImageContainer__Phyhg hero_hds-hero__koros-and-image-container__2-9vj",korosAligner:"Hero-module_korosAligner__2Y1UK hero_hds-hero--diagonal-koros__koros-aligner__80AA4"};(0,r.s)('.hero_hds-hero__2NmPy{--background-color:var(--color-white);--color:var(--color-black-90);--image-position:bottom right;--koros-color:var(--color-white);--koros-height:85px;--diagonal-koros-position:45%;--horizontal-padding-small:var(--spacing-layout-2-xs);--horizontal-padding-medium:var(--spacing-layout-xs);--horizontal-padding-large:var(--spacing-layout-xs);--horizontal-padding-x-large:var(--spacing-layout-xs);--padding-horizontal:var(--horizontal-padding-small);--padding-vertical:var(--spacing-xl);background-color:var(--background-color);color:var(--color);display:flex;flex-direction:column;position:relative;z-index:1}.hero_hds-hero__title__3Ue67{font-size:var(--fontsize-heading-xl);font-weight:400;letter-spacing:-1px;line-height:1em;margin-top:0}.hero_hds-hero__text__3K95k{font-size:var(--fontsize-body-l)}.hero_hds-hero__container__1Di91{margin-left:auto;margin-right:auto;max-width:var(--container-width-xl)}.hero_hds-hero__content__1Gtc5{display:flex;padding:var(--padding-vertical) var(--padding-horizontal)}.hero_hds-hero__content--single-column__iqfBL,.hero_hds-hero__content--two-columns__3Q1x5{display:flex;flex-direction:column}.hero_hds-hero__content--two-columns__3Q1x5{align-items:center}.hero_hds-hero__content--two-columns__image-container__2CX-9{display:none}.hero_hds-hero__card__3TyQe{display:block;max-width:var(--container-width-xl)}.hero_hds-hero__koros-container--inward-koros__3hMd7,.hero_hds-hero__koros-container--overflow-bottom__1sOA8,.hero_hds-hero__koros-container__2Ab9n{height:var(--koros-height);top:0;right:0;bottom:0;left:0;overflow:hidden;position:absolute;z-index:1}.hero_hds-hero__koros-container--inward-koros__3hMd7{position:relative}.hero_hds-hero__koros-container--overflow-bottom__1sOA8{bottom:calc(-1 * var(--koros-height));display:flex;flex-direction:column;justify-content:flex-end;top:auto}.hero_hds-hero__koros-container__2Ab9n>div{bottom:0;height:100%;position:absolute;width:100%}.hero_hds-hero__card--centered-content__3HHG6{text-align:center;width:100%}.hero_hds-hero__image__ZfJbX{display:block;width:100%}.hero_hds-hero__koros-and-image-container__2-9vj{display:block;position:relative}.hero_hds-hero__image-below-koros__1LSUL{display:block}.hero_hds-hero__image-below-koros__1LSUL .hero_hds-hero__image__ZfJbX{height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:var(--image-position);object-position:var(--image-position)}.hero_hds-hero--with-background__container__1jpi7{position:relative}.hero_hds-hero--with-background__background__JEVuN{position:relative;width:100%}.hero_hds-hero--with-background__background__JEVuN .hero_hds-hero__image__ZfJbX{height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:var(--image-position);object-position:var(--image-position)}.hero_hds-hero--with-background__content-columns__1NT1u{display:flex;margin:0 auto;max-width:var(--container-width-xl)}.hero_hds-hero--with-background__empty-column__21yM0{display:none}.hero_hds-hero--background-image__2Wse1 .hero_hds-hero__content__1Gtc5{padding:0}.hero_hds-hero--background-image__2Wse1 .hero_hds-hero__card__3TyQe{background-color:var(--background-color);padding:var(--padding-vertical) var(--padding-horizontal)}.hero_hds-hero--background-image__koros__2nudG{bottom:0;height:var(--koros-height);overflow:hidden;position:absolute;width:100%;--koros-color:var(--top-koros-color)}.hero_hds-hero--diagonal-koros__1gvD8 .hero_hds-hero--with-background__container__1jpi7{display:flex;flex-direction:column;overflow:hidden;position:relative;z-index:1}.hero_hds-hero--diagonal-koros__1gvD8 .hero_hds-hero__content__1Gtc5{box-sizing:border-box;display:block;padding:0;width:100%;z-index:2}.hero_hds-hero--diagonal-koros__1gvD8 .hero_hds-hero__card__3TyQe{background-color:var(--background-color);padding:var(--padding-vertical) var(--padding-horizontal)}.hero_hds-hero--diagonal-koros__koros-and-background__1U31N{height:var(--koros-height);position:absolute;transform:rotate(180deg);width:100%}.hero_hds-hero--diagonal-koros__koros-aligner__80AA4{position:relative;z-index:1}.hero_hds-hero--diagonal-koros__koros-and-background__1U31N .hero_hds-hero__koros-container__2Ab9n{height:100%;overflow:hidden;position:absolute;top:0;width:100%}.hero_hds-hero--with-background__background__JEVuN,.hero_hds-hero__image-below-koros__1LSUL{height:300px}@media only screen and (min-width:768px){.hero_hds-hero__2NmPy{--padding-horizontal:var(--horizontal-padding-medium);--padding-vertical:var(--spacing-layout-m)}.hero_hds-hero--with-background__background__JEVuN,.hero_hds-hero__image-below-koros__1LSUL{height:400px}}@media only screen and (min-width:992px){.hero_hds-hero__2NmPy{--padding-horizontal:var(--horizontal-padding-large);--padding-vertical:var(--spacing-layout-xl)}.hero_hds-hero__text__3K95k{font-size:var(--fontsize-body-xl)}.hero_hds-hero--image-left__11ngD .hero_hds-hero__image-below-koros__1LSUL,.hero_hds-hero--image-right__3r8N5 .hero_hds-hero__image-below-koros__1LSUL{display:none}.hero_hds-hero__content--two-columns__3Q1x5{flex-direction:row}.hero_hds-hero__content--two-columns__3Q1x5>*{width:50%}.hero_hds-hero__content--two-columns__3Q1x5>:first-child{margin-right:var(--spacing-xl)}.hero_hds-hero__content--two-columns__3Q1x5>:last-child{margin-left:var(--spacing-xl)}.hero_hds-hero__content--two-columns__image-container__2CX-9{display:block}.hero_hds-hero--background-image__2Wse1 .hero_hds-hero--with-background__container__1jpi7{padding:var(--padding-vertical) var(--padding-horizontal)}.hero_hds-hero--background-image__2Wse1 .hero_hds-hero__content__1Gtc5{--padding-vertical:var(--spacing-2-xl);display:flex;flex-direction:row;margin:0 auto;max-width:var(--container-width-xl)}.hero_hds-hero--background-image__2Wse1 .hero_hds-hero__card__3TyQe{width:50%}.hero_hds-hero--with-background__background__JEVuN{height:auto;top:0;right:0;bottom:0;left:0;position:absolute;width:auto;z-index:-1}.hero_hds-hero--with-background__empty-column__21yM0{display:block;width:45%}.hero_hds-hero--diagonal-koros__1gvD8 .hero_hds-hero__content__1Gtc5{background-color:transparent;padding:var(--padding-vertical) 0}.hero_hds-hero--diagonal-koros__1gvD8 .hero_hds-hero__card__3TyQe{background:none;padding:0 var(--padding-horizontal);width:55%}.hero_hds-hero--diagonal-koros__koros-aligner__80AA4{bottom:0;max-width:var(--container-width-xl);position:absolute;right:var(--diagonal-koros-position);top:0;width:100%;z-index:1}.hero_hds-hero--diagonal-koros__koros-and-background__1U31N{display:block;height:100%;top:0;right:0;bottom:0;left:0;overflow:visible;position:absolute;transform:rotate(135deg);transform-origin:center;width:150%}.hero_hds-hero--diagonal-koros__koros-and-background__1U31N:after{background-color:var(--koros-color);content:"";display:block;height:1500px;left:0;position:absolute;top:50px;width:150%}.hero_hds-hero--diagonal-koros__koros-and-background__1U31N .hero_hds-hero__koros-container__2Ab9n{height:100%;overflow:hidden;position:absolute;top:0;width:100%;z-index:1}.hero_hds-hero--background-image__koros__2nudG{--koros-color:var(--bottom-koros-color)}}@media only screen and (min-width:1248px){.hero_hds-hero__2NmPy{--padding-horizontal:var(--horizontal-padding-x-large)}.hero_hds-hero__title__3Ue67{font-size:var(--fontsize-heading-xxl);letter-spacing:-1.2px}.hero_hds-hero--diagonal-koros__1gvD8 .hero_hds-hero__text__3K95k{padding-right:var(--spacing-l)}.hero_hds-hero__content--two-columns__3Q1x5>:first-child{margin-right:var(--spacing-2-xl)}.hero_hds-hero__content--two-columns__3Q1x5>:last-child{margin-left:var(--spacing-2-xl)}}');const h=e=>{var{children:o,variant:t,imageSrc:r,centeredContent:h,theme:d,koros:_}=e,m=(0,a._)(e,["children","variant","imageSrc","centeredContent","theme","koros"]);const u=Object.assign({},d);if(u["--koros-color"]||(u["--koros-color"]="var(--background-color)"),"backgroundImage"===t&&(u["--top-koros-color"]="var(--background-color)",u["--bottom-koros-color"]="var(--koros-color)"),!u["--koros-height"]){const e=(0,s.g)(_||{});e&&(u["--koros-height"]=e+"px")}const g=t||(r?"imageLeft":"noImage"),p=(0,i.u)(c.hero,u),b=Object.assign(Object.assign({},_),{style:{fill:"var(--koros-color)"}}),k=Object.assign(Object.assign({},m),{className:(0,l.c)(c.hero,p,c[g],m.className)}),v=()=>n.createElement("img",{className:c.image,src:r,"aria-hidden":!0,alt:""}),f=e=>n.createElement("div",{className:(0,l.c)(c.withBackgroundBackground,e&&e.className)},n.createElement(v,null)),E=()=>n.createElement("div",{key:"imageContainer-"+g,className:c.twoColumnsImageContainer},n.createElement(v,null)),w=()=>{const e=h?(0,l.c)(c.card,c.centeredContent):(0,l.c)(c.card);return n.createElement("div",{className:e},o)},y=e=>{const{inward:o,containerClassName:t,style:r}=e,l=(0,a._)(e,["inward","containerClassName","style"]),i=t||(!0!==o?c.korosContainer:c.korosContainerInwardKoros);return n.createElement("div",{className:i},n.createElement(s.K,Object.assign({},Object.assign(Object.assign({},l),{style:r,shift:!1,compact:!1}))))};if("backgroundImage"===g)return n.createElement("div",Object.assign({},k),n.createElement("div",{className:c.withBackgroundContainer},n.createElement("div",{className:(0,l.c)(c.withBackgroundBackground)},n.createElement(v,null),n.createElement(y,Object.assign({},b,{containerClassName:c.backgroundImageKoros}))),n.createElement("div",{className:(0,l.c)(c.content)},n.createElement(w,null),n.createElement("div",{className:c.emptyColumn}))));if("diagonalKoros"===g)return n.createElement("div",Object.assign({},k),n.createElement("div",{className:c.diagonalKorosWithBackgroundContainer},n.createElement("div",{className:c.content},n.createElement("div",{className:c.contentColums},n.createElement(w,null),n.createElement("div",{className:c.emptyColumn}))),n.createElement("div",{className:c.korosAligner},n.createElement("div",{className:c.diagonalKorosAndBackground},n.createElement(y,Object.assign({},b)))),n.createElement(f,{className:c.diagonalKorosBackgroundContainer})));const x=!!(null==_?void 0:_.hide),T=null==_?void 0:_.flipVertical,H=!!r&&"noImage"!==g,N=H&&"imageBottom"!==g?c.twoColumns:c.singleColumn;return n.createElement("div",Object.assign({},k),n.createElement("div",{className:c.container},n.createElement("div",{key:"content",className:(0,l.c)(c.content,N)},H&&"imageLeft"===g&&n.createElement(E,null),n.createElement(w,null),H&&"imageRight"===g&&n.createElement(E,null))),!H&&!x&&n.createElement(y,Object.assign({},b,{inward:!T,flipVertical:T,containerClassName:T?c.korosContainerOverflowBottom:void 0})),H&&n.createElement("div",{key:"korosAndImageContainer",className:(0,l.c)(c.korosAndImageContainer)},n.createElement(y,Object.assign({},b,{flipVertical:!1!==T})),n.createElement("div",{key:"imageContainer",className:(0,l.c)(c.imageBelowKoros)},n.createElement(v,null))))};h.Title=e=>{const{headingLevel:o=1,className:t,children:r}=e,i=(0,a._)(e,["headingLevel","className","children"]),s=(0,l.c)(c.title,t),h="h"+o;return n.createElement(h,Object.assign({},i,{className:s}),r)},h.Text=e=>{const{className:o,children:t}=e,r=(0,a._)(e,["className","children"]),i=(0,l.c)(c.text,o);return n.createElement("p",Object.assign({},r,{className:i}),t)}},83428:function(e,o,t){t.d(o,{S:function(){return c}});var a=t(80136),n=t(67294),r=t(7444),l=t(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,r.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const s=e=>{let{icon:o}=e;return n.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},o)},c=e=>{var{children:o,className:t,dataTestId:r,type:c="neutral",iconLeft:h}=e,d=(0,a._)(e,["children","className","dataTestId","type","iconLeft"]);return n.createElement("span",Object.assign({className:(0,l.c)(i.statusLabel,i[c],h&&i.statusLabelWithIcon,t),"data-testid":r},d),h&&n.createElement(s,{icon:h}),o)}},56097:function(e,o,t){t.r(o);var a=t(11151),n=t(67294),r=t(46790),l=t(17882),i=t(10857);const s=e=>{let{children:o,pageContext:t}=e;return n.createElement(i.default,{pageContext:t},o)};function c(e){const o=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",p:"p",ul:"ul",li:"li",strong:"strong",h4:"h4",code:"code"},(0,a.ah)(),e.components),{PlaygroundPreview:t,InternalLink:i}=o;return r.H||h("Hero",!1),r.H.Text||h("Hero.Text",!0),r.H.Title||h("Hero.Title",!0),i||h("InternalLink",!0),t||h("PlaygroundPreview",!0),n.createElement(n.Fragment,null,n.createElement(o.h2,{id:"usage",style:{position:"relative"}},"Usage",n.createElement(o.a,{href:"#usage","aria-label":"usage permalink",className:"header-anchor after"},n.createElement(o.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(o.h3,{id:"example",style:{position:"relative"}},"Example",n.createElement(o.a,{href:"#example","aria-label":"example permalink",className:"header-anchor after"},n.createElement(o.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t,null,n.createElement(r.H,{theme:{"--background-color":"var(--color-bus)","--color":"#fff","--koros-color":"var(--color-bus)"},koros:{type:"pulse",flipVertical:!0}},n.createElement(r.H.Title,null,"Hero without an image"),n.createElement(r.H.Text,null,"This is an introduction text. The length is circa two sentences. The suitable total length of the title and introduction is around 230 characters, including spaces. The intro ends with a period."),n.createElement(l.B,{variant:"secondary",role:"link",style:{"--background-color":"#fff","--color":"var(--color-bus)","--border-color":"#fff"}},n.createElement(o.p,null,"Call to action")))),"\n",n.createElement(o.h3,{id:"principles",style:{position:"relative"}},"Principles",n.createElement(o.a,{href:"#principles","aria-label":"principles permalink",className:"header-anchor after"},n.createElement(o.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(o.ul,null,"\n",n.createElement(o.li,null,"Hero is primarily intended only for landing pages."),"\n",n.createElement(o.li,null,"Hero is highly recommended to be ",n.createElement(o.strong,null,"the first element below the main navigation"),"."),"\n"),"\n",n.createElement(o.h4,{id:"use-the-hero-component-when-you-want-to",style:{position:"relative"}},"Use the Hero component when you want to:",n.createElement(o.a,{href:"#use-the-hero-component-when-you-want-to","aria-label":"use the hero component when you want to permalink",className:"header-anchor after"},n.createElement(o.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(o.ul,null,"\n",n.createElement(o.li,null,"Lead the user quickly to the actual content of the service or page."),"\n",n.createElement(o.li,null,"To make a visual impact."),"\n",n.createElement(o.li,null,"Add emotion to the look and feel of the page."),"\n"),"\n",n.createElement(o.h4,{id:"functionalities",style:{position:"relative"}},"Functionalities",n.createElement(o.a,{href:"#functionalities","aria-label":"functionalities permalink",className:"header-anchor after"},n.createElement(o.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(o.ul,null,"\n",n.createElement(o.li,null,n.createElement(o.strong,null,"Image:")," There are both with-image and without-an-image options for Hero. Ensure the image adapts to various screen sizes to prevent clipping, especially with faces in the picture. On desktop, it's on the sides, while on mobile, it's below. Validate this for all screen sizes."),"\n",n.createElement(o.li,null,n.createElement(o.strong,null,"Colour:")," The background colour is recommended to be the primary colour of the colour palette selected for the site."),"\n",n.createElement(o.li,null,n.createElement(o.strong,null,"Koro shapes:")," Choose from six koro shapes (basic, beat, calm, pulse, vibration, and wave), which can be positioned at the bottom or over the Hero image at a 45-degree angle. To learn more about Koro shapes and their customization, refer to ",n.createElement(i,{href:"/components/koros"},"HDS Koros documentation"),"."),"\n",n.createElement(o.li,null,n.createElement(o.strong,null,"Title and introduction (required):")," The suitable total length of the title and introduction is circa 230 characters, including spaces. The intro ends with a period."),"\n",n.createElement(o.li,null,n.createElement(o.strong,null,"CTA:")," Buttons can also be added to the Hero component, and it is recommended to include, e.g. the most critical link of the page in the Hero component, if one is known. By default, use a button with a background colour (primary button style). On dark background colours, secondary button style can be used."),"\n"),"\n",n.createElement(o.h3,{id:"react-subcomponents",style:{position:"relative"}},"React subcomponents",n.createElement(o.a,{href:"#react-subcomponents","aria-label":"react subcomponents permalink",className:"header-anchor after"},n.createElement(o.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(o.p,null,"Hero has two subcomponents: ",n.createElement(o.code,null,"Hero.Title")," and ",n.createElement(o.code,null,"Hero.Text")),"\n",n.createElement(o.h4,{id:"herotitle",style:{position:"relative"}},"Hero.Title",n.createElement(o.a,{href:"#herotitle","aria-label":"herotitle permalink",className:"header-anchor after"},n.createElement(o.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(o.p,null,n.createElement(o.code,null,"Hero.Title")," is rendered as a ",n.createElement(o.code,null,"<h1>"),". If hero is not the first element with a heading, then the heading level should be changed. The level can be set with the ",n.createElement(o.code,null,"headingLevel")," property of the ",n.createElement(o.code,null,"Hero.Title")),"\n",n.createElement(o.h4,{id:"herotext",style:{position:"relative"}},"Hero.Text",n.createElement(o.a,{href:"#herotext","aria-label":"herotext permalink",className:"header-anchor after"},n.createElement(o.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(o.p,null,n.createElement(o.code,null,"Hero.Text")," is rendered as a ",n.createElement(o.code,null,"<p>"),"."),"\n",n.createElement(o.h3,{id:"variations",style:{position:"relative"}},"Variations",n.createElement(o.a,{href:"#variations","aria-label":"variations permalink",className:"header-anchor after"},n.createElement(o.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(o.h4,{id:"image-left-or-right",style:{position:"relative"}},"Image left or right",n.createElement(o.a,{href:"#image-left-or-right","aria-label":"image left or right permalink",className:"header-anchor after"},n.createElement(o.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(o.p,null,"Use when you want to support the title's message with an image. Don't use an image just for illustrative purposes."),"\n",n.createElement(t,null,n.createElement(r.H,{imageSrc:"https://hds.hel.fi/images/homepage/amos58.jpg",variant:"imageRight",theme:{"--background-color":"#c2a251","--color":"#000"}},n.createElement(r.H.Title,null,"Hero image on the right"),n.createElement(r.H.Text,null,n.createElement(o.p,null,"This is an introduction text. The length is circa two sentences. The suitable total length of the title and introduction is around 230 characters, including spaces. The intro ends with a period.")),n.createElement(l.B,{variant:"secondary",role:"link",style:{"--background-color":"#000","--color":"#fff","--border-color":"#000"}},n.createElement(o.p,null,"Call to action")))),"\n",n.createElement(o.h4,{id:"image-as-a-background",style:{position:"relative"}},"Image as a background",n.createElement(o.a,{href:"#image-as-a-background","aria-label":"image as a background permalink",className:"header-anchor after"},n.createElement(o.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(o.p,null,"Use when you want to fill the background area with an image. Use an image that works when the title and intro container covers part of the image."),"\n",n.createElement(t,{style:{backgroundColor:"var(--color-black-5)"}},n.createElement(r.H,{imageSrc:"https://hds.hel.fi/images/homepage/amos58.jpg",variant:"backgroundImage",theme:{"--background-color":"#fff"}},n.createElement(r.H.Title,null,"Hero image as a background"),n.createElement(r.H.Text,null,n.createElement(o.p,null,"This is an introduction text. The length is circa two sentences. The suitable total length of the title and introduction is around 230 characters, including spaces. The intro ends with a period.")),n.createElement(l.B,{variant:"secondary",role:"link",style:{"--background-color":"#000","--color":"#fff","--border-color":"#000"}},n.createElement(o.p,null,"Call to action")))),"\n",n.createElement(o.h4,{id:"diagonal-koro-shape-and-image-as-a-background",style:{position:"relative"}},"Diagonal koro shape and image as a background",n.createElement(o.a,{href:"#diagonal-koro-shape-and-image-as-a-background","aria-label":"diagonal koro shape and image as a background permalink",className:"header-anchor after"},n.createElement(o.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(o.p,null,"Use when you want to create a dynamic Hero layout on your page. Ensure the image adapts to various screen sizes to prevent clipping, especially with faces in the picture. On desktop, it's on the sides, while on mobile, it's below. Validate this for all screen sizes."),"\n",n.createElement(t,{style:{backgroundColor:"var(--color-black-5)"}},n.createElement(r.H,{imageSrc:"https://hds.hel.fi/images/homepage/amos58.jpg",variant:"diagonalKoros",theme:{"--background-color":"var(--color-suomenlinna)","--color":"#000","--diagonal-koros-position":"43%"}},n.createElement(r.H.Title,null,"Hero with a diagonal koro shape"),n.createElement(r.H.Text,null,n.createElement(o.p,null,"This is an introduction text. The length is circa two sentences. The suitable total length of the title and introduction is around 230 characters, including spaces. The intro ends with a period.")),n.createElement(l.B,{variant:"secondary",role:"link",style:{"--background-color":"#000","--color":"#fff","--border-color":"#000"}},n.createElement(o.p,null,"Call to action")))),"\n",n.createElement(o.h4,{id:"wide-bottom-image",style:{position:"relative"}},"Wide bottom image",n.createElement(o.a,{href:"#wide-bottom-image","aria-label":"wide bottom image permalink",className:"header-anchor after"},n.createElement(o.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(o.p,null,"Use when you want to emphasize the title and introduction text content over the image. Ensure the image adapts to various screen sizes to prevent clipping, especially with faces in the picture. On desktop, it's on the right side, while on mobile, it's below. Validate this for all screen sizes."),"\n",n.createElement(t,{style:{backgroundColor:"var(--color-black-5)"}},n.createElement(r.H,{imageSrc:"https://hds.hel.fi/images/homepage/amos58.jpg",variant:"imageBottom",theme:{"--background-color":"#fff"}},n.createElement(r.H.Title,null,"Hero image below the title"),n.createElement(r.H.Text,null,n.createElement(o.p,null,"This is an introduction text. The length is circa two sentences. The suitable total length of the title and introduction is around 230 characters, including spaces. The intro ends with a period.")),n.createElement(l.B,{variant:"secondary",role:"link",style:{"--background-color":"#000","--color":"#fff","--border-color":"#000"}},n.createElement(o.p,null,"Call to action")))),"\n",n.createElement(o.h4,{id:"no-image",style:{position:"relative"}},"No image",n.createElement(o.a,{href:"#no-image","aria-label":"no image permalink",className:"header-anchor after"},n.createElement(o.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(o.p,null,"Use when you don't have a suitable image to support the title section's message – or in a situation – where you want to emphasize a visual piece of content right after the Hero component."),"\n",n.createElement(t,{style:{backgroundColor:"var(--color-black-5)"}},n.createElement(r.H,{theme:{"--background-color":"#9fc9eb","--color":"#000","--koros-color":"#009246","--koros-height":"82px"},koros:{type:"pulse"}},n.createElement(r.H.Title,null,"Hero without an image"),n.createElement(r.H.Text,null,"This is an introduction text. The length is circa two sentences. The suitable total length of the title and introduction is around 230 characters, including spaces. The intro ends with a period."),n.createElement(l.B,{variant:"secondary",role:"link",style:{"--background-color":"#000","--color":"#fff","--border-color":"#000"}},n.createElement(o.p,null,"Call to action")))))}function h(e,o){throw new Error("Expected "+(o?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}o.default=function(e){return void 0===e&&(e={}),n.createElement(s,e,n.createElement(c,e))}},10857:function(e,o,t){t.r(o);var a=t(11151),n=t(67294),r=t(83428),l=t(89482),i=(t(18607),t(26127)),s=t(57674);function c(e){const o=Object.assign({h1:"h1",a:"a",span:"span"},(0,a.ah)(),e.components);return i.Z||h("PageTabs",!1),i.Z.Tab||h("PageTabs.Tab",!0),i.Z.TabList||h("PageTabs.TabList",!0),i.Z.TabPanel||h("PageTabs.TabPanel",!0),n.createElement(n.Fragment,null,n.createElement(o.h1,{id:"hero",style:{position:"relative"}},"Hero",n.createElement(o.a,{href:"#hero","aria-label":"hero permalink",className:"header-anchor after"},n.createElement(o.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement("div",{className:"status-label-description"},n.createElement(r.S,{variant:"rounded",type:"info"},"Stable"),n.createElement(r.S,{variant:"rounded",type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),n.createElement(s.Z)),"\n",n.createElement(l.Z,null,"Hero elements are used below the main navigation as the first content element. They can be used for different purposes, but most often, they shortly describe the page's role and offer the page's essential function as a call-to-action button."),"\n",n.createElement(i.Z,{pageContext:e.pageContext},n.createElement(i.Z.TabList,null,n.createElement(i.Z.Tab,{href:"/"},"Usage"),n.createElement(i.Z.Tab,{href:"/code"},"Code"),n.createElement(i.Z.Tab,{href:"/accessibility"},"Accessibility"),n.createElement(i.Z.Tab,{href:"/customisation"},"Customisation")),n.createElement(i.Z.TabPanel,null,e.children)))}function h(e,o){throw new Error("Expected "+(o?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}o.default=function(e){void 0===e&&(e={});const{wrapper:o}=Object.assign({},(0,a.ah)(),e.components);return o?n.createElement(o,e,n.createElement(c,e)):c(e)}},89482:function(e,o,t){var a=t(67294);o.Z=e=>{let{color:o="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:n={},children:r}=e;return a.createElement("p",{style:{fontSize:t,color:o,maxWidth:600,...n}},r)}},26127:function(e,o,t){var a=t(67294),n=t(14160),r=t(94671);const l="PageTabList",i="PageTabPanel",s="PageTab",c=e=>{var o;let{pageContext:t,children:c}=e;const h=t.frontmatter.slug,d=Array.isArray(c)?c:[c],_=d.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===l)),m=d.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===i)),u=null===(o=_.props)||void 0===o?void 0:o.children.filter((e=>e.type.componentName===s)),g=u.findIndex((e=>h.endsWith(e.props.href))),p=-1===g?0:g,b=0===p?h:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(h);return a.createElement(r.a,{initiallyActiveTab:p},a.createElement(r.a.TabList,{className:"page-tabs-list"},u.map((e=>a.createElement(r.a.Tab,{key:e.props.href,onClick:()=>(0,n.navigate)(""+("/"===e.props.href?b:b+e.props.href))},e.props.children)))),u.map(((e,o)=>a.createElement(r.a.TabPanel,{key:e.props.href},p===o?m.props.children:a.createElement("div",null)))))},h=e=>{let{children:o}=e;return a.createElement(r.a.TabList,null,o)};h.componentName=l;const d=e=>{let{href:o,slug:t,children:n}=e;return a.createElement(r.a.Tab,null,n)};d.componentName=s;const _=e=>{let{children:o}=e;return a.createElement(r.a.TabPanel,null,o)};_.componentName=i,c.TabList=h,c.Tab=d,c.TabPanel=_,o.Z=c},57674:function(e,o,t){var a=t(67294),n=t(45422);o.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return a.createElement(n.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},a.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((o=>a.createElement("li",{key:o},a.createElement("span",{className:"status-name"},o),a.createElement("span",null,e[o]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-hero-tabs-mdx-e2e494c73555e7efb725.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-hero-tabs-mdx-e2e494c73555e7efb725.js
new file mode 100644
index 00000000000..d3419a51ae8
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-hero-tabs-mdx-e2e494c73555e7efb725.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[9598],{83428:function(e,t,a){a.d(t,{S:function(){return i}});var s=a(80136),l=a(67294),n=a(7444),r=a(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const c=e=>{let{icon:t}=e;return l.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},t)},i=e=>{var{children:t,className:a,dataTestId:n,type:i="neutral",iconLeft:u}=e,b=(0,s._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(o.statusLabel,o[i],u&&o.statusLabelWithIcon,a),"data-testid":n},b),u&&l.createElement(c,{icon:u}),t)}},10857:function(e,t,a){a.r(t);var s=a(11151),l=a(67294),n=a(83428),r=a(89482),o=(a(18607),a(26127)),c=a(57674);function i(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,s.ah)(),e.components);return o.Z||u("PageTabs",!1),o.Z.Tab||u("PageTabs.Tab",!0),o.Z.TabList||u("PageTabs.TabList",!0),o.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"hero",style:{position:"relative"}},"Hero",l.createElement(t.a,{href:"#hero","aria-label":"hero permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{className:"status-label-description"},l.createElement(n.S,{variant:"rounded",type:"info"},"Stable"),l.createElement(n.S,{variant:"rounded",type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(c.Z)),"\n",l.createElement(r.Z,null,"Hero elements are used below the main navigation as the first content element. They can be used for different purposes, but most often, they shortly describe the page's role and offer the page's essential function as a call-to-action button."),"\n",l.createElement(o.Z,{pageContext:e.pageContext},l.createElement(o.Z.TabList,null,l.createElement(o.Z.Tab,{href:"/"},"Usage"),l.createElement(o.Z.Tab,{href:"/code"},"Code"),l.createElement(o.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(o.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(o.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,s.ah)(),e.components);return t?l.createElement(t,e,l.createElement(i,e)):i(e)}},89482:function(e,t,a){var s=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:l={},children:n}=e;return s.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...l}},n)}},26127:function(e,t,a){var s=a(67294),l=a(14160),n=a(94671);const r="PageTabList",o="PageTabPanel",c="PageTab",i=e=>{var t;let{pageContext:a,children:i}=e;const u=a.frontmatter.slug,b=Array.isArray(i)?i:[i],d=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===r)),m=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===o)),h=null===(t=d.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===c)),p=h.findIndex((e=>u.endsWith(e.props.href))),_=-1===p?0:p,f=0===_?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return s.createElement(n.a,{initiallyActiveTab:_},s.createElement(n.a.TabList,{className:"page-tabs-list"},h.map((e=>s.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),h.map(((e,t)=>s.createElement(n.a.TabPanel,{key:e.props.href},_===t?m.props.children:s.createElement("div",null)))))},u=e=>{let{children:t}=e;return s.createElement(n.a.TabList,null,t)};u.componentName=r;const b=e=>{let{href:t,slug:a,children:l}=e;return s.createElement(n.a.Tab,null,l)};b.componentName=c;const d=e=>{let{children:t}=e;return s.createElement(n.a.TabPanel,null,t)};d.componentName=o,i.TabList=u,i.Tab=b,i.TabPanel=d,t.Z=i},57674:function(e,t,a){var s=a(67294),l=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return s.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},s.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>s.createElement("li",{key:t},s.createElement("span",{className:"status-name"},t),s.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-highlight-accessibility-mdx-25792d7ec08a56555a5c.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-highlight-accessibility-mdx-25792d7ec08a56555a5c.js
new file mode 100644
index 00000000000..75282878cfd
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-highlight-accessibility-mdx-25792d7ec08a56555a5c.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[9153,7553],{83428:function(e,t,a){a.d(t,{S:function(){return o}});var l=a(80136),s=a(67294),n=a(7444),r=a(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const c=e=>{let{icon:t}=e;return s.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},t)},o=e=>{var{children:t,className:a,dataTestId:n,type:o="neutral",iconLeft:u}=e,h=(0,l._)(e,["children","className","dataTestId","type","iconLeft"]);return s.createElement("span",Object.assign({className:(0,r.c)(i.statusLabel,i[o],u&&i.statusLabelWithIcon,a),"data-testid":n},h),u&&s.createElement(c,{icon:u}),t)}},56474:function(e,t,a){a.r(t);var l=a(11151),s=a(67294),n=(a(80699),a(90560));const r=e=>{let{children:t,pageContext:a}=e;return s.createElement(n.default,{pageContext:a},t)};function i(e){const t=Object.assign({h2:"h2",a:"a",span:"span",ul:"ul",li:"li"},(0,l.ah)(),e.components);return s.createElement(s.Fragment,null,s.createElement(t.h2,{id:"accessibility",style:{position:"relative"}},"Accessibility",s.createElement(t.a,{href:"#accessibility","aria-label":"accessibility permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.ul,null,"\n",s.createElement(t.li,null,"Both the Quote and Highlight elements are non-interactable and therefore do not have any special keyboard functionality."),"\n"))}t.default=function(e){return void 0===e&&(e={}),s.createElement(r,e,s.createElement(i,e))}},90560:function(e,t,a){a.r(t);var l=a(11151),s=a(67294),n=a(83428),r=a(57674),i=a(89482),c=(a(18607),a(26127));function o(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,l.ah)(),e.components);return c.Z||u("PageTabs",!1),c.Z.Tab||u("PageTabs.Tab",!0),c.Z.TabList||u("PageTabs.TabList",!0),c.Z.TabPanel||u("PageTabs.TabPanel",!0),s.createElement(s.Fragment,null,s.createElement(t.h1,{id:"highlight",style:{position:"relative"}},"Highlight",s.createElement(t.a,{href:"#highlight","aria-label":"highlight permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement("div",{className:"status-label-description"},s.createElement(n.S,{type:"alert",variant:"rounded"},"Beta"),s.createElement(n.S,{variant:"rounded",type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),s.createElement(r.Z)),"\n",s.createElement(i.Z,null,"Highlight component allows lifting an excerpt from a longer text for emphasis. Highlight supports two types: highlight (default) and quotation. The Quote element has a reference to the quote source. The Highlight element is an excerpt from the text without the source information."),"\n",s.createElement(c.Z,{pageContext:e.pageContext},s.createElement(c.Z.TabList,null,s.createElement(c.Z.Tab,{href:"/"},"Usage"),s.createElement(c.Z.Tab,{href:"/code"},"Code"),s.createElement(c.Z.Tab,{href:"/accessibility"},"Accessibility"),s.createElement(c.Z.Tab,{href:"/customisation"},"Customisation")),s.createElement(c.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,l.ah)(),e.components);return t?s.createElement(t,e,s.createElement(o,e)):o(e)}},89482:function(e,t,a){var l=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:s={},children:n}=e;return l.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...s}},n)}},26127:function(e,t,a){var l=a(67294),s=a(14160),n=a(94671);const r="PageTabList",i="PageTabPanel",c="PageTab",o=e=>{var t;let{pageContext:a,children:o}=e;const u=a.frontmatter.slug,h=Array.isArray(o)?o:[o],b=h.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===r)),d=h.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===i)),m=null===(t=b.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===c)),p=m.findIndex((e=>u.endsWith(e.props.href))),g=-1===p?0:p,f=0===g?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return l.createElement(n.a,{initiallyActiveTab:g},l.createElement(n.a.TabList,{className:"page-tabs-list"},m.map((e=>l.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,s.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),m.map(((e,t)=>l.createElement(n.a.TabPanel,{key:e.props.href},g===t?d.props.children:l.createElement("div",null)))))},u=e=>{let{children:t}=e;return l.createElement(n.a.TabList,null,t)};u.componentName=r;const h=e=>{let{href:t,slug:a,children:s}=e;return l.createElement(n.a.Tab,null,s)};h.componentName=c;const b=e=>{let{children:t}=e;return l.createElement(n.a.TabPanel,null,t)};b.componentName=i,o.TabList=u,o.Tab=h,o.TabPanel=b,t.Z=o},57674:function(e,t,a){var l=a(67294),s=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return l.createElement(s.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},l.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>l.createElement("li",{key:t},l.createElement("span",{className:"status-name"},t),l.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-highlight-code-mdx-336b7ef939e4e9856398.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-highlight-code-mdx-336b7ef939e4e9856398.js
new file mode 100644
index 00000000000..e49af9f7810
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-highlight-code-mdx-336b7ef939e4e9856398.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[963,7553],{32454:function(e,t,l){l.d(t,{H:function(){return s}});var a=l(67294),n=l(7444),i=l(34300),o=l(97640);(0,n.s)('/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--breakpoint-xs:320px;--breakpoint-s:576px;--breakpoint-m:768px;--breakpoint-l:992px;--breakpoint-xl:1248px;--container-width-xs:288px;--container-width-s:544px;--container-width-m:720px;--container-width-l:944px;--container-width-xl:1200px;--color-brick:#bd2719;--color-brick-light:#ffeeed;--color-brick-medium-light:#facbc8;--color-brick-dark:#800e04;--color-bus:#0000bf;--color-bus-light:#f0f0ff;--color-bus-medium-light:#ccf;--color-bus-dark:#00005e;--color-coat-of-arms:#0072c6;--color-coat-of-arms-light:#e6f4ff;--color-coat-of-arms-medium-light:#b5daf7;--color-coat-of-arms-dark:#005799;--color-copper:#00d7a7;--color-copper-light:#cffaf1;--color-copper-medium-light:#9ef0de;--color-copper-dark:#00a17d;--color-engel:#ffe977;--color-engel-light:#fff9db;--color-engel-medium-light:#fff3b8;--color-engel-dark:#dbc030;--color-fog:#9fc9eb;--color-fog-light:#e8f3fc;--color-fog-medium-light:#d0e6f7;--color-fog-dark:#72a5cf;--color-gold:#c2a251;--color-gold-light:#f7f2e4;--color-gold-medium-light:#e8d7a7;--color-gold-dark:#9e823c;--color-metro:#fd4f00;--color-metro-light:#ffeee6;--color-metro-medium-light:#ffcab3;--color-metro-dark:#bd2f00;--color-silver:#dedfe1;--color-silver-light:#f7f7f8;--color-silver-medium-light:#efeff0;--color-silver-dark:#b0b8bf;--color-summer:#ffc61e;--color-summer-light:#fff4d4;--color-summer-medium-light:#ffe49c;--color-summer-dark:#cc9200;--color-suomenlinna:#f5a3c7;--color-suomenlinna-light:#fff0f7;--color-suomenlinna-medium-light:#ffdbeb;--color-suomenlinna-dark:#e673a5;--color-tram:#008741;--color-tram-light:#dff7eb;--color-tram-medium-light:#a3e3c2;--color-tram-dark:#006631;--color-focus-outline:#0072c6;--color-black:#000;--color-white:#fff;--color-black-5:#f2f2f2;--color-black-10:#e6e6e6;--color-black-20:#ccc;--color-black-30:#b3b3b3;--color-black-40:#999;--color-black-50:grey;--color-black-60:#666;--color-black-70:#4d4d4d;--color-black-80:#333;--color-black-90:#1a1a1a;--color-error:#b01038;--color-error-light:#f6e2e6;--color-error-dark:#8d0d2d;--color-success:#007a64;--color-success-light:#e2f5f3;--color-success-dark:#006250;--color-alert:#ffda07;--color-alert-light:#fff4b4;--color-alert-dark:#d18200;--color-info:#0062b9;--color-info-light:#e5eff8;--color-info-dark:#004f94;--box-shadow-s:0px 2px 10px 0px rgba(0,0,0,0.07);--box-shadow-m:0px 2px 10px 0px rgba(0,0,0,0.1);--box-shadow-l:0px 2px 20px 0px rgba(0,0,0,0.2);--spacing-layout-2-xs:1rem;--spacing-layout-xs:1.5rem;--spacing-layout-s:2rem;--spacing-layout-m:3rem;--spacing-layout-l:4rem;--spacing-layout-xl:6rem;--spacing-layout-2-xl:8rem;--spacing-4-xs:0.125rem;--spacing-3-xs:0.25rem;--spacing-2-xs:0.5rem;--spacing-xs:0.75rem;--spacing-s:1rem;--spacing-m:1.5rem;--spacing-l:2rem;--spacing-xl:2.5rem;--spacing-2-xl:3.0rem;--spacing-3-xl:3.5rem;--spacing-4-xl:4rem;--spacing-5-xl:4.5rem;--fontsize-heading-xxl:4rem;--fontsize-heading-xl:3rem;--fontsize-heading-xl-mobile:2.5rem;--fontsize-heading-l:2rem;--fontsize-heading-m:1.5rem;--fontsize-heading-s:1.25rem;--fontsize-heading-xs:1.125rem;--fontsize-heading-xxs:1rem;--fontsize-body-s:0.875rem;--fontsize-body-m:1rem;--fontsize-body-l:1.125rem;--fontsize-body-xl:1.25rem;--font-default:HelsinkiGrotesk,Arial,sans-serif;--lineheight-s:1;--lineheight-m:1.2;--lineheight-l:1.5;--lineheight-xl:1.75}@keyframes base-min_fadeIn__1eL7b{0%{opacity:0}to{opacity:1}}.base-min_visually-hidden__2X9es{border:0;clip:"rect(0 0 0 0)";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.base-min_button-reset__1DpKC{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.base-min_text-body__3BoE9{color:var(--color-black-90);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.base-min_text-body__3BoE9,.base-min_text-medium__3mQy-{font-family:var(--font-default)}.base-min_text-medium__3mQy-{font-weight:500}.base-min_text-bold__3vbqu{font-family:var(--font-default);font-weight:700}.base-min_text-xl__otWNO{font-size:var(--fontsize-heading-m)}.base-min_text-lg__23w6P{font-size:var(--fontsize-heading-s)}.base-min_text-md__4FgZi{font-size:var(--fontsize-heading-xs)}.base-min_subtitle__1npRt{font-size:var(--fontsize-body-m)}.base-min_text-sm__1_dmI{font-size:var(--fontsize-body-s);line-height:var(--lineheight-xl)}.base-min_heading-xxl__DU1O5{font-size:var(--fontsize-heading-xxl);letter-spacing:-1.2px}.base-min_heading-xl__2X67k,.base-min_heading-xxl__DU1O5{font-weight:400;line-height:var(--lineheight-s)}.base-min_heading-xl__2X67k{font-size:var(--fontsize-heading-xl);letter-spacing:-1px}.base-min_heading-xl-mobile__wsjuU{font-size:var(--fontsize-heading-xl-mobile);letter-spacing:-.8px}.base-min_heading-l__2jPN5,.base-min_heading-xl-mobile__wsjuU{font-weight:400;line-height:var(--lineheight-s)}.base-min_heading-l__2jPN5{font-size:var(--fontsize-heading-l);letter-spacing:-.4px}.base-min_heading-m__rYAVF{font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-.2px;line-height:32px}.base-min_heading-s__3TqeA{font-size:var(--fontsize-heading-s);font-weight:500;letter-spacing:.2px;line-height:1.4}.base-min_heading-xs__tmFku{font-size:var(--fontsize-heading-xs);line-height:1.33}.base-min_heading-xs__tmFku,.base-min_heading-xxs__3Wb8h{font-weight:700;letter-spacing:.4px}.base-min_heading-xxs__3Wb8h{font-size:var(--fontsize-heading-xxs);line-height:var(--lineheight-l)}.base-min_helper-text__119xK{color:var(--color-black-60);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs)}');var r={highlight:"Highlight-module_highlight__iVprf highlight_hds-highlight___uE3p",highlightBlockquote:"Highlight-module_highlightBlockquote__Bhn4A highlight_hds-blockquote__1QLSQ",text:"Highlight-module_text__2OPbz highlight_hds-highlight__text__31xf_","size-s":"Highlight-module_size-s__AwvVr highlight_hds-highlight--small__11cWK","size-l":"Highlight-module_size-l__3i6ZU highlight_hds-highlight--large__1EjiL",quote:"Highlight-module_quote__elKVW highlight_hds-highlight__quote__3ed0C",reference:"Highlight-module_reference__ICH8J highlight_hds-highlight__reference__3_4ca"};(0,n.s)(".highlight_hds-highlight___uE3p{--accent-line-color:var(--color-bus);--text-color:var(--color-black-90);--size-width-s:264px;--size-width-m:536px;--size-width-l:680px;--width:var(--size-width-m);--margin:var(--spacing-m) 0;border-left:8px solid var(--accent-line-color);color:var(--text-color);display:flex;flex-direction:column;justify-content:center;margin:var(--margin);max-width:100%;padding:0;padding-left:var(--spacing-s);grid-row-gap:var(--spacing-m);row-gap:var(--spacing-m);width:var(--width)}.highlight_hds-blockquote__1QLSQ{margin:0;padding:0}.highlight_hds-highlight__text__31xf_{color:var(--text-color);font-size:var(--fontsize-heading-m);line-height:var(--lineheight-m);margin:0;padding:0}.highlight_hds-highlight--small__11cWK{--margin:var(--spacing-s) 0;--width:var(--size-width-s)}.highlight_hds-highlight--large__1EjiL{--margin:var(--spacing-l) 0;--width:var(--size-width-l)}.highlight_hds-highlight--large__1EjiL .highlight_hds-highlight__text__31xf_{font-size:var(--fontsize-heading-l);line-height:var(--lineheight-l)}.highlight_hds-highlight__quote__3ed0C:after,.highlight_hds-highlight__quote__3ed0C:before{content:'\"';display:inline}.highlight_hds-highlight__reference__3_4ca{font-size:var(--fontsize-heading-xs);line-height:var(--lineheight-m)}");const s=e=>{let{theme:t,size:l,type:n,text:s,reference:h}=e;const c=(0,o.u)(r.highlight,t||{}),g=n&&"quote"===n;return a.createElement("figure",{className:(0,i.c)(r.highlight,l&&r["size-"+l],c)},a.createElement("blockquote",{className:r.highlightBlockquote},a.createElement("p",{className:(0,i.c)(r.text,g&&r.quote)},s)),h&&a.createElement("figcaption",{className:r.reference},"—⁠",h))}},83428:function(e,t,l){l.d(t,{S:function(){return h}});var a=l(80136),n=l(67294),i=l(7444),o=l(34300),r={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,i.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const s=e=>{let{icon:t}=e;return n.createElement("span",{className:r.statusLabelIcon,"aria-hidden":"true"},t)},h=e=>{var{children:t,className:l,dataTestId:i,type:h="neutral",iconLeft:c}=e,g=(0,a._)(e,["children","className","dataTestId","type","iconLeft"]);return n.createElement("span",Object.assign({className:(0,o.c)(r.statusLabel,r[h],c&&r.statusLabelWithIcon,l),"data-testid":i},g),c&&n.createElement(s,{icon:c}),t)}},36811:function(e,t,l){l.r(t);var a=l(11151),n=l(67294),i=l(32454),o=l(21662),r=l(80699),s=l(90560);const h=e=>{let{children:t,pageContext:l}=e;return n.createElement(s.default,{pageContext:l},t)};function c(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",h4:"h4",pre:"pre",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",strong:"strong",p:"p"},(0,a.ah)(),e.components),{Playground:l,IconCheckCircleFill:s}=t;return s||g("IconCheckCircleFill",!0),l||g("Playground",!0),n.createElement(n.Fragment,null,n.createElement(t.h2,{id:"code",style:{position:"relative"}},"Code",n.createElement(t.a,{href:"#code","aria-label":"code permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.h3,{id:"code-examples",style:{position:"relative"}},"Code examples",n.createElement(t.a,{href:"#code-examples","aria-label":"code examples permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.h4,{id:"highlight-and-quote-sizes",style:{position:"relative"}},"Highlight and quote sizes",n.createElement(t.a,{href:"#highlight-and-quote-sizes","aria-label":"highlight and quote sizes permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(l,{scope:{Highlight:i.H}},n.createElement(t.pre,null,n.createElement(t.code,{className:"language-jsx"},'import { Highlight } from \'hds-react\';\n\n() => (\n  <>\n    <Highlight text="You may select an highlight from the article to be displayed here. Select an excerpt that you want the user to pay attention to." size="l"/>\n    <Highlight text="You may select an highlight from the article to be displayed here. Select an excerpt that you want the user to pay attention to."/>\n    <Highlight text="You may select an highlight from the article to be displayed here. Select an excerpt that you want the user to pay attention to." size="s"/>\n    <Highlight text="Add an interesting quote here" size="l" type="quote" reference="First name Last name. Title."/>\n    <Highlight text="Add an interesting quote here" type="quote" reference="First name Last name. Title."/>\n    <Highlight text="Add an interesting quote here" size="s" type="quote" reference="First name Last name. Title."/>\n  </>\n)\n')),n.createElement(t.pre,null,n.createElement(t.code,{className:"language-html"},'  <div>\n    <figure class="hds-highlight hds-highlight--large">\n      <blockquote class="hds-blockquote">\n        <p class="hds-highlight__text">You may select an highlight from the article to be displayed here. Select an excerpt that you want the user to pay attention to.</p>\n      </blockquote>\n    </figure>\n    <figure class="hds-highlight">\n      <blockquote class="hds-blockquote">\n        <p class="hds-highlight__text">You may select an highlight from the article to be displayed here. Select an excerpt that you want the user to pay attention to.</p>\n      </blockquote>\n    </figure>\n    <figure class="hds-highlight hds-highlight--small">\n      <blockquote class="hds-blockquote">\n        <p class="hds-highlight__text">You may select an highlight from the article to be displayed here. Select an excerpt that you want the user to pay attention to.</p>\n      </blockquote>\n    </figure>\n    <figure class="hds-highlight hds-highlight--large">\n      <blockquote class="hds-blockquote">\n        <p class="hds-highlight__text hds-highlight__quote">Add an interesting quote here</p>\n      </blockquote>\n      <figcaption class="hds-highlight__reference">&#8212First name Last name. Title.</figcaption>    \n    </figure>\n    <figure class="hds-highlight">\n      <blockquote class="hds-blockquote">\n        <p class="hds-highlight__text hds-highlight__quote">Add an interesting quote here</p>\n      </blockquote>\n      <figcaption class="hds-highlight__reference">&#8212First name Last name. Title.</figcaption>\n    </figure>\n    <figure class="hds-highlight hds-highlight--small" role="region">\n      <blockquote class="hds-blockquote">\n        <p class="hds-highlight__text hds-highlight--small hds-highlight__quote">Add an interesting quote here</p>\n      </blockquote>\n      <div class="hds-highlight__reference">&#8212First name Last name. Title.</div>\n    </figure>\n  </div>\n'))),"\n",n.createElement(t.h4,{id:"with-custom-accent-line-color",style:{position:"relative"}},"With custom accent line color",n.createElement(t.a,{href:"#with-custom-accent-line-color","aria-label":"with custom accent line color permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(l,{scope:{Highlight:i.H}},n.createElement(t.pre,null,n.createElement(t.code,{className:"language-jsx"},"import { Highlight } from 'hds-react';\n\n() => (\n  <>\n    <Highlight text=\"You may select an highlight from the article to be displayed here. Select an excerpt that you want the user to pay attention to.\" theme={{'--accent-line-color':'#00005e'}}/>\n    <Highlight text=\"Add an interesting quote here\" reference=\"First name Last name. Title.\" type=\"quote\"  theme={{'--accent-line-color':'#00005e'}}/>\n  </>\n)\n")),n.createElement(t.pre,null,n.createElement(t.code,{className:"language-html"},'  <div>\n    <figure class="hds-highlight" style="--accent-line-color:#00005e">\n      <blockquote class="hds-blockquote">\n        <p class="hds-highlight__text">You may select an highlight from the article to be displayed here. Select an excerpt that you want the user to pay attention to.</p>\n      </blockquote>\n    </figure>\n    <figure class="hds-highlight" style="--accent-line-color:#00005e">\n      <blockquote class="hds-blockquote">\n        <div class="hds-highlight__text hds-highlight__quote">Add an interesting quote here</div>\n      </blockquote>\n      <div class="hds-highlight__reference">First name Last name. Title.</div>\n    </figure>\n  </div>\n'))),"\n",n.createElement(t.h4,{id:"with-custom-text-color",style:{position:"relative"}},"With custom text color",n.createElement(t.a,{href:"#with-custom-text-color","aria-label":"with custom text color permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(l,{scope:{Highlight:i.H}},n.createElement(t.pre,null,n.createElement(t.code,{className:"language-jsx"},"import { Highlight } from 'hds-react';\n\n() => (\n  <>\n    <Highlight text=\"You may select an highlight from the article to be displayed here. Select an excerpt that you want the user to pay attention to.\"  theme={{'--text-color':'#00005e'}}/>\n    <Highlight text=\"Add an interesting quote here\" reference=\"First name Last name. Title.\" type=\"quote\"  theme={{'--text-color':'#00005e'}}/>\n  </>\n)\n")),n.createElement(t.pre,null,n.createElement(t.code,{className:"language-html"},'  <div>\n    <figure class="hds-highlight" style="--text-color:#00005e">\n      <blockquote class="hds-blockquote">\n        <p class="hds-highlight__text">You may select an highlight from the article to be displayed here. Select an excerpt that you want the user to pay attention to.</p>\n      </blockquote>\n    </figure>\n    <figure class="hds-highlight" style="--text-color:#00005e">\n      <blockquote class="hds-blockquote">\n        <div class="hds-highlight__text hds-highlight__quote">Add an interesting quote here</div>\n      </blockquote>\n      <div class="hds-highlight__reference">First name Last name. Title.</div>\n    </figure>\n  </div>\n'))),"\n",n.createElement(t.h3,{id:"packages",style:{position:"relative"}},"Packages",n.createElement(t.a,{href:"#packages","aria-label":"packages permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.table,null,n.createElement(t.thead,null,n.createElement(t.tr,null,n.createElement(t.th,null,"Package"),n.createElement(t.th,null,"Included"),n.createElement(t.th,null,"Storybook link"),n.createElement(t.th,null,"Source link"))),n.createElement(t.tbody,null,n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.strong,null,"HDS React")),n.createElement(t.td,null,n.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},n.createElement(s)," Yes ")),n.createElement(t.td,null,n.createElement(o.L,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=?path=/story/components-highlight--default-highlight"},"View in Storybook")),n.createElement(t.td,null,n.createElement(r.Z,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/blob/master/packages/react/src/components/highlight/Highlight.tsx"},"View source"))),n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.strong,null,"HDS Core")),n.createElement(t.td,null,n.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},n.createElement(s)," Yes ")),n.createElement(t.td,null,n.createElement(o.L,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/core/?path=/story/components-highlight--default-highlight"},"View in Storybook")),n.createElement(t.td,null,n.createElement(r.Z,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/core/src/components/highlight"},"View source"))))),"\n",n.createElement(t.h3,{id:"properties",style:{position:"relative"}},"Properties",n.createElement(t.a,{href:"#properties","aria-label":"properties permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.p,null,"Note! You can find the full list of properties in the ",n.createElement(o.L,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=?path=/story/components-highlight--default-highlight"},"React Storybook.")),"\n",n.createElement(t.table,null,n.createElement(t.thead,null,n.createElement(t.tr,null,n.createElement(t.th,null,"Property"),n.createElement(t.th,null,"Description"),n.createElement(t.th,null,"Values"),n.createElement(t.th,null,"Default value"))),n.createElement(t.tbody,null,n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"text")),n.createElement(t.td,null,"Text for the Highlight/quote"),n.createElement(t.td,null,"-"),n.createElement(t.td,null,"-")),n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"size")),n.createElement(t.td,null,"Highlight size"),n.createElement(t.td,null,n.createElement(t.code,null,'"s"')," ",n.createElement(t.code,null,'"m"')," ",n.createElement(t.code,null,'"l"')),n.createElement(t.td,null,n.createElement(t.code,null,'"m"'))),n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"type")),n.createElement(t.td,null,"Type of the Highlight"),n.createElement(t.td,null,n.createElement(t.code,null,'"highlight"')," ",n.createElement(t.code,null,'"quote"')),n.createElement(t.td,null,n.createElement(t.code,null,'"highlight"'))))))}function g(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){return void 0===e&&(e={}),n.createElement(h,e,n.createElement(c,e))}},90560:function(e,t,l){l.r(t);var a=l(11151),n=l(67294),i=l(83428),o=l(57674),r=l(89482),s=(l(18607),l(26127));function h(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,a.ah)(),e.components);return s.Z||c("PageTabs",!1),s.Z.Tab||c("PageTabs.Tab",!0),s.Z.TabList||c("PageTabs.TabList",!0),s.Z.TabPanel||c("PageTabs.TabPanel",!0),n.createElement(n.Fragment,null,n.createElement(t.h1,{id:"highlight",style:{position:"relative"}},"Highlight",n.createElement(t.a,{href:"#highlight","aria-label":"highlight permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement("div",{className:"status-label-description"},n.createElement(i.S,{type:"alert",variant:"rounded"},"Beta"),n.createElement(i.S,{variant:"rounded",type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),n.createElement(o.Z)),"\n",n.createElement(r.Z,null,"Highlight component allows lifting an excerpt from a longer text for emphasis. Highlight supports two types: highlight (default) and quotation. The Quote element has a reference to the quote source. The Highlight element is an excerpt from the text without the source information."),"\n",n.createElement(s.Z,{pageContext:e.pageContext},n.createElement(s.Z.TabList,null,n.createElement(s.Z.Tab,{href:"/"},"Usage"),n.createElement(s.Z.Tab,{href:"/code"},"Code"),n.createElement(s.Z.Tab,{href:"/accessibility"},"Accessibility"),n.createElement(s.Z.Tab,{href:"/customisation"},"Customisation")),n.createElement(s.Z.TabPanel,null,e.children)))}function c(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,a.ah)(),e.components);return t?n.createElement(t,e,n.createElement(h,e)):h(e)}},89482:function(e,t,l){var a=l(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:l="var(--fontsize-body-xl)",style:n={},children:i}=e;return a.createElement("p",{style:{fontSize:l,color:t,maxWidth:600,...n}},i)}},26127:function(e,t,l){var a=l(67294),n=l(14160),i=l(94671);const o="PageTabList",r="PageTabPanel",s="PageTab",h=e=>{var t;let{pageContext:l,children:h}=e;const c=l.frontmatter.slug,g=Array.isArray(h)?h:[h],d=g.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===o)),m=g.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===r)),u=null===(t=d.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===s)),p=u.findIndex((e=>c.endsWith(e.props.href))),b=-1===p?0:p,f=0===b?c:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(c);return a.createElement(i.a,{initiallyActiveTab:b},a.createElement(i.a.TabList,{className:"page-tabs-list"},u.map((e=>a.createElement(i.a.Tab,{key:e.props.href,onClick:()=>(0,n.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),u.map(((e,t)=>a.createElement(i.a.TabPanel,{key:e.props.href},b===t?m.props.children:a.createElement("div",null)))))},c=e=>{let{children:t}=e;return a.createElement(i.a.TabList,null,t)};c.componentName=o;const g=e=>{let{href:t,slug:l,children:n}=e;return a.createElement(i.a.Tab,null,n)};g.componentName=s;const d=e=>{let{children:t}=e;return a.createElement(i.a.TabPanel,null,t)};d.componentName=r,h.TabList=c,h.Tab=g,h.TabPanel=d,t.Z=h},57674:function(e,t,l){var a=l(67294),n=l(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return a.createElement(n.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},a.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>a.createElement("li",{key:t},a.createElement("span",{className:"status-name"},t),a.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-highlight-customisation-mdx-e65d914e751283f4e684.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-highlight-customisation-mdx-e65d914e751283f4e684.js
new file mode 100644
index 00000000000..c4c31c05462
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-highlight-customisation-mdx-e65d914e751283f4e684.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[7587,7553],{32454:function(e,t,a){a.d(t,{H:function(){return s}});var i=a(67294),l=a(7444),n=a(34300),o=a(97640);(0,l.s)('/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--breakpoint-xs:320px;--breakpoint-s:576px;--breakpoint-m:768px;--breakpoint-l:992px;--breakpoint-xl:1248px;--container-width-xs:288px;--container-width-s:544px;--container-width-m:720px;--container-width-l:944px;--container-width-xl:1200px;--color-brick:#bd2719;--color-brick-light:#ffeeed;--color-brick-medium-light:#facbc8;--color-brick-dark:#800e04;--color-bus:#0000bf;--color-bus-light:#f0f0ff;--color-bus-medium-light:#ccf;--color-bus-dark:#00005e;--color-coat-of-arms:#0072c6;--color-coat-of-arms-light:#e6f4ff;--color-coat-of-arms-medium-light:#b5daf7;--color-coat-of-arms-dark:#005799;--color-copper:#00d7a7;--color-copper-light:#cffaf1;--color-copper-medium-light:#9ef0de;--color-copper-dark:#00a17d;--color-engel:#ffe977;--color-engel-light:#fff9db;--color-engel-medium-light:#fff3b8;--color-engel-dark:#dbc030;--color-fog:#9fc9eb;--color-fog-light:#e8f3fc;--color-fog-medium-light:#d0e6f7;--color-fog-dark:#72a5cf;--color-gold:#c2a251;--color-gold-light:#f7f2e4;--color-gold-medium-light:#e8d7a7;--color-gold-dark:#9e823c;--color-metro:#fd4f00;--color-metro-light:#ffeee6;--color-metro-medium-light:#ffcab3;--color-metro-dark:#bd2f00;--color-silver:#dedfe1;--color-silver-light:#f7f7f8;--color-silver-medium-light:#efeff0;--color-silver-dark:#b0b8bf;--color-summer:#ffc61e;--color-summer-light:#fff4d4;--color-summer-medium-light:#ffe49c;--color-summer-dark:#cc9200;--color-suomenlinna:#f5a3c7;--color-suomenlinna-light:#fff0f7;--color-suomenlinna-medium-light:#ffdbeb;--color-suomenlinna-dark:#e673a5;--color-tram:#008741;--color-tram-light:#dff7eb;--color-tram-medium-light:#a3e3c2;--color-tram-dark:#006631;--color-focus-outline:#0072c6;--color-black:#000;--color-white:#fff;--color-black-5:#f2f2f2;--color-black-10:#e6e6e6;--color-black-20:#ccc;--color-black-30:#b3b3b3;--color-black-40:#999;--color-black-50:grey;--color-black-60:#666;--color-black-70:#4d4d4d;--color-black-80:#333;--color-black-90:#1a1a1a;--color-error:#b01038;--color-error-light:#f6e2e6;--color-error-dark:#8d0d2d;--color-success:#007a64;--color-success-light:#e2f5f3;--color-success-dark:#006250;--color-alert:#ffda07;--color-alert-light:#fff4b4;--color-alert-dark:#d18200;--color-info:#0062b9;--color-info-light:#e5eff8;--color-info-dark:#004f94;--box-shadow-s:0px 2px 10px 0px rgba(0,0,0,0.07);--box-shadow-m:0px 2px 10px 0px rgba(0,0,0,0.1);--box-shadow-l:0px 2px 20px 0px rgba(0,0,0,0.2);--spacing-layout-2-xs:1rem;--spacing-layout-xs:1.5rem;--spacing-layout-s:2rem;--spacing-layout-m:3rem;--spacing-layout-l:4rem;--spacing-layout-xl:6rem;--spacing-layout-2-xl:8rem;--spacing-4-xs:0.125rem;--spacing-3-xs:0.25rem;--spacing-2-xs:0.5rem;--spacing-xs:0.75rem;--spacing-s:1rem;--spacing-m:1.5rem;--spacing-l:2rem;--spacing-xl:2.5rem;--spacing-2-xl:3.0rem;--spacing-3-xl:3.5rem;--spacing-4-xl:4rem;--spacing-5-xl:4.5rem;--fontsize-heading-xxl:4rem;--fontsize-heading-xl:3rem;--fontsize-heading-xl-mobile:2.5rem;--fontsize-heading-l:2rem;--fontsize-heading-m:1.5rem;--fontsize-heading-s:1.25rem;--fontsize-heading-xs:1.125rem;--fontsize-heading-xxs:1rem;--fontsize-body-s:0.875rem;--fontsize-body-m:1rem;--fontsize-body-l:1.125rem;--fontsize-body-xl:1.25rem;--font-default:HelsinkiGrotesk,Arial,sans-serif;--lineheight-s:1;--lineheight-m:1.2;--lineheight-l:1.5;--lineheight-xl:1.75}@keyframes base-min_fadeIn__1eL7b{0%{opacity:0}to{opacity:1}}.base-min_visually-hidden__2X9es{border:0;clip:"rect(0 0 0 0)";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.base-min_button-reset__1DpKC{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.base-min_text-body__3BoE9{color:var(--color-black-90);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.base-min_text-body__3BoE9,.base-min_text-medium__3mQy-{font-family:var(--font-default)}.base-min_text-medium__3mQy-{font-weight:500}.base-min_text-bold__3vbqu{font-family:var(--font-default);font-weight:700}.base-min_text-xl__otWNO{font-size:var(--fontsize-heading-m)}.base-min_text-lg__23w6P{font-size:var(--fontsize-heading-s)}.base-min_text-md__4FgZi{font-size:var(--fontsize-heading-xs)}.base-min_subtitle__1npRt{font-size:var(--fontsize-body-m)}.base-min_text-sm__1_dmI{font-size:var(--fontsize-body-s);line-height:var(--lineheight-xl)}.base-min_heading-xxl__DU1O5{font-size:var(--fontsize-heading-xxl);letter-spacing:-1.2px}.base-min_heading-xl__2X67k,.base-min_heading-xxl__DU1O5{font-weight:400;line-height:var(--lineheight-s)}.base-min_heading-xl__2X67k{font-size:var(--fontsize-heading-xl);letter-spacing:-1px}.base-min_heading-xl-mobile__wsjuU{font-size:var(--fontsize-heading-xl-mobile);letter-spacing:-.8px}.base-min_heading-l__2jPN5,.base-min_heading-xl-mobile__wsjuU{font-weight:400;line-height:var(--lineheight-s)}.base-min_heading-l__2jPN5{font-size:var(--fontsize-heading-l);letter-spacing:-.4px}.base-min_heading-m__rYAVF{font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-.2px;line-height:32px}.base-min_heading-s__3TqeA{font-size:var(--fontsize-heading-s);font-weight:500;letter-spacing:.2px;line-height:1.4}.base-min_heading-xs__tmFku{font-size:var(--fontsize-heading-xs);line-height:1.33}.base-min_heading-xs__tmFku,.base-min_heading-xxs__3Wb8h{font-weight:700;letter-spacing:.4px}.base-min_heading-xxs__3Wb8h{font-size:var(--fontsize-heading-xxs);line-height:var(--lineheight-l)}.base-min_helper-text__119xK{color:var(--color-black-60);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs)}');var r={highlight:"Highlight-module_highlight__iVprf highlight_hds-highlight___uE3p",highlightBlockquote:"Highlight-module_highlightBlockquote__Bhn4A highlight_hds-blockquote__1QLSQ",text:"Highlight-module_text__2OPbz highlight_hds-highlight__text__31xf_","size-s":"Highlight-module_size-s__AwvVr highlight_hds-highlight--small__11cWK","size-l":"Highlight-module_size-l__3i6ZU highlight_hds-highlight--large__1EjiL",quote:"Highlight-module_quote__elKVW highlight_hds-highlight__quote__3ed0C",reference:"Highlight-module_reference__ICH8J highlight_hds-highlight__reference__3_4ca"};(0,l.s)(".highlight_hds-highlight___uE3p{--accent-line-color:var(--color-bus);--text-color:var(--color-black-90);--size-width-s:264px;--size-width-m:536px;--size-width-l:680px;--width:var(--size-width-m);--margin:var(--spacing-m) 0;border-left:8px solid var(--accent-line-color);color:var(--text-color);display:flex;flex-direction:column;justify-content:center;margin:var(--margin);max-width:100%;padding:0;padding-left:var(--spacing-s);grid-row-gap:var(--spacing-m);row-gap:var(--spacing-m);width:var(--width)}.highlight_hds-blockquote__1QLSQ{margin:0;padding:0}.highlight_hds-highlight__text__31xf_{color:var(--text-color);font-size:var(--fontsize-heading-m);line-height:var(--lineheight-m);margin:0;padding:0}.highlight_hds-highlight--small__11cWK{--margin:var(--spacing-s) 0;--width:var(--size-width-s)}.highlight_hds-highlight--large__1EjiL{--margin:var(--spacing-l) 0;--width:var(--size-width-l)}.highlight_hds-highlight--large__1EjiL .highlight_hds-highlight__text__31xf_{font-size:var(--fontsize-heading-l);line-height:var(--lineheight-l)}.highlight_hds-highlight__quote__3ed0C:after,.highlight_hds-highlight__quote__3ed0C:before{content:'\"';display:inline}.highlight_hds-highlight__reference__3_4ca{font-size:var(--fontsize-heading-xs);line-height:var(--lineheight-m)}");const s=e=>{let{theme:t,size:a,type:l,text:s,reference:c}=e;const h=(0,o.u)(r.highlight,t||{}),d=l&&"quote"===l;return i.createElement("figure",{className:(0,n.c)(r.highlight,a&&r["size-"+a],h)},i.createElement("blockquote",{className:r.highlightBlockquote},i.createElement("p",{className:(0,n.c)(r.text,d&&r.quote)},s)),c&&i.createElement("figcaption",{className:r.reference},"—⁠",c))}},83428:function(e,t,a){a.d(t,{S:function(){return c}});var i=a(80136),l=a(67294),n=a(7444),o=a(34300),r={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const s=e=>{let{icon:t}=e;return l.createElement("span",{className:r.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:n,type:c="neutral",iconLeft:h}=e,d=(0,i._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,o.c)(r.statusLabel,r[c],h&&r.statusLabelWithIcon,a),"data-testid":n},d),h&&l.createElement(s,{icon:h}),t)}},13426:function(e,t,a){a.r(t);var i=a(11151),l=a(67294),n=a(32454),o=a(90560);const r=e=>{let{children:t,pageContext:a}=e;return l.createElement(o.default,{pageContext:a},t)};function s(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",p:"p",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",pre:"pre"},(0,i.ah)(),e.components),{Playground:a}=t;return a||function(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Playground",!0),l.createElement(l.Fragment,null,l.createElement(t.h2,{id:"customisation",style:{position:"relative"}},"Customisation",l.createElement(t.a,{href:"#customisation","aria-label":"customisation permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h3,{id:"customisation-properties",style:{position:"relative"}},"Customisation properties",l.createElement(t.a,{href:"#customisation-properties","aria-label":"customisation properties permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"In Core version, you can either use the ",l.createElement(t.code,null,"style")," attributes in the HTML to customise the component."),"\n",l.createElement(t.p,null,"In React version, you can use the ",l.createElement(t.code,null,"theme")," property to customise the component."),"\n",l.createElement(t.p,null,"See all available theme and style variables in the table below."),"\n",l.createElement(t.table,null,l.createElement(t.thead,null,l.createElement(t.tr,null,l.createElement(t.th,null,"Theme variable"),l.createElement(t.th,null,"Description"))),l.createElement(t.tbody,null,l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"--accent-line-color")),l.createElement(t.td,null,"Colour of the highlight's accent line.")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"--text-color")),l.createElement(t.td,null,"Colour of the highlight's text")))),"\n",l.createElement(t.h3,{id:"customisation-example",style:{position:"relative"}},"Customisation example",l.createElement(t.a,{href:"#customisation-example","aria-label":"customisation example permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a,{scope:{Highlight:n.H}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},"import { Highlight } from 'hds-react';\n\n() => (\n  <Highlight\n    text=\"You may select an highlight from the article to be displayed here. Select an excerpt that you want the user to pay attention to.\"\n    theme={{\n      '--accent-line-color': '#009246',\n      '--text-color': '#0000bf',\n    }}\n  />\n)\n")),l.createElement(t.pre,null,l.createElement(t.code,{className:"language-html"},'  <figure class="hds-highlight" style="--accent-line-color:#009246;--text-color:#0000bf">\n    <blockquote class="hds-blockquote">\n      <p class="hds-highlight__text">You may select an highlight from the article to be displayed here. Select an excerpt that you want the user to pay attention to.</p>\n    </blockquote>\n  </figure>\n'))))}t.default=function(e){return void 0===e&&(e={}),l.createElement(r,e,l.createElement(s,e))}},90560:function(e,t,a){a.r(t);var i=a(11151),l=a(67294),n=a(83428),o=a(57674),r=a(89482),s=(a(18607),a(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,i.ah)(),e.components);return s.Z||h("PageTabs",!1),s.Z.Tab||h("PageTabs.Tab",!0),s.Z.TabList||h("PageTabs.TabList",!0),s.Z.TabPanel||h("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"highlight",style:{position:"relative"}},"Highlight",l.createElement(t.a,{href:"#highlight","aria-label":"highlight permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{className:"status-label-description"},l.createElement(n.S,{type:"alert",variant:"rounded"},"Beta"),l.createElement(n.S,{variant:"rounded",type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(o.Z)),"\n",l.createElement(r.Z,null,"Highlight component allows lifting an excerpt from a longer text for emphasis. Highlight supports two types: highlight (default) and quotation. The Quote element has a reference to the quote source. The Highlight element is an excerpt from the text without the source information."),"\n",l.createElement(s.Z,{pageContext:e.pageContext},l.createElement(s.Z.TabList,null,l.createElement(s.Z.Tab,{href:"/"},"Usage"),l.createElement(s.Z.Tab,{href:"/code"},"Code"),l.createElement(s.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(s.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(s.Z.TabPanel,null,e.children)))}function h(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,i.ah)(),e.components);return t?l.createElement(t,e,l.createElement(c,e)):c(e)}},89482:function(e,t,a){var i=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:l={},children:n}=e;return i.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...l}},n)}},26127:function(e,t,a){var i=a(67294),l=a(14160),n=a(94671);const o="PageTabList",r="PageTabPanel",s="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const h=a.frontmatter.slug,d=Array.isArray(c)?c:[c],m=d.find((e=>(0,i.isValidElement)(e)&&e.type.componentName===o)),g=d.find((e=>(0,i.isValidElement)(e)&&e.type.componentName===r)),u=null===(t=m.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===s)),b=u.findIndex((e=>h.endsWith(e.props.href))),p=-1===b?0:b,f=0===p?h:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(h);return i.createElement(n.a,{initiallyActiveTab:p},i.createElement(n.a.TabList,{className:"page-tabs-list"},u.map((e=>i.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),u.map(((e,t)=>i.createElement(n.a.TabPanel,{key:e.props.href},p===t?g.props.children:i.createElement("div",null)))))},h=e=>{let{children:t}=e;return i.createElement(n.a.TabList,null,t)};h.componentName=o;const d=e=>{let{href:t,slug:a,children:l}=e;return i.createElement(n.a.Tab,null,l)};d.componentName=s;const m=e=>{let{children:t}=e;return i.createElement(n.a.TabPanel,null,t)};m.componentName=r,c.TabList=h,c.Tab=d,c.TabPanel=m,t.Z=c},57674:function(e,t,a){var i=a(67294),l=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return i.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},i.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>i.createElement("li",{key:t},i.createElement("span",{className:"status-name"},t),i.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-highlight-index-mdx-f899ecdb3e789b65f195.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-highlight-index-mdx-f899ecdb3e789b65f195.js
new file mode 100644
index 00000000000..72058b5e075
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-highlight-index-mdx-f899ecdb3e789b65f195.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[6497,7553],{32454:function(e,t,a){a.d(t,{H:function(){return s}});var n=a(67294),i=a(7444),l=a(34300),r=a(97640);(0,i.s)('/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--breakpoint-xs:320px;--breakpoint-s:576px;--breakpoint-m:768px;--breakpoint-l:992px;--breakpoint-xl:1248px;--container-width-xs:288px;--container-width-s:544px;--container-width-m:720px;--container-width-l:944px;--container-width-xl:1200px;--color-brick:#bd2719;--color-brick-light:#ffeeed;--color-brick-medium-light:#facbc8;--color-brick-dark:#800e04;--color-bus:#0000bf;--color-bus-light:#f0f0ff;--color-bus-medium-light:#ccf;--color-bus-dark:#00005e;--color-coat-of-arms:#0072c6;--color-coat-of-arms-light:#e6f4ff;--color-coat-of-arms-medium-light:#b5daf7;--color-coat-of-arms-dark:#005799;--color-copper:#00d7a7;--color-copper-light:#cffaf1;--color-copper-medium-light:#9ef0de;--color-copper-dark:#00a17d;--color-engel:#ffe977;--color-engel-light:#fff9db;--color-engel-medium-light:#fff3b8;--color-engel-dark:#dbc030;--color-fog:#9fc9eb;--color-fog-light:#e8f3fc;--color-fog-medium-light:#d0e6f7;--color-fog-dark:#72a5cf;--color-gold:#c2a251;--color-gold-light:#f7f2e4;--color-gold-medium-light:#e8d7a7;--color-gold-dark:#9e823c;--color-metro:#fd4f00;--color-metro-light:#ffeee6;--color-metro-medium-light:#ffcab3;--color-metro-dark:#bd2f00;--color-silver:#dedfe1;--color-silver-light:#f7f7f8;--color-silver-medium-light:#efeff0;--color-silver-dark:#b0b8bf;--color-summer:#ffc61e;--color-summer-light:#fff4d4;--color-summer-medium-light:#ffe49c;--color-summer-dark:#cc9200;--color-suomenlinna:#f5a3c7;--color-suomenlinna-light:#fff0f7;--color-suomenlinna-medium-light:#ffdbeb;--color-suomenlinna-dark:#e673a5;--color-tram:#008741;--color-tram-light:#dff7eb;--color-tram-medium-light:#a3e3c2;--color-tram-dark:#006631;--color-focus-outline:#0072c6;--color-black:#000;--color-white:#fff;--color-black-5:#f2f2f2;--color-black-10:#e6e6e6;--color-black-20:#ccc;--color-black-30:#b3b3b3;--color-black-40:#999;--color-black-50:grey;--color-black-60:#666;--color-black-70:#4d4d4d;--color-black-80:#333;--color-black-90:#1a1a1a;--color-error:#b01038;--color-error-light:#f6e2e6;--color-error-dark:#8d0d2d;--color-success:#007a64;--color-success-light:#e2f5f3;--color-success-dark:#006250;--color-alert:#ffda07;--color-alert-light:#fff4b4;--color-alert-dark:#d18200;--color-info:#0062b9;--color-info-light:#e5eff8;--color-info-dark:#004f94;--box-shadow-s:0px 2px 10px 0px rgba(0,0,0,0.07);--box-shadow-m:0px 2px 10px 0px rgba(0,0,0,0.1);--box-shadow-l:0px 2px 20px 0px rgba(0,0,0,0.2);--spacing-layout-2-xs:1rem;--spacing-layout-xs:1.5rem;--spacing-layout-s:2rem;--spacing-layout-m:3rem;--spacing-layout-l:4rem;--spacing-layout-xl:6rem;--spacing-layout-2-xl:8rem;--spacing-4-xs:0.125rem;--spacing-3-xs:0.25rem;--spacing-2-xs:0.5rem;--spacing-xs:0.75rem;--spacing-s:1rem;--spacing-m:1.5rem;--spacing-l:2rem;--spacing-xl:2.5rem;--spacing-2-xl:3.0rem;--spacing-3-xl:3.5rem;--spacing-4-xl:4rem;--spacing-5-xl:4.5rem;--fontsize-heading-xxl:4rem;--fontsize-heading-xl:3rem;--fontsize-heading-xl-mobile:2.5rem;--fontsize-heading-l:2rem;--fontsize-heading-m:1.5rem;--fontsize-heading-s:1.25rem;--fontsize-heading-xs:1.125rem;--fontsize-heading-xxs:1rem;--fontsize-body-s:0.875rem;--fontsize-body-m:1rem;--fontsize-body-l:1.125rem;--fontsize-body-xl:1.25rem;--font-default:HelsinkiGrotesk,Arial,sans-serif;--lineheight-s:1;--lineheight-m:1.2;--lineheight-l:1.5;--lineheight-xl:1.75}@keyframes base-min_fadeIn__1eL7b{0%{opacity:0}to{opacity:1}}.base-min_visually-hidden__2X9es{border:0;clip:"rect(0 0 0 0)";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.base-min_button-reset__1DpKC{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.base-min_text-body__3BoE9{color:var(--color-black-90);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.base-min_text-body__3BoE9,.base-min_text-medium__3mQy-{font-family:var(--font-default)}.base-min_text-medium__3mQy-{font-weight:500}.base-min_text-bold__3vbqu{font-family:var(--font-default);font-weight:700}.base-min_text-xl__otWNO{font-size:var(--fontsize-heading-m)}.base-min_text-lg__23w6P{font-size:var(--fontsize-heading-s)}.base-min_text-md__4FgZi{font-size:var(--fontsize-heading-xs)}.base-min_subtitle__1npRt{font-size:var(--fontsize-body-m)}.base-min_text-sm__1_dmI{font-size:var(--fontsize-body-s);line-height:var(--lineheight-xl)}.base-min_heading-xxl__DU1O5{font-size:var(--fontsize-heading-xxl);letter-spacing:-1.2px}.base-min_heading-xl__2X67k,.base-min_heading-xxl__DU1O5{font-weight:400;line-height:var(--lineheight-s)}.base-min_heading-xl__2X67k{font-size:var(--fontsize-heading-xl);letter-spacing:-1px}.base-min_heading-xl-mobile__wsjuU{font-size:var(--fontsize-heading-xl-mobile);letter-spacing:-.8px}.base-min_heading-l__2jPN5,.base-min_heading-xl-mobile__wsjuU{font-weight:400;line-height:var(--lineheight-s)}.base-min_heading-l__2jPN5{font-size:var(--fontsize-heading-l);letter-spacing:-.4px}.base-min_heading-m__rYAVF{font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-.2px;line-height:32px}.base-min_heading-s__3TqeA{font-size:var(--fontsize-heading-s);font-weight:500;letter-spacing:.2px;line-height:1.4}.base-min_heading-xs__tmFku{font-size:var(--fontsize-heading-xs);line-height:1.33}.base-min_heading-xs__tmFku,.base-min_heading-xxs__3Wb8h{font-weight:700;letter-spacing:.4px}.base-min_heading-xxs__3Wb8h{font-size:var(--fontsize-heading-xxs);line-height:var(--lineheight-l)}.base-min_helper-text__119xK{color:var(--color-black-60);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs)}');var o={highlight:"Highlight-module_highlight__iVprf highlight_hds-highlight___uE3p",highlightBlockquote:"Highlight-module_highlightBlockquote__Bhn4A highlight_hds-blockquote__1QLSQ",text:"Highlight-module_text__2OPbz highlight_hds-highlight__text__31xf_","size-s":"Highlight-module_size-s__AwvVr highlight_hds-highlight--small__11cWK","size-l":"Highlight-module_size-l__3i6ZU highlight_hds-highlight--large__1EjiL",quote:"Highlight-module_quote__elKVW highlight_hds-highlight__quote__3ed0C",reference:"Highlight-module_reference__ICH8J highlight_hds-highlight__reference__3_4ca"};(0,i.s)(".highlight_hds-highlight___uE3p{--accent-line-color:var(--color-bus);--text-color:var(--color-black-90);--size-width-s:264px;--size-width-m:536px;--size-width-l:680px;--width:var(--size-width-m);--margin:var(--spacing-m) 0;border-left:8px solid var(--accent-line-color);color:var(--text-color);display:flex;flex-direction:column;justify-content:center;margin:var(--margin);max-width:100%;padding:0;padding-left:var(--spacing-s);grid-row-gap:var(--spacing-m);row-gap:var(--spacing-m);width:var(--width)}.highlight_hds-blockquote__1QLSQ{margin:0;padding:0}.highlight_hds-highlight__text__31xf_{color:var(--text-color);font-size:var(--fontsize-heading-m);line-height:var(--lineheight-m);margin:0;padding:0}.highlight_hds-highlight--small__11cWK{--margin:var(--spacing-s) 0;--width:var(--size-width-s)}.highlight_hds-highlight--large__1EjiL{--margin:var(--spacing-l) 0;--width:var(--size-width-l)}.highlight_hds-highlight--large__1EjiL .highlight_hds-highlight__text__31xf_{font-size:var(--fontsize-heading-l);line-height:var(--lineheight-l)}.highlight_hds-highlight__quote__3ed0C:after,.highlight_hds-highlight__quote__3ed0C:before{content:'\"';display:inline}.highlight_hds-highlight__reference__3_4ca{font-size:var(--fontsize-heading-xs);line-height:var(--lineheight-m)}");const s=e=>{let{theme:t,size:a,type:i,text:s,reference:c}=e;const h=(0,r.u)(o.highlight,t||{}),d=i&&"quote"===i;return n.createElement("figure",{className:(0,l.c)(o.highlight,a&&o["size-"+a],h)},n.createElement("blockquote",{className:o.highlightBlockquote},n.createElement("p",{className:(0,l.c)(o.text,d&&o.quote)},s)),c&&n.createElement("figcaption",{className:o.reference},"—⁠",c))}},83428:function(e,t,a){a.d(t,{S:function(){return c}});var n=a(80136),i=a(67294),l=a(7444),r=a(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,l.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const s=e=>{let{icon:t}=e;return i.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:l,type:c="neutral",iconLeft:h}=e,d=(0,n._)(e,["children","className","dataTestId","type","iconLeft"]);return i.createElement("span",Object.assign({className:(0,r.c)(o.statusLabel,o[c],h&&o.statusLabelWithIcon,a),"data-testid":l},d),h&&i.createElement(s,{icon:h}),t)}},43591:function(e,t,a){a.r(t);var n=a(11151),i=a(67294),l=a(32454),r=(a(80699),a(90560));a(1076);const o=e=>{let{children:t,pageContext:a}=e;return i.createElement(r.default,{pageContext:a},t)};function s(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",strong:"strong",code:"code",h5:"h5",p:"p",h4:"h4"},(0,n.ah)(),e.components),{PlaygroundPreview:a}=t;return a||function(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("PlaygroundPreview",!0),i.createElement(i.Fragment,null,i.createElement(t.h2,{id:"usage",style:{position:"relative"}},"Usage",i.createElement(t.a,{href:"#usage","aria-label":"usage permalink",className:"header-anchor after"},i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",i.createElement(t.h3,{id:"example",style:{position:"relative"}},"Example",i.createElement(t.a,{href:"#example","aria-label":"example permalink",className:"header-anchor after"},i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",i.createElement(a,null,i.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ultrices tincidunt nunc, porttitor pretium enim vestibulum eget. Suspendisse ac tempor ante. Nullam at convallis ex. Integer mattis sagittis interdum. Suspendisse viverra sit amet mauris non interdum. In porttitor tempus diam vel venenatis. Aenean elementum sem vitae tempus tempor. "),i.createElement(l.H,{text:"You may select an highlight from the article to be displayed here. Select an excerpt that you want the user to pay attention to."}),i.createElement("p",null,"Sed quis massa elementum, pulvinar lacus at, efficitur velit. Nam nec ornare augue. Aliquam pellentesque dictum nisl, a commodo arcu dapibus id."),i.createElement(l.H,{type:"quote",text:"Add an interesting quote here",reference:"First name Last name. Title."}),i.createElement("p",null,"Sed mollis mauris nec dui condimentum pulvinar. Suspendisse vitae aliquet nisi. Donec libero ipsum, fermentum ut augue id, scelerisque lobortis orci.")),"\n",i.createElement(t.h3,{id:"principles",style:{position:"relative"}},"Principles",i.createElement(t.a,{href:"#principles","aria-label":"principles permalink",className:"header-anchor after"},i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",i.createElement(t.ul,null,"\n",i.createElement(t.li,null,"Highlights are designed to capture users' attention. ",i.createElement(t.strong,null,"Therefore, they should be used sparingly.")),"\n",i.createElement(t.li,null,"With the React component you can use the prop ",i.createElement(t.code,null,'type="quote"')," to transform the highlight text into a quote with an optional reference, though we strongly recommend adding a reference to a quote. With the core version remember to insert the em-dash character — (HTML code ",i.createElement(t.code,null,"&#8212"),") before the reference text. In React component the dash is handled automatically."),"\n",i.createElement(t.li,null,"Pay attention to accessibility when using custom text or accent line colour. ",i.createElement(t.strong,null,"Use sufficient colour contrast")," so the content is clearly distinguishable from the surrounding area."),"\n",i.createElement(t.li,null,"Quote and Highlight adds vertical margin before and after actual content."),"\n"),"\n",i.createElement(t.h3,{id:"type-variations",style:{position:"relative"}},"Type variations",i.createElement(t.a,{href:"#type-variations","aria-label":"type variations permalink",className:"header-anchor after"},i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",i.createElement(t.h5,{id:"highlight",style:{position:"relative"}},"Highlight",i.createElement(t.a,{href:"#highlight","aria-label":"highlight permalink",className:"header-anchor after"},i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",i.createElement(a,null,i.createElement(l.H,{text:"You may select an highlight from the article to be displayed here. Select an excerpt that you want the user to pay attention to."})),"\n",i.createElement(t.h5,{id:"quote",style:{position:"relative"}},"Quote",i.createElement(t.a,{href:"#quote","aria-label":"quote permalink",className:"header-anchor after"},i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",i.createElement(t.p,null,i.createElement(t.strong,null,"In Core package")," remember to insert the em-dash character — (HTML code ",i.createElement(t.code,null,"&#8212"),") before the reference text."),"\n",i.createElement(a,null,i.createElement(l.H,{text:"Add an interesting quote here",type:"quote",reference:"First name Last name. Title."})),"\n",i.createElement(t.h3,{id:"size-variations",style:{position:"relative"}},"Size variations",i.createElement(t.a,{href:"#size-variations","aria-label":"size variations permalink",className:"header-anchor after"},i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",i.createElement(t.h5,{id:"large",style:{position:"relative"}},"Large",i.createElement(t.a,{href:"#large","aria-label":"large permalink",className:"header-anchor after"},i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",i.createElement(a,null,i.createElement(l.H,{text:"You may select an highlight from the article to be displayed here. Select an excerpt that you want the user to pay attention to.",size:"l"}),i.createElement(l.H,{text:"Add an interesting quote here",size:"l",type:"quote",reference:"First name Last name. Title."})),"\n",i.createElement(t.h4,{id:"default",style:{position:"relative"}},"Default",i.createElement(t.a,{href:"#default","aria-label":"default permalink",className:"header-anchor after"},i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",i.createElement(a,null,i.createElement(l.H,{text:"You may select an highlight from the article to be displayed here. Select an excerpt that you want the user to pay attention to."}),i.createElement(l.H,{text:"Add an interesting quote here",type:"quote",reference:"First name Last name. Title."})),"\n",i.createElement(t.h4,{id:"small",style:{position:"relative"}},"Small",i.createElement(t.a,{href:"#small","aria-label":"small permalink",className:"header-anchor after"},i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",i.createElement(a,null,i.createElement(l.H,{text:"You may select an highlight from the article to be displayed here. Select an excerpt that you want the user to pay attention to.",size:"s"}),i.createElement(l.H,{text:"Add an interesting quote here",size:"s",type:"quote",reference:"First name Last name. Title."})),"\n",i.createElement(t.h3,{id:"theming",style:{position:"relative"}},"Theming",i.createElement(t.a,{href:"#theming","aria-label":"theming permalink",className:"header-anchor after"},i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",i.createElement(t.h4,{id:"custom-accent-line-colour",style:{position:"relative"}},"Custom accent line colour",i.createElement(t.a,{href:"#custom-accent-line-colour","aria-label":"custom accent line colour permalink",className:"header-anchor after"},i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",i.createElement(a,null,i.createElement(l.H,{text:"You may select an highlight from the article to be displayed here. Select an excerpt that you want the user to pay attention to.",theme:{"--accent-line-color":"#00005e"}}),i.createElement(l.H,{text:"Add an interesting quote here",reference:"First name Last name. Title.",type:"quote",theme:{"--accent-line-color":"#00005e"}})),"\n",i.createElement(t.h4,{id:"custom-text-colour",style:{position:"relative"}},"Custom text colour",i.createElement(t.a,{href:"#custom-text-colour","aria-label":"custom text colour permalink",className:"header-anchor after"},i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",i.createElement(a,null,i.createElement(l.H,{text:"You may select an highlight from the article to be displayed here. Select an excerpt that you want the user to pay attention to.",theme:{"--text-color":"#00005e"}}),i.createElement(l.H,{text:"Add an interesting quote here",reference:"First name Last name. Title.",type:"quote",theme:{"--text-color":"#00005e"}})))}t.default=function(e){return void 0===e&&(e={}),i.createElement(o,e,i.createElement(s,e))}},90560:function(e,t,a){a.r(t);var n=a(11151),i=a(67294),l=a(83428),r=a(57674),o=a(89482),s=(a(18607),a(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,n.ah)(),e.components);return s.Z||h("PageTabs",!1),s.Z.Tab||h("PageTabs.Tab",!0),s.Z.TabList||h("PageTabs.TabList",!0),s.Z.TabPanel||h("PageTabs.TabPanel",!0),i.createElement(i.Fragment,null,i.createElement(t.h1,{id:"highlight",style:{position:"relative"}},"Highlight",i.createElement(t.a,{href:"#highlight","aria-label":"highlight permalink",className:"header-anchor after"},i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",i.createElement("div",{className:"status-label-description"},i.createElement(l.S,{type:"alert",variant:"rounded"},"Beta"),i.createElement(l.S,{variant:"rounded",type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),i.createElement(r.Z)),"\n",i.createElement(o.Z,null,"Highlight component allows lifting an excerpt from a longer text for emphasis. Highlight supports two types: highlight (default) and quotation. The Quote element has a reference to the quote source. The Highlight element is an excerpt from the text without the source information."),"\n",i.createElement(s.Z,{pageContext:e.pageContext},i.createElement(s.Z.TabList,null,i.createElement(s.Z.Tab,{href:"/"},"Usage"),i.createElement(s.Z.Tab,{href:"/code"},"Code"),i.createElement(s.Z.Tab,{href:"/accessibility"},"Accessibility"),i.createElement(s.Z.Tab,{href:"/customisation"},"Customisation")),i.createElement(s.Z.TabPanel,null,e.children)))}function h(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,n.ah)(),e.components);return t?i.createElement(t,e,i.createElement(c,e)):c(e)}},89482:function(e,t,a){var n=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:i={},children:l}=e;return n.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...i}},l)}},26127:function(e,t,a){var n=a(67294),i=a(14160),l=a(94671);const r="PageTabList",o="PageTabPanel",s="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const h=a.frontmatter.slug,d=Array.isArray(c)?c:[c],m=d.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===r)),g=d.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===o)),u=null===(t=m.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===s)),p=u.findIndex((e=>h.endsWith(e.props.href))),f=-1===p?0:p,b=0===f?h:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(h);return n.createElement(l.a,{initiallyActiveTab:f},n.createElement(l.a.TabList,{className:"page-tabs-list"},u.map((e=>n.createElement(l.a.Tab,{key:e.props.href,onClick:()=>(0,i.navigate)(""+("/"===e.props.href?b:b+e.props.href))},e.props.children)))),u.map(((e,t)=>n.createElement(l.a.TabPanel,{key:e.props.href},f===t?g.props.children:n.createElement("div",null)))))},h=e=>{let{children:t}=e;return n.createElement(l.a.TabList,null,t)};h.componentName=r;const d=e=>{let{href:t,slug:a,children:i}=e;return n.createElement(l.a.Tab,null,i)};d.componentName=s;const m=e=>{let{children:t}=e;return n.createElement(l.a.TabPanel,null,t)};m.componentName=o,c.TabList=h,c.Tab=d,c.TabPanel=m,t.Z=c},57674:function(e,t,a){var n=a(67294),i=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return n.createElement(i.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},n.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>n.createElement("li",{key:t},n.createElement("span",{className:"status-name"},t),n.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-highlight-tabs-mdx-62b00cdc5af80915cf11.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-highlight-tabs-mdx-62b00cdc5af80915cf11.js
new file mode 100644
index 00000000000..a751acb2f87
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-highlight-tabs-mdx-62b00cdc5af80915cf11.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[7553],{83428:function(e,t,a){a.d(t,{S:function(){return c}});var s=a(80136),l=a(67294),n=a(7444),r=a(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:t}=e;return l.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:n,type:c="neutral",iconLeft:u}=e,b=(0,s._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(i.statusLabel,i[c],u&&i.statusLabelWithIcon,a),"data-testid":n},b),u&&l.createElement(o,{icon:u}),t)}},90560:function(e,t,a){a.r(t);var s=a(11151),l=a(67294),n=a(83428),r=a(57674),i=a(89482),o=(a(18607),a(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,s.ah)(),e.components);return o.Z||u("PageTabs",!1),o.Z.Tab||u("PageTabs.Tab",!0),o.Z.TabList||u("PageTabs.TabList",!0),o.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"highlight",style:{position:"relative"}},"Highlight",l.createElement(t.a,{href:"#highlight","aria-label":"highlight permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{className:"status-label-description"},l.createElement(n.S,{type:"alert",variant:"rounded"},"Beta"),l.createElement(n.S,{variant:"rounded",type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(i.Z,null,"Highlight component allows lifting an excerpt from a longer text for emphasis. Highlight supports two types: highlight (default) and quotation. The Quote element has a reference to the quote source. The Highlight element is an excerpt from the text without the source information."),"\n",l.createElement(o.Z,{pageContext:e.pageContext},l.createElement(o.Z.TabList,null,l.createElement(o.Z.Tab,{href:"/"},"Usage"),l.createElement(o.Z.Tab,{href:"/code"},"Code"),l.createElement(o.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(o.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(o.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,s.ah)(),e.components);return t?l.createElement(t,e,l.createElement(c,e)):c(e)}},89482:function(e,t,a){var s=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:l={},children:n}=e;return s.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...l}},n)}},26127:function(e,t,a){var s=a(67294),l=a(14160),n=a(94671);const r="PageTabList",i="PageTabPanel",o="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const u=a.frontmatter.slug,b=Array.isArray(c)?c:[c],h=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===r)),d=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===i)),m=null===(t=h.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===o)),p=m.findIndex((e=>u.endsWith(e.props.href))),g=-1===p?0:p,_=0===g?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return s.createElement(n.a,{initiallyActiveTab:g},s.createElement(n.a.TabList,{className:"page-tabs-list"},m.map((e=>s.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?_:_+e.props.href))},e.props.children)))),m.map(((e,t)=>s.createElement(n.a.TabPanel,{key:e.props.href},g===t?d.props.children:s.createElement("div",null)))))},u=e=>{let{children:t}=e;return s.createElement(n.a.TabList,null,t)};u.componentName=r;const b=e=>{let{href:t,slug:a,children:l}=e;return s.createElement(n.a.Tab,null,l)};b.componentName=o;const h=e=>{let{children:t}=e;return s.createElement(n.a.TabPanel,null,t)};h.componentName=i,c.TabList=u,c.Tab=b,c.TabPanel=h,t.Z=c},57674:function(e,t,a){var s=a(67294),l=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return s.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},s.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>s.createElement("li",{key:t},s.createElement("span",{className:"status-name"},t),s.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-icon-accessibility-mdx-d647bce5e2ea82a6a8b0.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-icon-accessibility-mdx-d647bce5e2ea82a6a8b0.js
new file mode 100644
index 00000000000..3a580396082
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-icon-accessibility-mdx-d647bce5e2ea82a6a8b0.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[9922,623],{83428:function(e,t,a){a.d(t,{S:function(){return c}});var l=a(80136),n=a(67294),s=a(7444),r=a(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,s.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:t}=e;return n.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:s,type:c="neutral",iconLeft:u}=e,d=(0,l._)(e,["children","className","dataTestId","type","iconLeft"]);return n.createElement("span",Object.assign({className:(0,r.c)(i.statusLabel,i[c],u&&i.statusLabelWithIcon,a),"data-testid":s},d),u&&n.createElement(o,{icon:u}),t)}},34759:function(e,t,a){a.r(t);var l=a(11151),n=a(67294),s=a(80699),r=a(68601);const i=e=>{let{children:t,pageContext:a}=e;return n.createElement(r.default,{pageContext:a},t)};function o(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",code:"code"},(0,l.ah)(),e.components);return n.createElement(n.Fragment,null,n.createElement(t.h2,{id:"accessibility",style:{position:"relative"}},"Accessibility",n.createElement(t.a,{href:"#accessibility","aria-label":"accessibility permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.h3,{id:"pay-attention-to",style:{position:"relative"}},"Pay attention to",n.createElement(t.a,{href:"#pay-attention-to","aria-label":"pay attention to permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.ul,null,"\n",n.createElement(t.li,null,"For icons that do not have a visual text label but are important must be given a text alternative using the WAI-ARIA definition ",n.createElement(t.code,null,"aria-label")," or ",n.createElement(t.code,null,"aria-labelledby"),". See ",n.createElement(s.Z,{href:"https://www.w3.org/TR/WCAG21/#text-alternatives"},"WCAG 2.1 Text Alternatives guideline")," for more information."),"\n",n.createElement(t.li,null,"If the icon has a visual text label associated with it, the icon can be hidden from assistive technologies with ",n.createElement(t.code,null,'aria-hidden="true"'),". It prevents screen readers repeating the same information twice (visual text followed by the icon description)."),"\n",n.createElement(t.li,null,"If the icon is only decorative, it should always be hidden from assistive technologies with the ",n.createElement(t.code,null,'aria-hidden="true"')," attribute."),"\n",n.createElement(t.li,null,"The colour contrast between the icon and its background must comply with ",n.createElement(s.Z,{href:"https://www.w3.org/TR/WCAG21/#contrast-minimum"},"AA Level contrast ratios"),"."),"\n"))}t.default=function(e){return void 0===e&&(e={}),n.createElement(i,e,n.createElement(o,e))}},68601:function(e,t,a){a.r(t);var l=a(11151),n=a(67294),s=a(83428),r=a(57674),i=(a(18607),a(26127)),o=a(89482);function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,l.ah)(),e.components);return i.Z||u("PageTabs",!1),i.Z.Tab||u("PageTabs.Tab",!0),i.Z.TabList||u("PageTabs.TabList",!0),i.Z.TabPanel||u("PageTabs.TabPanel",!0),n.createElement(n.Fragment,null,n.createElement(t.h1,{id:"icon",style:{position:"relative"}},"Icon",n.createElement(t.a,{href:"#icon","aria-label":"icon permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement("div",{class:"status-label-description"},n.createElement(s.S,{type:"info"},"Stable"),n.createElement(s.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),n.createElement(r.Z)),"\n",n.createElement(o.Z,null,"Icons are used for providing visual cues and highlighting actions, denoting types and classes of information, and giving additional meaning to content."),"\n",n.createElement(i.Z,{pageContext:e.pageContext},n.createElement(i.Z.TabList,null,n.createElement(i.Z.Tab,{href:"/"},"Usage"),n.createElement(i.Z.Tab,{href:"/code"},"Code"),n.createElement(i.Z.Tab,{href:"/accessibility"},"Accessibility"),n.createElement(i.Z.Tab,{href:"/customisation"},"Customisation")),n.createElement(i.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,l.ah)(),e.components);return t?n.createElement(t,e,n.createElement(c,e)):c(e)}},89482:function(e,t,a){var l=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:n={},children:s}=e;return l.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...n}},s)}},26127:function(e,t,a){var l=a(67294),n=a(14160),s=a(94671);const r="PageTabList",i="PageTabPanel",o="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const u=a.frontmatter.slug,d=Array.isArray(c)?c:[c],b=d.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===r)),h=d.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===i)),m=null===(t=b.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===o)),p=m.findIndex((e=>u.endsWith(e.props.href))),f=-1===p?0:p,g=0===f?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return l.createElement(s.a,{initiallyActiveTab:f},l.createElement(s.a.TabList,{className:"page-tabs-list"},m.map((e=>l.createElement(s.a.Tab,{key:e.props.href,onClick:()=>(0,n.navigate)(""+("/"===e.props.href?g:g+e.props.href))},e.props.children)))),m.map(((e,t)=>l.createElement(s.a.TabPanel,{key:e.props.href},f===t?h.props.children:l.createElement("div",null)))))},u=e=>{let{children:t}=e;return l.createElement(s.a.TabList,null,t)};u.componentName=r;const d=e=>{let{href:t,slug:a,children:n}=e;return l.createElement(s.a.Tab,null,n)};d.componentName=o;const b=e=>{let{children:t}=e;return l.createElement(s.a.TabPanel,null,t)};b.componentName=i,c.TabList=u,c.Tab=d,c.TabPanel=b,t.Z=c},57674:function(e,t,a){var l=a(67294),n=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return l.createElement(n.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},l.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>l.createElement("li",{key:t},l.createElement("span",{className:"status-name"},t),l.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-icon-code-mdx-6d62697d568f0841e2d8.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-icon-code-mdx-6d62697d568f0841e2d8.js
new file mode 100644
index 00000000000..cffd8bbe80c
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-icon-code-mdx-6d62697d568f0841e2d8.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[733,623],{83428:function(e,a,t){t.d(a,{S:function(){return o}});var n=t(80136),l=t(67294),s=t(7444),r=t(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,s.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const c=e=>{let{icon:a}=e;return l.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},a)},o=e=>{var{children:a,className:t,dataTestId:s,type:o="neutral",iconLeft:d}=e,m=(0,n._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(i.statusLabel,i[o],d&&i.statusLabelWithIcon,t),"data-testid":s},m),d&&l.createElement(c,{icon:d}),a)}},61110:function(e,a,t){t.r(a);var n=t(11151),l=t(67294),s=t(70476),r=t(68601);const i=e=>{let{children:a,pageContext:t}=e;return l.createElement(r.default,{pageContext:t},a)};function c(e){const a=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",h4:"h4",pre:"pre",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",strong:"strong"},(0,n.ah)(),e.components),{Playground:t,IconCheckCircleFill:r,Link:i,ExternalLink:c}=a;return c||o("ExternalLink",!0),r||o("IconCheckCircleFill",!0),i||o("Link",!0),t||o("Playground",!0),l.createElement(l.Fragment,null,l.createElement(a.h2,{id:"code",style:{position:"relative"}},"Code",l.createElement(a.a,{href:"#code","aria-label":"code permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.h3,{id:"code-examples",style:{position:"relative"}},"Code examples",l.createElement(a.a,{href:"#code-examples","aria-label":"code examples permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.h4,{id:"default",style:{position:"relative"}},"Default",l.createElement(a.a,{href:"#default","aria-label":"default permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t,{scope:{IconFaceSmile:s.U}},l.createElement(a.pre,null,l.createElement(a.code,{className:"language-jsx"},"import { IconFaceSmile } from 'hds-react';\n\n() => <IconFaceSmile aria-hidden=\"true\" />\n")),l.createElement(a.pre,null,l.createElement(a.code,{className:"language-html"},'<span class="hds-icon hds-icon--face-smile hds-icon--size-s" aria-hidden="true"></span>\n'))),"\n",l.createElement(a.h3,{id:"icon-sizes",style:{position:"relative"}},"Icon sizes",l.createElement(a.a,{href:"#icon-sizes","aria-label":"icon sizes permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t,{scope:{IconFaceSmile:s.U}},l.createElement(a.pre,null,l.createElement(a.code,{className:"language-jsx"},'import { IconFaceSmile } from \'hds-react\';\n\n() => (<>\n  <IconFaceSmile size="xs" aria-hidden="true" />\n  <IconFaceSmile size="s" aria-hidden="true" />\n  <IconFaceSmile size="m" aria-hidden="true" />\n  <IconFaceSmile size="l" aria-hidden="true" />\n  <IconFaceSmile size="xl" aria-hidden="true" />\n</>)\n')),l.createElement(a.pre,null,l.createElement(a.code,{className:"language-html"},'<div>\n  <span class="hds-icon hds-icon--face-smile hds-icon--size-xs" aria-hidden="true"></span>\n  <span class="hds-icon hds-icon--face-smile hds-icon--size-s" aria-hidden="true"></span>\n  <span class="hds-icon hds-icon--face-smile hds-icon--size-m" aria-hidden="true"></span>\n  <span class="hds-icon hds-icon--face-smile hds-icon--size-l" aria-hidden="true"></span>\n  <span class="hds-icon hds-icon--face-smile hds-icon--size-xl" aria-hidden="true"></span>\n</div>\n'))),"\n",l.createElement(a.h3,{id:"icon-visible-for-assistive-technologies",style:{position:"relative"}},"Icon visible for assistive technologies",l.createElement(a.a,{href:"#icon-visible-for-assistive-technologies","aria-label":"icon visible for assistive technologies permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t,{scope:{IconPlusCircle:s.aH}},l.createElement(a.pre,null,l.createElement(a.code,{className:"language-jsx"},"import { IconPlusCircle } from 'hds-react';\n\n() => <IconPlusCircle aria-label=\"Add an item\" />\n")),l.createElement(a.pre,null,l.createElement(a.code,{className:"language-html"},'<span class="hds-icon hds-icon--plus-circle hds-icon--size-s" aria-label="Add an item"></span>\n'))),"\n",l.createElement(a.h3,{id:"packages",style:{position:"relative"}},"Packages",l.createElement(a.a,{href:"#packages","aria-label":"packages permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.table,null,l.createElement(a.thead,null,l.createElement(a.tr,null,l.createElement(a.th,null,"Package"),l.createElement(a.th,null,"Included"),l.createElement(a.th,null,"Storybook link"),l.createElement(a.th,null,"Source link"))),l.createElement(a.tbody,null,l.createElement(a.tr,null,l.createElement(a.td,null,l.createElement(a.strong,null,"HDS React")),l.createElement(a.td,null,l.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},l.createElement(r)," Yes ")),l.createElement(a.td,null,l.createElement(i,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/docs/icons"},"View in Storybook")),l.createElement(a.td,null,l.createElement(c,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/react/src/icons"},"View source"))),l.createElement(a.tr,null,l.createElement(a.td,null,l.createElement(a.strong,null,"HDS Core")),l.createElement(a.td,null,l.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},l.createElement(r)," Yes ")),l.createElement(a.td,null,l.createElement(i,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/core/?path=/story/icons"},"View in Storybook")),l.createElement(a.td,null,l.createElement(c,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/core/src/icons"},"View source"))))))}function o(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){return void 0===e&&(e={}),l.createElement(i,e,l.createElement(c,e))}},68601:function(e,a,t){t.r(a);var n=t(11151),l=t(67294),s=t(83428),r=t(57674),i=(t(18607),t(26127)),c=t(89482);function o(e){const a=Object.assign({h1:"h1",a:"a",span:"span"},(0,n.ah)(),e.components);return i.Z||d("PageTabs",!1),i.Z.Tab||d("PageTabs.Tab",!0),i.Z.TabList||d("PageTabs.TabList",!0),i.Z.TabPanel||d("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(a.h1,{id:"icon",style:{position:"relative"}},"Icon",l.createElement(a.a,{href:"#icon","aria-label":"icon permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(s.S,{type:"info"},"Stable"),l.createElement(s.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(c.Z,null,"Icons are used for providing visual cues and highlighting actions, denoting types and classes of information, and giving additional meaning to content."),"\n",l.createElement(i.Z,{pageContext:e.pageContext},l.createElement(i.Z.TabList,null,l.createElement(i.Z.Tab,{href:"/"},"Usage"),l.createElement(i.Z.Tab,{href:"/code"},"Code"),l.createElement(i.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(i.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(i.Z.TabPanel,null,e.children)))}function d(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,n.ah)(),e.components);return a?l.createElement(a,e,l.createElement(o,e)):o(e)}},89482:function(e,a,t){var n=t(67294);a.Z=e=>{let{color:a="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:l={},children:s}=e;return n.createElement("p",{style:{fontSize:t,color:a,maxWidth:600,...l}},s)}},26127:function(e,a,t){var n=t(67294),l=t(14160),s=t(94671);const r="PageTabList",i="PageTabPanel",c="PageTab",o=e=>{var a;let{pageContext:t,children:o}=e;const d=t.frontmatter.slug,m=Array.isArray(o)?o:[o],h=m.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===r)),u=m.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===i)),p=null===(a=h.props)||void 0===a?void 0:a.children.filter((e=>e.type.componentName===c)),b=p.findIndex((e=>d.endsWith(e.props.href))),g=-1===b?0:b,E=0===g?d:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(d);return n.createElement(s.a,{initiallyActiveTab:g},n.createElement(s.a.TabList,{className:"page-tabs-list"},p.map((e=>n.createElement(s.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?E:E+e.props.href))},e.props.children)))),p.map(((e,a)=>n.createElement(s.a.TabPanel,{key:e.props.href},g===a?u.props.children:n.createElement("div",null)))))},d=e=>{let{children:a}=e;return n.createElement(s.a.TabList,null,a)};d.componentName=r;const m=e=>{let{href:a,slug:t,children:l}=e;return n.createElement(s.a.Tab,null,l)};m.componentName=c;const h=e=>{let{children:a}=e;return n.createElement(s.a.TabPanel,null,a)};h.componentName=i,o.TabList=d,o.Tab=m,o.TabPanel=h,a.Z=o},57674:function(e,a,t){var n=t(67294),l=t(45422);a.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return n.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},n.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((a=>n.createElement("li",{key:a},n.createElement("span",{className:"status-name"},a),n.createElement("span",null,e[a]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-icon-customisation-mdx-d3c4900073d9b3081b05.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-icon-customisation-mdx-d3c4900073d9b3081b05.js
new file mode 100644
index 00000000000..b50bf9608bc
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-icon-customisation-mdx-d3c4900073d9b3081b05.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[6987,623],{83428:function(e,a,t){t.d(a,{S:function(){return c}});var s=t(80136),n=t(67294),l=t(7444),r=t(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,l.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const i=e=>{let{icon:a}=e;return n.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},a)},c=e=>{var{children:a,className:t,dataTestId:l,type:c="neutral",iconLeft:d}=e,u=(0,s._)(e,["children","className","dataTestId","type","iconLeft"]);return n.createElement("span",Object.assign({className:(0,r.c)(o.statusLabel,o[c],d&&o.statusLabelWithIcon,t),"data-testid":l},u),d&&n.createElement(i,{icon:d}),a)}},52076:function(e,a,t){t.r(a);var s=t(11151),n=t(67294),l=t(70476),r=t(68601);const o=e=>{let{children:a,pageContext:t}=e;return n.createElement(r.default,{pageContext:t},a)};function i(e){const a=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",p:"p",code:"code",pre:"pre"},(0,s.ah)(),e.components),{Playground:t}=a;return t||function(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Playground",!0),n.createElement(n.Fragment,null,n.createElement(a.h2,{id:"customisation",style:{position:"relative"}},"Customisation",n.createElement(a.a,{href:"#customisation","aria-label":"customisation permalink",className:"header-anchor after"},n.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(a.h3,{id:"customisation-properties",style:{position:"relative"}},"Customisation properties",n.createElement(a.a,{href:"#customisation-properties","aria-label":"customisation properties permalink",className:"header-anchor after"},n.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(a.p,null,"Customising icons is rather simple. Use the ",n.createElement(a.code,null,"size")," property to control size and the ",n.createElement(a.code,null,"color")," property to control colour."),"\n",n.createElement(a.h3,{id:"customisation-example",style:{position:"relative"}},"Customisation example",n.createElement(a.a,{href:"#customisation-example","aria-label":"customisation example permalink",className:"header-anchor after"},n.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t,{scope:{IconFaceSmile:l.U}},n.createElement(a.pre,null,n.createElement(a.code,{className:"language-jsx"},'import { IconFaceSmile } from \'hds-react\';\n\n() => (\n<>\n<IconFaceSmile size="xs" color="var(--color-bus)" aria-hidden="true" />\n<IconFaceSmile size="s" color="var(--color-brick)" aria-hidden="true" />\n<IconFaceSmile size="m" color="var(--color-coat-of-arms)" aria-hidden="true" />\n<IconFaceSmile size="l" color="var(--color-tram)" aria-hidden="true" />\n<IconFaceSmile size="xl" color="var(--color-metro)" aria-hidden="true" />\n</>)\n')),n.createElement(a.pre,null,n.createElement(a.code,{className:"language-html"},'<div>\n<span class="hds-icon hds-icon--face-smile hds-icon--size-xs" style="color: var(--color-bus)" aria-hidden="true"></span>\n<span class="hds-icon hds-icon--face-smile hds-icon--size-s" style="color: var(--color-brick)" aria-hidden="true"></span>\n<span class="hds-icon hds-icon--face-smile hds-icon--size-m" style="color: var(--color-coat-of-arms)" aria-hidden="true"></span>\n<span class="hds-icon hds-icon--face-smile hds-icon--size-l" style="color: var(--color-tram)" aria-hidden="true"></span>\n<span class="hds-icon hds-icon--face-smile hds-icon--size-xl" style="color: var(--color-metro)" aria-hidden="true"></span>\n</div>\n'))))}a.default=function(e){return void 0===e&&(e={}),n.createElement(o,e,n.createElement(i,e))}},68601:function(e,a,t){t.r(a);var s=t(11151),n=t(67294),l=t(83428),r=t(57674),o=(t(18607),t(26127)),i=t(89482);function c(e){const a=Object.assign({h1:"h1",a:"a",span:"span"},(0,s.ah)(),e.components);return o.Z||d("PageTabs",!1),o.Z.Tab||d("PageTabs.Tab",!0),o.Z.TabList||d("PageTabs.TabList",!0),o.Z.TabPanel||d("PageTabs.TabPanel",!0),n.createElement(n.Fragment,null,n.createElement(a.h1,{id:"icon",style:{position:"relative"}},"Icon",n.createElement(a.a,{href:"#icon","aria-label":"icon permalink",className:"header-anchor after"},n.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement("div",{class:"status-label-description"},n.createElement(l.S,{type:"info"},"Stable"),n.createElement(l.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),n.createElement(r.Z)),"\n",n.createElement(i.Z,null,"Icons are used for providing visual cues and highlighting actions, denoting types and classes of information, and giving additional meaning to content."),"\n",n.createElement(o.Z,{pageContext:e.pageContext},n.createElement(o.Z.TabList,null,n.createElement(o.Z.Tab,{href:"/"},"Usage"),n.createElement(o.Z.Tab,{href:"/code"},"Code"),n.createElement(o.Z.Tab,{href:"/accessibility"},"Accessibility"),n.createElement(o.Z.Tab,{href:"/customisation"},"Customisation")),n.createElement(o.Z.TabPanel,null,e.children)))}function d(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,s.ah)(),e.components);return a?n.createElement(a,e,n.createElement(c,e)):c(e)}},89482:function(e,a,t){var s=t(67294);a.Z=e=>{let{color:a="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:n={},children:l}=e;return s.createElement("p",{style:{fontSize:t,color:a,maxWidth:600,...n}},l)}},26127:function(e,a,t){var s=t(67294),n=t(14160),l=t(94671);const r="PageTabList",o="PageTabPanel",i="PageTab",c=e=>{var a;let{pageContext:t,children:c}=e;const d=t.frontmatter.slug,u=Array.isArray(c)?c:[c],m=u.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===r)),h=u.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===o)),p=null===(a=m.props)||void 0===a?void 0:a.children.filter((e=>e.type.componentName===i)),b=p.findIndex((e=>d.endsWith(e.props.href))),f=-1===b?0:b,g=0===f?d:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(d);return s.createElement(l.a,{initiallyActiveTab:f},s.createElement(l.a.TabList,{className:"page-tabs-list"},p.map((e=>s.createElement(l.a.Tab,{key:e.props.href,onClick:()=>(0,n.navigate)(""+("/"===e.props.href?g:g+e.props.href))},e.props.children)))),p.map(((e,a)=>s.createElement(l.a.TabPanel,{key:e.props.href},f===a?h.props.children:s.createElement("div",null)))))},d=e=>{let{children:a}=e;return s.createElement(l.a.TabList,null,a)};d.componentName=r;const u=e=>{let{href:a,slug:t,children:n}=e;return s.createElement(l.a.Tab,null,n)};u.componentName=i;const m=e=>{let{children:a}=e;return s.createElement(l.a.TabPanel,null,a)};m.componentName=o,c.TabList=d,c.Tab=u,c.TabPanel=m,a.Z=c},57674:function(e,a,t){var s=t(67294),n=t(45422);a.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return s.createElement(n.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},s.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((a=>s.createElement("li",{key:a},s.createElement("span",{className:"status-name"},a),s.createElement("span",null,e[a]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-icon-index-mdx-3ca1a10ae69d919facdc.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-icon-index-mdx-3ca1a10ae69d919facdc.js
new file mode 100644
index 00000000000..79063d7439d
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-icon-index-mdx-3ca1a10ae69d919facdc.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[3528,623],{83428:function(e,a,t){t.d(a,{S:function(){return c}});var n=t(80136),l=t(67294),s=t(7444),i=t(34300),r={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,s.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:a}=e;return l.createElement("span",{className:r.statusLabelIcon,"aria-hidden":"true"},a)},c=e=>{var{children:a,className:t,dataTestId:s,type:c="neutral",iconLeft:d}=e,h=(0,n._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,i.c)(r.statusLabel,r[c],d&&r.statusLabelWithIcon,t),"data-testid":s},h),d&&l.createElement(o,{icon:d}),a)}},49396:function(e,a,t){t.r(a);var n=t(11151),l=t(67294),s=t(70476),i=t(68601);const r=e=>{let{children:a,pageContext:t}=e;return l.createElement(i.default,{pageContext:t},a)};function o(e){const a=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",p:"p",ul:"ul",li:"li",strong:"strong",h4:"h4"},(0,n.ah)(),e.components),{PlaygroundPreview:t,InternalLink:i}=a;return i||c("InternalLink",!0),t||c("PlaygroundPreview",!0),l.createElement(l.Fragment,null,l.createElement(a.h2,{id:"usage",style:{position:"relative"}},"Usage",l.createElement(a.a,{href:"#usage","aria-label":"usage permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.h3,{id:"example",style:{position:"relative"}},"Example",l.createElement(a.a,{href:"#example","aria-label":"example permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t,null,l.createElement(s.U)),"\n",l.createElement(a.p,null,"See the ",l.createElement(i,{href:"/foundation/visual-assets/icons"},"the icon library")," to browse a full list of HDS icons."),"\n",l.createElement(a.h3,{id:"principles",style:{position:"relative"}},"Principles",l.createElement(a.a,{href:"#principles","aria-label":"principles permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.ul,null,"\n",l.createElement(a.li,null,l.createElement(a.strong,null,"An icon should always serve a distinct, easily understandable purpose.")," Icons should not be used solely for decoration."),"\n",l.createElement(a.li,null,l.createElement(a.strong,null,"An icon should preferably be accompanied with a text label to give context for interpretation.")," The meaning of icons by them self can be ambiguous and change depending on the context. Label can be omitted only if the meaning of the icon is commonly established, or can be easily interpreted from the context, e.g. volume buttons in video playback."),"\n",l.createElement(a.li,null,l.createElement(a.strong,null,"An icon and its related content or label should have the same meaning.")," Conflicting and ambivalent interpretations can have a negative effect on usability and accessibility."),"\n"),"\n",l.createElement(a.h3,{id:"variations",style:{position:"relative"}},"Variations",l.createElement(a.a,{href:"#variations","aria-label":"variations permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.h4,{id:"default",style:{position:"relative"}},"Default",l.createElement(a.a,{href:"#default","aria-label":"default permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t,null,l.createElement(s.U,{"aria-hidden":"true"})),"\n",l.createElement(a.h4,{id:"icon-sizes",style:{position:"relative"}},"Icon sizes",l.createElement(a.a,{href:"#icon-sizes","aria-label":"icon sizes permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t,null,l.createElement(s.U,{size:"xs","aria-hidden":"true"}),l.createElement(s.U,{size:"s","aria-hidden":"true"}),l.createElement(s.U,{size:"m","aria-hidden":"true"}),l.createElement(s.U,{size:"l","aria-hidden":"true"}),l.createElement(s.U,{size:"xl","aria-hidden":"true"})),"\n",l.createElement(a.h3,{id:"icon-visible-for-assistive-technologies",style:{position:"relative"}},"Icon visible for assistive technologies",l.createElement(a.a,{href:"#icon-visible-for-assistive-technologies","aria-label":"icon visible for assistive technologies permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.p,null,"If the icon has a meaning or is used as an interactive element, it should not be hidden from assistive technologies. This is important if, for example, you are using icons as buttons."),"\n",l.createElement(t,null,l.createElement(s.aH,{"aria-label":"Add an item"})))}function c(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){return void 0===e&&(e={}),l.createElement(r,e,l.createElement(o,e))}},68601:function(e,a,t){t.r(a);var n=t(11151),l=t(67294),s=t(83428),i=t(57674),r=(t(18607),t(26127)),o=t(89482);function c(e){const a=Object.assign({h1:"h1",a:"a",span:"span"},(0,n.ah)(),e.components);return r.Z||d("PageTabs",!1),r.Z.Tab||d("PageTabs.Tab",!0),r.Z.TabList||d("PageTabs.TabList",!0),r.Z.TabPanel||d("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(a.h1,{id:"icon",style:{position:"relative"}},"Icon",l.createElement(a.a,{href:"#icon","aria-label":"icon permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(s.S,{type:"info"},"Stable"),l.createElement(s.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(i.Z)),"\n",l.createElement(o.Z,null,"Icons are used for providing visual cues and highlighting actions, denoting types and classes of information, and giving additional meaning to content."),"\n",l.createElement(r.Z,{pageContext:e.pageContext},l.createElement(r.Z.TabList,null,l.createElement(r.Z.Tab,{href:"/"},"Usage"),l.createElement(r.Z.Tab,{href:"/code"},"Code"),l.createElement(r.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(r.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(r.Z.TabPanel,null,e.children)))}function d(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,n.ah)(),e.components);return a?l.createElement(a,e,l.createElement(c,e)):c(e)}},89482:function(e,a,t){var n=t(67294);a.Z=e=>{let{color:a="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:l={},children:s}=e;return n.createElement("p",{style:{fontSize:t,color:a,maxWidth:600,...l}},s)}},26127:function(e,a,t){var n=t(67294),l=t(14160),s=t(94671);const i="PageTabList",r="PageTabPanel",o="PageTab",c=e=>{var a;let{pageContext:t,children:c}=e;const d=t.frontmatter.slug,h=Array.isArray(c)?c:[c],u=h.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===i)),m=h.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===r)),b=null===(a=u.props)||void 0===a?void 0:a.children.filter((e=>e.type.componentName===o)),p=b.findIndex((e=>d.endsWith(e.props.href))),f=-1===p?0:p,g=0===f?d:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(d);return n.createElement(s.a,{initiallyActiveTab:f},n.createElement(s.a.TabList,{className:"page-tabs-list"},b.map((e=>n.createElement(s.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?g:g+e.props.href))},e.props.children)))),b.map(((e,a)=>n.createElement(s.a.TabPanel,{key:e.props.href},f===a?m.props.children:n.createElement("div",null)))))},d=e=>{let{children:a}=e;return n.createElement(s.a.TabList,null,a)};d.componentName=i;const h=e=>{let{href:a,slug:t,children:l}=e;return n.createElement(s.a.Tab,null,l)};h.componentName=o;const u=e=>{let{children:a}=e;return n.createElement(s.a.TabPanel,null,a)};u.componentName=r,c.TabList=d,c.Tab=h,c.TabPanel=u,a.Z=c},57674:function(e,a,t){var n=t(67294),l=t(45422);a.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return n.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},n.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((a=>n.createElement("li",{key:a},n.createElement("span",{className:"status-name"},a),n.createElement("span",null,e[a]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-icon-tabs-mdx-b50236435e5bcca0d28b.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-icon-tabs-mdx-b50236435e5bcca0d28b.js
new file mode 100644
index 00000000000..7b9645115de
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-icon-tabs-mdx-b50236435e5bcca0d28b.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[623],{83428:function(e,a,t){t.d(a,{S:function(){return i}});var s=t(80136),l=t(67294),n=t(7444),r=t(34300),c={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:a}=e;return l.createElement("span",{className:c.statusLabelIcon,"aria-hidden":"true"},a)},i=e=>{var{children:a,className:t,dataTestId:n,type:i="neutral",iconLeft:u}=e,b=(0,s._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(c.statusLabel,c[i],u&&c.statusLabelWithIcon,t),"data-testid":n},b),u&&l.createElement(o,{icon:u}),a)}},68601:function(e,a,t){t.r(a);var s=t(11151),l=t(67294),n=t(83428),r=t(57674),c=(t(18607),t(26127)),o=t(89482);function i(e){const a=Object.assign({h1:"h1",a:"a",span:"span"},(0,s.ah)(),e.components);return c.Z||u("PageTabs",!1),c.Z.Tab||u("PageTabs.Tab",!0),c.Z.TabList||u("PageTabs.TabList",!0),c.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(a.h1,{id:"icon",style:{position:"relative"}},"Icon",l.createElement(a.a,{href:"#icon","aria-label":"icon permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(n.S,{type:"info"},"Stable"),l.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(o.Z,null,"Icons are used for providing visual cues and highlighting actions, denoting types and classes of information, and giving additional meaning to content."),"\n",l.createElement(c.Z,{pageContext:e.pageContext},l.createElement(c.Z.TabList,null,l.createElement(c.Z.Tab,{href:"/"},"Usage"),l.createElement(c.Z.Tab,{href:"/code"},"Code"),l.createElement(c.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(c.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(c.Z.TabPanel,null,e.children)))}function u(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,s.ah)(),e.components);return a?l.createElement(a,e,l.createElement(i,e)):i(e)}},89482:function(e,a,t){var s=t(67294);a.Z=e=>{let{color:a="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:l={},children:n}=e;return s.createElement("p",{style:{fontSize:t,color:a,maxWidth:600,...l}},n)}},26127:function(e,a,t){var s=t(67294),l=t(14160),n=t(94671);const r="PageTabList",c="PageTabPanel",o="PageTab",i=e=>{var a;let{pageContext:t,children:i}=e;const u=t.frontmatter.slug,b=Array.isArray(i)?i:[i],d=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===r)),m=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===c)),h=null===(a=d.props)||void 0===a?void 0:a.children.filter((e=>e.type.componentName===o)),p=h.findIndex((e=>u.endsWith(e.props.href))),_=-1===p?0:p,g=0===_?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return s.createElement(n.a,{initiallyActiveTab:_},s.createElement(n.a.TabList,{className:"page-tabs-list"},h.map((e=>s.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?g:g+e.props.href))},e.props.children)))),h.map(((e,a)=>s.createElement(n.a.TabPanel,{key:e.props.href},_===a?m.props.children:s.createElement("div",null)))))},u=e=>{let{children:a}=e;return s.createElement(n.a.TabList,null,a)};u.componentName=r;const b=e=>{let{href:a,slug:t,children:l}=e;return s.createElement(n.a.Tab,null,l)};b.componentName=o;const d=e=>{let{children:a}=e;return s.createElement(n.a.TabPanel,null,a)};d.componentName=c,i.TabList=u,i.Tab=b,i.TabPanel=d,a.Z=i},57674:function(e,a,t){var s=t(67294),l=t(45422);a.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return s.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},s.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((a=>s.createElement("li",{key:a},s.createElement("span",{className:"status-name"},a),s.createElement("span",null,e[a]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-koros-accessibility-mdx-14688330bea14d22ebe4.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-koros-accessibility-mdx-14688330bea14d22ebe4.js
new file mode 100644
index 00000000000..69381e9e662
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-koros-accessibility-mdx-14688330bea14d22ebe4.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[3429,8365],{83428:function(e,t,a){a.d(t,{S:function(){return c}});var s=a(80136),n=a(67294),l=a(7444),r=a(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,l.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const i=e=>{let{icon:t}=e;return n.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:l,type:c="neutral",iconLeft:u}=e,d=(0,s._)(e,["children","className","dataTestId","type","iconLeft"]);return n.createElement("span",Object.assign({className:(0,r.c)(o.statusLabel,o[c],u&&o.statusLabelWithIcon,a),"data-testid":l},d),u&&n.createElement(i,{icon:u}),t)}},58625:function(e,t,a){a.r(t);var s=a(11151),n=a(67294),l=a(90203),r=a(1076);const o=e=>{let{children:t,pageContext:a}=e;return n.createElement(l.default,{pageContext:a},t)};function i(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",strong:"strong"},(0,s.ah)(),e.components);return n.createElement(n.Fragment,null,n.createElement(t.h2,{id:"accessibility",style:{position:"relative"}},"Accessibility",n.createElement(t.a,{href:"#accessibility","aria-label":"accessibility permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.h3,{id:"pay-attention-to",style:{position:"relative"}},"Pay attention to",n.createElement(t.a,{href:"#pay-attention-to","aria-label":"pay attention to permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.ul,null,"\n",n.createElement(t.li,null,"Koros are decorative items and should be used in background and hidden from screen readers. See e.g. ",n.createElement(r.Z,{href:"/components/hero"},"Hero")," and ",n.createElement(r.Z,{href:"/components/footer"},"Footer"),"."),"\n",n.createElement(t.li,null,n.createElement(t.strong,null,"Note that in this documentation the koros have alt texts as they present the component and are therefore important content.")),"\n",n.createElement(t.li,null,"Koros are not interactive elements and do not receive focus."),"\n"))}t.default=function(e){return void 0===e&&(e={}),n.createElement(o,e,n.createElement(i,e))}},90203:function(e,t,a){a.r(t);var s=a(11151),n=a(67294),l=a(83428),r=a(57674),o=a(89482),i=a(26127);function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,s.ah)(),e.components);return i.Z||u("PageTabs",!1),i.Z.Tab||u("PageTabs.Tab",!0),i.Z.TabList||u("PageTabs.TabList",!0),i.Z.TabPanel||u("PageTabs.TabPanel",!0),n.createElement(n.Fragment,null,n.createElement(t.h1,{id:"koros",style:{position:"relative"}},"Koros",n.createElement(t.a,{href:"#koros","aria-label":"koros permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement("div",{class:"status-label-description"},n.createElement(l.S,{type:"info"},"Stable"),n.createElement(l.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),n.createElement(r.Z)),"\n",n.createElement(o.Z,null,"Koros, also known as Wave motifs, are part of the visual identity of City of Helsinki. The Koros can be used as visual elements, for example as part of the hero image or the footer and as a divider of content in the user interface."),"\n",n.createElement(i.Z,{pageContext:e.pageContext},n.createElement(i.Z.TabList,null,n.createElement(i.Z.Tab,{href:"/"},"Usage"),n.createElement(i.Z.Tab,{href:"/code"},"Code"),n.createElement(i.Z.Tab,{href:"/accessibility"},"Accessibility"),n.createElement(i.Z.Tab,{href:"/customisation"},"Customisation")),n.createElement(i.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,s.ah)(),e.components);return t?n.createElement(t,e,n.createElement(c,e)):c(e)}},89482:function(e,t,a){var s=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:n={},children:l}=e;return s.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...n}},l)}},26127:function(e,t,a){var s=a(67294),n=a(14160),l=a(94671);const r="PageTabList",o="PageTabPanel",i="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const u=a.frontmatter.slug,d=Array.isArray(c)?c:[c],b=d.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===r)),h=d.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===o)),m=null===(t=b.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===i)),p=m.findIndex((e=>u.endsWith(e.props.href))),f=-1===p?0:p,_=0===f?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return s.createElement(l.a,{initiallyActiveTab:f},s.createElement(l.a.TabList,{className:"page-tabs-list"},m.map((e=>s.createElement(l.a.Tab,{key:e.props.href,onClick:()=>(0,n.navigate)(""+("/"===e.props.href?_:_+e.props.href))},e.props.children)))),m.map(((e,t)=>s.createElement(l.a.TabPanel,{key:e.props.href},f===t?h.props.children:s.createElement("div",null)))))},u=e=>{let{children:t}=e;return s.createElement(l.a.TabList,null,t)};u.componentName=r;const d=e=>{let{href:t,slug:a,children:n}=e;return s.createElement(l.a.Tab,null,n)};d.componentName=i;const b=e=>{let{children:t}=e;return s.createElement(l.a.TabPanel,null,t)};b.componentName=o,c.TabList=u,c.Tab=d,c.TabPanel=b,t.Z=c},57674:function(e,t,a){var s=a(67294),n=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return s.createElement(n.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},s.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>s.createElement("li",{key:t},s.createElement("span",{className:"status-name"},t),s.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-koros-code-mdx-94b36bd444522e7e62ea.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-koros-code-mdx-94b36bd444522e7e62ea.js
new file mode 100644
index 00000000000..b69dd96fd2f
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-koros-code-mdx-94b36bd444522e7e62ea.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[1779,8365],{83428:function(e,t,n){n.d(t,{S:function(){return c}});var a=n(80136),s=n(67294),l=n(7444),r=n(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,l.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const i=e=>{let{icon:t}=e;return s.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:n,dataTestId:l,type:c="neutral",iconLeft:d}=e,h=(0,a._)(e,["children","className","dataTestId","type","iconLeft"]);return s.createElement("span",Object.assign({className:(0,r.c)(o.statusLabel,o[c],d&&o.statusLabelWithIcon,n),"data-testid":l},h),d&&s.createElement(i,{icon:d}),t)}},85824:function(e,t,n){n.r(t);var a=n(11151),s=n(67294),l=n(55810),r=n(90203);const o=e=>{let{children:t,pageContext:n}=e;return s.createElement(r.default,{pageContext:n},t)};function i(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",h4:"h4",pre:"pre",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",strong:"strong",p:"p"},(0,a.ah)(),e.components),{Playground:n,IconCheckCircleFill:r,Link:o,ExternalLink:i}=t;return i||c("ExternalLink",!0),r||c("IconCheckCircleFill",!0),o||c("Link",!0),n||c("Playground",!0),s.createElement(s.Fragment,null,s.createElement(t.h2,{id:"code",style:{position:"relative"}},"Code",s.createElement(t.a,{href:"#code","aria-label":"code permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.h3,{id:"code-examples",style:{position:"relative"}},"Code examples",s.createElement(t.a,{href:"#code-examples","aria-label":"code examples permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.h4,{id:"default",style:{position:"relative"}},"Default",s.createElement(t.a,{href:"#default","aria-label":"default permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(n,{scope:{Koros:l.K}},s.createElement(t.pre,null,s.createElement(t.code,{className:"language-jsx"},'import { Koros } from \'hds-react\';\n\n() => (<>\n  <Koros type="basic" style={{marginBottom: \'var(--spacing-xs\'}} aria-label="Basic koro example"/>\n  <Koros type="beat" style={{marginBottom: \'var(--spacing-xs\'}} />\n  <Koros type="pulse" style={{marginBottom: \'var(--spacing-xs\'}} />\n  <Koros type="vibration" style={{marginBottom: \'var(--spacing-xs\'}} />\n  <Koros type="wave" style={{marginBottom: \'var(--spacing-xs\'}} />\n  <Koros type="calm"/>\n</>)\n')),s.createElement(t.pre,null,s.createElement(t.code,{className:"language-html"},'<div>\n<div class="hds-koros" style="margin-bottom: var(--spacing-xs)">\n  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85">\n    <defs>\n      <pattern id="korosBasic" x="0" y="0" width="106" height="85" patternUnits="userSpaceOnUse">\n        <path\n          transform="scale(5.3)"\n          d="M0,800h20V0c-4.9,0-5,2.6-9.9,2.6S5,0,0,0V800z"\n        />\n      </pattern>\n    </defs>\n    <rect fill="url(#korosBasic)" width="100%" height="85" />\n  </svg>\n</div>\n<div class="hds-koros" style="margin-bottom: var(--spacing-xs)">\n  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85">\n    <defs>\n      <pattern id="korosBeat" x="0" y="0" width="106" height="85" patternUnits="userSpaceOnUse">\n      <path\n        transform="scale(5.3)"\n        d="M20,800H0V0c2.8,0,3.5,2.3,3.5,2.3l2.8,8.4c0.6,1.5,1.9,2.5,3.6,2.5c2.8,0,3.6-2.5,3.6-2.5s2.8-8.1,2.8-8.2 C17,1,18.3,0,20,0V800z"\n      />\n      </pattern>\n    </defs>\n    <rect fill="url(#korosBeat)" width="100%" height="85" />\n  </svg>\n</div>\n<div class="hds-koros" style="margin-bottom: var(--spacing-xs)">\n  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85">\n    <defs>\n      <pattern id="korosPulse" x="0" y="0" width="106" height="85" patternUnits="userSpaceOnUse">\n      <path\n        transform="scale(5.3)"\n        d="M0,800h20V0c-5.1,0-5.1,6.4-10,6.4S4.9,0,0,0V800z"\n      />\n      </pattern>\n    </defs>\n    <rect fill="url(#korosPulse)" width="100%" height="85" />\n  </svg>\n</div>\n<div class="hds-koros" style="margin-bottom: var(--spacing-xs)">\n  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85">\n    <defs>\n      <pattern id="korosVibration" x="0" y="0" width="106" height="85" patternUnits="userSpaceOnUse">\n      <polygon\n        transform="scale(5.3)"\n        points="0,800 20,800 20,0 9.8,10.1 0,0 "\n      />\n      </pattern>\n    </defs>\n    <rect fill="url(#korosVibration)" width="100%" height="85" />\n  </svg>\n</div>\n<div class="hds-koros" style="margin-bottom: var(--spacing-xs)">\n  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85">\n    <defs>\n      <pattern id="korosWave" x="0" y="0" width="106" height="85" patternUnits="userSpaceOnUse">\n      <path\n        transform="scale(5.3)"\n        d="M20,800V0c-2.3,5.5-8.7,8.1-14.3,5.7C3.1,4.7,1.2,2.6,0,0v800H20z"\n      />\n      </pattern>\n    </defs>\n    <rect fill="url(#korosWave)" width="100%" height="85" />\n  </svg>\n</div>\n<div class="hds-koros">\n  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85">\n    <defs>\n      <pattern id="korosCalm" x="0" y="0" width="106" height="85" patternUnits="userSpaceOnUse">\n      <path d="M788 0.279785H0V109.739H788V0.279785Z" />\n      </pattern>\n    </defs>\n    <rect fill="url(#korosCalm)" width="100%" height="85" />\n  </svg>\n</div>\n</div>\n'))),"\n",s.createElement(t.h4,{id:"dense",style:{position:"relative"}},"Dense",s.createElement(t.a,{href:"#dense","aria-label":"dense permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(n,{scope:{Koros:l.K}},s.createElement(t.pre,null,s.createElement(t.code,{className:"language-jsx"},"import { Koros } from 'hds-react';\n\n() => (<>\n  <Koros dense type=\"basic\" style={{marginBottom: 'var(--spacing-xs'}} />\n  <Koros dense type=\"beat\" style={{marginBottom: 'var(--spacing-xs'}} />\n  <Koros dense type=\"pulse\" style={{marginBottom: 'var(--spacing-xs'}} />\n  <Koros dense type=\"vibration\" style={{marginBottom: 'var(--spacing-xs'}} />\n  <Koros dense type=\"wave\" style={{marginBottom: 'var(--spacing-xs'}} />\n  <Koros dense type=\"calm\"/>\n</>)\n")),s.createElement(t.pre,null,s.createElement(t.code,{className:"language-html"},'<div>\n  <div class="hds-koros" style="margin-bottom: var(--spacing-xs)">\n    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85">\n      <defs>\n        <pattern id="korosBasic" x="0" y="0" width="35" height="85" patternUnits="userSpaceOnUse">\n          <path\n            transform="scale(1.8)"\n            d="M0,800h20V0c-4.9,0-5,2.6-9.9,2.6S5,0,0,0V800z"\n          />\n        </pattern>\n      </defs>\n      <rect fill="url(#korosBasic)" width="100%" height="85" />\n    </svg>\n  </div>\n  <div class="hds-koros" style="margin-bottom: var(--spacing-xs)">\n    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85">\n      <defs>\n        <pattern id="korosBeat" x="0" y="0" width="35" height="85" patternUnits="userSpaceOnUse">\n        <path\n          transform="scale(1.8)"\n          d="M20,800H0V0c2.8,0,3.5,2.3,3.5,2.3l2.8,8.4c0.6,1.5,1.9,2.5,3.6,2.5c2.8,0,3.6-2.5,3.6-2.5s2.8-8.1,2.8-8.2 C17,1,18.3,0,20,0V800z"\n        />\n        </pattern>\n      </defs>\n      <rect fill="url(#korosBeat)" width="100%" height="85" />\n    </svg>\n  </div>\n  <div class="hds-koros" style="margin-bottom: var(--spacing-xs)">\n    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85">\n      <defs>\n        <pattern id="korosPulse" x="0" y="0" width="35" height="85" patternUnits="userSpaceOnUse">\n        <path\n          transform="scale(1.8)"\n          d="M0,800h20V0c-5.1,0-5.1,6.4-10,6.4S4.9,0,0,0V800z"\n        />\n        </pattern>\n      </defs>\n      <rect fill="url(#korosPulse)" width="100%" height="85" />\n    </svg>\n  </div>\n  <div class="hds-koros" style="margin-bottom: var(--spacing-xs)">\n    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85">\n      <defs>\n        <pattern id="korosVibration" x="0" y="0" width="35" height="85" patternUnits="userSpaceOnUse">\n        <polygon\n          transform="scale(1.8)"\n          points="0,800 20,800 20,0 9.8,10.1 0,0 "\n        />\n        </pattern>\n      </defs>\n      <rect fill="url(#korosVibration)" width="100%" height="85" />\n    </svg>\n  </div>\n  <div class="hds-koros" style="margin-bottom: var(--spacing-xs)">\n    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85">\n      <defs>\n        <pattern id="korosWave" x="0" y="0" width="35" height="85" patternUnits="userSpaceOnUse">\n        <path\n          transform="scale(1.8)"\n          d="M20,800V0c-2.3,5.5-8.7,8.1-14.3,5.7C3.1,4.7,1.2,2.6,0,0v800H20z"\n        />\n        </pattern>\n      </defs>\n      <rect fill="url(#korosWave)" width="100%" height="85" />\n    </svg>\n  </div>\n  <div class="hds-koros">\n  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85">\n    <defs>\n      <pattern id="korosCalm" x="0" y="0" width="106" height="85" patternUnits="userSpaceOnUse">\n      <path d="M788 0.279785H0V109.739H788V0.279785Z" />\n      </pattern>\n    </defs>\n    <rect fill="url(#korosCalm)" width="100%" height="85" />\n  </svg>\n</div>\n</div>\n'))),"\n",s.createElement(t.h3,{id:"angled",style:{position:"relative"}},"Angled",s.createElement(t.a,{href:"#angled","aria-label":"angled permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(n,{scope:{Koros:l.K}},s.createElement(t.pre,null,s.createElement(t.code,{className:"language-jsx"},"import { Koros } from 'hds-react';\n\n() => {\n  const rootStyle = { '--koros-height': '85px', '--hero-height': '300px', '--hero-width': '100%' };\n  return (\n    <div\n      style={{\n        ...rootStyle,\n        backgroundColor: 'var(--color-silver-light)',\n        height: 'var(--hero-height)',\n        maxWidth: '100%',\n        overflow: 'hidden',\n        position: 'relative',\n        width: 'var(--hero-width)',\n      }}\n    >\n      <div\n        style={{\n          backgroundColor: 'var(--color-coat-of-arms)',\n          clipPath: 'polygon(0 0, var(--hero-height) 0, 0 100%, 0% 100%)',\n          height: '100%',\n        }}\n      />\n      <Koros\n        style={{\n          fill: 'var(--color-coat-of-arms)',\n          left: 'calc(-1 * var(--koros-height))',\n          position: 'absolute',\n          top: 'var(--koros-height)',\n          transformOrigin: 'center',\n          width: 'calc(2 * var(--hero-height))',\n        }}\n        rotate=\"135deg\"\n      />\n    </div>\n  );\n}\n")),s.createElement(t.pre,null,s.createElement(t.code,{className:"language-html"},'<div style="--koros-height:85px; --hero-height:300px; --hero-width:500px; background-color: var(--color-silver-light); height: var(--hero-height); max-width: 100%; overflow: hidden; position: relative; width: var(--hero-width);">\n  <div style="background-color: var(--color-coat-of-arms); clip-path: polygon(0 0, var(--hero-height) 0, 0 100%, 0% 100%); height: 100%;"></div>\n  <div class="hds-koros hds-koros--135deg hds-custom-koros" style="fill: var(--color-coat-of-arms); left: calc(-1 * var(--koros-height)); position: absolute; top: var(--koros-height); transform-origin: center center; width: calc(2 * var(--hero-height)); transform: rotate(135deg) translateZ(0px);">\n   <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85">\n     <defs>\n       <pattern id="korosBasic135deg" x="0" y="0" width="106" height="85" patternUnits="userSpaceOnUse">\n         <path transform="scale(5.3)" d="M0,800h20V0c-4.9,0-5,2.6-9.9,2.6S5,0,0,0V800z" />\n       </pattern>\n     </defs>\n     <rect fill="url(#korosBasic135deg)" width="100%" height="85" />\n   </svg>\n  </div>\n</div>\n'))),"\n",s.createElement(t.h3,{id:"packages",style:{position:"relative"}},"Packages",s.createElement(t.a,{href:"#packages","aria-label":"packages permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.table,null,s.createElement(t.thead,null,s.createElement(t.tr,null,s.createElement(t.th,null,"Package"),s.createElement(t.th,null,"Included"),s.createElement(t.th,null,"Storybook link"),s.createElement(t.th,null,"Source link"))),s.createElement(t.tbody,null,s.createElement(t.tr,null,s.createElement(t.td,null,s.createElement(t.strong,null,"HDS React")),s.createElement(t.td,null,s.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},s.createElement(r)," Yes ")),s.createElement(t.td,null,s.createElement(o,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/docs/components-koros--basic"},"View in Storybook")),s.createElement(t.td,null,s.createElement(i,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/react/src/components/koros"},"View source"))),s.createElement(t.tr,null,s.createElement(t.td,null,s.createElement(t.strong,null,"HDS Core")),s.createElement(t.td,null,s.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},s.createElement(r)," Yes ")),s.createElement(t.td,null,s.createElement(o,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/core/?path=/story/components-koros--basic"},"View in Storybook")),s.createElement(t.td,null,s.createElement(i,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/core/src/components/koros"},"View source"))))),"\n",s.createElement(t.h3,{id:"properties",style:{position:"relative"}},"Properties",s.createElement(t.a,{href:"#properties","aria-label":"properties permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.p,null,"Note! You can find the full list of properties in the ",s.createElement(o,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/docs/components-koros--basic"},"React Storybook.")),"\n",s.createElement(t.table,null,s.createElement(t.thead,null,s.createElement(t.tr,null,s.createElement(t.th,null,"Property"),s.createElement(t.th,null,"Description"),s.createElement(t.th,null,"Values"),s.createElement(t.th,null,"Default value"))),s.createElement(t.tbody,null,s.createElement(t.tr,null,s.createElement(t.td,null,s.createElement(t.code,null,"dense")),s.createElement(t.td,null,"If set to true, the dense koro variant is used."),s.createElement(t.td,null,s.createElement(t.code,null,"boolean")),s.createElement(t.td,null,"false")),s.createElement(t.tr,null,s.createElement(t.td,null,s.createElement(t.code,null,"flipVertical")),s.createElement(t.td,null,"If set to true, the koro shape will be flipped vertically."),s.createElement(t.td,null,s.createElement(t.code,null,"boolean")),s.createElement(t.td,null,"false")),s.createElement(t.tr,null,s.createElement(t.td,null,s.createElement(t.code,null,"rotate")),s.createElement(t.td,null,"Controls the rotation of the koro shape."),s.createElement(t.td,null,s.createElement(t.code,null,'"45deg"'),", ",s.createElement(t.code,null,'"90deg"'),", ",s.createElement(t.code,null,'"135deg"'),", ",s.createElement(t.code,null,'"180deg"'),", ",s.createElement(t.code,null,'"225deg"'),", ",s.createElement(t.code,null,'"270deg"'),", ",s.createElement(t.code,null,'"315deg"')),s.createElement(t.td,null,"-")),s.createElement(t.tr,null,s.createElement(t.td,null,s.createElement(t.code,null,"type")),s.createElement(t.td,null,"Controls the type (shape) of the koro."),s.createElement(t.td,null,s.createElement(t.code,null,'"basic"'),", ",s.createElement(t.code,null,'"beat"'),", ",s.createElement(t.code,null,'"pulse"'),", ",s.createElement(t.code,null,'"wave"'),", ",s.createElement(t.code,null,'"vibration"'),", ",s.createElement(t.code,null,'"calm"')),s.createElement(t.td,null,s.createElement(t.code,null,'"basic"'))))))}function c(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){return void 0===e&&(e={}),s.createElement(o,e,s.createElement(i,e))}},90203:function(e,t,n){n.r(t);var a=n(11151),s=n(67294),l=n(83428),r=n(57674),o=n(89482),i=n(26127);function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,a.ah)(),e.components);return i.Z||d("PageTabs",!1),i.Z.Tab||d("PageTabs.Tab",!0),i.Z.TabList||d("PageTabs.TabList",!0),i.Z.TabPanel||d("PageTabs.TabPanel",!0),s.createElement(s.Fragment,null,s.createElement(t.h1,{id:"koros",style:{position:"relative"}},"Koros",s.createElement(t.a,{href:"#koros","aria-label":"koros permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement("div",{class:"status-label-description"},s.createElement(l.S,{type:"info"},"Stable"),s.createElement(l.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),s.createElement(r.Z)),"\n",s.createElement(o.Z,null,"Koros, also known as Wave motifs, are part of the visual identity of City of Helsinki. The Koros can be used as visual elements, for example as part of the hero image or the footer and as a divider of content in the user interface."),"\n",s.createElement(i.Z,{pageContext:e.pageContext},s.createElement(i.Z.TabList,null,s.createElement(i.Z.Tab,{href:"/"},"Usage"),s.createElement(i.Z.Tab,{href:"/code"},"Code"),s.createElement(i.Z.Tab,{href:"/accessibility"},"Accessibility"),s.createElement(i.Z.Tab,{href:"/customisation"},"Customisation")),s.createElement(i.Z.TabPanel,null,e.children)))}function d(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,a.ah)(),e.components);return t?s.createElement(t,e,s.createElement(c,e)):c(e)}},89482:function(e,t,n){var a=n(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:n="var(--fontsize-body-xl)",style:s={},children:l}=e;return a.createElement("p",{style:{fontSize:n,color:t,maxWidth:600,...s}},l)}},26127:function(e,t,n){var a=n(67294),s=n(14160),l=n(94671);const r="PageTabList",o="PageTabPanel",i="PageTab",c=e=>{var t;let{pageContext:n,children:c}=e;const d=n.frontmatter.slug,h=Array.isArray(c)?c:[c],m=h.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===r)),p=h.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===o)),u=null===(t=m.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===i)),g=u.findIndex((e=>d.endsWith(e.props.href))),b=-1===g?0:g,v=0===b?d:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(d);return a.createElement(l.a,{initiallyActiveTab:b},a.createElement(l.a.TabList,{className:"page-tabs-list"},u.map((e=>a.createElement(l.a.Tab,{key:e.props.href,onClick:()=>(0,s.navigate)(""+("/"===e.props.href?v:v+e.props.href))},e.props.children)))),u.map(((e,t)=>a.createElement(l.a.TabPanel,{key:e.props.href},b===t?p.props.children:a.createElement("div",null)))))},d=e=>{let{children:t}=e;return a.createElement(l.a.TabList,null,t)};d.componentName=r;const h=e=>{let{href:t,slug:n,children:s}=e;return a.createElement(l.a.Tab,null,s)};h.componentName=i;const m=e=>{let{children:t}=e;return a.createElement(l.a.TabPanel,null,t)};m.componentName=o,c.TabList=d,c.Tab=h,c.TabPanel=m,t.Z=c},57674:function(e,t,n){var a=n(67294),s=n(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return a.createElement(s.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},a.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>a.createElement("li",{key:t},a.createElement("span",{className:"status-name"},t),a.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-koros-customisation-mdx-7e6bc8d932947dc1d2b7.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-koros-customisation-mdx-7e6bc8d932947dc1d2b7.js
new file mode 100644
index 00000000000..cd339b89775
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-koros-customisation-mdx-7e6bc8d932947dc1d2b7.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[2151,8365],{83428:function(e,t,a){a.d(t,{S:function(){return c}});var s=a(80136),l=a(67294),n=a(7444),r=a(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const i=e=>{let{icon:t}=e;return l.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:n,type:c="neutral",iconLeft:u}=e,d=(0,s._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(o.statusLabel,o[c],u&&o.statusLabelWithIcon,a),"data-testid":n},d),u&&l.createElement(i,{icon:u}),t)}},45190:function(e,t,a){a.r(t);var s=a(11151),l=a(67294),n=a(12818),r=a(55810),o=a(90203);const i=e=>{let{children:t,pageContext:a}=e;return l.createElement(o.default,{pageContext:a},t)};function c(e){const t=Object.assign({h2:"h2",a:"a",span:"span",p:"p",h3:"h3",code:"code",pre:"pre"},(0,s.ah)(),e.components),{Playground:a}=t;return a||function(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Playground",!0),l.createElement(l.Fragment,null,l.createElement(t.h2,{id:"customisation",style:{position:"relative"}},"Customisation",l.createElement(t.a,{href:"#customisation","aria-label":"customisation permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n.N,{type:"alert",label:"Koros customisation works differently!",className:"siteNotification"},l.createElement(t.p,null,"Koros is an older HDS component and therefore its customisation works slightly differently. Instead of the\n",l.createElement("code",null,"theme")," property, you need to use the ",l.createElement("code",null,"style")," property. This will be fixed in a future update.")),"\n",l.createElement(t.h3,{id:"customisation-properties",style:{position:"relative"}},"Customisation properties",l.createElement(t.a,{href:"#customisation-properties","aria-label":"customisation properties permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"In Core version, you can either use the ",l.createElement(t.code,null,"style")," or ",l.createElement(t.code,null,"class")," attributes in the HTML to customise the component."),"\n",l.createElement(t.p,null,"In React version, you can either use the ",l.createElement(t.code,null,"style")," or ",l.createElement(t.code,null,"className")," properties to customise the component."),"\n",l.createElement(t.h3,{id:"customisation-example",style:{position:"relative"}},"Customisation example",l.createElement(t.a,{href:"#customisation-example","aria-label":"customisation example permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a,{scope:{Koros:r.K}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},"import { Koros } from 'hds-react';\n() => (\n<Koros style={{ fill: 'var(--color-coat-of-arms)' }} />)\n")),l.createElement(t.pre,null,l.createElement(t.code,{className:"language-html"},'<div class="hds-koros" style="fill: var(--color-coat-of-arms);">\n  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85">\n    <defs>\n      <pattern id="korosBasicCustom" x="0" y="0" width="106" height="85" patternUnits="userSpaceOnUse">\n        <path transform="scale(5.3)" d="M0,800h20V0c-4.9,0-5,2.6-9.9,2.6S5,0,0,0V800z" />\n      </pattern>\n    </defs>\n    <rect fill="url(#korosBasicCustom)" width="100%" height="85" />\n  </svg>\n</div>\n'))))}t.default=function(e){return void 0===e&&(e={}),l.createElement(i,e,l.createElement(c,e))}},90203:function(e,t,a){a.r(t);var s=a(11151),l=a(67294),n=a(83428),r=a(57674),o=a(89482),i=a(26127);function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,s.ah)(),e.components);return i.Z||u("PageTabs",!1),i.Z.Tab||u("PageTabs.Tab",!0),i.Z.TabList||u("PageTabs.TabList",!0),i.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"koros",style:{position:"relative"}},"Koros",l.createElement(t.a,{href:"#koros","aria-label":"koros permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(n.S,{type:"info"},"Stable"),l.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(o.Z,null,"Koros, also known as Wave motifs, are part of the visual identity of City of Helsinki. The Koros can be used as visual elements, for example as part of the hero image or the footer and as a divider of content in the user interface."),"\n",l.createElement(i.Z,{pageContext:e.pageContext},l.createElement(i.Z.TabList,null,l.createElement(i.Z.Tab,{href:"/"},"Usage"),l.createElement(i.Z.Tab,{href:"/code"},"Code"),l.createElement(i.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(i.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(i.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,s.ah)(),e.components);return t?l.createElement(t,e,l.createElement(c,e)):c(e)}},89482:function(e,t,a){var s=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:l={},children:n}=e;return s.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...l}},n)}},26127:function(e,t,a){var s=a(67294),l=a(14160),n=a(94671);const r="PageTabList",o="PageTabPanel",i="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const u=a.frontmatter.slug,d=Array.isArray(c)?c:[c],m=d.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===r)),h=d.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===o)),p=null===(t=m.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===i)),b=p.findIndex((e=>u.endsWith(e.props.href))),f=-1===b?0:b,g=0===f?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return s.createElement(n.a,{initiallyActiveTab:f},s.createElement(n.a.TabList,{className:"page-tabs-list"},p.map((e=>s.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?g:g+e.props.href))},e.props.children)))),p.map(((e,t)=>s.createElement(n.a.TabPanel,{key:e.props.href},f===t?h.props.children:s.createElement("div",null)))))},u=e=>{let{children:t}=e;return s.createElement(n.a.TabList,null,t)};u.componentName=r;const d=e=>{let{href:t,slug:a,children:l}=e;return s.createElement(n.a.Tab,null,l)};d.componentName=i;const m=e=>{let{children:t}=e;return s.createElement(n.a.TabPanel,null,t)};m.componentName=o,c.TabList=u,c.Tab=d,c.TabPanel=m,t.Z=c},57674:function(e,t,a){var s=a(67294),l=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return s.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},s.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>s.createElement("li",{key:t},s.createElement("span",{className:"status-name"},t),s.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-koros-index-mdx-3c13cd869bcb5507d276.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-koros-index-mdx-3c13cd869bcb5507d276.js
new file mode 100644
index 00000000000..93249ed796e
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-koros-index-mdx-3c13cd869bcb5507d276.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[9047,8365],{83428:function(e,a,t){t.d(a,{S:function(){return c}});var n=t(80136),l=t(67294),s=t(7444),r=t(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,s.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:a}=e;return l.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},a)},c=e=>{var{children:a,className:t,dataTestId:s,type:c="neutral",iconLeft:d}=e,m=(0,n._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(i.statusLabel,i[c],d&&i.statusLabelWithIcon,t),"data-testid":s},m),d&&l.createElement(o,{icon:d}),a)}},3485:function(e,a,t){t.r(a),t.d(a,{AngledVariation:function(){return o}});var n=t(11151),l=t(67294),s=t(55810),r=t(90203);const i=e=>{let{children:a,pageContext:t}=e;return l.createElement(r.default,{pageContext:t},a)},o=()=>{const e=Object.assign({div:"div"},(0,n.ah)());return l.createElement(e.div,{style:{"--koros-height":"85px","--hero-height":"300px","--hero-width":"100%",backgroundColor:"var(--color-silver-light)",height:"var(--hero-height)",maxWidth:"100%",overflow:"hidden",position:"relative",width:"var(--hero-width)"}},l.createElement(e.div,{style:{backgroundColor:"var(--color-coat-of-arms)",clipPath:"polygon(0 0, var(--hero-height) 0, 0 100%, 0% 100%)",height:"100%"}}),l.createElement(s.K,{style:{fill:"var(--color-coat-of-arms)",left:"calc(-1 * var(--koros-height))",position:"absolute",top:"var(--koros-height)",transformOrigin:"center",width:"calc(2 * var(--hero-height))"},rotate:"135deg"}))};function c(e){const a=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",h4:"h4",p:"p",code:"code"},(0,n.ah)(),e.components),{PlaygroundPreview:t,ExternalLink:r,InternalLink:i}=a;return r||d("ExternalLink",!0),i||d("InternalLink",!0),t||d("PlaygroundPreview",!0),l.createElement(l.Fragment,null,l.createElement(a.h2,{id:"usage",style:{position:"relative"}},"Usage",l.createElement(a.a,{href:"#usage","aria-label":"usage permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.h3,{id:"example",style:{position:"relative"}},"Example",l.createElement(a.a,{href:"#example","aria-label":"example permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t,null,l.createElement("div",{role:"img","aria-label":"Vibration motif example"},l.createElement(s.K,{type:"basic"}))),"\n",l.createElement(a.h3,{id:"principles",style:{position:"relative"}},"Principles",l.createElement(a.a,{href:"#principles","aria-label":"principles permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.ul,null,"\n",l.createElement(a.li,null,"Koros width should always match the screen width."),"\n",l.createElement(a.li,null,"Koros is a very powerful visual element. Use them sparingly in one view."),"\n",l.createElement(a.li,null,"Koros should only be used as filled. Do not use empty fill koros with borders."),"\n",l.createElement(a.li,null,"Use koros as part of a background. Do not create new visual elements using koros."),"\n",l.createElement(a.li,null,"It is allowed to animate Koros shapes (not included in the HDS yet)."),"\n",l.createElement(a.li,null,"A koro shape can be rotated in 45 degree increments. For more information see the ",l.createElement(a.a,{href:"#angled"},"Angled koro variant documentation")," below."),"\n",l.createElement(a.li,null,"Koros should be centered and have at least 2 full wave motif tips visible."),"\n",l.createElement(a.li,null,"Do not use Koro shapes as accent elements, for example to display active elements."),"\n",l.createElement(a.li,null,"It's recommended to use one Koro size and shape through the whole service."),"\n"),"\n",l.createElement(a.h3,{id:"variations",style:{position:"relative"}},"Variations",l.createElement(a.a,{href:"#variations","aria-label":"variations permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.h4,{id:"default",style:{position:"relative"}},"Default",l.createElement(a.a,{href:"#default","aria-label":"default permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.p,null,"There are six Koro styles. An added visual interest is brought to the identity by means of the Koros. Using Koros adds high visual impact and makes the user interface recognisable as part of Helsinki city services.\nYou can read more about using Koros in ",l.createElement(r,{href:"https://brand.hel.fi/en/wave-motifs/"},"Helsinki Visual Identity Guidelines - Wave motifs"),"."),"\n",l.createElement(t,null,l.createElement("div",{role:"img","aria-label":"Wave motif, shape examples"},l.createElement(s.K,{type:"basic",style:{marginBottom:"var(--spacing-xs"}}),l.createElement(s.K,{type:"beat",style:{marginBottom:"var(--spacing-xs"}}),l.createElement(s.K,{type:"pulse",style:{marginBottom:"var(--spacing-xs"}}),l.createElement(s.K,{type:"vibration",style:{marginBottom:"var(--spacing-xs"}}),l.createElement(s.K,{type:"wave",style:{marginBottom:"var(--spacing-xs"}}),l.createElement(s.K,{type:"calm"}))),"\n",l.createElement(a.h4,{id:"dense",style:{position:"relative"}},"Dense",l.createElement(a.a,{href:"#dense","aria-label":"dense permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.p,null,"The dense Koro variant introduces a smaller wave size with the same shapes. You can choose either the Default or the Dense variant for your project. Read more about Koro usage on the ",l.createElement(i,{href:"/foundation/visual-assets/wave-motifs"},"HDS Foundation - Wave motifs page"),"."),"\n",l.createElement(t,null,l.createElement("div",{role:"img","aria-label":"Wave motif, dense variant shape examples"},l.createElement(s.K,{dense:!0,type:"basic",style:{marginBottom:"var(--spacing-xs"}}),l.createElement(s.K,{dense:!0,type:"beat",style:{marginBottom:"var(--spacing-xs"}}),l.createElement(s.K,{dense:!0,type:"pulse",style:{marginBottom:"var(--spacing-xs"}}),l.createElement(s.K,{dense:!0,type:"vibration",style:{marginBottom:"var(--spacing-xs"}}),l.createElement(s.K,{dense:!0,type:"wave",style:{marginBottom:"var(--spacing-xs"}}),l.createElement(s.K,{dense:!0,type:"calm"}))),"\n",l.createElement(a.h4,{id:"angled",style:{position:"relative"}},"Angled",l.createElement(a.a,{href:"#angled","aria-label":"angled permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.p,null,"Koro shapes can be angled in 45 degree increments. The allowed angle properties are ",l.createElement(a.code,null,"45deg"),", ",l.createElement(a.code,null,"90deg"),", ",l.createElement(a.code,null,"135deg"),", ",l.createElement(a.code,null,"180deg"),", ",l.createElement(a.code,null,"225deg"),", ",l.createElement(a.code,null,"270deg")," and ",l.createElement(a.code,null,"315deg"),". Angles outside of these options should be avoided."),"\n","\n",l.createElement(t,null,l.createElement("div",{role:"img","aria-label":"Wave motif, angled variation example"},l.createElement(o))))}function d(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){return void 0===e&&(e={}),l.createElement(i,e,l.createElement(c,e))}},90203:function(e,a,t){t.r(a);var n=t(11151),l=t(67294),s=t(83428),r=t(57674),i=t(89482),o=t(26127);function c(e){const a=Object.assign({h1:"h1",a:"a",span:"span"},(0,n.ah)(),e.components);return o.Z||d("PageTabs",!1),o.Z.Tab||d("PageTabs.Tab",!0),o.Z.TabList||d("PageTabs.TabList",!0),o.Z.TabPanel||d("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(a.h1,{id:"koros",style:{position:"relative"}},"Koros",l.createElement(a.a,{href:"#koros","aria-label":"koros permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(s.S,{type:"info"},"Stable"),l.createElement(s.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(i.Z,null,"Koros, also known as Wave motifs, are part of the visual identity of City of Helsinki. The Koros can be used as visual elements, for example as part of the hero image or the footer and as a divider of content in the user interface."),"\n",l.createElement(o.Z,{pageContext:e.pageContext},l.createElement(o.Z.TabList,null,l.createElement(o.Z.Tab,{href:"/"},"Usage"),l.createElement(o.Z.Tab,{href:"/code"},"Code"),l.createElement(o.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(o.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(o.Z.TabPanel,null,e.children)))}function d(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,n.ah)(),e.components);return a?l.createElement(a,e,l.createElement(c,e)):c(e)}},89482:function(e,a,t){var n=t(67294);a.Z=e=>{let{color:a="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:l={},children:s}=e;return n.createElement("p",{style:{fontSize:t,color:a,maxWidth:600,...l}},s)}},26127:function(e,a,t){var n=t(67294),l=t(14160),s=t(94671);const r="PageTabList",i="PageTabPanel",o="PageTab",c=e=>{var a;let{pageContext:t,children:c}=e;const d=t.frontmatter.slug,m=Array.isArray(c)?c:[c],h=m.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===r)),u=m.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===i)),p=null===(a=h.props)||void 0===a?void 0:a.children.filter((e=>e.type.componentName===o)),b=p.findIndex((e=>d.endsWith(e.props.href))),g=-1===b?0:b,v=0===g?d:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(d);return n.createElement(s.a,{initiallyActiveTab:g},n.createElement(s.a.TabList,{className:"page-tabs-list"},p.map((e=>n.createElement(s.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?v:v+e.props.href))},e.props.children)))),p.map(((e,a)=>n.createElement(s.a.TabPanel,{key:e.props.href},g===a?u.props.children:n.createElement("div",null)))))},d=e=>{let{children:a}=e;return n.createElement(s.a.TabList,null,a)};d.componentName=r;const m=e=>{let{href:a,slug:t,children:l}=e;return n.createElement(s.a.Tab,null,l)};m.componentName=o;const h=e=>{let{children:a}=e;return n.createElement(s.a.TabPanel,null,a)};h.componentName=i,c.TabList=d,c.Tab=m,c.TabPanel=h,a.Z=c},57674:function(e,a,t){var n=t(67294),l=t(45422);a.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return n.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},n.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((a=>n.createElement("li",{key:a},n.createElement("span",{className:"status-name"},a),n.createElement("span",null,e[a]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-koros-tabs-mdx-33cd1d9ccdfad6075f07.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-koros-tabs-mdx-33cd1d9ccdfad6075f07.js
new file mode 100644
index 00000000000..9b3efdaf5dc
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-koros-tabs-mdx-33cd1d9ccdfad6075f07.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[8365],{83428:function(e,a,t){t.d(a,{S:function(){return i}});var s=t(80136),l=t(67294),n=t(7444),r=t(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const c=e=>{let{icon:a}=e;return l.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},a)},i=e=>{var{children:a,className:t,dataTestId:n,type:i="neutral",iconLeft:u}=e,b=(0,s._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(o.statusLabel,o[i],u&&o.statusLabelWithIcon,t),"data-testid":n},b),u&&l.createElement(c,{icon:u}),a)}},90203:function(e,a,t){t.r(a);var s=t(11151),l=t(67294),n=t(83428),r=t(57674),o=t(89482),c=t(26127);function i(e){const a=Object.assign({h1:"h1",a:"a",span:"span"},(0,s.ah)(),e.components);return c.Z||u("PageTabs",!1),c.Z.Tab||u("PageTabs.Tab",!0),c.Z.TabList||u("PageTabs.TabList",!0),c.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(a.h1,{id:"koros",style:{position:"relative"}},"Koros",l.createElement(a.a,{href:"#koros","aria-label":"koros permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(n.S,{type:"info"},"Stable"),l.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(o.Z,null,"Koros, also known as Wave motifs, are part of the visual identity of City of Helsinki. The Koros can be used as visual elements, for example as part of the hero image or the footer and as a divider of content in the user interface."),"\n",l.createElement(c.Z,{pageContext:e.pageContext},l.createElement(c.Z.TabList,null,l.createElement(c.Z.Tab,{href:"/"},"Usage"),l.createElement(c.Z.Tab,{href:"/code"},"Code"),l.createElement(c.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(c.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(c.Z.TabPanel,null,e.children)))}function u(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,s.ah)(),e.components);return a?l.createElement(a,e,l.createElement(i,e)):i(e)}},89482:function(e,a,t){var s=t(67294);a.Z=e=>{let{color:a="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:l={},children:n}=e;return s.createElement("p",{style:{fontSize:t,color:a,maxWidth:600,...l}},n)}},26127:function(e,a,t){var s=t(67294),l=t(14160),n=t(94671);const r="PageTabList",o="PageTabPanel",c="PageTab",i=e=>{var a;let{pageContext:t,children:i}=e;const u=t.frontmatter.slug,b=Array.isArray(i)?i:[i],d=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===r)),m=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===o)),h=null===(a=d.props)||void 0===a?void 0:a.children.filter((e=>e.type.componentName===c)),p=h.findIndex((e=>u.endsWith(e.props.href))),_=-1===p?0:p,f=0===_?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return s.createElement(n.a,{initiallyActiveTab:_},s.createElement(n.a.TabList,{className:"page-tabs-list"},h.map((e=>s.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),h.map(((e,a)=>s.createElement(n.a.TabPanel,{key:e.props.href},_===a?m.props.children:s.createElement("div",null)))))},u=e=>{let{children:a}=e;return s.createElement(n.a.TabList,null,a)};u.componentName=r;const b=e=>{let{href:a,slug:t,children:l}=e;return s.createElement(n.a.Tab,null,l)};b.componentName=c;const d=e=>{let{children:a}=e;return s.createElement(n.a.TabPanel,null,a)};d.componentName=o,i.TabList=u,i.Tab=b,i.TabPanel=d,a.Z=i},57674:function(e,a,t){var s=t(67294),l=t(45422);a.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return s.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},s.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((a=>s.createElement("li",{key:a},s.createElement("span",{className:"status-name"},a),s.createElement("span",null,e[a]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-link-accessibility-mdx-470a31f6af432d37a8e7.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-link-accessibility-mdx-470a31f6af432d37a8e7.js
new file mode 100644
index 00000000000..ce5b9aee941
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-link-accessibility-mdx-470a31f6af432d37a8e7.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[5684,9195],{83428:function(e,t,a){a.d(t,{S:function(){return c}});var n=a(80136),l=a(67294),s=a(7444),r=a(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,s.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:t}=e;return l.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:s,type:c="neutral",iconLeft:u}=e,h=(0,n._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(i.statusLabel,i[c],u&&i.statusLabelWithIcon,a),"data-testid":s},h),u&&l.createElement(o,{icon:u}),t)}},86912:function(e,t,a){a.r(t);var n=a(11151),l=a(67294),s=a(34517);const r=e=>{let{children:t,pageContext:a}=e;return l.createElement(s.default,{pageContext:a},t)};function i(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",p:"p",ul:"ul",li:"li",code:"code"},(0,n.ah)(),e.components),{ExternalLink:a}=t;return a||function(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("ExternalLink",!0),l.createElement(l.Fragment,null,l.createElement(t.h2,{id:"accessibility",style:{position:"relative"}},"Accessibility",l.createElement(t.a,{href:"#accessibility","aria-label":"accessibility permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h3,{id:"pay-attention-to",style:{position:"relative"}},"Pay attention to",l.createElement(t.a,{href:"#pay-attention-to","aria-label":"pay attention to permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"The HDS link component is primarily a native HTML hyperlink navigational element. The Enter key activates the link and causes the user agent to move focus to the link destination."),"\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,"\n",l.createElement(t.p,null,"Remember to tell users if the link is going to open an entirely new site. In HDS React Link this feature is provided through external links (prop ",l.createElement(t.code,null,"external"),"). There is a default aria-label for screen readers. This can be overwritten by using the ",l.createElement(t.code,null,"openInExternalDomainAriaLabel")," prop.\nIn HDS Core, set a proper ",l.createElement(t.code,null,"aria-label")," to the anchor tag as shown in the examples below."),"\n"),"\n",l.createElement(t.li,null,"\n",l.createElement(t.p,null,"Remember to tell users if the link is going to open in a new tab. In HDS React Link this feature is provided through prop ",l.createElement(t.code,null,"openInNewTab"),". There is a default aria-label for screen readers. This can be overwritten by using the ",l.createElement(t.code,null,"openInNewTabAriaLabel")," prop.\nIn HDS Core, set a proper ",l.createElement(t.code,null,"aria-label")," to the anchor tag as shown in the examples below."),"\n"),"\n",l.createElement(t.li,null,"\n",l.createElement(t.p,null,"Some assistive technologies provide a list of all links on the page to its user. If the text of the links does not clearly give the purpose, or if multiple links with the same name point to different targets (e.g., “read more”), users are forced to locate the link on the page and search surrounding information for context."),"\n"),"\n",l.createElement(t.li,null,"\n",l.createElement(t.p,null,'If you want to use a generic link text such as "Read more" but want to provide more detailed information for screen readers, you can use the ',l.createElement(t.code,null,"ariaLabel")," property. However please note that as per the ",l.createElement(a,{href:"https://www.w3.org/TR/accname/"},"Accessible Name and Description Computation")," and the ",l.createElement(a,{href:"https://www.w3.org/TR/html-aapi/#accessible-name-and-description-calculation"},"HTML to Platform Accessibility APIs Implementation Guide"),", the aria-label text will override the text supplied within the link. As such the text supplied will be used instead of the link text by AT. Due to this it is recommended to start the text used in aria-label with the text used within the link. This will allow consistent communication between users."),"\n"),"\n"),"\n",l.createElement(t.p,null,"Make sure that:"),"\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,"Link text is the visible label for the native HTML link and is used to provide the purpose of the link which is clear and easy to understand for all users."),"\n",l.createElement(t.li,null,"The alt attribute for the img element is used to describe the purpose of a graphical link with an image inside the link."),"\n",l.createElement(t.li,null,"The title attribute can be used to supplement the link text with any additional useful description."),"\n",l.createElement(t.li,null,"The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context."),"\n",l.createElement(t.li,null,"Icons should always be the same colour as the link text"),"\n"))}t.default=function(e){return void 0===e&&(e={}),l.createElement(r,e,l.createElement(i,e))}},34517:function(e,t,a){a.r(t);var n=a(11151),l=a(67294),s=a(83428),r=a(57674),i=a(89482),o=(a(18607),a(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,n.ah)(),e.components);return o.Z||u("PageTabs",!1),o.Z.Tab||u("PageTabs.Tab",!0),o.Z.TabList||u("PageTabs.TabList",!0),o.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"link",style:{position:"relative"}},"Link",l.createElement(t.a,{href:"#link","aria-label":"link permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(s.S,{type:"info"},"Stable"),l.createElement(s.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(i.Z,null,"Links are used as navigational elements and can be used on their own or in inline with text. They provide a lightweight option for navigation."),"\n",l.createElement(o.Z,{pageContext:e.pageContext},l.createElement(o.Z.TabList,null,l.createElement(o.Z.Tab,{href:"/"},"Usage"),l.createElement(o.Z.Tab,{href:"/code"},"Code"),l.createElement(o.Z.Tab,{href:"/accessibility"},"Accessibility")),l.createElement(o.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,n.ah)(),e.components);return t?l.createElement(t,e,l.createElement(c,e)):c(e)}},89482:function(e,t,a){var n=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:l={},children:s}=e;return n.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...l}},s)}},26127:function(e,t,a){var n=a(67294),l=a(14160),s=a(94671);const r="PageTabList",i="PageTabPanel",o="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const u=a.frontmatter.slug,h=Array.isArray(c)?c:[c],d=h.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===r)),m=h.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===i)),p=null===(t=d.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===o)),b=p.findIndex((e=>u.endsWith(e.props.href))),f=-1===b?0:b,g=0===f?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return n.createElement(s.a,{initiallyActiveTab:f},n.createElement(s.a.TabList,{className:"page-tabs-list"},p.map((e=>n.createElement(s.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?g:g+e.props.href))},e.props.children)))),p.map(((e,t)=>n.createElement(s.a.TabPanel,{key:e.props.href},f===t?m.props.children:n.createElement("div",null)))))},u=e=>{let{children:t}=e;return n.createElement(s.a.TabList,null,t)};u.componentName=r;const h=e=>{let{href:t,slug:a,children:l}=e;return n.createElement(s.a.Tab,null,l)};h.componentName=o;const d=e=>{let{children:t}=e;return n.createElement(s.a.TabPanel,null,t)};d.componentName=i,c.TabList=u,c.Tab=h,c.TabPanel=d,t.Z=c},57674:function(e,t,a){var n=a(67294),l=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return n.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},n.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>n.createElement("li",{key:t},n.createElement("span",{className:"status-name"},t),n.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-link-code-mdx-b12bbc38300893378aeb.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-link-code-mdx-b12bbc38300893378aeb.js
new file mode 100644
index 00000000000..5d0fdfa038d
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-link-code-mdx-b12bbc38300893378aeb.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[9416,9195],{52708:function(e,n,t){t.d(n,{I:function(){return r},a:function(){return i},b:function(){return s}});var a=t(67294),l=t(32719);const s=e=>{let{ariaLabel:n="document",ariaLabelledby:t,ariaHidden:s=!0,className:i="",color:r,size:o="s",style:c={}}=e;return a.createElement("svg",{className:[l.s.icon,l.s[o],i].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":n,"aria-labelledby":t,"aria-hidden":s,color:r,style:c},a.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M15 2L20 7V22H4V2H15ZM14 4V8H18L14 4ZM14.0083 4L18 8V20H6V4H14.0083ZM17 16H7V18H17V16ZM17 12H7V14H17V12ZM13 8H7V10H13V8Z",fill:"currentColor"}))},i=e=>{let{ariaLabel:n="photo",ariaLabelledby:t,ariaHidden:s=!0,className:i="",color:r,size:o="s",style:c={}}=e;return a.createElement("svg",{className:[l.s.icon,l.s[o],i].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":n,"aria-labelledby":t,"aria-hidden":s,color:r,style:c},a.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M20 2V22H4V2H20ZM16 15C15.1401 15 14.7159 15.2223 13.88 16.0363L13.7071 16.2071C12.4113 17.5029 11.5828 18 10 18C8.50049 18 7.67799 17.5539 6.49379 16.4051L6 15.92V20H18V15.922L17.958 15.8813C17.2256 15.1936 16.8025 15 16 15ZM18 4H6L6.00114 13.4397C6.50287 13.6831 6.92886 14.0298 7.51078 14.5986L7.70711 14.7929C8.6613 15.7471 9.08282 16 10 16C10.8599 16 11.2841 15.7777 12.12 14.9637L12.2929 14.7929C13.5887 13.4971 14.4172 13 16 13C16.8098 13 17.4222 13.1301 18.0007 13.4308L18 4ZM10 6C11.6569 6 13 7.34315 13 9C13 10.6569 11.6569 12 10 12C8.34315 12 7 10.6569 7 9C7 7.34315 8.34315 6 10 6ZM10 8C9.44772 8 9 8.44772 9 9C9 9.55228 9.44772 10 10 10C10.5523 10 11 9.55228 11 9C11 8.44772 10.5523 8 10 8Z",fill:"currentColor"}))},r=e=>{let{ariaLabel:n="upload",ariaLabelledby:t,ariaHidden:s=!0,className:i="",color:r,size:o="s",style:c={}}=e;return a.createElement("svg",{className:[l.s.icon,l.s[o],i].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":n,"aria-labelledby":t,"aria-hidden":s,color:r,style:c},a.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M12 1.63605L17.6569 7.2929L16.2426 8.70712L13 5.46505V18H11V5.46505L7.75736 8.70712L6.34315 7.2929L12 1.63605ZM5 15V20H19V15H21V22H3V15H5Z",fill:"currentColor"}))}},83428:function(e,n,t){t.d(n,{S:function(){return c}});var a=t(80136),l=t(67294),s=t(7444),i=t(34300),r={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,s.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:n}=e;return l.createElement("span",{className:r.statusLabelIcon,"aria-hidden":"true"},n)},c=e=>{var{children:n,className:t,dataTestId:s,type:c="neutral",iconLeft:d}=e,m=(0,a._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,i.c)(r.statusLabel,r[c],d&&r.statusLabelWithIcon,t),"data-testid":s},m),d&&l.createElement(o,{icon:d}),n)}},63909:function(e,n,t){t.r(n);var a=t(11151),l=t(67294),s=t(21662),i=t(52708),r=t(70476),o=t(34517);const c=e=>{let{children:n,pageContext:t}=e;return l.createElement(o.default,{pageContext:t},n)};function d(e){const n=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",h4:"h4",pre:"pre",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",strong:"strong",p:"p"},(0,a.ah)(),e.components),{Playground:t,IconCheckCircleFill:o,ExternalLink:c}=n;return c||m("ExternalLink",!0),o||m("IconCheckCircleFill",!0),t||m("Playground",!0),l.createElement(l.Fragment,null,l.createElement(n.h2,{id:"code",style:{position:"relative"}},"Code",l.createElement(n.a,{href:"#code","aria-label":"code permalink",className:"header-anchor after"},l.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n.h3,{id:"code-examples",style:{position:"relative"}},"Code examples",l.createElement(n.a,{href:"#code-examples","aria-label":"code examples permalink",className:"header-anchor after"},l.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n.h4,{id:"inline",style:{position:"relative"}},"Inline",l.createElement(n.a,{href:"#inline","aria-label":"inline permalink",className:"header-anchor after"},l.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t,{scope:{Link:s.L}},l.createElement(n.pre,null,l.createElement(n.code,{className:"language-jsx"},"import { Link } from 'hds-react';\n\n() => (\n  <p style={{ fontSize: 'var(--fontsize-body-s)' }}>\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n    <Link\n      href=\"https://github.com/City-of-Helsinki/helsinki-design-system\"\n      external\n      openInExternalDomainAriaLabel=\"Opens a different website\"\n      style={{ fontSize: 'var(--fontsize-body-s)' }}\n    >\n      HDS Github\n    </Link>\n    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n  </p>\n)\n")),l.createElement(n.pre,null,l.createElement(n.code,{className:"language-html"},'<p style="font-size: var(--fontsize-body-s)">\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n  magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco\n  <a href="https://github.com/City-of-Helsinki/helsinki-design-system" class="hds-link hds-link--small" aria-label="HDS Github. Opens in external domain">\n  HDS Github<span class="hds-icon icon hds-icon--link-external hds-icon--size-xs vertical-align-small-icon" aria-hidden="true"></span></a>\n  laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n</p>\n'))),"\n",l.createElement(n.h3,{id:"standalone",style:{position:"relative"}},"Standalone",l.createElement(n.a,{href:"#standalone","aria-label":"standalone permalink",className:"header-anchor after"},l.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t,{scope:{Link:s.L}},l.createElement(n.pre,null,l.createElement(n.code,{className:"language-jsx"},"import { Link } from 'hds-react';\n\n() => (\n  <Link href=\"https://hds.hel.fi/\" size=\"M\" style={{ display: 'block', width: 'fit-content' }}>\n    Link to HDS\n  </Link>\n)\n")),l.createElement(n.pre,null,l.createElement(n.code,{className:"language-html"},'<a href="https://hds.hel.fi/" class="hds-link hds-link--medium" style="display:block;">Standalone link</a>\n'))),"\n",l.createElement(n.h3,{id:"internal-and-external-links",style:{position:"relative"}},"Internal and external links",l.createElement(n.a,{href:"#internal-and-external-links","aria-label":"internal and external links permalink",className:"header-anchor after"},l.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t,{scope:{Link:s.L}},l.createElement(n.pre,null,l.createElement(n.code,{className:"language-jsx"},'import { Link } from \'hds-react\';\n\n() => (<>\n  <Link href="https://hds.hel.fi/" size="M" style={{ display: \'block\', width: \'fit-content\' }}>\n    Internal link\n  </Link>\n\n  <Link\n    href="https://github.com/City-of-Helsinki/helsinki-design-system"\n    size="M"\n    external\n    openInExternalDomainAriaLabel="Opens a different website."\n    style={{ display: \'block\', width: \'fit-content\' }}\n  >\n    External link\n  </Link>\n\n  <Link\n    href="https://github.com/City-of-Helsinki/helsinki-design-system"\n    size="M"\n    external\n    openInNewTab\n    openInExternalDomainAriaLabel="Opens a different website."\n    openInNewTabAriaLabel="Opens in a new tab."\n    style={{ display: \'block\', width: \'fit-content\' }}\n  >\n    Link that opens in a new tab\n  </Link>\n</>)\n')),l.createElement(n.pre,null,l.createElement(n.code,{className:"language-html"},'<p>\n  <a href="https://hds.hel.fi/" class="hds-link hds-link--medium" style="display:block;">Internal link</a>\n\n  <a\n    href="https://github.com/City-of-Helsinki/helsinki-design-system"\n    class="hds-link hds-link--medium"\n    aria-label="Opens a different website."\n    style="display:block;"\n  >\n    External link\n    <span\n      class="hds-icon icon hds-icon--link-external hds-icon--size-s vertical-align-medium-icon"\n      aria-hidden="true"\n    ></span>\n  </a>\n\n  <a\n    href="https://github.com/City-of-Helsinki/helsinki-design-system"\n    class="hds-link hds-link--medium"\n    rel="noopener"\n    target="_blank"\n    aria-label="Opens a different website. Opens in a new tab."\n  >\n    Link that opens in a new tab\n    <span\n      class="hds-icon icon hds-icon--link-external hds-icon--size-s vertical-align-small-icon"\n      aria-hidden="true"\n    ></span>\n  </a>\n</p>\n'))),"\n",l.createElement(n.h3,{id:"links-with-icons",style:{position:"relative"}},"Links with icons",l.createElement(n.a,{href:"#links-with-icons","aria-label":"links with icons permalink",className:"header-anchor after"},l.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t,{scope:{Link:s.L,IconDocument:i.b,IconPhone:r.ay,IconEnvelope:r.Q,IconPhoto:i.a}},l.createElement(n.pre,null,l.createElement(n.code,{className:"language-jsx"},'import { Link, IconDocument, IconPhone, IconEnvelope, IconPhoto } from \'hds-react\';\n\n() => (<>\n  <Link\n    iconLeft={<IconDocument size="s" aria-hidden />}\n    size="M"\n    href="/#"\n    style={{ display: \'block\', width: \'fit-content\' }}\n  >\n    Document link\n  </Link>\n  <Link\n    iconLeft={<IconPhone size="s" aria-hidden />}\n    size="M"\n    href="/#"\n    style={{ display: \'block\', width: \'fit-content\' }}\n  >\n    Phone link\n  </Link>\n  <Link\n    iconLeft={<IconEnvelope size="s" aria-hidden />}\n    size="M"\n    href="/#"\n    style={{ display: \'block\', width: \'fit-content\' }}\n  >\n    Email link\n  </Link>\n  <Link\n    iconLeft={<IconPhoto size="s" aria-hidden />}\n    size="M"\n    href="/#"\n    style={{ display: \'block\', width: \'fit-content\' }}\n  >\n    Photo link\n  </Link>\n</>)\n')),l.createElement(n.pre,null,l.createElement(n.code,{className:"language-html"},'<div>\n  <a href="/#" class="hds-link hds-link--medium" style="display: block; width: fit-content;"><span class="hds-icon-left"><span class="hds-icon hds-icon--document hds-icon--size-s" aria-hidden="true"></span></span>Document link</a>\n  <a href="/#" class="hds-link hds-link--medium" style="display: block; width: fit-content;"><span class="hds-icon-left"><span class="hds-icon hds-icon--phone hds-icon--size-s" aria-hidden="true"></span></span>Phone link</a>\n  <a href="/#" class="hds-link hds-link--medium" style="display: block; width: fit-content;"><span class="hds-icon-left"><span class="hds-icon hds-icon--envelope hds-icon--size-s" aria-hidden="true"></span></span>Email link</a>\n  <a href="/#" class="hds-link hds-link--medium" style="display: block; width: fit-content;"><span class="hds-icon-left"><span class="hds-icon hds-icon--photo hds-icon--size-s" aria-hidden="true"></span></span>Photo link</a>\n</div>\n'))),"\n",l.createElement(n.h3,{id:"packages",style:{position:"relative"}},"Packages",l.createElement(n.a,{href:"#packages","aria-label":"packages permalink",className:"header-anchor after"},l.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n.table,null,l.createElement(n.thead,null,l.createElement(n.tr,null,l.createElement(n.th,null,"Package"),l.createElement(n.th,null,"Included"),l.createElement(n.th,null,"Storybook link"),l.createElement(n.th,null,"Source link"))),l.createElement(n.tbody,null,l.createElement(n.tr,null,l.createElement(n.td,null,l.createElement(n.strong,null,"HDS React")),l.createElement(n.td,null,l.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},l.createElement(o)," Yes ")),l.createElement(n.td,null,l.createElement(s.L,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-link--default"},"View in Storybook")),l.createElement(n.td,null,l.createElement(c,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/react/src/components/link"},"View source"))),l.createElement(n.tr,null,l.createElement(n.td,null,l.createElement(n.strong,null,"HDS Core")),l.createElement(n.td,null,l.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},l.createElement(o)," Yes ")),l.createElement(n.td,null,l.createElement(s.L,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/core/?path=/story/components-link--default"},"View in Storybook")),l.createElement(n.td,null,l.createElement(c,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/core/src/components/link"},"View source"))))),"\n",l.createElement(n.h3,{id:"properties",style:{position:"relative"}},"Properties",l.createElement(n.a,{href:"#properties","aria-label":"properties permalink",className:"header-anchor after"},l.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n.p,null,"Note! You can find the full list of properties in the ",l.createElement(s.L,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-link--default"},"React Storybook.")),"\n",l.createElement(n.table,null,l.createElement(n.thead,null,l.createElement(n.tr,null,l.createElement(n.th,null,"Property"),l.createElement(n.th,null,"Description"),l.createElement(n.th,null,"Values"),l.createElement(n.th,null,"Default value"))),l.createElement(n.tbody,null,l.createElement(n.tr,null,l.createElement(n.td,null,l.createElement(n.code,null,"external")),l.createElement(n.td,null,"If set to true, the link is marked as external (points outside of the domain)."),l.createElement(n.td,null,l.createElement(n.code,null,"boolean")),l.createElement(n.td,null,"false")),l.createElement(n.tr,null,l.createElement(n.td,null,l.createElement(n.code,null,"openInExternalDomainAriaLabel")),l.createElement(n.td,null,"Aria-label which is read if the link is external."),l.createElement(n.td,null,l.createElement(n.code,null,"string")),l.createElement(n.td,null,"-")),l.createElement(n.tr,null,l.createElement(n.td,null,l.createElement(n.code,null,"iconLeft")),l.createElement(n.td,null,"An icon placed on the left side of the link."),l.createElement(n.td,null,l.createElement(n.code,null,"ReactNode")),l.createElement(n.td,null,"-")),l.createElement(n.tr,null,l.createElement(n.td,null,l.createElement(n.code,null,"openInNewTab")),l.createElement(n.td,null,"If set to true, the link opens in a new tab."),l.createElement(n.td,null,l.createElement(n.code,null,"boolean")),l.createElement(n.td,null,"false")),l.createElement(n.tr,null,l.createElement(n.td,null,l.createElement(n.code,null,"openInNewTabAriaLabel")),l.createElement(n.td,null,"Aria-label which is read if the link is opened in a new tab."),l.createElement(n.td,null,l.createElement(n.code,null,"string")),l.createElement(n.td,null,"-")),l.createElement(n.tr,null,l.createElement(n.td,null,l.createElement(n.code,null,"size")),l.createElement(n.td,null,"Controls the size of the link."),l.createElement(n.td,null,l.createElement(n.code,null,'"S"'),", ",l.createElement(n.code,null,'"M"'),", ",l.createElement(n.code,null,'"L"')),l.createElement(n.td,null,l.createElement(n.code,null,'"S"'))),l.createElement(n.tr,null,l.createElement(n.td,null,l.createElement(n.code,null,"href")),l.createElement(n.td,null,"Hypertext reference of the link."),l.createElement(n.td,null,l.createElement(n.code,null,"string")),l.createElement(n.td,null,"-")))))}function m(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}n.default=function(e){return void 0===e&&(e={}),l.createElement(c,e,l.createElement(d,e))}},34517:function(e,n,t){t.r(n);var a=t(11151),l=t(67294),s=t(83428),i=t(57674),r=t(89482),o=(t(18607),t(26127));function c(e){const n=Object.assign({h1:"h1",a:"a",span:"span"},(0,a.ah)(),e.components);return o.Z||d("PageTabs",!1),o.Z.Tab||d("PageTabs.Tab",!0),o.Z.TabList||d("PageTabs.TabList",!0),o.Z.TabPanel||d("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(n.h1,{id:"link",style:{position:"relative"}},"Link",l.createElement(n.a,{href:"#link","aria-label":"link permalink",className:"header-anchor after"},l.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(s.S,{type:"info"},"Stable"),l.createElement(s.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(i.Z)),"\n",l.createElement(r.Z,null,"Links are used as navigational elements and can be used on their own or in inline with text. They provide a lightweight option for navigation."),"\n",l.createElement(o.Z,{pageContext:e.pageContext},l.createElement(o.Z.TabList,null,l.createElement(o.Z.Tab,{href:"/"},"Usage"),l.createElement(o.Z.Tab,{href:"/code"},"Code"),l.createElement(o.Z.Tab,{href:"/accessibility"},"Accessibility")),l.createElement(o.Z.TabPanel,null,e.children)))}function d(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}n.default=function(e){void 0===e&&(e={});const{wrapper:n}=Object.assign({},(0,a.ah)(),e.components);return n?l.createElement(n,e,l.createElement(c,e)):c(e)}},89482:function(e,n,t){var a=t(67294);n.Z=e=>{let{color:n="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:l={},children:s}=e;return a.createElement("p",{style:{fontSize:t,color:n,maxWidth:600,...l}},s)}},26127:function(e,n,t){var a=t(67294),l=t(14160),s=t(94671);const i="PageTabList",r="PageTabPanel",o="PageTab",c=e=>{var n;let{pageContext:t,children:c}=e;const d=t.frontmatter.slug,m=Array.isArray(c)?c:[c],h=m.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===i)),u=m.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===r)),p=null===(n=h.props)||void 0===n?void 0:n.children.filter((e=>e.type.componentName===o)),b=p.findIndex((e=>d.endsWith(e.props.href))),E=-1===b?0:b,f=0===E?d:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(d);return a.createElement(s.a,{initiallyActiveTab:E},a.createElement(s.a.TabList,{className:"page-tabs-list"},p.map((e=>a.createElement(s.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),p.map(((e,n)=>a.createElement(s.a.TabPanel,{key:e.props.href},E===n?u.props.children:a.createElement("div",null)))))},d=e=>{let{children:n}=e;return a.createElement(s.a.TabList,null,n)};d.componentName=i;const m=e=>{let{href:n,slug:t,children:l}=e;return a.createElement(s.a.Tab,null,l)};m.componentName=o;const h=e=>{let{children:n}=e;return a.createElement(s.a.TabPanel,null,n)};h.componentName=r,c.TabList=d,c.Tab=m,c.TabPanel=h,n.Z=c},57674:function(e,n,t){var a=t(67294),l=t(45422);n.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return a.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},a.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((n=>a.createElement("li",{key:n},a.createElement("span",{className:"status-name"},n),a.createElement("span",null,e[n]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-link-index-mdx-ad8615f3fe019db7b0ff.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-link-index-mdx-ad8615f3fe019db7b0ff.js
new file mode 100644
index 00000000000..9c0dbf80d9d
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-link-index-mdx-ad8615f3fe019db7b0ff.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[4592,9195],{52708:function(e,t,a){a.d(t,{I:function(){return r},a:function(){return s},b:function(){return i}});var n=a(67294),l=a(32719);const i=e=>{let{ariaLabel:t="document",ariaLabelledby:a,ariaHidden:i=!0,className:s="",color:r,size:o="s",style:c={}}=e;return n.createElement("svg",{className:[l.s.icon,l.s[o],s].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":a,"aria-hidden":i,color:r,style:c},n.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M15 2L20 7V22H4V2H15ZM14 4V8H18L14 4ZM14.0083 4L18 8V20H6V4H14.0083ZM17 16H7V18H17V16ZM17 12H7V14H17V12ZM13 8H7V10H13V8Z",fill:"currentColor"}))},s=e=>{let{ariaLabel:t="photo",ariaLabelledby:a,ariaHidden:i=!0,className:s="",color:r,size:o="s",style:c={}}=e;return n.createElement("svg",{className:[l.s.icon,l.s[o],s].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":a,"aria-hidden":i,color:r,style:c},n.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M20 2V22H4V2H20ZM16 15C15.1401 15 14.7159 15.2223 13.88 16.0363L13.7071 16.2071C12.4113 17.5029 11.5828 18 10 18C8.50049 18 7.67799 17.5539 6.49379 16.4051L6 15.92V20H18V15.922L17.958 15.8813C17.2256 15.1936 16.8025 15 16 15ZM18 4H6L6.00114 13.4397C6.50287 13.6831 6.92886 14.0298 7.51078 14.5986L7.70711 14.7929C8.6613 15.7471 9.08282 16 10 16C10.8599 16 11.2841 15.7777 12.12 14.9637L12.2929 14.7929C13.5887 13.4971 14.4172 13 16 13C16.8098 13 17.4222 13.1301 18.0007 13.4308L18 4ZM10 6C11.6569 6 13 7.34315 13 9C13 10.6569 11.6569 12 10 12C8.34315 12 7 10.6569 7 9C7 7.34315 8.34315 6 10 6ZM10 8C9.44772 8 9 8.44772 9 9C9 9.55228 9.44772 10 10 10C10.5523 10 11 9.55228 11 9C11 8.44772 10.5523 8 10 8Z",fill:"currentColor"}))},r=e=>{let{ariaLabel:t="upload",ariaLabelledby:a,ariaHidden:i=!0,className:s="",color:r,size:o="s",style:c={}}=e;return n.createElement("svg",{className:[l.s.icon,l.s[o],s].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":a,"aria-hidden":i,color:r,style:c},n.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M12 1.63605L17.6569 7.2929L16.2426 8.70712L13 5.46505V18H11V5.46505L7.75736 8.70712L6.34315 7.2929L12 1.63605ZM5 15V20H19V15H21V22H3V15H5Z",fill:"currentColor"}))}},83428:function(e,t,a){a.d(t,{S:function(){return c}});var n=a(80136),l=a(67294),i=a(7444),s=a(34300),r={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,i.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:t}=e;return l.createElement("span",{className:r.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:i,type:c="neutral",iconLeft:d}=e,h=(0,n._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,s.c)(r.statusLabel,r[c],d&&r.statusLabelWithIcon,a),"data-testid":i},h),d&&l.createElement(o,{icon:d}),t)}},83479:function(e,t,a){a.r(t);var n=a(11151),l=a(67294),i=a(52708),s=a(70476),r=a(34517);const o=e=>{let{children:t,pageContext:a}=e;return l.createElement(r.default,{pageContext:a},t)};function c(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",p:"p",ul:"ul",li:"li",code:"code",h4:"h4",hr:"hr"},(0,n.ah)(),e.components),{PlaygroundPreview:a,Link:r,InternalLink:o}=t;return o||d("InternalLink",!0),r||d("Link",!0),a||d("PlaygroundPreview",!0),l.createElement(l.Fragment,null,l.createElement(t.h2,{id:"usage",style:{position:"relative"}},"Usage",l.createElement(t.a,{href:"#usage","aria-label":"usage permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h3,{id:"example",style:{position:"relative"}},"Example",l.createElement(t.a,{href:"#example","aria-label":"example permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a,null,l.createElement(r,{href:"https://hds.hel.fi/",size:"M",style:{display:"block",width:"fit-content"}},l.createElement(t.p,null,"Link to HDS"))),"\n",l.createElement(t.h3,{id:"principles",style:{position:"relative"}},"Principles",l.createElement(t.a,{href:"#principles","aria-label":"principles permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,"Too many links will clutter a page and make it difficult for users to identify their next steps. This is especially true for inline links, which should be used sparingly."),"\n",l.createElement(t.li,null,"Use links when you want users to:","\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,"Navigate to a different page"),"\n",l.createElement(t.li,null,"Navigate to an entirely different site"),"\n",l.createElement(t.li,null,"Jump to an element on the same page"),"\n",l.createElement(t.li,null,"Link to emails or phone numbers"),"\n"),"\n"),"\n",l.createElement(t.li,null,"HDS Link supports a link with an external icon. Use the ",l.createElement(t.code,null,"external")," prop when you wish to navigate to an entirely different site."),"\n",l.createElement(t.li,null,"HDS Link supports a link that opens in a new tab. Use the ",l.createElement(t.code,null,"openInNewTab")," prop when you wish to open the link in a new tab.","\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,"Generally, links should not open in a new tab. However, this can be desirable if the user is in a middle of a process, e.g. filling a form."),"\n"),"\n"),"\n"),"\n",l.createElement(t.h3,{id:"variations",style:{position:"relative"}},"Variations",l.createElement(t.a,{href:"#variations","aria-label":"variations permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h4,{id:"default",style:{position:"relative"}},"Default",l.createElement(t.a,{href:"#default","aria-label":"default permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"These links are the default link variant. Inline links are used within a sentence or paragraph and are underlined."),"\n",l.createElement(t.p,null,"The underlining helps differentiate them from the text they are placed next to and makes it clear users can interact with them. Inline links should not be used on their own."),"\n",l.createElement("p",{style:{fontSize:"14px"}},l.createElement(t.p,null,"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\naliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n",l.createElement(r,{href:"https://github.com/City-of-Helsinki/helsinki-design-system",external:!0,openInExternalDomainAriaLabel:"Opens a different website"},"HDS Github"),"\nconsequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")),"\n",l.createElement(t.hr),"\n",l.createElement(t.h4,{id:"standalone",style:{position:"relative"}},"Standalone",l.createElement(t.a,{href:"#standalone","aria-label":"standalone permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"Standalone links are used on their own or directly after the content, and they are underlined. If you wish not to have an underline, consider using a button instead."),"\n",l.createElement(t.p,null,"Standalone links should not be used within sentences or paragraphs."),"\n",l.createElement(a,null,l.createElement(r,{href:"https://hds.hel.fi/",size:"M",style:{display:"block",width:"fit-content"}},"Link to HDS")),"\n",l.createElement(t.h4,{id:"internal-and-external-links",style:{position:"relative"}},"Internal and external links",l.createElement(t.a,{href:"#internal-and-external-links","aria-label":"internal and external links permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"All HDS links can either be internal or external. Internal links point to the currently active website. External links navigate to an entirely different site. You can also make the link open in a new tab."),"\n",l.createElement(a,null,l.createElement(r,{href:"https://hds.hel.fi/",size:"M",style:{display:"block",width:"fit-content"}},"Internal link"),l.createElement(r,{href:"https://github.com/City-of-Helsinki/helsinki-design-system",size:"M",external:!0,openInExternalDomainAriaLabel:"Opens a different website.",style:{display:"block",width:"fit-content"}},"External link"),l.createElement(r,{href:"https://github.com/City-of-Helsinki/helsinki-design-system",size:"M",external:!0,openInNewTab:!0,openInExternalDomainAriaLabel:"Opens a different website.",openInNewTabAriaLabel:"Opens in a new tab.",style:{display:"block",width:"fit-content"}},"Link that opens in a new tab")),"\n",l.createElement(t.h4,{id:"links-with-icons",style:{position:"relative"}},"Links with icons",l.createElement(t.a,{href:"#links-with-icons","aria-label":"links with icons permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"HDS Links can be paired with an icon. This can be useful if the link has unusual target such as a phone number, an email address (mailto link), a PDF document or a photo."),"\n",l.createElement(t.p,null,"Note! These icons are meant to describe the link target. If you need a directional icon for the link (e.g. an arrow), you should instead use (",l.createElement(o,{href:"/components/buttons#supplementary"},"a supplementary button")," with ",l.createElement(t.code,null,'role="link"'),"."),"\n",l.createElement(a,null,l.createElement(r,{iconLeft:l.createElement(i.b,{size:"s","aria-hidden":!0}),size:"M",href:"/#",style:{display:"block",width:"fit-content"}},"Document link"),l.createElement(r,{iconLeft:l.createElement(s.ay,{size:"s","aria-hidden":!0}),size:"M",href:"/#",style:{display:"block",width:"fit-content"}},"Phone link"),l.createElement(r,{iconLeft:l.createElement(s.Q,{size:"s","aria-hidden":!0}),size:"M",href:"/#",style:{display:"block",width:"fit-content"}},"Email link"),l.createElement(r,{iconLeft:l.createElement(i.a,{size:"s","aria-hidden":!0}),size:"M",href:"/#",style:{display:"block",width:"fit-content"}},"Photo link")))}function d(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){return void 0===e&&(e={}),l.createElement(o,e,l.createElement(c,e))}},34517:function(e,t,a){a.r(t);var n=a(11151),l=a(67294),i=a(83428),s=a(57674),r=a(89482),o=(a(18607),a(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,n.ah)(),e.components);return o.Z||d("PageTabs",!1),o.Z.Tab||d("PageTabs.Tab",!0),o.Z.TabList||d("PageTabs.TabList",!0),o.Z.TabPanel||d("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"link",style:{position:"relative"}},"Link",l.createElement(t.a,{href:"#link","aria-label":"link permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(i.S,{type:"info"},"Stable"),l.createElement(i.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(s.Z)),"\n",l.createElement(r.Z,null,"Links are used as navigational elements and can be used on their own or in inline with text. They provide a lightweight option for navigation."),"\n",l.createElement(o.Z,{pageContext:e.pageContext},l.createElement(o.Z.TabList,null,l.createElement(o.Z.Tab,{href:"/"},"Usage"),l.createElement(o.Z.Tab,{href:"/code"},"Code"),l.createElement(o.Z.Tab,{href:"/accessibility"},"Accessibility")),l.createElement(o.Z.TabPanel,null,e.children)))}function d(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,n.ah)(),e.components);return t?l.createElement(t,e,l.createElement(c,e)):c(e)}},89482:function(e,t,a){var n=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:l={},children:i}=e;return n.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...l}},i)}},26127:function(e,t,a){var n=a(67294),l=a(14160),i=a(94671);const s="PageTabList",r="PageTabPanel",o="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const d=a.frontmatter.slug,h=Array.isArray(c)?c:[c],u=h.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===s)),m=h.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===r)),p=null===(t=u.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===o)),b=p.findIndex((e=>d.endsWith(e.props.href))),f=-1===b?0:b,E=0===f?d:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(d);return n.createElement(i.a,{initiallyActiveTab:f},n.createElement(i.a.TabList,{className:"page-tabs-list"},p.map((e=>n.createElement(i.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?E:E+e.props.href))},e.props.children)))),p.map(((e,t)=>n.createElement(i.a.TabPanel,{key:e.props.href},f===t?m.props.children:n.createElement("div",null)))))},d=e=>{let{children:t}=e;return n.createElement(i.a.TabList,null,t)};d.componentName=s;const h=e=>{let{href:t,slug:a,children:l}=e;return n.createElement(i.a.Tab,null,l)};h.componentName=o;const u=e=>{let{children:t}=e;return n.createElement(i.a.TabPanel,null,t)};u.componentName=r,c.TabList=d,c.Tab=h,c.TabPanel=u,t.Z=c},57674:function(e,t,a){var n=a(67294),l=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return n.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},n.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>n.createElement("li",{key:t},n.createElement("span",{className:"status-name"},t),n.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-link-tabs-mdx-c19b97c7b74eaebb68de.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-link-tabs-mdx-c19b97c7b74eaebb68de.js
new file mode 100644
index 00000000000..77f353ead38
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-link-tabs-mdx-c19b97c7b74eaebb68de.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[9195],{83428:function(e,a,t){t.d(a,{S:function(){return o}});var s=t(80136),l=t(67294),n=t(7444),r=t(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const c=e=>{let{icon:a}=e;return l.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},a)},o=e=>{var{children:a,className:t,dataTestId:n,type:o="neutral",iconLeft:b}=e,u=(0,s._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(i.statusLabel,i[o],b&&i.statusLabelWithIcon,t),"data-testid":n},u),b&&l.createElement(c,{icon:b}),a)}},34517:function(e,a,t){t.r(a);var s=t(11151),l=t(67294),n=t(83428),r=t(57674),i=t(89482),c=(t(18607),t(26127));function o(e){const a=Object.assign({h1:"h1",a:"a",span:"span"},(0,s.ah)(),e.components);return c.Z||b("PageTabs",!1),c.Z.Tab||b("PageTabs.Tab",!0),c.Z.TabList||b("PageTabs.TabList",!0),c.Z.TabPanel||b("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(a.h1,{id:"link",style:{position:"relative"}},"Link",l.createElement(a.a,{href:"#link","aria-label":"link permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(n.S,{type:"info"},"Stable"),l.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(i.Z,null,"Links are used as navigational elements and can be used on their own or in inline with text. They provide a lightweight option for navigation."),"\n",l.createElement(c.Z,{pageContext:e.pageContext},l.createElement(c.Z.TabList,null,l.createElement(c.Z.Tab,{href:"/"},"Usage"),l.createElement(c.Z.Tab,{href:"/code"},"Code"),l.createElement(c.Z.Tab,{href:"/accessibility"},"Accessibility")),l.createElement(c.Z.TabPanel,null,e.children)))}function b(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,s.ah)(),e.components);return a?l.createElement(a,e,l.createElement(o,e)):o(e)}},89482:function(e,a,t){var s=t(67294);a.Z=e=>{let{color:a="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:l={},children:n}=e;return s.createElement("p",{style:{fontSize:t,color:a,maxWidth:600,...l}},n)}},26127:function(e,a,t){var s=t(67294),l=t(14160),n=t(94671);const r="PageTabList",i="PageTabPanel",c="PageTab",o=e=>{var a;let{pageContext:t,children:o}=e;const b=t.frontmatter.slug,u=Array.isArray(o)?o:[o],d=u.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===r)),m=u.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===i)),h=null===(a=d.props)||void 0===a?void 0:a.children.filter((e=>e.type.componentName===c)),p=h.findIndex((e=>b.endsWith(e.props.href))),_=-1===p?0:p,g=0===_?b:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(b);return s.createElement(n.a,{initiallyActiveTab:_},s.createElement(n.a.TabList,{className:"page-tabs-list"},h.map((e=>s.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?g:g+e.props.href))},e.props.children)))),h.map(((e,a)=>s.createElement(n.a.TabPanel,{key:e.props.href},_===a?m.props.children:s.createElement("div",null)))))},b=e=>{let{children:a}=e;return s.createElement(n.a.TabList,null,a)};b.componentName=r;const u=e=>{let{href:a,slug:t,children:l}=e;return s.createElement(n.a.Tab,null,l)};u.componentName=c;const d=e=>{let{children:a}=e;return s.createElement(n.a.TabPanel,null,a)};d.componentName=i,o.TabList=b,o.Tab=u,o.TabPanel=d,a.Z=o},57674:function(e,a,t){var s=t(67294),l=t(45422);a.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return s.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},s.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((a=>s.createElement("li",{key:a},s.createElement("span",{className:"status-name"},a),s.createElement("span",null,e[a]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-linkbox-accessibility-mdx-e50ed38f2cae42e43c46.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-linkbox-accessibility-mdx-e50ed38f2cae42e43c46.js
new file mode 100644
index 00000000000..c894bc3f651
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-linkbox-accessibility-mdx-e50ed38f2cae42e43c46.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[5490,3676],{83428:function(e,t,a){a.d(t,{S:function(){return o}});var l=a(80136),s=a(67294),n=a(7444),r=a(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const c=e=>{let{icon:t}=e;return s.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},t)},o=e=>{var{children:t,className:a,dataTestId:n,type:o="neutral",iconLeft:u}=e,b=(0,l._)(e,["children","className","dataTestId","type","iconLeft"]);return s.createElement("span",Object.assign({className:(0,r.c)(i.statusLabel,i[o],u&&i.statusLabelWithIcon,a),"data-testid":n},b),u&&s.createElement(c,{icon:u}),t)}},64206:function(e,t,a){a.r(t);var l=a(11151),s=a(67294),n=a(80699),r=a(88144);const i=e=>{let{children:t,pageContext:a}=e;return s.createElement(r.default,{pageContext:a},t)};function c(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li"},(0,l.ah)(),e.components);return s.createElement(s.Fragment,null,s.createElement(t.h2,{id:"accessibility",style:{position:"relative"}},"Accessibility",s.createElement(t.a,{href:"#accessibility","aria-label":"accessibility permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.h3,{id:"pay-attention-to",style:{position:"relative"}},"Pay attention to",s.createElement(t.a,{href:"#pay-attention-to","aria-label":"pay attention to permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.ul,null,"\n",s.createElement(t.li,null,"Linkbox must have the link as its last element (in the DOM tree). This way assistive technologies will eventually find the Linkbox link."),"\n",s.createElement(t.li,null,"The colour contrast between the Linkbox and its background must comply with ",s.createElement(n.Z,{href:"https://www.w3.org/TR/WCAG21/#contrast-minimum"},"WCAG AA Level contrast ratios"),". If needed, you may use a Linkbox border to increase the contrast to its background."),"\n"))}t.default=function(e){return void 0===e&&(e={}),s.createElement(i,e,s.createElement(c,e))}},88144:function(e,t,a){a.r(t);var l=a(11151),s=a(67294),n=a(83428),r=a(57674),i=a(89482),c=(a(18607),a(26127));function o(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,l.ah)(),e.components);return c.Z||u("PageTabs",!1),c.Z.Tab||u("PageTabs.Tab",!0),c.Z.TabList||u("PageTabs.TabList",!0),c.Z.TabPanel||u("PageTabs.TabPanel",!0),s.createElement(s.Fragment,null,s.createElement(t.h1,{id:"linkbox",style:{position:"relative"}},"Linkbox",s.createElement(t.a,{href:"#linkbox","aria-label":"linkbox permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement("div",{class:"status-label-description"},s.createElement(n.S,{type:"alert"},"Beta"),s.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),s.createElement(r.Z)),"\n",s.createElement(i.Z,null,"Linkboxes are used to combine multiple elements into a single interactable element. While they are visually similar to HDS Cards, Linkboxes are always a single clickable link and they cannot contain other interactable elements."),"\n",s.createElement(c.Z,{pageContext:e.pageContext},s.createElement(c.Z.TabList,null,s.createElement(c.Z.Tab,{href:"/"},"Usage"),s.createElement(c.Z.Tab,{href:"/code"},"Code"),s.createElement(c.Z.Tab,{href:"/accessibility"},"Accessibility")),s.createElement(c.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,l.ah)(),e.components);return t?s.createElement(t,e,s.createElement(o,e)):o(e)}},89482:function(e,t,a){var l=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:s={},children:n}=e;return l.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...s}},n)}},26127:function(e,t,a){var l=a(67294),s=a(14160),n=a(94671);const r="PageTabList",i="PageTabPanel",c="PageTab",o=e=>{var t;let{pageContext:a,children:o}=e;const u=a.frontmatter.slug,b=Array.isArray(o)?o:[o],d=b.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===r)),h=b.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===i)),m=null===(t=d.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===c)),p=m.findIndex((e=>u.endsWith(e.props.href))),_=-1===p?0:p,g=0===_?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return l.createElement(n.a,{initiallyActiveTab:_},l.createElement(n.a.TabList,{className:"page-tabs-list"},m.map((e=>l.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,s.navigate)(""+("/"===e.props.href?g:g+e.props.href))},e.props.children)))),m.map(((e,t)=>l.createElement(n.a.TabPanel,{key:e.props.href},_===t?h.props.children:l.createElement("div",null)))))},u=e=>{let{children:t}=e;return l.createElement(n.a.TabList,null,t)};u.componentName=r;const b=e=>{let{href:t,slug:a,children:s}=e;return l.createElement(n.a.Tab,null,s)};b.componentName=c;const d=e=>{let{children:t}=e;return l.createElement(n.a.TabPanel,null,t)};d.componentName=i,o.TabList=u,o.Tab=b,o.TabPanel=d,t.Z=o},57674:function(e,t,a){var l=a(67294),s=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return l.createElement(s.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},l.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>l.createElement("li",{key:t},l.createElement("span",{className:"status-name"},t),l.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-linkbox-code-mdx-be15f5a1db16db2f0902.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-linkbox-code-mdx-be15f5a1db16db2f0902.js
new file mode 100644
index 00000000000..449093ccead
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-linkbox-code-mdx-be15f5a1db16db2f0902.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[4095,3676],{36870:function(e,n,t){t.d(n,{I:function(){return i}});var a=t(67294),l=t(32719);const i=e=>{let{ariaLabel:n="arrow-right",ariaLabelledby:t,ariaHidden:i=!0,className:r="",color:o,size:s="s",style:c={}}=e;return a.createElement("svg",{className:[l.s.icon,l.s[s],r].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":n,"aria-labelledby":t,"aria-hidden":i,color:o,style:c},a.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z",fill:"currentColor"}))}},72612:function(e,n,t){t.d(n,{L:function(){return h}});var a=t(80136),l=t(67294),i=t(7444),r=t(34300),o=t(77516),s=t(36870),c="Linkbox-module_icon__1e7kG",d="Linkbox-module_iconWhenNoBackground__3RJw_",m="Linkbox-module_iconPositionForLinkboxLargeVariant__3vQvC";(0,i.s)('.helpers_visually-hidden__2yHIV{border:0;clip:"rect(0 0 0 0)";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.helpers_button-reset__3h-7X{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.helpers_text-body__3Ktbd{color:var(--color-black-90);font-family:var(--font-default);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.helpers_text-medium__5kads{font-family:var(--font-default);font-weight:500}.helpers_text-bold__2hO0s{font-family:var(--font-default);font-weight:700}.helpers_text-xl__3r8PW{font-size:var(--fontsize-heading-m)}.helpers_text-lg__2vaNo{font-size:var(--fontsize-heading-s)}.helpers_text-md__2uXml{font-size:var(--fontsize-heading-xs)}.helpers_subtitle__3gee2{font-size:var(--fontsize-body-m)}.helpers_text-sm__3mxQW{font-size:var(--fontsize-body-s);line-height:var(--lineheight-xl)}.helpers_heading-xxl__1uNdU{font-size:var(--fontsize-heading-xxl);font-weight:400;letter-spacing:-1.2px;line-height:var(--lineheight-s)}.helpers_heading-xl__k-Z6c{font-size:var(--fontsize-heading-xl);font-weight:400;letter-spacing:-1px;line-height:var(--lineheight-s)}.helpers_heading-xl-mobile__1PMGL{font-size:var(--fontsize-heading-xl-mobile);font-weight:400;letter-spacing:-.8px;line-height:var(--lineheight-s)}.helpers_heading-l__2DLQU{font-size:var(--fontsize-heading-l);font-weight:400;letter-spacing:-.4px;line-height:var(--lineheight-s)}.helpers_heading-m__3vHem{font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-.2px;line-height:32px}.helpers_heading-s__1HNlW{font-size:var(--fontsize-heading-s);font-weight:500;letter-spacing:.2px;line-height:1.4}.helpers_heading-xs__23mRf{font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:.4px;line-height:1.33}.helpers_heading-xxs__1Tc8t{font-size:var(--fontsize-heading-xxs);font-weight:700;letter-spacing:.4px;line-height:var(--lineheight-l)}.helpers_helper-text__2eYfy{color:var(--color-black-60);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs)}.Linkbox-module_linkbox__15LUm{cursor:pointer;position:relative}.Linkbox-module_linkbox__15LUm:focus-within{outline:var(--color-coat-of-arms) 3px solid}.Linkbox-module_withBackground__1xdbp{background-color:var(--color-white)}.Linkbox-module_withoutBackground__2p7A4{background:transparent;padding-bottom:var(--spacing-2-xl)!important;padding-left:0!important;padding-right:0!important}.Linkbox-module_paddingWithoutImageAndWithBackground__xar7n{padding-top:var(--spacing-m)}.Linkbox-module_paddingWithoutImageAndWithoutBackground__1zCpz{padding:0}.Linkbox-module_withMediumImage__O0JFd,.Linkbox-module_withSmallImage__3E12M{padding-top:var(--spacing-s)}.Linkbox-module_withLargeImage__3M-5l{padding-top:var(--spacing-m)}.Linkbox-module_contentMedium__naQyB,.Linkbox-module_contentSmall__2WG1n{padding-bottom:var(--spacing-4-xl);padding-left:var(--spacing-s);padding-right:var(--spacing-s)}.Linkbox-module_contentLarge__1j0J8{padding-bottom:var(--spacing-5-xl);padding-left:var(--spacing-m);padding-right:var(--spacing-m)}.Linkbox-module_icon__1e7kG{bottom:var(--spacing-s);left:var(--spacing-s);position:absolute;vertical-align:bottom}.Linkbox-module_border__3lfzt{border:2px solid var(--color-black-90)}.Linkbox-module_border__3lfzt:focus-within{border:2px solid var(--color-black-90)!important;outline:var(--color-coat-of-arms) 3px solid}.Linkbox-module_border__3lfzt .Linkbox-module_contentMedium__naQyB,.Linkbox-module_border__3lfzt .Linkbox-module_contentSmall__2WG1n{padding-bottom:62px;padding-left:14px;padding-right:14px}.Linkbox-module_border__3lfzt .Linkbox-module_contentLarge__1j0J8{padding-bottom:70px;padding-left:22px;padding-right:22px}.Linkbox-module_border__3lfzt .Linkbox-module_icon__1e7kG{bottom:14px;left:14px}.Linkbox-module_border__3lfzt .Linkbox-module_paddingWithoutImageAndWithBackground__xar7n{padding-top:22px}.Linkbox-module_text__2lkl4{color:var(--color-black-90);font-family:var(--font-default);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-bottom:var(--spacing-s);margin-top:var(--spacing-2-xs)}.Linkbox-module_contentLarge__1j0J8 .Linkbox-module_text__2lkl4{margin-bottom:var(--spacing-m)}.Linkbox-module_headingSmall__1-9yw{padding-bottom:0}.Linkbox-module_headingLarge__1IWlD{padding-bottom:var(--spacing-2-xs)}.Linkbox-module_link__3tFuW{color:var(--color-black-90);display:inline-block;height:100%;left:0;line-height:var(--lineheight-l);position:absolute;top:0;width:100%}.Linkbox-module_link__3tFuW:focus{border:none;outline:none}.Linkbox-module_iconWhenNoBackground__3RJw_{bottom:0;left:0}.Linkbox-module_iconPositionForLinkboxLargeVariant__3vQvC{bottom:22px;left:22px}.Linkbox-module_image__2GxFx{display:block;height:auto;object-fit:contain;width:100%}');const h=e=>{var{children:n,className:t,external:i=!1,heading:h,headingAriaLevel:b=2,href:u,imgProps:p,linkAriaLabel:g,linkboxAriaLabel:x,noBackground:_=!1,openInExternalDomainAriaLabel:k,openInNewTab:f=!1,openInNewTabAriaLabel:L,text:E,border:v=!1,size:y="medium"}=e,w=(0,a._)(e,["children","className","external","heading","headingAriaLevel","href","imgProps","linkAriaLabel","linkboxAriaLabel","noBackground","openInExternalDomainAriaLabel","openInNewTab","openInNewTabAriaLabel","text","border","size"]);const z=(0,l.useRef)(null),T=e=>{const n=f?L||"Avautuu uudessa välilehdessä.":"",t=i?k||"Siirtyy toiseen sivustoon.":"";let a="";return e&&"."!==e.slice(-1)&&(a=e+"."),[a,n,t].filter((e=>e)).join(" ")};return l.createElement("div",{role:"region",tabIndex:0,onKeyPress:e=>{"Enter"===e.key&&z.current.click()},onClick:()=>{z.current.click()},className:(0,r.c)("Linkbox-module_linkbox__15LUm",v&&"Linkbox-module_border__3lfzt",t),"aria-label":T(x)},p&&l.createElement("img",Object.assign({},p,{className:"Linkbox-module_image__2GxFx",alt:""})),l.createElement("div",{className:(0,r.c)(_&&"Linkbox-module_withoutBackground__2p7A4",!_&&"Linkbox-module_withBackground__1xdbp",_&&!p&&"Linkbox-module_paddingWithoutImageAndWithoutBackground__1zCpz",!_&&!p&&"Linkbox-module_paddingWithoutImageAndWithBackground__xar7n",p&&"small"===y&&"Linkbox-module_withSmallImage__3E12M",p&&"medium"===y&&"Linkbox-module_withMediumImage__O0JFd",p&&"large"===y&&"Linkbox-module_withLargeImage__3M-5l","small"===y&&"Linkbox-module_contentSmall__2WG1n","medium"===y&&"Linkbox-module_contentMedium__naQyB","large"===y&&"Linkbox-module_contentLarge__1j0J8")},h&&l.createElement("div",{role:"heading","aria-level":b,className:(0,r.c)("small"===y&&"Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW","medium"===y&&"Linkbox-module_headingMedium__3YUWb helpers_heading-m__3vHem","large"===y&&"Linkbox-module_headingLarge__1IWlD helpers_heading-l__2DLQU")},h),E&&l.createElement("p",{className:"Linkbox-module_text__2lkl4"},E),n),l.createElement("a",Object.assign({className:"Linkbox-module_link__3tFuW","aria-label":T(g),ref:z,tabIndex:-1,href:u},f&&{target:"_blank",rel:"noopener"},w),i?l.createElement(o.I,{className:(0,r.c)(c,_?d:"large"===y&&m),size:"l","aria-hidden":!0}):l.createElement(s.I,{className:(0,r.c)(c,_?d:"large"===y&&m),size:"l","aria-hidden":!0})))}},83428:function(e,n,t){t.d(n,{S:function(){return c}});var a=t(80136),l=t(67294),i=t(7444),r=t(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,i.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const s=e=>{let{icon:n}=e;return l.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},n)},c=e=>{var{children:n,className:t,dataTestId:i,type:c="neutral",iconLeft:d}=e,m=(0,a._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(o.statusLabel,o[c],d&&o.statusLabelWithIcon,t),"data-testid":i},m),d&&l.createElement(s,{icon:d}),n)}},94042:function(e,n,t){t.r(n);var a=t(11151),l=t(67294),i=t(72612),r=t(14160),o=t(88144);const s=e=>{let{children:n,pageContext:t}=e;return l.createElement(o.default,{pageContext:t},n)};function c(e){const n=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",h4:"h4",pre:"pre",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",strong:"strong",p:"p"},(0,a.ah)(),e.components),{Playground:t,IconCheckCircleFill:o,Link:s,ExternalLink:c,IconCrossCircle:m}=n;return c||d("ExternalLink",!0),o||d("IconCheckCircleFill",!0),m||d("IconCrossCircle",!0),s||d("Link",!0),t||d("Playground",!0),l.createElement(l.Fragment,null,l.createElement(n.h2,{id:"code",style:{position:"relative"}},"Code",l.createElement(n.a,{href:"#code","aria-label":"code permalink",className:"header-anchor after"},l.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n.h3,{id:"code-examples",style:{position:"relative"}},"Code examples",l.createElement(n.a,{href:"#code-examples","aria-label":"code examples permalink",className:"header-anchor after"},l.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n.h4,{id:"empty",style:{position:"relative"}},"Empty",l.createElement(n.a,{href:"#empty","aria-label":"empty permalink",className:"header-anchor after"},l.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t,{scope:{Linkbox:i.L}},l.createElement(n.pre,null,l.createElement(n.code,{className:"language-jsx"},"import { Linkbox } from 'hds-react';\n\n() => (\n  <div style={{ backgroundColor: 'var(--color-black-5)', padding: 'var(--spacing-s)' }}>\n    <div style={{ maxWidth: '320px' }}>\n      <Linkbox linkboxAriaLabel=\"Linkbox: Helsinki Design System\" linkAriaLabel=\"HDS\" href=\"https://hds.hel.fi\">\n        <div style={{ height: '106px' }} />\n      </Linkbox>\n    </div>\n    <div style={{ maxWidth: '320px', marginTop: 'var(--spacing-s)' }}>\n      <Linkbox linkboxAriaLabel=\"Linkbox: Helsinki Design System\" linkAriaLabel=\"HDS\" href=\"https://hds.hel.fi\" border>\n        <div style={{ height: '106px' }} />\n      </Linkbox>\n    </div>\n    <div style={{ maxWidth: '320px', marginTop: 'var(--spacing-s)' }}>\n      <Linkbox linkboxAriaLabel=\"Linkbox: Helsinki Design System\" linkAriaLabel=\"HDS\" href=\"https://hds.hel.fi\" noBackground>\n        <div style={{ height: '106px' }} />\n      </Linkbox>\n    </div>\n  </div>\n)\n"))),"\n",l.createElement(n.h3,{id:"with-heading-and-body-text",style:{position:"relative"}},"With heading and body text",l.createElement(n.a,{href:"#with-heading-and-body-text","aria-label":"with heading and body text permalink",className:"header-anchor after"},l.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t,{scope:{Linkbox:i.L}},l.createElement(n.pre,null,l.createElement(n.code,{className:"language-jsx"},'import { Linkbox } from \'hds-react\';\n\n() => (\n  <div style={{ backgroundColor: \'var(--color-black-5)\', padding: \'var(--spacing-s)\' }}>\n    <div style={{ maxWidth: \'320px\' }}>\n      <Linkbox\n        linkboxAriaLabel="Linkbox: Helsinki Design System"\n        linkAriaLabel="HDS"\n        href="https://hds.hel.fi"\n        heading="Linkbox title"\n        text="Linkbox text"\n      />\n    </div>\n    <div style={{ maxWidth: \'320px\', marginTop: \'var(--spacing-s)\' }}>\n      <Linkbox\n        linkboxAriaLabel="Linkbox: Helsinki Design System"\n        linkAriaLabel="HDS"\n        href="https://hds.hel.fi"\n        heading="Linkbox title"\n        text="Linkbox text"\n        border\n      />\n    </div>\n    <div style={{ maxWidth: \'320px\', marginTop: \'var(--spacing-s)\' }}>\n      <Linkbox\n        linkboxAriaLabel="Linkbox: Helsinki Design System"\n        linkAriaLabel="HDS"\n        href="https://hds.hel.fi"\n        heading="Linkbox title"\n        text="Linkbox text"\n        noBackground\n      />\n    </div>\n  </div>\n)\n'))),"\n",l.createElement(n.h3,{id:"internal-and-external-linkboxes",style:{position:"relative"}},"Internal and external Linkboxes",l.createElement(n.a,{href:"#internal-and-external-linkboxes","aria-label":"internal and external linkboxes permalink",className:"header-anchor after"},l.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t,{scope:{Linkbox:i.L}},l.createElement(n.pre,null,l.createElement(n.code,{className:"language-jsx"},'import { Linkbox } from \'hds-react\';\n\n() => (\n  <div style={{ backgroundColor: \'var(--color-black-5)\', padding: \'var(--spacing-s)\' }}>\n    <div style={{ maxWidth: \'320px\' }}>\n      <Linkbox\n        linkboxAriaLabel="Linkbox: Helsinki Design System"\n        linkAriaLabel="HDS"\n        href="https://hds.hel.fi"\n        heading="Internal link"\n        text="This link points to a page belonging to the same website as the current page."\n        border\n      />\n    </div>\n    <div style={{ maxWidth: \'320px\', marginTop: \'var(--spacing-s)\' }}>\n      <Linkbox\n        linkboxAriaLabel="Linkbox: Helsinki Design System"\n        linkAriaLabel="HDS"\n        href="https://hds.hel.fi"\n        heading="External link"\n        text="This link points to another page."\n        openInExternalDomainAriaLabel="Opens a different website."\n        external\n        border\n      />\n    </div>\n    <div style={{ maxWidth: \'320px\', marginTop: \'var(--spacing-s)\' }}>\n      <Linkbox\n        linkboxAriaLabel="Linkbox: Helsinki Design System"\n        linkAriaLabel="HDS"\n        href="https://hds.hel.fi"\n        heading="External link"\n        openInNewTab\n        openInNewTabAriaLabel="Opens in a new tab."\n        text="This link points to another page and opens in a new tab."\n        openInExternalDomainAriaLabel="Opens a different website."\n        external\n        border\n      />\n    </div>\n  </div>\n)\n'))),"\n",l.createElement(n.h3,{id:"with-image",style:{position:"relative"}},"With image",l.createElement(n.a,{href:"#with-image","aria-label":"with image permalink",className:"header-anchor after"},l.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t,{scope:{Linkbox:i.L,withPrefix:r.withPrefix}},l.createElement(n.pre,null,l.createElement(n.code,{className:"language-jsx"},'import { Linkbox } from \'hds-react\';\n\n() => (\n  <div style={{ backgroundColor: \'var(--color-black-5)\', padding: \'var(--spacing-s)\' }}>\n    <div style={{ maxWidth: \'384px\' }}>\n      <Linkbox\n        linkboxAriaLabel="Linkbox: Helsinki Design System"\n        linkAriaLabel="HDS"\n        href="https://hds.hel.fi"\n        heading="Linkbox title"\n        text="Linkbox text"\n        imgProps={{ src: withPrefix("/images/foundation/visual-assets/placeholders/image-m@3x.png"), width: 384, height: 245 }}\n      />\n    </div>\n  </div>\n)\n'))),"\n",l.createElement(n.h3,{id:"linkbox-size-variants",style:{position:"relative"}},"Linkbox size variants",l.createElement(n.a,{href:"#linkbox-size-variants","aria-label":"linkbox size variants permalink",className:"header-anchor after"},l.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t,{scope:{Linkbox:i.L,withPrefix:r.withPrefix}},l.createElement(n.pre,null,l.createElement(n.code,{className:"language-jsx"},'import { Linkbox } from \'hds-react\';\n\n() => (\n  <div style={{ backgroundColor: \'var(--color-black-5)\', padding: \'var(--spacing-s)\' }}>\n    <div style={{ maxWidth: \'284px\' }}>\n      <Linkbox\n        linkboxAriaLabel="Linkbox: Helsinki Design System"\n        linkAriaLabel="HDS"\n        href="https://hds.hel.fi"\n        heading="Linkbox title"\n        text="Linkbox text"\n        size="small"\n        imgProps={{ src: withPrefix(\'/images/foundation/visual-assets/placeholders/image-m@3x.png\'), width: 284, height: 181 }}\n      />\n    </div>\n    <div style={{ maxWidth: \'384px\', marginTop: \'var(--spacing-s)\' }}>\n      <Linkbox\n        linkboxAriaLabel="Linkbox: Helsinki Design System"\n        linkAriaLabel="HDS"\n        href="https://hds.hel.fi"\n        heading="Linkbox title"\n        text="Linkbox text"\n        size="medium"\n        imgProps={{ src: withPrefix(\'/images/foundation/visual-assets/placeholders/image-m@3x.png\'), width: 384, height: 245 }}\n      />\n    </div>\n    <div style={{ maxWidth: \'567px\', marginTop: \'var(--spacing-s)\' }}>\n      <Linkbox\n        linkboxAriaLabel="Linkbox: Helsinki Design System"\n        linkAriaLabel="HDS"\n        href="https://hds.hel.fi"\n        heading="Linkbox title"\n        text="Linkbox text"\n        size="large"\n        imgProps={{ src: withPrefix(\'/images/foundation/visual-assets/placeholders/image-m@3x.png\'), width: 567, height: 363 }}\n      />\n    </div>\n  </div>\n)\n'))),"\n",l.createElement(n.h3,{id:"packages",style:{position:"relative"}},"Packages",l.createElement(n.a,{href:"#packages","aria-label":"packages permalink",className:"header-anchor after"},l.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n.table,null,l.createElement(n.thead,null,l.createElement(n.tr,null,l.createElement(n.th,null,"Package"),l.createElement(n.th,null,"Included"),l.createElement(n.th,null,"Storybook link"),l.createElement(n.th,null,"Source link"))),l.createElement(n.tbody,null,l.createElement(n.tr,null,l.createElement(n.td,null,l.createElement(n.strong,null,"HDS React")),l.createElement(n.td,null,l.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},l.createElement(o)," Yes ")),l.createElement(n.td,null,l.createElement(s,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-linkbox-empty-for-custom-content--default"},"View in Storybook")),l.createElement(n.td,null,l.createElement(c,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/react/src/components/link"},"View source"))),l.createElement(n.tr,null,l.createElement(n.td,null,l.createElement(n.strong,null,"HDS Core")),l.createElement(n.td,null,l.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},l.createElement(m)," No ")),l.createElement(n.td,null,"-"),l.createElement(n.td,null,"-")))),"\n",l.createElement(n.h3,{id:"properties",style:{position:"relative"}},"Properties",l.createElement(n.a,{href:"#properties","aria-label":"properties permalink",className:"header-anchor after"},l.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n.p,null,"Note! You can find the full list of properties in the ",l.createElement(s,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-linkbox-empty-for-custom-content--default"},"React Storybook.")),"\n",l.createElement(n.table,null,l.createElement(n.thead,null,l.createElement(n.tr,null,l.createElement(n.th,null,"Property"),l.createElement(n.th,null,"Description"),l.createElement(n.th,null,"Values"),l.createElement(n.th,null,"Default value"))),l.createElement(n.tbody,null,l.createElement(n.tr,null,l.createElement(n.td,null,l.createElement(n.code,null,"heading")),l.createElement(n.td,null,"Heading of the Linkbox (uses the built-in heading)"),l.createElement(n.td,null,l.createElement(n.code,null,"string")),l.createElement(n.td,null,"-")),l.createElement(n.tr,null,l.createElement(n.td,null,l.createElement(n.code,null,"headingAriaLevel")),l.createElement(n.td,null,"Controls the aria-level of the built-in heading."),l.createElement(n.td,null,l.createElement(n.code,null,"number")),l.createElement(n.td,null,"2")),l.createElement(n.tr,null,l.createElement(n.td,null,l.createElement(n.code,null,"external")),l.createElement(n.td,null,"If set to true, the link is marked as external (points outside of the domain)."),l.createElement(n.td,null,l.createElement(n.code,null,"boolean")),l.createElement(n.td,null,"false")),l.createElement(n.tr,null,l.createElement(n.td,null,l.createElement(n.code,null,"openInExternalDomainAriaLabel")),l.createElement(n.td,null,"Aria-label which is read if the link is external."),l.createElement(n.td,null,l.createElement(n.code,null,"string")),l.createElement(n.td,null,"-")),l.createElement(n.tr,null,l.createElement(n.td,null,l.createElement(n.code,null,"openInNewTab")),l.createElement(n.td,null,"If set to true, the link opens in a new tab."),l.createElement(n.td,null,l.createElement(n.code,null,"boolean")),l.createElement(n.td,null,"false")),l.createElement(n.tr,null,l.createElement(n.td,null,l.createElement(n.code,null,"openInNewTabAriaLabel")),l.createElement(n.td,null,"Aria-label which is read if the link is opened in a new tab."),l.createElement(n.td,null,l.createElement(n.code,null,"string")),l.createElement(n.td,null,"-")),l.createElement(n.tr,null,l.createElement(n.td,null,l.createElement(n.code,null,"size")),l.createElement(n.td,null,"Controls the size of the Linkbox."),l.createElement(n.td,null,l.createElement(n.code,null,'"small"'),", ",l.createElement(n.code,null,'"medium"'),", ",l.createElement(n.code,null,'"large"')),l.createElement(n.td,null,l.createElement(n.code,null,'"medium"'))),l.createElement(n.tr,null,l.createElement(n.td,null,l.createElement(n.code,null,"href")),l.createElement(n.td,null,"Hypertext reference of the link."),l.createElement(n.td,null,l.createElement(n.code,null,"string")),l.createElement(n.td,null,"-")),l.createElement(n.tr,null,l.createElement(n.td,null,l.createElement(n.code,null,"linkAriaLabel")),l.createElement(n.td,null,"Aria-label for the link (arrow or external icon) that is located at the bottom of the linkbox."),l.createElement(n.td,null,l.createElement(n.code,null,"string")),l.createElement(n.td,null,"-")),l.createElement(n.tr,null,l.createElement(n.td,null,l.createElement(n.code,null,"linkboxAriaLabel")),l.createElement(n.td,null,"Aria label for the whole linkbox region. Remember to tell users of assistive technology that they are inside a linkbox. Check storybook examples on how it can be done."),l.createElement(n.td,null,l.createElement(n.code,null,"string")),l.createElement(n.td,null,"-")),l.createElement(n.tr,null,l.createElement(n.td,null,l.createElement(n.code,null,"border")),l.createElement(n.td,null,"If set to true, a border will be drawn around the card."),l.createElement(n.td,null,l.createElement(n.code,null,"boolean")),l.createElement(n.td,null,"false")))))}function d(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}n.default=function(e){return void 0===e&&(e={}),l.createElement(s,e,l.createElement(c,e))}},88144:function(e,n,t){t.r(n);var a=t(11151),l=t(67294),i=t(83428),r=t(57674),o=t(89482),s=(t(18607),t(26127));function c(e){const n=Object.assign({h1:"h1",a:"a",span:"span"},(0,a.ah)(),e.components);return s.Z||d("PageTabs",!1),s.Z.Tab||d("PageTabs.Tab",!0),s.Z.TabList||d("PageTabs.TabList",!0),s.Z.TabPanel||d("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(n.h1,{id:"linkbox",style:{position:"relative"}},"Linkbox",l.createElement(n.a,{href:"#linkbox","aria-label":"linkbox permalink",className:"header-anchor after"},l.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(i.S,{type:"alert"},"Beta"),l.createElement(i.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(o.Z,null,"Linkboxes are used to combine multiple elements into a single interactable element. While they are visually similar to HDS Cards, Linkboxes are always a single clickable link and they cannot contain other interactable elements."),"\n",l.createElement(s.Z,{pageContext:e.pageContext},l.createElement(s.Z.TabList,null,l.createElement(s.Z.Tab,{href:"/"},"Usage"),l.createElement(s.Z.Tab,{href:"/code"},"Code"),l.createElement(s.Z.Tab,{href:"/accessibility"},"Accessibility")),l.createElement(s.Z.TabPanel,null,e.children)))}function d(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}n.default=function(e){void 0===e&&(e={});const{wrapper:n}=Object.assign({},(0,a.ah)(),e.components);return n?l.createElement(n,e,l.createElement(c,e)):c(e)}},89482:function(e,n,t){var a=t(67294);n.Z=e=>{let{color:n="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:l={},children:i}=e;return a.createElement("p",{style:{fontSize:t,color:n,maxWidth:600,...l}},i)}},26127:function(e,n,t){var a=t(67294),l=t(14160),i=t(94671);const r="PageTabList",o="PageTabPanel",s="PageTab",c=e=>{var n;let{pageContext:t,children:c}=e;const d=t.frontmatter.slug,m=Array.isArray(c)?c:[c],h=m.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===r)),b=m.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===o)),u=null===(n=h.props)||void 0===n?void 0:n.children.filter((e=>e.type.componentName===s)),p=u.findIndex((e=>d.endsWith(e.props.href))),g=-1===p?0:p,x=0===g?d:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(d);return a.createElement(i.a,{initiallyActiveTab:g},a.createElement(i.a.TabList,{className:"page-tabs-list"},u.map((e=>a.createElement(i.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?x:x+e.props.href))},e.props.children)))),u.map(((e,n)=>a.createElement(i.a.TabPanel,{key:e.props.href},g===n?b.props.children:a.createElement("div",null)))))},d=e=>{let{children:n}=e;return a.createElement(i.a.TabList,null,n)};d.componentName=r;const m=e=>{let{href:n,slug:t,children:l}=e;return a.createElement(i.a.Tab,null,l)};m.componentName=s;const h=e=>{let{children:n}=e;return a.createElement(i.a.TabPanel,null,n)};h.componentName=o,c.TabList=d,c.Tab=m,c.TabPanel=h,n.Z=c},57674:function(e,n,t){var a=t(67294),l=t(45422);n.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return a.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},a.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((n=>a.createElement("li",{key:n},a.createElement("span",{className:"status-name"},n),a.createElement("span",null,e[n]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-linkbox-index-mdx-b7dc38ddf301199aaeee.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-linkbox-index-mdx-b7dc38ddf301199aaeee.js
new file mode 100644
index 00000000000..9e4c739ef7f
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-linkbox-index-mdx-b7dc38ddf301199aaeee.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[5394,3676],{36870:function(e,n,t){t.d(n,{I:function(){return l}});var a=t(67294),i=t(32719);const l=e=>{let{ariaLabel:n="arrow-right",ariaLabelledby:t,ariaHidden:l=!0,className:r="",color:o,size:s="s",style:c={}}=e;return a.createElement("svg",{className:[i.s.icon,i.s[s],r].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":n,"aria-labelledby":t,"aria-hidden":l,color:o,style:c},a.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z",fill:"currentColor"}))}},72612:function(e,n,t){t.d(n,{L:function(){return m}});var a=t(80136),i=t(67294),l=t(7444),r=t(34300),o=t(77516),s=t(36870),c="Linkbox-module_icon__1e7kG",d="Linkbox-module_iconWhenNoBackground__3RJw_",h="Linkbox-module_iconPositionForLinkboxLargeVariant__3vQvC";(0,l.s)('.helpers_visually-hidden__2yHIV{border:0;clip:"rect(0 0 0 0)";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.helpers_button-reset__3h-7X{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.helpers_text-body__3Ktbd{color:var(--color-black-90);font-family:var(--font-default);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.helpers_text-medium__5kads{font-family:var(--font-default);font-weight:500}.helpers_text-bold__2hO0s{font-family:var(--font-default);font-weight:700}.helpers_text-xl__3r8PW{font-size:var(--fontsize-heading-m)}.helpers_text-lg__2vaNo{font-size:var(--fontsize-heading-s)}.helpers_text-md__2uXml{font-size:var(--fontsize-heading-xs)}.helpers_subtitle__3gee2{font-size:var(--fontsize-body-m)}.helpers_text-sm__3mxQW{font-size:var(--fontsize-body-s);line-height:var(--lineheight-xl)}.helpers_heading-xxl__1uNdU{font-size:var(--fontsize-heading-xxl);font-weight:400;letter-spacing:-1.2px;line-height:var(--lineheight-s)}.helpers_heading-xl__k-Z6c{font-size:var(--fontsize-heading-xl);font-weight:400;letter-spacing:-1px;line-height:var(--lineheight-s)}.helpers_heading-xl-mobile__1PMGL{font-size:var(--fontsize-heading-xl-mobile);font-weight:400;letter-spacing:-.8px;line-height:var(--lineheight-s)}.helpers_heading-l__2DLQU{font-size:var(--fontsize-heading-l);font-weight:400;letter-spacing:-.4px;line-height:var(--lineheight-s)}.helpers_heading-m__3vHem{font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-.2px;line-height:32px}.helpers_heading-s__1HNlW{font-size:var(--fontsize-heading-s);font-weight:500;letter-spacing:.2px;line-height:1.4}.helpers_heading-xs__23mRf{font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:.4px;line-height:1.33}.helpers_heading-xxs__1Tc8t{font-size:var(--fontsize-heading-xxs);font-weight:700;letter-spacing:.4px;line-height:var(--lineheight-l)}.helpers_helper-text__2eYfy{color:var(--color-black-60);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs)}.Linkbox-module_linkbox__15LUm{cursor:pointer;position:relative}.Linkbox-module_linkbox__15LUm:focus-within{outline:var(--color-coat-of-arms) 3px solid}.Linkbox-module_withBackground__1xdbp{background-color:var(--color-white)}.Linkbox-module_withoutBackground__2p7A4{background:transparent;padding-bottom:var(--spacing-2-xl)!important;padding-left:0!important;padding-right:0!important}.Linkbox-module_paddingWithoutImageAndWithBackground__xar7n{padding-top:var(--spacing-m)}.Linkbox-module_paddingWithoutImageAndWithoutBackground__1zCpz{padding:0}.Linkbox-module_withMediumImage__O0JFd,.Linkbox-module_withSmallImage__3E12M{padding-top:var(--spacing-s)}.Linkbox-module_withLargeImage__3M-5l{padding-top:var(--spacing-m)}.Linkbox-module_contentMedium__naQyB,.Linkbox-module_contentSmall__2WG1n{padding-bottom:var(--spacing-4-xl);padding-left:var(--spacing-s);padding-right:var(--spacing-s)}.Linkbox-module_contentLarge__1j0J8{padding-bottom:var(--spacing-5-xl);padding-left:var(--spacing-m);padding-right:var(--spacing-m)}.Linkbox-module_icon__1e7kG{bottom:var(--spacing-s);left:var(--spacing-s);position:absolute;vertical-align:bottom}.Linkbox-module_border__3lfzt{border:2px solid var(--color-black-90)}.Linkbox-module_border__3lfzt:focus-within{border:2px solid var(--color-black-90)!important;outline:var(--color-coat-of-arms) 3px solid}.Linkbox-module_border__3lfzt .Linkbox-module_contentMedium__naQyB,.Linkbox-module_border__3lfzt .Linkbox-module_contentSmall__2WG1n{padding-bottom:62px;padding-left:14px;padding-right:14px}.Linkbox-module_border__3lfzt .Linkbox-module_contentLarge__1j0J8{padding-bottom:70px;padding-left:22px;padding-right:22px}.Linkbox-module_border__3lfzt .Linkbox-module_icon__1e7kG{bottom:14px;left:14px}.Linkbox-module_border__3lfzt .Linkbox-module_paddingWithoutImageAndWithBackground__xar7n{padding-top:22px}.Linkbox-module_text__2lkl4{color:var(--color-black-90);font-family:var(--font-default);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-bottom:var(--spacing-s);margin-top:var(--spacing-2-xs)}.Linkbox-module_contentLarge__1j0J8 .Linkbox-module_text__2lkl4{margin-bottom:var(--spacing-m)}.Linkbox-module_headingSmall__1-9yw{padding-bottom:0}.Linkbox-module_headingLarge__1IWlD{padding-bottom:var(--spacing-2-xs)}.Linkbox-module_link__3tFuW{color:var(--color-black-90);display:inline-block;height:100%;left:0;line-height:var(--lineheight-l);position:absolute;top:0;width:100%}.Linkbox-module_link__3tFuW:focus{border:none;outline:none}.Linkbox-module_iconWhenNoBackground__3RJw_{bottom:0;left:0}.Linkbox-module_iconPositionForLinkboxLargeVariant__3vQvC{bottom:22px;left:22px}.Linkbox-module_image__2GxFx{display:block;height:auto;object-fit:contain;width:100%}');const m=e=>{var{children:n,className:t,external:l=!1,heading:m,headingAriaLevel:b=2,href:p,imgProps:u,linkAriaLabel:g,linkboxAriaLabel:x,noBackground:_=!1,openInExternalDomainAriaLabel:k,openInNewTab:f=!1,openInNewTabAriaLabel:L,text:v,border:y=!1,size:E="medium"}=e,w=(0,a._)(e,["children","className","external","heading","headingAriaLevel","href","imgProps","linkAriaLabel","linkboxAriaLabel","noBackground","openInExternalDomainAriaLabel","openInNewTab","openInNewTabAriaLabel","text","border","size"]);const z=(0,i.useRef)(null),T=e=>{const n=f?L||"Avautuu uudessa välilehdessä.":"",t=l?k||"Siirtyy toiseen sivustoon.":"";let a="";return e&&"."!==e.slice(-1)&&(a=e+"."),[a,n,t].filter((e=>e)).join(" ")};return i.createElement("div",{role:"region",tabIndex:0,onKeyPress:e=>{"Enter"===e.key&&z.current.click()},onClick:()=>{z.current.click()},className:(0,r.c)("Linkbox-module_linkbox__15LUm",y&&"Linkbox-module_border__3lfzt",t),"aria-label":T(x)},u&&i.createElement("img",Object.assign({},u,{className:"Linkbox-module_image__2GxFx",alt:""})),i.createElement("div",{className:(0,r.c)(_&&"Linkbox-module_withoutBackground__2p7A4",!_&&"Linkbox-module_withBackground__1xdbp",_&&!u&&"Linkbox-module_paddingWithoutImageAndWithoutBackground__1zCpz",!_&&!u&&"Linkbox-module_paddingWithoutImageAndWithBackground__xar7n",u&&"small"===E&&"Linkbox-module_withSmallImage__3E12M",u&&"medium"===E&&"Linkbox-module_withMediumImage__O0JFd",u&&"large"===E&&"Linkbox-module_withLargeImage__3M-5l","small"===E&&"Linkbox-module_contentSmall__2WG1n","medium"===E&&"Linkbox-module_contentMedium__naQyB","large"===E&&"Linkbox-module_contentLarge__1j0J8")},m&&i.createElement("div",{role:"heading","aria-level":b,className:(0,r.c)("small"===E&&"Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW","medium"===E&&"Linkbox-module_headingMedium__3YUWb helpers_heading-m__3vHem","large"===E&&"Linkbox-module_headingLarge__1IWlD helpers_heading-l__2DLQU")},m),v&&i.createElement("p",{className:"Linkbox-module_text__2lkl4"},v),n),i.createElement("a",Object.assign({className:"Linkbox-module_link__3tFuW","aria-label":T(g),ref:z,tabIndex:-1,href:p},f&&{target:"_blank",rel:"noopener"},w),l?i.createElement(o.I,{className:(0,r.c)(c,_?d:"large"===E&&h),size:"l","aria-hidden":!0}):i.createElement(s.I,{className:(0,r.c)(c,_?d:"large"===E&&h),size:"l","aria-hidden":!0})))}},83428:function(e,n,t){t.d(n,{S:function(){return c}});var a=t(80136),i=t(67294),l=t(7444),r=t(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,l.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const s=e=>{let{icon:n}=e;return i.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},n)},c=e=>{var{children:n,className:t,dataTestId:l,type:c="neutral",iconLeft:d}=e,h=(0,a._)(e,["children","className","dataTestId","type","iconLeft"]);return i.createElement("span",Object.assign({className:(0,r.c)(o.statusLabel,o[c],d&&o.statusLabelWithIcon,t),"data-testid":l},h),d&&i.createElement(s,{icon:d}),n)}},55754:function(e,n,t){t.r(n);var a=t(11151),i=t(67294),l=t(72612),r=t(14160),o=t(88144);const s=e=>{let{children:n,pageContext:t}=e;return i.createElement(o.default,{pageContext:t},n)};function c(e){const n=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",strong:"strong",h4:"h4",p:"p",code:"code"},(0,a.ah)(),e.components),{PlaygroundPreview:t,InternalLink:o}=n;return o||d("InternalLink",!0),t||d("PlaygroundPreview",!0),i.createElement(i.Fragment,null,i.createElement(n.h2,{id:"usage",style:{position:"relative"}},"Usage",i.createElement(n.a,{href:"#usage","aria-label":"usage permalink",className:"header-anchor after"},i.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",i.createElement(n.h3,{id:"example",style:{position:"relative"}},"Example",i.createElement(n.a,{href:"#example","aria-label":"example permalink",className:"header-anchor after"},i.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",i.createElement(t,{style:{backgroundColor:"var(--color-black-5)"}},i.createElement(l.L,{linkboxAriaLabel:"Linkbox: Helsinki Design System",linkAriaLabel:"HDS",href:"https://hds.hel.fi",border:!0},i.createElement("div",{style:{height:"106px"}}))),"\n",i.createElement(n.h3,{id:"principles",style:{position:"relative"}},"Principles",i.createElement(n.a,{href:"#principles","aria-label":"principles permalink",className:"header-anchor after"},i.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",i.createElement(n.ul,null,"\n",i.createElement(n.li,null,i.createElement(n.strong,null,"Linkbox must always be interactable in its entirety.")," This means that Linkboxes must not include multiple interactable elements (e.g. buttons or multiple links). The Linkbox element only gets focused once."),"\n",i.createElement(n.li,null,"To emphasize its interactability, the Linkbox includes a mandatory icon. Depending on the link type the icon is either an arrow or an external link icon. Do not remove or modify these icons.","\n",i.createElement(n.ul,null,"\n",i.createElement(n.li,null,"To read more about HDS recommendations about links, see ",i.createElement(o,{href:"/components/link"},"HDS Link documentation"),"."),"\n"),"\n"),"\n",i.createElement(n.li,null,i.createElement(n.strong,null,"Linkboxes work very well for listing heterogenous content")," such as news items, blog posts, or upcoming events."),"\n",i.createElement(n.li,null,i.createElement(n.strong,null,"Use Linkboxes sparingly.")," While they can drastically improve service's understandability and readability, overusing them may result in confusing and complex user interfaces."),"\n"),"\n",i.createElement(n.h4,{id:"should-i-use-a-linkbox-or-a-card",style:{position:"relative"}},"Should I use a Linkbox or a Card?",i.createElement(n.a,{href:"#should-i-use-a-linkbox-or-a-card","aria-label":"should i use a linkbox or a card permalink",className:"header-anchor after"},i.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",i.createElement(n.ul,null,"\n",i.createElement(n.li,null,i.createElement(n.strong,null,"Use the Linkbox component when"),"\n",i.createElement(n.ul,null,"\n",i.createElement(n.li,null,"the whole element needs to be interactable"),"\n",i.createElement(n.li,null,"the element does not include multiple interactable elements"),"\n"),"\n"),"\n",i.createElement(n.li,null,i.createElement(n.strong,null,"Use the ",i.createElement(o,{href:"/components/card"},"Card component")," when"),"\n",i.createElement(n.ul,null,"\n",i.createElement(n.li,null,"the whole Card does not need to be interactable"),"\n",i.createElement(n.li,null,"the Card contains multiple interactable elements (e.g. buttons or links)"),"\n"),"\n"),"\n"),"\n",i.createElement(n.h3,{id:"variations",style:{position:"relative"}},"Variations",i.createElement(n.a,{href:"#variations","aria-label":"variations permalink",className:"header-anchor after"},i.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",i.createElement(n.h4,{id:"empty",style:{position:"relative"}},"Empty",i.createElement(n.a,{href:"#empty","aria-label":"empty permalink",className:"header-anchor after"},i.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",i.createElement(n.p,null,"The default empty Linkbox variant can be used to build Linkboxes with custom content."),"\n",i.createElement(t,{style:{backgroundColor:"var(--color-black-5)"}},i.createElement("div",{style:{maxWidth:"320px"}},i.createElement(l.L,{linkboxAriaLabel:"Linkbox: Helsinki Design System",linkAriaLabel:"HDS",href:"https://hds.hel.fi"},i.createElement("div",{style:{height:"106px"}}))),i.createElement("div",{style:{maxWidth:"320px",marginTop:"var(--spacing-s)"}},i.createElement(l.L,{linkboxAriaLabel:"Linkbox: Helsinki Design System",linkAriaLabel:"HDS",href:"https://hds.hel.fi",border:!0},i.createElement("div",{style:{height:"106px"}}))),i.createElement("div",{style:{maxWidth:"320px",marginTop:"var(--spacing-s)"}},i.createElement(l.L,{linkboxAriaLabel:"Linkbox: Helsinki Design System",linkAriaLabel:"HDS",href:"https://hds.hel.fi",noBackground:!0},i.createElement("div",{style:{height:"106px"}})))),"\n",i.createElement(n.h4,{id:"with-heading-and-body-text",style:{position:"relative"}},"With heading and body text",i.createElement(n.a,{href:"#with-heading-and-body-text","aria-label":"with heading and body text permalink",className:"header-anchor after"},i.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",i.createElement(n.p,null,"Additionally, HDS offers styling for basic heading and body text inside the Linkbox component. These can be used instead of custom elements."),"\n",i.createElement(t,{style:{backgroundColor:"var(--color-black-5)"}},i.createElement("div",{style:{maxWidth:"320px"}},i.createElement(l.L,{linkboxAriaLabel:"Linkbox: Helsinki Design System",linkAriaLabel:"HDS",href:"https://hds.hel.fi",heading:"Linkbox title",text:"Linkbox text"})),i.createElement("div",{style:{maxWidth:"320px",marginTop:"var(--spacing-s)"}},i.createElement(l.L,{linkboxAriaLabel:"Linkbox: Helsinki Design System",linkAriaLabel:"HDS",href:"https://hds.hel.fi",heading:"Linkbox title",text:"Linkbox text",border:!0})),i.createElement("div",{style:{maxWidth:"320px",marginTop:"var(--spacing-s)"}},i.createElement(l.L,{linkboxAriaLabel:"Linkbox: Helsinki Design System",linkAriaLabel:"HDS",href:"https://hds.hel.fi",heading:"Linkbox title",text:"Linkbox text",noBackground:!0}))),"\n",i.createElement(n.h4,{id:"internal-and-external-linkboxes",style:{position:"relative"}},"Internal and external Linkboxes",i.createElement(n.a,{href:"#internal-and-external-linkboxes","aria-label":"internal and external linkboxes permalink",className:"header-anchor after"},i.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",i.createElement(n.p,null,"Depending on the link type the icon is either an arrow or an external link icon. Use the property ",i.createElement(n.code,null,"external")," to alter the icon depending on the link type. You can also add ",i.createElement(n.code,null,"openInNewTab")," property to make the link open in a new browser tab."),"\n",i.createElement(t,{style:{backgroundColor:"var(--color-black-5)"}},i.createElement("div",{style:{maxWidth:"320px"}},i.createElement(l.L,{linkboxAriaLabel:"Linkbox: Helsinki Design System",linkAriaLabel:"HDS",href:"https://hds.hel.fi",heading:"Internal link",text:"This link points to a page belonging to the same website as the current page.",border:!0})),i.createElement("div",{style:{maxWidth:"320px",marginTop:"var(--spacing-s)"}},i.createElement(l.L,{linkboxAriaLabel:"Linkbox: Helsinki Design System",linkAriaLabel:"HDS",href:"https://hds.hel.fi",heading:"External link",text:"This link points to another page.",openInExternalDomainAriaLabel:"Opens a different website.",external:!0,border:!0})),i.createElement("div",{style:{maxWidth:"320px",marginTop:"var(--spacing-s)"}},i.createElement(l.L,{linkboxAriaLabel:"Linkbox: Helsinki Design System",linkAriaLabel:"HDS",href:"https://hds.hel.fi",heading:"External link",openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab.",text:"This link points to another page and opens in a new tab.",openInExternalDomainAriaLabel:"Opens a different website.",external:!0,border:!0}))),"\n",i.createElement(n.h4,{id:"with-image",style:{position:"relative"}},"With image",i.createElement(n.a,{href:"#with-image","aria-label":"with image permalink",className:"header-anchor after"},i.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",i.createElement(n.p,null,"HDS offers styling for a Linkbox with an image as its content."),"\n",i.createElement(t,{style:{backgroundColor:"var(--color-black-5)"}},i.createElement("div",{style:{maxWidth:"384px"}},i.createElement(l.L,{linkboxAriaLabel:"Linkbox: Helsinki Design System",linkAriaLabel:"HDS",href:"https://hds.hel.fi",heading:"Linkbox title",text:"Linkbox text",imgProps:{src:(0,r.withPrefix)("/images/foundation/visual-assets/placeholders/image-m@3x.png"),width:384,height:245}}))),"\n",i.createElement(n.h4,{id:"linkbox-size-variants",style:{position:"relative"}},"Linkbox size variants",i.createElement(n.a,{href:"#linkbox-size-variants","aria-label":"linkbox size variants permalink",className:"header-anchor after"},i.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",i.createElement(n.p,null,"HDS Linkbox includes three (3) size variants; small, default, and large.\nYou can use different sizes depending on the screen size or use case.\nSize variants differ in (default) heading size and inner spacing. Use the size property to alter the size."),"\n",i.createElement(t,{style:{backgroundColor:"var(--color-black-5)"}},i.createElement("div",{style:{maxWidth:"284px"}},i.createElement(l.L,{linkboxAriaLabel:"Linkbox: Helsinki Design System",linkAriaLabel:"HDS",href:"https://hds.hel.fi",heading:"Linkbox title",text:"Linkbox text",size:"small",imgProps:{src:(0,r.withPrefix)("/images/foundation/visual-assets/placeholders/image-m@3x.png"),width:284,height:181}})),i.createElement("div",{style:{maxWidth:"384px",marginTop:"var(--spacing-s)"}},i.createElement(l.L,{linkboxAriaLabel:"Linkbox: Helsinki Design System",linkAriaLabel:"HDS",href:"https://hds.hel.fi",heading:"Linkbox title",text:"Linkbox text",size:"medium",imgProps:{src:(0,r.withPrefix)("/images/foundation/visual-assets/placeholders/image-m@3x.png"),width:384,height:245}})),i.createElement("div",{style:{maxWidth:"567px",marginTop:"var(--spacing-s)"}},i.createElement(l.L,{linkboxAriaLabel:"Linkbox: Helsinki Design System",linkAriaLabel:"HDS",href:"https://hds.hel.fi",heading:"Linkbox title",text:"Linkbox text",size:"large",imgProps:{src:(0,r.withPrefix)("/images/foundation/visual-assets/placeholders/image-m@3x.png"),width:567,height:363}}))))}function d(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}n.default=function(e){return void 0===e&&(e={}),i.createElement(s,e,i.createElement(c,e))}},88144:function(e,n,t){t.r(n);var a=t(11151),i=t(67294),l=t(83428),r=t(57674),o=t(89482),s=(t(18607),t(26127));function c(e){const n=Object.assign({h1:"h1",a:"a",span:"span"},(0,a.ah)(),e.components);return s.Z||d("PageTabs",!1),s.Z.Tab||d("PageTabs.Tab",!0),s.Z.TabList||d("PageTabs.TabList",!0),s.Z.TabPanel||d("PageTabs.TabPanel",!0),i.createElement(i.Fragment,null,i.createElement(n.h1,{id:"linkbox",style:{position:"relative"}},"Linkbox",i.createElement(n.a,{href:"#linkbox","aria-label":"linkbox permalink",className:"header-anchor after"},i.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",i.createElement("div",{class:"status-label-description"},i.createElement(l.S,{type:"alert"},"Beta"),i.createElement(l.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),i.createElement(r.Z)),"\n",i.createElement(o.Z,null,"Linkboxes are used to combine multiple elements into a single interactable element. While they are visually similar to HDS Cards, Linkboxes are always a single clickable link and they cannot contain other interactable elements."),"\n",i.createElement(s.Z,{pageContext:e.pageContext},i.createElement(s.Z.TabList,null,i.createElement(s.Z.Tab,{href:"/"},"Usage"),i.createElement(s.Z.Tab,{href:"/code"},"Code"),i.createElement(s.Z.Tab,{href:"/accessibility"},"Accessibility")),i.createElement(s.Z.TabPanel,null,e.children)))}function d(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}n.default=function(e){void 0===e&&(e={});const{wrapper:n}=Object.assign({},(0,a.ah)(),e.components);return n?i.createElement(n,e,i.createElement(c,e)):c(e)}},89482:function(e,n,t){var a=t(67294);n.Z=e=>{let{color:n="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:i={},children:l}=e;return a.createElement("p",{style:{fontSize:t,color:n,maxWidth:600,...i}},l)}},26127:function(e,n,t){var a=t(67294),i=t(14160),l=t(94671);const r="PageTabList",o="PageTabPanel",s="PageTab",c=e=>{var n;let{pageContext:t,children:c}=e;const d=t.frontmatter.slug,h=Array.isArray(c)?c:[c],m=h.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===r)),b=h.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===o)),p=null===(n=m.props)||void 0===n?void 0:n.children.filter((e=>e.type.componentName===s)),u=p.findIndex((e=>d.endsWith(e.props.href))),g=-1===u?0:u,x=0===g?d:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(d);return a.createElement(l.a,{initiallyActiveTab:g},a.createElement(l.a.TabList,{className:"page-tabs-list"},p.map((e=>a.createElement(l.a.Tab,{key:e.props.href,onClick:()=>(0,i.navigate)(""+("/"===e.props.href?x:x+e.props.href))},e.props.children)))),p.map(((e,n)=>a.createElement(l.a.TabPanel,{key:e.props.href},g===n?b.props.children:a.createElement("div",null)))))},d=e=>{let{children:n}=e;return a.createElement(l.a.TabList,null,n)};d.componentName=r;const h=e=>{let{href:n,slug:t,children:i}=e;return a.createElement(l.a.Tab,null,i)};h.componentName=s;const m=e=>{let{children:n}=e;return a.createElement(l.a.TabPanel,null,n)};m.componentName=o,c.TabList=d,c.Tab=h,c.TabPanel=m,n.Z=c},57674:function(e,n,t){var a=t(67294),i=t(45422);n.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return a.createElement(i.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},a.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((n=>a.createElement("li",{key:n},a.createElement("span",{className:"status-name"},n),a.createElement("span",null,e[n]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-linkbox-tabs-mdx-05d110462d65a9cb1b85.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-linkbox-tabs-mdx-05d110462d65a9cb1b85.js
new file mode 100644
index 00000000000..ae70a22c8d2
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-linkbox-tabs-mdx-05d110462d65a9cb1b85.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[3676],{83428:function(e,a,t){t.d(a,{S:function(){return o}});var l=t(80136),s=t(67294),n=t(7444),r=t(34300),c={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const i=e=>{let{icon:a}=e;return s.createElement("span",{className:c.statusLabelIcon,"aria-hidden":"true"},a)},o=e=>{var{children:a,className:t,dataTestId:n,type:o="neutral",iconLeft:b}=e,u=(0,l._)(e,["children","className","dataTestId","type","iconLeft"]);return s.createElement("span",Object.assign({className:(0,r.c)(c.statusLabel,c[o],b&&c.statusLabelWithIcon,t),"data-testid":n},u),b&&s.createElement(i,{icon:b}),a)}},88144:function(e,a,t){t.r(a);var l=t(11151),s=t(67294),n=t(83428),r=t(57674),c=t(89482),i=(t(18607),t(26127));function o(e){const a=Object.assign({h1:"h1",a:"a",span:"span"},(0,l.ah)(),e.components);return i.Z||b("PageTabs",!1),i.Z.Tab||b("PageTabs.Tab",!0),i.Z.TabList||b("PageTabs.TabList",!0),i.Z.TabPanel||b("PageTabs.TabPanel",!0),s.createElement(s.Fragment,null,s.createElement(a.h1,{id:"linkbox",style:{position:"relative"}},"Linkbox",s.createElement(a.a,{href:"#linkbox","aria-label":"linkbox permalink",className:"header-anchor after"},s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement("div",{class:"status-label-description"},s.createElement(n.S,{type:"alert"},"Beta"),s.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),s.createElement(r.Z)),"\n",s.createElement(c.Z,null,"Linkboxes are used to combine multiple elements into a single interactable element. While they are visually similar to HDS Cards, Linkboxes are always a single clickable link and they cannot contain other interactable elements."),"\n",s.createElement(i.Z,{pageContext:e.pageContext},s.createElement(i.Z.TabList,null,s.createElement(i.Z.Tab,{href:"/"},"Usage"),s.createElement(i.Z.Tab,{href:"/code"},"Code"),s.createElement(i.Z.Tab,{href:"/accessibility"},"Accessibility")),s.createElement(i.Z.TabPanel,null,e.children)))}function b(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,l.ah)(),e.components);return a?s.createElement(a,e,s.createElement(o,e)):o(e)}},89482:function(e,a,t){var l=t(67294);a.Z=e=>{let{color:a="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:s={},children:n}=e;return l.createElement("p",{style:{fontSize:t,color:a,maxWidth:600,...s}},n)}},26127:function(e,a,t){var l=t(67294),s=t(14160),n=t(94671);const r="PageTabList",c="PageTabPanel",i="PageTab",o=e=>{var a;let{pageContext:t,children:o}=e;const b=t.frontmatter.slug,u=Array.isArray(o)?o:[o],d=u.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===r)),m=u.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===c)),h=null===(a=d.props)||void 0===a?void 0:a.children.filter((e=>e.type.componentName===i)),p=h.findIndex((e=>b.endsWith(e.props.href))),_=-1===p?0:p,g=0===_?b:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(b);return l.createElement(n.a,{initiallyActiveTab:_},l.createElement(n.a.TabList,{className:"page-tabs-list"},h.map((e=>l.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,s.navigate)(""+("/"===e.props.href?g:g+e.props.href))},e.props.children)))),h.map(((e,a)=>l.createElement(n.a.TabPanel,{key:e.props.href},_===a?m.props.children:l.createElement("div",null)))))},b=e=>{let{children:a}=e;return l.createElement(n.a.TabList,null,a)};b.componentName=r;const u=e=>{let{href:a,slug:t,children:s}=e;return l.createElement(n.a.Tab,null,s)};u.componentName=i;const d=e=>{let{children:a}=e;return l.createElement(n.a.TabPanel,null,a)};d.componentName=c,o.TabList=b,o.Tab=u,o.TabPanel=d,a.Z=o},57674:function(e,a,t){var l=t(67294),s=t(45422);a.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return l.createElement(s.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},l.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((a=>l.createElement("li",{key:a},l.createElement("span",{className:"status-name"},a),l.createElement("span",null,e[a]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-loading-spinner-accessibility-mdx-babe224836b244e251f1.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-loading-spinner-accessibility-mdx-babe224836b244e251f1.js
new file mode 100644
index 00000000000..5123f064fa9
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-loading-spinner-accessibility-mdx-babe224836b244e251f1.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[328,3776],{83428:function(e,t,a){a.d(t,{S:function(){return c}});var n=a(80136),s=a(67294),l=a(7444),r=a(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,l.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:t}=e;return s.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:l,type:c="neutral",iconLeft:u}=e,d=(0,n._)(e,["children","className","dataTestId","type","iconLeft"]);return s.createElement("span",Object.assign({className:(0,r.c)(i.statusLabel,i[c],u&&i.statusLabelWithIcon,a),"data-testid":l},d),u&&s.createElement(o,{icon:u}),t)}},68820:function(e,t,a){a.r(t);var n=a(11151),s=a(67294),l=a(80699),r=a(24055),i=a(1076);const o=e=>{let{children:t,pageContext:a}=e;return s.createElement(r.default,{pageContext:a},t)};function c(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",strong:"strong",code:"code",em:"em"},(0,n.ah)(),e.components);return s.createElement(s.Fragment,null,s.createElement(t.h2,{id:"accessibility",style:{position:"relative"}},"Accessibility",s.createElement(t.a,{href:"#accessibility","aria-label":"accessibility permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.h3,{id:"pay-attention-to",style:{position:"relative"}},"Pay attention to",s.createElement(t.a,{href:"#pay-attention-to","aria-label":"pay attention to permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.ul,null,"\n",s.createElement(t.li,null,"The colour contrast between the loading spinner and its background must comply with ",s.createElement(l.Z,{href:"https://www.w3.org/TR/WCAG21/#contrast-minimum"},"AA Level contrast ratios"),". You can find more information about accessible colour combinations in ",s.createElement(i.Z,{href:"/foundation/design-tokens/colour"},"Colour design token documentation"),"."),"\n",s.createElement(t.li,null,"Multiple simultaneous loading spinners can be very confusing for assistive technologies. ",s.createElement(t.strong,null,"HDS Loading spinner React component is built in a way that only reads one alert for screen readers")," - even if there were multiple on the screen. If you are unable to use this feature or it fits your needs poorly (e.g. your project does not use JavaScript), please consider using only one spinner at a time and giving that one spinner the most accurate possible description."),"\n",s.createElement(t.li,null,"HDS Loading spinner must be given labels to describe the loading event. Use ",s.createElement(t.code,null,"loadingText")," prop for description for loading and ",s.createElement(t.code,null,"loadingFinishedText")," prop for description for loading finishing.","\n",s.createElement(t.ul,null,"\n",s.createElement(t.li,null,'Descriptions should not be too detailed. You should use generic descriptions such as "',s.createElement(t.em,null,"The page content is loading"),'" and "',s.createElement(t.em,null,"The page content loading was finished"),'".'),"\n",s.createElement(t.li,null,"If there are multiple spinners on the screen, they all must have identical descriptions. Remember that the description is read to screen readers only once."),"\n",s.createElement(t.li,null,"If the spinner also has a visual label, it can be hidden from assistive technologies to avoid description to be read twice."),"\n"),"\n"),"\n"))}t.default=function(e){return void 0===e&&(e={}),s.createElement(o,e,s.createElement(c,e))}},24055:function(e,t,a){a.r(t);var n=a(11151),s=a(67294),l=a(83428),r=a(57674),i=a(89482),o=(a(18607),a(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,n.ah)(),e.components);return o.Z||u("PageTabs",!1),o.Z.Tab||u("PageTabs.Tab",!0),o.Z.TabList||u("PageTabs.TabList",!0),o.Z.TabPanel||u("PageTabs.TabPanel",!0),s.createElement(s.Fragment,null,s.createElement(t.h1,{id:"loadingspinner",style:{position:"relative"}},"LoadingSpinner",s.createElement(t.a,{href:"#loadingspinner","aria-label":"loadingspinner permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement("div",{class:"status-label-description"},s.createElement(l.S,{type:"info"},"Stable"),s.createElement(l.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),s.createElement(r.Z)),"\n",s.createElement(i.Z,null,"Loading spinner is used for notifying users that their action is being processed or data retrieved from server."),"\n",s.createElement(o.Z,{pageContext:e.pageContext},s.createElement(o.Z.TabList,null,s.createElement(o.Z.Tab,{href:"/"},"Usage"),s.createElement(o.Z.Tab,{href:"/code"},"Code"),s.createElement(o.Z.Tab,{href:"/accessibility"},"Accessibility"),s.createElement(o.Z.Tab,{href:"/customisation"},"Customisation")),s.createElement(o.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,n.ah)(),e.components);return t?s.createElement(t,e,s.createElement(c,e)):c(e)}},89482:function(e,t,a){var n=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:s={},children:l}=e;return n.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...s}},l)}},26127:function(e,t,a){var n=a(67294),s=a(14160),l=a(94671);const r="PageTabList",i="PageTabPanel",o="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const u=a.frontmatter.slug,d=Array.isArray(c)?c:[c],m=d.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===r)),b=d.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===i)),h=null===(t=m.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===o)),p=h.findIndex((e=>u.endsWith(e.props.href))),g=-1===p?0:p,f=0===g?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return n.createElement(l.a,{initiallyActiveTab:g},n.createElement(l.a.TabList,{className:"page-tabs-list"},h.map((e=>n.createElement(l.a.Tab,{key:e.props.href,onClick:()=>(0,s.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),h.map(((e,t)=>n.createElement(l.a.TabPanel,{key:e.props.href},g===t?b.props.children:n.createElement("div",null)))))},u=e=>{let{children:t}=e;return n.createElement(l.a.TabList,null,t)};u.componentName=r;const d=e=>{let{href:t,slug:a,children:s}=e;return n.createElement(l.a.Tab,null,s)};d.componentName=o;const m=e=>{let{children:t}=e;return n.createElement(l.a.TabPanel,null,t)};m.componentName=i,c.TabList=u,c.Tab=d,c.TabPanel=m,t.Z=c},57674:function(e,t,a){var n=a(67294),s=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return n.createElement(s.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},n.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>n.createElement("li",{key:t},n.createElement("span",{className:"status-name"},t),n.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-loading-spinner-code-mdx-65191ad2cbd04d5e8349.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-loading-spinner-code-mdx-65191ad2cbd04d5e8349.js
new file mode 100644
index 00000000000..d3a3bb082fd
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-loading-spinner-code-mdx-65191ad2cbd04d5e8349.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[9711,3776],{83428:function(e,t,a){a.d(t,{S:function(){return o}});var n=a(80136),l=a(67294),s=a(7444),r=a(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,s.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const c=e=>{let{icon:t}=e;return l.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},t)},o=e=>{var{children:t,className:a,dataTestId:s,type:o="neutral",iconLeft:d}=e,u=(0,n._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(i.statusLabel,i[o],d&&i.statusLabelWithIcon,a),"data-testid":s},u),d&&l.createElement(c,{icon:d}),t)}},32031:function(e,t,a){a.r(t);var n=a(11151),l=a(67294),s=a(68201),r=a(24055);const i=e=>{let{children:t,pageContext:a}=e;return l.createElement(r.default,{pageContext:a},t)};function c(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",h4:"h4",pre:"pre",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",strong:"strong",p:"p"},(0,n.ah)(),e.components),{Playground:a,IconCheckCircleFill:r,Link:i,ExternalLink:c}=t;return c||o("ExternalLink",!0),r||o("IconCheckCircleFill",!0),i||o("Link",!0),a||o("Playground",!0),l.createElement(l.Fragment,null,l.createElement(t.h2,{id:"code",style:{position:"relative"}},"Code",l.createElement(t.a,{href:"#code","aria-label":"code permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h3,{id:"code-examples",style:{position:"relative"}},"Code examples",l.createElement(t.a,{href:"#code-examples","aria-label":"code examples permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h4,{id:"default",style:{position:"relative"}},"Default",l.createElement(t.a,{href:"#default","aria-label":"default permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a,{scope:{LoadingSpinner:s.L}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},"import { LoadingSpinner } from 'hds-react';\n\n() => (<>\n  <LoadingSpinner />\n  <br />\n  <LoadingSpinner small />\n</>)\n")),l.createElement(t.pre,null,l.createElement(t.code,{className:"language-html"},'<div>\n  <div class="hds-loading-spinner">\n    <div></div>\n    <div></div>\n    <div></div>\n  </div>\n\n  <div class="hds-loading-spinner hds-loading-spinner--small">\n    <div></div>\n    <div></div>\n    <div></div>\n  </div>\n</div>\n'))),"\n",l.createElement(t.h3,{id:"packages",style:{position:"relative"}},"Packages",l.createElement(t.a,{href:"#packages","aria-label":"packages permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.table,null,l.createElement(t.thead,null,l.createElement(t.tr,null,l.createElement(t.th,null,"Package"),l.createElement(t.th,null,"Included"),l.createElement(t.th,null,"Storybook link"),l.createElement(t.th,null,"Source link"))),l.createElement(t.tbody,null,l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.strong,null,"HDS React")),l.createElement(t.td,null,l.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},l.createElement(r)," Yes ")),l.createElement(t.td,null,l.createElement(i,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-loadingspinner--default"},"View in Storybook")),l.createElement(t.td,null,l.createElement(c,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/react/src/components/loadingSpinner"},"View source"))),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.strong,null,"HDS Core")),l.createElement(t.td,null,l.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},l.createElement(r)," Yes ")),l.createElement(t.td,null,l.createElement(i,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/core/?path=/story/components-loading-spinner--default"},"View in Storybook")),l.createElement(t.td,null,l.createElement(c,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/core/src/components/loading-spinner"},"View source"))))),"\n",l.createElement(t.h3,{id:"properties",style:{position:"relative"}},"Properties",l.createElement(t.a,{href:"#properties","aria-label":"properties permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"Note! You can find the full list of properties in the ",l.createElement(i,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-loadingspinner--default"},"React Storybook.")),"\n",l.createElement(t.table,null,l.createElement(t.thead,null,l.createElement(t.tr,null,l.createElement(t.th,null,"Property"),l.createElement(t.th,null,"Description"),l.createElement(t.th,null,"Values"),l.createElement(t.th,null,"Default value"))),l.createElement(t.tbody,null,l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"multicolor")),l.createElement(t.td,null,"If set to true, the multicolour variant is used."),l.createElement(t.td,null,l.createElement(t.code,null,"boolean")),l.createElement(t.td,null,"false")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"small")),l.createElement(t.td,null,"If set to true, the small variant is used."),l.createElement(t.td,null,l.createElement(t.code,null,"boolean")),l.createElement(t.td,null,"false")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"loadingText")),l.createElement(t.td,null,"Text to show for screen readers when spinner is visible."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,'"Page is loading"')),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"loadingFinishedText")),l.createElement(t.td,null,"Text to show for screen readers when spinner is removed."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,'"Page has finished loading"')))))}function o(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){return void 0===e&&(e={}),l.createElement(i,e,l.createElement(c,e))}},24055:function(e,t,a){a.r(t);var n=a(11151),l=a(67294),s=a(83428),r=a(57674),i=a(89482),c=(a(18607),a(26127));function o(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,n.ah)(),e.components);return c.Z||d("PageTabs",!1),c.Z.Tab||d("PageTabs.Tab",!0),c.Z.TabList||d("PageTabs.TabList",!0),c.Z.TabPanel||d("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"loadingspinner",style:{position:"relative"}},"LoadingSpinner",l.createElement(t.a,{href:"#loadingspinner","aria-label":"loadingspinner permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(s.S,{type:"info"},"Stable"),l.createElement(s.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(i.Z,null,"Loading spinner is used for notifying users that their action is being processed or data retrieved from server."),"\n",l.createElement(c.Z,{pageContext:e.pageContext},l.createElement(c.Z.TabList,null,l.createElement(c.Z.Tab,{href:"/"},"Usage"),l.createElement(c.Z.Tab,{href:"/code"},"Code"),l.createElement(c.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(c.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(c.Z.TabPanel,null,e.children)))}function d(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,n.ah)(),e.components);return t?l.createElement(t,e,l.createElement(o,e)):o(e)}},89482:function(e,t,a){var n=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:l={},children:s}=e;return n.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...l}},s)}},26127:function(e,t,a){var n=a(67294),l=a(14160),s=a(94671);const r="PageTabList",i="PageTabPanel",c="PageTab",o=e=>{var t;let{pageContext:a,children:o}=e;const d=a.frontmatter.slug,u=Array.isArray(o)?o:[o],m=u.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===r)),h=u.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===i)),p=null===(t=m.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===c)),b=p.findIndex((e=>d.endsWith(e.props.href))),E=-1===b?0:b,g=0===E?d:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(d);return n.createElement(s.a,{initiallyActiveTab:E},n.createElement(s.a.TabList,{className:"page-tabs-list"},p.map((e=>n.createElement(s.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?g:g+e.props.href))},e.props.children)))),p.map(((e,t)=>n.createElement(s.a.TabPanel,{key:e.props.href},E===t?h.props.children:n.createElement("div",null)))))},d=e=>{let{children:t}=e;return n.createElement(s.a.TabList,null,t)};d.componentName=r;const u=e=>{let{href:t,slug:a,children:l}=e;return n.createElement(s.a.Tab,null,l)};u.componentName=c;const m=e=>{let{children:t}=e;return n.createElement(s.a.TabPanel,null,t)};m.componentName=i,o.TabList=d,o.Tab=u,o.TabPanel=m,t.Z=o},57674:function(e,t,a){var n=a(67294),l=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return n.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},n.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>n.createElement("li",{key:t},n.createElement("span",{className:"status-name"},t),n.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-loading-spinner-customisation-mdx-f30f95a548442fb1b82e.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-loading-spinner-customisation-mdx-f30f95a548442fb1b82e.js
new file mode 100644
index 00000000000..239e966526f
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-loading-spinner-customisation-mdx-f30f95a548442fb1b82e.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[6145,3776],{83428:function(e,t,a){a.d(t,{S:function(){return c}});var n=a(80136),l=a(67294),s=a(7444),r=a(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,s.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const i=e=>{let{icon:t}=e;return l.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:s,type:c="neutral",iconLeft:d}=e,u=(0,n._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(o.statusLabel,o[c],d&&o.statusLabelWithIcon,a),"data-testid":s},u),d&&l.createElement(i,{icon:d}),t)}},67041:function(e,t,a){a.r(t);var n=a(11151),l=a(67294),s=a(68201),r=a(24055);const o=e=>{let{children:t,pageContext:a}=e;return l.createElement(r.default,{pageContext:a},t)};function i(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",p:"p",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",pre:"pre"},(0,n.ah)(),e.components),{Playground:a}=t;return a||function(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Playground",!0),l.createElement(l.Fragment,null,l.createElement(t.h2,{id:"customisation",style:{position:"relative"}},"Customisation",l.createElement(t.a,{href:"#customisation","aria-label":"customisation permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h3,{id:"customisation-properties",style:{position:"relative"}},"Customisation properties",l.createElement(t.a,{href:"#customisation-properties","aria-label":"customisation properties permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"In Core version, you can either use the ",l.createElement(t.code,null,"style")," or ",l.createElement(t.code,null,"class")," attributes in the HTML to customise the component."),"\n",l.createElement(t.p,null,"In React version, you can use the ",l.createElement(t.code,null,"theme")," property to customise the component."),"\n",l.createElement(t.p,null,"See all available theme variables in the table below."),"\n",l.createElement(t.table,null,l.createElement(t.thead,null,l.createElement(t.tr,null,l.createElement(t.th,null,"Theme variable"),l.createElement(t.th,null,"Description"))),l.createElement(t.tbody,null,l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"--spinner-color")),l.createElement(t.td,null,"Spinner colour")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"--spinner-color-stage1")),l.createElement(t.td,null,"The first spinner colour (when the ",l.createElement(t.code,null,"multicolor")," is set to true)")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"--spinner-color-stage2")),l.createElement(t.td,null,"The second spinner colour (when the ",l.createElement(t.code,null,"multicolor")," is set to true)")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"--spinner-color-stage3")),l.createElement(t.td,null,"The third spinner colour (when the ",l.createElement(t.code,null,"multicolor")," is set to true)")))),"\n",l.createElement(t.h3,{id:"customisation-example",style:{position:"relative"}},"Customisation example",l.createElement(t.a,{href:"#customisation-example","aria-label":"customisation example permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a,{scope:{LoadingSpinner:s.L}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},"import { LoadingSpinner } from 'hds-react';\n\n() => (\n<>\n<LoadingSpinner\n  theme={{\n    '--spinner-color': 'var(--color-tram)',\n  }}\n/>\n<br />\n<LoadingSpinner\n  multicolor\n  theme={{\n    '--spinner-color-stage1': 'var(--color-coat-of-arms)',\n    '--spinner-color-stage2': 'var(--color-tram)',\n    '--spinner-color-stage3': 'var(--color-metro)'\n  }}\n/>\n</>)\n")),l.createElement(t.pre,null,l.createElement(t.code,{className:"language-html"},'<div>\n  <div\n    class="hds-loading-spinner"\n    style="--spinner-color: var(--color-tram);"\n  >\n    <div></div>\n    <div></div>\n    <div></div>\n  </div>\n  <br />\n  <div\n    class="hds-loading-spinner hds-loading-spinner--multicolor"\n    style="--spinner-color-stage1: var(--color-coat-of-arms); --spinner-color-stage2: var(--color-tram);\n    --spinner-color-stage3: var(--color-metro);"\n  >\n    <div></div>\n    <div></div>\n    <div></div>\n  </div>\n</div>\n'))))}t.default=function(e){return void 0===e&&(e={}),l.createElement(o,e,l.createElement(i,e))}},24055:function(e,t,a){a.r(t);var n=a(11151),l=a(67294),s=a(83428),r=a(57674),o=a(89482),i=(a(18607),a(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,n.ah)(),e.components);return i.Z||d("PageTabs",!1),i.Z.Tab||d("PageTabs.Tab",!0),i.Z.TabList||d("PageTabs.TabList",!0),i.Z.TabPanel||d("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"loadingspinner",style:{position:"relative"}},"LoadingSpinner",l.createElement(t.a,{href:"#loadingspinner","aria-label":"loadingspinner permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(s.S,{type:"info"},"Stable"),l.createElement(s.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(o.Z,null,"Loading spinner is used for notifying users that their action is being processed or data retrieved from server."),"\n",l.createElement(i.Z,{pageContext:e.pageContext},l.createElement(i.Z.TabList,null,l.createElement(i.Z.Tab,{href:"/"},"Usage"),l.createElement(i.Z.Tab,{href:"/code"},"Code"),l.createElement(i.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(i.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(i.Z.TabPanel,null,e.children)))}function d(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,n.ah)(),e.components);return t?l.createElement(t,e,l.createElement(c,e)):c(e)}},89482:function(e,t,a){var n=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:l={},children:s}=e;return n.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...l}},s)}},26127:function(e,t,a){var n=a(67294),l=a(14160),s=a(94671);const r="PageTabList",o="PageTabPanel",i="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const d=a.frontmatter.slug,u=Array.isArray(c)?c:[c],m=u.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===r)),h=u.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===o)),p=null===(t=m.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===i)),b=p.findIndex((e=>d.endsWith(e.props.href))),g=-1===b?0:b,E=0===g?d:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(d);return n.createElement(s.a,{initiallyActiveTab:g},n.createElement(s.a.TabList,{className:"page-tabs-list"},p.map((e=>n.createElement(s.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?E:E+e.props.href))},e.props.children)))),p.map(((e,t)=>n.createElement(s.a.TabPanel,{key:e.props.href},g===t?h.props.children:n.createElement("div",null)))))},d=e=>{let{children:t}=e;return n.createElement(s.a.TabList,null,t)};d.componentName=r;const u=e=>{let{href:t,slug:a,children:l}=e;return n.createElement(s.a.Tab,null,l)};u.componentName=i;const m=e=>{let{children:t}=e;return n.createElement(s.a.TabPanel,null,t)};m.componentName=o,c.TabList=d,c.Tab=u,c.TabPanel=m,t.Z=c},57674:function(e,t,a){var n=a(67294),l=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return n.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},n.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>n.createElement("li",{key:t},n.createElement("span",{className:"status-name"},t),n.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-loading-spinner-index-mdx-18636b85d38f0830659e.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-loading-spinner-index-mdx-18636b85d38f0830659e.js
new file mode 100644
index 00000000000..91e1de755df
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-loading-spinner-index-mdx-18636b85d38f0830659e.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[6260,3776],{83428:function(e,a,t){t.d(a,{S:function(){return c}});var n=t(80136),l=t(67294),s=t(7444),r=t(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,s.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:a}=e;return l.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},a)},c=e=>{var{children:a,className:t,dataTestId:s,type:c="neutral",iconLeft:d}=e,u=(0,n._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(i.statusLabel,i[c],d&&i.statusLabelWithIcon,t),"data-testid":s},u),d&&l.createElement(o,{icon:d}),a)}},31947:function(e,a,t){t.r(a);var n=t(11151),l=t(67294),s=t(68201),r=t(24055);const i=e=>{let{children:a,pageContext:t}=e;return l.createElement(r.default,{pageContext:t},a)};function o(e){const a=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",p:"p",ul:"ul",li:"li",strong:"strong",h4:"h4",code:"code"},(0,n.ah)(),e.components),{PlaygroundPreview:t}=a;return t||function(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("PlaygroundPreview",!0),l.createElement(l.Fragment,null,l.createElement(a.h2,{id:"usage",style:{position:"relative"}},"Usage",l.createElement(a.a,{href:"#usage","aria-label":"usage permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.h3,{id:"example",style:{position:"relative"}},"Example",l.createElement(a.a,{href:"#example","aria-label":"example permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t,null,l.createElement(s.L)),"\n",l.createElement(a.p,null,"The loading spinner do not provide details about nature of the processing but it reassures the user that their action is being processed."),"\n",l.createElement(a.h3,{id:"principles",style:{position:"relative"}},"Principles",l.createElement(a.a,{href:"#principles","aria-label":"principles permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.ul,null,"\n",l.createElement(a.li,null,l.createElement(a.strong,null,"Use the loading spinner only if the wait time is anticipated to be longer than three seconds.")," A spinner that only quickly flashes in view can confuse the user."),"\n",l.createElement(a.li,null,"Display the loading spinner in the same area and contextual level where the processing is taking place. For example, if only the loader indicates that data is being retrieved for a specific content area, display the spinner in that same area."),"\n",l.createElement(a.li,null,"If possible, provide a descriptive visual label for the action being processed with the loading spinner."),"\n"),"\n",l.createElement(a.h3,{id:"variations",style:{position:"relative"}},"Variations",l.createElement(a.a,{href:"#variations","aria-label":"variations permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.h4,{id:"default",style:{position:"relative"}},"Default",l.createElement(a.a,{href:"#default","aria-label":"default permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.p,null,"The loading spinner comes in two sizes:"),"\n",l.createElement(a.ul,null,"\n",l.createElement(a.li,null,"Medium (64px) is used for larger content areas and for full-screen loading"),"\n",l.createElement(a.li,null,"Small (24px) can be used for indicating more local changes in content."),"\n"),"\n",l.createElement(t,null,l.createElement(s.L),l.createElement("br"),l.createElement(s.L,{small:!0})),"\n",l.createElement(a.h4,{id:"customized-loading-spinner",style:{position:"relative"}},"Customized loading spinner",l.createElement(a.a,{href:"#customized-loading-spinner","aria-label":"customized loading spinner permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.p,null,"The colour of the spinner can be customised to fit the colour theme of the service. HDS Loading spinner even supports shifting between multiple colours. Colour shifting should be used sparingly and only if the theme of the service calls for it."),"\n",l.createElement(a.p,null,"Note! When using multicolour loading spinners, at least half of the colours must have sufficient contrast ",l.createElement(a.code,null,"3:1")," against the spinner background."),"\n",l.createElement(t,null,l.createElement(s.L,{theme:{"--spinner-color":"var(--color-tram)"}}),l.createElement("br"),l.createElement(s.L,{multicolor:!0,theme:{"--spinner-color-stage1":"var(--color-coat-of-arms)","--spinner-color-stage2":"var(--color-tram)","--spinner-color-stage3":"var(--color-metro)"}})))}a.default=function(e){return void 0===e&&(e={}),l.createElement(i,e,l.createElement(o,e))}},24055:function(e,a,t){t.r(a);var n=t(11151),l=t(67294),s=t(83428),r=t(57674),i=t(89482),o=(t(18607),t(26127));function c(e){const a=Object.assign({h1:"h1",a:"a",span:"span"},(0,n.ah)(),e.components);return o.Z||d("PageTabs",!1),o.Z.Tab||d("PageTabs.Tab",!0),o.Z.TabList||d("PageTabs.TabList",!0),o.Z.TabPanel||d("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(a.h1,{id:"loadingspinner",style:{position:"relative"}},"LoadingSpinner",l.createElement(a.a,{href:"#loadingspinner","aria-label":"loadingspinner permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(s.S,{type:"info"},"Stable"),l.createElement(s.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(i.Z,null,"Loading spinner is used for notifying users that their action is being processed or data retrieved from server."),"\n",l.createElement(o.Z,{pageContext:e.pageContext},l.createElement(o.Z.TabList,null,l.createElement(o.Z.Tab,{href:"/"},"Usage"),l.createElement(o.Z.Tab,{href:"/code"},"Code"),l.createElement(o.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(o.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(o.Z.TabPanel,null,e.children)))}function d(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,n.ah)(),e.components);return a?l.createElement(a,e,l.createElement(c,e)):c(e)}},89482:function(e,a,t){var n=t(67294);a.Z=e=>{let{color:a="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:l={},children:s}=e;return n.createElement("p",{style:{fontSize:t,color:a,maxWidth:600,...l}},s)}},26127:function(e,a,t){var n=t(67294),l=t(14160),s=t(94671);const r="PageTabList",i="PageTabPanel",o="PageTab",c=e=>{var a;let{pageContext:t,children:c}=e;const d=t.frontmatter.slug,u=Array.isArray(c)?c:[c],h=u.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===r)),m=u.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===i)),p=null===(a=h.props)||void 0===a?void 0:a.children.filter((e=>e.type.componentName===o)),b=p.findIndex((e=>d.endsWith(e.props.href))),g=-1===b?0:b,f=0===g?d:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(d);return n.createElement(s.a,{initiallyActiveTab:g},n.createElement(s.a.TabList,{className:"page-tabs-list"},p.map((e=>n.createElement(s.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),p.map(((e,a)=>n.createElement(s.a.TabPanel,{key:e.props.href},g===a?m.props.children:n.createElement("div",null)))))},d=e=>{let{children:a}=e;return n.createElement(s.a.TabList,null,a)};d.componentName=r;const u=e=>{let{href:a,slug:t,children:l}=e;return n.createElement(s.a.Tab,null,l)};u.componentName=o;const h=e=>{let{children:a}=e;return n.createElement(s.a.TabPanel,null,a)};h.componentName=i,c.TabList=d,c.Tab=u,c.TabPanel=h,a.Z=c},57674:function(e,a,t){var n=t(67294),l=t(45422);a.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return n.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},n.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((a=>n.createElement("li",{key:a},n.createElement("span",{className:"status-name"},a),n.createElement("span",null,e[a]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-loading-spinner-tabs-mdx-c3d588c37579fbd35dfd.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-loading-spinner-tabs-mdx-c3d588c37579fbd35dfd.js
new file mode 100644
index 00000000000..ede6e8a66b0
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-loading-spinner-tabs-mdx-c3d588c37579fbd35dfd.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[3776],{83428:function(e,a,t){t.d(a,{S:function(){return c}});var s=t(80136),l=t(67294),n=t(7444),r=t(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:a}=e;return l.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},a)},c=e=>{var{children:a,className:t,dataTestId:n,type:c="neutral",iconLeft:u}=e,b=(0,s._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(i.statusLabel,i[c],u&&i.statusLabelWithIcon,t),"data-testid":n},b),u&&l.createElement(o,{icon:u}),a)}},24055:function(e,a,t){t.r(a);var s=t(11151),l=t(67294),n=t(83428),r=t(57674),i=t(89482),o=(t(18607),t(26127));function c(e){const a=Object.assign({h1:"h1",a:"a",span:"span"},(0,s.ah)(),e.components);return o.Z||u("PageTabs",!1),o.Z.Tab||u("PageTabs.Tab",!0),o.Z.TabList||u("PageTabs.TabList",!0),o.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(a.h1,{id:"loadingspinner",style:{position:"relative"}},"LoadingSpinner",l.createElement(a.a,{href:"#loadingspinner","aria-label":"loadingspinner permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(n.S,{type:"info"},"Stable"),l.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(i.Z,null,"Loading spinner is used for notifying users that their action is being processed or data retrieved from server."),"\n",l.createElement(o.Z,{pageContext:e.pageContext},l.createElement(o.Z.TabList,null,l.createElement(o.Z.Tab,{href:"/"},"Usage"),l.createElement(o.Z.Tab,{href:"/code"},"Code"),l.createElement(o.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(o.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(o.Z.TabPanel,null,e.children)))}function u(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,s.ah)(),e.components);return a?l.createElement(a,e,l.createElement(c,e)):c(e)}},89482:function(e,a,t){var s=t(67294);a.Z=e=>{let{color:a="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:l={},children:n}=e;return s.createElement("p",{style:{fontSize:t,color:a,maxWidth:600,...l}},n)}},26127:function(e,a,t){var s=t(67294),l=t(14160),n=t(94671);const r="PageTabList",i="PageTabPanel",o="PageTab",c=e=>{var a;let{pageContext:t,children:c}=e;const u=t.frontmatter.slug,b=Array.isArray(c)?c:[c],d=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===r)),m=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===i)),h=null===(a=d.props)||void 0===a?void 0:a.children.filter((e=>e.type.componentName===o)),p=h.findIndex((e=>u.endsWith(e.props.href))),_=-1===p?0:p,g=0===_?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return s.createElement(n.a,{initiallyActiveTab:_},s.createElement(n.a.TabList,{className:"page-tabs-list"},h.map((e=>s.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?g:g+e.props.href))},e.props.children)))),h.map(((e,a)=>s.createElement(n.a.TabPanel,{key:e.props.href},_===a?m.props.children:s.createElement("div",null)))))},u=e=>{let{children:a}=e;return s.createElement(n.a.TabList,null,a)};u.componentName=r;const b=e=>{let{href:a,slug:t,children:l}=e;return s.createElement(n.a.Tab,null,l)};b.componentName=o;const d=e=>{let{children:a}=e;return s.createElement(n.a.TabPanel,null,a)};d.componentName=i,c.TabList=u,c.Tab=b,c.TabPanel=d,a.Z=c},57674:function(e,a,t){var s=t(67294),l=t(45422);a.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return s.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},s.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((a=>s.createElement("li",{key:a},s.createElement("span",{className:"status-name"},a),s.createElement("span",null,e[a]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-logo-accessibility-mdx-3445c03d9f5e2d4d239b.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-logo-accessibility-mdx-3445c03d9f5e2d4d239b.js
new file mode 100644
index 00000000000..6618d107ec0
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-logo-accessibility-mdx-3445c03d9f5e2d4d239b.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[9559,571],{83428:function(e,t,a){a.d(t,{S:function(){return c}});var l=a(80136),n=a(67294),s=a(7444),r=a(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,s.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:t}=e;return n.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:s,type:c="neutral",iconLeft:u}=e,d=(0,l._)(e,["children","className","dataTestId","type","iconLeft"]);return n.createElement("span",Object.assign({className:(0,r.c)(i.statusLabel,i[c],u&&i.statusLabelWithIcon,a),"data-testid":s},d),u&&n.createElement(o,{icon:u}),t)}},72618:function(e,t,a){a.r(t);var l=a(11151),n=a(67294),s=a(80699),r=a(99701),i=a(1076);const o=e=>{let{children:t,pageContext:a}=e;return n.createElement(r.default,{pageContext:a},t)};function c(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",code:"code",em:"em"},(0,l.ah)(),e.components);return n.createElement(n.Fragment,null,n.createElement(t.h2,{id:"accessibility",style:{position:"relative"}},"Accessibility",n.createElement(t.a,{href:"#accessibility","aria-label":"accessibility permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.h3,{id:"pay-attention-to",style:{position:"relative"}},"Pay attention to",n.createElement(t.a,{href:"#pay-attention-to","aria-label":"pay attention to permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.ul,null,"\n",n.createElement(t.li,null,"A text alternative must always be provided for logos using the WAI-ARIA definition ",n.createElement(t.code,null,"aria-label"),". See ",n.createElement(s.Z,{href:"https://www.w3.org/TR/WCAG21/#text-alternatives"},"WCAG 2.1 Text Alternatives guideline")," for more information.","\n",n.createElement(t.ul,null,"\n",n.createElement(t.li,null,"When using the logo alone without a service name, provide a localised ",n.createElement(t.code,null,"aria-label")," ",n.createElement(t.em,null,'"City of Helsinki"'),"."),"\n",n.createElement(t.li,null,"When using the logo with the service name, provide a localised ",n.createElement(t.code,null,"aria-label")," ",n.createElement(t.em,null,'"City of Helsinki: [Name of the service]"'),"."),"\n"),"\n"),"\n",n.createElement(t.li,null,"The colour contrast between the logo and its background must comply with ",n.createElement(s.Z,{href:"https://www.w3.org/TR/WCAG21/#contrast-minimum"},"AA Level contrast ratios"),". You can find more information about accessible colour combinations in ",n.createElement(i.Z,{href:"/foundation/design-tokens/colour"},"Colour design token documentation"),"."),"\n"))}t.default=function(e){return void 0===e&&(e={}),n.createElement(o,e,n.createElement(c,e))}},99701:function(e,t,a){a.r(t);var l=a(11151),n=a(67294),s=a(83428),r=a(57674),i=a(89482),o=(a(18607),a(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,l.ah)(),e.components);return o.Z||u("PageTabs",!1),o.Z.Tab||u("PageTabs.Tab",!0),o.Z.TabList||u("PageTabs.TabList",!0),o.Z.TabPanel||u("PageTabs.TabPanel",!0),n.createElement(n.Fragment,null,n.createElement(t.h1,{id:"logo",style:{position:"relative"}},"Logo",n.createElement(t.a,{href:"#logo","aria-label":"logo permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement("div",{className:"status-label-description"},n.createElement(s.S,{type:"info"},"Stable"),n.createElement(s.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),n.createElement(r.Z)),"\n",n.createElement(i.Z,null,"The logo is used to identify the site or application as an official City of Helsinki service."),"\n",n.createElement(o.Z,{pageContext:e.pageContext},n.createElement(o.Z.TabList,null,n.createElement(o.Z.Tab,{href:"/"},"Usage"),n.createElement(o.Z.Tab,{href:"/code"},"Code"),n.createElement(o.Z.Tab,{href:"/accessibility"},"Accessibility"),n.createElement(o.Z.Tab,{href:"/customisation"},"Customisation")),n.createElement(o.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,l.ah)(),e.components);return t?n.createElement(t,e,n.createElement(c,e)):c(e)}},89482:function(e,t,a){var l=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:n={},children:s}=e;return l.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...n}},s)}},26127:function(e,t,a){var l=a(67294),n=a(14160),s=a(94671);const r="PageTabList",i="PageTabPanel",o="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const u=a.frontmatter.slug,d=Array.isArray(c)?c:[c],m=d.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===r)),b=d.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===i)),h=null===(t=m.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===o)),p=h.findIndex((e=>u.endsWith(e.props.href))),f=-1===p?0:p,g=0===f?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return l.createElement(s.a,{initiallyActiveTab:f},l.createElement(s.a.TabList,{className:"page-tabs-list"},h.map((e=>l.createElement(s.a.Tab,{key:e.props.href,onClick:()=>(0,n.navigate)(""+("/"===e.props.href?g:g+e.props.href))},e.props.children)))),h.map(((e,t)=>l.createElement(s.a.TabPanel,{key:e.props.href},f===t?b.props.children:l.createElement("div",null)))))},u=e=>{let{children:t}=e;return l.createElement(s.a.TabList,null,t)};u.componentName=r;const d=e=>{let{href:t,slug:a,children:n}=e;return l.createElement(s.a.Tab,null,n)};d.componentName=o;const m=e=>{let{children:t}=e;return l.createElement(s.a.TabPanel,null,t)};m.componentName=i,c.TabList=u,c.Tab=d,c.TabPanel=m,t.Z=c},57674:function(e,t,a){var l=a(67294),n=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return l.createElement(n.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},l.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>l.createElement("li",{key:t},l.createElement("span",{className:"status-name"},t),l.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-logo-code-mdx-d0cdbd45f0d1a52e5a59.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-logo-code-mdx-d0cdbd45f0d1a52e5a59.js
new file mode 100644
index 00000000000..c2ff34fc14b
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-logo-code-mdx-d0cdbd45f0d1a52e5a59.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[8595,571],{83428:function(e,a,t){t.d(a,{S:function(){return c}});var l=t(80136),n=t(67294),s=t(7444),r=t(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,s.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const i=e=>{let{icon:a}=e;return n.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},a)},c=e=>{var{children:a,className:t,dataTestId:s,type:c="neutral",iconLeft:d}=e,u=(0,l._)(e,["children","className","dataTestId","type","iconLeft"]);return n.createElement("span",Object.assign({className:(0,r.c)(o.statusLabel,o[c],d&&o.statusLabelWithIcon,t),"data-testid":s},u),d&&n.createElement(i,{icon:d}),a)}},96888:function(e,a,t){t.r(a);var l=t(11151),n=t(67294),s=t(71015),r=t(21662),o=t(80699),i=t(99701);const c=e=>{let{children:a,pageContext:t}=e;return n.createElement(i.default,{pageContext:t},a)};function d(e){const a=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",h4:"h4",pre:"pre",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",strong:"strong",p:"p"},(0,l.ah)(),e.components),{Playground:t,IconCheckCircleFill:i,IconCrossCircle:c}=a;return i||u("IconCheckCircleFill",!0),c||u("IconCrossCircle",!0),t||u("Playground",!0),n.createElement(n.Fragment,null,n.createElement(a.h2,{id:"code",style:{position:"relative"}},"Code",n.createElement(a.a,{href:"#code","aria-label":"code permalink",className:"header-anchor after"},n.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(a.h3,{id:"code-examples",style:{position:"relative"}},"Code examples",n.createElement(a.a,{href:"#code-examples","aria-label":"code examples permalink",className:"header-anchor after"},n.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(a.h4,{id:"default-and-colour-variants",style:{position:"relative"}},"Default and colour variants",n.createElement(a.a,{href:"#default-and-colour-variants","aria-label":"default and colour variants permalink",className:"header-anchor after"},n.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t,{scope:{Logo:s.L,logoFi:s.l,logoFiDark:s.a,logoSv:s.b,logoSvDark:s.c,logoRu:s.d,logoRuDark:s.e}},n.createElement(a.pre,null,n.createElement(a.code,{className:"language-jsx"},'import { Logo, logoFi, logoFiDark, logoSv, logoSvDark, logoRu, logoRuDark } from \'hds-react\';\n\n() => (<>\n  <Logo src={logoFi} size="medium" style={{marginRight: \'var(--spacing-xs)\'}} alt="Helsingin kaupunki" />\n  <Logo src={logoSv} size="medium" style={{marginRight: \'var(--spacing-xs)\'}} alt="Helsingin kaupunki" />\n  <Logo src={logoRu} size="medium" style={{marginRight: \'var(--spacing-xs)\'}} alt="Helsingin kaupunki" />\n  <Logo src={logoFiDark} size="medium" style={{marginRight: \'var(--spacing-xs)\', background: \'black\'}} alt="Helsingin kaupunki" />\n  <Logo src={logoSvDark} size="medium" style={{marginRight: \'var(--spacing-xs)\', background: \'black\'}} alt="Helsingin kaupunki" />\n  <Logo src={logoRuDark} size="medium" style={{marginRight: \'var(--spacing-xs)\', background: \'black\'}} alt="Helsingin kaupunki" />\n</>)\n'))),"\n",n.createElement(a.h4,{id:"size-variants",style:{position:"relative"}},"Size variants",n.createElement(a.a,{href:"#size-variants","aria-label":"size variants permalink",className:"header-anchor after"},n.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t,{scope:{Logo:s.L,logoFi:s.l}},n.createElement(a.pre,null,n.createElement(a.code,{className:"language-jsx"},'import { Logo, logoFi } from \'hds-react\';\n\n() => (<>\n  <Logo src={logoFi} size="small" style={{marginRight: \'var(--spacing-xs)\'}} alt="Helsingin kaupunki" />\n  <Logo src={logoFi} size="medium" style={{marginRight: \'var(--spacing-xs)\'}} alt="Helsingin kaupunki" />\n  <Logo src={logoFi} size="large" alt="Helsingin kaupunki" />\n</>)\n'))),"\n",n.createElement(a.h3,{id:"packages",style:{position:"relative"}},"Packages",n.createElement(a.a,{href:"#packages","aria-label":"packages permalink",className:"header-anchor after"},n.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(a.table,null,n.createElement(a.thead,null,n.createElement(a.tr,null,n.createElement(a.th,null,"Package"),n.createElement(a.th,null,"Included"),n.createElement(a.th,null,"Storybook link"),n.createElement(a.th,null,"Source link"))),n.createElement(a.tbody,null,n.createElement(a.tr,null,n.createElement(a.td,null,n.createElement(a.strong,null,"HDS React")),n.createElement(a.td,null,n.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},n.createElement(i)," Yes ")),n.createElement(a.td,null,n.createElement(r.L,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-logo"},"View in Storybook")),n.createElement(a.td,null,n.createElement(o.Z,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/react/src/components/logo"},"View source"))),n.createElement(a.tr,null,n.createElement(a.td,null,n.createElement(a.strong,null,"HDS Core")),n.createElement(a.td,null,n.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},n.createElement(c)," No ")),n.createElement(a.td,null,"-"),n.createElement(a.td,null,"-")))),"\n",n.createElement(a.h3,{id:"properties",style:{position:"relative"}},"Properties",n.createElement(a.a,{href:"#properties","aria-label":"properties permalink",className:"header-anchor after"},n.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(a.p,null,"Note! You can find the full list of properties in the ",n.createElement(r.L,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-logo"},"React Storybook.")),"\n",n.createElement(a.table,null,n.createElement(a.thead,null,n.createElement(a.tr,null,n.createElement(a.th,null,"Property"),n.createElement(a.th,null,"Description"),n.createElement(a.th,null,"Values"),n.createElement(a.th,null,"Default value"))),n.createElement(a.tbody,null,n.createElement(a.tr,null,n.createElement(a.td,null,n.createElement(a.code,null,"src")),n.createElement(a.td,null,"Src of the logo. Can be base64-encoded, locally imported image or a URL."),n.createElement(a.td,null,n.createElement(a.code,null,"string")),n.createElement(a.td,null,n.createElement(a.code,null,"-"))),n.createElement(a.tr,null,n.createElement(a.td,null,n.createElement(a.code,null,"size")),n.createElement(a.td,null,"Size of the logo."),n.createElement(a.td,null,n.createElement(a.code,null,'"small"'),", ",n.createElement(a.code,null,'"medium"'),", ",n.createElement(a.code,null,'"large"'),", ",n.createElement(a.code,null,'"full"')),n.createElement(a.td,null,n.createElement(a.code,null,'"full"'))))))}function u(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){return void 0===e&&(e={}),n.createElement(c,e,n.createElement(d,e))}},99701:function(e,a,t){t.r(a);var l=t(11151),n=t(67294),s=t(83428),r=t(57674),o=t(89482),i=(t(18607),t(26127));function c(e){const a=Object.assign({h1:"h1",a:"a",span:"span"},(0,l.ah)(),e.components);return i.Z||d("PageTabs",!1),i.Z.Tab||d("PageTabs.Tab",!0),i.Z.TabList||d("PageTabs.TabList",!0),i.Z.TabPanel||d("PageTabs.TabPanel",!0),n.createElement(n.Fragment,null,n.createElement(a.h1,{id:"logo",style:{position:"relative"}},"Logo",n.createElement(a.a,{href:"#logo","aria-label":"logo permalink",className:"header-anchor after"},n.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement("div",{className:"status-label-description"},n.createElement(s.S,{type:"info"},"Stable"),n.createElement(s.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),n.createElement(r.Z)),"\n",n.createElement(o.Z,null,"The logo is used to identify the site or application as an official City of Helsinki service."),"\n",n.createElement(i.Z,{pageContext:e.pageContext},n.createElement(i.Z.TabList,null,n.createElement(i.Z.Tab,{href:"/"},"Usage"),n.createElement(i.Z.Tab,{href:"/code"},"Code"),n.createElement(i.Z.Tab,{href:"/accessibility"},"Accessibility"),n.createElement(i.Z.Tab,{href:"/customisation"},"Customisation")),n.createElement(i.Z.TabPanel,null,e.children)))}function d(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,l.ah)(),e.components);return a?n.createElement(a,e,n.createElement(c,e)):c(e)}},89482:function(e,a,t){var l=t(67294);a.Z=e=>{let{color:a="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:n={},children:s}=e;return l.createElement("p",{style:{fontSize:t,color:a,maxWidth:600,...n}},s)}},26127:function(e,a,t){var l=t(67294),n=t(14160),s=t(94671);const r="PageTabList",o="PageTabPanel",i="PageTab",c=e=>{var a;let{pageContext:t,children:c}=e;const d=t.frontmatter.slug,u=Array.isArray(c)?c:[c],m=u.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===r)),h=u.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===o)),p=null===(a=m.props)||void 0===a?void 0:a.children.filter((e=>e.type.componentName===i)),g=p.findIndex((e=>d.endsWith(e.props.href))),b=-1===g?0:g,E=0===b?d:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(d);return l.createElement(s.a,{initiallyActiveTab:b},l.createElement(s.a.TabList,{className:"page-tabs-list"},p.map((e=>l.createElement(s.a.Tab,{key:e.props.href,onClick:()=>(0,n.navigate)(""+("/"===e.props.href?E:E+e.props.href))},e.props.children)))),p.map(((e,a)=>l.createElement(s.a.TabPanel,{key:e.props.href},b===a?h.props.children:l.createElement("div",null)))))},d=e=>{let{children:a}=e;return l.createElement(s.a.TabList,null,a)};d.componentName=r;const u=e=>{let{href:a,slug:t,children:n}=e;return l.createElement(s.a.Tab,null,n)};u.componentName=i;const m=e=>{let{children:a}=e;return l.createElement(s.a.TabPanel,null,a)};m.componentName=o,c.TabList=d,c.Tab=u,c.TabPanel=m,a.Z=c},57674:function(e,a,t){var l=t(67294),n=t(45422);a.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return l.createElement(n.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},l.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((a=>l.createElement("li",{key:a},l.createElement("span",{className:"status-name"},a),l.createElement("span",null,e[a]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-logo-customisation-mdx-3274e1826421da1ef866.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-logo-customisation-mdx-3274e1826421da1ef866.js
new file mode 100644
index 00000000000..2bc174ffc8c
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-logo-customisation-mdx-3274e1826421da1ef866.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[8751,571],{83428:function(e,t,a){a.d(t,{S:function(){return c}});var s=a(80136),l=a(67294),n=a(7444),r=a(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const i=e=>{let{icon:t}=e;return l.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:n,type:c="neutral",iconLeft:u}=e,m=(0,s._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(o.statusLabel,o[c],u&&o.statusLabelWithIcon,a),"data-testid":n},m),u&&l.createElement(i,{icon:u}),t)}},94831:function(e,t,a){a.r(t);var s=a(11151),l=a(67294),n=a(12818),r=a(71015),o=a(99701);const i=e=>{let{children:t,pageContext:a}=e;return l.createElement(o.default,{pageContext:a},t)};function c(e){const t=Object.assign({h2:"h2",a:"a",span:"span",p:"p",h3:"h3",code:"code",pre:"pre"},(0,s.ah)(),e.components),{Playground:a}=t;return a||function(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Playground",!0),l.createElement(l.Fragment,null,l.createElement(t.h2,{id:"customisation",style:{position:"relative"}},"Customisation",l.createElement(t.a,{href:"#customisation","aria-label":"customisation permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n.N,{type:"alert",label:"Logo customisation works differently!",className:"siteNotification"},l.createElement(t.p,null,"Logo is an older HDS component and therefore its customisation works slightly differently. Instead of the\n",l.createElement("code",null,"theme")," property, you need to use the ",l.createElement("code",null,"style")," property. This will be fixed in a future update.")),"\n",l.createElement(t.h3,{id:"customisation-properties",style:{position:"relative"}},"Customisation properties",l.createElement(t.a,{href:"#customisation-properties","aria-label":"customisation properties permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"You can either use the ",l.createElement(t.code,null,"style")," or ",l.createElement(t.code,null,"className")," properties to customise the component."),"\n",l.createElement(t.h3,{id:"customisation-example",style:{position:"relative"}},"Customisation example",l.createElement(t.a,{href:"#customisation-example","aria-label":"customisation example permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a,{scope:{Logo:r.L,logoFi:r.l}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},"\nimport { Logo, logoFi } from 'hds-react';\n\n<>\n  <Logo src={logoFi} size=\"small\" style={{ color: 'var(--color-bus)', marginRight: 'var(--spacing-xs)' }} alt=\"Helsingin kaupunki\" />\n  <Logo src={logoFi} size=\"medium\" style={{ color: 'var(--color-tram)', marginRight: 'var(--spacing-xs)' }} alt=\"Helsingin kaupunki\" />\n  <Logo src={logoFi} size=\"large\" style={{ color: 'var(--color-metro)' }} alt=\"Helsingin kaupunki\" />\n</>\n"))))}t.default=function(e){return void 0===e&&(e={}),l.createElement(i,e,l.createElement(c,e))}},99701:function(e,t,a){a.r(t);var s=a(11151),l=a(67294),n=a(83428),r=a(57674),o=a(89482),i=(a(18607),a(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,s.ah)(),e.components);return i.Z||u("PageTabs",!1),i.Z.Tab||u("PageTabs.Tab",!0),i.Z.TabList||u("PageTabs.TabList",!0),i.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"logo",style:{position:"relative"}},"Logo",l.createElement(t.a,{href:"#logo","aria-label":"logo permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{className:"status-label-description"},l.createElement(n.S,{type:"info"},"Stable"),l.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(o.Z,null,"The logo is used to identify the site or application as an official City of Helsinki service."),"\n",l.createElement(i.Z,{pageContext:e.pageContext},l.createElement(i.Z.TabList,null,l.createElement(i.Z.Tab,{href:"/"},"Usage"),l.createElement(i.Z.Tab,{href:"/code"},"Code"),l.createElement(i.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(i.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(i.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,s.ah)(),e.components);return t?l.createElement(t,e,l.createElement(c,e)):c(e)}},89482:function(e,t,a){var s=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:l={},children:n}=e;return s.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...l}},n)}},26127:function(e,t,a){var s=a(67294),l=a(14160),n=a(94671);const r="PageTabList",o="PageTabPanel",i="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const u=a.frontmatter.slug,m=Array.isArray(c)?c:[c],d=m.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===r)),p=m.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===o)),h=null===(t=d.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===i)),b=h.findIndex((e=>u.endsWith(e.props.href))),g=-1===b?0:b,f=0===g?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return s.createElement(n.a,{initiallyActiveTab:g},s.createElement(n.a.TabList,{className:"page-tabs-list"},h.map((e=>s.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),h.map(((e,t)=>s.createElement(n.a.TabPanel,{key:e.props.href},g===t?p.props.children:s.createElement("div",null)))))},u=e=>{let{children:t}=e;return s.createElement(n.a.TabList,null,t)};u.componentName=r;const m=e=>{let{href:t,slug:a,children:l}=e;return s.createElement(n.a.Tab,null,l)};m.componentName=i;const d=e=>{let{children:t}=e;return s.createElement(n.a.TabPanel,null,t)};d.componentName=o,c.TabList=u,c.Tab=m,c.TabPanel=d,t.Z=c},57674:function(e,t,a){var s=a(67294),l=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return s.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},s.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>s.createElement("li",{key:t},s.createElement("span",{className:"status-name"},t),s.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-logo-index-mdx-5166603a8e5a241d0601.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-logo-index-mdx-5166603a8e5a241d0601.js
new file mode 100644
index 00000000000..d54547fa8db
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-logo-index-mdx-5166603a8e5a241d0601.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[689,571],{83428:function(e,a,t){t.d(a,{S:function(){return c}});var n=t(80136),l=t(67294),s=t(7444),i=t(34300),r={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,s.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:a}=e;return l.createElement("span",{className:r.statusLabelIcon,"aria-hidden":"true"},a)},c=e=>{var{children:a,className:t,dataTestId:s,type:c="neutral",iconLeft:d}=e,u=(0,n._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,i.c)(r.statusLabel,r[c],d&&r.statusLabelWithIcon,t),"data-testid":s},u),d&&l.createElement(o,{icon:d}),a)}},68701:function(e,a,t){t.r(a);var n=t(11151),l=t(67294),s=t(71015),i=t(99701);const r=e=>{let{children:a,pageContext:t}=e;return l.createElement(i.default,{pageContext:t},a)};function o(e){const a=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",p:"p",ul:"ul",li:"li",strong:"strong",h4:"h4"},(0,n.ah)(),e.components),{PlaygroundPreview:t,InternalLink:i}=a;return i||c("InternalLink",!0),t||c("PlaygroundPreview",!0),l.createElement(l.Fragment,null,l.createElement(a.h2,{id:"usage",style:{position:"relative"}},"Usage",l.createElement(a.a,{href:"#usage","aria-label":"usage permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.h3,{id:"example",style:{position:"relative"}},"Example",l.createElement(a.a,{href:"#example","aria-label":"example permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t,null,l.createElement(s.L,{src:s.l,size:"medium",alt:"logo"})),"\n",l.createElement(a.p,null,"The logo is used to identify the site or application.\nSee the ",l.createElement(i,{size:"M",href:"/foundation/visual-assets/logo"},"logo visual asset documentation")," for more information about principles of using the City of Helsinki logo."),"\n",l.createElement(a.h3,{id:"principles",style:{position:"relative"}},"Principles",l.createElement(a.a,{href:"#principles","aria-label":"principles permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.ul,null,"\n",l.createElement(a.li,null,"Logo should be used in HDS Header and HDS Footer components. ",l.createElement(a.strong,null,"Use the Logo component sparingly in other parts of the service.")),"\n",l.createElement(a.li,null,l.createElement(a.strong,null,"You should include the service name next to the logo.")," This helps the user more easily identify which city service they are currently using."),"\n",l.createElement(a.li,null,"The Logo component does not include translations itself but localization can be achieved by changing the logo src accordingly."),"\n",l.createElement(a.li,null,"The src is user-replaceable. If Helsinki logo is not used, only Logo component is needed to be imported and the src given as url, data-url or locally imported image."),"\n",l.createElement(a.li,null,"The Logo component should act as a link to the main page of the service."),"\n",l.createElement(a.li,null,"Unless the Logo is hidden from the screen-readers by giving it the aria-hidden property, it should be given an alt attribute as a description."),"\n"),"\n",l.createElement(a.h3,{id:"variations",style:{position:"relative"}},"Variations",l.createElement(a.a,{href:"#variations","aria-label":"variations permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.h4,{id:"default",style:{position:"relative"}},"Default",l.createElement(a.a,{href:"#default","aria-label":"default permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.p,null,"The Helsinki logo included is offered in three (3) languages and their dark-mode variants (light-coloured to be visible on top of dark background)."),"\n",l.createElement(t,null,l.createElement(s.L,{src:s.l,size:"medium",style:{marginRight:"var(--spacing-xs)"},alt:"Helsingin kaupunki"}),l.createElement(s.L,{src:s.b,size:"medium",style:{marginRight:"var(--spacing-xs)"},alt:"Helsingin kaupunki"}),l.createElement(s.L,{src:s.d,size:"medium",style:{marginRight:"var(--spacing-xs)"},alt:"Helsingin kaupunki"}),l.createElement(s.L,{src:s.a,size:"medium",style:{marginRight:"var(--spacing-xs)",background:"black"},alt:"Helsingin kaupunki"}),l.createElement(s.L,{src:s.c,size:"medium",style:{marginRight:"var(--spacing-xs)",background:"black"},alt:"Helsingin kaupunki"}),l.createElement(s.L,{src:s.e,size:"medium",style:{background:"black"},alt:"Helsingin kaupunki"})),"\n",l.createElement(a.h4,{id:"sizes",style:{position:"relative"}},"Sizes",l.createElement(a.a,{href:"#sizes","aria-label":"sizes permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.p,null,"The component includes three (3) size variants to fit the context. If omitted, the logo uses all available space."),"\n",l.createElement(t,null,l.createElement(s.L,{src:s.l,size:"small",style:{marginRight:"var(--spacing-xs)"},alt:"Helsingin kaupunki"}),l.createElement(s.L,{src:s.l,size:"medium",style:{marginRight:"var(--spacing-xs)"},alt:"Helsingin kaupunki"}),l.createElement(s.L,{src:s.l,size:"large",alt:"Helsingin kaupunki"})))}function c(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){return void 0===e&&(e={}),l.createElement(r,e,l.createElement(o,e))}},99701:function(e,a,t){t.r(a);var n=t(11151),l=t(67294),s=t(83428),i=t(57674),r=t(89482),o=(t(18607),t(26127));function c(e){const a=Object.assign({h1:"h1",a:"a",span:"span"},(0,n.ah)(),e.components);return o.Z||d("PageTabs",!1),o.Z.Tab||d("PageTabs.Tab",!0),o.Z.TabList||d("PageTabs.TabList",!0),o.Z.TabPanel||d("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(a.h1,{id:"logo",style:{position:"relative"}},"Logo",l.createElement(a.a,{href:"#logo","aria-label":"logo permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{className:"status-label-description"},l.createElement(s.S,{type:"info"},"Stable"),l.createElement(s.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(i.Z)),"\n",l.createElement(r.Z,null,"The logo is used to identify the site or application as an official City of Helsinki service."),"\n",l.createElement(o.Z,{pageContext:e.pageContext},l.createElement(o.Z.TabList,null,l.createElement(o.Z.Tab,{href:"/"},"Usage"),l.createElement(o.Z.Tab,{href:"/code"},"Code"),l.createElement(o.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(o.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(o.Z.TabPanel,null,e.children)))}function d(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,n.ah)(),e.components);return a?l.createElement(a,e,l.createElement(c,e)):c(e)}},89482:function(e,a,t){var n=t(67294);a.Z=e=>{let{color:a="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:l={},children:s}=e;return n.createElement("p",{style:{fontSize:t,color:a,maxWidth:600,...l}},s)}},26127:function(e,a,t){var n=t(67294),l=t(14160),s=t(94671);const i="PageTabList",r="PageTabPanel",o="PageTab",c=e=>{var a;let{pageContext:t,children:c}=e;const d=t.frontmatter.slug,u=Array.isArray(c)?c:[c],m=u.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===i)),h=u.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===r)),p=null===(a=m.props)||void 0===a?void 0:a.children.filter((e=>e.type.componentName===o)),b=p.findIndex((e=>d.endsWith(e.props.href))),g=-1===b?0:b,f=0===g?d:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(d);return n.createElement(s.a,{initiallyActiveTab:g},n.createElement(s.a.TabList,{className:"page-tabs-list"},p.map((e=>n.createElement(s.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),p.map(((e,a)=>n.createElement(s.a.TabPanel,{key:e.props.href},g===a?h.props.children:n.createElement("div",null)))))},d=e=>{let{children:a}=e;return n.createElement(s.a.TabList,null,a)};d.componentName=i;const u=e=>{let{href:a,slug:t,children:l}=e;return n.createElement(s.a.Tab,null,l)};u.componentName=o;const m=e=>{let{children:a}=e;return n.createElement(s.a.TabPanel,null,a)};m.componentName=r,c.TabList=d,c.Tab=u,c.TabPanel=m,a.Z=c},57674:function(e,a,t){var n=t(67294),l=t(45422);a.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return n.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},n.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((a=>n.createElement("li",{key:a},n.createElement("span",{className:"status-name"},a),n.createElement("span",null,e[a]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-logo-tabs-mdx-119154cafc54a421d304.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-logo-tabs-mdx-119154cafc54a421d304.js
new file mode 100644
index 00000000000..f1c46e2ef6d
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-logo-tabs-mdx-119154cafc54a421d304.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[571],{83428:function(e,a,t){t.d(a,{S:function(){return i}});var s=t(80136),l=t(67294),n=t(7444),r=t(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const c=e=>{let{icon:a}=e;return l.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},a)},i=e=>{var{children:a,className:t,dataTestId:n,type:i="neutral",iconLeft:u}=e,b=(0,s._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(o.statusLabel,o[i],u&&o.statusLabelWithIcon,t),"data-testid":n},b),u&&l.createElement(c,{icon:u}),a)}},99701:function(e,a,t){t.r(a);var s=t(11151),l=t(67294),n=t(83428),r=t(57674),o=t(89482),c=(t(18607),t(26127));function i(e){const a=Object.assign({h1:"h1",a:"a",span:"span"},(0,s.ah)(),e.components);return c.Z||u("PageTabs",!1),c.Z.Tab||u("PageTabs.Tab",!0),c.Z.TabList||u("PageTabs.TabList",!0),c.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(a.h1,{id:"logo",style:{position:"relative"}},"Logo",l.createElement(a.a,{href:"#logo","aria-label":"logo permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{className:"status-label-description"},l.createElement(n.S,{type:"info"},"Stable"),l.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(o.Z,null,"The logo is used to identify the site or application as an official City of Helsinki service."),"\n",l.createElement(c.Z,{pageContext:e.pageContext},l.createElement(c.Z.TabList,null,l.createElement(c.Z.Tab,{href:"/"},"Usage"),l.createElement(c.Z.Tab,{href:"/code"},"Code"),l.createElement(c.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(c.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(c.Z.TabPanel,null,e.children)))}function u(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,s.ah)(),e.components);return a?l.createElement(a,e,l.createElement(i,e)):i(e)}},89482:function(e,a,t){var s=t(67294);a.Z=e=>{let{color:a="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:l={},children:n}=e;return s.createElement("p",{style:{fontSize:t,color:a,maxWidth:600,...l}},n)}},26127:function(e,a,t){var s=t(67294),l=t(14160),n=t(94671);const r="PageTabList",o="PageTabPanel",c="PageTab",i=e=>{var a;let{pageContext:t,children:i}=e;const u=t.frontmatter.slug,b=Array.isArray(i)?i:[i],d=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===r)),m=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===o)),h=null===(a=d.props)||void 0===a?void 0:a.children.filter((e=>e.type.componentName===c)),p=h.findIndex((e=>u.endsWith(e.props.href))),_=-1===p?0:p,f=0===_?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return s.createElement(n.a,{initiallyActiveTab:_},s.createElement(n.a.TabList,{className:"page-tabs-list"},h.map((e=>s.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),h.map(((e,a)=>s.createElement(n.a.TabPanel,{key:e.props.href},_===a?m.props.children:s.createElement("div",null)))))},u=e=>{let{children:a}=e;return s.createElement(n.a.TabList,null,a)};u.componentName=r;const b=e=>{let{href:a,slug:t,children:l}=e;return s.createElement(n.a.Tab,null,l)};b.componentName=c;const d=e=>{let{children:a}=e;return s.createElement(n.a.TabPanel,null,a)};d.componentName=o,i.TabList=u,i.Tab=b,i.TabPanel=d,a.Z=i},57674:function(e,a,t){var s=t(67294),l=t(45422);a.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return s.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},s.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((a=>s.createElement("li",{key:a},s.createElement("span",{className:"status-name"},a),s.createElement("span",null,e[a]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-notification-accessibility-mdx-258cc9b160dfc59efde1.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-notification-accessibility-mdx-258cc9b160dfc59efde1.js
new file mode 100644
index 00000000000..72d3448e408
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-notification-accessibility-mdx-258cc9b160dfc59efde1.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[4544,965],{83428:function(e,t,a){a.d(t,{S:function(){return c}});var n=a(80136),s=a(67294),l=a(7444),r=a(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,l.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:t}=e;return s.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:l,type:c="neutral",iconLeft:u}=e,d=(0,n._)(e,["children","className","dataTestId","type","iconLeft"]);return s.createElement("span",Object.assign({className:(0,r.c)(i.statusLabel,i[c],u&&i.statusLabelWithIcon,a),"data-testid":l},d),u&&s.createElement(o,{icon:u}),t)}},76888:function(e,t,a){a.r(t);var n=a(11151),s=a(67294),l=a(80699),r=a(93204);const i=e=>{let{children:t,pageContext:a}=e;return s.createElement(r.default,{pageContext:a},t)};function o(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",code:"code"},(0,n.ah)(),e.components);return s.createElement(s.Fragment,null,s.createElement(t.h2,{id:"accessibility",style:{position:"relative"}},"Accessibility",s.createElement(t.a,{href:"#accessibility","aria-label":"accessibility permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.h3,{id:"pay-attention-to",style:{position:"relative"}},"Pay attention to",s.createElement(t.a,{href:"#pay-attention-to","aria-label":"pay attention to permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.ul,null,"\n",s.createElement(t.li,null,"Avoid using automatically disappearing toast notifications for critical information or very long messages. It is possible that the notification disappears before the user or screen reader can react to the message. Refer to ",s.createElement(l.Z,{href:"https://www.w3.org/WAI/WCAG21/Understanding/no-timing.html"},"WCAG 2.1 No timing requirement")," for more information."),"\n",s.createElement(t.li,null,"Remember that colour should never be the only way of conveying information. Make sure the meaning of the notification is clearly described by the title and body. Refer to ",s.createElement(l.Z,{href:"https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html"},"WCAG 2.1 Use of Colour guideline")," for more information."),"\n",s.createElement(t.li,null,"It is recommended (but not required) to offer a way to turn off less important notifications. Refer to ",s.createElement(l.Z,{href:"https://www.w3.org/WAI/WCAG21/Understanding/interruptions.html"},"WCAG 2.1 Interruptions guideline")," for more information."),"\n",s.createElement(t.li,null,"HDS Toast notifications use ",s.createElement(t.code,null,'role="alert"')," which means they are immediately announced to the screen reader as the node is inserted to the DOM. Inline notifications do not need this role since they are created during page load."),"\n",s.createElement(t.li,null,"When a dismissible Notification is closed, the focus should return to the element that caused the Notification to appear. This allows keyboard and screen reader users to continue in the context before the Notification was shown."),"\n"))}t.default=function(e){return void 0===e&&(e={}),s.createElement(i,e,s.createElement(o,e))}},93204:function(e,t,a){a.r(t);var n=a(11151),s=a(67294),l=a(83428),r=a(57674),i=a(89482),o=(a(18607),a(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,n.ah)(),e.components);return o.Z||u("PageTabs",!1),o.Z.Tab||u("PageTabs.Tab",!0),o.Z.TabList||u("PageTabs.TabList",!0),o.Z.TabPanel||u("PageTabs.TabPanel",!0),s.createElement(s.Fragment,null,s.createElement(t.h1,{id:"notification",style:{position:"relative"}},"Notification",s.createElement(t.a,{href:"#notification","aria-label":"notification permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement("div",{class:"status-label-description"},s.createElement(l.S,{type:"info"},"Stable"),s.createElement(l.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),s.createElement(r.Z)),"\n",s.createElement(i.Z,null,"Notifications are used to present timely information to the user. HDS offers two types of notifications for different use cases."),"\n",s.createElement(o.Z,{pageContext:e.pageContext},s.createElement(o.Z.TabList,null,s.createElement(o.Z.Tab,{href:"/"},"Usage"),s.createElement(o.Z.Tab,{href:"/code"},"Code"),s.createElement(o.Z.Tab,{href:"/accessibility"},"Accessibility")),s.createElement(o.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,n.ah)(),e.components);return t?s.createElement(t,e,s.createElement(c,e)):c(e)}},89482:function(e,t,a){var n=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:s={},children:l}=e;return n.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...s}},l)}},26127:function(e,t,a){var n=a(67294),s=a(14160),l=a(94671);const r="PageTabList",i="PageTabPanel",o="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const u=a.frontmatter.slug,d=Array.isArray(c)?c:[c],h=d.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===r)),m=d.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===i)),b=null===(t=h.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===o)),p=b.findIndex((e=>u.endsWith(e.props.href))),f=-1===p?0:p,g=0===f?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return n.createElement(l.a,{initiallyActiveTab:f},n.createElement(l.a.TabList,{className:"page-tabs-list"},b.map((e=>n.createElement(l.a.Tab,{key:e.props.href,onClick:()=>(0,s.navigate)(""+("/"===e.props.href?g:g+e.props.href))},e.props.children)))),b.map(((e,t)=>n.createElement(l.a.TabPanel,{key:e.props.href},f===t?m.props.children:n.createElement("div",null)))))},u=e=>{let{children:t}=e;return n.createElement(l.a.TabList,null,t)};u.componentName=r;const d=e=>{let{href:t,slug:a,children:s}=e;return n.createElement(l.a.Tab,null,s)};d.componentName=o;const h=e=>{let{children:t}=e;return n.createElement(l.a.TabPanel,null,t)};h.componentName=i,c.TabList=u,c.Tab=d,c.TabPanel=h,t.Z=c},57674:function(e,t,a){var n=a(67294),s=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return n.createElement(s.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},n.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>n.createElement("li",{key:t},n.createElement("span",{className:"status-name"},t),n.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-notification-code-mdx-c3b30ea9e9636c4d0501.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-notification-code-mdx-c3b30ea9e9636c4d0501.js
new file mode 100644
index 00000000000..1ae6015a923
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-notification-code-mdx-c3b30ea9e9636c4d0501.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[7922,965],{83428:function(e,t,n){n.d(t,{S:function(){return r}});var a=n(80136),l=n(67294),i=n(7444),s=n(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,i.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const c=e=>{let{icon:t}=e;return l.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},t)},r=e=>{var{children:t,className:n,dataTestId:i,type:r="neutral",iconLeft:d}=e,u=(0,a._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,s.c)(o.statusLabel,o[r],d&&o.statusLabelWithIcon,n),"data-testid":i},u),d&&l.createElement(c,{icon:d}),t)}},3037:function(e,t,n){n.r(t);var a=n(11151),l=n(67294),i=n(12818),s=n(17882),o=n(93204);const c=e=>{let{children:t,pageContext:n}=e;return l.createElement(o.default,{pageContext:n},t)};function r(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",h4:"h4",pre:"pre",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",strong:"strong",p:"p"},(0,a.ah)(),e.components),{Playground:n,IconCheckCircleFill:o,Link:c,ExternalLink:r}=t;return r||d("ExternalLink",!0),o||d("IconCheckCircleFill",!0),c||d("Link",!0),n||d("Playground",!0),l.createElement(l.Fragment,null,l.createElement(t.h2,{id:"code",style:{position:"relative"}},"Code",l.createElement(t.a,{href:"#code","aria-label":"code permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h3,{id:"code-examples",style:{position:"relative"}},"Code examples",l.createElement(t.a,{href:"#code-examples","aria-label":"code examples permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h4,{id:"inline",style:{position:"relative"}},"Inline",l.createElement(t.a,{href:"#inline","aria-label":"inline permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n,{scope:{Notification:i.N}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},'import { Notification } from \'hds-react\';\n\n() => (<>\n  <Notification label="New messages">You have received new messages.</Notification>\n  <Notification label="Form done" type="success" style={{marginTop: \'var(--spacing-s)\'}}>Form submit was successful!</Notification>\n  <Notification label="Slow loading" type="alert" style={{marginTop: \'var(--spacing-s)\'}}>Loading is taking longer than expected.</Notification>\n  <Notification label="Missing information" type="error" style={{marginTop: \'var(--spacing-s)\'}}>Form is missing critical information.</Notification>\n</>)\n')),l.createElement(t.pre,null,l.createElement(t.code,{className:"language-html"},'<div>\n<section aria-label="Notification" class="hds-notification">\n  <div class="hds-notification__content">\n    <div class="hds-notification__label" role="heading" aria-level="2">\n      <span class="hds-icon hds-icon--info-circle-fill" aria-hidden="true"></span>\n      <span>New messages</span>\n    </div>\n    <div class="hds-notification__body">You have received new messages.</div>\n  </div>\n</section>\n<br />\n<section aria-label="Notification" class="hds-notification hds-notification--success">\n  <div class="hds-notification__content">\n    <div class="hds-notification__label" role="heading" aria-level="2">\n      <span class="hds-icon hds-icon--check-circle-fill" aria-hidden="true"></span>\n      <span>Form done</span>\n    </div>\n    <div class="hds-notification__body">Form submit was successful!</div>\n  </div>\n</section>\n<br />\n<section aria-label="Notification" class="hds-notification hds-notification--alert">\n  <div class="hds-notification__content">\n    <div class="hds-notification__label" role="heading" aria-level="2">\n      <span class="hds-icon hds-icon--alert-circle-fill" aria-hidden="true"></span>\n      <span>Slow loading</span>\n    </div>\n    <div class="hds-notification__body">Loading is taking longer than expected.</div>\n  </div>\n</section>\n<br />\n<section aria-label="Notification" class="hds-notification hds-notification--error">\n  <div class="hds-notification__content">\n    <div class="hds-notification__label" role="heading" aria-level="2">\n      <span class="hds-icon hds-icon--error-fill" aria-hidden="true"></span>\n      <span>Missing information</span>\n    </div>\n    <div class="hds-notification__body">Form is missing critical information.</div>\n  </div>\n</section>\n</div>\n'))),"\n",l.createElement(t.h4,{id:"toast",style:{position:"relative"}},"Toast",l.createElement(t.a,{href:"#toast","aria-label":"toast permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n,{scope:{Notification:i.N,Button:s.B,useState:l.useState}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},'import { Notification, Button } from \'hds-react\';\n\n() => {\n  const [open, setOpen] = useState(false)\n  const [autoCloseOpen, setAutoCloseOpen] = useState(false)\n  const showButtonRef = React.useRef(null)\n  const showAutoCloseButtonRef = React.useRef(null)\n  const onClose = () => {\n    setOpen(false);\n    if(showButtonRef.current) {\n      showButtonRef.current.focus();\n    }\n  }\n  const onAutoClose = () => {\n    setAutoCloseOpen(false);\n    if(showAutoCloseButtonRef.current) {\n      showAutoCloseButtonRef.current.focus();\n    }\n  }\n  return (\n    <>\n      <Button ref={showButtonRef} onClick={() => setOpen(true)}>Show toast</Button>\n      <Button ref={showAutoCloseButtonRef} onClick={() => setAutoCloseOpen(true)} style={{ display: "flex", marginTop: "var(--spacing-s)" }}>Show automatically disappearing toast</Button>\n      {open && (\n        <Notification label="New messages" position="top-right" dismissible closeButtonLabelText="Close toast" onClose={() => onClose()} style={{ zIndex: 100 }}>\n          You have received new messages.\n        </Notification>\n      )}\n      {autoCloseOpen && (\n        <Notification label="New messages" position="top-right" autoClose onClose={() => onAutoClose()} style={{ zIndex: 100 }}>\n          You have received new messages.\n        </Notification>\n      )}\n    </>\n  )\n}\n')),l.createElement(t.pre,null,l.createElement(t.code,{className:"language-html"},'<section aria-label="Notification" class="hds-notification hds-notification--top-right">\n  <div role="alert" class="hds-notification__content">\n    <div class="hds-notification__label">\n      <span class="hds-icon hds-icon--info-circle-fill" aria-hidden="true"></span>\n      <span>New messages</span>\n    </div>\n    <div class="hds-notification__body">You have received new messages.</div>\n  </div>\n  <button class="hds-notification__close-button" aria-label="Close toast" type="button" onclick="">\n    <span class="hds-icon hds-icon--cross" aria-hidden="true"></span>\n  </button>\n</section>\n'))),"\n",l.createElement(t.h4,{id:"notification-sizes",style:{position:"relative"}},"Notification sizes",l.createElement(t.a,{href:"#notification-sizes","aria-label":"notification sizes permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n,{scope:{Notification:i.N}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},'import { Notification } from \'hds-react\';\n\n() => (<>\n  <Notification size="large" label="New messages">You have received new messages.</Notification>\n  <Notification size="default" label="New messages" style={{marginTop: \'var(--spacing-s)\'}}>You have received new messages.</Notification>\n  <Notification size="small" label="New messages" style={{marginTop: \'var(--spacing-s)\'}}>You have received new messages.</Notification>\n</>)\n')),l.createElement(t.pre,null,l.createElement(t.code,{className:"language-html"},'<div>\n<section aria-label="Notification" class="hds-notification hds-notification--large">\n  <div class="hds-notification__content">\n    <div class="hds-notification__label" role="heading" aria-level="2">\n      <span class="hds-icon hds-icon--info-circle-fill" aria-hidden="true"></span>\n      <span>New messages</span>\n    </div>\n    <div class="hds-notification__body">You have received new messages.</div>\n  </div>\n</section>\n<br />\n<section aria-label="Notification" class="hds-notification">\n  <div class="hds-notification__content">\n    <div class="hds-notification__label" role="heading" aria-level="2">\n      <span class="hds-icon hds-icon--info-circle-fill" aria-hidden="true"></span>\n      <span>New messages</span>\n    </div>\n    <div class="hds-notification__body">You have received new messages.</div>\n  </div>\n</section>\n<br />\n<section aria-label="Notification" class="hds-notification hds-notification--small">\n  <div class="hds-notification__content">\n    <div class="hds-notification__label" role="heading" aria-level="2">\n      <span class="hds-icon hds-icon--info-circle-fill" aria-hidden="true"></span>\n    </div>\n    <div class="hds-notification__body">You have received new messages.</div>\n  </div>\n</section>\n</div>\n'))),"\n",l.createElement(t.h4,{id:"invisible",style:{position:"relative"}},"Invisible",l.createElement(t.a,{href:"#invisible","aria-label":"invisible permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n,{scope:{Notification:i.N}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},"import { Notification } from 'hds-react';\n\n() => (\n  <Notification label=\"New messages\" invisible>\n    You have received new messages. This notification is invisible.\n  </Notification>\n)\n")),l.createElement(t.pre,null,l.createElement(t.code,{className:"language-html"},'<div class="visually-hidden" role="alert">\n  <section aria-label="Notification" class="hds-notification">\n    <div class="hds-notification__content">\n      <div class="hds-notification__label">\n        <span class="hds-icon hds-icon--info-circle-fill" aria-hidden="true"></span>\n        <span>New messages</span>\n      </div>\n      <div class="hds-notification__body">You have received new messages. This notification is invisible.</div>\n    </div>\n  </section>\n</div>\n'))),"\n",l.createElement(t.h3,{id:"packages",style:{position:"relative"}},"Packages",l.createElement(t.a,{href:"#packages","aria-label":"packages permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.table,null,l.createElement(t.thead,null,l.createElement(t.tr,null,l.createElement(t.th,null,"Package"),l.createElement(t.th,null,"Included"),l.createElement(t.th,null,"Storybook link"),l.createElement(t.th,null,"Source link"))),l.createElement(t.tbody,null,l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.strong,null,"HDS React")),l.createElement(t.td,null,l.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},l.createElement(o)," Yes ")),l.createElement(t.td,null,l.createElement(c,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-notification--default"},"View in Storybook")),l.createElement(t.td,null,l.createElement(r,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/react/src/components/notification"},"View source"))),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.strong,null,"HDS Core")),l.createElement(t.td,null,l.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},l.createElement(o)," Yes ")),l.createElement(t.td,null,l.createElement(c,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/core/?path=/story/components-notification--default"},"View in Storybook")),l.createElement(t.td,null,l.createElement(r,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/core/src/components/notification"},"View source"))))),"\n",l.createElement(t.h3,{id:"properties",style:{position:"relative"}},"Properties",l.createElement(t.a,{href:"#properties","aria-label":"properties permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"Note! You can find the full list of properties in the ",l.createElement(c,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-notification--default"},"React Storybook.")),"\n",l.createElement(t.table,null,l.createElement(t.thead,null,l.createElement(t.tr,null,l.createElement(t.th,null,"Property"),l.createElement(t.th,null,"Description"),l.createElement(t.th,null,"Values"),l.createElement(t.th,null,"Default value"))),l.createElement(t.tbody,null,l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"autoClose")),l.createElement(t.td,null,"If set to true, the Toast notification will be closed automatically after a certain time."),l.createElement(t.td,null,l.createElement(t.code,null,"boolean")),l.createElement(t.td,null,"false")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"boxShadow")),l.createElement(t.td,null,"If set to true, the notification will have a box shadow."),l.createElement(t.td,null,l.createElement(t.code,null,"boolean")),l.createElement(t.td,null,"false")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"displayAutoCloseProgress")),l.createElement(t.td,null,"If set to true, a progress is displayed on top of the Toast notification."),l.createElement(t.td,null,l.createElement(t.code,null,"boolean")),l.createElement(t.td,null,"true")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"invisible")),l.createElement(t.td,null,'If set to true, the notification will be visually hidden. Useful when notification should only be "seen" by screen readers.'),l.createElement(t.td,null,l.createElement(t.code,null,"boolean")),l.createElement(t.td,null,"false")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"label")),l.createElement(t.td,null,"The label of the notification."),l.createElement(t.td,null,l.createElement(t.code,null,"ReactNode")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"notificationAriaLabel")),l.createElement(t.td,null,"The aria-label of the notification section element."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,l.createElement(t.code,null,'"Notification"'))),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"onClose")),l.createElement(t.td,null,"Callback fired when the notification is closed"),l.createElement(t.td,null,l.createElement(t.code,null,"function")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"type")),l.createElement(t.td,null,"The type of the notification. Affects the colour and icon of the notification."),l.createElement(t.td,null,l.createElement(t.code,null,'"info"'),", ",l.createElement(t.code,null,'"success"'),", ",l.createElement(t.code,null,'"alert"'),", ",l.createElement(t.code,null,'"error"')),l.createElement(t.td,null,l.createElement(t.code,null,'"info"'))),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"position")),l.createElement(t.td,null,"The position of the notification."),l.createElement(t.td,null,l.createElement(t.code,null,'"inline"'),", ",l.createElement(t.code,null,'"top-left"'),", ",l.createElement(t.code,null,'"top-center"'),", ",l.createElement(t.code,null,'"top-right"'),", ",l.createElement(t.code,null,'"bottom-left"'),", ",l.createElement(t.code,null,'"bottom-center"'),", ",l.createElement(t.code,null,'"bottom-right"')),l.createElement(t.td,null,l.createElement(t.code,null,'"inline"'))),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"size")),l.createElement(t.td,null,"The size of the notification."),l.createElement(t.td,null,l.createElement(t.code,null,'"small"'),", ",l.createElement(t.code,null,'"default"'),", ",l.createElement(t.code,null,'"large"')),l.createElement(t.td,null,l.createElement(t.code,null,'"default"'))),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"dismissible")),l.createElement(t.td,null,"If set to true, the notification can be closed."),l.createElement(t.td,null,l.createElement(t.code,null,"boolean")),l.createElement(t.td,null,"false")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"closeButtonLabelText")),l.createElement(t.td,null,"The aria-label and title for the close button."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,"[Table 1:Notification properties]"),l.createElement(t.td),l.createElement(t.td),l.createElement(t.td)))))}function d(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){return void 0===e&&(e={}),l.createElement(c,e,l.createElement(r,e))}},93204:function(e,t,n){n.r(t);var a=n(11151),l=n(67294),i=n(83428),s=n(57674),o=n(89482),c=(n(18607),n(26127));function r(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,a.ah)(),e.components);return c.Z||d("PageTabs",!1),c.Z.Tab||d("PageTabs.Tab",!0),c.Z.TabList||d("PageTabs.TabList",!0),c.Z.TabPanel||d("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"notification",style:{position:"relative"}},"Notification",l.createElement(t.a,{href:"#notification","aria-label":"notification permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(i.S,{type:"info"},"Stable"),l.createElement(i.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(s.Z)),"\n",l.createElement(o.Z,null,"Notifications are used to present timely information to the user. HDS offers two types of notifications for different use cases."),"\n",l.createElement(c.Z,{pageContext:e.pageContext},l.createElement(c.Z.TabList,null,l.createElement(c.Z.Tab,{href:"/"},"Usage"),l.createElement(c.Z.Tab,{href:"/code"},"Code"),l.createElement(c.Z.Tab,{href:"/accessibility"},"Accessibility")),l.createElement(c.Z.TabPanel,null,e.children)))}function d(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,a.ah)(),e.components);return t?l.createElement(t,e,l.createElement(r,e)):r(e)}},89482:function(e,t,n){var a=n(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:n="var(--fontsize-body-xl)",style:l={},children:i}=e;return a.createElement("p",{style:{fontSize:n,color:t,maxWidth:600,...l}},i)}},26127:function(e,t,n){var a=n(67294),l=n(14160),i=n(94671);const s="PageTabList",o="PageTabPanel",c="PageTab",r=e=>{var t;let{pageContext:n,children:r}=e;const d=n.frontmatter.slug,u=Array.isArray(r)?r:[r],m=u.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===s)),h=u.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===o)),p=null===(t=m.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===c)),f=p.findIndex((e=>d.endsWith(e.props.href))),b=-1===f?0:f,E=0===b?d:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(d);return a.createElement(i.a,{initiallyActiveTab:b},a.createElement(i.a.TabList,{className:"page-tabs-list"},p.map((e=>a.createElement(i.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?E:E+e.props.href))},e.props.children)))),p.map(((e,t)=>a.createElement(i.a.TabPanel,{key:e.props.href},b===t?h.props.children:a.createElement("div",null)))))},d=e=>{let{children:t}=e;return a.createElement(i.a.TabList,null,t)};d.componentName=s;const u=e=>{let{href:t,slug:n,children:l}=e;return a.createElement(i.a.Tab,null,l)};u.componentName=c;const m=e=>{let{children:t}=e;return a.createElement(i.a.TabPanel,null,t)};m.componentName=o,r.TabList=d,r.Tab=u,r.TabPanel=m,t.Z=r},57674:function(e,t,n){var a=n(67294),l=n(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return a.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},a.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>a.createElement("li",{key:t},a.createElement("span",{className:"status-name"},t),a.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-notification-index-mdx-0fbdbe9fb7787b697f58.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-notification-index-mdx-0fbdbe9fb7787b697f58.js
new file mode 100644
index 00000000000..028531eb327
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-notification-index-mdx-0fbdbe9fb7787b697f58.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[7557,965],{83428:function(e,t,a){a.d(t,{S:function(){return c}});var n=a(80136),s=a(67294),l=a(7444),i=a(34300),r={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,l.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:t}=e;return s.createElement("span",{className:r.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:l,type:c="neutral",iconLeft:u}=e,m=(0,n._)(e,["children","className","dataTestId","type","iconLeft"]);return s.createElement("span",Object.assign({className:(0,i.c)(r.statusLabel,r[c],u&&r.statusLabelWithIcon,a),"data-testid":l},m),u&&s.createElement(o,{icon:u}),t)}},41542:function(e,t,a){a.r(t),a.d(t,{ToastExample:function(){return c}});var n=a(11151),s=a(67294),l=a(17882),i=a(12818),r=a(93204);const o=e=>{let{children:t,pageContext:a}=e;return s.createElement(r.default,{pageContext:a},t)},c=()=>{const[e,t]=s.useState(!1),[a,n]=s.useState(!1),r=s.useRef(null),o=s.useRef(null);return s.createElement(s.Fragment,null,s.createElement(l.B,{ref:r,onClick:()=>t(!0)},"Show toast"),s.createElement(l.B,{ref:o,onClick:()=>n(!0),style:{display:"flex",marginTop:"var(--spacing-s)"}},"Show automatically disappearing toast"),e&&s.createElement(i.N,{label:"New messages",position:"top-right",dismissible:!0,closeButtonLabelText:"Close toast",onClose:()=>(t(!1),void(r.current&&r.current.focus())),style:{zIndex:100}},"You have received new messages."),a&&s.createElement(i.N,{label:"New messages",position:"top-right",autoClose:!0,onClose:()=>(n(!1),void(o.current&&o.current.focus())),style:{zIndex:100}},"You have received new messages."))};function u(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",strong:"strong",h4:"h4",p:"p"},(0,n.ah)(),e.components),{PlaygroundPreview:a,InternalLink:l}=t;return l||m("InternalLink",!0),a||m("PlaygroundPreview",!0),s.createElement(s.Fragment,null,s.createElement(t.h2,{id:"usage",style:{position:"relative"}},"Usage",s.createElement(t.a,{href:"#usage","aria-label":"usage permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.h3,{id:"example",style:{position:"relative"}},"Example",s.createElement(t.a,{href:"#example","aria-label":"example permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(a,null,s.createElement(i.N,{label:"New messages"},"You have received new messages.")),"\n",s.createElement(t.h3,{id:"principles",style:{position:"relative"}},"Principles",s.createElement(t.a,{href:"#principles","aria-label":"principles permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.ul,null,"\n",s.createElement(t.li,null,"Notifications are designed to capture users' attention. ",s.createElement(t.strong,null,"Therefore, they should be used sparingly only for important information or updates.")),"\n",s.createElement(t.li,null,s.createElement(t.strong,null,"Notification title should include the most important information about the notification.")," Aim for a title that is short, concise and easy to understand. Avoid titles that span over multiple lines."),"\n",s.createElement(t.li,null,"HDS offers multiple options for notification screen locations. Choose locations that fit best for your service and stay consistent."),"\n",s.createElement(t.li,null,s.createElement(t.strong,null,"If you use automatically disappearing notifications, make sure the information is accessible elsewhere in case the user misses the notification.")),"\n"),"\n",s.createElement(t.h4,{id:"when-to-use-each-notification-type",style:{position:"relative"}},"When to use each notification type?",s.createElement(t.a,{href:"#when-to-use-each-notification-type","aria-label":"when to use each notification type permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.ul,null,"\n",s.createElement(t.li,null,s.createElement(t.strong,null,"Use inline notifications when information is related to the content or if you want to keep information visible at all times.")," Inline notifications are part of the content and should therefore be placed as close as possible to the related part of the content. Inline notifications should not be added to the page dynamically."),"\n",s.createElement(t.li,null,s.createElement(t.strong,null,"Use toast notifications to inform the user about a specific event or change in the system status.")," Toast notifications do not relate to any specific object on the page and are therefore placed on top of the content (usually top right or bottom center)."),"\n",s.createElement(t.li,null,s.createElement(t.strong,null,"Use invisible notifications to make system state changes more apparent for screen reader users.")," Some features (such as moving a product to the shopping cart) are apparent for regular users, but screen readers may need extra assist."),"\n"),"\n",s.createElement(t.h4,{id:"when-to-use-each-status-colour-info-success-alert-error",style:{position:"relative"}},"When to use each status colour (info, success, alert, error)?",s.createElement(t.a,{href:"#when-to-use-each-status-colour-info-success-alert-error","aria-label":"when to use each status colour info success alert error permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.ul,null,"\n",s.createElement(t.li,null,"You can find guidelines on when to use each status colour in the ",s.createElement(l,{href:"/foundation/design-tokens/colour#ui-colours"},"colour guidelines"),". Aim to use notification levels and colours consistently across your service."),"\n"),"\n",s.createElement(t.h3,{id:"variations",style:{position:"relative"}},"Variations",s.createElement(t.a,{href:"#variations","aria-label":"variations permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.h4,{id:"inline",style:{position:"relative"}},"Inline",s.createElement(t.a,{href:"#inline","aria-label":"inline permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.p,null,"Inline notifications are used as part of the content. They closely relate to the part of the content and work best when placed as close to the related content as possible. Inline notifications are often used to provide or emphasise key information related to the content of the page. It is recommended not to make them closable - unless their information is not important or can be accessed somewhere else. Inline notifications greatly emphasise the information so they should be used sparingly in order not to dilute their effect. A good rule of thumb is to limit the number of simultaneous inline notifications to one."),"\n",s.createElement(t.p,null,"Note! Inline notifications should not be added to the page dynamically. For this use case, use ",s.createElement(t.a,{href:"#toast"},"Toast notifications"),"."),"\n",s.createElement(a,null,s.createElement(i.N,{label:"New messages"},"You have received new messages."),s.createElement(i.N,{label:"Form done",type:"success",style:{marginTop:"var(--spacing-s)"}},s.createElement(t.p,null,"Form submit was successful!")),s.createElement(i.N,{label:"Slow loading",type:"alert",style:{marginTop:"var(--spacing-s)"}},s.createElement(t.p,null,"Loading is taking longer than expected.")),s.createElement(i.N,{label:"Missing information",type:"error",style:{marginTop:"var(--spacing-s)"}},s.createElement(t.p,null,"Form is missing critical information."))),"\n",s.createElement(t.h4,{id:"toast",style:{position:"relative"}},"Toast",s.createElement(t.a,{href:"#toast","aria-label":"toast permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.p,null,"Toasts notifications provide lightweight feedback for changes in system status such as successful saving or Internet disconnection. Toasts appear on top of the content (usually top right or bottom center). Be wary using automatically disappearing toasts for critical information such as errors. It is also a good practise to make notifications accessible elsewhere in case the user misses them before they disappear."),"\n","\n",s.createElement(a,null,s.createElement(c)),"\n",s.createElement(t.h4,{id:"notification-sizes",style:{position:"relative"}},"Notification sizes",s.createElement(t.a,{href:"#notification-sizes","aria-label":"notification sizes permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.p,null,"HDS Navigation component supports many commonly used features out of the box. The main navigation bar can be configured to include search, language selection and user profile actions. You may also easily customize the action row with your own actions."),"\n",s.createElement(a,null,s.createElement(i.N,{size:"large",label:"New messages"},s.createElement(t.p,null,"You have received new messages.")),s.createElement(i.N,{size:"default",label:"New messages",style:{marginTop:"var(--spacing-s)"}},s.createElement(t.p,null,"You have received new messages.")),s.createElement(i.N,{size:"small",label:"New messages",style:{marginTop:"var(--spacing-s)"}},s.createElement(t.p,null,"You have received new messages."))),"\n",s.createElement(t.h4,{id:"invisible",style:{position:"relative"}},"Invisible",s.createElement(t.a,{href:"#invisible","aria-label":"invisible permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.p,null,"Invisible notifications do not show up on screen and they are meant to aid screen reader users. Some updates to system status may be apparent to regular users through animations etc. However, screen readers can easily ignore this type of feedback. Invisible notifications are not visible to regular users but screen readers detect them. Use them to improve user experience for screen reader users."),"\n",s.createElement(a,null,s.createElement(i.N,{label:"New messages",invisible:!0},s.createElement(t.p,null,"You have received new messages. This notification is invisible."))))}function m(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){return void 0===e&&(e={}),s.createElement(o,e,s.createElement(u,e))}},93204:function(e,t,a){a.r(t);var n=a(11151),s=a(67294),l=a(83428),i=a(57674),r=a(89482),o=(a(18607),a(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,n.ah)(),e.components);return o.Z||u("PageTabs",!1),o.Z.Tab||u("PageTabs.Tab",!0),o.Z.TabList||u("PageTabs.TabList",!0),o.Z.TabPanel||u("PageTabs.TabPanel",!0),s.createElement(s.Fragment,null,s.createElement(t.h1,{id:"notification",style:{position:"relative"}},"Notification",s.createElement(t.a,{href:"#notification","aria-label":"notification permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement("div",{class:"status-label-description"},s.createElement(l.S,{type:"info"},"Stable"),s.createElement(l.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),s.createElement(i.Z)),"\n",s.createElement(r.Z,null,"Notifications are used to present timely information to the user. HDS offers two types of notifications for different use cases."),"\n",s.createElement(o.Z,{pageContext:e.pageContext},s.createElement(o.Z.TabList,null,s.createElement(o.Z.Tab,{href:"/"},"Usage"),s.createElement(o.Z.Tab,{href:"/code"},"Code"),s.createElement(o.Z.Tab,{href:"/accessibility"},"Accessibility")),s.createElement(o.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,n.ah)(),e.components);return t?s.createElement(t,e,s.createElement(c,e)):c(e)}},89482:function(e,t,a){var n=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:s={},children:l}=e;return n.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...s}},l)}},26127:function(e,t,a){var n=a(67294),s=a(14160),l=a(94671);const i="PageTabList",r="PageTabPanel",o="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const u=a.frontmatter.slug,m=Array.isArray(c)?c:[c],d=m.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===i)),h=m.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===r)),p=null===(t=d.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===o)),f=p.findIndex((e=>u.endsWith(e.props.href))),b=-1===f?0:f,g=0===b?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return n.createElement(l.a,{initiallyActiveTab:b},n.createElement(l.a.TabList,{className:"page-tabs-list"},p.map((e=>n.createElement(l.a.Tab,{key:e.props.href,onClick:()=>(0,s.navigate)(""+("/"===e.props.href?g:g+e.props.href))},e.props.children)))),p.map(((e,t)=>n.createElement(l.a.TabPanel,{key:e.props.href},b===t?h.props.children:n.createElement("div",null)))))},u=e=>{let{children:t}=e;return n.createElement(l.a.TabList,null,t)};u.componentName=i;const m=e=>{let{href:t,slug:a,children:s}=e;return n.createElement(l.a.Tab,null,s)};m.componentName=o;const d=e=>{let{children:t}=e;return n.createElement(l.a.TabPanel,null,t)};d.componentName=r,c.TabList=u,c.Tab=m,c.TabPanel=d,t.Z=c},57674:function(e,t,a){var n=a(67294),s=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return n.createElement(s.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},n.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>n.createElement("li",{key:t},n.createElement("span",{className:"status-name"},t),n.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-notification-tabs-mdx-2bf54cf9a0316852189f.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-notification-tabs-mdx-2bf54cf9a0316852189f.js
new file mode 100644
index 00000000000..a56bb0e367d
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-notification-tabs-mdx-2bf54cf9a0316852189f.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[965],{83428:function(e,t,a){a.d(t,{S:function(){return c}});var s=a(80136),l=a(67294),n=a(7444),r=a(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const i=e=>{let{icon:t}=e;return l.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:n,type:c="neutral",iconLeft:u}=e,b=(0,s._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(o.statusLabel,o[c],u&&o.statusLabelWithIcon,a),"data-testid":n},b),u&&l.createElement(i,{icon:u}),t)}},93204:function(e,t,a){a.r(t);var s=a(11151),l=a(67294),n=a(83428),r=a(57674),o=a(89482),i=(a(18607),a(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,s.ah)(),e.components);return i.Z||u("PageTabs",!1),i.Z.Tab||u("PageTabs.Tab",!0),i.Z.TabList||u("PageTabs.TabList",!0),i.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"notification",style:{position:"relative"}},"Notification",l.createElement(t.a,{href:"#notification","aria-label":"notification permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(n.S,{type:"info"},"Stable"),l.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(o.Z,null,"Notifications are used to present timely information to the user. HDS offers two types of notifications for different use cases."),"\n",l.createElement(i.Z,{pageContext:e.pageContext},l.createElement(i.Z.TabList,null,l.createElement(i.Z.Tab,{href:"/"},"Usage"),l.createElement(i.Z.Tab,{href:"/code"},"Code"),l.createElement(i.Z.Tab,{href:"/accessibility"},"Accessibility")),l.createElement(i.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,s.ah)(),e.components);return t?l.createElement(t,e,l.createElement(c,e)):c(e)}},89482:function(e,t,a){var s=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:l={},children:n}=e;return s.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...l}},n)}},26127:function(e,t,a){var s=a(67294),l=a(14160),n=a(94671);const r="PageTabList",o="PageTabPanel",i="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const u=a.frontmatter.slug,b=Array.isArray(c)?c:[c],d=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===r)),m=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===o)),h=null===(t=d.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===i)),p=h.findIndex((e=>u.endsWith(e.props.href))),f=-1===p?0:p,_=0===f?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return s.createElement(n.a,{initiallyActiveTab:f},s.createElement(n.a.TabList,{className:"page-tabs-list"},h.map((e=>s.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?_:_+e.props.href))},e.props.children)))),h.map(((e,t)=>s.createElement(n.a.TabPanel,{key:e.props.href},f===t?m.props.children:s.createElement("div",null)))))},u=e=>{let{children:t}=e;return s.createElement(n.a.TabList,null,t)};u.componentName=r;const b=e=>{let{href:t,slug:a,children:l}=e;return s.createElement(n.a.Tab,null,l)};b.componentName=i;const d=e=>{let{children:t}=e;return s.createElement(n.a.TabPanel,null,t)};d.componentName=o,c.TabList=u,c.Tab=b,c.TabPanel=d,t.Z=c},57674:function(e,t,a){var s=a(67294),l=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return s.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},s.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>s.createElement("li",{key:t},s.createElement("span",{className:"status-name"},t),s.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-number-input-accessibility-mdx-d24e3b3737341ad00370.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-number-input-accessibility-mdx-d24e3b3737341ad00370.js
new file mode 100644
index 00000000000..6920704314f
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-number-input-accessibility-mdx-d24e3b3737341ad00370.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[4428,198],{83428:function(e,t,a){a.d(t,{S:function(){return o}});var l=a(80136),s=a(67294),n=a(7444),r=a(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const c=e=>{let{icon:t}=e;return s.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},t)},o=e=>{var{children:t,className:a,dataTestId:n,type:o="neutral",iconLeft:u}=e,d=(0,l._)(e,["children","className","dataTestId","type","iconLeft"]);return s.createElement("span",Object.assign({className:(0,r.c)(i.statusLabel,i[o],u&&i.statusLabelWithIcon,a),"data-testid":n},d),u&&s.createElement(c,{icon:u}),t)}},4965:function(e,t,a){a.r(t);var l=a(11151),s=a(67294),n=a(11757);const r=e=>{let{children:t,pageContext:a}=e;return s.createElement(n.default,{pageContext:a},t)};function i(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",code:"code"},(0,l.ah)(),e.components);return s.createElement(s.Fragment,null,s.createElement(t.h2,{id:"accessibility",style:{position:"relative"}},"Accessibility",s.createElement(t.a,{href:"#accessibility","aria-label":"accessibility permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.h3,{id:"pay-attention-to",style:{position:"relative"}},"Pay attention to",s.createElement(t.a,{href:"#pay-attention-to","aria-label":"pay attention to permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.ul,null,"\n",s.createElement(t.li,null,"HDS number input allows the user to input the date manually without using stepper actions. Whenever you require the user to input numbers, you should also allow manual input."),"\n",s.createElement(t.li,null,"If steppers are used, provide descriptive aria labels for both increase and decrease actions by using ",s.createElement(t.code,null,"minusStepButtonAriaLabel")," and ",s.createElement(t.code,null,"plusStepButtonAriaLabel")," props."),"\n",s.createElement(t.li,null,"If the number needs to follow a specific format, remember to specify it in the assistive text."),"\n",s.createElement(t.li,null,"Placeholders in number inputs should be avoided. Different screen readers announce placeholders in different ways. It can be very difficult for a screen reader user to differentiate the placeholder from the actual value."),"\n"))}t.default=function(e){return void 0===e&&(e={}),s.createElement(r,e,s.createElement(i,e))}},11757:function(e,t,a){a.r(t);var l=a(11151),s=a(67294),n=a(83428),r=a(57674),i=a(89482),c=(a(18607),a(26127));function o(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,l.ah)(),e.components);return c.Z||u("PageTabs",!1),c.Z.Tab||u("PageTabs.Tab",!0),c.Z.TabList||u("PageTabs.TabList",!0),c.Z.TabPanel||u("PageTabs.TabPanel",!0),s.createElement(s.Fragment,null,s.createElement(t.h1,{id:"numberinput",style:{position:"relative"}},"NumberInput",s.createElement(t.a,{href:"#numberinput","aria-label":"numberinput permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement("div",{class:"status-label-description"},s.createElement(n.S,{type:"info"},"Stable"),s.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),s.createElement(r.Z)),"\n",s.createElement(i.Z,null,"  A number input allows the user to enter numeric values. It also features optional steppers for increasing or decreasing the value by a set amount."),"\n",s.createElement(c.Z,{pageContext:e.pageContext},s.createElement(c.Z.TabList,null,s.createElement(c.Z.Tab,{href:"/"},"Usage"),s.createElement(c.Z.Tab,{href:"/code"},"Code"),s.createElement(c.Z.Tab,{href:"/accessibility"},"Accessibility")),s.createElement(c.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,l.ah)(),e.components);return t?s.createElement(t,e,s.createElement(o,e)):o(e)}},89482:function(e,t,a){var l=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:s={},children:n}=e;return l.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...s}},n)}},26127:function(e,t,a){var l=a(67294),s=a(14160),n=a(94671);const r="PageTabList",i="PageTabPanel",c="PageTab",o=e=>{var t;let{pageContext:a,children:o}=e;const u=a.frontmatter.slug,d=Array.isArray(o)?o:[o],b=d.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===r)),m=d.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===i)),h=null===(t=b.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===c)),p=h.findIndex((e=>u.endsWith(e.props.href))),f=-1===p?0:p,_=0===f?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return l.createElement(n.a,{initiallyActiveTab:f},l.createElement(n.a.TabList,{className:"page-tabs-list"},h.map((e=>l.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,s.navigate)(""+("/"===e.props.href?_:_+e.props.href))},e.props.children)))),h.map(((e,t)=>l.createElement(n.a.TabPanel,{key:e.props.href},f===t?m.props.children:l.createElement("div",null)))))},u=e=>{let{children:t}=e;return l.createElement(n.a.TabList,null,t)};u.componentName=r;const d=e=>{let{href:t,slug:a,children:s}=e;return l.createElement(n.a.Tab,null,s)};d.componentName=c;const b=e=>{let{children:t}=e;return l.createElement(n.a.TabPanel,null,t)};b.componentName=i,o.TabList=u,o.Tab=d,o.TabPanel=b,t.Z=o},57674:function(e,t,a){var l=a(67294),s=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return l.createElement(s.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},l.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>l.createElement("li",{key:t},l.createElement("span",{className:"status-name"},t),l.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-number-input-code-mdx-d1f7ea026176c4955c5a.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-number-input-code-mdx-d1f7ea026176c4955c5a.js
new file mode 100644
index 00000000000..1019a5b82da
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-number-input-code-mdx-d1f7ea026176c4955c5a.js
@@ -0,0 +1 @@
+(self.webpackChunksite=self.webpackChunksite||[]).push([[4910,198],{91309:function(e,t,n){var a="[object Null]",l="[object Undefined]",r="object"==typeof n.g&&n.g&&n.g.Object===Object&&n.g,i="object"==typeof self&&self&&self.Object===Object&&self,o=r||i||Function("return this")(),s=Object.prototype,u=s.hasOwnProperty,c=s.toString,p=o.Symbol,d=p?p.toStringTag:void 0;function m(e){return null==e?void 0===e?l:a:d&&d in Object(e)?function(e){var t=u.call(e,d),n=e[d];try{e[d]=void 0;var a=!0}catch(r){}var l=c.call(e);a&&(t?e[d]=n:delete e[d]);return l}(e):function(e){return c.call(e)}(e)}e.exports=function(e){if(!function(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}(e))return!1;var t=m(e);return"[object Function]"==t||"[object GeneratorFunction]"==t||"[object AsyncFunction]"==t||"[object Proxy]"==t}},30695:function(e,t,n){"use strict";n.d(t,{I:function(){return r}});var a=n(67294),l=n(32719);const r=e=>{let{ariaLabel:t="minus",ariaLabelledby:n,ariaHidden:r=!0,className:i="",color:o,size:s="s",style:u={}}=e;return a.createElement("svg",{className:[l.s.icon,l.s[s],i].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":n,"aria-hidden":r,color:o,style:u},a.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M6 11H18V13H6V11Z",fill:"currentColor"}))}},63483:function(e,t,n){"use strict";n.d(t,{I:function(){return r}});var a=n(67294),l=n(32719);const r=e=>{let{ariaLabel:t="plus",ariaLabelledby:n,ariaHidden:r=!0,className:i="",color:o,size:s="s",style:u={}}=e;return a.createElement("svg",{className:[l.s.icon,l.s[s],i].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":n,"aria-hidden":r,color:o,style:u},a.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M13 6V11H18V13H13V18H11V13H6V11H11V6H13Z",fill:"currentColor"}))}},93667:function(e,t,n){"use strict";n.d(t,{I:function(){return s},t:function(){return o}});var a=n(67294),l=n(7444),r=n(34300),i=n(41125),o={root:"TextInput-module_root__2CMNr text-input_hds-text-input__2LODq",inputWrapper:"TextInput-module_inputWrapper__3Rvel text-input_hds-text-input__input-wrapper__1OqYG",input:"TextInput-module_input__1BlHi text-input_hds-text-input__input__GJm5C",hasButton:"TextInput-module_hasButton__2KCM1",errorText:"TextInput-module_errorText__3pizm text-input_hds-text-input__error-text__1GLYk",helperText:"TextInput-module_helperText__2dLR6 text-input_hds-text-input__helper-text__3V2KM",invalidText:"TextInput-module_invalidText__1w4sm text-input_hds-text-input__helper-text__3V2KM",successText:"TextInput-module_successText__2NMCP text-input_hds-text-input__success-text__3EOiy",infoText:"TextInput-module_infoText__zHOGs text-input_hds-text-input__info-text__3bqzy",invalid:"TextInput-module_invalid__2iYo2 text-input_hds-text-input--invalid__1UfKC",success:"TextInput-module_success__1kDOm text-input_hds-text-input--success__3dm2J",readOnly:"TextInput-module_readOnly__j615N undefined",buttonWrapper:"TextInput-module_buttonWrapper___filA text-input_hds-text-input__buttons__1RMzT",button:"TextInput-module_button__1ySMX text-input_hds-text-input__button__1Fh0I"};(0,l.s)("@keyframes text-input_fadeIn__2IDZ8{0%{opacity:0}to{opacity:1}}.text-input_hds-text-input__2LODq{--border-width:2px;--outline-width:3px;--input-height:56px;--textarea-height:149px;--icon-size:var(--spacing-m);--helper-color-default:var(--color-black-60);--helper-color-invalid:var(--color-error);--helper-color-success:var(--color-success);--helper-color-info:var(--color-black-90);--helper-color-info-icon:var(--color-coat-of-arms);--icon-color-invalid:var(--color-error);--input-background-default:var(--color-white);--input-background-disabled:var(--color-black-10);--input-border-color-default:var(--color-black-50);--input-border-color-hover:var(--color-black-90);--input-border-color-focus:var(--color-black-90);--input-border-color-invalid:var(--color-error);--input-border-color-disabled:var(--color-black-10);--input-border-color-success:var(--color-success);--input-color-default:var(--color-black-90);--input-color-disabled:var(--color-black-40);--label-color-default:var(--color-black-90);--label-color-invalid:var(--color-black-90);--placeholder-color:var(--color-black-60)}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C{-webkit-appearance:none;background-color:var(--input-background-default);border:var(--border-width) solid var(--input-border-color-default);border-radius:0;box-sizing:border-box;color:var(--input-color-default);font-family:inherit;font-size:1.125em;height:var(--input-height);line-height:normal;margin:0;padding:0 var(--spacing-s);width:100%;will-change:transform,box-shadow}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C:hover{border-color:var(--input-border-color-hover);transition:border-color 85ms ease-out}.text-input_hds-text-input__input-wrapper__1OqYG:focus-within .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-focus);outline:none}.text-input_hds-text-input__2LODq.text-input_hds-text-input--invalid__1UfKC .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-invalid)}.text-input_hds-text-input__2LODq.text-input_hds-text-input--success__3dm2J .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-success)}.text-input_hds-text-input__input-wrapper__1OqYG:focus-within .text-input_hds-text-input__input__GJm5C:not([readonly]){box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);transform:translateZ(0);transition:85ms ease-out;transition-property:box-shadow,transform}.text-input_hds-text-input__label__15F2V{color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.text-input_hds-text-input--invalid__1UfKC .text-input_hds-text-input__label__15F2V{color:var(--label-color-invalid);transition:color 85ms linear}.text-input_hds-text-input__required__z3Hm0{color:var(--color-black-90);display:inline-block;font-size:var(--fontsize-body-xl);line-height:1;margin-left:var(--spacing-2-xs);transform:translateY(var(--spacing-3-xs))}.text-input_hds-text-input__input-wrapper__1OqYG{display:flex;position:relative}.text-input_hds-text-input__2LODq textarea.text-input_hds-text-input__input__GJm5C{font-family:inherit;height:var(--textarea-height);margin:0;min-height:var(--input-height);overflow:auto;padding:var(--spacing-s);resize:vertical}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C::-moz-placeholder{color:var(--placeholder-color);opacity:1}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C::placeholder{color:var(--placeholder-color);opacity:1}.text-input_hds-text-input__helper-text__3V2KM{color:var(--helper-color-default)}.text-input_hds-text-input__error-text__1GLYk,.text-input_hds-text-input__helper-text__3V2KM{display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);white-space:pre-line}.text-input_hds-text-input__error-text__1GLYk{color:var(--helper-color-invalid);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.text-input_hds-text-input__error-text__1GLYk:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__error-text__1GLYk:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--icon-color-invalid);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__success-text__3EOiy{color:var(--helper-color-success);display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative;white-space:pre-wrap}.text-input_hds-text-input__success-text__3EOiy:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__success-text__3EOiy:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--helper-color-success);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__info-text__3bqzy{color:var(--helper-color-info);display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.text-input_hds-text-input__info-text__3bqzy:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__info-text__3bqzy:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--helper-color-info-icon);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C[disabled]{background-color:var(--input-background-disabled);border-color:var(--input-border-color-disabled);color:var(--input-color-disabled);cursor:not-allowed}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C[readonly]{background-color:transparent;border:0;color:var(--input-color-default);padding:0;-webkit-text-fill-color:var(--input-color-default)}.text-input_hds-text-input__buttons__1RMzT{align-items:center;bottom:0;display:flex;font-size:1rem;justify-content:center;margin-right:calc(var(--spacing-s) - var(--spacing-xs) / 2);position:absolute;right:0;top:0}.text-input_hds-text-input__button__1Fh0I{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;display:flex;font:inherit;outline:none;padding:var(--spacing-xs) calc(var(--spacing-xs) / 2)}.text-input_hds-text-input__button__1Fh0I:focus{outline:var(--outline-width) solid var(--color-focus-outline)}.TextInput-module_root__2CMNr{position:relative}.TextInput-module_input__1BlHi.TextInput-module_hasButton__2KCM1{padding-right:calc(2 * var(--spacing-s) + 1.5rem)}.TextInput-module_button__1ySMX:disabled{cursor:not-allowed}.TextInput-module_button__1ySMX:focus{outline:var(--outline-width) solid var(--color-focus-outline)}");const s=e=>{let{children:t,className:n="",errorText:l,helperText:s,hideLabel:u=!1,id:c,invalid:p=!1,isAriaLabelledBy:d=!1,label:m,labelId:h,onBlur:b,required:_=!1,style:x,successText:f,infoText:v,tooltipLabel:g,tooltipText:E,tooltipButtonLabel:y}=e;return a.createElement("div",{onBlur:b,className:(0,r.c)(o.root,p&&o.invalid,f&&o.success,n),style:x},m&&a.createElement(i.F,{id:h,inputId:c,isAriaLabelledBy:d,hidden:u,label:m,required:_,tooltipLabel:g,tooltipButtonLabel:y,tooltipText:E}),a.createElement("div",{className:(0,r.c)(o.inputWrapper)},t),l&&a.createElement("div",{className:o.errorText,id:c+"-error"},l),f&&a.createElement("div",{className:o.successText,id:c+"-success"},f),v&&a.createElement("div",{className:o.infoText,id:c+"-info"},v),s&&a.createElement("div",{className:o.helperText,id:c+"-helper"},s))}},81916:function(e,t,n){"use strict";n.d(t,{N:function(){return j}});var a=n(80136),l=n(67294),r=n(39440),i=n(26917),o=n(7444),s=n(93667),u=n(34300),c=n(37776),p=n(94330),d=n(30695),m=n(63483),h="Expected a function",b=NaN,_="[object Symbol]",x=/^\s+|\s+$/g,f=/^[-+]0x[0-9a-f]+$/i,v=/^0b[01]+$/i,g=/^0o[0-7]+$/i,E=parseInt,y="object"==typeof i.a&&i.a&&i.a.Object===Object&&i.a,w="object"==typeof self&&self&&self.Object===Object&&self,T=y||w||Function("return this")(),I=Object.prototype.toString,k=Math.max,N=Math.min,L=function(){return T.Date.now()};function C(e){var t=typeof e;return!!e&&("object"==t||"function"==t)}function z(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return!!e&&"object"==typeof e}(e)&&I.call(e)==_}(e))return b;if(C(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=C(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(x,"");var n=v.test(e);return n||g.test(e)?E(e.slice(2),n?2:8):f.test(e)?b:+e}var S=function(e,t,n){var a=!0,l=!0;if("function"!=typeof e)throw new TypeError(h);return C(n)&&(a="leading"in n?!!n.leading:a,l="trailing"in n?!!n.trailing:l),function(e,t,n){var a,l,r,i,o,s,u=0,c=!1,p=!1,d=!0;if("function"!=typeof e)throw new TypeError(h);function m(t){var n=a,r=l;return a=l=void 0,u=t,i=e.apply(r,n)}function b(e){var n=e-s;return void 0===s||n>=t||n<0||p&&e-u>=r}function _(){var e=L();if(b(e))return x(e);o=setTimeout(_,function(e){var n=t-(e-s);return p?N(n,r-(e-u)):n}(e))}function x(e){return o=void 0,d&&a?m(e):(a=l=void 0,i)}function f(){var e=L(),n=b(e);if(a=arguments,l=this,s=e,n){if(void 0===o)return function(e){return u=e,o=setTimeout(_,t),c?m(e):i}(s);if(p)return o=setTimeout(_,t),m(s)}return void 0===o&&(o=setTimeout(_,t)),i}return t=z(t)||0,C(n)&&(c=!!n.leading,r=(p="maxWait"in n)?k(z(n.maxWait)||0,t):r,d="trailing"in n?!!n.trailing:d),f.cancel=function(){void 0!==o&&clearTimeout(o),u=0,a=s=l=o=void 0},f.flush=function(){return void 0===o?i:x(L())},f}(e,t,{leading:a,maxWait:t,trailing:l})},O="NumberInput-module_button__2Shu7";(0,o.s)(".NumberInput-module_numberInputContainer__hKNPp{width:100%}.NumberInput-module_numberInputContainer__hKNPp input::-webkit-inner-spin-button,.NumberInput-module_numberInputContainer__hKNPp input::-webkit-outer-spin-button{appearance:none!important;height:auto;margin:0!important}.NumberInput-module_numberInputContainer__hKNPp input[type=number]{appearance:textfield!important}.NumberInput-module_numberInputWithSteps__3q7N7{padding-left:68px!important;padding-right:68px!important;text-align:center}.NumberInput-module_minusButtonWrapper__3PHN9{border-right:1px solid #ccc}.NumberInput-module_minusButtonWrapper__3PHN9,.NumberInput-module_minusButtonWrapperWithoutBorder__2g42V{align-items:center;bottom:0;display:flex;font-size:1rem;justify-content:center;margin:2px;position:absolute;top:0;width:52px;z-index:1;left:0}.NumberInput-module_plusButtonWrapper__Wwq5t{border-left:1px solid #ccc}.NumberInput-module_plusButtonWrapper__Wwq5t,.NumberInput-module_plusButtonWrapperWithoutBorder__2xb6t{align-items:center;bottom:0;display:flex;font-size:1rem;justify-content:center;margin:2px;position:absolute;top:0;width:52px;z-index:1;right:0}.NumberInput-module_button__2Shu7{align-items:center;appearance:none;background:transparent;border:0;cursor:pointer;display:flex;font-size:1rem;height:100%;justify-content:center;overflow:hidden;padding:0;width:100%}.NumberInput-module_button__2Shu7:disabled{cursor:not-allowed}.NumberInput-module_button__2Shu7:focus{outline:3px solid var(--color-focus-outline);outline-offset:-5px}");const j=l.forwardRef(((e,t)=>{var{className:n="",disabled:i=!1,defaultValue:o,errorText:h,helperText:b,hideLabel:_,invalid:x,id:f,label:v,max:g,min:E,minusStepButtonAriaLabel:y,onChange:w=(()=>null),plusStepButtonAriaLabel:T,required:I,step:k,style:N,successText:L,infoText:C,tooltipLabel:z,tooltipText:j,tooltipButtonLabel:B,type:H="number",unit:M}=e,A=(0,a._)(e,["className","disabled","defaultValue","errorText","helperText","hideLabel","invalid","id","label","max","min","minusStepButtonAriaLabel","onChange","plusStepButtonAriaLabel","required","step","style","successText","infoText","tooltipLabel","tooltipText","tooltipButtonLabel","type","unit"]);const W={className:n,errorText:h,helperText:b,hideLabel:_,id:f,invalid:x,label:(G=v,Z=M,!G&&Z?"("+Z+")":G&&Z?G+" ("+Z+")":G),required:I,style:N,successText:L,infoText:C,tooltipLabel:z,tooltipText:j,tooltipButtonLabel:B,labelId:k?f+"-label":void 0},V=(0,l.useRef)(null),[P,q]=(0,l.useState)(null),D=()=>{q(String(V.current.value))};var G,Z;!function(e){let t=!1;const n=S((()=>{t=!1}),arguments.length>1&&void 0!==arguments[1]?arguments[1]:200);(0,l.useEffect)((()=>{const a=e=>{t&&e.preventDefault(),t=!0,n()};return e.current&&e.current.addEventListener("wheel",a,{passive:!1}),()=>{e.current&&e.current.removeEventListener("wheel",a)}}),[e])}(V),(0,l.useEffect)((()=>{t&&(0,p.m)(t,V)}),[V,t]);const Y=()=>{Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value").set.call(V.current,V.current.value);const e=new Event("input",{bubbles:!0});V.current.dispatchEvent(e)},J=k?e=>{null!==P&&q(null),w(e)}:w,K=(0,c.c)(f,b,h,L,C);return l.createElement(s.I,Object.assign({},W),l.createElement("div",Object.assign({className:"NumberInput-module_numberInputContainer__hKNPp"},k&&{role:"group","aria-labelledby":W.labelId}),l.createElement("input",Object.assign({className:(0,u.c)(s.t.input,k?"NumberInput-module_numberInputWithSteps__3q7N7":""),defaultValue:o,disabled:i,id:f,max:g,min:E,step:k,onChange:J,ref:V,required:I,type:H,"aria-describedby":K.length>0?K:null},A)),k&&l.createElement(l.Fragment,null,l.createElement("div",{className:i?"NumberInput-module_minusButtonWrapperWithoutBorder__2g42V":"NumberInput-module_minusButtonWrapper__3PHN9"},l.createElement("button",{className:O,disabled:i,type:"button",onClick:e=>{e.preventDefault(),V.current.stepDown(),Y(),D()},"aria-label":y||"Decrease by one"},l.createElement(d.I,{"aria-hidden":"true"}))),l.createElement("div",{className:i?"NumberInput-module_plusButtonWrapperWithoutBorder__2xb6t":"NumberInput-module_plusButtonWrapper__Wwq5t"},l.createElement("button",{className:O,disabled:i,type:"button",onClick:e=>{e.preventDefault(),V.current.stepUp(),Y(),D()},"aria-label":T||"Increase by one"},l.createElement(m.I,{"aria-hidden":"true"}))),null!==P&&l.createElement(r.T,null,l.createElement("span",{"aria-live":"assertive"},P)))))}))},83428:function(e,t,n){"use strict";n.d(t,{S:function(){return u}});var a=n(80136),l=n(67294),r=n(7444),i=n(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,r.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const s=e=>{let{icon:t}=e;return l.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},t)},u=e=>{var{children:t,className:n,dataTestId:r,type:u="neutral",iconLeft:c}=e,p=(0,a._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,i.c)(o.statusLabel,o[u],c&&o.statusLabelWithIcon,n),"data-testid":r},p),c&&l.createElement(s,{icon:c}),t)}},37776:function(e,t,n){"use strict";n.d(t,{c:function(){return a}});var a=(e,t,n,a,l)=>[t&&e+"-helper",n&&e+"-error",a&&e+"-success",l&&e+"-info"].filter((e=>e)).join(" ")},94330:function(e,t,n){"use strict";n.d(t,{m:function(){return r}});var a=n(91309),l=n.n(a),r=(e,t)=>{l()(e)?e(t.current):e.current=t.current}},48564:function(e,t,n){"use strict";n.r(t);var a=n(11151),l=n(67294),r=n(81916),i=n(11757);const o=e=>{let{children:t,pageContext:n}=e;return l.createElement(i.default,{pageContext:n},t)};function s(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",h4:"h4",pre:"pre",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",strong:"strong",p:"p"},(0,a.ah)(),e.components),{Playground:n,IconCheckCircleFill:i,Link:o,ExternalLink:s,InternalLink:c}=t;return s||u("ExternalLink",!0),i||u("IconCheckCircleFill",!0),c||u("InternalLink",!0),o||u("Link",!0),n||u("Playground",!0),l.createElement(l.Fragment,null,l.createElement(t.h2,{id:"code",style:{position:"relative"}},"Code",l.createElement(t.a,{href:"#code","aria-label":"code permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h3,{id:"code-examples",style:{position:"relative"}},"Code examples",l.createElement(t.a,{href:"#code-examples","aria-label":"code examples permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h4,{id:"default",style:{position:"relative"}},"Default",l.createElement(t.a,{href:"#default","aria-label":"default permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n,{scope:{NumberInput:r.N}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},'import { NumberInput } from \'hds-react\';\n\n() => (<>\n  <NumberInput\n    id="default"\n    helperText="Assistive text"\n    label="Total compensation"\n    unit="€"\n    defaultValue={1000}\n    style={{ maxWidth: \'320px\' }}\n  />\n\n  <NumberInput\n    disabled\n    id="disabled"\n    helperText="Assistive text"\n    label="Total compensation"\n    unit="€"\n    defaultValue={1000}\n    style={{ maxWidth: \'320px\', marginTop: \'var(--spacing-s)\' }}\n  />\n</>)\n')),l.createElement(t.pre,null,l.createElement(t.code,{className:"language-html"},'<div style="max-width:320px;">\n  <div class="hds-text-input">\n    <label for="core-default" class="hds-text-input__label"> Total compensation (€) </label>\n    <div class="hds-text-input__input-wrapper">\n      <input id="core-default" value="1000" class="hds-text-input__input" type="number" placeholder="Placeholder" />\n    </div>\n    <span class="hds-text-input__helper-text">Assistive text</span>\n  </div>\n\n  <div class="hds-text-input" style="margin-top:var(--spacing-s);">\n    <label for="core-disabled" class="hds-text-input__label"> Total compensation (€) </label>\n    <div class="hds-text-input__input-wrapper">\n      <input\n        id="core-disabled"\n        value="1000"\n        class="hds-text-input__input"\n        type="number"\n        placeholder="Placeholder"\n        disabled\n      />\n    </div>\n    <span class="hds-text-input__helper-text">Assistive text</span>\n  </div>\n</div>\n'))),"\n",l.createElement(t.h4,{id:"with-steppers",style:{position:"relative"}},"With steppers",l.createElement(t.a,{href:"#with-steppers","aria-label":"with steppers permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n,{scope:{NumberInput:r.N}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},'import { NumberInput } from \'hds-react\';\n\n() => (<NumberInput\n  id="stepper"\n  helperText="Assistive text"\n  label="Number of attendees"\n  minusStepButtonAriaLabel="Decrease by one"\n  plusStepButtonAriaLabel="Increase by one"\n  step={1}\n  defaultValue={5}\n  style={{ maxWidth: \'320px\' }}\n/>)\n')),l.createElement(t.pre,null,l.createElement(t.code,{className:"language-html"},'<div class="hds-text-input" style="max-width:320px;">\n  <label for="core-stepper" class="hds-text-input__label"> Number of attendees </label>\n  <div class="hds-text-input__input-wrapper">\n    <input id="core-stepper" value="5" class="hds-text-input__input" type="number" step="1" placeholder="Placeholder" />\n  </div>\n  <span class="hds-text-input__helper-text">Assistive text</span>\n</div>\n'))),"\n",l.createElement(t.h4,{id:"with-min-and-max-values",style:{position:"relative"}},"With min and max values",l.createElement(t.a,{href:"#with-min-and-max-values","aria-label":"with min and max values permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n,{scope:{NumberInput:r.N}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},'import { NumberInput } from \'hds-react\';\n\n() => (<NumberInput\n  id="stepper-minmax"\n  helperText="At least 3 attendees are required"\n  label="Number of attendees"\n  min={3}\n  max={99}\n  minusStepButtonAriaLabel="Decrease by one"\n  plusStepButtonAriaLabel="Increase by one"\n  step={1}\n  defaultValue={3}\n  style={{ maxWidth: \'320px\' }}\n/>)\n')),l.createElement(t.pre,null,l.createElement(t.code,{className:"language-html"},'<div class="hds-text-input" style="max-width:320px;">\n  <label for="core-stepper-minmax" class="hds-text-input__label"> Number of attendees </label>\n  <div class="hds-text-input__input-wrapper">\n    <input\n      id="core-stepper-minmax"\n      value="3"\n      class="hds-text-input__input"\n      type="number"\n      step="1"\n      min="3"\n      max="99"\n      placeholder="Placeholder"\n      required\n    />\n  </div>\n  <span class="hds-text-input__helper-text">At least 3 attendees are required</span>\n</div>\n'))),"\n",l.createElement(t.h3,{id:"packages",style:{position:"relative"}},"Packages",l.createElement(t.a,{href:"#packages","aria-label":"packages permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.table,null,l.createElement(t.thead,null,l.createElement(t.tr,null,l.createElement(t.th,null,"Package"),l.createElement(t.th,null,"Included"),l.createElement(t.th,null,"Storybook link"),l.createElement(t.th,null,"Source link"))),l.createElement(t.tbody,null,l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.strong,null,"HDS React")),l.createElement(t.td,null,l.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},l.createElement(i)," Yes ")),l.createElement(t.td,null,l.createElement(o,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-numberinput--default"},"View in Storybook")),l.createElement(t.td,null,l.createElement(s,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/react/src/components/numberInput"},"View source"))),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.strong,null,"HDS Core")),l.createElement(t.td,null,l.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},l.createElement(i)," Yes ")),l.createElement(t.td,null,l.createElement(o,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-numberinput--default"},"View in Storybook")),l.createElement(t.td,null,l.createElement(s,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/core/src/components/number-input"},"View source"))))),"\n",l.createElement(t.h3,{id:"properties",style:{position:"relative"}},"Properties",l.createElement(t.a,{href:"#properties","aria-label":"properties permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"Note! You can find the full list of properties in the ",l.createElement(o,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-numberinput--default"},"React Storybook.")),"\n",l.createElement(t.p,null,"Also, note that this component is an input. All features supported by the HDS TextInput are also supported by this component. See ",l.createElement(c,{href:"/components/text-input"},"TextInput documentation page")," for more information."),"\n",l.createElement(t.table,null,l.createElement(t.thead,null,l.createElement(t.tr,null,l.createElement(t.th,null,"Property"),l.createElement(t.th,null,"Description"),l.createElement(t.th,null,"Values"),l.createElement(t.th,null,"Default value"))),l.createElement(t.tbody,null,l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"id")),l.createElement(t.td,null,"The id for the input."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"label")),l.createElement(t.td,null,"The label for the input."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"value")),l.createElement(t.td,null,"The value of the input element, required for a controlled component."),l.createElement(t.td,null,l.createElement(t.code,null,"number")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"defaultValue")),l.createElement(t.td,null,"The default input element value. Use when the component is not controlled."),l.createElement(t.td,null,l.createElement(t.code,null,"number")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"minusStepButtonAriaLabel")),l.createElement(t.td,null,"The aria label for minus step button."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"plusStepButtonAriaLabel")),l.createElement(t.td,null,"The aria label for plus step button."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"unit")),l.createElement(t.td,null,"Unit characters of the input. Example: €"),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,"[Table 1:NumberInput properties]"),l.createElement(t.td),l.createElement(t.td),l.createElement(t.td)))))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){return void 0===e&&(e={}),l.createElement(o,e,l.createElement(s,e))}},11757:function(e,t,n){"use strict";n.r(t);var a=n(11151),l=n(67294),r=n(83428),i=n(57674),o=n(89482),s=(n(18607),n(26127));function u(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,a.ah)(),e.components);return s.Z||c("PageTabs",!1),s.Z.Tab||c("PageTabs.Tab",!0),s.Z.TabList||c("PageTabs.TabList",!0),s.Z.TabPanel||c("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"numberinput",style:{position:"relative"}},"NumberInput",l.createElement(t.a,{href:"#numberinput","aria-label":"numberinput permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(r.S,{type:"info"},"Stable"),l.createElement(r.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(i.Z)),"\n",l.createElement(o.Z,null,"  A number input allows the user to enter numeric values. It also features optional steppers for increasing or decreasing the value by a set amount."),"\n",l.createElement(s.Z,{pageContext:e.pageContext},l.createElement(s.Z.TabList,null,l.createElement(s.Z.Tab,{href:"/"},"Usage"),l.createElement(s.Z.Tab,{href:"/code"},"Code"),l.createElement(s.Z.Tab,{href:"/accessibility"},"Accessibility")),l.createElement(s.Z.TabPanel,null,e.children)))}function c(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,a.ah)(),e.components);return t?l.createElement(t,e,l.createElement(u,e)):u(e)}},89482:function(e,t,n){"use strict";var a=n(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:n="var(--fontsize-body-xl)",style:l={},children:r}=e;return a.createElement("p",{style:{fontSize:n,color:t,maxWidth:600,...l}},r)}},26127:function(e,t,n){"use strict";var a=n(67294),l=n(14160),r=n(94671);const i="PageTabList",o="PageTabPanel",s="PageTab",u=e=>{var t;let{pageContext:n,children:u}=e;const c=n.frontmatter.slug,p=Array.isArray(u)?u:[u],d=p.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===i)),m=p.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===o)),h=null===(t=d.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===s)),b=h.findIndex((e=>c.endsWith(e.props.href))),_=-1===b?0:b,x=0===_?c:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(c);return a.createElement(r.a,{initiallyActiveTab:_},a.createElement(r.a.TabList,{className:"page-tabs-list"},h.map((e=>a.createElement(r.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?x:x+e.props.href))},e.props.children)))),h.map(((e,t)=>a.createElement(r.a.TabPanel,{key:e.props.href},_===t?m.props.children:a.createElement("div",null)))))},c=e=>{let{children:t}=e;return a.createElement(r.a.TabList,null,t)};c.componentName=i;const p=e=>{let{href:t,slug:n,children:l}=e;return a.createElement(r.a.Tab,null,l)};p.componentName=s;const d=e=>{let{children:t}=e;return a.createElement(r.a.TabPanel,null,t)};d.componentName=o,u.TabList=c,u.Tab=p,u.TabPanel=d,t.Z=u},57674:function(e,t,n){"use strict";var a=n(67294),l=n(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return a.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},a.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>a.createElement("li",{key:t},a.createElement("span",{className:"status-name"},t),a.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-number-input-index-mdx-98791155329a577e5e88.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-number-input-index-mdx-98791155329a577e5e88.js
new file mode 100644
index 00000000000..106d5da8511
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-number-input-index-mdx-98791155329a577e5e88.js
@@ -0,0 +1 @@
+(self.webpackChunksite=self.webpackChunksite||[]).push([[4929,198],{91309:function(e,t,n){var a="[object Null]",r="[object Undefined]",l="object"==typeof n.g&&n.g&&n.g.Object===Object&&n.g,i="object"==typeof self&&self&&self.Object===Object&&self,o=l||i||Function("return this")(),s=Object.prototype,u=s.hasOwnProperty,c=s.toString,p=o.Symbol,d=p?p.toStringTag:void 0;function m(e){return null==e?void 0===e?r:a:d&&d in Object(e)?function(e){var t=u.call(e,d),n=e[d];try{e[d]=void 0;var a=!0}catch(l){}var r=c.call(e);a&&(t?e[d]=n:delete e[d]);return r}(e):function(e){return c.call(e)}(e)}e.exports=function(e){if(!function(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}(e))return!1;var t=m(e);return"[object Function]"==t||"[object GeneratorFunction]"==t||"[object AsyncFunction]"==t||"[object Proxy]"==t}},30695:function(e,t,n){"use strict";n.d(t,{I:function(){return l}});var a=n(67294),r=n(32719);const l=e=>{let{ariaLabel:t="minus",ariaLabelledby:n,ariaHidden:l=!0,className:i="",color:o,size:s="s",style:u={}}=e;return a.createElement("svg",{className:[r.s.icon,r.s[s],i].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":n,"aria-hidden":l,color:o,style:u},a.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M6 11H18V13H6V11Z",fill:"currentColor"}))}},63483:function(e,t,n){"use strict";n.d(t,{I:function(){return l}});var a=n(67294),r=n(32719);const l=e=>{let{ariaLabel:t="plus",ariaLabelledby:n,ariaHidden:l=!0,className:i="",color:o,size:s="s",style:u={}}=e;return a.createElement("svg",{className:[r.s.icon,r.s[s],i].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":n,"aria-hidden":l,color:o,style:u},a.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M13 6V11H18V13H13V18H11V13H6V11H11V6H13Z",fill:"currentColor"}))}},93667:function(e,t,n){"use strict";n.d(t,{I:function(){return s},t:function(){return o}});var a=n(67294),r=n(7444),l=n(34300),i=n(41125),o={root:"TextInput-module_root__2CMNr text-input_hds-text-input__2LODq",inputWrapper:"TextInput-module_inputWrapper__3Rvel text-input_hds-text-input__input-wrapper__1OqYG",input:"TextInput-module_input__1BlHi text-input_hds-text-input__input__GJm5C",hasButton:"TextInput-module_hasButton__2KCM1",errorText:"TextInput-module_errorText__3pizm text-input_hds-text-input__error-text__1GLYk",helperText:"TextInput-module_helperText__2dLR6 text-input_hds-text-input__helper-text__3V2KM",invalidText:"TextInput-module_invalidText__1w4sm text-input_hds-text-input__helper-text__3V2KM",successText:"TextInput-module_successText__2NMCP text-input_hds-text-input__success-text__3EOiy",infoText:"TextInput-module_infoText__zHOGs text-input_hds-text-input__info-text__3bqzy",invalid:"TextInput-module_invalid__2iYo2 text-input_hds-text-input--invalid__1UfKC",success:"TextInput-module_success__1kDOm text-input_hds-text-input--success__3dm2J",readOnly:"TextInput-module_readOnly__j615N undefined",buttonWrapper:"TextInput-module_buttonWrapper___filA text-input_hds-text-input__buttons__1RMzT",button:"TextInput-module_button__1ySMX text-input_hds-text-input__button__1Fh0I"};(0,r.s)("@keyframes text-input_fadeIn__2IDZ8{0%{opacity:0}to{opacity:1}}.text-input_hds-text-input__2LODq{--border-width:2px;--outline-width:3px;--input-height:56px;--textarea-height:149px;--icon-size:var(--spacing-m);--helper-color-default:var(--color-black-60);--helper-color-invalid:var(--color-error);--helper-color-success:var(--color-success);--helper-color-info:var(--color-black-90);--helper-color-info-icon:var(--color-coat-of-arms);--icon-color-invalid:var(--color-error);--input-background-default:var(--color-white);--input-background-disabled:var(--color-black-10);--input-border-color-default:var(--color-black-50);--input-border-color-hover:var(--color-black-90);--input-border-color-focus:var(--color-black-90);--input-border-color-invalid:var(--color-error);--input-border-color-disabled:var(--color-black-10);--input-border-color-success:var(--color-success);--input-color-default:var(--color-black-90);--input-color-disabled:var(--color-black-40);--label-color-default:var(--color-black-90);--label-color-invalid:var(--color-black-90);--placeholder-color:var(--color-black-60)}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C{-webkit-appearance:none;background-color:var(--input-background-default);border:var(--border-width) solid var(--input-border-color-default);border-radius:0;box-sizing:border-box;color:var(--input-color-default);font-family:inherit;font-size:1.125em;height:var(--input-height);line-height:normal;margin:0;padding:0 var(--spacing-s);width:100%;will-change:transform,box-shadow}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C:hover{border-color:var(--input-border-color-hover);transition:border-color 85ms ease-out}.text-input_hds-text-input__input-wrapper__1OqYG:focus-within .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-focus);outline:none}.text-input_hds-text-input__2LODq.text-input_hds-text-input--invalid__1UfKC .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-invalid)}.text-input_hds-text-input__2LODq.text-input_hds-text-input--success__3dm2J .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-success)}.text-input_hds-text-input__input-wrapper__1OqYG:focus-within .text-input_hds-text-input__input__GJm5C:not([readonly]){box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);transform:translateZ(0);transition:85ms ease-out;transition-property:box-shadow,transform}.text-input_hds-text-input__label__15F2V{color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.text-input_hds-text-input--invalid__1UfKC .text-input_hds-text-input__label__15F2V{color:var(--label-color-invalid);transition:color 85ms linear}.text-input_hds-text-input__required__z3Hm0{color:var(--color-black-90);display:inline-block;font-size:var(--fontsize-body-xl);line-height:1;margin-left:var(--spacing-2-xs);transform:translateY(var(--spacing-3-xs))}.text-input_hds-text-input__input-wrapper__1OqYG{display:flex;position:relative}.text-input_hds-text-input__2LODq textarea.text-input_hds-text-input__input__GJm5C{font-family:inherit;height:var(--textarea-height);margin:0;min-height:var(--input-height);overflow:auto;padding:var(--spacing-s);resize:vertical}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C::-moz-placeholder{color:var(--placeholder-color);opacity:1}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C::placeholder{color:var(--placeholder-color);opacity:1}.text-input_hds-text-input__helper-text__3V2KM{color:var(--helper-color-default)}.text-input_hds-text-input__error-text__1GLYk,.text-input_hds-text-input__helper-text__3V2KM{display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);white-space:pre-line}.text-input_hds-text-input__error-text__1GLYk{color:var(--helper-color-invalid);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.text-input_hds-text-input__error-text__1GLYk:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__error-text__1GLYk:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--icon-color-invalid);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__success-text__3EOiy{color:var(--helper-color-success);display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative;white-space:pre-wrap}.text-input_hds-text-input__success-text__3EOiy:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__success-text__3EOiy:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--helper-color-success);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__info-text__3bqzy{color:var(--helper-color-info);display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.text-input_hds-text-input__info-text__3bqzy:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__info-text__3bqzy:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--helper-color-info-icon);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C[disabled]{background-color:var(--input-background-disabled);border-color:var(--input-border-color-disabled);color:var(--input-color-disabled);cursor:not-allowed}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C[readonly]{background-color:transparent;border:0;color:var(--input-color-default);padding:0;-webkit-text-fill-color:var(--input-color-default)}.text-input_hds-text-input__buttons__1RMzT{align-items:center;bottom:0;display:flex;font-size:1rem;justify-content:center;margin-right:calc(var(--spacing-s) - var(--spacing-xs) / 2);position:absolute;right:0;top:0}.text-input_hds-text-input__button__1Fh0I{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;display:flex;font:inherit;outline:none;padding:var(--spacing-xs) calc(var(--spacing-xs) / 2)}.text-input_hds-text-input__button__1Fh0I:focus{outline:var(--outline-width) solid var(--color-focus-outline)}.TextInput-module_root__2CMNr{position:relative}.TextInput-module_input__1BlHi.TextInput-module_hasButton__2KCM1{padding-right:calc(2 * var(--spacing-s) + 1.5rem)}.TextInput-module_button__1ySMX:disabled{cursor:not-allowed}.TextInput-module_button__1ySMX:focus{outline:var(--outline-width) solid var(--color-focus-outline)}");const s=e=>{let{children:t,className:n="",errorText:r,helperText:s,hideLabel:u=!1,id:c,invalid:p=!1,isAriaLabelledBy:d=!1,label:m,labelId:h,onBlur:_,required:b=!1,style:v,successText:f,infoText:x,tooltipLabel:g,tooltipText:y,tooltipButtonLabel:E}=e;return a.createElement("div",{onBlur:_,className:(0,l.c)(o.root,p&&o.invalid,f&&o.success,n),style:v},m&&a.createElement(i.F,{id:h,inputId:c,isAriaLabelledBy:d,hidden:u,label:m,required:b,tooltipLabel:g,tooltipButtonLabel:E,tooltipText:y}),a.createElement("div",{className:(0,l.c)(o.inputWrapper)},t),r&&a.createElement("div",{className:o.errorText,id:c+"-error"},r),f&&a.createElement("div",{className:o.successText,id:c+"-success"},f),x&&a.createElement("div",{className:o.infoText,id:c+"-info"},x),s&&a.createElement("div",{className:o.helperText,id:c+"-helper"},s))}},81916:function(e,t,n){"use strict";n.d(t,{N:function(){return j}});var a=n(80136),r=n(67294),l=n(39440),i=n(26917),o=n(7444),s=n(93667),u=n(34300),c=n(37776),p=n(94330),d=n(30695),m=n(63483),h="Expected a function",_=NaN,b="[object Symbol]",v=/^\s+|\s+$/g,f=/^[-+]0x[0-9a-f]+$/i,x=/^0b[01]+$/i,g=/^0o[0-7]+$/i,y=parseInt,E="object"==typeof i.a&&i.a&&i.a.Object===Object&&i.a,w="object"==typeof self&&self&&self.Object===Object&&self,T=E||w||Function("return this")(),k=Object.prototype.toString,I=Math.max,N=Math.min,L=function(){return T.Date.now()};function C(e){var t=typeof e;return!!e&&("object"==t||"function"==t)}function z(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return!!e&&"object"==typeof e}(e)&&k.call(e)==b}(e))return _;if(C(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=C(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(v,"");var n=x.test(e);return n||g.test(e)?y(e.slice(2),n?2:8):f.test(e)?_:+e}var S=function(e,t,n){var a=!0,r=!0;if("function"!=typeof e)throw new TypeError(h);return C(n)&&(a="leading"in n?!!n.leading:a,r="trailing"in n?!!n.trailing:r),function(e,t,n){var a,r,l,i,o,s,u=0,c=!1,p=!1,d=!0;if("function"!=typeof e)throw new TypeError(h);function m(t){var n=a,l=r;return a=r=void 0,u=t,i=e.apply(l,n)}function _(e){var n=e-s;return void 0===s||n>=t||n<0||p&&e-u>=l}function b(){var e=L();if(_(e))return v(e);o=setTimeout(b,function(e){var n=t-(e-s);return p?N(n,l-(e-u)):n}(e))}function v(e){return o=void 0,d&&a?m(e):(a=r=void 0,i)}function f(){var e=L(),n=_(e);if(a=arguments,r=this,s=e,n){if(void 0===o)return function(e){return u=e,o=setTimeout(b,t),c?m(e):i}(s);if(p)return o=setTimeout(b,t),m(s)}return void 0===o&&(o=setTimeout(b,t)),i}return t=z(t)||0,C(n)&&(c=!!n.leading,l=(p="maxWait"in n)?I(z(n.maxWait)||0,t):l,d="trailing"in n?!!n.trailing:d),f.cancel=function(){void 0!==o&&clearTimeout(o),u=0,a=s=r=o=void 0},f.flush=function(){return void 0===o?i:v(L())},f}(e,t,{leading:a,maxWait:t,trailing:r})},O="NumberInput-module_button__2Shu7";(0,o.s)(".NumberInput-module_numberInputContainer__hKNPp{width:100%}.NumberInput-module_numberInputContainer__hKNPp input::-webkit-inner-spin-button,.NumberInput-module_numberInputContainer__hKNPp input::-webkit-outer-spin-button{appearance:none!important;height:auto;margin:0!important}.NumberInput-module_numberInputContainer__hKNPp input[type=number]{appearance:textfield!important}.NumberInput-module_numberInputWithSteps__3q7N7{padding-left:68px!important;padding-right:68px!important;text-align:center}.NumberInput-module_minusButtonWrapper__3PHN9{border-right:1px solid #ccc}.NumberInput-module_minusButtonWrapper__3PHN9,.NumberInput-module_minusButtonWrapperWithoutBorder__2g42V{align-items:center;bottom:0;display:flex;font-size:1rem;justify-content:center;margin:2px;position:absolute;top:0;width:52px;z-index:1;left:0}.NumberInput-module_plusButtonWrapper__Wwq5t{border-left:1px solid #ccc}.NumberInput-module_plusButtonWrapper__Wwq5t,.NumberInput-module_plusButtonWrapperWithoutBorder__2xb6t{align-items:center;bottom:0;display:flex;font-size:1rem;justify-content:center;margin:2px;position:absolute;top:0;width:52px;z-index:1;right:0}.NumberInput-module_button__2Shu7{align-items:center;appearance:none;background:transparent;border:0;cursor:pointer;display:flex;font-size:1rem;height:100%;justify-content:center;overflow:hidden;padding:0;width:100%}.NumberInput-module_button__2Shu7:disabled{cursor:not-allowed}.NumberInput-module_button__2Shu7:focus{outline:3px solid var(--color-focus-outline);outline-offset:-5px}");const j=r.forwardRef(((e,t)=>{var{className:n="",disabled:i=!1,defaultValue:o,errorText:h,helperText:_,hideLabel:b,invalid:v,id:f,label:x,max:g,min:y,minusStepButtonAriaLabel:E,onChange:w=(()=>null),plusStepButtonAriaLabel:T,required:k,step:I,style:N,successText:L,infoText:C,tooltipLabel:z,tooltipText:j,tooltipButtonLabel:B,type:M="number",unit:H}=e,W=(0,a._)(e,["className","disabled","defaultValue","errorText","helperText","hideLabel","invalid","id","label","max","min","minusStepButtonAriaLabel","onChange","plusStepButtonAriaLabel","required","step","style","successText","infoText","tooltipLabel","tooltipText","tooltipButtonLabel","type","unit"]);const D={className:n,errorText:h,helperText:_,hideLabel:b,id:f,invalid:v,label:(G=x,Z=H,!G&&Z?"("+Z+")":G&&Z?G+" ("+Z+")":G),required:k,style:N,successText:L,infoText:C,tooltipLabel:z,tooltipText:j,tooltipButtonLabel:B,labelId:I?f+"-label":void 0},q=(0,r.useRef)(null),[P,V]=(0,r.useState)(null),A=()=>{V(String(q.current.value))};var G,Z;!function(e){let t=!1;const n=S((()=>{t=!1}),arguments.length>1&&void 0!==arguments[1]?arguments[1]:200);(0,r.useEffect)((()=>{const a=e=>{t&&e.preventDefault(),t=!0,n()};return e.current&&e.current.addEventListener("wheel",a,{passive:!1}),()=>{e.current&&e.current.removeEventListener("wheel",a)}}),[e])}(q),(0,r.useEffect)((()=>{t&&(0,p.m)(t,q)}),[q,t]);const J=()=>{Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value").set.call(q.current,q.current.value);const e=new Event("input",{bubbles:!0});q.current.dispatchEvent(e)},K=I?e=>{null!==P&&V(null),w(e)}:w,Y=(0,c.c)(f,_,h,L,C);return r.createElement(s.I,Object.assign({},D),r.createElement("div",Object.assign({className:"NumberInput-module_numberInputContainer__hKNPp"},I&&{role:"group","aria-labelledby":D.labelId}),r.createElement("input",Object.assign({className:(0,u.c)(s.t.input,I?"NumberInput-module_numberInputWithSteps__3q7N7":""),defaultValue:o,disabled:i,id:f,max:g,min:y,step:I,onChange:K,ref:q,required:k,type:M,"aria-describedby":Y.length>0?Y:null},W)),I&&r.createElement(r.Fragment,null,r.createElement("div",{className:i?"NumberInput-module_minusButtonWrapperWithoutBorder__2g42V":"NumberInput-module_minusButtonWrapper__3PHN9"},r.createElement("button",{className:O,disabled:i,type:"button",onClick:e=>{e.preventDefault(),q.current.stepDown(),J(),A()},"aria-label":E||"Decrease by one"},r.createElement(d.I,{"aria-hidden":"true"}))),r.createElement("div",{className:i?"NumberInput-module_plusButtonWrapperWithoutBorder__2xb6t":"NumberInput-module_plusButtonWrapper__Wwq5t"},r.createElement("button",{className:O,disabled:i,type:"button",onClick:e=>{e.preventDefault(),q.current.stepUp(),J(),A()},"aria-label":T||"Increase by one"},r.createElement(m.I,{"aria-hidden":"true"}))),null!==P&&r.createElement(l.T,null,r.createElement("span",{"aria-live":"assertive"},P)))))}))},83428:function(e,t,n){"use strict";n.d(t,{S:function(){return u}});var a=n(80136),r=n(67294),l=n(7444),i=n(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,l.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const s=e=>{let{icon:t}=e;return r.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},t)},u=e=>{var{children:t,className:n,dataTestId:l,type:u="neutral",iconLeft:c}=e,p=(0,a._)(e,["children","className","dataTestId","type","iconLeft"]);return r.createElement("span",Object.assign({className:(0,i.c)(o.statusLabel,o[u],c&&o.statusLabelWithIcon,n),"data-testid":l},p),c&&r.createElement(s,{icon:c}),t)}},37776:function(e,t,n){"use strict";n.d(t,{c:function(){return a}});var a=(e,t,n,a,r)=>[t&&e+"-helper",n&&e+"-error",a&&e+"-success",r&&e+"-info"].filter((e=>e)).join(" ")},94330:function(e,t,n){"use strict";n.d(t,{m:function(){return l}});var a=n(91309),r=n.n(a),l=(e,t)=>{r()(e)?e(t.current):e.current=t.current}},55297:function(e,t,n){"use strict";n.r(t);var a=n(11151),r=n(67294),l=n(81916),i=n(11757);const o=e=>{let{children:t,pageContext:n}=e;return r.createElement(i.default,{pageContext:n},t)};function s(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",strong:"strong",h4:"h4",p:"p",code:"code"},(0,a.ah)(),e.components),{PlaygroundPreview:n,ExternalLink:i}=t;return i||u("ExternalLink",!0),n||u("PlaygroundPreview",!0),r.createElement(r.Fragment,null,r.createElement(t.h2,{id:"usage",style:{position:"relative"}},"Usage",r.createElement(t.a,{href:"#usage","aria-label":"usage permalink",className:"header-anchor after"},r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",r.createElement(t.h3,{id:"example",style:{position:"relative"}},"Example",r.createElement(t.a,{href:"#example","aria-label":"example permalink",className:"header-anchor after"},r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",r.createElement(n,null,r.createElement(l.N,{id:"example",helperText:"Assistive text",label:"Total compensation",unit:"€",defaultValue:1e3,style:{maxWidth:"320px"}})),"\n",r.createElement(t.h3,{id:"principles",style:{position:"relative"}},"Principles",r.createElement(t.a,{href:"#principles","aria-label":"principles permalink",className:"header-anchor after"},r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",r.createElement(t.ul,null,"\n",r.createElement(t.li,null,r.createElement(t.strong,null,"A label should always be provided with a number input."),"\n",r.createElement(t.ul,null,"\n",r.createElement(t.li,null,"Make sure that the label is clear and concise. The user should immediately understand what number they are supposed to input."),"\n"),"\n"),"\n",r.createElement(t.li,null,"HDS Number input also supports displaying an unit for the number. Displaying the unit is not mandatory. Only use it when you think it will help the user.","\n",r.createElement(t.ul,null,"\n",r.createElement(t.li,null,"Display the unit for ",r.createElement(i,{href:"https://en.wikipedia.org/wiki/International_System_of_Units"},"SI units")," (such as meters) and currencies."),"\n",r.createElement(t.li,null,'The unit does not need to be displayed when it is self-evident for the user, such as in "Number of people"'),"\n"),"\n"),"\n",r.createElement(t.li,null,"It is recommended to give the number input a default value. Placeholders should be avoided in number inputs."),"\n",r.createElement(t.li,null,"HDS Number input supports visual steppers that can be set to increase and decrease the number value by a set amount.","\n",r.createElement(t.ul,null,"\n",r.createElement(t.li,null,"Steppers can be used when changes to the value are small or when they are intuitive to the user (e.g. from 0 to 100 with steps of 10)."),"\n",r.createElement(t.li,null,"You should not use steppers when large value changes are expected."),"\n"),"\n"),"\n"),"\n",r.createElement(t.h3,{id:"variations",style:{position:"relative"}},"Variations",r.createElement(t.a,{href:"#variations","aria-label":"variations permalink",className:"header-anchor after"},r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",r.createElement(t.h4,{id:"default",style:{position:"relative"}},"Default",r.createElement(t.a,{href:"#default","aria-label":"default permalink",className:"header-anchor after"},r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",r.createElement(t.p,null,"Default HDS Number input comes without stepper. The number is always inputted manually. Using this over a text input is still helpful since it has a ",r.createElement(t.code,null,"type=number")," to aid screen readers and mobile keyboards."),"\n",r.createElement(t.p,null,"When applicable, a unit can be set for the input by using the ",r.createElement(t.code,null,"unit")," prop."),"\n",r.createElement(n,null,r.createElement(l.N,{id:"default",helperText:"Assistive text",label:"Total compensation",unit:"€",defaultValue:1e3,style:{maxWidth:"320px"}})),"\n",r.createElement(t.h4,{id:"with-steppers",style:{position:"relative"}},"With steppers",r.createElement(t.a,{href:"#with-steppers","aria-label":"with steppers permalink",className:"header-anchor after"},r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",r.createElement(t.p,null,"Steppers can be enabled via providing a ",r.createElement(t.code,null,"step")," property. Use this variant when value changes are small and you can determine logical amounts for an increase and a decrease step."),"\n",r.createElement(n,null,r.createElement(l.N,{id:"stepper",helperText:"Assistive text",label:"Number of attendees",minusStepButtonAriaLabel:"Decrease by one",plusStepButtonAriaLabel:"Increase by one",step:1,defaultValue:5,style:{maxWidth:"320px"}})),"\n",r.createElement(t.h4,{id:"with-min-and-max-values",style:{position:"relative"}},"With min and max values",r.createElement(t.a,{href:"#with-min-and-max-values","aria-label":"with min and max values permalink",className:"header-anchor after"},r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",r.createElement(t.p,null,"Steppers can be enabled by providing a ",r.createElement(t.code,null,"step")," property. Use this variant when value changes are small and you can determine logical amounts for an increase and a decrease step."),"\n",r.createElement(t.p,null,"If your input has special requirements, it is a good practice to describe them in the assistive text."),"\n",r.createElement(n,null,r.createElement(l.N,{id:"stepper-minmax",helperText:"At least 3 attendees are required",label:"Number of attendees",min:3,max:99,minusStepButtonAriaLabel:"Decrease by one",plusStepButtonAriaLabel:"Increase by one",step:1,defaultValue:3,style:{maxWidth:"320px"}})))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){return void 0===e&&(e={}),r.createElement(o,e,r.createElement(s,e))}},11757:function(e,t,n){"use strict";n.r(t);var a=n(11151),r=n(67294),l=n(83428),i=n(57674),o=n(89482),s=(n(18607),n(26127));function u(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,a.ah)(),e.components);return s.Z||c("PageTabs",!1),s.Z.Tab||c("PageTabs.Tab",!0),s.Z.TabList||c("PageTabs.TabList",!0),s.Z.TabPanel||c("PageTabs.TabPanel",!0),r.createElement(r.Fragment,null,r.createElement(t.h1,{id:"numberinput",style:{position:"relative"}},"NumberInput",r.createElement(t.a,{href:"#numberinput","aria-label":"numberinput permalink",className:"header-anchor after"},r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",r.createElement("div",{class:"status-label-description"},r.createElement(l.S,{type:"info"},"Stable"),r.createElement(l.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),r.createElement(i.Z)),"\n",r.createElement(o.Z,null,"  A number input allows the user to enter numeric values. It also features optional steppers for increasing or decreasing the value by a set amount."),"\n",r.createElement(s.Z,{pageContext:e.pageContext},r.createElement(s.Z.TabList,null,r.createElement(s.Z.Tab,{href:"/"},"Usage"),r.createElement(s.Z.Tab,{href:"/code"},"Code"),r.createElement(s.Z.Tab,{href:"/accessibility"},"Accessibility")),r.createElement(s.Z.TabPanel,null,e.children)))}function c(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,a.ah)(),e.components);return t?r.createElement(t,e,r.createElement(u,e)):u(e)}},89482:function(e,t,n){"use strict";var a=n(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:n="var(--fontsize-body-xl)",style:r={},children:l}=e;return a.createElement("p",{style:{fontSize:n,color:t,maxWidth:600,...r}},l)}},26127:function(e,t,n){"use strict";var a=n(67294),r=n(14160),l=n(94671);const i="PageTabList",o="PageTabPanel",s="PageTab",u=e=>{var t;let{pageContext:n,children:u}=e;const c=n.frontmatter.slug,p=Array.isArray(u)?u:[u],d=p.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===i)),m=p.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===o)),h=null===(t=d.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===s)),_=h.findIndex((e=>c.endsWith(e.props.href))),b=-1===_?0:_,v=0===b?c:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(c);return a.createElement(l.a,{initiallyActiveTab:b},a.createElement(l.a.TabList,{className:"page-tabs-list"},h.map((e=>a.createElement(l.a.Tab,{key:e.props.href,onClick:()=>(0,r.navigate)(""+("/"===e.props.href?v:v+e.props.href))},e.props.children)))),h.map(((e,t)=>a.createElement(l.a.TabPanel,{key:e.props.href},b===t?m.props.children:a.createElement("div",null)))))},c=e=>{let{children:t}=e;return a.createElement(l.a.TabList,null,t)};c.componentName=i;const p=e=>{let{href:t,slug:n,children:r}=e;return a.createElement(l.a.Tab,null,r)};p.componentName=s;const d=e=>{let{children:t}=e;return a.createElement(l.a.TabPanel,null,t)};d.componentName=o,u.TabList=c,u.Tab=p,u.TabPanel=d,t.Z=u},57674:function(e,t,n){"use strict";var a=n(67294),r=n(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return a.createElement(r.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},a.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>a.createElement("li",{key:t},a.createElement("span",{className:"status-name"},t),a.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-number-input-tabs-mdx-3eadc8cc203869f43551.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-number-input-tabs-mdx-3eadc8cc203869f43551.js
new file mode 100644
index 00000000000..3cf453140a2
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-number-input-tabs-mdx-3eadc8cc203869f43551.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[198],{83428:function(e,a,t){t.d(a,{S:function(){return i}});var s=t(80136),l=t(67294),n=t(7444),r=t(34300),c={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:a}=e;return l.createElement("span",{className:c.statusLabelIcon,"aria-hidden":"true"},a)},i=e=>{var{children:a,className:t,dataTestId:n,type:i="neutral",iconLeft:u}=e,b=(0,s._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(c.statusLabel,c[i],u&&c.statusLabelWithIcon,t),"data-testid":n},b),u&&l.createElement(o,{icon:u}),a)}},11757:function(e,a,t){t.r(a);var s=t(11151),l=t(67294),n=t(83428),r=t(57674),c=t(89482),o=(t(18607),t(26127));function i(e){const a=Object.assign({h1:"h1",a:"a",span:"span"},(0,s.ah)(),e.components);return o.Z||u("PageTabs",!1),o.Z.Tab||u("PageTabs.Tab",!0),o.Z.TabList||u("PageTabs.TabList",!0),o.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(a.h1,{id:"numberinput",style:{position:"relative"}},"NumberInput",l.createElement(a.a,{href:"#numberinput","aria-label":"numberinput permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(n.S,{type:"info"},"Stable"),l.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(c.Z,null,"  A number input allows the user to enter numeric values. It also features optional steppers for increasing or decreasing the value by a set amount."),"\n",l.createElement(o.Z,{pageContext:e.pageContext},l.createElement(o.Z.TabList,null,l.createElement(o.Z.Tab,{href:"/"},"Usage"),l.createElement(o.Z.Tab,{href:"/code"},"Code"),l.createElement(o.Z.Tab,{href:"/accessibility"},"Accessibility")),l.createElement(o.Z.TabPanel,null,e.children)))}function u(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,s.ah)(),e.components);return a?l.createElement(a,e,l.createElement(i,e)):i(e)}},89482:function(e,a,t){var s=t(67294);a.Z=e=>{let{color:a="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:l={},children:n}=e;return s.createElement("p",{style:{fontSize:t,color:a,maxWidth:600,...l}},n)}},26127:function(e,a,t){var s=t(67294),l=t(14160),n=t(94671);const r="PageTabList",c="PageTabPanel",o="PageTab",i=e=>{var a;let{pageContext:t,children:i}=e;const u=t.frontmatter.slug,b=Array.isArray(i)?i:[i],d=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===r)),m=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===c)),p=null===(a=d.props)||void 0===a?void 0:a.children.filter((e=>e.type.componentName===o)),h=p.findIndex((e=>u.endsWith(e.props.href))),_=-1===h?0:h,f=0===_?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return s.createElement(n.a,{initiallyActiveTab:_},s.createElement(n.a.TabList,{className:"page-tabs-list"},p.map((e=>s.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),p.map(((e,a)=>s.createElement(n.a.TabPanel,{key:e.props.href},_===a?m.props.children:s.createElement("div",null)))))},u=e=>{let{children:a}=e;return s.createElement(n.a.TabList,null,a)};u.componentName=r;const b=e=>{let{href:a,slug:t,children:l}=e;return s.createElement(n.a.Tab,null,l)};b.componentName=o;const d=e=>{let{children:a}=e;return s.createElement(n.a.TabPanel,null,a)};d.componentName=c,i.TabList=u,i.Tab=b,i.TabPanel=d,a.Z=i},57674:function(e,a,t){var s=t(67294),l=t(45422);a.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return s.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},s.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((a=>s.createElement("li",{key:a},s.createElement("span",{className:"status-name"},a),s.createElement("span",null,e[a]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-pagination-accessibility-mdx-11d5627154c9c6a9d408.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-pagination-accessibility-mdx-11d5627154c9c6a9d408.js
new file mode 100644
index 00000000000..7052900c4be
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-pagination-accessibility-mdx-11d5627154c9c6a9d408.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[9992,3906],{83428:function(e,t,a){a.d(t,{S:function(){return c}});var n=a(80136),l=a(67294),s=a(7444),r=a(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,s.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:t}=e;return l.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:s,type:c="neutral",iconLeft:u}=e,d=(0,n._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(i.statusLabel,i[c],u&&i.statusLabelWithIcon,a),"data-testid":s},d),u&&l.createElement(o,{icon:u}),t)}},92931:function(e,t,a){a.r(t);var n=a(11151),l=a(67294),s=a(406),r=a(1076);const i=e=>{let{children:t,pageContext:a}=e;return l.createElement(s.default,{pageContext:a},t)};function o(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",strong:"strong",code:"code"},(0,n.ah)(),e.components);return l.createElement(l.Fragment,null,l.createElement(t.h2,{id:"accessibility",style:{position:"relative"}},"Accessibility",l.createElement(t.a,{href:"#accessibility","aria-label":"accessibility permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h3,{id:"pay-attention-to",style:{position:"relative"}},"Pay attention to",l.createElement(t.a,{href:"#pay-attention-to","aria-label":"pay attention to permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,l.createElement(t.strong,null,"It is advisable to use colour combinations provided by the implementation.")," These combinations are ensured to comply with WCAG AA requirements. When customising colours, refer to ",l.createElement(r.Z,{href:"/foundation/design-tokens/colour"},"colour guidelines")," to ensure accessibility."),"\n",l.createElement(t.li,null,"Each page number must have an ",l.createElement(t.code,null,"aria-label")," to describe it. For example, ",l.createElement(t.code,null,'aria-label="Page 3"'),"."),"\n",l.createElement(t.li,null,"The active page number must have an ",l.createElement(t.code,null,'aria-current="page"')," attribute."),"\n",l.createElement(t.li,null,'The truncation element ("..." or ellipsis) does not need to have an ',l.createElement(t.code,null,"aria-label"),"."),"\n",l.createElement(t.li,null,"Pay attention to where to move focus after a user changes a page. In some cases, you might want to move the focus to the\nbeginning of the search results. But in many cases, this is not advised."),"\n",l.createElement(t.li,null,"Provide a screen reader notification (",l.createElement(t.code,null,"aria-live")," and ",l.createElement(t.code,null,"aria-atomic"),") when a user changes a page. Especially this is\nimportant when the user changes the page by using the component's previous or next buttons. If you use the HDS React\ncomponent of the pagination, this feature is automatically provided."),"\n"))}t.default=function(e){return void 0===e&&(e={}),l.createElement(i,e,l.createElement(o,e))}},406:function(e,t,a){a.r(t);var n=a(11151),l=a(67294),s=a(83428),r=a(57674),i=a(89482),o=(a(18607),a(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,n.ah)(),e.components);return o.Z||u("PageTabs",!1),o.Z.Tab||u("PageTabs.Tab",!0),o.Z.TabList||u("PageTabs.TabList",!0),o.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"pagination",style:{position:"relative"}},"Pagination",l.createElement(t.a,{href:"#pagination","aria-label":"pagination permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(s.S,{type:"info"},"Stable"),l.createElement(s.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(i.Z,null,"The pagination component allows the user to navigate between pages when content is split into several pages."),"\n",l.createElement(o.Z,{pageContext:e.pageContext},l.createElement(o.Z.TabList,null,l.createElement(o.Z.Tab,{href:"/"},"Usage"),l.createElement(o.Z.Tab,{href:"/code"},"Code"),l.createElement(o.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(o.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(o.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,n.ah)(),e.components);return t?l.createElement(t,e,l.createElement(c,e)):c(e)}},89482:function(e,t,a){var n=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:l={},children:s}=e;return n.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...l}},s)}},26127:function(e,t,a){var n=a(67294),l=a(14160),s=a(94671);const r="PageTabList",i="PageTabPanel",o="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const u=a.frontmatter.slug,d=Array.isArray(c)?c:[c],m=d.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===r)),b=d.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===i)),h=null===(t=m.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===o)),p=h.findIndex((e=>u.endsWith(e.props.href))),g=-1===p?0:p,f=0===g?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return n.createElement(s.a,{initiallyActiveTab:g},n.createElement(s.a.TabList,{className:"page-tabs-list"},h.map((e=>n.createElement(s.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),h.map(((e,t)=>n.createElement(s.a.TabPanel,{key:e.props.href},g===t?b.props.children:n.createElement("div",null)))))},u=e=>{let{children:t}=e;return n.createElement(s.a.TabList,null,t)};u.componentName=r;const d=e=>{let{href:t,slug:a,children:l}=e;return n.createElement(s.a.Tab,null,l)};d.componentName=o;const m=e=>{let{children:t}=e;return n.createElement(s.a.TabPanel,null,t)};m.componentName=i,c.TabList=u,c.Tab=d,c.TabPanel=m,t.Z=c},57674:function(e,t,a){var n=a(67294),l=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return n.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},n.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>n.createElement("li",{key:t},n.createElement("span",{className:"status-name"},t),n.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-pagination-code-mdx-8d0a5b2d0f615a61d2e5.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-pagination-code-mdx-8d0a5b2d0f615a61d2e5.js
new file mode 100644
index 00000000000..29eb078d16f
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-pagination-code-mdx-8d0a5b2d0f615a61d2e5.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[8690,3906],{83428:function(e,t,n){n.d(t,{S:function(){return c}});var a=n(80136),l=n(67294),s=n(7444),i=n(34300),r={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,s.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:t}=e;return l.createElement("span",{className:r.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:n,dataTestId:s,type:c="neutral",iconLeft:d}=e,u=(0,a._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,i.c)(r.statusLabel,r[c],d&&r.statusLabelWithIcon,n),"data-testid":s},u),d&&l.createElement(o,{icon:d}),t)}},4602:function(e,t,n){n.r(t);var a=n(11151),l=n(67294),s=n(1132),i=n(406);const r=e=>{let{children:t,pageContext:n}=e;return l.createElement(i.default,{pageContext:n},t)};function o(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",h4:"h4",pre:"pre",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",strong:"strong",p:"p"},(0,a.ah)(),e.components),{Playground:n,IconCheckCircleFill:i,Link:r,ExternalLink:o}=t;return o||c("ExternalLink",!0),i||c("IconCheckCircleFill",!0),r||c("Link",!0),n||c("Playground",!0),l.createElement(l.Fragment,null,l.createElement(t.h2,{id:"code",style:{position:"relative"}},"Code",l.createElement(t.a,{href:"#code","aria-label":"code permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h3,{id:"code-examples",style:{position:"relative"}},"Code examples",l.createElement(t.a,{href:"#code-examples","aria-label":"code examples permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h4,{id:"basic",style:{position:"relative"}},"Basic",l.createElement(t.a,{href:"#basic","aria-label":"basic permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n,{scope:{Pagination:s.P,useState:l.useState}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},"import { Pagination } from 'hds-react';\n\n() => {\n  const [pageIndex, setPageIndex] = useState(0);\n  return (\n    <Pagination\n      language=\"en\"\n      onChange={(event, index) => {\n        event.preventDefault();\n        setPageIndex(index);\n      }}\n      pageCount={9}\n      pageHref={() => '#'}\n      pageIndex={pageIndex}\n      paginationAriaLabel=\"Pagination 1\"\n      siblingCount={9}\n    />\n  );\n}\n")),l.createElement(t.pre,null,l.createElement(t.code,{className:"language-html"},'<div class="hds-pagination-container">\n  <nav class="hds-pagination" role="navigation" aria-label="Pagination" data-next="Next">\n    <button type="button" disabled class="hds-button hds-button--supplementary hds-button--theme-black hds-pagination__button-prev">\n      <span aria-hidden="true" class="hds-icon hds-icon--angle-left"></span>\n      <span class="hds-button__label">Previous</span>\n    </button>\n    <ul class="hds-pagination__pages">\n      <li>\n        <a class="hds-pagination__item-link hds-pagination__item-link--active" href="#" title="Current page" aria-label="Page 1" aria-current="page">\n          1\n        </a>\n      </li>\n      <li>\n        <a class="hds-pagination__item-link" href="#" aria-label="Page 2" title="Go to page 2">\n          2\n        </a>\n      </li>\n      <li>\n        <a class="hds-pagination__item-link" href="#"  aria-label="Page 3" title="Go to page 3">\n          3\n        </a>\n      </li>\n      <li>\n        <a class="hds-pagination__item-link" href="#" aria-label="Page 4" title="Go to page 4">\n          4\n        </a>\n      </li>\n      <li>\n        <a class="hds-pagination__item-link" href="#" aria-label="Page 5" title="Go to page 5">\n          5\n        </a>\n      </li>\n      <li>\n        <a class="hds-pagination__item-link" href="#" aria-label="Page 6" title="Go to page 6">\n          6\n        </a>\n      </li>\n      <li>\n        <a class="hds-pagination__item-link" href="#" aria-label="Page 7" title="Go to page 7">\n          7\n        </a>\n      </li>\n      <li>\n        <a class="hds-pagination__item-link" href="#" aria-label="Page 8" title="Go to page 8">\n          8\n        </a>\n      </li>\n      <li>\n        <a class="hds-pagination__item-link" href="#" aria-label="Page 9" title="Go to page 9">\n          9\n        </a>\n      </li>\n    </ul>\n    <button type="button" class="hds-button hds-button--supplementary hds-button--theme-black hds-pagination__button-next">\n      <span class="hds-button__label">Next</span>\n      <span aria-hidden="true" class="hds-icon hds-icon--angle-right"></span>\n    </button>\n  </nav>\n</div>\n'))),"\n",l.createElement(t.h4,{id:"with-truncation",style:{position:"relative"}},"With truncation",l.createElement(t.a,{href:"#with-truncation","aria-label":"with truncation permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n,{scope:{Pagination:s.P,useState:l.useState}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},"import { Pagination } from 'hds-react';\n\n() => {\n  const [pageIndex, setPageIndex] = useState(31);\n  return (\n    <Pagination\n      language=\"en\"\n      onChange={(event, index) => {\n        event.preventDefault();\n        setPageIndex(index);\n      }}\n      pageCount={68}\n      pageHref={() => '#'}\n      pageIndex={pageIndex}\n      paginationAriaLabel=\"Pagination 2\"\n      siblingCount={2}\n    />\n  );\n}\n")),l.createElement(t.pre,null,l.createElement(t.code,{className:"language-html"},'<div class="hds-pagination-container">\n  <nav class="hds-pagination" role="navigation" aria-label="Pagination" data-next="Next">\n    <button type="button" class="hds-button hds-button--supplementary hds-button--theme-black hds-pagination__button-prev">\n      <span aria-hidden="true" class="hds-icon hds-icon--angle-left"></span>\n      <span class="hds-button__label">Previous</span>\n    </button>\n    <ul class="hds-pagination__pages">\n      <li>\n        <a class="hds-pagination__item-link" href="#" title="Go to page 1" aria-label="Page 1">\n          1\n        </a>\n      </li>\n      <li>\n        <span class="hds-pagination__item-ellipsis">\n          ...\n        </span>\n      </li>\n      <li>\n        <a class="hds-pagination__item-link" href="#" aria-label="Page 30" title="Go to page 30">\n          30\n        </a>\n      </li>\n      <li>\n        <a class="hds-pagination__item-link" href="#" aria-label="Page 31" title="Go to page 31">\n          31\n        </a>\n      </li>\n      <li>\n        <a class="hds-pagination__item-link hds-pagination__item-link--active" href="#" aria-label="Page 32" title="Current page" aria-current="page">\n          32\n        </a>\n      </li>\n      <li>\n        <a class="hds-pagination__item-link" href="#" aria-label="Page 33" title="Go to page 33">\n          33\n        </a>\n      </li>\n      <li>\n        <a class="hds-pagination__item-link" href="#" aria-label="Page 34" title="Go to page 34">\n          34\n        </a>\n      </li>\n      <li>\n        <span class="hds-pagination__item-ellipsis">\n          ...\n        </span>\n      </li>\n      <li>\n        <a class="hds-pagination__item-link" href="#" aria-label="Page 68" title="Go to page 68">\n          68\n        </a>\n      </li>\n    </ul>\n    <button type="button" class="hds-button hds-button--supplementary hds-button--theme-black hds-pagination__button-next">\n      <span class="hds-button__label">Next</span>\n      <span aria-hidden="true" class="hds-icon hds-icon--angle-right"></span>\n    </button>\n  </nav>\n</div>\n'))),"\n",l.createElement(t.h4,{id:"without-previous-and-next-buttons",style:{position:"relative"}},"Without previous and next buttons",l.createElement(t.a,{href:"#without-previous-and-next-buttons","aria-label":"without previous and next buttons permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n,{scope:{Pagination:s.P,useState:l.useState}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},"import { Pagination } from 'hds-react';\n\n() => {\n  const [pageIndex, setPageIndex] = useState(31);\n  return (\n    <Pagination\n      hideNextButton\n      hidePrevButton\n      language=\"en\"\n      onChange={(event, index) => {\n        event.preventDefault();\n        setPageIndex(index);\n      }}\n      pageCount={68}\n      pageHref={() => '#'}\n      pageIndex={pageIndex}\n      paginationAriaLabel=\"Pagination 3\"\n      siblingCount={2}\n    />\n  );\n}\n"))),"\n",l.createElement(t.h3,{id:"packages",style:{position:"relative"}},"Packages",l.createElement(t.a,{href:"#packages","aria-label":"packages permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.table,null,l.createElement(t.thead,null,l.createElement(t.tr,null,l.createElement(t.th,null,"Package"),l.createElement(t.th,null,"Included"),l.createElement(t.th,null,"Storybook link"),l.createElement(t.th,null,"Source link"))),l.createElement(t.tbody,null,l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.strong,null,"HDS React")),l.createElement(t.td,null,l.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},l.createElement(i)," Yes ")),l.createElement(t.td,null,l.createElement(r,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-pagination--basic"},"View in Storybook")),l.createElement(t.td,null,l.createElement(o,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/react/src/components/pagination"},"View source"))),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.strong,null,"HDS Core")),l.createElement(t.td,null,l.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},l.createElement(i)," Yes ")),l.createElement(t.td,null,l.createElement(r,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/core/?path=/story/components-pagination--basic"},"View in Storybook")),l.createElement(t.td,null,l.createElement(o,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/core/src/components/pagination"},"View source"))))),"\n",l.createElement(t.h3,{id:"properties",style:{position:"relative"}},"Properties",l.createElement(t.a,{href:"#properties","aria-label":"properties permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"Note! You can find the full list of properties in the ",l.createElement(r,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/docs/components-pagination--basic"},"React Storybook.")),"\n",l.createElement(t.table,null,l.createElement(t.thead,null,l.createElement(t.tr,null,l.createElement(t.th,null,"Property"),l.createElement(t.th,null,"Description"),l.createElement(t.th,null,"Values"),l.createElement(t.th,null,"Default value"))),l.createElement(t.tbody,null,l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"dataTestId")),l.createElement(t.td,null,"Data test id of pagination."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,"hds-pagination")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"hideNextButton")),l.createElement(t.td,null,"Hides the next button."),l.createElement(t.td,null,l.createElement(t.code,null,"boolean")),l.createElement(t.td,null,"false")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"hidePrevButton")),l.createElement(t.td,null,"Hides the previous button."),l.createElement(t.td,null,l.createElement(t.code,null,"boolean")),l.createElement(t.td,null,"false")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"language")),l.createElement(t.td,null,"Language of the component."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,"fi")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"onChange")),l.createElement(t.td,null,"Callback fired when the page is changed."),l.createElement(t.td,null,l.createElement(t.code,null,"function")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"pageCount")),l.createElement(t.td,null,"The total number of pages."),l.createElement(t.td,null,l.createElement(t.code,null,"number")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"pageHref")),l.createElement(t.td,null,"A function for generating the href of pages."),l.createElement(t.td,null,l.createElement(t.code,null,"function")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"pageIndex")),l.createElement(t.td,null,"The active page index."),l.createElement(t.td,null,l.createElement(t.code,null,"number")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"paginationAriaLabel")),l.createElement(t.td,null,"Aria-label for the pagination nav element."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"siblingCount")),l.createElement(t.td,null,"Number of always visible pages before and after the current page."),l.createElement(t.td,null,l.createElement(t.code,null,"number")),l.createElement(t.td,null,"1")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"theme")),l.createElement(t.td,null,"Theme prop for customisation of the Pagination component."),l.createElement(t.td,null,l.createElement(t.code,null,"object")),l.createElement(t.td,null,"-")))))}function c(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){return void 0===e&&(e={}),l.createElement(r,e,l.createElement(o,e))}},406:function(e,t,n){n.r(t);var a=n(11151),l=n(67294),s=n(83428),i=n(57674),r=n(89482),o=(n(18607),n(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,a.ah)(),e.components);return o.Z||d("PageTabs",!1),o.Z.Tab||d("PageTabs.Tab",!0),o.Z.TabList||d("PageTabs.TabList",!0),o.Z.TabPanel||d("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"pagination",style:{position:"relative"}},"Pagination",l.createElement(t.a,{href:"#pagination","aria-label":"pagination permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(s.S,{type:"info"},"Stable"),l.createElement(s.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(i.Z)),"\n",l.createElement(r.Z,null,"The pagination component allows the user to navigate between pages when content is split into several pages."),"\n",l.createElement(o.Z,{pageContext:e.pageContext},l.createElement(o.Z.TabList,null,l.createElement(o.Z.Tab,{href:"/"},"Usage"),l.createElement(o.Z.Tab,{href:"/code"},"Code"),l.createElement(o.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(o.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(o.Z.TabPanel,null,e.children)))}function d(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,a.ah)(),e.components);return t?l.createElement(t,e,l.createElement(c,e)):c(e)}},89482:function(e,t,n){var a=n(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:n="var(--fontsize-body-xl)",style:l={},children:s}=e;return a.createElement("p",{style:{fontSize:n,color:t,maxWidth:600,...l}},s)}},26127:function(e,t,n){var a=n(67294),l=n(14160),s=n(94671);const i="PageTabList",r="PageTabPanel",o="PageTab",c=e=>{var t;let{pageContext:n,children:c}=e;const d=n.frontmatter.slug,u=Array.isArray(c)?c:[c],m=u.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===i)),p=u.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===r)),h=null===(t=m.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===o)),b=h.findIndex((e=>d.endsWith(e.props.href))),g=-1===b?0:b,E=0===g?d:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(d);return a.createElement(s.a,{initiallyActiveTab:g},a.createElement(s.a.TabList,{className:"page-tabs-list"},h.map((e=>a.createElement(s.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?E:E+e.props.href))},e.props.children)))),h.map(((e,t)=>a.createElement(s.a.TabPanel,{key:e.props.href},g===t?p.props.children:a.createElement("div",null)))))},d=e=>{let{children:t}=e;return a.createElement(s.a.TabList,null,t)};d.componentName=i;const u=e=>{let{href:t,slug:n,children:l}=e;return a.createElement(s.a.Tab,null,l)};u.componentName=o;const m=e=>{let{children:t}=e;return a.createElement(s.a.TabPanel,null,t)};m.componentName=r,c.TabList=d,c.Tab=u,c.TabPanel=m,t.Z=c},57674:function(e,t,n){var a=n(67294),l=n(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return a.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},a.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>a.createElement("li",{key:t},a.createElement("span",{className:"status-name"},t),a.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-pagination-customisation-mdx-a62e3e65aef79bddea7c.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-pagination-customisation-mdx-a62e3e65aef79bddea7c.js
new file mode 100644
index 00000000000..e3bf3b381d3
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-pagination-customisation-mdx-a62e3e65aef79bddea7c.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[3098,3906],{83428:function(e,a,t){t.d(a,{S:function(){return c}});var n=t(80136),l=t(67294),s=t(7444),i=t(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,s.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const r=e=>{let{icon:a}=e;return l.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},a)},c=e=>{var{children:a,className:t,dataTestId:s,type:c="neutral",iconLeft:u}=e,d=(0,n._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,i.c)(o.statusLabel,o[c],u&&o.statusLabelWithIcon,t),"data-testid":s},d),u&&l.createElement(r,{icon:u}),a)}},11119:function(e,a,t){t.r(a);var n=t(11151),l=t(67294),s=t(1132),i=t(406);const o=e=>{let{children:a,pageContext:t}=e;return l.createElement(i.default,{pageContext:t},a)};function r(e){const a=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",p:"p",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",pre:"pre"},(0,n.ah)(),e.components),{Playground:t}=a;return t||function(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Playground",!0),l.createElement(l.Fragment,null,l.createElement(a.h2,{id:"customisation",style:{position:"relative"}},"Customisation",l.createElement(a.a,{href:"#customisation","aria-label":"customisation permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.h3,{id:"customisation-properties",style:{position:"relative"}},"Customisation properties",l.createElement(a.a,{href:"#customisation-properties","aria-label":"customisation properties permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.p,null,"In Core version, you can either use the ",l.createElement(a.code,null,"style")," or ",l.createElement(a.code,null,"class")," attributes in the HTML to customise the component."),"\n",l.createElement(a.p,null,"In React version, you can use the ",l.createElement(a.code,null,"theme")," property to customise the component."),"\n",l.createElement(a.p,null,"See all available theme variables in the table below."),"\n",l.createElement(a.table,null,l.createElement(a.thead,null,l.createElement(a.tr,null,l.createElement(a.th,null,"Theme variable"),l.createElement(a.th,null,"Description"))),l.createElement(a.tbody,null,l.createElement(a.tr,null,l.createElement(a.td,null,l.createElement(a.code,null,"--active-page-background-color")),l.createElement(a.td,null,"Colour of the active page background. Use black, white or any of the brand colours.")),l.createElement(a.tr,null,l.createElement(a.td,null,"[Table 1:Pagination theme variables]"),l.createElement(a.td)))),"\n",l.createElement(a.h3,{id:"customisation-example",style:{position:"relative"}},"Customisation example",l.createElement(a.a,{href:"#customisation-example","aria-label":"customisation example permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t,{scope:{Pagination:s.P,useState:l.useState}},l.createElement(a.pre,null,l.createElement(a.code,{className:"language-jsx"},"import { Pagination } from 'hds-react';\n\n() => {\n  const [pageIndex, setPageIndex] = useState(0);\n  const theme = {\n    '--active-page-background-color': 'var(--color-bus)',\n  };\n  return (\n    <Pagination\n      language=\"en\"\n      onChange={(event, index) => {\n        event.preventDefault();\n        setPageIndex(index);\n      }}\n      pageCount={9}\n      pageHref={() => '#'}\n      pageIndex={pageIndex}\n      paginationAriaLabel=\"Pagination 1\"\n      siblingCount={9}\n      theme={theme}\n    />\n  )\n}\n")),l.createElement(a.pre,null,l.createElement(a.code,{className:"language-html"},'<style scoped>\n  .custom-active-page-background-color {\n    --active-page-background-color: var(--color-bus);\n  }\n</style>\n\n<div class="hds-pagination-container">\n  <nav\n    class="hds-pagination custom-active-page-background-color"\n    role="navigation"\n    aria-label="Pagination"\n    data-next="Next"\n    style="--active-page-background-color: var(--color-bus);"\n  >\n    <button\n      type="button"\n      disabled\n      class="hds-button hds-button--supplementary hds-button--theme-black hds-pagination__button-prev"\n    >\n      <span aria-hidden="true" class="hds-icon hds-icon--angle-left"></span>\n      <span class="hds-button__label">Previous</span>\n    </button>\n    <ul class="hds-pagination__pages">\n      <li>\n        <a\n          class="hds-pagination__item-link hds-pagination__item-link--active"\n          href="#"\n          title="Current page"\n          aria-label="Page 1"\n          aria-current="page"\n        >\n          1\n        </a>\n      </li>\n      <li>\n        <a class="hds-pagination__item-link" href="#" aria-label="Page 2" title="Go to page 2"> 2 </a>\n      </li>\n      <li>\n        <a class="hds-pagination__item-link" href="#" aria-label="Page 3" title="Go to page 3"> 3 </a>\n      </li>\n      <li>\n        <a class="hds-pagination__item-link" href="#" aria-label="Page 4" title="Go to page 4"> 4 </a>\n      </li>\n      <li>\n        <a class="hds-pagination__item-link" href="#" aria-label="Page 5" title="Go to page 5"> 5 </a>\n      </li>\n      <li>\n        <a class="hds-pagination__item-link" href="#" aria-label="Page 6" title="Go to page 6"> 6 </a>\n      </li>\n      <li>\n        <a class="hds-pagination__item-link" href="#" aria-label="Page 7" title="Go to page 7"> 7 </a>\n      </li>\n      <li>\n        <a class="hds-pagination__item-link" href="#" aria-label="Page 8" title="Go to page 8"> 8 </a>\n      </li>\n      <li>\n        <a class="hds-pagination__item-link" href="#" aria-label="Page 9" title="Go to page 9"> 9 </a>\n      </li>\n    </ul>\n    <div class="hds-pagination__item hds-pagination__next-button">\n      <button\n        type="button"\n        class="hds-button hds-button--supplementary hds-button--theme-black hds-pagination__button-next"\n      >\n        <span class="hds-button__label">Next</span>\n        <span aria-hidden="true" class="hds-icon hds-icon--angle-right"></span>\n      </button>\n    </div>\n  </nav>\n</div>\n'))))}a.default=function(e){return void 0===e&&(e={}),l.createElement(o,e,l.createElement(r,e))}},406:function(e,a,t){t.r(a);var n=t(11151),l=t(67294),s=t(83428),i=t(57674),o=t(89482),r=(t(18607),t(26127));function c(e){const a=Object.assign({h1:"h1",a:"a",span:"span"},(0,n.ah)(),e.components);return r.Z||u("PageTabs",!1),r.Z.Tab||u("PageTabs.Tab",!0),r.Z.TabList||u("PageTabs.TabList",!0),r.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(a.h1,{id:"pagination",style:{position:"relative"}},"Pagination",l.createElement(a.a,{href:"#pagination","aria-label":"pagination permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(s.S,{type:"info"},"Stable"),l.createElement(s.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(i.Z)),"\n",l.createElement(o.Z,null,"The pagination component allows the user to navigate between pages when content is split into several pages."),"\n",l.createElement(r.Z,{pageContext:e.pageContext},l.createElement(r.Z.TabList,null,l.createElement(r.Z.Tab,{href:"/"},"Usage"),l.createElement(r.Z.Tab,{href:"/code"},"Code"),l.createElement(r.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(r.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(r.Z.TabPanel,null,e.children)))}function u(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,n.ah)(),e.components);return a?l.createElement(a,e,l.createElement(c,e)):c(e)}},89482:function(e,a,t){var n=t(67294);a.Z=e=>{let{color:a="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:l={},children:s}=e;return n.createElement("p",{style:{fontSize:t,color:a,maxWidth:600,...l}},s)}},26127:function(e,a,t){var n=t(67294),l=t(14160),s=t(94671);const i="PageTabList",o="PageTabPanel",r="PageTab",c=e=>{var a;let{pageContext:t,children:c}=e;const u=t.frontmatter.slug,d=Array.isArray(c)?c:[c],h=d.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===i)),p=d.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===o)),m=null===(a=h.props)||void 0===a?void 0:a.children.filter((e=>e.type.componentName===r)),b=m.findIndex((e=>u.endsWith(e.props.href))),g=-1===b?0:b,_=0===g?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return n.createElement(s.a,{initiallyActiveTab:g},n.createElement(s.a.TabList,{className:"page-tabs-list"},m.map((e=>n.createElement(s.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?_:_+e.props.href))},e.props.children)))),m.map(((e,a)=>n.createElement(s.a.TabPanel,{key:e.props.href},g===a?p.props.children:n.createElement("div",null)))))},u=e=>{let{children:a}=e;return n.createElement(s.a.TabList,null,a)};u.componentName=i;const d=e=>{let{href:a,slug:t,children:l}=e;return n.createElement(s.a.Tab,null,l)};d.componentName=r;const h=e=>{let{children:a}=e;return n.createElement(s.a.TabPanel,null,a)};h.componentName=o,c.TabList=u,c.Tab=d,c.TabPanel=h,a.Z=c},57674:function(e,a,t){var n=t(67294),l=t(45422);a.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return n.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},n.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((a=>n.createElement("li",{key:a},n.createElement("span",{className:"status-name"},a),n.createElement("span",null,e[a]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-pagination-index-mdx-1731dbeb41318cdfdded.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-pagination-index-mdx-1731dbeb41318cdfdded.js
new file mode 100644
index 00000000000..bae55974cbd
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-pagination-index-mdx-1731dbeb41318cdfdded.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[9708,3906],{83428:function(e,t,a){a.d(t,{S:function(){return c}});var n=a(80136),l=a(67294),s=a(7444),i=a(34300),r={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,s.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:t}=e;return l.createElement("span",{className:r.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:s,type:c="neutral",iconLeft:u}=e,h=(0,n._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,i.c)(r.statusLabel,r[c],u&&r.statusLabelWithIcon,a),"data-testid":s},h),u&&l.createElement(o,{icon:u}),t)}},12119:function(e,t,a){a.r(t),a.d(t,{BasicPagination:function(){return o},TruncationPagination:function(){return c},WithoutPrevAndNextButton:function(){return u}});var n=a(11151),l=a(67294),s=a(406),i=a(1132);const r=e=>{let{children:t,pageContext:a}=e;return l.createElement(s.default,{pageContext:a},t)},o=()=>{const{0:e,1:t}=(0,l.useState)(0);return l.createElement(i.P,{onChange:(e,a)=>{e.preventDefault(),t(a)},paginationAriaLabel:"Pagination 1",pageCount:9,pageIndex:e,pageHref:()=>"#",language:"en",siblingCount:4})},c=()=>{const e=Object.assign({div:"div"},(0,n.ah)()),{0:t,1:a}=(0,l.useState)(3),{0:s,1:r}=(0,l.useState)(16),{0:o,1:c}=(0,l.useState)(64);return l.createElement(e.div,null,l.createElement(i.P,{language:"en",onChange:(e,t)=>{e.preventDefault(),a(t)},pageCount:68,pageHref:()=>"#",pageIndex:t,paginationAriaLabel:"Pagination 2",siblingCount:2}),l.createElement(i.P,{language:"en",onChange:(e,t)=>{e.preventDefault(),r(t)},pageCount:68,pageHref:()=>"#",pageIndex:s,paginationAriaLabel:"Pagination 3",siblingCount:2}),l.createElement(i.P,{language:"en",onChange:(e,t)=>{e.preventDefault(),c(t)},pageCount:68,pageHref:()=>"#",pageIndex:o,paginationAriaLabel:"Pagination 4",siblingCount:2}))},u=()=>{const{0:e,1:t}=(0,l.useState)(7);return l.createElement(i.P,{hideNextButton:!0,hidePrevButton:!0,onChange:(e,a)=>{e.preventDefault(),t(a)},paginationAriaLabel:"Pagination 5",pageCount:68,pageIndex:e,pageHref:()=>"#",language:"en"})};function h(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",em:"em",strong:"strong",h4:"h4",p:"p",code:"code"},(0,n.ah)(),e.components),{PlaygroundPreview:a}=t;return a||function(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("PlaygroundPreview",!0),l.createElement(l.Fragment,null,l.createElement(t.h2,{id:"usage",style:{position:"relative"}},"Usage",l.createElement(t.a,{href:"#usage","aria-label":"usage permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h3,{id:"example",style:{position:"relative"}},"Example",l.createElement(t.a,{href:"#example","aria-label":"example permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n","\n",l.createElement(a,null,l.createElement(o)),"\n",l.createElement(t.h3,{id:"principles",style:{position:"relative"}},"Principles",l.createElement(t.a,{href:"#principles","aria-label":"principles permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,"Pagination is used when content is divided into multiple pages and the user needs to be able to move between those pages."),"\n",l.createElement(t.li,null,"You must at least have three (3) pages in the pagination."),"\n",l.createElement(t.li,null,"Keep the amount of shown pages between screen size changes consistent.","\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,"Aim to show at least 5 pages and 9 pages at maximum in one row."),"\n",l.createElement(t.li,null,"You can change the amount of shown pages when the view switches from desktop to mobile."),"\n"),"\n"),"\n",l.createElement(t.li,null,"A good rule of thumb for a maximum amount of items per page is 36. However, this heavily depends on the type of items displayed.","\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,"With smaller items, the number can be larger, e.g. 72."),"\n"),"\n"),"\n",l.createElement(t.li,null,"The pagination must always include ",l.createElement(t.em,null,"Previous")," and ",l.createElement(t.em,null,"Next")," page buttons. Do not hide or omit these buttons."),"\n",l.createElement(t.li,null,'The HDS pagination component supports truncation, which means hiding part of the pages with the "..." (ellipsis) element.',"\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,"Truncation is recommended if your page numbers start to spread into multiple rows or if you would have more than 9 page numbers in one row."),"\n",l.createElement(t.li,null,"Truncation can happen either at the start, at the end, or at both ends. See the ",l.createElement(t.a,{href:"#with-truncation"},"truncation example")," below for more information."),"\n"),"\n"),"\n",l.createElement(t.li,null,"The pagination component must be aligned to the center of its container.","\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,"On mobile, the previous and next buttons are aligned to their respective edges of the container."),"\n"),"\n"),"\n"),"\n",l.createElement(t.h3,{id:"should-i-use-pages-or-dynamically-load-more-content",style:{position:"relative"}},"Should I use pages or dynamically load more content?",l.createElement(t.a,{href:"#should-i-use-pages-or-dynamically-load-more-content","aria-label":"should i use pages or dynamically load more content permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,l.createElement(t.strong,null,"Use pages when"),"\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,"the amount of items in one page/view exceeds 36 items"),"\n",l.createElement(t.li,null,"divided into pages, you will have at least 3 pages"),"\n",l.createElement(t.li,null,"you are not sure how much content there will be (i.e. there may be 10 pages or 100 pages)"),"\n",l.createElement(t.li,null,"the user may need to be able to move to the end of the item list"),"\n"),"\n"),"\n",l.createElement(t.li,null,l.createElement(t.strong,null,"Use dynamic loading when"),"\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,"the amount of items in one page/view is less than 36"),"\n",l.createElement(t.li,null,"divided into pages, you will have less than 3 pages"),"\n",l.createElement(t.li,null,"you have an estimation of how many items there will be"),"\n",l.createElement(t.li,null,"the user does not need to be able to move to the end of the item list"),"\n"),"\n"),"\n"),"\n",l.createElement(t.h3,{id:"variations",style:{position:"relative"}},"Variations",l.createElement(t.a,{href:"#variations","aria-label":"variations permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h4,{id:"basic",style:{position:"relative"}},"Basic",l.createElement(t.a,{href:"#basic","aria-label":"basic permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"By default, the HDS pagination shows a list of pages, and one page is marked as the active page. The previous and next buttons are always shown and they drop under the page number row on smaller screens."),"\n",l.createElement(a,null,l.createElement(o)),"\n",l.createElement(t.h4,{id:"with-truncation",style:{position:"relative"}},"With truncation",l.createElement(t.a,{href:"#with-truncation","aria-label":"with truncation permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,'In the truncated pagination variant some of the pages are hidden with the "..." (ellipsis) element. In the React version,\nyou can use the property ',l.createElement(t.code,null,"siblingCount")," that tells the number of always visible pages before and after the current page.\nTruncation can happen either at the start, in the end, or at both ends - depending on the page the user is currently on."),"\n",l.createElement(t.p,null,"Note that you must keep the amount of shown pages and ellipsis consistent. For example, in the examples below,\nthere are always at least 2 pages before and after the current page (",l.createElement(t.code,null,"siblingCount")," is 2). And the total number of\npagination elements is 9, regardless of the page the user is currently on. This keeps the pagination element width\nconsistent, which leads to a better user experience."),"\n","\n",l.createElement(a,null,l.createElement(c)),"\n",l.createElement(t.h4,{id:"without-previous-and-next-buttons",style:{position:"relative"}},"Without previous and next buttons",l.createElement(t.a,{href:"#without-previous-and-next-buttons","aria-label":"without previous and next buttons permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"While not recommended, it's possible to use the pagination component without the previous and next buttons."),"\n","\n",l.createElement(a,null,l.createElement(u)))}t.default=function(e){return void 0===e&&(e={}),l.createElement(r,e,l.createElement(h,e))}},406:function(e,t,a){a.r(t);var n=a(11151),l=a(67294),s=a(83428),i=a(57674),r=a(89482),o=(a(18607),a(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,n.ah)(),e.components);return o.Z||u("PageTabs",!1),o.Z.Tab||u("PageTabs.Tab",!0),o.Z.TabList||u("PageTabs.TabList",!0),o.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"pagination",style:{position:"relative"}},"Pagination",l.createElement(t.a,{href:"#pagination","aria-label":"pagination permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(s.S,{type:"info"},"Stable"),l.createElement(s.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(i.Z)),"\n",l.createElement(r.Z,null,"The pagination component allows the user to navigate between pages when content is split into several pages."),"\n",l.createElement(o.Z,{pageContext:e.pageContext},l.createElement(o.Z.TabList,null,l.createElement(o.Z.Tab,{href:"/"},"Usage"),l.createElement(o.Z.Tab,{href:"/code"},"Code"),l.createElement(o.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(o.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(o.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,n.ah)(),e.components);return t?l.createElement(t,e,l.createElement(c,e)):c(e)}},89482:function(e,t,a){var n=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:l={},children:s}=e;return n.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...l}},s)}},26127:function(e,t,a){var n=a(67294),l=a(14160),s=a(94671);const i="PageTabList",r="PageTabPanel",o="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const u=a.frontmatter.slug,h=Array.isArray(c)?c:[c],m=h.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===i)),d=h.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===r)),p=null===(t=m.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===o)),g=p.findIndex((e=>u.endsWith(e.props.href))),b=-1===g?0:g,E=0===b?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return n.createElement(s.a,{initiallyActiveTab:b},n.createElement(s.a.TabList,{className:"page-tabs-list"},p.map((e=>n.createElement(s.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?E:E+e.props.href))},e.props.children)))),p.map(((e,t)=>n.createElement(s.a.TabPanel,{key:e.props.href},b===t?d.props.children:n.createElement("div",null)))))},u=e=>{let{children:t}=e;return n.createElement(s.a.TabList,null,t)};u.componentName=i;const h=e=>{let{href:t,slug:a,children:l}=e;return n.createElement(s.a.Tab,null,l)};h.componentName=o;const m=e=>{let{children:t}=e;return n.createElement(s.a.TabPanel,null,t)};m.componentName=r,c.TabList=u,c.Tab=h,c.TabPanel=m,t.Z=c},57674:function(e,t,a){var n=a(67294),l=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return n.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},n.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>n.createElement("li",{key:t},n.createElement("span",{className:"status-name"},t),n.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-pagination-tabs-mdx-9a722e4d8436c9376fa5.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-pagination-tabs-mdx-9a722e4d8436c9376fa5.js
new file mode 100644
index 00000000000..0a2703668aa
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-pagination-tabs-mdx-9a722e4d8436c9376fa5.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[3906],{83428:function(e,a,t){t.d(a,{S:function(){return c}});var s=t(80136),l=t(67294),n=t(7444),r=t(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const i=e=>{let{icon:a}=e;return l.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},a)},c=e=>{var{children:a,className:t,dataTestId:n,type:c="neutral",iconLeft:b}=e,u=(0,s._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(o.statusLabel,o[c],b&&o.statusLabelWithIcon,t),"data-testid":n},u),b&&l.createElement(i,{icon:b}),a)}},406:function(e,a,t){t.r(a);var s=t(11151),l=t(67294),n=t(83428),r=t(57674),o=t(89482),i=(t(18607),t(26127));function c(e){const a=Object.assign({h1:"h1",a:"a",span:"span"},(0,s.ah)(),e.components);return i.Z||b("PageTabs",!1),i.Z.Tab||b("PageTabs.Tab",!0),i.Z.TabList||b("PageTabs.TabList",!0),i.Z.TabPanel||b("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(a.h1,{id:"pagination",style:{position:"relative"}},"Pagination",l.createElement(a.a,{href:"#pagination","aria-label":"pagination permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(n.S,{type:"info"},"Stable"),l.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(o.Z,null,"The pagination component allows the user to navigate between pages when content is split into several pages."),"\n",l.createElement(i.Z,{pageContext:e.pageContext},l.createElement(i.Z.TabList,null,l.createElement(i.Z.Tab,{href:"/"},"Usage"),l.createElement(i.Z.Tab,{href:"/code"},"Code"),l.createElement(i.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(i.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(i.Z.TabPanel,null,e.children)))}function b(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,s.ah)(),e.components);return a?l.createElement(a,e,l.createElement(c,e)):c(e)}},89482:function(e,a,t){var s=t(67294);a.Z=e=>{let{color:a="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:l={},children:n}=e;return s.createElement("p",{style:{fontSize:t,color:a,maxWidth:600,...l}},n)}},26127:function(e,a,t){var s=t(67294),l=t(14160),n=t(94671);const r="PageTabList",o="PageTabPanel",i="PageTab",c=e=>{var a;let{pageContext:t,children:c}=e;const b=t.frontmatter.slug,u=Array.isArray(c)?c:[c],d=u.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===r)),m=u.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===o)),h=null===(a=d.props)||void 0===a?void 0:a.children.filter((e=>e.type.componentName===i)),p=h.findIndex((e=>b.endsWith(e.props.href))),_=-1===p?0:p,g=0===_?b:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(b);return s.createElement(n.a,{initiallyActiveTab:_},s.createElement(n.a.TabList,{className:"page-tabs-list"},h.map((e=>s.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?g:g+e.props.href))},e.props.children)))),h.map(((e,a)=>s.createElement(n.a.TabPanel,{key:e.props.href},_===a?m.props.children:s.createElement("div",null)))))},b=e=>{let{children:a}=e;return s.createElement(n.a.TabList,null,a)};b.componentName=r;const u=e=>{let{href:a,slug:t,children:l}=e;return s.createElement(n.a.Tab,null,l)};u.componentName=i;const d=e=>{let{children:a}=e;return s.createElement(n.a.TabPanel,null,a)};d.componentName=o,c.TabList=b,c.Tab=u,c.TabPanel=d,a.Z=c},57674:function(e,a,t){var s=t(67294),l=t(45422);a.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return s.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},s.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((a=>s.createElement("li",{key:a},s.createElement("span",{className:"status-name"},a),s.createElement("span",null,e[a]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-password-input-accessibility-mdx-e5ade55fd3f84033da91.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-password-input-accessibility-mdx-e5ade55fd3f84033da91.js
new file mode 100644
index 00000000000..c0b3e3a12a0
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-password-input-accessibility-mdx-e5ade55fd3f84033da91.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[4763,7187],{83428:function(e,t,a){a.d(t,{S:function(){return c}});var s=a(80136),l=a(67294),n=a(7444),r=a(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:t}=e;return l.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:n,type:c="neutral",iconLeft:u}=e,d=(0,s._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(i.statusLabel,i[c],u&&i.statusLabelWithIcon,a),"data-testid":n},d),u&&l.createElement(o,{icon:u}),t)}},22677:function(e,t,a){a.r(t);var s=a(11151),l=a(67294),n=a(80699),r=a(54716);const i=e=>{let{children:t,pageContext:a}=e;return l.createElement(r.default,{pageContext:a},t)};function o(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",code:"code"},(0,s.ah)(),e.components);return l.createElement(l.Fragment,null,l.createElement(t.h2,{id:"accessibility",style:{position:"relative"}},"Accessibility",l.createElement(t.a,{href:"#accessibility","aria-label":"accessibility permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h3,{id:"pay-attention-to",style:{position:"relative"}},"Pay attention to",l.createElement(t.a,{href:"#pay-attention-to","aria-label":"pay attention to permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,"In the case of an insufficient password, aim to provide clear instructions to the user on how to correct the mistake. Always provide a text description of the error."),"\n",l.createElement(t.li,null,"It is required to use ",l.createElement(t.code,null,"autocomplete")," attribute if input control is listed in the common input purposes list. You can read the full list of common input purposes at ",l.createElement(n.Z,{href:"https://www.w3.org/TR/WCAG21/#input-purposes"},"WCAG 2.1 documentation website"),". You can read more about the requirement from ",l.createElement(n.Z,{href:"https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose"},"WCAG 2.1 Identify Input Purpose guideline"),"."),"\n",l.createElement(t.li,null,"Place sign-in in its own ",l.createElement(t.code,null,"form")," element and use ",l.createElement(t.code,null,"landmark")," region to mark the login area. This allows assistive technologies to quickly locate and skip to the login section."),"\n"))}t.default=function(e){return void 0===e&&(e={}),l.createElement(i,e,l.createElement(o,e))}},54716:function(e,t,a){a.r(t);var s=a(11151),l=a(67294),n=a(83428),r=a(57674),i=a(89482),o=(a(18607),a(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,s.ah)(),e.components);return o.Z||u("PageTabs",!1),o.Z.Tab||u("PageTabs.Tab",!0),o.Z.TabList||u("PageTabs.TabList",!0),o.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"passwordinput",style:{position:"relative"}},"PasswordInput",l.createElement(t.a,{href:"#passwordinput","aria-label":"passwordinput permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(n.S,{type:"info"},"Stable"),l.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(i.Z,null,"A password field is a foundational input field component that the user can interact with and specifically input password data."),"\n",l.createElement(o.Z,{pageContext:e.pageContext},l.createElement(o.Z.TabList,null,l.createElement(o.Z.Tab,{href:"/"},"Usage"),l.createElement(o.Z.Tab,{href:"/code"},"Code"),l.createElement(o.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(o.Z.Tab,{href:"/security"},"Security")),l.createElement(o.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,s.ah)(),e.components);return t?l.createElement(t,e,l.createElement(c,e)):c(e)}},89482:function(e,t,a){var s=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:l={},children:n}=e;return s.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...l}},n)}},26127:function(e,t,a){var s=a(67294),l=a(14160),n=a(94671);const r="PageTabList",i="PageTabPanel",o="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const u=a.frontmatter.slug,d=Array.isArray(c)?c:[c],b=d.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===r)),m=d.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===i)),p=null===(t=b.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===o)),h=p.findIndex((e=>u.endsWith(e.props.href))),f=-1===h?0:h,_=0===f?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return s.createElement(n.a,{initiallyActiveTab:f},s.createElement(n.a.TabList,{className:"page-tabs-list"},p.map((e=>s.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?_:_+e.props.href))},e.props.children)))),p.map(((e,t)=>s.createElement(n.a.TabPanel,{key:e.props.href},f===t?m.props.children:s.createElement("div",null)))))},u=e=>{let{children:t}=e;return s.createElement(n.a.TabList,null,t)};u.componentName=r;const d=e=>{let{href:t,slug:a,children:l}=e;return s.createElement(n.a.Tab,null,l)};d.componentName=o;const b=e=>{let{children:t}=e;return s.createElement(n.a.TabPanel,null,t)};b.componentName=i,c.TabList=u,c.Tab=d,c.TabPanel=b,t.Z=c},57674:function(e,t,a){var s=a(67294),l=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return s.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},s.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>s.createElement("li",{key:t},s.createElement("span",{className:"status-name"},t),s.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-password-input-code-mdx-95447e1fa1b962d32445.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-password-input-code-mdx-95447e1fa1b962d32445.js
new file mode 100644
index 00000000000..17bf9a884ee
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-password-input-code-mdx-95447e1fa1b962d32445.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[5467,7187],{4112:function(e,t,n){n.d(t,{I:function(){return o},a:function(){return r}});var a=n(67294),l=n(32719);const r=e=>{let{ariaLabel:t="eye",ariaLabelledby:n,ariaHidden:r=!0,className:o="",color:s,size:i="s",style:c={}}=e;return a.createElement("svg",{className:[l.s.icon,l.s[i],o].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":n,"aria-hidden":r,color:s,style:c},a.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M12 4.5C16.0501 4.5 19.7168 7 23 12C19.7168 17 16.0501 19.5 12 19.5C7.94991 19.5 4.28325 17 1 12C4.28325 7 7.94991 4.5 12 4.5ZM12 6.5C9.04854 6.5 6.2496 8.20372 3.57529 11.8024L3.43 12L3.57529 12.1976C6.19914 15.7284 8.94296 17.435 11.8331 17.4982L12 17.5C14.9515 17.5 17.7504 15.7963 20.4247 12.1976L20.5695 12L20.4247 11.8024C17.8009 8.27162 15.057 6.56497 12.1669 6.50182L12 6.5ZM12 8C14.2091 8 16 9.79086 16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8ZM12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10Z",fill:"currentColor"}))},o=e=>{let{ariaLabel:t="eye-crossed",ariaLabelledby:n,ariaHidden:r=!0,className:o="",color:s,size:i="s",style:c={}}=e;return a.createElement("svg",{className:[l.s.icon,l.s[i],o].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":n,"aria-hidden":r,color:s,style:c},a.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M19.7929 2.79291L21.2071 4.20712L4.70711 20.7071L3.29289 19.2929L19.7929 2.79291ZM19.6465 7.88777C20.8055 8.9897 21.9234 10.3604 23 12C19.7168 17 16.0501 19.5 12 19.5C10.8495 19.5 9.73001 19.2983 8.64142 18.8948L10.2433 17.2931C10.7683 17.4185 11.2982 17.4865 11.8331 17.4982L12 17.5C14.9515 17.5 17.7504 15.7963 20.4247 12.1976L20.5695 12L20.4247 11.8025C19.7033 10.8317 18.9728 9.99883 18.2328 9.3001L19.6465 7.88777ZM12 4.50001C13.1505 4.50001 14.27 4.70174 15.3586 5.10519L13.7577 6.70716C13.2323 6.58159 12.7021 6.51353 12.1669 6.50184L12 6.50001C9.04854 6.50001 6.2496 8.20374 3.57529 11.8025L3.43 12L3.57529 12.1976C4.29669 13.1683 5.02715 14.0012 5.76723 14.6999L4.35355 16.1123C3.19447 15.0103 2.07662 13.6396 1 12C4.28325 7.00001 7.94991 4.50001 12 4.50001ZM15.976 11.5592C15.9919 11.7039 16 11.851 16 12C16 14.2092 14.2091 16 12 16C11.851 16 11.7039 15.9919 11.5592 15.976L15.976 11.5592ZM12 8.00001C12.149 8.00001 12.2961 8.00816 12.4408 8.02403L8.02402 12.4409C8.00815 12.2961 8 12.149 8 12C8 9.79088 9.79086 8.00001 12 8.00001Z",fill:"currentColor"}))}},93667:function(e,t,n){n.d(t,{I:function(){return i},t:function(){return s}});var a=n(67294),l=n(7444),r=n(34300),o=n(41125),s={root:"TextInput-module_root__2CMNr text-input_hds-text-input__2LODq",inputWrapper:"TextInput-module_inputWrapper__3Rvel text-input_hds-text-input__input-wrapper__1OqYG",input:"TextInput-module_input__1BlHi text-input_hds-text-input__input__GJm5C",hasButton:"TextInput-module_hasButton__2KCM1",errorText:"TextInput-module_errorText__3pizm text-input_hds-text-input__error-text__1GLYk",helperText:"TextInput-module_helperText__2dLR6 text-input_hds-text-input__helper-text__3V2KM",invalidText:"TextInput-module_invalidText__1w4sm text-input_hds-text-input__helper-text__3V2KM",successText:"TextInput-module_successText__2NMCP text-input_hds-text-input__success-text__3EOiy",infoText:"TextInput-module_infoText__zHOGs text-input_hds-text-input__info-text__3bqzy",invalid:"TextInput-module_invalid__2iYo2 text-input_hds-text-input--invalid__1UfKC",success:"TextInput-module_success__1kDOm text-input_hds-text-input--success__3dm2J",readOnly:"TextInput-module_readOnly__j615N undefined",buttonWrapper:"TextInput-module_buttonWrapper___filA text-input_hds-text-input__buttons__1RMzT",button:"TextInput-module_button__1ySMX text-input_hds-text-input__button__1Fh0I"};(0,l.s)("@keyframes text-input_fadeIn__2IDZ8{0%{opacity:0}to{opacity:1}}.text-input_hds-text-input__2LODq{--border-width:2px;--outline-width:3px;--input-height:56px;--textarea-height:149px;--icon-size:var(--spacing-m);--helper-color-default:var(--color-black-60);--helper-color-invalid:var(--color-error);--helper-color-success:var(--color-success);--helper-color-info:var(--color-black-90);--helper-color-info-icon:var(--color-coat-of-arms);--icon-color-invalid:var(--color-error);--input-background-default:var(--color-white);--input-background-disabled:var(--color-black-10);--input-border-color-default:var(--color-black-50);--input-border-color-hover:var(--color-black-90);--input-border-color-focus:var(--color-black-90);--input-border-color-invalid:var(--color-error);--input-border-color-disabled:var(--color-black-10);--input-border-color-success:var(--color-success);--input-color-default:var(--color-black-90);--input-color-disabled:var(--color-black-40);--label-color-default:var(--color-black-90);--label-color-invalid:var(--color-black-90);--placeholder-color:var(--color-black-60)}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C{-webkit-appearance:none;background-color:var(--input-background-default);border:var(--border-width) solid var(--input-border-color-default);border-radius:0;box-sizing:border-box;color:var(--input-color-default);font-family:inherit;font-size:1.125em;height:var(--input-height);line-height:normal;margin:0;padding:0 var(--spacing-s);width:100%;will-change:transform,box-shadow}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C:hover{border-color:var(--input-border-color-hover);transition:border-color 85ms ease-out}.text-input_hds-text-input__input-wrapper__1OqYG:focus-within .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-focus);outline:none}.text-input_hds-text-input__2LODq.text-input_hds-text-input--invalid__1UfKC .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-invalid)}.text-input_hds-text-input__2LODq.text-input_hds-text-input--success__3dm2J .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-success)}.text-input_hds-text-input__input-wrapper__1OqYG:focus-within .text-input_hds-text-input__input__GJm5C:not([readonly]){box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);transform:translateZ(0);transition:85ms ease-out;transition-property:box-shadow,transform}.text-input_hds-text-input__label__15F2V{color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.text-input_hds-text-input--invalid__1UfKC .text-input_hds-text-input__label__15F2V{color:var(--label-color-invalid);transition:color 85ms linear}.text-input_hds-text-input__required__z3Hm0{color:var(--color-black-90);display:inline-block;font-size:var(--fontsize-body-xl);line-height:1;margin-left:var(--spacing-2-xs);transform:translateY(var(--spacing-3-xs))}.text-input_hds-text-input__input-wrapper__1OqYG{display:flex;position:relative}.text-input_hds-text-input__2LODq textarea.text-input_hds-text-input__input__GJm5C{font-family:inherit;height:var(--textarea-height);margin:0;min-height:var(--input-height);overflow:auto;padding:var(--spacing-s);resize:vertical}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C::-moz-placeholder{color:var(--placeholder-color);opacity:1}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C::placeholder{color:var(--placeholder-color);opacity:1}.text-input_hds-text-input__helper-text__3V2KM{color:var(--helper-color-default)}.text-input_hds-text-input__error-text__1GLYk,.text-input_hds-text-input__helper-text__3V2KM{display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);white-space:pre-line}.text-input_hds-text-input__error-text__1GLYk{color:var(--helper-color-invalid);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.text-input_hds-text-input__error-text__1GLYk:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__error-text__1GLYk:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--icon-color-invalid);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__success-text__3EOiy{color:var(--helper-color-success);display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative;white-space:pre-wrap}.text-input_hds-text-input__success-text__3EOiy:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__success-text__3EOiy:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--helper-color-success);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__info-text__3bqzy{color:var(--helper-color-info);display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.text-input_hds-text-input__info-text__3bqzy:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__info-text__3bqzy:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--helper-color-info-icon);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C[disabled]{background-color:var(--input-background-disabled);border-color:var(--input-border-color-disabled);color:var(--input-color-disabled);cursor:not-allowed}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C[readonly]{background-color:transparent;border:0;color:var(--input-color-default);padding:0;-webkit-text-fill-color:var(--input-color-default)}.text-input_hds-text-input__buttons__1RMzT{align-items:center;bottom:0;display:flex;font-size:1rem;justify-content:center;margin-right:calc(var(--spacing-s) - var(--spacing-xs) / 2);position:absolute;right:0;top:0}.text-input_hds-text-input__button__1Fh0I{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;display:flex;font:inherit;outline:none;padding:var(--spacing-xs) calc(var(--spacing-xs) / 2)}.text-input_hds-text-input__button__1Fh0I:focus{outline:var(--outline-width) solid var(--color-focus-outline)}.TextInput-module_root__2CMNr{position:relative}.TextInput-module_input__1BlHi.TextInput-module_hasButton__2KCM1{padding-right:calc(2 * var(--spacing-s) + 1.5rem)}.TextInput-module_button__1ySMX:disabled{cursor:not-allowed}.TextInput-module_button__1ySMX:focus{outline:var(--outline-width) solid var(--color-focus-outline)}");const i=e=>{let{children:t,className:n="",errorText:l,helperText:i,hideLabel:c=!1,id:d,invalid:u=!1,isAriaLabelledBy:p=!1,label:h,labelId:m,onBlur:_,required:b=!1,style:x,successText:v,infoText:f,tooltipLabel:g,tooltipText:E,tooltipButtonLabel:w}=e;return a.createElement("div",{onBlur:_,className:(0,r.c)(s.root,u&&s.invalid,v&&s.success,n),style:x},h&&a.createElement(o.F,{id:m,inputId:d,isAriaLabelledBy:p,hidden:c,label:h,required:b,tooltipLabel:g,tooltipButtonLabel:w,tooltipText:E}),a.createElement("div",{className:(0,r.c)(s.inputWrapper)},t),l&&a.createElement("div",{className:s.errorText,id:d+"-error"},l),v&&a.createElement("div",{className:s.successText,id:d+"-success"},v),f&&a.createElement("div",{className:s.infoText,id:d+"-info"},f),i&&a.createElement("div",{className:s.helperText,id:d+"-helper"},i))}},2700:function(e,t,n){n.d(t,{P:function(){return u}});var a=n(80136),l=n(67294),r=n(7444),o=n(93667),s=n(34300),i=n(37776),c=n(4112),d="PasswordInput-module_disabledShowPasswordButton__8eYej";(0,r.s)(".PasswordInput-module_disabledShowPasswordButton__8eYej{color:var(--color-black-40)}");const u=l.forwardRef(((e,t)=>{var{className:n,errorText:r,helperText:u,hideLabel:p,id:h,invalid:m,label:_,required:b,style:x,successText:v,infoText:f,tooltipLabel:g,tooltipText:E,tooltipButtonLabel:w,concealPasswordButtonAriaLabel:y,disabled:C=!1,includeShowPasswordButton:T=!0,initiallyRevealed:k=!1,onBlur:L,revealPasswordButtonAriaLabel:I,type:z}=e,P=(0,a._)(e,["className","errorText","helperText","hideLabel","id","invalid","label","required","style","successText","infoText","tooltipLabel","tooltipText","tooltipButtonLabel","concealPasswordButtonAriaLabel","disabled","includeShowPasswordButton","initiallyRevealed","onBlur","revealPasswordButtonAriaLabel","type"]);const N={className:n,errorText:r,helperText:u,hideLabel:p,id:h,invalid:m,label:_,required:b,style:x,successText:v,infoText:f,tooltipLabel:g,tooltipText:E,tooltipButtonLabel:w};let S,B;T&&([S,B]=(0,l.useState)(k));const M=(0,i.c)(h,u,r,v,f);return l.createElement(o.I,Object.assign({onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||T&&S&&B(!1),"function"==typeof L&&L(e)}},N),l.createElement("input",Object.assign({className:(0,s.c)(o.t.input,T&&o.t.hasButton),disabled:C,id:h,ref:t,required:b,type:T?S?"text":"password":z||"password","aria-describedby":M.length>0?M:null},P)),T&&l.createElement("div",{className:o.t.buttonWrapper},l.createElement("button",Object.assign({className:o.t.button,type:"button",disabled:C},S?{"aria-label":y,onClick:()=>B(!1)}:{"aria-label":I,onClick:()=>B(!0)}),S&&l.createElement(c.I,{"aria-hidden":!0,className:C?d:""}),!S&&l.createElement(c.a,{"aria-hidden":!0,className:C?d:""}))))}))},83428:function(e,t,n){n.d(t,{S:function(){return c}});var a=n(80136),l=n(67294),r=n(7444),o=n(34300),s={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,r.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const i=e=>{let{icon:t}=e;return l.createElement("span",{className:s.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:n,dataTestId:r,type:c="neutral",iconLeft:d}=e,u=(0,a._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,o.c)(s.statusLabel,s[c],d&&s.statusLabelWithIcon,n),"data-testid":r},u),d&&l.createElement(i,{icon:d}),t)}},37776:function(e,t,n){n.d(t,{c:function(){return a}});var a=(e,t,n,a,l)=>[t&&e+"-helper",n&&e+"-error",a&&e+"-success",l&&e+"-info"].filter((e=>e)).join(" ")},5485:function(e,t,n){n.r(t);var a=n(11151),l=n(67294),r=n(2700),o=n(17882),s=n(4112),i=n(54716);const c=e=>{let{children:t,pageContext:n}=e;return l.createElement(i.default,{pageContext:n},t)};function d(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",h4:"h4",pre:"pre",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",strong:"strong",p:"p"},(0,a.ah)(),e.components),{Playground:n,IconCheckCircleFill:i,Link:c,ExternalLink:d,InternalLink:p}=t;return d||u("ExternalLink",!0),i||u("IconCheckCircleFill",!0),p||u("InternalLink",!0),c||u("Link",!0),n||u("Playground",!0),l.createElement(l.Fragment,null,l.createElement(t.h2,{id:"code",style:{position:"relative"}},"Code",l.createElement(t.a,{href:"#code","aria-label":"code permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h3,{id:"code-examples",style:{position:"relative"}},"Code examples",l.createElement(t.a,{href:"#code-examples","aria-label":"code examples permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h4,{id:"default",style:{position:"relative"}},"Default",l.createElement(t.a,{href:"#default","aria-label":"default permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n,{scope:{PasswordInput:r.P}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},'import { PasswordInput } from \'hds-react\';\n\n() => (\n  <div style={{maxWidth: \'320px\'}}>\n    <PasswordInput\n      concealPasswordButtonAriaLabel="Hide password"\n      helperText="Assistive text"\n      id="password-input-1"\n      includeShowPasswordButton\n      label="Password"\n      revealPasswordButtonAriaLabel="Show password"\n      required\n    />\n  </div>\n)\n')),l.createElement(t.pre,null,l.createElement(t.code,{className:"language-html"},'<div class="hds-text-input" style="max-width:320px;">\n  <label for="password-input-2" class="hds-text-input__label">Password<span class="hds-text-input__required">*</span></label>\n  <div class="hds-text-input__input-wrapper">\n    <input\n      id="password-input-2"\n      class="hds-text-input__input"\n      type="password"\n      required\n    />\n    <div class="hds-text-input__buttons">\n      <button\n        type="button"\n        aria-label="Show"\n        class="hds-text-input__button"\n      >\n        <span class="hds-icon hds-icon--eye hds-icon--size-s" aria-hidden="true"></span>\n      </button>\n    </div>\n  </div>\n  <span class="hds-text-input__helper-text">Assistive text</span>\n</div>\n'))),"\n",l.createElement(t.h4,{id:"with-an-external-button",style:{position:"relative"}},"With an external button",l.createElement(t.a,{href:"#with-an-external-button","aria-label":"with an external button permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n,{scope:{PasswordInput:r.P,Button:o.B,IconEyeCrossed:s.I,IconEye:s.a}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},"import { PasswordInput, Button, IconEyeCrossed, IconEye } from 'hds-react';\n\n() => {\n  const [revealPassword, setRevealPassword] = React.useState(false);\n  return (\n    <div style={{ display: \"grid\", gridTemplateColumns: \"320px 240px\", gap: \"var(--spacing-s)\" }}>\n      <PasswordInput\n        label=\"Password\"\n        id=\"password-input-3\"\n        includeShowPasswordButton={false}\n        helperText=\"Assistive text\"\n        type={revealPassword ? 'text' : 'password'}\n        required\n        style={{maxWidth: '320px'}}\n      />\n      <div style={{ display: 'flex', justifyContent: 'center', flexDirection: 'column' }}>\n        <Button\n          variant=\"supplementary\"\n          onClick={() => setRevealPassword(!revealPassword)}\n          iconLeft={revealPassword ? <IconEyeCrossed aria-hidden /> : <IconEye aria-hidden />}\n        >\n          {revealPassword ? 'Hide password' : 'Show password'}\n        </Button>\n      </div>\n    </div>\n  );\n}\n"))),"\n",l.createElement(t.h3,{id:"packages",style:{position:"relative"}},"Packages",l.createElement(t.a,{href:"#packages","aria-label":"packages permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.table,null,l.createElement(t.thead,null,l.createElement(t.tr,null,l.createElement(t.th,null,"Package"),l.createElement(t.th,null,"Included"),l.createElement(t.th,null,"Storybook link"),l.createElement(t.th,null,"Source link"))),l.createElement(t.tbody,null,l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.strong,null,"HDS React")),l.createElement(t.td,null,l.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},l.createElement(i)," Yes ")),l.createElement(t.td,null,l.createElement(c,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-passwordinput--default"},"View in Storybook")),l.createElement(t.td,null,l.createElement(d,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/react/src/components/passwordInput"},"View source"))),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.strong,null,"HDS Core")),l.createElement(t.td,null,l.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},l.createElement(i)," Yes ")),l.createElement(t.td,null,l.createElement(c,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/core/?path=/story/components-password-input--default"},"View in Storybook")),l.createElement(t.td,null,l.createElement(d,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/core/src/components/password-input"},"View source"))))),"\n",l.createElement(t.h3,{id:"properties",style:{position:"relative"}},"Properties",l.createElement(t.a,{href:"#properties","aria-label":"properties permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"Note! You can find the full list of properties in the ",l.createElement(c,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-passwordinput--default"},"React Storybook.")),"\n",l.createElement(t.p,null,"Also, note that this component is an input. All features supported by the HDS TextInput are also supported by this component. See ",l.createElement(p,{href:"/components/text-input"},"TextInput documentation page")," for more information."),"\n",l.createElement(t.table,null,l.createElement(t.thead,null,l.createElement(t.tr,null,l.createElement(t.th,null,"Property"),l.createElement(t.th,null,"Description"),l.createElement(t.th,null,"Values"),l.createElement(t.th,null,"Default value"))),l.createElement(t.tbody,null,l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"label")),l.createElement(t.td,null,"The label for the input."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"type")),l.createElement(t.td,null,"Type of the password input. Only applied when ",l.createElement(t.code,null,"includeShowPasswordButton")," is false. Use this if you wish to not have show password button, or you wish to apply external show password button."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"concealPasswordButtonAriaLabel")),l.createElement(t.td,null,"The aria-label for conceal password button."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"includeShowPasswordButton")),l.createElement(t.td,null,"If set to true, the component will include show / hide password button."),l.createElement(t.td,null,l.createElement(t.code,null,"boolean")),l.createElement(t.td,null,"true")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"initiallyRevealed")),l.createElement(t.td,null,"If set to true, the component will initially reveal the password. Only applied when ",l.createElement(t.code,null,"includeShowPasswordButton")," is true."),l.createElement(t.td,null,l.createElement(t.code,null,"boolean")),l.createElement(t.td,null,"false")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"revealPasswordButtonAriaLabel")),l.createElement(t.td,null,"The aria-label for the reveal password button."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,"[Table 1:PasswordInput properties]"),l.createElement(t.td),l.createElement(t.td),l.createElement(t.td)))))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){return void 0===e&&(e={}),l.createElement(c,e,l.createElement(d,e))}},54716:function(e,t,n){n.r(t);var a=n(11151),l=n(67294),r=n(83428),o=n(57674),s=n(89482),i=(n(18607),n(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,a.ah)(),e.components);return i.Z||d("PageTabs",!1),i.Z.Tab||d("PageTabs.Tab",!0),i.Z.TabList||d("PageTabs.TabList",!0),i.Z.TabPanel||d("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"passwordinput",style:{position:"relative"}},"PasswordInput",l.createElement(t.a,{href:"#passwordinput","aria-label":"passwordinput permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(r.S,{type:"info"},"Stable"),l.createElement(r.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(o.Z)),"\n",l.createElement(s.Z,null,"A password field is a foundational input field component that the user can interact with and specifically input password data."),"\n",l.createElement(i.Z,{pageContext:e.pageContext},l.createElement(i.Z.TabList,null,l.createElement(i.Z.Tab,{href:"/"},"Usage"),l.createElement(i.Z.Tab,{href:"/code"},"Code"),l.createElement(i.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(i.Z.Tab,{href:"/security"},"Security")),l.createElement(i.Z.TabPanel,null,e.children)))}function d(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,a.ah)(),e.components);return t?l.createElement(t,e,l.createElement(c,e)):c(e)}},89482:function(e,t,n){var a=n(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:n="var(--fontsize-body-xl)",style:l={},children:r}=e;return a.createElement("p",{style:{fontSize:n,color:t,maxWidth:600,...l}},r)}},26127:function(e,t,n){var a=n(67294),l=n(14160),r=n(94671);const o="PageTabList",s="PageTabPanel",i="PageTab",c=e=>{var t;let{pageContext:n,children:c}=e;const d=n.frontmatter.slug,u=Array.isArray(c)?c:[c],p=u.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===o)),h=u.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===s)),m=null===(t=p.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===i)),_=m.findIndex((e=>d.endsWith(e.props.href))),b=-1===_?0:_,x=0===b?d:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(d);return a.createElement(r.a,{initiallyActiveTab:b},a.createElement(r.a.TabList,{className:"page-tabs-list"},m.map((e=>a.createElement(r.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?x:x+e.props.href))},e.props.children)))),m.map(((e,t)=>a.createElement(r.a.TabPanel,{key:e.props.href},b===t?h.props.children:a.createElement("div",null)))))},d=e=>{let{children:t}=e;return a.createElement(r.a.TabList,null,t)};d.componentName=o;const u=e=>{let{href:t,slug:n,children:l}=e;return a.createElement(r.a.Tab,null,l)};u.componentName=i;const p=e=>{let{children:t}=e;return a.createElement(r.a.TabPanel,null,t)};p.componentName=s,c.TabList=d,c.Tab=u,c.TabPanel=p,t.Z=c},57674:function(e,t,n){var a=n(67294),l=n(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return a.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},a.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>a.createElement("li",{key:t},a.createElement("span",{className:"status-name"},t),a.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-password-input-index-mdx-b68f9f18b964f6b5f21d.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-password-input-index-mdx-b68f9f18b964f6b5f21d.js
new file mode 100644
index 00000000000..d16fd6f7bf1
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-password-input-index-mdx-b68f9f18b964f6b5f21d.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[2629,7187],{4112:function(e,t,a){a.d(t,{I:function(){return i},a:function(){return r}});var n=a(67294),l=a(32719);const r=e=>{let{ariaLabel:t="eye",ariaLabelledby:a,ariaHidden:r=!0,className:i="",color:o,size:s="s",style:c={}}=e;return n.createElement("svg",{className:[l.s.icon,l.s[s],i].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":a,"aria-hidden":r,color:o,style:c},n.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M12 4.5C16.0501 4.5 19.7168 7 23 12C19.7168 17 16.0501 19.5 12 19.5C7.94991 19.5 4.28325 17 1 12C4.28325 7 7.94991 4.5 12 4.5ZM12 6.5C9.04854 6.5 6.2496 8.20372 3.57529 11.8024L3.43 12L3.57529 12.1976C6.19914 15.7284 8.94296 17.435 11.8331 17.4982L12 17.5C14.9515 17.5 17.7504 15.7963 20.4247 12.1976L20.5695 12L20.4247 11.8024C17.8009 8.27162 15.057 6.56497 12.1669 6.50182L12 6.5ZM12 8C14.2091 8 16 9.79086 16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8ZM12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10Z",fill:"currentColor"}))},i=e=>{let{ariaLabel:t="eye-crossed",ariaLabelledby:a,ariaHidden:r=!0,className:i="",color:o,size:s="s",style:c={}}=e;return n.createElement("svg",{className:[l.s.icon,l.s[s],i].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":a,"aria-hidden":r,color:o,style:c},n.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M19.7929 2.79291L21.2071 4.20712L4.70711 20.7071L3.29289 19.2929L19.7929 2.79291ZM19.6465 7.88777C20.8055 8.9897 21.9234 10.3604 23 12C19.7168 17 16.0501 19.5 12 19.5C10.8495 19.5 9.73001 19.2983 8.64142 18.8948L10.2433 17.2931C10.7683 17.4185 11.2982 17.4865 11.8331 17.4982L12 17.5C14.9515 17.5 17.7504 15.7963 20.4247 12.1976L20.5695 12L20.4247 11.8025C19.7033 10.8317 18.9728 9.99883 18.2328 9.3001L19.6465 7.88777ZM12 4.50001C13.1505 4.50001 14.27 4.70174 15.3586 5.10519L13.7577 6.70716C13.2323 6.58159 12.7021 6.51353 12.1669 6.50184L12 6.50001C9.04854 6.50001 6.2496 8.20374 3.57529 11.8025L3.43 12L3.57529 12.1976C4.29669 13.1683 5.02715 14.0012 5.76723 14.6999L4.35355 16.1123C3.19447 15.0103 2.07662 13.6396 1 12C4.28325 7.00001 7.94991 4.50001 12 4.50001ZM15.976 11.5592C15.9919 11.7039 16 11.851 16 12C16 14.2092 14.2091 16 12 16C11.851 16 11.7039 15.9919 11.5592 15.976L15.976 11.5592ZM12 8.00001C12.149 8.00001 12.2961 8.00816 12.4408 8.02403L8.02402 12.4409C8.00815 12.2961 8 12.149 8 12C8 9.79088 9.79086 8.00001 12 8.00001Z",fill:"currentColor"}))}},93667:function(e,t,a){a.d(t,{I:function(){return s},t:function(){return o}});var n=a(67294),l=a(7444),r=a(34300),i=a(41125),o={root:"TextInput-module_root__2CMNr text-input_hds-text-input__2LODq",inputWrapper:"TextInput-module_inputWrapper__3Rvel text-input_hds-text-input__input-wrapper__1OqYG",input:"TextInput-module_input__1BlHi text-input_hds-text-input__input__GJm5C",hasButton:"TextInput-module_hasButton__2KCM1",errorText:"TextInput-module_errorText__3pizm text-input_hds-text-input__error-text__1GLYk",helperText:"TextInput-module_helperText__2dLR6 text-input_hds-text-input__helper-text__3V2KM",invalidText:"TextInput-module_invalidText__1w4sm text-input_hds-text-input__helper-text__3V2KM",successText:"TextInput-module_successText__2NMCP text-input_hds-text-input__success-text__3EOiy",infoText:"TextInput-module_infoText__zHOGs text-input_hds-text-input__info-text__3bqzy",invalid:"TextInput-module_invalid__2iYo2 text-input_hds-text-input--invalid__1UfKC",success:"TextInput-module_success__1kDOm text-input_hds-text-input--success__3dm2J",readOnly:"TextInput-module_readOnly__j615N undefined",buttonWrapper:"TextInput-module_buttonWrapper___filA text-input_hds-text-input__buttons__1RMzT",button:"TextInput-module_button__1ySMX text-input_hds-text-input__button__1Fh0I"};(0,l.s)("@keyframes text-input_fadeIn__2IDZ8{0%{opacity:0}to{opacity:1}}.text-input_hds-text-input__2LODq{--border-width:2px;--outline-width:3px;--input-height:56px;--textarea-height:149px;--icon-size:var(--spacing-m);--helper-color-default:var(--color-black-60);--helper-color-invalid:var(--color-error);--helper-color-success:var(--color-success);--helper-color-info:var(--color-black-90);--helper-color-info-icon:var(--color-coat-of-arms);--icon-color-invalid:var(--color-error);--input-background-default:var(--color-white);--input-background-disabled:var(--color-black-10);--input-border-color-default:var(--color-black-50);--input-border-color-hover:var(--color-black-90);--input-border-color-focus:var(--color-black-90);--input-border-color-invalid:var(--color-error);--input-border-color-disabled:var(--color-black-10);--input-border-color-success:var(--color-success);--input-color-default:var(--color-black-90);--input-color-disabled:var(--color-black-40);--label-color-default:var(--color-black-90);--label-color-invalid:var(--color-black-90);--placeholder-color:var(--color-black-60)}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C{-webkit-appearance:none;background-color:var(--input-background-default);border:var(--border-width) solid var(--input-border-color-default);border-radius:0;box-sizing:border-box;color:var(--input-color-default);font-family:inherit;font-size:1.125em;height:var(--input-height);line-height:normal;margin:0;padding:0 var(--spacing-s);width:100%;will-change:transform,box-shadow}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C:hover{border-color:var(--input-border-color-hover);transition:border-color 85ms ease-out}.text-input_hds-text-input__input-wrapper__1OqYG:focus-within .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-focus);outline:none}.text-input_hds-text-input__2LODq.text-input_hds-text-input--invalid__1UfKC .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-invalid)}.text-input_hds-text-input__2LODq.text-input_hds-text-input--success__3dm2J .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-success)}.text-input_hds-text-input__input-wrapper__1OqYG:focus-within .text-input_hds-text-input__input__GJm5C:not([readonly]){box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);transform:translateZ(0);transition:85ms ease-out;transition-property:box-shadow,transform}.text-input_hds-text-input__label__15F2V{color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.text-input_hds-text-input--invalid__1UfKC .text-input_hds-text-input__label__15F2V{color:var(--label-color-invalid);transition:color 85ms linear}.text-input_hds-text-input__required__z3Hm0{color:var(--color-black-90);display:inline-block;font-size:var(--fontsize-body-xl);line-height:1;margin-left:var(--spacing-2-xs);transform:translateY(var(--spacing-3-xs))}.text-input_hds-text-input__input-wrapper__1OqYG{display:flex;position:relative}.text-input_hds-text-input__2LODq textarea.text-input_hds-text-input__input__GJm5C{font-family:inherit;height:var(--textarea-height);margin:0;min-height:var(--input-height);overflow:auto;padding:var(--spacing-s);resize:vertical}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C::-moz-placeholder{color:var(--placeholder-color);opacity:1}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C::placeholder{color:var(--placeholder-color);opacity:1}.text-input_hds-text-input__helper-text__3V2KM{color:var(--helper-color-default)}.text-input_hds-text-input__error-text__1GLYk,.text-input_hds-text-input__helper-text__3V2KM{display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);white-space:pre-line}.text-input_hds-text-input__error-text__1GLYk{color:var(--helper-color-invalid);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.text-input_hds-text-input__error-text__1GLYk:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__error-text__1GLYk:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--icon-color-invalid);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__success-text__3EOiy{color:var(--helper-color-success);display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative;white-space:pre-wrap}.text-input_hds-text-input__success-text__3EOiy:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__success-text__3EOiy:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--helper-color-success);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__info-text__3bqzy{color:var(--helper-color-info);display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.text-input_hds-text-input__info-text__3bqzy:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__info-text__3bqzy:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--helper-color-info-icon);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C[disabled]{background-color:var(--input-background-disabled);border-color:var(--input-border-color-disabled);color:var(--input-color-disabled);cursor:not-allowed}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C[readonly]{background-color:transparent;border:0;color:var(--input-color-default);padding:0;-webkit-text-fill-color:var(--input-color-default)}.text-input_hds-text-input__buttons__1RMzT{align-items:center;bottom:0;display:flex;font-size:1rem;justify-content:center;margin-right:calc(var(--spacing-s) - var(--spacing-xs) / 2);position:absolute;right:0;top:0}.text-input_hds-text-input__button__1Fh0I{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;display:flex;font:inherit;outline:none;padding:var(--spacing-xs) calc(var(--spacing-xs) / 2)}.text-input_hds-text-input__button__1Fh0I:focus{outline:var(--outline-width) solid var(--color-focus-outline)}.TextInput-module_root__2CMNr{position:relative}.TextInput-module_input__1BlHi.TextInput-module_hasButton__2KCM1{padding-right:calc(2 * var(--spacing-s) + 1.5rem)}.TextInput-module_button__1ySMX:disabled{cursor:not-allowed}.TextInput-module_button__1ySMX:focus{outline:var(--outline-width) solid var(--color-focus-outline)}");const s=e=>{let{children:t,className:a="",errorText:l,helperText:s,hideLabel:c=!1,id:d,invalid:u=!1,isAriaLabelledBy:p=!1,label:h,labelId:_,onBlur:m,required:b=!1,style:x,successText:v,infoText:f,tooltipLabel:g,tooltipText:w,tooltipButtonLabel:E}=e;return n.createElement("div",{onBlur:m,className:(0,r.c)(o.root,u&&o.invalid,v&&o.success,a),style:x},h&&n.createElement(i.F,{id:_,inputId:d,isAriaLabelledBy:p,hidden:c,label:h,required:b,tooltipLabel:g,tooltipButtonLabel:E,tooltipText:w}),n.createElement("div",{className:(0,r.c)(o.inputWrapper)},t),l&&n.createElement("div",{className:o.errorText,id:d+"-error"},l),v&&n.createElement("div",{className:o.successText,id:d+"-success"},v),f&&n.createElement("div",{className:o.infoText,id:d+"-info"},f),s&&n.createElement("div",{className:o.helperText,id:d+"-helper"},s))}},2700:function(e,t,a){a.d(t,{P:function(){return u}});var n=a(80136),l=a(67294),r=a(7444),i=a(93667),o=a(34300),s=a(37776),c=a(4112),d="PasswordInput-module_disabledShowPasswordButton__8eYej";(0,r.s)(".PasswordInput-module_disabledShowPasswordButton__8eYej{color:var(--color-black-40)}");const u=l.forwardRef(((e,t)=>{var{className:a,errorText:r,helperText:u,hideLabel:p,id:h,invalid:_,label:m,required:b,style:x,successText:v,infoText:f,tooltipLabel:g,tooltipText:w,tooltipButtonLabel:E,concealPasswordButtonAriaLabel:y,disabled:C=!1,includeShowPasswordButton:T=!0,initiallyRevealed:L=!1,onBlur:k,revealPasswordButtonAriaLabel:z,type:I}=e,P=(0,n._)(e,["className","errorText","helperText","hideLabel","id","invalid","label","required","style","successText","infoText","tooltipLabel","tooltipText","tooltipButtonLabel","concealPasswordButtonAriaLabel","disabled","includeShowPasswordButton","initiallyRevealed","onBlur","revealPasswordButtonAriaLabel","type"]);const B={className:a,errorText:r,helperText:u,hideLabel:p,id:h,invalid:_,label:m,required:b,style:x,successText:v,infoText:f,tooltipLabel:g,tooltipText:w,tooltipButtonLabel:E};let N,S;T&&([N,S]=(0,l.useState)(L));const M=(0,s.c)(h,u,r,v,f);return l.createElement(i.I,Object.assign({onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||T&&N&&S(!1),"function"==typeof k&&k(e)}},B),l.createElement("input",Object.assign({className:(0,o.c)(i.t.input,T&&i.t.hasButton),disabled:C,id:h,ref:t,required:b,type:T?N?"text":"password":I||"password","aria-describedby":M.length>0?M:null},P)),T&&l.createElement("div",{className:i.t.buttonWrapper},l.createElement("button",Object.assign({className:i.t.button,type:"button",disabled:C},N?{"aria-label":y,onClick:()=>S(!1)}:{"aria-label":z,onClick:()=>S(!0)}),N&&l.createElement(c.I,{"aria-hidden":!0,className:C?d:""}),!N&&l.createElement(c.a,{"aria-hidden":!0,className:C?d:""}))))}))},83428:function(e,t,a){a.d(t,{S:function(){return c}});var n=a(80136),l=a(67294),r=a(7444),i=a(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,r.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const s=e=>{let{icon:t}=e;return l.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:r,type:c="neutral",iconLeft:d}=e,u=(0,n._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,i.c)(o.statusLabel,o[c],d&&o.statusLabelWithIcon,a),"data-testid":r},u),d&&l.createElement(s,{icon:d}),t)}},37776:function(e,t,a){a.d(t,{c:function(){return n}});var n=(e,t,a,n,l)=>[t&&e+"-helper",a&&e+"-error",n&&e+"-success",l&&e+"-info"].filter((e=>e)).join(" ")},57220:function(e,t,a){a.r(t),a.d(t,{ExternalButtonExample:function(){return d}});var n=a(11151),l=a(67294),r=a(2700),i=a(17882),o=a(4112),s=a(54716);const c=e=>{let{children:t,pageContext:a}=e;return l.createElement(s.default,{pageContext:a},t)},d=()=>{const e=Object.assign({div:"div"},(0,n.ah)()),[t,a]=l.useState(!1);return l.createElement(e.div,{style:{display:"grid",gridTemplateColumns:"320px 240px",gap:"var(--spacing-s)"}},l.createElement(r.P,{label:"Password",id:"password-input-3",includeShowPasswordButton:!1,helperText:"Assistive text",type:t?"text":"password",required:!0,style:{maxWidth:"320px"}}),l.createElement(e.div,{style:{display:"flex",justifyContent:"center",flexDirection:"column"}},l.createElement(i.B,{variant:"supplementary",onClick:()=>a(!t),iconLeft:t?l.createElement(o.I,{"aria-hidden":!0}):l.createElement(o.a,{"aria-hidden":!0})},t?"Hide password":"Show password")))};function u(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",h4:"h4",p:"p"},(0,n.ah)(),e.components),{PlaygroundPreview:a,InternalLink:i}=t;return i||p("InternalLink",!0),a||p("PlaygroundPreview",!0),l.createElement(l.Fragment,null,l.createElement(t.h2,{id:"usage",style:{position:"relative"}},"Usage",l.createElement(t.a,{href:"#usage","aria-label":"usage permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h3,{id:"example",style:{position:"relative"}},"Example",l.createElement(t.a,{href:"#example","aria-label":"example permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a,null,l.createElement(r.P,{concealPasswordButtonAriaLabel:"Hide password",helperText:"Assistive text",id:"password-input-1",includeShowPasswordButton:!0,label:"Password",revealPasswordButtonAriaLabel:"Show password",required:!0,style:{maxWidth:"320px"}})),"\n",l.createElement(t.h3,{id:"principles",style:{position:"relative"}},"Principles",l.createElement(t.a,{href:"#principles","aria-label":"principles permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,"A label should always be provided with password fields."),"\n",l.createElement(t.li,null,"If possible, validate input in client-side real-time and provide the user with immediate feedback. See ",l.createElement(i,{href:"/patterns/forms/form-validation"},"HDS Form validation pattern page")," for more information and best practices with password fields."),"\n",l.createElement(t.li,null,"Password fields should always be mandatory. It is recommended to mark it as a required field."),"\n",l.createElement(t.li,null,'Verify that "paste" functionality, browser password helpers, and external password managers are allowed for the input.'),"\n",l.createElement(t.li,null,"HDS password input provides a way to mask/unmask the password. Do not disabled this functionality without a good reason."),"\n"),"\n",l.createElement(t.h3,{id:"variations",style:{position:"relative"}},"Variations",l.createElement(t.a,{href:"#variations","aria-label":"variations permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h4,{id:"default",style:{position:"relative"}},"Default",l.createElement(t.a,{href:"#default","aria-label":"default permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"A default HDS password input includes an icon to mask and unmask the password."),"\n",l.createElement(a,null,l.createElement(r.P,{concealPasswordButtonAriaLabel:"Hide password",helperText:"Assistive text",id:"password-input-2",includeShowPasswordButton:!0,label:"Password",revealPasswordButtonAriaLabel:"Show password",required:!0,style:{maxWidth:"320px"}})),"\n",l.createElement(t.h4,{id:"with-an-external-button",style:{position:"relative"}},"With an external button",l.createElement(t.a,{href:"#with-an-external-button","aria-label":"with an external button permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"If necessary, the mask/unmask icon can be removed and the feature controlled with an external button element."),"\n","\n",l.createElement(a,null,l.createElement(d)))}function p(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){return void 0===e&&(e={}),l.createElement(c,e,l.createElement(u,e))}},54716:function(e,t,a){a.r(t);var n=a(11151),l=a(67294),r=a(83428),i=a(57674),o=a(89482),s=(a(18607),a(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,n.ah)(),e.components);return s.Z||d("PageTabs",!1),s.Z.Tab||d("PageTabs.Tab",!0),s.Z.TabList||d("PageTabs.TabList",!0),s.Z.TabPanel||d("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"passwordinput",style:{position:"relative"}},"PasswordInput",l.createElement(t.a,{href:"#passwordinput","aria-label":"passwordinput permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(r.S,{type:"info"},"Stable"),l.createElement(r.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(i.Z)),"\n",l.createElement(o.Z,null,"A password field is a foundational input field component that the user can interact with and specifically input password data."),"\n",l.createElement(s.Z,{pageContext:e.pageContext},l.createElement(s.Z.TabList,null,l.createElement(s.Z.Tab,{href:"/"},"Usage"),l.createElement(s.Z.Tab,{href:"/code"},"Code"),l.createElement(s.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(s.Z.Tab,{href:"/security"},"Security")),l.createElement(s.Z.TabPanel,null,e.children)))}function d(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,n.ah)(),e.components);return t?l.createElement(t,e,l.createElement(c,e)):c(e)}},89482:function(e,t,a){var n=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:l={},children:r}=e;return n.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...l}},r)}},26127:function(e,t,a){var n=a(67294),l=a(14160),r=a(94671);const i="PageTabList",o="PageTabPanel",s="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const d=a.frontmatter.slug,u=Array.isArray(c)?c:[c],p=u.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===i)),h=u.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===o)),_=null===(t=p.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===s)),m=_.findIndex((e=>d.endsWith(e.props.href))),b=-1===m?0:m,x=0===b?d:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(d);return n.createElement(r.a,{initiallyActiveTab:b},n.createElement(r.a.TabList,{className:"page-tabs-list"},_.map((e=>n.createElement(r.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?x:x+e.props.href))},e.props.children)))),_.map(((e,t)=>n.createElement(r.a.TabPanel,{key:e.props.href},b===t?h.props.children:n.createElement("div",null)))))},d=e=>{let{children:t}=e;return n.createElement(r.a.TabList,null,t)};d.componentName=i;const u=e=>{let{href:t,slug:a,children:l}=e;return n.createElement(r.a.Tab,null,l)};u.componentName=s;const p=e=>{let{children:t}=e;return n.createElement(r.a.TabPanel,null,t)};p.componentName=o,c.TabList=d,c.Tab=u,c.TabPanel=p,t.Z=c},57674:function(e,t,a){var n=a(67294),l=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return n.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},n.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>n.createElement("li",{key:t},n.createElement("span",{className:"status-name"},t),n.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-password-input-security-mdx-96a4352b3d8e6114ee8d.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-password-input-security-mdx-96a4352b3d8e6114ee8d.js
new file mode 100644
index 00000000000..75e729f199f
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-password-input-security-mdx-96a4352b3d8e6114ee8d.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[2783,7187],{83428:function(e,a,t){t.d(a,{S:function(){return c}});var n=t(80136),s=t(67294),l=t(7444),r=t(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,l.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:a}=e;return s.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},a)},c=e=>{var{children:a,className:t,dataTestId:l,type:c="neutral",iconLeft:u}=e,d=(0,n._)(e,["children","className","dataTestId","type","iconLeft"]);return s.createElement("span",Object.assign({className:(0,r.c)(i.statusLabel,i[c],u&&i.statusLabelWithIcon,t),"data-testid":l},d),u&&s.createElement(o,{icon:u}),a)}},37386:function(e,a,t){t.r(a);var n=t(11151),s=t(67294),l=t(54716);const r=e=>{let{children:a,pageContext:t}=e;return s.createElement(l.default,{pageContext:t},a)};function i(e){const a=Object.assign({h2:"h2",a:"a",span:"span",p:"p",h3:"h3",ul:"ul",li:"li"},(0,n.ah)(),e.components);return s.createElement(s.Fragment,null,s.createElement(a.h2,{id:"security",style:{position:"relative"}},"Security",s.createElement(a.a,{href:"#security","aria-label":"security permalink",className:"header-anchor after"},s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(a.p,null,"As HDS password input provides only the front-end solution, remember that you need to take care of the security in your project.\nHere are some good practices you need to consider."),"\n",s.createElement(a.h3,{id:"general-security",style:{position:"relative"}},"General Security",s.createElement(a.a,{href:"#general-security","aria-label":"general security permalink",className:"header-anchor after"},s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(a.ul,null,"\n",s.createElement(a.li,null,"Do not prevent the user from copying and pasting the password into the field."),"\n",s.createElement(a.li,null,"Prefer using ready authentication libraries and services, and familiarize yourself properly with their implementation."),"\n",s.createElement(a.li,null,"In City of Helsinki Services, always use Helsinki Profiili authentication if possible."),"\n",s.createElement(a.li,null,"Never store the password in a readable form. Always use proper hash algorithms."),"\n",s.createElement(a.li,null,"Always protect the communication with secure connections (TLS 1.2 or newer)."),"\n",s.createElement(a.li,null,"Encourage usage of multi-factor authentication and password managers."),"\n"),"\n",s.createElement(a.h3,{id:"creating-a-new-password",style:{position:"relative"}},"Creating a new password",s.createElement(a.a,{href:"#creating-a-new-password","aria-label":"creating a new password permalink",className:"header-anchor after"},s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(a.ul,null,"\n",s.createElement(a.li,null,"Inform user properly what the requirements for their password are."),"\n",s.createElement(a.li,null,"Do not accept password matching user identifier, e.g. a username or an email."),"\n",s.createElement(a.li,null,"Do not truncate, sanitize, or format in any way the password user has given."),"\n",s.createElement(a.li,null,"Set minimum length for password 12 to 16 characters."),"\n",s.createElement(a.li,null,"Avoid setting a maximum password length smaller than 128 characters."),"\n",s.createElement(a.li,null,"If possible, allow the password input to reflect the strength of the password entered when the password component is used for creating anew password."),"\n",s.createElement(a.li,null,"If possible, add other programmatic assistance. Detect and suggest changes to provide the user with assistance in generating strong passwords."),"\n"),"\n",s.createElement(a.h3,{id:"using-password-to-log-in",style:{position:"relative"}},"Using password to log in",s.createElement(a.a,{href:"#using-password-to-log-in","aria-label":"using password to log in permalink",className:"header-anchor after"},s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(a.ul,null,"\n",s.createElement(a.li,null,"In an error message, you should not declare whether the username or the password is wrong but give general instructions to fix the problem."),"\n"))}a.default=function(e){return void 0===e&&(e={}),s.createElement(r,e,s.createElement(i,e))}},54716:function(e,a,t){t.r(a);var n=t(11151),s=t(67294),l=t(83428),r=t(57674),i=t(89482),o=(t(18607),t(26127));function c(e){const a=Object.assign({h1:"h1",a:"a",span:"span"},(0,n.ah)(),e.components);return o.Z||u("PageTabs",!1),o.Z.Tab||u("PageTabs.Tab",!0),o.Z.TabList||u("PageTabs.TabList",!0),o.Z.TabPanel||u("PageTabs.TabPanel",!0),s.createElement(s.Fragment,null,s.createElement(a.h1,{id:"passwordinput",style:{position:"relative"}},"PasswordInput",s.createElement(a.a,{href:"#passwordinput","aria-label":"passwordinput permalink",className:"header-anchor after"},s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement("div",{class:"status-label-description"},s.createElement(l.S,{type:"info"},"Stable"),s.createElement(l.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),s.createElement(r.Z)),"\n",s.createElement(i.Z,null,"A password field is a foundational input field component that the user can interact with and specifically input password data."),"\n",s.createElement(o.Z,{pageContext:e.pageContext},s.createElement(o.Z.TabList,null,s.createElement(o.Z.Tab,{href:"/"},"Usage"),s.createElement(o.Z.Tab,{href:"/code"},"Code"),s.createElement(o.Z.Tab,{href:"/accessibility"},"Accessibility"),s.createElement(o.Z.Tab,{href:"/security"},"Security")),s.createElement(o.Z.TabPanel,null,e.children)))}function u(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,n.ah)(),e.components);return a?s.createElement(a,e,s.createElement(c,e)):c(e)}},89482:function(e,a,t){var n=t(67294);a.Z=e=>{let{color:a="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:s={},children:l}=e;return n.createElement("p",{style:{fontSize:t,color:a,maxWidth:600,...s}},l)}},26127:function(e,a,t){var n=t(67294),s=t(14160),l=t(94671);const r="PageTabList",i="PageTabPanel",o="PageTab",c=e=>{var a;let{pageContext:t,children:c}=e;const u=t.frontmatter.slug,d=Array.isArray(c)?c:[c],h=d.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===r)),m=d.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===i)),p=null===(a=h.props)||void 0===a?void 0:a.children.filter((e=>e.type.componentName===o)),b=p.findIndex((e=>u.endsWith(e.props.href))),g=-1===b?0:b,f=0===g?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return n.createElement(l.a,{initiallyActiveTab:g},n.createElement(l.a.TabList,{className:"page-tabs-list"},p.map((e=>n.createElement(l.a.Tab,{key:e.props.href,onClick:()=>(0,s.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),p.map(((e,a)=>n.createElement(l.a.TabPanel,{key:e.props.href},g===a?m.props.children:n.createElement("div",null)))))},u=e=>{let{children:a}=e;return n.createElement(l.a.TabList,null,a)};u.componentName=r;const d=e=>{let{href:a,slug:t,children:s}=e;return n.createElement(l.a.Tab,null,s)};d.componentName=o;const h=e=>{let{children:a}=e;return n.createElement(l.a.TabPanel,null,a)};h.componentName=i,c.TabList=u,c.Tab=d,c.TabPanel=h,a.Z=c},57674:function(e,a,t){var n=t(67294),s=t(45422);a.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return n.createElement(s.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},n.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((a=>n.createElement("li",{key:a},n.createElement("span",{className:"status-name"},a),n.createElement("span",null,e[a]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-password-input-tabs-mdx-851cef695b43c7e90b26.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-password-input-tabs-mdx-851cef695b43c7e90b26.js
new file mode 100644
index 00000000000..c545beac1e9
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-password-input-tabs-mdx-851cef695b43c7e90b26.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[7187],{83428:function(e,a,t){t.d(a,{S:function(){return o}});var s=t(80136),l=t(67294),n=t(7444),r=t(34300),c={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const i=e=>{let{icon:a}=e;return l.createElement("span",{className:c.statusLabelIcon,"aria-hidden":"true"},a)},o=e=>{var{children:a,className:t,dataTestId:n,type:o="neutral",iconLeft:u}=e,b=(0,s._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(c.statusLabel,c[o],u&&c.statusLabelWithIcon,t),"data-testid":n},b),u&&l.createElement(i,{icon:u}),a)}},54716:function(e,a,t){t.r(a);var s=t(11151),l=t(67294),n=t(83428),r=t(57674),c=t(89482),i=(t(18607),t(26127));function o(e){const a=Object.assign({h1:"h1",a:"a",span:"span"},(0,s.ah)(),e.components);return i.Z||u("PageTabs",!1),i.Z.Tab||u("PageTabs.Tab",!0),i.Z.TabList||u("PageTabs.TabList",!0),i.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(a.h1,{id:"passwordinput",style:{position:"relative"}},"PasswordInput",l.createElement(a.a,{href:"#passwordinput","aria-label":"passwordinput permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(n.S,{type:"info"},"Stable"),l.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(c.Z,null,"A password field is a foundational input field component that the user can interact with and specifically input password data."),"\n",l.createElement(i.Z,{pageContext:e.pageContext},l.createElement(i.Z.TabList,null,l.createElement(i.Z.Tab,{href:"/"},"Usage"),l.createElement(i.Z.Tab,{href:"/code"},"Code"),l.createElement(i.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(i.Z.Tab,{href:"/security"},"Security")),l.createElement(i.Z.TabPanel,null,e.children)))}function u(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,s.ah)(),e.components);return a?l.createElement(a,e,l.createElement(o,e)):o(e)}},89482:function(e,a,t){var s=t(67294);a.Z=e=>{let{color:a="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:l={},children:n}=e;return s.createElement("p",{style:{fontSize:t,color:a,maxWidth:600,...l}},n)}},26127:function(e,a,t){var s=t(67294),l=t(14160),n=t(94671);const r="PageTabList",c="PageTabPanel",i="PageTab",o=e=>{var a;let{pageContext:t,children:o}=e;const u=t.frontmatter.slug,b=Array.isArray(o)?o:[o],d=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===r)),p=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===c)),m=null===(a=d.props)||void 0===a?void 0:a.children.filter((e=>e.type.componentName===i)),h=m.findIndex((e=>u.endsWith(e.props.href))),_=-1===h?0:h,f=0===_?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return s.createElement(n.a,{initiallyActiveTab:_},s.createElement(n.a.TabList,{className:"page-tabs-list"},m.map((e=>s.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),m.map(((e,a)=>s.createElement(n.a.TabPanel,{key:e.props.href},_===a?p.props.children:s.createElement("div",null)))))},u=e=>{let{children:a}=e;return s.createElement(n.a.TabList,null,a)};u.componentName=r;const b=e=>{let{href:a,slug:t,children:l}=e;return s.createElement(n.a.Tab,null,l)};b.componentName=i;const d=e=>{let{children:a}=e;return s.createElement(n.a.TabPanel,null,a)};d.componentName=c,o.TabList=u,o.Tab=b,o.TabPanel=d,a.Z=o},57674:function(e,a,t){var s=t(67294),l=t(45422);a.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return s.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},s.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((a=>s.createElement("li",{key:a},s.createElement("span",{className:"status-name"},a),s.createElement("span",null,e[a]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-phone-input-accessibility-mdx-c215ec57e23dfa8f9e9a.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-phone-input-accessibility-mdx-c215ec57e23dfa8f9e9a.js
new file mode 100644
index 00000000000..f82a55bfde4
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-phone-input-accessibility-mdx-c215ec57e23dfa8f9e9a.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[2981,7002],{83428:function(e,t,a){a.d(t,{S:function(){return o}});var n=a(80136),l=a(67294),s=a(7444),r=a(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,s.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const c=e=>{let{icon:t}=e;return l.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},t)},o=e=>{var{children:t,className:a,dataTestId:s,type:o="neutral",iconLeft:u}=e,d=(0,n._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(i.statusLabel,i[o],u&&i.statusLabelWithIcon,a),"data-testid":s},d),u&&l.createElement(c,{icon:u}),t)}},86281:function(e,t,a){a.r(t);var n=a(11151),l=a(67294),s=a(93998),r=a(1076);const i=e=>{let{children:t,pageContext:a}=e;return l.createElement(s.default,{pageContext:a},t)};function c(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",code:"code",strong:"strong"},(0,n.ah)(),e.components);return l.createElement(l.Fragment,null,l.createElement(t.h2,{id:"accessibility",style:{position:"relative"}},"Accessibility",l.createElement(t.a,{href:"#accessibility","aria-label":"accessibility permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h3,{id:"pay-attention-to",style:{position:"relative"}},"Pay attention to",l.createElement(t.a,{href:"#pay-attention-to","aria-label":"pay attention to permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,"HDS Phone number input supports HTML input ",l.createElement(t.code,null,"pattern")," attribute. It can be used to specify an exact format for the phone number.","\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,l.createElement(t.strong,null,"Note that pattern is not visible to regular users in any way.")," Some of the screen readers informs the user if the input does not match the pattern. This attribute mostly increases user experience for screen reader users."),"\n"),"\n"),"\n",l.createElement(t.li,null,"If multiple phone numbers are asked in the same view, make sure they are labelled descriptively or have an extra fieldset label linked to the input with ",l.createElement(t.code,null,"aria-desribedby"),".","\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,"You can view an example of this on usage page ",l.createElement(r.Z,{href:"/components/phone-input#with-a-country-code-selection"},"phone input with a country code selection variant")),"\n"),"\n"),"\n"))}t.default=function(e){return void 0===e&&(e={}),l.createElement(i,e,l.createElement(c,e))}},93998:function(e,t,a){a.r(t);var n=a(11151),l=a(67294),s=a(83428),r=a(57674),i=a(89482),c=(a(18607),a(26127));function o(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,n.ah)(),e.components);return c.Z||u("PageTabs",!1),c.Z.Tab||u("PageTabs.Tab",!0),c.Z.TabList||u("PageTabs.TabList",!0),c.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"phoneinput",style:{position:"relative"}},"PhoneInput",l.createElement(t.a,{href:"#phoneinput","aria-label":"phoneinput permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(s.S,{type:"info"},"Stable"),l.createElement(s.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(i.Z,null,"A phone input allows the user to enter phone number values. "),"\n",l.createElement(c.Z,{pageContext:e.pageContext},l.createElement(c.Z.TabList,null,l.createElement(c.Z.Tab,{href:"/"},"Usage"),l.createElement(c.Z.Tab,{href:"/code"},"Code"),l.createElement(c.Z.Tab,{href:"/accessibility"},"Accessibility")),l.createElement(c.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,n.ah)(),e.components);return t?l.createElement(t,e,l.createElement(o,e)):o(e)}},89482:function(e,t,a){var n=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:l={},children:s}=e;return n.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...l}},s)}},26127:function(e,t,a){var n=a(67294),l=a(14160),s=a(94671);const r="PageTabList",i="PageTabPanel",c="PageTab",o=e=>{var t;let{pageContext:a,children:o}=e;const u=a.frontmatter.slug,d=Array.isArray(o)?o:[o],b=d.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===r)),h=d.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===i)),m=null===(t=b.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===c)),p=m.findIndex((e=>u.endsWith(e.props.href))),f=-1===p?0:p,_=0===f?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return n.createElement(s.a,{initiallyActiveTab:f},n.createElement(s.a.TabList,{className:"page-tabs-list"},m.map((e=>n.createElement(s.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?_:_+e.props.href))},e.props.children)))),m.map(((e,t)=>n.createElement(s.a.TabPanel,{key:e.props.href},f===t?h.props.children:n.createElement("div",null)))))},u=e=>{let{children:t}=e;return n.createElement(s.a.TabList,null,t)};u.componentName=r;const d=e=>{let{href:t,slug:a,children:l}=e;return n.createElement(s.a.Tab,null,l)};d.componentName=c;const b=e=>{let{children:t}=e;return n.createElement(s.a.TabPanel,null,t)};b.componentName=i,o.TabList=u,o.Tab=d,o.TabPanel=b,t.Z=o},57674:function(e,t,a){var n=a(67294),l=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return n.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},n.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>n.createElement("li",{key:t},n.createElement("span",{className:"status-name"},t),n.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-phone-input-code-mdx-62f6c51179f66ba584a4.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-phone-input-code-mdx-62f6c51179f66ba584a4.js
new file mode 100644
index 00000000000..5a7d5a9a3af
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-phone-input-code-mdx-62f6c51179f66ba584a4.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[488],{93667:function(e,t,n){n.d(t,{I:function(){return s},t:function(){return i}});var a=n(67294),l=n(7444),r=n(34300),o=n(41125),i={root:"TextInput-module_root__2CMNr text-input_hds-text-input__2LODq",inputWrapper:"TextInput-module_inputWrapper__3Rvel text-input_hds-text-input__input-wrapper__1OqYG",input:"TextInput-module_input__1BlHi text-input_hds-text-input__input__GJm5C",hasButton:"TextInput-module_hasButton__2KCM1",errorText:"TextInput-module_errorText__3pizm text-input_hds-text-input__error-text__1GLYk",helperText:"TextInput-module_helperText__2dLR6 text-input_hds-text-input__helper-text__3V2KM",invalidText:"TextInput-module_invalidText__1w4sm text-input_hds-text-input__helper-text__3V2KM",successText:"TextInput-module_successText__2NMCP text-input_hds-text-input__success-text__3EOiy",infoText:"TextInput-module_infoText__zHOGs text-input_hds-text-input__info-text__3bqzy",invalid:"TextInput-module_invalid__2iYo2 text-input_hds-text-input--invalid__1UfKC",success:"TextInput-module_success__1kDOm text-input_hds-text-input--success__3dm2J",readOnly:"TextInput-module_readOnly__j615N undefined",buttonWrapper:"TextInput-module_buttonWrapper___filA text-input_hds-text-input__buttons__1RMzT",button:"TextInput-module_button__1ySMX text-input_hds-text-input__button__1Fh0I"};(0,l.s)("@keyframes text-input_fadeIn__2IDZ8{0%{opacity:0}to{opacity:1}}.text-input_hds-text-input__2LODq{--border-width:2px;--outline-width:3px;--input-height:56px;--textarea-height:149px;--icon-size:var(--spacing-m);--helper-color-default:var(--color-black-60);--helper-color-invalid:var(--color-error);--helper-color-success:var(--color-success);--helper-color-info:var(--color-black-90);--helper-color-info-icon:var(--color-coat-of-arms);--icon-color-invalid:var(--color-error);--input-background-default:var(--color-white);--input-background-disabled:var(--color-black-10);--input-border-color-default:var(--color-black-50);--input-border-color-hover:var(--color-black-90);--input-border-color-focus:var(--color-black-90);--input-border-color-invalid:var(--color-error);--input-border-color-disabled:var(--color-black-10);--input-border-color-success:var(--color-success);--input-color-default:var(--color-black-90);--input-color-disabled:var(--color-black-40);--label-color-default:var(--color-black-90);--label-color-invalid:var(--color-black-90);--placeholder-color:var(--color-black-60)}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C{-webkit-appearance:none;background-color:var(--input-background-default);border:var(--border-width) solid var(--input-border-color-default);border-radius:0;box-sizing:border-box;color:var(--input-color-default);font-family:inherit;font-size:1.125em;height:var(--input-height);line-height:normal;margin:0;padding:0 var(--spacing-s);width:100%;will-change:transform,box-shadow}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C:hover{border-color:var(--input-border-color-hover);transition:border-color 85ms ease-out}.text-input_hds-text-input__input-wrapper__1OqYG:focus-within .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-focus);outline:none}.text-input_hds-text-input__2LODq.text-input_hds-text-input--invalid__1UfKC .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-invalid)}.text-input_hds-text-input__2LODq.text-input_hds-text-input--success__3dm2J .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-success)}.text-input_hds-text-input__input-wrapper__1OqYG:focus-within .text-input_hds-text-input__input__GJm5C:not([readonly]){box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);transform:translateZ(0);transition:85ms ease-out;transition-property:box-shadow,transform}.text-input_hds-text-input__label__15F2V{color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.text-input_hds-text-input--invalid__1UfKC .text-input_hds-text-input__label__15F2V{color:var(--label-color-invalid);transition:color 85ms linear}.text-input_hds-text-input__required__z3Hm0{color:var(--color-black-90);display:inline-block;font-size:var(--fontsize-body-xl);line-height:1;margin-left:var(--spacing-2-xs);transform:translateY(var(--spacing-3-xs))}.text-input_hds-text-input__input-wrapper__1OqYG{display:flex;position:relative}.text-input_hds-text-input__2LODq textarea.text-input_hds-text-input__input__GJm5C{font-family:inherit;height:var(--textarea-height);margin:0;min-height:var(--input-height);overflow:auto;padding:var(--spacing-s);resize:vertical}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C::-moz-placeholder{color:var(--placeholder-color);opacity:1}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C::placeholder{color:var(--placeholder-color);opacity:1}.text-input_hds-text-input__helper-text__3V2KM{color:var(--helper-color-default)}.text-input_hds-text-input__error-text__1GLYk,.text-input_hds-text-input__helper-text__3V2KM{display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);white-space:pre-line}.text-input_hds-text-input__error-text__1GLYk{color:var(--helper-color-invalid);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.text-input_hds-text-input__error-text__1GLYk:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__error-text__1GLYk:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--icon-color-invalid);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__success-text__3EOiy{color:var(--helper-color-success);display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative;white-space:pre-wrap}.text-input_hds-text-input__success-text__3EOiy:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__success-text__3EOiy:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--helper-color-success);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__info-text__3bqzy{color:var(--helper-color-info);display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.text-input_hds-text-input__info-text__3bqzy:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__info-text__3bqzy:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--helper-color-info-icon);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C[disabled]{background-color:var(--input-background-disabled);border-color:var(--input-border-color-disabled);color:var(--input-color-disabled);cursor:not-allowed}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C[readonly]{background-color:transparent;border:0;color:var(--input-color-default);padding:0;-webkit-text-fill-color:var(--input-color-default)}.text-input_hds-text-input__buttons__1RMzT{align-items:center;bottom:0;display:flex;font-size:1rem;justify-content:center;margin-right:calc(var(--spacing-s) - var(--spacing-xs) / 2);position:absolute;right:0;top:0}.text-input_hds-text-input__button__1Fh0I{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;display:flex;font:inherit;outline:none;padding:var(--spacing-xs) calc(var(--spacing-xs) / 2)}.text-input_hds-text-input__button__1Fh0I:focus{outline:var(--outline-width) solid var(--color-focus-outline)}.TextInput-module_root__2CMNr{position:relative}.TextInput-module_input__1BlHi.TextInput-module_hasButton__2KCM1{padding-right:calc(2 * var(--spacing-s) + 1.5rem)}.TextInput-module_button__1ySMX:disabled{cursor:not-allowed}.TextInput-module_button__1ySMX:focus{outline:var(--outline-width) solid var(--color-focus-outline)}");const s=e=>{let{children:t,className:n="",errorText:l,helperText:s,hideLabel:c=!1,id:p,invalid:u=!1,isAriaLabelledBy:d=!1,label:h,labelId:_,onBlur:m,required:x=!1,style:b,successText:v,infoText:g,tooltipLabel:f,tooltipText:E,tooltipButtonLabel:y}=e;return a.createElement("div",{onBlur:m,className:(0,r.c)(i.root,u&&i.invalid,v&&i.success,n),style:b},h&&a.createElement(o.F,{id:_,inputId:p,isAriaLabelledBy:d,hidden:c,label:h,required:x,tooltipLabel:f,tooltipButtonLabel:y,tooltipText:E}),a.createElement("div",{className:(0,r.c)(i.inputWrapper)},t),l&&a.createElement("div",{className:i.errorText,id:p+"-error"},l),v&&a.createElement("div",{className:i.successText,id:p+"-success"},v),g&&a.createElement("div",{className:i.infoText,id:p+"-info"},g),s&&a.createElement("div",{className:i.helperText,id:p+"-helper"},s))}},20968:function(e,t,n){n.d(t,{P:function(){return i}});var a=n(80136),l=n(67294),r=n(93667),o=n(37776);const i=l.forwardRef(((e,t)=>{var{"aria-describedby":n,className:i="",disabled:s=!1,defaultValue:c,errorText:p,helperText:u,hideLabel:d,invalid:h,id:_,label:m,onChange:x=(()=>null),required:b,style:v,successText:g,infoText:f,tooltipLabel:E,tooltipText:y,tooltipButtonLabel:w,type:k="tel"}=e,T=(0,a._)(e,["aria-describedby","className","disabled","defaultValue","errorText","helperText","hideLabel","invalid","id","label","onChange","required","style","successText","infoText","tooltipLabel","tooltipText","tooltipButtonLabel","type"]);const C={className:i,errorText:p,helperText:u,hideLabel:d,id:_,invalid:h,label:m,required:b,style:v,successText:g,tooltipLabel:E,tooltipText:y,tooltipButtonLabel:w},I=[n,(0,o.c)(_,u,p,g,f)].filter((e=>e)).join(" ");return l.createElement(r.I,Object.assign({},C),l.createElement("input",Object.assign({className:r.t.input,defaultValue:c,disabled:s,id:_,onChange:x,ref:t,required:b,type:k,"aria-describedby":I.length>0?I:null,autoComplete:"tel"},T)))}))},37776:function(e,t,n){n.d(t,{c:function(){return a}});var a=(e,t,n,a,l)=>[t&&e+"-helper",n&&e+"-error",a&&e+"-success",l&&e+"-info"].filter((e=>e)).join(" ")},74176:function(e,t,n){n.r(t);var a=n(11151),l=n(67294),r=n(20968),o=n(68477),i=n(93998);const s=e=>{let{children:t,pageContext:n}=e;return l.createElement(i.default,{pageContext:n},t)};function c(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",h4:"h4",pre:"pre",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",strong:"strong",p:"p"},(0,a.ah)(),e.components),{Playground:n,IconCheckCircleFill:i,Link:s,ExternalLink:c,InternalLink:u}=t;return c||p("ExternalLink",!0),i||p("IconCheckCircleFill",!0),u||p("InternalLink",!0),s||p("Link",!0),n||p("Playground",!0),l.createElement(l.Fragment,null,l.createElement(t.h2,{id:"code",style:{position:"relative"}},"Code",l.createElement(t.a,{href:"#code","aria-label":"code permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h3,{id:"code-examples",style:{position:"relative"}},"Code examples",l.createElement(t.a,{href:"#code-examples","aria-label":"code examples permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h4,{id:"default",style:{position:"relative"}},"Default",l.createElement(t.a,{href:"#default","aria-label":"default permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n,{scope:{PhoneInput:r.P}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},'import { PhoneInput } from \'hds-react\';\n\n() => (\n  <PhoneInput\n    defaultValue="0451234567"\n    helperText="Assistive text"\n    id="phone-input-1"\n    label="Phone number"\n    style={{ maxWidth: \'320px\' }}\n  />\n)\n')),l.createElement(t.pre,null,l.createElement(t.code,{className:"language-html"},'<div class="hds-text-input" style="max-width:320px">\n  <label for="phone-input-1-core" class="hds-text-input__label">\n    Phone number\n  </label>\n  <div class="hds-text-input__input-wrapper">\n    <input\n      id="phone-input-1-core"\n      class="hds-text-input__input"\n      type="tel"\n      autocomplete="tel"\n      value="0451234567"\n    />\n  </div>\n  <span class="hds-text-input__helper-text">Assistive text</span>\n</div>\n'))),"\n",l.createElement(t.h4,{id:"with-a-country-code-selection",style:{position:"relative"}},"With a country code selection",l.createElement(t.a,{href:"#with-a-country-code-selection","aria-label":"with a country code selection permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n,{scope:{PhoneInput:r.P,Combobox:o.C}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},'import { PhoneInput } from \'hds-react\';\n\n() => {\n  const options = [{ label: \'Finland (+358)\' }, { label: \'UK (+46)\' }];\n  return (\n    <>\n      <p id="work-phone" style={{ fontSize: \'18px\', fontWeight: \'bold\' }}>\n        Work phone\n      </p>\n      <div style={{ display: \'grid\', gridTemplateColumns: \'200px 300px\', columnGap: \'16px\' }}>\n        <Combobox\n          id="combobox1"\n          label="Country code"\n          helper="Assistive text"\n          aria-describedby="work-phone"\n          options={options}\n          defaultValue={{ label: \'Finland (+358)\' }}\n          required\n          toggleButtonAriaLabel="Choose country code"\n        />\n        <PhoneInput\n          id="phone-input-2"\n          defaultValue="0451234567"\n          aria-describedby="work-phone"\n          label="Phone number"\n          required={true}\n        />\n      </div>\n    </>\n  )\n}\n'))),"\n",l.createElement(t.h3,{id:"packages",style:{position:"relative"}},"Packages",l.createElement(t.a,{href:"#packages","aria-label":"packages permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.table,null,l.createElement(t.thead,null,l.createElement(t.tr,null,l.createElement(t.th,null,"Package"),l.createElement(t.th,null,"Included"),l.createElement(t.th,null,"Storybook link"),l.createElement(t.th,null,"Source link"))),l.createElement(t.tbody,null,l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.strong,null,"HDS React")),l.createElement(t.td,null,l.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},l.createElement(i)," Yes ")),l.createElement(t.td,null,l.createElement(s,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-phoneinput--default"},"View in Storybook")),l.createElement(t.td,null,l.createElement(c,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/react/src/components/phoneInput"},"View source"))),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.strong,null,"HDS Core")),l.createElement(t.td,null,l.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},l.createElement(i)," Yes ")),l.createElement(t.td,null,l.createElement(s,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/core/?path=/story/components-phone-input--default"},"View in Storybook")),l.createElement(t.td,null,l.createElement(c,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/core/src/components/phone-input"},"View source"))))),"\n",l.createElement(t.h3,{id:"properties",style:{position:"relative"}},"Properties",l.createElement(t.a,{href:"#properties","aria-label":"properties permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"Note! You can find the full list of properties in the ",l.createElement(s,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-phoneinput--default"},"React Storybook.")),"\n",l.createElement(t.p,null,"Also, note that this component is an input. All features supported by the HDS TextInput are also supported by this component. See ",l.createElement(u,{href:"/components/text-input"},"TextInput documentation page")," for more information."),"\n",l.createElement(t.table,null,l.createElement(t.thead,null,l.createElement(t.tr,null,l.createElement(t.th,null,"Property"),l.createElement(t.th,null,"Description"),l.createElement(t.th,null,"Values"),l.createElement(t.th,null,"Default value"))),l.createElement(t.tbody,null,l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"label")),l.createElement(t.td,null,"The label for the input."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,"[Table 1:PhoneInput properties]"),l.createElement(t.td),l.createElement(t.td),l.createElement(t.td)))))}function p(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){return void 0===e&&(e={}),l.createElement(s,e,l.createElement(c,e))}},93998:function(e,t,n){n.r(t);var a=n(11151),l=n(67294),r=n(83428),o=n(57674),i=n(89482),s=(n(18607),n(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,a.ah)(),e.components);return s.Z||p("PageTabs",!1),s.Z.Tab||p("PageTabs.Tab",!0),s.Z.TabList||p("PageTabs.TabList",!0),s.Z.TabPanel||p("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"phoneinput",style:{position:"relative"}},"PhoneInput",l.createElement(t.a,{href:"#phoneinput","aria-label":"phoneinput permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(r.S,{type:"info"},"Stable"),l.createElement(r.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(o.Z)),"\n",l.createElement(i.Z,null,"A phone input allows the user to enter phone number values. "),"\n",l.createElement(s.Z,{pageContext:e.pageContext},l.createElement(s.Z.TabList,null,l.createElement(s.Z.Tab,{href:"/"},"Usage"),l.createElement(s.Z.Tab,{href:"/code"},"Code"),l.createElement(s.Z.Tab,{href:"/accessibility"},"Accessibility")),l.createElement(s.Z.TabPanel,null,e.children)))}function p(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,a.ah)(),e.components);return t?l.createElement(t,e,l.createElement(c,e)):c(e)}},57674:function(e,t,n){var a=n(67294),l=n(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return a.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},a.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>a.createElement("li",{key:t},a.createElement("span",{className:"status-name"},t),a.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-phone-input-index-mdx-54968bef4866d6aee90b.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-phone-input-index-mdx-54968bef4866d6aee90b.js
new file mode 100644
index 00000000000..46409be88a0
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-phone-input-index-mdx-54968bef4866d6aee90b.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[5166],{93667:function(e,t,n){n.d(t,{I:function(){return s},t:function(){return o}});var a=n(67294),i=n(7444),l=n(34300),r=n(41125),o={root:"TextInput-module_root__2CMNr text-input_hds-text-input__2LODq",inputWrapper:"TextInput-module_inputWrapper__3Rvel text-input_hds-text-input__input-wrapper__1OqYG",input:"TextInput-module_input__1BlHi text-input_hds-text-input__input__GJm5C",hasButton:"TextInput-module_hasButton__2KCM1",errorText:"TextInput-module_errorText__3pizm text-input_hds-text-input__error-text__1GLYk",helperText:"TextInput-module_helperText__2dLR6 text-input_hds-text-input__helper-text__3V2KM",invalidText:"TextInput-module_invalidText__1w4sm text-input_hds-text-input__helper-text__3V2KM",successText:"TextInput-module_successText__2NMCP text-input_hds-text-input__success-text__3EOiy",infoText:"TextInput-module_infoText__zHOGs text-input_hds-text-input__info-text__3bqzy",invalid:"TextInput-module_invalid__2iYo2 text-input_hds-text-input--invalid__1UfKC",success:"TextInput-module_success__1kDOm text-input_hds-text-input--success__3dm2J",readOnly:"TextInput-module_readOnly__j615N undefined",buttonWrapper:"TextInput-module_buttonWrapper___filA text-input_hds-text-input__buttons__1RMzT",button:"TextInput-module_button__1ySMX text-input_hds-text-input__button__1Fh0I"};(0,i.s)("@keyframes text-input_fadeIn__2IDZ8{0%{opacity:0}to{opacity:1}}.text-input_hds-text-input__2LODq{--border-width:2px;--outline-width:3px;--input-height:56px;--textarea-height:149px;--icon-size:var(--spacing-m);--helper-color-default:var(--color-black-60);--helper-color-invalid:var(--color-error);--helper-color-success:var(--color-success);--helper-color-info:var(--color-black-90);--helper-color-info-icon:var(--color-coat-of-arms);--icon-color-invalid:var(--color-error);--input-background-default:var(--color-white);--input-background-disabled:var(--color-black-10);--input-border-color-default:var(--color-black-50);--input-border-color-hover:var(--color-black-90);--input-border-color-focus:var(--color-black-90);--input-border-color-invalid:var(--color-error);--input-border-color-disabled:var(--color-black-10);--input-border-color-success:var(--color-success);--input-color-default:var(--color-black-90);--input-color-disabled:var(--color-black-40);--label-color-default:var(--color-black-90);--label-color-invalid:var(--color-black-90);--placeholder-color:var(--color-black-60)}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C{-webkit-appearance:none;background-color:var(--input-background-default);border:var(--border-width) solid var(--input-border-color-default);border-radius:0;box-sizing:border-box;color:var(--input-color-default);font-family:inherit;font-size:1.125em;height:var(--input-height);line-height:normal;margin:0;padding:0 var(--spacing-s);width:100%;will-change:transform,box-shadow}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C:hover{border-color:var(--input-border-color-hover);transition:border-color 85ms ease-out}.text-input_hds-text-input__input-wrapper__1OqYG:focus-within .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-focus);outline:none}.text-input_hds-text-input__2LODq.text-input_hds-text-input--invalid__1UfKC .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-invalid)}.text-input_hds-text-input__2LODq.text-input_hds-text-input--success__3dm2J .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-success)}.text-input_hds-text-input__input-wrapper__1OqYG:focus-within .text-input_hds-text-input__input__GJm5C:not([readonly]){box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);transform:translateZ(0);transition:85ms ease-out;transition-property:box-shadow,transform}.text-input_hds-text-input__label__15F2V{color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.text-input_hds-text-input--invalid__1UfKC .text-input_hds-text-input__label__15F2V{color:var(--label-color-invalid);transition:color 85ms linear}.text-input_hds-text-input__required__z3Hm0{color:var(--color-black-90);display:inline-block;font-size:var(--fontsize-body-xl);line-height:1;margin-left:var(--spacing-2-xs);transform:translateY(var(--spacing-3-xs))}.text-input_hds-text-input__input-wrapper__1OqYG{display:flex;position:relative}.text-input_hds-text-input__2LODq textarea.text-input_hds-text-input__input__GJm5C{font-family:inherit;height:var(--textarea-height);margin:0;min-height:var(--input-height);overflow:auto;padding:var(--spacing-s);resize:vertical}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C::-moz-placeholder{color:var(--placeholder-color);opacity:1}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C::placeholder{color:var(--placeholder-color);opacity:1}.text-input_hds-text-input__helper-text__3V2KM{color:var(--helper-color-default)}.text-input_hds-text-input__error-text__1GLYk,.text-input_hds-text-input__helper-text__3V2KM{display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);white-space:pre-line}.text-input_hds-text-input__error-text__1GLYk{color:var(--helper-color-invalid);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.text-input_hds-text-input__error-text__1GLYk:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__error-text__1GLYk:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--icon-color-invalid);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__success-text__3EOiy{color:var(--helper-color-success);display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative;white-space:pre-wrap}.text-input_hds-text-input__success-text__3EOiy:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__success-text__3EOiy:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--helper-color-success);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__info-text__3bqzy{color:var(--helper-color-info);display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.text-input_hds-text-input__info-text__3bqzy:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__info-text__3bqzy:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--helper-color-info-icon);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C[disabled]{background-color:var(--input-background-disabled);border-color:var(--input-border-color-disabled);color:var(--input-color-disabled);cursor:not-allowed}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C[readonly]{background-color:transparent;border:0;color:var(--input-color-default);padding:0;-webkit-text-fill-color:var(--input-color-default)}.text-input_hds-text-input__buttons__1RMzT{align-items:center;bottom:0;display:flex;font-size:1rem;justify-content:center;margin-right:calc(var(--spacing-s) - var(--spacing-xs) / 2);position:absolute;right:0;top:0}.text-input_hds-text-input__button__1Fh0I{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;display:flex;font:inherit;outline:none;padding:var(--spacing-xs) calc(var(--spacing-xs) / 2)}.text-input_hds-text-input__button__1Fh0I:focus{outline:var(--outline-width) solid var(--color-focus-outline)}.TextInput-module_root__2CMNr{position:relative}.TextInput-module_input__1BlHi.TextInput-module_hasButton__2KCM1{padding-right:calc(2 * var(--spacing-s) + 1.5rem)}.TextInput-module_button__1ySMX:disabled{cursor:not-allowed}.TextInput-module_button__1ySMX:focus{outline:var(--outline-width) solid var(--color-focus-outline)}");const s=e=>{let{children:t,className:n="",errorText:i,helperText:s,hideLabel:c=!1,id:u,invalid:d=!1,isAriaLabelledBy:p=!1,label:h,labelId:_,onBlur:m,required:x=!1,style:b,successText:v,infoText:f,tooltipLabel:g,tooltipText:E,tooltipButtonLabel:y}=e;return a.createElement("div",{onBlur:m,className:(0,l.c)(o.root,d&&o.invalid,v&&o.success,n),style:b},h&&a.createElement(r.F,{id:_,inputId:u,isAriaLabelledBy:p,hidden:c,label:h,required:x,tooltipLabel:g,tooltipButtonLabel:y,tooltipText:E}),a.createElement("div",{className:(0,l.c)(o.inputWrapper)},t),i&&a.createElement("div",{className:o.errorText,id:u+"-error"},i),v&&a.createElement("div",{className:o.successText,id:u+"-success"},v),f&&a.createElement("div",{className:o.infoText,id:u+"-info"},f),s&&a.createElement("div",{className:o.helperText,id:u+"-helper"},s))}},20968:function(e,t,n){n.d(t,{P:function(){return o}});var a=n(80136),i=n(67294),l=n(93667),r=n(37776);const o=i.forwardRef(((e,t)=>{var{"aria-describedby":n,className:o="",disabled:s=!1,defaultValue:c,errorText:u,helperText:d,hideLabel:p,invalid:h,id:_,label:m,onChange:x=(()=>null),required:b,style:v,successText:f,infoText:g,tooltipLabel:E,tooltipText:y,tooltipButtonLabel:w,type:T="tel"}=e,k=(0,a._)(e,["aria-describedby","className","disabled","defaultValue","errorText","helperText","hideLabel","invalid","id","label","onChange","required","style","successText","infoText","tooltipLabel","tooltipText","tooltipButtonLabel","type"]);const C={className:o,errorText:u,helperText:d,hideLabel:p,id:_,invalid:h,label:m,required:b,style:v,successText:f,tooltipLabel:E,tooltipText:y,tooltipButtonLabel:w},z=[n,(0,r.c)(_,d,u,f,g)].filter((e=>e)).join(" ");return i.createElement(l.I,Object.assign({},C),i.createElement("input",Object.assign({className:l.t.input,defaultValue:c,disabled:s,id:_,onChange:x,ref:t,required:b,type:T,"aria-describedby":z.length>0?z:null,autoComplete:"tel"},k)))}))},37776:function(e,t,n){n.d(t,{c:function(){return a}});var a=(e,t,n,a,i)=>[t&&e+"-helper",n&&e+"-error",a&&e+"-success",i&&e+"-info"].filter((e=>e)).join(" ")},10324:function(e,t,n){n.r(t),n.d(t,{CountryCodeExample:function(){return c}});var a=n(11151),i=n(67294),l=n(68477),r=n(20968),o=n(93998);const s=e=>{let{children:t,pageContext:n}=e;return i.createElement(o.default,{pageContext:n},t)},c=()=>{const e=Object.assign({p:"p",div:"div"},(0,a.ah)());return i.createElement(i.Fragment,null,i.createElement(e.p,{id:"work-phone",style:{fontSize:"18px",fontWeight:"bold"}},"Work phone"),i.createElement(e.div,{style:{display:"grid",gridTemplateColumns:"200px 300px",columnGap:"16px"}},i.createElement(l.C,{id:"combobox1",label:"Country code",helper:"Assistive text","aria-describedby":"work-phone",options:[{label:"Finland (+358)"},{label:"UK (+46)"}],defaultValue:{label:"Finland (+358)"},required:!0,toggleButtonAriaLabel:"Choose country code"}),i.createElement(r.P,{id:"input2",defaultValue:"0451234567","aria-describedby":"work-phone",label:"Phone number",required:!0})))};function u(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",strong:"strong",em:"em",h4:"h4",p:"p",code:"code"},(0,a.ah)(),e.components),{PlaygroundPreview:n,InternalLink:l}=t;return l||d("InternalLink",!0),n||d("PlaygroundPreview",!0),i.createElement(i.Fragment,null,i.createElement(t.h2,{id:"usage",style:{position:"relative"}},"Usage",i.createElement(t.a,{href:"#usage","aria-label":"usage permalink",className:"header-anchor after"},i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",i.createElement(t.h3,{id:"example",style:{position:"relative"}},"Example",i.createElement(t.a,{href:"#example","aria-label":"example permalink",className:"header-anchor after"},i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",i.createElement(n,null,i.createElement(r.P,{defaultValue:"0451234567",helperText:"Assistive text",label:"Phone number",style:{maxWidth:"320px"}})),"\n",i.createElement(t.h3,{id:"principles",style:{position:"relative"}},"Principles",i.createElement(t.a,{href:"#principles","aria-label":"principles permalink",className:"header-anchor after"},i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",i.createElement(t.ul,null,"\n",i.createElement(t.li,null,i.createElement(t.strong,null,"A label should always be provided with a phone number input."),"\n",i.createElement(t.ul,null,"\n",i.createElement(t.li,null,"Make sure that the label is clear and concise. The user should immediately understand what phone number they are supposed to input."),"\n"),"\n"),"\n",i.createElement(t.li,null,"If a specific phone number format is required, describe the format in the assistive text.","\n",i.createElement(t.ul,null,"\n",i.createElement(t.li,null,"Generally it is recommended to allow all common formats and fix the format automatically for the user if needed."),"\n"),"\n"),"\n",i.createElement(t.li,null,"Unless you can fill the input for the user automatically, a default value should not be set.","\n",i.createElement(t.ul,null,"\n",i.createElement(t.li,null,'A placeholder text is often not used either. If a placeholder is used, it is a good practice to make them easily distinguishable from the actual input. A recommended way to do this is to format the placeholder text like this: "',i.createElement(t.em,null,"E.g. 0401234567"),'".'),"\n"),"\n"),"\n",i.createElement(t.li,null,"If a country code must be inputted, a separate ",i.createElement(l,{href:"/components/dropdown#combobox-single-selection"},"HDS Combobox input")," should be used alongside the phone number input."),"\n"),"\n",i.createElement(t.h3,{id:"variations",style:{position:"relative"}},"Variations",i.createElement(t.a,{href:"#variations","aria-label":"variations permalink",className:"header-anchor after"},i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",i.createElement(t.h4,{id:"default",style:{position:"relative"}},"Default",i.createElement(t.a,{href:"#default","aria-label":"default permalink",className:"header-anchor after"},i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",i.createElement(t.p,null,"A default variant of the phone number input."),"\n",i.createElement(t.p,null,"Note! A default value is used here for demonstration purposes. It should not be used unless the input can be automatically filled for the user."),"\n",i.createElement(n,null,i.createElement(r.P,{defaultValue:"0451234567",helperText:"Assistive text",label:"Phone number",style:{maxWidth:"320px"}})),"\n",i.createElement(t.h4,{id:"with-a-country-code-selection",style:{position:"relative"}},"With a country code selection",i.createElement(t.a,{href:"#with-a-country-code-selection","aria-label":"with a country code selection permalink",className:"header-anchor after"},i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",i.createElement(t.p,null,"If a country code is a required input (or otherwise critical), it should be asked in a separate input using ",i.createElement(l,{href:"/components/dropdown#combobox-single-selection"},"HDS Combobox.")),"\n",i.createElement(t.p,null,"These two input are linked together using a fieldset title and ",i.createElement(t.code,null,"aria-desribedby")," attribute. This way is is clear for screen readers which phone number these two inputs relate to."),"\n","\n",i.createElement(n,null,i.createElement(c)))}function d(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){return void 0===e&&(e={}),i.createElement(s,e,i.createElement(u,e))}},93998:function(e,t,n){n.r(t);var a=n(11151),i=n(67294),l=n(83428),r=n(57674),o=n(89482),s=(n(18607),n(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,a.ah)(),e.components);return s.Z||u("PageTabs",!1),s.Z.Tab||u("PageTabs.Tab",!0),s.Z.TabList||u("PageTabs.TabList",!0),s.Z.TabPanel||u("PageTabs.TabPanel",!0),i.createElement(i.Fragment,null,i.createElement(t.h1,{id:"phoneinput",style:{position:"relative"}},"PhoneInput",i.createElement(t.a,{href:"#phoneinput","aria-label":"phoneinput permalink",className:"header-anchor after"},i.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",i.createElement("div",{class:"status-label-description"},i.createElement(l.S,{type:"info"},"Stable"),i.createElement(l.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),i.createElement(r.Z)),"\n",i.createElement(o.Z,null,"A phone input allows the user to enter phone number values. "),"\n",i.createElement(s.Z,{pageContext:e.pageContext},i.createElement(s.Z.TabList,null,i.createElement(s.Z.Tab,{href:"/"},"Usage"),i.createElement(s.Z.Tab,{href:"/code"},"Code"),i.createElement(s.Z.Tab,{href:"/accessibility"},"Accessibility")),i.createElement(s.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,a.ah)(),e.components);return t?i.createElement(t,e,i.createElement(c,e)):c(e)}},57674:function(e,t,n){var a=n(67294),i=n(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return a.createElement(i.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},a.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>a.createElement("li",{key:t},a.createElement("span",{className:"status-name"},t),a.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-phone-input-tabs-mdx-d648ebcc20832dba9301.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-phone-input-tabs-mdx-d648ebcc20832dba9301.js
new file mode 100644
index 00000000000..32c0b583744
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-phone-input-tabs-mdx-d648ebcc20832dba9301.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[7002],{83428:function(e,a,t){t.d(a,{S:function(){return i}});var s=t(80136),l=t(67294),n=t(7444),r=t(34300),c={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:a}=e;return l.createElement("span",{className:c.statusLabelIcon,"aria-hidden":"true"},a)},i=e=>{var{children:a,className:t,dataTestId:n,type:i="neutral",iconLeft:u}=e,b=(0,s._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(c.statusLabel,c[i],u&&c.statusLabelWithIcon,t),"data-testid":n},b),u&&l.createElement(o,{icon:u}),a)}},93998:function(e,a,t){t.r(a);var s=t(11151),l=t(67294),n=t(83428),r=t(57674),c=t(89482),o=(t(18607),t(26127));function i(e){const a=Object.assign({h1:"h1",a:"a",span:"span"},(0,s.ah)(),e.components);return o.Z||u("PageTabs",!1),o.Z.Tab||u("PageTabs.Tab",!0),o.Z.TabList||u("PageTabs.TabList",!0),o.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(a.h1,{id:"phoneinput",style:{position:"relative"}},"PhoneInput",l.createElement(a.a,{href:"#phoneinput","aria-label":"phoneinput permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(n.S,{type:"info"},"Stable"),l.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(c.Z,null,"A phone input allows the user to enter phone number values. "),"\n",l.createElement(o.Z,{pageContext:e.pageContext},l.createElement(o.Z.TabList,null,l.createElement(o.Z.Tab,{href:"/"},"Usage"),l.createElement(o.Z.Tab,{href:"/code"},"Code"),l.createElement(o.Z.Tab,{href:"/accessibility"},"Accessibility")),l.createElement(o.Z.TabPanel,null,e.children)))}function u(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,s.ah)(),e.components);return a?l.createElement(a,e,l.createElement(i,e)):i(e)}},89482:function(e,a,t){var s=t(67294);a.Z=e=>{let{color:a="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:l={},children:n}=e;return s.createElement("p",{style:{fontSize:t,color:a,maxWidth:600,...l}},n)}},26127:function(e,a,t){var s=t(67294),l=t(14160),n=t(94671);const r="PageTabList",c="PageTabPanel",o="PageTab",i=e=>{var a;let{pageContext:t,children:i}=e;const u=t.frontmatter.slug,b=Array.isArray(i)?i:[i],d=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===r)),h=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===c)),m=null===(a=d.props)||void 0===a?void 0:a.children.filter((e=>e.type.componentName===o)),p=m.findIndex((e=>u.endsWith(e.props.href))),_=-1===p?0:p,f=0===_?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return s.createElement(n.a,{initiallyActiveTab:_},s.createElement(n.a.TabList,{className:"page-tabs-list"},m.map((e=>s.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),m.map(((e,a)=>s.createElement(n.a.TabPanel,{key:e.props.href},_===a?h.props.children:s.createElement("div",null)))))},u=e=>{let{children:a}=e;return s.createElement(n.a.TabList,null,a)};u.componentName=r;const b=e=>{let{href:a,slug:t,children:l}=e;return s.createElement(n.a.Tab,null,l)};b.componentName=o;const d=e=>{let{children:a}=e;return s.createElement(n.a.TabPanel,null,a)};d.componentName=c,i.TabList=u,i.Tab=b,i.TabPanel=d,a.Z=i},57674:function(e,a,t){var s=t(67294),l=t(45422);a.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return s.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},s.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((a=>s.createElement("li",{key:a},s.createElement("span",{className:"status-name"},a),s.createElement("span",null,e[a]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-radio-button-accessibility-mdx-8adc96e274231a4100e8.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-radio-button-accessibility-mdx-8adc96e274231a4100e8.js
new file mode 100644
index 00000000000..9e5caf2684f
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-radio-button-accessibility-mdx-8adc96e274231a4100e8.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[2105,7487],{83428:function(e,t,a){a.d(t,{S:function(){return c}});var l=a(80136),s=a(67294),n=a(7444),r=a(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const i=e=>{let{icon:t}=e;return s.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:n,type:c="neutral",iconLeft:u}=e,b=(0,l._)(e,["children","className","dataTestId","type","iconLeft"]);return s.createElement("span",Object.assign({className:(0,r.c)(o.statusLabel,o[c],u&&o.statusLabelWithIcon,a),"data-testid":n},b),u&&s.createElement(i,{icon:u}),t)}},31643:function(e,t,a){a.r(t);var l=a(11151),s=a(67294),n=a(33007),r=a(1076);const o=e=>{let{children:t,pageContext:a}=e;return s.createElement(n.default,{pageContext:a},t)};function i(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",strong:"strong"},(0,l.ah)(),e.components);return s.createElement(s.Fragment,null,s.createElement(t.h2,{id:"accessibility",style:{position:"relative"}},"Accessibility",s.createElement(t.a,{href:"#accessibility","aria-label":"accessibility permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.h3,{id:"pay-attention-to",style:{position:"relative"}},"Pay attention to",s.createElement(t.a,{href:"#pay-attention-to","aria-label":"pay attention to permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.ul,null,"\n",s.createElement(t.li,null,s.createElement(t.strong,null,"It is advisable to use colour combinations provided by the implementation.")," These combinations are ensured to comply with WCAG AA requirements. When customising colours, refer to ",s.createElement(r.Z,{href:"/foundation/design-tokens/colour"},"colour guidelines")," to ensure accessibility."),"\n",s.createElement(t.li,null,"When multiple Radio buttons are related to each other, group them together using ",s.createElement(r.Z,{href:"/components/selection-group"},"HDS Selection group"),". Selection group also includes a title for the group."),"\n"))}t.default=function(e){return void 0===e&&(e={}),s.createElement(o,e,s.createElement(i,e))}},33007:function(e,t,a){a.r(t);var l=a(11151),s=a(67294),n=a(83428),r=a(57674),o=a(89482),i=(a(18607),a(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,l.ah)(),e.components);return i.Z||u("PageTabs",!1),i.Z.Tab||u("PageTabs.Tab",!0),i.Z.TabList||u("PageTabs.TabList",!0),i.Z.TabPanel||u("PageTabs.TabPanel",!0),s.createElement(s.Fragment,null,s.createElement(t.h1,{id:"radiobutton",style:{position:"relative"}},"RadioButton",s.createElement(t.a,{href:"#radiobutton","aria-label":"radiobutton permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement("div",{class:"status-label-description"},s.createElement(n.S,{type:"info"},"Stable"),s.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),s.createElement(r.Z)),"\n",s.createElement(o.Z,null,"Radio buttons are used to pick an option when only one option can be chosen. "),"\n",s.createElement(i.Z,{pageContext:e.pageContext},s.createElement(i.Z.TabList,null,s.createElement(i.Z.Tab,{href:"/"},"Usage"),s.createElement(i.Z.Tab,{href:"/code"},"Code"),s.createElement(i.Z.Tab,{href:"/accessibility"},"Accessibility"),s.createElement(i.Z.Tab,{href:"/customisation"},"Customisation")),s.createElement(i.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,l.ah)(),e.components);return t?s.createElement(t,e,s.createElement(c,e)):c(e)}},89482:function(e,t,a){var l=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:s={},children:n}=e;return l.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...s}},n)}},26127:function(e,t,a){var l=a(67294),s=a(14160),n=a(94671);const r="PageTabList",o="PageTabPanel",i="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const u=a.frontmatter.slug,b=Array.isArray(c)?c:[c],d=b.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===r)),m=b.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===o)),h=null===(t=d.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===i)),p=h.findIndex((e=>u.endsWith(e.props.href))),g=-1===p?0:p,_=0===g?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return l.createElement(n.a,{initiallyActiveTab:g},l.createElement(n.a.TabList,{className:"page-tabs-list"},h.map((e=>l.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,s.navigate)(""+("/"===e.props.href?_:_+e.props.href))},e.props.children)))),h.map(((e,t)=>l.createElement(n.a.TabPanel,{key:e.props.href},g===t?m.props.children:l.createElement("div",null)))))},u=e=>{let{children:t}=e;return l.createElement(n.a.TabList,null,t)};u.componentName=r;const b=e=>{let{href:t,slug:a,children:s}=e;return l.createElement(n.a.Tab,null,s)};b.componentName=i;const d=e=>{let{children:t}=e;return l.createElement(n.a.TabPanel,null,t)};d.componentName=o,c.TabList=u,c.Tab=b,c.TabPanel=d,t.Z=c},57674:function(e,t,a){var l=a(67294),s=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return l.createElement(s.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},l.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>l.createElement("li",{key:t},l.createElement("span",{className:"status-name"},t),l.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-radio-button-code-mdx-b0d613eb5f42eddf8af2.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-radio-button-code-mdx-b0d613eb5f42eddf8af2.js
new file mode 100644
index 00000000000..5d6db093158
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-radio-button-code-mdx-b0d613eb5f42eddf8af2.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[3154,7487],{29520:function(e,t,a){a.d(t,{R:function(){return i}});var o=a(80136),n=a(67294),r=a(7444),l=a(34300);(0,r.s)('.radio-button_hds-radio-button__1kktv{--size:24px;--icon-scale:0.5;--border-width:2px;--outline-width:3px;--label-font-size:var(--fontsize-body-m);--label-padding:var(--spacing-2-xs);--background:var(--color-white);--background-hover:var(--color-white);--background-focus:var(--color-white);--background-unselected-disabled:var(--color-black-10);--background-selected-disabled:var(--color-white);--border-color-focus:var(--color-black-90);--border-color-selected:var(--color-bus);--border-color-selected-hover:var(--color-bus-dark);--border-color-selected-disabled:var(--color-black-20);--border-color-unselected:var(--color-black-50);--border-color-unselected-hover:var(--color-black-90);--border-color-unselected-disabled:var(--color-black-10);--icon-color-selected:var(--color-bus);--icon-color-unselected:transparent;--icon-color-hover:var(--color-bus-dark);--icon-color-disabled:var(--color-black-10);--label-color:var(--color-black-90);--label-color-disabled:var(--color-black-40);display:flex;flex-wrap:wrap;min-height:var(--size);position:relative}.radio-button_hds-radio-button__1kktv,.radio-button_hds-radio-button__1kktv *,.radio-button_hds-radio-button__1kktv :after,.radio-button_hds-radio-button__1kktv :before{box-sizing:border-box}.radio-button_hds-radio-button__1kktv:not(:first-of-type){margin-top:var(--spacing-2-xs)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__label__1XnIa:after,.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__label__1XnIa:before{border-radius:50%;content:"";left:0;position:absolute;top:0}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__label__1XnIa:after{background-clip:content-box;background-color:var(--icon-color-unselected);border:var(--border-width) solid var(--border-color-unselected);height:var(--size);padding:calc((var(--size) / 2 - var(--border-width) * 2) * (1 - var(--icon-scale)));width:var(--size)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:checked+.radio-button_hds-radio-button__label__1XnIa:after{background-color:var(--icon-color-selected);border-color:var(--border-color-selected)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:focus+.radio-button_hds-radio-button__label__1XnIa:after,.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:hover+.radio-button_hds-radio-button__label__1XnIa:after{transition:85ms ease-out;transition-property:background-color,border-color}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:disabled+.radio-button_hds-radio-button__label__1XnIa:after{border-color:var(--border-color-unselected-disabled)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:checked:disabled+.radio-button_hds-radio-button__label__1XnIa:after{background-color:var(--icon-color-disabled);border-color:var(--border-color-selected-disabled)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:not(:disabled):focus+.radio-button_hds-radio-button__label__1XnIa:after{border-color:var(--border-color-focus)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:not(:disabled):hover+.radio-button_hds-radio-button__label__1XnIa:after,.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:not(:disabled):hover:focus+.radio-button_hds-radio-button__label__1XnIa:after{border-color:var(--border-color-unselected-hover)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__label__1XnIa:before{background-color:var(--background);height:var(--size);width:var(--size)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:focus+.radio-button_hds-radio-button__label__1XnIa:before,.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:hover+.radio-button_hds-radio-button__label__1XnIa:before{transition:85ms ease-out;transition-property:background-color,box-shadow,transform}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6{font-family:inherit;font-size:100%;height:var(--size);left:0;line-height:1.15;margin:0;opacity:0;position:absolute;top:0;width:var(--size)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__label__1XnIa{color:var(--label-color);cursor:pointer;font-size:var(--label-font-size);line-height:var(--lineheight-m);padding-left:calc(var(--size) + var(--label-padding));padding-top:calc((var(--size) - (var(--label-font-size) * var(--lineheight-m))) / 2);position:relative}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:hover+.radio-button_hds-radio-button__label__1XnIa:before{background-color:var(--background-hover)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:focus+.radio-button_hds-radio-button__label__1XnIa:before{box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);transform:translateZ(0)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:not(:disabled):checked:hover+.radio-button_hds-radio-button__label__1XnIa:after,.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:not(:disabled):checked:hover:focus+.radio-button_hds-radio-button__label__1XnIa:after{background-color:var(--icon-color-hover);border-color:var(--border-color-selected-hover)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:disabled+.radio-button_hds-radio-button__label__1XnIa{color:var(--label-color-disabled)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:disabled+.radio-button_hds-radio-button__label__1XnIa:before{background-color:var(--background-unselected-disabled)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:checked:disabled+.radio-button_hds-radio-button__label__1XnIa:before{background-color:var(--background-selected-disabled)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:disabled,.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:disabled+.radio-button_hds-radio-button__label__1XnIa{cursor:not-allowed}.helpers_visually-hidden__2SQYx{border:0;clip:"rect(0 0 0 0)";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.helpers_button-reset__2Gr5D{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.helpers_text-body__1-RNd{color:var(--color-black-90);font-family:var(--font-default);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.helpers_text-medium__WvSD9{font-family:var(--font-default);font-weight:500}.helpers_text-bold__RHjJI{font-family:var(--font-default);font-weight:700}.helpers_text-xl__2rpQg{font-size:var(--fontsize-heading-m)}.helpers_text-lg__2dciy{font-size:var(--fontsize-heading-s)}.helpers_text-md__-y1dr{font-size:var(--fontsize-heading-xs)}.helpers_subtitle__3x21G{font-size:var(--fontsize-body-m)}.helpers_text-sm__238bH{font-size:var(--fontsize-body-s);line-height:var(--lineheight-xl)}.helpers_heading-xxl__1KEkh{font-size:var(--fontsize-heading-xxl);font-weight:400;letter-spacing:-1.2px;line-height:var(--lineheight-s)}.helpers_heading-xl__GYTuO{font-size:var(--fontsize-heading-xl);font-weight:400;letter-spacing:-1px;line-height:var(--lineheight-s)}.helpers_heading-xl-mobile__1Dfib{font-size:var(--fontsize-heading-xl-mobile);font-weight:400;letter-spacing:-.8px;line-height:var(--lineheight-s)}.helpers_heading-l__1BzbR{font-size:var(--fontsize-heading-l);font-weight:400;letter-spacing:-.4px;line-height:var(--lineheight-s)}.helpers_heading-m__2APFi{font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-.2px;line-height:32px}.helpers_heading-s__2adCF{font-size:var(--fontsize-heading-s);font-weight:500;letter-spacing:.2px;line-height:1.4}.helpers_heading-xs__uSPiv{font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:.4px;line-height:1.33}.helpers_heading-xxs__37xm2{font-size:var(--fontsize-heading-xxs);font-weight:700;letter-spacing:.4px;line-height:var(--lineheight-l)}.helpers_helper-text__awnLq{color:var(--color-black-60);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs)}');const i=n.forwardRef(((e,t)=>{var{checked:a=!1,className:r="",disabled:i=!1,helperText:s,id:d,label:c,onChange:u=(()=>null),style:_,value:b}=e,h=(0,o._)(e,["checked","className","disabled","helperText","id","label","onChange","style","value"]);return c&&"string"!=typeof c&&"number"!=typeof c&&console.warn("Using ReactElement as a label is against good usability and accessibility practices. Please prefer plain strings."),n.createElement("div",{className:(0,l.c)("RadioButton-module_radioButton__1xM1I radio-button_hds-radio-button__1kktv",r),style:_},n.createElement("input",Object.assign({ref:t,id:d,className:(0,l.c)("RadioButton-module_input__1cTWc radio-button_hds-radio-button__input__27sH6"),onChange:u,value:b,type:"radio",disabled:i,checked:a,"aria-describedby":s?d+"-helper":null},h)),n.createElement("label",{htmlFor:d,className:(0,l.c)("RadioButton-module_label__3Zij9 radio-button_hds-radio-button__label__1XnIa")},c),s&&n.createElement("div",{className:"RadioButton-module_helperText__321Ay helpers_helper-text__awnLq",id:d+"-helper"},s))}));i.displayName="RadioButton"},66016:function(e,t,a){a.d(t,{S:function(){return u}});var o=a(80136),n=a(67294),r=a(7444),l=a(34300),i=a(91267),s=a(42215),d=a(45422),c={label:"SelectionGroup-module_label__qlluz",selectionGroup:"SelectionGroup-module_selectionGroup__6Jxu8",items:"SelectionGroup-module_items__28m_S",vertical:"SelectionGroup-module_vertical__3iorC",horizontal:"SelectionGroup-module_horizontal__2eiY9",tooltipButton:"SelectionGroup-module_tooltipButton__2ibjm",errorText:"SelectionGroup-module_errorText__3tOPD selection-group_hds-selection-group__error-text__1Ynb9",helperText:"SelectionGroup-module_helperText__2k_WY helpers_helper-text__3QI7A"};(0,r.s)(".selection-group_hds-selection-group__2bwsd{--spacing-col:1.25rem;--spacing-row:var(--spacing-s);--label-color-default:var(--color-black-90);--icon-size:var(--spacing-m);border:0;padding:0}.selection-group_hds-selection-group__2bwsd>:not(.selection-group_hds-selection-group__items__21yOL){float:left}.selection-group_hds-selection-group__legend__149U2{box-sizing:border-box;color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-row);max-width:100%;padding:0;white-space:normal}.selection-group_hds-selection-group__required__3XPYK{color:var(--label-color-default);display:inline-block;font-size:var(--fontsize-body-xl);line-height:1;margin-left:var(--spacing-2-xs);transform:translateY(var(--spacing-3-xs))}.selection-group_hds-selection-group__items__21yOL{clear:left;display:grid;grid-gap:var(--spacing-row) var(--spacing-col);gap:var(--spacing-row) var(--spacing-col);justify-content:start}.selection-group_hds-selection-group__items--vertical__1v39g{grid-auto-flow:row}.selection-group_hds-selection-group__items--horizontal__3-_1w{grid-auto-flow:column}.selection-group_hds-selection-group__error-text__1Ynb9{color:var(--color-error);display:block;font-size:var(--fontsize-body-m);margin-top:var(--spacing-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.selection-group_hds-selection-group__error-text__1Ynb9:before{background:var(--color-error);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.helpers_visually-hidden__8xzsB{border:0;clip:\"rect(0 0 0 0)\";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.helpers_button-reset__D5XBg{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.helpers_text-body__kuwbN{color:var(--color-black-90);font-family:var(--font-default);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.helpers_text-medium__3yuel{font-family:var(--font-default);font-weight:500}.helpers_text-bold__2m1Nh{font-family:var(--font-default);font-weight:700}.helpers_text-xl__3Q3g5{font-size:var(--fontsize-heading-m)}.helpers_text-lg__3N-Yu{font-size:var(--fontsize-heading-s)}.helpers_text-md__1iyYX{font-size:var(--fontsize-heading-xs)}.helpers_subtitle__28FvQ{font-size:var(--fontsize-body-m)}.helpers_text-sm__OuSWo{font-size:var(--fontsize-body-s);line-height:var(--lineheight-xl)}.helpers_heading-xxl__1KMqh{font-size:var(--fontsize-heading-xxl);font-weight:400;letter-spacing:-1.2px;line-height:var(--lineheight-s)}.helpers_heading-xl__G41Bl{font-size:var(--fontsize-heading-xl);font-weight:400;letter-spacing:-1px;line-height:var(--lineheight-s)}.helpers_heading-xl-mobile__uKZqQ{font-size:var(--fontsize-heading-xl-mobile);font-weight:400;letter-spacing:-.8px;line-height:var(--lineheight-s)}.helpers_heading-l__29CXO{font-size:var(--fontsize-heading-l);font-weight:400;letter-spacing:-.4px;line-height:var(--lineheight-s)}.helpers_heading-m__16IDL{font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-.2px;line-height:32px}.helpers_heading-s__17rm-{font-size:var(--fontsize-heading-s);font-weight:500;letter-spacing:.2px;line-height:1.4}.helpers_heading-xs__rPz00{font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:.4px;line-height:1.33}.helpers_heading-xxs__Onkxt{font-size:var(--fontsize-heading-xxs);font-weight:700;letter-spacing:.4px;line-height:var(--lineheight-l)}.helpers_helper-text__3QI7A{color:var(--color-black-60);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs)}.SelectionGroup-module_label__qlluz{color:var(--label-color-default,var(--color-black-90));display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.SelectionGroup-module_selectionGroup__6Jxu8{--spacing-col:1.25rem;--spacing-row:var(--spacing-s);--label-color-default:var(--color-black-90);--icon-size:var(--spacing-m);border:0;padding:0}.SelectionGroup-module_selectionGroup__6Jxu8>:not(.SelectionGroup-module_items__28m_S){float:left}.SelectionGroup-module_label__qlluz{margin-bottom:var(--spacing-row);padding:0}.SelectionGroup-module_items__28m_S{clear:left;display:grid;gap:var(--spacing-row) var(--spacing-col);justify-content:start}.SelectionGroup-module_items__28m_S.SelectionGroup-module_vertical__3iorC{grid-auto-flow:row}.SelectionGroup-module_items__28m_S.SelectionGroup-module_horizontal__2eiY9{grid-auto-flow:column}.SelectionGroup-module_tooltipButton__2ibjm{margin-left:var(--spacing-2-xs)}");const u=e=>{var{label:t,direction:a="vertical",errorText:r,helperText:u,required:_,tooltipLabel:b,tooltipButtonLabel:h,tooltipText:p,children:m,className:g}=e,v=(0,o._)(e,["label","direction","errorText","helperText","required","tooltipLabel","tooltipButtonLabel","tooltipText","children","className"]);const f=(0,s.a)(m);return(0,n.useEffect)((()=>{let e=!1,t=!1;f.forEach((a=>{const o=a,{displayName:n}=o.type;"RadioButton"===n&&(e=!0,!0===o.props.checked&&(t=!0))})),e&&!t&&console.warn("All radio buttons in a SelectionGroup are unchecked. One radio button should be checked by default.")}),[m]),n.createElement("fieldset",Object.assign({className:(0,l.c)(c.selectionGroup,g)},v),n.createElement("legend",{className:c.label},t," ",_&&n.createElement(i.R,null)),p&&n.createElement(d.T,{buttonClassName:c.tooltipButton,tooltipLabel:b,buttonLabel:h},p),n.createElement("div",{className:(0,l.c)(c.items,c[a])},f.map((e=>(0,n.isValidElement)(e)&&n.createElement("div",{key:e.props.id,className:c.item},e)))),r&&n.createElement("div",{className:c.errorText},r),u&&n.createElement("div",{className:c.helperText},u))}},83428:function(e,t,a){a.d(t,{S:function(){return d}});var o=a(80136),n=a(67294),r=a(7444),l=a(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,r.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const s=e=>{let{icon:t}=e;return n.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},t)},d=e=>{var{children:t,className:a,dataTestId:r,type:d="neutral",iconLeft:c}=e,u=(0,o._)(e,["children","className","dataTestId","type","iconLeft"]);return n.createElement("span",Object.assign({className:(0,l.c)(i.statusLabel,i[d],c&&i.statusLabelWithIcon,a),"data-testid":r},u),c&&n.createElement(s,{icon:c}),t)}},13216:function(e,t,a){a.r(t);var o=a(11151),n=a(67294),r=a(29520),l=a(66016),i=a(33007);const s=e=>{let{children:t,pageContext:a}=e;return n.createElement(i.default,{pageContext:a},t)};function d(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",h4:"h4",pre:"pre",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",strong:"strong",p:"p"},(0,o.ah)(),e.components),{Playground:a,IconCheckCircleFill:i,Link:s,ExternalLink:d}=t;return d||c("ExternalLink",!0),i||c("IconCheckCircleFill",!0),s||c("Link",!0),a||c("Playground",!0),n.createElement(n.Fragment,null,n.createElement(t.h2,{id:"code",style:{position:"relative"}},"Code",n.createElement(t.a,{href:"#code","aria-label":"code permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.h3,{id:"code-examples",style:{position:"relative"}},"Code examples",n.createElement(t.a,{href:"#code-examples","aria-label":"code examples permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.h4,{id:"default",style:{position:"relative"}},"Default",n.createElement(t.a,{href:"#default","aria-label":"default permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(a,{scope:{RadioButton:r.R,useState:n.useState}},n.createElement(t.pre,null,n.createElement(t.code,{className:"language-jsx"},'import { RadioButton } from \'hds-react\';\n\n() => {\n  const [selectedItem, setSelectedItem] = useState("2");\n  const onChange = (event) => {\n    setSelectedItem(event.target.value);\n  };\n  return (<>\n    <RadioButton id="radio1" name="example" label="Label" value="1" checked={selectedItem === "1"} onChange={onChange}/>\n    <RadioButton id="radio2" name="example" label="Label" value="2" checked={selectedItem === "2"} onChange={onChange} />\n    <RadioButton disabled id="radio3" name="example-disabled" label="Label" value="3" checked={selectedItem === "3"} onChange={onChange}/>\n    <RadioButton id="radio4" name="example-helper" label="Label" value="4" checked={selectedItem === "4"} onChange={onChange} helperText="Helper text"/>\n  </>)\n}\n')),n.createElement(t.pre,null,n.createElement(t.code,{className:"language-html"},'<div>\n  <div class="hds-radio-button">\n    <input type="radio" id="radio1-core" name="example1" class="hds-radio-button__input" />\n    <label for="radio1-core"  class="hds-radio-button__label">Label</label>\n  </div>\n\n  <div class="hds-radio-button">\n    <input type="radio" id="radio2-core" name="example2" class="hds-radio-button__input" checked />\n    <label for="radio2-core"  class="hds-radio-button__label">Label</label>\n  </div>\n\n  <div class="hds-radio-button">\n    <input type="radio" id="radio3-core" name="example3" class="hds-radio-button__input" disabled />\n    <label for="radio3-core"  class="hds-radio-button__label">Label</label>\n  </div>\n</div>\n'))),"\n",n.createElement(t.h4,{id:"group",style:{position:"relative"}},"Group",n.createElement(t.a,{href:"#group","aria-label":"group permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(a,{scope:{RadioButton:r.R,SelectionGroup:l.S,useState:n.useState}},n.createElement(t.pre,null,n.createElement(t.code,{className:"language-jsx"},'import { RadioButton, SelectionGroup } from \'hds-react\';\n\n() => {\n  const [selectedItem, setSelectedItem] = useState("1");\n  const onChange = (event) => {\n    setSelectedItem(event.target.value);\n  };\n  return (\n    <SelectionGroup label="Radio button group">\n      <RadioButton id="v-radio1" name="v-radio" value="1" label="Option" checked={selectedItem === "1"} onChange={onChange} />\n      <RadioButton id="v-radio2" name="v-radio" value="2" label="Option" checked={selectedItem === "2"} onChange={onChange} />\n      <RadioButton id="v-radio3" name="v-radio" value="3" label="Option" checked={selectedItem === "3"} onChange={onChange} />\n      <RadioButton id="v-radio4" name="v-radio" value="4" label="Option" checked={selectedItem === "4"} onChange={onChange} />\n    </SelectionGroup>\n  );\n}\n')),n.createElement(t.pre,null,n.createElement(t.code,{className:"language-html"},'<fieldset class="hds-selection-group">\n  <legend class="hds-selection-group__legend">Radio button group</legend>\n  <div class="hds-selection-group__items">\n    <div class="hds-selection-group__item">\n      <div class="hds-radio-button">\n        <input type="radio" id="v-radio1-core" name="v-radio" class="hds-radio-button__input" value="foo" checked />\n        <label for="v-radio1-core" class="hds-radio-button__label">Option</label>\n      </div>\n    </div>\n    <div class="hds-selection-group__item">\n      <div class="hds-radio-button">\n        <input type="radio" id="v-radio2-core" name="v-radio" class="hds-radio-button__input" value="bar" />\n        <label for="v-radio2-core" class="hds-radio-button__label">Option</label>\n      </div>\n    </div>\n    <div class="hds-selection-group__item">\n      <div class="hds-radio-button">\n        <input type="radio" id="v-radio3-core" name="v-radio" class="hds-radio-button__input" value="baz" />\n        <label for="v-radio3-core" class="hds-radio-button__label">Option</label>\n      </div>\n    </div>\n    <div class="hds-selection-group__item">\n      <div class="hds-radio-button">\n        <input type="radio" id="v-radio4-core" name="v-radio" class="hds-radio-button__input" value="qux" />\n        <label for="v-radio4-core" class="hds-radio-button__label">Option</label>\n      </div>\n    </div>\n  </div>\n</fieldset>\n'))),"\n",n.createElement(t.h3,{id:"packages",style:{position:"relative"}},"Packages",n.createElement(t.a,{href:"#packages","aria-label":"packages permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.table,null,n.createElement(t.thead,null,n.createElement(t.tr,null,n.createElement(t.th,null,"Package"),n.createElement(t.th,null,"Included"),n.createElement(t.th,null,"Storybook link"),n.createElement(t.th,null,"Source link"))),n.createElement(t.tbody,null,n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.strong,null,"HDS React")),n.createElement(t.td,null,n.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},n.createElement(i)," Yes ")),n.createElement(t.td,null,n.createElement(s,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-radiobutton--default"},"View in Storybook")),n.createElement(t.td,null,n.createElement(d,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/react/src/components/radioButton"},"View source"))),n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.strong,null,"HDS Core")),n.createElement(t.td,null,n.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},n.createElement(i)," Yes ")),n.createElement(t.td,null,n.createElement(s,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/core/?path=/story/components-radio-button--default"},"View in Storybook")),n.createElement(t.td,null,n.createElement(d,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/core/src/components/radio-button"},"View source"))))),"\n",n.createElement(t.h3,{id:"properties",style:{position:"relative"}},"Properties",n.createElement(t.a,{href:"#properties","aria-label":"properties permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.p,null,"Note! You can find the full list of properties in the ",n.createElement(s,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-radiobutton--default"},"React Storybook.")),"\n",n.createElement(t.p,null,"| Property              | Description                                                       | Values      | Default value  |\n| --------------------- | ------------------------------------------------------------------| -----------------------------|\n| ",n.createElement(t.code,null,"label"),"               | The label for the input.                                          | ",n.createElement(t.code,null,"string"),"    | -              |\n| ",n.createElement(t.code,null,"helperText"),"          | The helper text content that will be shown below the radiobutton. | ",n.createElement(t.code,null,"string"),"    | -              |\n[Table 1:RadioButton properties]|"))}function c(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){return void 0===e&&(e={}),n.createElement(s,e,n.createElement(d,e))}},33007:function(e,t,a){a.r(t);var o=a(11151),n=a(67294),r=a(83428),l=a(57674),i=a(89482),s=(a(18607),a(26127));function d(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,o.ah)(),e.components);return s.Z||c("PageTabs",!1),s.Z.Tab||c("PageTabs.Tab",!0),s.Z.TabList||c("PageTabs.TabList",!0),s.Z.TabPanel||c("PageTabs.TabPanel",!0),n.createElement(n.Fragment,null,n.createElement(t.h1,{id:"radiobutton",style:{position:"relative"}},"RadioButton",n.createElement(t.a,{href:"#radiobutton","aria-label":"radiobutton permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement("div",{class:"status-label-description"},n.createElement(r.S,{type:"info"},"Stable"),n.createElement(r.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),n.createElement(l.Z)),"\n",n.createElement(i.Z,null,"Radio buttons are used to pick an option when only one option can be chosen. "),"\n",n.createElement(s.Z,{pageContext:e.pageContext},n.createElement(s.Z.TabList,null,n.createElement(s.Z.Tab,{href:"/"},"Usage"),n.createElement(s.Z.Tab,{href:"/code"},"Code"),n.createElement(s.Z.Tab,{href:"/accessibility"},"Accessibility"),n.createElement(s.Z.Tab,{href:"/customisation"},"Customisation")),n.createElement(s.Z.TabPanel,null,e.children)))}function c(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,o.ah)(),e.components);return t?n.createElement(t,e,n.createElement(d,e)):d(e)}},89482:function(e,t,a){var o=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:n={},children:r}=e;return o.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...n}},r)}},26127:function(e,t,a){var o=a(67294),n=a(14160),r=a(94671);const l="PageTabList",i="PageTabPanel",s="PageTab",d=e=>{var t;let{pageContext:a,children:d}=e;const c=a.frontmatter.slug,u=Array.isArray(d)?d:[d],_=u.find((e=>(0,o.isValidElement)(e)&&e.type.componentName===l)),b=u.find((e=>(0,o.isValidElement)(e)&&e.type.componentName===i)),h=null===(t=_.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===s)),p=h.findIndex((e=>c.endsWith(e.props.href))),m=-1===p?0:p,g=0===m?c:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(c);return o.createElement(r.a,{initiallyActiveTab:m},o.createElement(r.a.TabList,{className:"page-tabs-list"},h.map((e=>o.createElement(r.a.Tab,{key:e.props.href,onClick:()=>(0,n.navigate)(""+("/"===e.props.href?g:g+e.props.href))},e.props.children)))),h.map(((e,t)=>o.createElement(r.a.TabPanel,{key:e.props.href},m===t?b.props.children:o.createElement("div",null)))))},c=e=>{let{children:t}=e;return o.createElement(r.a.TabList,null,t)};c.componentName=l;const u=e=>{let{href:t,slug:a,children:n}=e;return o.createElement(r.a.Tab,null,n)};u.componentName=s;const _=e=>{let{children:t}=e;return o.createElement(r.a.TabPanel,null,t)};_.componentName=i,d.TabList=c,d.Tab=u,d.TabPanel=_,t.Z=d},57674:function(e,t,a){var o=a(67294),n=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return o.createElement(n.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},o.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>o.createElement("li",{key:t},o.createElement("span",{className:"status-name"},t),o.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-radio-button-customisation-mdx-d505420946831f1692f0.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-radio-button-customisation-mdx-d505420946831f1692f0.js
new file mode 100644
index 00000000000..dfcd8e65b5b
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-radio-button-customisation-mdx-d505420946831f1692f0.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[7348,7487],{29520:function(e,t,o){o.d(t,{R:function(){return i}});var a=o(80136),n=o(67294),r=o(7444),l=o(34300);(0,r.s)('.radio-button_hds-radio-button__1kktv{--size:24px;--icon-scale:0.5;--border-width:2px;--outline-width:3px;--label-font-size:var(--fontsize-body-m);--label-padding:var(--spacing-2-xs);--background:var(--color-white);--background-hover:var(--color-white);--background-focus:var(--color-white);--background-unselected-disabled:var(--color-black-10);--background-selected-disabled:var(--color-white);--border-color-focus:var(--color-black-90);--border-color-selected:var(--color-bus);--border-color-selected-hover:var(--color-bus-dark);--border-color-selected-disabled:var(--color-black-20);--border-color-unselected:var(--color-black-50);--border-color-unselected-hover:var(--color-black-90);--border-color-unselected-disabled:var(--color-black-10);--icon-color-selected:var(--color-bus);--icon-color-unselected:transparent;--icon-color-hover:var(--color-bus-dark);--icon-color-disabled:var(--color-black-10);--label-color:var(--color-black-90);--label-color-disabled:var(--color-black-40);display:flex;flex-wrap:wrap;min-height:var(--size);position:relative}.radio-button_hds-radio-button__1kktv,.radio-button_hds-radio-button__1kktv *,.radio-button_hds-radio-button__1kktv :after,.radio-button_hds-radio-button__1kktv :before{box-sizing:border-box}.radio-button_hds-radio-button__1kktv:not(:first-of-type){margin-top:var(--spacing-2-xs)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__label__1XnIa:after,.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__label__1XnIa:before{border-radius:50%;content:"";left:0;position:absolute;top:0}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__label__1XnIa:after{background-clip:content-box;background-color:var(--icon-color-unselected);border:var(--border-width) solid var(--border-color-unselected);height:var(--size);padding:calc((var(--size) / 2 - var(--border-width) * 2) * (1 - var(--icon-scale)));width:var(--size)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:checked+.radio-button_hds-radio-button__label__1XnIa:after{background-color:var(--icon-color-selected);border-color:var(--border-color-selected)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:focus+.radio-button_hds-radio-button__label__1XnIa:after,.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:hover+.radio-button_hds-radio-button__label__1XnIa:after{transition:85ms ease-out;transition-property:background-color,border-color}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:disabled+.radio-button_hds-radio-button__label__1XnIa:after{border-color:var(--border-color-unselected-disabled)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:checked:disabled+.radio-button_hds-radio-button__label__1XnIa:after{background-color:var(--icon-color-disabled);border-color:var(--border-color-selected-disabled)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:not(:disabled):focus+.radio-button_hds-radio-button__label__1XnIa:after{border-color:var(--border-color-focus)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:not(:disabled):hover+.radio-button_hds-radio-button__label__1XnIa:after,.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:not(:disabled):hover:focus+.radio-button_hds-radio-button__label__1XnIa:after{border-color:var(--border-color-unselected-hover)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__label__1XnIa:before{background-color:var(--background);height:var(--size);width:var(--size)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:focus+.radio-button_hds-radio-button__label__1XnIa:before,.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:hover+.radio-button_hds-radio-button__label__1XnIa:before{transition:85ms ease-out;transition-property:background-color,box-shadow,transform}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6{font-family:inherit;font-size:100%;height:var(--size);left:0;line-height:1.15;margin:0;opacity:0;position:absolute;top:0;width:var(--size)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__label__1XnIa{color:var(--label-color);cursor:pointer;font-size:var(--label-font-size);line-height:var(--lineheight-m);padding-left:calc(var(--size) + var(--label-padding));padding-top:calc((var(--size) - (var(--label-font-size) * var(--lineheight-m))) / 2);position:relative}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:hover+.radio-button_hds-radio-button__label__1XnIa:before{background-color:var(--background-hover)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:focus+.radio-button_hds-radio-button__label__1XnIa:before{box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);transform:translateZ(0)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:not(:disabled):checked:hover+.radio-button_hds-radio-button__label__1XnIa:after,.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:not(:disabled):checked:hover:focus+.radio-button_hds-radio-button__label__1XnIa:after{background-color:var(--icon-color-hover);border-color:var(--border-color-selected-hover)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:disabled+.radio-button_hds-radio-button__label__1XnIa{color:var(--label-color-disabled)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:disabled+.radio-button_hds-radio-button__label__1XnIa:before{background-color:var(--background-unselected-disabled)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:checked:disabled+.radio-button_hds-radio-button__label__1XnIa:before{background-color:var(--background-selected-disabled)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:disabled,.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:disabled+.radio-button_hds-radio-button__label__1XnIa{cursor:not-allowed}.helpers_visually-hidden__2SQYx{border:0;clip:"rect(0 0 0 0)";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.helpers_button-reset__2Gr5D{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.helpers_text-body__1-RNd{color:var(--color-black-90);font-family:var(--font-default);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.helpers_text-medium__WvSD9{font-family:var(--font-default);font-weight:500}.helpers_text-bold__RHjJI{font-family:var(--font-default);font-weight:700}.helpers_text-xl__2rpQg{font-size:var(--fontsize-heading-m)}.helpers_text-lg__2dciy{font-size:var(--fontsize-heading-s)}.helpers_text-md__-y1dr{font-size:var(--fontsize-heading-xs)}.helpers_subtitle__3x21G{font-size:var(--fontsize-body-m)}.helpers_text-sm__238bH{font-size:var(--fontsize-body-s);line-height:var(--lineheight-xl)}.helpers_heading-xxl__1KEkh{font-size:var(--fontsize-heading-xxl);font-weight:400;letter-spacing:-1.2px;line-height:var(--lineheight-s)}.helpers_heading-xl__GYTuO{font-size:var(--fontsize-heading-xl);font-weight:400;letter-spacing:-1px;line-height:var(--lineheight-s)}.helpers_heading-xl-mobile__1Dfib{font-size:var(--fontsize-heading-xl-mobile);font-weight:400;letter-spacing:-.8px;line-height:var(--lineheight-s)}.helpers_heading-l__1BzbR{font-size:var(--fontsize-heading-l);font-weight:400;letter-spacing:-.4px;line-height:var(--lineheight-s)}.helpers_heading-m__2APFi{font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-.2px;line-height:32px}.helpers_heading-s__2adCF{font-size:var(--fontsize-heading-s);font-weight:500;letter-spacing:.2px;line-height:1.4}.helpers_heading-xs__uSPiv{font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:.4px;line-height:1.33}.helpers_heading-xxs__37xm2{font-size:var(--fontsize-heading-xxs);font-weight:700;letter-spacing:.4px;line-height:var(--lineheight-l)}.helpers_helper-text__awnLq{color:var(--color-black-60);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs)}');const i=n.forwardRef(((e,t)=>{var{checked:o=!1,className:r="",disabled:i=!1,helperText:s,id:d,label:c,onChange:u=(()=>null),style:b,value:_}=e,h=(0,a._)(e,["checked","className","disabled","helperText","id","label","onChange","style","value"]);return c&&"string"!=typeof c&&"number"!=typeof c&&console.warn("Using ReactElement as a label is against good usability and accessibility practices. Please prefer plain strings."),n.createElement("div",{className:(0,l.c)("RadioButton-module_radioButton__1xM1I radio-button_hds-radio-button__1kktv",r),style:b},n.createElement("input",Object.assign({ref:t,id:d,className:(0,l.c)("RadioButton-module_input__1cTWc radio-button_hds-radio-button__input__27sH6"),onChange:u,value:_,type:"radio",disabled:i,checked:o,"aria-describedby":s?d+"-helper":null},h)),n.createElement("label",{htmlFor:d,className:(0,l.c)("RadioButton-module_label__3Zij9 radio-button_hds-radio-button__label__1XnIa")},c),s&&n.createElement("div",{className:"RadioButton-module_helperText__321Ay helpers_helper-text__awnLq",id:d+"-helper"},s))}));i.displayName="RadioButton"},83428:function(e,t,o){o.d(t,{S:function(){return d}});var a=o(80136),n=o(67294),r=o(7444),l=o(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,r.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const s=e=>{let{icon:t}=e;return n.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},t)},d=e=>{var{children:t,className:o,dataTestId:r,type:d="neutral",iconLeft:c}=e,u=(0,a._)(e,["children","className","dataTestId","type","iconLeft"]);return n.createElement("span",Object.assign({className:(0,l.c)(i.statusLabel,i[d],c&&i.statusLabelWithIcon,o),"data-testid":r},u),c&&n.createElement(s,{icon:c}),t)}},20555:function(e,t,o){o.r(t);var a=o(11151),n=o(67294),r=o(12818),l=o(29520),i=o(33007);const s=e=>{let{children:t,pageContext:o}=e;return n.createElement(i.default,{pageContext:o},t)};function d(e){const t=Object.assign({h2:"h2",a:"a",span:"span",p:"p",h3:"h3",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",pre:"pre"},(0,a.ah)(),e.components),{Playground:o}=t;return o||function(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Playground",!0),n.createElement(n.Fragment,null,n.createElement(t.h2,{id:"customisation",style:{position:"relative"}},"Customisation",n.createElement(t.a,{href:"#customisation","aria-label":"customisation permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(r.N,{type:"alert",label:"RadioButton customisation works differently!",className:"siteNotification"},n.createElement(t.p,null,"RadioButton is an older HDS component and therefore its customisation works slightly differently. Instead of the\n",n.createElement("code",null,"theme")," property, you need to use the ",n.createElement("code",null,"style")," property. This will be fixed in a future update.")),"\n",n.createElement(t.h3,{id:"customisation-properties",style:{position:"relative"}},"Customisation properties",n.createElement(t.a,{href:"#customisation-properties","aria-label":"customisation properties permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.p,null,"In Core version, you can either use the ",n.createElement(t.code,null,"style")," or ",n.createElement(t.code,null,"class")," attributes in the HTML to customise the component."),"\n",n.createElement(t.p,null,"In React version, you can either use the ",n.createElement(t.code,null,"style")," or ",n.createElement(t.code,null,"className")," properties to customise the component."),"\n",n.createElement(t.p,null,"See all available theme variables in the table below."),"\n",n.createElement(t.table,null,n.createElement(t.thead,null,n.createElement(t.tr,null,n.createElement(t.th,null,"Theme variable"),n.createElement(t.th,null,"Description"))),n.createElement(t.tbody,null,n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"--size")),n.createElement(t.td,null,"Size of the radio button")),n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"--icon-scale")),n.createElement(t.td,null,"Scale of the radio button check icon")),n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"--border-width")),n.createElement(t.td,null,"Width of the radio button border")),n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"--outline-width")),n.createElement(t.td,null,"Width of the radio button focus border")),n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"--border-color-selected")),n.createElement(t.td,null,"Colour of the radio button border when selected")),n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"--border-color-selected-hover")),n.createElement(t.td,null,"Colour of the radio button border when selected and hovered")),n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"--border-color-selected-focus")),n.createElement(t.td,null,"Colour of the radio button border when selected and focused")),n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"--icon-color-selected")),n.createElement(t.td,null,"Colour of the radio button selection circle")),n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"--icon-color-hover")),n.createElement(t.td,null,"Colour of the radio button selection circle when hovered")),n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"--focus-outline-color")),n.createElement(t.td,null,"Colour of the radio button focus border")))),"\n",n.createElement(t.h3,{id:"customisation-example",style:{position:"relative"}},"Customisation example",n.createElement(t.a,{href:"#customisation-example","aria-label":"customisation example permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(o,{scope:{RadioButton:l.R,useState:n.useState}},n.createElement(t.pre,null,n.createElement(t.code,{className:"language-jsx"},"import { RadioButton } from 'hds-react';\n\n() => {\n  const [selectedItem, setSelectedItem] = useState('2');\n  const onChange = (event) => {\n    setSelectedItem(event.target.value);\n  };\n  const style = {\n    '--size': '36px',\n    '--icon-scale': 0.65,\n    '--border-width': '3px',\n    '--outline-width': '4px',\n    '--border-color-selected': 'var(--color-tram)',\n    '--border-color-selected-hover': 'var(--color-tram-dark)',\n    '--border-color-selected-focus': 'var(--color-coat-of-arms)',\n    '--icon-color-selected': 'var(--color-tram)',\n    '--icon-color-hover': 'var(--color-tram-dark)',\n    '--focus-outline-color': 'var(--color-coat-of-arms)',\n  };\n  return (\n    <>\n      <RadioButton\n        id=\"radio1\"\n        name=\"example\"\n        label=\"Label\"\n        value=\"1\"\n        checked={selectedItem === '1'}\n        style={style}\n        onChange={onChange}\n      />\n      <RadioButton\n        id=\"radio2\"\n        name=\"example\"\n        label=\"Label\"\n        value=\"2\"\n        checked={selectedItem === '2'}\n        style={style}\n        onChange={onChange}\n      />\n    </>\n  )\n}\n"))))}t.default=function(e){return void 0===e&&(e={}),n.createElement(s,e,n.createElement(d,e))}},33007:function(e,t,o){o.r(t);var a=o(11151),n=o(67294),r=o(83428),l=o(57674),i=o(89482),s=(o(18607),o(26127));function d(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,a.ah)(),e.components);return s.Z||c("PageTabs",!1),s.Z.Tab||c("PageTabs.Tab",!0),s.Z.TabList||c("PageTabs.TabList",!0),s.Z.TabPanel||c("PageTabs.TabPanel",!0),n.createElement(n.Fragment,null,n.createElement(t.h1,{id:"radiobutton",style:{position:"relative"}},"RadioButton",n.createElement(t.a,{href:"#radiobutton","aria-label":"radiobutton permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement("div",{class:"status-label-description"},n.createElement(r.S,{type:"info"},"Stable"),n.createElement(r.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),n.createElement(l.Z)),"\n",n.createElement(i.Z,null,"Radio buttons are used to pick an option when only one option can be chosen. "),"\n",n.createElement(s.Z,{pageContext:e.pageContext},n.createElement(s.Z.TabList,null,n.createElement(s.Z.Tab,{href:"/"},"Usage"),n.createElement(s.Z.Tab,{href:"/code"},"Code"),n.createElement(s.Z.Tab,{href:"/accessibility"},"Accessibility"),n.createElement(s.Z.Tab,{href:"/customisation"},"Customisation")),n.createElement(s.Z.TabPanel,null,e.children)))}function c(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,a.ah)(),e.components);return t?n.createElement(t,e,n.createElement(d,e)):d(e)}},89482:function(e,t,o){var a=o(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:o="var(--fontsize-body-xl)",style:n={},children:r}=e;return a.createElement("p",{style:{fontSize:o,color:t,maxWidth:600,...n}},r)}},26127:function(e,t,o){var a=o(67294),n=o(14160),r=o(94671);const l="PageTabList",i="PageTabPanel",s="PageTab",d=e=>{var t;let{pageContext:o,children:d}=e;const c=o.frontmatter.slug,u=Array.isArray(d)?d:[d],b=u.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===l)),_=u.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===i)),h=null===(t=b.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===s)),m=h.findIndex((e=>c.endsWith(e.props.href))),p=-1===m?0:m,v=0===p?c:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(c);return a.createElement(r.a,{initiallyActiveTab:p},a.createElement(r.a.TabList,{className:"page-tabs-list"},h.map((e=>a.createElement(r.a.Tab,{key:e.props.href,onClick:()=>(0,n.navigate)(""+("/"===e.props.href?v:v+e.props.href))},e.props.children)))),h.map(((e,t)=>a.createElement(r.a.TabPanel,{key:e.props.href},p===t?_.props.children:a.createElement("div",null)))))},c=e=>{let{children:t}=e;return a.createElement(r.a.TabList,null,t)};c.componentName=l;const u=e=>{let{href:t,slug:o,children:n}=e;return a.createElement(r.a.Tab,null,n)};u.componentName=s;const b=e=>{let{children:t}=e;return a.createElement(r.a.TabPanel,null,t)};b.componentName=i,d.TabList=c,d.Tab=u,d.TabPanel=b,t.Z=d},57674:function(e,t,o){var a=o(67294),n=o(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return a.createElement(n.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},a.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>a.createElement("li",{key:t},a.createElement("span",{className:"status-name"},t),a.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-radio-button-index-mdx-102fd9f1d4937e3879f6.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-radio-button-index-mdx-102fd9f1d4937e3879f6.js
new file mode 100644
index 00000000000..425a3d644c0
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-radio-button-index-mdx-102fd9f1d4937e3879f6.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[4834,7487],{29520:function(e,t,a){a.d(t,{R:function(){return i}});var o=a(80136),n=a(67294),r=a(7444),l=a(34300);(0,r.s)('.radio-button_hds-radio-button__1kktv{--size:24px;--icon-scale:0.5;--border-width:2px;--outline-width:3px;--label-font-size:var(--fontsize-body-m);--label-padding:var(--spacing-2-xs);--background:var(--color-white);--background-hover:var(--color-white);--background-focus:var(--color-white);--background-unselected-disabled:var(--color-black-10);--background-selected-disabled:var(--color-white);--border-color-focus:var(--color-black-90);--border-color-selected:var(--color-bus);--border-color-selected-hover:var(--color-bus-dark);--border-color-selected-disabled:var(--color-black-20);--border-color-unselected:var(--color-black-50);--border-color-unselected-hover:var(--color-black-90);--border-color-unselected-disabled:var(--color-black-10);--icon-color-selected:var(--color-bus);--icon-color-unselected:transparent;--icon-color-hover:var(--color-bus-dark);--icon-color-disabled:var(--color-black-10);--label-color:var(--color-black-90);--label-color-disabled:var(--color-black-40);display:flex;flex-wrap:wrap;min-height:var(--size);position:relative}.radio-button_hds-radio-button__1kktv,.radio-button_hds-radio-button__1kktv *,.radio-button_hds-radio-button__1kktv :after,.radio-button_hds-radio-button__1kktv :before{box-sizing:border-box}.radio-button_hds-radio-button__1kktv:not(:first-of-type){margin-top:var(--spacing-2-xs)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__label__1XnIa:after,.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__label__1XnIa:before{border-radius:50%;content:"";left:0;position:absolute;top:0}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__label__1XnIa:after{background-clip:content-box;background-color:var(--icon-color-unselected);border:var(--border-width) solid var(--border-color-unselected);height:var(--size);padding:calc((var(--size) / 2 - var(--border-width) * 2) * (1 - var(--icon-scale)));width:var(--size)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:checked+.radio-button_hds-radio-button__label__1XnIa:after{background-color:var(--icon-color-selected);border-color:var(--border-color-selected)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:focus+.radio-button_hds-radio-button__label__1XnIa:after,.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:hover+.radio-button_hds-radio-button__label__1XnIa:after{transition:85ms ease-out;transition-property:background-color,border-color}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:disabled+.radio-button_hds-radio-button__label__1XnIa:after{border-color:var(--border-color-unselected-disabled)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:checked:disabled+.radio-button_hds-radio-button__label__1XnIa:after{background-color:var(--icon-color-disabled);border-color:var(--border-color-selected-disabled)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:not(:disabled):focus+.radio-button_hds-radio-button__label__1XnIa:after{border-color:var(--border-color-focus)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:not(:disabled):hover+.radio-button_hds-radio-button__label__1XnIa:after,.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:not(:disabled):hover:focus+.radio-button_hds-radio-button__label__1XnIa:after{border-color:var(--border-color-unselected-hover)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__label__1XnIa:before{background-color:var(--background);height:var(--size);width:var(--size)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:focus+.radio-button_hds-radio-button__label__1XnIa:before,.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:hover+.radio-button_hds-radio-button__label__1XnIa:before{transition:85ms ease-out;transition-property:background-color,box-shadow,transform}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6{font-family:inherit;font-size:100%;height:var(--size);left:0;line-height:1.15;margin:0;opacity:0;position:absolute;top:0;width:var(--size)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__label__1XnIa{color:var(--label-color);cursor:pointer;font-size:var(--label-font-size);line-height:var(--lineheight-m);padding-left:calc(var(--size) + var(--label-padding));padding-top:calc((var(--size) - (var(--label-font-size) * var(--lineheight-m))) / 2);position:relative}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:hover+.radio-button_hds-radio-button__label__1XnIa:before{background-color:var(--background-hover)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:focus+.radio-button_hds-radio-button__label__1XnIa:before{box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);transform:translateZ(0)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:not(:disabled):checked:hover+.radio-button_hds-radio-button__label__1XnIa:after,.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:not(:disabled):checked:hover:focus+.radio-button_hds-radio-button__label__1XnIa:after{background-color:var(--icon-color-hover);border-color:var(--border-color-selected-hover)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:disabled+.radio-button_hds-radio-button__label__1XnIa{color:var(--label-color-disabled)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:disabled+.radio-button_hds-radio-button__label__1XnIa:before{background-color:var(--background-unselected-disabled)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:checked:disabled+.radio-button_hds-radio-button__label__1XnIa:before{background-color:var(--background-selected-disabled)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:disabled,.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:disabled+.radio-button_hds-radio-button__label__1XnIa{cursor:not-allowed}.helpers_visually-hidden__2SQYx{border:0;clip:"rect(0 0 0 0)";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.helpers_button-reset__2Gr5D{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.helpers_text-body__1-RNd{color:var(--color-black-90);font-family:var(--font-default);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.helpers_text-medium__WvSD9{font-family:var(--font-default);font-weight:500}.helpers_text-bold__RHjJI{font-family:var(--font-default);font-weight:700}.helpers_text-xl__2rpQg{font-size:var(--fontsize-heading-m)}.helpers_text-lg__2dciy{font-size:var(--fontsize-heading-s)}.helpers_text-md__-y1dr{font-size:var(--fontsize-heading-xs)}.helpers_subtitle__3x21G{font-size:var(--fontsize-body-m)}.helpers_text-sm__238bH{font-size:var(--fontsize-body-s);line-height:var(--lineheight-xl)}.helpers_heading-xxl__1KEkh{font-size:var(--fontsize-heading-xxl);font-weight:400;letter-spacing:-1.2px;line-height:var(--lineheight-s)}.helpers_heading-xl__GYTuO{font-size:var(--fontsize-heading-xl);font-weight:400;letter-spacing:-1px;line-height:var(--lineheight-s)}.helpers_heading-xl-mobile__1Dfib{font-size:var(--fontsize-heading-xl-mobile);font-weight:400;letter-spacing:-.8px;line-height:var(--lineheight-s)}.helpers_heading-l__1BzbR{font-size:var(--fontsize-heading-l);font-weight:400;letter-spacing:-.4px;line-height:var(--lineheight-s)}.helpers_heading-m__2APFi{font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-.2px;line-height:32px}.helpers_heading-s__2adCF{font-size:var(--fontsize-heading-s);font-weight:500;letter-spacing:.2px;line-height:1.4}.helpers_heading-xs__uSPiv{font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:.4px;line-height:1.33}.helpers_heading-xxs__37xm2{font-size:var(--fontsize-heading-xxs);font-weight:700;letter-spacing:.4px;line-height:var(--lineheight-l)}.helpers_helper-text__awnLq{color:var(--color-black-60);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs)}');const i=n.forwardRef(((e,t)=>{var{checked:a=!1,className:r="",disabled:i=!1,helperText:s,id:d,label:c,onChange:u=(()=>null),style:_,value:h}=e,b=(0,o._)(e,["checked","className","disabled","helperText","id","label","onChange","style","value"]);return c&&"string"!=typeof c&&"number"!=typeof c&&console.warn("Using ReactElement as a label is against good usability and accessibility practices. Please prefer plain strings."),n.createElement("div",{className:(0,l.c)("RadioButton-module_radioButton__1xM1I radio-button_hds-radio-button__1kktv",r),style:_},n.createElement("input",Object.assign({ref:t,id:d,className:(0,l.c)("RadioButton-module_input__1cTWc radio-button_hds-radio-button__input__27sH6"),onChange:u,value:h,type:"radio",disabled:i,checked:a,"aria-describedby":s?d+"-helper":null},b)),n.createElement("label",{htmlFor:d,className:(0,l.c)("RadioButton-module_label__3Zij9 radio-button_hds-radio-button__label__1XnIa")},c),s&&n.createElement("div",{className:"RadioButton-module_helperText__321Ay helpers_helper-text__awnLq",id:d+"-helper"},s))}));i.displayName="RadioButton"},66016:function(e,t,a){a.d(t,{S:function(){return u}});var o=a(80136),n=a(67294),r=a(7444),l=a(34300),i=a(91267),s=a(42215),d=a(45422),c={label:"SelectionGroup-module_label__qlluz",selectionGroup:"SelectionGroup-module_selectionGroup__6Jxu8",items:"SelectionGroup-module_items__28m_S",vertical:"SelectionGroup-module_vertical__3iorC",horizontal:"SelectionGroup-module_horizontal__2eiY9",tooltipButton:"SelectionGroup-module_tooltipButton__2ibjm",errorText:"SelectionGroup-module_errorText__3tOPD selection-group_hds-selection-group__error-text__1Ynb9",helperText:"SelectionGroup-module_helperText__2k_WY helpers_helper-text__3QI7A"};(0,r.s)(".selection-group_hds-selection-group__2bwsd{--spacing-col:1.25rem;--spacing-row:var(--spacing-s);--label-color-default:var(--color-black-90);--icon-size:var(--spacing-m);border:0;padding:0}.selection-group_hds-selection-group__2bwsd>:not(.selection-group_hds-selection-group__items__21yOL){float:left}.selection-group_hds-selection-group__legend__149U2{box-sizing:border-box;color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-row);max-width:100%;padding:0;white-space:normal}.selection-group_hds-selection-group__required__3XPYK{color:var(--label-color-default);display:inline-block;font-size:var(--fontsize-body-xl);line-height:1;margin-left:var(--spacing-2-xs);transform:translateY(var(--spacing-3-xs))}.selection-group_hds-selection-group__items__21yOL{clear:left;display:grid;grid-gap:var(--spacing-row) var(--spacing-col);gap:var(--spacing-row) var(--spacing-col);justify-content:start}.selection-group_hds-selection-group__items--vertical__1v39g{grid-auto-flow:row}.selection-group_hds-selection-group__items--horizontal__3-_1w{grid-auto-flow:column}.selection-group_hds-selection-group__error-text__1Ynb9{color:var(--color-error);display:block;font-size:var(--fontsize-body-m);margin-top:var(--spacing-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.selection-group_hds-selection-group__error-text__1Ynb9:before{background:var(--color-error);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.helpers_visually-hidden__8xzsB{border:0;clip:\"rect(0 0 0 0)\";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.helpers_button-reset__D5XBg{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.helpers_text-body__kuwbN{color:var(--color-black-90);font-family:var(--font-default);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.helpers_text-medium__3yuel{font-family:var(--font-default);font-weight:500}.helpers_text-bold__2m1Nh{font-family:var(--font-default);font-weight:700}.helpers_text-xl__3Q3g5{font-size:var(--fontsize-heading-m)}.helpers_text-lg__3N-Yu{font-size:var(--fontsize-heading-s)}.helpers_text-md__1iyYX{font-size:var(--fontsize-heading-xs)}.helpers_subtitle__28FvQ{font-size:var(--fontsize-body-m)}.helpers_text-sm__OuSWo{font-size:var(--fontsize-body-s);line-height:var(--lineheight-xl)}.helpers_heading-xxl__1KMqh{font-size:var(--fontsize-heading-xxl);font-weight:400;letter-spacing:-1.2px;line-height:var(--lineheight-s)}.helpers_heading-xl__G41Bl{font-size:var(--fontsize-heading-xl);font-weight:400;letter-spacing:-1px;line-height:var(--lineheight-s)}.helpers_heading-xl-mobile__uKZqQ{font-size:var(--fontsize-heading-xl-mobile);font-weight:400;letter-spacing:-.8px;line-height:var(--lineheight-s)}.helpers_heading-l__29CXO{font-size:var(--fontsize-heading-l);font-weight:400;letter-spacing:-.4px;line-height:var(--lineheight-s)}.helpers_heading-m__16IDL{font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-.2px;line-height:32px}.helpers_heading-s__17rm-{font-size:var(--fontsize-heading-s);font-weight:500;letter-spacing:.2px;line-height:1.4}.helpers_heading-xs__rPz00{font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:.4px;line-height:1.33}.helpers_heading-xxs__Onkxt{font-size:var(--fontsize-heading-xxs);font-weight:700;letter-spacing:.4px;line-height:var(--lineheight-l)}.helpers_helper-text__3QI7A{color:var(--color-black-60);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs)}.SelectionGroup-module_label__qlluz{color:var(--label-color-default,var(--color-black-90));display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.SelectionGroup-module_selectionGroup__6Jxu8{--spacing-col:1.25rem;--spacing-row:var(--spacing-s);--label-color-default:var(--color-black-90);--icon-size:var(--spacing-m);border:0;padding:0}.SelectionGroup-module_selectionGroup__6Jxu8>:not(.SelectionGroup-module_items__28m_S){float:left}.SelectionGroup-module_label__qlluz{margin-bottom:var(--spacing-row);padding:0}.SelectionGroup-module_items__28m_S{clear:left;display:grid;gap:var(--spacing-row) var(--spacing-col);justify-content:start}.SelectionGroup-module_items__28m_S.SelectionGroup-module_vertical__3iorC{grid-auto-flow:row}.SelectionGroup-module_items__28m_S.SelectionGroup-module_horizontal__2eiY9{grid-auto-flow:column}.SelectionGroup-module_tooltipButton__2ibjm{margin-left:var(--spacing-2-xs)}");const u=e=>{var{label:t,direction:a="vertical",errorText:r,helperText:u,required:_,tooltipLabel:h,tooltipButtonLabel:b,tooltipText:p,children:m,className:g}=e,v=(0,o._)(e,["label","direction","errorText","helperText","required","tooltipLabel","tooltipButtonLabel","tooltipText","children","className"]);const f=(0,s.a)(m);return(0,n.useEffect)((()=>{let e=!1,t=!1;f.forEach((a=>{const o=a,{displayName:n}=o.type;"RadioButton"===n&&(e=!0,!0===o.props.checked&&(t=!0))})),e&&!t&&console.warn("All radio buttons in a SelectionGroup are unchecked. One radio button should be checked by default.")}),[m]),n.createElement("fieldset",Object.assign({className:(0,l.c)(c.selectionGroup,g)},v),n.createElement("legend",{className:c.label},t," ",_&&n.createElement(i.R,null)),p&&n.createElement(d.T,{buttonClassName:c.tooltipButton,tooltipLabel:h,buttonLabel:b},p),n.createElement("div",{className:(0,l.c)(c.items,c[a])},f.map((e=>(0,n.isValidElement)(e)&&n.createElement("div",{key:e.props.id,className:c.item},e)))),r&&n.createElement("div",{className:c.errorText},r),u&&n.createElement("div",{className:c.helperText},u))}},83428:function(e,t,a){a.d(t,{S:function(){return d}});var o=a(80136),n=a(67294),r=a(7444),l=a(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,r.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const s=e=>{let{icon:t}=e;return n.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},t)},d=e=>{var{children:t,className:a,dataTestId:r,type:d="neutral",iconLeft:c}=e,u=(0,o._)(e,["children","className","dataTestId","type","iconLeft"]);return n.createElement("span",Object.assign({className:(0,l.c)(i.statusLabel,i[d],c&&i.statusLabelWithIcon,a),"data-testid":r},u),c&&n.createElement(s,{icon:c}),t)}},83649:function(e,t,a){a.r(t),a.d(t,{DefaultRadioButtonExample:function(){return c},GroupExample:function(){return u},RadioButtonExample:function(){return d}});var o=a(11151),n=a(67294),r=a(29520),l=a(66016),i=a(33007);const s=e=>{let{children:t,pageContext:a}=e;return n.createElement(i.default,{pageContext:a},t)},d=()=>{const[e,t]=n.useState(""),a=e=>{t(e.target.value)};return n.createElement(n.Fragment,null,n.createElement(r.R,{id:"radio1",name:"example1",label:"Label",value:"1",checked:"1"===e,onChange:a}),n.createElement(r.R,{id:"radio2",name:"example1",label:"Label",value:"2",checked:"2"===e,onChange:a}),n.createElement(r.R,{id:"radio3",name:"example1",label:"None of the above",value:"3",checked:"3"===e,onChange:a}))},c=()=>{const[e,t]=n.useState(""),a=e=>{t(e.target.value)};return n.createElement(n.Fragment,null,n.createElement(r.R,{id:"radio4",name:"example2",label:"Label",value:"1",checked:"1"===e,onChange:a}),n.createElement(r.R,{id:"radio5",name:"example2",label:"Label",value:"2",checked:"2"===e,onChange:a}),n.createElement(r.R,{id:"radio6",name:"example4-helper",label:"Label",value:"3",checked:"3"===e,onChange:a,helperText:"Assistive text"}))},u=()=>{const[e,t]=n.useState(""),a=e=>{t(e.target.value)};return n.createElement(l.S,{label:"Radio button group"},n.createElement(r.R,{id:"v-radio1",name:"v-radio",value:"1",label:"Option",checked:"1"===e,onChange:a}),n.createElement(r.R,{id:"v-radio2",name:"v-radio",value:"2",label:"Option",checked:"2"===e,onChange:a}),n.createElement(r.R,{id:"v-radio3",name:"v-radio",value:"3",label:"Option",checked:"3"===e,onChange:a}),n.createElement(r.R,{id:"v-radio4",name:"v-radio",value:"4",label:"Option",checked:"4"===e,onChange:a}))};function _(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",strong:"strong",h4:"h4",p:"p"},(0,o.ah)(),e.components),{PlaygroundPreview:a,InternalLink:r}=t;return r||h("InternalLink",!0),a||h("PlaygroundPreview",!0),n.createElement(n.Fragment,null,n.createElement(t.h2,{id:"usage",style:{position:"relative"}},"Usage",n.createElement(t.a,{href:"#usage","aria-label":"usage permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.h3,{id:"example",style:{position:"relative"}},"Example",n.createElement(t.a,{href:"#example","aria-label":"example permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n","\n",n.createElement(a,null,n.createElement(d)),"\n",n.createElement(t.h3,{id:"principles",style:{position:"relative"}},"Principles",n.createElement(t.a,{href:"#principles","aria-label":"principles permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.ul,null,"\n",n.createElement(t.li,null,"If the user can select more than one option from a list, use ",n.createElement(r,{href:"/components/checkbox"},"checkboxes")," instead."),"\n",n.createElement(t.li,null,"Radio button label should always clearly describe what will happen if the specific option is chosen. A good practice is to keep labels a maximum of three words long."),"\n",n.createElement(t.li,null,n.createElement(t.strong,null,"It is not recommended to have a default option selected")," because","\n",n.createElement(t.ul,null,"\n",n.createElement(t.li,null,"The user might not realise they’ve missed a question"),"\n",n.createElement(t.li,null,"The user might submit a wrong answer"),"\n"),"\n"),"\n",n.createElement(t.li,null,"If an answer can be left empty, include a 'None of the abobe' or similar option if it's suitable."),"\n",n.createElement(t.li,null,"When there are more than 4 options, consider switching to ",n.createElement(r,{href:"/components/dropdown"},"dropdown")," component."),"\n",n.createElement(t.li,null,"If the choices are not mutually exclusive, use ",n.createElement(r,{href:"/components/checkbox"},"checkboxes")," component instead. Also see ",n.createElement(r,{href:"/foundation/guidelines/checkbox-radiobutton-toggle"},"guidelines for choosing between radiobuttons, checkboxes, and toggles.")),"\n",n.createElement(t.li,null,"If Radio buttons are related to each other, use ",n.createElement(r,{href:"/components/selection-group"},"selection group")," to achieve that."),"\n"),"\n",n.createElement(t.h3,{id:"variations",style:{position:"relative"}},"Variations",n.createElement(t.a,{href:"#variations","aria-label":"variations permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.h4,{id:"default",style:{position:"relative"}},"Default",n.createElement(t.a,{href:"#default","aria-label":"default permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n","\n",n.createElement(a,null,n.createElement(c)),"\n",n.createElement(t.h4,{id:"group",style:{position:"relative"}},"Group",n.createElement(t.a,{href:"#group","aria-label":"group permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.p,null,"Related radio buttons can be grouped together with the Selection group component. See ",n.createElement(r,{href:"/components/selection-group"},"HDS selection group page")," for full documentation."),"\n","\n",n.createElement(a,null,n.createElement(u)))}function h(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){return void 0===e&&(e={}),n.createElement(s,e,n.createElement(_,e))}},33007:function(e,t,a){a.r(t);var o=a(11151),n=a(67294),r=a(83428),l=a(57674),i=a(89482),s=(a(18607),a(26127));function d(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,o.ah)(),e.components);return s.Z||c("PageTabs",!1),s.Z.Tab||c("PageTabs.Tab",!0),s.Z.TabList||c("PageTabs.TabList",!0),s.Z.TabPanel||c("PageTabs.TabPanel",!0),n.createElement(n.Fragment,null,n.createElement(t.h1,{id:"radiobutton",style:{position:"relative"}},"RadioButton",n.createElement(t.a,{href:"#radiobutton","aria-label":"radiobutton permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement("div",{class:"status-label-description"},n.createElement(r.S,{type:"info"},"Stable"),n.createElement(r.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),n.createElement(l.Z)),"\n",n.createElement(i.Z,null,"Radio buttons are used to pick an option when only one option can be chosen. "),"\n",n.createElement(s.Z,{pageContext:e.pageContext},n.createElement(s.Z.TabList,null,n.createElement(s.Z.Tab,{href:"/"},"Usage"),n.createElement(s.Z.Tab,{href:"/code"},"Code"),n.createElement(s.Z.Tab,{href:"/accessibility"},"Accessibility"),n.createElement(s.Z.Tab,{href:"/customisation"},"Customisation")),n.createElement(s.Z.TabPanel,null,e.children)))}function c(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,o.ah)(),e.components);return t?n.createElement(t,e,n.createElement(d,e)):d(e)}},89482:function(e,t,a){var o=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:n={},children:r}=e;return o.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...n}},r)}},26127:function(e,t,a){var o=a(67294),n=a(14160),r=a(94671);const l="PageTabList",i="PageTabPanel",s="PageTab",d=e=>{var t;let{pageContext:a,children:d}=e;const c=a.frontmatter.slug,u=Array.isArray(d)?d:[d],_=u.find((e=>(0,o.isValidElement)(e)&&e.type.componentName===l)),h=u.find((e=>(0,o.isValidElement)(e)&&e.type.componentName===i)),b=null===(t=_.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===s)),p=b.findIndex((e=>c.endsWith(e.props.href))),m=-1===p?0:p,g=0===m?c:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(c);return o.createElement(r.a,{initiallyActiveTab:m},o.createElement(r.a.TabList,{className:"page-tabs-list"},b.map((e=>o.createElement(r.a.Tab,{key:e.props.href,onClick:()=>(0,n.navigate)(""+("/"===e.props.href?g:g+e.props.href))},e.props.children)))),b.map(((e,t)=>o.createElement(r.a.TabPanel,{key:e.props.href},m===t?h.props.children:o.createElement("div",null)))))},c=e=>{let{children:t}=e;return o.createElement(r.a.TabList,null,t)};c.componentName=l;const u=e=>{let{href:t,slug:a,children:n}=e;return o.createElement(r.a.Tab,null,n)};u.componentName=s;const _=e=>{let{children:t}=e;return o.createElement(r.a.TabPanel,null,t)};_.componentName=i,d.TabList=c,d.Tab=u,d.TabPanel=_,t.Z=d},57674:function(e,t,a){var o=a(67294),n=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return o.createElement(n.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},o.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>o.createElement("li",{key:t},o.createElement("span",{className:"status-name"},t),o.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-radio-button-tabs-mdx-b3cabd376f8765451c20.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-radio-button-tabs-mdx-b3cabd376f8765451c20.js
new file mode 100644
index 00000000000..226f9f8e23a
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-radio-button-tabs-mdx-b3cabd376f8765451c20.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[7487],{83428:function(e,t,a){a.d(t,{S:function(){return i}});var s=a(80136),l=a(67294),n=a(7444),r=a(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const c=e=>{let{icon:t}=e;return l.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},t)},i=e=>{var{children:t,className:a,dataTestId:n,type:i="neutral",iconLeft:u}=e,b=(0,s._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(o.statusLabel,o[i],u&&o.statusLabelWithIcon,a),"data-testid":n},b),u&&l.createElement(c,{icon:u}),t)}},33007:function(e,t,a){a.r(t);var s=a(11151),l=a(67294),n=a(83428),r=a(57674),o=a(89482),c=(a(18607),a(26127));function i(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,s.ah)(),e.components);return c.Z||u("PageTabs",!1),c.Z.Tab||u("PageTabs.Tab",!0),c.Z.TabList||u("PageTabs.TabList",!0),c.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"radiobutton",style:{position:"relative"}},"RadioButton",l.createElement(t.a,{href:"#radiobutton","aria-label":"radiobutton permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(n.S,{type:"info"},"Stable"),l.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(o.Z,null,"Radio buttons are used to pick an option when only one option can be chosen. "),"\n",l.createElement(c.Z,{pageContext:e.pageContext},l.createElement(c.Z.TabList,null,l.createElement(c.Z.Tab,{href:"/"},"Usage"),l.createElement(c.Z.Tab,{href:"/code"},"Code"),l.createElement(c.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(c.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(c.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,s.ah)(),e.components);return t?l.createElement(t,e,l.createElement(i,e)):i(e)}},89482:function(e,t,a){var s=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:l={},children:n}=e;return s.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...l}},n)}},26127:function(e,t,a){var s=a(67294),l=a(14160),n=a(94671);const r="PageTabList",o="PageTabPanel",c="PageTab",i=e=>{var t;let{pageContext:a,children:i}=e;const u=a.frontmatter.slug,b=Array.isArray(i)?i:[i],d=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===r)),m=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===o)),h=null===(t=d.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===c)),p=h.findIndex((e=>u.endsWith(e.props.href))),_=-1===p?0:p,f=0===_?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return s.createElement(n.a,{initiallyActiveTab:_},s.createElement(n.a.TabList,{className:"page-tabs-list"},h.map((e=>s.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),h.map(((e,t)=>s.createElement(n.a.TabPanel,{key:e.props.href},_===t?m.props.children:s.createElement("div",null)))))},u=e=>{let{children:t}=e;return s.createElement(n.a.TabList,null,t)};u.componentName=r;const b=e=>{let{href:t,slug:a,children:l}=e;return s.createElement(n.a.Tab,null,l)};b.componentName=c;const d=e=>{let{children:t}=e;return s.createElement(n.a.TabPanel,null,t)};d.componentName=o,i.TabList=u,i.Tab=b,i.TabPanel=d,t.Z=i},57674:function(e,t,a){var s=a(67294),l=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return s.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},s.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>s.createElement("li",{key:t},s.createElement("span",{className:"status-name"},t),s.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-search-input-accessibility-mdx-6a0bd2f56d0b6b0045dd.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-search-input-accessibility-mdx-6a0bd2f56d0b6b0045dd.js
new file mode 100644
index 00000000000..9624c2fc25a
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-search-input-accessibility-mdx-6a0bd2f56d0b6b0045dd.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[5831,4744],{83428:function(e,a,t){t.d(a,{S:function(){return o}});var l=t(80136),s=t(67294),n=t(7444),r=t(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const c=e=>{let{icon:a}=e;return s.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},a)},o=e=>{var{children:a,className:t,dataTestId:n,type:o="neutral",iconLeft:u}=e,d=(0,l._)(e,["children","className","dataTestId","type","iconLeft"]);return s.createElement("span",Object.assign({className:(0,r.c)(i.statusLabel,i[o],u&&i.statusLabelWithIcon,t),"data-testid":n},d),u&&s.createElement(c,{icon:u}),a)}},20360:function(e,a,t){t.r(a);var l=t(11151),s=t(67294),n=t(65945);const r=e=>{let{children:a,pageContext:t}=e;return s.createElement(n.default,{pageContext:t},a)};function i(e){const a=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li"},(0,l.ah)(),e.components);return s.createElement(s.Fragment,null,s.createElement(a.h2,{id:"accessibility",style:{position:"relative"}},"Accessibility",s.createElement(a.a,{href:"#accessibility","aria-label":"accessibility permalink",className:"header-anchor after"},s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(a.h3,{id:"pay-attention-to",style:{position:"relative"}},"Pay attention to",s.createElement(a.a,{href:"#pay-attention-to","aria-label":"pay attention to permalink",className:"header-anchor after"},s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(a.ul,null,"\n",s.createElement(a.li,null,"Provide descriptive aria labels for the search and clear buttons."),"\n",s.createElement(a.li,null,"If loading suggestions takes a while, the implementation automatically includes a loading spinner. In this case, remember to provide labels for both the loading and loading finished event."),"\n"))}a.default=function(e){return void 0===e&&(e={}),s.createElement(r,e,s.createElement(i,e))}},65945:function(e,a,t){t.r(a);var l=t(11151),s=t(67294),n=t(83428),r=t(57674),i=t(89482),c=(t(18607),t(26127));function o(e){const a=Object.assign({h1:"h1",a:"a",span:"span"},(0,l.ah)(),e.components);return c.Z||u("PageTabs",!1),c.Z.Tab||u("PageTabs.Tab",!0),c.Z.TabList||u("PageTabs.TabList",!0),c.Z.TabPanel||u("PageTabs.TabPanel",!0),s.createElement(s.Fragment,null,s.createElement(a.h1,{id:"searchinput",style:{position:"relative"}},"SearchInput",s.createElement(a.a,{href:"#searchinput","aria-label":"searchinput permalink",className:"header-anchor after"},s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement("div",{class:"status-label-description"},s.createElement(n.S,{type:"info"},"Stable"),s.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),s.createElement(r.Z)),"\n",s.createElement(i.Z,null,"A search input allows the user to find relevant content. The user can filter content using different words or phrases as keywords."),"\n",s.createElement(c.Z,{pageContext:e.pageContext},s.createElement(c.Z.TabList,null,s.createElement(c.Z.Tab,{href:"/"},"Usage"),s.createElement(c.Z.Tab,{href:"/code"},"Code"),s.createElement(c.Z.Tab,{href:"/accessibility"},"Accessibility")),s.createElement(c.Z.TabPanel,null,e.children)))}function u(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,l.ah)(),e.components);return a?s.createElement(a,e,s.createElement(o,e)):o(e)}},89482:function(e,a,t){var l=t(67294);a.Z=e=>{let{color:a="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:s={},children:n}=e;return l.createElement("p",{style:{fontSize:t,color:a,maxWidth:600,...s}},n)}},26127:function(e,a,t){var l=t(67294),s=t(14160),n=t(94671);const r="PageTabList",i="PageTabPanel",c="PageTab",o=e=>{var a;let{pageContext:t,children:o}=e;const u=t.frontmatter.slug,d=Array.isArray(o)?o:[o],b=d.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===r)),h=d.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===i)),m=null===(a=b.props)||void 0===a?void 0:a.children.filter((e=>e.type.componentName===c)),p=m.findIndex((e=>u.endsWith(e.props.href))),f=-1===p?0:p,_=0===f?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return l.createElement(n.a,{initiallyActiveTab:f},l.createElement(n.a.TabList,{className:"page-tabs-list"},m.map((e=>l.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,s.navigate)(""+("/"===e.props.href?_:_+e.props.href))},e.props.children)))),m.map(((e,a)=>l.createElement(n.a.TabPanel,{key:e.props.href},f===a?h.props.children:l.createElement("div",null)))))},u=e=>{let{children:a}=e;return l.createElement(n.a.TabList,null,a)};u.componentName=r;const d=e=>{let{href:a,slug:t,children:s}=e;return l.createElement(n.a.Tab,null,s)};d.componentName=c;const b=e=>{let{children:a}=e;return l.createElement(n.a.TabPanel,null,a)};b.componentName=i,o.TabList=u,o.Tab=d,o.TabPanel=b,a.Z=o},57674:function(e,a,t){var l=t(67294),s=t(45422);a.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return l.createElement(s.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},l.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((a=>l.createElement("li",{key:a},l.createElement("span",{className:"status-name"},a),l.createElement("span",null,e[a]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-search-input-code-mdx-e82316afb5b7ff03a913.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-search-input-code-mdx-e82316afb5b7ff03a913.js
new file mode 100644
index 00000000000..ce207839457
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-search-input-code-mdx-e82316afb5b7ff03a913.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[9574,4744],{83428:function(e,t,n){n.d(t,{S:function(){return o}});var a=n(80136),l=n(67294),r=n(7444),s=n(34300),c={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,r.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const i=e=>{let{icon:t}=e;return l.createElement("span",{className:c.statusLabelIcon,"aria-hidden":"true"},t)},o=e=>{var{children:t,className:n,dataTestId:r,type:o="neutral",iconLeft:u}=e,d=(0,a._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,s.c)(c.statusLabel,c[o],u&&c.statusLabelWithIcon,n),"data-testid":r},d),u&&l.createElement(i,{icon:u}),t)}},40022:function(e,t,n){n.r(t);var a=n(11151),l=n(67294),r=n(27945),s=n(65945);const c=e=>{let{children:t,pageContext:n}=e;return l.createElement(s.default,{pageContext:n},t)};function i(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",h4:"h4",pre:"pre",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",strong:"strong",p:"p"},(0,a.ah)(),e.components),{Playground:n,IconCheckCircleFill:s,Link:c,ExternalLink:i}=t;return i||o("ExternalLink",!0),s||o("IconCheckCircleFill",!0),c||o("Link",!0),n||o("Playground",!0),l.createElement(l.Fragment,null,l.createElement(t.h2,{id:"code",style:{position:"relative"}},"Code",l.createElement(t.a,{href:"#code","aria-label":"code permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h3,{id:"code-examples",style:{position:"relative"}},"Code examples",l.createElement(t.a,{href:"#code-examples","aria-label":"code examples permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h4,{id:"default",style:{position:"relative"}},"Default",l.createElement(t.a,{href:"#default","aria-label":"default permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n,{scope:{SearchInput:r.S}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},'import { SearchInput } from \'hds-react\';\n\n() => (\n  <SearchInput\n    label="Search"\n    placeholder="Placeholder text"\n    helperText="Assistive text"\n    searchButtonAriaLabel="Search"\n    clearButtonAriaLabel="Clear search field"\n    onSubmit={submittedValue => console.log(\'Submitted value:\', submittedValue)}\n    style={{ maxWidth: \'320px\' }}\n  />\n)\n')),l.createElement(t.pre,null,l.createElement(t.code,{className:"language-html"},'<div class="hds-search-input" style="max-width:320px;">\n  <label for="example" class="hds-search-input__label">Search</label>\n  <div class="hds-search-input__input-wrapper">\n    <input\n      id="example"\n      class="hds-search-input__input"\n      type="text"\n      placeholder="Placeholder text"\n    />\n    <div class="hds-search-input__buttons">\n      <button\n        type="button"\n        aria-label="Search"\n        class="hds-search-input__button"\n      >\n        <span class="hds-icon hds-icon--search hds-icon--size-s" aria-hidden="true"></span>\n      </button>\n    </div>\n  </div>\n  <span class="hds-search-input__helper-text">Assistive text</span>\n</div>\n'))),"\n",l.createElement(t.h4,{id:"with-suggestions",style:{position:"relative"}},"With suggestions",l.createElement(t.a,{href:"#with-suggestions","aria-label":"with suggestions permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n,{scope:{SearchInput:r.S}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},"import { SearchInput } from 'hds-react';\n\n() => {\n  const fruits = ['Apple', 'Apricot', 'Avocado', 'Banana', 'Blackberry', 'Blueberry', 'Cherry', 'Coconut', 'Cranberry', 'Date', 'Dragonfruit', 'Fig', 'Gooseberry', 'Grape', 'Honeyberry', 'Jackfruit', 'Kiwifruit', 'Lemon', 'Lime', 'Mango', 'Melon', 'Nectarine', 'Orange', 'Papaya', 'Passionfruit', 'Peach', 'Pear', 'Pineapple', 'Raspberry', 'Satsuma', 'Start fruit', 'Strawberry', 'Tangelo', 'Tomato'].map((fruit) => ({ value: fruit }));\n  \n  const getSuggestions = (inputValue) => new Promise((resolve, reject) => {\n    const filteredItems = fruits.filter((fruit) => {\n      return fruit.value.toLowerCase().indexOf(inputValue.toLowerCase()) > -1;\n    });\n    setTimeout(() => resolve(filteredItems), 3000);\n  });\n  \n  return (\n    <SearchInput \n      label=\"Search for a fruit\"\n      placeholder=\"E.g. Apple\"\n      helperText=\"Assistive text\" \n      searchButtonAriaLabel=\"Search\" \n      clearButtonAriaLabel=\"Clear search field\"\n      suggestionLabelField=\"value\"\n      getSuggestions={getSuggestions}\n      onSubmit={submittedValue => console.log('Submitted value:', submittedValue)}\n      style={{ maxWidth: '320px' }}\n    />\n  );\n}\n"))),"\n",l.createElement(t.h4,{id:"with-suggestions-and-highlighting",style:{position:"relative"}},"With suggestions and highlighting",l.createElement(t.a,{href:"#with-suggestions-and-highlighting","aria-label":"with suggestions and highlighting permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n,{scope:{SearchInput:r.S}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},"import { SearchInput } from 'hds-react';\n\n() => {\n  const educations = ['Daycare education', 'Preschool education', 'Basic education', 'Upper secondary education', 'Vocational education', 'Polytechnic education', 'University education', 'Adult education centre'].map((education) => ({ value: education }));\n  \n  const getSuggestions = (inputValue) => new Promise((resolve, reject) => {\n    const filteredItems = educations.filter((education) => {\n      return education.value.toLowerCase().indexOf(inputValue.toLowerCase()) > -1;\n    });\n    resolve(filteredItems);\n  });\n  \n  return (\n    <>\n      <div style={{ fontSize: 'var(--fontsize-body-m)', marginBottom: 'var(--spacing-m)' }}>To see highlighting in action, search for \"education\".</div>\n      <SearchInput \n        label=\"Search education services\" \n        helperText=\"Assistive text\" \n        searchButtonAriaLabel=\"Search\" \n        clearButtonAriaLabel=\"Clear search field\"\n        highlightSuggestions\n        suggestionLabelField=\"value\"\n        getSuggestions={getSuggestions}\n        onSubmit={submittedValue => console.log('Submitted value:', submittedValue)}\n        style={{ maxWidth: '320px' }}\n      />\n    </>\n  );\n}\n"))),"\n",l.createElement(t.h3,{id:"packages",style:{position:"relative"}},"Packages",l.createElement(t.a,{href:"#packages","aria-label":"packages permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.table,null,l.createElement(t.thead,null,l.createElement(t.tr,null,l.createElement(t.th,null,"Package"),l.createElement(t.th,null,"Included"),l.createElement(t.th,null,"Storybook link"),l.createElement(t.th,null,"Source link"))),l.createElement(t.tbody,null,l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.strong,null,"HDS React")),l.createElement(t.td,null,l.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},l.createElement(s)," Yes ")),l.createElement(t.td,null,l.createElement(c,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-searchinput--default"},"View in Storybook")),l.createElement(t.td,null,l.createElement(i,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/react/src/components/searchInput"},"View source"))),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.strong,null,"HDS Core")),l.createElement(t.td,null,l.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},l.createElement(s)," Yes ")),l.createElement(t.td,null,l.createElement(c,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/core/?path=/story/components-search-input--default"},"View in Storybook")),l.createElement(t.td,null,l.createElement(i,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/core/src/components/search-input"},"View source"))))),"\n",l.createElement(t.h3,{id:"properties",style:{position:"relative"}},"Properties",l.createElement(t.a,{href:"#properties","aria-label":"properties permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"Note! You can find the full list of properties in the ",l.createElement(c,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/docs/components-searchinput--default"},"React Storybook.")),"\n",l.createElement(t.table,null,l.createElement(t.thead,null,l.createElement(t.tr,null,l.createElement(t.th,null,"Property"),l.createElement(t.th,null,"Description"),l.createElement(t.th,null,"Values"),l.createElement(t.th,null,"Default value"))),l.createElement(t.tbody,null,l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"clearButtonAriaLabel")),l.createElement(t.td,null,"The aria-label for the clear button."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,'"Clear"')),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"getSuggestions")),l.createElement(t.td,null,"Callback function fired every time the input content changes. Receives the input value as a parameter. Must return a promise which resolves to an array of SuggestionItems."),l.createElement(t.td,null,l.createElement(t.code,null,"function")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"highlightSuggestions")),l.createElement(t.td,null,"If set to true, the matching part of a suggestion will be highlighted."),l.createElement(t.td,null,l.createElement(t.code,null,"boolean")),l.createElement(t.td,null,"false")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"label")),l.createElement(t.td,null,"The label for the search field."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"loadingSpinnerText")),l.createElement(t.td,null,"Text to show for screen readers when loading spinner is visible."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,'"Loading suggestions"')),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"loadingSpinnerFinishedText")),l.createElement(t.td,null,"Text to show for screen readers when loading spinner is no longer visible."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,'"Finished loading suggestions"')),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"searchButtonAriaLabel")),l.createElement(t.td,null,"The aria-label for the search button."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,'"Search"')),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"hideSearchButton")),l.createElement(t.td,null,"If set to true, the search button will be hidden."),l.createElement(t.td,null,l.createElement(t.code,null,"boolean")),l.createElement(t.td,null,"false")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"suggestionLabelField")),l.createElement(t.td,null,"Field of the SuggestionItem that represents the item label. E.g. an ",l.createElement(t.code,null,"suggestionLabelField")," value of ",l.createElement(t.code,null,"'foo'")," and a suggestion item ",l.createElement(t.code,null,"{ foo: 'Label', bar: 'value' }"),", would display ",l.createElement(t.code,null,"'Label'")," in the menu for that specific suggestion."),l.createElement(t.td,null,l.createElement(t.code,null,"string")," ",l.createElement(t.code,null,"number")," ",l.createElement(t.code,null,"symbol")),l.createElement(t.td,null,"false")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"visibleSuggestions")),l.createElement(t.td,null,"The number of suggestions that are visible in the menu before it becomes scrollable."),l.createElement(t.td,null,l.createElement(t.code,null,"number")),l.createElement(t.td,null,"8")),l.createElement(t.tr,null,l.createElement(t.td,null,"[Table 1:SearchInput properties]"),l.createElement(t.td),l.createElement(t.td),l.createElement(t.td)))))}function o(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){return void 0===e&&(e={}),l.createElement(c,e,l.createElement(i,e))}},65945:function(e,t,n){n.r(t);var a=n(11151),l=n(67294),r=n(83428),s=n(57674),c=n(89482),i=(n(18607),n(26127));function o(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,a.ah)(),e.components);return i.Z||u("PageTabs",!1),i.Z.Tab||u("PageTabs.Tab",!0),i.Z.TabList||u("PageTabs.TabList",!0),i.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"searchinput",style:{position:"relative"}},"SearchInput",l.createElement(t.a,{href:"#searchinput","aria-label":"searchinput permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(r.S,{type:"info"},"Stable"),l.createElement(r.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(s.Z)),"\n",l.createElement(c.Z,null,"A search input allows the user to find relevant content. The user can filter content using different words or phrases as keywords."),"\n",l.createElement(i.Z,{pageContext:e.pageContext},l.createElement(i.Z.TabList,null,l.createElement(i.Z.Tab,{href:"/"},"Usage"),l.createElement(i.Z.Tab,{href:"/code"},"Code"),l.createElement(i.Z.Tab,{href:"/accessibility"},"Accessibility")),l.createElement(i.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,a.ah)(),e.components);return t?l.createElement(t,e,l.createElement(o,e)):o(e)}},89482:function(e,t,n){var a=n(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:n="var(--fontsize-body-xl)",style:l={},children:r}=e;return a.createElement("p",{style:{fontSize:n,color:t,maxWidth:600,...l}},r)}},26127:function(e,t,n){var a=n(67294),l=n(14160),r=n(94671);const s="PageTabList",c="PageTabPanel",i="PageTab",o=e=>{var t;let{pageContext:n,children:o}=e;const u=n.frontmatter.slug,d=Array.isArray(o)?o:[o],m=d.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===s)),h=d.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===c)),p=null===(t=m.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===i)),b=p.findIndex((e=>u.endsWith(e.props.href))),g=-1===b?0:b,E=0===g?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return a.createElement(r.a,{initiallyActiveTab:g},a.createElement(r.a.TabList,{className:"page-tabs-list"},p.map((e=>a.createElement(r.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?E:E+e.props.href))},e.props.children)))),p.map(((e,t)=>a.createElement(r.a.TabPanel,{key:e.props.href},g===t?h.props.children:a.createElement("div",null)))))},u=e=>{let{children:t}=e;return a.createElement(r.a.TabList,null,t)};u.componentName=s;const d=e=>{let{href:t,slug:n,children:l}=e;return a.createElement(r.a.Tab,null,l)};d.componentName=i;const m=e=>{let{children:t}=e;return a.createElement(r.a.TabPanel,null,t)};m.componentName=c,o.TabList=u,o.Tab=d,o.TabPanel=m,t.Z=o},57674:function(e,t,n){var a=n(67294),l=n(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return a.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},a.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>a.createElement("li",{key:t},a.createElement("span",{className:"status-name"},t),a.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-search-input-index-mdx-e3e961e1ed7141f5652f.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-search-input-index-mdx-e3e961e1ed7141f5652f.js
new file mode 100644
index 00000000000..74cb58c1684
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-search-input-index-mdx-e3e961e1ed7141f5652f.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[1635,4744],{83428:function(e,t,a){a.d(t,{S:function(){return c}});var n=a(80136),l=a(67294),s=a(7444),i=a(34300),r={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,s.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:t}=e;return l.createElement("span",{className:r.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:s,type:c="neutral",iconLeft:h}=e,u=(0,n._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,i.c)(r.statusLabel,r[c],h&&r.statusLabelWithIcon,a),"data-testid":s},u),h&&l.createElement(o,{icon:h}),t)}},1012:function(e,t,a){a.r(t),a.d(t,{HighlightExample:function(){return c},SuggestionsExample:function(){return o}});var n=a(11151),l=a(67294),s=a(27945),i=a(65945);const r=e=>{let{children:t,pageContext:a}=e;return l.createElement(i.default,{pageContext:a},t)},o=()=>{const e=["Apple","Apricot","Avocado","Banana","Blackberry","Blueberry","Cherry","Coconut","Cranberry","Date","Dragonfruit","Fig","Gooseberry","Grape","Honeyberry","Jackfruit","Kiwifruit","Lemon","Lime","Mango","Melon","Nectarine","Orange","Papaya","Passionfruit","Peach","Pear","Pineapple","Raspberry","Satsuma","Start fruit","Strawberry","Tangelo","Tomato"].map((e=>({value:e})));return l.createElement(s.S,{label:"Search for a fruit",placeholder:"E.g. Apple",helperText:"Assistive text",searchButtonAriaLabel:"Search",clearButtonAriaLabel:"Clear search field",suggestionLabelField:"value",getSuggestions:t=>new Promise(((a,n)=>{const l=e.filter((e=>e.value.toLowerCase().indexOf(t.toLowerCase())>-1));setTimeout((()=>a(l)),3e3)})),onSubmit:e=>console.log("Submitted value:",e),style:{maxWidth:"320px"}})},c=()=>{const e=Object.assign({div:"div"},(0,n.ah)()),t=["Daycare education","Preschool education","Basic education","Upper secondary education","Vocational education","Polytechnic education","University education","Adult education centre"].map((e=>({value:e})));return l.createElement(l.Fragment,null,l.createElement(e.div,{style:{fontSize:"var(--fontsize-body-m)",marginBottom:"var(--spacing-m)"}},'To see highlighting in action, search for "education".'),l.createElement(s.S,{label:"Search education services",helperText:"Assistive text",searchButtonAriaLabel:"Search",clearButtonAriaLabel:"Clear search field",highlightSuggestions:!0,suggestionLabelField:"value",getSuggestions:e=>new Promise(((a,n)=>{a(t.filter((t=>t.value.toLowerCase().indexOf(e.toLowerCase())>-1)))})),onSubmit:e=>console.log("Submitted value:",e),style:{maxWidth:"320px"}}))};function h(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",strong:"strong",h4:"h4",p:"p",code:"code"},(0,n.ah)(),e.components),{PlaygroundPreview:a}=t;return a||function(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("PlaygroundPreview",!0),l.createElement(l.Fragment,null,l.createElement(t.h2,{id:"usage",style:{position:"relative"}},"Usage",l.createElement(t.a,{href:"#usage","aria-label":"usage permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h3,{id:"example",style:{position:"relative"}},"Example",l.createElement(t.a,{href:"#example","aria-label":"example permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a,null,l.createElement(s.S,{label:"Search",placeholder:"Placeholder text",helperText:"Assistive text",searchButtonAriaLabel:"Search",clearButtonAriaLabel:"Clear search field",onSubmit:e=>console.log("Submitted value:",e),style:{maxWidth:"320px"}})),"\n",l.createElement(t.h3,{id:"principles",style:{position:"relative"}},"Principles",l.createElement(t.a,{href:"#principles","aria-label":"principles permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,l.createElement(t.strong,null,"A label should always be provided with a search input.")," Only exception to this is when search input is used in navigation.","\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,"Make sure that the label is clear and concise. The user should immediately understand what the search is for."),"\n",l.createElement(t.li,null,"Instead of a label, you may provide a button next to the input which states the purpose of the search."),"\n"),"\n"),"\n",l.createElement(t.li,null,"Search field input should fit into one line. Do not use multiline search inputs."),"\n",l.createElement(t.li,null,l.createElement(t.strong,null,"It is recommended to have only one search per page.")," If you need multiple searches, clearly label them to indicate their purpose."),"\n",l.createElement(t.li,null,"If possible, provide search suggestions (see With suggestions section for more info). This helps users to find what they are looking for, especially if the searchable items are complex.","\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,"Do not use suggestions to present search results. Results should be provided in their own component or a separate page."),"\n"),"\n"),"\n"),"\n",l.createElement(t.h3,{id:"variations",style:{position:"relative"}},"Variations",l.createElement(t.a,{href:"#variations","aria-label":"variations permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h4,{id:"default",style:{position:"relative"}},"Default",l.createElement(t.a,{href:"#default","aria-label":"default permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"The basic version of the search input is a plain text field with search and clear buttons. The search button will initiate the search with the current text input."),"\n",l.createElement(a,null,l.createElement(s.S,{label:"Search",placeholder:"Placeholder text",helperText:"Assistive text",searchButtonAriaLabel:"Search",clearButtonAriaLabel:"Clear search field",onSubmit:e=>console.log("Submitted value:",e),style:{maxWidth:"320px"}})),"\n",l.createElement(t.h4,{id:"with-suggestions",style:{position:"relative"}},"With suggestions",l.createElement(t.a,{href:"#with-suggestions","aria-label":"with suggestions permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"If available, suggestions can also be included with the HDS search input. Suggestions are generated by a project supplied function which means it is up to the project to choose how and where the suggestions are made."),"\n",l.createElement(t.p,null,"When fetching suggestions is taking longer than 1.5 seconds, a loading spinner will be displayed below the input until suggestions are received."),"\n","\n",l.createElement(a,null,l.createElement(o)),"\n",l.createElement(t.h4,{id:"with-suggestions-and-highlighting",style:{position:"relative"}},"With suggestions and highlighting",l.createElement(t.a,{href:"#with-suggestions-and-highlighting","aria-label":"with suggestions and highlighting permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"HDS search input also supports suggestion highlighting. This means that the suggestion not part of the initial search keyword is highlighted. In some cases this can be beneficial to the user to differentiate between search suggestions."),"\n",l.createElement(t.p,null,"Suggestion highlighting is activated with ",l.createElement(t.code,null,"highlightSuggestions")," property and it becomes visible after at least three characters are typed into the input."),"\n",l.createElement(t.p,null,"Note! This feature is experimental and we are looking to improve it after project feedback."),"\n","\n",l.createElement(a,null,l.createElement(c)))}t.default=function(e){return void 0===e&&(e={}),l.createElement(r,e,l.createElement(h,e))}},65945:function(e,t,a){a.r(t);var n=a(11151),l=a(67294),s=a(83428),i=a(57674),r=a(89482),o=(a(18607),a(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,n.ah)(),e.components);return o.Z||h("PageTabs",!1),o.Z.Tab||h("PageTabs.Tab",!0),o.Z.TabList||h("PageTabs.TabList",!0),o.Z.TabPanel||h("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"searchinput",style:{position:"relative"}},"SearchInput",l.createElement(t.a,{href:"#searchinput","aria-label":"searchinput permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(s.S,{type:"info"},"Stable"),l.createElement(s.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(i.Z)),"\n",l.createElement(r.Z,null,"A search input allows the user to find relevant content. The user can filter content using different words or phrases as keywords."),"\n",l.createElement(o.Z,{pageContext:e.pageContext},l.createElement(o.Z.TabList,null,l.createElement(o.Z.Tab,{href:"/"},"Usage"),l.createElement(o.Z.Tab,{href:"/code"},"Code"),l.createElement(o.Z.Tab,{href:"/accessibility"},"Accessibility")),l.createElement(o.Z.TabPanel,null,e.children)))}function h(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,n.ah)(),e.components);return t?l.createElement(t,e,l.createElement(c,e)):c(e)}},89482:function(e,t,a){var n=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:l={},children:s}=e;return n.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...l}},s)}},26127:function(e,t,a){var n=a(67294),l=a(14160),s=a(94671);const i="PageTabList",r="PageTabPanel",o="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const h=a.frontmatter.slug,u=Array.isArray(c)?c:[c],d=u.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===i)),m=u.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===r)),p=null===(t=d.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===o)),b=p.findIndex((e=>h.endsWith(e.props.href))),g=-1===b?0:b,f=0===g?h:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(h);return n.createElement(s.a,{initiallyActiveTab:g},n.createElement(s.a.TabList,{className:"page-tabs-list"},p.map((e=>n.createElement(s.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),p.map(((e,t)=>n.createElement(s.a.TabPanel,{key:e.props.href},g===t?m.props.children:n.createElement("div",null)))))},h=e=>{let{children:t}=e;return n.createElement(s.a.TabList,null,t)};h.componentName=i;const u=e=>{let{href:t,slug:a,children:l}=e;return n.createElement(s.a.Tab,null,l)};u.componentName=o;const d=e=>{let{children:t}=e;return n.createElement(s.a.TabPanel,null,t)};d.componentName=r,c.TabList=h,c.Tab=u,c.TabPanel=d,t.Z=c},57674:function(e,t,a){var n=a(67294),l=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return n.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},n.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>n.createElement("li",{key:t},n.createElement("span",{className:"status-name"},t),n.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-search-input-tabs-mdx-3feb0982dacb4376e011.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-search-input-tabs-mdx-3feb0982dacb4376e011.js
new file mode 100644
index 00000000000..b9cf5739fa6
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-search-input-tabs-mdx-3feb0982dacb4376e011.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[4744],{83428:function(e,a,t){t.d(a,{S:function(){return i}});var s=t(80136),l=t(67294),n=t(7444),r=t(34300),c={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:a}=e;return l.createElement("span",{className:c.statusLabelIcon,"aria-hidden":"true"},a)},i=e=>{var{children:a,className:t,dataTestId:n,type:i="neutral",iconLeft:u}=e,b=(0,s._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(c.statusLabel,c[i],u&&c.statusLabelWithIcon,t),"data-testid":n},b),u&&l.createElement(o,{icon:u}),a)}},65945:function(e,a,t){t.r(a);var s=t(11151),l=t(67294),n=t(83428),r=t(57674),c=t(89482),o=(t(18607),t(26127));function i(e){const a=Object.assign({h1:"h1",a:"a",span:"span"},(0,s.ah)(),e.components);return o.Z||u("PageTabs",!1),o.Z.Tab||u("PageTabs.Tab",!0),o.Z.TabList||u("PageTabs.TabList",!0),o.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(a.h1,{id:"searchinput",style:{position:"relative"}},"SearchInput",l.createElement(a.a,{href:"#searchinput","aria-label":"searchinput permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(n.S,{type:"info"},"Stable"),l.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(c.Z,null,"A search input allows the user to find relevant content. The user can filter content using different words or phrases as keywords."),"\n",l.createElement(o.Z,{pageContext:e.pageContext},l.createElement(o.Z.TabList,null,l.createElement(o.Z.Tab,{href:"/"},"Usage"),l.createElement(o.Z.Tab,{href:"/code"},"Code"),l.createElement(o.Z.Tab,{href:"/accessibility"},"Accessibility")),l.createElement(o.Z.TabPanel,null,e.children)))}function u(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,s.ah)(),e.components);return a?l.createElement(a,e,l.createElement(i,e)):i(e)}},89482:function(e,a,t){var s=t(67294);a.Z=e=>{let{color:a="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:l={},children:n}=e;return s.createElement("p",{style:{fontSize:t,color:a,maxWidth:600,...l}},n)}},26127:function(e,a,t){var s=t(67294),l=t(14160),n=t(94671);const r="PageTabList",c="PageTabPanel",o="PageTab",i=e=>{var a;let{pageContext:t,children:i}=e;const u=t.frontmatter.slug,b=Array.isArray(i)?i:[i],d=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===r)),h=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===c)),m=null===(a=d.props)||void 0===a?void 0:a.children.filter((e=>e.type.componentName===o)),p=m.findIndex((e=>u.endsWith(e.props.href))),_=-1===p?0:p,f=0===_?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return s.createElement(n.a,{initiallyActiveTab:_},s.createElement(n.a.TabList,{className:"page-tabs-list"},m.map((e=>s.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),m.map(((e,a)=>s.createElement(n.a.TabPanel,{key:e.props.href},_===a?h.props.children:s.createElement("div",null)))))},u=e=>{let{children:a}=e;return s.createElement(n.a.TabList,null,a)};u.componentName=r;const b=e=>{let{href:a,slug:t,children:l}=e;return s.createElement(n.a.Tab,null,l)};b.componentName=o;const d=e=>{let{children:a}=e;return s.createElement(n.a.TabPanel,null,a)};d.componentName=c,i.TabList=u,i.Tab=b,i.TabPanel=d,a.Z=i},57674:function(e,a,t){var s=t(67294),l=t(45422);a.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return s.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},s.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((a=>s.createElement("li",{key:a},s.createElement("span",{className:"status-name"},a),s.createElement("span",null,e[a]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-selection-group-accessibility-mdx-5c398654d8a316a5ce75.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-selection-group-accessibility-mdx-5c398654d8a316a5ce75.js
new file mode 100644
index 00000000000..931d6756c63
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-selection-group-accessibility-mdx-5c398654d8a316a5ce75.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[9700,1352],{83428:function(e,t,a){a.d(t,{S:function(){return c}});var s=a(80136),l=a(67294),n=a(7444),r=a(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:t}=e;return l.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:n,type:c="neutral",iconLeft:u}=e,b=(0,s._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(i.statusLabel,i[c],u&&i.statusLabelWithIcon,a),"data-testid":n},b),u&&l.createElement(o,{icon:u}),t)}},16236:function(e,t,a){a.r(t);var s=a(11151),l=a(67294),n=a(1072);const r=e=>{let{children:t,pageContext:a}=e;return l.createElement(n.default,{pageContext:a},t)};function i(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li"},(0,s.ah)(),e.components);return l.createElement(l.Fragment,null,l.createElement(t.h2,{id:"accessibility",style:{position:"relative"}},"Accessibility",l.createElement(t.a,{href:"#accessibility","aria-label":"accessibility permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h3,{id:"pay-attention-to",style:{position:"relative"}},"Pay attention to",l.createElement(t.a,{href:"#pay-attention-to","aria-label":"pay attention to permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,"Aim to make the order of Selection group options as intuitive as possible for assistive technologies. This depends on the group content. An alphabetical ordering is a good starting point, but for some content it can be possible to order them by size (smaller to larger), etc."),"\n"))}t.default=function(e){return void 0===e&&(e={}),l.createElement(r,e,l.createElement(i,e))}},1072:function(e,t,a){a.r(t);var s=a(11151),l=a(67294),n=a(83428),r=a(57674),i=a(89482),o=(a(18607),a(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,s.ah)(),e.components);return o.Z||u("PageTabs",!1),o.Z.Tab||u("PageTabs.Tab",!0),o.Z.TabList||u("PageTabs.TabList",!0),o.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"selectiongroup",style:{position:"relative"}},"SelectionGroup",l.createElement(t.a,{href:"#selectiongroup","aria-label":"selectiongroup permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(n.S,{type:"info"},"Stable"),l.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(i.Z,null,"Selection group allows grouping related form selection elements (such as Checkboxes) to each other."),"\n",l.createElement(o.Z,{pageContext:e.pageContext},l.createElement(o.Z.TabList,null,l.createElement(o.Z.Tab,{href:"/"},"Usage"),l.createElement(o.Z.Tab,{href:"/code"},"Code"),l.createElement(o.Z.Tab,{href:"/accessibility"},"Accessibility")),l.createElement(o.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,s.ah)(),e.components);return t?l.createElement(t,e,l.createElement(c,e)):c(e)}},89482:function(e,t,a){var s=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:l={},children:n}=e;return s.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...l}},n)}},26127:function(e,t,a){var s=a(67294),l=a(14160),n=a(94671);const r="PageTabList",i="PageTabPanel",o="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const u=a.frontmatter.slug,b=Array.isArray(c)?c:[c],d=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===r)),h=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===i)),m=null===(t=d.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===o)),p=m.findIndex((e=>u.endsWith(e.props.href))),g=-1===p?0:p,_=0===g?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return s.createElement(n.a,{initiallyActiveTab:g},s.createElement(n.a.TabList,{className:"page-tabs-list"},m.map((e=>s.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?_:_+e.props.href))},e.props.children)))),m.map(((e,t)=>s.createElement(n.a.TabPanel,{key:e.props.href},g===t?h.props.children:s.createElement("div",null)))))},u=e=>{let{children:t}=e;return s.createElement(n.a.TabList,null,t)};u.componentName=r;const b=e=>{let{href:t,slug:a,children:l}=e;return s.createElement(n.a.Tab,null,l)};b.componentName=o;const d=e=>{let{children:t}=e;return s.createElement(n.a.TabPanel,null,t)};d.componentName=i,c.TabList=u,c.Tab=b,c.TabPanel=d,t.Z=c},57674:function(e,t,a){var s=a(67294),l=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return s.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},s.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>s.createElement("li",{key:t},s.createElement("span",{className:"status-name"},t),s.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-selection-group-code-mdx-1ac1d57bdabaa673db84.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-selection-group-code-mdx-1ac1d57bdabaa673db84.js
new file mode 100644
index 00000000000..b548fa2c0db
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-selection-group-code-mdx-1ac1d57bdabaa673db84.js
@@ -0,0 +1 @@
+(self.webpackChunksite=self.webpackChunksite||[]).push([[2739,1352],{91309:function(e,t,o){var a="[object Null]",n="[object Undefined]",l="object"==typeof o.g&&o.g&&o.g.Object===Object&&o.g,r="object"==typeof self&&self&&self.Object===Object&&self,i=l||r||Function("return this")(),c=Object.prototype,s=c.hasOwnProperty,d=c.toString,h=i.Symbol,_=h?h.toStringTag:void 0;function b(e){return null==e?void 0===e?n:a:_&&_ in Object(e)?function(e){var t=s.call(e,_),o=e[_];try{e[_]=void 0;var a=!0}catch(l){}var n=d.call(e);a&&(t?e[_]=o:delete e[_]);return n}(e):function(e){return d.call(e)}(e)}e.exports=function(e){if(!function(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}(e))return!1;var t=b(e);return"[object Function]"==t||"[object GeneratorFunction]"==t||"[object AsyncFunction]"==t||"[object Proxy]"==t}},2592:function(e,t,o){"use strict";o.d(t,{C:function(){return d}});var a=o(80136),n=o(67294),l=o(7444),r=o(34300),i=o(94330),c=o(37776),s=o(45422);(0,l.s)(".checkbox_hds-checkbox__9HMCz{--size:24px;--icon-scale:1;--border-width:2px;--outline-width:3px;--label-font-size:var(--fontsize-body-m);--label-padding:var(--spacing-2-xs);--background-unselected:transparent;--background-selected:var(--color-bus);--background-hover:var(--color-bus-dark);--background-disabled:var(--color-black-10);--border-color-selected:var(--color-bus);--border-color-selected-hover:var(--color-bus-dark);--border-color-selected-focus:var(--color-bus);--border-color-unselected:var(--color-black-50);--border-color-unselected-hover:var(--color-black-90);--border-color-unselected-focus:var(--color-black-90);--border-color-disabled:var(--color-black-10);--icon-color-unselected:transparent;--icon-color-selected:var(--color-white);--icon-color-disabled:var(--color-white);--label-color:var(--color-black-90);--label-color-disabled:var(--color-black-40);--icon-size:var(--spacing-m);display:flex;flex-wrap:wrap;min-height:var(--size);position:relative}.checkbox_hds-checkbox__9HMCz,.checkbox_hds-checkbox__9HMCz *,.checkbox_hds-checkbox__9HMCz :after,.checkbox_hds-checkbox__9HMCz :before{box-sizing:border-box}.checkbox_hds-checkbox__9HMCz:not(:first-of-type){margin-top:var(--spacing-2-xs)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:before,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__label__3HoD3:before{content:\"\";left:0;position:absolute;top:0}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:before{background-color:var(--icon-color-unselected);height:var(--size);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M21 7L10 18l-5.5-5.5L6 11l4 4 9.5-9.5z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M21 7L10 18l-5.5-5.5L6 11l4 4 9.5-9.5z'/%3E%3C/g%3E%3C/svg%3E\");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:calc(var(--size) * var(--icon-scale));mask-size:calc(var(--size) * var(--icon-scale));transform:scale(.6);width:var(--size);z-index:1}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__label__3HoD3:before{height:var(--size);width:var(--size)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__label__3HoD3:after{background-color:var(--background-unselected);border:var(--border-width) solid var(--border-color-unselected);height:var(--size);width:var(--size)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:focus+.checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:focus:before,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:hover+.checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:hover:before{transition:85ms ease-out;transition-property:background-color,border-color,transform}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:focus+.checkbox_hds-checkbox__label__3HoD3:before{box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);transform:translateZ(0);transition:85ms ease-out;transition-property:box-shadow,transform}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;font-family:inherit;font-size:100%;height:var(--size);left:0;line-height:1.15;margin:0;outline:none;position:absolute;top:0;width:var(--size)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__label__3HoD3{color:var(--label-color);cursor:pointer;font-size:var(--label-font-size);line-height:var(--lineheight-m);padding-left:calc(var(--size) + var(--label-padding));padding-top:calc((var(--size) - (var(--label-font-size) * var(--lineheight-m))) / 2);position:relative}.checkbox_hds-checkbox__error-text__2aFst{color:var(--color-error);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.checkbox_hds-checkbox__error-text__2aFst:before{background:var(--color-error);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:checked:before{background-color:var(--icon-color-selected);transform:scale(1)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:checked):indeterminate:before{background-color:var(--icon-color-selected);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M6 11h12v2H6z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M6 11h12v2H6z'/%3E%3C/g%3E%3C/svg%3E\");transform:scale(1)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:checked+.checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:indeterminate+.checkbox_hds-checkbox__label__3HoD3:after{background-color:var(--background-selected);border-color:var(--border-color-selected)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:disabled+.checkbox_hds-checkbox__label__3HoD3:after{background-color:var(--background-disabled);border-color:var(--border-color-disabled)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):focus+.checkbox_hds-checkbox__label__3HoD3:after{border-color:var(--border-color-unselected-focus)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):hover+.checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):hover:focus+.checkbox_hds-checkbox__label__3HoD3:after{border-color:var(--border-color-unselected-hover)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):checked:focus+.checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):indeterminate:focus+.checkbox_hds-checkbox__label__3HoD3:after{border-color:var(--border-color-selected-focus)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):checked:hover+.checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):checked:hover:focus+.checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):indeterminate:hover+.checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):indeterminate:hover:focus+.checkbox_hds-checkbox__label__3HoD3:after{background-color:var(--background-hover);border-color:var(--border-color-selected-hover)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:disabled+.checkbox_hds-checkbox__label__3HoD3{color:var(--label-color-disabled)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:checked:disabled:before{background-color:var(--icon-color-disabled)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:disabled,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:disabled+.checkbox_hds-checkbox__label__3HoD3{cursor:not-allowed}.helpers_visually-hidden__3lBcX{border:0;clip:\"rect(0 0 0 0)\";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.helpers_button-reset__2d38b{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.helpers_text-body__FA9G-{color:var(--color-black-90);font-family:var(--font-default);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.helpers_text-medium__3Hiiz{font-family:var(--font-default);font-weight:500}.helpers_text-bold__2QyP8{font-family:var(--font-default);font-weight:700}.helpers_text-xl__33T1r{font-size:var(--fontsize-heading-m)}.helpers_text-lg__1_8nq{font-size:var(--fontsize-heading-s)}.helpers_text-md__RyeCd{font-size:var(--fontsize-heading-xs)}.helpers_subtitle__RE8f_{font-size:var(--fontsize-body-m)}.helpers_text-sm__AxqmS{font-size:var(--fontsize-body-s);line-height:var(--lineheight-xl)}.helpers_heading-xxl__1GAqs{font-size:var(--fontsize-heading-xxl);font-weight:400;letter-spacing:-1.2px;line-height:var(--lineheight-s)}.helpers_heading-xl__u_X50{font-size:var(--fontsize-heading-xl);font-weight:400;letter-spacing:-1px;line-height:var(--lineheight-s)}.helpers_heading-xl-mobile__gKona{font-size:var(--fontsize-heading-xl-mobile);font-weight:400;letter-spacing:-.8px;line-height:var(--lineheight-s)}.helpers_heading-l__3EMpz{font-size:var(--fontsize-heading-l);font-weight:400;letter-spacing:-.4px;line-height:var(--lineheight-s)}.helpers_heading-m__1Lsy-{font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-.2px;line-height:32px}.helpers_heading-s__1EK5w{font-size:var(--fontsize-heading-s);font-weight:500;letter-spacing:.2px;line-height:1.4}.helpers_heading-xs__iZYJi{font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:.4px;line-height:1.33}.helpers_heading-xxs__jqtFk{font-size:var(--fontsize-heading-xxs);font-weight:700;letter-spacing:.4px;line-height:var(--lineheight-l)}.helpers_helper-text__YRZTD{color:var(--color-black-60);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs)}.Checkbox-module_tooltipButton__2shV1{display:inline-block;margin-left:var(--spacing-2-xs)}");const d=n.forwardRef(((e,t)=>{var{checked:o=!1,className:l,disabled:d=!1,errorText:h,helperText:_,id:b,indeterminate:u,label:p,onChange:g=(()=>null),style:v,value:m,tooltipText:k,tooltipLabel:x,tooltipButtonLabel:f}=e,z=(0,a._)(e,["checked","className","disabled","errorText","helperText","id","indeterminate","label","onChange","style","value","tooltipText","tooltipLabel","tooltipButtonLabel"]);const E=(0,n.useRef)(null);(0,n.useEffect)((()=>{t&&(0,i.m)(t,E),E.current.indeterminate=u}),[E,t,u]),p&&"string"!=typeof p&&"number"!=typeof p&&console.warn("Using ReactElement as a label is against good usability and accessibility practices. Please prefer plain strings.");const w=(0,c.c)(b,_,h,void 0,void 0);return n.createElement("div",{className:(0,r.c)("Checkbox-module_checkbox__3L0GR checkbox_hds-checkbox__9HMCz",l),style:v},n.createElement("input",Object.assign({ref:E,id:b,className:(0,r.c)("Checkbox-module_input__3VZvy checkbox_hds-checkbox__input__1w0pu"),onChange:g,value:m,type:"checkbox",disabled:d,checked:o,"aria-describedby":w.length>0?w:null},z)),n.createElement("label",{htmlFor:b,className:(0,r.c)("Checkbox-module_label__L5AN1 checkbox_hds-checkbox__label__3HoD3")},p),k&&n.createElement(s.T,{className:"Checkbox-module_tooltipButton__2shV1",buttonLabel:f,tooltipLabel:x},k),h&&n.createElement("div",{className:"Checkbox-module_errorText__5EREQ checkbox_hds-checkbox__error-text__2aFst",id:b+"-error"},h),_&&n.createElement("div",{className:"Checkbox-module_helperText__1vKwY helpers_helper-text__YRZTD",id:b+"-helper"},_))}))},29520:function(e,t,o){"use strict";o.d(t,{R:function(){return i}});var a=o(80136),n=o(67294),l=o(7444),r=o(34300);(0,l.s)('.radio-button_hds-radio-button__1kktv{--size:24px;--icon-scale:0.5;--border-width:2px;--outline-width:3px;--label-font-size:var(--fontsize-body-m);--label-padding:var(--spacing-2-xs);--background:var(--color-white);--background-hover:var(--color-white);--background-focus:var(--color-white);--background-unselected-disabled:var(--color-black-10);--background-selected-disabled:var(--color-white);--border-color-focus:var(--color-black-90);--border-color-selected:var(--color-bus);--border-color-selected-hover:var(--color-bus-dark);--border-color-selected-disabled:var(--color-black-20);--border-color-unselected:var(--color-black-50);--border-color-unselected-hover:var(--color-black-90);--border-color-unselected-disabled:var(--color-black-10);--icon-color-selected:var(--color-bus);--icon-color-unselected:transparent;--icon-color-hover:var(--color-bus-dark);--icon-color-disabled:var(--color-black-10);--label-color:var(--color-black-90);--label-color-disabled:var(--color-black-40);display:flex;flex-wrap:wrap;min-height:var(--size);position:relative}.radio-button_hds-radio-button__1kktv,.radio-button_hds-radio-button__1kktv *,.radio-button_hds-radio-button__1kktv :after,.radio-button_hds-radio-button__1kktv :before{box-sizing:border-box}.radio-button_hds-radio-button__1kktv:not(:first-of-type){margin-top:var(--spacing-2-xs)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__label__1XnIa:after,.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__label__1XnIa:before{border-radius:50%;content:"";left:0;position:absolute;top:0}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__label__1XnIa:after{background-clip:content-box;background-color:var(--icon-color-unselected);border:var(--border-width) solid var(--border-color-unselected);height:var(--size);padding:calc((var(--size) / 2 - var(--border-width) * 2) * (1 - var(--icon-scale)));width:var(--size)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:checked+.radio-button_hds-radio-button__label__1XnIa:after{background-color:var(--icon-color-selected);border-color:var(--border-color-selected)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:focus+.radio-button_hds-radio-button__label__1XnIa:after,.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:hover+.radio-button_hds-radio-button__label__1XnIa:after{transition:85ms ease-out;transition-property:background-color,border-color}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:disabled+.radio-button_hds-radio-button__label__1XnIa:after{border-color:var(--border-color-unselected-disabled)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:checked:disabled+.radio-button_hds-radio-button__label__1XnIa:after{background-color:var(--icon-color-disabled);border-color:var(--border-color-selected-disabled)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:not(:disabled):focus+.radio-button_hds-radio-button__label__1XnIa:after{border-color:var(--border-color-focus)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:not(:disabled):hover+.radio-button_hds-radio-button__label__1XnIa:after,.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:not(:disabled):hover:focus+.radio-button_hds-radio-button__label__1XnIa:after{border-color:var(--border-color-unselected-hover)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__label__1XnIa:before{background-color:var(--background);height:var(--size);width:var(--size)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:focus+.radio-button_hds-radio-button__label__1XnIa:before,.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:hover+.radio-button_hds-radio-button__label__1XnIa:before{transition:85ms ease-out;transition-property:background-color,box-shadow,transform}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6{font-family:inherit;font-size:100%;height:var(--size);left:0;line-height:1.15;margin:0;opacity:0;position:absolute;top:0;width:var(--size)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__label__1XnIa{color:var(--label-color);cursor:pointer;font-size:var(--label-font-size);line-height:var(--lineheight-m);padding-left:calc(var(--size) + var(--label-padding));padding-top:calc((var(--size) - (var(--label-font-size) * var(--lineheight-m))) / 2);position:relative}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:hover+.radio-button_hds-radio-button__label__1XnIa:before{background-color:var(--background-hover)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:focus+.radio-button_hds-radio-button__label__1XnIa:before{box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);transform:translateZ(0)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:not(:disabled):checked:hover+.radio-button_hds-radio-button__label__1XnIa:after,.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:not(:disabled):checked:hover:focus+.radio-button_hds-radio-button__label__1XnIa:after{background-color:var(--icon-color-hover);border-color:var(--border-color-selected-hover)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:disabled+.radio-button_hds-radio-button__label__1XnIa{color:var(--label-color-disabled)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:disabled+.radio-button_hds-radio-button__label__1XnIa:before{background-color:var(--background-unselected-disabled)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:checked:disabled+.radio-button_hds-radio-button__label__1XnIa:before{background-color:var(--background-selected-disabled)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:disabled,.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:disabled+.radio-button_hds-radio-button__label__1XnIa{cursor:not-allowed}.helpers_visually-hidden__2SQYx{border:0;clip:"rect(0 0 0 0)";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.helpers_button-reset__2Gr5D{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.helpers_text-body__1-RNd{color:var(--color-black-90);font-family:var(--font-default);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.helpers_text-medium__WvSD9{font-family:var(--font-default);font-weight:500}.helpers_text-bold__RHjJI{font-family:var(--font-default);font-weight:700}.helpers_text-xl__2rpQg{font-size:var(--fontsize-heading-m)}.helpers_text-lg__2dciy{font-size:var(--fontsize-heading-s)}.helpers_text-md__-y1dr{font-size:var(--fontsize-heading-xs)}.helpers_subtitle__3x21G{font-size:var(--fontsize-body-m)}.helpers_text-sm__238bH{font-size:var(--fontsize-body-s);line-height:var(--lineheight-xl)}.helpers_heading-xxl__1KEkh{font-size:var(--fontsize-heading-xxl);font-weight:400;letter-spacing:-1.2px;line-height:var(--lineheight-s)}.helpers_heading-xl__GYTuO{font-size:var(--fontsize-heading-xl);font-weight:400;letter-spacing:-1px;line-height:var(--lineheight-s)}.helpers_heading-xl-mobile__1Dfib{font-size:var(--fontsize-heading-xl-mobile);font-weight:400;letter-spacing:-.8px;line-height:var(--lineheight-s)}.helpers_heading-l__1BzbR{font-size:var(--fontsize-heading-l);font-weight:400;letter-spacing:-.4px;line-height:var(--lineheight-s)}.helpers_heading-m__2APFi{font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-.2px;line-height:32px}.helpers_heading-s__2adCF{font-size:var(--fontsize-heading-s);font-weight:500;letter-spacing:.2px;line-height:1.4}.helpers_heading-xs__uSPiv{font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:.4px;line-height:1.33}.helpers_heading-xxs__37xm2{font-size:var(--fontsize-heading-xxs);font-weight:700;letter-spacing:.4px;line-height:var(--lineheight-l)}.helpers_helper-text__awnLq{color:var(--color-black-60);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs)}');const i=n.forwardRef(((e,t)=>{var{checked:o=!1,className:l="",disabled:i=!1,helperText:c,id:s,label:d,onChange:h=(()=>null),style:_,value:b}=e,u=(0,a._)(e,["checked","className","disabled","helperText","id","label","onChange","style","value"]);return d&&"string"!=typeof d&&"number"!=typeof d&&console.warn("Using ReactElement as a label is against good usability and accessibility practices. Please prefer plain strings."),n.createElement("div",{className:(0,r.c)("RadioButton-module_radioButton__1xM1I radio-button_hds-radio-button__1kktv",l),style:_},n.createElement("input",Object.assign({ref:t,id:s,className:(0,r.c)("RadioButton-module_input__1cTWc radio-button_hds-radio-button__input__27sH6"),onChange:h,value:b,type:"radio",disabled:i,checked:o,"aria-describedby":c?s+"-helper":null},u)),n.createElement("label",{htmlFor:s,className:(0,r.c)("RadioButton-module_label__3Zij9 radio-button_hds-radio-button__label__1XnIa")},d),c&&n.createElement("div",{className:"RadioButton-module_helperText__321Ay helpers_helper-text__awnLq",id:s+"-helper"},c))}));i.displayName="RadioButton"},66016:function(e,t,o){"use strict";o.d(t,{S:function(){return h}});var a=o(80136),n=o(67294),l=o(7444),r=o(34300),i=o(91267),c=o(42215),s=o(45422),d={label:"SelectionGroup-module_label__qlluz",selectionGroup:"SelectionGroup-module_selectionGroup__6Jxu8",items:"SelectionGroup-module_items__28m_S",vertical:"SelectionGroup-module_vertical__3iorC",horizontal:"SelectionGroup-module_horizontal__2eiY9",tooltipButton:"SelectionGroup-module_tooltipButton__2ibjm",errorText:"SelectionGroup-module_errorText__3tOPD selection-group_hds-selection-group__error-text__1Ynb9",helperText:"SelectionGroup-module_helperText__2k_WY helpers_helper-text__3QI7A"};(0,l.s)(".selection-group_hds-selection-group__2bwsd{--spacing-col:1.25rem;--spacing-row:var(--spacing-s);--label-color-default:var(--color-black-90);--icon-size:var(--spacing-m);border:0;padding:0}.selection-group_hds-selection-group__2bwsd>:not(.selection-group_hds-selection-group__items__21yOL){float:left}.selection-group_hds-selection-group__legend__149U2{box-sizing:border-box;color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-row);max-width:100%;padding:0;white-space:normal}.selection-group_hds-selection-group__required__3XPYK{color:var(--label-color-default);display:inline-block;font-size:var(--fontsize-body-xl);line-height:1;margin-left:var(--spacing-2-xs);transform:translateY(var(--spacing-3-xs))}.selection-group_hds-selection-group__items__21yOL{clear:left;display:grid;grid-gap:var(--spacing-row) var(--spacing-col);gap:var(--spacing-row) var(--spacing-col);justify-content:start}.selection-group_hds-selection-group__items--vertical__1v39g{grid-auto-flow:row}.selection-group_hds-selection-group__items--horizontal__3-_1w{grid-auto-flow:column}.selection-group_hds-selection-group__error-text__1Ynb9{color:var(--color-error);display:block;font-size:var(--fontsize-body-m);margin-top:var(--spacing-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.selection-group_hds-selection-group__error-text__1Ynb9:before{background:var(--color-error);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.helpers_visually-hidden__8xzsB{border:0;clip:\"rect(0 0 0 0)\";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.helpers_button-reset__D5XBg{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.helpers_text-body__kuwbN{color:var(--color-black-90);font-family:var(--font-default);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.helpers_text-medium__3yuel{font-family:var(--font-default);font-weight:500}.helpers_text-bold__2m1Nh{font-family:var(--font-default);font-weight:700}.helpers_text-xl__3Q3g5{font-size:var(--fontsize-heading-m)}.helpers_text-lg__3N-Yu{font-size:var(--fontsize-heading-s)}.helpers_text-md__1iyYX{font-size:var(--fontsize-heading-xs)}.helpers_subtitle__28FvQ{font-size:var(--fontsize-body-m)}.helpers_text-sm__OuSWo{font-size:var(--fontsize-body-s);line-height:var(--lineheight-xl)}.helpers_heading-xxl__1KMqh{font-size:var(--fontsize-heading-xxl);font-weight:400;letter-spacing:-1.2px;line-height:var(--lineheight-s)}.helpers_heading-xl__G41Bl{font-size:var(--fontsize-heading-xl);font-weight:400;letter-spacing:-1px;line-height:var(--lineheight-s)}.helpers_heading-xl-mobile__uKZqQ{font-size:var(--fontsize-heading-xl-mobile);font-weight:400;letter-spacing:-.8px;line-height:var(--lineheight-s)}.helpers_heading-l__29CXO{font-size:var(--fontsize-heading-l);font-weight:400;letter-spacing:-.4px;line-height:var(--lineheight-s)}.helpers_heading-m__16IDL{font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-.2px;line-height:32px}.helpers_heading-s__17rm-{font-size:var(--fontsize-heading-s);font-weight:500;letter-spacing:.2px;line-height:1.4}.helpers_heading-xs__rPz00{font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:.4px;line-height:1.33}.helpers_heading-xxs__Onkxt{font-size:var(--fontsize-heading-xxs);font-weight:700;letter-spacing:.4px;line-height:var(--lineheight-l)}.helpers_helper-text__3QI7A{color:var(--color-black-60);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs)}.SelectionGroup-module_label__qlluz{color:var(--label-color-default,var(--color-black-90));display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.SelectionGroup-module_selectionGroup__6Jxu8{--spacing-col:1.25rem;--spacing-row:var(--spacing-s);--label-color-default:var(--color-black-90);--icon-size:var(--spacing-m);border:0;padding:0}.SelectionGroup-module_selectionGroup__6Jxu8>:not(.SelectionGroup-module_items__28m_S){float:left}.SelectionGroup-module_label__qlluz{margin-bottom:var(--spacing-row);padding:0}.SelectionGroup-module_items__28m_S{clear:left;display:grid;gap:var(--spacing-row) var(--spacing-col);justify-content:start}.SelectionGroup-module_items__28m_S.SelectionGroup-module_vertical__3iorC{grid-auto-flow:row}.SelectionGroup-module_items__28m_S.SelectionGroup-module_horizontal__2eiY9{grid-auto-flow:column}.SelectionGroup-module_tooltipButton__2ibjm{margin-left:var(--spacing-2-xs)}");const h=e=>{var{label:t,direction:o="vertical",errorText:l,helperText:h,required:_,tooltipLabel:b,tooltipButtonLabel:u,tooltipText:p,children:g,className:v}=e,m=(0,a._)(e,["label","direction","errorText","helperText","required","tooltipLabel","tooltipButtonLabel","tooltipText","children","className"]);const k=(0,c.a)(g);return(0,n.useEffect)((()=>{let e=!1,t=!1;k.forEach((o=>{const a=o,{displayName:n}=a.type;"RadioButton"===n&&(e=!0,!0===a.props.checked&&(t=!0))})),e&&!t&&console.warn("All radio buttons in a SelectionGroup are unchecked. One radio button should be checked by default.")}),[g]),n.createElement("fieldset",Object.assign({className:(0,r.c)(d.selectionGroup,v)},m),n.createElement("legend",{className:d.label},t," ",_&&n.createElement(i.R,null)),p&&n.createElement(s.T,{buttonClassName:d.tooltipButton,tooltipLabel:b,buttonLabel:u},p),n.createElement("div",{className:(0,r.c)(d.items,d[o])},k.map((e=>(0,n.isValidElement)(e)&&n.createElement("div",{key:e.props.id,className:d.item},e)))),l&&n.createElement("div",{className:d.errorText},l),h&&n.createElement("div",{className:d.helperText},h))}},83428:function(e,t,o){"use strict";o.d(t,{S:function(){return s}});var a=o(80136),n=o(67294),l=o(7444),r=o(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,l.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const c=e=>{let{icon:t}=e;return n.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},t)},s=e=>{var{children:t,className:o,dataTestId:l,type:s="neutral",iconLeft:d}=e,h=(0,a._)(e,["children","className","dataTestId","type","iconLeft"]);return n.createElement("span",Object.assign({className:(0,r.c)(i.statusLabel,i[s],d&&i.statusLabelWithIcon,o),"data-testid":l},h),d&&n.createElement(c,{icon:d}),t)}},37776:function(e,t,o){"use strict";o.d(t,{c:function(){return a}});var a=(e,t,o,a,n)=>[t&&e+"-helper",o&&e+"-error",a&&e+"-success",n&&e+"-info"].filter((e=>e)).join(" ")},94330:function(e,t,o){"use strict";o.d(t,{m:function(){return l}});var a=o(91309),n=o.n(a),l=(e,t)=>{n()(e)?e(t.current):e.current=t.current}},80853:function(e,t,o){"use strict";o.r(t);var a=o(11151),n=o(67294),l=o(66016),r=o(2592),i=o(29520),c=o(1072);const s=e=>{let{children:t,pageContext:o}=e;return n.createElement(c.default,{pageContext:o},t)};function d(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",h4:"h4",pre:"pre",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",strong:"strong",p:"p"},(0,a.ah)(),e.components),{Playground:o,IconCheckCircleFill:c,Link:s,ExternalLink:d}=t;return d||h("ExternalLink",!0),c||h("IconCheckCircleFill",!0),s||h("Link",!0),o||h("Playground",!0),n.createElement(n.Fragment,null,n.createElement(t.h2,{id:"code",style:{position:"relative"}},"Code",n.createElement(t.a,{href:"#code","aria-label":"code permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.h3,{id:"code-examples",style:{position:"relative"}},"Code examples",n.createElement(t.a,{href:"#code-examples","aria-label":"code examples permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.h4,{id:"vertical-group-checkbox",style:{position:"relative"}},"Vertical group (Checkbox)",n.createElement(t.a,{href:"#vertical-group-checkbox","aria-label":"vertical group checkbox permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(o,{scope:{SelectionGroup:l.S,Checkbox:r.C,useState:n.useState}},n.createElement(t.pre,null,n.createElement(t.code,{className:"language-jsx"},'import { SelectionGroup, Checkbox } from \'hds-react\';\n\n() => {\n  const [checkedItems, setCheckedItems] = useState({ "v-checkbox1": true, "v-checkbox2": true });\n  const onChange = (event) => {\n    setCheckedItems({ ...checkedItems, [event.target.name]: event.target.checked });\n  };\n  return (\n    <SelectionGroup label="Vertical checkbox group" helperText="Assistive text">\n      <Checkbox id="v-checkbox1" name="v-checkbox1" label="Option" checked={checkedItems["v-checkbox1"]} onChange={onChange} />\n      <Checkbox id="v-checkbox2" name="v-checkbox2" label="Option" checked={checkedItems["v-checkbox2"]} onChange={onChange} />\n      <Checkbox id="v-checkbox3" name="v-checkbox3" label="Option" checked={checkedItems["v-checkbox3"]} onChange={onChange} />\n      <Checkbox id="v-checkbox4" name="v-checkbox4" label="Option" checked={checkedItems["v-checkbox4"]} onChange={onChange} />\n    </SelectionGroup>\n  );\n}\n')),n.createElement(t.pre,null,n.createElement(t.code,{className:"language-html"},'<fieldset class="hds-selection-group">\n  <legend class="hds-selection-group__legend">Vertical checkbox group</legend>\n  <div class="hds-selection-group__items">\n    <div class="hds-selection-group__item">\n      <div class="hds-checkbox">\n        <input type="checkbox" id="v-checkbox1" name="v-checkbox1" class="hds-checkbox__input" value="foo" checked />\n        <label for="v-checkbox1" class="hds-checkbox__label">Option</label>\n      </div>\n    </div>\n    <div class="hds-selection-group__item">\n      <div class="hds-checkbox">\n        <input type="checkbox" id="v-checkbox2" name="v-checkbox2" class="hds-checkbox__input" value="bar" checked/>\n        <label for="v-checkbox2" class="hds-checkbox__label">Option</label>\n      </div>\n    </div>\n    <div class="hds-selection-group__item">\n      <div class="hds-checkbox">\n        <input type="checkbox" id="v-checkbox3" name="v-checkbox3" class="hds-checkbox__input" value="baz" />\n        <label for="v-checkbox3" class="hds-checkbox__label">Option</label>\n      </div>\n    </div>\n    <div class="hds-selection-group__item">\n      <div class="hds-checkbox">\n        <input type="checkbox" id="v-checkbox4" name="v-checkbox4" class="hds-checkbox__input" value="qux" />\n        <label for="v-checkbox4" class="hds-checkbox__label">Option</label>\n      </div>\n    </div>\n  </div>\n  <div class="helper-text">Assistive text</div>\n</fieldset>\n'))),"\n",n.createElement(t.h4,{id:"vertical-group-radiobutton",style:{position:"relative"}},"Vertical group (RadioButton)",n.createElement(t.a,{href:"#vertical-group-radiobutton","aria-label":"vertical group radiobutton permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(o,{scope:{SelectionGroup:l.S,RadioButton:i.R,useState:n.useState}},n.createElement(t.pre,null,n.createElement(t.code,{className:"language-jsx"},'import { SelectionGroup, RadioButton } from \'hds-react\';\n\n() => {\n  const [selectedItem, setSelectedItem] = useState("1");\n  const onChange = (event) => {\n    setSelectedItem(event.target.value);\n  };\n  return (\n    <SelectionGroup label="Vertical radio group">\n      <RadioButton id="v-radio1" name="v-radio" value="1" label="Option" checked={selectedItem === "1"} onChange={onChange} />\n      <RadioButton id="v-radio2" name="v-radio" value="2" label="Option" checked={selectedItem === "2"} onChange={onChange} />\n      <RadioButton id="v-radio3" name="v-radio" value="3" label="Option" checked={selectedItem === "3"} onChange={onChange} />\n      <RadioButton id="v-radio4" name="v-radio" value="4" label="Option" checked={selectedItem === "4"} onChange={onChange} />\n    </SelectionGroup>\n  );\n}\n')),n.createElement(t.pre,null,n.createElement(t.code,{className:"language-html"},'<fieldset class="hds-selection-group">\n  <legend class="hds-selection-group__legend">Vertical radio group</legend>\n  <div class="hds-selection-group__items">\n    <div class="hds-selection-group__item">\n      <div class="hds-radio-button">\n        <input type="radio" id="v-radio1" name="v-radio" class="hds-radio-button__input" value="foo" checked />\n        <label for="v-radio1" class="hds-radio-button__label">Option</label>\n      </div>\n    </div>\n    <div class="hds-selection-group__item">\n      <div class="hds-radio-button">\n        <input type="radio" id="v-radio2" name="v-radio" class="hds-radio-button__input" value="bar" />\n        <label for="v-radio2" class="hds-radio-button__label">Option</label>\n      </div>\n    </div>\n    <div class="hds-selection-group__item">\n      <div class="hds-radio-button">\n        <input type="radio" id="v-radio3" name="v-radio" class="hds-radio-button__input" value="baz" />\n        <label for="v-radio3" class="hds-radio-button__label">Option</label>\n      </div>\n    </div>\n    <div class="hds-selection-group__item">\n      <div class="hds-radio-button">\n        <input type="radio" id="v-radio4" name="v-radio" class="hds-radio-button__input" value="qux" />\n        <label for="v-radio4" class="hds-radio-button__label">Option</label>\n      </div>\n    </div>\n  </div>\n</fieldset>\n'))),"\n",n.createElement(t.h4,{id:"horizontal-group-checkbox",style:{position:"relative"}},"Horizontal group (Checkbox)",n.createElement(t.a,{href:"#horizontal-group-checkbox","aria-label":"horizontal group checkbox permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(o,{scope:{SelectionGroup:l.S,Checkbox:r.C,useState:n.useState}},n.createElement(t.pre,null,n.createElement(t.code,{className:"language-jsx"},'import { SelectionGroup, Checkbox } from \'hds-react\';\n\n() => {\n  const [checkedItems, setCheckedItems] = useState({ "h-checkbox1": true, "h-checkbox2": true });\n  const onChange = (event) => {\n    setCheckedItems({ ...checkedItems, [event.target.name]: event.target.checked });\n  };\n  return (\n    <SelectionGroup label="Horizontal checkbox group" direction="horizontal" helperText="Assistive text">\n      <Checkbox id="h-checkbox1" name="h-checkbox1" label="Option" checked={checkedItems["h-checkbox1"]} onChange={onChange} />\n      <Checkbox id="h-checkbox2" name="h-checkbox2" label="Option" checked={checkedItems["h-checkbox2"]} onChange={onChange} />\n      <Checkbox id="h-checkbox3" name="h-checkbox3" label="Option" checked={checkedItems["h-checkbox3"]} onChange={onChange} />\n    </SelectionGroup>\n  );\n}\n')),n.createElement(t.pre,null,n.createElement(t.code,{className:"language-html"},'<fieldset class="hds-selection-group">\n  <legend class="hds-selection-group__legend">Horizontal checkbox group</legend>\n  <div class="hds-selection-group__items hds-selection-group__items--horizontal">\n    <div class="hds-selection-group__item">\n      <div class="hds-checkbox">\n        <input type="checkbox" id="h-checkbox1" name="h-checkbox1" class="hds-checkbox__input" value="foo" checked />\n        <label for="h-checkbox1" class="hds-checkbox__label">Option</label>\n      </div>\n    </div>\n    <div class="hds-selection-group__item">\n      <div class="hds-checkbox">\n        <input type="checkbox" id="h-checkbox2" name="h-checkbox2" class="hds-checkbox__input" value="bar" checked/>\n        <label for="h-checkbox2" class="hds-checkbox__label">Option</label>\n      </div>\n    </div>\n    <div class="hds-selection-group__item">\n      <div class="hds-checkbox">\n        <input type="checkbox" id="h-checkbox3" name="h-checkbox3" class="hds-checkbox__input" value="baz" />\n        <label for="h-checkbox3" class="hds-checkbox__label">Option</label>\n      </div>\n    </div>\n  </div>\n  <div class="helper-text">Assistive text</div>\n</fieldset>\n'))),"\n",n.createElement(t.h4,{id:"horizontal-group-radiobutton",style:{position:"relative"}},"Horizontal group (RadioButton)",n.createElement(t.a,{href:"#horizontal-group-radiobutton","aria-label":"horizontal group radiobutton permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(o,{scope:{SelectionGroup:l.S,RadioButton:i.R,useState:n.useState}},n.createElement(t.pre,null,n.createElement(t.code,{className:"language-jsx"},'import { SelectionGroup, RadioButton } from \'hds-react\';\n\n() => {\n  const [selectedItem, setSelectedItem] = useState("1");\n  const onChange = (event) => {\n    setSelectedItem(event.target.value);\n  };\n  return (\n    <SelectionGroup label="Horizontal radio group" direction="horizontal">\n      <RadioButton id="h-radio1" name="h-radio" value="1" label="Option" checked={selectedItem === "1"} onChange={onChange} />\n      <RadioButton id="h-radio2" name="h-radio" value="2" label="Option" checked={selectedItem === "2"} onChange={onChange} />\n      <RadioButton id="h-radio3" name="h-radio" value="3" label="Option" checked={selectedItem === "3"} onChange={onChange} />\n    </SelectionGroup>\n  );\n}\n')),n.createElement(t.pre,null,n.createElement(t.code,{className:"language-html"},'<fieldset class="hds-selection-group">\n  <legend class="hds-selection-group__legend">Horizontal radio group</legend>\n  <div class="hds-selection-group__items hds-selection-group__items--horizontal">\n    <div class="hds-selection-group__item">\n      <div class="hds-radio-button">\n        <input type="radio" id="h-radio1" name="h-radio" class="hds-radio-button__input" value="foo" checked />\n        <label for="h-radio1" class="hds-radio-button__label">Option</label>\n      </div>\n    </div>\n    <div class="hds-selection-group__item">\n      <div class="hds-radio-button">\n        <input type="radio" id="h-radio2" name="h-radio" class="hds-radio-button__input" value="bar" />\n        <label for="h-radio2" class="hds-radio-button__label">Option</label>\n      </div>\n    </div>\n    <div class="hds-selection-group__item">\n      <div class="hds-radio-button">\n        <input type="radio" id="h-radio3" name="h-radio" class="hds-radio-button__input" value="baz" />\n        <label for="h-radio3" class="hds-radio-button__label">Option</label>\n      </div>\n    </div>\n  </div>\n</fieldset>\n'))),"\n",n.createElement(t.h3,{id:"packages",style:{position:"relative"}},"Packages",n.createElement(t.a,{href:"#packages","aria-label":"packages permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.table,null,n.createElement(t.thead,null,n.createElement(t.tr,null,n.createElement(t.th,null,"Package"),n.createElement(t.th,null,"Included"),n.createElement(t.th,null,"Storybook link"),n.createElement(t.th,null,"Source link"))),n.createElement(t.tbody,null,n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.strong,null,"HDS React")),n.createElement(t.td,null,n.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},n.createElement(c)," Yes ")),n.createElement(t.td,null,n.createElement(s,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-selectiongroup--default"},"View in Storybook")),n.createElement(t.td,null,n.createElement(d,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/react/src/components/selectionGroup"},"View source"))),n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.strong,null,"HDS Core")),n.createElement(t.td,null,n.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},n.createElement(c)," Yes ")),n.createElement(t.td,null,n.createElement(s,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/core/?path=/story/components-selection-group--default"},"View in Storybook")),n.createElement(t.td,null,n.createElement(d,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/core/src/components/selection-group"},"View source"))))),"\n",n.createElement(t.h3,{id:"properties",style:{position:"relative"}},"Properties",n.createElement(t.a,{href:"#properties","aria-label":"properties permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.p,null,"Note! You can find the full list of properties in the ",n.createElement(s,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/docs/components-selectiongroup--default"},"React Storybook.")),"\n",n.createElement(t.table,null,n.createElement(t.thead,null,n.createElement(t.tr,null,n.createElement(t.th,null,"Property"),n.createElement(t.th,null,"Description"),n.createElement(t.th,null,"Values"),n.createElement(t.th,null,"Default value"))),n.createElement(t.tbody,null,n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"label")),n.createElement(t.td,null,"The label for the selection group."),n.createElement(t.td,null,n.createElement(t.code,null,"string")),n.createElement(t.td,null,"-")),n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"direction")),n.createElement(t.td,null,"The direction in which child components should be rendered in."),n.createElement(t.td,null,n.createElement(t.code,null,'"vertical"')," ",n.createElement(t.code,null,'"horizontal"')),n.createElement(t.td,null,n.createElement(t.code,null,'"vertical"'))),n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"helperText")),n.createElement(t.td,null,"The help text content that will be shown below the selection group content."),n.createElement(t.td,null,n.createElement(t.code,null,"string")),n.createElement(t.td,null,"-")),n.createElement(t.tr,null,n.createElement(t.td,null,"[Table 1:SelectionGroup properties]"),n.createElement(t.td),n.createElement(t.td),n.createElement(t.td)))))}function h(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){return void 0===e&&(e={}),n.createElement(s,e,n.createElement(d,e))}},1072:function(e,t,o){"use strict";o.r(t);var a=o(11151),n=o(67294),l=o(83428),r=o(57674),i=o(89482),c=(o(18607),o(26127));function s(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,a.ah)(),e.components);return c.Z||d("PageTabs",!1),c.Z.Tab||d("PageTabs.Tab",!0),c.Z.TabList||d("PageTabs.TabList",!0),c.Z.TabPanel||d("PageTabs.TabPanel",!0),n.createElement(n.Fragment,null,n.createElement(t.h1,{id:"selectiongroup",style:{position:"relative"}},"SelectionGroup",n.createElement(t.a,{href:"#selectiongroup","aria-label":"selectiongroup permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement("div",{class:"status-label-description"},n.createElement(l.S,{type:"info"},"Stable"),n.createElement(l.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),n.createElement(r.Z)),"\n",n.createElement(i.Z,null,"Selection group allows grouping related form selection elements (such as Checkboxes) to each other."),"\n",n.createElement(c.Z,{pageContext:e.pageContext},n.createElement(c.Z.TabList,null,n.createElement(c.Z.Tab,{href:"/"},"Usage"),n.createElement(c.Z.Tab,{href:"/code"},"Code"),n.createElement(c.Z.Tab,{href:"/accessibility"},"Accessibility")),n.createElement(c.Z.TabPanel,null,e.children)))}function d(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,a.ah)(),e.components);return t?n.createElement(t,e,n.createElement(s,e)):s(e)}},89482:function(e,t,o){"use strict";var a=o(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:o="var(--fontsize-body-xl)",style:n={},children:l}=e;return a.createElement("p",{style:{fontSize:o,color:t,maxWidth:600,...n}},l)}},26127:function(e,t,o){"use strict";var a=o(67294),n=o(14160),l=o(94671);const r="PageTabList",i="PageTabPanel",c="PageTab",s=e=>{var t;let{pageContext:o,children:s}=e;const d=o.frontmatter.slug,h=Array.isArray(s)?s:[s],_=h.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===r)),b=h.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===i)),u=null===(t=_.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===c)),p=u.findIndex((e=>d.endsWith(e.props.href))),g=-1===p?0:p,v=0===g?d:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(d);return a.createElement(l.a,{initiallyActiveTab:g},a.createElement(l.a.TabList,{className:"page-tabs-list"},u.map((e=>a.createElement(l.a.Tab,{key:e.props.href,onClick:()=>(0,n.navigate)(""+("/"===e.props.href?v:v+e.props.href))},e.props.children)))),u.map(((e,t)=>a.createElement(l.a.TabPanel,{key:e.props.href},g===t?b.props.children:a.createElement("div",null)))))},d=e=>{let{children:t}=e;return a.createElement(l.a.TabList,null,t)};d.componentName=r;const h=e=>{let{href:t,slug:o,children:n}=e;return a.createElement(l.a.Tab,null,n)};h.componentName=c;const _=e=>{let{children:t}=e;return a.createElement(l.a.TabPanel,null,t)};_.componentName=i,s.TabList=d,s.Tab=h,s.TabPanel=_,t.Z=s},57674:function(e,t,o){"use strict";var a=o(67294),n=o(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return a.createElement(n.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},a.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>a.createElement("li",{key:t},a.createElement("span",{className:"status-name"},t),a.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-selection-group-index-mdx-f61a79e5815595bb210f.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-selection-group-index-mdx-f61a79e5815595bb210f.js
new file mode 100644
index 00000000000..574d4b09456
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-selection-group-index-mdx-f61a79e5815595bb210f.js
@@ -0,0 +1 @@
+(self.webpackChunksite=self.webpackChunksite||[]).push([[7618,1352],{91309:function(e,o,t){var a="[object Null]",r="[object Undefined]",n="object"==typeof t.g&&t.g&&t.g.Object===Object&&t.g,l="object"==typeof self&&self&&self.Object===Object&&self,i=n||l||Function("return this")(),c=Object.prototype,s=c.hasOwnProperty,d=c.toString,h=i.Symbol,_=h?h.toStringTag:void 0;function b(e){return null==e?void 0===e?r:a:_&&_ in Object(e)?function(e){var o=s.call(e,_),t=e[_];try{e[_]=void 0;var a=!0}catch(n){}var r=d.call(e);a&&(o?e[_]=t:delete e[_]);return r}(e):function(e){return d.call(e)}(e)}e.exports=function(e){if(!function(e){var o=typeof e;return null!=e&&("object"==o||"function"==o)}(e))return!1;var o=b(e);return"[object Function]"==o||"[object GeneratorFunction]"==o||"[object AsyncFunction]"==o||"[object Proxy]"==o}},2592:function(e,o,t){"use strict";t.d(o,{C:function(){return d}});var a=t(80136),r=t(67294),n=t(7444),l=t(34300),i=t(94330),c=t(37776),s=t(45422);(0,n.s)(".checkbox_hds-checkbox__9HMCz{--size:24px;--icon-scale:1;--border-width:2px;--outline-width:3px;--label-font-size:var(--fontsize-body-m);--label-padding:var(--spacing-2-xs);--background-unselected:transparent;--background-selected:var(--color-bus);--background-hover:var(--color-bus-dark);--background-disabled:var(--color-black-10);--border-color-selected:var(--color-bus);--border-color-selected-hover:var(--color-bus-dark);--border-color-selected-focus:var(--color-bus);--border-color-unselected:var(--color-black-50);--border-color-unselected-hover:var(--color-black-90);--border-color-unselected-focus:var(--color-black-90);--border-color-disabled:var(--color-black-10);--icon-color-unselected:transparent;--icon-color-selected:var(--color-white);--icon-color-disabled:var(--color-white);--label-color:var(--color-black-90);--label-color-disabled:var(--color-black-40);--icon-size:var(--spacing-m);display:flex;flex-wrap:wrap;min-height:var(--size);position:relative}.checkbox_hds-checkbox__9HMCz,.checkbox_hds-checkbox__9HMCz *,.checkbox_hds-checkbox__9HMCz :after,.checkbox_hds-checkbox__9HMCz :before{box-sizing:border-box}.checkbox_hds-checkbox__9HMCz:not(:first-of-type){margin-top:var(--spacing-2-xs)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:before,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__label__3HoD3:before{content:\"\";left:0;position:absolute;top:0}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:before{background-color:var(--icon-color-unselected);height:var(--size);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M21 7L10 18l-5.5-5.5L6 11l4 4 9.5-9.5z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M21 7L10 18l-5.5-5.5L6 11l4 4 9.5-9.5z'/%3E%3C/g%3E%3C/svg%3E\");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:calc(var(--size) * var(--icon-scale));mask-size:calc(var(--size) * var(--icon-scale));transform:scale(.6);width:var(--size);z-index:1}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__label__3HoD3:before{height:var(--size);width:var(--size)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__label__3HoD3:after{background-color:var(--background-unselected);border:var(--border-width) solid var(--border-color-unselected);height:var(--size);width:var(--size)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:focus+.checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:focus:before,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:hover+.checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:hover:before{transition:85ms ease-out;transition-property:background-color,border-color,transform}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:focus+.checkbox_hds-checkbox__label__3HoD3:before{box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);transform:translateZ(0);transition:85ms ease-out;transition-property:box-shadow,transform}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;font-family:inherit;font-size:100%;height:var(--size);left:0;line-height:1.15;margin:0;outline:none;position:absolute;top:0;width:var(--size)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__label__3HoD3{color:var(--label-color);cursor:pointer;font-size:var(--label-font-size);line-height:var(--lineheight-m);padding-left:calc(var(--size) + var(--label-padding));padding-top:calc((var(--size) - (var(--label-font-size) * var(--lineheight-m))) / 2);position:relative}.checkbox_hds-checkbox__error-text__2aFst{color:var(--color-error);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.checkbox_hds-checkbox__error-text__2aFst:before{background:var(--color-error);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:checked:before{background-color:var(--icon-color-selected);transform:scale(1)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:checked):indeterminate:before{background-color:var(--icon-color-selected);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M6 11h12v2H6z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M6 11h12v2H6z'/%3E%3C/g%3E%3C/svg%3E\");transform:scale(1)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:checked+.checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:indeterminate+.checkbox_hds-checkbox__label__3HoD3:after{background-color:var(--background-selected);border-color:var(--border-color-selected)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:disabled+.checkbox_hds-checkbox__label__3HoD3:after{background-color:var(--background-disabled);border-color:var(--border-color-disabled)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):focus+.checkbox_hds-checkbox__label__3HoD3:after{border-color:var(--border-color-unselected-focus)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):hover+.checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):hover:focus+.checkbox_hds-checkbox__label__3HoD3:after{border-color:var(--border-color-unselected-hover)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):checked:focus+.checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):indeterminate:focus+.checkbox_hds-checkbox__label__3HoD3:after{border-color:var(--border-color-selected-focus)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):checked:hover+.checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):checked:hover:focus+.checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):indeterminate:hover+.checkbox_hds-checkbox__label__3HoD3:after,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:not(:disabled):indeterminate:hover:focus+.checkbox_hds-checkbox__label__3HoD3:after{background-color:var(--background-hover);border-color:var(--border-color-selected-hover)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:disabled+.checkbox_hds-checkbox__label__3HoD3{color:var(--label-color-disabled)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:checked:disabled:before{background-color:var(--icon-color-disabled)}.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:disabled,.checkbox_hds-checkbox__9HMCz .checkbox_hds-checkbox__input__1w0pu:disabled+.checkbox_hds-checkbox__label__3HoD3{cursor:not-allowed}.helpers_visually-hidden__3lBcX{border:0;clip:\"rect(0 0 0 0)\";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.helpers_button-reset__2d38b{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.helpers_text-body__FA9G-{color:var(--color-black-90);font-family:var(--font-default);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.helpers_text-medium__3Hiiz{font-family:var(--font-default);font-weight:500}.helpers_text-bold__2QyP8{font-family:var(--font-default);font-weight:700}.helpers_text-xl__33T1r{font-size:var(--fontsize-heading-m)}.helpers_text-lg__1_8nq{font-size:var(--fontsize-heading-s)}.helpers_text-md__RyeCd{font-size:var(--fontsize-heading-xs)}.helpers_subtitle__RE8f_{font-size:var(--fontsize-body-m)}.helpers_text-sm__AxqmS{font-size:var(--fontsize-body-s);line-height:var(--lineheight-xl)}.helpers_heading-xxl__1GAqs{font-size:var(--fontsize-heading-xxl);font-weight:400;letter-spacing:-1.2px;line-height:var(--lineheight-s)}.helpers_heading-xl__u_X50{font-size:var(--fontsize-heading-xl);font-weight:400;letter-spacing:-1px;line-height:var(--lineheight-s)}.helpers_heading-xl-mobile__gKona{font-size:var(--fontsize-heading-xl-mobile);font-weight:400;letter-spacing:-.8px;line-height:var(--lineheight-s)}.helpers_heading-l__3EMpz{font-size:var(--fontsize-heading-l);font-weight:400;letter-spacing:-.4px;line-height:var(--lineheight-s)}.helpers_heading-m__1Lsy-{font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-.2px;line-height:32px}.helpers_heading-s__1EK5w{font-size:var(--fontsize-heading-s);font-weight:500;letter-spacing:.2px;line-height:1.4}.helpers_heading-xs__iZYJi{font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:.4px;line-height:1.33}.helpers_heading-xxs__jqtFk{font-size:var(--fontsize-heading-xxs);font-weight:700;letter-spacing:.4px;line-height:var(--lineheight-l)}.helpers_helper-text__YRZTD{color:var(--color-black-60);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs)}.Checkbox-module_tooltipButton__2shV1{display:inline-block;margin-left:var(--spacing-2-xs)}");const d=r.forwardRef(((e,o)=>{var{checked:t=!1,className:n,disabled:d=!1,errorText:h,helperText:_,id:b,indeterminate:u,label:p,onChange:g=(()=>null),style:v,value:m,tooltipText:f,tooltipLabel:x,tooltipButtonLabel:k}=e,z=(0,a._)(e,["checked","className","disabled","errorText","helperText","id","indeterminate","label","onChange","style","value","tooltipText","tooltipLabel","tooltipButtonLabel"]);const w=(0,r.useRef)(null);(0,r.useEffect)((()=>{o&&(0,i.m)(o,w),w.current.indeterminate=u}),[w,o,u]),p&&"string"!=typeof p&&"number"!=typeof p&&console.warn("Using ReactElement as a label is against good usability and accessibility practices. Please prefer plain strings.");const E=(0,c.c)(b,_,h,void 0,void 0);return r.createElement("div",{className:(0,l.c)("Checkbox-module_checkbox__3L0GR checkbox_hds-checkbox__9HMCz",n),style:v},r.createElement("input",Object.assign({ref:w,id:b,className:(0,l.c)("Checkbox-module_input__3VZvy checkbox_hds-checkbox__input__1w0pu"),onChange:g,value:m,type:"checkbox",disabled:d,checked:t,"aria-describedby":E.length>0?E:null},z)),r.createElement("label",{htmlFor:b,className:(0,l.c)("Checkbox-module_label__L5AN1 checkbox_hds-checkbox__label__3HoD3")},p),f&&r.createElement(s.T,{className:"Checkbox-module_tooltipButton__2shV1",buttonLabel:k,tooltipLabel:x},f),h&&r.createElement("div",{className:"Checkbox-module_errorText__5EREQ checkbox_hds-checkbox__error-text__2aFst",id:b+"-error"},h),_&&r.createElement("div",{className:"Checkbox-module_helperText__1vKwY helpers_helper-text__YRZTD",id:b+"-helper"},_))}))},29520:function(e,o,t){"use strict";t.d(o,{R:function(){return i}});var a=t(80136),r=t(67294),n=t(7444),l=t(34300);(0,n.s)('.radio-button_hds-radio-button__1kktv{--size:24px;--icon-scale:0.5;--border-width:2px;--outline-width:3px;--label-font-size:var(--fontsize-body-m);--label-padding:var(--spacing-2-xs);--background:var(--color-white);--background-hover:var(--color-white);--background-focus:var(--color-white);--background-unselected-disabled:var(--color-black-10);--background-selected-disabled:var(--color-white);--border-color-focus:var(--color-black-90);--border-color-selected:var(--color-bus);--border-color-selected-hover:var(--color-bus-dark);--border-color-selected-disabled:var(--color-black-20);--border-color-unselected:var(--color-black-50);--border-color-unselected-hover:var(--color-black-90);--border-color-unselected-disabled:var(--color-black-10);--icon-color-selected:var(--color-bus);--icon-color-unselected:transparent;--icon-color-hover:var(--color-bus-dark);--icon-color-disabled:var(--color-black-10);--label-color:var(--color-black-90);--label-color-disabled:var(--color-black-40);display:flex;flex-wrap:wrap;min-height:var(--size);position:relative}.radio-button_hds-radio-button__1kktv,.radio-button_hds-radio-button__1kktv *,.radio-button_hds-radio-button__1kktv :after,.radio-button_hds-radio-button__1kktv :before{box-sizing:border-box}.radio-button_hds-radio-button__1kktv:not(:first-of-type){margin-top:var(--spacing-2-xs)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__label__1XnIa:after,.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__label__1XnIa:before{border-radius:50%;content:"";left:0;position:absolute;top:0}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__label__1XnIa:after{background-clip:content-box;background-color:var(--icon-color-unselected);border:var(--border-width) solid var(--border-color-unselected);height:var(--size);padding:calc((var(--size) / 2 - var(--border-width) * 2) * (1 - var(--icon-scale)));width:var(--size)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:checked+.radio-button_hds-radio-button__label__1XnIa:after{background-color:var(--icon-color-selected);border-color:var(--border-color-selected)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:focus+.radio-button_hds-radio-button__label__1XnIa:after,.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:hover+.radio-button_hds-radio-button__label__1XnIa:after{transition:85ms ease-out;transition-property:background-color,border-color}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:disabled+.radio-button_hds-radio-button__label__1XnIa:after{border-color:var(--border-color-unselected-disabled)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:checked:disabled+.radio-button_hds-radio-button__label__1XnIa:after{background-color:var(--icon-color-disabled);border-color:var(--border-color-selected-disabled)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:not(:disabled):focus+.radio-button_hds-radio-button__label__1XnIa:after{border-color:var(--border-color-focus)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:not(:disabled):hover+.radio-button_hds-radio-button__label__1XnIa:after,.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:not(:disabled):hover:focus+.radio-button_hds-radio-button__label__1XnIa:after{border-color:var(--border-color-unselected-hover)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__label__1XnIa:before{background-color:var(--background);height:var(--size);width:var(--size)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:focus+.radio-button_hds-radio-button__label__1XnIa:before,.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:hover+.radio-button_hds-radio-button__label__1XnIa:before{transition:85ms ease-out;transition-property:background-color,box-shadow,transform}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6{font-family:inherit;font-size:100%;height:var(--size);left:0;line-height:1.15;margin:0;opacity:0;position:absolute;top:0;width:var(--size)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__label__1XnIa{color:var(--label-color);cursor:pointer;font-size:var(--label-font-size);line-height:var(--lineheight-m);padding-left:calc(var(--size) + var(--label-padding));padding-top:calc((var(--size) - (var(--label-font-size) * var(--lineheight-m))) / 2);position:relative}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:hover+.radio-button_hds-radio-button__label__1XnIa:before{background-color:var(--background-hover)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:focus+.radio-button_hds-radio-button__label__1XnIa:before{box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);transform:translateZ(0)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:not(:disabled):checked:hover+.radio-button_hds-radio-button__label__1XnIa:after,.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:not(:disabled):checked:hover:focus+.radio-button_hds-radio-button__label__1XnIa:after{background-color:var(--icon-color-hover);border-color:var(--border-color-selected-hover)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:disabled+.radio-button_hds-radio-button__label__1XnIa{color:var(--label-color-disabled)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:disabled+.radio-button_hds-radio-button__label__1XnIa:before{background-color:var(--background-unselected-disabled)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:checked:disabled+.radio-button_hds-radio-button__label__1XnIa:before{background-color:var(--background-selected-disabled)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:disabled,.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:disabled+.radio-button_hds-radio-button__label__1XnIa{cursor:not-allowed}.helpers_visually-hidden__2SQYx{border:0;clip:"rect(0 0 0 0)";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.helpers_button-reset__2Gr5D{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.helpers_text-body__1-RNd{color:var(--color-black-90);font-family:var(--font-default);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.helpers_text-medium__WvSD9{font-family:var(--font-default);font-weight:500}.helpers_text-bold__RHjJI{font-family:var(--font-default);font-weight:700}.helpers_text-xl__2rpQg{font-size:var(--fontsize-heading-m)}.helpers_text-lg__2dciy{font-size:var(--fontsize-heading-s)}.helpers_text-md__-y1dr{font-size:var(--fontsize-heading-xs)}.helpers_subtitle__3x21G{font-size:var(--fontsize-body-m)}.helpers_text-sm__238bH{font-size:var(--fontsize-body-s);line-height:var(--lineheight-xl)}.helpers_heading-xxl__1KEkh{font-size:var(--fontsize-heading-xxl);font-weight:400;letter-spacing:-1.2px;line-height:var(--lineheight-s)}.helpers_heading-xl__GYTuO{font-size:var(--fontsize-heading-xl);font-weight:400;letter-spacing:-1px;line-height:var(--lineheight-s)}.helpers_heading-xl-mobile__1Dfib{font-size:var(--fontsize-heading-xl-mobile);font-weight:400;letter-spacing:-.8px;line-height:var(--lineheight-s)}.helpers_heading-l__1BzbR{font-size:var(--fontsize-heading-l);font-weight:400;letter-spacing:-.4px;line-height:var(--lineheight-s)}.helpers_heading-m__2APFi{font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-.2px;line-height:32px}.helpers_heading-s__2adCF{font-size:var(--fontsize-heading-s);font-weight:500;letter-spacing:.2px;line-height:1.4}.helpers_heading-xs__uSPiv{font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:.4px;line-height:1.33}.helpers_heading-xxs__37xm2{font-size:var(--fontsize-heading-xxs);font-weight:700;letter-spacing:.4px;line-height:var(--lineheight-l)}.helpers_helper-text__awnLq{color:var(--color-black-60);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs)}');const i=r.forwardRef(((e,o)=>{var{checked:t=!1,className:n="",disabled:i=!1,helperText:c,id:s,label:d,onChange:h=(()=>null),style:_,value:b}=e,u=(0,a._)(e,["checked","className","disabled","helperText","id","label","onChange","style","value"]);return d&&"string"!=typeof d&&"number"!=typeof d&&console.warn("Using ReactElement as a label is against good usability and accessibility practices. Please prefer plain strings."),r.createElement("div",{className:(0,l.c)("RadioButton-module_radioButton__1xM1I radio-button_hds-radio-button__1kktv",n),style:_},r.createElement("input",Object.assign({ref:o,id:s,className:(0,l.c)("RadioButton-module_input__1cTWc radio-button_hds-radio-button__input__27sH6"),onChange:h,value:b,type:"radio",disabled:i,checked:t,"aria-describedby":c?s+"-helper":null},u)),r.createElement("label",{htmlFor:s,className:(0,l.c)("RadioButton-module_label__3Zij9 radio-button_hds-radio-button__label__1XnIa")},d),c&&r.createElement("div",{className:"RadioButton-module_helperText__321Ay helpers_helper-text__awnLq",id:s+"-helper"},c))}));i.displayName="RadioButton"},66016:function(e,o,t){"use strict";t.d(o,{S:function(){return h}});var a=t(80136),r=t(67294),n=t(7444),l=t(34300),i=t(91267),c=t(42215),s=t(45422),d={label:"SelectionGroup-module_label__qlluz",selectionGroup:"SelectionGroup-module_selectionGroup__6Jxu8",items:"SelectionGroup-module_items__28m_S",vertical:"SelectionGroup-module_vertical__3iorC",horizontal:"SelectionGroup-module_horizontal__2eiY9",tooltipButton:"SelectionGroup-module_tooltipButton__2ibjm",errorText:"SelectionGroup-module_errorText__3tOPD selection-group_hds-selection-group__error-text__1Ynb9",helperText:"SelectionGroup-module_helperText__2k_WY helpers_helper-text__3QI7A"};(0,n.s)(".selection-group_hds-selection-group__2bwsd{--spacing-col:1.25rem;--spacing-row:var(--spacing-s);--label-color-default:var(--color-black-90);--icon-size:var(--spacing-m);border:0;padding:0}.selection-group_hds-selection-group__2bwsd>:not(.selection-group_hds-selection-group__items__21yOL){float:left}.selection-group_hds-selection-group__legend__149U2{box-sizing:border-box;color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-row);max-width:100%;padding:0;white-space:normal}.selection-group_hds-selection-group__required__3XPYK{color:var(--label-color-default);display:inline-block;font-size:var(--fontsize-body-xl);line-height:1;margin-left:var(--spacing-2-xs);transform:translateY(var(--spacing-3-xs))}.selection-group_hds-selection-group__items__21yOL{clear:left;display:grid;grid-gap:var(--spacing-row) var(--spacing-col);gap:var(--spacing-row) var(--spacing-col);justify-content:start}.selection-group_hds-selection-group__items--vertical__1v39g{grid-auto-flow:row}.selection-group_hds-selection-group__items--horizontal__3-_1w{grid-auto-flow:column}.selection-group_hds-selection-group__error-text__1Ynb9{color:var(--color-error);display:block;font-size:var(--fontsize-body-m);margin-top:var(--spacing-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.selection-group_hds-selection-group__error-text__1Ynb9:before{background:var(--color-error);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.helpers_visually-hidden__8xzsB{border:0;clip:\"rect(0 0 0 0)\";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.helpers_button-reset__D5XBg{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.helpers_text-body__kuwbN{color:var(--color-black-90);font-family:var(--font-default);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.helpers_text-medium__3yuel{font-family:var(--font-default);font-weight:500}.helpers_text-bold__2m1Nh{font-family:var(--font-default);font-weight:700}.helpers_text-xl__3Q3g5{font-size:var(--fontsize-heading-m)}.helpers_text-lg__3N-Yu{font-size:var(--fontsize-heading-s)}.helpers_text-md__1iyYX{font-size:var(--fontsize-heading-xs)}.helpers_subtitle__28FvQ{font-size:var(--fontsize-body-m)}.helpers_text-sm__OuSWo{font-size:var(--fontsize-body-s);line-height:var(--lineheight-xl)}.helpers_heading-xxl__1KMqh{font-size:var(--fontsize-heading-xxl);font-weight:400;letter-spacing:-1.2px;line-height:var(--lineheight-s)}.helpers_heading-xl__G41Bl{font-size:var(--fontsize-heading-xl);font-weight:400;letter-spacing:-1px;line-height:var(--lineheight-s)}.helpers_heading-xl-mobile__uKZqQ{font-size:var(--fontsize-heading-xl-mobile);font-weight:400;letter-spacing:-.8px;line-height:var(--lineheight-s)}.helpers_heading-l__29CXO{font-size:var(--fontsize-heading-l);font-weight:400;letter-spacing:-.4px;line-height:var(--lineheight-s)}.helpers_heading-m__16IDL{font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-.2px;line-height:32px}.helpers_heading-s__17rm-{font-size:var(--fontsize-heading-s);font-weight:500;letter-spacing:.2px;line-height:1.4}.helpers_heading-xs__rPz00{font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:.4px;line-height:1.33}.helpers_heading-xxs__Onkxt{font-size:var(--fontsize-heading-xxs);font-weight:700;letter-spacing:.4px;line-height:var(--lineheight-l)}.helpers_helper-text__3QI7A{color:var(--color-black-60);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs)}.SelectionGroup-module_label__qlluz{color:var(--label-color-default,var(--color-black-90));display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.SelectionGroup-module_selectionGroup__6Jxu8{--spacing-col:1.25rem;--spacing-row:var(--spacing-s);--label-color-default:var(--color-black-90);--icon-size:var(--spacing-m);border:0;padding:0}.SelectionGroup-module_selectionGroup__6Jxu8>:not(.SelectionGroup-module_items__28m_S){float:left}.SelectionGroup-module_label__qlluz{margin-bottom:var(--spacing-row);padding:0}.SelectionGroup-module_items__28m_S{clear:left;display:grid;gap:var(--spacing-row) var(--spacing-col);justify-content:start}.SelectionGroup-module_items__28m_S.SelectionGroup-module_vertical__3iorC{grid-auto-flow:row}.SelectionGroup-module_items__28m_S.SelectionGroup-module_horizontal__2eiY9{grid-auto-flow:column}.SelectionGroup-module_tooltipButton__2ibjm{margin-left:var(--spacing-2-xs)}");const h=e=>{var{label:o,direction:t="vertical",errorText:n,helperText:h,required:_,tooltipLabel:b,tooltipButtonLabel:u,tooltipText:p,children:g,className:v}=e,m=(0,a._)(e,["label","direction","errorText","helperText","required","tooltipLabel","tooltipButtonLabel","tooltipText","children","className"]);const f=(0,c.a)(g);return(0,r.useEffect)((()=>{let e=!1,o=!1;f.forEach((t=>{const a=t,{displayName:r}=a.type;"RadioButton"===r&&(e=!0,!0===a.props.checked&&(o=!0))})),e&&!o&&console.warn("All radio buttons in a SelectionGroup are unchecked. One radio button should be checked by default.")}),[g]),r.createElement("fieldset",Object.assign({className:(0,l.c)(d.selectionGroup,v)},m),r.createElement("legend",{className:d.label},o," ",_&&r.createElement(i.R,null)),p&&r.createElement(s.T,{buttonClassName:d.tooltipButton,tooltipLabel:b,buttonLabel:u},p),r.createElement("div",{className:(0,l.c)(d.items,d[t])},f.map((e=>(0,r.isValidElement)(e)&&r.createElement("div",{key:e.props.id,className:d.item},e)))),n&&r.createElement("div",{className:d.errorText},n),h&&r.createElement("div",{className:d.helperText},h))}},83428:function(e,o,t){"use strict";t.d(o,{S:function(){return s}});var a=t(80136),r=t(67294),n=t(7444),l=t(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const c=e=>{let{icon:o}=e;return r.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},o)},s=e=>{var{children:o,className:t,dataTestId:n,type:s="neutral",iconLeft:d}=e,h=(0,a._)(e,["children","className","dataTestId","type","iconLeft"]);return r.createElement("span",Object.assign({className:(0,l.c)(i.statusLabel,i[s],d&&i.statusLabelWithIcon,t),"data-testid":n},h),d&&r.createElement(c,{icon:d}),o)}},37776:function(e,o,t){"use strict";t.d(o,{c:function(){return a}});var a=(e,o,t,a,r)=>[o&&e+"-helper",t&&e+"-error",a&&e+"-success",r&&e+"-info"].filter((e=>e)).join(" ")},94330:function(e,o,t){"use strict";t.d(o,{m:function(){return n}});var a=t(91309),r=t.n(a),n=(e,o)=>{r()(e)?e(o.current):e.current=o.current}},29734:function(e,o,t){"use strict";t.r(o),t.d(o,{HorizontalGroupExample:function(){return _},SelectionGroupExample:function(){return d},VerticalGroupExample:function(){return h}});var a=t(11151),r=t(67294),n=t(66016),l=t(2592),i=t(29520),c=t(1072);const s=e=>{let{children:o,pageContext:t}=e;return r.createElement(c.default,{pageContext:t},o)},d=()=>{const[e,o]=r.useState({"v-checkbox1":!0,"v-checkbox2":!0}),t=t=>{o({...e,[t.target.name]:t.target.checked})};return r.createElement(n.S,{label:"Selection group",helperText:"Assistive text"},r.createElement(l.C,{id:"v-checkbox1",name:"v-checkbox1",label:"Option",checked:e["v-checkbox1"],onChange:t}),r.createElement(l.C,{id:"v-checkbox2",name:"v-checkbox2",label:"Option",checked:e["v-checkbox2"],onChange:t}),r.createElement(l.C,{id:"v-checkbox3",name:"v-checkbox3",label:"Option",checked:e["v-checkbox3"],onChange:t}),r.createElement(l.C,{id:"v-checkbox4",name:"v-checkbox4",label:"Option",checked:e["v-checkbox4"],onChange:t}))},h=()=>{const[e,o]=r.useState({"v-checkbox5":!0,"v-checkbox6":!0}),t=t=>{o({...e,[t.target.name]:t.target.checked})};return r.createElement(n.S,{label:"Vertical group"},r.createElement(l.C,{id:"v-checkbox5",name:"v-checkbox5",label:"Option",checked:e["v-checkbox5"],onChange:t}),r.createElement(l.C,{id:"v-checkbox6",name:"v-checkbox6",label:"Option",checked:e["v-checkbox6"],onChange:t}),r.createElement(l.C,{id:"v-checkbox7",name:"v-checkbox7",label:"Option",checked:e["v-checkbox7"],onChange:t}),r.createElement(l.C,{id:"v-checkbox8",name:"v-checkbox8",label:"Option",checked:e["v-checkbox8"],onChange:t}))},_=()=>{const[e,o]=r.useState("1"),t=e=>{o(e.target.value)};return r.createElement(n.S,{label:"Horizontal group",direction:"horizontal"},r.createElement(i.R,{id:"h-radio1",name:"h-radio",value:"1",label:"Option",checked:"1"===e,onChange:t}),r.createElement(i.R,{id:"h-radio2",name:"h-radio",value:"2",label:"Option",checked:"2"===e,onChange:t}),r.createElement(i.R,{id:"h-radio3",name:"h-radio",value:"3",label:"Option",checked:"3"===e,onChange:t}))};function b(e){const o=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",strong:"strong",h4:"h4",p:"p"},(0,a.ah)(),e.components),{PlaygroundPreview:t,InternalLink:n}=o;return n||u("InternalLink",!0),t||u("PlaygroundPreview",!0),r.createElement(r.Fragment,null,r.createElement(o.h2,{id:"usage",style:{position:"relative"}},"Usage",r.createElement(o.a,{href:"#usage","aria-label":"usage permalink",className:"header-anchor after"},r.createElement(o.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",r.createElement(o.h3,{id:"example",style:{position:"relative"}},"Example",r.createElement(o.a,{href:"#example","aria-label":"example permalink",className:"header-anchor after"},r.createElement(o.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n","\n",r.createElement(t,null,r.createElement(d)),"\n",r.createElement(o.h3,{id:"principles",style:{position:"relative"}},"Principles",r.createElement(o.a,{href:"#principles","aria-label":"principles permalink",className:"header-anchor after"},r.createElement(o.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",r.createElement(o.ul,null,"\n",r.createElement(o.li,null,"Currently, Selection group can contain either Checkboxes or Radio buttons.","\n",r.createElement(o.ul,null,"\n",r.createElement(o.li,null,"If the user can select more than one option from a list, use ",r.createElement(n,{href:"/components/checkbox"},"checkboxes.")),"\n",r.createElement(o.li,null,"If the user can only select one option from a list, use ",r.createElement(n,{href:"/components/radio-button"},"radio buttons.")),"\n"),"\n"),"\n",r.createElement(o.li,null,r.createElement(o.strong,null,"Default option must be set for Radio button groups.")," For Checkbox groups, this is recommended."),"\n",r.createElement(o.li,null,"Visible label must be given to the Selection group. The label should be clear and describe the choice the user is about to make."),"\n",r.createElement(o.li,null,"Selection group can be aligned both vertically and horizontally. ",r.createElement(o.strong,null,"Vertical alignment is recommended.")," Horizontal alignment can be used when there are less than 4 options.","\n",r.createElement(o.ul,null,"\n",r.createElement(o.li,null,"Note that horizontal Selection groups must not span to multiple lines."),"\n"),"\n"),"\n"),"\n",r.createElement(o.h3,{id:"variations",style:{position:"relative"}},"Variations",r.createElement(o.a,{href:"#variations","aria-label":"variations permalink",className:"header-anchor after"},r.createElement(o.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",r.createElement(o.h4,{id:"vertical-group",style:{position:"relative"}},"Vertical group",r.createElement(o.a,{href:"#vertical-group","aria-label":"vertical group permalink",className:"header-anchor after"},r.createElement(o.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",r.createElement(o.p,null,"Vertical selection group is the recommended way to present grouped form controls. Vertical checkbox groups are generally easier to perceive and read."),"\n","\n",r.createElement(t,null,r.createElement(h)),"\n",r.createElement(o.h4,{id:"horizontal-group",style:{position:"relative"}},"Horizontal group",r.createElement(o.a,{href:"#horizontal-group","aria-label":"horizontal group permalink",className:"header-anchor after"},r.createElement(o.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",r.createElement(o.p,null,"Horizontal selection group can be used in situations where there are only a few (less than 4) options. Otherwise, a vertical alignment is recommended."),"\n","\n",r.createElement(t,null,r.createElement(_)))}function u(e,o){throw new Error("Expected "+(o?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}o.default=function(e){return void 0===e&&(e={}),r.createElement(s,e,r.createElement(b,e))}},1072:function(e,o,t){"use strict";t.r(o);var a=t(11151),r=t(67294),n=t(83428),l=t(57674),i=t(89482),c=(t(18607),t(26127));function s(e){const o=Object.assign({h1:"h1",a:"a",span:"span"},(0,a.ah)(),e.components);return c.Z||d("PageTabs",!1),c.Z.Tab||d("PageTabs.Tab",!0),c.Z.TabList||d("PageTabs.TabList",!0),c.Z.TabPanel||d("PageTabs.TabPanel",!0),r.createElement(r.Fragment,null,r.createElement(o.h1,{id:"selectiongroup",style:{position:"relative"}},"SelectionGroup",r.createElement(o.a,{href:"#selectiongroup","aria-label":"selectiongroup permalink",className:"header-anchor after"},r.createElement(o.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",r.createElement("div",{class:"status-label-description"},r.createElement(n.S,{type:"info"},"Stable"),r.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),r.createElement(l.Z)),"\n",r.createElement(i.Z,null,"Selection group allows grouping related form selection elements (such as Checkboxes) to each other."),"\n",r.createElement(c.Z,{pageContext:e.pageContext},r.createElement(c.Z.TabList,null,r.createElement(c.Z.Tab,{href:"/"},"Usage"),r.createElement(c.Z.Tab,{href:"/code"},"Code"),r.createElement(c.Z.Tab,{href:"/accessibility"},"Accessibility")),r.createElement(c.Z.TabPanel,null,e.children)))}function d(e,o){throw new Error("Expected "+(o?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}o.default=function(e){void 0===e&&(e={});const{wrapper:o}=Object.assign({},(0,a.ah)(),e.components);return o?r.createElement(o,e,r.createElement(s,e)):s(e)}},89482:function(e,o,t){"use strict";var a=t(67294);o.Z=e=>{let{color:o="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:r={},children:n}=e;return a.createElement("p",{style:{fontSize:t,color:o,maxWidth:600,...r}},n)}},26127:function(e,o,t){"use strict";var a=t(67294),r=t(14160),n=t(94671);const l="PageTabList",i="PageTabPanel",c="PageTab",s=e=>{var o;let{pageContext:t,children:s}=e;const d=t.frontmatter.slug,h=Array.isArray(s)?s:[s],_=h.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===l)),b=h.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===i)),u=null===(o=_.props)||void 0===o?void 0:o.children.filter((e=>e.type.componentName===c)),p=u.findIndex((e=>d.endsWith(e.props.href))),g=-1===p?0:p,v=0===g?d:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(d);return a.createElement(n.a,{initiallyActiveTab:g},a.createElement(n.a.TabList,{className:"page-tabs-list"},u.map((e=>a.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,r.navigate)(""+("/"===e.props.href?v:v+e.props.href))},e.props.children)))),u.map(((e,o)=>a.createElement(n.a.TabPanel,{key:e.props.href},g===o?b.props.children:a.createElement("div",null)))))},d=e=>{let{children:o}=e;return a.createElement(n.a.TabList,null,o)};d.componentName=l;const h=e=>{let{href:o,slug:t,children:r}=e;return a.createElement(n.a.Tab,null,r)};h.componentName=c;const _=e=>{let{children:o}=e;return a.createElement(n.a.TabPanel,null,o)};_.componentName=i,s.TabList=d,s.Tab=h,s.TabPanel=_,o.Z=s},57674:function(e,o,t){"use strict";var a=t(67294),r=t(45422);o.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return a.createElement(r.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},a.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((o=>a.createElement("li",{key:o},a.createElement("span",{className:"status-name"},o),a.createElement("span",null,e[o]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-selection-group-tabs-mdx-fecc0d9ca66d7324e72b.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-selection-group-tabs-mdx-fecc0d9ca66d7324e72b.js
new file mode 100644
index 00000000000..00c42c9a89c
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-selection-group-tabs-mdx-fecc0d9ca66d7324e72b.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[1352],{83428:function(e,a,t){t.d(a,{S:function(){return i}});var s=t(80136),l=t(67294),n=t(7444),r=t(34300),c={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:a}=e;return l.createElement("span",{className:c.statusLabelIcon,"aria-hidden":"true"},a)},i=e=>{var{children:a,className:t,dataTestId:n,type:i="neutral",iconLeft:u}=e,b=(0,s._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(c.statusLabel,c[i],u&&c.statusLabelWithIcon,t),"data-testid":n},b),u&&l.createElement(o,{icon:u}),a)}},1072:function(e,a,t){t.r(a);var s=t(11151),l=t(67294),n=t(83428),r=t(57674),c=t(89482),o=(t(18607),t(26127));function i(e){const a=Object.assign({h1:"h1",a:"a",span:"span"},(0,s.ah)(),e.components);return o.Z||u("PageTabs",!1),o.Z.Tab||u("PageTabs.Tab",!0),o.Z.TabList||u("PageTabs.TabList",!0),o.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(a.h1,{id:"selectiongroup",style:{position:"relative"}},"SelectionGroup",l.createElement(a.a,{href:"#selectiongroup","aria-label":"selectiongroup permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(n.S,{type:"info"},"Stable"),l.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(c.Z,null,"Selection group allows grouping related form selection elements (such as Checkboxes) to each other."),"\n",l.createElement(o.Z,{pageContext:e.pageContext},l.createElement(o.Z.TabList,null,l.createElement(o.Z.Tab,{href:"/"},"Usage"),l.createElement(o.Z.Tab,{href:"/code"},"Code"),l.createElement(o.Z.Tab,{href:"/accessibility"},"Accessibility")),l.createElement(o.Z.TabPanel,null,e.children)))}function u(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,s.ah)(),e.components);return a?l.createElement(a,e,l.createElement(i,e)):i(e)}},89482:function(e,a,t){var s=t(67294);a.Z=e=>{let{color:a="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:l={},children:n}=e;return s.createElement("p",{style:{fontSize:t,color:a,maxWidth:600,...l}},n)}},26127:function(e,a,t){var s=t(67294),l=t(14160),n=t(94671);const r="PageTabList",c="PageTabPanel",o="PageTab",i=e=>{var a;let{pageContext:t,children:i}=e;const u=t.frontmatter.slug,b=Array.isArray(i)?i:[i],d=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===r)),m=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===c)),h=null===(a=d.props)||void 0===a?void 0:a.children.filter((e=>e.type.componentName===o)),p=h.findIndex((e=>u.endsWith(e.props.href))),_=-1===p?0:p,g=0===_?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return s.createElement(n.a,{initiallyActiveTab:_},s.createElement(n.a.TabList,{className:"page-tabs-list"},h.map((e=>s.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?g:g+e.props.href))},e.props.children)))),h.map(((e,a)=>s.createElement(n.a.TabPanel,{key:e.props.href},_===a?m.props.children:s.createElement("div",null)))))},u=e=>{let{children:a}=e;return s.createElement(n.a.TabList,null,a)};u.componentName=r;const b=e=>{let{href:a,slug:t,children:l}=e;return s.createElement(n.a.Tab,null,l)};b.componentName=o;const d=e=>{let{children:a}=e;return s.createElement(n.a.TabPanel,null,a)};d.componentName=c,i.TabList=u,i.Tab=b,i.TabPanel=d,a.Z=i},57674:function(e,a,t){var s=t(67294),l=t(45422);a.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return s.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},s.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((a=>s.createElement("li",{key:a},s.createElement("span",{className:"status-name"},a),s.createElement("span",null,e[a]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-side-navigation-accessibility-mdx-1798eaf70cc8af6ecd78.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-side-navigation-accessibility-mdx-1798eaf70cc8af6ecd78.js
new file mode 100644
index 00000000000..28cb33dce92
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-side-navigation-accessibility-mdx-1798eaf70cc8af6ecd78.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[5882,636],{83428:function(e,a,t){t.d(a,{S:function(){return c}});var n=t(80136),l=t(67294),s=t(7444),i=t(34300),r={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,s.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:a}=e;return l.createElement("span",{className:r.statusLabelIcon,"aria-hidden":"true"},a)},c=e=>{var{children:a,className:t,dataTestId:s,type:c="neutral",iconLeft:u}=e,d=(0,n._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,i.c)(r.statusLabel,r[c],u&&r.statusLabelWithIcon,t),"data-testid":s},d),u&&l.createElement(o,{icon:u}),a)}},27477:function(e,a,t){t.r(a);var n=t(11151),l=t(67294),s=t(15595);const i=e=>{let{children:a,pageContext:t}=e;return l.createElement(s.default,{pageContext:t},a)};function r(e){const a=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",strong:"strong"},(0,n.ah)(),e.components);return l.createElement(l.Fragment,null,l.createElement(a.h2,{id:"accessibility",style:{position:"relative"}},"Accessibility",l.createElement(a.a,{href:"#accessibility","aria-label":"accessibility permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.h3,{id:"pay-attention-to",style:{position:"relative"}},"Pay attention to",l.createElement(a.a,{href:"#pay-attention-to","aria-label":"pay attention to permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.ul,null,"\n",l.createElement(a.li,null,l.createElement(a.strong,null,"When designing a menu link hierarchy, always think about keyboard and screen reader users.")," First, make sure top-level menu labels are clear, and submenu items contextually fit under the top-level. Next, make sure the menu option order is logical and reasonable. Remember that keyboard users need to manually navigate to each element and thus placing a commonly used menu option last is not optimal."),"\n",l.createElement(a.li,null,"If you are using both the main (top) and the side navigation, it is a good practice to include an anchor link to the side navigation at the beginning of the main (top) navigation. This way assistive technologies can easily access the side navigation after a page load."),"\n",l.createElement(a.li,null,"If there are multiple navigational components on the page, they should have individual aria-labels. This helps screen reader users to distinguish them from each other. The SideNavigation component has an ariaLabel property for that purpose."),"\n"))}a.default=function(e){return void 0===e&&(e={}),l.createElement(i,e,l.createElement(r,e))}},15595:function(e,a,t){t.r(a);var n=t(11151),l=t(67294),s=t(83428),i=t(12818),r=t(57674),o=t(89482),c=(t(18607),t(26127));function u(e){const a=Object.assign({h1:"h1",a:"a",span:"span",p:"p"},(0,n.ah)(),e.components);return c.Z||d("PageTabs",!1),c.Z.Tab||d("PageTabs.Tab",!0),c.Z.TabList||d("PageTabs.TabList",!0),c.Z.TabPanel||d("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(a.h1,{id:"sidenavigation",style:{position:"relative"}},"SideNavigation",l.createElement(a.a,{href:"#sidenavigation","aria-label":"sidenavigation permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(s.S,{type:"alert"},"Beta"),l.createElement(s.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(o.Z,null,"A side navigation is an additional navigation element that is located at the left-hand side of the viewport. It provides an extra level of navigation and also can be helpful in situations where the traditional top navigation feels too clumsy. "),"\n",l.createElement(i.N,{label:"A visual rework is coming soon!",className:"siteNotification"},l.createElement(a.p,null,"The HDS team will be unifying the SideNavigation component with the Hel.fi project side navigation in the near future.")),"\n",l.createElement(c.Z,{pageContext:e.pageContext},l.createElement(c.Z.TabList,null,l.createElement(c.Z.Tab,{href:"/"},"Usage"),l.createElement(c.Z.Tab,{href:"/code"},"Code"),l.createElement(c.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(c.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(c.Z.TabPanel,null,e.children)))}function d(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,n.ah)(),e.components);return a?l.createElement(a,e,l.createElement(u,e)):u(e)}},89482:function(e,a,t){var n=t(67294);a.Z=e=>{let{color:a="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:l={},children:s}=e;return n.createElement("p",{style:{fontSize:t,color:a,maxWidth:600,...l}},s)}},26127:function(e,a,t){var n=t(67294),l=t(14160),s=t(94671);const i="PageTabList",r="PageTabPanel",o="PageTab",c=e=>{var a;let{pageContext:t,children:c}=e;const u=t.frontmatter.slug,d=Array.isArray(c)?c:[c],h=d.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===i)),m=d.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===r)),b=null===(a=h.props)||void 0===a?void 0:a.children.filter((e=>e.type.componentName===o)),p=b.findIndex((e=>u.endsWith(e.props.href))),g=-1===p?0:p,f=0===g?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return n.createElement(s.a,{initiallyActiveTab:g},n.createElement(s.a.TabList,{className:"page-tabs-list"},b.map((e=>n.createElement(s.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),b.map(((e,a)=>n.createElement(s.a.TabPanel,{key:e.props.href},g===a?m.props.children:n.createElement("div",null)))))},u=e=>{let{children:a}=e;return n.createElement(s.a.TabList,null,a)};u.componentName=i;const d=e=>{let{href:a,slug:t,children:l}=e;return n.createElement(s.a.Tab,null,l)};d.componentName=o;const h=e=>{let{children:a}=e;return n.createElement(s.a.TabPanel,null,a)};h.componentName=r,c.TabList=u,c.Tab=d,c.TabPanel=h,a.Z=c},57674:function(e,a,t){var n=t(67294),l=t(45422);a.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return n.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},n.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((a=>n.createElement("li",{key:a},n.createElement("span",{className:"status-name"},a),n.createElement("span",null,e[a]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-side-navigation-code-mdx-fd7025e87ed55b429189.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-side-navigation-code-mdx-fd7025e87ed55b429189.js
new file mode 100644
index 00000000000..5242001b76d
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-side-navigation-code-mdx-fd7025e87ed55b429189.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[5757,636],{83428:function(e,t,n){n.d(t,{S:function(){return c}});var a=n(80136),l=n(67294),i=n(7444),s=n(34300),r={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,i.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:t}=e;return l.createElement("span",{className:r.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:n,dataTestId:i,type:c="neutral",iconLeft:d}=e,u=(0,a._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,s.c)(r.statusLabel,r[c],d&&r.statusLabelWithIcon,n),"data-testid":i},u),d&&l.createElement(o,{icon:d}),t)}},82731:function(e,t,n){n.r(t);var a=n(11151),l=n(67294),i=n(32384),s=n(70476),r=n(15595);const o=e=>{let{children:t,pageContext:n}=e;return l.createElement(r.default,{pageContext:n},t)};function c(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",h4:"h4",pre:"pre",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",strong:"strong",p:"p"},(0,a.ah)(),e.components),{Playground:n,IconCheckCircleFill:r,Link:o,ExternalLink:c,IconCrossCircle:u}=t;return c||d("ExternalLink",!0),r||d("IconCheckCircleFill",!0),u||d("IconCrossCircle",!0),o||d("Link",!0),n||d("Playground",!0),l.createElement(l.Fragment,null,l.createElement(t.h2,{id:"code",style:{position:"relative"}},"Code",l.createElement(t.a,{href:"#code","aria-label":"code permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h3,{id:"code-examples",style:{position:"relative"}},"Code examples",l.createElement(t.a,{href:"#code-examples","aria-label":"code examples permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h4,{id:"default",style:{position:"relative"}},"Default",l.createElement(t.a,{href:"#default","aria-label":"default permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n,{scope:{SideNavigation:i.S,useState:l.useState}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},'import { SideNavigation } from \'hds-react\';\n\n() => {\n  const [active, setActive] = useState(\'/archive\');\n  const setActivePage = (e) => {\n    e.preventDefault();\n    setActive(e.target.getAttribute(\'href\'));\n  }\n  return (<div\n    style={{\n      backgroundColor: \'#f5f5f5\',\n      display: \'grid\',\n    }}\n  >\n    <div\n      style={{\n        height: \'100%\',\n        maxWidth: \'400px\'\n      }}\n    >\n      <SideNavigation\n        defaultOpenMainLevels={[]}\n        id="side-navigation"\n        toggleButtonLabel="Navigate to page"\n      >\n        <SideNavigation.MainLevel\n          id="#main-level-1"\n          label="Events"\n        >\n          <SideNavigation.SubLevel\n            href="/events"\n            active={active === \'/events\'}\n            id="sub-level-1"\n            label="All events"\n            onClick={setActivePage}\n          />\n          <SideNavigation.SubLevel\n            href="/archive"\n            active={active === \'/archive\'}\n            id="sub-level-2"\n            label="Archive"\n            onClick={setActivePage}\n          />\n          <SideNavigation.SubLevel\n            href="/new-event"\n            active={active === \'/new-event\'}\n            id="sub-level-3"\n            label="Create a new event"\n            onClick={setActivePage}\n          />\n        </SideNavigation.MainLevel>\n        <SideNavigation.MainLevel\n          id="main-level-2"\n          label="Events on map"\n        >\n          <SideNavigation.SubLevel\n            href="/map"\n            active={active === \'/map\'}\n            id="sub-level-4"\n            label="Map"\n            onClick={setActivePage}\n          />\n          <SideNavigation.SubLevel\n            href="/edit-event-locations"\n            active={active === \'/edit-event-locations\'}\n            id="sub-level-5"\n            label="Edit event locations"\n            onClick={setActivePage}\n          />\n          <SideNavigation.SubLevel\n            href="/new-location"\n            active={active === \'/new-location\'}\n            id="sub-level-6"\n            label="Create a new location"\n            onClick={setActivePage}\n          />\n        </SideNavigation.MainLevel>\n        <SideNavigation.MainLevel\n          href="/settings"\n          active={active === \'/settings\'}\n          id="main-level-3"\n          label="Settings"\n          onClick={setActivePage}\n        />\n        <SideNavigation.MainLevel\n          external\n          href="https://tapahtumat.hel.fi/"\n          openInNewTab\n          openInNewTabAriaLabel="Opens in a new tab."\n          openInExternalDomainAriaLabel="Opens a different website."\n          id="main-level-4"\n          label="Tapahtumat.hel.fi"\n          openInExternalDomainAriaLabel="Opens a different website"\n          withDivider\n        />\n      </SideNavigation>\n    </div>\n  </div>)\n}\n'))),"\n",l.createElement(t.h4,{id:"with-icons",style:{position:"relative"}},"With icons",l.createElement(t.a,{href:"#with-icons","aria-label":"with icons permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n,{scope:{SideNavigation:i.S,useState:l.useState,IconHome:s.a3,IconMap:s.ag,IconCogwheel:s.B}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},'import { SideNavigation } from \'hds-react\';\n\n() => {\n  const [active, setActive] = useState(\'/archive\');\n  const setActivePage = (e) => {\n    e.preventDefault();\n    setActive(e.target.getAttribute(\'href\'));\n  }\n  return (<div\n    style={{\n      backgroundColor: \'#f5f5f5\',\n      display: \'grid\',\n    }}\n  >\n    <div\n      style={{\n        height: \'100%\',\n        maxWidth: \'400px\'\n      }}\n    >\n      <SideNavigation\n        defaultOpenMainLevels={[]}\n        id="side-navigation-icons"\n        toggleButtonLabel="Navigate to page"\n      >\n        <SideNavigation.MainLevel\n          icon={<IconHome aria-hidden />}\n          id="main-level-icons-1"\n          label="Events"\n        >\n          <SideNavigation.SubLevel\n            href="/events"\n            id="sub-level-icons-1"\n            active={active === \'/all-events\'}\n            label="All events"\n            onClick={setActivePage}\n          />\n          <SideNavigation.SubLevel\n            href="/archive"\n            id="sub-level-icons-2"\n            active={active === \'/archive\'}\n            label="Archive"\n            onClick={setActivePage}\n          />\n          <SideNavigation.SubLevel\n            href="/new-event"\n            id="sub-level-icons-3"\n            active={active === \'/new-event\'}\n            label="Create a new event"\n            onClick={setActivePage}\n          />\n        </SideNavigation.MainLevel>\n        <SideNavigation.MainLevel\n          icon={<IconMap aria-hidden />}\n          id="main-level-icons-2"\n          label="Events on map"\n        >\n          <SideNavigation.SubLevel\n            href="/map"\n            id="sub-level-icons-4"\n            active={active === \'/map\'}\n            label="Map"\n            onClick={setActivePage}\n          />\n          <SideNavigation.SubLevel\n            href="/edit-event-locations"\n            id="sub-level-icons-5"\n            active={active === \'/edit-event-locations\'}\n            label="Edit event locations"\n            onClick={setActivePage}\n          />\n          <SideNavigation.SubLevel\n            href="/new-location"\n            id="sub-level-6"\n            active={active === \'/new-location\'}\n            label="Create a new location"\n            onClick={setActivePage}\n          />\n        </SideNavigation.MainLevel>\n        <SideNavigation.MainLevel\n          href="/settings"\n          icon={<IconCogwheel aria-hidden />}\n          id="main-level-icons-3"\n          active={active === \'/settings\'}\n          label="Settings"\n          onClick={setActivePage}\n        />\n        <SideNavigation.MainLevel\n          external\n          href="https://tapahtumat.hel.fi/"\n          openInNewTab\n          openInNewTabAriaLabel="Opens in a new tab."\n          openInExternalDomainAriaLabel="Opens a different website."\n          id="main-level-icons-4"\n          label="Tapahtumat.hel.fi"\n          openInExternalDomainAriaLabel="Opens a different website"\n          withDivider\n        />\n      </SideNavigation>\n    </div>\n  </div>)\n}\n'))),"\n",l.createElement(t.h3,{id:"packages",style:{position:"relative"}},"Packages",l.createElement(t.a,{href:"#packages","aria-label":"packages permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.table,null,l.createElement(t.thead,null,l.createElement(t.tr,null,l.createElement(t.th,null,"Package"),l.createElement(t.th,null,"Included"),l.createElement(t.th,null,"Storybook link"),l.createElement(t.th,null,"Source link"))),l.createElement(t.tbody,null,l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.strong,null,"HDS React")),l.createElement(t.td,null,l.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},l.createElement(r)," Yes ")),l.createElement(t.td,null,l.createElement(o,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-sidenavigation--default"},"View in Storybook")),l.createElement(t.td,null,l.createElement(c,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/react/src/components/sideNavigation"},"View source"))),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.strong,null,"HDS Core")),l.createElement(t.td,null,l.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},l.createElement(u)," No ")),l.createElement(t.td,null,"-"),l.createElement(t.td,null,"-")))),"\n",l.createElement(t.h3,{id:"properties",style:{position:"relative"}},"Properties",l.createElement(t.a,{href:"#properties","aria-label":"properties permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"Note! You can find the full list of properties in the ",l.createElement(o,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/docs/components-sidenavigation--default"},"React Storybook.")),"\n",l.createElement(t.table,null,l.createElement(t.thead,null,l.createElement(t.tr,null,l.createElement(t.th,null,"Property"),l.createElement(t.th,null,"Description"),l.createElement(t.th,null,"Values"),l.createElement(t.th,null,"Default value"))),l.createElement(t.tbody,null,l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"defaultOpenMainLevels")),l.createElement(t.td,null,"Default value for open main levels."),l.createElement(t.td,null,l.createElement(t.code,null,"number[]")),l.createElement(t.td,null,"[]")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"toggleButtonLabel")),l.createElement(t.td,null,"The label for the mobile menu toggle button"),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"ariaLabel")),l.createElement(t.td,null,"The aria-label for helping screen reader users to distinguish navigation row from other navigational components"),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,"[Table 1:SideNavigation properties]"),l.createElement(t.td),l.createElement(t.td),l.createElement(t.td)))))}function d(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){return void 0===e&&(e={}),l.createElement(o,e,l.createElement(c,e))}},15595:function(e,t,n){n.r(t);var a=n(11151),l=n(67294),i=n(83428),s=n(12818),r=n(57674),o=n(89482),c=(n(18607),n(26127));function d(e){const t=Object.assign({h1:"h1",a:"a",span:"span",p:"p"},(0,a.ah)(),e.components);return c.Z||u("PageTabs",!1),c.Z.Tab||u("PageTabs.Tab",!0),c.Z.TabList||u("PageTabs.TabList",!0),c.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"sidenavigation",style:{position:"relative"}},"SideNavigation",l.createElement(t.a,{href:"#sidenavigation","aria-label":"sidenavigation permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(i.S,{type:"alert"},"Beta"),l.createElement(i.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(o.Z,null,"A side navigation is an additional navigation element that is located at the left-hand side of the viewport. It provides an extra level of navigation and also can be helpful in situations where the traditional top navigation feels too clumsy. "),"\n",l.createElement(s.N,{label:"A visual rework is coming soon!",className:"siteNotification"},l.createElement(t.p,null,"The HDS team will be unifying the SideNavigation component with the Hel.fi project side navigation in the near future.")),"\n",l.createElement(c.Z,{pageContext:e.pageContext},l.createElement(c.Z.TabList,null,l.createElement(c.Z.Tab,{href:"/"},"Usage"),l.createElement(c.Z.Tab,{href:"/code"},"Code"),l.createElement(c.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(c.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(c.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,a.ah)(),e.components);return t?l.createElement(t,e,l.createElement(d,e)):d(e)}},89482:function(e,t,n){var a=n(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:n="var(--fontsize-body-xl)",style:l={},children:i}=e;return a.createElement("p",{style:{fontSize:n,color:t,maxWidth:600,...l}},i)}},26127:function(e,t,n){var a=n(67294),l=n(14160),i=n(94671);const s="PageTabList",r="PageTabPanel",o="PageTab",c=e=>{var t;let{pageContext:n,children:c}=e;const d=n.frontmatter.slug,u=Array.isArray(c)?c:[c],m=u.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===s)),h=u.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===r)),v=null===(t=m.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===o)),b=v.findIndex((e=>d.endsWith(e.props.href))),p=-1===b?0:b,g=0===p?d:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(d);return a.createElement(i.a,{initiallyActiveTab:p},a.createElement(i.a.TabList,{className:"page-tabs-list"},v.map((e=>a.createElement(i.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?g:g+e.props.href))},e.props.children)))),v.map(((e,t)=>a.createElement(i.a.TabPanel,{key:e.props.href},p===t?h.props.children:a.createElement("div",null)))))},d=e=>{let{children:t}=e;return a.createElement(i.a.TabList,null,t)};d.componentName=s;const u=e=>{let{href:t,slug:n,children:l}=e;return a.createElement(i.a.Tab,null,l)};u.componentName=o;const m=e=>{let{children:t}=e;return a.createElement(i.a.TabPanel,null,t)};m.componentName=r,c.TabList=d,c.Tab=u,c.TabPanel=m,t.Z=c},57674:function(e,t,n){var a=n(67294),l=n(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return a.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},a.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>a.createElement("li",{key:t},a.createElement("span",{className:"status-name"},t),a.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-side-navigation-customisation-mdx-e44dd3ada4a40fce64e6.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-side-navigation-customisation-mdx-e44dd3ada4a40fce64e6.js
new file mode 100644
index 00000000000..78668d51309
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-side-navigation-customisation-mdx-e44dd3ada4a40fce64e6.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[6606,636],{83428:function(e,t,a){a.d(t,{S:function(){return c}});var n=a(80136),l=a(67294),i=a(7444),o=a(34300),r={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,i.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const s=e=>{let{icon:t}=e;return l.createElement("span",{className:r.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:i,type:c="neutral",iconLeft:d}=e,u=(0,n._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,o.c)(r.statusLabel,r[c],d&&r.statusLabelWithIcon,a),"data-testid":i},u),d&&l.createElement(s,{icon:d}),t)}},10979:function(e,t,a){a.r(t);var n=a(11151),l=a(67294),i=a(32384),o=a(15595);const r=e=>{let{children:t,pageContext:a}=e;return l.createElement(o.default,{pageContext:a},t)};function s(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",p:"p",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",pre:"pre"},(0,n.ah)(),e.components),{Playground:a}=t;return a||function(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Playground",!0),l.createElement(l.Fragment,null,l.createElement(t.h2,{id:"customisation",style:{position:"relative"}},"Customisation",l.createElement(t.a,{href:"#customisation","aria-label":"customisation permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h3,{id:"customisation-properties",style:{position:"relative"}},"Customisation properties",l.createElement(t.a,{href:"#customisation-properties","aria-label":"customisation properties permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"You can use the ",l.createElement(t.code,null,"theme")," property to customise the component. See all available theme variables in the table below."),"\n",l.createElement(t.table,null,l.createElement(t.thead,null,l.createElement(t.tr,null,l.createElement(t.th,null,"Theme variable"),l.createElement(t.th,null,"Description"))),l.createElement(t.tbody,null,l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"--side-navigation-active-indicator-background-color")),l.createElement(t.td,null,"Colour of the active indicator")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"--side-navigation-background-color")),l.createElement(t.td,null,"Background colour of the side navigation container")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"--side-navigation-icon-size")),l.createElement(t.td,null,"Navigation item icon size (if icons are used)")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"--side-navigation-level-background-color")),l.createElement(t.td,null,"Background colour of a navigation item (not active)")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"--side-navigation-level-background-color-active")),l.createElement(t.td,null,"Background colour of an active navigation item")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"--side-navigation-level-background-color-hover")),l.createElement(t.td,null,"Background colour of a hovered navigation item")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"--side-navigation-level-border-color")),l.createElement(t.td,null,"Colour of a border around a navigation item")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"--side-navigation-level-border-color-focus")),l.createElement(t.td,null,"Colour of a focus border around a navigation item")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"--side-navigation-level-border-color-hover")),l.createElement(t.td,null,"Colour of a border around a hovered navigation item")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"--side-navigation-level-color")),l.createElement(t.td,null,"Colour of text and icon elements inside a navigation item (not active)")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"--side-navigation-level-color-active")),l.createElement(t.td,null,"Colour of text and icon elements inside an active navigatio item")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"--side-navigation-level-color-hover")),l.createElement(t.td,null,"Colour of text and icon elements inside a hovered navigatio item")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"--side-navigation-mobile-menu-border-color")),l.createElement(t.td,null,"Colour of a border around an opened mobile side navigation menu")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"--side-navigation-mobile-menu-z-index")),l.createElement(t.td,null,"Z-index value of an opened mobile side navigation menu")))),"\n",l.createElement(t.h3,{id:"customisation-example",style:{position:"relative"}},"Customisation example",l.createElement(t.a,{href:"#customisation-example","aria-label":"customisation example permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a,{scope:{SideNavigation:i.S}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},"import { SideNavigation } from 'hds-react';\n\n() => {\n  const [active, setActive] = React.useState('/archive');\n  const setActivePage = (e) => {\n    e.preventDefault();\n    setActive(e.target.getAttribute('href'));\n  }\n  return (<div\n    style={{\n      backgroundColor: '#f5f5f5',\n      display: 'grid',\n    }}\n  >\n    <div\n      style={{\n        height: '100%',\n        maxWidth: '400px'\n      }}\n    >\n      <SideNavigation\n        defaultOpenMainLevels={[]}\n        id=\"side-navigation\"\n        toggleButtonLabel=\"Navigate to page\"\n        theme={{\n          '--side-navigation-active-indicator-background-color': 'var(--color-gold)',\n          '--side-navigation-background-color': 'var(--color-white)',\n          '--side-navigation-icon-size': 'var(--spacing-m)',\n          '--side-navigation-level-background-color': 'var(--color-white)',\n          '--side-navigation-level-background-color-active': 'var(--color-fog-light)',\n          '--side-navigation-level-background-color-hover': 'var(--color-fog-light)',\n          '--side-navigation-level-border-color': 'var(--color-white)',\n          '--side-navigation-level-border-color-focus': 'var(--color-coat-of-arms)',\n          '--side-navigation-level-border-color-hover': 'var(--color-fog-light)',\n          '--side-navigation-level-color': 'var(--color-black)',\n          '--side-navigation-level-color-active': 'var(--color-black)',\n          '--side-navigation-level-color-hover': 'var(--color-black)',\n          '--side-navigation-mobile-menu-border-color': 'var(--color-black)',\n          '--side-navigation-mobile-menu-z-index': 100\n        }}  \n      >\n        <SideNavigation.MainLevel\n          id=\"#main-level-1\"\n          label=\"Events\"\n        >\n          <SideNavigation.SubLevel\n            href=\"/events\"\n            active={active === '/events'}\n            id=\"sub-level-1\"\n            label=\"All events\"\n            onClick={setActivePage}\n          />\n          <SideNavigation.SubLevel\n            href=\"/archive\"\n            active={active === '/archive'}\n            id=\"sub-level-2\"\n            label=\"Archive\"\n            onClick={setActivePage}\n          />\n          <SideNavigation.SubLevel\n            href=\"/new-event\"\n            active={active === '/new-event'}\n            id=\"sub-level-3\"\n            label=\"Create a new event\"\n            onClick={setActivePage}\n          />\n        </SideNavigation.MainLevel>\n        <SideNavigation.MainLevel\n          id=\"main-level-2\"\n          label=\"Events on map\"\n        >\n          <SideNavigation.SubLevel\n            href=\"/map\"\n            active={active === '/map'}\n            id=\"sub-level-4\"\n            label=\"Map\"\n            onClick={setActivePage}\n          />\n          <SideNavigation.SubLevel\n            href=\"/edit-event-locations\"\n            active={active === '/edit-event-locations'}\n            id=\"sub-level-5\"\n            label=\"Edit event locations\"\n            onClick={setActivePage}\n          />\n          <SideNavigation.SubLevel\n            href=\"/new-location\"\n            active={active === '/new-location'}\n            id=\"sub-level-6\"\n            label=\"Create a new location\"\n            onClick={setActivePage}\n          />\n        </SideNavigation.MainLevel>\n        <SideNavigation.MainLevel\n          href=\"/settings\"\n          active={active === '/settings'}\n          id=\"main-level-3\"\n          label=\"Settings\"\n          onClick={setActivePage}\n        />\n        <SideNavigation.MainLevel\n          external\n          href=\"https://tapahtumat.hel.fi/\"\n          openInNewTab\n          openInNewTabAriaLabel=\"Opens in a new tab.\"\n          openInExternalDomainAriaLabel=\"Opens a different website.\"\n          id=\"main-level-4\"\n          label=\"Tapahtumat.hel.fi\"\n          openInExternalDomainAriaLabel=\"Opens a different website\"\n          withDivider\n        />\n      </SideNavigation>\n    </div>\n  </div>)\n}\n"))))}t.default=function(e){return void 0===e&&(e={}),l.createElement(r,e,l.createElement(s,e))}},15595:function(e,t,a){a.r(t);var n=a(11151),l=a(67294),i=a(83428),o=a(12818),r=a(57674),s=a(89482),c=(a(18607),a(26127));function d(e){const t=Object.assign({h1:"h1",a:"a",span:"span",p:"p"},(0,n.ah)(),e.components);return c.Z||u("PageTabs",!1),c.Z.Tab||u("PageTabs.Tab",!0),c.Z.TabList||u("PageTabs.TabList",!0),c.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"sidenavigation",style:{position:"relative"}},"SideNavigation",l.createElement(t.a,{href:"#sidenavigation","aria-label":"sidenavigation permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(i.S,{type:"alert"},"Beta"),l.createElement(i.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(s.Z,null,"A side navigation is an additional navigation element that is located at the left-hand side of the viewport. It provides an extra level of navigation and also can be helpful in situations where the traditional top navigation feels too clumsy. "),"\n",l.createElement(o.N,{label:"A visual rework is coming soon!",className:"siteNotification"},l.createElement(t.p,null,"The HDS team will be unifying the SideNavigation component with the Hel.fi project side navigation in the near future.")),"\n",l.createElement(c.Z,{pageContext:e.pageContext},l.createElement(c.Z.TabList,null,l.createElement(c.Z.Tab,{href:"/"},"Usage"),l.createElement(c.Z.Tab,{href:"/code"},"Code"),l.createElement(c.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(c.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(c.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,n.ah)(),e.components);return t?l.createElement(t,e,l.createElement(d,e)):d(e)}},89482:function(e,t,a){var n=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:l={},children:i}=e;return n.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...l}},i)}},26127:function(e,t,a){var n=a(67294),l=a(14160),i=a(94671);const o="PageTabList",r="PageTabPanel",s="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const d=a.frontmatter.slug,u=Array.isArray(c)?c:[c],m=u.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===o)),v=u.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===r)),b=null===(t=m.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===s)),h=b.findIndex((e=>d.endsWith(e.props.href))),g=-1===h?0:h,p=0===g?d:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(d);return n.createElement(i.a,{initiallyActiveTab:g},n.createElement(i.a.TabList,{className:"page-tabs-list"},b.map((e=>n.createElement(i.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?p:p+e.props.href))},e.props.children)))),b.map(((e,t)=>n.createElement(i.a.TabPanel,{key:e.props.href},g===t?v.props.children:n.createElement("div",null)))))},d=e=>{let{children:t}=e;return n.createElement(i.a.TabList,null,t)};d.componentName=o;const u=e=>{let{href:t,slug:a,children:l}=e;return n.createElement(i.a.Tab,null,l)};u.componentName=s;const m=e=>{let{children:t}=e;return n.createElement(i.a.TabPanel,null,t)};m.componentName=r,c.TabList=d,c.Tab=u,c.TabPanel=m,t.Z=c},57674:function(e,t,a){var n=a(67294),l=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return n.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},n.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>n.createElement("li",{key:t},n.createElement("span",{className:"status-name"},t),n.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-side-navigation-index-mdx-6b0058724b5260487127.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-side-navigation-index-mdx-6b0058724b5260487127.js
new file mode 100644
index 00000000000..3fcca930713
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-side-navigation-index-mdx-6b0058724b5260487127.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[2456,636],{83428:function(e,a,t){t.d(a,{S:function(){return c}});var n=t(80136),l=t(67294),i=t(7444),s=t(34300),r={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,i.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:a}=e;return l.createElement("span",{className:r.statusLabelIcon,"aria-hidden":"true"},a)},c=e=>{var{children:a,className:t,dataTestId:i,type:c="neutral",iconLeft:d}=e,h=(0,n._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,s.c)(r.statusLabel,r[c],d&&r.statusLabelWithIcon,t),"data-testid":i},h),d&&l.createElement(o,{icon:d}),a)}},27006:function(e,a,t){t.r(a),t.d(a,{SideNavExample:function(){return c},SideNavIconsExample:function(){return d}});var n=t(11151),l=t(67294),i=t(32384),s=t(70476),r=t(15595);const o=e=>{let{children:a,pageContext:t}=e;return l.createElement(r.default,{pageContext:t},a)},c=()=>{const e=Object.assign({div:"div"},(0,n.ah)()),[a,t]=l.useState("/archive"),s=e=>{e.preventDefault(),t(e.target.getAttribute("href"))};return l.createElement(e.div,{style:{backgroundColor:"#f5f5f5",display:"grid"}},l.createElement(e.div,{style:{height:"100%",maxWidth:"400px"}},l.createElement(i.S,{defaultOpenMainLevels:[],id:"side-navigation",toggleButtonLabel:"Navigate to page"},l.createElement(i.S.MainLevel,{id:"#main-level-1",label:"Events"},l.createElement(i.S.SubLevel,{href:"/events",active:"/events"===a,id:"sub-level-1",label:"All events",onClick:s}),l.createElement(i.S.SubLevel,{href:"/archive",active:"/archive"===a,id:"sub-level-2",label:"Archive",onClick:s}),l.createElement(i.S.SubLevel,{href:"/new-event",active:"/new-event"===a,id:"sub-level-3",label:"Create a new event",onClick:s})),l.createElement(i.S.MainLevel,{id:"main-level-2",label:"Events on map"},l.createElement(i.S.SubLevel,{href:"/map",active:"/map"===a,id:"sub-level-4",label:"Map",onClick:s}),l.createElement(i.S.SubLevel,{href:"/edit-event-locations",active:"/edit-event-locations"===a,id:"sub-level-5",label:"Edit event locations",onClick:s}),l.createElement(i.S.SubLevel,{href:"/new-location",active:"/new-location"===a,id:"sub-level-6",label:"Create a new location",onClick:s})),l.createElement(i.S.MainLevel,{href:"/settings",active:"/settings"===a,id:"main-level-3",label:"Settings",onClick:s}),l.createElement(i.S.MainLevel,{external:!0,href:"https://tapahtumat.hel.fi/",openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab.",openInExternalDomainAriaLabel:"Opens a different website.",id:"main-level-4",label:"Tapahtumat.hel.fi",openInExternalDomainAriaLabel:"Opens a different website",withDivider:!0}))))},d=()=>{const e=Object.assign({div:"div"},(0,n.ah)()),[a,t]=l.useState("/archive"),r=e=>{e.preventDefault(),t(e.target.getAttribute("href"))};return l.createElement(e.div,{style:{backgroundColor:"#f5f5f5",display:"grid"}},l.createElement(e.div,{style:{height:"100%",maxWidth:"400px"}},l.createElement(i.S,{defaultOpenMainLevels:[],id:"side-navigation-icons",toggleButtonLabel:"Navigate to page"},l.createElement(i.S.MainLevel,{icon:l.createElement(s.a3,{"aria-hidden":!0}),id:"main-level-icons-1",label:"Events"},l.createElement(i.S.SubLevel,{href:"/events",id:"sub-level-icons-1",active:"/all-events"===a,label:"All events",onClick:r}),l.createElement(i.S.SubLevel,{href:"/archive",id:"sub-level-icons-2",active:"/archive"===a,label:"Archive",onClick:r}),l.createElement(i.S.SubLevel,{href:"/new-event",id:"sub-level-icons-3",active:"/new-event"===a,label:"Create a new event",onClick:r})),l.createElement(i.S.MainLevel,{icon:l.createElement(s.ag,{"aria-hidden":!0}),id:"main-level-icons-2",label:"Events on map"},l.createElement(i.S.SubLevel,{href:"/map",id:"sub-level-icons-4",active:"/map"===a,label:"Map",onClick:r}),l.createElement(i.S.SubLevel,{href:"/edit-event-locations",id:"sub-level-icons-5",active:"/edit-event-locations"===a,label:"Edit event locations",onClick:r}),l.createElement(i.S.SubLevel,{href:"/new-location",id:"sub-level-6",active:"/new-location"===a,label:"Create a new location",onClick:r})),l.createElement(i.S.MainLevel,{href:"/settings",icon:l.createElement(s.B,{"aria-hidden":!0}),id:"main-level-icons-3",active:"/settings"===a,label:"Settings",onClick:r}),l.createElement(i.S.MainLevel,{external:!0,href:"https://tapahtumat.hel.fi/",openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab.",openInExternalDomainAriaLabel:"Opens a different website.",id:"main-level-icons-4",label:"Tapahtumat.hel.fi",openInExternalDomainAriaLabel:"Opens a different website",withDivider:!0}))))};function h(e){const a=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",strong:"strong",h4:"h4",p:"p"},(0,n.ah)(),e.components),{PlaygroundPreview:t,InternalLink:i,Link:s}=a;return i||u("InternalLink",!0),s||u("Link",!0),t||u("PlaygroundPreview",!0),l.createElement(l.Fragment,null,l.createElement(a.h2,{id:"usage",style:{position:"relative"}},"Usage",l.createElement(a.a,{href:"#usage","aria-label":"usage permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.h3,{id:"example",style:{position:"relative"}},"Example",l.createElement(a.a,{href:"#example","aria-label":"example permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n","\n",l.createElement(t,null,l.createElement(c)),"\n",l.createElement(a.h3,{id:"principles",style:{position:"relative"}},"Principles",l.createElement(a.a,{href:"#principles","aria-label":"principles permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.ul,null,"\n",l.createElement(a.li,null,l.createElement(a.strong,null,"It is strongly recommended to always include the ",l.createElement(i,{href:"/components/navigation"},"main (top) navigation component")," in your service."),"\n",l.createElement(a.ul,null,"\n",l.createElement(a.li,null,"It is allowed to use the side navigation without the top navigation. However, please note that the top navigation includes important features such as language selection and login. If you rely on the side navigation only, you need to provide these functionalities somewhere else in the user interface."),"\n"),"\n"),"\n",l.createElement(a.li,null,"If you use both main (top) and side navigation, do not repeat the same navigation items in both of them."),"\n",l.createElement(a.li,null,"Always position the side navigation to the left-hand side of the page. Keep the navigation in place so the user can always easily locate it."),"\n",l.createElement(a.li,null,"Keep navigation menu link labels clear and concise. Prefer max 1-2 word long labels. Avoid starting multiple menu link labels with the same word."),"\n",l.createElement(a.li,null,"The side navigation allows the use of icons for the first-level links.","\n",l.createElement(a.ul,null,"\n",l.createElement(a.li,null,"If icons are used, all first-level links should have an icon."),"\n",l.createElement(a.li,null,"Pay attention to the icon choices. The icons should be easily recognisable and not used for decorative purposes only."),"\n",l.createElement(a.li,null,"The second-level links and external links must not include an icon."),"\n",l.createElement(a.li,null,"Labels are always required even if icons are used. Do not create icon-only navigations."),"\n"),"\n"),"\n",l.createElement(a.li,null,"When including external links in the side navigation, follow guidelines of the ",l.createElement(i,{href:"/components/link"},"HDS Link component documentation"),"."),"\n"),"\n",l.createElement(a.h4,{id:"when-to-use-a-side-navigation",style:{position:"relative"}},"When to use a side navigation?",l.createElement(a.a,{href:"#when-to-use-a-side-navigation","aria-label":"when to use a side navigation permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.ul,null,"\n",l.createElement(a.li,null,l.createElement(a.strong,null,"Consider using the Side navigation when"),"\n",l.createElement(a.ul,null,"\n",l.createElement(a.li,null,"the service's navigation hierarchy exceeds three (3) levels, or in some cases, even at three levels."),"\n",l.createElement(a.li,null,"the user needs easily scan through and navigate between pages at a specific level (e.g. admin interfaces or documentation sites)"),"\n",l.createElement(a.li,null,"you are uncertain of the number of the navigation items and you need room for growth and changes"),"\n"),"\n"),"\n",l.createElement(a.li,null,l.createElement(a.strong,null,"Avoid using the Side navigation when"),"\n",l.createElement(a.ul,null,"\n",l.createElement(a.li,null,"you need space for your content (the side navigation uses a large portion of the content area)"),"\n",l.createElement(a.li,null,"your service has a small number of navigation items and only one level deep navigation hierarchy"),"\n"),"\n"),"\n"),"\n",l.createElement(a.h3,{id:"variations",style:{position:"relative"}},"Variations",l.createElement(a.a,{href:"#variations","aria-label":"variations permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.h4,{id:"default",style:{position:"relative"}},"Default",l.createElement(a.a,{href:"#default","aria-label":"default permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.p,null,"The default side navigation has support for two (2) levels of navigation, icons, external links, and a divider to create logical groups for the navigation items."),"\n",l.createElement(t,null,l.createElement(c)),"\n",l.createElement(a.h4,{id:"with-icons",style:{position:"relative"}},"With icons",l.createElement(a.a,{href:"#with-icons","aria-label":"with icons permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.p,null,"Icons are allowed to be used with the main level navigation items and accordions. The second-level navigation items do not have icon support. Also, icons are not visible in the mobile side navigation variant."),"\n","\n",l.createElement(t,null,l.createElement(d)),"\n",l.createElement(a.h4,{id:"with-skip-link",style:{position:"relative"}},"With skip link",l.createElement(a.a,{href:"#with-skip-link","aria-label":"with skip link permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.ul,null,"\n",l.createElement(a.li,null,"Using the SideNavigation.SkipLink component is optional. Use the skip link component to help keyboard-only users skip the navigation links and jump to the main content."),"\n",l.createElement(a.li,null,"See Example for SideNavigation.SkipLink ",l.createElement(s,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-sidenavigation--with-skip-link"},"in Storybook")),"\n",l.createElement(a.li,null,"The SideNavigation.SkipLink supports ariaLabel which gives possibility to define more informative text for screen readers"),"\n"))}function u(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){return void 0===e&&(e={}),l.createElement(o,e,l.createElement(h,e))}},15595:function(e,a,t){t.r(a);var n=t(11151),l=t(67294),i=t(83428),s=t(12818),r=t(57674),o=t(89482),c=(t(18607),t(26127));function d(e){const a=Object.assign({h1:"h1",a:"a",span:"span",p:"p"},(0,n.ah)(),e.components);return c.Z||h("PageTabs",!1),c.Z.Tab||h("PageTabs.Tab",!0),c.Z.TabList||h("PageTabs.TabList",!0),c.Z.TabPanel||h("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(a.h1,{id:"sidenavigation",style:{position:"relative"}},"SideNavigation",l.createElement(a.a,{href:"#sidenavigation","aria-label":"sidenavigation permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(i.S,{type:"alert"},"Beta"),l.createElement(i.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(o.Z,null,"A side navigation is an additional navigation element that is located at the left-hand side of the viewport. It provides an extra level of navigation and also can be helpful in situations where the traditional top navigation feels too clumsy. "),"\n",l.createElement(s.N,{label:"A visual rework is coming soon!",className:"siteNotification"},l.createElement(a.p,null,"The HDS team will be unifying the SideNavigation component with the Hel.fi project side navigation in the near future.")),"\n",l.createElement(c.Z,{pageContext:e.pageContext},l.createElement(c.Z.TabList,null,l.createElement(c.Z.Tab,{href:"/"},"Usage"),l.createElement(c.Z.Tab,{href:"/code"},"Code"),l.createElement(c.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(c.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(c.Z.TabPanel,null,e.children)))}function h(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,n.ah)(),e.components);return a?l.createElement(a,e,l.createElement(d,e)):d(e)}},89482:function(e,a,t){var n=t(67294);a.Z=e=>{let{color:a="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:l={},children:i}=e;return n.createElement("p",{style:{fontSize:t,color:a,maxWidth:600,...l}},i)}},26127:function(e,a,t){var n=t(67294),l=t(14160),i=t(94671);const s="PageTabList",r="PageTabPanel",o="PageTab",c=e=>{var a;let{pageContext:t,children:c}=e;const d=t.frontmatter.slug,h=Array.isArray(c)?c:[c],u=h.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===s)),m=h.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===r)),p=null===(a=u.props)||void 0===a?void 0:a.children.filter((e=>e.type.componentName===o)),v=p.findIndex((e=>d.endsWith(e.props.href))),b=-1===v?0:v,g=0===b?d:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(d);return n.createElement(i.a,{initiallyActiveTab:b},n.createElement(i.a.TabList,{className:"page-tabs-list"},p.map((e=>n.createElement(i.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?g:g+e.props.href))},e.props.children)))),p.map(((e,a)=>n.createElement(i.a.TabPanel,{key:e.props.href},b===a?m.props.children:n.createElement("div",null)))))},d=e=>{let{children:a}=e;return n.createElement(i.a.TabList,null,a)};d.componentName=s;const h=e=>{let{href:a,slug:t,children:l}=e;return n.createElement(i.a.Tab,null,l)};h.componentName=o;const u=e=>{let{children:a}=e;return n.createElement(i.a.TabPanel,null,a)};u.componentName=r,c.TabList=d,c.Tab=h,c.TabPanel=u,a.Z=c},57674:function(e,a,t){var n=t(67294),l=t(45422);a.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return n.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},n.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((a=>n.createElement("li",{key:a},n.createElement("span",{className:"status-name"},a),n.createElement("span",null,e[a]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-side-navigation-tabs-mdx-c26b05d39a47011f85ca.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-side-navigation-tabs-mdx-c26b05d39a47011f85ca.js
new file mode 100644
index 00000000000..3a2ebace82b
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-side-navigation-tabs-mdx-c26b05d39a47011f85ca.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[636],{83428:function(e,a,t){t.d(a,{S:function(){return c}});var s=t(80136),l=t(67294),n=t(7444),r=t(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:a}=e;return l.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},a)},c=e=>{var{children:a,className:t,dataTestId:n,type:c="neutral",iconLeft:u}=e,b=(0,s._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(i.statusLabel,i[c],u&&i.statusLabelWithIcon,t),"data-testid":n},b),u&&l.createElement(o,{icon:u}),a)}},15595:function(e,a,t){t.r(a);var s=t(11151),l=t(67294),n=t(83428),r=t(12818),i=t(57674),o=t(89482),c=(t(18607),t(26127));function u(e){const a=Object.assign({h1:"h1",a:"a",span:"span",p:"p"},(0,s.ah)(),e.components);return c.Z||b("PageTabs",!1),c.Z.Tab||b("PageTabs.Tab",!0),c.Z.TabList||b("PageTabs.TabList",!0),c.Z.TabPanel||b("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(a.h1,{id:"sidenavigation",style:{position:"relative"}},"SideNavigation",l.createElement(a.a,{href:"#sidenavigation","aria-label":"sidenavigation permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(n.S,{type:"alert"},"Beta"),l.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(i.Z)),"\n",l.createElement(o.Z,null,"A side navigation is an additional navigation element that is located at the left-hand side of the viewport. It provides an extra level of navigation and also can be helpful in situations where the traditional top navigation feels too clumsy. "),"\n",l.createElement(r.N,{label:"A visual rework is coming soon!",className:"siteNotification"},l.createElement(a.p,null,"The HDS team will be unifying the SideNavigation component with the Hel.fi project side navigation in the near future.")),"\n",l.createElement(c.Z,{pageContext:e.pageContext},l.createElement(c.Z.TabList,null,l.createElement(c.Z.Tab,{href:"/"},"Usage"),l.createElement(c.Z.Tab,{href:"/code"},"Code"),l.createElement(c.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(c.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(c.Z.TabPanel,null,e.children)))}function b(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,s.ah)(),e.components);return a?l.createElement(a,e,l.createElement(u,e)):u(e)}},89482:function(e,a,t){var s=t(67294);a.Z=e=>{let{color:a="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:l={},children:n}=e;return s.createElement("p",{style:{fontSize:t,color:a,maxWidth:600,...l}},n)}},26127:function(e,a,t){var s=t(67294),l=t(14160),n=t(94671);const r="PageTabList",i="PageTabPanel",o="PageTab",c=e=>{var a;let{pageContext:t,children:c}=e;const u=t.frontmatter.slug,b=Array.isArray(c)?c:[c],d=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===r)),m=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===i)),h=null===(a=d.props)||void 0===a?void 0:a.children.filter((e=>e.type.componentName===o)),p=h.findIndex((e=>u.endsWith(e.props.href))),_=-1===p?0:p,g=0===_?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return s.createElement(n.a,{initiallyActiveTab:_},s.createElement(n.a.TabList,{className:"page-tabs-list"},h.map((e=>s.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?g:g+e.props.href))},e.props.children)))),h.map(((e,a)=>s.createElement(n.a.TabPanel,{key:e.props.href},_===a?m.props.children:s.createElement("div",null)))))},u=e=>{let{children:a}=e;return s.createElement(n.a.TabList,null,a)};u.componentName=r;const b=e=>{let{href:a,slug:t,children:l}=e;return s.createElement(n.a.Tab,null,l)};b.componentName=o;const d=e=>{let{children:a}=e;return s.createElement(n.a.TabPanel,null,a)};d.componentName=i,c.TabList=u,c.Tab=b,c.TabPanel=d,a.Z=c},57674:function(e,a,t){var s=t(67294),l=t(45422);a.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return s.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},s.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((a=>s.createElement("li",{key:a},s.createElement("span",{className:"status-name"},a),s.createElement("span",null,e[a]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-status-label-accessibility-mdx-01089f21663f4019779e.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-status-label-accessibility-mdx-01089f21663f4019779e.js
new file mode 100644
index 00000000000..d9cf6f8cd7e
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-status-label-accessibility-mdx-01089f21663f4019779e.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[4360,8619],{83428:function(e,t,a){a.d(t,{S:function(){return c}});var l=a(80136),s=a(67294),n=a(7444),r=a(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:t}=e;return s.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:n,type:c="neutral",iconLeft:u}=e,b=(0,l._)(e,["children","className","dataTestId","type","iconLeft"]);return s.createElement("span",Object.assign({className:(0,r.c)(i.statusLabel,i[c],u&&i.statusLabelWithIcon,a),"data-testid":n},b),u&&s.createElement(o,{icon:u}),t)}},41062:function(e,t,a){a.r(t);var l=a(11151),s=a(67294),n=a(80699),r=a(40637),i=a(1076);const o=e=>{let{children:t,pageContext:a}=e;return s.createElement(r.default,{pageContext:a},t)};function c(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",strong:"strong"},(0,l.ah)(),e.components);return s.createElement(s.Fragment,null,s.createElement(t.h2,{id:"accessibility",style:{position:"relative"}},"Accessibility",s.createElement(t.a,{href:"#accessibility","aria-label":"accessibility permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.h3,{id:"pay-attention-to",style:{position:"relative"}},"Pay attention to",s.createElement(t.a,{href:"#pay-attention-to","aria-label":"pay attention to permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.ul,null,"\n",s.createElement(t.li,null,s.createElement(t.strong,null,"It is advisable to use colour combinations provided by the implementation.")," These combinations are ensured to comply with WCAG AA requirements. When customising colours, refer to ",s.createElement(i.Z,{href:"/foundation/design-tokens/colour"},"colour guidelines")," to ensure accessibility."),"\n",s.createElement(t.li,null,"Remember that colour should never be the only way of conveying information. Make sure the meaning of the status label is clearly described by the label text. Refer to ",s.createElement(n.Z,{href:"https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html"},"WCAG 2.1 Use of Color guideline")," for more information."),"\n"))}t.default=function(e){return void 0===e&&(e={}),s.createElement(o,e,s.createElement(c,e))}},40637:function(e,t,a){a.r(t);var l=a(11151),s=a(67294),n=a(83428),r=a(57674),i=a(89482),o=(a(18607),a(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,l.ah)(),e.components);return o.Z||u("PageTabs",!1),o.Z.Tab||u("PageTabs.Tab",!0),o.Z.TabList||u("PageTabs.TabList",!0),o.Z.TabPanel||u("PageTabs.TabPanel",!0),s.createElement(s.Fragment,null,s.createElement(t.h1,{id:"statuslabel",style:{position:"relative"}},"StatusLabel",s.createElement(t.a,{href:"#statuslabel","aria-label":"statuslabel permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement("div",{class:"status-label-description"},s.createElement(n.S,{type:"info"},"Stable"),s.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),s.createElement(r.Z)),"\n",s.createElement(i.Z,null,"  Status labels can be used to highlight different statuses or items to the user. Status labels cannot be interacted with and they are only meant to convey relevant information."),"\n",s.createElement(o.Z,{pageContext:e.pageContext},s.createElement(o.Z.TabList,null,s.createElement(o.Z.Tab,{href:"/"},"Usage"),s.createElement(o.Z.Tab,{href:"/code"},"Code"),s.createElement(o.Z.Tab,{href:"/accessibility"},"Accessibility")),s.createElement(o.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,l.ah)(),e.components);return t?s.createElement(t,e,s.createElement(c,e)):c(e)}},89482:function(e,t,a){var l=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:s={},children:n}=e;return l.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...s}},n)}},26127:function(e,t,a){var l=a(67294),s=a(14160),n=a(94671);const r="PageTabList",i="PageTabPanel",o="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const u=a.frontmatter.slug,b=Array.isArray(c)?c:[c],d=b.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===r)),h=b.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===i)),m=null===(t=d.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===o)),p=m.findIndex((e=>u.endsWith(e.props.href))),f=-1===p?0:p,g=0===f?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return l.createElement(n.a,{initiallyActiveTab:f},l.createElement(n.a.TabList,{className:"page-tabs-list"},m.map((e=>l.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,s.navigate)(""+("/"===e.props.href?g:g+e.props.href))},e.props.children)))),m.map(((e,t)=>l.createElement(n.a.TabPanel,{key:e.props.href},f===t?h.props.children:l.createElement("div",null)))))},u=e=>{let{children:t}=e;return l.createElement(n.a.TabList,null,t)};u.componentName=r;const b=e=>{let{href:t,slug:a,children:s}=e;return l.createElement(n.a.Tab,null,s)};b.componentName=o;const d=e=>{let{children:t}=e;return l.createElement(n.a.TabPanel,null,t)};d.componentName=i,c.TabList=u,c.Tab=b,c.TabPanel=d,t.Z=c},57674:function(e,t,a){var l=a(67294),s=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return l.createElement(s.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},l.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>l.createElement("li",{key:t},l.createElement("span",{className:"status-name"},t),l.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-status-label-code-mdx-040c6e1eb351a22b76d0.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-status-label-code-mdx-040c6e1eb351a22b76d0.js
new file mode 100644
index 00000000000..5306449dec2
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-status-label-code-mdx-040c6e1eb351a22b76d0.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[1665,8619],{7025:function(e,t,a){a.d(t,{I:function(){return s},a:function(){return r}});var l=a(67294),n=a(32719);const s=e=>{let{ariaLabel:t="error",ariaLabelledby:a,ariaHidden:s=!0,className:r="",color:c,size:i="s",style:o={}}=e;return l.createElement("svg",{className:[n.s.icon,n.s[i],r].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":a,"aria-hidden":s,color:c,style:o},l.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M11.1284 2.50974C11.4971 1.85436 12.4201 1.83095 12.8284 2.43952L12.8716 2.50974L22.4341 19.5097C22.7965 20.1541 22.3585 20.9453 21.638 20.9973L21.5625 21H2.43749C1.69816 21 1.22338 20.2303 1.53125 19.5769L1.56592 19.5097L11.1284 2.50974ZM12 5.04L4.14699 19H19.8525L12 5.04ZM13 16V18H11V16H13ZM13 9.5V14.5H11V9.5H13Z",fill:"currentColor"}))},r=e=>{let{ariaLabel:t="playback-pause",ariaLabelledby:a,ariaHidden:s=!0,className:r="",color:c,size:i="s",style:o={}}=e;return l.createElement("svg",{className:[n.s.icon,n.s[i],r].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":a,"aria-hidden":s,color:c,style:o},l.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M17 5V19H14V5H17ZM10 5V19H7V5H10Z",fill:"currentColor"}))}},83428:function(e,t,a){a.d(t,{S:function(){return o}});var l=a(80136),n=a(67294),s=a(7444),r=a(34300),c={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,s.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const i=e=>{let{icon:t}=e;return n.createElement("span",{className:c.statusLabelIcon,"aria-hidden":"true"},t)},o=e=>{var{children:t,className:a,dataTestId:s,type:o="neutral",iconLeft:d}=e,u=(0,l._)(e,["children","className","dataTestId","type","iconLeft"]);return n.createElement("span",Object.assign({className:(0,r.c)(c.statusLabel,c[o],d&&c.statusLabelWithIcon,a),"data-testid":s},u),d&&n.createElement(i,{icon:d}),t)}},36838:function(e,t,a){a.r(t);var l=a(11151),n=a(67294),s=a(83428),r=a(70476),c=a(7025),i=a(40637);const o=e=>{let{children:t,pageContext:a}=e;return n.createElement(i.default,{pageContext:a},t)};function d(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",h4:"h4",pre:"pre",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",strong:"strong",p:"p"},(0,l.ah)(),e.components),{Playground:a,IconCheckCircleFill:i,Link:o,ExternalLink:d}=t;return d||u("ExternalLink",!0),i||u("IconCheckCircleFill",!0),o||u("Link",!0),a||u("Playground",!0),n.createElement(n.Fragment,null,n.createElement(t.h2,{id:"code",style:{position:"relative"}},"Code",n.createElement(t.a,{href:"#code","aria-label":"code permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.h3,{id:"code-examples",style:{position:"relative"}},"Code examples",n.createElement(t.a,{href:"#code-examples","aria-label":"code examples permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.h4,{id:"default",style:{position:"relative"}},"Default",n.createElement(t.a,{href:"#default","aria-label":"default permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(a,{scope:{StatusLabel:s.S}},n.createElement(t.pre,null,n.createElement(t.code,{className:"language-jsx"},"import { StatusLabel } from 'hds-react';\n\n() => (\n  <div id=\"labels-no-icon\">\n    <StatusLabel>Neutral</StatusLabel>\n    <StatusLabel type=\"info\" style={{marginLeft: 'var(--spacing-s)'}}>Info</StatusLabel>\n    <StatusLabel type=\"success\" style={{marginLeft: 'var(--spacing-s)'}}>Success</StatusLabel>\n    <StatusLabel type=\"alert\" style={{marginLeft: 'var(--spacing-s)'}}>Alert</StatusLabel>\n    <StatusLabel type=\"error\" style={{marginLeft: 'var(--spacing-s)'}}>Error</StatusLabel>\n  </div>\n)\n")),n.createElement(t.pre,null,n.createElement(t.code,{className:"language-html"},'<div id="labels-no-icon">\n  <span class="hds-status-label">\n    Neutral\n  </span>\n  <span class="hds-status-label hds-status-label--info">\n    Info\n  </span>\n  <span class="hds-status-label hds-status-label--success">\n    Success\n  </span>\n  <span class="hds-status-label hds-status-label--alert">\n    Alert\n  </span>\n  <span class="hds-status-label hds-status-label--error">\n    Error\n  </span>\n</div>\n'))),"\n",n.createElement(t.h4,{id:"with-an-icon",style:{position:"relative"}},"With an icon",n.createElement(t.a,{href:"#with-an-icon","aria-label":"with an icon permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(a,{scope:{StatusLabel:s.S,IconInfoCircle:r.a5,IconCheckCircle:r.v,IconAlertCircle:r.I,IconError:c.I}},n.createElement(t.pre,null,n.createElement(t.code,{className:"language-jsx"},"import { StatusLabel, IconInfoCircle, IconCheckCircle, IconAlertCircle, IconError } from 'hds-react';\n\n() => (\n  <div id=\"labels-with-icon\">\n    <StatusLabel iconLeft={<IconInfoCircle />}>Neutral</StatusLabel>\n    <StatusLabel type=\"info\" iconLeft={<IconInfoCircle />} style={{marginLeft: 'var(--spacing-s)'}}>Info</StatusLabel>\n    <StatusLabel type=\"success\" iconLeft={<IconCheckCircle />} style={{marginLeft: 'var(--spacing-s)'}}>Success</StatusLabel>\n    <StatusLabel type=\"alert\" iconLeft={<IconAlertCircle />} style={{marginLeft: 'var(--spacing-s)'}}>Alert</StatusLabel>\n    <StatusLabel type=\"error\" iconLeft={<IconError />} style={{marginLeft: 'var(--spacing-s)'}}>Error</StatusLabel>\n  </div>\n)\n")),n.createElement(t.pre,null,n.createElement(t.code,{className:"language-html"},"<div id=\"labels-with-icon\">\n  <span class='hds-status-label hds-status-label--with-icon'>\n    <span aria-hidden='true' class='hds-status-label-icon hds-icon hds-icon--info-circle'></span>\n    Neutral\n  </span>\n  <span class='hds-status-label hds-status-label--with-icon hds-status-label--info'>\n  <span aria-hidden='true' class='hds-status-label-icon hds-icon hds-icon--info-circle'></span>\n    Info\n  </span>\n  <span class='hds-status-label hds-status-label--with-icon hds-status-label--success'>\n    <span aria-hidden='true' class='hds-status-label-icon hds-icon hds-icon--check-circle'></span>\n    Success\n  </span>\n  <span class='hds-status-label hds-status-label--with-icon hds-status-label--alert'>\n    <span aria-hidden='true' class='hds-status-label-icon hds-icon hds-icon--alert-circle'></span>\n    Alert\n  </span>\n  <span class='hds-status-label hds-status-label--with-icon hds-status-label--error'>\n    <span aria-hidden='true' class='hds-status-label-icon hds-icon hds-icon--error'></span>\n    Error\n  </span>\n</div>\n"))),"\n",n.createElement(t.h3,{id:"packages",style:{position:"relative"}},"Packages",n.createElement(t.a,{href:"#packages","aria-label":"packages permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.table,null,n.createElement(t.thead,null,n.createElement(t.tr,null,n.createElement(t.th,null,"Package"),n.createElement(t.th,null,"Included"),n.createElement(t.th,null,"Storybook link"),n.createElement(t.th,null,"Source link"))),n.createElement(t.tbody,null,n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.strong,null,"HDS React")),n.createElement(t.td,null,n.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},n.createElement(i)," Yes ")),n.createElement(t.td,null,n.createElement(o,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-statuslabel--neutral"},"View in Storybook")),n.createElement(t.td,null,n.createElement(d,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/react/src/components/statusLabel"},"View source"))),n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.strong,null,"HDS Core")),n.createElement(t.td,null,n.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},n.createElement(i)," Yes ")),n.createElement(t.td,null,n.createElement(o,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/core/?path=/story/components-status-label--default"},"View in Storybook")),n.createElement(t.td,null,n.createElement(d,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/core/src/components/status-label"},"View source"))))),"\n",n.createElement(t.h3,{id:"properties",style:{position:"relative"}},"Properties",n.createElement(t.a,{href:"#properties","aria-label":"properties permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.p,null,"Note! You can find the full list of properties in the ",n.createElement(o,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/docs/components-statuslabel--neutral"},"React Storybook.")),"\n",n.createElement(t.table,null,n.createElement(t.thead,null,n.createElement(t.tr,null,n.createElement(t.th,null,"Property"),n.createElement(t.th,null,"Description"),n.createElement(t.th,null,"Values"),n.createElement(t.th,null,"Default value"))),n.createElement(t.tbody,null,n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"type")),n.createElement(t.td,null,"The type of the status label."),n.createElement(t.td,null,n.createElement(t.code,null,'"neutral"')," ",n.createElement(t.code,null,'"success"')," ",n.createElement(t.code,null,'"info"')," ",n.createElement(t.code,null,'"alert"')," ",n.createElement(t.code,null,'"error"')),n.createElement(t.td,null,n.createElement(t.code,null,'"neutral"'))),n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"iconLeft")),n.createElement(t.td,null,"Element placed on the left side of the status label."),n.createElement(t.td,null,n.createElement(t.code,null,"ReactNode")),n.createElement(t.td,null,"-")),n.createElement(t.tr,null,n.createElement(t.td,null,"[Table 1:StatusLabel properties]"),n.createElement(t.td),n.createElement(t.td),n.createElement(t.td)))))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){return void 0===e&&(e={}),n.createElement(o,e,n.createElement(d,e))}},40637:function(e,t,a){a.r(t);var l=a(11151),n=a(67294),s=a(83428),r=a(57674),c=a(89482),i=(a(18607),a(26127));function o(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,l.ah)(),e.components);return i.Z||d("PageTabs",!1),i.Z.Tab||d("PageTabs.Tab",!0),i.Z.TabList||d("PageTabs.TabList",!0),i.Z.TabPanel||d("PageTabs.TabPanel",!0),n.createElement(n.Fragment,null,n.createElement(t.h1,{id:"statuslabel",style:{position:"relative"}},"StatusLabel",n.createElement(t.a,{href:"#statuslabel","aria-label":"statuslabel permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement("div",{class:"status-label-description"},n.createElement(s.S,{type:"info"},"Stable"),n.createElement(s.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),n.createElement(r.Z)),"\n",n.createElement(c.Z,null,"  Status labels can be used to highlight different statuses or items to the user. Status labels cannot be interacted with and they are only meant to convey relevant information."),"\n",n.createElement(i.Z,{pageContext:e.pageContext},n.createElement(i.Z.TabList,null,n.createElement(i.Z.Tab,{href:"/"},"Usage"),n.createElement(i.Z.Tab,{href:"/code"},"Code"),n.createElement(i.Z.Tab,{href:"/accessibility"},"Accessibility")),n.createElement(i.Z.TabPanel,null,e.children)))}function d(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,l.ah)(),e.components);return t?n.createElement(t,e,n.createElement(o,e)):o(e)}},89482:function(e,t,a){var l=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:n={},children:s}=e;return l.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...n}},s)}},26127:function(e,t,a){var l=a(67294),n=a(14160),s=a(94671);const r="PageTabList",c="PageTabPanel",i="PageTab",o=e=>{var t;let{pageContext:a,children:o}=e;const d=a.frontmatter.slug,u=Array.isArray(o)?o:[o],h=u.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===r)),m=u.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===c)),b=null===(t=h.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===i)),p=b.findIndex((e=>d.endsWith(e.props.href))),E=-1===p?0:p,f=0===E?d:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(d);return l.createElement(s.a,{initiallyActiveTab:E},l.createElement(s.a.TabList,{className:"page-tabs-list"},b.map((e=>l.createElement(s.a.Tab,{key:e.props.href,onClick:()=>(0,n.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),b.map(((e,t)=>l.createElement(s.a.TabPanel,{key:e.props.href},E===t?m.props.children:l.createElement("div",null)))))},d=e=>{let{children:t}=e;return l.createElement(s.a.TabList,null,t)};d.componentName=r;const u=e=>{let{href:t,slug:a,children:n}=e;return l.createElement(s.a.Tab,null,n)};u.componentName=i;const h=e=>{let{children:t}=e;return l.createElement(s.a.TabPanel,null,t)};h.componentName=c,o.TabList=d,o.Tab=u,o.TabPanel=h,t.Z=o},57674:function(e,t,a){var l=a(67294),n=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return l.createElement(n.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},l.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>l.createElement("li",{key:t},l.createElement("span",{className:"status-name"},t),l.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-status-label-index-mdx-ced499d8706f162fe755.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-status-label-index-mdx-ced499d8706f162fe755.js
new file mode 100644
index 00000000000..24968af37b1
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-status-label-index-mdx-ced499d8706f162fe755.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[677,8619],{7025:function(e,t,a){a.d(t,{I:function(){return s},a:function(){return r}});var l=a(67294),n=a(32719);const s=e=>{let{ariaLabel:t="error",ariaLabelledby:a,ariaHidden:s=!0,className:r="",color:i,size:c="s",style:o={}}=e;return l.createElement("svg",{className:[n.s.icon,n.s[c],r].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":a,"aria-hidden":s,color:i,style:o},l.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M11.1284 2.50974C11.4971 1.85436 12.4201 1.83095 12.8284 2.43952L12.8716 2.50974L22.4341 19.5097C22.7965 20.1541 22.3585 20.9453 21.638 20.9973L21.5625 21H2.43749C1.69816 21 1.22338 20.2303 1.53125 19.5769L1.56592 19.5097L11.1284 2.50974ZM12 5.04L4.14699 19H19.8525L12 5.04ZM13 16V18H11V16H13ZM13 9.5V14.5H11V9.5H13Z",fill:"currentColor"}))},r=e=>{let{ariaLabel:t="playback-pause",ariaLabelledby:a,ariaHidden:s=!0,className:r="",color:i,size:c="s",style:o={}}=e;return l.createElement("svg",{className:[n.s.icon,n.s[c],r].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":a,"aria-hidden":s,color:i,style:o},l.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M17 5V19H14V5H17ZM10 5V19H7V5H10Z",fill:"currentColor"}))}},83428:function(e,t,a){a.d(t,{S:function(){return o}});var l=a(80136),n=a(67294),s=a(7444),r=a(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,s.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const c=e=>{let{icon:t}=e;return n.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},t)},o=e=>{var{children:t,className:a,dataTestId:s,type:o="neutral",iconLeft:u}=e,d=(0,l._)(e,["children","className","dataTestId","type","iconLeft"]);return n.createElement("span",Object.assign({className:(0,r.c)(i.statusLabel,i[o],u&&i.statusLabelWithIcon,a),"data-testid":s},d),u&&n.createElement(c,{icon:u}),t)}},27158:function(e,t,a){a.r(t);var l=a(11151),n=a(67294),s=a(83428),r=a(70476),i=a(7025),c=a(40637);const o=e=>{let{children:t,pageContext:a}=e;return n.createElement(c.default,{pageContext:a},t)};function u(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",strong:"strong",h4:"h4",p:"p"},(0,l.ah)(),e.components),{PlaygroundPreview:a,InternalLink:c}=t;return c||d("InternalLink",!0),a||d("PlaygroundPreview",!0),n.createElement(n.Fragment,null,n.createElement(t.h2,{id:"usage",style:{position:"relative"}},"Usage",n.createElement(t.a,{href:"#usage","aria-label":"usage permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.h3,{id:"example",style:{position:"relative"}},"Example",n.createElement(t.a,{href:"#example","aria-label":"example permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(a,null,n.createElement(s.S,{type:"success"},"Completed"),n.createElement(s.S,{type:"alert",style:{marginLeft:"var(--spacing-s)"},iconLeft:n.createElement(r.I)},"Needs attention"),n.createElement(s.S,{type:"error",style:{marginLeft:"var(--spacing-s)"},iconLeft:n.createElement(i.I)},"Rejected")),"\n",n.createElement(t.h3,{id:"principles",style:{position:"relative"}},"Principles",n.createElement(t.a,{href:"#principles","aria-label":"principles permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.ul,null,"\n",n.createElement(t.li,null,n.createElement(t.strong,null,"A label text should always be provided with a status label.")," Do not use status labels without text or with icons only.","\n",n.createElement(t.ul,null,"\n",n.createElement(t.li,null,"Icons inside status labels are allowed if they are accompanied with a text label.","\n",n.createElement(t.ul,null,"\n",n.createElement(t.li,null,"Make sure the icon matches the visual label. Do not add an icon only for visual purposes."),"\n"),"\n"),"\n"),"\n"),"\n",n.createElement(t.li,null,"Keep labels short and concise. Use 1-2 words at maximum and do not use labels expanding to two rows."),"\n",n.createElement(t.li,null,"Use status colours consistently. You can find guidelines on when to use each status colour in the ",n.createElement(c,{href:"/foundation/design-tokens/colour#ui-colours"},"colour guidelines.")),"\n",n.createElement(t.li,null,"Status labels are often related to some other element on the page (e.g. table row). Aim to keep the status label and its related elements close to each other so the user can easily interpret the relation."),"\n"),"\n",n.createElement(t.h3,{id:"variations",style:{position:"relative"}},"Variations",n.createElement(t.a,{href:"#variations","aria-label":"variations permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.h4,{id:"default",style:{position:"relative"}},"Default",n.createElement(t.a,{href:"#default","aria-label":"default permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.p,null,"StatusLabel comes in five (5) different types. One neutral and four (4) with different status colours."),"\n",n.createElement(a,null,n.createElement(s.S,null,"Neutral"),n.createElement(s.S,{type:"info",style:{marginLeft:"var(--spacing-s)"}},"Info"),n.createElement(s.S,{type:"success",style:{marginLeft:"var(--spacing-s)"}},"Success"),n.createElement(s.S,{type:"alert",style:{marginLeft:"var(--spacing-s)"}},"Alert"),n.createElement(s.S,{type:"error",style:{marginLeft:"var(--spacing-s)"}},"Error")),"\n",n.createElement(t.h4,{id:"with-an-icon",style:{position:"relative"}},"With an icon",n.createElement(t.a,{href:"#with-an-icon","aria-label":"with an icon permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.p,null,"An icon can be used on the left side of the StatusLabel's text label. The icon should match with the text label and not be used only for visual purposes."),"\n",n.createElement(a,null,n.createElement(s.S,{iconLeft:n.createElement(r.a5)},"Neutral"),n.createElement(s.S,{type:"info",style:{marginLeft:"var(--spacing-s)"},iconLeft:n.createElement(r.a5)},"Info"),n.createElement(s.S,{type:"success",style:{marginLeft:"var(--spacing-s)"},iconLeft:n.createElement(r.v)},"Success"),n.createElement(s.S,{type:"alert",style:{marginLeft:"var(--spacing-s)"},iconLeft:n.createElement(r.I)},"Alert"),n.createElement(s.S,{type:"error",style:{marginLeft:"var(--spacing-s)"},iconLeft:n.createElement(i.I)},"Error")))}function d(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){return void 0===e&&(e={}),n.createElement(o,e,n.createElement(u,e))}},40637:function(e,t,a){a.r(t);var l=a(11151),n=a(67294),s=a(83428),r=a(57674),i=a(89482),c=(a(18607),a(26127));function o(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,l.ah)(),e.components);return c.Z||u("PageTabs",!1),c.Z.Tab||u("PageTabs.Tab",!0),c.Z.TabList||u("PageTabs.TabList",!0),c.Z.TabPanel||u("PageTabs.TabPanel",!0),n.createElement(n.Fragment,null,n.createElement(t.h1,{id:"statuslabel",style:{position:"relative"}},"StatusLabel",n.createElement(t.a,{href:"#statuslabel","aria-label":"statuslabel permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement("div",{class:"status-label-description"},n.createElement(s.S,{type:"info"},"Stable"),n.createElement(s.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),n.createElement(r.Z)),"\n",n.createElement(i.Z,null,"  Status labels can be used to highlight different statuses or items to the user. Status labels cannot be interacted with and they are only meant to convey relevant information."),"\n",n.createElement(c.Z,{pageContext:e.pageContext},n.createElement(c.Z.TabList,null,n.createElement(c.Z.Tab,{href:"/"},"Usage"),n.createElement(c.Z.Tab,{href:"/code"},"Code"),n.createElement(c.Z.Tab,{href:"/accessibility"},"Accessibility")),n.createElement(c.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,l.ah)(),e.components);return t?n.createElement(t,e,n.createElement(o,e)):o(e)}},89482:function(e,t,a){var l=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:n={},children:s}=e;return l.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...n}},s)}},26127:function(e,t,a){var l=a(67294),n=a(14160),s=a(94671);const r="PageTabList",i="PageTabPanel",c="PageTab",o=e=>{var t;let{pageContext:a,children:o}=e;const u=a.frontmatter.slug,d=Array.isArray(o)?o:[o],m=d.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===r)),h=d.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===i)),p=null===(t=m.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===c)),b=p.findIndex((e=>u.endsWith(e.props.href))),f=-1===b?0:b,g=0===f?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return l.createElement(s.a,{initiallyActiveTab:f},l.createElement(s.a.TabList,{className:"page-tabs-list"},p.map((e=>l.createElement(s.a.Tab,{key:e.props.href,onClick:()=>(0,n.navigate)(""+("/"===e.props.href?g:g+e.props.href))},e.props.children)))),p.map(((e,t)=>l.createElement(s.a.TabPanel,{key:e.props.href},f===t?h.props.children:l.createElement("div",null)))))},u=e=>{let{children:t}=e;return l.createElement(s.a.TabList,null,t)};u.componentName=r;const d=e=>{let{href:t,slug:a,children:n}=e;return l.createElement(s.a.Tab,null,n)};d.componentName=c;const m=e=>{let{children:t}=e;return l.createElement(s.a.TabPanel,null,t)};m.componentName=i,o.TabList=u,o.Tab=d,o.TabPanel=m,t.Z=o},57674:function(e,t,a){var l=a(67294),n=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return l.createElement(n.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},l.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>l.createElement("li",{key:t},l.createElement("span",{className:"status-name"},t),l.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-status-label-tabs-mdx-d8c239d36f6a193de0e1.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-status-label-tabs-mdx-d8c239d36f6a193de0e1.js
new file mode 100644
index 00000000000..ac7edf7a150
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-status-label-tabs-mdx-d8c239d36f6a193de0e1.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[8619],{83428:function(e,t,a){a.d(t,{S:function(){return i}});var s=a(80136),l=a(67294),n=a(7444),r=a(34300),c={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:t}=e;return l.createElement("span",{className:c.statusLabelIcon,"aria-hidden":"true"},t)},i=e=>{var{children:t,className:a,dataTestId:n,type:i="neutral",iconLeft:b}=e,u=(0,s._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(c.statusLabel,c[i],b&&c.statusLabelWithIcon,a),"data-testid":n},u),b&&l.createElement(o,{icon:b}),t)}},40637:function(e,t,a){a.r(t);var s=a(11151),l=a(67294),n=a(83428),r=a(57674),c=a(89482),o=(a(18607),a(26127));function i(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,s.ah)(),e.components);return o.Z||b("PageTabs",!1),o.Z.Tab||b("PageTabs.Tab",!0),o.Z.TabList||b("PageTabs.TabList",!0),o.Z.TabPanel||b("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"statuslabel",style:{position:"relative"}},"StatusLabel",l.createElement(t.a,{href:"#statuslabel","aria-label":"statuslabel permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(n.S,{type:"info"},"Stable"),l.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(c.Z,null,"  Status labels can be used to highlight different statuses or items to the user. Status labels cannot be interacted with and they are only meant to convey relevant information."),"\n",l.createElement(o.Z,{pageContext:e.pageContext},l.createElement(o.Z.TabList,null,l.createElement(o.Z.Tab,{href:"/"},"Usage"),l.createElement(o.Z.Tab,{href:"/code"},"Code"),l.createElement(o.Z.Tab,{href:"/accessibility"},"Accessibility")),l.createElement(o.Z.TabPanel,null,e.children)))}function b(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,s.ah)(),e.components);return t?l.createElement(t,e,l.createElement(i,e)):i(e)}},89482:function(e,t,a){var s=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:l={},children:n}=e;return s.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...l}},n)}},26127:function(e,t,a){var s=a(67294),l=a(14160),n=a(94671);const r="PageTabList",c="PageTabPanel",o="PageTab",i=e=>{var t;let{pageContext:a,children:i}=e;const b=a.frontmatter.slug,u=Array.isArray(i)?i:[i],d=u.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===r)),m=u.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===c)),h=null===(t=d.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===o)),p=h.findIndex((e=>b.endsWith(e.props.href))),_=-1===p?0:p,f=0===_?b:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(b);return s.createElement(n.a,{initiallyActiveTab:_},s.createElement(n.a.TabList,{className:"page-tabs-list"},h.map((e=>s.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),h.map(((e,t)=>s.createElement(n.a.TabPanel,{key:e.props.href},_===t?m.props.children:s.createElement("div",null)))))},b=e=>{let{children:t}=e;return s.createElement(n.a.TabList,null,t)};b.componentName=r;const u=e=>{let{href:t,slug:a,children:l}=e;return s.createElement(n.a.Tab,null,l)};u.componentName=o;const d=e=>{let{children:t}=e;return s.createElement(n.a.TabPanel,null,t)};d.componentName=c,i.TabList=b,i.Tab=u,i.TabPanel=d,t.Z=i},57674:function(e,t,a){var s=a(67294),l=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return s.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},s.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>s.createElement("li",{key:t},s.createElement("span",{className:"status-name"},t),s.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-step-by-step-accessibility-mdx-b09ed3b674e32ffd3167.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-step-by-step-accessibility-mdx-b09ed3b674e32ffd3167.js
new file mode 100644
index 00000000000..136cb9708ff
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-step-by-step-accessibility-mdx-b09ed3b674e32ffd3167.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[5932,4201],{83428:function(e,t,a){a.d(t,{S:function(){return o}});var s=a(80136),l=a(67294),n=a(7444),r=a(34300),c={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const i=e=>{let{icon:t}=e;return l.createElement("span",{className:c.statusLabelIcon,"aria-hidden":"true"},t)},o=e=>{var{children:t,className:a,dataTestId:n,type:o="neutral",iconLeft:u}=e,d=(0,s._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(c.statusLabel,c[o],u&&c.statusLabelWithIcon,a),"data-testid":n},d),u&&l.createElement(i,{icon:u}),t)}},5869:function(e,t,a){a.r(t);var s=a(11151),l=a(67294),n=a(12224);const r=e=>{let{children:t,pageContext:a}=e;return l.createElement(n.default,{pageContext:a},t)};function c(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",code:"code"},(0,s.ah)(),e.components);return l.createElement(l.Fragment,null,l.createElement(t.h2,{id:"accessibility",style:{position:"relative"}},"Accessibility",l.createElement(t.a,{href:"#accessibility","aria-label":"accessibility permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h3,{id:"pay-attention-to",style:{position:"relative"}},"Pay attention to",l.createElement(t.a,{href:"#pay-attention-to","aria-label":"pay attention to permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,"Make sure that that the main heading for StepByStep is in accordance to your page's heading ranks. The default value for the ",l.createElement(t.code,null,"headerLevel")," prop in the HDS react component is 2."),"\n"))}t.default=function(e){return void 0===e&&(e={}),l.createElement(r,e,l.createElement(c,e))}},12224:function(e,t,a){a.r(t);var s=a(11151),l=a(67294),n=a(83428),r=a(57674),c=a(89482),i=a(26127);function o(e){const t=Object.assign({h1:"h1",a:"a",span:"span",p:"p"},(0,s.ah)(),e.components);return i.Z||u("PageTabs",!1),i.Z.Tab||u("PageTabs.Tab",!0),i.Z.TabList||u("PageTabs.TabList",!0),i.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"stepbystep",style:{position:"relative"}},"StepByStep",l.createElement(t.a,{href:"#stepbystep","aria-label":"stepbystep permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{className:"status-label-description"},l.createElement(n.S,{type:"alert"},"Beta"),l.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(c.Z,null,"StepByStep component is useful for visualising a process in steps. The component supports numbered list for cases where the steps must be completed in a specific order, and unnumbered list for cases where the steps are more of a guideline."),"\n",l.createElement(i.Z,{pageContext:e.pageContext},l.createElement(i.Z.TabList,null,l.createElement(i.Z.Tab,{href:"/"},l.createElement(t.p,null,"Usage")),l.createElement(i.Z.Tab,{href:"/code"},l.createElement(t.p,null,"Code")),l.createElement(i.Z.Tab,{href:"/accessibility"},l.createElement(t.p,null,"Accessibility"))),l.createElement(i.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,s.ah)(),e.components);return t?l.createElement(t,e,l.createElement(o,e)):o(e)}},89482:function(e,t,a){var s=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:l={},children:n}=e;return s.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...l}},n)}},26127:function(e,t,a){var s=a(67294),l=a(14160),n=a(94671);const r="PageTabList",c="PageTabPanel",i="PageTab",o=e=>{var t;let{pageContext:a,children:o}=e;const u=a.frontmatter.slug,d=Array.isArray(o)?o:[o],b=d.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===r)),p=d.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===c)),h=null===(t=b.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===i)),m=h.findIndex((e=>u.endsWith(e.props.href))),f=-1===m?0:m,_=0===f?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return s.createElement(n.a,{initiallyActiveTab:f},s.createElement(n.a.TabList,{className:"page-tabs-list"},h.map((e=>s.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?_:_+e.props.href))},e.props.children)))),h.map(((e,t)=>s.createElement(n.a.TabPanel,{key:e.props.href},f===t?p.props.children:s.createElement("div",null)))))},u=e=>{let{children:t}=e;return s.createElement(n.a.TabList,null,t)};u.componentName=r;const d=e=>{let{href:t,slug:a,children:l}=e;return s.createElement(n.a.Tab,null,l)};d.componentName=i;const b=e=>{let{children:t}=e;return s.createElement(n.a.TabPanel,null,t)};b.componentName=c,o.TabList=u,o.Tab=d,o.TabPanel=b,t.Z=o},57674:function(e,t,a){var s=a(67294),l=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return s.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},s.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>s.createElement("li",{key:t},s.createElement("span",{className:"status-name"},t),s.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-step-by-step-code-mdx-7852d84171a184ece306.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-step-by-step-code-mdx-7852d84171a184ece306.js
new file mode 100644
index 00000000000..5737296f652
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-step-by-step-code-mdx-7852d84171a184ece306.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[7011,4201],{83428:function(e,t,n){n.d(t,{S:function(){return o}});var l=n(80136),s=n(67294),a=n(7444),r=n(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,a.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const c=e=>{let{icon:t}=e;return s.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},t)},o=e=>{var{children:t,className:n,dataTestId:a,type:o="neutral",iconLeft:p}=e,d=(0,l._)(e,["children","className","dataTestId","type","iconLeft"]);return s.createElement("span",Object.assign({className:(0,r.c)(i.statusLabel,i[o],p&&i.statusLabelWithIcon,n),"data-testid":a},d),p&&s.createElement(c,{icon:p}),t)}},73043:function(e,t,n){n.d(t,{S:function(){return h}});var l=n(80136),s=n(67294),a=n(34300),r=n(7444),i=n(17882),c=n(21662),o={container:"StepByStep-module_container__2EXO7",stepsContainer:"StepByStep-module_stepsContainer__2VeMi step-by-step_hds-step-by-step__steps-container__3gYZa",stepItem:"StepByStep-module_stepItem__30zfm step-by-step_hds-step-by-step__step-item__2bods",stepItemTitle:"StepByStep-module_stepItemTitle__tgqFr step-by-step_hds-step-by-step__step-item-title__3vW57"};(0,r.s)('.step-by-step_hds-step-by-step__container__3ENCq{position:relative}.step-by-step_hds-step-by-step__container__3ENCq h1{font-size:2em;margin:.67em 0}.step-by-step_hds-step-by-step__steps-container__3gYZa{--title-font-size:var(--fontsize-heading-m);--title-line-height:var(--lineheight-xl);counter-reset:item;margin:0;padding:0}ol.step-by-step_hds-step-by-step__steps-container__3gYZa{--circle-size:48px;--step-left-padding:96px}.step-by-step_hds-step-by-step__step-item__2bods:after,.step-by-step_hds-step-by-step__step-item__2bods:before{box-sizing:border-box;content:"";display:block;left:calc(var(--circle-size) / 2 + var(--step-left-padding) / 2);position:absolute;top:calc(var(--spacing-l) + (var(--title-font-size) * var(--title-line-height) / 2) - (var(--circle-size) / 2))}.step-by-step_hds-step-by-step__step-item__2bods:after{background-color:#fff;border:3px solid #000;border-radius:50%;height:var(--circle-size);transform:translateX(-100%);width:var(--circle-size);z-index:2}ol.step-by-step_hds-step-by-step__steps-container__3gYZa .step-by-step_hds-step-by-step__step-item__2bods:after{--line-height:1.3;align-items:center;content:counter(item);counter-increment:item;display:flex;font-size:1.25rem;font-weight:500;justify-content:center;line-height:var(--line-height)}.step-by-step_hds-step-by-step__step-item__2bods{background-color:var(--color-coat-of-arms-light);list-style:none;margin:var(--spacing-l) 0;position:relative}.step-by-step_hds-step-by-step__step-item__2bods,ol.step-by-step_hds-step-by-step__steps-container__3gYZa .step-by-step_hds-step-by-step__step-item__2bods{padding:var(--spacing-l) var(--spacing-l) var(--spacing-l) var(--step-left-padding)}ul.step-by-step_hds-step-by-step__steps-container__3gYZa{--circle-size:18px;--step-left-padding:var(--spacing-5-xl)}.step-by-step_hds-step-by-step__step-item-title__3vW57{font-size:var(--title-font-size);font-weight:500;line-height:var(--title-line-height);margin:0 0 16px}.step-by-step_hds-step-by-step__step-item__2bods:before{background-color:#000;height:calc(100% + var(--spacing-l));transform:translateX(-50%) translateX(calc(-.5 * var(--circle-size)));width:2px;z-index:1}.step-by-step_hds-step-by-step__step-item__2bods:last-of-type:before{display:none}.StepByStep-module_container__2EXO7{position:relative}');const p=e=>t=>{const{children:n}=t,a=(0,l._)(t,["children"]);return s.createElement("p",{key:(r=t,r.key?r.key:"string"==typeof r.children?r.children:void 0)},s.createElement(e,Object.assign({},a),n));var r},d=p(c.L),m=p(i.B),u=e=>{let{title:t,description:n,buttons:l=[],links:a=[]}=e;return s.createElement("li",{className:o.stepItem},s.createElement("p",{className:o.stepItemTitle},t),s.createElement("div",null,n&&s.createElement("p",{key:"description"},n),l.map(m),a.map(d)))},h=e=>{let{className:t,title:n,helpText:l,steps:r=[],numberedList:i=!1,headerClassName:c,headerLevel:p=2}=e;const d=(0,a.c)(o.container,t),m=n&&s.createElement("h"+p,{className:(0,a.c)(o.title,c)},n);return s.createElement("div",{className:d},s.createElement("div",null,m,s.createElement("p",{className:o.description},l)),s.createElement(i?"ol":"ul",{className:o.stepsContainer},r.map((e=>s.createElement(u,Object.assign({key:e.key||e.title},e))))))}},42097:function(e,t,n){n.r(t);var l=n(11151),s=n(67294),a=n(73043),r=n(12224);const i=e=>{let{children:t,pageContext:n}=e;return s.createElement(r.default,{pageContext:n},t)};function c(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",h4:"h4",pre:"pre",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",strong:"strong",p:"p"},(0,l.ah)(),e.components),{Playground:n,IconCheckCircleFill:r,Link:i,ExternalLink:c}=t;return c||o("ExternalLink",!0),r||o("IconCheckCircleFill",!0),i||o("Link",!0),n||o("Playground",!0),s.createElement(s.Fragment,null,s.createElement(t.h2,{id:"code",style:{position:"relative"}},"Code",s.createElement(t.a,{href:"#code","aria-label":"code permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.h3,{id:"code-examples",style:{position:"relative"}},"Code examples",s.createElement(t.a,{href:"#code-examples","aria-label":"code examples permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.h4,{id:"default",style:{position:"relative"}},"Default",s.createElement(t.a,{href:"#default","aria-label":"default permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(n,{scope:{StepByStep:a.S}},s.createElement(t.pre,null,s.createElement(t.code,{className:"language-jsx"},"import { StepByStep } from 'hds-react';\n\n() => {\n  const steps = [\n    {\n      title: 'Step 1 title',\n      description:\n        \"Here you can describe the step in detail. Keep the text compact so the user gets the big picture of the whole process and it's steps easily.\",\n      buttons: [\n        {\n          children: 'Example button',\n          href: 'https://hel.fi',\n          key: 'button',\n        },\n      ],\n    },\n    {\n      title: 'Step 2 title',\n      description: 'Step description.',\n      links: [\n        {\n          children: 'Example link',\n          href: 'https://hel.fi',\n          key: 'link',\n        },\n      ],\n    },\n    {\n      title: 'Step 3 title',\n      description: 'Step description.',\n    },\n  ];\n\n  return (\n    <StepByStep\n      title=\"Unnumbered step by step component\"\n      helpText=\"Unnumbered component is suitable for cases where the order of the steps is less important and they form more of a guideline.\"\n      steps={steps}\n    />\n  );\n}\n")),s.createElement(t.pre,null,s.createElement(t.code,{className:"language-html"},'<div class="hds-step-by-step__container">\n  <div>\n    <h2>Unnumbered step by step component</h2>\n    <p>\n      Unnumbered component is suitable for cases where the order of the steps is less important and they form more of a\n      guideline.\n    </p>\n  </div>\n  <ul class="hds-step-by-step__steps-container">\n    <li class="hds-step-by-step__step-item">\n      <p class="hds-step-by-step__step-item-title">Step 1 title</p>\n      <div>\n        <p>\n          Here you can describe the step in detail. Keep the text compact so the user gets the big picture of the whole\n          process and it\'s steps easily.\n        </p>\n        <p>\n          <button type="button" class="hds-button hds-button--primary">\n            <span class="hds-button__label">Example button</span>\n          </button>\n        </p>\n      </div>\n    </li>\n    <li class="hds-step-by-step__step-item">\n      <p class="hds-step-by-step__step-item-title">Step 2 title</p>\n      <div>\n        <p>Step description.</p>\n        <p><a href="#" class="hds-link hds-link--medium">Example link</a></p>\n      </div>\n    </li>\n    <li class="hds-step-by-step__step-item">\n      <p class="hds-step-by-step__step-item-title">Step 3 title</p>\n      <div>\n        <p>Step description.</p>\n      </div>\n    </li>\n  </ul>\n</div>\n'))),"\n",s.createElement(t.h4,{id:"numbered-list",style:{position:"relative"}},"Numbered list",s.createElement(t.a,{href:"#numbered-list","aria-label":"numbered list permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(n,{scope:{StepByStep:a.S}},s.createElement(t.pre,null,s.createElement(t.code,{className:"language-jsx"},"import { StepByStep } from 'hds-react';\n\n() => {\n  const steps = [\n    {\n      title: 'Step 1 title',\n      description:\n        \"Here you can describe the step in detail. Keep the text compact so the user gets the big picture of the whole process and it's steps easily.\",\n      buttons: [\n        {\n          children: 'Example button',\n          href: 'https://hel.fi',\n          key: 'button',\n        },\n      ],\n    },\n    {\n      title: 'Step 2 title',\n      description: 'Step description.',\n      links: [\n        {\n          children: 'Example link',\n          href: 'https://hel.fi',\n          key: 'link',\n        },\n      ],\n    },\n    {\n      title: 'Step 3 title',\n      description: 'Step description.',\n    },\n  ];\n\n  return (\n    <StepByStep\n      numberedList\n      title=\"Numbered step by step component\"\n      helpText=\"Numbered list is suitable for case where the order of the steps is important.\"\n      steps={steps}\n    />\n  );\n}\n")),s.createElement(t.pre,null,s.createElement(t.code,{className:"language-html"},'<div class="hds-step-by-step__container">\n  <div>\n    <h2>Numbered step by step component</h2>\n    <p>Numbered list is suitable for case where the order of the steps is important.</p>\n  </div>\n  <ol class="hds-step-by-step__steps-container">\n    <li class="hds-step-by-step__step-item">\n      <p class="hds-step-by-step__step-item-title">Step 1 title</p>\n      <div>\n        <p>\n          Here you can describe the step in detail. Keep the text compact so the user gets the big picture of the whole\n          process and it\'s steps easily.\n        </p>\n        <p>\n          <button type="button" class="hds-button hds-button--primary">\n            <span class="hds-button__label">Example button</span>\n          </button>\n        </p>\n      </div>\n    </li>\n    <li class="hds-step-by-step__step-item">\n      <p class="hds-step-by-step__step-item-title">Step 2 title</p>\n      <div>\n        <p>Step description.</p>\n        <p><a href="#" class="hds-link hds-link--medium">Example link</a></p>\n      </div>\n    </li>\n    <li class="hds-step-by-step__step-item">\n      <p class="hds-step-by-step__step-item-title">Step 3 title</p>\n      <div>\n        <p>Step description.</p>\n      </div>\n    </li>\n  </ol>\n</div>\n'))),"\n",s.createElement(t.h3,{id:"packages",style:{position:"relative"}},"Packages",s.createElement(t.a,{href:"#packages","aria-label":"packages permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.table,null,s.createElement(t.thead,null,s.createElement(t.tr,null,s.createElement(t.th,null,"Package"),s.createElement(t.th,null,"Included"),s.createElement(t.th,null,"Storybook link"),s.createElement(t.th,null,"Source link"))),s.createElement(t.tbody,null,s.createElement(t.tr,null,s.createElement(t.td,null,s.createElement(t.strong,null,"HDS React")),s.createElement(t.td,null,s.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},s.createElement(r)," Yes ")),s.createElement(t.td,null,s.createElement(i,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-stepbystep--regular-step-by-step"},"View in Storybook")),s.createElement(t.td,null,s.createElement(c,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/react/src/components/stepByStep"},"View source"))),s.createElement(t.tr,null,s.createElement(t.td,null,s.createElement(t.strong,null,"HDS Core")),s.createElement(t.td,null,s.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},s.createElement(r)," Yes ")),s.createElement(t.td,null,s.createElement(i,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/core/?path=/story/components-step-by-step--regular-step-by-step"},"View in Storybook")),s.createElement(t.td,null,s.createElement(c,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/core/src/components/step-by-step"},"View source"))))),"\n",s.createElement(t.h3,{id:"properties",style:{position:"relative"}},"Properties",s.createElement(t.a,{href:"#properties","aria-label":"properties permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.p,null,"Note! You can find the full list of properties in the ",s.createElement(i,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/docs/components-stepbystep--regular-step-by-step"},"React Storybook.")),"\n",s.createElement(t.table,null,s.createElement(t.thead,null,s.createElement(t.tr,null,s.createElement(t.th,null,"Property"),s.createElement(t.th,null,"Description"),s.createElement(t.th,null,"Values"),s.createElement(t.th,null,"Default value"))),s.createElement(t.tbody,null,s.createElement(t.tr,null,s.createElement(t.td,null,s.createElement(t.code,null,"className")),s.createElement(t.td,null,"Additional class names to apply to the container element."),s.createElement(t.td,null,s.createElement(t.code,null,"string")),s.createElement(t.td,null,"-")),s.createElement(t.tr,null,s.createElement(t.td,null,s.createElement(t.code,null,"headerClassName")),s.createElement(t.td,null,"Class name for the main heading."),s.createElement(t.td,null,s.createElement(t.code,null,"string")),s.createElement(t.td,null,"-")),s.createElement(t.tr,null,s.createElement(t.td,null,s.createElement(t.code,null,"headerLevel")),s.createElement(t.td,null,"Class name for the main heading."),s.createElement(t.td,null,s.createElement(t.code,null,"number")),s.createElement(t.td,null,"2")),s.createElement(t.tr,null,s.createElement(t.td,null,s.createElement(t.code,null,"helpText")),s.createElement(t.td,null,"Help text for the step by step component."),s.createElement(t.td,null,s.createElement(t.code,null,"string")),s.createElement(t.td,null,"-")),s.createElement(t.tr,null,s.createElement(t.td,null,s.createElement(t.code,null,"numberedList")),s.createElement(t.td,null,"Boolean indicating whether the steps are numbered."),s.createElement(t.td,null,s.createElement(t.code,null,"boolean")),s.createElement(t.td,null,"false")),s.createElement(t.tr,null,s.createElement(t.td,null,s.createElement(t.code,null,"steps")),s.createElement(t.td,null,"Steps for the step by step component."),s.createElement(t.td,null,s.createElement(t.code,null,"Array<StepType>")),s.createElement(t.td,null,"[]")),s.createElement(t.tr,null,s.createElement(t.td,null,s.createElement(t.code,null,"title")),s.createElement(t.td,null,"Title text for the step by step component."),s.createElement(t.td,null,s.createElement(t.code,null,"string")),s.createElement(t.td,null,"-")),s.createElement(t.tr,null,s.createElement(t.td,null,"[Table 1:StepByStep properties]"),s.createElement(t.td),s.createElement(t.td),s.createElement(t.td)))),"\n",s.createElement(t.table,null,s.createElement(t.thead,null,s.createElement(t.tr,null,s.createElement(t.th,null,"Property"),s.createElement(t.th,null,"Description"),s.createElement(t.th,null,"Values"),s.createElement(t.th,null,"Default value"))),s.createElement(t.tbody,null,s.createElement(t.tr,null,s.createElement(t.td,null,s.createElement(t.code,null,"buttons")),s.createElement(t.td,null,"List of HDS button objects for the step."),s.createElement(t.td,null,s.createElement(t.code,null,"Array<ButtonProps>")),s.createElement(t.td,null,"-")),s.createElement(t.tr,null,s.createElement(t.td,null,s.createElement(t.code,null,"description")),s.createElement(t.td,null,"Step description."),s.createElement(t.td,null,s.createElement(t.code,null,"JSX.Element"),", ",s.createElement(t.code,null,"string")),s.createElement(t.td,null,"-")),s.createElement(t.tr,null,s.createElement(t.td,null,s.createElement(t.code,null,"key")),s.createElement(t.td,null,"Optional key for the React component. Title is used unless a key is provided."),s.createElement(t.td,null,s.createElement(t.code,null,"string")),s.createElement(t.td,null,"-")),s.createElement(t.tr,null,s.createElement(t.td,null,s.createElement(t.code,null,"links")),s.createElement(t.td,null,"List of HDS link objects for the step."),s.createElement(t.td,null,s.createElement(t.code,null,"Array<LinkProps>")),s.createElement(t.td,null,"-")),s.createElement(t.tr,null,s.createElement(t.td,null,s.createElement(t.code,null,"title")),s.createElement(t.td,null,"Step title."),s.createElement(t.td,null,s.createElement(t.code,null,"string")),s.createElement(t.td,null,"-")),s.createElement(t.tr,null,s.createElement(t.td,null,"[Table 1:StepType properties]"),s.createElement(t.td),s.createElement(t.td),s.createElement(t.td)))))}function o(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){return void 0===e&&(e={}),s.createElement(i,e,s.createElement(c,e))}},12224:function(e,t,n){n.r(t);var l=n(11151),s=n(67294),a=n(83428),r=n(57674),i=n(89482),c=n(26127);function o(e){const t=Object.assign({h1:"h1",a:"a",span:"span",p:"p"},(0,l.ah)(),e.components);return c.Z||p("PageTabs",!1),c.Z.Tab||p("PageTabs.Tab",!0),c.Z.TabList||p("PageTabs.TabList",!0),c.Z.TabPanel||p("PageTabs.TabPanel",!0),s.createElement(s.Fragment,null,s.createElement(t.h1,{id:"stepbystep",style:{position:"relative"}},"StepByStep",s.createElement(t.a,{href:"#stepbystep","aria-label":"stepbystep permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement("div",{className:"status-label-description"},s.createElement(a.S,{type:"alert"},"Beta"),s.createElement(a.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),s.createElement(r.Z)),"\n",s.createElement(i.Z,null,"StepByStep component is useful for visualising a process in steps. The component supports numbered list for cases where the steps must be completed in a specific order, and unnumbered list for cases where the steps are more of a guideline."),"\n",s.createElement(c.Z,{pageContext:e.pageContext},s.createElement(c.Z.TabList,null,s.createElement(c.Z.Tab,{href:"/"},s.createElement(t.p,null,"Usage")),s.createElement(c.Z.Tab,{href:"/code"},s.createElement(t.p,null,"Code")),s.createElement(c.Z.Tab,{href:"/accessibility"},s.createElement(t.p,null,"Accessibility"))),s.createElement(c.Z.TabPanel,null,e.children)))}function p(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,l.ah)(),e.components);return t?s.createElement(t,e,s.createElement(o,e)):o(e)}},89482:function(e,t,n){var l=n(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:n="var(--fontsize-body-xl)",style:s={},children:a}=e;return l.createElement("p",{style:{fontSize:n,color:t,maxWidth:600,...s}},a)}},26127:function(e,t,n){var l=n(67294),s=n(14160),a=n(94671);const r="PageTabList",i="PageTabPanel",c="PageTab",o=e=>{var t;let{pageContext:n,children:o}=e;const p=n.frontmatter.slug,d=Array.isArray(o)?o:[o],m=d.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===r)),u=d.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===i)),h=null===(t=m.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===c)),b=h.findIndex((e=>p.endsWith(e.props.href))),E=-1===b?0:b,_=0===E?p:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(p);return l.createElement(a.a,{initiallyActiveTab:E},l.createElement(a.a.TabList,{className:"page-tabs-list"},h.map((e=>l.createElement(a.a.Tab,{key:e.props.href,onClick:()=>(0,s.navigate)(""+("/"===e.props.href?_:_+e.props.href))},e.props.children)))),h.map(((e,t)=>l.createElement(a.a.TabPanel,{key:e.props.href},E===t?u.props.children:l.createElement("div",null)))))},p=e=>{let{children:t}=e;return l.createElement(a.a.TabList,null,t)};p.componentName=r;const d=e=>{let{href:t,slug:n,children:s}=e;return l.createElement(a.a.Tab,null,s)};d.componentName=c;const m=e=>{let{children:t}=e;return l.createElement(a.a.TabPanel,null,t)};m.componentName=i,o.TabList=p,o.Tab=d,o.TabPanel=m,t.Z=o},57674:function(e,t,n){var l=n(67294),s=n(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return l.createElement(s.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},l.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>l.createElement("li",{key:t},l.createElement("span",{className:"status-name"},t),l.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-step-by-step-index-mdx-f333ef34817be266858a.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-step-by-step-index-mdx-f333ef34817be266858a.js
new file mode 100644
index 00000000000..3cb59e12978
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-step-by-step-index-mdx-f333ef34817be266858a.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[4442,4201],{83428:function(e,t,s){s.d(t,{S:function(){return c}});var a=s(80136),n=s(67294),l=s(7444),i=s(34300),r={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,l.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:t}=e;return n.createElement("span",{className:r.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:s,dataTestId:l,type:c="neutral",iconLeft:p}=e,d=(0,a._)(e,["children","className","dataTestId","type","iconLeft"]);return n.createElement("span",Object.assign({className:(0,i.c)(r.statusLabel,r[c],p&&r.statusLabelWithIcon,s),"data-testid":l},d),p&&n.createElement(o,{icon:p}),t)}},73043:function(e,t,s){s.d(t,{S:function(){return u}});var a=s(80136),n=s(67294),l=s(34300),i=s(7444),r=s(17882),o=s(21662),c={container:"StepByStep-module_container__2EXO7",stepsContainer:"StepByStep-module_stepsContainer__2VeMi step-by-step_hds-step-by-step__steps-container__3gYZa",stepItem:"StepByStep-module_stepItem__30zfm step-by-step_hds-step-by-step__step-item__2bods",stepItemTitle:"StepByStep-module_stepItemTitle__tgqFr step-by-step_hds-step-by-step__step-item-title__3vW57"};(0,i.s)('.step-by-step_hds-step-by-step__container__3ENCq{position:relative}.step-by-step_hds-step-by-step__container__3ENCq h1{font-size:2em;margin:.67em 0}.step-by-step_hds-step-by-step__steps-container__3gYZa{--title-font-size:var(--fontsize-heading-m);--title-line-height:var(--lineheight-xl);counter-reset:item;margin:0;padding:0}ol.step-by-step_hds-step-by-step__steps-container__3gYZa{--circle-size:48px;--step-left-padding:96px}.step-by-step_hds-step-by-step__step-item__2bods:after,.step-by-step_hds-step-by-step__step-item__2bods:before{box-sizing:border-box;content:"";display:block;left:calc(var(--circle-size) / 2 + var(--step-left-padding) / 2);position:absolute;top:calc(var(--spacing-l) + (var(--title-font-size) * var(--title-line-height) / 2) - (var(--circle-size) / 2))}.step-by-step_hds-step-by-step__step-item__2bods:after{background-color:#fff;border:3px solid #000;border-radius:50%;height:var(--circle-size);transform:translateX(-100%);width:var(--circle-size);z-index:2}ol.step-by-step_hds-step-by-step__steps-container__3gYZa .step-by-step_hds-step-by-step__step-item__2bods:after{--line-height:1.3;align-items:center;content:counter(item);counter-increment:item;display:flex;font-size:1.25rem;font-weight:500;justify-content:center;line-height:var(--line-height)}.step-by-step_hds-step-by-step__step-item__2bods{background-color:var(--color-coat-of-arms-light);list-style:none;margin:var(--spacing-l) 0;position:relative}.step-by-step_hds-step-by-step__step-item__2bods,ol.step-by-step_hds-step-by-step__steps-container__3gYZa .step-by-step_hds-step-by-step__step-item__2bods{padding:var(--spacing-l) var(--spacing-l) var(--spacing-l) var(--step-left-padding)}ul.step-by-step_hds-step-by-step__steps-container__3gYZa{--circle-size:18px;--step-left-padding:var(--spacing-5-xl)}.step-by-step_hds-step-by-step__step-item-title__3vW57{font-size:var(--title-font-size);font-weight:500;line-height:var(--title-line-height);margin:0 0 16px}.step-by-step_hds-step-by-step__step-item__2bods:before{background-color:#000;height:calc(100% + var(--spacing-l));transform:translateX(-50%) translateX(calc(-.5 * var(--circle-size)));width:2px;z-index:1}.step-by-step_hds-step-by-step__step-item__2bods:last-of-type:before{display:none}.StepByStep-module_container__2EXO7{position:relative}');const p=e=>t=>{const{children:s}=t,l=(0,a._)(t,["children"]);return n.createElement("p",{key:(i=t,i.key?i.key:"string"==typeof i.children?i.children:void 0)},n.createElement(e,Object.assign({},l),s));var i},d=p(o.L),h=p(r.B),m=e=>{let{title:t,description:s,buttons:a=[],links:l=[]}=e;return n.createElement("li",{className:c.stepItem},n.createElement("p",{className:c.stepItemTitle},t),n.createElement("div",null,s&&n.createElement("p",{key:"description"},s),a.map(h),l.map(d)))},u=e=>{let{className:t,title:s,helpText:a,steps:i=[],numberedList:r=!1,headerClassName:o,headerLevel:p=2}=e;const d=(0,l.c)(c.container,t),h=s&&n.createElement("h"+p,{className:(0,l.c)(c.title,o)},s);return n.createElement("div",{className:d},n.createElement("div",null,h,n.createElement("p",{className:c.description},a)),n.createElement(r?"ol":"ul",{className:c.stepsContainer},i.map((e=>n.createElement(m,Object.assign({key:e.key||e.title},e))))))}},5184:function(e,t,s){s.r(t);var a=s(11151),n=s(67294),l=s(73043),i=s(12224);const r=e=>{let{children:t,pageContext:s}=e;return n.createElement(i.default,{pageContext:s},t)};function o(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",strong:"strong",code:"code",h4:"h4",p:"p"},(0,a.ah)(),e.components),{PlaygroundPreview:s}=t;return s||function(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("PlaygroundPreview",!0),n.createElement(n.Fragment,null,n.createElement(t.h2,{id:"usage",style:{position:"relative"}},"Usage",n.createElement(t.a,{href:"#usage","aria-label":"usage permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.h3,{id:"example",style:{position:"relative"}},"Example",n.createElement(t.a,{href:"#example","aria-label":"example permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(s,null,n.createElement(l.S,{numberedList:!0,title:"Numbered step by step component",helpText:"Numbered list is suitable for case where the order of the steps is important.",steps:[{title:"Step 1 title",description:"Here you can describe the step in detail. Keep the text compact so the user gets the big picture of the whole process and its steps easily.",buttons:[{children:"Example button",href:"https://hel.fi",key:"button"}]},{title:"Step 2 title",description:"Step description.",links:[{children:"Example link",href:"https://hel.fi",key:"link"}]},{title:"Step 3 title",description:"Step description."}]})),"\n",n.createElement(t.h3,{id:"principles",style:{position:"relative"}},"Principles",n.createElement(t.a,{href:"#principles","aria-label":"principles permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.ul,null,"\n",n.createElement(t.li,null,"The purpose of the StepByStep component is to provide an easy overall picture of a process."),"\n",n.createElement(t.li,null,n.createElement(t.strong,null,"Every step should have a title.")),"\n",n.createElement(t.li,null,"Step description is optional. The description should be compact, preferably one sentence long and two at the maximum. This is because the steps should provide a quick way to understand the whole process and too long texts can hinder that experience."),"\n",n.createElement(t.li,null,"A step can have a button as a call to action, e.g. making a phone call. But a button should not direct to another site."),"\n",n.createElement(t.li,null,"A step can have a link to provide additional information."),"\n",n.createElement(t.li,null,"The button and the link should relate to the step's contents. We recommend having only one button or a link per step, but sometimes it could be reasonable to have two. Before adding a second button or a link, consider whether the step should be divided into two steps. If you add two buttons, make the second one ",n.createElement(t.code,null,'variant="secondary"'),"."),"\n"),"\n",n.createElement(t.h3,{id:"variations",style:{position:"relative"}},"Variations",n.createElement(t.a,{href:"#variations","aria-label":"variations permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.h4,{id:"default",style:{position:"relative"}},"Default",n.createElement(t.a,{href:"#default","aria-label":"default permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.p,null,"The unnumbered list is useful when the order of the steps is less important and they form more of a guideline."),"\n",n.createElement(s,null,n.createElement(l.S,{title:"Unnumbered step by step component",helpText:"The unnumbered list is useful when the order of the steps is less important and they form more of a guideline.",steps:[{title:"Step 1 title",description:"Here you can describe the step in detail. Keep the text compact so the user gets the big picture of the whole process and its steps easily.",buttons:[{children:"Example button",href:"https://hel.fi",key:"button"}]},{title:"Step 2 title",description:"Step description.",links:[{children:"Example link",href:"https://hel.fi",key:"link"}]},{title:"Step 3 title",description:"Step description."}]})),"\n",n.createElement(t.h4,{id:"numbered-list",style:{position:"relative"}},"Numbered list",n.createElement(t.a,{href:"#numbered-list","aria-label":"numbered list permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.p,null,"Numbered list is suitable for cases where the order of the steps is important."),"\n",n.createElement(s,null,n.createElement(l.S,{numberedList:!0,title:"Numbered step by step component",helpText:"Numbered list is suitable for cases where the order of the steps is important.",steps:[{title:"Step 1 title",description:"Here you can describe the step in detail. Keep the text compact so the user gets the big picture of the whole process and its steps easily.",buttons:[{children:"Example button",href:"https://hel.fi",key:"button"}]},{title:"Step 2 title",description:"Step description.",links:[{children:"Example link",href:"https://hel.fi",key:"link"}]},{title:"Step 3 title",description:"Step description."}]})))}t.default=function(e){return void 0===e&&(e={}),n.createElement(r,e,n.createElement(o,e))}},12224:function(e,t,s){s.r(t);var a=s(11151),n=s(67294),l=s(83428),i=s(57674),r=s(89482),o=s(26127);function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span",p:"p"},(0,a.ah)(),e.components);return o.Z||p("PageTabs",!1),o.Z.Tab||p("PageTabs.Tab",!0),o.Z.TabList||p("PageTabs.TabList",!0),o.Z.TabPanel||p("PageTabs.TabPanel",!0),n.createElement(n.Fragment,null,n.createElement(t.h1,{id:"stepbystep",style:{position:"relative"}},"StepByStep",n.createElement(t.a,{href:"#stepbystep","aria-label":"stepbystep permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement("div",{className:"status-label-description"},n.createElement(l.S,{type:"alert"},"Beta"),n.createElement(l.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),n.createElement(i.Z)),"\n",n.createElement(r.Z,null,"StepByStep component is useful for visualising a process in steps. The component supports numbered list for cases where the steps must be completed in a specific order, and unnumbered list for cases where the steps are more of a guideline."),"\n",n.createElement(o.Z,{pageContext:e.pageContext},n.createElement(o.Z.TabList,null,n.createElement(o.Z.Tab,{href:"/"},n.createElement(t.p,null,"Usage")),n.createElement(o.Z.Tab,{href:"/code"},n.createElement(t.p,null,"Code")),n.createElement(o.Z.Tab,{href:"/accessibility"},n.createElement(t.p,null,"Accessibility"))),n.createElement(o.Z.TabPanel,null,e.children)))}function p(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,a.ah)(),e.components);return t?n.createElement(t,e,n.createElement(c,e)):c(e)}},89482:function(e,t,s){var a=s(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:s="var(--fontsize-body-xl)",style:n={},children:l}=e;return a.createElement("p",{style:{fontSize:s,color:t,maxWidth:600,...n}},l)}},26127:function(e,t,s){var a=s(67294),n=s(14160),l=s(94671);const i="PageTabList",r="PageTabPanel",o="PageTab",c=e=>{var t;let{pageContext:s,children:c}=e;const p=s.frontmatter.slug,d=Array.isArray(c)?c:[c],h=d.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===i)),m=d.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===r)),u=null===(t=h.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===o)),b=u.findIndex((e=>p.endsWith(e.props.href))),_=-1===b?0:b,f=0===_?p:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(p);return a.createElement(l.a,{initiallyActiveTab:_},a.createElement(l.a.TabList,{className:"page-tabs-list"},u.map((e=>a.createElement(l.a.Tab,{key:e.props.href,onClick:()=>(0,n.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),u.map(((e,t)=>a.createElement(l.a.TabPanel,{key:e.props.href},_===t?m.props.children:a.createElement("div",null)))))},p=e=>{let{children:t}=e;return a.createElement(l.a.TabList,null,t)};p.componentName=i;const d=e=>{let{href:t,slug:s,children:n}=e;return a.createElement(l.a.Tab,null,n)};d.componentName=o;const h=e=>{let{children:t}=e;return a.createElement(l.a.TabPanel,null,t)};h.componentName=r,c.TabList=p,c.Tab=d,c.TabPanel=h,t.Z=c},57674:function(e,t,s){var a=s(67294),n=s(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return a.createElement(n.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},a.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>a.createElement("li",{key:t},a.createElement("span",{className:"status-name"},t),a.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-step-by-step-tabs-mdx-786b11a2b8fcbd547796.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-step-by-step-tabs-mdx-786b11a2b8fcbd547796.js
new file mode 100644
index 00000000000..80f39811b30
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-step-by-step-tabs-mdx-786b11a2b8fcbd547796.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[4201],{83428:function(e,t,a){a.d(t,{S:function(){return i}});var s=a(80136),l=a(67294),n=a(7444),r=a(34300),c={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:t}=e;return l.createElement("span",{className:c.statusLabelIcon,"aria-hidden":"true"},t)},i=e=>{var{children:t,className:a,dataTestId:n,type:i="neutral",iconLeft:u}=e,b=(0,s._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(c.statusLabel,c[i],u&&c.statusLabelWithIcon,a),"data-testid":n},b),u&&l.createElement(o,{icon:u}),t)}},12224:function(e,t,a){a.r(t);var s=a(11151),l=a(67294),n=a(83428),r=a(57674),c=a(89482),o=a(26127);function i(e){const t=Object.assign({h1:"h1",a:"a",span:"span",p:"p"},(0,s.ah)(),e.components);return o.Z||u("PageTabs",!1),o.Z.Tab||u("PageTabs.Tab",!0),o.Z.TabList||u("PageTabs.TabList",!0),o.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"stepbystep",style:{position:"relative"}},"StepByStep",l.createElement(t.a,{href:"#stepbystep","aria-label":"stepbystep permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{className:"status-label-description"},l.createElement(n.S,{type:"alert"},"Beta"),l.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(c.Z,null,"StepByStep component is useful for visualising a process in steps. The component supports numbered list for cases where the steps must be completed in a specific order, and unnumbered list for cases where the steps are more of a guideline."),"\n",l.createElement(o.Z,{pageContext:e.pageContext},l.createElement(o.Z.TabList,null,l.createElement(o.Z.Tab,{href:"/"},l.createElement(t.p,null,"Usage")),l.createElement(o.Z.Tab,{href:"/code"},l.createElement(t.p,null,"Code")),l.createElement(o.Z.Tab,{href:"/accessibility"},l.createElement(t.p,null,"Accessibility"))),l.createElement(o.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,s.ah)(),e.components);return t?l.createElement(t,e,l.createElement(i,e)):i(e)}},89482:function(e,t,a){var s=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:l={},children:n}=e;return s.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...l}},n)}},26127:function(e,t,a){var s=a(67294),l=a(14160),n=a(94671);const r="PageTabList",c="PageTabPanel",o="PageTab",i=e=>{var t;let{pageContext:a,children:i}=e;const u=a.frontmatter.slug,b=Array.isArray(i)?i:[i],d=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===r)),p=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===c)),m=null===(t=d.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===o)),h=m.findIndex((e=>u.endsWith(e.props.href))),_=-1===h?0:h,f=0===_?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return s.createElement(n.a,{initiallyActiveTab:_},s.createElement(n.a.TabList,{className:"page-tabs-list"},m.map((e=>s.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),m.map(((e,t)=>s.createElement(n.a.TabPanel,{key:e.props.href},_===t?p.props.children:s.createElement("div",null)))))},u=e=>{let{children:t}=e;return s.createElement(n.a.TabList,null,t)};u.componentName=r;const b=e=>{let{href:t,slug:a,children:l}=e;return s.createElement(n.a.Tab,null,l)};b.componentName=o;const d=e=>{let{children:t}=e;return s.createElement(n.a.TabPanel,null,t)};d.componentName=c,i.TabList=u,i.Tab=b,i.TabPanel=d,t.Z=i},57674:function(e,t,a){var s=a(67294),l=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return s.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},s.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>s.createElement("li",{key:t},s.createElement("span",{className:"status-name"},t),s.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-stepper-accessibility-mdx-13c4800e70fa24d2b836.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-stepper-accessibility-mdx-13c4800e70fa24d2b836.js
new file mode 100644
index 00000000000..3c21282b8be
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-stepper-accessibility-mdx-13c4800e70fa24d2b836.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[1372,6725],{83428:function(e,t,a){a.d(t,{S:function(){return c}});var l=a(80136),n=a(67294),s=a(7444),r=a(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,s.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:t}=e;return n.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:s,type:c="neutral",iconLeft:u}=e,d=(0,l._)(e,["children","className","dataTestId","type","iconLeft"]);return n.createElement("span",Object.assign({className:(0,r.c)(i.statusLabel,i[c],u&&i.statusLabelWithIcon,a),"data-testid":s},d),u&&n.createElement(o,{icon:u}),t)}},27257:function(e,t,a){a.r(t);var l=a(11151),n=a(67294),s=a(61056),r=a(1076);const i=e=>{let{children:t,pageContext:a}=e;return n.createElement(s.default,{pageContext:a},t)};function o(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",strong:"strong",code:"code"},(0,l.ah)(),e.components);return n.createElement(n.Fragment,null,n.createElement(t.h2,{id:"accessibility",style:{position:"relative"}},"Accessibility",n.createElement(t.a,{href:"#accessibility","aria-label":"accessibility permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.h3,{id:"pay-attention-to",style:{position:"relative"}},"Pay attention to",n.createElement(t.a,{href:"#pay-attention-to","aria-label":"pay attention to permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.ul,null,"\n",n.createElement(t.li,null,n.createElement(t.strong,null,"It is advisable to use colour combinations provided by the implementation.")," These combinations are ensured to comply with WCAG AA requirements. When customising colours, refer to ",n.createElement(r.Z,{href:"/foundation/design-tokens/colour"},"colour guidelines")," to ensure accessibility."),"\n",n.createElement(t.li,null,"Note that the step label is a mandatory property. This label will be set as the ",n.createElement(t.code,null,"aria-label")," of the step.","\n",n.createElement(t.ul,null,"\n",n.createElement(t.li,null,"This label will also be in the step heading element below the stepper."),"\n"),"\n"),"\n",n.createElement(t.li,null,"Each form step should have a heading element of the correct level. It is recommended to use ",n.createElement(t.code,null,"stepHeading")," property to render the heading automatically.","\n",n.createElement(t.ul,null,"\n",n.createElement(t.li,null,"If you render the step heading separately, make sure the focus is moved to that heading when the user is moving between steps. This has been taken care of for you if you use the ",n.createElement(t.code,null,"stepHeading")," variant."),"\n",n.createElement(t.li,null,"You can control the aria level of the heading with the ",n.createElement(t.code,null,"stepHeadingAriaLevel")," property."),"\n"),"\n"),"\n",n.createElement(t.li,null,"The component adds the ",n.createElement(t.code,null,'aria-current="step"')," attribute to the active step automatically when the ",n.createElement(t.code,null,"selectedStep")," prop is provided and it matches the currently active step's index."),"\n"))}t.default=function(e){return void 0===e&&(e={}),n.createElement(i,e,n.createElement(o,e))}},61056:function(e,t,a){a.r(t);var l=a(11151),n=a(67294),s=a(83428),r=a(12818),i=a(57674),o=a(89482),c=(a(18607),a(26127));function u(e){const t=Object.assign({h1:"h1",a:"a",span:"span",p:"p"},(0,l.ah)(),e.components),{InternalLink:a}=t;return a||d("InternalLink",!0),c.Z||d("PageTabs",!1),c.Z.Tab||d("PageTabs.Tab",!0),c.Z.TabList||d("PageTabs.TabList",!0),c.Z.TabPanel||d("PageTabs.TabPanel",!0),n.createElement(n.Fragment,null,n.createElement(t.h1,{id:"stepper",style:{position:"relative"}},"Stepper",n.createElement(t.a,{href:"#stepper","aria-label":"stepper permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement("div",{class:"status-label-description"},n.createElement(s.S,{type:"alert"},"Beta"),n.createElement(s.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),n.createElement(i.Z)),"\n",n.createElement(o.Z,null,"If a form is divided into multiple pages or steps, the Form progress component helps the user to understand the progression and to navigate between form steps."),"\n",n.createElement(r.N,{label:"Note about multi-page forms!",className:"siteNotification"},n.createElement(t.p,null,"This documentation page is about HDS multi-page stepper component. If you are looking for documentation about building multi-page forms, please refer to ",n.createElement(a,{href:"/patterns/forms/form-multi-page"},"HDS multi-page form pattern documentation page"),".")),"\n",n.createElement(c.Z,{pageContext:e.pageContext},n.createElement(c.Z.TabList,null,n.createElement(c.Z.Tab,{href:"/"},"Usage"),n.createElement(c.Z.Tab,{href:"/code"},"Code"),n.createElement(c.Z.Tab,{href:"/accessibility"},"Accessibility"),n.createElement(c.Z.Tab,{href:"/customisation"},"Customisation")),n.createElement(c.Z.TabPanel,null,e.children)))}function d(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,l.ah)(),e.components);return t?n.createElement(t,e,n.createElement(u,e)):u(e)}},89482:function(e,t,a){var l=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:n={},children:s}=e;return l.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...n}},s)}},26127:function(e,t,a){var l=a(67294),n=a(14160),s=a(94671);const r="PageTabList",i="PageTabPanel",o="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const u=a.frontmatter.slug,d=Array.isArray(c)?c:[c],m=d.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===r)),h=d.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===i)),p=null===(t=m.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===o)),b=p.findIndex((e=>u.endsWith(e.props.href))),g=-1===b?0:b,f=0===g?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return l.createElement(s.a,{initiallyActiveTab:g},l.createElement(s.a.TabList,{className:"page-tabs-list"},p.map((e=>l.createElement(s.a.Tab,{key:e.props.href,onClick:()=>(0,n.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),p.map(((e,t)=>l.createElement(s.a.TabPanel,{key:e.props.href},g===t?h.props.children:l.createElement("div",null)))))},u=e=>{let{children:t}=e;return l.createElement(s.a.TabList,null,t)};u.componentName=r;const d=e=>{let{href:t,slug:a,children:n}=e;return l.createElement(s.a.Tab,null,n)};d.componentName=o;const m=e=>{let{children:t}=e;return l.createElement(s.a.TabPanel,null,t)};m.componentName=i,c.TabList=u,c.Tab=d,c.TabPanel=m,t.Z=c},57674:function(e,t,a){var l=a(67294),n=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return l.createElement(n.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},l.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>l.createElement("li",{key:t},l.createElement("span",{className:"status-name"},t),l.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-stepper-code-mdx-c9939bc02af03f12bc15.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-stepper-code-mdx-c9939bc02af03f12bc15.js
new file mode 100644
index 00000000000..4455a7dfcb7
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-stepper-code-mdx-c9939bc02af03f12bc15.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[1817,6725],{36870:function(e,t,n){n.d(t,{I:function(){return r}});var a=n(67294),l=n(32719);const r=e=>{let{ariaLabel:t="arrow-right",ariaLabelledby:n,ariaHidden:r=!0,className:s="",color:o,size:i="s",style:c={}}=e;return a.createElement("svg",{className:[l.s.icon,l.s[i],s].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":n,"aria-hidden":r,color:o,style:c},a.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z",fill:"currentColor"}))}},7025:function(e,t,n){n.d(t,{I:function(){return r},a:function(){return s}});var a=n(67294),l=n(32719);const r=e=>{let{ariaLabel:t="error",ariaLabelledby:n,ariaHidden:r=!0,className:s="",color:o,size:i="s",style:c={}}=e;return a.createElement("svg",{className:[l.s.icon,l.s[i],s].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":n,"aria-hidden":r,color:o,style:c},a.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M11.1284 2.50974C11.4971 1.85436 12.4201 1.83095 12.8284 2.43952L12.8716 2.50974L22.4341 19.5097C22.7965 20.1541 22.3585 20.9453 21.638 20.9973L21.5625 21H2.43749C1.69816 21 1.22338 20.2303 1.53125 19.5769L1.56592 19.5097L11.1284 2.50974ZM12 5.04L4.14699 19H19.8525L12 5.04ZM13 16V18H11V16H13ZM13 9.5V14.5H11V9.5H13Z",fill:"currentColor"}))},s=e=>{let{ariaLabel:t="playback-pause",ariaLabelledby:n,ariaHidden:r=!0,className:s="",color:o,size:i="s",style:c={}}=e;return a.createElement("svg",{className:[l.s.icon,l.s[i],s].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":n,"aria-hidden":r,color:o,style:c},a.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M17 5V19H14V5H17ZM10 5V19H7V5H10Z",fill:"currentColor"}))}},83428:function(e,t,n){n.d(t,{S:function(){return c}});var a=n(80136),l=n(67294),r=n(7444),s=n(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,r.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const i=e=>{let{icon:t}=e;return l.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:n,dataTestId:r,type:c="neutral",iconLeft:d}=e,p=(0,a._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,s.c)(o.statusLabel,o[c],d&&o.statusLabelWithIcon,n),"data-testid":r},p),d&&l.createElement(i,{icon:d}),t)}},19213:function(e,t,n){n.d(t,{S:function(){return a},a:function(){return g}});var a,l,r=n(67294),s=n(7444),o=n(80136),i=n(34300),c=n(32659),d=n(7025),p=n(97640),u=n(29928),m=n(12670),h="Stepper-module_scrollButton__3V4LM",b="Stepper-module_stepperContainer__2sBZh";(0,s.s)('.helpers_visually-hidden__2-1w5{border:0;clip:"rect(0 0 0 0)";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.helpers_button-reset__pnX2v{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.helpers_text-body__M8y8G{color:var(--color-black-90);font-family:var(--font-default);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.helpers_text-medium__1_L74{font-family:var(--font-default);font-weight:500}.helpers_text-bold__280xr{font-family:var(--font-default);font-weight:700}.helpers_text-xl__2ojJT{font-size:var(--fontsize-heading-m)}.helpers_text-lg__2PYVI{font-size:var(--fontsize-heading-s)}.helpers_text-md__1Iyod{font-size:var(--fontsize-heading-xs)}.helpers_subtitle__3LFb6{font-size:var(--fontsize-body-m)}.helpers_text-sm__3txMR{font-size:var(--fontsize-body-s);line-height:var(--lineheight-xl)}.helpers_heading-xxl__3v6Ao{font-size:var(--fontsize-heading-xxl);font-weight:400;letter-spacing:-1.2px;line-height:var(--lineheight-s)}.helpers_heading-xl__3KfQm{font-size:var(--fontsize-heading-xl);font-weight:400;letter-spacing:-1px;line-height:var(--lineheight-s)}.helpers_heading-xl-mobile__3j-7b{font-size:var(--fontsize-heading-xl-mobile);font-weight:400;letter-spacing:-.8px;line-height:var(--lineheight-s)}.helpers_heading-l__2uC7A{font-size:var(--fontsize-heading-l);font-weight:400;letter-spacing:-.4px;line-height:var(--lineheight-s)}.helpers_heading-m__1HM0E{font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-.2px;line-height:32px}.helpers_heading-s__1CUUr{font-size:var(--fontsize-heading-s);font-weight:500;letter-spacing:.2px;line-height:1.4}.helpers_heading-xs__3v3Lg{font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:.4px;line-height:1.33}.helpers_heading-xxs__uXGc-{font-size:var(--fontsize-heading-xxs);font-weight:700;letter-spacing:.4px;line-height:var(--lineheight-l)}.helpers_helper-text__4m81c{color:var(--color-black-60);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs)}.Stepper-module_scrollButton__3V4LM button{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.Stepper-module_step__sJ_fq{font-family:inherit;font-size:100%;line-height:1.15;margin:0}.Stepper-module_stepperContainer__2sBZh{background-color:var(--hds-stepper-background-color);position:relative;--hds-stepper-color:var(--color-bus);--hds-stepper-background-color:var(--color-white);--hds-stepper-disabled-color:var(--color-black-20);--hds-selected-step-label-color:var(--color-black-90);--hds-not-selected-step-label-color:var(--color-bus);--hds-step-background-color:var(--color-white);--hds-step-content-color:var(--color-bus);--hds-stepper-focus-border-color:var(--color-coat-of-arms);--hds-step-width:120px;--circle-container-size:36px;--progress-line-height:2px}.Stepper-module_stepper__W0Ugt{align-items:flex-start;display:flex;justify-content:space-between;overflow:scroll;-ms-overflow-style:none;position:relative;scroll-behavior:smooth;scrollbar-width:none;width:100%}.Stepper-module_stepper__W0Ugt:focus{outline:var(--hds-stepper-focus-border-color) 3px solid}.Stepper-module_stepper__W0Ugt::-webkit-scrollbar{display:none}.Stepper-module_stepper__W0Ugt.Stepper-module_small__2k5x8{--hds-step-width:44px}.Stepper-module_stepContainer__3jt3J{background-color:var(--hds-stepper-background-color);box-sizing:border-box;display:flex;flex-shrink:0;justify-content:center;padding:3px;width:var(--hds-step-width)}.Stepper-module_label__V9Nx6{color:var(--hds-not-selected-step-label-color);font-size:var(--fontsize-body-m);font-weight:500;line-height:var(--lineheight-l);margin-bottom:0;margin-top:6px;padding-left:var(--spacing-4-xs);padding-right:var(--spacing-4-xs);text-decoration:underline}.Stepper-module_disabled__sxc_0 .Stepper-module_label__V9Nx6{color:var(--hds-stepper-disabled-color);text-decoration:none}.Stepper-module_circle__2sJm2{align-items:center;background-color:var(--hds-step-background-color);border:2px solid var(--hds-stepper-color);border-radius:16px;color:var(--hds-step-content-color);display:flex;height:28px;justify-content:center;outline:2px solid var(--hds-stepper-background-color);text-align:center;width:28px}.Stepper-module_disabled__sxc_0 .Stepper-module_circle__2sJm2{background-color:var(--hds-stepper-background-color);border:2px solid var(--hds-stepper-disabled-color);color:var(--hds-stepper-disabled-color)}.Stepper-module_selected__3yhqv .Stepper-module_circle__2sJm2{border:4px solid var(--hds-stepper-color);border-radius:18px;outline:none}.Stepper-module_selected__3yhqv .Stepper-module_label__V9Nx6{color:var(--hds-selected-step-label-color);font-weight:700;text-decoration:none}.Stepper-module_completedContainer__1Ko_a{background-color:var(--hds-stepper-color);border-radius:16px;outline:2px solid var(--hds-stepper-background-color);padding:4px}.Stepper-module_completedContainer__1Ko_a .Stepper-module_completedIcon__2UDJK{color:var(--hds-step-background-color);vertical-align:middle}.Stepper-module_step__sJ_fq{align-items:center;appearance:none;background:transparent;border:0;color:var(--hds-stepper-color);cursor:pointer;display:flex;flex-direction:column;height:100%;justify-content:center;outline:none;overflow:visible;padding:0;position:relative}.Stepper-module_step__sJ_fq:focus .Stepper-module_circle__2sJm2,.Stepper-module_step__sJ_fq:focus .Stepper-module_completedContainer__1Ko_a,.Stepper-module_step__sJ_fq:focus .Stepper-module_label__V9Nx6{outline:2px solid var(--hds-stepper-focus-border-color)}.Stepper-module_step__sJ_fq:focus-visible{outline:none}.Stepper-module_step__sJ_fq.Stepper-module_disabled__sxc_0{color:var(--hds-stepper-disabled-color);cursor:not-allowed}.Stepper-module_number__2bmDN{font-size:var(--fontsize-body-m);font-weight:500;line-height:1.15}.Stepper-module_circleContainer__VIzlQ{align-items:center;display:flex;height:var(--circle-container-size);justify-content:center;width:var(--circle-container-size);z-index:2}.Stepper-module_line__2-_Vl{display:inline;height:var(--progress-line-height);left:calc(var(--hds-step-width) / 2);line-height:var(--lineheight-l);position:absolute;transform:translateY(calc(var(--circle-container-size) / 2 + var(--progress-line-height) / 2));z-index:1}.Stepper-module_line__2-_Vl .Stepper-module_disabledLine__3Rc9w{display:inline-block;height:100%;position:relative;top:-15px;background-color:var(--hds-stepper-disabled-color)}.Stepper-module_line__2-_Vl .Stepper-module_enabledLine__2oFd_{display:inline-block;height:100%;position:relative;top:-15px;background-color:var(--hds-stepper-color)}.Stepper-module_heading__ZC5kr{margin-top:26px;width:fit-content}.Stepper-module_heading__ZC5kr:focus{border:none;outline:3px solid var(--hds-stepper-focus-border-color)}.Stepper-module_scrollButton__3V4LM{background-color:var(--hds-stepper-background-color);color:var(--hds-stepper-color);position:absolute;top:3px;z-index:10}.Stepper-module_scrollButton__3V4LM button{align-items:center;border:2px solid transparent;border-radius:unset;box-sizing:border-box;display:inline-flex;justify-content:center;overflow:hidden;width:100%}.Stepper-module_scrollButton__3V4LM button:focus{border:2px solid var(--hds-stepper-focus-border-color);outline:none}.Stepper-module_scrollButton__3V4LM.Stepper-module_scrollButtonPrevious__1LF1O{left:0}.Stepper-module_scrollButton__3V4LM.Stepper-module_scrollButtonNext__2OvI-{right:0}'),(l=a||(a={}))[l.available=0]="available",l[l.completed=1]="completed",l[l.disabled=2]="disabled",l[l.attention=3]="attention",l[l.paused=4]="paused";const _={available:{fi:"Valittavissa.",en:"Available.",sv:"Valbar."},completed:{fi:"Valmis.",en:"Completed.",sv:"Komplett."},attention:{fi:"Vaatii huomiota.",en:"Needs attention.",sv:"Behöver uppmärksamhet."},paused:{fi:"Keskeytetty.",en:"Paused.",sv:"Pausad."}},f=r.forwardRef(((e,t)=>{var{label:n,language:l="fi",index:s,renderCustomStepCountLabel:p,small:u=!1,state:m,selected:h,stepsTotal:b,renderCustomStateAriaLabel:f,onStepClick:g,dataTestId:S}=e,v=(0,o._)(e,["label","language","index","renderCustomStepCountLabel","small","state","selected","stepsTotal","renderCustomStateAriaLabel","onStepClick","dataTestId"]);return r.createElement("div",{className:"Stepper-module_stepContainer__3jt3J"},r.createElement("button",Object.assign({ref:t,type:"button",disabled:m===a.disabled,className:(0,i.c)("Stepper-module_step__sJ_fq",h&&"Stepper-module_selected__3yhqv",m===a.disabled&&"Stepper-module_disabled__sxc_0"),"aria-current":!!h&&"step","aria-label":(()=>{const e=p?p(s,b):((e,t,n)=>({en:"Step "+(t+1)+"/"+n+".",fi:"Vaihe "+(t+1)+"/"+n+".",sv:"Steg "+(t+1)+"/"+n+"."}[e]))(l,s,b);let t=f?f(s,m):((e,t)=>t===a.disabled?"":_[a[t]][e])(l,m);h&&m===a.available&&(t="");let r=n;return"."!==r.slice(-1)&&(r+="."),[r,e,t].filter((e=>e)).join(" ")})(),onClick:e=>g&&g(e,s),"data-testid":S},v),r.createElement("div",{className:"Stepper-module_circleContainer__VIzlQ"},m!==a.completed||h?r.createElement("div",{className:(0,i.c)("Stepper-module_circle__2sJm2")},m===a.attention&&r.createElement(d.I,{size:"xs","aria-hidden":!0}),m===a.paused&&r.createElement(d.a,{size:"xs","aria-hidden":!0}),(m===a.available||m===a.disabled||m===a.completed&&h)&&r.createElement("span",{className:"Stepper-module_number__2bmDN"},s+1)):r.createElement("div",{className:"Stepper-module_completedContainer__1Ko_a"},r.createElement(c.I,{className:"Stepper-module_completedIcon__2UDJK","aria-hidden":!0}))),!u&&r.createElement("p",{className:"Stepper-module_label__V9Nx6"},n)))})),g=e=>{let{className:t,language:n="fi",selectedStep:l,small:s=!1,renderCustomStepCountLabel:o,renderCustomStateAriaLabel:c,onStepClick:d,stepHeading:_,stepHeadingAriaLevel:g=2,headingClassName:S,dataTestId:v="hds-stepper",renderCustomStepHeading:x,steps:E,theme:y}=e;const w=E.length,I=(0,r.useRef)(!0),k=(0,r.useRef)(null),L=(0,r.useRef)(null),C=(0,r.useRef)([]),N=E.length,[T,z]=(0,r.useState)(!1),[A,R]=(0,r.useState)(!1),B=(0,p.u)(b,y);return C.current.length!==N&&(C.current=Array(N).fill(0).map(((e,t)=>C.current[t]||(0,r.createRef)()))),(0,r.useEffect)((()=>{if(!I.current){k.current&&k.current.focus();const e=L.current.scrollWidth/w;L.current.scrollLeft=e*(l+1)-e/2-L.current.parentNode.clientWidth/2}I.current=!1,L.current.scrollLeft>5?z(!0):z(!1),L.current.scrollWidth-(L.current.parentNode.clientWidth+L.current.scrollLeft)>5?R(!0):R(!1)}),[l]),r.createElement("div",{lang:n,className:(0,i.c)(b,B),"data-testid":v},T&&r.createElement("div",{className:(0,i.c)(h,"Stepper-module_scrollButtonPrevious__1LF1O"),"aria-hidden":"true"},r.createElement("button",{type:"button",onClick:()=>{const e=L.current.scrollWidth/w;L.current.scrollLeft-=e},tabIndex:-1},r.createElement(u.I,{size:"m"}))),A&&r.createElement("div",{className:(0,i.c)(h,"Stepper-module_scrollButtonNext__2OvI-"),"aria-hidden":"true"},r.createElement("button",{type:"button",onClick:()=>{const e=L.current.scrollWidth/w;L.current.scrollLeft+=e},tabIndex:-1},r.createElement(m.I,{size:"m"}))),r.createElement("div",{onScroll:e=>{e.target.scrollLeft&&e.target.scrollLeft>5?z(!0):z(!1),e.target.scrollWidth-(e.target.parentNode.clientWidth+e.target.scrollLeft)>5?R(!0):R(!1)},ref:L,className:(0,i.c)(t,"Stepper-module_stepper__W0Ugt",s&&"Stepper-module_small__2k5x8")},r.createElement("div",{className:"Stepper-module_line__2-_Vl","aria-hidden":!0,style:{width:"max( calc(100% - var(--hds-step-width)), calc("+w+" * var(--hds-step-width) - var(--hds-step-width) ))"}},E.map(((e,t)=>t===E.length-1?null:r.createElement("div",{key:e.label+"-"+t,style:{width:"calc( 100% / "+(w-1)+")"},className:E[t+1].state===a.disabled?"Stepper-module_disabledLine__3Rc9w":"Stepper-module_enabledLine__2oFd_"})))),E.map(((e,t)=>r.createElement(f,{ref:C.current[t],key:t+"-"+e.label,label:e.label,language:n,index:t,small:s,stepsTotal:w,selected:l===t,state:e.state,onStepClick:(e,t)=>{t===l&&_&&k.current.focus(),d(e,t)},renderCustomStepCountLabel:o,renderCustomStateAriaLabel:c,dataTestId:v+"-step-"+t})))),_&&r.createElement("div",{tabIndex:-1,ref:k,role:"heading","aria-level":g,className:(0,i.c)("Stepper-module_heading__ZC5kr helpers_heading-l__2uC7A",S)},x?x(l,w,E[l].label):((e,t,n,a)=>({en:"Step "+(t+1)+"/"+n+": "+a,fi:"Vaihe "+(t+1)+"/"+n+": "+a,sv:"Steg "+(t+1)+"/"+n+": "+a}[e]))(n,l,w,E[l].label)))}},73862:function(e,t,n){n.r(t);var a=n(11151),l=n(67294),r=n(19213),s=n(17882),o=n(70476),i=n(36870),c=n(61056);const d=e=>{let{children:t,pageContext:n}=e;return l.createElement(c.default,{pageContext:n},t)};function p(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",h4:"h4",pre:"pre",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",strong:"strong",p:"p"},(0,a.ah)(),e.components),{Playground:n,IconCheckCircleFill:c,Link:d,ExternalLink:p,IconCrossCircle:m}=t;return p||u("ExternalLink",!0),c||u("IconCheckCircleFill",!0),m||u("IconCrossCircle",!0),d||u("Link",!0),n||u("Playground",!0),l.createElement(l.Fragment,null,l.createElement(t.h2,{id:"code",style:{position:"relative"}},"Code",l.createElement(t.a,{href:"#code","aria-label":"code permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h3,{id:"code-examples",style:{position:"relative"}},"Code examples",l.createElement(t.a,{href:"#code-examples","aria-label":"code examples permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h4,{id:"default",style:{position:"relative"}},"Default",l.createElement(t.a,{href:"#default","aria-label":"default permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n,{scope:{StepState:r.S,Stepper:r.a,Button:s.B,IconArrowLeft:o.d,IconArrowRight:i.I,useReducer:l.useReducer}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},"import { StepState, Stepper, Button, IconArrowLeft, IconArrowRight } from 'hds-react';\n\n() => {\n  const commonReducer = (stepsTotal) => (state, action) => {\n    switch (action.type) {\n      case 'completeStep': {\n        const activeStepIndex = action.payload === stepsTotal - 1 ? stepsTotal - 1 : action.payload + 1;\n        return {\n          activeStepIndex,\n          steps: state.steps.map((step, index) => {\n            if (index === action.payload && index !== stepsTotal - 1) {\n              // current one but not last one\n              return {\n                state: StepState.completed,\n                label: step.label,\n              };\n            }\n            if (index === action.payload + 1) {\n              // next one\n              return {\n                state: StepState.available,\n                label: step.label,\n              };\n            }\n            return step;\n          }),\n        };\n      }\n      case 'setActive': {\n        return {\n          activeStepIndex: action.payload,\n          steps: state.steps.map((step, index) => {\n            if (index === action.payload) {\n              return {\n                state: StepState.available,\n                label: step.label,\n              };\n            }\n            return step;\n          }),\n        };\n      }\n      default:\n        throw new Error();\n    }\n  };\n  const reducer = commonReducer(5);\n  const initialState = {\n    activeStepIndex: 0,\n    steps: [\n      {\n        label: 'Step 1',\n        state: StepState.available,\n      },\n      {\n        label: 'Step 2',\n        state: StepState.disabled,\n      },\n      {\n        label: 'Step 3',\n        state: StepState.disabled,\n      },\n      {\n        label: 'Step 4 - longer text',\n        state: StepState.disabled,\n      },\n      {\n        label: 'Step 5',\n        state: StepState.disabled,\n      },\n    ],\n  };\n  const [state, dispatch] = useReducer(reducer, initialState);\n  const lastStep = state.activeStepIndex === state.steps.length - 1;\n  return (\n    <div>\n      <Stepper\n        steps={state.steps}\n        language=\"en\"\n        selectedStep={state.activeStepIndex}\n        onStepClick={(event, stepIndex) => dispatch({ type: 'setActive', payload: stepIndex })}\n      />\n      <div\n        style={{\n          display: 'flex',\n          justifyContent: 'flex-start',\n          alignItems: 'flex-end',\n          gap: '24px',\n        }}\n      >\n        <Button\n          disabled={state.activeStepIndex === 0}\n          variant=\"secondary\"\n          onClick={() => dispatch({ type: 'setActive', payload: state.activeStepIndex - 1 })}\n          style={{ height: 'fit-content', width: 'fit-content' }}\n          iconLeft={<IconArrowLeft />}\n        >\n          Previous\n        </Button>\n        <Button\n          variant={lastStep ? 'primary' : 'secondary'}\n          onClick={() => dispatch({ type: 'completeStep', payload: state.activeStepIndex })}\n          style={{ height: 'fit-content', width: 'fit-content' }}\n          iconRight={lastStep ? undefined : <IconArrowRight />}\n        >\n          {lastStep ? 'Send' : 'Next'}\n        </Button>\n      </div>\n    </div>\n  );\n}\n"))),"\n",l.createElement(t.h4,{id:"small",style:{position:"relative"}},"Small",l.createElement(t.a,{href:"#small","aria-label":"small permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n,{scope:{StepState:r.S,Stepper:r.a,Button:s.B,IconArrowLeft:o.d,IconArrowRight:i.I,useReducer:l.useReducer}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},"import { StepState, Stepper, Button, IconArrowLeft, IconArrowRight } from 'hds-react';\n\n() => {\n  const commonReducer = (stepsTotal) => (state, action) => {\n    switch (action.type) {\n      case 'completeStep': {\n        const activeStepIndex = action.payload === stepsTotal - 1 ? stepsTotal - 1 : action.payload + 1;\n        return {\n          activeStepIndex,\n          steps: state.steps.map((step, index) => {\n            if (index === action.payload && index !== stepsTotal - 1) {\n              // current one but not last one\n              return {\n                state: StepState.completed,\n                label: step.label,\n              };\n            }\n            if (index === action.payload + 1) {\n              // next one\n              return {\n                state: StepState.available,\n                label: step.label,\n              };\n            }\n            return step;\n          }),\n        };\n      }\n      case 'setActive': {\n        return {\n          activeStepIndex: action.payload,\n          steps: state.steps.map((step, index) => {\n            if (index === action.payload) {\n              return {\n                state: StepState.available,\n                label: step.label,\n              };\n            }\n            return step;\n          }),\n        };\n      }\n      default:\n        throw new Error();\n    }\n  };\n  const reducer = commonReducer(5);\n  const initialState = {\n    activeStepIndex: 0,\n    steps: [\n      {\n        label: 'Step 1',\n        state: StepState.available,\n      },\n      {\n        label: 'Step 2',\n        state: StepState.disabled,\n      },\n      {\n        label: 'Step 3',\n        state: StepState.disabled,\n      },\n      {\n        label: 'Step 4 - longer text',\n        state: StepState.disabled,\n      },\n      {\n        label: 'Step 5',\n        state: StepState.disabled,\n      },\n    ],\n  };\n  const [state, dispatch] = useReducer(reducer, initialState);\n  const lastStep = state.activeStepIndex === state.steps.length - 1;\n  return (\n    <div \n      style={{\n        maxWidth: '480px'\n      }}\n    >\n      <Stepper\n        steps={state.steps}\n        language=\"en\"\n        small\n        selectedStep={state.activeStepIndex}\n        onStepClick={(event, stepIndex) => dispatch({ type: 'setActive', payload: stepIndex })}\n      />\n      <div\n        style={{\n          height: '80px',\n          display: 'flex',\n          justifyContent: 'flex-start',\n          alignItems: 'flex-end',\n          gap: '24px',\n        }}\n      >\n        <Button\n          disabled={state.activeStepIndex === 0}\n          variant=\"secondary\"\n          onClick={() => dispatch({ type: 'setActive', payload: state.activeStepIndex - 1 })}\n          style={{ height: 'fit-content', width: 'fit-content' }}\n          iconLeft={<IconArrowLeft />}\n        >\n          Previous\n        </Button>\n        <Button\n          variant={lastStep ? 'primary' : 'secondary'}\n          onClick={() => dispatch({ type: 'completeStep', payload: state.activeStepIndex })}\n          style={{ height: 'fit-content', width: 'fit-content' }}\n          iconRight={lastStep ? undefined : <IconArrowRight />}\n        >\n          {lastStep ? 'Send' : 'Next'}\n        </Button>\n      </div>\n    </div>\n  );\n}\n"))),"\n",l.createElement(t.h4,{id:"with-a-step-heading",style:{position:"relative"}},"With a step heading",l.createElement(t.a,{href:"#with-a-step-heading","aria-label":"with a step heading permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n,{scope:{StepState:r.S,Stepper:r.a,Button:s.B,IconArrowLeft:o.d,IconArrowRight:i.I,useReducer:l.useReducer}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},"import { StepState, Stepper, Button, IconArrowLeft, IconArrowRight } from 'hds-react';\n\n() => {\n  const commonReducer = (stepsTotal) => (state, action) => {\n    switch (action.type) {\n      case 'completeStep': {\n        const activeStepIndex = action.payload === stepsTotal - 1 ? stepsTotal - 1 : action.payload + 1;\n        return {\n          activeStepIndex,\n          steps: state.steps.map((step, index) => {\n            if (index === action.payload && index !== stepsTotal - 1) {\n              // current one but not last one\n              return {\n                state: StepState.completed,\n                label: step.label,\n              };\n            }\n            if (index === action.payload + 1) {\n              // next one\n              return {\n                state: StepState.available,\n                label: step.label,\n              };\n            }\n            return step;\n          }),\n        };\n      }\n      case 'setActive': {\n        return {\n          activeStepIndex: action.payload,\n          steps: state.steps.map((step, index) => {\n            if (index === action.payload) {\n              return {\n                state: StepState.available,\n                label: step.label,\n              };\n            }\n            return step;\n          }),\n        };\n      }\n      default:\n        throw new Error();\n    }\n  };\n  const reducer = commonReducer(5);\n  const initialState = {\n    activeStepIndex: 0,\n    steps: [\n      {\n        label: 'Step 1',\n        state: StepState.available,\n      },\n      {\n        label: 'Step 2',\n        state: StepState.disabled,\n      },\n      {\n        label: 'Step 3',\n        state: StepState.disabled,\n      },\n      {\n        label: 'Step 4 - longer text',\n        state: StepState.disabled,\n      },\n      {\n        label: 'Step 5',\n        state: StepState.disabled,\n      },\n    ],\n  };\n  const [state, dispatch] = useReducer(reducer, initialState);\n  const lastStep = state.activeStepIndex === state.steps.length - 1;\n  return (\n    <div>\n      <Stepper\n        steps={state.steps}\n        language=\"en\"\n        stepHeading\n        selectedStep={state.activeStepIndex}\n        onStepClick={(event, stepIndex) => dispatch({ type: 'setActive', payload: stepIndex })}\n      />\n      <div\n        style={{\n          height: '80px',\n          display: 'flex',\n          justifyContent: 'flex-start',\n          alignItems: 'flex-end',\n          gap: '24px',\n        }}\n      >\n        <Button\n          disabled={state.activeStepIndex === 0}\n          variant=\"secondary\"\n          onClick={() => dispatch({ type: 'setActive', payload: state.activeStepIndex - 1 })}\n          style={{ height: 'fit-content', width: 'fit-content' }}\n          iconLeft={<IconArrowLeft />}\n        >\n          Previous\n        </Button>\n        <Button\n          variant={lastStep ? 'primary' : 'secondary'}\n          onClick={() => dispatch({ type: 'completeStep', payload: state.activeStepIndex })}\n          style={{ height: 'fit-content', width: 'fit-content' }}\n          iconRight={lastStep ? undefined : <IconArrowRight />}\n        >\n          {lastStep ? 'Send' : 'Next'}\n        </Button>\n      </div>\n    </div>\n  );\n}\n"))),"\n",l.createElement(t.h4,{id:"overflow",style:{position:"relative"}},"Overflow",l.createElement(t.a,{href:"#overflow","aria-label":"overflow permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n,{scope:{StepState:r.S,Stepper:r.a,Button:s.B,IconArrowLeft:o.d,IconArrowRight:i.I,useReducer:l.useReducer}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},"import { StepState, Stepper, Button, IconArrowLeft, IconArrowRight } from 'hds-react';\n\n() => {\n  const commonReducer = (stepsTotal) => (state, action) => {\n    switch (action.type) {\n      case 'completeStep': {\n        const activeStepIndex = action.payload === stepsTotal - 1 ? stepsTotal - 1 : action.payload + 1;\n        return {\n          activeStepIndex,\n          steps: state.steps.map((step, index) => {\n            if (index === action.payload && index !== stepsTotal - 1) {\n              // current one but not last one\n              return {\n                state: StepState.completed,\n                label: step.label,\n              };\n            }\n            if (index === action.payload + 1) {\n              // next one\n              return {\n                state: StepState.available,\n                label: step.label,\n              };\n            }\n            return step;\n          }),\n        };\n      }\n      case 'setActive': {\n        return {\n          activeStepIndex: action.payload,\n          steps: state.steps.map((step, index) => {\n            if (index === action.payload) {\n              return {\n                state: StepState.available,\n                label: step.label,\n              };\n            }\n            return step;\n          }),\n        };\n      }\n      default:\n        throw new Error();\n    }\n  };\n  const reducer = commonReducer(5);\n  const initialState = {\n    activeStepIndex: 0,\n    steps: [\n      {\n        label: 'Step 1',\n        state: StepState.available,\n      },\n      {\n        label: 'Step 2',\n        state: StepState.disabled,\n      },\n      {\n        label: 'Step 3',\n        state: StepState.disabled,\n      },\n      {\n        label: 'Step 4 - longer text',\n        state: StepState.disabled,\n      },\n      {\n        label: 'Step 5',\n        state: StepState.disabled,\n      },\n    ],\n  };\n  const [state, dispatch] = useReducer(reducer, initialState);\n  const lastStep = state.activeStepIndex === state.steps.length - 1;\n  return (\n    <div \n      style={{\n        maxWidth: '400px'\n      }}\n    >\n      <Stepper\n        steps={state.steps}\n        language=\"en\"\n        selectedStep={state.activeStepIndex}\n        onStepClick={(event, stepIndex) => dispatch({ type: 'setActive', payload: stepIndex })}\n      />\n      <div\n        style={{\n          display: 'flex',\n          justifyContent: 'flex-start',\n          alignItems: 'flex-end',\n          gap: '24px',\n        }}\n      >\n        <Button\n          disabled={state.activeStepIndex === 0}\n          variant=\"secondary\"\n          onClick={() => dispatch({ type: 'setActive', payload: state.activeStepIndex - 1 })}\n          style={{ height: 'fit-content', width: 'fit-content' }}\n          iconLeft={<IconArrowLeft />}\n        >\n          Previous\n        </Button>\n        <Button\n          variant={lastStep ? 'primary' : 'secondary'}\n          onClick={() => dispatch({ type: 'completeStep', payload: state.activeStepIndex })}\n          style={{ height: 'fit-content', width: 'fit-content' }}\n          iconRight={lastStep ? undefined : <IconArrowRight />}\n        >\n          {lastStep ? 'Send' : 'Next'}\n        </Button>\n      </div>\n    </div>\n  );\n}\n"))),"\n",l.createElement(t.h4,{id:"step-states",style:{position:"relative"}},"Step states",l.createElement(t.a,{href:"#step-states","aria-label":"step states permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n,{scope:{Stepper:r.a,StepState:r.S}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},"import { Stepper } from 'hds-react';\n\n() => (\n  <Stepper\n    language=\"en\"\n    onStepClick={function noRefCheck(){}}\n    selectedStep={1}\n    steps={[\n      {\n        label: 'Completed',\n        state: StepState.completed\n      },\n      {\n        label: 'Current',\n        state: StepState.available\n      },\n      {\n        label: 'Available',\n        state: StepState.available\n      },\n      {\n        label: 'Needs attention',\n        state: StepState.attention\n      },\n      {\n        label: 'Paused',\n        state: StepState.paused\n      },\n      {\n        label: 'Disabled',\n        state: StepState.disabled\n      }\n    ]}\n  />)\n"))),"\n",l.createElement(t.h3,{id:"packages",style:{position:"relative"}},"Packages",l.createElement(t.a,{href:"#packages","aria-label":"packages permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.table,null,l.createElement(t.thead,null,l.createElement(t.tr,null,l.createElement(t.th,null,"Package"),l.createElement(t.th,null,"Included"),l.createElement(t.th,null,"Storybook link"),l.createElement(t.th,null,"Source link"))),l.createElement(t.tbody,null,l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.strong,null,"HDS React")),l.createElement(t.td,null,l.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},l.createElement(c)," Yes ")),l.createElement(t.td,null,l.createElement(d,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-stepper--default"},"View in Storybook")),l.createElement(t.td,null,l.createElement(p,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/react/src/components/stepper"},"View source"))),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.strong,null,"HDS Core")),l.createElement(t.td,null,l.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},l.createElement(m)," No ")),l.createElement(t.td,null,"-"),l.createElement(t.td,null,"-")))),"\n",l.createElement(t.h3,{id:"properties",style:{position:"relative"}},"Properties",l.createElement(t.a,{href:"#properties","aria-label":"properties permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"Note! You can find the full list of properties in the ",l.createElement(d,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/docs/components-stepper--default"},"React Storybook.")),"\n",l.createElement(t.table,null,l.createElement(t.thead,null,l.createElement(t.tr,null,l.createElement(t.th,null,"Property"),l.createElement(t.th,null,"Description"),l.createElement(t.th,null,"Values"),l.createElement(t.th,null,"Default value"))),l.createElement(t.tbody,null,l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"headingClassName")),l.createElement(t.td,null,"A custom class name for step heading."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"language")),l.createElement(t.td,null,"The language of the stepper."),l.createElement(t.td,null,l.createElement(t.code,null,'"fi"')," ",l.createElement(t.code,null,'"sv"')," ",l.createElement(t.code,null,'"en"')),l.createElement(t.td,null,l.createElement(t.code,null,'"fi"'))),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"onStepClick")),l.createElement(t.td,null,"A callback function for custom action on step click."),l.createElement(t.td,null,l.createElement(t.code,null,"function")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"selectedStep")),l.createElement(t.td,null,"The index of the selected step."),l.createElement(t.td,null,l.createElement(t.code,null,"number")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"small")),l.createElement(t.td,null,"If set to true, the small variant is used."),l.createElement(t.td,null,l.createElement(t.code,null,"boolean")),l.createElement(t.td,null,"false")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"stepHeading")),l.createElement(t.td,null,"If set to true, a step heading is shown below the stepper."),l.createElement(t.td,null,l.createElement(t.code,null,"boolean")),l.createElement(t.td,null,"false")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"stepHeadingAriaLevel")),l.createElement(t.td,null,"A step heading aria level."),l.createElement(t.td,null,l.createElement(t.code,null,"number")),l.createElement(t.td,null,"2")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"steps")),l.createElement(t.td,null,"The steps of the stepper."),l.createElement(t.td,null,l.createElement(t.code,null,"Steps")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,"[Table 1:Stepper properties]"),l.createElement(t.td),l.createElement(t.td),l.createElement(t.td)))))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){return void 0===e&&(e={}),l.createElement(d,e,l.createElement(p,e))}},61056:function(e,t,n){n.r(t);var a=n(11151),l=n(67294),r=n(83428),s=n(12818),o=n(57674),i=n(89482),c=(n(18607),n(26127));function d(e){const t=Object.assign({h1:"h1",a:"a",span:"span",p:"p"},(0,a.ah)(),e.components),{InternalLink:n}=t;return n||p("InternalLink",!0),c.Z||p("PageTabs",!1),c.Z.Tab||p("PageTabs.Tab",!0),c.Z.TabList||p("PageTabs.TabList",!0),c.Z.TabPanel||p("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"stepper",style:{position:"relative"}},"Stepper",l.createElement(t.a,{href:"#stepper","aria-label":"stepper permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(r.S,{type:"alert"},"Beta"),l.createElement(r.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(o.Z)),"\n",l.createElement(i.Z,null,"If a form is divided into multiple pages or steps, the Form progress component helps the user to understand the progression and to navigate between form steps."),"\n",l.createElement(s.N,{label:"Note about multi-page forms!",className:"siteNotification"},l.createElement(t.p,null,"This documentation page is about HDS multi-page stepper component. If you are looking for documentation about building multi-page forms, please refer to ",l.createElement(n,{href:"/patterns/forms/form-multi-page"},"HDS multi-page form pattern documentation page"),".")),"\n",l.createElement(c.Z,{pageContext:e.pageContext},l.createElement(c.Z.TabList,null,l.createElement(c.Z.Tab,{href:"/"},"Usage"),l.createElement(c.Z.Tab,{href:"/code"},"Code"),l.createElement(c.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(c.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(c.Z.TabPanel,null,e.children)))}function p(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,a.ah)(),e.components);return t?l.createElement(t,e,l.createElement(d,e)):d(e)}},89482:function(e,t,n){var a=n(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:n="var(--fontsize-body-xl)",style:l={},children:r}=e;return a.createElement("p",{style:{fontSize:n,color:t,maxWidth:600,...l}},r)}},26127:function(e,t,n){var a=n(67294),l=n(14160),r=n(94671);const s="PageTabList",o="PageTabPanel",i="PageTab",c=e=>{var t;let{pageContext:n,children:c}=e;const d=n.frontmatter.slug,p=Array.isArray(c)?c:[c],u=p.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===s)),m=p.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===o)),h=null===(t=u.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===i)),b=h.findIndex((e=>d.endsWith(e.props.href))),_=-1===b?0:b,f=0===_?d:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(d);return a.createElement(r.a,{initiallyActiveTab:_},a.createElement(r.a.TabList,{className:"page-tabs-list"},h.map((e=>a.createElement(r.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),h.map(((e,t)=>a.createElement(r.a.TabPanel,{key:e.props.href},_===t?m.props.children:a.createElement("div",null)))))},d=e=>{let{children:t}=e;return a.createElement(r.a.TabList,null,t)};d.componentName=s;const p=e=>{let{href:t,slug:n,children:l}=e;return a.createElement(r.a.Tab,null,l)};p.componentName=i;const u=e=>{let{children:t}=e;return a.createElement(r.a.TabPanel,null,t)};u.componentName=o,c.TabList=d,c.Tab=p,c.TabPanel=u,t.Z=c},57674:function(e,t,n){var a=n(67294),l=n(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return a.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},a.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>a.createElement("li",{key:t},a.createElement("span",{className:"status-name"},t),a.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-stepper-customisation-mdx-daa4feb96b55d6e1671a.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-stepper-customisation-mdx-daa4feb96b55d6e1671a.js
new file mode 100644
index 00000000000..dfb7bd432a1
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-stepper-customisation-mdx-daa4feb96b55d6e1671a.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[8824,6725],{36870:function(e,t,l){l.d(t,{I:function(){return r}});var a=l(67294),n=l(32719);const r=e=>{let{ariaLabel:t="arrow-right",ariaLabelledby:l,ariaHidden:r=!0,className:o="",color:s,size:i="s",style:c={}}=e;return a.createElement("svg",{className:[n.s.icon,n.s[i],o].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":l,"aria-hidden":r,color:s,style:c},a.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z",fill:"currentColor"}))}},7025:function(e,t,l){l.d(t,{I:function(){return r},a:function(){return o}});var a=l(67294),n=l(32719);const r=e=>{let{ariaLabel:t="error",ariaLabelledby:l,ariaHidden:r=!0,className:o="",color:s,size:i="s",style:c={}}=e;return a.createElement("svg",{className:[n.s.icon,n.s[i],o].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":l,"aria-hidden":r,color:s,style:c},a.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M11.1284 2.50974C11.4971 1.85436 12.4201 1.83095 12.8284 2.43952L12.8716 2.50974L22.4341 19.5097C22.7965 20.1541 22.3585 20.9453 21.638 20.9973L21.5625 21H2.43749C1.69816 21 1.22338 20.2303 1.53125 19.5769L1.56592 19.5097L11.1284 2.50974ZM12 5.04L4.14699 19H19.8525L12 5.04ZM13 16V18H11V16H13ZM13 9.5V14.5H11V9.5H13Z",fill:"currentColor"}))},o=e=>{let{ariaLabel:t="playback-pause",ariaLabelledby:l,ariaHidden:r=!0,className:o="",color:s,size:i="s",style:c={}}=e;return a.createElement("svg",{className:[n.s.icon,n.s[i],o].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":l,"aria-hidden":r,color:s,style:c},a.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M17 5V19H14V5H17ZM10 5V19H7V5H10Z",fill:"currentColor"}))}},83428:function(e,t,l){l.d(t,{S:function(){return c}});var a=l(80136),n=l(67294),r=l(7444),o=l(34300),s={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,r.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const i=e=>{let{icon:t}=e;return n.createElement("span",{className:s.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:l,dataTestId:r,type:c="neutral",iconLeft:d}=e,p=(0,a._)(e,["children","className","dataTestId","type","iconLeft"]);return n.createElement("span",Object.assign({className:(0,o.c)(s.statusLabel,s[c],d&&s.statusLabelWithIcon,l),"data-testid":r},p),d&&n.createElement(i,{icon:d}),t)}},19213:function(e,t,l){l.d(t,{S:function(){return a},a:function(){return f}});var a,n,r=l(67294),o=l(7444),s=l(80136),i=l(34300),c=l(32659),d=l(7025),p=l(97640),u=l(29928),m=l(12670),h="Stepper-module_scrollButton__3V4LM",b="Stepper-module_stepperContainer__2sBZh";(0,o.s)('.helpers_visually-hidden__2-1w5{border:0;clip:"rect(0 0 0 0)";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.helpers_button-reset__pnX2v{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.helpers_text-body__M8y8G{color:var(--color-black-90);font-family:var(--font-default);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.helpers_text-medium__1_L74{font-family:var(--font-default);font-weight:500}.helpers_text-bold__280xr{font-family:var(--font-default);font-weight:700}.helpers_text-xl__2ojJT{font-size:var(--fontsize-heading-m)}.helpers_text-lg__2PYVI{font-size:var(--fontsize-heading-s)}.helpers_text-md__1Iyod{font-size:var(--fontsize-heading-xs)}.helpers_subtitle__3LFb6{font-size:var(--fontsize-body-m)}.helpers_text-sm__3txMR{font-size:var(--fontsize-body-s);line-height:var(--lineheight-xl)}.helpers_heading-xxl__3v6Ao{font-size:var(--fontsize-heading-xxl);font-weight:400;letter-spacing:-1.2px;line-height:var(--lineheight-s)}.helpers_heading-xl__3KfQm{font-size:var(--fontsize-heading-xl);font-weight:400;letter-spacing:-1px;line-height:var(--lineheight-s)}.helpers_heading-xl-mobile__3j-7b{font-size:var(--fontsize-heading-xl-mobile);font-weight:400;letter-spacing:-.8px;line-height:var(--lineheight-s)}.helpers_heading-l__2uC7A{font-size:var(--fontsize-heading-l);font-weight:400;letter-spacing:-.4px;line-height:var(--lineheight-s)}.helpers_heading-m__1HM0E{font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-.2px;line-height:32px}.helpers_heading-s__1CUUr{font-size:var(--fontsize-heading-s);font-weight:500;letter-spacing:.2px;line-height:1.4}.helpers_heading-xs__3v3Lg{font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:.4px;line-height:1.33}.helpers_heading-xxs__uXGc-{font-size:var(--fontsize-heading-xxs);font-weight:700;letter-spacing:.4px;line-height:var(--lineheight-l)}.helpers_helper-text__4m81c{color:var(--color-black-60);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs)}.Stepper-module_scrollButton__3V4LM button{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.Stepper-module_step__sJ_fq{font-family:inherit;font-size:100%;line-height:1.15;margin:0}.Stepper-module_stepperContainer__2sBZh{background-color:var(--hds-stepper-background-color);position:relative;--hds-stepper-color:var(--color-bus);--hds-stepper-background-color:var(--color-white);--hds-stepper-disabled-color:var(--color-black-20);--hds-selected-step-label-color:var(--color-black-90);--hds-not-selected-step-label-color:var(--color-bus);--hds-step-background-color:var(--color-white);--hds-step-content-color:var(--color-bus);--hds-stepper-focus-border-color:var(--color-coat-of-arms);--hds-step-width:120px;--circle-container-size:36px;--progress-line-height:2px}.Stepper-module_stepper__W0Ugt{align-items:flex-start;display:flex;justify-content:space-between;overflow:scroll;-ms-overflow-style:none;position:relative;scroll-behavior:smooth;scrollbar-width:none;width:100%}.Stepper-module_stepper__W0Ugt:focus{outline:var(--hds-stepper-focus-border-color) 3px solid}.Stepper-module_stepper__W0Ugt::-webkit-scrollbar{display:none}.Stepper-module_stepper__W0Ugt.Stepper-module_small__2k5x8{--hds-step-width:44px}.Stepper-module_stepContainer__3jt3J{background-color:var(--hds-stepper-background-color);box-sizing:border-box;display:flex;flex-shrink:0;justify-content:center;padding:3px;width:var(--hds-step-width)}.Stepper-module_label__V9Nx6{color:var(--hds-not-selected-step-label-color);font-size:var(--fontsize-body-m);font-weight:500;line-height:var(--lineheight-l);margin-bottom:0;margin-top:6px;padding-left:var(--spacing-4-xs);padding-right:var(--spacing-4-xs);text-decoration:underline}.Stepper-module_disabled__sxc_0 .Stepper-module_label__V9Nx6{color:var(--hds-stepper-disabled-color);text-decoration:none}.Stepper-module_circle__2sJm2{align-items:center;background-color:var(--hds-step-background-color);border:2px solid var(--hds-stepper-color);border-radius:16px;color:var(--hds-step-content-color);display:flex;height:28px;justify-content:center;outline:2px solid var(--hds-stepper-background-color);text-align:center;width:28px}.Stepper-module_disabled__sxc_0 .Stepper-module_circle__2sJm2{background-color:var(--hds-stepper-background-color);border:2px solid var(--hds-stepper-disabled-color);color:var(--hds-stepper-disabled-color)}.Stepper-module_selected__3yhqv .Stepper-module_circle__2sJm2{border:4px solid var(--hds-stepper-color);border-radius:18px;outline:none}.Stepper-module_selected__3yhqv .Stepper-module_label__V9Nx6{color:var(--hds-selected-step-label-color);font-weight:700;text-decoration:none}.Stepper-module_completedContainer__1Ko_a{background-color:var(--hds-stepper-color);border-radius:16px;outline:2px solid var(--hds-stepper-background-color);padding:4px}.Stepper-module_completedContainer__1Ko_a .Stepper-module_completedIcon__2UDJK{color:var(--hds-step-background-color);vertical-align:middle}.Stepper-module_step__sJ_fq{align-items:center;appearance:none;background:transparent;border:0;color:var(--hds-stepper-color);cursor:pointer;display:flex;flex-direction:column;height:100%;justify-content:center;outline:none;overflow:visible;padding:0;position:relative}.Stepper-module_step__sJ_fq:focus .Stepper-module_circle__2sJm2,.Stepper-module_step__sJ_fq:focus .Stepper-module_completedContainer__1Ko_a,.Stepper-module_step__sJ_fq:focus .Stepper-module_label__V9Nx6{outline:2px solid var(--hds-stepper-focus-border-color)}.Stepper-module_step__sJ_fq:focus-visible{outline:none}.Stepper-module_step__sJ_fq.Stepper-module_disabled__sxc_0{color:var(--hds-stepper-disabled-color);cursor:not-allowed}.Stepper-module_number__2bmDN{font-size:var(--fontsize-body-m);font-weight:500;line-height:1.15}.Stepper-module_circleContainer__VIzlQ{align-items:center;display:flex;height:var(--circle-container-size);justify-content:center;width:var(--circle-container-size);z-index:2}.Stepper-module_line__2-_Vl{display:inline;height:var(--progress-line-height);left:calc(var(--hds-step-width) / 2);line-height:var(--lineheight-l);position:absolute;transform:translateY(calc(var(--circle-container-size) / 2 + var(--progress-line-height) / 2));z-index:1}.Stepper-module_line__2-_Vl .Stepper-module_disabledLine__3Rc9w{display:inline-block;height:100%;position:relative;top:-15px;background-color:var(--hds-stepper-disabled-color)}.Stepper-module_line__2-_Vl .Stepper-module_enabledLine__2oFd_{display:inline-block;height:100%;position:relative;top:-15px;background-color:var(--hds-stepper-color)}.Stepper-module_heading__ZC5kr{margin-top:26px;width:fit-content}.Stepper-module_heading__ZC5kr:focus{border:none;outline:3px solid var(--hds-stepper-focus-border-color)}.Stepper-module_scrollButton__3V4LM{background-color:var(--hds-stepper-background-color);color:var(--hds-stepper-color);position:absolute;top:3px;z-index:10}.Stepper-module_scrollButton__3V4LM button{align-items:center;border:2px solid transparent;border-radius:unset;box-sizing:border-box;display:inline-flex;justify-content:center;overflow:hidden;width:100%}.Stepper-module_scrollButton__3V4LM button:focus{border:2px solid var(--hds-stepper-focus-border-color);outline:none}.Stepper-module_scrollButton__3V4LM.Stepper-module_scrollButtonPrevious__1LF1O{left:0}.Stepper-module_scrollButton__3V4LM.Stepper-module_scrollButtonNext__2OvI-{right:0}'),(n=a||(a={}))[n.available=0]="available",n[n.completed=1]="completed",n[n.disabled=2]="disabled",n[n.attention=3]="attention",n[n.paused=4]="paused";const _={available:{fi:"Valittavissa.",en:"Available.",sv:"Valbar."},completed:{fi:"Valmis.",en:"Completed.",sv:"Komplett."},attention:{fi:"Vaatii huomiota.",en:"Needs attention.",sv:"Behöver uppmärksamhet."},paused:{fi:"Keskeytetty.",en:"Paused.",sv:"Pausad."}},g=r.forwardRef(((e,t)=>{var{label:l,language:n="fi",index:o,renderCustomStepCountLabel:p,small:u=!1,state:m,selected:h,stepsTotal:b,renderCustomStateAriaLabel:g,onStepClick:f,dataTestId:v}=e,x=(0,s._)(e,["label","language","index","renderCustomStepCountLabel","small","state","selected","stepsTotal","renderCustomStateAriaLabel","onStepClick","dataTestId"]);return r.createElement("div",{className:"Stepper-module_stepContainer__3jt3J"},r.createElement("button",Object.assign({ref:t,type:"button",disabled:m===a.disabled,className:(0,i.c)("Stepper-module_step__sJ_fq",h&&"Stepper-module_selected__3yhqv",m===a.disabled&&"Stepper-module_disabled__sxc_0"),"aria-current":!!h&&"step","aria-label":(()=>{const e=p?p(o,b):((e,t,l)=>({en:"Step "+(t+1)+"/"+l+".",fi:"Vaihe "+(t+1)+"/"+l+".",sv:"Steg "+(t+1)+"/"+l+"."}[e]))(n,o,b);let t=g?g(o,m):((e,t)=>t===a.disabled?"":_[a[t]][e])(n,m);h&&m===a.available&&(t="");let r=l;return"."!==r.slice(-1)&&(r+="."),[r,e,t].filter((e=>e)).join(" ")})(),onClick:e=>f&&f(e,o),"data-testid":v},x),r.createElement("div",{className:"Stepper-module_circleContainer__VIzlQ"},m!==a.completed||h?r.createElement("div",{className:(0,i.c)("Stepper-module_circle__2sJm2")},m===a.attention&&r.createElement(d.I,{size:"xs","aria-hidden":!0}),m===a.paused&&r.createElement(d.a,{size:"xs","aria-hidden":!0}),(m===a.available||m===a.disabled||m===a.completed&&h)&&r.createElement("span",{className:"Stepper-module_number__2bmDN"},o+1)):r.createElement("div",{className:"Stepper-module_completedContainer__1Ko_a"},r.createElement(c.I,{className:"Stepper-module_completedIcon__2UDJK","aria-hidden":!0}))),!u&&r.createElement("p",{className:"Stepper-module_label__V9Nx6"},l)))})),f=e=>{let{className:t,language:l="fi",selectedStep:n,small:o=!1,renderCustomStepCountLabel:s,renderCustomStateAriaLabel:c,onStepClick:d,stepHeading:_,stepHeadingAriaLevel:f=2,headingClassName:v,dataTestId:x="hds-stepper",renderCustomStepHeading:S,steps:E,theme:y}=e;const k=E.length,w=(0,r.useRef)(!0),L=(0,r.useRef)(null),C=(0,r.useRef)(null),z=(0,r.useRef)([]),N=E.length,[I,T]=(0,r.useState)(!1),[V,H]=(0,r.useState)(!1),B=(0,p.u)(b,y);return z.current.length!==N&&(z.current=Array(N).fill(0).map(((e,t)=>z.current[t]||(0,r.createRef)()))),(0,r.useEffect)((()=>{if(!w.current){L.current&&L.current.focus();const e=C.current.scrollWidth/k;C.current.scrollLeft=e*(n+1)-e/2-C.current.parentNode.clientWidth/2}w.current=!1,C.current.scrollLeft>5?T(!0):T(!1),C.current.scrollWidth-(C.current.parentNode.clientWidth+C.current.scrollLeft)>5?H(!0):H(!1)}),[n]),r.createElement("div",{lang:l,className:(0,i.c)(b,B),"data-testid":x},I&&r.createElement("div",{className:(0,i.c)(h,"Stepper-module_scrollButtonPrevious__1LF1O"),"aria-hidden":"true"},r.createElement("button",{type:"button",onClick:()=>{const e=C.current.scrollWidth/k;C.current.scrollLeft-=e},tabIndex:-1},r.createElement(u.I,{size:"m"}))),V&&r.createElement("div",{className:(0,i.c)(h,"Stepper-module_scrollButtonNext__2OvI-"),"aria-hidden":"true"},r.createElement("button",{type:"button",onClick:()=>{const e=C.current.scrollWidth/k;C.current.scrollLeft+=e},tabIndex:-1},r.createElement(m.I,{size:"m"}))),r.createElement("div",{onScroll:e=>{e.target.scrollLeft&&e.target.scrollLeft>5?T(!0):T(!1),e.target.scrollWidth-(e.target.parentNode.clientWidth+e.target.scrollLeft)>5?H(!0):H(!1)},ref:C,className:(0,i.c)(t,"Stepper-module_stepper__W0Ugt",o&&"Stepper-module_small__2k5x8")},r.createElement("div",{className:"Stepper-module_line__2-_Vl","aria-hidden":!0,style:{width:"max( calc(100% - var(--hds-step-width)), calc("+k+" * var(--hds-step-width) - var(--hds-step-width) ))"}},E.map(((e,t)=>t===E.length-1?null:r.createElement("div",{key:e.label+"-"+t,style:{width:"calc( 100% / "+(k-1)+")"},className:E[t+1].state===a.disabled?"Stepper-module_disabledLine__3Rc9w":"Stepper-module_enabledLine__2oFd_"})))),E.map(((e,t)=>r.createElement(g,{ref:z.current[t],key:t+"-"+e.label,label:e.label,language:l,index:t,small:o,stepsTotal:k,selected:n===t,state:e.state,onStepClick:(e,t)=>{t===n&&_&&L.current.focus(),d(e,t)},renderCustomStepCountLabel:s,renderCustomStateAriaLabel:c,dataTestId:x+"-step-"+t})))),_&&r.createElement("div",{tabIndex:-1,ref:L,role:"heading","aria-level":f,className:(0,i.c)("Stepper-module_heading__ZC5kr helpers_heading-l__2uC7A",v)},S?S(n,k,E[n].label):((e,t,l,a)=>({en:"Step "+(t+1)+"/"+l+": "+a,fi:"Vaihe "+(t+1)+"/"+l+": "+a,sv:"Steg "+(t+1)+"/"+l+": "+a}[e]))(l,n,k,E[n].label)))}},36434:function(e,t,l){l.r(t);var a=l(11151),n=l(67294),r=l(19213),o=l(17882),s=l(70476),i=l(36870),c=l(61056);const d=e=>{let{children:t,pageContext:l}=e;return n.createElement(c.default,{pageContext:l},t)};function p(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",p:"p",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",pre:"pre"},(0,a.ah)(),e.components),{Playground:l}=t;return l||function(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Playground",!0),n.createElement(n.Fragment,null,n.createElement(t.h2,{id:"customisation",style:{position:"relative"}},"Customisation",n.createElement(t.a,{href:"#customisation","aria-label":"customisation permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.h3,{id:"customisation-properties",style:{position:"relative"}},"Customisation properties",n.createElement(t.a,{href:"#customisation-properties","aria-label":"customisation properties permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.p,null,"You can use the ",n.createElement(t.code,null,"theme")," property to customise the component. See all available theme variables in the table below."),"\n",n.createElement(t.table,null,n.createElement(t.thead,null,n.createElement(t.tr,null,n.createElement(t.th,null,"Theme variable"),n.createElement(t.th,null,"Description"))),n.createElement(t.tbody,null,n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"--hds-not-selected-step-label-color")),n.createElement(t.td,null,"Colour of a non-selected step label.")),n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"--hds-step-background-color")),n.createElement(t.td,null,"Background colour of a step circle.")),n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"--hds-step-content-color")),n.createElement(t.td,null,"Colour of elements inside a step.")),n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"--hds-stepper-background-color")),n.createElement(t.td,null,"Background colour of the stepper container.")),n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"--hds-stepper-color")),n.createElement(t.td,null,"Highlight colour of the stepper.")),n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"--hds-stepper-disabled-color")),n.createElement(t.td,null,"Colour of a disabled step.")),n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"--hds-stepper-focus-border-color")),n.createElement(t.td,null,"Colour of a step focus border.")))),"\n",n.createElement(t.h3,{id:"customisation-example",style:{position:"relative"}},"Customisation example",n.createElement(t.a,{href:"#customisation-example","aria-label":"customisation example permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(l,{scope:{Stepper:r.a,StepState:r.S,Button:o.B,IconArrowLeft:s.d,IconArrowRight:i.I,useReducer:n.useReducer}},n.createElement(t.pre,null,n.createElement(t.code,{className:"language-jsx"},"import { Stepper } from 'hds-react';\n\n() => {\n  const commonReducer = (stepsTotal) => (state, action) => {\n    switch (action.type) {\n      case 'completeStep': {\n        const activeStepIndex = action.payload === stepsTotal - 1 ? stepsTotal - 1 : action.payload + 1;\n        return {\n          activeStepIndex,\n          steps: state.steps.map((step, index) => {\n            if (index === action.payload && index !== stepsTotal - 1) {\n              // current one but not last one\n              return {\n                state: StepState.completed,\n                label: step.label,\n              };\n            }\n            if (index === action.payload + 1) {\n              // next one\n              return {\n                state: StepState.available,\n                label: step.label,\n              };\n            }\n            return step;\n          }),\n        };\n      }\n      case 'setActive': {\n        return {\n          activeStepIndex: action.payload,\n          steps: state.steps.map((step, index) => {\n            if (index === action.payload) {\n              return {\n                state: StepState.available,\n                label: step.label,\n              };\n            }\n            return step;\n          }),\n        };\n      }\n      default:\n        throw new Error();\n    }\n  };\n  const reducer = commonReducer(5);\n  const initialState = {\n    activeStepIndex: 0,\n    steps: [\n      {\n        label: 'Step 1',\n        state: StepState.available,\n      },\n      {\n        label: 'Step 2',\n        state: StepState.disabled,\n      },\n      {\n        label: 'Step 3',\n        state: StepState.disabled,\n      },\n      {\n        label: 'Step 4 - longer text',\n        state: StepState.disabled,\n      },\n      {\n        label: 'Step 5',\n        state: StepState.disabled,\n      },\n    ],\n  };\n  const [state, dispatch] = useReducer(reducer, initialState);\n  const lastStep = state.activeStepIndex === state.steps.length - 1;\n  return (\n    <div>\n      <Stepper\n        steps={state.steps}\n        language=\"en\"\n        selectedStep={state.activeStepIndex}\n        onStepClick={(event, stepIndex) => dispatch({ type: 'setActive', payload: stepIndex })}\n        theme={{\n          '--hds-not-selected-step-label-color': 'var(--color-black-90)',\n          '--hds-step-background-color': 'var(--color-black-5)',\n          '--hds-step-content-color': 'var(--color-black-90)',\n          '--hds-stepper-background-color': 'var(--color-white)',\n          '--hds-stepper-color': 'var(--color-black-90)',\n          '--hds-stepper-disabled-color': 'var(--color-black-30)',\n          '--hds-stepper-focus-border-color': 'var(--color-black-90)'\n        }}\n      />\n      <div\n        style={{\n          display: 'flex',\n          justifyContent: 'flex-start',\n          alignItems: 'flex-end',\n          gap: '24px',\n        }}\n      >\n        <Button\n          disabled={state.activeStepIndex === 0}\n          variant=\"secondary\"\n          onClick={() => dispatch({ type: 'setActive', payload: state.activeStepIndex - 1 })}\n          style={{ height: 'fit-content', width: 'fit-content' }}\n          iconLeft={<IconArrowLeft />}\n          theme=\"black\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant={lastStep ? 'primary' : 'secondary'}\n          onClick={() => dispatch({ type: 'completeStep', payload: state.activeStepIndex })}\n          style={{ height: 'fit-content', width: 'fit-content' }}\n          iconRight={lastStep ? undefined : <IconArrowRight />}\n          theme=\"black\"\n        >\n          {lastStep ? 'Send' : 'Next'}\n        </Button>\n      </div>\n    </div>\n  );\n}\n"))))}t.default=function(e){return void 0===e&&(e={}),n.createElement(d,e,n.createElement(p,e))}},61056:function(e,t,l){l.r(t);var a=l(11151),n=l(67294),r=l(83428),o=l(12818),s=l(57674),i=l(89482),c=(l(18607),l(26127));function d(e){const t=Object.assign({h1:"h1",a:"a",span:"span",p:"p"},(0,a.ah)(),e.components),{InternalLink:l}=t;return l||p("InternalLink",!0),c.Z||p("PageTabs",!1),c.Z.Tab||p("PageTabs.Tab",!0),c.Z.TabList||p("PageTabs.TabList",!0),c.Z.TabPanel||p("PageTabs.TabPanel",!0),n.createElement(n.Fragment,null,n.createElement(t.h1,{id:"stepper",style:{position:"relative"}},"Stepper",n.createElement(t.a,{href:"#stepper","aria-label":"stepper permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement("div",{class:"status-label-description"},n.createElement(r.S,{type:"alert"},"Beta"),n.createElement(r.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),n.createElement(s.Z)),"\n",n.createElement(i.Z,null,"If a form is divided into multiple pages or steps, the Form progress component helps the user to understand the progression and to navigate between form steps."),"\n",n.createElement(o.N,{label:"Note about multi-page forms!",className:"siteNotification"},n.createElement(t.p,null,"This documentation page is about HDS multi-page stepper component. If you are looking for documentation about building multi-page forms, please refer to ",n.createElement(l,{href:"/patterns/forms/form-multi-page"},"HDS multi-page form pattern documentation page"),".")),"\n",n.createElement(c.Z,{pageContext:e.pageContext},n.createElement(c.Z.TabList,null,n.createElement(c.Z.Tab,{href:"/"},"Usage"),n.createElement(c.Z.Tab,{href:"/code"},"Code"),n.createElement(c.Z.Tab,{href:"/accessibility"},"Accessibility"),n.createElement(c.Z.Tab,{href:"/customisation"},"Customisation")),n.createElement(c.Z.TabPanel,null,e.children)))}function p(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,a.ah)(),e.components);return t?n.createElement(t,e,n.createElement(d,e)):d(e)}},89482:function(e,t,l){var a=l(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:l="var(--fontsize-body-xl)",style:n={},children:r}=e;return a.createElement("p",{style:{fontSize:l,color:t,maxWidth:600,...n}},r)}},26127:function(e,t,l){var a=l(67294),n=l(14160),r=l(94671);const o="PageTabList",s="PageTabPanel",i="PageTab",c=e=>{var t;let{pageContext:l,children:c}=e;const d=l.frontmatter.slug,p=Array.isArray(c)?c:[c],u=p.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===o)),m=p.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===s)),h=null===(t=u.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===i)),b=h.findIndex((e=>d.endsWith(e.props.href))),_=-1===b?0:b,g=0===_?d:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(d);return a.createElement(r.a,{initiallyActiveTab:_},a.createElement(r.a.TabList,{className:"page-tabs-list"},h.map((e=>a.createElement(r.a.Tab,{key:e.props.href,onClick:()=>(0,n.navigate)(""+("/"===e.props.href?g:g+e.props.href))},e.props.children)))),h.map(((e,t)=>a.createElement(r.a.TabPanel,{key:e.props.href},_===t?m.props.children:a.createElement("div",null)))))},d=e=>{let{children:t}=e;return a.createElement(r.a.TabList,null,t)};d.componentName=o;const p=e=>{let{href:t,slug:l,children:n}=e;return a.createElement(r.a.Tab,null,n)};p.componentName=i;const u=e=>{let{children:t}=e;return a.createElement(r.a.TabPanel,null,t)};u.componentName=s,c.TabList=d,c.Tab=p,c.TabPanel=u,t.Z=c},57674:function(e,t,l){var a=l(67294),n=l(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return a.createElement(n.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},a.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>a.createElement("li",{key:t},a.createElement("span",{className:"status-name"},t),a.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-stepper-index-mdx-6ff34e81c1651e65531f.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-stepper-index-mdx-6ff34e81c1651e65531f.js
new file mode 100644
index 00000000000..cf7d6f38515
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-stepper-index-mdx-6ff34e81c1651e65531f.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[1176,6725],{36870:function(e,t,a){a.d(t,{I:function(){return s}});var l=a(67294),n=a(32719);const s=e=>{let{ariaLabel:t="arrow-right",ariaLabelledby:a,ariaHidden:s=!0,className:r="",color:i,size:o="s",style:c={}}=e;return l.createElement("svg",{className:[n.s.icon,n.s[o],r].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":a,"aria-hidden":s,color:i,style:c},l.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z",fill:"currentColor"}))}},7025:function(e,t,a){a.d(t,{I:function(){return s},a:function(){return r}});var l=a(67294),n=a(32719);const s=e=>{let{ariaLabel:t="error",ariaLabelledby:a,ariaHidden:s=!0,className:r="",color:i,size:o="s",style:c={}}=e;return l.createElement("svg",{className:[n.s.icon,n.s[o],r].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":a,"aria-hidden":s,color:i,style:c},l.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M11.1284 2.50974C11.4971 1.85436 12.4201 1.83095 12.8284 2.43952L12.8716 2.50974L22.4341 19.5097C22.7965 20.1541 22.3585 20.9453 21.638 20.9973L21.5625 21H2.43749C1.69816 21 1.22338 20.2303 1.53125 19.5769L1.56592 19.5097L11.1284 2.50974ZM12 5.04L4.14699 19H19.8525L12 5.04ZM13 16V18H11V16H13ZM13 9.5V14.5H11V9.5H13Z",fill:"currentColor"}))},r=e=>{let{ariaLabel:t="playback-pause",ariaLabelledby:a,ariaHidden:s=!0,className:r="",color:i,size:o="s",style:c={}}=e;return l.createElement("svg",{className:[n.s.icon,n.s[o],r].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":a,"aria-hidden":s,color:i,style:c},l.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M17 5V19H14V5H17ZM10 5V19H7V5H10Z",fill:"currentColor"}))}},83428:function(e,t,a){a.d(t,{S:function(){return c}});var l=a(80136),n=a(67294),s=a(7444),r=a(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,s.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:t}=e;return n.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:s,type:c="neutral",iconLeft:d}=e,p=(0,l._)(e,["children","className","dataTestId","type","iconLeft"]);return n.createElement("span",Object.assign({className:(0,r.c)(i.statusLabel,i[c],d&&i.statusLabelWithIcon,a),"data-testid":s},p),d&&n.createElement(o,{icon:d}),t)}},19213:function(e,t,a){a.d(t,{S:function(){return l},a:function(){return v}});var l,n,s=a(67294),r=a(7444),i=a(80136),o=a(34300),c=a(32659),d=a(7025),p=a(97640),u=a(29928),h=a(12670),m="Stepper-module_scrollButton__3V4LM",b="Stepper-module_stepperContainer__2sBZh";(0,r.s)('.helpers_visually-hidden__2-1w5{border:0;clip:"rect(0 0 0 0)";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.helpers_button-reset__pnX2v{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.helpers_text-body__M8y8G{color:var(--color-black-90);font-family:var(--font-default);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.helpers_text-medium__1_L74{font-family:var(--font-default);font-weight:500}.helpers_text-bold__280xr{font-family:var(--font-default);font-weight:700}.helpers_text-xl__2ojJT{font-size:var(--fontsize-heading-m)}.helpers_text-lg__2PYVI{font-size:var(--fontsize-heading-s)}.helpers_text-md__1Iyod{font-size:var(--fontsize-heading-xs)}.helpers_subtitle__3LFb6{font-size:var(--fontsize-body-m)}.helpers_text-sm__3txMR{font-size:var(--fontsize-body-s);line-height:var(--lineheight-xl)}.helpers_heading-xxl__3v6Ao{font-size:var(--fontsize-heading-xxl);font-weight:400;letter-spacing:-1.2px;line-height:var(--lineheight-s)}.helpers_heading-xl__3KfQm{font-size:var(--fontsize-heading-xl);font-weight:400;letter-spacing:-1px;line-height:var(--lineheight-s)}.helpers_heading-xl-mobile__3j-7b{font-size:var(--fontsize-heading-xl-mobile);font-weight:400;letter-spacing:-.8px;line-height:var(--lineheight-s)}.helpers_heading-l__2uC7A{font-size:var(--fontsize-heading-l);font-weight:400;letter-spacing:-.4px;line-height:var(--lineheight-s)}.helpers_heading-m__1HM0E{font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-.2px;line-height:32px}.helpers_heading-s__1CUUr{font-size:var(--fontsize-heading-s);font-weight:500;letter-spacing:.2px;line-height:1.4}.helpers_heading-xs__3v3Lg{font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:.4px;line-height:1.33}.helpers_heading-xxs__uXGc-{font-size:var(--fontsize-heading-xxs);font-weight:700;letter-spacing:.4px;line-height:var(--lineheight-l)}.helpers_helper-text__4m81c{color:var(--color-black-60);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs)}.Stepper-module_scrollButton__3V4LM button{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.Stepper-module_step__sJ_fq{font-family:inherit;font-size:100%;line-height:1.15;margin:0}.Stepper-module_stepperContainer__2sBZh{background-color:var(--hds-stepper-background-color);position:relative;--hds-stepper-color:var(--color-bus);--hds-stepper-background-color:var(--color-white);--hds-stepper-disabled-color:var(--color-black-20);--hds-selected-step-label-color:var(--color-black-90);--hds-not-selected-step-label-color:var(--color-bus);--hds-step-background-color:var(--color-white);--hds-step-content-color:var(--color-bus);--hds-stepper-focus-border-color:var(--color-coat-of-arms);--hds-step-width:120px;--circle-container-size:36px;--progress-line-height:2px}.Stepper-module_stepper__W0Ugt{align-items:flex-start;display:flex;justify-content:space-between;overflow:scroll;-ms-overflow-style:none;position:relative;scroll-behavior:smooth;scrollbar-width:none;width:100%}.Stepper-module_stepper__W0Ugt:focus{outline:var(--hds-stepper-focus-border-color) 3px solid}.Stepper-module_stepper__W0Ugt::-webkit-scrollbar{display:none}.Stepper-module_stepper__W0Ugt.Stepper-module_small__2k5x8{--hds-step-width:44px}.Stepper-module_stepContainer__3jt3J{background-color:var(--hds-stepper-background-color);box-sizing:border-box;display:flex;flex-shrink:0;justify-content:center;padding:3px;width:var(--hds-step-width)}.Stepper-module_label__V9Nx6{color:var(--hds-not-selected-step-label-color);font-size:var(--fontsize-body-m);font-weight:500;line-height:var(--lineheight-l);margin-bottom:0;margin-top:6px;padding-left:var(--spacing-4-xs);padding-right:var(--spacing-4-xs);text-decoration:underline}.Stepper-module_disabled__sxc_0 .Stepper-module_label__V9Nx6{color:var(--hds-stepper-disabled-color);text-decoration:none}.Stepper-module_circle__2sJm2{align-items:center;background-color:var(--hds-step-background-color);border:2px solid var(--hds-stepper-color);border-radius:16px;color:var(--hds-step-content-color);display:flex;height:28px;justify-content:center;outline:2px solid var(--hds-stepper-background-color);text-align:center;width:28px}.Stepper-module_disabled__sxc_0 .Stepper-module_circle__2sJm2{background-color:var(--hds-stepper-background-color);border:2px solid var(--hds-stepper-disabled-color);color:var(--hds-stepper-disabled-color)}.Stepper-module_selected__3yhqv .Stepper-module_circle__2sJm2{border:4px solid var(--hds-stepper-color);border-radius:18px;outline:none}.Stepper-module_selected__3yhqv .Stepper-module_label__V9Nx6{color:var(--hds-selected-step-label-color);font-weight:700;text-decoration:none}.Stepper-module_completedContainer__1Ko_a{background-color:var(--hds-stepper-color);border-radius:16px;outline:2px solid var(--hds-stepper-background-color);padding:4px}.Stepper-module_completedContainer__1Ko_a .Stepper-module_completedIcon__2UDJK{color:var(--hds-step-background-color);vertical-align:middle}.Stepper-module_step__sJ_fq{align-items:center;appearance:none;background:transparent;border:0;color:var(--hds-stepper-color);cursor:pointer;display:flex;flex-direction:column;height:100%;justify-content:center;outline:none;overflow:visible;padding:0;position:relative}.Stepper-module_step__sJ_fq:focus .Stepper-module_circle__2sJm2,.Stepper-module_step__sJ_fq:focus .Stepper-module_completedContainer__1Ko_a,.Stepper-module_step__sJ_fq:focus .Stepper-module_label__V9Nx6{outline:2px solid var(--hds-stepper-focus-border-color)}.Stepper-module_step__sJ_fq:focus-visible{outline:none}.Stepper-module_step__sJ_fq.Stepper-module_disabled__sxc_0{color:var(--hds-stepper-disabled-color);cursor:not-allowed}.Stepper-module_number__2bmDN{font-size:var(--fontsize-body-m);font-weight:500;line-height:1.15}.Stepper-module_circleContainer__VIzlQ{align-items:center;display:flex;height:var(--circle-container-size);justify-content:center;width:var(--circle-container-size);z-index:2}.Stepper-module_line__2-_Vl{display:inline;height:var(--progress-line-height);left:calc(var(--hds-step-width) / 2);line-height:var(--lineheight-l);position:absolute;transform:translateY(calc(var(--circle-container-size) / 2 + var(--progress-line-height) / 2));z-index:1}.Stepper-module_line__2-_Vl .Stepper-module_disabledLine__3Rc9w{display:inline-block;height:100%;position:relative;top:-15px;background-color:var(--hds-stepper-disabled-color)}.Stepper-module_line__2-_Vl .Stepper-module_enabledLine__2oFd_{display:inline-block;height:100%;position:relative;top:-15px;background-color:var(--hds-stepper-color)}.Stepper-module_heading__ZC5kr{margin-top:26px;width:fit-content}.Stepper-module_heading__ZC5kr:focus{border:none;outline:3px solid var(--hds-stepper-focus-border-color)}.Stepper-module_scrollButton__3V4LM{background-color:var(--hds-stepper-background-color);color:var(--hds-stepper-color);position:absolute;top:3px;z-index:10}.Stepper-module_scrollButton__3V4LM button{align-items:center;border:2px solid transparent;border-radius:unset;box-sizing:border-box;display:inline-flex;justify-content:center;overflow:hidden;width:100%}.Stepper-module_scrollButton__3V4LM button:focus{border:2px solid var(--hds-stepper-focus-border-color);outline:none}.Stepper-module_scrollButton__3V4LM.Stepper-module_scrollButtonPrevious__1LF1O{left:0}.Stepper-module_scrollButton__3V4LM.Stepper-module_scrollButtonNext__2OvI-{right:0}'),(n=l||(l={}))[n.available=0]="available",n[n.completed=1]="completed",n[n.disabled=2]="disabled",n[n.attention=3]="attention",n[n.paused=4]="paused";const _={available:{fi:"Valittavissa.",en:"Available.",sv:"Valbar."},completed:{fi:"Valmis.",en:"Completed.",sv:"Komplett."},attention:{fi:"Vaatii huomiota.",en:"Needs attention.",sv:"Behöver uppmärksamhet."},paused:{fi:"Keskeytetty.",en:"Paused.",sv:"Pausad."}},f=s.forwardRef(((e,t)=>{var{label:a,language:n="fi",index:r,renderCustomStepCountLabel:p,small:u=!1,state:h,selected:m,stepsTotal:b,renderCustomStateAriaLabel:f,onStepClick:v,dataTestId:g}=e,S=(0,i._)(e,["label","language","index","renderCustomStepCountLabel","small","state","selected","stepsTotal","renderCustomStateAriaLabel","onStepClick","dataTestId"]);return s.createElement("div",{className:"Stepper-module_stepContainer__3jt3J"},s.createElement("button",Object.assign({ref:t,type:"button",disabled:h===l.disabled,className:(0,o.c)("Stepper-module_step__sJ_fq",m&&"Stepper-module_selected__3yhqv",h===l.disabled&&"Stepper-module_disabled__sxc_0"),"aria-current":!!m&&"step","aria-label":(()=>{const e=p?p(r,b):((e,t,a)=>({en:"Step "+(t+1)+"/"+a+".",fi:"Vaihe "+(t+1)+"/"+a+".",sv:"Steg "+(t+1)+"/"+a+"."}[e]))(n,r,b);let t=f?f(r,h):((e,t)=>t===l.disabled?"":_[l[t]][e])(n,h);m&&h===l.available&&(t="");let s=a;return"."!==s.slice(-1)&&(s+="."),[s,e,t].filter((e=>e)).join(" ")})(),onClick:e=>v&&v(e,r),"data-testid":g},S),s.createElement("div",{className:"Stepper-module_circleContainer__VIzlQ"},h!==l.completed||m?s.createElement("div",{className:(0,o.c)("Stepper-module_circle__2sJm2")},h===l.attention&&s.createElement(d.I,{size:"xs","aria-hidden":!0}),h===l.paused&&s.createElement(d.a,{size:"xs","aria-hidden":!0}),(h===l.available||h===l.disabled||h===l.completed&&m)&&s.createElement("span",{className:"Stepper-module_number__2bmDN"},r+1)):s.createElement("div",{className:"Stepper-module_completedContainer__1Ko_a"},s.createElement(c.I,{className:"Stepper-module_completedIcon__2UDJK","aria-hidden":!0}))),!u&&s.createElement("p",{className:"Stepper-module_label__V9Nx6"},a)))})),v=e=>{let{className:t,language:a="fi",selectedStep:n,small:r=!1,renderCustomStepCountLabel:i,renderCustomStateAriaLabel:c,onStepClick:d,stepHeading:_,stepHeadingAriaLevel:v=2,headingClassName:g,dataTestId:S="hds-stepper",renderCustomStepHeading:y,steps:x,theme:E}=e;const w=x.length,k=(0,s.useRef)(!0),L=(0,s.useRef)(null),I=(0,s.useRef)(null),C=(0,s.useRef)([]),T=x.length,[N,z]=(0,s.useState)(!1),[H,V]=(0,s.useState)(!1),A=(0,p.u)(b,E);return C.current.length!==T&&(C.current=Array(T).fill(0).map(((e,t)=>C.current[t]||(0,s.createRef)()))),(0,s.useEffect)((()=>{if(!k.current){L.current&&L.current.focus();const e=I.current.scrollWidth/w;I.current.scrollLeft=e*(n+1)-e/2-I.current.parentNode.clientWidth/2}k.current=!1,I.current.scrollLeft>5?z(!0):z(!1),I.current.scrollWidth-(I.current.parentNode.clientWidth+I.current.scrollLeft)>5?V(!0):V(!1)}),[n]),s.createElement("div",{lang:a,className:(0,o.c)(b,A),"data-testid":S},N&&s.createElement("div",{className:(0,o.c)(m,"Stepper-module_scrollButtonPrevious__1LF1O"),"aria-hidden":"true"},s.createElement("button",{type:"button",onClick:()=>{const e=I.current.scrollWidth/w;I.current.scrollLeft-=e},tabIndex:-1},s.createElement(u.I,{size:"m"}))),H&&s.createElement("div",{className:(0,o.c)(m,"Stepper-module_scrollButtonNext__2OvI-"),"aria-hidden":"true"},s.createElement("button",{type:"button",onClick:()=>{const e=I.current.scrollWidth/w;I.current.scrollLeft+=e},tabIndex:-1},s.createElement(h.I,{size:"m"}))),s.createElement("div",{onScroll:e=>{e.target.scrollLeft&&e.target.scrollLeft>5?z(!0):z(!1),e.target.scrollWidth-(e.target.parentNode.clientWidth+e.target.scrollLeft)>5?V(!0):V(!1)},ref:I,className:(0,o.c)(t,"Stepper-module_stepper__W0Ugt",r&&"Stepper-module_small__2k5x8")},s.createElement("div",{className:"Stepper-module_line__2-_Vl","aria-hidden":!0,style:{width:"max( calc(100% - var(--hds-step-width)), calc("+w+" * var(--hds-step-width) - var(--hds-step-width) ))"}},x.map(((e,t)=>t===x.length-1?null:s.createElement("div",{key:e.label+"-"+t,style:{width:"calc( 100% / "+(w-1)+")"},className:x[t+1].state===l.disabled?"Stepper-module_disabledLine__3Rc9w":"Stepper-module_enabledLine__2oFd_"})))),x.map(((e,t)=>s.createElement(f,{ref:C.current[t],key:t+"-"+e.label,label:e.label,language:a,index:t,small:r,stepsTotal:w,selected:n===t,state:e.state,onStepClick:(e,t)=>{t===n&&_&&L.current.focus(),d(e,t)},renderCustomStepCountLabel:i,renderCustomStateAriaLabel:c,dataTestId:S+"-step-"+t})))),_&&s.createElement("div",{tabIndex:-1,ref:L,role:"heading","aria-level":v,className:(0,o.c)("Stepper-module_heading__ZC5kr helpers_heading-l__2uC7A",g)},y?y(n,w,x[n].label):((e,t,a,l)=>({en:"Step "+(t+1)+"/"+a+": "+l,fi:"Vaihe "+(t+1)+"/"+a+": "+l,sv:"Steg "+(t+1)+"/"+a+": "+l}[e]))(a,n,w,x[n].label)))}},45399:function(e,t,a){a.r(t),a.d(t,{HeadingStepperExample:function(){return m},OverflowStepperExample:function(){return b},SmallStepperExample:function(){return h},StepperExample:function(){return u}});var l=a(11151),n=a(67294),s=a(19213),r=a(17882),i=a(70476),o=a(36870),c=a(21662),d=a(61056);const p=e=>{let{children:t,pageContext:a}=e;return n.createElement(d.default,{pageContext:a},t)},u=()=>{const e=Object.assign({div:"div"},(0,l.ah)()),t=(a=5,(e,t)=>{switch(t.type){case"completeStep":return{activeStepIndex:t.payload===a-1?a-1:t.payload+1,steps:e.steps.map(((e,l)=>l===t.payload&&l!==a-1?{state:s.S.completed,label:e.label}:l===t.payload+1?{state:s.S.available,label:e.label}:e))};case"setActive":return{activeStepIndex:t.payload,steps:e.steps.map(((e,a)=>a===t.payload?{state:s.S.available,label:e.label}:e))};default:throw new Error}});var a;const c={activeStepIndex:0,steps:[{label:"Step 1",state:s.S.available},{label:"Step 2",state:s.S.disabled},{label:"Step 3",state:s.S.disabled},{label:"Step 4 - longer text",state:s.S.disabled},{label:"Step 5",state:s.S.disabled}]},{0:d,1:p}=(0,n.useReducer)(t,c),u=d.activeStepIndex===d.steps.length-1;return n.createElement(e.div,null,n.createElement(s.a,{steps:d.steps,language:"en",selectedStep:d.activeStepIndex,onStepClick:(e,t)=>p({type:"setActive",payload:t})}),n.createElement(e.div,{style:{display:"flex",justifyContent:"flex-start",alignItems:"flex-end",gap:"24px"}},n.createElement(r.B,{disabled:0===d.activeStepIndex,variant:"secondary",onClick:()=>p({type:"setActive",payload:d.activeStepIndex-1}),style:{height:"fit-content",width:"fit-content"},iconLeft:n.createElement(i.d)},"Previous"),n.createElement(r.B,{variant:u?"primary":"secondary",onClick:()=>p({type:"completeStep",payload:d.activeStepIndex}),style:{height:"fit-content",width:"fit-content"},iconRight:u?void 0:n.createElement(o.I)},u?"Send":"Next")))},h=()=>{const e=Object.assign({div:"div"},(0,l.ah)()),t=(a=5,(e,t)=>{switch(t.type){case"completeStep":return{activeStepIndex:t.payload===a-1?a-1:t.payload+1,steps:e.steps.map(((e,l)=>l===t.payload&&l!==a-1?{state:s.S.completed,label:e.label}:l===t.payload+1?{state:s.S.available,label:e.label}:e))};case"setActive":return{activeStepIndex:t.payload,steps:e.steps.map(((e,a)=>a===t.payload?{state:s.S.available,label:e.label}:e))};default:throw new Error}});var a;const c={activeStepIndex:0,steps:[{label:"Step 1",state:s.S.available},{label:"Step 2",state:s.S.disabled},{label:"Step 3",state:s.S.disabled},{label:"Step 4 - longer text",state:s.S.disabled},{label:"Step 5",state:s.S.disabled}]},{0:d,1:p}=(0,n.useReducer)(t,c),u=d.activeStepIndex===d.steps.length-1;return n.createElement(e.div,{style:{maxWidth:"480px"}},n.createElement(s.a,{steps:d.steps,language:"en",small:!0,selectedStep:d.activeStepIndex,onStepClick:(e,t)=>p({type:"setActive",payload:t})}),n.createElement(e.div,{style:{height:"80px",display:"flex",justifyContent:"flex-start",alignItems:"flex-end",gap:"24px"}},n.createElement(r.B,{disabled:0===d.activeStepIndex,variant:"secondary",onClick:()=>p({type:"setActive",payload:d.activeStepIndex-1}),style:{height:"fit-content",width:"fit-content"},iconLeft:n.createElement(i.d)},"Previous"),n.createElement(r.B,{variant:u?"primary":"secondary",onClick:()=>p({type:"completeStep",payload:d.activeStepIndex}),style:{height:"fit-content",width:"fit-content"},iconRight:u?void 0:n.createElement(o.I)},u?"Send":"Next")))},m=()=>{const e=Object.assign({div:"div"},(0,l.ah)()),t=(a=5,(e,t)=>{switch(t.type){case"completeStep":return{activeStepIndex:t.payload===a-1?a-1:t.payload+1,steps:e.steps.map(((e,l)=>l===t.payload&&l!==a-1?{state:s.S.completed,label:e.label}:l===t.payload+1?{state:s.S.available,label:e.label}:e))};case"setActive":return{activeStepIndex:t.payload,steps:e.steps.map(((e,a)=>a===t.payload?{state:s.S.available,label:e.label}:e))};default:throw new Error}});var a;const c={activeStepIndex:0,steps:[{label:"Step 1",state:s.S.available},{label:"Step 2",state:s.S.disabled},{label:"Step 3",state:s.S.disabled},{label:"Step 4 - longer text",state:s.S.disabled},{label:"Step 5",state:s.S.disabled}]},{0:d,1:p}=(0,n.useReducer)(t,c),u=d.activeStepIndex===d.steps.length-1;return n.createElement(e.div,null,n.createElement(s.a,{steps:d.steps,language:"en",stepHeading:!0,selectedStep:d.activeStepIndex,onStepClick:(e,t)=>p({type:"setActive",payload:t})}),n.createElement(e.div,{style:{height:"80px",display:"flex",justifyContent:"flex-start",alignItems:"flex-end",gap:"24px"}},n.createElement(r.B,{disabled:0===d.activeStepIndex,variant:"secondary",onClick:()=>p({type:"setActive",payload:d.activeStepIndex-1}),style:{height:"fit-content",width:"fit-content"},iconLeft:n.createElement(i.d)},"Previous"),n.createElement(r.B,{variant:u?"primary":"secondary",onClick:()=>p({type:"completeStep",payload:d.activeStepIndex}),style:{height:"fit-content",width:"fit-content"},iconRight:u?void 0:n.createElement(o.I)},u?"Send":"Next")))},b=()=>{const e=Object.assign({div:"div"},(0,l.ah)()),t=(a=5,(e,t)=>{switch(t.type){case"completeStep":return{activeStepIndex:t.payload===a-1?a-1:t.payload+1,steps:e.steps.map(((e,l)=>l===t.payload&&l!==a-1?{state:s.S.completed,label:e.label}:l===t.payload+1?{state:s.S.available,label:e.label}:e))};case"setActive":return{activeStepIndex:t.payload,steps:e.steps.map(((e,a)=>a===t.payload?{state:s.S.available,label:e.label}:e))};default:throw new Error}});var a;const c={activeStepIndex:0,steps:[{label:"Step 1",state:s.S.available},{label:"Step 2",state:s.S.disabled},{label:"Step 3",state:s.S.disabled},{label:"Step 4 - longer text",state:s.S.disabled},{label:"Step 5",state:s.S.disabled}]},{0:d,1:p}=(0,n.useReducer)(t,c),u=d.activeStepIndex===d.steps.length-1;return n.createElement(e.div,{style:{maxWidth:"400px"}},n.createElement(s.a,{steps:d.steps,language:"en",selectedStep:d.activeStepIndex,onStepClick:(e,t)=>p({type:"setActive",payload:t})}),n.createElement(e.div,{style:{display:"flex",justifyContent:"flex-start",alignItems:"flex-end",gap:"24px"}},n.createElement(r.B,{disabled:0===d.activeStepIndex,variant:"secondary",onClick:()=>p({type:"setActive",payload:d.activeStepIndex-1}),style:{height:"fit-content",width:"fit-content"},iconLeft:n.createElement(i.d)},"Previous"),n.createElement(r.B,{variant:u?"primary":"secondary",onClick:()=>p({type:"completeStep",payload:d.activeStepIndex}),style:{height:"fit-content",width:"fit-content"},iconRight:u?void 0:n.createElement(o.I)},u?"Send":"Next")))};function _(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",h4:"h4",p:"p",code:"code"},(0,l.ah)(),e.components),{PlaygroundPreview:a}=t;return a||function(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("PlaygroundPreview",!0),n.createElement(n.Fragment,null,n.createElement(t.h2,{id:"usage",style:{position:"relative"}},"Usage",n.createElement(t.a,{href:"#usage","aria-label":"usage permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.h3,{id:"example",style:{position:"relative"}},"Example",n.createElement(t.a,{href:"#example","aria-label":"example permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n","\n",n.createElement(a,null,n.createElement(u)),"\n",n.createElement(t.h3,{id:"principles",style:{position:"relative"}},"Principles",n.createElement(t.a,{href:"#principles","aria-label":"principles permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.ul,null,"\n",n.createElement(t.li,null,"Each form step must be given a clear and descriptive label.","\n",n.createElement(t.ul,null,"\n",n.createElement(t.li,null,"The label is required even if it is visually hidden on smaller screen sizes."),"\n"),"\n"),"\n",n.createElement(t.li,null,"It is recommended that the form steps must be filled in order.","\n",n.createElement(t.ul,null,"\n",n.createElement(t.li,null,"This means that steps are disabled until their previous step is completed successfully."),"\n"),"\n"),"\n",n.createElement(t.li,null,"Avoid using a stepper in short forms. One step should have at least three (3) form components inside it."),"\n",n.createElement(t.li,null,"Use ",n.createElement(t.a,{href:"#small"},"small variant")," on small screens or spaces.","\n",n.createElement(t.ul,null,"\n",n.createElement(t.li,null,"You can use the default variant on small screens if the amount of steps is small (2-4 steps)."),"\n"),"\n"),"\n",n.createElement(t.li,null,"Do not span the stepper into multiple rows. If you are running out of space, consider using ",n.createElement(t.a,{href:"#small"},"the small variant")," or alter the spacing between steps.","\n",n.createElement(t.ul,null,"\n",n.createElement(t.li,null,"HDS stepper also supports scrolling when it overflows outside the container. Generally, this should be the last resort option if it is not possible to fit the stepper on screen with other methods."),"\n"),"\n"),"\n",n.createElement(t.li,null,"You can find an example of creating a complete form with the stepper in ",n.createElement(c.L,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",size:"M",href:"/storybook/react/?path=/docs/components-stepper--simple-form-example#simple-form-example"},"the HDS React Storybook"),"."),"\n"),"\n",n.createElement(t.h3,{id:"variations",style:{position:"relative"}},"Variations",n.createElement(t.a,{href:"#variations","aria-label":"variations permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.h4,{id:"default",style:{position:"relative"}},"Default",n.createElement(t.a,{href:"#default","aria-label":"default permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.p,null,"The default stepper variant includes visible step labels. The stepper can be navigated by pressing the steps themselves or controlled via external button elements."),"\n",n.createElement(a,null,n.createElement(u)),"\n",n.createElement(t.h4,{id:"small",style:{position:"relative"}},"Small",n.createElement(t.a,{href:"#small","aria-label":"small permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.p,null,"The small stepper variant omits the visible step labels. This variant of the stepper suits better for smaller screens or tight spaces. Steps are still interactable even though the labels are visually hidden."),"\n","\n",n.createElement(a,null,n.createElement(h)),"\n",n.createElement(t.h4,{id:"with-step-heading",style:{position:"relative"}},"With step heading",n.createElement(t.a,{href:"#with-step-heading","aria-label":"with step heading permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.p,null,"The stepper can automatically render the step heading if the property ",n.createElement(t.code,null,"stepHeading")," is enabled. The step heading will include the current step number, the total amount of steps, and the step label."),"\n",n.createElement(t.p,null,"You can control the heading level of the generated step heading via the ",n.createElement(t.code,null,"stepHeadingAriaLevel")," property. The heading is automatically localised if you change the component language with the ",n.createElement(t.code,null,"language")," property."),"\n","\n",n.createElement(a,null,n.createElement(m)),"\n",n.createElement(t.h4,{id:"overflow",style:{position:"relative"}},"Overflow",n.createElement(t.a,{href:"#overflow","aria-label":"overflow permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.p,null,"The stepper reacts accordingly when it overflows outside of the container. The user can scroll the stepper view or use left and right angle icons to browse the stepper."),"\n",n.createElement(t.p,null,"This variant should only be the last resort option if it is not possible to fit the stepper on screen with other methods. Prefer the ",n.createElement(t.code,null,"small")," variant or shorter labels as a solution before resorting to overflow."),"\n","\n",n.createElement(a,null,n.createElement(b)),"\n",n.createElement(t.h4,{id:"step-states",style:{position:"relative"}},"Step states",n.createElement(t.a,{href:"#step-states","aria-label":"step states permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.p,null,"The HDS stepper offers multiple predefined states for steps to be used."),"\n",n.createElement(t.ul,null,"\n",n.createElement(t.li,null,n.createElement(t.code,null,"completed")," state for completed steps"),"\n",n.createElement(t.li,null,n.createElement(t.code,null,"available")," state for steps that are available but not completed yet"),"\n",n.createElement(t.li,null,n.createElement(t.code,null,"attention")," state for steps that require the user's attention (e.g. the step has been edited by another user)"),"\n",n.createElement(t.li,null,n.createElement(t.code,null,"paused")," state for steps that require the user's attention (e.g. waiting for a review from officials)"),"\n",n.createElement(t.li,null,n.createElement(t.code,null,"disabled")," state for steps that are not available yet (e.g. require a previous step to be completed first)"),"\n"),"\n",n.createElement(a,null,n.createElement(s.a,{language:"en",onStepClick:function(){},selectedStep:1,steps:[{label:"Completed",state:s.S.completed},{label:"Current",state:s.S.available},{label:"Available",state:s.S.available},{label:"Needs attention",state:s.S.attention},{label:"Paused",state:s.S.paused},{label:"Disabled",state:s.S.disabled}]})))}t.default=function(e){return void 0===e&&(e={}),n.createElement(p,e,n.createElement(_,e))}},61056:function(e,t,a){a.r(t);var l=a(11151),n=a(67294),s=a(83428),r=a(12818),i=a(57674),o=a(89482),c=(a(18607),a(26127));function d(e){const t=Object.assign({h1:"h1",a:"a",span:"span",p:"p"},(0,l.ah)(),e.components),{InternalLink:a}=t;return a||p("InternalLink",!0),c.Z||p("PageTabs",!1),c.Z.Tab||p("PageTabs.Tab",!0),c.Z.TabList||p("PageTabs.TabList",!0),c.Z.TabPanel||p("PageTabs.TabPanel",!0),n.createElement(n.Fragment,null,n.createElement(t.h1,{id:"stepper",style:{position:"relative"}},"Stepper",n.createElement(t.a,{href:"#stepper","aria-label":"stepper permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement("div",{class:"status-label-description"},n.createElement(s.S,{type:"alert"},"Beta"),n.createElement(s.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),n.createElement(i.Z)),"\n",n.createElement(o.Z,null,"If a form is divided into multiple pages or steps, the Form progress component helps the user to understand the progression and to navigate between form steps."),"\n",n.createElement(r.N,{label:"Note about multi-page forms!",className:"siteNotification"},n.createElement(t.p,null,"This documentation page is about HDS multi-page stepper component. If you are looking for documentation about building multi-page forms, please refer to ",n.createElement(a,{href:"/patterns/forms/form-multi-page"},"HDS multi-page form pattern documentation page"),".")),"\n",n.createElement(c.Z,{pageContext:e.pageContext},n.createElement(c.Z.TabList,null,n.createElement(c.Z.Tab,{href:"/"},"Usage"),n.createElement(c.Z.Tab,{href:"/code"},"Code"),n.createElement(c.Z.Tab,{href:"/accessibility"},"Accessibility"),n.createElement(c.Z.Tab,{href:"/customisation"},"Customisation")),n.createElement(c.Z.TabPanel,null,e.children)))}function p(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,l.ah)(),e.components);return t?n.createElement(t,e,n.createElement(d,e)):d(e)}},89482:function(e,t,a){var l=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:n={},children:s}=e;return l.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...n}},s)}},26127:function(e,t,a){var l=a(67294),n=a(14160),s=a(94671);const r="PageTabList",i="PageTabPanel",o="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const d=a.frontmatter.slug,p=Array.isArray(c)?c:[c],u=p.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===r)),h=p.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===i)),m=null===(t=u.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===o)),b=m.findIndex((e=>d.endsWith(e.props.href))),_=-1===b?0:b,f=0===_?d:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(d);return l.createElement(s.a,{initiallyActiveTab:_},l.createElement(s.a.TabList,{className:"page-tabs-list"},m.map((e=>l.createElement(s.a.Tab,{key:e.props.href,onClick:()=>(0,n.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),m.map(((e,t)=>l.createElement(s.a.TabPanel,{key:e.props.href},_===t?h.props.children:l.createElement("div",null)))))},d=e=>{let{children:t}=e;return l.createElement(s.a.TabList,null,t)};d.componentName=r;const p=e=>{let{href:t,slug:a,children:n}=e;return l.createElement(s.a.Tab,null,n)};p.componentName=o;const u=e=>{let{children:t}=e;return l.createElement(s.a.TabPanel,null,t)};u.componentName=i,c.TabList=d,c.Tab=p,c.TabPanel=u,t.Z=c},57674:function(e,t,a){var l=a(67294),n=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return l.createElement(n.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},l.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>l.createElement("li",{key:t},l.createElement("span",{className:"status-name"},t),l.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-stepper-tabs-mdx-c15571dc8d9b7cd53380.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-stepper-tabs-mdx-c15571dc8d9b7cd53380.js
new file mode 100644
index 00000000000..e654597fc7a
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-stepper-tabs-mdx-c15571dc8d9b7cd53380.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[6725],{83428:function(e,t,a){a.d(t,{S:function(){return c}});var s=a(80136),l=a(67294),n=a(7444),r=a(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const i=e=>{let{icon:t}=e;return l.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:n,type:c="neutral",iconLeft:u}=e,b=(0,s._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(o.statusLabel,o[c],u&&o.statusLabelWithIcon,a),"data-testid":n},b),u&&l.createElement(i,{icon:u}),t)}},61056:function(e,t,a){a.r(t);var s=a(11151),l=a(67294),n=a(83428),r=a(12818),o=a(57674),i=a(89482),c=(a(18607),a(26127));function u(e){const t=Object.assign({h1:"h1",a:"a",span:"span",p:"p"},(0,s.ah)(),e.components),{InternalLink:a}=t;return a||b("InternalLink",!0),c.Z||b("PageTabs",!1),c.Z.Tab||b("PageTabs.Tab",!0),c.Z.TabList||b("PageTabs.TabList",!0),c.Z.TabPanel||b("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"stepper",style:{position:"relative"}},"Stepper",l.createElement(t.a,{href:"#stepper","aria-label":"stepper permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(n.S,{type:"alert"},"Beta"),l.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(o.Z)),"\n",l.createElement(i.Z,null,"If a form is divided into multiple pages or steps, the Form progress component helps the user to understand the progression and to navigate between form steps."),"\n",l.createElement(r.N,{label:"Note about multi-page forms!",className:"siteNotification"},l.createElement(t.p,null,"This documentation page is about HDS multi-page stepper component. If you are looking for documentation about building multi-page forms, please refer to ",l.createElement(a,{href:"/patterns/forms/form-multi-page"},"HDS multi-page form pattern documentation page"),".")),"\n",l.createElement(c.Z,{pageContext:e.pageContext},l.createElement(c.Z.TabList,null,l.createElement(c.Z.Tab,{href:"/"},"Usage"),l.createElement(c.Z.Tab,{href:"/code"},"Code"),l.createElement(c.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(c.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(c.Z.TabPanel,null,e.children)))}function b(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,s.ah)(),e.components);return t?l.createElement(t,e,l.createElement(u,e)):u(e)}},89482:function(e,t,a){var s=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:l={},children:n}=e;return s.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...l}},n)}},26127:function(e,t,a){var s=a(67294),l=a(14160),n=a(94671);const r="PageTabList",o="PageTabPanel",i="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const u=a.frontmatter.slug,b=Array.isArray(c)?c:[c],m=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===r)),d=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===o)),p=null===(t=m.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===i)),h=p.findIndex((e=>u.endsWith(e.props.href))),f=-1===h?0:h,_=0===f?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return s.createElement(n.a,{initiallyActiveTab:f},s.createElement(n.a.TabList,{className:"page-tabs-list"},p.map((e=>s.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?_:_+e.props.href))},e.props.children)))),p.map(((e,t)=>s.createElement(n.a.TabPanel,{key:e.props.href},f===t?d.props.children:s.createElement("div",null)))))},u=e=>{let{children:t}=e;return s.createElement(n.a.TabList,null,t)};u.componentName=r;const b=e=>{let{href:t,slug:a,children:l}=e;return s.createElement(n.a.Tab,null,l)};b.componentName=i;const m=e=>{let{children:t}=e;return s.createElement(n.a.TabPanel,null,t)};m.componentName=o,c.TabList=u,c.Tab=b,c.TabPanel=m,t.Z=c},57674:function(e,t,a){var s=a(67294),l=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return s.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},s.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>s.createElement("li",{key:t},s.createElement("span",{className:"status-name"},t),s.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-table-accessibility-mdx-1c7a19df24e5a59f47d3.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-table-accessibility-mdx-1c7a19df24e5a59f47d3.js
new file mode 100644
index 00000000000..f0b657fafbc
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-table-accessibility-mdx-1c7a19df24e5a59f47d3.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[4174,3733],{83428:function(e,t,a){a.d(t,{S:function(){return c}});var l=a(80136),s=a(67294),n=a(7444),r=a(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:t}=e;return s.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:n,type:c="neutral",iconLeft:u}=e,d=(0,l._)(e,["children","className","dataTestId","type","iconLeft"]);return s.createElement("span",Object.assign({className:(0,r.c)(i.statusLabel,i[c],u&&i.statusLabelWithIcon,a),"data-testid":n},d),u&&s.createElement(o,{icon:u}),t)}},14329:function(e,t,a){a.r(t);var l=a(11151),s=a(67294),n=a(13277);const r=e=>{let{children:t,pageContext:a}=e;return s.createElement(n.default,{pageContext:a},t)};function i(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",code:"code"},(0,l.ah)(),e.components);return s.createElement(s.Fragment,null,s.createElement(t.h2,{id:"accessibility",style:{position:"relative"}},"Accessibility",s.createElement(t.a,{href:"#accessibility","aria-label":"accessibility permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.h3,{id:"pay-attention-to",style:{position:"relative"}},"Pay attention to",s.createElement(t.a,{href:"#pay-attention-to","aria-label":"pay attention to permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.ul,null,"\n",s.createElement(t.li,null,"No matter how well tables are implemented, they are always very demanding for assistive technology users. Always consider whether the table is necessary to present the information."),"\n",s.createElement(t.li,null,"Make sure your table has a heading that describes the table’s purpose. This heading can either be a heading tag (e.g. H2) or a caption element. If it is a heading tag, reference it with an ",s.createElement(t.code,null,"aria-labelledby")," attribute in the ",s.createElement(t.code,null,"<table>")," tag."),"\n",s.createElement(t.li,null,"Table header is read to assistive technologies on every cell. Keep table header labels short and concise and make sure they describe the data contained in table cells.","\n",s.createElement(t.ul,null,"\n",s.createElement(t.li,null,'This is especially important if the column allows sorting. The sorting label (e.g. "First name, sorted") will be read to assistive technologies on every cell. Only allow sorting if it is really necessary and beneficial to the user.'),"\n"),"\n"),"\n",s.createElement(t.li,null,"If your table includes empty column header cells, make sure they have a ",s.createElement(t.code,null,"role=“presentation”")," attribute."),"\n"))}t.default=function(e){return void 0===e&&(e={}),s.createElement(r,e,s.createElement(i,e))}},13277:function(e,t,a){a.r(t);var l=a(11151),s=a(67294),n=a(83428),r=a(12818),i=a(57674),o=a(89482),c=(a(18607),a(26127));function u(e){const t=Object.assign({h1:"h1",a:"a",span:"span",p:"p"},(0,l.ah)(),e.components);return c.Z||d("PageTabs",!1),c.Z.Tab||d("PageTabs.Tab",!0),c.Z.TabList||d("PageTabs.TabList",!0),c.Z.TabPanel||d("PageTabs.TabPanel",!0),s.createElement(s.Fragment,null,s.createElement(t.h1,{id:"table",style:{position:"relative"}},"Table",s.createElement(t.a,{href:"#table","aria-label":"table permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement("div",{className:"status-label-description"},s.createElement(n.S,{type:"info"},"Stable"),s.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),s.createElement(i.Z)),"\n",s.createElement(o.Z,null,"  Tables are used to present tabulated data to the user in a consistent manner. HDS Tables offer multiple variants to allow clear presentation of vastly different data sets."),"\n",s.createElement(r.N,{label:"More table features are coming!",className:"siteNotification"},s.createElement(t.p,null,"HDS Tables are work in progress. The current feature set will serve most projects but later we are also looking into adding more features such as single row actions (edit, delete), expandable rows and supporting more HDS components inside tables.")),"\n",s.createElement(c.Z,{pageContext:e.pageContext},s.createElement(c.Z.TabList,null,s.createElement(c.Z.Tab,{href:"/"},"Usage"),s.createElement(c.Z.Tab,{href:"/code"},"Code"),s.createElement(c.Z.Tab,{href:"/accessibility"},"Accessibility"),s.createElement(c.Z.Tab,{href:"/customisation"},"Customisation")),s.createElement(c.Z.TabPanel,null,e.children)))}function d(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,l.ah)(),e.components);return t?s.createElement(t,e,s.createElement(u,e)):u(e)}},89482:function(e,t,a){var l=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:s={},children:n}=e;return l.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...s}},n)}},26127:function(e,t,a){var l=a(67294),s=a(14160),n=a(94671);const r="PageTabList",i="PageTabPanel",o="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const u=a.frontmatter.slug,d=Array.isArray(c)?c:[c],b=d.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===r)),h=d.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===i)),m=null===(t=b.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===o)),p=m.findIndex((e=>u.endsWith(e.props.href))),g=-1===p?0:p,f=0===g?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return l.createElement(n.a,{initiallyActiveTab:g},l.createElement(n.a.TabList,{className:"page-tabs-list"},m.map((e=>l.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,s.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),m.map(((e,t)=>l.createElement(n.a.TabPanel,{key:e.props.href},g===t?h.props.children:l.createElement("div",null)))))},u=e=>{let{children:t}=e;return l.createElement(n.a.TabList,null,t)};u.componentName=r;const d=e=>{let{href:t,slug:a,children:s}=e;return l.createElement(n.a.Tab,null,s)};d.componentName=o;const b=e=>{let{children:t}=e;return l.createElement(n.a.TabPanel,null,t)};b.componentName=i,c.TabList=u,c.Tab=d,c.TabPanel=b,t.Z=c},57674:function(e,t,a){var l=a(67294),s=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return l.createElement(s.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},l.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>l.createElement("li",{key:t},l.createElement("span",{className:"status-name"},t),l.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-table-code-mdx-be0e6d2a8e9800302b59.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-table-code-mdx-be0e6d2a8e9800302b59.js
new file mode 100644
index 00000000000..6bc4cb2085b
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-table-code-mdx-be0e6d2a8e9800302b59.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[3361,3733],{83428:function(e,t,n){n.d(t,{S:function(){return o}});var a=n(80136),l=n(67294),r=n(7444),s=n(34300),d={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,r.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const c=e=>{let{icon:t}=e;return l.createElement("span",{className:d.statusLabelIcon,"aria-hidden":"true"},t)},o=e=>{var{children:t,className:n,dataTestId:r,type:o="neutral",iconLeft:i}=e,u=(0,a._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,s.c)(d.statusLabel,d[o],i&&d.statusLabelWithIcon,n),"data-testid":r},u),i&&l.createElement(c,{icon:i}),t)}},89684:function(e,t,n){n.r(t);var a=n(11151),l=n(67294),r=n(62872),s=n(13277);const d=e=>{let{children:t,pageContext:n}=e;return l.createElement(s.default,{pageContext:n},t)};function c(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",h4:"h4",pre:"pre",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",strong:"strong",p:"p"},(0,a.ah)(),e.components),{Playground:n,IconCheckCircleFill:s,Link:d,ExternalLink:c}=t;return c||o("ExternalLink",!0),s||o("IconCheckCircleFill",!0),d||o("Link",!0),n||o("Playground",!0),l.createElement(l.Fragment,null,l.createElement(t.h2,{id:"code",style:{position:"relative"}},"Code",l.createElement(t.a,{href:"#code","aria-label":"code permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h3,{id:"code-examples",style:{position:"relative"}},"Code examples",l.createElement(t.a,{href:"#code-examples","aria-label":"code examples permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h4,{id:"default",style:{position:"relative"}},"Default",l.createElement(t.a,{href:"#default","aria-label":"default permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n,{scope:{Table:r.T}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},"import { Table } from 'hds-react';\n\n() => {\n  const cols = [\n    { key: 'id', headerName: 'Not rendered' },\n    { key: 'firstName', headerName: 'First name' },\n    { key: 'surname', headerName: 'Surname' },\n    {\n      key: 'age',\n      headerName: 'Age',\n      transform: ({ age }) => {\n        return <div style={{ textAlign: 'right' }}>{age}</div>;\n      },\n    },\n    { key: 'profession', headerName: 'Profession' },\n  ];\n  const rows = [\n    { id: 1000, firstName: 'Lauri', surname: 'Kekkonen', age: 39, profession: 'Engineer' },\n    { id: 1001, firstName: 'Maria', surname: 'Sarasoja', age: 62, profession: 'Designer' },\n    { id: 1002, firstName: 'Anneli', surname: 'Routa', age: 50, profession: 'Meteorologist' },\n    { id: 1003, firstName: 'Osku', surname: 'Rausku', age: 18, profession: 'Mail Carrier' },\n  ];\n  const captionDark = (\n    <span>\n      <b>Table 1</b>: Service users (dark variant)\n    </span>\n  );\n  const captionLight = (\n    <span>\n      <b>Table 2</b>: Service users (light variant)\n    </span>\n  );\n  return (\n    <div style={{ maxWidth: '640px' }}>\n      <Table cols={cols} rows={rows} caption={captionDark} indexKey=\"id\" renderIndexCol={false} />\n      <div style={{ marginTop: 'var(--spacing-l)' }}>\n        <Table cols={cols} rows={rows} caption={captionLight} variant=\"light\" indexKey=\"id\" renderIndexCol={false} />\n      </div>\n    </div>\n  );\n}\n")),l.createElement(t.pre,null,l.createElement(t.code,{className:"language-html"},'<div>\n  <div class="hds-table-container" style="max-width:640px" tabindex="0">\n    <table class="hds-table hds-table--dark" aria-label="Service users (dark variant)">\n      <caption class="hds-table__caption">\n        <b>Table 1</b\n        >: Service users (dark variant)\n      </caption>\n      <thead>\n        <tr class="hds-table__header-row">\n          <th scope="col">First name</th>\n          <th scope="col">Surname</th>\n          <th scope="col">Age</th>\n          <th scope="col">Profession</th>\n        </tr>\n      </thead>\n      <tbody class="hds-table__content">\n        <tr>\n          <td>Lauri</td>\n          <td>Kekkonen</td>\n          <td class="hds-table--text-align-right">39</td>\n          <td>Engineer</td>\n        </tr>\n        <tr>\n          <td>Maria</td>\n          <td>Sarasoja</td>\n          <td class="hds-table--text-align-right">62</td>\n          <td>Designer</td>\n        </tr>\n        <tr>\n          <td>Anneli</td>\n          <td>Routa</td>\n          <td class="hds-table--text-align-right">50</td>\n          <td>Meteorologist</td>\n        </tr>\n        <tr>\n          <td>Osku</td>\n          <td>Rausku</td>\n          <td class="hds-table--text-align-right">18</td>\n          <td>Mail carrier</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n\n  <div class="hds-table-container" style="max-width:640px" tabindex="0">\n    <table class="hds-table hds-table--light" aria-label="Service users (light variant)">\n      <caption class="hds-table__caption">\n        <b>Table 2</b\n        >: Service users (light variant)\n      </caption>\n      <thead>\n        <tr class="hds-table__header-row">\n          <th scope="col">First name</th>\n          <th scope="col">Surname</th>\n          <th scope="col">Age</th>\n          <th scope="col">Profession</th>\n        </tr>\n      </thead>\n      <tbody class="hds-table__content">\n        <tr>\n          <td>Lauri</td>\n          <td>Kekkonen</td>\n          <td class="hds-table--text-align-right">39</td>\n          <td>Engineer</td>\n        </tr>\n        <tr>\n          <td>Maria</td>\n          <td>Sarasoja</td>\n          <td class="hds-table--text-align-right">62</td>\n          <td>Designer</td>\n        </tr>\n        <tr>\n          <td>Anneli</td>\n          <td>Routa</td>\n          <td class="hds-table--text-align-right">50</td>\n          <td>Meteorologist</td>\n        </tr>\n        <tr>\n          <td>Osku</td>\n          <td>Rausku</td>\n          <td class="hds-table--text-align-right">18</td>\n          <td>Mail carrier</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n'))),"\n",l.createElement(t.h4,{id:"vertical-headers",style:{position:"relative"}},"Vertical headers",l.createElement(t.a,{href:"#vertical-headers","aria-label":"vertical headers permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n,{scope:{Table:r.T}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},"import { Table } from 'hds-react';\n\n() => {\n  const cols = [\n    { key: 'id', headerName: 'Not rendered' },\n    { key: '8-12', headerName: '8-12' },\n    { key: '12-14', headerName: '12-14' },\n    { key: '14-16', headerName: '14-16' },\n    { key: '16-18', headerName: '16-18' },\n  ];\n  const unitRows = [\n    { id: 'monday', '8-12': 324, '12-14': 562, '14-16': 280, '16-18': 94 },\n    { id: 'tuesday', '8-12': 341, '12-14': 688, '14-16': 425, '16-18': 113 },\n    { id: 'wednesday', '8-12': 294, '12-14': 492, '14-16': 280, '16-18': 67 },\n    { id: 'thursday', '8-12': 312, '12-14': 501, '14-16': 455, '16-18': 112 },\n    { id: 'friday', '8-12': 150, '12-14': 142, '14-16': 362, '16-18': 455 },\n  ];\n  const verticalHeaders = [\n    { key: 'monday', headerName: 'Monday' },\n    { key: 'tuesday', headerName: 'Tuesday' },\n    { key: 'wednesday', headerName: 'Wednesday' },\n    { key: 'thursday', headerName: 'Thursday' },\n    { key: 'friday', headerName: 'Friday' },\n  ];\n  const caption = (\n    <span>\n      <b>Table 3</b>: Units sold by weekday\n    </span>\n  );\n  return (\n    <div style={{ maxWidth: '486px' }}>\n      <Table\n        verticalHeaders={verticalHeaders}\n        cols={cols}\n        rows={unitRows}\n        caption={caption}\n        textAlignContentRight\n        indexKey=\"id\"\n        renderIndexCol={false}\n      />\n    </div>\n  );\n}\n")),l.createElement(t.pre,null,l.createElement(t.code,{className:"language-html"},'<div class="hds-table-container" style="max-width:496px;" tabindex="0">\n  <table class="hds-table hds-table--dark hds-table--with-vertical-header" aria-label="Units sold by weekday">\n    <caption class="hds-table__caption">\n      <b>Table 3</b\n      >: Units sold by weekday\n    </caption>\n    <colgroup>\n      <col span="1" class="hds-table__vertical-header-column" />\n    </colgroup>\n    <thead>\n      <tr class="hds-table__header-row">\n        <td role="presentation"></td>\n        <th scope="col">8-12</th>\n        <th scope="col">12-14</th>\n        <th scope="col">14-16</th>\n        <th scope="col">16-18</th>\n      </tr>\n    </thead>\n    <tbody class="hds-table__content hds-table__content--text-align-td-right">\n      <tr>\n        <th scope="row">Monday</th>\n        <td>324</td>\n        <td>562</td>\n        <td>280</td>\n        <td>94</td>\n      </tr>\n      <tr>\n        <th scope="row">Tuesday</th>\n        <td>341</td>\n        <td>688</td>\n        <td>425</td>\n        <td>113</td>\n      </tr>\n      <tr>\n        <th scope="row">Wednesday</th>\n        <td>294</td>\n        <td>492</td>\n        <td>280</td>\n        <td>67</td>\n      </tr>\n      <tr>\n        <th scope="row">Thursday</th>\n        <td>312</td>\n        <td>501</td>\n        <td>455</td>\n        <td>112</td>\n      </tr>\n      <tr>\n        <th scope="row">Friday</th>\n        <td>150</td>\n        <td>142</td>\n        <td>362</td>\n        <td>455</td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n'))),"\n",l.createElement(t.h4,{id:"zebra-rows",style:{position:"relative"}},"Zebra rows",l.createElement(t.a,{href:"#zebra-rows","aria-label":"zebra rows permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n,{scope:{Table:r.T}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},"import { Table } from 'hds-react';\n\n() => {\n  const cols = [\n    { key: 'id', headerName: 'Not rendered' },\n    { key: 'firstName', headerName: 'First name' },\n    { key: 'surname', headerName: 'Surname' },\n    {\n      key: 'age',\n      headerName: 'Age',\n      transform: ({ age }) => {\n        return <div style={{ textAlign: 'right' }}>{age}</div>;\n      },\n    },\n    { key: 'city', headerName: 'City' },\n    { key: 'profession', headerName: 'Profession' },\n    {\n      key: 'experience',\n      headerName: 'Experience (years)',\n      transform: ({ experience }) => {\n        return <div style={{ textAlign: 'right' }}>{experience}</div>;\n      },\n    },\n  ];\n  const rows = [\n    {\n      id: 1000,\n      firstName: 'Lauri',\n      surname: 'Kekkonen',\n      age: 39,\n      city: 'Helsinki',\n      profession: 'Engineer',\n      experience: 10,\n    },\n    {\n      id: 1001,\n      firstName: 'Maria',\n      surname: 'Sarasoja',\n      age: 62,\n      city: 'Tampere',\n      profession: 'Designer',\n      experience: 39,\n    },\n    {\n      id: 1002,\n      firstName: 'Anneli',\n      surname: 'Routa',\n      age: 50,\n      city: 'Turku',\n      profession: 'Meteorologist',\n      experience: 25,\n    },\n    {\n      id: 1003,\n      firstName: 'Osku',\n      surname: 'Rausku',\n      age: 18,\n      city: 'Oulu',\n      profession: 'Mail Carrier',\n      experience: 1,\n    },\n  ];\n  const caption = (\n    <span>\n      <b>Table 4</b>: Service users (zebra variant)\n    </span>\n  );\n  return (\n    <div style={{ maxWidth: '800px' }}>\n      <Table rows={rows} cols={cols} caption={caption} zebra indexKey=\"id\" renderIndexCol={false} />\n    </div>\n  );\n}\n")),l.createElement(t.pre,null,l.createElement(t.code,{className:"language-html"},'<div class="hds-table-container" style="max-width:800px;" tabindex="0">\n  <table class="hds-table hds-table--dark hds-table--zebra" aria-label="Service users (zebra variant)">\n    <caption class="hds-table__caption">\n      <b>Table 4</b\n      >: Service users (zebra variant)\n    </caption>\n    <thead>\n      <tr class="hds-table__header-row">\n        <th scope="col">First name</th>\n        <th scope="col">Surname</th>\n        <th scope="col">Age</th>\n        <th scope="col">City</th>\n        <th scope="col">Profession</th>\n        <th scope="col">Experience (years)</th>\n      </tr>\n    </thead>\n    <tbody class="hds-table__content">\n      <tr>\n        <td>Lauri</td>\n        <td>Kekkonen</td>\n        <td class="hds-table--text-align-right">39</td>\n        <td>Helsinki</td>\n        <td>Engineer</td>\n        <td class="hds-table--text-align-right">10</td>\n      </tr>\n      <tr>\n        <td>Maria</td>\n        <td>Sarasoja</td>\n        <td class="hds-table--text-align-right">62</td>\n        <td>Tampere</td>\n        <td>Designer</td>\n        <td class="hds-table--text-align-right">39</td>\n      </tr>\n      <tr>\n        <td>Anneli</td>\n        <td>Routa</td>\n        <td class="hds-table--text-align-right">50</td>\n        <td>Turku</td>\n        <td>Meteorologist</td>\n        <td class="hds-table--text-align-right">25</td>\n      </tr>\n      <tr>\n        <td>Osku</td>\n        <td>Rausku</td>\n        <td class="hds-table--text-align-right">18</td>\n        <td>Oulu</td>\n        <td>Mail Carrier</td>\n        <td class="hds-table--text-align-right">1</td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n'))),"\n",l.createElement(t.h4,{id:"vertical-lines",style:{position:"relative"}},"Vertical lines",l.createElement(t.a,{href:"#vertical-lines","aria-label":"vertical lines permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n,{scope:{Table:r.T}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},"import { Table } from 'hds-react';\n\n() => {\n  const cols = [\n    { key: 'day', headerName: 'Day' },\n    {\n      key: 'product1',\n      headerName: 'Product 1',\n      transform: ({ product1 }) => {\n        return <div style={{ textAlign: 'right' }}>{product1}</div>;\n      },\n    },\n    {\n      key: 'product2',\n      headerName: 'Product 2',\n      transform: ({ product2 }) => {\n        return <div style={{ textAlign: 'right' }}>{product2}</div>;\n      },\n    },\n    {\n      key: 'product3',\n      headerName: 'Product 3',\n      transform: ({ product3 }) => {\n        return <div style={{ textAlign: 'right' }}>{product3}</div>;\n      },\n    },\n  ];\n  const rows = [\n    { day: 'Monday', product1: 12, product2: 24, product3: 5 },\n    { day: 'Tuesday', product1: 10, product2: 32, product3: 6 },\n    { day: 'Wednesday', product1: 14, product2: 35, product3: 6 },\n    { day: 'Thursday', product1: 11, product2: 18, product3: 2 },\n    { day: 'Friday', product1: 16, product2: 45, product3: 12 },\n  ];\n  const caption = (\n    <span>\n      <b>Table 5</b>: Units sold by weekday (vertical lines variant)\n    </span>\n  );\n  return (\n    <div style={{ maxWidth: '496px' }}>\n      <Table verticalLines cols={cols} rows={rows} caption={caption} indexKey=\"day\" renderIndexCol={true} />\n    </div>\n  );\n}\n")),l.createElement(t.pre,null,l.createElement(t.code,{className:"language-html"},'<div class="hds-table-container" style={{maxWidth: \'496px\'}} tabindex="0">\n    <table class="hds-table hds-table--dark hds-table--with-vertical-lines" aria-label="Units sold by weekday">\n      <caption class="hds-table__caption"><b>Table 1</b>: Table description</caption>\n      <thead>\n        <tr class="hds-table__header-row">\n          <th scope="col">Day</th>\n          <th scope="col">Product 1</th>\n          <th scope="col">Product 2</th>\n          <th scope="col">Product 3</th>\n        </tr>\n      </thead>\n      <tbody class="hds-table__content">\n        <tr>\n          <td>Monday</td>\n          <td class="hds-table--text-align-right">12</td>\n          <td class="hds-table--text-align-right">24</td>\n          <td class="hds-table--text-align-right">5</td>\n        </tr>\n        <tr>\n          <td>Tuesday</td>\n          <td class="hds-table--text-align-right">10</td>\n          <td class="hds-table--text-align-right">32</td>\n          <td class="hds-table--text-align-right">6</td>\n        </tr>\n        <tr>\n          <td>Wednesday</td>\n          <td class="hds-table--text-align-right">14</td>\n          <td class="hds-table--text-align-right">35</td>\n          <td class="hds-table--text-align-right">6</td>\n        </tr>\n        <tr>\n          <td>Thursday</td>\n          <td class="hds-table--text-align-right">11</td>\n          <td class="hds-table--text-align-right">18</td>\n          <td class="hds-table--text-align-right">2</td>\n        </tr>\n        <tr>\n          <td>Friday</td>\n          <td class="hds-table--text-align-right">16</td>\n          <td class="hds-table--text-align-right">45</td>\n          <td class="hds-table--text-align-right">12</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n'))),"\n",l.createElement(t.h4,{id:"dense-tables",style:{position:"relative"}},"Dense tables",l.createElement(t.a,{href:"#dense-tables","aria-label":"dense tables permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n,{scope:{Table:r.T}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},"import { Table } from 'hds-react';\n\n() => {\n  const cols = [\n    { key: 'id', headerName: 'Not rendered' },\n    { key: 'firstName', headerName: 'First name' },\n    { key: 'surname', headerName: 'Surname' },\n    {\n      key: 'age',\n      headerName: 'Age',\n      transform: ({ age }) => {\n        return <div style={{ textAlign: 'right' }}>{age}</div>;\n      },\n    },\n    { key: 'profession', headerName: 'Profession' },\n  ];\n  const rows = [\n    { id: 1000, firstName: 'Lauri', surname: 'Kekkonen', age: 39, profession: 'Engineer' },\n    { id: 1001, firstName: 'Maria', surname: 'Sarasoja', age: 62, profession: 'Designer' },\n    { id: 1002, firstName: 'Anneli', surname: 'Routa', age: 50, profession: 'Meteorologist' },\n    { id: 1003, firstName: 'Osku', surname: 'Rausku', age: 18, profession: 'Mail Carrier' },\n  ];\n  const caption = (\n    <span>\n      <b>Table 6</b>: Service users (dense variant)\n    </span>\n  );\n  return (\n    <div style={{ maxWidth: '500px' }}>\n      <Table cols={cols} rows={rows} dense caption={caption} indexKey=\"id\" renderIndexCol={false} />\n    </div>\n  );\n}\n")),l.createElement(t.pre,null,l.createElement(t.code,{className:"language-html"},'<div class="hds-table-container" style="max-width: 640px;" tabindex="0">\n  <table class="hds-table hds-table--dark hds-table--dense" aria-label="People">\n    <caption class="hds-table__caption">\n      <b>Table 6</b\n      >: Service users (dense variant)\n    </caption>\n    <thead>\n      <tr class="hds-table__header-row">\n        <th scope="col">First name</th>\n        <th scope="col">Surname</th>\n        <th scope="col">Age</th>\n        <th scope="col">Profession</th>\n      </tr>\n    </thead>\n    <tbody class="hds-table__content">\n      <tr>\n        <td>Lauri</td>\n        <td>Kekkonen</td>\n        <td class="hds-table--text-align-right">39</td>\n        <td>Engineer</td>\n      </tr>\n      <tr>\n        <td>Maria</td>\n        <td>Sarasoja</td>\n        <td class="hds-table--text-align-right">62</td>\n        <td>Designer</td>\n      </tr>\n      <tr>\n        <td>Anneli</td>\n        <td>Routa</td>\n        <td class="hds-table--text-align-right">50</td>\n        <td>Meteorologist</td>\n      </tr>\n      <tr>\n        <td>Osku</td>\n        <td>Rausku</td>\n        <td class="hds-table--text-align-right">18</td>\n        <td>Mail carrier</td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n'))),"\n",l.createElement(t.h4,{id:"sorting",style:{position:"relative"}},"Sorting",l.createElement(t.a,{href:"#sorting","aria-label":"sorting permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n,{scope:{Table:r.T}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},"import { Table } from 'hds-react';\n\n() => {\n  const cols = [\n    { key: 'id', headerName: 'Not rendered' },\n    { key: 'firstName', headerName: 'First name', isSortable: true },\n    { key: 'surname', headerName: 'Surname', isSortable: true },\n    {\n      key: 'age',\n      headerName: 'Age',\n      sortIconType: 'other',\n      transform: ({ age }) => {\n        return <div style={{ textAlign: 'right' }}>{age}</div>;\n      },\n      isSortable: true,\n    },\n    { key: 'profession', headerName: 'Profession', isSortable: true },\n  ];\n  const rows = [\n    { id: 1000, firstName: 'Lauri', surname: 'Kekkonen', age: 39, profession: 'Engineer' },\n    { id: 1001, firstName: 'Maria', surname: 'Sarasoja', age: 62, profession: 'Designer' },\n    { id: 1002, firstName: 'Anneli', surname: 'Routa', age: 50, profession: 'Meteorologist' },\n    { id: 1003, firstName: 'Osku', surname: 'Rausku', age: 18, profession: 'Mail Carrier' },\n    { id: 1004, firstName: 'Linda', surname: 'Koululainen', age: 8, profession: 'School student' },\n  ];\n  const caption = (\n    <span>\n      <b>Table 7</b>: Service users (sorting, dark variant)\n    </span>\n  );\n  return (\n    <div style={{ maxWidth: '640px' }}>\n      <Table\n        ariaLabelSortButtonUnset=\"Not sorted\"\n        ariaLabelSortButtonAscending=\"Sorted in ascending order\"\n        ariaLabelSortButtonDescending=\"Sorted in descending order\"\n        indexKey=\"id\"\n        renderIndexCol={false}\n        cols={cols}\n        rows={rows}\n        caption={caption}\n      />\n    </div>\n  );\n}\n"))),"\n",l.createElement(t.h4,{id:"selecting-rows",style:{position:"relative"}},"Selecting rows",l.createElement(t.a,{href:"#selecting-rows","aria-label":"selecting rows permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(n,{scope:{Table:r.T,useState:l.useState}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},"import { Table } from 'hds-react';\n\n() => {\n  const cols = [\n    { key: 'id', headerName: 'Not rendered' },\n    { key: 'firstName', headerName: 'First name' },\n    { key: 'surname', headerName: 'Surname' },\n    {\n      key: 'age',\n      headerName: 'Age',\n      transform: ({ age }) => {\n        return <div style={{ textAlign: 'right' }}>{age}</div>;\n      },\n    },\n    { key: 'profession', headerName: 'Profession' },\n  ];\n  const rows = [\n    { id: 1000, firstName: 'Lauri', surname: 'Kekkonen', age: 39, profession: 'Engineer' },\n    { id: 1001, firstName: 'Maria', surname: 'Sarasoja', age: 62, profession: 'Designer' },\n    { id: 1002, firstName: 'Anneli', surname: 'Routa', age: 50, profession: 'Meteorologist' },\n    { id: 1003, firstName: 'Osku', surname: 'Rausku', age: 18, profession: 'Mail Carrier' },\n  ];\n  const [selectedRows, setSelectedRows] = useState([]);\n  return (\n    <div style={{ maxWidth: '640px' }}>\n      <Table\n        checkboxSelection\n        selectedRows={selectedRows}\n        setSelectedRows={setSelectedRows}\n        heading=\"Employees\"\n        id=\"checkbox-selection\"\n        indexKey=\"id\"\n        renderIndexCol={false}\n        cols={cols}\n        rows={rows}\n        selectAllRowsText=\"Select all rows\"\n        clearSelectionsText=\"Clear selections\"\n        ariaLabelCheckboxSelection=\"Row selection\"\n      />\n    </div>\n  );\n}\n"))),"\n",l.createElement(t.h3,{id:"packages",style:{position:"relative"}},"Packages",l.createElement(t.a,{href:"#packages","aria-label":"packages permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.table,null,l.createElement(t.thead,null,l.createElement(t.tr,null,l.createElement(t.th,null,"Package"),l.createElement(t.th,null,"Included"),l.createElement(t.th,null,"Storybook link"),l.createElement(t.th,null,"Source link"))),l.createElement(t.tbody,null,l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.strong,null,"HDS React")),l.createElement(t.td,null,l.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},l.createElement(s)," Yes ")),l.createElement(t.td,null,l.createElement(d,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-table--default"},"View in Storybook")),l.createElement(t.td,null,l.createElement(c,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/react/src/components/table"},"View source"))),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.strong,null,"HDS Core")),l.createElement(t.td,null,l.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},l.createElement(s)," Yes ")),l.createElement(t.td,null,l.createElement(d,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/core/?path=/story/components-table--dark"},"View in Storybook")),l.createElement(t.td,null,l.createElement(c,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/core/src/components/table"},"View source"))))),"\n",l.createElement(t.h3,{id:"properties",style:{position:"relative"}},"Properties",l.createElement(t.a,{href:"#properties","aria-label":"properties permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"Note! You can find the full list of properties in the ",l.createElement(d,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/docs/components-table--default"},"React Storybook.")),"\n",l.createElement(t.table,null,l.createElement(t.thead,null,l.createElement(t.tr,null,l.createElement(t.th,null,"Property"),l.createElement(t.th,null,"Description"),l.createElement(t.th,null,"Values"),l.createElement(t.th,null,"Default value"))),l.createElement(t.tbody,null,l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"ariaLabelCheckboxSelection")),l.createElement(t.td,null,"Aria-label for checkbox selection."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,'"Rivin valinta"')),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"ariaLabelSortButtonAscending")),l.createElement(t.td,null,"Aria-label for sort button in ascending state."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,'"Järjestetty nousevaan järjestykseen"')),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"ariaLabelSortButtonDescending")),l.createElement(t.td,null,"Aria-label for sort button in descending state."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,'"Järjestetty laskevaan järjestykseen"')),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"ariaLabelSortButtonUnset")),l.createElement(t.td,null,"Aria-label for sort button in the unordered state."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"caption")),l.createElement(t.td,null,"The caption of the table."),l.createElement(t.td,null,l.createElement(t.code,null,"ReactNode")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"checkboxSelection")),l.createElement(t.td,null,"If set to true, the table displays the checkbox selection column to select rows."),l.createElement(t.td,null,l.createElement(t.code,null,"boolean")),l.createElement(t.td,null,"false")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"clearSelectionsText")),l.createElement(t.td,null,"Text for clear selected rows button."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,'"Tyhjennä valinnat"')),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"cols")),l.createElement(t.td,null,"Columns of the table header row. Defines header name, optional sort icon type and optional cell row transform function."),l.createElement(t.td,null,l.createElement(t.code,null,"Header[]")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"customActionButtons")),l.createElement(t.td,null,"Custom action buttons to place on top of the table."),l.createElement(t.td,null,l.createElement(t.code,null,"ReactNode[]")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"dense")),l.createElement(t.td,null,"If set to true, the dense variant of the table is used."),l.createElement(t.td,null,l.createElement(t.code,null,"boolean")),l.createElement(t.td,null,"false")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"heading")),l.createElement(t.td,null,"The table heading."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"headingAriaLevel")),l.createElement(t.td,null,"The table heading aria-level."),l.createElement(t.td,null,l.createElement(t.code,null,"number")),l.createElement(t.td,null,"2")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"headingId")),l.createElement(t.td,null,"Table heading id. Used to name table to assistive technologies. Only applicable when heading prop is used."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,'"hds-table-heading-id"')),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"indexKey")),l.createElement(t.td,null,"Column key used as a unique identifier for a row"),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"initialSortingColumnKey")),l.createElement(t.td,null,"Key indicating a column that you wish to be initially sorted. Use undefined to have no column initially sorted."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"initialSortingOrder")),l.createElement(t.td,null,"Sorting order applied for initial sorting."),l.createElement(t.td,null,l.createElement(t.code,null,'"asc"')," ",l.createElement(t.code,null,'"desc"')),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"onSort")),l.createElement(t.td,null,"Function for providing side effects before or after the sort. If you want to use the component's own sorting function, call the handleSort callback function."),l.createElement(t.td,null,l.createElement(t.code,null,"function")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"renderIndexCol")),l.createElement(t.td,null,"If set to true, the index column is rendered in the table."),l.createElement(t.td,null,l.createElement(t.code,null,"boolean")),l.createElement(t.td,null,"true")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"rows")),l.createElement(t.td,null,"Table rows. An array of objects where keys map with the keys of col."),l.createElement(t.td,null,l.createElement(t.code,null,"object[]")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"selectAllRowsText")),l.createElement(t.td,null,"Text for the select all rows button."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,'"Valitse kaikki rivit"')),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"selectedRows")),l.createElement(t.td,null,"Selected table rows."),l.createElement(t.td,null,l.createElement(t.code,null,"SelectedRow[]")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"setSelectedRows")),l.createElement(t.td,null,"Callback that updates selected rows."),l.createElement(t.td,null,l.createElement(t.code,null,"function")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"textAlignContentRight")),l.createElement(t.td,null,"When set to true, table data cell text content is aligned right. When set to false (default), the text is aligned to left."),l.createElement(t.td,null,l.createElement(t.code,null,"boolean")),l.createElement(t.td,null,"false")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"variant")),l.createElement(t.td,null,"Table variant. Use dark for dark brand background colors, and light for light brand background colors."),l.createElement(t.td,null,l.createElement(t.code,null,'"light"')," ",l.createElement(t.code,null,'"dark"')),l.createElement(t.td,null,l.createElement(t.code,null,'"dark"'))),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"verticalHeaders")),l.createElement(t.td,null,"Vertical headers of the table."),l.createElement(t.td,null,l.createElement(t.code,null,"Header[]")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"verticalLines")),l.createElement(t.td,null,"If set to true, the table displays vertical lines on columns."),l.createElement(t.td,null,l.createElement(t.code,null,"boolean")),l.createElement(t.td,null,"false")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"zebra")),l.createElement(t.td,null,"If set to true, the table uses alternating row colors zebra style."),l.createElement(t.td,null,l.createElement(t.code,null,"boolean")),l.createElement(t.td,null,"false")),l.createElement(t.tr,null,l.createElement(t.td,null,"[Table 1:Table properties]"),l.createElement(t.td),l.createElement(t.td),l.createElement(t.td)))))}function o(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){return void 0===e&&(e={}),l.createElement(d,e,l.createElement(c,e))}},13277:function(e,t,n){n.r(t);var a=n(11151),l=n(67294),r=n(83428),s=n(12818),d=n(57674),c=n(89482),o=(n(18607),n(26127));function i(e){const t=Object.assign({h1:"h1",a:"a",span:"span",p:"p"},(0,a.ah)(),e.components);return o.Z||u("PageTabs",!1),o.Z.Tab||u("PageTabs.Tab",!0),o.Z.TabList||u("PageTabs.TabList",!0),o.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"table",style:{position:"relative"}},"Table",l.createElement(t.a,{href:"#table","aria-label":"table permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{className:"status-label-description"},l.createElement(r.S,{type:"info"},"Stable"),l.createElement(r.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(d.Z)),"\n",l.createElement(c.Z,null,"  Tables are used to present tabulated data to the user in a consistent manner. HDS Tables offer multiple variants to allow clear presentation of vastly different data sets."),"\n",l.createElement(s.N,{label:"More table features are coming!",className:"siteNotification"},l.createElement(t.p,null,"HDS Tables are work in progress. The current feature set will serve most projects but later we are also looking into adding more features such as single row actions (edit, delete), expandable rows and supporting more HDS components inside tables.")),"\n",l.createElement(o.Z,{pageContext:e.pageContext},l.createElement(o.Z.TabList,null,l.createElement(o.Z.Tab,{href:"/"},"Usage"),l.createElement(o.Z.Tab,{href:"/code"},"Code"),l.createElement(o.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(o.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(o.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,a.ah)(),e.components);return t?l.createElement(t,e,l.createElement(i,e)):i(e)}},89482:function(e,t,n){var a=n(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:n="var(--fontsize-body-xl)",style:l={},children:r}=e;return a.createElement("p",{style:{fontSize:n,color:t,maxWidth:600,...l}},r)}},26127:function(e,t,n){var a=n(67294),l=n(14160),r=n(94671);const s="PageTabList",d="PageTabPanel",c="PageTab",o=e=>{var t;let{pageContext:n,children:o}=e;const i=n.frontmatter.slug,u=Array.isArray(o)?o:[o],m=u.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===s)),h=u.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===d)),b=null===(t=m.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===c)),p=b.findIndex((e=>i.endsWith(e.props.href))),E=-1===p?0:p,g=0===E?i:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(i);return a.createElement(r.a,{initiallyActiveTab:E},a.createElement(r.a.TabList,{className:"page-tabs-list"},b.map((e=>a.createElement(r.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?g:g+e.props.href))},e.props.children)))),b.map(((e,t)=>a.createElement(r.a.TabPanel,{key:e.props.href},E===t?h.props.children:a.createElement("div",null)))))},i=e=>{let{children:t}=e;return a.createElement(r.a.TabList,null,t)};i.componentName=s;const u=e=>{let{href:t,slug:n,children:l}=e;return a.createElement(r.a.Tab,null,l)};u.componentName=c;const m=e=>{let{children:t}=e;return a.createElement(r.a.TabPanel,null,t)};m.componentName=d,o.TabList=i,o.Tab=u,o.TabPanel=m,t.Z=o},57674:function(e,t,n){var a=n(67294),l=n(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return a.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},a.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>a.createElement("li",{key:t},a.createElement("span",{className:"status-name"},t),a.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-table-customisation-mdx-e2c837c267de3a745e6f.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-table-customisation-mdx-e2c837c267de3a745e6f.js
new file mode 100644
index 00000000000..693102696cd
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-table-customisation-mdx-e2c837c267de3a745e6f.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[363,3733],{83428:function(e,t,a){a.d(t,{S:function(){return c}});var n=a(80136),l=a(67294),s=a(7444),r=a(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,s.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const i=e=>{let{icon:t}=e;return l.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:s,type:c="neutral",iconLeft:u}=e,d=(0,n._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(o.statusLabel,o[c],u&&o.statusLabelWithIcon,a),"data-testid":s},d),u&&l.createElement(i,{icon:u}),t)}},54808:function(e,t,a){a.r(t);var n=a(11151),l=a(67294),s=a(62872),r=a(13277);const o=e=>{let{children:t,pageContext:a}=e;return l.createElement(r.default,{pageContext:a},t)};function i(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",p:"p",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",pre:"pre"},(0,n.ah)(),e.components),{Playground:a}=t;return a||function(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Playground",!0),l.createElement(l.Fragment,null,l.createElement(t.h2,{id:"customisation",style:{position:"relative"}},"Customisation",l.createElement(t.a,{href:"#customisation","aria-label":"customisation permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h3,{id:"customisation-properties",style:{position:"relative"}},"Customisation properties",l.createElement(t.a,{href:"#customisation-properties","aria-label":"customisation properties permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"In Core version, you can either use the ",l.createElement(t.code,null,"style")," or ",l.createElement(t.code,null,"class")," attributes in the HTML to customise the component."),"\n",l.createElement(t.p,null,"In React version, you can use the ",l.createElement(t.code,null,"theme")," property to customise the component."),"\n",l.createElement(t.p,null,"See all available theme variables in the table below."),"\n",l.createElement(t.table,null,l.createElement(t.thead,null,l.createElement(t.tr,null,l.createElement(t.th,null,"Theme variable"),l.createElement(t.th,null,"Description"))),l.createElement(t.tbody,null,l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"--content-background-color")),l.createElement(t.td,null,"Custom background color for the table content.")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"--header-background-color")),l.createElement(t.td,null,"Custom background color for table headers.")))),"\n",l.createElement(t.h3,{id:"customisation-example",style:{position:"relative"}},"Customisation example",l.createElement(t.a,{href:"#customisation-example","aria-label":"customisation example permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a,{scope:{Table:s.T}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},"import { Table } from 'hds-react';\n\n() => (\n<div\n  style={{\n    maxWidth: '640px',\n  }}\n>\n  <Table\n    caption={\n      <span>\n        <b>Table 1</b>: Table description\n      </span>\n    }\n    cols={[\n      {\n        headerName: 'Not rendered',\n        key: 'id',\n      },\n      {\n        headerName: 'First name',\n        key: 'firstName',\n      },\n      {\n        headerName: 'Surname',\n        key: 'surname',\n      },\n      {\n        headerName: 'Age',\n        key: 'age',\n        transform: function noRefCheck() {},\n      },\n      {\n        headerName: 'Profession',\n        key: 'profession',\n      },\n    ]}\n    indexKey=\"id\"\n    rows={[\n      {\n        age: 39,\n        firstName: 'Lauri',\n        id: 1000,\n        profession: 'Engineer',\n        surname: 'Kekkonen',\n      },\n      {\n        age: 62,\n        firstName: 'Maria',\n        id: 1001,\n        profession: 'Designer',\n        surname: 'Sarasoja',\n      },\n      {\n        age: 50,\n        firstName: 'Anneli',\n        id: 1002,\n        profession: 'Meteorologist',\n        surname: 'Routa',\n      },\n      {\n        age: 18,\n        firstName: 'Osku',\n        id: 1003,\n        profession: 'Mail Carrier',\n        surname: 'Rausku',\n      },\n    ]}\n    theme={{\n      '--content-background-color': 'var(--color-black-5)',\n      '--header-background-color': 'var(--color-tram)',\n    }}\n    variant=\"dark\"\n  />\n</div>\n)\n"))))}t.default=function(e){return void 0===e&&(e={}),l.createElement(o,e,l.createElement(i,e))}},13277:function(e,t,a){a.r(t);var n=a(11151),l=a(67294),s=a(83428),r=a(12818),o=a(57674),i=a(89482),c=(a(18607),a(26127));function u(e){const t=Object.assign({h1:"h1",a:"a",span:"span",p:"p"},(0,n.ah)(),e.components);return c.Z||d("PageTabs",!1),c.Z.Tab||d("PageTabs.Tab",!0),c.Z.TabList||d("PageTabs.TabList",!0),c.Z.TabPanel||d("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"table",style:{position:"relative"}},"Table",l.createElement(t.a,{href:"#table","aria-label":"table permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{className:"status-label-description"},l.createElement(s.S,{type:"info"},"Stable"),l.createElement(s.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(o.Z)),"\n",l.createElement(i.Z,null,"  Tables are used to present tabulated data to the user in a consistent manner. HDS Tables offer multiple variants to allow clear presentation of vastly different data sets."),"\n",l.createElement(r.N,{label:"More table features are coming!",className:"siteNotification"},l.createElement(t.p,null,"HDS Tables are work in progress. The current feature set will serve most projects but later we are also looking into adding more features such as single row actions (edit, delete), expandable rows and supporting more HDS components inside tables.")),"\n",l.createElement(c.Z,{pageContext:e.pageContext},l.createElement(c.Z.TabList,null,l.createElement(c.Z.Tab,{href:"/"},"Usage"),l.createElement(c.Z.Tab,{href:"/code"},"Code"),l.createElement(c.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(c.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(c.Z.TabPanel,null,e.children)))}function d(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,n.ah)(),e.components);return t?l.createElement(t,e,l.createElement(u,e)):u(e)}},89482:function(e,t,a){var n=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:l={},children:s}=e;return n.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...l}},s)}},26127:function(e,t,a){var n=a(67294),l=a(14160),s=a(94671);const r="PageTabList",o="PageTabPanel",i="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const u=a.frontmatter.slug,d=Array.isArray(c)?c:[c],m=d.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===r)),b=d.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===o)),h=null===(t=m.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===i)),p=h.findIndex((e=>u.endsWith(e.props.href))),f=-1===p?0:p,g=0===f?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return n.createElement(s.a,{initiallyActiveTab:f},n.createElement(s.a.TabList,{className:"page-tabs-list"},h.map((e=>n.createElement(s.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?g:g+e.props.href))},e.props.children)))),h.map(((e,t)=>n.createElement(s.a.TabPanel,{key:e.props.href},f===t?b.props.children:n.createElement("div",null)))))},u=e=>{let{children:t}=e;return n.createElement(s.a.TabList,null,t)};u.componentName=r;const d=e=>{let{href:t,slug:a,children:l}=e;return n.createElement(s.a.Tab,null,l)};d.componentName=i;const m=e=>{let{children:t}=e;return n.createElement(s.a.TabPanel,null,t)};m.componentName=o,c.TabList=u,c.Tab=d,c.TabPanel=m,t.Z=c},57674:function(e,t,a){var n=a(67294),l=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return n.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},n.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>n.createElement("li",{key:t},n.createElement("span",{className:"status-name"},t),n.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-table-index-mdx-87fc955581f4b14d0ded.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-table-index-mdx-87fc955581f4b14d0ded.js
new file mode 100644
index 00000000000..c46dabf8b55
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-table-index-mdx-87fc955581f4b14d0ded.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[4614,3733],{83428:function(e,a,t){t.d(a,{S:function(){return c}});var n=t(80136),r=t(67294),l=t(7444),s=t(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,l.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:a}=e;return r.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},a)},c=e=>{var{children:a,className:t,dataTestId:l,type:c="neutral",iconLeft:d}=e,m=(0,n._)(e,["children","className","dataTestId","type","iconLeft"]);return r.createElement("span",Object.assign({className:(0,s.c)(i.statusLabel,i[c],d&&i.statusLabelWithIcon,t),"data-testid":l},m),d&&r.createElement(o,{icon:d}),a)}},51345:function(e,a,t){t.r(a),t.d(a,{DenseExample:function(){return h},SelectionExample:function(){return b},SortingExample:function(){return p},TableDefaultExample:function(){return c},TableExample:function(){return o},VerticalExample:function(){return u},VerticalHeadersExample:function(){return d},ZebraExample:function(){return m}});var n=t(11151),r=t(67294),l=t(62872),s=t(13277);const i=e=>{let{children:a,pageContext:t}=e;return r.createElement(s.default,{pageContext:t},a)},o=()=>{const e=Object.assign({div:"div",span:"span",b:"b"},(0,n.ah)()),a=[{key:"id",headerName:"Not rendered"},{key:"firstName",headerName:"First name"},{key:"surname",headerName:"Surname"},{key:"age",headerName:"Age",transform:a=>{let{age:t}=a;return r.createElement(e.div,{style:{textAlign:"right"}},t)}},{key:"profession",headerName:"Profession"}],t=r.createElement(e.span,null,r.createElement(e.b,null,"Table 1"),": Service users (dark variant)");e.span,e.b;return r.createElement(e.div,{style:{maxWidth:"640px"}},r.createElement(l.T,{cols:a,rows:[{id:1e3,firstName:"Lauri",surname:"Kekkonen",age:39,profession:"Engineer"},{id:1001,firstName:"Maria",surname:"Sarasoja",age:62,profession:"Designer"},{id:1002,firstName:"Anneli",surname:"Routa",age:50,profession:"Meteorologist"},{id:1003,firstName:"Osku",surname:"Rausku",age:18,profession:"Mail Carrier"}],caption:t,indexKey:"id",renderIndexCol:!1}))},c=()=>{const e=Object.assign({div:"div",span:"span",b:"b"},(0,n.ah)()),a=[{key:"id",headerName:"Not rendered"},{key:"firstName",headerName:"First name"},{key:"surname",headerName:"Surname"},{key:"age",headerName:"Age",transform:a=>{let{age:t}=a;return r.createElement(e.div,{style:{textAlign:"right"}},t)}},{key:"profession",headerName:"Profession"}],t=[{id:1e3,firstName:"Lauri",surname:"Kekkonen",age:39,profession:"Engineer"},{id:1001,firstName:"Maria",surname:"Sarasoja",age:62,profession:"Designer"},{id:1002,firstName:"Anneli",surname:"Routa",age:50,profession:"Meteorologist"},{id:1003,firstName:"Osku",surname:"Rausku",age:18,profession:"Mail Carrier"}],s=r.createElement(e.span,null,r.createElement(e.b,null,"Table 2"),": Service users (dark variant)"),i=r.createElement(e.span,null,r.createElement(e.b,null,"Table 3"),": Service users (light variant)");return r.createElement(e.div,{style:{maxWidth:"640px"}},r.createElement(l.T,{cols:a,rows:t,caption:s,indexKey:"id",renderIndexCol:!1}),r.createElement(e.div,{style:{marginTop:"var(--spacing-l)"}},r.createElement(l.T,{cols:a,rows:t,caption:i,variant:"light",indexKey:"id",renderIndexCol:!1})))},d=()=>{const e=Object.assign({span:"span",b:"b",div:"div"},(0,n.ah)()),a=r.createElement(e.span,null,r.createElement(e.b,null,"Table 4"),": Units sold by weekday");return r.createElement(e.div,{style:{maxWidth:"486px"}},r.createElement(l.T,{verticalHeaders:[{key:"monday",headerName:"Monday"},{key:"tuesday",headerName:"Tuesday"},{key:"wednesday",headerName:"Wednesday"},{key:"thursday",headerName:"Thursday"},{key:"friday",headerName:"Friday"}],cols:[{key:"id",headerName:"Not rendered"},{key:"8-12",headerName:"8-12"},{key:"12-14",headerName:"12-14"},{key:"14-16",headerName:"14-16"},{key:"16-18",headerName:"16-18"}],rows:[{id:"monday","8-12":324,"12-14":562,"14-16":280,"16-18":94},{id:"tuesday","8-12":341,"12-14":688,"14-16":425,"16-18":113},{id:"wednesday","8-12":294,"12-14":492,"14-16":280,"16-18":67},{id:"thursday","8-12":312,"12-14":501,"14-16":455,"16-18":112},{id:"friday","8-12":150,"12-14":142,"14-16":362,"16-18":455}],caption:a,textAlignContentRight:!0,indexKey:"id",renderIndexCol:!1}))},m=()=>{const e=Object.assign({div:"div",span:"span",b:"b"},(0,n.ah)()),a=[{key:"id",headerName:"Not rendered"},{key:"firstName",headerName:"First name"},{key:"surname",headerName:"Surname"},{key:"age",headerName:"Age",transform:a=>{let{age:t}=a;return r.createElement(e.div,{style:{textAlign:"right"}},t)}},{key:"city",headerName:"City"},{key:"profession",headerName:"Profession"},{key:"experience",headerName:"Experience (years)",transform:a=>{let{experience:t}=a;return r.createElement(e.div,{style:{textAlign:"right"}},t)}}],t=r.createElement(e.span,null,r.createElement(e.b,null,"Table 5"),": Service users (zebra variant)");return r.createElement(e.div,{style:{maxWidth:"800px"}},r.createElement(l.T,{rows:[{id:1e3,firstName:"Lauri",surname:"Kekkonen",age:39,city:"Helsinki",profession:"Engineer",experience:10},{id:1001,firstName:"Maria",surname:"Sarasoja",age:62,city:"Tampere",profession:"Designer",experience:39},{id:1002,firstName:"Anneli",surname:"Routa",age:50,city:"Turku",profession:"Meteorologist",experience:25},{id:1003,firstName:"Osku",surname:"Rausku",age:18,city:"Oulu",profession:"Mail Carrier",experience:1}],cols:a,caption:t,zebra:!0,indexKey:"id",renderIndexCol:!1}))},u=()=>{const e=Object.assign({div:"div",span:"span",b:"b"},(0,n.ah)()),a=[{key:"day",headerName:"Day"},{key:"product1",headerName:"Product 1",transform:a=>{let{product1:t}=a;return r.createElement(e.div,{style:{textAlign:"right"}},t)}},{key:"product2",headerName:"Product 2",transform:a=>{let{product2:t}=a;return r.createElement(e.div,{style:{textAlign:"right"}},t)}},{key:"product3",headerName:"Product 3",transform:a=>{let{product3:t}=a;return r.createElement(e.div,{style:{textAlign:"right"}},t)}}],t=r.createElement(e.span,null,r.createElement(e.b,null,"Table 6"),": Units sold by weekday (vertical lines variant)");return r.createElement(e.div,{style:{maxWidth:"496px"}},r.createElement(l.T,{verticalLines:!0,cols:a,rows:[{day:"Monday",product1:12,product2:24,product3:5},{day:"Tuesday",product1:10,product2:32,product3:6},{day:"Wednesday",product1:14,product2:35,product3:6},{day:"Thursday",product1:11,product2:18,product3:2},{day:"Friday",product1:16,product2:45,product3:12}],caption:t,indexKey:"day",renderIndexCol:!0}))},h=()=>{const e=Object.assign({div:"div",span:"span",b:"b"},(0,n.ah)()),a=[{key:"id",headerName:"Not rendered"},{key:"firstName",headerName:"First name"},{key:"surname",headerName:"Surname"},{key:"age",headerName:"Age",transform:a=>{let{age:t}=a;return r.createElement(e.div,{style:{textAlign:"right"}},t)}},{key:"profession",headerName:"Profession"}],t=r.createElement(e.span,null,r.createElement(e.b,null,"Table 7"),": Service users (dense variant)");return r.createElement(e.div,{style:{maxWidth:"500px"}},r.createElement(l.T,{cols:a,rows:[{id:1e3,firstName:"Lauri",surname:"Kekkonen",age:39,profession:"Engineer"},{id:1001,firstName:"Maria",surname:"Sarasoja",age:62,profession:"Designer"},{id:1002,firstName:"Anneli",surname:"Routa",age:50,profession:"Meteorologist"},{id:1003,firstName:"Osku",surname:"Rausku",age:18,profession:"Mail Carrier"}],dense:!0,caption:t,indexKey:"id",renderIndexCol:!1}))},p=()=>{const e=Object.assign({div:"div",span:"span",b:"b"},(0,n.ah)()),a=[{key:"id",headerName:"Not rendered"},{key:"firstName",headerName:"First name",isSortable:!0},{key:"surname",headerName:"Surname",isSortable:!0},{key:"age",headerName:"Age",sortIconType:"other",transform:a=>{let{age:t}=a;return r.createElement(e.div,{style:{textAlign:"right"}},t)},isSortable:!0},{key:"profession",headerName:"Profession",isSortable:!0}],t=r.createElement(e.span,null,r.createElement(e.b,null,"Table 8"),": Service users (sorting, dark variant)");return r.createElement(e.div,{style:{maxWidth:"640px"}},r.createElement(l.T,{ariaLabelSortButtonUnset:"Not sorted",ariaLabelSortButtonAscending:"Sorted in ascending order",ariaLabelSortButtonDescending:"Sorted in descending order",indexKey:"id",renderIndexCol:!1,cols:a,rows:[{id:1e3,firstName:"Lauri",surname:"Kekkonen",age:39,profession:"Engineer"},{id:1001,firstName:"Maria",surname:"Sarasoja",age:62,profession:"Designer"},{id:1002,firstName:"Anneli",surname:"Routa",age:50,profession:"Meteorologist"},{id:1003,firstName:"Osku",surname:"Rausku",age:18,profession:"Mail Carrier"},{id:1004,firstName:"Linda",surname:"Koululainen",age:8,profession:"School student"}],caption:t}))},b=()=>{const e=Object.assign({div:"div"},(0,n.ah)()),a=[{key:"id",headerName:"Not rendered"},{key:"firstName",headerName:"First name"},{key:"surname",headerName:"Surname"},{key:"age",headerName:"Age",transform:a=>{let{age:t}=a;return r.createElement(e.div,{style:{textAlign:"right"}},t)}},{key:"profession",headerName:"Profession"}],{0:t,1:s}=(0,r.useState)([]);return r.createElement(e.div,{style:{maxWidth:"640px"}},r.createElement(l.T,{checkboxSelection:!0,selectedRows:t,setSelectedRows:s,heading:"Employees",id:"checkbox-selection",indexKey:"id",renderIndexCol:!1,cols:a,rows:[{id:1e3,firstName:"Lauri",surname:"Kekkonen",age:39,profession:"Engineer"},{id:1001,firstName:"Maria",surname:"Sarasoja",age:62,profession:"Designer"},{id:1002,firstName:"Anneli",surname:"Routa",age:50,profession:"Meteorologist"},{id:1003,firstName:"Osku",surname:"Rausku",age:18,profession:"Mail Carrier"}],selectAllRowsText:"Select all rows",clearSelectionsText:"Clear selections",ariaLabelCheckboxSelection:"Row selection"}))};function g(e){const a=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",h4:"h4",ul:"ul",li:"li",code:"code",p:"p"},(0,n.ah)(),e.components),{PlaygroundPreview:t,InternalLink:l}=a;return l||f("InternalLink",!0),t||f("PlaygroundPreview",!0),r.createElement(r.Fragment,null,r.createElement(a.h2,{id:"usage",style:{position:"relative"}},"Usage",r.createElement(a.a,{href:"#usage","aria-label":"usage permalink",className:"header-anchor after"},r.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",r.createElement(a.h3,{id:"example",style:{position:"relative"}},"Example",r.createElement(a.a,{href:"#example","aria-label":"example permalink",className:"header-anchor after"},r.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n","\n",r.createElement(t,null,r.createElement(o)),"\n",r.createElement(a.h3,{id:"principles",style:{position:"relative"}},"Principles",r.createElement(a.a,{href:"#principles","aria-label":"principles permalink",className:"header-anchor after"},r.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",r.createElement(a.h4,{id:"basic-tables-core-and-react",style:{position:"relative"}},"Basic tables (Core and React)",r.createElement(a.a,{href:"#basic-tables-core-and-react","aria-label":"basic tables core and react permalink",className:"header-anchor after"},r.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",r.createElement(a.ul,null,"\n",r.createElement(a.li,null,"Use tables to organise and present data."),"\n",r.createElement(a.li,null,"You should consider other presentation formats when the data is very simple, e.g. when the table would only have less than 4 rows or less than 3 columns.","\n",r.createElement(a.ul,null,"\n",r.createElement(a.li,null,"Also note that HDS Tables are not a spreadsheet application. If you expect the user to need complex data operations it may be wise to share the data as a spreadsheet file."),"\n"),"\n"),"\n",r.createElement(a.li,null,"Do not use tables to create layouts. Tables are meant to present data."),"\n",r.createElement(a.li,null,"Align text to the left and numerical data to the right. Header cells are always aligned to the left. HDS provides CSS classes to make this easier."),"\n",r.createElement(a.li,null,"Utilise zebra lines when your table has long rows. Zebra lines help the user to follow a specific row."),"\n",r.createElement(a.li,null,"Utilise vertical lines when your table has a lot of content and narrow cells. Number-heavy tables are an example of a situation where vertical lines may help the user."),"\n",r.createElement(a.li,null,"HDS Table offers smaller font sizes and spacing on mobile screens.","\n",r.createElement(a.ul,null,"\n",r.createElement(a.li,null,"If your table has a large amount of data, you can use the ",r.createElement(a.code,null,"dense")," property to force mobile spacing on all screen sizes."),"\n"),"\n"),"\n",r.createElement(a.li,null,"Table container is allowed to be scrollable. This is common on smaller screens where it can be impossible to fit the full table on the device screen.","\n",r.createElement(a.ul,null,"\n",r.createElement(a.li,null,"On smaller screens, it may be beneficial to consider other presentation formats for table data. For example, a table can be broken into cards."),"\n"),"\n"),"\n"),"\n",r.createElement(a.h4,{id:"interactable-tables-react",style:{position:"relative"}},"Interactable tables (React)",r.createElement(a.a,{href:"#interactable-tables-react","aria-label":"interactable tables react permalink",className:"header-anchor after"},r.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",r.createElement(a.ul,null,"\n",r.createElement(a.li,null,"HDS Tables support sorting. When a column is set to be sortable, a sorting button appears after its header.","\n",r.createElement(a.ul,null,"\n",r.createElement(a.li,null,"The sorting icon type can be changed depending on the type of data in the column."),"\n"),"\n"),"\n",r.createElement(a.li,null,"Only use sorting when it is necessary or otherwise beneficial to the user."),"\n",r.createElement(a.li,null,"HDS Table's rows can be made selectable. In this case, HDS automatically provides actions for selecting and deselecting all rows."),"\n",r.createElement(a.li,null,"If your table includes actions that can affect multiple rows (e.g. deleting selected rows or exporting a CSV file), these actions must be placed above the table. For more information, see ",r.createElement(a.a,{href:"#selecting-rows"},"Selecting rows")," and ",r.createElement(a.a,{href:"#custom-table-actions"},"Custom actions")," variant examples below."),"\n"),"\n",r.createElement(a.h3,{id:"variations",style:{position:"relative"}},"Variations",r.createElement(a.a,{href:"#variations","aria-label":"variations permalink",className:"header-anchor after"},r.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",r.createElement(a.h4,{id:"default",style:{position:"relative"}},"Default",r.createElement(a.a,{href:"#default","aria-label":"default permalink",className:"header-anchor after"},r.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",r.createElement(a.p,null,"The default HDS table variant includes horizontal lines. The header row can be either dark or light depending on the brand colour used as a background. Whether you need a black or white text colour can be checked from ",r.createElement(l,{href:"/foundation/design-tokens/colour/accessibility#brand-colour-combinations"},"HDS Colour documentation page")),"\n","\n",r.createElement(t,null,r.createElement(c)),"\n",r.createElement(a.h4,{id:"vertical-headers",style:{position:"relative"}},"Vertical headers",r.createElement(a.a,{href:"#vertical-headers","aria-label":"vertical headers permalink",className:"header-anchor after"},r.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",r.createElement(a.p,null,"Vertical headers can be used to create tables that have both a header row and a header column. Note that the empty header cell on the top left corner has ",r.createElement(a.code,null,'role="presentation"')," attribute."),"\n","\n",r.createElement(t,null,r.createElement(d)),"\n",r.createElement(a.h4,{id:"zebra-rows",style:{position:"relative"}},"Zebra rows",r.createElement(a.a,{href:"#zebra-rows","aria-label":"zebra rows permalink",className:"header-anchor after"},r.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",r.createElement(a.p,null,"Zebra rows (alternating row colours) should be used on tables that have very long rows. It makes it easier to visually scan the table and follow rows."),"\n","\n",r.createElement(t,null,r.createElement(m)),"\n",r.createElement(a.h4,{id:"vertical-lines",style:{position:"relative"}},"Vertical lines",r.createElement(a.a,{href:"#vertical-lines","aria-label":"vertical lines permalink",className:"header-anchor after"},r.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",r.createElement(a.p,null,"Vertical lines can be used on tables that have a lot of columns or a lot of similar data (e.g. numbers)."),"\n","\n",r.createElement(t,null,r.createElement(u)),"\n",r.createElement(a.h4,{id:"dense-tables",style:{position:"relative"}},"Dense tables",r.createElement(a.a,{href:"#dense-tables","aria-label":"dense tables permalink",className:"header-anchor after"},r.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",r.createElement(a.p,null,"If your table has a large amount of data, you can use the ",r.createElement(a.code,null,"dense")," property to force mobile spacing on all screen sizes. This allows more data to fit into the view at the same time."),"\n","\n",r.createElement(t,null,r.createElement(h)),"\n",r.createElement(a.h4,{id:"sorting",style:{position:"relative"}},"Sorting",r.createElement(a.a,{href:"#sorting","aria-label":"sorting permalink",className:"header-anchor after"},r.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",r.createElement(a.p,null,"Columns can be configured to be sortable which makes the sorting button appear after the column header. The sorting icon is different depending on the data type of the column (alphabetical or numeric/other)."),"\n",r.createElement(a.p,null,"Currently, only one column can be sorted at a time."),"\n","\n",r.createElement(t,null,r.createElement(p)),"\n",r.createElement(a.h4,{id:"selecting-rows",style:{position:"relative"}},"Selecting rows",r.createElement(a.a,{href:"#selecting-rows","aria-label":"selecting rows permalink",className:"header-anchor after"},r.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",r.createElement(a.p,null,"HDS Table rows can be set to be selectable. This makes the first column to be a selection column. This also adds two (2) action buttons above the table; one button for selecting all rows and one button to clear selection."),"\n","\n",r.createElement(t,null,r.createElement(b)))}function f(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){return void 0===e&&(e={}),r.createElement(i,e,r.createElement(g,e))}},13277:function(e,a,t){t.r(a);var n=t(11151),r=t(67294),l=t(83428),s=t(12818),i=t(57674),o=t(89482),c=(t(18607),t(26127));function d(e){const a=Object.assign({h1:"h1",a:"a",span:"span",p:"p"},(0,n.ah)(),e.components);return c.Z||m("PageTabs",!1),c.Z.Tab||m("PageTabs.Tab",!0),c.Z.TabList||m("PageTabs.TabList",!0),c.Z.TabPanel||m("PageTabs.TabPanel",!0),r.createElement(r.Fragment,null,r.createElement(a.h1,{id:"table",style:{position:"relative"}},"Table",r.createElement(a.a,{href:"#table","aria-label":"table permalink",className:"header-anchor after"},r.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",r.createElement("div",{className:"status-label-description"},r.createElement(l.S,{type:"info"},"Stable"),r.createElement(l.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),r.createElement(i.Z)),"\n",r.createElement(o.Z,null,"  Tables are used to present tabulated data to the user in a consistent manner. HDS Tables offer multiple variants to allow clear presentation of vastly different data sets."),"\n",r.createElement(s.N,{label:"More table features are coming!",className:"siteNotification"},r.createElement(a.p,null,"HDS Tables are work in progress. The current feature set will serve most projects but later we are also looking into adding more features such as single row actions (edit, delete), expandable rows and supporting more HDS components inside tables.")),"\n",r.createElement(c.Z,{pageContext:e.pageContext},r.createElement(c.Z.TabList,null,r.createElement(c.Z.Tab,{href:"/"},"Usage"),r.createElement(c.Z.Tab,{href:"/code"},"Code"),r.createElement(c.Z.Tab,{href:"/accessibility"},"Accessibility"),r.createElement(c.Z.Tab,{href:"/customisation"},"Customisation")),r.createElement(c.Z.TabPanel,null,e.children)))}function m(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,n.ah)(),e.components);return a?r.createElement(a,e,r.createElement(d,e)):d(e)}},89482:function(e,a,t){var n=t(67294);a.Z=e=>{let{color:a="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:r={},children:l}=e;return n.createElement("p",{style:{fontSize:t,color:a,maxWidth:600,...r}},l)}},26127:function(e,a,t){var n=t(67294),r=t(14160),l=t(94671);const s="PageTabList",i="PageTabPanel",o="PageTab",c=e=>{var a;let{pageContext:t,children:c}=e;const d=t.frontmatter.slug,m=Array.isArray(c)?c:[c],u=m.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===s)),h=m.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===i)),p=null===(a=u.props)||void 0===a?void 0:a.children.filter((e=>e.type.componentName===o)),b=p.findIndex((e=>d.endsWith(e.props.href))),g=-1===b?0:b,f=0===g?d:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(d);return n.createElement(l.a,{initiallyActiveTab:g},n.createElement(l.a.TabList,{className:"page-tabs-list"},p.map((e=>n.createElement(l.a.Tab,{key:e.props.href,onClick:()=>(0,r.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),p.map(((e,a)=>n.createElement(l.a.TabPanel,{key:e.props.href},g===a?h.props.children:n.createElement("div",null)))))},d=e=>{let{children:a}=e;return n.createElement(l.a.TabList,null,a)};d.componentName=s;const m=e=>{let{href:a,slug:t,children:r}=e;return n.createElement(l.a.Tab,null,r)};m.componentName=o;const u=e=>{let{children:a}=e;return n.createElement(l.a.TabPanel,null,a)};u.componentName=i,c.TabList=d,c.Tab=m,c.TabPanel=u,a.Z=c},57674:function(e,a,t){var n=t(67294),r=t(45422);a.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return n.createElement(r.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},n.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((a=>n.createElement("li",{key:a},n.createElement("span",{className:"status-name"},a),n.createElement("span",null,e[a]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-table-tabs-mdx-763625a9deea99710da9.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-table-tabs-mdx-763625a9deea99710da9.js
new file mode 100644
index 00000000000..27f6a176ffe
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-table-tabs-mdx-763625a9deea99710da9.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[3733],{83428:function(e,a,t){t.d(a,{S:function(){return i}});var s=t(80136),l=t(67294),n=t(7444),r=t(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const c=e=>{let{icon:a}=e;return l.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},a)},i=e=>{var{children:a,className:t,dataTestId:n,type:i="neutral",iconLeft:b}=e,u=(0,s._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(o.statusLabel,o[i],b&&o.statusLabelWithIcon,t),"data-testid":n},u),b&&l.createElement(c,{icon:b}),a)}},13277:function(e,a,t){t.r(a);var s=t(11151),l=t(67294),n=t(83428),r=t(12818),o=t(57674),c=t(89482),i=(t(18607),t(26127));function b(e){const a=Object.assign({h1:"h1",a:"a",span:"span",p:"p"},(0,s.ah)(),e.components);return i.Z||u("PageTabs",!1),i.Z.Tab||u("PageTabs.Tab",!0),i.Z.TabList||u("PageTabs.TabList",!0),i.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(a.h1,{id:"table",style:{position:"relative"}},"Table",l.createElement(a.a,{href:"#table","aria-label":"table permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{className:"status-label-description"},l.createElement(n.S,{type:"info"},"Stable"),l.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(o.Z)),"\n",l.createElement(c.Z,null,"  Tables are used to present tabulated data to the user in a consistent manner. HDS Tables offer multiple variants to allow clear presentation of vastly different data sets."),"\n",l.createElement(r.N,{label:"More table features are coming!",className:"siteNotification"},l.createElement(a.p,null,"HDS Tables are work in progress. The current feature set will serve most projects but later we are also looking into adding more features such as single row actions (edit, delete), expandable rows and supporting more HDS components inside tables.")),"\n",l.createElement(i.Z,{pageContext:e.pageContext},l.createElement(i.Z.TabList,null,l.createElement(i.Z.Tab,{href:"/"},"Usage"),l.createElement(i.Z.Tab,{href:"/code"},"Code"),l.createElement(i.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(i.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(i.Z.TabPanel,null,e.children)))}function u(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,s.ah)(),e.components);return a?l.createElement(a,e,l.createElement(b,e)):b(e)}},89482:function(e,a,t){var s=t(67294);a.Z=e=>{let{color:a="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:l={},children:n}=e;return s.createElement("p",{style:{fontSize:t,color:a,maxWidth:600,...l}},n)}},26127:function(e,a,t){var s=t(67294),l=t(14160),n=t(94671);const r="PageTabList",o="PageTabPanel",c="PageTab",i=e=>{var a;let{pageContext:t,children:i}=e;const b=t.frontmatter.slug,u=Array.isArray(i)?i:[i],d=u.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===r)),m=u.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===o)),p=null===(a=d.props)||void 0===a?void 0:a.children.filter((e=>e.type.componentName===c)),h=p.findIndex((e=>b.endsWith(e.props.href))),_=-1===h?0:h,f=0===_?b:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(b);return s.createElement(n.a,{initiallyActiveTab:_},s.createElement(n.a.TabList,{className:"page-tabs-list"},p.map((e=>s.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),p.map(((e,a)=>s.createElement(n.a.TabPanel,{key:e.props.href},_===a?m.props.children:s.createElement("div",null)))))},b=e=>{let{children:a}=e;return s.createElement(n.a.TabList,null,a)};b.componentName=r;const u=e=>{let{href:a,slug:t,children:l}=e;return s.createElement(n.a.Tab,null,l)};u.componentName=c;const d=e=>{let{children:a}=e;return s.createElement(n.a.TabPanel,null,a)};d.componentName=o,i.TabList=b,i.Tab=u,i.TabPanel=d,a.Z=i},57674:function(e,a,t){var s=t(67294),l=t(45422);a.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return s.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},s.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((a=>s.createElement("li",{key:a},s.createElement("span",{className:"status-name"},a),s.createElement("span",null,e[a]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-tabs-accessibility-mdx-f1a18c8969414ada9019.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-tabs-accessibility-mdx-f1a18c8969414ada9019.js
new file mode 100644
index 00000000000..7194664e7b9
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-tabs-accessibility-mdx-f1a18c8969414ada9019.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[6165,3872],{83428:function(e,t,a){a.d(t,{S:function(){return c}});var s=a(80136),l=a(67294),n=a(7444),r=a(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:t}=e;return l.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:n,type:c="neutral",iconLeft:u}=e,b=(0,s._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(i.statusLabel,i[c],u&&i.statusLabelWithIcon,a),"data-testid":n},b),u&&l.createElement(o,{icon:u}),t)}},14066:function(e,t,a){a.r(t);var s=a(11151),l=a(67294),n=a(64540),r=a(1076);const i=e=>{let{children:t,pageContext:a}=e;return l.createElement(n.default,{pageContext:a},t)};function o(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",strong:"strong"},(0,s.ah)(),e.components);return l.createElement(l.Fragment,null,l.createElement(t.h2,{id:"accessibility",style:{position:"relative"}},"Accessibility",l.createElement(t.a,{href:"#accessibility","aria-label":"accessibility permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h3,{id:"pay-attention-to",style:{position:"relative"}},"Pay attention to",l.createElement(t.a,{href:"#pay-attention-to","aria-label":"pay attention to permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,l.createElement(t.strong,null,"It is advisable to use colour combinations provided by the implementation.")," These combinations are ensured to comply with WCAG AA requirements. When customising colours, refer to ",l.createElement(r.Z,{href:"/foundation/design-tokens/colour"},"colour guidelines")," to ensure accessibility."),"\n",l.createElement(t.li,null,"The TabPanel must appear right below the TabList in the DOM tree. This means that the next focusable element after the TabList will be the tab's content."),"\n",l.createElement(t.li,null,"While HDS Tabs are accessible, you must ensure that the content displayed in the TabPanel is also accessible."),"\n",l.createElement(t.li,null,"HDS Tabs use manual activation. This means that when using tabs with a keyboard, each tab must be separately activated with Enter/Space, and they do not activate automatically. If you are creating custom tabs for your project, follow the same control scheme."),"\n"))}t.default=function(e){return void 0===e&&(e={}),l.createElement(i,e,l.createElement(o,e))}},64540:function(e,t,a){a.r(t);var s=a(11151),l=a(67294),n=a(83428),r=a(57674),i=a(89482),o=(a(18607),a(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,s.ah)(),e.components);return o.Z||u("PageTabs",!1),o.Z.Tab||u("PageTabs.Tab",!0),o.Z.TabList||u("PageTabs.TabList",!0),o.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"tabs",style:{position:"relative"}},"Tabs",l.createElement(t.a,{href:"#tabs","aria-label":"tabs permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{className:"status-label-description"},l.createElement(n.S,{type:"info"},"Stable"),l.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(i.Z,null,"Tabs are used to help the user browse and navigate between information contents that have a relation."),"\n",l.createElement(o.Z,{pageContext:e.pageContext},l.createElement(o.Z.TabList,null,l.createElement(o.Z.Tab,{href:"/"},"Usage"),l.createElement(o.Z.Tab,{href:"/code"},"Code"),l.createElement(o.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(o.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(o.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,s.ah)(),e.components);return t?l.createElement(t,e,l.createElement(c,e)):c(e)}},89482:function(e,t,a){var s=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:l={},children:n}=e;return s.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...l}},n)}},26127:function(e,t,a){var s=a(67294),l=a(14160),n=a(94671);const r="PageTabList",i="PageTabPanel",o="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const u=a.frontmatter.slug,b=Array.isArray(c)?c:[c],h=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===r)),d=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===i)),m=null===(t=h.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===o)),p=m.findIndex((e=>u.endsWith(e.props.href))),f=-1===p?0:p,g=0===f?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return s.createElement(n.a,{initiallyActiveTab:f},s.createElement(n.a.TabList,{className:"page-tabs-list"},m.map((e=>s.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?g:g+e.props.href))},e.props.children)))),m.map(((e,t)=>s.createElement(n.a.TabPanel,{key:e.props.href},f===t?d.props.children:s.createElement("div",null)))))},u=e=>{let{children:t}=e;return s.createElement(n.a.TabList,null,t)};u.componentName=r;const b=e=>{let{href:t,slug:a,children:l}=e;return s.createElement(n.a.Tab,null,l)};b.componentName=o;const h=e=>{let{children:t}=e;return s.createElement(n.a.TabPanel,null,t)};h.componentName=i,c.TabList=u,c.Tab=b,c.TabPanel=h,t.Z=c},57674:function(e,t,a){var s=a(67294),l=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return s.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},s.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>s.createElement("li",{key:t},s.createElement("span",{className:"status-name"},t),s.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-tabs-code-mdx-4b171782325aadb7d4c7.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-tabs-code-mdx-4b171782325aadb7d4c7.js
new file mode 100644
index 00000000000..7d6d30948ec
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-tabs-code-mdx-4b171782325aadb7d4c7.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[1457,3872],{83428:function(e,a,t){t.d(a,{S:function(){return c}});var n=t(80136),l=t(67294),s=t(7444),r=t(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,s.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const i=e=>{let{icon:a}=e;return l.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},a)},c=e=>{var{children:a,className:t,dataTestId:s,type:c="neutral",iconLeft:b}=e,d=(0,n._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(o.statusLabel,o[c],b&&o.statusLabelWithIcon,t),"data-testid":s},d),b&&l.createElement(i,{icon:b}),a)}},4613:function(e,a,t){t.r(a);var n=t(11151),l=t(67294),s=t(94671),r=t(64540);const o=e=>{let{children:a,pageContext:t}=e;return l.createElement(r.default,{pageContext:t},a)};function i(e){const a=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",h4:"h4",pre:"pre",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",strong:"strong",p:"p"},(0,n.ah)(),e.components),{Playground:t,IconCheckCircleFill:r,Link:o,ExternalLink:i,IconCrossCircle:b}=a;return i||c("ExternalLink",!0),r||c("IconCheckCircleFill",!0),b||c("IconCrossCircle",!0),o||c("Link",!0),t||c("Playground",!0),l.createElement(l.Fragment,null,l.createElement(a.h2,{id:"code",style:{position:"relative"}},"Code",l.createElement(a.a,{href:"#code","aria-label":"code permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.h3,{id:"code-examples",style:{position:"relative"}},"Code examples",l.createElement(a.a,{href:"#code-examples","aria-label":"code examples permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.h4,{id:"default",style:{position:"relative"}},"Default",l.createElement(a.a,{href:"#default","aria-label":"default permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t,{scope:{Tabs:s.a}},l.createElement(a.pre,null,l.createElement(a.code,{className:"language-jsx"},"import { Tabs } from 'hds-react';\n\n() => (\n  <Tabs>\n    <Tabs.TabList style={{ marginBottom: 'var(--spacing-m)' }}>\n      <Tabs.Tab>Daycare</Tabs.Tab>\n      <Tabs.Tab>Pre-school</Tabs.Tab>\n      <Tabs.Tab>Basic education</Tabs.Tab>\n      <Tabs.Tab>Upper secondary</Tabs.Tab>\n      <Tabs.Tab>University</Tabs.Tab>\n    </Tabs.TabList>\n    <Tabs.TabPanel>\n      Daytime care for people who cannot be fully independent, such as children or elderly people.\n    </Tabs.TabPanel>\n    <Tabs.TabPanel>\n      A pre-school is an educational establishment offering early childhood education to children before they begin\n      compulsory education at primary school.\n    </Tabs.TabPanel>\n    <Tabs.TabPanel>\n      The objective of basic education in Finland is to support pupils&#39; growth towards humanity and ethically\n      responsible membership of society.\n    </Tabs.TabPanel>\n    <Tabs.TabPanel>\n      Upper secondary school studies last three to four years, preparing the students for the matriculation examination.\n    </Tabs.TabPanel>\n    <Tabs.TabPanel>\n      A high-level educational institution in which students study for degrees and academic research is done.\n    </Tabs.TabPanel>\n  </Tabs>\n)\n"))),"\n",l.createElement(a.h4,{id:"small",style:{position:"relative"}},"Small",l.createElement(a.a,{href:"#small","aria-label":"small permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t,{scope:{Tabs:s.a}},l.createElement(a.pre,null,l.createElement(a.code,{className:"language-jsx"},"import { Tabs } from 'hds-react';\n\n() => (\n  <Tabs small>\n    <Tabs.TabList style={{ marginBottom: 'var(--spacing-m)' }}>\n      <Tabs.Tab>Daycare</Tabs.Tab>\n      <Tabs.Tab>Pre-school</Tabs.Tab>\n      <Tabs.Tab>Basic education</Tabs.Tab>\n      <Tabs.Tab>Upper secondary</Tabs.Tab>\n      <Tabs.Tab>University</Tabs.Tab>\n    </Tabs.TabList>\n    <Tabs.TabPanel>\n      Daytime care for people who cannot be fully independent, such as children or elderly people.\n    </Tabs.TabPanel>\n    <Tabs.TabPanel>\n      A pre-school is an educational establishment offering early childhood education to children before they begin\n      compulsory education at primary school.\n    </Tabs.TabPanel>\n    <Tabs.TabPanel>\n      The objective of basic education in Finland is to support pupils&#39; growth towards humanity and ethically\n      responsible membership of society.\n    </Tabs.TabPanel>\n    <Tabs.TabPanel>\n      Upper secondary school studies last three to four years, preparing the students for the matriculation examination.\n    </Tabs.TabPanel>\n    <Tabs.TabPanel>\n      A high-level educational institution in which students study for degrees and academic research is done.\n    </Tabs.TabPanel>\n  </Tabs>\n)\n"))),"\n",l.createElement(a.h4,{id:"overflow",style:{position:"relative"}},"Overflow",l.createElement(a.a,{href:"#overflow","aria-label":"overflow permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t,{scope:{Tabs:s.a}},l.createElement(a.pre,null,l.createElement(a.code,{className:"language-jsx"},"import { Tabs } from 'hds-react';\n\n() => (\n  <div style={{ maxWidth: '400px' }}>\n    <Tabs>\n      <Tabs.TabList style={{ marginBottom: 'var(--spacing-m)' }}>\n        <Tabs.Tab>Daycare</Tabs.Tab>\n        <Tabs.Tab>Pre-school</Tabs.Tab>\n        <Tabs.Tab>Basic education</Tabs.Tab>\n        <Tabs.Tab>Upper secondary</Tabs.Tab>\n        <Tabs.Tab>University</Tabs.Tab>\n      </Tabs.TabList>\n      <Tabs.TabPanel>\n        Daytime care for people who cannot be fully independent, such as children or elderly people.\n      </Tabs.TabPanel>\n      <Tabs.TabPanel>\n        A pre-school is an educational establishment offering early childhood education to children before they begin\n        compulsory education at primary school.\n      </Tabs.TabPanel>\n      <Tabs.TabPanel>\n        The objective of basic education in Finland is to support pupils&#39; growth towards humanity and ethically\n        responsible membership of society.\n      </Tabs.TabPanel>\n      <Tabs.TabPanel>\n        Upper secondary school studies last three to four years, preparing the students for the matriculation\n        examination.\n      </Tabs.TabPanel>\n      <Tabs.TabPanel>\n        A high-level educational institution in which students study for degrees and academic research is done.\n      </Tabs.TabPanel>\n    </Tabs>\n  </div>\n)\n"))),"\n",l.createElement(a.h3,{id:"packages",style:{position:"relative"}},"Packages",l.createElement(a.a,{href:"#packages","aria-label":"packages permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.table,null,l.createElement(a.thead,null,l.createElement(a.tr,null,l.createElement(a.th,null,"Package"),l.createElement(a.th,null,"Included"),l.createElement(a.th,null,"Storybook link"),l.createElement(a.th,null,"Source link"))),l.createElement(a.tbody,null,l.createElement(a.tr,null,l.createElement(a.td,null,l.createElement(a.strong,null,"HDS React")),l.createElement(a.td,null,l.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},l.createElement(r)," Yes ")),l.createElement(a.td,null,l.createElement(o,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-tabs--default"},"View in Storybook")),l.createElement(a.td,null,l.createElement(i,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/react/src/components/stepper"},"View source"))),l.createElement(a.tr,null,l.createElement(a.td,null,l.createElement(a.strong,null,"HDS Core")),l.createElement(a.td,null,l.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},l.createElement(b)," No ")),l.createElement(a.td,null,"-"),l.createElement(a.td,null,"-")))),"\n",l.createElement(a.h3,{id:"properties",style:{position:"relative"}},"Properties",l.createElement(a.a,{href:"#properties","aria-label":"properties permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.p,null,"Note! You can find the full list of properties in the ",l.createElement(o,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/docs/components-tabs--default"},"React Storybook.")),"\n",l.createElement(a.table,null,l.createElement(a.thead,null,l.createElement(a.tr,null,l.createElement(a.th,null,"Property"),l.createElement(a.th,null,"Description"),l.createElement(a.th,null,"Values"),l.createElement(a.th,null,"Default value"))),l.createElement(a.tbody,null,l.createElement(a.tr,null,l.createElement(a.td,null,l.createElement(a.code,null,"small")),l.createElement(a.td,null,"If set to true, the small tabs variant is used."),l.createElement(a.td,null,l.createElement(a.code,null,"boolean")),l.createElement(a.td,null,"false")),l.createElement(a.tr,null,l.createElement(a.td,null,"[Table 1:Tabs properties]"),l.createElement(a.td),l.createElement(a.td),l.createElement(a.td)))))}function c(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){return void 0===e&&(e={}),l.createElement(o,e,l.createElement(i,e))}},64540:function(e,a,t){t.r(a);var n=t(11151),l=t(67294),s=t(83428),r=t(57674),o=t(89482),i=(t(18607),t(26127));function c(e){const a=Object.assign({h1:"h1",a:"a",span:"span"},(0,n.ah)(),e.components);return i.Z||b("PageTabs",!1),i.Z.Tab||b("PageTabs.Tab",!0),i.Z.TabList||b("PageTabs.TabList",!0),i.Z.TabPanel||b("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(a.h1,{id:"tabs",style:{position:"relative"}},"Tabs",l.createElement(a.a,{href:"#tabs","aria-label":"tabs permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{className:"status-label-description"},l.createElement(s.S,{type:"info"},"Stable"),l.createElement(s.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(o.Z,null,"Tabs are used to help the user browse and navigate between information contents that have a relation."),"\n",l.createElement(i.Z,{pageContext:e.pageContext},l.createElement(i.Z.TabList,null,l.createElement(i.Z.Tab,{href:"/"},"Usage"),l.createElement(i.Z.Tab,{href:"/code"},"Code"),l.createElement(i.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(i.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(i.Z.TabPanel,null,e.children)))}function b(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,n.ah)(),e.components);return a?l.createElement(a,e,l.createElement(c,e)):c(e)}},89482:function(e,a,t){var n=t(67294);a.Z=e=>{let{color:a="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:l={},children:s}=e;return n.createElement("p",{style:{fontSize:t,color:a,maxWidth:600,...l}},s)}},26127:function(e,a,t){var n=t(67294),l=t(14160),s=t(94671);const r="PageTabList",o="PageTabPanel",i="PageTab",c=e=>{var a;let{pageContext:t,children:c}=e;const b=t.frontmatter.slug,d=Array.isArray(c)?c:[c],h=d.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===r)),m=d.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===o)),u=null===(a=h.props)||void 0===a?void 0:a.children.filter((e=>e.type.componentName===i)),p=u.findIndex((e=>b.endsWith(e.props.href))),T=-1===p?0:p,f=0===T?b:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(b);return n.createElement(s.a,{initiallyActiveTab:T},n.createElement(s.a.TabList,{className:"page-tabs-list"},u.map((e=>n.createElement(s.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),u.map(((e,a)=>n.createElement(s.a.TabPanel,{key:e.props.href},T===a?m.props.children:n.createElement("div",null)))))},b=e=>{let{children:a}=e;return n.createElement(s.a.TabList,null,a)};b.componentName=r;const d=e=>{let{href:a,slug:t,children:l}=e;return n.createElement(s.a.Tab,null,l)};d.componentName=i;const h=e=>{let{children:a}=e;return n.createElement(s.a.TabPanel,null,a)};h.componentName=o,c.TabList=b,c.Tab=d,c.TabPanel=h,a.Z=c},57674:function(e,a,t){var n=t(67294),l=t(45422);a.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return n.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},n.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((a=>n.createElement("li",{key:a},n.createElement("span",{className:"status-name"},a),n.createElement("span",null,e[a]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-tabs-customisation-mdx-0059209907b7636e727a.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-tabs-customisation-mdx-0059209907b7636e727a.js
new file mode 100644
index 00000000000..464eafefc56
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-tabs-customisation-mdx-0059209907b7636e727a.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[9358,3872],{83428:function(e,a,t){t.d(a,{S:function(){return c}});var n=t(80136),l=t(67294),s=t(7444),r=t(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,s.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const i=e=>{let{icon:a}=e;return l.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},a)},c=e=>{var{children:a,className:t,dataTestId:s,type:c="neutral",iconLeft:b}=e,u=(0,n._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(o.statusLabel,o[c],b&&o.statusLabelWithIcon,t),"data-testid":s},u),b&&l.createElement(i,{icon:b}),a)}},84067:function(e,a,t){t.r(a);var n=t(11151),l=t(67294),s=t(94671),r=t(64540);const o=e=>{let{children:a,pageContext:t}=e;return l.createElement(r.default,{pageContext:t},a)};function i(e){const a=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",p:"p",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",pre:"pre"},(0,n.ah)(),e.components),{Playground:t}=a;return t||function(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Playground",!0),l.createElement(l.Fragment,null,l.createElement(a.h2,{id:"customisation",style:{position:"relative"}},"Customisation",l.createElement(a.a,{href:"#customisation","aria-label":"customisation permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.h3,{id:"customisation-properties",style:{position:"relative"}},"Customisation properties",l.createElement(a.a,{href:"#customisation-properties","aria-label":"customisation properties permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.p,null,"You can use the ",l.createElement(a.code,null,"theme")," property to customise the component. See all available theme variables in the table below."),"\n",l.createElement(a.table,null,l.createElement(a.thead,null,l.createElement(a.tr,null,l.createElement(a.th,null,"Theme variable"),l.createElement(a.th,null,"Description"))),l.createElement(a.tbody,null,l.createElement(a.tr,null,l.createElement(a.td,null,l.createElement(a.code,null,"--tab-color")),l.createElement(a.td,null,"Colour of the tab text label.")),l.createElement(a.tr,null,l.createElement(a.td,null,l.createElement(a.code,null,"--tab-active-border-color")),l.createElement(a.td,null,"Colour of the active tab indicator.")))),"\n",l.createElement(a.h3,{id:"customisation-example",style:{position:"relative"}},"Customisation example",l.createElement(a.a,{href:"#customisation-example","aria-label":"customisation example permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t,{scope:{Tabs:s.a}},l.createElement(a.pre,null,l.createElement(a.code,{className:"language-jsx"},"import { Tabs } from 'hds-react';\n\n() => {\n  const theme = {\n    '--tab-color': 'var(--color-black-90)',\n    '--tab-active-border-color': 'var(--color-metro)',\n  };\n  return (\n    <Tabs theme={theme}>\n      <Tabs.TabList style={{ marginBottom: 'var(--spacing-m)' }}>\n        <Tabs.Tab>Daycare</Tabs.Tab>\n        <Tabs.Tab>Pre-school</Tabs.Tab>\n        <Tabs.Tab>Basic education</Tabs.Tab>\n        <Tabs.Tab>Upper secondary</Tabs.Tab>\n        <Tabs.Tab>University</Tabs.Tab>\n      </Tabs.TabList>\n      <Tabs.TabPanel>\n        Daytime care for people who cannot be fully independent, such as children or elderly people.\n      </Tabs.TabPanel>\n      <Tabs.TabPanel>\n        A pre-school is an educational establishment offering early childhood education to children before they begin\n        compulsory education at primary school.\n      </Tabs.TabPanel>\n      <Tabs.TabPanel>\n        The objective of basic education in Finland is to support pupils&#39; growth towards humanity and ethically\n        responsible membership of society.\n      </Tabs.TabPanel>\n      <Tabs.TabPanel>\n        Upper secondary school studies last three to four years, preparing the students for the matriculation\n        examination.\n      </Tabs.TabPanel>\n      <Tabs.TabPanel>\n        A high-level educational institution in which students study for degrees and academic research is done.\n      </Tabs.TabPanel>\n    </Tabs>\n  );\n}\n"))))}a.default=function(e){return void 0===e&&(e={}),l.createElement(o,e,l.createElement(i,e))}},64540:function(e,a,t){t.r(a);var n=t(11151),l=t(67294),s=t(83428),r=t(57674),o=t(89482),i=(t(18607),t(26127));function c(e){const a=Object.assign({h1:"h1",a:"a",span:"span"},(0,n.ah)(),e.components);return i.Z||b("PageTabs",!1),i.Z.Tab||b("PageTabs.Tab",!0),i.Z.TabList||b("PageTabs.TabList",!0),i.Z.TabPanel||b("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(a.h1,{id:"tabs",style:{position:"relative"}},"Tabs",l.createElement(a.a,{href:"#tabs","aria-label":"tabs permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{className:"status-label-description"},l.createElement(s.S,{type:"info"},"Stable"),l.createElement(s.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(o.Z,null,"Tabs are used to help the user browse and navigate between information contents that have a relation."),"\n",l.createElement(i.Z,{pageContext:e.pageContext},l.createElement(i.Z.TabList,null,l.createElement(i.Z.Tab,{href:"/"},"Usage"),l.createElement(i.Z.Tab,{href:"/code"},"Code"),l.createElement(i.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(i.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(i.Z.TabPanel,null,e.children)))}function b(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,n.ah)(),e.components);return a?l.createElement(a,e,l.createElement(c,e)):c(e)}},89482:function(e,a,t){var n=t(67294);a.Z=e=>{let{color:a="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:l={},children:s}=e;return n.createElement("p",{style:{fontSize:t,color:a,maxWidth:600,...l}},s)}},26127:function(e,a,t){var n=t(67294),l=t(14160),s=t(94671);const r="PageTabList",o="PageTabPanel",i="PageTab",c=e=>{var a;let{pageContext:t,children:c}=e;const b=t.frontmatter.slug,u=Array.isArray(c)?c:[c],d=u.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===r)),m=u.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===o)),h=null===(a=d.props)||void 0===a?void 0:a.children.filter((e=>e.type.componentName===i)),p=h.findIndex((e=>b.endsWith(e.props.href))),T=-1===p?0:p,f=0===T?b:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(b);return n.createElement(s.a,{initiallyActiveTab:T},n.createElement(s.a.TabList,{className:"page-tabs-list"},h.map((e=>n.createElement(s.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),h.map(((e,a)=>n.createElement(s.a.TabPanel,{key:e.props.href},T===a?m.props.children:n.createElement("div",null)))))},b=e=>{let{children:a}=e;return n.createElement(s.a.TabList,null,a)};b.componentName=r;const u=e=>{let{href:a,slug:t,children:l}=e;return n.createElement(s.a.Tab,null,l)};u.componentName=i;const d=e=>{let{children:a}=e;return n.createElement(s.a.TabPanel,null,a)};d.componentName=o,c.TabList=b,c.Tab=u,c.TabPanel=d,a.Z=c},57674:function(e,a,t){var n=t(67294),l=t(45422);a.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return n.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},n.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((a=>n.createElement("li",{key:a},n.createElement("span",{className:"status-name"},a),n.createElement("span",null,e[a]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-tabs-index-mdx-8782ff503ef92732b123.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-tabs-index-mdx-8782ff503ef92732b123.js
new file mode 100644
index 00000000000..d16c8e86b2d
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-tabs-index-mdx-8782ff503ef92732b123.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[3346,3872],{83428:function(e,a,t){t.d(a,{S:function(){return c}});var l=t(80136),n=t(67294),s=t(7444),r=t(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,s.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:a}=e;return n.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},a)},c=e=>{var{children:a,className:t,dataTestId:s,type:c="neutral",iconLeft:u}=e,m=(0,l._)(e,["children","className","dataTestId","type","iconLeft"]);return n.createElement("span",Object.assign({className:(0,r.c)(i.statusLabel,i[c],u&&i.statusLabelWithIcon,t),"data-testid":s},m),u&&n.createElement(o,{icon:u}),a)}},67606:function(e,a,t){t.r(a);var l=t(11151),n=t(67294),s=t(94671),r=t(64540);const i=e=>{let{children:a,pageContext:t}=e;return n.createElement(r.default,{pageContext:t},a)};function o(e){const a=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",p:"p",ul:"ul",li:"li",strong:"strong",h4:"h4"},(0,l.ah)(),e.components),{PlaygroundPreview:t}=a;return t||c("PlaygroundPreview",!0),s.a||c("Tabs",!1),s.a.Tab||c("Tabs.Tab",!0),s.a.TabList||c("Tabs.TabList",!0),s.a.TabPanel||c("Tabs.TabPanel",!0),n.createElement(n.Fragment,null,n.createElement(a.h2,{id:"usage",style:{position:"relative"}},"Usage",n.createElement(a.a,{href:"#usage","aria-label":"usage permalink",className:"header-anchor after"},n.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(a.h3,{id:"example",style:{position:"relative"}},"Example",n.createElement(a.a,{href:"#example","aria-label":"example permalink",className:"header-anchor after"},n.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t,null,n.createElement(s.a,null,n.createElement(s.a.TabList,{style:{marginBottom:"var(--spacing-m)"}},n.createElement(s.a.Tab,null,"Daycare"),n.createElement(s.a.Tab,null,"Pre-school"),n.createElement(s.a.Tab,null,"Basic education"),n.createElement(s.a.Tab,null,"Upper secondary"),n.createElement(s.a.Tab,null,"University")),n.createElement(s.a.TabPanel,null,n.createElement(a.p,null,"Daytime care for people who cannot be fully independent, such as children or elderly people.")),n.createElement(s.a.TabPanel,null,n.createElement(a.p,null,"A pre-school is an educational establishment offering early childhood education to children before they begin\ncompulsory education at primary school.")),n.createElement(s.a.TabPanel,null,n.createElement(a.p,null,"The objective of basic education in Finland is to support pupils' growth towards humanity and ethically\nresponsible membership of society.")),n.createElement(s.a.TabPanel,null,n.createElement(a.p,null,"Upper secondary school studies last three to four years, preparing the students for the matriculation examination.")),n.createElement(s.a.TabPanel,null,n.createElement(a.p,null,"A high-level educational institution in which students study for degrees and academic research is done.")))),"\n",n.createElement(a.h3,{id:"principles",style:{position:"relative"}},"Principles",n.createElement(a.a,{href:"#principles","aria-label":"principles permalink",className:"header-anchor after"},n.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(a.ul,null,"\n",n.createElement(a.li,null,n.createElement(a.strong,null,"Contents of the tabs in a single tab list should have a relation to each other. Do not use tabs for only navigation purposes but actually group views within a context.")),"\n",n.createElement(a.li,null,n.createElement(a.strong,null,"Pay close attention to tab labels.")," They should clearly indicate the contents of the tab so the user can reliably guess what they will find inside the tab.","\n",n.createElement(a.ul,null,"\n",n.createElement(a.li,null,"Keep tab labels short and concise - maximum of 1-2 words long. Do not use ALL CAPS in tab labels."),"\n"),"\n"),"\n",n.createElement(a.li,null,"It is recommended that the maximum amount of tabs in a single tab list is six (6)."),"\n",n.createElement(a.li,null,n.createElement(a.strong,null,"When using tabs, keep in mind that the user should not be required to compare information between tabs.")," Constantly switching between tabs can be a very cumbersome experience, so make sure that all information that the user needs is available in a single view."),"\n",n.createElement(a.li,null,n.createElement(a.strong,null,"Do not use HDS Tabs to create step-by-step forms.")," You must not expect that the user activates all tabs in a specific order."),"\n",n.createElement(a.li,null,"Do not span tab lists into multiple rows. If you are running out of space, consider if using tabs is the correct option or use ",n.createElement(a.a,{href:"#overflow"},"the overflow functionality")," that HDS Tabs offer."),"\n"),"\n",n.createElement(a.h3,{id:"variations",style:{position:"relative"}},"Variations",n.createElement(a.a,{href:"#variations","aria-label":"variations permalink",className:"header-anchor after"},n.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(a.h4,{id:"default",style:{position:"relative"}},"Default",n.createElement(a.a,{href:"#default","aria-label":"default permalink",className:"header-anchor after"},n.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(a.p,null,"Default tab variant is suitable for most use cases. It features tabs that are at equal width based on the widest tab label."),"\n",n.createElement(t,null,n.createElement(s.a,null,n.createElement(s.a.TabList,{style:{marginBottom:"var(--spacing-m)"}},n.createElement(s.a.Tab,null,"Daycare"),n.createElement(s.a.Tab,null,"Pre-school"),n.createElement(s.a.Tab,null,"Basic education"),n.createElement(s.a.Tab,null,"Upper secondary"),n.createElement(s.a.Tab,null,"University")),n.createElement(s.a.TabPanel,null,n.createElement(a.p,null,"Daytime care for people who cannot be fully independent, such as children or elderly people.")),n.createElement(s.a.TabPanel,null,n.createElement(a.p,null,"A pre-school is an educational establishment offering early childhood education to children before they begin\ncompulsory education at primary school.")),n.createElement(s.a.TabPanel,null,n.createElement(a.p,null,"The objective of basic education in Finland is to support pupils' growth towards humanity and ethically\nresponsible membership of society.")),n.createElement(s.a.TabPanel,null,n.createElement(a.p,null,"Upper secondary school studies last three to four years, preparing the students for the matriculation examination.")),n.createElement(s.a.TabPanel,null,n.createElement(a.p,null,"A high-level educational institution in which students study for degrees and academic research is done.")))),"\n",n.createElement(a.h4,{id:"small",style:{position:"relative"}},"Small",n.createElement(a.a,{href:"#small","aria-label":"small permalink",className:"header-anchor after"},n.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(a.p,null,"Small tabs variant can be used on smaller screens or when you are tight on space. Small tabs use space much more efficiently by reducing a single tab width and font size."),"\n",n.createElement(t,null,n.createElement(s.a,{small:!0},n.createElement(s.a.TabList,{style:{marginBottom:"var(--spacing-m)"}},n.createElement(s.a.Tab,null,"Daycare"),n.createElement(s.a.Tab,null,"Pre-school"),n.createElement(s.a.Tab,null,"Basic education"),n.createElement(s.a.Tab,null,"Upper secondary"),n.createElement(s.a.Tab,null,"University")),n.createElement(s.a.TabPanel,null,n.createElement(a.p,null,"Daytime care for people who cannot be fully independent, such as children or elderly people.")),n.createElement(s.a.TabPanel,null,n.createElement(a.p,null,"A pre-school is an educational establishment offering early childhood education to children before they begin\ncompulsory education at primary school.")),n.createElement(s.a.TabPanel,null,n.createElement(a.p,null,"The objective of basic education in Finland is to support pupils' growth towards humanity and ethically\nresponsible membership of society.")),n.createElement(s.a.TabPanel,null,n.createElement(a.p,null,"Upper secondary school studies last three to four years, preparing the students for the matriculation examination.")),n.createElement(s.a.TabPanel,null,n.createElement(a.p,null,"A high-level educational institution in which students study for degrees and academic research is done.")))),"\n",n.createElement(a.h4,{id:"overflow",style:{position:"relative"}},"Overflow",n.createElement(a.a,{href:"#overflow","aria-label":"overflow permalink",className:"header-anchor after"},n.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(a.p,null,"HDS Tabs have an automatic overflow functionality when the TabList does not fit into its container. In this case, an overflow indicator icon is shown at the edge of the TabList if there are tabs outside of the visible area. TabList scrolls automatically when the user selects tabs, presses the overflow icon or uses keyboard controls to move between tabs."),"\n",n.createElement(a.p,null,"Note! It is generally recommended that before relying on the overflow you attempt other solutions first. For example, you can try using the small tabs variant or reducing the number of tabs in the tablist."),"\n",n.createElement(t,null,n.createElement("div",{style:{maxWidth:"400px"}},n.createElement(s.a,null,n.createElement(s.a.TabList,{style:{marginBottom:"var(--spacing-m)"}},n.createElement(s.a.Tab,null,"Daycare"),n.createElement(s.a.Tab,null,"Pre-school"),n.createElement(s.a.Tab,null,"Basic education"),n.createElement(s.a.Tab,null,"Upper secondary"),n.createElement(s.a.Tab,null,"University")),n.createElement(s.a.TabPanel,null,n.createElement(a.p,null,"Daytime care for people who cannot be fully independent, such as children or elderly people.")),n.createElement(s.a.TabPanel,null,n.createElement(a.p,null,"A pre-school is an educational establishment offering early childhood education to children before they begin\ncompulsory education at primary school.")),n.createElement(s.a.TabPanel,null,n.createElement(a.p,null,"The objective of basic education in Finland is to support pupils' growth towards humanity and ethically\nresponsible membership of society.")),n.createElement(s.a.TabPanel,null,n.createElement(a.p,null,"Upper secondary school studies last three to four years, preparing the students for the matriculation\nexamination.")),n.createElement(s.a.TabPanel,null,n.createElement(a.p,null,"A high-level educational institution in which students study for degrees and academic research is done."))))))}function c(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){return void 0===e&&(e={}),n.createElement(i,e,n.createElement(o,e))}},64540:function(e,a,t){t.r(a);var l=t(11151),n=t(67294),s=t(83428),r=t(57674),i=t(89482),o=(t(18607),t(26127));function c(e){const a=Object.assign({h1:"h1",a:"a",span:"span"},(0,l.ah)(),e.components);return o.Z||u("PageTabs",!1),o.Z.Tab||u("PageTabs.Tab",!0),o.Z.TabList||u("PageTabs.TabList",!0),o.Z.TabPanel||u("PageTabs.TabPanel",!0),n.createElement(n.Fragment,null,n.createElement(a.h1,{id:"tabs",style:{position:"relative"}},"Tabs",n.createElement(a.a,{href:"#tabs","aria-label":"tabs permalink",className:"header-anchor after"},n.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement("div",{className:"status-label-description"},n.createElement(s.S,{type:"info"},"Stable"),n.createElement(s.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),n.createElement(r.Z)),"\n",n.createElement(i.Z,null,"Tabs are used to help the user browse and navigate between information contents that have a relation."),"\n",n.createElement(o.Z,{pageContext:e.pageContext},n.createElement(o.Z.TabList,null,n.createElement(o.Z.Tab,{href:"/"},"Usage"),n.createElement(o.Z.Tab,{href:"/code"},"Code"),n.createElement(o.Z.Tab,{href:"/accessibility"},"Accessibility"),n.createElement(o.Z.Tab,{href:"/customisation"},"Customisation")),n.createElement(o.Z.TabPanel,null,e.children)))}function u(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,l.ah)(),e.components);return a?n.createElement(a,e,n.createElement(c,e)):c(e)}},89482:function(e,a,t){var l=t(67294);a.Z=e=>{let{color:a="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:n={},children:s}=e;return l.createElement("p",{style:{fontSize:t,color:a,maxWidth:600,...n}},s)}},26127:function(e,a,t){var l=t(67294),n=t(14160),s=t(94671);const r="PageTabList",i="PageTabPanel",o="PageTab",c=e=>{var a;let{pageContext:t,children:c}=e;const u=t.frontmatter.slug,m=Array.isArray(c)?c:[c],h=m.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===r)),d=m.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===i)),b=null===(a=h.props)||void 0===a?void 0:a.children.filter((e=>e.type.componentName===o)),p=b.findIndex((e=>u.endsWith(e.props.href))),f=-1===p?0:p,E=0===f?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return l.createElement(s.a,{initiallyActiveTab:f},l.createElement(s.a.TabList,{className:"page-tabs-list"},b.map((e=>l.createElement(s.a.Tab,{key:e.props.href,onClick:()=>(0,n.navigate)(""+("/"===e.props.href?E:E+e.props.href))},e.props.children)))),b.map(((e,a)=>l.createElement(s.a.TabPanel,{key:e.props.href},f===a?d.props.children:l.createElement("div",null)))))},u=e=>{let{children:a}=e;return l.createElement(s.a.TabList,null,a)};u.componentName=r;const m=e=>{let{href:a,slug:t,children:n}=e;return l.createElement(s.a.Tab,null,n)};m.componentName=o;const h=e=>{let{children:a}=e;return l.createElement(s.a.TabPanel,null,a)};h.componentName=i,c.TabList=u,c.Tab=m,c.TabPanel=h,a.Z=c},57674:function(e,a,t){var l=t(67294),n=t(45422);a.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return l.createElement(n.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},l.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((a=>l.createElement("li",{key:a},l.createElement("span",{className:"status-name"},a),l.createElement("span",null,e[a]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-tabs-tabs-mdx-cfa726333d859683b4a0.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-tabs-tabs-mdx-cfa726333d859683b4a0.js
new file mode 100644
index 00000000000..f2dd284b847
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-tabs-tabs-mdx-cfa726333d859683b4a0.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[3872],{83428:function(e,a,t){t.d(a,{S:function(){return i}});var s=t(80136),l=t(67294),n=t(7444),r=t(34300),c={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:a}=e;return l.createElement("span",{className:c.statusLabelIcon,"aria-hidden":"true"},a)},i=e=>{var{children:a,className:t,dataTestId:n,type:i="neutral",iconLeft:b}=e,u=(0,s._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(c.statusLabel,c[i],b&&c.statusLabelWithIcon,t),"data-testid":n},u),b&&l.createElement(o,{icon:b}),a)}},64540:function(e,a,t){t.r(a);var s=t(11151),l=t(67294),n=t(83428),r=t(57674),c=t(89482),o=(t(18607),t(26127));function i(e){const a=Object.assign({h1:"h1",a:"a",span:"span"},(0,s.ah)(),e.components);return o.Z||b("PageTabs",!1),o.Z.Tab||b("PageTabs.Tab",!0),o.Z.TabList||b("PageTabs.TabList",!0),o.Z.TabPanel||b("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(a.h1,{id:"tabs",style:{position:"relative"}},"Tabs",l.createElement(a.a,{href:"#tabs","aria-label":"tabs permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{className:"status-label-description"},l.createElement(n.S,{type:"info"},"Stable"),l.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(c.Z,null,"Tabs are used to help the user browse and navigate between information contents that have a relation."),"\n",l.createElement(o.Z,{pageContext:e.pageContext},l.createElement(o.Z.TabList,null,l.createElement(o.Z.Tab,{href:"/"},"Usage"),l.createElement(o.Z.Tab,{href:"/code"},"Code"),l.createElement(o.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(o.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(o.Z.TabPanel,null,e.children)))}function b(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,s.ah)(),e.components);return a?l.createElement(a,e,l.createElement(i,e)):i(e)}},89482:function(e,a,t){var s=t(67294);a.Z=e=>{let{color:a="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:l={},children:n}=e;return s.createElement("p",{style:{fontSize:t,color:a,maxWidth:600,...l}},n)}},26127:function(e,a,t){var s=t(67294),l=t(14160),n=t(94671);const r="PageTabList",c="PageTabPanel",o="PageTab",i=e=>{var a;let{pageContext:t,children:i}=e;const b=t.frontmatter.slug,u=Array.isArray(i)?i:[i],d=u.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===r)),m=u.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===c)),h=null===(a=d.props)||void 0===a?void 0:a.children.filter((e=>e.type.componentName===o)),p=h.findIndex((e=>b.endsWith(e.props.href))),_=-1===p?0:p,f=0===_?b:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(b);return s.createElement(n.a,{initiallyActiveTab:_},s.createElement(n.a.TabList,{className:"page-tabs-list"},h.map((e=>s.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),h.map(((e,a)=>s.createElement(n.a.TabPanel,{key:e.props.href},_===a?m.props.children:s.createElement("div",null)))))},b=e=>{let{children:a}=e;return s.createElement(n.a.TabList,null,a)};b.componentName=r;const u=e=>{let{href:a,slug:t,children:l}=e;return s.createElement(n.a.Tab,null,l)};u.componentName=o;const d=e=>{let{children:a}=e;return s.createElement(n.a.TabPanel,null,a)};d.componentName=c,i.TabList=b,i.Tab=u,i.TabPanel=d,a.Z=i},57674:function(e,a,t){var s=t(67294),l=t(45422);a.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return s.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},s.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((a=>s.createElement("li",{key:a},s.createElement("span",{className:"status-name"},a),s.createElement("span",null,e[a]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-tag-accessibility-mdx-afcd8ceeaea9b34ab588.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-tag-accessibility-mdx-afcd8ceeaea9b34ab588.js
new file mode 100644
index 00000000000..09bf0da706b
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-tag-accessibility-mdx-afcd8ceeaea9b34ab588.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[8236,7770],{83428:function(e,t,a){a.d(t,{S:function(){return c}});var l=a(80136),s=a(67294),n=a(7444),r=a(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:t}=e;return s.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:n,type:c="neutral",iconLeft:u}=e,d=(0,l._)(e,["children","className","dataTestId","type","iconLeft"]);return s.createElement("span",Object.assign({className:(0,r.c)(i.statusLabel,i[c],u&&i.statusLabelWithIcon,a),"data-testid":n},d),u&&s.createElement(o,{icon:u}),t)}},58152:function(e,t,a){a.r(t);var l=a(11151),s=a(67294),n=a(80699),r=a(66170),i=a(1076);const o=e=>{let{children:t,pageContext:a}=e;return s.createElement(r.default,{pageContext:a},t)};function c(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",code:"code",strong:"strong"},(0,l.ah)(),e.components);return s.createElement(s.Fragment,null,s.createElement(t.h2,{id:"accessibility",style:{position:"relative"}},"Accessibility",s.createElement(t.a,{href:"#accessibility","aria-label":"accessibility permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.h3,{id:"pay-attention-to",style:{position:"relative"}},"Pay attention to",s.createElement(t.a,{href:"#pay-attention-to","aria-label":"pay attention to permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.ul,null,"\n",s.createElement(t.li,null,"For interactable Tags you must set a descriptive ",s.createElement(t.code,null,"aria-label")," for assistive technologies so the user understands what happens if the Tag is clicked. For example ",s.createElement(t.code,null,'aria-label="Move to category: <category name>"'),"."),"\n",s.createElement(t.li,null,'Remember to add a descriptive aria-label for the delete button which does not have a visible label. For example deleteButtonAriaLabel="Delete item: Americum".'),"\n",s.createElement(t.li,null,s.createElement(t.strong,null,"It is advisable to use colour combinations provided by the implementation.")," These combinations are ensured to comply with WCAG AA requirements. When customising colours, refer to ",s.createElement(i.Z,{href:"/foundation/design-tokens/colour"},"colour guidelines")," to ensure accessibility."),"\n",s.createElement(t.li,null,"If you are customising tag colours, make sure they are easily distinguishable from ",s.createElement(i.Z,{href:"/foundation/design-tokens/colour#ui-colours"},"HDS UI Colours.")," These colours are reserved to present UI state and status information in applications using HDS."),"\n",s.createElement(t.li,null,"Remember that colour should never be the only way of conveying information. Make sure the meaning of the status label is clearly described by the label text. Refer to ",s.createElement(n.Z,{href:"https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html"},"WCAG 2.1 Use of Color guideline")," for more information."),"\n"),"\n",s.createElement(t.h3,{id:"which-role-attribute-should-be-used-with-tags",style:{position:"relative"}},"Which role attribute should be used with Tags?",s.createElement(t.a,{href:"#which-role-attribute-should-be-used-with-tags","aria-label":"which role attribute should be used with tags permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.ul,null,"\n",s.createElement(t.li,null,"HDS Tags can be clickable. In this case, it needs either a ",s.createElement(t.code,null,"role=“link”")," or ",s.createElement(t.code,null,"role=“button”")," as an attribute. The role value should be decided as follows:","\n",s.createElement(t.ul,null,"\n",s.createElement(t.li,null,"If the user's focus is moved to another location or another page is opened, the role should be ",s.createElement(t.code,null,"link"),'. Example: The user clicks a Tag labelled as "News". The tag takes the user to a new page that lists all items tagged as "News".'),"\n",s.createElement(t.li,null,"If, however, the tag will result in the page's content being dynamically changed (i.e. Tag triggers an action), use ",s.createElement(t.code,null,"role=“button”"),". Example: Clicking the tag will cause a search below to be filtered."),"\n"),"\n"),"\n"))}t.default=function(e){return void 0===e&&(e={}),s.createElement(o,e,s.createElement(c,e))}},66170:function(e,t,a){a.r(t);var l=a(11151),s=a(67294),n=a(83428),r=a(57674),i=a(89482),o=(a(18607),a(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,l.ah)(),e.components);return o.Z||u("PageTabs",!1),o.Z.Tab||u("PageTabs.Tab",!0),o.Z.TabList||u("PageTabs.TabList",!0),o.Z.TabPanel||u("PageTabs.TabPanel",!0),s.createElement(s.Fragment,null,s.createElement(t.h1,{id:"tag",style:{position:"relative"}},"Tag",s.createElement(t.a,{href:"#tag","aria-label":"tag permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement("div",{class:"status-label-description"},s.createElement(n.S,{type:"error"},"Draft"),s.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),s.createElement(r.Z)),"\n",s.createElement(i.Z,null,"Tags are used to show attributes of an object or element such as categories. HDS also uses Tags to present filters selected for searches."),"\n",s.createElement(o.Z,{pageContext:e.pageContext},s.createElement(o.Z.TabList,null,s.createElement(o.Z.Tab,{href:"/"},"Usage"),s.createElement(o.Z.Tab,{href:"/code"},"Code"),s.createElement(o.Z.Tab,{href:"/accessibility"},"Accessibility"),s.createElement(o.Z.Tab,{href:"/customisation"},"Customisation")),s.createElement(o.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,l.ah)(),e.components);return t?s.createElement(t,e,s.createElement(c,e)):c(e)}},89482:function(e,t,a){var l=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:s={},children:n}=e;return l.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...s}},n)}},26127:function(e,t,a){var l=a(67294),s=a(14160),n=a(94671);const r="PageTabList",i="PageTabPanel",o="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const u=a.frontmatter.slug,d=Array.isArray(c)?c:[c],h=d.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===r)),b=d.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===i)),m=null===(t=h.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===o)),p=m.findIndex((e=>u.endsWith(e.props.href))),g=-1===p?0:p,f=0===g?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return l.createElement(n.a,{initiallyActiveTab:g},l.createElement(n.a.TabList,{className:"page-tabs-list"},m.map((e=>l.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,s.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),m.map(((e,t)=>l.createElement(n.a.TabPanel,{key:e.props.href},g===t?b.props.children:l.createElement("div",null)))))},u=e=>{let{children:t}=e;return l.createElement(n.a.TabList,null,t)};u.componentName=r;const d=e=>{let{href:t,slug:a,children:s}=e;return l.createElement(n.a.Tab,null,s)};d.componentName=o;const h=e=>{let{children:t}=e;return l.createElement(n.a.TabPanel,null,t)};h.componentName=i,c.TabList=u,c.Tab=d,c.TabPanel=h,t.Z=c},57674:function(e,t,a){var l=a(67294),s=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return l.createElement(s.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},l.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>l.createElement("li",{key:t},l.createElement("span",{className:"status-name"},t),l.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-tag-code-mdx-b967625ec20fe2894f94.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-tag-code-mdx-b967625ec20fe2894f94.js
new file mode 100644
index 00000000000..a6344b74718
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-tag-code-mdx-b967625ec20fe2894f94.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[1993,7770],{83428:function(e,t,a){a.d(t,{S:function(){return o}});var n=a(80136),l=a(67294),s=a(7444),r=a(34300),c={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,s.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const i=e=>{let{icon:t}=e;return l.createElement("span",{className:c.statusLabelIcon,"aria-hidden":"true"},t)},o=e=>{var{children:t,className:a,dataTestId:s,type:o="neutral",iconLeft:d}=e,u=(0,n._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(c.statusLabel,c[o],d&&c.statusLabelWithIcon,a),"data-testid":s},u),d&&l.createElement(i,{icon:d}),t)}},3072:function(e,t,a){a.d(t,{T:function(){return d}});var n=a(80136),l=a(67294),s=a(7444),r=a(34300),c=a(97640),i=a(35828),o={deleteButton:"Tag-module_deleteButton__1diMR tag_hds-tag__delete-button__33Tgz",visuallyHidden:"Tag-module_visuallyHidden__3xPWW",tag:"Tag-module_tag__3bo5S tag_hds-tag__3MKf3",label:"Tag-module_label__zCgFr undefined",large:"Tag-module_large__1ZNIX tag_hds-tag--large__1bVs5"};(0,s.s)(".tag_hds-icon__2LFMT{--icon-size:100%;background-color:currentcolor;display:inline-block;height:var(--icon-size);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:auto;mask-size:auto;width:var(--icon-size)}.tag_hds-icon__2LFMT.tag_hds-icon--size-xs__L1nV_{--icon-size:var(--spacing-layout-2-xs)}.tag_hds-icon__2LFMT.tag_hds-icon--size-s__23CMA{--icon-size:var(--spacing-layout-xs)}.tag_hds-icon__2LFMT.tag_hds-icon--size-m__2zCBY{--icon-size:var(--spacing-layout-s)}.tag_hds-icon__2LFMT.tag_hds-icon--size-l__UuAMZ{--icon-size:var(--spacing-layout-m)}.tag_hds-icon__2LFMT.tag_hds-icon--size-xl__2f_bT{--icon-size:var(--spacing-layout-l)}.tag_hds-icon--cross__2tq88{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18 7.5L13.5 12l4.5 4.5-1.5 1.5-4.5-4.5L7.5 18 6 16.5l4.5-4.5L6 7.5 7.5 6l4.5 4.5L16.5 6 18 7.5z' fill='currentColor'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18 7.5L13.5 12l4.5 4.5-1.5 1.5-4.5-4.5L7.5 18 6 16.5l4.5-4.5L6 7.5 7.5 6l4.5 4.5L16.5 6 18 7.5z' fill='currentColor'/%3E%3C/svg%3E\")}.tag_hds-tag__3MKf3{--tag-background:var(--color-black-10);--tag-color:var(--color-black-90);--tag-font-size-large:var(--fontsize-body-m);--tag-font-size:var(--fontsize-body-s);--tag-height-large:48px;--tag-height:32px;--tag-line-height:var(--lineheight-xl);--tag-padding-large:10px 20px;--tag-padding:4px 12px;--tag-spacing-large:var(--spacing-s);--tag-spacing:var(--spacing-xs);align-items:center;background-color:var(--tag-background);border-radius:calc(var(--tag-height) / 2);box-sizing:border-box;color:var(--tag-color);display:inline-flex;flex-direction:row;font-size:var(--tag-font-size);grid-gap:var(--spacing-2-xs);gap:var(--spacing-2-xs);justify-content:center;line-height:var(--tag-line-height);min-height:var(--tag-height);outline:none;padding:var(--tag-padding)}.tag_hds-tag--large__1bVs5{--tag-font-size:var(--tag-font-size-large);--tag-height:var(--tag-height-large);--tag-line-height:var(--lineheight-l);--tag-padding:var(--tag-padding-large);--tag-spacing:var(--tag-spacing-large)}.tag_hds-tag__3MKf3:focus,.tag_hds-tag__3MKf3:focus-within{box-shadow:0 0 0 3px var(--color-focus-outline)}.tag_hds-tag__3MKf3[tabindex=\"0\"]{cursor:pointer}.tag_hds-tag__delete-button__33Tgz{display:flex;flex-shrink:0;height:var(--spacing-m);margin:0 calc(0px - var(--spacing-3-xs));outline:none;width:var(--spacing-m)}.Tag-module_deleteButton__1diMR{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.Tag-module_visuallyHidden__3xPWW{border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}");const d=(0,l.forwardRef)(((e,t)=>{var{children:a,className:s,deleteButtonAriaLabel:d,deleteButtonProps:u,id:m="hds-tag",labelClassName:h,labelProps:g,onClick:p,onDelete:b,role:E="link",size:_="m",srOnlyLabel:f,theme:v}=e,y=(0,n._)(e,["children","className","deleteButtonAriaLabel","deleteButtonProps","id","labelClassName","labelProps","onClick","onDelete","role","size","srOnlyLabel","theme"]);const k=(0,c.u)(o.tag,v),T=(0,r.c)(o.tag,"l"===_&&o.large,k,s),x="function"==typeof p,w="function"==typeof b,L=f||d,N=(0,r.c)(o.label,h);return l.createElement("div",Object.assign({id:m,className:T,ref:t},x&&{tabIndex:0,role:E,onClick:p,onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||p(e)}},y),l.createElement("span",Object.assign({id:m&&m+"-label",className:N},g),f&&l.createElement("span",{className:o.visuallyHidden},f),l.createElement("span",Object.assign({},L?{"aria-hidden":!0}:{}),a)),w&&l.createElement("button",Object.assign({},u,{id:m&&m+"-delete-button",type:"button",className:o.deleteButton,"aria-label":d,onClick:b}),l.createElement(i.I,{className:o.icon,"aria-hidden":!0})))}))},74166:function(e,t,a){a.r(t);var n=a(11151),l=a(67294),s=a(3072),r=a(66170);const c=e=>{let{children:t,pageContext:a}=e;return l.createElement(r.default,{pageContext:a},t)};function i(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",h4:"h4",pre:"pre",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",strong:"strong",p:"p"},(0,n.ah)(),e.components),{Playground:a,IconCheckCircleFill:r,Link:c,ExternalLink:i}=t;return i||o("ExternalLink",!0),r||o("IconCheckCircleFill",!0),c||o("Link",!0),a||o("Playground",!0),l.createElement(l.Fragment,null,l.createElement(t.h2,{id:"code",style:{position:"relative"}},"Code",l.createElement(t.a,{href:"#code","aria-label":"code permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h3,{id:"code-examples",style:{position:"relative"}},"Code examples",l.createElement(t.a,{href:"#code-examples","aria-label":"code examples permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h4,{id:"default",style:{position:"relative"}},"Default",l.createElement(t.a,{href:"#default","aria-label":"default permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a,{scope:{Tag:s.T}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},"import { Tag } from 'hds-react';\n\n() => (<>\n  <Tag\n    aria-label=\"Category: News\"\n  >\n    News\n  </Tag>\n\n  <Tag\n    aria-label=\"Category: Announcements\"\n    style={{ marginLeft: 'var(--spacing-s)' }}\n  >\n    Announcements\n  </Tag>\n</>)\n")),l.createElement(t.pre,null,l.createElement(t.code,{className:"language-html"},'<div>\n<div class="hds-tag" tabindex="0" onclick="" aria-label="Category: News">\n  <span class="hds-tag__label">News</span>\n</div>\n\n<div class="hds-tag" tabindex="0" onclick="" aria-label="Category: Announcements" style="margin-left:var(--spacing-xs);">\n  <span class="hds-tag__label">Announcements</span>\n</div>\n</div>\n'))),"\n",l.createElement(t.h4,{id:"clickable",style:{position:"relative"}},"Clickable",l.createElement(t.a,{href:"#clickable","aria-label":"clickable permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a,{scope:{Tag:s.T}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},'import { Tag } from \'hds-react\';\n\n() => (<>\n  <Tag\n    role="link"\n    onClick={() => {}}\n    aria-label="Move to category: News"\n  >\n    News\n  </Tag>\n\n  <Tag\n    role="link"\n    onClick={() => {}}\n    aria-label="Move to category: Announcements"\n    style={{ marginLeft: \'var(--spacing-s)\' }}\n  >\n    Announcements\n  </Tag>\n</>)\n')),l.createElement(t.pre,null,l.createElement(t.code,{className:"language-html"},'<div>\n<div class="hds-tag" role="link" tabindex="0" onclick="" aria-label="Move to category: News">\n  <span class="hds-tag__label">News</span>\n</div>\n\n<div class="hds-tag" role="link" tabindex="0" onclick="" aria-label="Move to category: Announcements" style="margin-left:var(--spacing-xs);">\n  <span class="hds-tag__label">Announcements</span>\n</div>\n</div>\n'))),"\n",l.createElement(t.h4,{id:"deletable",style:{position:"relative"}},"Deletable",l.createElement(t.a,{href:"#deletable","aria-label":"deletable permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a,{scope:{Tag:s.T}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},"import { Tag } from 'hds-react';\n\n() => (<>\n  <Tag\n    onDelete={() => {}}\n    deleteButtonAriaLabel=\"Delete filter: News\"\n  >\n    News\n  </Tag>\n\n  <Tag\n    onDelete={() => {}}\n    deleteButtonAriaLabel=\"Delete filter: Announcements\"\n    style={{ marginLeft: 'var(--spacing-s)' }}\n  >\n    Announcements\n  </Tag>\n</>)\n")),l.createElement(t.pre,null,l.createElement(t.code,{className:"language-html"},'<div>\n<div class="hds-tag">\n  <span class="hds-tag__label" aria-hidden="true">News</span>\n  <button type="button" aria-label="Delete filter: News" class="hds-tag__delete-button button-reset">\n      <span aria-hidden="true" class="hds-icon hds-icon--cross"></span>\n  </button>\n</div>\n\n<div class="hds-tag" style="margin-left:var(--spacing-xs);">\n  <span class="hds-tag__label" aria-hidden="true">Announcements</span>\n  <button type="button" aria-label="Delete filter: Announcements" class="hds-tag__delete-button button-reset">\n      <span aria-hidden="true" class="hds-icon hds-icon--cross"></span>\n  </button>\n</div>\n</div>\n'))),"\n",l.createElement(t.h4,{id:"large-deletable",style:{position:"relative"}},"Large deletable",l.createElement(t.a,{href:"#large-deletable","aria-label":"large deletable permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a,{scope:{Tag:s.T}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},'import { Tag } from \'hds-react\';\n\n() => (<>\n  <Tag\n    size="l"\n    onDelete={() => {}}\n    deleteButtonAriaLabel="Delete filter: News"\n  >\n    News\n  </Tag>\n\n  <Tag\n    size="l"\n    onDelete={() => {}}\n    deleteButtonAriaLabel="Delete filter: Announcements"\n    style={{ marginLeft: \'var(--spacing-s)\' }}\n  >\n    Announcements\n  </Tag>\n</>)\n')),l.createElement(t.pre,null,l.createElement(t.code,{className:"language-html"},'<div>\n<div class="hds-tag hds-tag--large">\n  <span class="hds-tag__label" aria-hidden="true">News</span>\n  <button type="button" aria-label="Delete filter: News" class="hds-tag__delete-button button-reset">\n      <span aria-hidden="true" class="hds-icon hds-icon--cross"></span>\n  </button>\n</div>\n\n<div class="hds-tag hds-tag--large" style="margin-left:var(--spacing-xs);">\n  <span class="hds-tag__label" aria-hidden="true">Announcements</span>\n  <button type="button" aria-label="Delete filter: Announcements" class="hds-tag__delete-button button-reset">\n      <span aria-hidden="true" class="hds-icon hds-icon--cross"></span>\n  </button>\n</div>\n</div>\n'))),"\n",l.createElement(t.h3,{id:"packages",style:{position:"relative"}},"Packages",l.createElement(t.a,{href:"#packages","aria-label":"packages permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.table,null,l.createElement(t.thead,null,l.createElement(t.tr,null,l.createElement(t.th,null,"Package"),l.createElement(t.th,null,"Included"),l.createElement(t.th,null,"Storybook link"),l.createElement(t.th,null,"Source link"))),l.createElement(t.tbody,null,l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.strong,null,"HDS React")),l.createElement(t.td,null,l.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},l.createElement(r)," Yes ")),l.createElement(t.td,null,l.createElement(c,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-tag--default"},"View in Storybook")),l.createElement(t.td,null,l.createElement(i,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/react/src/components/tag"},"View source"))),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.strong,null,"HDS Core")),l.createElement(t.td,null,l.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},l.createElement(r)," Yes ")),l.createElement(t.td,null,l.createElement(c,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/core/?path=/story/components-tag--default"},"View in Storybook")),l.createElement(t.td,null,l.createElement(i,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/core/src/components/tag"},"View source"))))),"\n",l.createElement(t.h3,{id:"properties",style:{position:"relative"}},"Properties",l.createElement(t.a,{href:"#properties","aria-label":"properties permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"Note! You can find the full list of properties in the ",l.createElement(c,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/docs/components-tag--default"},"React Storybook.")),"\n",l.createElement(t.table,null,l.createElement(t.thead,null,l.createElement(t.tr,null,l.createElement(t.th,null,"Property"),l.createElement(t.th,null,"Description"),l.createElement(t.th,null,"Values"),l.createElement(t.th,null,"Default value"))),l.createElement(t.tbody,null,l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"deleteButtonAriaLabel")),l.createElement(t.td,null,"The aria-label for the delete button"),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"deleteButtonProps")),l.createElement(t.td,null,"Props that will be passed to the delete button ",l.createElement(t.code,null,"button")," element."),l.createElement(t.td,null,l.createElement(t.code,null,"properties")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"labelProps")),l.createElement(t.td,null,"Props that will be passed to the label ",l.createElement(t.code,null,"span")," element."),l.createElement(t.td,null,l.createElement(t.code,null,"properties")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"onClick")),l.createElement(t.td,null,"Callback function fired when the tag is clicked. If set, the tag will be clickable."),l.createElement(t.td,null,l.createElement(t.code,null,"function")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"onDelete")),l.createElement(t.td,null,"Callback function fired when the delete icon is clicked. If set, a delete button will be shown."),l.createElement(t.td,null,l.createElement(t.code,null,"function")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"role")),l.createElement(t.td,null,"Sets the role of the tag when it's clickable. Uses 'link' by default."),l.createElement(t.td,null,l.createElement(t.code,null,'"button"')," ",l.createElement(t.code,null,'"link"')),l.createElement(t.td,null,l.createElement(t.code,null,'"link"'))),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"size")),l.createElement(t.td,null,"Sets the size of the Tag."),l.createElement(t.td,null,l.createElement(t.code,null,'"m"')," ",l.createElement(t.code,null,'"l"')),l.createElement(t.td,null,l.createElement(t.code,null,'"m"'))),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"srOnlyLabel")),l.createElement(t.td,null,"Label that is only visible to screen readers. Can be used to to give screen reader users additional information about the tag."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,"[Table 1:Tag properties]"),l.createElement(t.td),l.createElement(t.td),l.createElement(t.td)))))}function o(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){return void 0===e&&(e={}),l.createElement(c,e,l.createElement(i,e))}},66170:function(e,t,a){a.r(t);var n=a(11151),l=a(67294),s=a(83428),r=a(57674),c=a(89482),i=(a(18607),a(26127));function o(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,n.ah)(),e.components);return i.Z||d("PageTabs",!1),i.Z.Tab||d("PageTabs.Tab",!0),i.Z.TabList||d("PageTabs.TabList",!0),i.Z.TabPanel||d("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"tag",style:{position:"relative"}},"Tag",l.createElement(t.a,{href:"#tag","aria-label":"tag permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(s.S,{type:"error"},"Draft"),l.createElement(s.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(c.Z,null,"Tags are used to show attributes of an object or element such as categories. HDS also uses Tags to present filters selected for searches."),"\n",l.createElement(i.Z,{pageContext:e.pageContext},l.createElement(i.Z.TabList,null,l.createElement(i.Z.Tab,{href:"/"},"Usage"),l.createElement(i.Z.Tab,{href:"/code"},"Code"),l.createElement(i.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(i.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(i.Z.TabPanel,null,e.children)))}function d(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,n.ah)(),e.components);return t?l.createElement(t,e,l.createElement(o,e)):o(e)}},89482:function(e,t,a){var n=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:l={},children:s}=e;return n.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...l}},s)}},26127:function(e,t,a){var n=a(67294),l=a(14160),s=a(94671);const r="PageTabList",c="PageTabPanel",i="PageTab",o=e=>{var t;let{pageContext:a,children:o}=e;const d=a.frontmatter.slug,u=Array.isArray(o)?o:[o],m=u.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===r)),h=u.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===c)),g=null===(t=m.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===i)),p=g.findIndex((e=>d.endsWith(e.props.href))),b=-1===p?0:p,E=0===b?d:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(d);return n.createElement(s.a,{initiallyActiveTab:b},n.createElement(s.a.TabList,{className:"page-tabs-list"},g.map((e=>n.createElement(s.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?E:E+e.props.href))},e.props.children)))),g.map(((e,t)=>n.createElement(s.a.TabPanel,{key:e.props.href},b===t?h.props.children:n.createElement("div",null)))))},d=e=>{let{children:t}=e;return n.createElement(s.a.TabList,null,t)};d.componentName=r;const u=e=>{let{href:t,slug:a,children:l}=e;return n.createElement(s.a.Tab,null,l)};u.componentName=i;const m=e=>{let{children:t}=e;return n.createElement(s.a.TabPanel,null,t)};m.componentName=c,o.TabList=d,o.Tab=u,o.TabPanel=m,t.Z=o},57674:function(e,t,a){var n=a(67294),l=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return n.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},n.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>n.createElement("li",{key:t},n.createElement("span",{className:"status-name"},t),n.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-tag-customisation-mdx-f1ff9dc9e9a41545d8d5.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-tag-customisation-mdx-f1ff9dc9e9a41545d8d5.js
new file mode 100644
index 00000000000..b3e2658f666
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-tag-customisation-mdx-f1ff9dc9e9a41545d8d5.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[9679,7770],{83428:function(e,t,a){a.d(t,{S:function(){return c}});var l=a(80136),n=a(67294),s=a(7444),r=a(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,s.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const i=e=>{let{icon:t}=e;return n.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:s,type:c="neutral",iconLeft:d}=e,u=(0,l._)(e,["children","className","dataTestId","type","iconLeft"]);return n.createElement("span",Object.assign({className:(0,r.c)(o.statusLabel,o[c],d&&o.statusLabelWithIcon,a),"data-testid":s},u),d&&n.createElement(i,{icon:d}),t)}},3072:function(e,t,a){a.d(t,{T:function(){return d}});var l=a(80136),n=a(67294),s=a(7444),r=a(34300),o=a(97640),i=a(35828),c={deleteButton:"Tag-module_deleteButton__1diMR tag_hds-tag__delete-button__33Tgz",visuallyHidden:"Tag-module_visuallyHidden__3xPWW",tag:"Tag-module_tag__3bo5S tag_hds-tag__3MKf3",label:"Tag-module_label__zCgFr undefined",large:"Tag-module_large__1ZNIX tag_hds-tag--large__1bVs5"};(0,s.s)(".tag_hds-icon__2LFMT{--icon-size:100%;background-color:currentcolor;display:inline-block;height:var(--icon-size);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:auto;mask-size:auto;width:var(--icon-size)}.tag_hds-icon__2LFMT.tag_hds-icon--size-xs__L1nV_{--icon-size:var(--spacing-layout-2-xs)}.tag_hds-icon__2LFMT.tag_hds-icon--size-s__23CMA{--icon-size:var(--spacing-layout-xs)}.tag_hds-icon__2LFMT.tag_hds-icon--size-m__2zCBY{--icon-size:var(--spacing-layout-s)}.tag_hds-icon__2LFMT.tag_hds-icon--size-l__UuAMZ{--icon-size:var(--spacing-layout-m)}.tag_hds-icon__2LFMT.tag_hds-icon--size-xl__2f_bT{--icon-size:var(--spacing-layout-l)}.tag_hds-icon--cross__2tq88{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18 7.5L13.5 12l4.5 4.5-1.5 1.5-4.5-4.5L7.5 18 6 16.5l4.5-4.5L6 7.5 7.5 6l4.5 4.5L16.5 6 18 7.5z' fill='currentColor'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18 7.5L13.5 12l4.5 4.5-1.5 1.5-4.5-4.5L7.5 18 6 16.5l4.5-4.5L6 7.5 7.5 6l4.5 4.5L16.5 6 18 7.5z' fill='currentColor'/%3E%3C/svg%3E\")}.tag_hds-tag__3MKf3{--tag-background:var(--color-black-10);--tag-color:var(--color-black-90);--tag-font-size-large:var(--fontsize-body-m);--tag-font-size:var(--fontsize-body-s);--tag-height-large:48px;--tag-height:32px;--tag-line-height:var(--lineheight-xl);--tag-padding-large:10px 20px;--tag-padding:4px 12px;--tag-spacing-large:var(--spacing-s);--tag-spacing:var(--spacing-xs);align-items:center;background-color:var(--tag-background);border-radius:calc(var(--tag-height) / 2);box-sizing:border-box;color:var(--tag-color);display:inline-flex;flex-direction:row;font-size:var(--tag-font-size);grid-gap:var(--spacing-2-xs);gap:var(--spacing-2-xs);justify-content:center;line-height:var(--tag-line-height);min-height:var(--tag-height);outline:none;padding:var(--tag-padding)}.tag_hds-tag--large__1bVs5{--tag-font-size:var(--tag-font-size-large);--tag-height:var(--tag-height-large);--tag-line-height:var(--lineheight-l);--tag-padding:var(--tag-padding-large);--tag-spacing:var(--tag-spacing-large)}.tag_hds-tag__3MKf3:focus,.tag_hds-tag__3MKf3:focus-within{box-shadow:0 0 0 3px var(--color-focus-outline)}.tag_hds-tag__3MKf3[tabindex=\"0\"]{cursor:pointer}.tag_hds-tag__delete-button__33Tgz{display:flex;flex-shrink:0;height:var(--spacing-m);margin:0 calc(0px - var(--spacing-3-xs));outline:none;width:var(--spacing-m)}.Tag-module_deleteButton__1diMR{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.Tag-module_visuallyHidden__3xPWW{border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}");const d=(0,n.forwardRef)(((e,t)=>{var{children:a,className:s,deleteButtonAriaLabel:d,deleteButtonProps:u,id:g="hds-tag",labelClassName:m,labelProps:h,onClick:p,onDelete:b,role:_="link",size:f="m",srOnlyLabel:v,theme:E}=e,y=(0,l._)(e,["children","className","deleteButtonAriaLabel","deleteButtonProps","id","labelClassName","labelProps","onClick","onDelete","role","size","srOnlyLabel","theme"]);const T=(0,o.u)(c.tag,E),k=(0,r.c)(c.tag,"l"===f&&c.large,T,s),x="function"==typeof p,L="function"==typeof b,w=v||d,z=(0,r.c)(c.label,m);return n.createElement("div",Object.assign({id:g,className:k,ref:t},x&&{tabIndex:0,role:_,onClick:p,onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||p(e)}},y),n.createElement("span",Object.assign({id:g&&g+"-label",className:z},h),v&&n.createElement("span",{className:c.visuallyHidden},v),n.createElement("span",Object.assign({},w?{"aria-hidden":!0}:{}),a)),L&&n.createElement("button",Object.assign({},u,{id:g&&g+"-delete-button",type:"button",className:c.deleteButton,"aria-label":d,onClick:b}),n.createElement(i.I,{className:c.icon,"aria-hidden":!0})))}))},10166:function(e,t,a){a.r(t);var l=a(11151),n=a(67294),s=a(3072),r=a(66170);const o=e=>{let{children:t,pageContext:a}=e;return n.createElement(r.default,{pageContext:a},t)};function i(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",p:"p",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",pre:"pre"},(0,l.ah)(),e.components),{Playground:a}=t;return a||function(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Playground",!0),n.createElement(n.Fragment,null,n.createElement(t.h2,{id:"customisation",style:{position:"relative"}},"Customisation",n.createElement(t.a,{href:"#customisation","aria-label":"customisation permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.h3,{id:"customisation-properties",style:{position:"relative"}},"Customisation properties",n.createElement(t.a,{href:"#customisation-properties","aria-label":"customisation properties permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.p,null,"In Core version, you can either use the ",n.createElement(t.code,null,"style")," or ",n.createElement(t.code,null,"class")," attributes in the HTML to customise the component."),"\n",n.createElement(t.p,null,"In React version, you can use the ",n.createElement(t.code,null,"theme")," property to customise the component."),"\n",n.createElement(t.p,null,"See all available theme variables in the table below."),"\n",n.createElement(t.table,null,n.createElement(t.thead,null,n.createElement(t.tr,null,n.createElement(t.th,null,"Theme variable"),n.createElement(t.th,null,"Description"))),n.createElement(t.tbody,null,n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"--tag-background")),n.createElement(t.td,null,"Colour of the tag background.")),n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"--tag-color")),n.createElement(t.td,null,"Colour of elements inside the tag.")),n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"--tag-focus-outline-color")),n.createElement(t.td,null,"Colour of the tag focus border.")))),"\n",n.createElement(t.h3,{id:"customisation-example",style:{position:"relative"}},"Customisation example",n.createElement(t.a,{href:"#customisation-example","aria-label":"customisation example permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(a,{scope:{Tag:s.T}},n.createElement(t.pre,null,n.createElement(t.code,{className:"language-jsx"},"import { Tag } from 'hds-react';\n\n() => (\n<Tag\n  onClick={function noRefCheck(){}}\n  theme={{\n    '--tag-background': 'var(--color-engel)',\n    '--tag-color': 'var(--color-black-90)',\n    '--tag-focus-outline-color': 'var(--color-black-90)'\n  }}\n>\n  Americum\n</Tag>)\n"))))}t.default=function(e){return void 0===e&&(e={}),n.createElement(o,e,n.createElement(i,e))}},66170:function(e,t,a){a.r(t);var l=a(11151),n=a(67294),s=a(83428),r=a(57674),o=a(89482),i=(a(18607),a(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,l.ah)(),e.components);return i.Z||d("PageTabs",!1),i.Z.Tab||d("PageTabs.Tab",!0),i.Z.TabList||d("PageTabs.TabList",!0),i.Z.TabPanel||d("PageTabs.TabPanel",!0),n.createElement(n.Fragment,null,n.createElement(t.h1,{id:"tag",style:{position:"relative"}},"Tag",n.createElement(t.a,{href:"#tag","aria-label":"tag permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement("div",{class:"status-label-description"},n.createElement(s.S,{type:"error"},"Draft"),n.createElement(s.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),n.createElement(r.Z)),"\n",n.createElement(o.Z,null,"Tags are used to show attributes of an object or element such as categories. HDS also uses Tags to present filters selected for searches."),"\n",n.createElement(i.Z,{pageContext:e.pageContext},n.createElement(i.Z.TabList,null,n.createElement(i.Z.Tab,{href:"/"},"Usage"),n.createElement(i.Z.Tab,{href:"/code"},"Code"),n.createElement(i.Z.Tab,{href:"/accessibility"},"Accessibility"),n.createElement(i.Z.Tab,{href:"/customisation"},"Customisation")),n.createElement(i.Z.TabPanel,null,e.children)))}function d(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,l.ah)(),e.components);return t?n.createElement(t,e,n.createElement(c,e)):c(e)}},89482:function(e,t,a){var l=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:n={},children:s}=e;return l.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...n}},s)}},26127:function(e,t,a){var l=a(67294),n=a(14160),s=a(94671);const r="PageTabList",o="PageTabPanel",i="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const d=a.frontmatter.slug,u=Array.isArray(c)?c:[c],g=u.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===r)),m=u.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===o)),h=null===(t=g.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===i)),p=h.findIndex((e=>d.endsWith(e.props.href))),b=-1===p?0:p,_=0===b?d:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(d);return l.createElement(s.a,{initiallyActiveTab:b},l.createElement(s.a.TabList,{className:"page-tabs-list"},h.map((e=>l.createElement(s.a.Tab,{key:e.props.href,onClick:()=>(0,n.navigate)(""+("/"===e.props.href?_:_+e.props.href))},e.props.children)))),h.map(((e,t)=>l.createElement(s.a.TabPanel,{key:e.props.href},b===t?m.props.children:l.createElement("div",null)))))},d=e=>{let{children:t}=e;return l.createElement(s.a.TabList,null,t)};d.componentName=r;const u=e=>{let{href:t,slug:a,children:n}=e;return l.createElement(s.a.Tab,null,n)};u.componentName=i;const g=e=>{let{children:t}=e;return l.createElement(s.a.TabPanel,null,t)};g.componentName=o,c.TabList=d,c.Tab=u,c.TabPanel=g,t.Z=c},57674:function(e,t,a){var l=a(67294),n=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return l.createElement(n.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},l.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>l.createElement("li",{key:t},l.createElement("span",{className:"status-name"},t),l.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-tag-index-mdx-d6bb1662e2ba27e2632b.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-tag-index-mdx-d6bb1662e2ba27e2632b.js
new file mode 100644
index 00000000000..e8b9490ea6a
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-tag-index-mdx-d6bb1662e2ba27e2632b.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[6377,7770],{83428:function(e,a,t){t.d(a,{S:function(){return c}});var n=t(80136),l=t(67294),s=t(7444),r=t(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,s.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:a}=e;return l.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},a)},c=e=>{var{children:a,className:t,dataTestId:s,type:c="neutral",iconLeft:d}=e,u=(0,n._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(i.statusLabel,i[c],d&&i.statusLabelWithIcon,t),"data-testid":s},u),d&&l.createElement(o,{icon:d}),a)}},3072:function(e,a,t){t.d(a,{T:function(){return d}});var n=t(80136),l=t(67294),s=t(7444),r=t(34300),i=t(97640),o=t(35828),c={deleteButton:"Tag-module_deleteButton__1diMR tag_hds-tag__delete-button__33Tgz",visuallyHidden:"Tag-module_visuallyHidden__3xPWW",tag:"Tag-module_tag__3bo5S tag_hds-tag__3MKf3",label:"Tag-module_label__zCgFr undefined",large:"Tag-module_large__1ZNIX tag_hds-tag--large__1bVs5"};(0,s.s)(".tag_hds-icon__2LFMT{--icon-size:100%;background-color:currentcolor;display:inline-block;height:var(--icon-size);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:auto;mask-size:auto;width:var(--icon-size)}.tag_hds-icon__2LFMT.tag_hds-icon--size-xs__L1nV_{--icon-size:var(--spacing-layout-2-xs)}.tag_hds-icon__2LFMT.tag_hds-icon--size-s__23CMA{--icon-size:var(--spacing-layout-xs)}.tag_hds-icon__2LFMT.tag_hds-icon--size-m__2zCBY{--icon-size:var(--spacing-layout-s)}.tag_hds-icon__2LFMT.tag_hds-icon--size-l__UuAMZ{--icon-size:var(--spacing-layout-m)}.tag_hds-icon__2LFMT.tag_hds-icon--size-xl__2f_bT{--icon-size:var(--spacing-layout-l)}.tag_hds-icon--cross__2tq88{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18 7.5L13.5 12l4.5 4.5-1.5 1.5-4.5-4.5L7.5 18 6 16.5l4.5-4.5L6 7.5 7.5 6l4.5 4.5L16.5 6 18 7.5z' fill='currentColor'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18 7.5L13.5 12l4.5 4.5-1.5 1.5-4.5-4.5L7.5 18 6 16.5l4.5-4.5L6 7.5 7.5 6l4.5 4.5L16.5 6 18 7.5z' fill='currentColor'/%3E%3C/svg%3E\")}.tag_hds-tag__3MKf3{--tag-background:var(--color-black-10);--tag-color:var(--color-black-90);--tag-font-size-large:var(--fontsize-body-m);--tag-font-size:var(--fontsize-body-s);--tag-height-large:48px;--tag-height:32px;--tag-line-height:var(--lineheight-xl);--tag-padding-large:10px 20px;--tag-padding:4px 12px;--tag-spacing-large:var(--spacing-s);--tag-spacing:var(--spacing-xs);align-items:center;background-color:var(--tag-background);border-radius:calc(var(--tag-height) / 2);box-sizing:border-box;color:var(--tag-color);display:inline-flex;flex-direction:row;font-size:var(--tag-font-size);grid-gap:var(--spacing-2-xs);gap:var(--spacing-2-xs);justify-content:center;line-height:var(--tag-line-height);min-height:var(--tag-height);outline:none;padding:var(--tag-padding)}.tag_hds-tag--large__1bVs5{--tag-font-size:var(--tag-font-size-large);--tag-height:var(--tag-height-large);--tag-line-height:var(--lineheight-l);--tag-padding:var(--tag-padding-large);--tag-spacing:var(--tag-spacing-large)}.tag_hds-tag__3MKf3:focus,.tag_hds-tag__3MKf3:focus-within{box-shadow:0 0 0 3px var(--color-focus-outline)}.tag_hds-tag__3MKf3[tabindex=\"0\"]{cursor:pointer}.tag_hds-tag__delete-button__33Tgz{display:flex;flex-shrink:0;height:var(--spacing-m);margin:0 calc(0px - var(--spacing-3-xs));outline:none;width:var(--spacing-m)}.Tag-module_deleteButton__1diMR{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.Tag-module_visuallyHidden__3xPWW{border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}");const d=(0,l.forwardRef)(((e,a)=>{var{children:t,className:s,deleteButtonAriaLabel:d,deleteButtonProps:u,id:g="hds-tag",labelClassName:h,labelProps:m,onClick:p,onDelete:b,role:_="link",size:f="m",srOnlyLabel:v,theme:E}=e,y=(0,n._)(e,["children","className","deleteButtonAriaLabel","deleteButtonProps","id","labelClassName","labelProps","onClick","onDelete","role","size","srOnlyLabel","theme"]);const T=(0,i.u)(c.tag,E),k=(0,r.c)(c.tag,"l"===f&&c.large,T,s),x="function"==typeof p,L="function"==typeof b,w=v||d,z=(0,r.c)(c.label,h);return l.createElement("div",Object.assign({id:g,className:k,ref:a},x&&{tabIndex:0,role:_,onClick:p,onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||p(e)}},y),l.createElement("span",Object.assign({id:g&&g+"-label",className:z},m),v&&l.createElement("span",{className:c.visuallyHidden},v),l.createElement("span",Object.assign({},w?{"aria-hidden":!0}:{}),t)),L&&l.createElement("button",Object.assign({},u,{id:g&&g+"-delete-button",type:"button",className:c.deleteButton,"aria-label":d,onClick:b}),l.createElement(o.I,{className:c.icon,"aria-hidden":!0})))}))},25335:function(e,a,t){t.r(a);var n=t(11151),l=t(67294),s=t(3072),r=t(66170);const i=e=>{let{children:a,pageContext:t}=e;return l.createElement(r.default,{pageContext:t},a)};function o(e){const a=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",strong:"strong",h4:"h4",p:"p",code:"code"},(0,n.ah)(),e.components),{PlaygroundPreview:t,InternalLink:r}=a;return r||c("InternalLink",!0),t||c("PlaygroundPreview",!0),l.createElement(l.Fragment,null,l.createElement(a.h2,{id:"usage",style:{position:"relative"}},"Usage",l.createElement(a.a,{href:"#usage","aria-label":"usage permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.h3,{id:"example",style:{position:"relative"}},"Example",l.createElement(a.a,{href:"#example","aria-label":"example permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t,null,l.createElement(s.T,null,"News"),l.createElement(s.T,{style:{marginLeft:"var(--spacing-s)"}},"Announcements")),"\n",l.createElement(a.h3,{id:"principles",style:{position:"relative"}},"Principles",l.createElement(a.a,{href:"#principles","aria-label":"principles permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.ul,null,"\n",l.createElement(a.li,null,l.createElement(a.strong,null,"Tags are meant for presenting object attributes and filters.")," If you are presenting status information, use ",l.createElement(r,{href:"/components/status-label"},"Status label component")," instead."),"\n",l.createElement(a.li,null,"Keep labels short and concise. Use 1-2 words at maximum and do not use labels expanding to two rows."),"\n",l.createElement(a.li,null,"Do not use icons inside Tag labels."),"\n",l.createElement(a.li,null,"Tags are often related to some other element on the page (e.g. table row or search field as filters). Aim to keep tags and their related elements close to each other so the user can easily interpret the relation."),"\n",l.createElement(a.li,null,"Unlike status labels, ",l.createElement(a.strong,null,"tags can be configured to be clickable and deletable"),". You can use this feature to create removable filters/selections or links to category filtered pages."),"\n"),"\n",l.createElement(a.h3,{id:"variations",style:{position:"relative"}},"Variations",l.createElement(a.a,{href:"#variations","aria-label":"variations permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.h4,{id:"default",style:{position:"relative"}},"Default",l.createElement(a.a,{href:"#default","aria-label":"default permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.p,null,"By default, Tags are non-interactable elements. They only include a label and do not have any specific styling."),"\n",l.createElement(t,null,l.createElement(s.T,null,"News"),l.createElement(s.T,{style:{marginLeft:"var(--spacing-s)"}},"Announcements")),"\n",l.createElement(a.h4,{id:"clickable",style:{position:"relative"}},"Clickable",l.createElement(a.a,{href:"#clickable","aria-label":"clickable permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.p,null,"Tags can be configured to be interactable by giving them an ",l.createElement(a.code,null,"onClick")," function prop. This way Tags can act as links or actions. Since these Tags are fully interactable they can be also focused and receive default HDS focus indicator styling."),"\n",l.createElement(a.p,null,"Remember to add a descriptive ",l.createElement(a.code,null,"aria-label")," to clearly indicate the link target or action to assistive technologies."),"\n",l.createElement(t,null,l.createElement(s.T,{role:"link",onClick:()=>{},"aria-label":"Move to category: News"},"News"),l.createElement(s.T,{role:"link",onClick:()=>{},"aria-label":"Move to category: Announcements",style:{marginLeft:"var(--spacing-s)"}},"Announcements")),"\n",l.createElement(a.h4,{id:"deletable",style:{position:"relative"}},"Deletable",l.createElement(a.a,{href:"#deletable","aria-label":"deletable permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.p,null,"Tags can be configured to be deletable by giving them an ",l.createElement(a.code,null,"onDelete")," function prop. This enables a delete icon inside the Tag. Deleting can be useful in situations where Tags are used as filters (e.g. for search)."),"\n",l.createElement(a.p,null,"Remember to add a descriptive ",l.createElement(a.code,null,"aria-label")," to the delete button to clearly indicate what the user is deleting when triggering the action."),"\n",l.createElement(t,null,l.createElement(s.T,{onDelete:()=>{},deleteButtonAriaLabel:"Delete filter: News"},"News"),l.createElement(s.T,{onDelete:()=>{},deleteButtonAriaLabel:"Delete filter: Announcements",style:{marginLeft:"var(--spacing-s)"}},"Announcements")),"\n",l.createElement(a.h4,{id:"large-deletable",style:{position:"relative"}},"Large deletable",l.createElement(a.a,{href:"#large-deletable","aria-label":"large deletable permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a.p,null,"The large Tag variant is suited for search and filter usage. Larger area and text are more accessible, especially on mobile devices."),"\n",l.createElement(t,null,l.createElement(s.T,{size:"l",onDelete:()=>{},deleteButtonAriaLabel:"Delete filter: News"},"News"),l.createElement(s.T,{size:"l",onDelete:()=>{},deleteButtonAriaLabel:"Delete filter: Announcements",style:{marginLeft:"var(--spacing-s)"}},"Announcements")))}function c(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){return void 0===e&&(e={}),l.createElement(i,e,l.createElement(o,e))}},66170:function(e,a,t){t.r(a);var n=t(11151),l=t(67294),s=t(83428),r=t(57674),i=t(89482),o=(t(18607),t(26127));function c(e){const a=Object.assign({h1:"h1",a:"a",span:"span"},(0,n.ah)(),e.components);return o.Z||d("PageTabs",!1),o.Z.Tab||d("PageTabs.Tab",!0),o.Z.TabList||d("PageTabs.TabList",!0),o.Z.TabPanel||d("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(a.h1,{id:"tag",style:{position:"relative"}},"Tag",l.createElement(a.a,{href:"#tag","aria-label":"tag permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(s.S,{type:"error"},"Draft"),l.createElement(s.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(i.Z,null,"Tags are used to show attributes of an object or element such as categories. HDS also uses Tags to present filters selected for searches."),"\n",l.createElement(o.Z,{pageContext:e.pageContext},l.createElement(o.Z.TabList,null,l.createElement(o.Z.Tab,{href:"/"},"Usage"),l.createElement(o.Z.Tab,{href:"/code"},"Code"),l.createElement(o.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(o.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(o.Z.TabPanel,null,e.children)))}function d(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,n.ah)(),e.components);return a?l.createElement(a,e,l.createElement(c,e)):c(e)}},89482:function(e,a,t){var n=t(67294);a.Z=e=>{let{color:a="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:l={},children:s}=e;return n.createElement("p",{style:{fontSize:t,color:a,maxWidth:600,...l}},s)}},26127:function(e,a,t){var n=t(67294),l=t(14160),s=t(94671);const r="PageTabList",i="PageTabPanel",o="PageTab",c=e=>{var a;let{pageContext:t,children:c}=e;const d=t.frontmatter.slug,u=Array.isArray(c)?c:[c],g=u.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===r)),h=u.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===i)),m=null===(a=g.props)||void 0===a?void 0:a.children.filter((e=>e.type.componentName===o)),p=m.findIndex((e=>d.endsWith(e.props.href))),b=-1===p?0:p,_=0===b?d:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(d);return n.createElement(s.a,{initiallyActiveTab:b},n.createElement(s.a.TabList,{className:"page-tabs-list"},m.map((e=>n.createElement(s.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?_:_+e.props.href))},e.props.children)))),m.map(((e,a)=>n.createElement(s.a.TabPanel,{key:e.props.href},b===a?h.props.children:n.createElement("div",null)))))},d=e=>{let{children:a}=e;return n.createElement(s.a.TabList,null,a)};d.componentName=r;const u=e=>{let{href:a,slug:t,children:l}=e;return n.createElement(s.a.Tab,null,l)};u.componentName=o;const g=e=>{let{children:a}=e;return n.createElement(s.a.TabPanel,null,a)};g.componentName=i,c.TabList=d,c.Tab=u,c.TabPanel=g,a.Z=c},57674:function(e,a,t){var n=t(67294),l=t(45422);a.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return n.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},n.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((a=>n.createElement("li",{key:a},n.createElement("span",{className:"status-name"},a),n.createElement("span",null,e[a]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-tag-tabs-mdx-15c6e1e156d18d68fd24.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-tag-tabs-mdx-15c6e1e156d18d68fd24.js
new file mode 100644
index 00000000000..f4bb1bf4072
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-tag-tabs-mdx-15c6e1e156d18d68fd24.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[7770],{83428:function(e,a,t){t.d(a,{S:function(){return i}});var s=t(80136),l=t(67294),n=t(7444),r=t(34300),c={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:a}=e;return l.createElement("span",{className:c.statusLabelIcon,"aria-hidden":"true"},a)},i=e=>{var{children:a,className:t,dataTestId:n,type:i="neutral",iconLeft:u}=e,b=(0,s._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(c.statusLabel,c[i],u&&c.statusLabelWithIcon,t),"data-testid":n},b),u&&l.createElement(o,{icon:u}),a)}},66170:function(e,a,t){t.r(a);var s=t(11151),l=t(67294),n=t(83428),r=t(57674),c=t(89482),o=(t(18607),t(26127));function i(e){const a=Object.assign({h1:"h1",a:"a",span:"span"},(0,s.ah)(),e.components);return o.Z||u("PageTabs",!1),o.Z.Tab||u("PageTabs.Tab",!0),o.Z.TabList||u("PageTabs.TabList",!0),o.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(a.h1,{id:"tag",style:{position:"relative"}},"Tag",l.createElement(a.a,{href:"#tag","aria-label":"tag permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(n.S,{type:"error"},"Draft"),l.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(c.Z,null,"Tags are used to show attributes of an object or element such as categories. HDS also uses Tags to present filters selected for searches."),"\n",l.createElement(o.Z,{pageContext:e.pageContext},l.createElement(o.Z.TabList,null,l.createElement(o.Z.Tab,{href:"/"},"Usage"),l.createElement(o.Z.Tab,{href:"/code"},"Code"),l.createElement(o.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(o.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(o.Z.TabPanel,null,e.children)))}function u(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,s.ah)(),e.components);return a?l.createElement(a,e,l.createElement(i,e)):i(e)}},89482:function(e,a,t){var s=t(67294);a.Z=e=>{let{color:a="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:l={},children:n}=e;return s.createElement("p",{style:{fontSize:t,color:a,maxWidth:600,...l}},n)}},26127:function(e,a,t){var s=t(67294),l=t(14160),n=t(94671);const r="PageTabList",c="PageTabPanel",o="PageTab",i=e=>{var a;let{pageContext:t,children:i}=e;const u=t.frontmatter.slug,b=Array.isArray(i)?i:[i],d=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===r)),m=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===c)),h=null===(a=d.props)||void 0===a?void 0:a.children.filter((e=>e.type.componentName===o)),p=h.findIndex((e=>u.endsWith(e.props.href))),_=-1===p?0:p,g=0===_?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return s.createElement(n.a,{initiallyActiveTab:_},s.createElement(n.a.TabList,{className:"page-tabs-list"},h.map((e=>s.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?g:g+e.props.href))},e.props.children)))),h.map(((e,a)=>s.createElement(n.a.TabPanel,{key:e.props.href},_===a?m.props.children:s.createElement("div",null)))))},u=e=>{let{children:a}=e;return s.createElement(n.a.TabList,null,a)};u.componentName=r;const b=e=>{let{href:a,slug:t,children:l}=e;return s.createElement(n.a.Tab,null,l)};b.componentName=o;const d=e=>{let{children:a}=e;return s.createElement(n.a.TabPanel,null,a)};d.componentName=c,i.TabList=u,i.Tab=b,i.TabPanel=d,a.Z=i},57674:function(e,a,t){var s=t(67294),l=t(45422);a.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return s.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},s.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((a=>s.createElement("li",{key:a},s.createElement("span",{className:"status-name"},a),s.createElement("span",null,e[a]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-text-area-accessibility-mdx-364d7aa3269d4ef667f7.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-text-area-accessibility-mdx-364d7aa3269d4ef667f7.js
new file mode 100644
index 00000000000..80502ee98c9
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-text-area-accessibility-mdx-364d7aa3269d4ef667f7.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[3245,630],{83428:function(e,t,a){a.d(t,{S:function(){return c}});var l=a(80136),s=a(67294),n=a(7444),r=a(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:t}=e;return s.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:n,type:c="neutral",iconLeft:u}=e,d=(0,l._)(e,["children","className","dataTestId","type","iconLeft"]);return s.createElement("span",Object.assign({className:(0,r.c)(i.statusLabel,i[c],u&&i.statusLabelWithIcon,a),"data-testid":n},d),u&&s.createElement(o,{icon:u}),t)}},29874:function(e,t,a){a.r(t);var l=a(11151),s=a(67294),n=a(80699),r=a(67523);const i=e=>{let{children:t,pageContext:a}=e;return s.createElement(r.default,{pageContext:a},t)};function o(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",strong:"strong",code:"code"},(0,l.ah)(),e.components);return s.createElement(s.Fragment,null,s.createElement(t.h2,{id:"accessibility",style:{position:"relative"}},"Accessibility",s.createElement(t.a,{href:"#accessibility","aria-label":"accessibility permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.h3,{id:"pay-attention-to",style:{position:"relative"}},"Pay attention to",s.createElement(t.a,{href:"#pay-attention-to","aria-label":"pay attention to permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.ul,null,"\n",s.createElement(t.li,null,"Placeholder text can be used to give hints and examples to the user what should be entered to the field. ",s.createElement(t.strong,null,"However, all assistive technologies do not threat placeholder texts as labels and therefore they may ignore them completely.")," Aim to provide the sufficient information to fill the input in the label."),"\n",s.createElement(t.li,null,"It is required to use ",s.createElement(t.code,null,"autocomplete")," attribute if input control is listed in the common input purposes list. You can read the full list of common input purposes at ",s.createElement(n.Z,{href:"https://www.w3.org/TR/WCAG21/#input-purposes"},"WCAG 2.1 documentation website"),". You can read more about the requirement from ",s.createElement(n.Z,{href:"https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose"},"WCAG 2.1 Identify Input Purpose guideline"),"."),"\n",s.createElement(t.li,null,"In the case of an erroneous input, aim to provide clear instructions to the user on how to correct the mistake. Always provide a text description of the error."),"\n"))}t.default=function(e){return void 0===e&&(e={}),s.createElement(i,e,s.createElement(o,e))}},67523:function(e,t,a){a.r(t);var l=a(11151),s=a(67294),n=a(83428),r=a(57674),i=a(89482),o=(a(18607),a(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,l.ah)(),e.components);return o.Z||u("PageTabs",!1),o.Z.Tab||u("PageTabs.Tab",!0),o.Z.TabList||u("PageTabs.TabList",!0),o.Z.TabPanel||u("PageTabs.TabPanel",!0),s.createElement(s.Fragment,null,s.createElement(t.h1,{id:"textarea",style:{position:"relative"}},"TextArea",s.createElement(t.a,{href:"#textarea","aria-label":"textarea permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement("div",{class:"status-label-description"},s.createElement(n.S,{type:"info"},"Stable"),s.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),s.createElement(r.Z)),"\n",s.createElement(i.Z,null,"A text area is a specialised version of the text input component. Text areas can be used for multiline answers."),"\n",s.createElement(o.Z,{pageContext:e.pageContext},s.createElement(o.Z.TabList,null,s.createElement(o.Z.Tab,{href:"/"},"Usage"),s.createElement(o.Z.Tab,{href:"/code"},"Code"),s.createElement(o.Z.Tab,{href:"/accessibility"},"Accessibility")),s.createElement(o.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,l.ah)(),e.components);return t?s.createElement(t,e,s.createElement(c,e)):c(e)}},89482:function(e,t,a){var l=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:s={},children:n}=e;return l.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...s}},n)}},26127:function(e,t,a){var l=a(67294),s=a(14160),n=a(94671);const r="PageTabList",i="PageTabPanel",o="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const u=a.frontmatter.slug,d=Array.isArray(c)?c:[c],h=d.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===r)),b=d.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===i)),m=null===(t=h.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===o)),p=m.findIndex((e=>u.endsWith(e.props.href))),f=-1===p?0:p,g=0===f?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return l.createElement(n.a,{initiallyActiveTab:f},l.createElement(n.a.TabList,{className:"page-tabs-list"},m.map((e=>l.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,s.navigate)(""+("/"===e.props.href?g:g+e.props.href))},e.props.children)))),m.map(((e,t)=>l.createElement(n.a.TabPanel,{key:e.props.href},f===t?b.props.children:l.createElement("div",null)))))},u=e=>{let{children:t}=e;return l.createElement(n.a.TabList,null,t)};u.componentName=r;const d=e=>{let{href:t,slug:a,children:s}=e;return l.createElement(n.a.Tab,null,s)};d.componentName=o;const h=e=>{let{children:t}=e;return l.createElement(n.a.TabPanel,null,t)};h.componentName=i,c.TabList=u,c.Tab=d,c.TabPanel=h,t.Z=c},57674:function(e,t,a){var l=a(67294),s=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return l.createElement(s.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},l.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>l.createElement("li",{key:t},l.createElement("span",{className:"status-name"},t),l.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-text-area-code-mdx-5b87d908305ccc103b0c.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-text-area-code-mdx-5b87d908305ccc103b0c.js
new file mode 100644
index 00000000000..371f2b671bf
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-text-area-code-mdx-5b87d908305ccc103b0c.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[8433,630],{93667:function(e,t,a){a.d(t,{I:function(){return s},t:function(){return o}});var n=a(67294),l=a(7444),r=a(34300),i=a(41125),o={root:"TextInput-module_root__2CMNr text-input_hds-text-input__2LODq",inputWrapper:"TextInput-module_inputWrapper__3Rvel text-input_hds-text-input__input-wrapper__1OqYG",input:"TextInput-module_input__1BlHi text-input_hds-text-input__input__GJm5C",hasButton:"TextInput-module_hasButton__2KCM1",errorText:"TextInput-module_errorText__3pizm text-input_hds-text-input__error-text__1GLYk",helperText:"TextInput-module_helperText__2dLR6 text-input_hds-text-input__helper-text__3V2KM",invalidText:"TextInput-module_invalidText__1w4sm text-input_hds-text-input__helper-text__3V2KM",successText:"TextInput-module_successText__2NMCP text-input_hds-text-input__success-text__3EOiy",infoText:"TextInput-module_infoText__zHOGs text-input_hds-text-input__info-text__3bqzy",invalid:"TextInput-module_invalid__2iYo2 text-input_hds-text-input--invalid__1UfKC",success:"TextInput-module_success__1kDOm text-input_hds-text-input--success__3dm2J",readOnly:"TextInput-module_readOnly__j615N undefined",buttonWrapper:"TextInput-module_buttonWrapper___filA text-input_hds-text-input__buttons__1RMzT",button:"TextInput-module_button__1ySMX text-input_hds-text-input__button__1Fh0I"};(0,l.s)("@keyframes text-input_fadeIn__2IDZ8{0%{opacity:0}to{opacity:1}}.text-input_hds-text-input__2LODq{--border-width:2px;--outline-width:3px;--input-height:56px;--textarea-height:149px;--icon-size:var(--spacing-m);--helper-color-default:var(--color-black-60);--helper-color-invalid:var(--color-error);--helper-color-success:var(--color-success);--helper-color-info:var(--color-black-90);--helper-color-info-icon:var(--color-coat-of-arms);--icon-color-invalid:var(--color-error);--input-background-default:var(--color-white);--input-background-disabled:var(--color-black-10);--input-border-color-default:var(--color-black-50);--input-border-color-hover:var(--color-black-90);--input-border-color-focus:var(--color-black-90);--input-border-color-invalid:var(--color-error);--input-border-color-disabled:var(--color-black-10);--input-border-color-success:var(--color-success);--input-color-default:var(--color-black-90);--input-color-disabled:var(--color-black-40);--label-color-default:var(--color-black-90);--label-color-invalid:var(--color-black-90);--placeholder-color:var(--color-black-60)}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C{-webkit-appearance:none;background-color:var(--input-background-default);border:var(--border-width) solid var(--input-border-color-default);border-radius:0;box-sizing:border-box;color:var(--input-color-default);font-family:inherit;font-size:1.125em;height:var(--input-height);line-height:normal;margin:0;padding:0 var(--spacing-s);width:100%;will-change:transform,box-shadow}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C:hover{border-color:var(--input-border-color-hover);transition:border-color 85ms ease-out}.text-input_hds-text-input__input-wrapper__1OqYG:focus-within .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-focus);outline:none}.text-input_hds-text-input__2LODq.text-input_hds-text-input--invalid__1UfKC .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-invalid)}.text-input_hds-text-input__2LODq.text-input_hds-text-input--success__3dm2J .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-success)}.text-input_hds-text-input__input-wrapper__1OqYG:focus-within .text-input_hds-text-input__input__GJm5C:not([readonly]){box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);transform:translateZ(0);transition:85ms ease-out;transition-property:box-shadow,transform}.text-input_hds-text-input__label__15F2V{color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.text-input_hds-text-input--invalid__1UfKC .text-input_hds-text-input__label__15F2V{color:var(--label-color-invalid);transition:color 85ms linear}.text-input_hds-text-input__required__z3Hm0{color:var(--color-black-90);display:inline-block;font-size:var(--fontsize-body-xl);line-height:1;margin-left:var(--spacing-2-xs);transform:translateY(var(--spacing-3-xs))}.text-input_hds-text-input__input-wrapper__1OqYG{display:flex;position:relative}.text-input_hds-text-input__2LODq textarea.text-input_hds-text-input__input__GJm5C{font-family:inherit;height:var(--textarea-height);margin:0;min-height:var(--input-height);overflow:auto;padding:var(--spacing-s);resize:vertical}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C::-moz-placeholder{color:var(--placeholder-color);opacity:1}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C::placeholder{color:var(--placeholder-color);opacity:1}.text-input_hds-text-input__helper-text__3V2KM{color:var(--helper-color-default)}.text-input_hds-text-input__error-text__1GLYk,.text-input_hds-text-input__helper-text__3V2KM{display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);white-space:pre-line}.text-input_hds-text-input__error-text__1GLYk{color:var(--helper-color-invalid);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.text-input_hds-text-input__error-text__1GLYk:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__error-text__1GLYk:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--icon-color-invalid);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__success-text__3EOiy{color:var(--helper-color-success);display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative;white-space:pre-wrap}.text-input_hds-text-input__success-text__3EOiy:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__success-text__3EOiy:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--helper-color-success);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__info-text__3bqzy{color:var(--helper-color-info);display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.text-input_hds-text-input__info-text__3bqzy:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__info-text__3bqzy:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--helper-color-info-icon);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C[disabled]{background-color:var(--input-background-disabled);border-color:var(--input-border-color-disabled);color:var(--input-color-disabled);cursor:not-allowed}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C[readonly]{background-color:transparent;border:0;color:var(--input-color-default);padding:0;-webkit-text-fill-color:var(--input-color-default)}.text-input_hds-text-input__buttons__1RMzT{align-items:center;bottom:0;display:flex;font-size:1rem;justify-content:center;margin-right:calc(var(--spacing-s) - var(--spacing-xs) / 2);position:absolute;right:0;top:0}.text-input_hds-text-input__button__1Fh0I{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;display:flex;font:inherit;outline:none;padding:var(--spacing-xs) calc(var(--spacing-xs) / 2)}.text-input_hds-text-input__button__1Fh0I:focus{outline:var(--outline-width) solid var(--color-focus-outline)}.TextInput-module_root__2CMNr{position:relative}.TextInput-module_input__1BlHi.TextInput-module_hasButton__2KCM1{padding-right:calc(2 * var(--spacing-s) + 1.5rem)}.TextInput-module_button__1ySMX:disabled{cursor:not-allowed}.TextInput-module_button__1ySMX:focus{outline:var(--outline-width) solid var(--color-focus-outline)}");const s=e=>{let{children:t,className:a="",errorText:l,helperText:s,hideLabel:c=!1,id:u,invalid:d=!1,isAriaLabelledBy:p=!1,label:h,labelId:m,onBlur:_,required:x=!1,style:b,successText:v,infoText:g,tooltipLabel:f,tooltipText:E,tooltipButtonLabel:T}=e;return n.createElement("div",{onBlur:_,className:(0,r.c)(o.root,d&&o.invalid,v&&o.success,a),style:b},h&&n.createElement(i.F,{id:m,inputId:u,isAriaLabelledBy:p,hidden:c,label:h,required:x,tooltipLabel:f,tooltipButtonLabel:T,tooltipText:E}),n.createElement("div",{className:(0,r.c)(o.inputWrapper)},t),l&&n.createElement("div",{className:o.errorText,id:u+"-error"},l),v&&n.createElement("div",{className:o.successText,id:u+"-success"},v),g&&n.createElement("div",{className:o.infoText,id:u+"-info"},g),s&&n.createElement("div",{className:o.helperText,id:u+"-helper"},s))}},83428:function(e,t,a){a.d(t,{S:function(){return c}});var n=a(80136),l=a(67294),r=a(7444),i=a(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,r.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const s=e=>{let{icon:t}=e;return l.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:r,type:c="neutral",iconLeft:u}=e,d=(0,n._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,i.c)(o.statusLabel,o[c],u&&o.statusLabelWithIcon,a),"data-testid":r},d),u&&l.createElement(s,{icon:u}),t)}},3382:function(e,t,a){a.d(t,{T:function(){return o}});var n=a(80136),l=a(67294),r=a(93667),i=a(37776);const o=l.forwardRef(((e,t)=>{var{className:a="",disabled:o=!1,defaultValue:s,errorText:c,helperText:u,hideLabel:d,invalid:p,id:h,label:m,onChange:_=(()=>null),required:x,style:b,successText:v,infoText:g,tooltipLabel:f,tooltipText:E,tooltipButtonLabel:T}=e,y=(0,n._)(e,["className","disabled","defaultValue","errorText","helperText","hideLabel","invalid","id","label","onChange","required","style","successText","infoText","tooltipLabel","tooltipText","tooltipButtonLabel"]);const w={className:a,errorText:c,helperText:u,hideLabel:d,id:h,invalid:p,label:m,required:x,style:b,successText:v,infoText:g,tooltipLabel:f,tooltipText:E,tooltipButtonLabel:T},k=(0,i.c)(h,u,c,v,g);return l.createElement(r.I,Object.assign({},w),l.createElement("textarea",Object.assign({className:r.t.input,defaultValue:s,disabled:o,id:h,onChange:_,ref:t,required:x,"aria-describedby":k.length>0?k:null},y)))}))},37776:function(e,t,a){a.d(t,{c:function(){return n}});var n=(e,t,a,n,l)=>[t&&e+"-helper",a&&e+"-error",n&&e+"-success",l&&e+"-info"].filter((e=>e)).join(" ")},85451:function(e,t,a){a.r(t);var n=a(11151),l=a(67294),r=a(3382),i=a(67523);const o=e=>{let{children:t,pageContext:a}=e;return l.createElement(i.default,{pageContext:a},t)};function s(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",h4:"h4",pre:"pre",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",strong:"strong",p:"p"},(0,n.ah)(),e.components),{Playground:a,IconCheckCircleFill:i,Link:o,ExternalLink:s}=t;return s||c("ExternalLink",!0),i||c("IconCheckCircleFill",!0),o||c("Link",!0),a||c("Playground",!0),l.createElement(l.Fragment,null,l.createElement(t.h2,{id:"code",style:{position:"relative"}},"Code",l.createElement(t.a,{href:"#code","aria-label":"code permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h3,{id:"code-examples",style:{position:"relative"}},"Code examples",l.createElement(t.a,{href:"#code-examples","aria-label":"code examples permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h4,{id:"default",style:{position:"relative"}},"Default",l.createElement(t.a,{href:"#default","aria-label":"default permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a,{scope:{TextArea:r.T}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},'import { TextArea } from \'hds-react\';\n\n() => (\n  <div style={{ maxWidth: \'320px\' }}>\n    <TextArea\n      id="textarea"\n      label="Label"\n      placeholder="Placeholder"\n      helperText="Assistive text"\n      required\n    />\n    <TextArea\n      id="textarea-disabled"\n      label="Label"\n      defaultValue="Text area value"\n      helperText="Assistive text"\n      style={{marginTop: \'var(--spacing-s)\'}}\n      disabled\n    />\n    <TextArea\n      id="textarea-invalid"\n      label="Label"\n      defaultValue="Text area value"\n      errorText="Error text"\n      helperText="Assistive text"\n      style={{marginTop: \'var(--spacing-s)\'}}\n      invalid\n    />\n  </div>\n)\n')),l.createElement(t.pre,null,l.createElement(t.code,{className:"language-html"},'<div style="max-width:320px;">\n  <div class="hds-text-input">\n    <label for="textarea-core" class="hds-text-input__label">Label<span class="hds-text-input__required">*</span></label>\n    <div class="hds-text-input__input-wrapper">\n      <textarea id="textarea-core" class="hds-text-input__input" placeholder="Placeholder" required></textarea>\n    </div>\n    <span class="hds-text-input__helper-text">Assistive text</span>\n  </div>\n\n  <div class="hds-text-input" style="margin-top:var(--spacing-s);">\n    <label for="textarea-disabled-core" class="hds-text-input__label">\n      Label\n    </label>\n    <div class="hds-text-input__input-wrapper">\n      <textarea id="textarea-disabled-core" class="hds-text-input__input" disabled>Text area value</textarea>\n    </div>\n    <span class="hds-text-input__helper-text">Assistive text</span>\n  </div>\n\n  <div class="hds-text-input hds-text-input--invalid" style="margin-top:var(--spacing-s);">\n    <label for="textarea-invalid-core" class="hds-text-input__label">\n      Label\n    </label>\n    <div class="hds-text-input__input-wrapper">\n      <textarea id="textarea-invalid-core" class="hds-text-input__input">Text area value</textarea>\n    </div>\n    <span class="hds-text-input__error-text">Error text</span>\n    <span class="hds-text-input__helper-text">Assistive text</span>\n  </div>\n</div>\n'))),"\n",l.createElement(t.h4,{id:"with-a-tooltip",style:{position:"relative"}},"With a tooltip",l.createElement(t.a,{href:"#with-a-tooltip","aria-label":"with a tooltip permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a,{scope:{TextArea:r.T}},l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},'import { TextArea } from \'hds-react\';\n\n() => (\n  <TextArea\n    id="textarea-tooltip"\n    label="Label"\n    placeholder="Placeholder"\n    tooltipLabel="Tooltip label"\n    tooltipButtonLabel="Tooltip button label"\n    tooltipText="Tooltips contain nice to have information. Default Tooltip contents should not be longer than two to three sentences. For longer descriptions, provide a link to a separate page."\n    style={{ maxWidth: \'320px\' }}\n  />\n)\n'))),"\n",l.createElement(t.h3,{id:"packages",style:{position:"relative"}},"Packages",l.createElement(t.a,{href:"#packages","aria-label":"packages permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.table,null,l.createElement(t.thead,null,l.createElement(t.tr,null,l.createElement(t.th,null,"Package"),l.createElement(t.th,null,"Included"),l.createElement(t.th,null,"Storybook link"),l.createElement(t.th,null,"Source link"))),l.createElement(t.tbody,null,l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.strong,null,"HDS React")),l.createElement(t.td,null,l.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},l.createElement(i)," Yes ")),l.createElement(t.td,null,l.createElement(o,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-textarea--default"},"View in Storybook")),l.createElement(t.td,null,l.createElement(s,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/react/src/components/textArea"},"View source"))),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.strong,null,"HDS Core")),l.createElement(t.td,null,l.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},l.createElement(i)," Yes ")),l.createElement(t.td,null,l.createElement(o,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/core/?path=/story/components-textarea--default"},"View in Storybook")),l.createElement(t.td,null,l.createElement(s,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/core/src/components/text-input"},"View source"))))),"\n",l.createElement(t.h3,{id:"properties",style:{position:"relative"}},"Properties",l.createElement(t.a,{href:"#properties","aria-label":"properties permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"Note! You can find the full list of properties in the ",l.createElement(o,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/docs/components-textarea--default"},"React Storybook.")),"\n",l.createElement(t.table,null,l.createElement(t.thead,null,l.createElement(t.tr,null,l.createElement(t.th,null,"Property"),l.createElement(t.th,null,"Description"),l.createElement(t.th,null,"Values"),l.createElement(t.th,null,"Default value"))),l.createElement(t.tbody,null,l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"label")),l.createElement(t.td,null,"The label for the input."),l.createElement(t.td,null,l.createElement(t.code,null,"ReactNode")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"errorText")),l.createElement(t.td,null,"The error text content that will be shown below the input."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"helperText")),l.createElement(t.td,null,"The error text content that will be shown below the input."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"hideLabel")),l.createElement(t.td,null,"Hides the label above the input."),l.createElement(t.td,null,l.createElement(t.code,null,"boolean")),l.createElement(t.td,null,"false")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"invalid")),l.createElement(t.td,null,"If set to true, the input will be displayed in an invalid state."),l.createElement(t.td,null,l.createElement(t.code,null,"boolean")),l.createElement(t.td,null,"false")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"successText")),l.createElement(t.td,null,"The success text content that will be shown below the input."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"infoText")),l.createElement(t.td,null,"The info text content that will be shown below the input."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"tooltipLabel")),l.createElement(t.td,null,"The aria-label text for the tooltip."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"tooltipButtonLabel")),l.createElement(t.td,null,"The aria-label text for the tooltip trigger button."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,l.createElement(t.code,null,"tooltipText")),l.createElement(t.td,null,"The text content of the tooltip."),l.createElement(t.td,null,l.createElement(t.code,null,"string")),l.createElement(t.td,null,"-")),l.createElement(t.tr,null,l.createElement(t.td,null,"[Table 1:TextArea properties]"),l.createElement(t.td),l.createElement(t.td),l.createElement(t.td)))))}function c(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){return void 0===e&&(e={}),l.createElement(o,e,l.createElement(s,e))}},67523:function(e,t,a){a.r(t);var n=a(11151),l=a(67294),r=a(83428),i=a(57674),o=a(89482),s=(a(18607),a(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,n.ah)(),e.components);return s.Z||u("PageTabs",!1),s.Z.Tab||u("PageTabs.Tab",!0),s.Z.TabList||u("PageTabs.TabList",!0),s.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"textarea",style:{position:"relative"}},"TextArea",l.createElement(t.a,{href:"#textarea","aria-label":"textarea permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(r.S,{type:"info"},"Stable"),l.createElement(r.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(i.Z)),"\n",l.createElement(o.Z,null,"A text area is a specialised version of the text input component. Text areas can be used for multiline answers."),"\n",l.createElement(s.Z,{pageContext:e.pageContext},l.createElement(s.Z.TabList,null,l.createElement(s.Z.Tab,{href:"/"},"Usage"),l.createElement(s.Z.Tab,{href:"/code"},"Code"),l.createElement(s.Z.Tab,{href:"/accessibility"},"Accessibility")),l.createElement(s.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,n.ah)(),e.components);return t?l.createElement(t,e,l.createElement(c,e)):c(e)}},89482:function(e,t,a){var n=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:l={},children:r}=e;return n.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...l}},r)}},26127:function(e,t,a){var n=a(67294),l=a(14160),r=a(94671);const i="PageTabList",o="PageTabPanel",s="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const u=a.frontmatter.slug,d=Array.isArray(c)?c:[c],p=d.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===i)),h=d.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===o)),m=null===(t=p.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===s)),_=m.findIndex((e=>u.endsWith(e.props.href))),x=-1===_?0:_,b=0===x?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return n.createElement(r.a,{initiallyActiveTab:x},n.createElement(r.a.TabList,{className:"page-tabs-list"},m.map((e=>n.createElement(r.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?b:b+e.props.href))},e.props.children)))),m.map(((e,t)=>n.createElement(r.a.TabPanel,{key:e.props.href},x===t?h.props.children:n.createElement("div",null)))))},u=e=>{let{children:t}=e;return n.createElement(r.a.TabList,null,t)};u.componentName=i;const d=e=>{let{href:t,slug:a,children:l}=e;return n.createElement(r.a.Tab,null,l)};d.componentName=s;const p=e=>{let{children:t}=e;return n.createElement(r.a.TabPanel,null,t)};p.componentName=o,c.TabList=u,c.Tab=d,c.TabPanel=p,t.Z=c},57674:function(e,t,a){var n=a(67294),l=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return n.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},n.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>n.createElement("li",{key:t},n.createElement("span",{className:"status-name"},t),n.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-text-area-index-mdx-cd72c17638193c051f15.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-text-area-index-mdx-cd72c17638193c051f15.js
new file mode 100644
index 00000000000..04f9666af86
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-text-area-index-mdx-cd72c17638193c051f15.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[8552,630],{93667:function(e,t,a){a.d(t,{I:function(){return s},t:function(){return o}});var n=a(67294),l=a(7444),i=a(34300),r=a(41125),o={root:"TextInput-module_root__2CMNr text-input_hds-text-input__2LODq",inputWrapper:"TextInput-module_inputWrapper__3Rvel text-input_hds-text-input__input-wrapper__1OqYG",input:"TextInput-module_input__1BlHi text-input_hds-text-input__input__GJm5C",hasButton:"TextInput-module_hasButton__2KCM1",errorText:"TextInput-module_errorText__3pizm text-input_hds-text-input__error-text__1GLYk",helperText:"TextInput-module_helperText__2dLR6 text-input_hds-text-input__helper-text__3V2KM",invalidText:"TextInput-module_invalidText__1w4sm text-input_hds-text-input__helper-text__3V2KM",successText:"TextInput-module_successText__2NMCP text-input_hds-text-input__success-text__3EOiy",infoText:"TextInput-module_infoText__zHOGs text-input_hds-text-input__info-text__3bqzy",invalid:"TextInput-module_invalid__2iYo2 text-input_hds-text-input--invalid__1UfKC",success:"TextInput-module_success__1kDOm text-input_hds-text-input--success__3dm2J",readOnly:"TextInput-module_readOnly__j615N undefined",buttonWrapper:"TextInput-module_buttonWrapper___filA text-input_hds-text-input__buttons__1RMzT",button:"TextInput-module_button__1ySMX text-input_hds-text-input__button__1Fh0I"};(0,l.s)("@keyframes text-input_fadeIn__2IDZ8{0%{opacity:0}to{opacity:1}}.text-input_hds-text-input__2LODq{--border-width:2px;--outline-width:3px;--input-height:56px;--textarea-height:149px;--icon-size:var(--spacing-m);--helper-color-default:var(--color-black-60);--helper-color-invalid:var(--color-error);--helper-color-success:var(--color-success);--helper-color-info:var(--color-black-90);--helper-color-info-icon:var(--color-coat-of-arms);--icon-color-invalid:var(--color-error);--input-background-default:var(--color-white);--input-background-disabled:var(--color-black-10);--input-border-color-default:var(--color-black-50);--input-border-color-hover:var(--color-black-90);--input-border-color-focus:var(--color-black-90);--input-border-color-invalid:var(--color-error);--input-border-color-disabled:var(--color-black-10);--input-border-color-success:var(--color-success);--input-color-default:var(--color-black-90);--input-color-disabled:var(--color-black-40);--label-color-default:var(--color-black-90);--label-color-invalid:var(--color-black-90);--placeholder-color:var(--color-black-60)}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C{-webkit-appearance:none;background-color:var(--input-background-default);border:var(--border-width) solid var(--input-border-color-default);border-radius:0;box-sizing:border-box;color:var(--input-color-default);font-family:inherit;font-size:1.125em;height:var(--input-height);line-height:normal;margin:0;padding:0 var(--spacing-s);width:100%;will-change:transform,box-shadow}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C:hover{border-color:var(--input-border-color-hover);transition:border-color 85ms ease-out}.text-input_hds-text-input__input-wrapper__1OqYG:focus-within .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-focus);outline:none}.text-input_hds-text-input__2LODq.text-input_hds-text-input--invalid__1UfKC .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-invalid)}.text-input_hds-text-input__2LODq.text-input_hds-text-input--success__3dm2J .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-success)}.text-input_hds-text-input__input-wrapper__1OqYG:focus-within .text-input_hds-text-input__input__GJm5C:not([readonly]){box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);transform:translateZ(0);transition:85ms ease-out;transition-property:box-shadow,transform}.text-input_hds-text-input__label__15F2V{color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.text-input_hds-text-input--invalid__1UfKC .text-input_hds-text-input__label__15F2V{color:var(--label-color-invalid);transition:color 85ms linear}.text-input_hds-text-input__required__z3Hm0{color:var(--color-black-90);display:inline-block;font-size:var(--fontsize-body-xl);line-height:1;margin-left:var(--spacing-2-xs);transform:translateY(var(--spacing-3-xs))}.text-input_hds-text-input__input-wrapper__1OqYG{display:flex;position:relative}.text-input_hds-text-input__2LODq textarea.text-input_hds-text-input__input__GJm5C{font-family:inherit;height:var(--textarea-height);margin:0;min-height:var(--input-height);overflow:auto;padding:var(--spacing-s);resize:vertical}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C::-moz-placeholder{color:var(--placeholder-color);opacity:1}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C::placeholder{color:var(--placeholder-color);opacity:1}.text-input_hds-text-input__helper-text__3V2KM{color:var(--helper-color-default)}.text-input_hds-text-input__error-text__1GLYk,.text-input_hds-text-input__helper-text__3V2KM{display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);white-space:pre-line}.text-input_hds-text-input__error-text__1GLYk{color:var(--helper-color-invalid);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.text-input_hds-text-input__error-text__1GLYk:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__error-text__1GLYk:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--icon-color-invalid);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__success-text__3EOiy{color:var(--helper-color-success);display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative;white-space:pre-wrap}.text-input_hds-text-input__success-text__3EOiy:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__success-text__3EOiy:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--helper-color-success);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__info-text__3bqzy{color:var(--helper-color-info);display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.text-input_hds-text-input__info-text__3bqzy:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__info-text__3bqzy:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--helper-color-info-icon);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C[disabled]{background-color:var(--input-background-disabled);border-color:var(--input-border-color-disabled);color:var(--input-color-disabled);cursor:not-allowed}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C[readonly]{background-color:transparent;border:0;color:var(--input-color-default);padding:0;-webkit-text-fill-color:var(--input-color-default)}.text-input_hds-text-input__buttons__1RMzT{align-items:center;bottom:0;display:flex;font-size:1rem;justify-content:center;margin-right:calc(var(--spacing-s) - var(--spacing-xs) / 2);position:absolute;right:0;top:0}.text-input_hds-text-input__button__1Fh0I{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;display:flex;font:inherit;outline:none;padding:var(--spacing-xs) calc(var(--spacing-xs) / 2)}.text-input_hds-text-input__button__1Fh0I:focus{outline:var(--outline-width) solid var(--color-focus-outline)}.TextInput-module_root__2CMNr{position:relative}.TextInput-module_input__1BlHi.TextInput-module_hasButton__2KCM1{padding-right:calc(2 * var(--spacing-s) + 1.5rem)}.TextInput-module_button__1ySMX:disabled{cursor:not-allowed}.TextInput-module_button__1ySMX:focus{outline:var(--outline-width) solid var(--color-focus-outline)}");const s=e=>{let{children:t,className:a="",errorText:l,helperText:s,hideLabel:c=!1,id:u,invalid:d=!1,isAriaLabelledBy:p=!1,label:h,labelId:_,onBlur:m,required:x=!1,style:b,successText:v,infoText:f,tooltipLabel:g,tooltipText:E,tooltipButtonLabel:T}=e;return n.createElement("div",{onBlur:m,className:(0,i.c)(o.root,d&&o.invalid,v&&o.success,a),style:b},h&&n.createElement(r.F,{id:_,inputId:u,isAriaLabelledBy:p,hidden:c,label:h,required:x,tooltipLabel:g,tooltipButtonLabel:T,tooltipText:E}),n.createElement("div",{className:(0,i.c)(o.inputWrapper)},t),l&&n.createElement("div",{className:o.errorText,id:u+"-error"},l),v&&n.createElement("div",{className:o.successText,id:u+"-success"},v),f&&n.createElement("div",{className:o.infoText,id:u+"-info"},f),s&&n.createElement("div",{className:o.helperText,id:u+"-helper"},s))}},83428:function(e,t,a){a.d(t,{S:function(){return c}});var n=a(80136),l=a(67294),i=a(7444),r=a(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,i.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const s=e=>{let{icon:t}=e;return l.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:i,type:c="neutral",iconLeft:u}=e,d=(0,n._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(o.statusLabel,o[c],u&&o.statusLabelWithIcon,a),"data-testid":i},d),u&&l.createElement(s,{icon:u}),t)}},3382:function(e,t,a){a.d(t,{T:function(){return o}});var n=a(80136),l=a(67294),i=a(93667),r=a(37776);const o=l.forwardRef(((e,t)=>{var{className:a="",disabled:o=!1,defaultValue:s,errorText:c,helperText:u,hideLabel:d,invalid:p,id:h,label:_,onChange:m=(()=>null),required:x,style:b,successText:v,infoText:f,tooltipLabel:g,tooltipText:E,tooltipButtonLabel:T}=e,y=(0,n._)(e,["className","disabled","defaultValue","errorText","helperText","hideLabel","invalid","id","label","onChange","required","style","successText","infoText","tooltipLabel","tooltipText","tooltipButtonLabel"]);const w={className:a,errorText:c,helperText:u,hideLabel:d,id:h,invalid:p,label:_,required:x,style:b,successText:v,infoText:f,tooltipLabel:g,tooltipText:E,tooltipButtonLabel:T},k=(0,r.c)(h,u,c,v,f);return l.createElement(i.I,Object.assign({},w),l.createElement("textarea",Object.assign({className:i.t.input,defaultValue:s,disabled:o,id:h,onChange:m,ref:t,required:x,"aria-describedby":k.length>0?k:null},y)))}))},37776:function(e,t,a){a.d(t,{c:function(){return n}});var n=(e,t,a,n,l)=>[t&&e+"-helper",a&&e+"-error",n&&e+"-success",l&&e+"-info"].filter((e=>e)).join(" ")},73272:function(e,t,a){a.r(t);var n=a(11151),l=a(67294),i=a(3382),r=a(67523);const o=e=>{let{children:t,pageContext:a}=e;return l.createElement(r.default,{pageContext:a},t)};function s(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",strong:"strong",h4:"h4",p:"p"},(0,n.ah)(),e.components),{PlaygroundPreview:a,InternalLink:r}=t;return r||c("InternalLink",!0),a||c("PlaygroundPreview",!0),l.createElement(l.Fragment,null,l.createElement(t.h2,{id:"usage",style:{position:"relative"}},"Usage",l.createElement(t.a,{href:"#usage","aria-label":"usage permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h3,{id:"example",style:{position:"relative"}},"Example",l.createElement(t.a,{href:"#example","aria-label":"example permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a,null,l.createElement(i.T,{id:"textarea",label:"Label",placeholder:"Placeholder",helperText:"Assistive text",required:!0,style:{maxWidth:"320px"}})),"\n",l.createElement(t.h3,{id:"principles",style:{position:"relative"}},"Principles",l.createElement(t.a,{href:"#principles","aria-label":"principles permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,l.createElement(t.strong,null,"A label should always be provided with a text area.")),"\n",l.createElement(t.li,null,"Use a text area when multiples lines of text is expected. For single line inputs, use a ",l.createElement(r,{href:"/components/text-input"},"TextInput component.")),"\n",l.createElement(t.li,null,"Allow the text area to reflect the length of the content you expect the user to enter."),"\n",l.createElement(t.li,null,"If possible, add programmatic assistance. Detect and pre-fill inputs to reduce errors and save time. Use sentence-case for default values, detected values, and auto-completion text."),"\n",l.createElement(t.li,null,"If possible, do input validation in client-side real-time and provide the user with immediate feedback. See ",l.createElement(r,{href:"/patterns/forms/form-validation"},"HDS Form validation pattern page")," for more information."),"\n",l.createElement(t.li,null,"If possible, be forgiving of different input formats and small mistakes. It can greatly increase user experience of your product if you can fix common mistakes for the user."),"\n",l.createElement(t.li,null,"To decrease a cognitive load of the user, it is recommended to mark all required fields. Remember to provide explanation of the required field indicator at the top of your form."),"\n",l.createElement(t.li,null,"While not required, you can show the current and the expected amount of characters below the text area in the assistive text."),"\n"),"\n",l.createElement(t.h3,{id:"variations",style:{position:"relative"}},"Variations",l.createElement(t.a,{href:"#variations","aria-label":"variations permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h4,{id:"default",style:{position:"relative"}},"Default",l.createElement(t.a,{href:"#default","aria-label":"default permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"A text area is meant for situations where inputted text is multiline or contains more than one sentence."),"\n",l.createElement(a,null,l.createElement(i.T,{id:"textarea-default",label:"Label",placeholder:"Placeholder",helperText:"Assistive text",required:!0,style:{maxWidth:"320px"}})),"\n",l.createElement(t.h4,{id:"with-a-tooltip",style:{position:"relative"}},"With a tooltip",l.createElement(t.a,{href:"#with-a-tooltip","aria-label":"with a tooltip permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"A text area can be provided with additional tooltip. Tooltip information should be considered as extra information, for example, why is this information gathered or how is it used. The user should have sufficient information on how to fill the input field in label and assistive text. You can find more information about Tooltips how they are used from the ",l.createElement(r,{href:"/components/tooltip"},"Tooltip documentation page"),"."),"\n",l.createElement(a,null,l.createElement(i.T,{id:"textarea-tooltip",label:"Label",placeholder:"Placeholder",tooltipLabel:"Tooltip label",tooltipButtonLabel:"Tooltip button label",tooltipText:"Tooltips contain nice to have information. Default Tooltip contents should not be longer than two to three sentences. For longer descriptions, provide a link to a separate page.",style:{maxWidth:"320px"}})))}function c(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){return void 0===e&&(e={}),l.createElement(o,e,l.createElement(s,e))}},67523:function(e,t,a){a.r(t);var n=a(11151),l=a(67294),i=a(83428),r=a(57674),o=a(89482),s=(a(18607),a(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,n.ah)(),e.components);return s.Z||u("PageTabs",!1),s.Z.Tab||u("PageTabs.Tab",!0),s.Z.TabList||u("PageTabs.TabList",!0),s.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"textarea",style:{position:"relative"}},"TextArea",l.createElement(t.a,{href:"#textarea","aria-label":"textarea permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(i.S,{type:"info"},"Stable"),l.createElement(i.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(o.Z,null,"A text area is a specialised version of the text input component. Text areas can be used for multiline answers."),"\n",l.createElement(s.Z,{pageContext:e.pageContext},l.createElement(s.Z.TabList,null,l.createElement(s.Z.Tab,{href:"/"},"Usage"),l.createElement(s.Z.Tab,{href:"/code"},"Code"),l.createElement(s.Z.Tab,{href:"/accessibility"},"Accessibility")),l.createElement(s.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,n.ah)(),e.components);return t?l.createElement(t,e,l.createElement(c,e)):c(e)}},89482:function(e,t,a){var n=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:l={},children:i}=e;return n.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...l}},i)}},26127:function(e,t,a){var n=a(67294),l=a(14160),i=a(94671);const r="PageTabList",o="PageTabPanel",s="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const u=a.frontmatter.slug,d=Array.isArray(c)?c:[c],p=d.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===r)),h=d.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===o)),_=null===(t=p.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===s)),m=_.findIndex((e=>u.endsWith(e.props.href))),x=-1===m?0:m,b=0===x?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return n.createElement(i.a,{initiallyActiveTab:x},n.createElement(i.a.TabList,{className:"page-tabs-list"},_.map((e=>n.createElement(i.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?b:b+e.props.href))},e.props.children)))),_.map(((e,t)=>n.createElement(i.a.TabPanel,{key:e.props.href},x===t?h.props.children:n.createElement("div",null)))))},u=e=>{let{children:t}=e;return n.createElement(i.a.TabList,null,t)};u.componentName=r;const d=e=>{let{href:t,slug:a,children:l}=e;return n.createElement(i.a.Tab,null,l)};d.componentName=s;const p=e=>{let{children:t}=e;return n.createElement(i.a.TabPanel,null,t)};p.componentName=o,c.TabList=u,c.Tab=d,c.TabPanel=p,t.Z=c},57674:function(e,t,a){var n=a(67294),l=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return n.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},n.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>n.createElement("li",{key:t},n.createElement("span",{className:"status-name"},t),n.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-text-area-tabs-mdx-539fb0ddf9270349e94f.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-text-area-tabs-mdx-539fb0ddf9270349e94f.js
new file mode 100644
index 00000000000..17fd5680be0
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-text-area-tabs-mdx-539fb0ddf9270349e94f.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[630],{83428:function(e,a,t){t.d(a,{S:function(){return i}});var s=t(80136),l=t(67294),n=t(7444),r=t(34300),c={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:a}=e;return l.createElement("span",{className:c.statusLabelIcon,"aria-hidden":"true"},a)},i=e=>{var{children:a,className:t,dataTestId:n,type:i="neutral",iconLeft:u}=e,b=(0,s._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(c.statusLabel,c[i],u&&c.statusLabelWithIcon,t),"data-testid":n},b),u&&l.createElement(o,{icon:u}),a)}},67523:function(e,a,t){t.r(a);var s=t(11151),l=t(67294),n=t(83428),r=t(57674),c=t(89482),o=(t(18607),t(26127));function i(e){const a=Object.assign({h1:"h1",a:"a",span:"span"},(0,s.ah)(),e.components);return o.Z||u("PageTabs",!1),o.Z.Tab||u("PageTabs.Tab",!0),o.Z.TabList||u("PageTabs.TabList",!0),o.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(a.h1,{id:"textarea",style:{position:"relative"}},"TextArea",l.createElement(a.a,{href:"#textarea","aria-label":"textarea permalink",className:"header-anchor after"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(n.S,{type:"info"},"Stable"),l.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(c.Z,null,"A text area is a specialised version of the text input component. Text areas can be used for multiline answers."),"\n",l.createElement(o.Z,{pageContext:e.pageContext},l.createElement(o.Z.TabList,null,l.createElement(o.Z.Tab,{href:"/"},"Usage"),l.createElement(o.Z.Tab,{href:"/code"},"Code"),l.createElement(o.Z.Tab,{href:"/accessibility"},"Accessibility")),l.createElement(o.Z.TabPanel,null,e.children)))}function u(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}a.default=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,s.ah)(),e.components);return a?l.createElement(a,e,l.createElement(i,e)):i(e)}},89482:function(e,a,t){var s=t(67294);a.Z=e=>{let{color:a="var(--color-black-90)",size:t="var(--fontsize-body-xl)",style:l={},children:n}=e;return s.createElement("p",{style:{fontSize:t,color:a,maxWidth:600,...l}},n)}},26127:function(e,a,t){var s=t(67294),l=t(14160),n=t(94671);const r="PageTabList",c="PageTabPanel",o="PageTab",i=e=>{var a;let{pageContext:t,children:i}=e;const u=t.frontmatter.slug,b=Array.isArray(i)?i:[i],d=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===r)),m=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===c)),h=null===(a=d.props)||void 0===a?void 0:a.children.filter((e=>e.type.componentName===o)),p=h.findIndex((e=>u.endsWith(e.props.href))),_=-1===p?0:p,f=0===_?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return s.createElement(n.a,{initiallyActiveTab:_},s.createElement(n.a.TabList,{className:"page-tabs-list"},h.map((e=>s.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),h.map(((e,a)=>s.createElement(n.a.TabPanel,{key:e.props.href},_===a?m.props.children:s.createElement("div",null)))))},u=e=>{let{children:a}=e;return s.createElement(n.a.TabList,null,a)};u.componentName=r;const b=e=>{let{href:a,slug:t,children:l}=e;return s.createElement(n.a.Tab,null,l)};b.componentName=o;const d=e=>{let{children:a}=e;return s.createElement(n.a.TabPanel,null,a)};d.componentName=c,i.TabList=u,i.Tab=b,i.TabPanel=d,a.Z=i},57674:function(e,a,t){var s=t(67294),l=t(45422);a.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return s.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},s.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((a=>s.createElement("li",{key:a},s.createElement("span",{className:"status-name"},a),s.createElement("span",null,e[a]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-text-input-accessibility-mdx-e1395c517162e5b3f97c.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-text-input-accessibility-mdx-e1395c517162e5b3f97c.js
new file mode 100644
index 00000000000..fef204be52e
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-text-input-accessibility-mdx-e1395c517162e5b3f97c.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[9081,3424],{83428:function(e,t,a){a.d(t,{S:function(){return c}});var l=a(80136),n=a(67294),s=a(7444),r=a(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,s.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:t}=e;return n.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:s,type:c="neutral",iconLeft:u}=e,d=(0,l._)(e,["children","className","dataTestId","type","iconLeft"]);return n.createElement("span",Object.assign({className:(0,r.c)(i.statusLabel,i[c],u&&i.statusLabelWithIcon,a),"data-testid":s},d),u&&n.createElement(o,{icon:u}),t)}},91497:function(e,t,a){a.r(t);var l=a(11151),n=a(67294),s=a(80699),r=a(59309);const i=e=>{let{children:t,pageContext:a}=e;return n.createElement(r.default,{pageContext:a},t)};function o(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",strong:"strong",code:"code"},(0,l.ah)(),e.components);return n.createElement(n.Fragment,null,n.createElement(t.h2,{id:"accessibility",style:{position:"relative"}},"Accessibility",n.createElement(t.a,{href:"#accessibility","aria-label":"accessibility permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.h3,{id:"pay-attention-to",style:{position:"relative"}},"Pay attention to",n.createElement(t.a,{href:"#pay-attention-to","aria-label":"pay attention to permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.ul,null,"\n",n.createElement(t.li,null,"Placeholder text can be used to give hints and examples to the user what should be entered to the field. ",n.createElement(t.strong,null,"However, all assistive technologies do not treat placeholder texts as labels and therefore they may ignore them completely.")," Aim to provide the sufficient information to fill the input in the label."),"\n",n.createElement(t.li,null,"It is required to use ",n.createElement(t.code,null,"autocomplete")," attribute if input control is listed in the common input purposes list. You can read the full list of common input purposes at ",n.createElement(s.Z,{href:"https://www.w3.org/TR/WCAG21/#input-purposes"},"WCAG 2.1 documentation website"),". You can read more about the requirement from ",n.createElement(s.Z,{href:"https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose"},"WCAG 2.1 Identify Input Purpose guideline"),"."),"\n",n.createElement(t.li,null,"In the case of an erroneous input, aim to provide clear instructions to the user on how to correct the mistake. Always provide a text description of the error."),"\n"))}t.default=function(e){return void 0===e&&(e={}),n.createElement(i,e,n.createElement(o,e))}},59309:function(e,t,a){a.r(t);var l=a(11151),n=a(67294),s=a(83428),r=a(57674),i=a(89482),o=(a(18607),a(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,l.ah)(),e.components);return o.Z||u("PageTabs",!1),o.Z.Tab||u("PageTabs.Tab",!0),o.Z.TabList||u("PageTabs.TabList",!0),o.Z.TabPanel||u("PageTabs.TabPanel",!0),n.createElement(n.Fragment,null,n.createElement(t.h1,{id:"textinput",style:{position:"relative"}},"TextInput",n.createElement(t.a,{href:"#textinput","aria-label":"textinput permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement("div",{class:"status-label-description"},n.createElement(s.S,{type:"info"},"Stable"),n.createElement(s.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),n.createElement(r.Z)),"\n",n.createElement(i.Z,null,"A text field is an input field that the user can interact with and input content and data. The user can also be provided with helper text if needed. Text inputs are used for shorter information while Text areas can be used for multiline answers."),"\n",n.createElement(o.Z,{pageContext:e.pageContext},n.createElement(o.Z.TabList,null,n.createElement(o.Z.Tab,{href:"/"},"Usage"),n.createElement(o.Z.Tab,{href:"/code"},"Code"),n.createElement(o.Z.Tab,{href:"/accessibility"},"Accessibility")),n.createElement(o.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,l.ah)(),e.components);return t?n.createElement(t,e,n.createElement(c,e)):c(e)}},89482:function(e,t,a){var l=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:n={},children:s}=e;return l.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...n}},s)}},26127:function(e,t,a){var l=a(67294),n=a(14160),s=a(94671);const r="PageTabList",i="PageTabPanel",o="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const u=a.frontmatter.slug,d=Array.isArray(c)?c:[c],h=d.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===r)),b=d.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===i)),m=null===(t=h.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===o)),p=m.findIndex((e=>u.endsWith(e.props.href))),f=-1===p?0:p,g=0===f?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return l.createElement(s.a,{initiallyActiveTab:f},l.createElement(s.a.TabList,{className:"page-tabs-list"},m.map((e=>l.createElement(s.a.Tab,{key:e.props.href,onClick:()=>(0,n.navigate)(""+("/"===e.props.href?g:g+e.props.href))},e.props.children)))),m.map(((e,t)=>l.createElement(s.a.TabPanel,{key:e.props.href},f===t?b.props.children:l.createElement("div",null)))))},u=e=>{let{children:t}=e;return l.createElement(s.a.TabList,null,t)};u.componentName=r;const d=e=>{let{href:t,slug:a,children:n}=e;return l.createElement(s.a.Tab,null,n)};d.componentName=o;const h=e=>{let{children:t}=e;return l.createElement(s.a.TabPanel,null,t)};h.componentName=i,c.TabList=u,c.Tab=d,c.TabPanel=h,t.Z=c},57674:function(e,t,a){var l=a(67294),n=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return l.createElement(n.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},l.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>l.createElement("li",{key:t},l.createElement("span",{className:"status-name"},t),l.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-text-input-code-mdx-5b7c91fa9a15bda3673c.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-text-input-code-mdx-5b7c91fa9a15bda3673c.js
new file mode 100644
index 00000000000..0121a9bd144
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-text-input-code-mdx-5b7c91fa9a15bda3673c.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[6944,3424],{93667:function(e,t,n){n.d(t,{I:function(){return s},t:function(){return o}});var l=n(67294),a=n(7444),r=n(34300),i=n(41125),o={root:"TextInput-module_root__2CMNr text-input_hds-text-input__2LODq",inputWrapper:"TextInput-module_inputWrapper__3Rvel text-input_hds-text-input__input-wrapper__1OqYG",input:"TextInput-module_input__1BlHi text-input_hds-text-input__input__GJm5C",hasButton:"TextInput-module_hasButton__2KCM1",errorText:"TextInput-module_errorText__3pizm text-input_hds-text-input__error-text__1GLYk",helperText:"TextInput-module_helperText__2dLR6 text-input_hds-text-input__helper-text__3V2KM",invalidText:"TextInput-module_invalidText__1w4sm text-input_hds-text-input__helper-text__3V2KM",successText:"TextInput-module_successText__2NMCP text-input_hds-text-input__success-text__3EOiy",infoText:"TextInput-module_infoText__zHOGs text-input_hds-text-input__info-text__3bqzy",invalid:"TextInput-module_invalid__2iYo2 text-input_hds-text-input--invalid__1UfKC",success:"TextInput-module_success__1kDOm text-input_hds-text-input--success__3dm2J",readOnly:"TextInput-module_readOnly__j615N undefined",buttonWrapper:"TextInput-module_buttonWrapper___filA text-input_hds-text-input__buttons__1RMzT",button:"TextInput-module_button__1ySMX text-input_hds-text-input__button__1Fh0I"};(0,a.s)("@keyframes text-input_fadeIn__2IDZ8{0%{opacity:0}to{opacity:1}}.text-input_hds-text-input__2LODq{--border-width:2px;--outline-width:3px;--input-height:56px;--textarea-height:149px;--icon-size:var(--spacing-m);--helper-color-default:var(--color-black-60);--helper-color-invalid:var(--color-error);--helper-color-success:var(--color-success);--helper-color-info:var(--color-black-90);--helper-color-info-icon:var(--color-coat-of-arms);--icon-color-invalid:var(--color-error);--input-background-default:var(--color-white);--input-background-disabled:var(--color-black-10);--input-border-color-default:var(--color-black-50);--input-border-color-hover:var(--color-black-90);--input-border-color-focus:var(--color-black-90);--input-border-color-invalid:var(--color-error);--input-border-color-disabled:var(--color-black-10);--input-border-color-success:var(--color-success);--input-color-default:var(--color-black-90);--input-color-disabled:var(--color-black-40);--label-color-default:var(--color-black-90);--label-color-invalid:var(--color-black-90);--placeholder-color:var(--color-black-60)}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C{-webkit-appearance:none;background-color:var(--input-background-default);border:var(--border-width) solid var(--input-border-color-default);border-radius:0;box-sizing:border-box;color:var(--input-color-default);font-family:inherit;font-size:1.125em;height:var(--input-height);line-height:normal;margin:0;padding:0 var(--spacing-s);width:100%;will-change:transform,box-shadow}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C:hover{border-color:var(--input-border-color-hover);transition:border-color 85ms ease-out}.text-input_hds-text-input__input-wrapper__1OqYG:focus-within .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-focus);outline:none}.text-input_hds-text-input__2LODq.text-input_hds-text-input--invalid__1UfKC .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-invalid)}.text-input_hds-text-input__2LODq.text-input_hds-text-input--success__3dm2J .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-success)}.text-input_hds-text-input__input-wrapper__1OqYG:focus-within .text-input_hds-text-input__input__GJm5C:not([readonly]){box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);transform:translateZ(0);transition:85ms ease-out;transition-property:box-shadow,transform}.text-input_hds-text-input__label__15F2V{color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.text-input_hds-text-input--invalid__1UfKC .text-input_hds-text-input__label__15F2V{color:var(--label-color-invalid);transition:color 85ms linear}.text-input_hds-text-input__required__z3Hm0{color:var(--color-black-90);display:inline-block;font-size:var(--fontsize-body-xl);line-height:1;margin-left:var(--spacing-2-xs);transform:translateY(var(--spacing-3-xs))}.text-input_hds-text-input__input-wrapper__1OqYG{display:flex;position:relative}.text-input_hds-text-input__2LODq textarea.text-input_hds-text-input__input__GJm5C{font-family:inherit;height:var(--textarea-height);margin:0;min-height:var(--input-height);overflow:auto;padding:var(--spacing-s);resize:vertical}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C::-moz-placeholder{color:var(--placeholder-color);opacity:1}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C::placeholder{color:var(--placeholder-color);opacity:1}.text-input_hds-text-input__helper-text__3V2KM{color:var(--helper-color-default)}.text-input_hds-text-input__error-text__1GLYk,.text-input_hds-text-input__helper-text__3V2KM{display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);white-space:pre-line}.text-input_hds-text-input__error-text__1GLYk{color:var(--helper-color-invalid);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.text-input_hds-text-input__error-text__1GLYk:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__error-text__1GLYk:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--icon-color-invalid);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__success-text__3EOiy{color:var(--helper-color-success);display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative;white-space:pre-wrap}.text-input_hds-text-input__success-text__3EOiy:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__success-text__3EOiy:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--helper-color-success);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__info-text__3bqzy{color:var(--helper-color-info);display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.text-input_hds-text-input__info-text__3bqzy:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__info-text__3bqzy:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--helper-color-info-icon);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C[disabled]{background-color:var(--input-background-disabled);border-color:var(--input-border-color-disabled);color:var(--input-color-disabled);cursor:not-allowed}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C[readonly]{background-color:transparent;border:0;color:var(--input-color-default);padding:0;-webkit-text-fill-color:var(--input-color-default)}.text-input_hds-text-input__buttons__1RMzT{align-items:center;bottom:0;display:flex;font-size:1rem;justify-content:center;margin-right:calc(var(--spacing-s) - var(--spacing-xs) / 2);position:absolute;right:0;top:0}.text-input_hds-text-input__button__1Fh0I{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;display:flex;font:inherit;outline:none;padding:var(--spacing-xs) calc(var(--spacing-xs) / 2)}.text-input_hds-text-input__button__1Fh0I:focus{outline:var(--outline-width) solid var(--color-focus-outline)}.TextInput-module_root__2CMNr{position:relative}.TextInput-module_input__1BlHi.TextInput-module_hasButton__2KCM1{padding-right:calc(2 * var(--spacing-s) + 1.5rem)}.TextInput-module_button__1ySMX:disabled{cursor:not-allowed}.TextInput-module_button__1ySMX:focus{outline:var(--outline-width) solid var(--color-focus-outline)}");const s=e=>{let{children:t,className:n="",errorText:a,helperText:s,hideLabel:c=!1,id:u,invalid:d=!1,isAriaLabelledBy:p=!1,label:h,labelId:m,onBlur:_,required:b=!1,style:x,successText:v,infoText:E,tooltipLabel:g,tooltipText:f,tooltipButtonLabel:T}=e;return l.createElement("div",{onBlur:_,className:(0,r.c)(o.root,d&&o.invalid,v&&o.success,n),style:x},h&&l.createElement(i.F,{id:m,inputId:u,isAriaLabelledBy:p,hidden:c,label:h,required:b,tooltipLabel:g,tooltipButtonLabel:T,tooltipText:f}),l.createElement("div",{className:(0,r.c)(o.inputWrapper)},t),a&&l.createElement("div",{className:o.errorText,id:u+"-error"},a),v&&l.createElement("div",{className:o.successText,id:u+"-success"},v),E&&l.createElement("div",{className:o.infoText,id:u+"-info"},E),s&&l.createElement("div",{className:o.helperText,id:u+"-helper"},s))}},83428:function(e,t,n){n.d(t,{S:function(){return c}});var l=n(80136),a=n(67294),r=n(7444),i=n(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,r.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const s=e=>{let{icon:t}=e;return a.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:n,dataTestId:r,type:c="neutral",iconLeft:u}=e,d=(0,l._)(e,["children","className","dataTestId","type","iconLeft"]);return a.createElement("span",Object.assign({className:(0,i.c)(o.statusLabel,o[c],u&&o.statusLabelWithIcon,n),"data-testid":r},d),u&&a.createElement(s,{icon:u}),t)}},24155:function(e,t,n){n.d(t,{T:function(){return s}});var l=n(80136),a=n(67294),r=n(93667),i=n(34300),o=n(37776);const s=a.forwardRef(((e,t)=>{var{className:n="",children:s,disabled:c=!1,defaultValue:u,errorText:d,helperText:p,hideLabel:h,invalid:m,id:_,label:b,onChange:x=(()=>null),required:v,style:E,successText:g,infoText:f,tooltipLabel:T,tooltipText:y,tooltipButtonLabel:w,type:k="text",buttonIcon:L,buttonAriaLabel:C,onButtonClick:I}=e,z=(0,l._)(e,["className","children","disabled","defaultValue","errorText","helperText","hideLabel","invalid","id","label","onChange","required","style","successText","infoText","tooltipLabel","tooltipText","tooltipButtonLabel","type","buttonIcon","buttonAriaLabel","onButtonClick"]);const N={className:n,errorText:d,helperText:p,hideLabel:h,id:_,invalid:m,label:b,required:v,style:E,successText:g,infoText:f,tooltipLabel:T,tooltipText:y,tooltipButtonLabel:w},O=(0,o.c)(_,p,d,g,f),S=Boolean(L&&I);return a.createElement(r.I,Object.assign({},N),a.createElement("input",Object.assign({className:(0,i.c)(r.t.input,S&&r.t.hasButton),defaultValue:u,disabled:c,id:_,onChange:x,ref:t,required:v,type:k,"aria-describedby":O.length>0?O:null},z)),S&&a.createElement("div",{className:r.t.buttonWrapper},a.createElement("button",{className:r.t.button,disabled:c,type:"button",onClick:I,"aria-label":C},L)),s)}))},37776:function(e,t,n){n.d(t,{c:function(){return l}});var l=(e,t,n,l,a)=>[t&&e+"-helper",n&&e+"-error",l&&e+"-success",a&&e+"-info"].filter((e=>e)).join(" ")},27379:function(e,t,n){n.r(t);var l=n(11151),a=n(67294),r=n(24155),i=n(59309);const o=e=>{let{children:t,pageContext:n}=e;return a.createElement(i.default,{pageContext:n},t)};function s(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",h4:"h4",pre:"pre",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",strong:"strong",p:"p"},(0,l.ah)(),e.components),{Playground:n,IconCheckCircleFill:i,Link:o,ExternalLink:s}=t;return s||c("ExternalLink",!0),i||c("IconCheckCircleFill",!0),o||c("Link",!0),n||c("Playground",!0),a.createElement(a.Fragment,null,a.createElement(t.h2,{id:"code",style:{position:"relative"}},"Code",a.createElement(t.a,{href:"#code","aria-label":"code permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.h3,{id:"code-examples",style:{position:"relative"}},"Code examples",a.createElement(t.a,{href:"#code-examples","aria-label":"code examples permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.h4,{id:"default",style:{position:"relative"}},"Default",a.createElement(t.a,{href:"#default","aria-label":"default permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(n,{scope:{TextInput:r.T}},a.createElement(t.pre,null,a.createElement(t.code,{className:"language-jsx"},'import { TextInput } from \'hds-react\';\n\n() => (\n  <div style={{ maxWidth: \'320px\' }}>\n    <TextInput\n      id="textinput"\n      label="Label"\n      placeholder="Placeholder"\n      helperText="Assistive text"\n      required\n    />\n    <TextInput\n      id="textinput-invalid"\n      label="Label"\n      defaultValue="Text input value"\n      helperText="Assistive text"\n      style={{marginTop: \'var(--spacing-s)\'}}\n      disabled\n    />\n    <TextInput\n      id="textinput-invalid"\n      label="Label"\n      defaultValue="Text input value"\n      errorText="Error text"\n      helperText="Assistive text"\n      style={{marginTop: \'var(--spacing-s)\'}}\n      invalid\n    />\n  </div>\n)\n')),a.createElement(t.pre,null,a.createElement(t.code,{className:"language-html"},'<div style="max-width:320px;">\n  <div class="hds-text-input">\n    <label for="textinput-core" class="hds-text-input__label">Label<span class="hds-text-input__required">*</span></label>\n    <div class="hds-text-input__input-wrapper">\n      <input id="textinput-core" class="hds-text-input__input" type="text" placeholder="Placeholder" required />\n    </div>\n    <span class="hds-text-input__helper-text">Assistive text</span>\n  </div>\n\n  <div class="hds-text-input" style="margin-top:var(--spacing-s);">\n    <label for="textinput-disabled-core" class="hds-text-input__label">\n      Label\n    </label>\n    <div class="hds-text-input__input-wrapper">\n      <input id="textinput-disabled-core" class="hds-text-input__input" type="text" value="Text input value" disabled />\n    </div>\n    <span class="hds-text-input__helper-text">Assistive text</span>\n  </div>\n\n  <div class="hds-text-input hds-text-input--invalid" style="margin-top:var(--spacing-s);">\n    <label for="textinput-invalid-core" class="hds-text-input__label">\n      Label\n    </label>\n    <div class="hds-text-input__input-wrapper">\n      <input id="textinput-invalid-core" class="hds-text-input__input" type="text" value="Text input value" />\n    </div>\n    <span class="hds-text-input__error-text">Error text</span>\n    <span class="hds-text-input__helper-text">Assistive text</span>\n  </div>\n</div>\n'))),"\n",a.createElement(t.h4,{id:"read-only",style:{position:"relative"}},"Read-only",a.createElement(t.a,{href:"#read-only","aria-label":"read only permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(n,{scope:{TextInput:r.T}},a.createElement(t.pre,null,a.createElement(t.code,{className:"language-jsx"},'import { TextInput } from \'hds-react\';\n\n() => (\n  <TextInput\n    id="textinput-readonly"\n    label="Label"\n    defaultValue="Read-only value"\n    helperText="Assistive text"\n    readOnly\n  />\n)\n')),a.createElement(t.pre,null,a.createElement(t.code,{className:"language-html"},'<div class="hds-text-input">\n  <label for="textinput-readonly-core" class="hds-text-input__label">\n    Label\n  </label>\n  <div class="hds-text-input__input-wrapper">\n    <input id="textinput-readonly-core" class="hds-text-input__input" type="text" value="Text input value" readonly />\n  </div>\n  <span class="hds-text-input__helper-text">Assistive text</span>\n</div>\n'))),"\n",a.createElement(t.h4,{id:"with-tooltip",style:{position:"relative"}},"With tooltip",a.createElement(t.a,{href:"#with-tooltip","aria-label":"with tooltip permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(n,{scope:{TextInput:r.T}},a.createElement(t.pre,null,a.createElement(t.code,{className:"language-jsx"},'import { TextInput } from \'hds-react\';\n\n() => (\n  <TextInput\n    id="textinput-tooltip"\n    label="Label"\n    placeholder="Placeholder"\n    tooltipLabel="Tooltip label"\n    tooltipButtonLabel="Tooltip button label"\n    tooltipText="Tooltips contain &quot;nice to have&quot; information. Default Tooltip contents should not be longer than two to three sentences. For longer descriptions, provide a link to a separate page."\n  />\n)\n'))),"\n",a.createElement(t.h3,{id:"packages",style:{position:"relative"}},"Packages",a.createElement(t.a,{href:"#packages","aria-label":"packages permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Package"),a.createElement(t.th,null,"Included"),a.createElement(t.th,null,"Storybook link"),a.createElement(t.th,null,"Source link"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.strong,null,"HDS React")),a.createElement(t.td,null,a.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},a.createElement(i)," Yes ")),a.createElement(t.td,null,a.createElement(o,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-textinput--default"},"View in Storybook")),a.createElement(t.td,null,a.createElement(s,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/react/src/components/textInput"},"View source"))),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.strong,null,"HDS Core")),a.createElement(t.td,null,a.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},a.createElement(i)," Yes ")),a.createElement(t.td,null,a.createElement(o,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/core/?path=/story/components-text-input--default"},"View in Storybook")),a.createElement(t.td,null,a.createElement(s,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/core/src/components/text-input"},"View source"))))),"\n",a.createElement(t.h3,{id:"properties",style:{position:"relative"}},"Properties",a.createElement(t.a,{href:"#properties","aria-label":"properties permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.p,null,"Note! You can find the full list of properties in the ",a.createElement(o,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/docs/components-textinput--default"},"React Storybook.")),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Property"),a.createElement(t.th,null,"Description"),a.createElement(t.th,null,"Values"),a.createElement(t.th,null,"Default value"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"label")),a.createElement(t.td,null,"The label for the input."),a.createElement(t.td,null,a.createElement(t.code,null,"ReactNode")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"errorText")),a.createElement(t.td,null,"The error text content that will be shown below the input."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"helperText")),a.createElement(t.td,null,"The helper text content that will be shown below the input."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"hideLabel")),a.createElement(t.td,null,"Hides the label above the input."),a.createElement(t.td,null,a.createElement(t.code,null,"boolean")),a.createElement(t.td,null,"false")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"invalid")),a.createElement(t.td,null,"If set to true, the input will be displayed in an invalid state."),a.createElement(t.td,null,a.createElement(t.code,null,"boolean")),a.createElement(t.td,null,"false")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"successText")),a.createElement(t.td,null,"The success text content that will be shown below the input."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"infoText")),a.createElement(t.td,null,"The info text content that will be shown below the input."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"tooltipLabel")),a.createElement(t.td,null,"The aria-label text for the tooltip."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"tooltipButtonLabel")),a.createElement(t.td,null,"The aria-label text for the tooltip trigger button."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"tooltipText")),a.createElement(t.td,null,"The text content of the tooltip."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"buttonIcon")),a.createElement(t.td,null,"Button icon."),a.createElement(t.td,null,a.createElement(t.code,null,"ReactNode")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"buttonAriaLabel")),a.createElement(t.td,null,"The aria-label for the button."),a.createElement(t.td,null,a.createElement(t.code,null,"string")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"onButtonClick")),a.createElement(t.td,null,"Callback called when the button is pressed."),a.createElement(t.td,null,a.createElement(t.code,null,"function")),a.createElement(t.td,null,"-")),a.createElement(t.tr,null,a.createElement(t.td,null,"[Table 1:TextInput properties]"),a.createElement(t.td),a.createElement(t.td),a.createElement(t.td)))))}function c(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){return void 0===e&&(e={}),a.createElement(o,e,a.createElement(s,e))}},59309:function(e,t,n){n.r(t);var l=n(11151),a=n(67294),r=n(83428),i=n(57674),o=n(89482),s=(n(18607),n(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,l.ah)(),e.components);return s.Z||u("PageTabs",!1),s.Z.Tab||u("PageTabs.Tab",!0),s.Z.TabList||u("PageTabs.TabList",!0),s.Z.TabPanel||u("PageTabs.TabPanel",!0),a.createElement(a.Fragment,null,a.createElement(t.h1,{id:"textinput",style:{position:"relative"}},"TextInput",a.createElement(t.a,{href:"#textinput","aria-label":"textinput permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement("div",{class:"status-label-description"},a.createElement(r.S,{type:"info"},"Stable"),a.createElement(r.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),a.createElement(i.Z)),"\n",a.createElement(o.Z,null,"A text field is an input field that the user can interact with and input content and data. The user can also be provided with helper text if needed. Text inputs are used for shorter information while Text areas can be used for multiline answers."),"\n",a.createElement(s.Z,{pageContext:e.pageContext},a.createElement(s.Z.TabList,null,a.createElement(s.Z.Tab,{href:"/"},"Usage"),a.createElement(s.Z.Tab,{href:"/code"},"Code"),a.createElement(s.Z.Tab,{href:"/accessibility"},"Accessibility")),a.createElement(s.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,l.ah)(),e.components);return t?a.createElement(t,e,a.createElement(c,e)):c(e)}},89482:function(e,t,n){var l=n(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:n="var(--fontsize-body-xl)",style:a={},children:r}=e;return l.createElement("p",{style:{fontSize:n,color:t,maxWidth:600,...a}},r)}},26127:function(e,t,n){var l=n(67294),a=n(14160),r=n(94671);const i="PageTabList",o="PageTabPanel",s="PageTab",c=e=>{var t;let{pageContext:n,children:c}=e;const u=n.frontmatter.slug,d=Array.isArray(c)?c:[c],p=d.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===i)),h=d.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===o)),m=null===(t=p.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===s)),_=m.findIndex((e=>u.endsWith(e.props.href))),b=-1===_?0:_,x=0===b?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return l.createElement(r.a,{initiallyActiveTab:b},l.createElement(r.a.TabList,{className:"page-tabs-list"},m.map((e=>l.createElement(r.a.Tab,{key:e.props.href,onClick:()=>(0,a.navigate)(""+("/"===e.props.href?x:x+e.props.href))},e.props.children)))),m.map(((e,t)=>l.createElement(r.a.TabPanel,{key:e.props.href},b===t?h.props.children:l.createElement("div",null)))))},u=e=>{let{children:t}=e;return l.createElement(r.a.TabList,null,t)};u.componentName=i;const d=e=>{let{href:t,slug:n,children:a}=e;return l.createElement(r.a.Tab,null,a)};d.componentName=s;const p=e=>{let{children:t}=e;return l.createElement(r.a.TabPanel,null,t)};p.componentName=o,c.TabList=u,c.Tab=d,c.TabPanel=p,t.Z=c},57674:function(e,t,n){var l=n(67294),a=n(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return l.createElement(a.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},l.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>l.createElement("li",{key:t},l.createElement("span",{className:"status-name"},t),l.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-text-input-index-mdx-8fa395ef09bc1151b6af.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-text-input-index-mdx-8fa395ef09bc1151b6af.js
new file mode 100644
index 00000000000..018731bbf78
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-text-input-index-mdx-8fa395ef09bc1151b6af.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[7846,3424],{93667:function(e,t,a){a.d(t,{I:function(){return s},t:function(){return o}});var n=a(67294),l=a(7444),i=a(34300),r=a(41125),o={root:"TextInput-module_root__2CMNr text-input_hds-text-input__2LODq",inputWrapper:"TextInput-module_inputWrapper__3Rvel text-input_hds-text-input__input-wrapper__1OqYG",input:"TextInput-module_input__1BlHi text-input_hds-text-input__input__GJm5C",hasButton:"TextInput-module_hasButton__2KCM1",errorText:"TextInput-module_errorText__3pizm text-input_hds-text-input__error-text__1GLYk",helperText:"TextInput-module_helperText__2dLR6 text-input_hds-text-input__helper-text__3V2KM",invalidText:"TextInput-module_invalidText__1w4sm text-input_hds-text-input__helper-text__3V2KM",successText:"TextInput-module_successText__2NMCP text-input_hds-text-input__success-text__3EOiy",infoText:"TextInput-module_infoText__zHOGs text-input_hds-text-input__info-text__3bqzy",invalid:"TextInput-module_invalid__2iYo2 text-input_hds-text-input--invalid__1UfKC",success:"TextInput-module_success__1kDOm text-input_hds-text-input--success__3dm2J",readOnly:"TextInput-module_readOnly__j615N undefined",buttonWrapper:"TextInput-module_buttonWrapper___filA text-input_hds-text-input__buttons__1RMzT",button:"TextInput-module_button__1ySMX text-input_hds-text-input__button__1Fh0I"};(0,l.s)("@keyframes text-input_fadeIn__2IDZ8{0%{opacity:0}to{opacity:1}}.text-input_hds-text-input__2LODq{--border-width:2px;--outline-width:3px;--input-height:56px;--textarea-height:149px;--icon-size:var(--spacing-m);--helper-color-default:var(--color-black-60);--helper-color-invalid:var(--color-error);--helper-color-success:var(--color-success);--helper-color-info:var(--color-black-90);--helper-color-info-icon:var(--color-coat-of-arms);--icon-color-invalid:var(--color-error);--input-background-default:var(--color-white);--input-background-disabled:var(--color-black-10);--input-border-color-default:var(--color-black-50);--input-border-color-hover:var(--color-black-90);--input-border-color-focus:var(--color-black-90);--input-border-color-invalid:var(--color-error);--input-border-color-disabled:var(--color-black-10);--input-border-color-success:var(--color-success);--input-color-default:var(--color-black-90);--input-color-disabled:var(--color-black-40);--label-color-default:var(--color-black-90);--label-color-invalid:var(--color-black-90);--placeholder-color:var(--color-black-60)}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C{-webkit-appearance:none;background-color:var(--input-background-default);border:var(--border-width) solid var(--input-border-color-default);border-radius:0;box-sizing:border-box;color:var(--input-color-default);font-family:inherit;font-size:1.125em;height:var(--input-height);line-height:normal;margin:0;padding:0 var(--spacing-s);width:100%;will-change:transform,box-shadow}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C:hover{border-color:var(--input-border-color-hover);transition:border-color 85ms ease-out}.text-input_hds-text-input__input-wrapper__1OqYG:focus-within .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-focus);outline:none}.text-input_hds-text-input__2LODq.text-input_hds-text-input--invalid__1UfKC .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-invalid)}.text-input_hds-text-input__2LODq.text-input_hds-text-input--success__3dm2J .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-success)}.text-input_hds-text-input__input-wrapper__1OqYG:focus-within .text-input_hds-text-input__input__GJm5C:not([readonly]){box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);transform:translateZ(0);transition:85ms ease-out;transition-property:box-shadow,transform}.text-input_hds-text-input__label__15F2V{color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.text-input_hds-text-input--invalid__1UfKC .text-input_hds-text-input__label__15F2V{color:var(--label-color-invalid);transition:color 85ms linear}.text-input_hds-text-input__required__z3Hm0{color:var(--color-black-90);display:inline-block;font-size:var(--fontsize-body-xl);line-height:1;margin-left:var(--spacing-2-xs);transform:translateY(var(--spacing-3-xs))}.text-input_hds-text-input__input-wrapper__1OqYG{display:flex;position:relative}.text-input_hds-text-input__2LODq textarea.text-input_hds-text-input__input__GJm5C{font-family:inherit;height:var(--textarea-height);margin:0;min-height:var(--input-height);overflow:auto;padding:var(--spacing-s);resize:vertical}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C::-moz-placeholder{color:var(--placeholder-color);opacity:1}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C::placeholder{color:var(--placeholder-color);opacity:1}.text-input_hds-text-input__helper-text__3V2KM{color:var(--helper-color-default)}.text-input_hds-text-input__error-text__1GLYk,.text-input_hds-text-input__helper-text__3V2KM{display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);white-space:pre-line}.text-input_hds-text-input__error-text__1GLYk{color:var(--helper-color-invalid);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.text-input_hds-text-input__error-text__1GLYk:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__error-text__1GLYk:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--icon-color-invalid);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__success-text__3EOiy{color:var(--helper-color-success);display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative;white-space:pre-wrap}.text-input_hds-text-input__success-text__3EOiy:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__success-text__3EOiy:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--helper-color-success);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__info-text__3bqzy{color:var(--helper-color-info);display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.text-input_hds-text-input__info-text__3bqzy:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__info-text__3bqzy:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--helper-color-info-icon);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C[disabled]{background-color:var(--input-background-disabled);border-color:var(--input-border-color-disabled);color:var(--input-color-disabled);cursor:not-allowed}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C[readonly]{background-color:transparent;border:0;color:var(--input-color-default);padding:0;-webkit-text-fill-color:var(--input-color-default)}.text-input_hds-text-input__buttons__1RMzT{align-items:center;bottom:0;display:flex;font-size:1rem;justify-content:center;margin-right:calc(var(--spacing-s) - var(--spacing-xs) / 2);position:absolute;right:0;top:0}.text-input_hds-text-input__button__1Fh0I{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;display:flex;font:inherit;outline:none;padding:var(--spacing-xs) calc(var(--spacing-xs) / 2)}.text-input_hds-text-input__button__1Fh0I:focus{outline:var(--outline-width) solid var(--color-focus-outline)}.TextInput-module_root__2CMNr{position:relative}.TextInput-module_input__1BlHi.TextInput-module_hasButton__2KCM1{padding-right:calc(2 * var(--spacing-s) + 1.5rem)}.TextInput-module_button__1ySMX:disabled{cursor:not-allowed}.TextInput-module_button__1ySMX:focus{outline:var(--outline-width) solid var(--color-focus-outline)}");const s=e=>{let{children:t,className:a="",errorText:l,helperText:s,hideLabel:c=!1,id:u,invalid:d=!1,isAriaLabelledBy:p=!1,label:h,labelId:_,onBlur:m,required:b=!1,style:x,successText:v,infoText:f,tooltipLabel:g,tooltipText:E,tooltipButtonLabel:y}=e;return n.createElement("div",{onBlur:m,className:(0,i.c)(o.root,d&&o.invalid,v&&o.success,a),style:x},h&&n.createElement(r.F,{id:_,inputId:u,isAriaLabelledBy:p,hidden:c,label:h,required:b,tooltipLabel:g,tooltipButtonLabel:y,tooltipText:E}),n.createElement("div",{className:(0,i.c)(o.inputWrapper)},t),l&&n.createElement("div",{className:o.errorText,id:u+"-error"},l),v&&n.createElement("div",{className:o.successText,id:u+"-success"},v),f&&n.createElement("div",{className:o.infoText,id:u+"-info"},f),s&&n.createElement("div",{className:o.helperText,id:u+"-helper"},s))}},83428:function(e,t,a){a.d(t,{S:function(){return c}});var n=a(80136),l=a(67294),i=a(7444),r=a(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,i.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const s=e=>{let{icon:t}=e;return l.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:i,type:c="neutral",iconLeft:u}=e,d=(0,n._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(o.statusLabel,o[c],u&&o.statusLabelWithIcon,a),"data-testid":i},d),u&&l.createElement(s,{icon:u}),t)}},24155:function(e,t,a){a.d(t,{T:function(){return s}});var n=a(80136),l=a(67294),i=a(93667),r=a(34300),o=a(37776);const s=l.forwardRef(((e,t)=>{var{className:a="",children:s,disabled:c=!1,defaultValue:u,errorText:d,helperText:p,hideLabel:h,invalid:_,id:m,label:b,onChange:x=(()=>null),required:v,style:f,successText:g,infoText:E,tooltipLabel:y,tooltipText:T,tooltipButtonLabel:w,type:k="text",buttonIcon:L,buttonAriaLabel:C,onButtonClick:z}=e,I=(0,n._)(e,["className","children","disabled","defaultValue","errorText","helperText","hideLabel","invalid","id","label","onChange","required","style","successText","infoText","tooltipLabel","tooltipText","tooltipButtonLabel","type","buttonIcon","buttonAriaLabel","onButtonClick"]);const N={className:a,errorText:d,helperText:p,hideLabel:h,id:m,invalid:_,label:b,required:v,style:f,successText:g,infoText:E,tooltipLabel:y,tooltipText:T,tooltipButtonLabel:w},M=(0,o.c)(m,p,d,g,E),O=Boolean(L&&z);return l.createElement(i.I,Object.assign({},N),l.createElement("input",Object.assign({className:(0,r.c)(i.t.input,O&&i.t.hasButton),defaultValue:u,disabled:c,id:m,onChange:x,ref:t,required:v,type:k,"aria-describedby":M.length>0?M:null},I)),O&&l.createElement("div",{className:i.t.buttonWrapper},l.createElement("button",{className:i.t.button,disabled:c,type:"button",onClick:z,"aria-label":C},L)),s)}))},37776:function(e,t,a){a.d(t,{c:function(){return n}});var n=(e,t,a,n,l)=>[t&&e+"-helper",a&&e+"-error",n&&e+"-success",l&&e+"-info"].filter((e=>e)).join(" ")},9736:function(e,t,a){a.r(t);var n=a(11151),l=a(67294),i=a(24155),r=a(59309);const o=e=>{let{children:t,pageContext:a}=e;return l.createElement(r.default,{pageContext:a},t)};function s(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",strong:"strong",h4:"h4",p:"p"},(0,n.ah)(),e.components),{PlaygroundPreview:a,InternalLink:r}=t;return r||c("InternalLink",!0),a||c("PlaygroundPreview",!0),l.createElement(l.Fragment,null,l.createElement(t.h2,{id:"usage",style:{position:"relative"}},"Usage",l.createElement(t.a,{href:"#usage","aria-label":"usage permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h3,{id:"example",style:{position:"relative"}},"Example",l.createElement(t.a,{href:"#example","aria-label":"example permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a,null,l.createElement(i.T,{id:"textinput",label:"Label",placeholder:"Placeholder",helperText:"Assistive text",required:!0,style:{maxWidth:"320px"}})),"\n",l.createElement(t.h3,{id:"principles",style:{position:"relative"}},"Principles",l.createElement(t.a,{href:"#principles","aria-label":"principles permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,l.createElement(t.strong,null,"A label should always be provided with a text field.")),"\n",l.createElement(t.li,null,"Use a text input when a single line of text is expected. For multiline inputs, use a ",l.createElement(r,{href:"/components/text-area"},"TextArea component.")),"\n",l.createElement(t.li,null,"Allow the text input to reflect the length of the content you expect the user to enter."),"\n",l.createElement(t.li,null,"If possible, add programmatic assistance. Detect and pre-fill inputs to reduce errors and save time. Use sentence-case for default values, detected values, and auto-completion text."),"\n",l.createElement(t.li,null,"If possible, do input validation in client-side real-time and provide the user with immediate feedback. See ",l.createElement(r,{href:"/patterns/forms/form-validation"},"HDS Form validation pattern page")," for more information."),"\n",l.createElement(t.li,null,"If possible, be forgiving of different input formats and small mistakes. It can greatly increase user experience of your product if you can fix common mistakes for the user."),"\n",l.createElement(t.li,null,"To decrease a cognitive load of the user, it is recommended to mark all required fields. Remember to provide explanation of the required field indicator at the top of your form."),"\n"),"\n",l.createElement(t.h3,{id:"variations",style:{position:"relative"}},"Variations",l.createElement(t.a,{href:"#variations","aria-label":"variations permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h4,{id:"default",style:{position:"relative"}},"Default",l.createElement(t.a,{href:"#default","aria-label":"default permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"A text input serves in most use cases when the user needs to enter information. Text input works well for short inputs that fit in one line and are not longer than one sentence."),"\n",l.createElement(a,null,l.createElement(i.T,{id:"textinput-default",label:"Label",placeholder:"Placeholder",helperText:"Assistive text",required:!0,style:{maxWidth:"320px"}})),"\n",l.createElement(t.h4,{id:"read-only",style:{position:"relative"}},"Read-only",l.createElement(t.a,{href:"#read-only","aria-label":"read only permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"Read-only text input is used to indicate an input among other inputs that cannot be edited. This is needed in situations where, for example, the information has been gathered from other source and filled automatically. Read-only fields should not be confused with disabled text fields. Disabled text fields are used when there is an action the user can make to activate the field. Read-only text fields will stay uneditable in the same view."),"\n",l.createElement(a,null,l.createElement(i.T,{id:"textinput-readonly",label:"Label",defaultValue:"Read-only value",helperText:"Assistive text",readOnly:!0,style:{maxWidth:"320px"}})),"\n",l.createElement(t.h4,{id:"with-tooltip",style:{position:"relative"}},"With tooltip",l.createElement(t.a,{href:"#with-tooltip","aria-label":"with tooltip permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"A text input can be provided with additional tooltip. Tooltip information should be considered as extra information, for example, why this information is gathered or how is it used. The user should have sufficient information on how to fill the input field in label and assistive text. You can find more information about Tooltips how they are used from the ",l.createElement(r,{href:"/components/tooltip"},"Tooltip documentation page"),"."),"\n",l.createElement(a,null,l.createElement(i.T,{id:"textinput-tooltip",label:"Label",placeholder:"Placeholder",tooltipLabel:"Tooltip label",tooltipButtonLabel:"Tooltip button label",tooltipText:'Tooltips contain "nice to have" information. Default Tooltip contents should not be longer than two to three sentences. For longer descriptions, provide a link to a separate page.',style:{maxWidth:"320px"}})))}function c(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){return void 0===e&&(e={}),l.createElement(o,e,l.createElement(s,e))}},59309:function(e,t,a){a.r(t);var n=a(11151),l=a(67294),i=a(83428),r=a(57674),o=a(89482),s=(a(18607),a(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,n.ah)(),e.components);return s.Z||u("PageTabs",!1),s.Z.Tab||u("PageTabs.Tab",!0),s.Z.TabList||u("PageTabs.TabList",!0),s.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"textinput",style:{position:"relative"}},"TextInput",l.createElement(t.a,{href:"#textinput","aria-label":"textinput permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(i.S,{type:"info"},"Stable"),l.createElement(i.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(o.Z,null,"A text field is an input field that the user can interact with and input content and data. The user can also be provided with helper text if needed. Text inputs are used for shorter information while Text areas can be used for multiline answers."),"\n",l.createElement(s.Z,{pageContext:e.pageContext},l.createElement(s.Z.TabList,null,l.createElement(s.Z.Tab,{href:"/"},"Usage"),l.createElement(s.Z.Tab,{href:"/code"},"Code"),l.createElement(s.Z.Tab,{href:"/accessibility"},"Accessibility")),l.createElement(s.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,n.ah)(),e.components);return t?l.createElement(t,e,l.createElement(c,e)):c(e)}},89482:function(e,t,a){var n=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:l={},children:i}=e;return n.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...l}},i)}},26127:function(e,t,a){var n=a(67294),l=a(14160),i=a(94671);const r="PageTabList",o="PageTabPanel",s="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const u=a.frontmatter.slug,d=Array.isArray(c)?c:[c],p=d.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===r)),h=d.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===o)),_=null===(t=p.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===s)),m=_.findIndex((e=>u.endsWith(e.props.href))),b=-1===m?0:m,x=0===b?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return n.createElement(i.a,{initiallyActiveTab:b},n.createElement(i.a.TabList,{className:"page-tabs-list"},_.map((e=>n.createElement(i.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?x:x+e.props.href))},e.props.children)))),_.map(((e,t)=>n.createElement(i.a.TabPanel,{key:e.props.href},b===t?h.props.children:n.createElement("div",null)))))},u=e=>{let{children:t}=e;return n.createElement(i.a.TabList,null,t)};u.componentName=r;const d=e=>{let{href:t,slug:a,children:l}=e;return n.createElement(i.a.Tab,null,l)};d.componentName=s;const p=e=>{let{children:t}=e;return n.createElement(i.a.TabPanel,null,t)};p.componentName=o,c.TabList=u,c.Tab=d,c.TabPanel=p,t.Z=c},57674:function(e,t,a){var n=a(67294),l=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return n.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},n.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>n.createElement("li",{key:t},n.createElement("span",{className:"status-name"},t),n.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-text-input-tabs-mdx-11983b3b3153be014b29.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-text-input-tabs-mdx-11983b3b3153be014b29.js
new file mode 100644
index 00000000000..1c99975eed6
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-text-input-tabs-mdx-11983b3b3153be014b29.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[3424],{83428:function(e,t,a){a.d(t,{S:function(){return o}});var s=a(80136),l=a(67294),n=a(7444),r=a(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const c=e=>{let{icon:t}=e;return l.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},t)},o=e=>{var{children:t,className:a,dataTestId:n,type:o="neutral",iconLeft:u}=e,b=(0,s._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(i.statusLabel,i[o],u&&i.statusLabelWithIcon,a),"data-testid":n},b),u&&l.createElement(c,{icon:u}),t)}},59309:function(e,t,a){a.r(t);var s=a(11151),l=a(67294),n=a(83428),r=a(57674),i=a(89482),c=(a(18607),a(26127));function o(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,s.ah)(),e.components);return c.Z||u("PageTabs",!1),c.Z.Tab||u("PageTabs.Tab",!0),c.Z.TabList||u("PageTabs.TabList",!0),c.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"textinput",style:{position:"relative"}},"TextInput",l.createElement(t.a,{href:"#textinput","aria-label":"textinput permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(n.S,{type:"info"},"Stable"),l.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(i.Z,null,"A text field is an input field that the user can interact with and input content and data. The user can also be provided with helper text if needed. Text inputs are used for shorter information while Text areas can be used for multiline answers."),"\n",l.createElement(c.Z,{pageContext:e.pageContext},l.createElement(c.Z.TabList,null,l.createElement(c.Z.Tab,{href:"/"},"Usage"),l.createElement(c.Z.Tab,{href:"/code"},"Code"),l.createElement(c.Z.Tab,{href:"/accessibility"},"Accessibility")),l.createElement(c.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,s.ah)(),e.components);return t?l.createElement(t,e,l.createElement(o,e)):o(e)}},89482:function(e,t,a){var s=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:l={},children:n}=e;return s.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...l}},n)}},26127:function(e,t,a){var s=a(67294),l=a(14160),n=a(94671);const r="PageTabList",i="PageTabPanel",c="PageTab",o=e=>{var t;let{pageContext:a,children:o}=e;const u=a.frontmatter.slug,b=Array.isArray(o)?o:[o],d=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===r)),h=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===i)),m=null===(t=d.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===c)),p=m.findIndex((e=>u.endsWith(e.props.href))),_=-1===p?0:p,f=0===_?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return s.createElement(n.a,{initiallyActiveTab:_},s.createElement(n.a.TabList,{className:"page-tabs-list"},m.map((e=>s.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),m.map(((e,t)=>s.createElement(n.a.TabPanel,{key:e.props.href},_===t?h.props.children:s.createElement("div",null)))))},u=e=>{let{children:t}=e;return s.createElement(n.a.TabList,null,t)};u.componentName=r;const b=e=>{let{href:t,slug:a,children:l}=e;return s.createElement(n.a.Tab,null,l)};b.componentName=c;const d=e=>{let{children:t}=e;return s.createElement(n.a.TabPanel,null,t)};d.componentName=i,o.TabList=u,o.Tab=b,o.TabPanel=d,t.Z=o},57674:function(e,t,a){var s=a(67294),l=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return s.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},s.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>s.createElement("li",{key:t},s.createElement("span",{className:"status-name"},t),s.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-time-input-accessibility-mdx-0f511b6045e1df9fb7d5.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-time-input-accessibility-mdx-0f511b6045e1df9fb7d5.js
new file mode 100644
index 00000000000..09787bd59f1
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-time-input-accessibility-mdx-0f511b6045e1df9fb7d5.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[9274,4740],{83428:function(e,t,a){a.d(t,{S:function(){return o}});var l=a(80136),s=a(67294),n=a(7444),r=a(34300),i={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const c=e=>{let{icon:t}=e;return s.createElement("span",{className:i.statusLabelIcon,"aria-hidden":"true"},t)},o=e=>{var{children:t,className:a,dataTestId:n,type:o="neutral",iconLeft:u}=e,d=(0,l._)(e,["children","className","dataTestId","type","iconLeft"]);return s.createElement("span",Object.assign({className:(0,r.c)(i.statusLabel,i[o],u&&i.statusLabelWithIcon,a),"data-testid":n},d),u&&s.createElement(c,{icon:u}),t)}},65778:function(e,t,a){a.r(t);var l=a(11151),s=a(67294),n=a(5627);const r=e=>{let{children:t,pageContext:a}=e;return s.createElement(n.default,{pageContext:a},t)};function i(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",strong:"strong",code:"code"},(0,l.ah)(),e.components);return s.createElement(s.Fragment,null,s.createElement(t.h2,{id:"accessibility",style:{position:"relative"}},"Accessibility",s.createElement(t.a,{href:"#accessibility","aria-label":"accessibility permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.h3,{id:"pay-attention-to",style:{position:"relative"}},"Pay attention to",s.createElement(t.a,{href:"#pay-attention-to","aria-label":"pay attention to permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.ul,null,"\n",s.createElement(t.li,null,s.createElement(t.strong,null,"Note! ",s.createElement(t.code,null,"hoursLabel")," and ",s.createElement(t.code,null,"minutesLabel")," are required properties.")," They improve component navigation for screen reader users."),"\n",s.createElement(t.li,null,"HDS time input allows the user to input the date manually. Whenever you require the user to input times, you should also allow the manual input."),"\n",s.createElement(t.li,null,"Be wary of automatically correcting input for the user. If this is done, the user (especially with screen readers) needs to be clearly notified about the change."),"\n"))}t.default=function(e){return void 0===e&&(e={}),s.createElement(r,e,s.createElement(i,e))}},5627:function(e,t,a){a.r(t);var l=a(11151),s=a(67294),n=a(83428),r=a(57674),i=a(89482),c=(a(18607),a(26127));function o(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,l.ah)(),e.components);return c.Z||u("PageTabs",!1),c.Z.Tab||u("PageTabs.Tab",!0),c.Z.TabList||u("PageTabs.TabList",!0),c.Z.TabPanel||u("PageTabs.TabPanel",!0),s.createElement(s.Fragment,null,s.createElement(t.h1,{id:"timeinput",style:{position:"relative"}},"TimeInput",s.createElement(t.a,{href:"#timeinput","aria-label":"timeinput permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement("div",{class:"status-label-description"},s.createElement(n.S,{type:"info"},"Stable"),s.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),s.createElement(r.Z)),"\n",s.createElement(i.Z,null,"  A time input helps the user select a specific time."),"\n",s.createElement(c.Z,{pageContext:e.pageContext},s.createElement(c.Z.TabList,null,s.createElement(c.Z.Tab,{href:"/"},"Usage"),s.createElement(c.Z.Tab,{href:"/code"},"Code"),s.createElement(c.Z.Tab,{href:"/accessibility"},"Accessibility")),s.createElement(c.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,l.ah)(),e.components);return t?s.createElement(t,e,s.createElement(o,e)):o(e)}},89482:function(e,t,a){var l=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:s={},children:n}=e;return l.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...s}},n)}},26127:function(e,t,a){var l=a(67294),s=a(14160),n=a(94671);const r="PageTabList",i="PageTabPanel",c="PageTab",o=e=>{var t;let{pageContext:a,children:o}=e;const u=a.frontmatter.slug,d=Array.isArray(o)?o:[o],b=d.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===r)),m=d.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===i)),h=null===(t=b.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===c)),p=h.findIndex((e=>u.endsWith(e.props.href))),_=-1===p?0:p,f=0===_?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return l.createElement(n.a,{initiallyActiveTab:_},l.createElement(n.a.TabList,{className:"page-tabs-list"},h.map((e=>l.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,s.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),h.map(((e,t)=>l.createElement(n.a.TabPanel,{key:e.props.href},_===t?m.props.children:l.createElement("div",null)))))},u=e=>{let{children:t}=e;return l.createElement(n.a.TabList,null,t)};u.componentName=r;const d=e=>{let{href:t,slug:a,children:s}=e;return l.createElement(n.a.Tab,null,s)};d.componentName=c;const b=e=>{let{children:t}=e;return l.createElement(n.a.TabPanel,null,t)};b.componentName=i,o.TabList=u,o.Tab=d,o.TabPanel=b,t.Z=o},57674:function(e,t,a){var l=a(67294),s=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return l.createElement(s.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},l.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>l.createElement("li",{key:t},l.createElement("span",{className:"status-name"},t),l.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-time-input-code-mdx-33b0f9ccf83f665a60fa.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-time-input-code-mdx-33b0f9ccf83f665a60fa.js
new file mode 100644
index 00000000000..b77115d796a
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-time-input-code-mdx-33b0f9ccf83f665a60fa.js
@@ -0,0 +1 @@
+(self.webpackChunksite=self.webpackChunksite||[]).push([[9418],{91309:function(e,t,n){var l="[object Null]",r="[object Undefined]",a="object"==typeof n.g&&n.g&&n.g.Object===Object&&n.g,i="object"==typeof self&&self&&self.Object===Object&&self,o=a||i||Function("return this")(),s=Object.prototype,c=s.hasOwnProperty,u=s.toString,p=o.Symbol,d=p?p.toStringTag:void 0;function m(e){return null==e?void 0===e?r:l:d&&d in Object(e)?function(e){var t=c.call(e,d),n=e[d];try{e[d]=void 0;var l=!0}catch(a){}var r=u.call(e);l&&(t?e[d]=n:delete e[d]);return r}(e):function(e){return u.call(e)}(e)}e.exports=function(e){if(!function(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}(e))return!1;var t=m(e);return"[object Function]"==t||"[object GeneratorFunction]"==t||"[object AsyncFunction]"==t||"[object Proxy]"==t}},93667:function(e,t,n){"use strict";n.d(t,{I:function(){return s},t:function(){return o}});var l=n(67294),r=n(7444),a=n(34300),i=n(41125),o={root:"TextInput-module_root__2CMNr text-input_hds-text-input__2LODq",inputWrapper:"TextInput-module_inputWrapper__3Rvel text-input_hds-text-input__input-wrapper__1OqYG",input:"TextInput-module_input__1BlHi text-input_hds-text-input__input__GJm5C",hasButton:"TextInput-module_hasButton__2KCM1",errorText:"TextInput-module_errorText__3pizm text-input_hds-text-input__error-text__1GLYk",helperText:"TextInput-module_helperText__2dLR6 text-input_hds-text-input__helper-text__3V2KM",invalidText:"TextInput-module_invalidText__1w4sm text-input_hds-text-input__helper-text__3V2KM",successText:"TextInput-module_successText__2NMCP text-input_hds-text-input__success-text__3EOiy",infoText:"TextInput-module_infoText__zHOGs text-input_hds-text-input__info-text__3bqzy",invalid:"TextInput-module_invalid__2iYo2 text-input_hds-text-input--invalid__1UfKC",success:"TextInput-module_success__1kDOm text-input_hds-text-input--success__3dm2J",readOnly:"TextInput-module_readOnly__j615N undefined",buttonWrapper:"TextInput-module_buttonWrapper___filA text-input_hds-text-input__buttons__1RMzT",button:"TextInput-module_button__1ySMX text-input_hds-text-input__button__1Fh0I"};(0,r.s)("@keyframes text-input_fadeIn__2IDZ8{0%{opacity:0}to{opacity:1}}.text-input_hds-text-input__2LODq{--border-width:2px;--outline-width:3px;--input-height:56px;--textarea-height:149px;--icon-size:var(--spacing-m);--helper-color-default:var(--color-black-60);--helper-color-invalid:var(--color-error);--helper-color-success:var(--color-success);--helper-color-info:var(--color-black-90);--helper-color-info-icon:var(--color-coat-of-arms);--icon-color-invalid:var(--color-error);--input-background-default:var(--color-white);--input-background-disabled:var(--color-black-10);--input-border-color-default:var(--color-black-50);--input-border-color-hover:var(--color-black-90);--input-border-color-focus:var(--color-black-90);--input-border-color-invalid:var(--color-error);--input-border-color-disabled:var(--color-black-10);--input-border-color-success:var(--color-success);--input-color-default:var(--color-black-90);--input-color-disabled:var(--color-black-40);--label-color-default:var(--color-black-90);--label-color-invalid:var(--color-black-90);--placeholder-color:var(--color-black-60)}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C{-webkit-appearance:none;background-color:var(--input-background-default);border:var(--border-width) solid var(--input-border-color-default);border-radius:0;box-sizing:border-box;color:var(--input-color-default);font-family:inherit;font-size:1.125em;height:var(--input-height);line-height:normal;margin:0;padding:0 var(--spacing-s);width:100%;will-change:transform,box-shadow}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C:hover{border-color:var(--input-border-color-hover);transition:border-color 85ms ease-out}.text-input_hds-text-input__input-wrapper__1OqYG:focus-within .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-focus);outline:none}.text-input_hds-text-input__2LODq.text-input_hds-text-input--invalid__1UfKC .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-invalid)}.text-input_hds-text-input__2LODq.text-input_hds-text-input--success__3dm2J .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-success)}.text-input_hds-text-input__input-wrapper__1OqYG:focus-within .text-input_hds-text-input__input__GJm5C:not([readonly]){box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);transform:translateZ(0);transition:85ms ease-out;transition-property:box-shadow,transform}.text-input_hds-text-input__label__15F2V{color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.text-input_hds-text-input--invalid__1UfKC .text-input_hds-text-input__label__15F2V{color:var(--label-color-invalid);transition:color 85ms linear}.text-input_hds-text-input__required__z3Hm0{color:var(--color-black-90);display:inline-block;font-size:var(--fontsize-body-xl);line-height:1;margin-left:var(--spacing-2-xs);transform:translateY(var(--spacing-3-xs))}.text-input_hds-text-input__input-wrapper__1OqYG{display:flex;position:relative}.text-input_hds-text-input__2LODq textarea.text-input_hds-text-input__input__GJm5C{font-family:inherit;height:var(--textarea-height);margin:0;min-height:var(--input-height);overflow:auto;padding:var(--spacing-s);resize:vertical}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C::-moz-placeholder{color:var(--placeholder-color);opacity:1}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C::placeholder{color:var(--placeholder-color);opacity:1}.text-input_hds-text-input__helper-text__3V2KM{color:var(--helper-color-default)}.text-input_hds-text-input__error-text__1GLYk,.text-input_hds-text-input__helper-text__3V2KM{display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);white-space:pre-line}.text-input_hds-text-input__error-text__1GLYk{color:var(--helper-color-invalid);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.text-input_hds-text-input__error-text__1GLYk:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__error-text__1GLYk:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--icon-color-invalid);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__success-text__3EOiy{color:var(--helper-color-success);display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative;white-space:pre-wrap}.text-input_hds-text-input__success-text__3EOiy:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__success-text__3EOiy:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--helper-color-success);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__info-text__3bqzy{color:var(--helper-color-info);display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.text-input_hds-text-input__info-text__3bqzy:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__info-text__3bqzy:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--helper-color-info-icon);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C[disabled]{background-color:var(--input-background-disabled);border-color:var(--input-border-color-disabled);color:var(--input-color-disabled);cursor:not-allowed}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C[readonly]{background-color:transparent;border:0;color:var(--input-color-default);padding:0;-webkit-text-fill-color:var(--input-color-default)}.text-input_hds-text-input__buttons__1RMzT{align-items:center;bottom:0;display:flex;font-size:1rem;justify-content:center;margin-right:calc(var(--spacing-s) - var(--spacing-xs) / 2);position:absolute;right:0;top:0}.text-input_hds-text-input__button__1Fh0I{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;display:flex;font:inherit;outline:none;padding:var(--spacing-xs) calc(var(--spacing-xs) / 2)}.text-input_hds-text-input__button__1Fh0I:focus{outline:var(--outline-width) solid var(--color-focus-outline)}.TextInput-module_root__2CMNr{position:relative}.TextInput-module_input__1BlHi.TextInput-module_hasButton__2KCM1{padding-right:calc(2 * var(--spacing-s) + 1.5rem)}.TextInput-module_button__1ySMX:disabled{cursor:not-allowed}.TextInput-module_button__1ySMX:focus{outline:var(--outline-width) solid var(--color-focus-outline)}");const s=e=>{let{children:t,className:n="",errorText:r,helperText:s,hideLabel:c=!1,id:u,invalid:p=!1,isAriaLabelledBy:d=!1,label:m,labelId:h,onBlur:_,required:b=!1,style:x,successText:v,infoText:f,tooltipLabel:g,tooltipText:E,tooltipButtonLabel:y}=e;return l.createElement("div",{onBlur:_,className:(0,a.c)(o.root,p&&o.invalid,v&&o.success,n),style:x},m&&l.createElement(i.F,{id:h,inputId:u,isAriaLabelledBy:d,hidden:c,label:m,required:b,tooltipLabel:g,tooltipButtonLabel:y,tooltipText:E}),l.createElement("div",{className:(0,a.c)(o.inputWrapper)},t),r&&l.createElement("div",{className:o.errorText,id:u+"-error"},r),v&&l.createElement("div",{className:o.successText,id:u+"-success"},v),f&&l.createElement("div",{className:o.infoText,id:u+"-info"},f),s&&l.createElement("div",{className:o.helperText,id:u+"-helper"},s))}},59096:function(e,t,n){"use strict";n.d(t,{T:function(){return b}});var l=n(80136),r=n(67294),a=n(93667),i=n(7444),o=n(34300),s=n(37776),c=n(94330),u="TimeInput-module_partialInput__1wN8K",p="TimeInput-module_partialInputLabel__30tUk";(0,i.s)(".TimeInput-module_fullInput__w1g3j,.TimeInput-module_partialInput__1wN8K{font-family:inherit;font-size:100%;line-height:1.15;margin:0}.TimeInput-module_partialInputLabel__30tUk{border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.TimeInput-module_timeInputFrame__gax8Y{align-items:center;display:inline-flex;padding:0 calc(var(--spacing-s) - 3px)}.TimeInput-module_timeInputFrame__gax8Y.TimeInput-module_disabled__23DEW{background-color:var(--input-background-disabled);border-color:var(--input-border-color-disabled);color:var(--input-color-disabled);cursor:not-allowed}.TimeInput-module_timeInputFrame__gax8Y.TimeInput-module_disabled__23DEW:hover{border-color:var(--input-border-color-disabled)}.TimeInput-module_fullInput__w1g3j{height:0;opacity:0;overflow:hidden;pointer-events:none;position:absolute;width:0}.TimeInput-module_divider__7JLmX,.TimeInput-module_partialInput__1wN8K{appearance:none;background:transparent;border:0;box-sizing:border-box;color:var(--input-color-default);font-size:1.125rem;line-height:normal;padding:0}.TimeInput-module_partialInput__1wN8K{overflow:visible;padding:0;text-align:center;width:1.4rem;will-change:transform,box-shadow}.TimeInput-module_partialInput__1wN8K:focus{box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);outline:none;transform:translateZ(0)}.TimeInput-module_partialInput__1wN8K:focus::placeholder{opacity:0}.TimeInput-module_divider__7JLmX{display:inline-block;margin:0 5px;pointer-events:none;width:auto}.TimeInput-module_input__1KAUR.TimeInput-module_disabled__23DEW .TimeInput-module_divider__7JLmX,.TimeInput-module_input__1KAUR.TimeInput-module_disabled__23DEW .TimeInput-module_partialInput__1wN8K{background-color:var(--input-background-disabled);border-color:var(--input-border-color-disabled);color:var(--input-color-disabled);cursor:not-allowed}");const d="0,1,2,3,4,5,6,7,8,9".split(","),m=e=>1===e.length?"0"+e:e,h=(e,t,n,l)=>Math.max(Math.min(n+l,t),e),_=e=>null!==e.match(/^(\d{1,2})?$/),b=r.forwardRef(((e,t)=>{var{className:n="",disabled:i=!1,defaultValue:b,value:x,errorText:v,helperText:f,hideLabel:g,invalid:E,id:y,label:T,hoursLabel:w,minutesLabel:I,onChange:k=(()=>null),required:C,style:L,successText:z,infoText:N,tooltipLabel:D,tooltipText:O,tooltipButtonLabel:M,type:S="text"}=e,j=(0,l._)(e,["className","disabled","defaultValue","value","errorText","helperText","hideLabel","invalid","id","label","hoursLabel","minutesLabel","onChange","required","style","successText","infoText","tooltipLabel","tooltipText","tooltipButtonLabel","type"]);b&&x&&console.warn("Use either defaultValue (for uncontrolled components) or value (for controlled components) in HDS TimeInput component.");const q=(e=>{const t=""+e;return e&&t.length>0&&t.match(/^\d{2}:\d{2}$/)?t.split(":"):null})(b||x),A=(0,r.useRef)(null),H=(0,r.useRef)(null),K=(0,r.useRef)(null),[B,G]=(0,r.useState)(q?q[0]:""),[F,Z]=(0,r.useState)(q?q[1]:""),[J,P]=(0,r.useState)(q?q.join(":"):""),V={className:n,errorText:v,helperText:f,hideLabel:g,id:y,invalid:E,label:T,required:C,style:L,successText:z,infoText:N,tooltipLabel:D,tooltipText:O,tooltipButtonLabel:M},Y=(e,t)=>{G(e),Z(t);const n=0===e.length&&0===t.length?"":e+":"+t;P(n),Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value").set.call(A.current,n);const l=new Event("input",{bubbles:!0});A.current.dispatchEvent(l)};(0,r.useEffect)((()=>{t&&(0,c.m)(t,A)}),[A,t]);const U=e=>{e.preventDefault(),e.target.select()},R=(0,s.c)(y,f,v,z,N),W={className:(0,o.c)(a.t.input,"TimeInput-module_timeInputFrame__gax8Y",i&&"TimeInput-module_disabled__23DEW"),onClick:e=>{e.target!==H.current&&e.target!==K.current&&H.current.focus()}},X=y+"-hours",$=y+"-minutes",Q=y+"-label";return r.createElement(a.I,Object.assign({},V,{id:y,labelId:Q,isAriaLabelledBy:!0}),r.createElement("div",Object.assign({},W,{role:"group","aria-labelledby":Q}),r.createElement("input",Object.assign({"aria-hidden":!0,readOnly:!0,className:"TimeInput-module_fullInput__w1g3j",disabled:i,id:y,onChange:k,ref:A,required:C,type:S,tabIndex:-1,value:J},j)),r.createElement("label",{htmlFor:X,className:p},w),r.createElement("input",{className:u,type:"text",disabled:i,id:X,ref:H,value:B,inputMode:"numeric",onChange:e=>{const t=e.target.value.slice(-2);return _(t)?(Y(t,F),!0):(e.preventDefault(),!1)},onKeyDown:e=>{if("ArrowRight"!==e.key||e.shiftKey||(e.preventDefault(),K.current.focus()),["ArrowUp","ArrowDown"].includes(e.key)&&!e.shiftKey){e.preventDefault();const t="ArrowUp"===e.key?1:-1,n=parseInt(B,10)||0,l=m(""+h(0,23,n,t));Y(l,F)}},onKeyUp:e=>{2===e.currentTarget.value.length&&"00"!==e.currentTarget.value&&d.includes(e.key)&&K.current.focus()},onFocus:U,onBlur:()=>{B.length>0&&Y(m(B),F)},"aria-describedby":R.length>0?R:void 0,placeholder:"--"}),r.createElement("div",{className:"TimeInput-module_divider__7JLmX"},":"),r.createElement("label",{htmlFor:$,className:p},I),r.createElement("input",{className:u,type:"text",disabled:i,id:$,ref:K,value:F,inputMode:"numeric",onChange:e=>{const t=e.target.value.slice(-2);return _(t)?(Y(B,t),!0):(e.preventDefault(),!1)},onKeyDown:e=>{if("ArrowLeft"!==e.key||e.shiftKey||(e.preventDefault(),H.current.focus()),["ArrowUp","ArrowDown"].includes(e.key)&&!e.shiftKey){e.preventDefault();const t="ArrowUp"===e.key?1:-1,n=parseInt(F,10)||0,l=m(""+h(0,59,n,t));Y(B,l)}},onFocus:U,onBlur:()=>{F.length>0&&Y(B,m(F))},"aria-describedby":R.length>0?R:void 0,placeholder:"--"})))}))},37776:function(e,t,n){"use strict";n.d(t,{c:function(){return l}});var l=(e,t,n,l,r)=>[t&&e+"-helper",n&&e+"-error",l&&e+"-success",r&&e+"-info"].filter((e=>e)).join(" ")},94330:function(e,t,n){"use strict";n.d(t,{m:function(){return a}});var l=n(91309),r=n.n(l),a=(e,t)=>{r()(e)?e(t.current):e.current=t.current}},99983:function(e,t,n){"use strict";n.r(t);var l=n(11151),r=n(67294),a=n(59096),i=n(74458),o=n(5627);const s=e=>{let{children:t,pageContext:n}=e;return r.createElement(o.default,{pageContext:n},t)};function c(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",h4:"h4",pre:"pre",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",strong:"strong",p:"p"},(0,l.ah)(),e.components),{Playground:n,IconCheckCircleFill:o,Link:s,ExternalLink:c,IconCrossCircle:p,InternalLink:d}=t;return c||u("ExternalLink",!0),o||u("IconCheckCircleFill",!0),p||u("IconCrossCircle",!0),d||u("InternalLink",!0),s||u("Link",!0),n||u("Playground",!0),r.createElement(r.Fragment,null,r.createElement(t.h2,{id:"code",style:{position:"relative"}},"Code",r.createElement(t.a,{href:"#code","aria-label":"code permalink",className:"header-anchor after"},r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",r.createElement(t.h3,{id:"code-examples",style:{position:"relative"}},"Code examples",r.createElement(t.a,{href:"#code-examples","aria-label":"code examples permalink",className:"header-anchor after"},r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",r.createElement(t.h4,{id:"default",style:{position:"relative"}},"Default",r.createElement(t.a,{href:"#default","aria-label":"default permalink",className:"header-anchor after"},r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",r.createElement(n,{scope:{TimeInput:a.T}},r.createElement(t.pre,null,r.createElement(t.code,{className:"language-jsx"},'import { TimeInput } from \'hds-react\';\n\n() => (\n  <TimeInput\n    id="timeinput"\n    label="Label"\n    hoursLabel="hours"\n    minutesLabel="minutes"\n    helperText="Assistive text"\n    defaultValue="12:00"\n    required\n    style={{ maxWidth: \'320px\' }}\n  />\n)\n'))),"\n",r.createElement(t.h4,{id:"using-hds-select-for-times",style:{position:"relative"}},"Using HDS Select for times",r.createElement(t.a,{href:"#using-hds-select-for-times","aria-label":"using hds select for times permalink",className:"header-anchor after"},r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",r.createElement(n,{scope:{Select:i.b}},r.createElement(t.pre,null,r.createElement(t.code,{className:"language-jsx"},"import { Select } from 'hds-react';\n\n() => (\n  <Select\n    id=\"timeinput-select\"\n    required\n    label=\"Label\"\n    placeholder=\"Placeholder\"\n    helper=\"Assistive text\"\n    options={[\n      { label: '12:00' },\n      { label: '14:00' },\n      { label: '16:00' },\n      { label: '18:00' },\n    ]}\n    style={{ maxWidth: '320px' }}\n  />\n)\n"))),"\n",r.createElement(t.h3,{id:"packages",style:{position:"relative"}},"Packages",r.createElement(t.a,{href:"#packages","aria-label":"packages permalink",className:"header-anchor after"},r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",r.createElement(t.table,null,r.createElement(t.thead,null,r.createElement(t.tr,null,r.createElement(t.th,null,"Package"),r.createElement(t.th,null,"Included"),r.createElement(t.th,null,"Storybook link"),r.createElement(t.th,null,"Source link"))),r.createElement(t.tbody,null,r.createElement(t.tr,null,r.createElement(t.td,null,r.createElement(t.strong,null,"HDS React")),r.createElement(t.td,null,r.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},r.createElement(o)," Yes ")),r.createElement(t.td,null,r.createElement(s,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-timeinput--default"},"View in Storybook")),r.createElement(t.td,null,r.createElement(c,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/react/src/components/timeInput"},"View source"))),r.createElement(t.tr,null,r.createElement(t.td,null,r.createElement(t.strong,null,"HDS Core")),r.createElement(t.td,null,r.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},r.createElement(p)," No ")),r.createElement(t.td,null,"-"),r.createElement(t.td,null,"-")))),"\n",r.createElement(t.h3,{id:"properties",style:{position:"relative"}},"Properties",r.createElement(t.a,{href:"#properties","aria-label":"properties permalink",className:"header-anchor after"},r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",r.createElement(t.p,null,"Note! You can find the full list of properties in the ",r.createElement(s,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/docs/components-timeinput--default"},"React Storybook.")),"\n",r.createElement(t.p,null,"Also, note that this component is an input. All features supported by the HDS TextInput are also supported by this component. See ",r.createElement(d,{href:"/components/text-input"},"TextInput documentation page")," for more information."),"\n",r.createElement(t.table,null,r.createElement(t.thead,null,r.createElement(t.tr,null,r.createElement(t.th,null,"Property"),r.createElement(t.th,null,"Description"),r.createElement(t.th,null,"Values"),r.createElement(t.th,null,"Default value"))),r.createElement(t.tbody,null,r.createElement(t.tr,null,r.createElement(t.td,null,r.createElement(t.code,null,"label")),r.createElement(t.td,null,"The label for the input."),r.createElement(t.td,null,r.createElement(t.code,null,"ReactNode")),r.createElement(t.td,null,"-")),r.createElement(t.tr,null,r.createElement(t.td,null,r.createElement(t.code,null,"hoursLabel")),r.createElement(t.td,null,"A visually hidden label for the hours. Helps to navigate the component with screen readers."),r.createElement(t.td,null,r.createElement(t.code,null,"string")),r.createElement(t.td,null,"-")),r.createElement(t.tr,null,r.createElement(t.td,null,r.createElement(t.code,null,"minutesLabel")),r.createElement(t.td,null,"A visually hidden label for the minutes. Helps to navigate the component with screen readers."),r.createElement(t.td,null,r.createElement(t.code,null,"string")),r.createElement(t.td,null,"-")),r.createElement(t.tr,null,r.createElement(t.td,null,"[Table 1:TimeInput properties]"),r.createElement(t.td),r.createElement(t.td),r.createElement(t.td)))))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){return void 0===e&&(e={}),r.createElement(s,e,r.createElement(c,e))}},5627:function(e,t,n){"use strict";n.r(t);var l=n(11151),r=n(67294),a=n(83428),i=n(57674),o=n(89482),s=(n(18607),n(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,l.ah)(),e.components);return s.Z||u("PageTabs",!1),s.Z.Tab||u("PageTabs.Tab",!0),s.Z.TabList||u("PageTabs.TabList",!0),s.Z.TabPanel||u("PageTabs.TabPanel",!0),r.createElement(r.Fragment,null,r.createElement(t.h1,{id:"timeinput",style:{position:"relative"}},"TimeInput",r.createElement(t.a,{href:"#timeinput","aria-label":"timeinput permalink",className:"header-anchor after"},r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",r.createElement("div",{class:"status-label-description"},r.createElement(a.S,{type:"info"},"Stable"),r.createElement(a.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),r.createElement(i.Z)),"\n",r.createElement(o.Z,null,"  A time input helps the user select a specific time."),"\n",r.createElement(s.Z,{pageContext:e.pageContext},r.createElement(s.Z.TabList,null,r.createElement(s.Z.Tab,{href:"/"},"Usage"),r.createElement(s.Z.Tab,{href:"/code"},"Code"),r.createElement(s.Z.Tab,{href:"/accessibility"},"Accessibility")),r.createElement(s.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,l.ah)(),e.components);return t?r.createElement(t,e,r.createElement(c,e)):c(e)}},57674:function(e,t,n){"use strict";var l=n(67294),r=n(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return l.createElement(r.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},l.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>l.createElement("li",{key:t},l.createElement("span",{className:"status-name"},t),l.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-time-input-index-mdx-206b1227bcd550ed3586.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-time-input-index-mdx-206b1227bcd550ed3586.js
new file mode 100644
index 00000000000..76868364937
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-time-input-index-mdx-206b1227bcd550ed3586.js
@@ -0,0 +1 @@
+(self.webpackChunksite=self.webpackChunksite||[]).push([[8362],{91309:function(e,t,n){var i="[object Null]",a="[object Undefined]",r="object"==typeof n.g&&n.g&&n.g.Object===Object&&n.g,l="object"==typeof self&&self&&self.Object===Object&&self,o=r||l||Function("return this")(),s=Object.prototype,u=s.hasOwnProperty,c=s.toString,p=o.Symbol,d=p?p.toStringTag:void 0;function h(e){return null==e?void 0===e?a:i:d&&d in Object(e)?function(e){var t=u.call(e,d),n=e[d];try{e[d]=void 0;var i=!0}catch(r){}var a=c.call(e);i&&(t?e[d]=n:delete e[d]);return a}(e):function(e){return c.call(e)}(e)}e.exports=function(e){if(!function(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}(e))return!1;var t=h(e);return"[object Function]"==t||"[object GeneratorFunction]"==t||"[object AsyncFunction]"==t||"[object Proxy]"==t}},93667:function(e,t,n){"use strict";n.d(t,{I:function(){return s},t:function(){return o}});var i=n(67294),a=n(7444),r=n(34300),l=n(41125),o={root:"TextInput-module_root__2CMNr text-input_hds-text-input__2LODq",inputWrapper:"TextInput-module_inputWrapper__3Rvel text-input_hds-text-input__input-wrapper__1OqYG",input:"TextInput-module_input__1BlHi text-input_hds-text-input__input__GJm5C",hasButton:"TextInput-module_hasButton__2KCM1",errorText:"TextInput-module_errorText__3pizm text-input_hds-text-input__error-text__1GLYk",helperText:"TextInput-module_helperText__2dLR6 text-input_hds-text-input__helper-text__3V2KM",invalidText:"TextInput-module_invalidText__1w4sm text-input_hds-text-input__helper-text__3V2KM",successText:"TextInput-module_successText__2NMCP text-input_hds-text-input__success-text__3EOiy",infoText:"TextInput-module_infoText__zHOGs text-input_hds-text-input__info-text__3bqzy",invalid:"TextInput-module_invalid__2iYo2 text-input_hds-text-input--invalid__1UfKC",success:"TextInput-module_success__1kDOm text-input_hds-text-input--success__3dm2J",readOnly:"TextInput-module_readOnly__j615N undefined",buttonWrapper:"TextInput-module_buttonWrapper___filA text-input_hds-text-input__buttons__1RMzT",button:"TextInput-module_button__1ySMX text-input_hds-text-input__button__1Fh0I"};(0,a.s)("@keyframes text-input_fadeIn__2IDZ8{0%{opacity:0}to{opacity:1}}.text-input_hds-text-input__2LODq{--border-width:2px;--outline-width:3px;--input-height:56px;--textarea-height:149px;--icon-size:var(--spacing-m);--helper-color-default:var(--color-black-60);--helper-color-invalid:var(--color-error);--helper-color-success:var(--color-success);--helper-color-info:var(--color-black-90);--helper-color-info-icon:var(--color-coat-of-arms);--icon-color-invalid:var(--color-error);--input-background-default:var(--color-white);--input-background-disabled:var(--color-black-10);--input-border-color-default:var(--color-black-50);--input-border-color-hover:var(--color-black-90);--input-border-color-focus:var(--color-black-90);--input-border-color-invalid:var(--color-error);--input-border-color-disabled:var(--color-black-10);--input-border-color-success:var(--color-success);--input-color-default:var(--color-black-90);--input-color-disabled:var(--color-black-40);--label-color-default:var(--color-black-90);--label-color-invalid:var(--color-black-90);--placeholder-color:var(--color-black-60)}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C{-webkit-appearance:none;background-color:var(--input-background-default);border:var(--border-width) solid var(--input-border-color-default);border-radius:0;box-sizing:border-box;color:var(--input-color-default);font-family:inherit;font-size:1.125em;height:var(--input-height);line-height:normal;margin:0;padding:0 var(--spacing-s);width:100%;will-change:transform,box-shadow}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C:hover{border-color:var(--input-border-color-hover);transition:border-color 85ms ease-out}.text-input_hds-text-input__input-wrapper__1OqYG:focus-within .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-focus);outline:none}.text-input_hds-text-input__2LODq.text-input_hds-text-input--invalid__1UfKC .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-invalid)}.text-input_hds-text-input__2LODq.text-input_hds-text-input--success__3dm2J .text-input_hds-text-input__input__GJm5C{border-color:var(--input-border-color-success)}.text-input_hds-text-input__input-wrapper__1OqYG:focus-within .text-input_hds-text-input__input__GJm5C:not([readonly]){box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);transform:translateZ(0);transition:85ms ease-out;transition-property:box-shadow,transform}.text-input_hds-text-input__label__15F2V{color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.text-input_hds-text-input--invalid__1UfKC .text-input_hds-text-input__label__15F2V{color:var(--label-color-invalid);transition:color 85ms linear}.text-input_hds-text-input__required__z3Hm0{color:var(--color-black-90);display:inline-block;font-size:var(--fontsize-body-xl);line-height:1;margin-left:var(--spacing-2-xs);transform:translateY(var(--spacing-3-xs))}.text-input_hds-text-input__input-wrapper__1OqYG{display:flex;position:relative}.text-input_hds-text-input__2LODq textarea.text-input_hds-text-input__input__GJm5C{font-family:inherit;height:var(--textarea-height);margin:0;min-height:var(--input-height);overflow:auto;padding:var(--spacing-s);resize:vertical}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C::-moz-placeholder{color:var(--placeholder-color);opacity:1}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C::placeholder{color:var(--placeholder-color);opacity:1}.text-input_hds-text-input__helper-text__3V2KM{color:var(--helper-color-default)}.text-input_hds-text-input__error-text__1GLYk,.text-input_hds-text-input__helper-text__3V2KM{display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);white-space:pre-line}.text-input_hds-text-input__error-text__1GLYk{color:var(--helper-color-invalid);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.text-input_hds-text-input__error-text__1GLYk:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__error-text__1GLYk:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--icon-color-invalid);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__success-text__3EOiy{color:var(--helper-color-success);display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative;white-space:pre-wrap}.text-input_hds-text-input__success-text__3EOiy:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__success-text__3EOiy:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--helper-color-success);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__info-text__3bqzy{color:var(--helper-color-info);display:block;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-3-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.text-input_hds-text-input__info-text__3bqzy:not(:last-child){margin-bottom:var(--spacing-2-xs)}.text-input_hds-text-input__info-text__3bqzy:before{animation:text-input_fadeIn__2IDZ8 85ms ease-out;background:var(--helper-color-info-icon);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C[disabled]{background-color:var(--input-background-disabled);border-color:var(--input-border-color-disabled);color:var(--input-color-disabled);cursor:not-allowed}.text-input_hds-text-input__2LODq .text-input_hds-text-input__input__GJm5C[readonly]{background-color:transparent;border:0;color:var(--input-color-default);padding:0;-webkit-text-fill-color:var(--input-color-default)}.text-input_hds-text-input__buttons__1RMzT{align-items:center;bottom:0;display:flex;font-size:1rem;justify-content:center;margin-right:calc(var(--spacing-s) - var(--spacing-xs) / 2);position:absolute;right:0;top:0}.text-input_hds-text-input__button__1Fh0I{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;display:flex;font:inherit;outline:none;padding:var(--spacing-xs) calc(var(--spacing-xs) / 2)}.text-input_hds-text-input__button__1Fh0I:focus{outline:var(--outline-width) solid var(--color-focus-outline)}.TextInput-module_root__2CMNr{position:relative}.TextInput-module_input__1BlHi.TextInput-module_hasButton__2KCM1{padding-right:calc(2 * var(--spacing-s) + 1.5rem)}.TextInput-module_button__1ySMX:disabled{cursor:not-allowed}.TextInput-module_button__1ySMX:focus{outline:var(--outline-width) solid var(--color-focus-outline)}");const s=e=>{let{children:t,className:n="",errorText:a,helperText:s,hideLabel:u=!1,id:c,invalid:p=!1,isAriaLabelledBy:d=!1,label:h,labelId:m,onBlur:_,required:x=!1,style:v,successText:b,infoText:f,tooltipLabel:g,tooltipText:E,tooltipButtonLabel:y}=e;return i.createElement("div",{onBlur:_,className:(0,r.c)(o.root,p&&o.invalid,b&&o.success,n),style:v},h&&i.createElement(l.F,{id:m,inputId:c,isAriaLabelledBy:d,hidden:u,label:h,required:x,tooltipLabel:g,tooltipButtonLabel:y,tooltipText:E}),i.createElement("div",{className:(0,r.c)(o.inputWrapper)},t),a&&i.createElement("div",{className:o.errorText,id:c+"-error"},a),b&&i.createElement("div",{className:o.successText,id:c+"-success"},b),f&&i.createElement("div",{className:o.infoText,id:c+"-info"},f),s&&i.createElement("div",{className:o.helperText,id:c+"-helper"},s))}},59096:function(e,t,n){"use strict";n.d(t,{T:function(){return x}});var i=n(80136),a=n(67294),r=n(93667),l=n(7444),o=n(34300),s=n(37776),u=n(94330),c="TimeInput-module_partialInput__1wN8K",p="TimeInput-module_partialInputLabel__30tUk";(0,l.s)(".TimeInput-module_fullInput__w1g3j,.TimeInput-module_partialInput__1wN8K{font-family:inherit;font-size:100%;line-height:1.15;margin:0}.TimeInput-module_partialInputLabel__30tUk{border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.TimeInput-module_timeInputFrame__gax8Y{align-items:center;display:inline-flex;padding:0 calc(var(--spacing-s) - 3px)}.TimeInput-module_timeInputFrame__gax8Y.TimeInput-module_disabled__23DEW{background-color:var(--input-background-disabled);border-color:var(--input-border-color-disabled);color:var(--input-color-disabled);cursor:not-allowed}.TimeInput-module_timeInputFrame__gax8Y.TimeInput-module_disabled__23DEW:hover{border-color:var(--input-border-color-disabled)}.TimeInput-module_fullInput__w1g3j{height:0;opacity:0;overflow:hidden;pointer-events:none;position:absolute;width:0}.TimeInput-module_divider__7JLmX,.TimeInput-module_partialInput__1wN8K{appearance:none;background:transparent;border:0;box-sizing:border-box;color:var(--input-color-default);font-size:1.125rem;line-height:normal;padding:0}.TimeInput-module_partialInput__1wN8K{overflow:visible;padding:0;text-align:center;width:1.4rem;will-change:transform,box-shadow}.TimeInput-module_partialInput__1wN8K:focus{box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);outline:none;transform:translateZ(0)}.TimeInput-module_partialInput__1wN8K:focus::placeholder{opacity:0}.TimeInput-module_divider__7JLmX{display:inline-block;margin:0 5px;pointer-events:none;width:auto}.TimeInput-module_input__1KAUR.TimeInput-module_disabled__23DEW .TimeInput-module_divider__7JLmX,.TimeInput-module_input__1KAUR.TimeInput-module_disabled__23DEW .TimeInput-module_partialInput__1wN8K{background-color:var(--input-background-disabled);border-color:var(--input-border-color-disabled);color:var(--input-color-disabled);cursor:not-allowed}");const d="0,1,2,3,4,5,6,7,8,9".split(","),h=e=>1===e.length?"0"+e:e,m=(e,t,n,i)=>Math.max(Math.min(n+i,t),e),_=e=>null!==e.match(/^(\d{1,2})?$/),x=a.forwardRef(((e,t)=>{var{className:n="",disabled:l=!1,defaultValue:x,value:v,errorText:b,helperText:f,hideLabel:g,invalid:E,id:y,label:w,hoursLabel:T,minutesLabel:I,onChange:k=(()=>null),required:C,style:z,successText:L,infoText:D,tooltipLabel:O,tooltipText:N,tooltipButtonLabel:M,type:j="text"}=e,S=(0,i._)(e,["className","disabled","defaultValue","value","errorText","helperText","hideLabel","invalid","id","label","hoursLabel","minutesLabel","onChange","required","style","successText","infoText","tooltipLabel","tooltipText","tooltipButtonLabel","type"]);x&&v&&console.warn("Use either defaultValue (for uncontrolled components) or value (for controlled components) in HDS TimeInput component.");const q=(e=>{const t=""+e;return e&&t.length>0&&t.match(/^\d{2}:\d{2}$/)?t.split(":"):null})(x||v),H=(0,a.useRef)(null),B=(0,a.useRef)(null),K=(0,a.useRef)(null),[A,G]=(0,a.useState)(q?q[0]:""),[F,U]=(0,a.useState)(q?q[1]:""),[Z,J]=(0,a.useState)(q?q.join(":"):""),P={className:n,errorText:b,helperText:f,hideLabel:g,id:y,invalid:E,label:w,required:C,style:z,successText:L,infoText:D,tooltipLabel:O,tooltipText:N,tooltipButtonLabel:M},V=(e,t)=>{G(e),U(t);const n=0===e.length&&0===t.length?"":e+":"+t;J(n),Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value").set.call(H.current,n);const i=new Event("input",{bubbles:!0});H.current.dispatchEvent(i)};(0,a.useEffect)((()=>{t&&(0,u.m)(t,H)}),[H,t]);const Y=e=>{e.preventDefault(),e.target.select()},W=(0,s.c)(y,f,b,L,D),R={className:(0,o.c)(r.t.input,"TimeInput-module_timeInputFrame__gax8Y",l&&"TimeInput-module_disabled__23DEW"),onClick:e=>{e.target!==B.current&&e.target!==K.current&&B.current.focus()}},X=y+"-hours",$=y+"-minutes",Q=y+"-label";return a.createElement(r.I,Object.assign({},P,{id:y,labelId:Q,isAriaLabelledBy:!0}),a.createElement("div",Object.assign({},R,{role:"group","aria-labelledby":Q}),a.createElement("input",Object.assign({"aria-hidden":!0,readOnly:!0,className:"TimeInput-module_fullInput__w1g3j",disabled:l,id:y,onChange:k,ref:H,required:C,type:j,tabIndex:-1,value:Z},S)),a.createElement("label",{htmlFor:X,className:p},T),a.createElement("input",{className:c,type:"text",disabled:l,id:X,ref:B,value:A,inputMode:"numeric",onChange:e=>{const t=e.target.value.slice(-2);return _(t)?(V(t,F),!0):(e.preventDefault(),!1)},onKeyDown:e=>{if("ArrowRight"!==e.key||e.shiftKey||(e.preventDefault(),K.current.focus()),["ArrowUp","ArrowDown"].includes(e.key)&&!e.shiftKey){e.preventDefault();const t="ArrowUp"===e.key?1:-1,n=parseInt(A,10)||0,i=h(""+m(0,23,n,t));V(i,F)}},onKeyUp:e=>{2===e.currentTarget.value.length&&"00"!==e.currentTarget.value&&d.includes(e.key)&&K.current.focus()},onFocus:Y,onBlur:()=>{A.length>0&&V(h(A),F)},"aria-describedby":W.length>0?W:void 0,placeholder:"--"}),a.createElement("div",{className:"TimeInput-module_divider__7JLmX"},":"),a.createElement("label",{htmlFor:$,className:p},I),a.createElement("input",{className:c,type:"text",disabled:l,id:$,ref:K,value:F,inputMode:"numeric",onChange:e=>{const t=e.target.value.slice(-2);return _(t)?(V(A,t),!0):(e.preventDefault(),!1)},onKeyDown:e=>{if("ArrowLeft"!==e.key||e.shiftKey||(e.preventDefault(),B.current.focus()),["ArrowUp","ArrowDown"].includes(e.key)&&!e.shiftKey){e.preventDefault();const t="ArrowUp"===e.key?1:-1,n=parseInt(F,10)||0,i=h(""+m(0,59,n,t));V(A,i)}},onFocus:Y,onBlur:()=>{F.length>0&&V(A,h(F))},"aria-describedby":W.length>0?W:void 0,placeholder:"--"})))}))},37776:function(e,t,n){"use strict";n.d(t,{c:function(){return i}});var i=(e,t,n,i,a)=>[t&&e+"-helper",n&&e+"-error",i&&e+"-success",a&&e+"-info"].filter((e=>e)).join(" ")},94330:function(e,t,n){"use strict";n.d(t,{m:function(){return r}});var i=n(91309),a=n.n(i),r=(e,t)=>{a()(e)?e(t.current):e.current=t.current}},89834:function(e,t,n){"use strict";n.r(t);var i=n(11151),a=n(67294),r=n(59096),l=n(74458),o=n(5627);const s=e=>{let{children:t,pageContext:n}=e;return a.createElement(o.default,{pageContext:n},t)};function u(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",strong:"strong",h4:"h4",p:"p"},(0,i.ah)(),e.components),{PlaygroundPreview:n,InternalLink:o}=t;return o||c("InternalLink",!0),n||c("PlaygroundPreview",!0),a.createElement(a.Fragment,null,a.createElement(t.h2,{id:"usage",style:{position:"relative"}},"Usage",a.createElement(t.a,{href:"#usage","aria-label":"usage permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.h3,{id:"example",style:{position:"relative"}},"Example",a.createElement(t.a,{href:"#example","aria-label":"example permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(n,null,a.createElement(r.T,{id:"timeinput",label:"Label",hoursLabel:"hours",minutesLabel:"minutes",helperText:"Assistive text",defaultValue:"12:00",required:!0,style:{maxWidth:"320px"}})),"\n",a.createElement(t.h3,{id:"principles",style:{position:"relative"}},"Principles",a.createElement(t.a,{href:"#principles","aria-label":"principles permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.ul,null,"\n",a.createElement(t.li,null,"Only use a time input when you can expect the user to input a specific time. If it can be hard for the user to determine which time they should choose or if the selected time slot can be vague, let the user choose, for example, a time of day (e.g. morning) or a specific day etc."),"\n",a.createElement(t.li,null,a.createElement(t.strong,null,"Pay close attention to the time input label."),' It should clearly describe the time the user is expected to input. A good label describes the input, such as "Event start time".'),"\n",a.createElement(t.li,null,a.createElement(t.strong,null,"HDS Time input does not validate time in any way.")," This means you need to make sure to validate the input if your project requires it."),"\n",a.createElement(t.li,null,"It is recommended to give the time input a default value."),"\n",a.createElement(t.li,null,"Because HDS time input forces the input to a specific format, it is not required to describe the expected format in the assistive text."),"\n",a.createElement(t.li,null,"As specified in ",a.createElement(o,{href:"/foundation/guidelines/data-formats"},"the data format guidelines"),", Helsinki services use a 24-hour clock and can either use leading zeros or omit them. The time input will always show leading zeros."),"\n",a.createElement(t.li,null,"When asking for time ranges, you should use two separate time inputs instead of trying to use one input or picker for both times."),"\n",a.createElement(t.li,null,"Time is often asked alongside a date. Use the ",a.createElement(o,{href:"/components/date-input"},"HDS date input")," for asking dates."),"\n"),"\n",a.createElement(t.h4,{id:"should-i-use-a-time-input-or-a-select",style:{position:"relative"}},"Should I use a time input or a select?",a.createElement(t.a,{href:"#should-i-use-a-time-input-or-a-select","aria-label":"should i use a time input or a select permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.ul,null,"\n",a.createElement(t.li,null,a.createElement(t.strong,null,"Use time input when"),"\n",a.createElement(t.ul,null,"\n",a.createElement(t.li,null,"when the user needs to input the time very accurately (e.g. a parking start time)"),"\n",a.createElement(t.li,null,"there are no strict format requirements or specific time slots available to show"),"\n"),"\n"),"\n",a.createElement(t.li,null,a.createElement(t.strong,null,"Use HDS select when"),"\n",a.createElement(t.ul,null,"\n",a.createElement(t.li,null,"the time format is very strict, e.g. only XX:00 and XX:30 times are allowed"),"\n",a.createElement(t.li,null,"there are only a set amount of time slots available (e.g. reserving a doctor appointment)"),"\n"),"\n"),"\n"),"\n",a.createElement(t.h3,{id:"variations",style:{position:"relative"}},"Variations",a.createElement(t.a,{href:"#variations","aria-label":"variations permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.h4,{id:"default",style:{position:"relative"}},"Default",a.createElement(t.a,{href:"#default","aria-label":"default permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.p,null,"HDS TimeInput allows manual and accurate input for times. It is the best choice when the input needs to be very accurate or when a specific time slot cannot be determined for the user."),"\n",a.createElement(n,null,a.createElement(r.T,{id:"timeinput-default",label:"Label",hoursLabel:"hours",minutesLabel:"minutes",helperText:"Assistive text",defaultValue:"12:00",required:!0,style:{maxWidth:"320px"}})),"\n",a.createElement(t.h4,{id:"using-hds-select-for-times",style:{position:"relative"}},"Using HDS Select for times",a.createElement(t.a,{href:"#using-hds-select-for-times","aria-label":"using hds select for times permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.p,null,"It is better to use ",a.createElement(o,{href:"/components/dropdown#select-single-selection"},"HDS Select")," for selecting times when the time format is very strict or when there are only a set amount of time slots available."),"\n",a.createElement(n,null,a.createElement(l.b,{id:"timeinput-select",required:!0,label:"Label",helper:"Assistive text",options:[{label:"12:00"},{label:"14:00"},{label:"16:00"},{label:"18:00"}],style:{maxWidth:"320px"}})))}function c(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){return void 0===e&&(e={}),a.createElement(s,e,a.createElement(u,e))}},5627:function(e,t,n){"use strict";n.r(t);var i=n(11151),a=n(67294),r=n(83428),l=n(57674),o=n(89482),s=(n(18607),n(26127));function u(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,i.ah)(),e.components);return s.Z||c("PageTabs",!1),s.Z.Tab||c("PageTabs.Tab",!0),s.Z.TabList||c("PageTabs.TabList",!0),s.Z.TabPanel||c("PageTabs.TabPanel",!0),a.createElement(a.Fragment,null,a.createElement(t.h1,{id:"timeinput",style:{position:"relative"}},"TimeInput",a.createElement(t.a,{href:"#timeinput","aria-label":"timeinput permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement("div",{class:"status-label-description"},a.createElement(r.S,{type:"info"},"Stable"),a.createElement(r.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),a.createElement(l.Z)),"\n",a.createElement(o.Z,null,"  A time input helps the user select a specific time."),"\n",a.createElement(s.Z,{pageContext:e.pageContext},a.createElement(s.Z.TabList,null,a.createElement(s.Z.Tab,{href:"/"},"Usage"),a.createElement(s.Z.Tab,{href:"/code"},"Code"),a.createElement(s.Z.Tab,{href:"/accessibility"},"Accessibility")),a.createElement(s.Z.TabPanel,null,e.children)))}function c(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,i.ah)(),e.components);return t?a.createElement(t,e,a.createElement(u,e)):u(e)}},57674:function(e,t,n){"use strict";var i=n(67294),a=n(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return i.createElement(a.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},i.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>i.createElement("li",{key:t},i.createElement("span",{className:"status-name"},t),i.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-time-input-tabs-mdx-c00e66b91d296ca87027.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-time-input-tabs-mdx-c00e66b91d296ca87027.js
new file mode 100644
index 00000000000..b2e47c5bdbb
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-time-input-tabs-mdx-c00e66b91d296ca87027.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[4740],{83428:function(e,t,a){a.d(t,{S:function(){return o}});var s=a(80136),l=a(67294),n=a(7444),r=a(34300),c={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const i=e=>{let{icon:t}=e;return l.createElement("span",{className:c.statusLabelIcon,"aria-hidden":"true"},t)},o=e=>{var{children:t,className:a,dataTestId:n,type:o="neutral",iconLeft:u}=e,b=(0,s._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(c.statusLabel,c[o],u&&c.statusLabelWithIcon,a),"data-testid":n},b),u&&l.createElement(i,{icon:u}),t)}},5627:function(e,t,a){a.r(t);var s=a(11151),l=a(67294),n=a(83428),r=a(57674),c=a(89482),i=(a(18607),a(26127));function o(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,s.ah)(),e.components);return i.Z||u("PageTabs",!1),i.Z.Tab||u("PageTabs.Tab",!0),i.Z.TabList||u("PageTabs.TabList",!0),i.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"timeinput",style:{position:"relative"}},"TimeInput",l.createElement(t.a,{href:"#timeinput","aria-label":"timeinput permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(n.S,{type:"info"},"Stable"),l.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(c.Z,null,"  A time input helps the user select a specific time."),"\n",l.createElement(i.Z,{pageContext:e.pageContext},l.createElement(i.Z.TabList,null,l.createElement(i.Z.Tab,{href:"/"},"Usage"),l.createElement(i.Z.Tab,{href:"/code"},"Code"),l.createElement(i.Z.Tab,{href:"/accessibility"},"Accessibility")),l.createElement(i.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,s.ah)(),e.components);return t?l.createElement(t,e,l.createElement(o,e)):o(e)}},89482:function(e,t,a){var s=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:l={},children:n}=e;return s.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...l}},n)}},26127:function(e,t,a){var s=a(67294),l=a(14160),n=a(94671);const r="PageTabList",c="PageTabPanel",i="PageTab",o=e=>{var t;let{pageContext:a,children:o}=e;const u=a.frontmatter.slug,b=Array.isArray(o)?o:[o],d=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===r)),m=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===c)),h=null===(t=d.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===i)),p=h.findIndex((e=>u.endsWith(e.props.href))),_=-1===p?0:p,f=0===_?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return s.createElement(n.a,{initiallyActiveTab:_},s.createElement(n.a.TabList,{className:"page-tabs-list"},h.map((e=>s.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),h.map(((e,t)=>s.createElement(n.a.TabPanel,{key:e.props.href},_===t?m.props.children:s.createElement("div",null)))))},u=e=>{let{children:t}=e;return s.createElement(n.a.TabList,null,t)};u.componentName=r;const b=e=>{let{href:t,slug:a,children:l}=e;return s.createElement(n.a.Tab,null,l)};b.componentName=i;const d=e=>{let{children:t}=e;return s.createElement(n.a.TabPanel,null,t)};d.componentName=c,o.TabList=u,o.Tab=b,o.TabPanel=d,t.Z=o},57674:function(e,t,a){var s=a(67294),l=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return s.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},s.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>s.createElement("li",{key:t},s.createElement("span",{className:"status-name"},t),s.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-toggle-button-accessibility-mdx-9ee0e61d8f2ebcdd6b6b.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-toggle-button-accessibility-mdx-9ee0e61d8f2ebcdd6b6b.js
new file mode 100644
index 00000000000..06f1acbaf12
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-toggle-button-accessibility-mdx-9ee0e61d8f2ebcdd6b6b.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[9441,2862],{83428:function(e,t,a){a.d(t,{S:function(){return c}});var n=a(80136),l=a(67294),s=a(7444),r=a(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,s.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const i=e=>{let{icon:t}=e;return l.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:s,type:c="neutral",iconLeft:u}=e,b=(0,n._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(o.statusLabel,o[c],u&&o.statusLabelWithIcon,a),"data-testid":s},b),u&&l.createElement(i,{icon:u}),t)}},93945:function(e,t,a){a.r(t);var n=a(11151),l=a(67294),s=a(80699),r=a(31252),o=a(1076);const i=e=>{let{children:t,pageContext:a}=e;return l.createElement(r.default,{pageContext:a},t)};function c(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",strong:"strong"},(0,n.ah)(),e.components);return l.createElement(l.Fragment,null,l.createElement(t.h2,{id:"accessibility",style:{position:"relative"}},"Accessibility",l.createElement(t.a,{href:"#accessibility","aria-label":"accessibility permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h3,{id:"pay-attention-to",style:{position:"relative"}},"Pay attention to",l.createElement(t.a,{href:"#pay-attention-to","aria-label":"pay attention to permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,l.createElement(t.strong,null,"It is advisable to use colour combinations provided by the implementation.")," These combinations are ensured to comply with WCAG AA requirements. When customising colours, refer to ",l.createElement(o.Z,{href:"/foundation/design-tokens/colour"},"colour guidelines")," to ensure accessibility."),"\n",l.createElement(t.li,null,"If the toggle button makes other elements appear on the view, those elements should be located next to the toggle button - preferably right after or below it.","\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,"While not recommended, if a toggle button makes elements appear in other parts of the user interface, you need to make sure to notify assistive technologies about the change. You can use ",l.createElement(o.Z,{href:"/components/notification"},"HDS Notification component")," for this purpose."),"\n"),"\n"),"\n",l.createElement(t.li,null,"HDS Toggle button includes a small animation when the toggle state is changed. However, the animation is considered non-decorative and therefore it does not have to be able to be disabled. See ",l.createElement(s.Z,{href:"https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html"},"WCAG 2.3.3 Animation from Interactions guideline")," for more information."),"\n"))}t.default=function(e){return void 0===e&&(e={}),l.createElement(i,e,l.createElement(c,e))}},31252:function(e,t,a){a.r(t);var n=a(11151),l=a(67294),s=a(83428),r=a(57674),o=a(89482),i=(a(18607),a(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,n.ah)(),e.components);return i.Z||u("PageTabs",!1),i.Z.Tab||u("PageTabs.Tab",!0),i.Z.TabList||u("PageTabs.TabList",!0),i.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"togglebutton",style:{position:"relative"}},"ToggleButton",l.createElement(t.a,{href:"#togglebutton","aria-label":"togglebutton permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(s.S,{type:"info"},"Stable"),l.createElement(s.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(o.Z,null,'Toggle button allows the user to switch between two distinct states such as "On" and "Off".'),"\n",l.createElement(i.Z,{pageContext:e.pageContext},l.createElement(i.Z.TabList,null,l.createElement(i.Z.Tab,{href:"/"},"Usage"),l.createElement(i.Z.Tab,{href:"/code"},"Code"),l.createElement(i.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(i.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(i.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,n.ah)(),e.components);return t?l.createElement(t,e,l.createElement(c,e)):c(e)}},89482:function(e,t,a){var n=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:l={},children:s}=e;return n.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...l}},s)}},26127:function(e,t,a){var n=a(67294),l=a(14160),s=a(94671);const r="PageTabList",o="PageTabPanel",i="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const u=a.frontmatter.slug,b=Array.isArray(c)?c:[c],d=b.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===r)),m=b.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===o)),h=null===(t=d.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===i)),p=h.findIndex((e=>u.endsWith(e.props.href))),g=-1===p?0:p,f=0===g?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return n.createElement(s.a,{initiallyActiveTab:g},n.createElement(s.a.TabList,{className:"page-tabs-list"},h.map((e=>n.createElement(s.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),h.map(((e,t)=>n.createElement(s.a.TabPanel,{key:e.props.href},g===t?m.props.children:n.createElement("div",null)))))},u=e=>{let{children:t}=e;return n.createElement(s.a.TabList,null,t)};u.componentName=r;const b=e=>{let{href:t,slug:a,children:l}=e;return n.createElement(s.a.Tab,null,l)};b.componentName=i;const d=e=>{let{children:t}=e;return n.createElement(s.a.TabPanel,null,t)};d.componentName=o,c.TabList=u,c.Tab=b,c.TabPanel=d,t.Z=c},57674:function(e,t,a){var n=a(67294),l=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return n.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},n.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>n.createElement("li",{key:t},n.createElement("span",{className:"status-name"},t),n.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-toggle-button-code-mdx-37b09a6dd33ce1be5b49.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-toggle-button-code-mdx-37b09a6dd33ce1be5b49.js
new file mode 100644
index 00000000000..abdd0e82f8a
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-toggle-button-code-mdx-37b09a6dd33ce1be5b49.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[9772,2862],{87407:function(e,t,l){l.d(t,{I:function(){return o}});var a=l(67294),n=l(32719);const o=e=>{let{ariaLabel:t="cross-circle-fill",ariaLabelledby:l,ariaHidden:o=!0,className:r="",color:s,size:c="s",style:i={}}=e;return a.createElement("svg",{className:[n.s.icon,n.s[c],r].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":l,"aria-hidden":o,color:s,style:i},a.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM15 7.5L16.5 9L13.5 12L16.5 15L15 16.5L12 13.5L9 16.5L7.5 15L10.5 12L7.5 9L9 7.5L12 10.5L15 7.5Z",fill:"currentColor"}))}},83428:function(e,t,l){l.d(t,{S:function(){return i}});var a=l(80136),n=l(67294),o=l(7444),r=l(34300),s={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,o.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const c=e=>{let{icon:t}=e;return n.createElement("span",{className:s.statusLabelIcon,"aria-hidden":"true"},t)},i=e=>{var{children:t,className:l,dataTestId:o,type:i="neutral",iconLeft:u}=e,d=(0,a._)(e,["children","className","dataTestId","type","iconLeft"]);return n.createElement("span",Object.assign({className:(0,r.c)(s.statusLabel,s[i],u&&s.statusLabelWithIcon,l),"data-testid":o},d),u&&n.createElement(c,{icon:u}),t)}},1751:function(e,t,l){l.d(t,{T:function(){return m}});var a=l(67294),n=l(7444),o=l(34300),r=l(45422),s=l(97640),c=l(87407),i=l(8381),u="ToggleButton-module_toggleButtonContainer__2YMDa",d="ToggleButton-module_toggleButtonIcon__RXT8O";(0,n.s)('.ToggleButton-module_toggleButton__1-KAF{font-family:inherit;font-size:100%;line-height:1.15;margin:0}.ToggleButton-module_label__1dFTc{color:var(--label-color-default,var(--color-black-90));display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.ToggleButton-module_toggleButtonContainer__2YMDa{--toggle-button-color:var(--color-bus);--toggle-button-hover-color:var(--color-bus-dark);--toggle-button-unselected-color:var(--color-black-90)}.ToggleButton-module_onIcon__29twM{color:#fff;opacity:0}.ToggleButton-module_offIcon__bWWxh{color:var(--toggle-button-unselected-color);opacity:1}.ToggleButton-module_toggleButton__1-KAF{background:#fff;border:2px solid var(--toggle-button-unselected-color);border-radius:20px;cursor:pointer;display:inline-block;height:32px;inset:0;position:relative;transition:all .2s;width:56px}.ToggleButton-module_toggleButton__1-KAF:after{border-radius:25px;content:"";display:block;inset:-7px;position:absolute}.ToggleButton-module_toggleButton__1-KAF:focus{outline:none}.ToggleButton-module_toggleButton__1-KAF:focus:after{border:3px solid var(--color-coat-of-arms);box-sizing:content-box}.ToggleButton-module_toggleButton__1-KAF[aria-pressed=true]{background-color:var(--toggle-button-color);border-color:var(--toggle-button-color)}.ToggleButton-module_toggleButton__1-KAF[aria-pressed=true]:hover{background-color:var(--toggle-button-hover-color);border-color:var(--toggle-button-hover-color)}.ToggleButton-module_toggleButton__1-KAF[aria-pressed=true][disabled],.ToggleButton-module_toggleButton__1-KAF[aria-pressed=true][disabled]:hover{background-color:var(--color-black-10);border-color:var(--color-black-10)}.ToggleButton-module_toggleButton__1-KAF[aria-pressed=true] .ToggleButton-module_onIcon__29twM{margin-left:24px!important;opacity:1}.ToggleButton-module_toggleButton__1-KAF[aria-pressed=true] .ToggleButton-module_offIcon__bWWxh{margin-left:24px!important;opacity:0}.ToggleButton-module_toggleButton__1-KAF[disabled],.ToggleButton-module_toggleButton__1-KAF[disabled]:hover{border-color:var(--color-black-20);cursor:not-allowed}.ToggleButton-module_toggleButton__1-KAF[disabled] .ToggleButton-module_offIcon__bWWxh,.ToggleButton-module_toggleButton__1-KAF[disabled]:hover .ToggleButton-module_offIcon__bWWxh{color:var(--color-black-10)}.ToggleButton-module_toggleButtonContainerInlineVariant__1YSw9{align-items:center;display:flex;flex-wrap:wrap}.ToggleButton-module_toggleButtonContainerInlineVariant__1YSw9 .ToggleButton-module_label__1dFTc{margin-bottom:0}.ToggleButton-module_toggleButtonContainerInlineVariant__1YSw9 .ToggleButton-module_toggleButton__1-KAF{margin-left:auto}.ToggleButton-module_labelContainer__xg3OB{align-items:flex-start;display:flex}.ToggleButton-module_tooltipButton__1F3Sx{display:block;margin-left:var(--spacing-2-xs)}.ToggleButton-module_toggleButtonIcon__RXT8O{cursor:pointer;left:-2px;position:absolute;top:-2px;transition:all .2s}');const m=a.forwardRef(((e,t)=>{let{id:l,label:n,checked:m,disabled:g,onChange:b,tooltipLabel:h,tooltipButtonLabel:p,tooltipText:_,variant:f="default",theme:E}=e;const T=l+"-label",v=(0,s.u)(u,E);return a.createElement("div",{className:(0,o.c)(u,"inline"===f&&"ToggleButton-module_toggleButtonContainerInlineVariant__1YSw9",v)},a.createElement("div",{className:"ToggleButton-module_labelContainer__xg3OB"},a.createElement("label",{id:T,htmlFor:l,className:"ToggleButton-module_label__1dFTc"},n),_&&a.createElement(r.T,{buttonClassName:"ToggleButton-module_tooltipButton__1F3Sx",tooltipLabel:h,buttonLabel:p},_)),a.createElement("button",{id:l,ref:t,disabled:g,type:"button","aria-pressed":m,"aria-labelledby":T,className:"ToggleButton-module_toggleButton__1-KAF",onClick:()=>{b(m)}},a.createElement("div",{className:(0,o.c)(d,"ToggleButton-module_offIcon__bWWxh")},a.createElement(c.I,{size:"m","aria-hidden":"true"})),a.createElement("div",{className:(0,o.c)(d,"ToggleButton-module_onIcon__29twM")},a.createElement(i.I,{size:"m","aria-hidden":"true"}))))}))},96034:function(e,t,l){l.r(t);var a=l(11151),n=l(67294),o=l(1751),r=l(31252);const s=e=>{let{children:t,pageContext:l}=e;return n.createElement(r.default,{pageContext:l},t)};function c(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",h4:"h4",pre:"pre",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",strong:"strong",p:"p"},(0,a.ah)(),e.components),{Playground:l,IconCheckCircleFill:r,Link:s,ExternalLink:c,IconCrossCircle:u,InternalLink:d}=t;return c||i("ExternalLink",!0),r||i("IconCheckCircleFill",!0),u||i("IconCrossCircle",!0),d||i("InternalLink",!0),s||i("Link",!0),l||i("Playground",!0),n.createElement(n.Fragment,null,n.createElement(t.h2,{id:"code",style:{position:"relative"}},"Code",n.createElement(t.a,{href:"#code","aria-label":"code permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.h3,{id:"code-examples",style:{position:"relative"}},"Code examples",n.createElement(t.a,{href:"#code-examples","aria-label":"code examples permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.h4,{id:"default",style:{position:"relative"}},"Default",n.createElement(t.a,{href:"#default","aria-label":"default permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(l,{scope:{ToggleButton:o.T}},n.createElement(t.pre,null,n.createElement(t.code,{className:"language-jsx"},'import { ToggleButton } from \'hds-react\';\n\n() => {\n  const [checked1, setChecked1] = React.useState(false);\n  const [checked2, setChecked2] = React.useState(false);\n  return (<>\n    <ToggleButton id="toggle-button-1" label="Label" checked={checked1} onChange={() => setChecked1(!checked1)} />\n    <br />\n    <ToggleButton\n      id="toggle-button-default"\n      disabled\n      label="Label"\n      checked={checked2}\n      onChange={() => setChecked2(!checked2)}\n    />\n  </>);\n}\n'))),"\n",n.createElement(t.h4,{id:"with-a-horizontal-label",style:{position:"relative"}},"With a horizontal label",n.createElement(t.a,{href:"#with-a-horizontal-label","aria-label":"with a horizontal label permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(l,{scope:{ToggleButton:o.T}},n.createElement(t.pre,null,n.createElement(t.code,{className:"language-jsx"},'import { ToggleButton } from \'hds-react\';\n\n() => {\n  const [checked1, setChecked1] = React.useState(false);\n  const [checked2, setChecked2] = React.useState(false);\n  return (<>\n    <div style={{ maxWidth: \'160px\' }}>\n      <ToggleButton\n        id="toggle-button-1"\n        label="Label"\n        checked={checked1}\n        onChange={() => setChecked1(!checked1)}\n        variant="inline"\n      />\n      <br />\n      <ToggleButton\n        id="toggle-button-2"\n        disabled\n        label="Label"\n        checked={checked2}\n        onChange={() => setChecked2(!checked2)}\n        variant="inline"\n      />\n    </div>\n  </>);\n}\n'))),"\n",n.createElement(t.h3,{id:"packages",style:{position:"relative"}},"Packages",n.createElement(t.a,{href:"#packages","aria-label":"packages permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.table,null,n.createElement(t.thead,null,n.createElement(t.tr,null,n.createElement(t.th,null,"Package"),n.createElement(t.th,null,"Included"),n.createElement(t.th,null,"Storybook link"),n.createElement(t.th,null,"Source link"))),n.createElement(t.tbody,null,n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.strong,null,"HDS React")),n.createElement(t.td,null,n.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},n.createElement(r)," Yes ")),n.createElement(t.td,null,n.createElement(s,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-togglebutton--default"},"View in Storybook")),n.createElement(t.td,null,n.createElement(c,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/react/src/components/toggleButton"},"View source"))),n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.strong,null,"HDS Core")),n.createElement(t.td,null,n.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},n.createElement(u)," No ")),n.createElement(t.td,null,"-"),n.createElement(t.td,null,"-")))),"\n",n.createElement(t.h3,{id:"properties",style:{position:"relative"}},"Properties",n.createElement(t.a,{href:"#properties","aria-label":"properties permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.p,null,"Note! You can find the full list of properties in the ",n.createElement(s,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/docs/components-togglebutton--default"},"React Storybook.")),"\n",n.createElement(t.p,null,"Also, note that this component is an input. Most features supported by the HDS TextInput are also supported by this component. See ",n.createElement(d,{href:"/components/text-input"},"TextInput documentation page")," for more information."),"\n",n.createElement(t.table,null,n.createElement(t.thead,null,n.createElement(t.tr,null,n.createElement(t.th,null,"Property"),n.createElement(t.th,null,"Description"),n.createElement(t.th,null,"Values"),n.createElement(t.th,null,"Default value"))),n.createElement(t.tbody,null,n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"label")),n.createElement(t.td,null,"The label for the input."),n.createElement(t.td,null,n.createElement(t.code,null,"string")),n.createElement(t.td,null,"-")),n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"checked")),n.createElement(t.td,null,'If set to true, the toggle button state will be "On".'),n.createElement(t.td,null,n.createElement(t.code,null,"boolean")),n.createElement(t.td,null,"false")),n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"variant")),n.createElement(t.td,null,"Defines the toggle button variant."),n.createElement(t.td,null,n.createElement(t.code,null,'"default"')," ",n.createElement(t.code,null,'"inline"')),n.createElement(t.td,null,n.createElement(t.code,null,'"default"'))),n.createElement(t.tr,null,n.createElement(t.td,null,"[Table 1:ToggleButton properties]"),n.createElement(t.td),n.createElement(t.td),n.createElement(t.td)))))}function i(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){return void 0===e&&(e={}),n.createElement(s,e,n.createElement(c,e))}},31252:function(e,t,l){l.r(t);var a=l(11151),n=l(67294),o=l(83428),r=l(57674),s=l(89482),c=(l(18607),l(26127));function i(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,a.ah)(),e.components);return c.Z||u("PageTabs",!1),c.Z.Tab||u("PageTabs.Tab",!0),c.Z.TabList||u("PageTabs.TabList",!0),c.Z.TabPanel||u("PageTabs.TabPanel",!0),n.createElement(n.Fragment,null,n.createElement(t.h1,{id:"togglebutton",style:{position:"relative"}},"ToggleButton",n.createElement(t.a,{href:"#togglebutton","aria-label":"togglebutton permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement("div",{class:"status-label-description"},n.createElement(o.S,{type:"info"},"Stable"),n.createElement(o.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),n.createElement(r.Z)),"\n",n.createElement(s.Z,null,'Toggle button allows the user to switch between two distinct states such as "On" and "Off".'),"\n",n.createElement(c.Z,{pageContext:e.pageContext},n.createElement(c.Z.TabList,null,n.createElement(c.Z.Tab,{href:"/"},"Usage"),n.createElement(c.Z.Tab,{href:"/code"},"Code"),n.createElement(c.Z.Tab,{href:"/accessibility"},"Accessibility"),n.createElement(c.Z.Tab,{href:"/customisation"},"Customisation")),n.createElement(c.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,a.ah)(),e.components);return t?n.createElement(t,e,n.createElement(i,e)):i(e)}},89482:function(e,t,l){var a=l(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:l="var(--fontsize-body-xl)",style:n={},children:o}=e;return a.createElement("p",{style:{fontSize:l,color:t,maxWidth:600,...n}},o)}},26127:function(e,t,l){var a=l(67294),n=l(14160),o=l(94671);const r="PageTabList",s="PageTabPanel",c="PageTab",i=e=>{var t;let{pageContext:l,children:i}=e;const u=l.frontmatter.slug,d=Array.isArray(i)?i:[i],m=d.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===r)),g=d.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===s)),b=null===(t=m.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===c)),h=b.findIndex((e=>u.endsWith(e.props.href))),p=-1===h?0:h,_=0===p?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return a.createElement(o.a,{initiallyActiveTab:p},a.createElement(o.a.TabList,{className:"page-tabs-list"},b.map((e=>a.createElement(o.a.Tab,{key:e.props.href,onClick:()=>(0,n.navigate)(""+("/"===e.props.href?_:_+e.props.href))},e.props.children)))),b.map(((e,t)=>a.createElement(o.a.TabPanel,{key:e.props.href},p===t?g.props.children:a.createElement("div",null)))))},u=e=>{let{children:t}=e;return a.createElement(o.a.TabList,null,t)};u.componentName=r;const d=e=>{let{href:t,slug:l,children:n}=e;return a.createElement(o.a.Tab,null,n)};d.componentName=c;const m=e=>{let{children:t}=e;return a.createElement(o.a.TabPanel,null,t)};m.componentName=s,i.TabList=u,i.Tab=d,i.TabPanel=m,t.Z=i},57674:function(e,t,l){var a=l(67294),n=l(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return a.createElement(n.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},a.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>a.createElement("li",{key:t},a.createElement("span",{className:"status-name"},t),a.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-toggle-button-customisation-mdx-e9fc540ba000b22d3f0a.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-toggle-button-customisation-mdx-e9fc540ba000b22d3f0a.js
new file mode 100644
index 00000000000..b0aba255908
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-toggle-button-customisation-mdx-e9fc540ba000b22d3f0a.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[9367,2862],{87407:function(e,t,l){l.d(t,{I:function(){return n}});var o=l(67294),a=l(32719);const n=e=>{let{ariaLabel:t="cross-circle-fill",ariaLabelledby:l,ariaHidden:n=!0,className:r="",color:s,size:c="s",style:i={}}=e;return o.createElement("svg",{className:[a.s.icon,a.s[c],r].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":l,"aria-hidden":n,color:s,style:i},o.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM15 7.5L16.5 9L13.5 12L16.5 15L15 16.5L12 13.5L9 16.5L7.5 15L10.5 12L7.5 9L9 7.5L12 10.5L15 7.5Z",fill:"currentColor"}))}},83428:function(e,t,l){l.d(t,{S:function(){return i}});var o=l(80136),a=l(67294),n=l(7444),r=l(34300),s={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const c=e=>{let{icon:t}=e;return a.createElement("span",{className:s.statusLabelIcon,"aria-hidden":"true"},t)},i=e=>{var{children:t,className:l,dataTestId:n,type:i="neutral",iconLeft:u}=e,d=(0,o._)(e,["children","className","dataTestId","type","iconLeft"]);return a.createElement("span",Object.assign({className:(0,r.c)(s.statusLabel,s[i],u&&s.statusLabelWithIcon,l),"data-testid":n},d),u&&a.createElement(c,{icon:u}),t)}},1751:function(e,t,l){l.d(t,{T:function(){return g}});var o=l(67294),a=l(7444),n=l(34300),r=l(45422),s=l(97640),c=l(87407),i=l(8381),u="ToggleButton-module_toggleButtonContainer__2YMDa",d="ToggleButton-module_toggleButtonIcon__RXT8O";(0,a.s)('.ToggleButton-module_toggleButton__1-KAF{font-family:inherit;font-size:100%;line-height:1.15;margin:0}.ToggleButton-module_label__1dFTc{color:var(--label-color-default,var(--color-black-90));display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.ToggleButton-module_toggleButtonContainer__2YMDa{--toggle-button-color:var(--color-bus);--toggle-button-hover-color:var(--color-bus-dark);--toggle-button-unselected-color:var(--color-black-90)}.ToggleButton-module_onIcon__29twM{color:#fff;opacity:0}.ToggleButton-module_offIcon__bWWxh{color:var(--toggle-button-unselected-color);opacity:1}.ToggleButton-module_toggleButton__1-KAF{background:#fff;border:2px solid var(--toggle-button-unselected-color);border-radius:20px;cursor:pointer;display:inline-block;height:32px;inset:0;position:relative;transition:all .2s;width:56px}.ToggleButton-module_toggleButton__1-KAF:after{border-radius:25px;content:"";display:block;inset:-7px;position:absolute}.ToggleButton-module_toggleButton__1-KAF:focus{outline:none}.ToggleButton-module_toggleButton__1-KAF:focus:after{border:3px solid var(--color-coat-of-arms);box-sizing:content-box}.ToggleButton-module_toggleButton__1-KAF[aria-pressed=true]{background-color:var(--toggle-button-color);border-color:var(--toggle-button-color)}.ToggleButton-module_toggleButton__1-KAF[aria-pressed=true]:hover{background-color:var(--toggle-button-hover-color);border-color:var(--toggle-button-hover-color)}.ToggleButton-module_toggleButton__1-KAF[aria-pressed=true][disabled],.ToggleButton-module_toggleButton__1-KAF[aria-pressed=true][disabled]:hover{background-color:var(--color-black-10);border-color:var(--color-black-10)}.ToggleButton-module_toggleButton__1-KAF[aria-pressed=true] .ToggleButton-module_onIcon__29twM{margin-left:24px!important;opacity:1}.ToggleButton-module_toggleButton__1-KAF[aria-pressed=true] .ToggleButton-module_offIcon__bWWxh{margin-left:24px!important;opacity:0}.ToggleButton-module_toggleButton__1-KAF[disabled],.ToggleButton-module_toggleButton__1-KAF[disabled]:hover{border-color:var(--color-black-20);cursor:not-allowed}.ToggleButton-module_toggleButton__1-KAF[disabled] .ToggleButton-module_offIcon__bWWxh,.ToggleButton-module_toggleButton__1-KAF[disabled]:hover .ToggleButton-module_offIcon__bWWxh{color:var(--color-black-10)}.ToggleButton-module_toggleButtonContainerInlineVariant__1YSw9{align-items:center;display:flex;flex-wrap:wrap}.ToggleButton-module_toggleButtonContainerInlineVariant__1YSw9 .ToggleButton-module_label__1dFTc{margin-bottom:0}.ToggleButton-module_toggleButtonContainerInlineVariant__1YSw9 .ToggleButton-module_toggleButton__1-KAF{margin-left:auto}.ToggleButton-module_labelContainer__xg3OB{align-items:flex-start;display:flex}.ToggleButton-module_tooltipButton__1F3Sx{display:block;margin-left:var(--spacing-2-xs)}.ToggleButton-module_toggleButtonIcon__RXT8O{cursor:pointer;left:-2px;position:absolute;top:-2px;transition:all .2s}');const g=o.forwardRef(((e,t)=>{let{id:l,label:a,checked:g,disabled:m,onChange:b,tooltipLabel:h,tooltipButtonLabel:_,tooltipText:p,variant:f="default",theme:v}=e;const T=l+"-label",E=(0,s.u)(u,v);return o.createElement("div",{className:(0,n.c)(u,"inline"===f&&"ToggleButton-module_toggleButtonContainerInlineVariant__1YSw9",E)},o.createElement("div",{className:"ToggleButton-module_labelContainer__xg3OB"},o.createElement("label",{id:T,htmlFor:l,className:"ToggleButton-module_label__1dFTc"},a),p&&o.createElement(r.T,{buttonClassName:"ToggleButton-module_tooltipButton__1F3Sx",tooltipLabel:h,buttonLabel:_},p)),o.createElement("button",{id:l,ref:t,disabled:m,type:"button","aria-pressed":g,"aria-labelledby":T,className:"ToggleButton-module_toggleButton__1-KAF",onClick:()=>{b(g)}},o.createElement("div",{className:(0,n.c)(d,"ToggleButton-module_offIcon__bWWxh")},o.createElement(c.I,{size:"m","aria-hidden":"true"})),o.createElement("div",{className:(0,n.c)(d,"ToggleButton-module_onIcon__29twM")},o.createElement(i.I,{size:"m","aria-hidden":"true"}))))}))},69783:function(e,t,l){l.r(t);var o=l(11151),a=l(67294),n=l(1751),r=l(31252);const s=e=>{let{children:t,pageContext:l}=e;return a.createElement(r.default,{pageContext:l},t)};function c(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",p:"p",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",pre:"pre"},(0,o.ah)(),e.components),{Playground:l}=t;return l||function(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Playground",!0),a.createElement(a.Fragment,null,a.createElement(t.h2,{id:"customisation",style:{position:"relative"}},"Customisation",a.createElement(t.a,{href:"#customisation","aria-label":"customisation permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.h3,{id:"customisation-properties",style:{position:"relative"}},"Customisation properties",a.createElement(t.a,{href:"#customisation-properties","aria-label":"customisation properties permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.p,null,"You can use the ",a.createElement(t.code,null,"theme")," property to customise the component. See all available theme variables in the table below."),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Theme variable"),a.createElement(t.th,null,"Description"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"--toggle-button-color")),a.createElement(t.td,null,"Colour of the toggle button (when selected).")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"--toggle-button-hover-color")),a.createElement(t.td,null,"Colour of the toggle button on hover (when selected).")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(t.code,null,"--toggle-button-unselected-color")),a.createElement(t.td,null,"Colour of the toggle button (when not selected).")),a.createElement(t.tr,null,a.createElement(t.td,null,"[Table 1:ToggleButton theme variables]"),a.createElement(t.td)))),"\n",a.createElement(t.h3,{id:"customisation-example",style:{position:"relative"}},"Customisation example",a.createElement(t.a,{href:"#customisation-example","aria-label":"customisation example permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(l,{scope:{ToggleButton:n.T}},a.createElement(t.pre,null,a.createElement(t.code,{className:"language-jsx"},"import { ToggleButton } from 'hds-react';\n\n() => {\n  const [checked, setChecked] = React.useState(true);\n  return (\n    <>\n      <ToggleButton\n        id=\"toggle-button-custom-color\"\n        label=\"Label\"\n        checked={checked}\n        onChange={() => setChecked(!checked)}\n        theme={{\n          '--toggle-button-color': 'var(--color-tram)',\n          '--toggle-button-hover-color': 'var(--color-tram-dark)',\n          '--toggle-button-unselected-color': 'var(--color-black-90)'\n        }}\n      />\n    </>\n  );\n}\n"))))}t.default=function(e){return void 0===e&&(e={}),a.createElement(s,e,a.createElement(c,e))}},31252:function(e,t,l){l.r(t);var o=l(11151),a=l(67294),n=l(83428),r=l(57674),s=l(89482),c=(l(18607),l(26127));function i(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,o.ah)(),e.components);return c.Z||u("PageTabs",!1),c.Z.Tab||u("PageTabs.Tab",!0),c.Z.TabList||u("PageTabs.TabList",!0),c.Z.TabPanel||u("PageTabs.TabPanel",!0),a.createElement(a.Fragment,null,a.createElement(t.h1,{id:"togglebutton",style:{position:"relative"}},"ToggleButton",a.createElement(t.a,{href:"#togglebutton","aria-label":"togglebutton permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement("div",{class:"status-label-description"},a.createElement(n.S,{type:"info"},"Stable"),a.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),a.createElement(r.Z)),"\n",a.createElement(s.Z,null,'Toggle button allows the user to switch between two distinct states such as "On" and "Off".'),"\n",a.createElement(c.Z,{pageContext:e.pageContext},a.createElement(c.Z.TabList,null,a.createElement(c.Z.Tab,{href:"/"},"Usage"),a.createElement(c.Z.Tab,{href:"/code"},"Code"),a.createElement(c.Z.Tab,{href:"/accessibility"},"Accessibility"),a.createElement(c.Z.Tab,{href:"/customisation"},"Customisation")),a.createElement(c.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,o.ah)(),e.components);return t?a.createElement(t,e,a.createElement(i,e)):i(e)}},89482:function(e,t,l){var o=l(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:l="var(--fontsize-body-xl)",style:a={},children:n}=e;return o.createElement("p",{style:{fontSize:l,color:t,maxWidth:600,...a}},n)}},26127:function(e,t,l){var o=l(67294),a=l(14160),n=l(94671);const r="PageTabList",s="PageTabPanel",c="PageTab",i=e=>{var t;let{pageContext:l,children:i}=e;const u=l.frontmatter.slug,d=Array.isArray(i)?i:[i],g=d.find((e=>(0,o.isValidElement)(e)&&e.type.componentName===r)),m=d.find((e=>(0,o.isValidElement)(e)&&e.type.componentName===s)),b=null===(t=g.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===c)),h=b.findIndex((e=>u.endsWith(e.props.href))),_=-1===h?0:h,p=0===_?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return o.createElement(n.a,{initiallyActiveTab:_},o.createElement(n.a.TabList,{className:"page-tabs-list"},b.map((e=>o.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,a.navigate)(""+("/"===e.props.href?p:p+e.props.href))},e.props.children)))),b.map(((e,t)=>o.createElement(n.a.TabPanel,{key:e.props.href},_===t?m.props.children:o.createElement("div",null)))))},u=e=>{let{children:t}=e;return o.createElement(n.a.TabList,null,t)};u.componentName=r;const d=e=>{let{href:t,slug:l,children:a}=e;return o.createElement(n.a.Tab,null,a)};d.componentName=c;const g=e=>{let{children:t}=e;return o.createElement(n.a.TabPanel,null,t)};g.componentName=s,i.TabList=u,i.Tab=d,i.TabPanel=g,t.Z=i},57674:function(e,t,l){var o=l(67294),a=l(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return o.createElement(a.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},o.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>o.createElement("li",{key:t},o.createElement("span",{className:"status-name"},t),o.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-toggle-button-index-mdx-b9a9febc66e456514d0f.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-toggle-button-index-mdx-b9a9febc66e456514d0f.js
new file mode 100644
index 00000000000..8f3ae38e505
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-toggle-button-index-mdx-b9a9febc66e456514d0f.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[2609,2862],{87407:function(e,t,l){l.d(t,{I:function(){return o}});var a=l(67294),n=l(32719);const o=e=>{let{ariaLabel:t="cross-circle-fill",ariaLabelledby:l,ariaHidden:o=!0,className:r="",color:s,size:i="s",style:c={}}=e;return a.createElement("svg",{className:[n.s.icon,n.s[i],r].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":l,"aria-hidden":o,color:s,style:c},a.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM15 7.5L16.5 9L13.5 12L16.5 15L15 16.5L12 13.5L9 16.5L7.5 15L10.5 12L7.5 9L9 7.5L12 10.5L15 7.5Z",fill:"currentColor"}))}},83428:function(e,t,l){l.d(t,{S:function(){return c}});var a=l(80136),n=l(67294),o=l(7444),r=l(34300),s={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,o.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const i=e=>{let{icon:t}=e;return n.createElement("span",{className:s.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:l,dataTestId:o,type:c="neutral",iconLeft:u}=e,d=(0,a._)(e,["children","className","dataTestId","type","iconLeft"]);return n.createElement("span",Object.assign({className:(0,r.c)(s.statusLabel,s[c],u&&s.statusLabelWithIcon,l),"data-testid":o},d),u&&n.createElement(i,{icon:u}),t)}},1751:function(e,t,l){l.d(t,{T:function(){return g}});var a=l(67294),n=l(7444),o=l(34300),r=l(45422),s=l(97640),i=l(87407),c=l(8381),u="ToggleButton-module_toggleButtonContainer__2YMDa",d="ToggleButton-module_toggleButtonIcon__RXT8O";(0,n.s)('.ToggleButton-module_toggleButton__1-KAF{font-family:inherit;font-size:100%;line-height:1.15;margin:0}.ToggleButton-module_label__1dFTc{color:var(--label-color-default,var(--color-black-90));display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.ToggleButton-module_toggleButtonContainer__2YMDa{--toggle-button-color:var(--color-bus);--toggle-button-hover-color:var(--color-bus-dark);--toggle-button-unselected-color:var(--color-black-90)}.ToggleButton-module_onIcon__29twM{color:#fff;opacity:0}.ToggleButton-module_offIcon__bWWxh{color:var(--toggle-button-unselected-color);opacity:1}.ToggleButton-module_toggleButton__1-KAF{background:#fff;border:2px solid var(--toggle-button-unselected-color);border-radius:20px;cursor:pointer;display:inline-block;height:32px;inset:0;position:relative;transition:all .2s;width:56px}.ToggleButton-module_toggleButton__1-KAF:after{border-radius:25px;content:"";display:block;inset:-7px;position:absolute}.ToggleButton-module_toggleButton__1-KAF:focus{outline:none}.ToggleButton-module_toggleButton__1-KAF:focus:after{border:3px solid var(--color-coat-of-arms);box-sizing:content-box}.ToggleButton-module_toggleButton__1-KAF[aria-pressed=true]{background-color:var(--toggle-button-color);border-color:var(--toggle-button-color)}.ToggleButton-module_toggleButton__1-KAF[aria-pressed=true]:hover{background-color:var(--toggle-button-hover-color);border-color:var(--toggle-button-hover-color)}.ToggleButton-module_toggleButton__1-KAF[aria-pressed=true][disabled],.ToggleButton-module_toggleButton__1-KAF[aria-pressed=true][disabled]:hover{background-color:var(--color-black-10);border-color:var(--color-black-10)}.ToggleButton-module_toggleButton__1-KAF[aria-pressed=true] .ToggleButton-module_onIcon__29twM{margin-left:24px!important;opacity:1}.ToggleButton-module_toggleButton__1-KAF[aria-pressed=true] .ToggleButton-module_offIcon__bWWxh{margin-left:24px!important;opacity:0}.ToggleButton-module_toggleButton__1-KAF[disabled],.ToggleButton-module_toggleButton__1-KAF[disabled]:hover{border-color:var(--color-black-20);cursor:not-allowed}.ToggleButton-module_toggleButton__1-KAF[disabled] .ToggleButton-module_offIcon__bWWxh,.ToggleButton-module_toggleButton__1-KAF[disabled]:hover .ToggleButton-module_offIcon__bWWxh{color:var(--color-black-10)}.ToggleButton-module_toggleButtonContainerInlineVariant__1YSw9{align-items:center;display:flex;flex-wrap:wrap}.ToggleButton-module_toggleButtonContainerInlineVariant__1YSw9 .ToggleButton-module_label__1dFTc{margin-bottom:0}.ToggleButton-module_toggleButtonContainerInlineVariant__1YSw9 .ToggleButton-module_toggleButton__1-KAF{margin-left:auto}.ToggleButton-module_labelContainer__xg3OB{align-items:flex-start;display:flex}.ToggleButton-module_tooltipButton__1F3Sx{display:block;margin-left:var(--spacing-2-xs)}.ToggleButton-module_toggleButtonIcon__RXT8O{cursor:pointer;left:-2px;position:absolute;top:-2px;transition:all .2s}');const g=a.forwardRef(((e,t)=>{let{id:l,label:n,checked:g,disabled:m,onChange:b,tooltipLabel:h,tooltipButtonLabel:p,tooltipText:_,variant:f="default",theme:v}=e;const T=l+"-label",E=(0,s.u)(u,v);return a.createElement("div",{className:(0,o.c)(u,"inline"===f&&"ToggleButton-module_toggleButtonContainerInlineVariant__1YSw9",E)},a.createElement("div",{className:"ToggleButton-module_labelContainer__xg3OB"},a.createElement("label",{id:T,htmlFor:l,className:"ToggleButton-module_label__1dFTc"},n),_&&a.createElement(r.T,{buttonClassName:"ToggleButton-module_tooltipButton__1F3Sx",tooltipLabel:h,buttonLabel:p},_)),a.createElement("button",{id:l,ref:t,disabled:m,type:"button","aria-pressed":g,"aria-labelledby":T,className:"ToggleButton-module_toggleButton__1-KAF",onClick:()=>{b(g)}},a.createElement("div",{className:(0,o.c)(d,"ToggleButton-module_offIcon__bWWxh")},a.createElement(i.I,{size:"m","aria-hidden":"true"})),a.createElement("div",{className:(0,o.c)(d,"ToggleButton-module_onIcon__29twM")},a.createElement(c.I,{size:"m","aria-hidden":"true"}))))}))},99295:function(e,t,l){l.r(t),l.d(t,{DefaultToggleExample:function(){return c},HorizontalToggleExample:function(){return u},ToggleExample:function(){return i}});var a=l(11151),n=l(67294),o=l(1751),r=l(31252);const s=e=>{let{children:t,pageContext:l}=e;return n.createElement(r.default,{pageContext:l},t)},i=()=>{const[e,t]=n.useState(!0);return n.createElement(o.T,{id:"toggle-button",label:"Label",checked:e,onChange:()=>t(!e)})},c=()=>{const[e,t]=n.useState(!0);return n.createElement(o.T,{id:"toggle-button-default",label:"Label",checked:e,onChange:()=>t(!e)})},u=()=>{const e=Object.assign({div:"div"},(0,a.ah)()),[t,l]=n.useState(!0);return n.createElement(e.div,{style:{maxWidth:"160px"}},n.createElement(o.T,{id:"toggle-button-horizontal",label:"Label",variant:"inline",checked:t,onChange:()=>l(!t)}))};function d(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",strong:"strong",em:"em",h4:"h4",p:"p"},(0,a.ah)(),e.components),{PlaygroundPreview:l,InternalLink:o}=t;return o||g("InternalLink",!0),l||g("PlaygroundPreview",!0),n.createElement(n.Fragment,null,n.createElement(t.h2,{id:"usage",style:{position:"relative"}},"Usage",n.createElement(t.a,{href:"#usage","aria-label":"usage permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.h3,{id:"example",style:{position:"relative"}},"Example",n.createElement(t.a,{href:"#example","aria-label":"example permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n","\n",n.createElement(l,null,n.createElement(i)),"\n",n.createElement(t.h3,{id:"principles",style:{position:"relative"}},"Principles",n.createElement(t.a,{href:"#principles","aria-label":"principles permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.ul,null,"\n",n.createElement(t.li,null,n.createElement(t.strong,null,"A label should always be provided with a toggle button."),"\n",n.createElement(t.ul,null,"\n",n.createElement(t.li,null,'Make sure that the label is clear and concise. A good toggle button label describes the effect that will happen when the toggle button is set to "On" position.'),"\n",n.createElement(t.li,null,'For example, use the label "',n.createElement(t.em,null,"Allow notifications"),'" instead of "',n.createElement(t.em,null,"Do you want to receive notifications?"),'".'),"\n"),"\n"),"\n",n.createElement(t.li,null,"The toggle button should have an immediate effect when activated.","\n",n.createElement(t.ul,null,"\n",n.createElement(t.li,null,"Toggle buttons have been inspired by real-world physical switches (e.g. a light switch). Therefore users expect something to happen immediately when the toggle button is activated.","\n",n.createElement(t.ul,null,"\n",n.createElement(t.li,null,"Also, avoid using toggle buttons if the effect requires an asynchronous call."),"\n"),"\n"),"\n",n.createElement(t.li,null,"Toggle buttons must not be used in forms that require pressing a submit button in order to the selection come into effect - unless they have an immediate effect inside the form."),"\n",n.createElement(t.li,null,"If your toggle button does not have an immediate effect, use a single ",n.createElement(o,{href:"/components/checkbox"},"Checkbox component")," instead. Also see ",n.createElement(o,{href:"/foundation/guidelines/checkbox-radiobutton-toggle"},"guidelines for choosing between radiobuttons, checkboxes and toggles.")),"\n"),"\n"),"\n",n.createElement(t.li,null,'Toggle button will always have a default option. Toggle buttons that do not have a state at all (neither "On" or "Off") must not be used.'),"\n"),"\n",n.createElement(t.h3,{id:"variations",style:{position:"relative"}},"Variations",n.createElement(t.a,{href:"#variations","aria-label":"variations permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.h4,{id:"default",style:{position:"relative"}},"Default",n.createElement(t.a,{href:"#default","aria-label":"default permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.p,null,"The default HDS toggle button variant includes a label above the toggle button familiar from other HDS form components."),"\n","\n",n.createElement(l,null,n.createElement(c)),"\n",n.createElement(t.h4,{id:"with-a-horizontal-label",style:{position:"relative"}},"With a horizontal label",n.createElement(t.a,{href:"#with-a-horizontal-label","aria-label":"with a horizontal label permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.p,null,"The toggle button label can also be positioned horizontally. This alignment is often used on smaller screens (e.g. mobile phones) and tighter user interface spaces."),"\n","\n",n.createElement(l,null,n.createElement(u)))}function g(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){return void 0===e&&(e={}),n.createElement(s,e,n.createElement(d,e))}},31252:function(e,t,l){l.r(t);var a=l(11151),n=l(67294),o=l(83428),r=l(57674),s=l(89482),i=(l(18607),l(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,a.ah)(),e.components);return i.Z||u("PageTabs",!1),i.Z.Tab||u("PageTabs.Tab",!0),i.Z.TabList||u("PageTabs.TabList",!0),i.Z.TabPanel||u("PageTabs.TabPanel",!0),n.createElement(n.Fragment,null,n.createElement(t.h1,{id:"togglebutton",style:{position:"relative"}},"ToggleButton",n.createElement(t.a,{href:"#togglebutton","aria-label":"togglebutton permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement("div",{class:"status-label-description"},n.createElement(o.S,{type:"info"},"Stable"),n.createElement(o.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),n.createElement(r.Z)),"\n",n.createElement(s.Z,null,'Toggle button allows the user to switch between two distinct states such as "On" and "Off".'),"\n",n.createElement(i.Z,{pageContext:e.pageContext},n.createElement(i.Z.TabList,null,n.createElement(i.Z.Tab,{href:"/"},"Usage"),n.createElement(i.Z.Tab,{href:"/code"},"Code"),n.createElement(i.Z.Tab,{href:"/accessibility"},"Accessibility"),n.createElement(i.Z.Tab,{href:"/customisation"},"Customisation")),n.createElement(i.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,a.ah)(),e.components);return t?n.createElement(t,e,n.createElement(c,e)):c(e)}},89482:function(e,t,l){var a=l(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:l="var(--fontsize-body-xl)",style:n={},children:o}=e;return a.createElement("p",{style:{fontSize:l,color:t,maxWidth:600,...n}},o)}},26127:function(e,t,l){var a=l(67294),n=l(14160),o=l(94671);const r="PageTabList",s="PageTabPanel",i="PageTab",c=e=>{var t;let{pageContext:l,children:c}=e;const u=l.frontmatter.slug,d=Array.isArray(c)?c:[c],g=d.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===r)),m=d.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===s)),b=null===(t=g.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===i)),h=b.findIndex((e=>u.endsWith(e.props.href))),p=-1===h?0:h,_=0===p?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return a.createElement(o.a,{initiallyActiveTab:p},a.createElement(o.a.TabList,{className:"page-tabs-list"},b.map((e=>a.createElement(o.a.Tab,{key:e.props.href,onClick:()=>(0,n.navigate)(""+("/"===e.props.href?_:_+e.props.href))},e.props.children)))),b.map(((e,t)=>a.createElement(o.a.TabPanel,{key:e.props.href},p===t?m.props.children:a.createElement("div",null)))))},u=e=>{let{children:t}=e;return a.createElement(o.a.TabList,null,t)};u.componentName=r;const d=e=>{let{href:t,slug:l,children:n}=e;return a.createElement(o.a.Tab,null,n)};d.componentName=i;const g=e=>{let{children:t}=e;return a.createElement(o.a.TabPanel,null,t)};g.componentName=s,c.TabList=u,c.Tab=d,c.TabPanel=g,t.Z=c},57674:function(e,t,l){var a=l(67294),n=l(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return a.createElement(n.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},a.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>a.createElement("li",{key:t},a.createElement("span",{className:"status-name"},t),a.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-toggle-button-tabs-mdx-4194c23478e22682f5ee.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-toggle-button-tabs-mdx-4194c23478e22682f5ee.js
new file mode 100644
index 00000000000..6f6366e7d3b
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-toggle-button-tabs-mdx-4194c23478e22682f5ee.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[2862],{83428:function(e,t,a){a.d(t,{S:function(){return i}});var s=a(80136),l=a(67294),n=a(7444),r=a(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const c=e=>{let{icon:t}=e;return l.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},t)},i=e=>{var{children:t,className:a,dataTestId:n,type:i="neutral",iconLeft:u}=e,b=(0,s._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(o.statusLabel,o[i],u&&o.statusLabelWithIcon,a),"data-testid":n},b),u&&l.createElement(c,{icon:u}),t)}},31252:function(e,t,a){a.r(t);var s=a(11151),l=a(67294),n=a(83428),r=a(57674),o=a(89482),c=(a(18607),a(26127));function i(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,s.ah)(),e.components);return c.Z||u("PageTabs",!1),c.Z.Tab||u("PageTabs.Tab",!0),c.Z.TabList||u("PageTabs.TabList",!0),c.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"togglebutton",style:{position:"relative"}},"ToggleButton",l.createElement(t.a,{href:"#togglebutton","aria-label":"togglebutton permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(n.S,{type:"info"},"Stable"),l.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(o.Z,null,'Toggle button allows the user to switch between two distinct states such as "On" and "Off".'),"\n",l.createElement(c.Z,{pageContext:e.pageContext},l.createElement(c.Z.TabList,null,l.createElement(c.Z.Tab,{href:"/"},"Usage"),l.createElement(c.Z.Tab,{href:"/code"},"Code"),l.createElement(c.Z.Tab,{href:"/accessibility"},"Accessibility"),l.createElement(c.Z.Tab,{href:"/customisation"},"Customisation")),l.createElement(c.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,s.ah)(),e.components);return t?l.createElement(t,e,l.createElement(i,e)):i(e)}},89482:function(e,t,a){var s=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:l={},children:n}=e;return s.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...l}},n)}},26127:function(e,t,a){var s=a(67294),l=a(14160),n=a(94671);const r="PageTabList",o="PageTabPanel",c="PageTab",i=e=>{var t;let{pageContext:a,children:i}=e;const u=a.frontmatter.slug,b=Array.isArray(i)?i:[i],d=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===r)),m=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===o)),h=null===(t=d.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===c)),p=h.findIndex((e=>u.endsWith(e.props.href))),_=-1===p?0:p,g=0===_?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return s.createElement(n.a,{initiallyActiveTab:_},s.createElement(n.a.TabList,{className:"page-tabs-list"},h.map((e=>s.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?g:g+e.props.href))},e.props.children)))),h.map(((e,t)=>s.createElement(n.a.TabPanel,{key:e.props.href},_===t?m.props.children:s.createElement("div",null)))))},u=e=>{let{children:t}=e;return s.createElement(n.a.TabList,null,t)};u.componentName=r;const b=e=>{let{href:t,slug:a,children:l}=e;return s.createElement(n.a.Tab,null,l)};b.componentName=c;const d=e=>{let{children:t}=e;return s.createElement(n.a.TabPanel,null,t)};d.componentName=o,i.TabList=u,i.Tab=b,i.TabPanel=d,t.Z=i},57674:function(e,t,a){var s=a(67294),l=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return s.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},s.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>s.createElement("li",{key:t},s.createElement("span",{className:"status-name"},t),s.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-tooltip-accessibility-mdx-feaf6711dd9ce70f939f.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-tooltip-accessibility-mdx-feaf6711dd9ce70f939f.js
new file mode 100644
index 00000000000..ea004882132
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-tooltip-accessibility-mdx-feaf6711dd9ce70f939f.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[7383,5165],{83428:function(e,t,a){a.d(t,{S:function(){return c}});var l=a(80136),s=a(67294),n=a(7444),r=a(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const i=e=>{let{icon:t}=e;return s.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:n,type:c="neutral",iconLeft:u}=e,d=(0,l._)(e,["children","className","dataTestId","type","iconLeft"]);return s.createElement("span",Object.assign({className:(0,r.c)(o.statusLabel,o[c],u&&o.statusLabelWithIcon,a),"data-testid":n},d),u&&s.createElement(i,{icon:u}),t)}},99807:function(e,t,a){a.r(t);var l=a(11151),s=a(67294),n=a(38516);const r=e=>{let{children:t,pageContext:a}=e;return s.createElement(n.default,{pageContext:a},t)};function o(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",ul:"ul",li:"li",code:"code"},(0,l.ah)(),e.components);return s.createElement(s.Fragment,null,s.createElement(t.h2,{id:"accessibility",style:{position:"relative"}},"Accessibility",s.createElement(t.a,{href:"#accessibility","aria-label":"accessibility permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.h3,{id:"pay-attention-to",style:{position:"relative"}},"Pay attention to",s.createElement(t.a,{href:"#pay-attention-to","aria-label":"pay attention to permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement(t.ul,null,"\n",s.createElement(t.li,null,"Even though HDS Tooltip does not include a visual title, one must be included for screen readers via using ",s.createElement(t.code,null,"aria-label"),'. The label can be as simple as "Info" but it can also feature more detailed description such as "More information about filling your personal details".'),"\n",s.createElement(t.li,null,"If a Tooltip contains a link, always open them to a new window, so that the process of filling the form is not interrupted."),"\n",s.createElement(t.li,null,"Do not make the tooltip open on hover. The user should be able to select the text inside the tooltip element."),"\n"))}t.default=function(e){return void 0===e&&(e={}),s.createElement(r,e,s.createElement(o,e))}},38516:function(e,t,a){a.r(t);var l=a(11151),s=a(67294),n=a(83428),r=a(57674),o=a(89482),i=(a(18607),a(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,l.ah)(),e.components);return i.Z||u("PageTabs",!1),i.Z.Tab||u("PageTabs.Tab",!0),i.Z.TabList||u("PageTabs.TabList",!0),i.Z.TabPanel||u("PageTabs.TabPanel",!0),s.createElement(s.Fragment,null,s.createElement(t.h1,{id:"tooltip",style:{position:"relative"}},"Tooltip",s.createElement(t.a,{href:"#tooltip","aria-label":"tooltip permalink",className:"header-anchor after"},s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",s.createElement("div",{class:"status-label-description"},s.createElement(n.S,{type:"info"},"Stable"),s.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),s.createElement(r.Z)),"\n",s.createElement(o.Z,null,"Tooltips are used to present context or background information to the user."),"\n",s.createElement(i.Z,{pageContext:e.pageContext},s.createElement(i.Z.TabList,null,s.createElement(i.Z.Tab,{href:"/"},"Usage"),s.createElement(i.Z.Tab,{href:"/code"},"Code"),s.createElement(i.Z.Tab,{href:"/accessibility"},"Accessibility")),s.createElement(i.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,l.ah)(),e.components);return t?s.createElement(t,e,s.createElement(c,e)):c(e)}},89482:function(e,t,a){var l=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:s={},children:n}=e;return l.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...s}},n)}},26127:function(e,t,a){var l=a(67294),s=a(14160),n=a(94671);const r="PageTabList",o="PageTabPanel",i="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const u=a.frontmatter.slug,d=Array.isArray(c)?c:[c],b=d.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===r)),h=d.find((e=>(0,l.isValidElement)(e)&&e.type.componentName===o)),m=null===(t=b.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===i)),p=m.findIndex((e=>u.endsWith(e.props.href))),f=-1===p?0:p,_=0===f?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return l.createElement(n.a,{initiallyActiveTab:f},l.createElement(n.a.TabList,{className:"page-tabs-list"},m.map((e=>l.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,s.navigate)(""+("/"===e.props.href?_:_+e.props.href))},e.props.children)))),m.map(((e,t)=>l.createElement(n.a.TabPanel,{key:e.props.href},f===t?h.props.children:l.createElement("div",null)))))},u=e=>{let{children:t}=e;return l.createElement(n.a.TabList,null,t)};u.componentName=r;const d=e=>{let{href:t,slug:a,children:s}=e;return l.createElement(n.a.Tab,null,s)};d.componentName=i;const b=e=>{let{children:t}=e;return l.createElement(n.a.TabPanel,null,t)};b.componentName=o,c.TabList=u,c.Tab=d,c.TabPanel=b,t.Z=c},57674:function(e,t,a){var l=a(67294),s=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return l.createElement(s.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},l.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>l.createElement("li",{key:t},l.createElement("span",{className:"status-name"},t),l.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-tooltip-code-mdx-750d33168d5ac1f44e2e.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-tooltip-code-mdx-750d33168d5ac1f44e2e.js
new file mode 100644
index 00000000000..da84d44c123
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-tooltip-code-mdx-750d33168d5ac1f44e2e.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[6544,5165],{83428:function(e,t,l){l.d(t,{S:function(){return i}});var a=l(80136),n=l(67294),o=l(7444),r=l(34300),s={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,o.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const c=e=>{let{icon:t}=e;return n.createElement("span",{className:s.statusLabelIcon,"aria-hidden":"true"},t)},i=e=>{var{children:t,className:l,dataTestId:o,type:i="neutral",iconLeft:m}=e,d=(0,a._)(e,["children","className","dataTestId","type","iconLeft"]);return n.createElement("span",Object.assign({className:(0,r.c)(s.statusLabel,s[i],m&&s.statusLabelWithIcon,l),"data-testid":o},d),m&&n.createElement(c,{icon:m}),t)}},56914:function(e,t,l){l.r(t);var a=l(11151),n=l(67294),o=l(45422),r=l(8381),s=l(96293),c=l(38516);const i=e=>{let{children:t,pageContext:l}=e;return n.createElement(c.default,{pageContext:l},t)};function m(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",h4:"h4",pre:"pre",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",strong:"strong",p:"p"},(0,a.ah)(),e.components),{Playground:l,Link:c,ExternalLink:i}=t;return i||d("ExternalLink",!0),c||d("Link",!0),l||d("Playground",!0),n.createElement(n.Fragment,null,n.createElement(t.h2,{id:"code",style:{position:"relative"}},"Code",n.createElement(t.a,{href:"#code","aria-label":"code permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.h3,{id:"code-examples",style:{position:"relative"}},"Code examples",n.createElement(t.a,{href:"#code-examples","aria-label":"code examples permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.h4,{id:"default",style:{position:"relative"}},"Default",n.createElement(t.a,{href:"#default","aria-label":"default permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(l,{scope:{Tooltip:o.T}},n.createElement(t.pre,null,n.createElement(t.code,{className:"language-jsx"},"import { Tooltip } from 'hds-react';\n\n() => (\n  <Tooltip>Tooltips contain \"nice to have\" information. Default Tooltip contents should not be longer than two to three sentences. For longer descriptions, provide a link to a separate page.</Tooltip>\n)\n"))),"\n",n.createElement(t.h4,{id:"small",style:{position:"relative"}},"Small",n.createElement(t.a,{href:"#small","aria-label":"small permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(l,{scope:{Tooltip:o.T}},n.createElement(t.pre,null,n.createElement(t.code,{className:"language-jsx"},"import { Tooltip } from 'hds-react';\n\n() => (\n  <Tooltip small>Less than five words long</Tooltip>\n)\n"))),"\n",n.createElement(t.h4,{id:"positioning",style:{position:"relative"}},"Positioning",n.createElement(t.a,{href:"#positioning","aria-label":"positioning permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(l,{scope:{Tooltip:o.T}},n.createElement(t.pre,null,n.createElement(t.code,{className:"language-jsx"},'import { Tooltip } from \'hds-react\';\n\n() => (<>\n  <Tooltip placement="auto">Tooltip with auto placement setting</Tooltip>\n  <Tooltip placement="auto-start">Tooltip with auto-start placement setting</Tooltip>\n  <Tooltip placement="auto-end">Tooltip with auto-end placement setting</Tooltip>\n  <Tooltip placement="top">Tooltip with top placement setting</Tooltip>\n  <Tooltip placement="top-start">Tooltip with top-start placement setting</Tooltip>\n  <Tooltip placement="top-end">Tooltip with top-end placement setting</Tooltip>\n  <Tooltip placement="bottom">Tooltip with bottom placement setting</Tooltip>\n  <Tooltip placement="bottom-start">Tooltip with bottom-start placement setting</Tooltip>\n  <Tooltip placement="bottom-end">Tooltip with bottom-end placement setting</Tooltip>\n  <Tooltip placement="right">Tooltip with right placement setting</Tooltip>\n  <Tooltip placement="right-start">Tooltip with right-start placement setting</Tooltip>\n  <Tooltip placement="right-end">Tooltip with right-end placement setting</Tooltip>\n  <Tooltip placement="left">Tooltip with left placement setting</Tooltip>\n  <Tooltip placement="left-start">Tooltip with left-start placement setting</Tooltip>\n  <Tooltip placement="left-end">Tooltip with left-end placement setting</Tooltip>\n</>)\n'))),"\n",n.createElement(t.h3,{id:"packages",style:{position:"relative"}},"Packages",n.createElement(t.a,{href:"#packages","aria-label":"packages permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.table,null,n.createElement(t.thead,null,n.createElement(t.tr,null,n.createElement(t.th,null,"Package"),n.createElement(t.th,null,"Included"),n.createElement(t.th,null,"Storybook link"),n.createElement(t.th,null,"Source link"))),n.createElement(t.tbody,null,n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.strong,null,"HDS React")),n.createElement(t.td,null,n.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},n.createElement(r.I)," Yes ")),n.createElement(t.td,null,n.createElement(c,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/story/components-tooltip--default"},"View in Storybook")),n.createElement(t.td,null,n.createElement(i,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/react/src/components/tooltip"},"View source"))),n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.strong,null,"HDS Core")),n.createElement(t.td,null,n.createElement("div",{style:{display:"flex",gap:"var(--spacing-3-xs)"}},n.createElement(s.I)," No ")),n.createElement(t.td,null,"-"),n.createElement(t.td,null,"-")))),"\n",n.createElement(t.h3,{id:"properties",style:{position:"relative"}},"Properties",n.createElement(t.a,{href:"#properties","aria-label":"properties permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement(t.p,null,"Note! You can find the full list of properties in the ",n.createElement(c,{openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab",href:"/storybook/react/?path=/docs/components-tooltip--default"},"React Storybook.")),"\n",n.createElement(t.table,null,n.createElement(t.thead,null,n.createElement(t.tr,null,n.createElement(t.th,null,"Property"),n.createElement(t.th,null,"Description"),n.createElement(t.th,null,"Values"),n.createElement(t.th,null,"Default value"))),n.createElement(t.tbody,null,n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"boxShadow")),n.createElement(t.td,null,"If set to true, the tooltip displays a box shadow behind it."),n.createElement(t.td,null,n.createElement(t.code,null,"boolean")),n.createElement(t.td,null,"false")),n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"placement")),n.createElement(t.td,null,"The placement of the opened tooltip."),n.createElement(t.td,null,n.createElement(t.code,null,'"auto"')," ",n.createElement(t.code,null,'"auto-start"')," ",n.createElement(t.code,null,'"auto-end"')," ",n.createElement(t.code,null,'"top"')," ",n.createElement(t.code,null,'"top-start"')," ",n.createElement(t.code,null,'"top-end"')," ",n.createElement(t.code,null,'"bottom"')," ",n.createElement(t.code,null,'"bottom-start"')," ",n.createElement(t.code,null,'"bottom-end"')," ",n.createElement(t.code,null,'"right"')," ",n.createElement(t.code,null,'"right-start"')," ",n.createElement(t.code,null,'"right-end"')," ",n.createElement(t.code,null,'"left"')," ",n.createElement(t.code,null,'"left-start"')," ",n.createElement(t.code,null,'"left-end"')),n.createElement(t.td,null,n.createElement(t.code,null,'"auto"'))),n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"small")),n.createElement(t.td,null,"If set to true, the small tooltip variant is used."),n.createElement(t.td,null,n.createElement(t.code,null,"boolean")),n.createElement(t.td,null,"false")),n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"buttonLabel")),n.createElement(t.td,null,"Aria-label text for the tooltip trigger button."),n.createElement(t.td,null,n.createElement(t.code,null,"string")),n.createElement(t.td,null,'"Tooltip"')),n.createElement(t.tr,null,n.createElement(t.td,null,n.createElement(t.code,null,"tooltipLabel")),n.createElement(t.td,null,"Aria-label text for the tooltip."),n.createElement(t.td,null,n.createElement(t.code,null,"string")),n.createElement(t.td,null,'"Tooltip"')),n.createElement(t.tr,null,n.createElement(t.td,null,"[Table 1:Tooltip properties]"),n.createElement(t.td),n.createElement(t.td),n.createElement(t.td)))))}function d(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){return void 0===e&&(e={}),n.createElement(i,e,n.createElement(m,e))}},38516:function(e,t,l){l.r(t);var a=l(11151),n=l(67294),o=l(83428),r=l(57674),s=l(89482),c=(l(18607),l(26127));function i(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,a.ah)(),e.components);return c.Z||m("PageTabs",!1),c.Z.Tab||m("PageTabs.Tab",!0),c.Z.TabList||m("PageTabs.TabList",!0),c.Z.TabPanel||m("PageTabs.TabPanel",!0),n.createElement(n.Fragment,null,n.createElement(t.h1,{id:"tooltip",style:{position:"relative"}},"Tooltip",n.createElement(t.a,{href:"#tooltip","aria-label":"tooltip permalink",className:"header-anchor after"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",n.createElement("div",{class:"status-label-description"},n.createElement(o.S,{type:"info"},"Stable"),n.createElement(o.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),n.createElement(r.Z)),"\n",n.createElement(s.Z,null,"Tooltips are used to present context or background information to the user."),"\n",n.createElement(c.Z,{pageContext:e.pageContext},n.createElement(c.Z.TabList,null,n.createElement(c.Z.Tab,{href:"/"},"Usage"),n.createElement(c.Z.Tab,{href:"/code"},"Code"),n.createElement(c.Z.Tab,{href:"/accessibility"},"Accessibility")),n.createElement(c.Z.TabPanel,null,e.children)))}function m(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,a.ah)(),e.components);return t?n.createElement(t,e,n.createElement(i,e)):i(e)}},89482:function(e,t,l){var a=l(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:l="var(--fontsize-body-xl)",style:n={},children:o}=e;return a.createElement("p",{style:{fontSize:l,color:t,maxWidth:600,...n}},o)}},26127:function(e,t,l){var a=l(67294),n=l(14160),o=l(94671);const r="PageTabList",s="PageTabPanel",c="PageTab",i=e=>{var t;let{pageContext:l,children:i}=e;const m=l.frontmatter.slug,d=Array.isArray(i)?i:[i],p=d.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===r)),u=d.find((e=>(0,a.isValidElement)(e)&&e.type.componentName===s)),h=null===(t=p.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===c)),b=h.findIndex((e=>m.endsWith(e.props.href))),E=-1===b?0:b,g=0===E?m:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(m);return a.createElement(o.a,{initiallyActiveTab:E},a.createElement(o.a.TabList,{className:"page-tabs-list"},h.map((e=>a.createElement(o.a.Tab,{key:e.props.href,onClick:()=>(0,n.navigate)(""+("/"===e.props.href?g:g+e.props.href))},e.props.children)))),h.map(((e,t)=>a.createElement(o.a.TabPanel,{key:e.props.href},E===t?u.props.children:a.createElement("div",null)))))},m=e=>{let{children:t}=e;return a.createElement(o.a.TabList,null,t)};m.componentName=r;const d=e=>{let{href:t,slug:l,children:n}=e;return a.createElement(o.a.Tab,null,n)};d.componentName=c;const p=e=>{let{children:t}=e;return a.createElement(o.a.TabPanel,null,t)};p.componentName=s,i.TabList=m,i.Tab=d,i.TabPanel=p,t.Z=i},57674:function(e,t,l){var a=l(67294),n=l(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return a.createElement(n.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},a.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>a.createElement("li",{key:t},a.createElement("span",{className:"status-name"},t),a.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-tooltip-index-mdx-b6b32a144ad268de98cd.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-tooltip-index-mdx-b6b32a144ad268de98cd.js
new file mode 100644
index 00000000000..fdddcaf8b18
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-tooltip-index-mdx-b6b32a144ad268de98cd.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[237,5165],{83428:function(e,t,a){a.d(t,{S:function(){return c}});var n=a(80136),l=a(67294),s=a(7444),i=a(34300),r={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,s.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const o=e=>{let{icon:t}=e;return l.createElement("span",{className:r.statusLabelIcon,"aria-hidden":"true"},t)},c=e=>{var{children:t,className:a,dataTestId:s,type:c="neutral",iconLeft:d}=e,h=(0,n._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,i.c)(r.statusLabel,r[c],d&&r.statusLabelWithIcon,a),"data-testid":s},h),d&&l.createElement(o,{icon:d}),t)}},89674:function(e,t,a){a.r(t);var n=a(11151),l=a(67294),s=a(45422),i=a(38516);const r=e=>{let{children:t,pageContext:a}=e;return l.createElement(i.default,{pageContext:a},t)};function o(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",p:"p",ul:"ul",li:"li",strong:"strong",h4:"h4"},(0,n.ah)(),e.components),{PlaygroundPreview:a,InternalLink:i}=t;return i||c("InternalLink",!0),a||c("PlaygroundPreview",!0),l.createElement(l.Fragment,null,l.createElement(t.h2,{id:"usage",style:{position:"relative"}},"Usage",l.createElement(t.a,{href:"#usage","aria-label":"usage permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h3,{id:"example",style:{position:"relative"}},"Example",l.createElement(t.a,{href:"#example","aria-label":"example permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(a,null,l.createElement(s.T,null,l.createElement(t.p,null,'Tooltips contain "nice to have" information. Default Tooltip contents should not be longer than two to three\nsentences. For longer descriptions, provide a link to a separate page.'))),"\n",l.createElement(t.h3,{id:"principles",style:{position:"relative"}},"Principles",l.createElement(t.a,{href:"#principles","aria-label":"principles permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,l.createElement(t.strong,null,"Tooltip must not be the sole way to provide essential information that the user must know to perform a task (such as inputting a value)."),' This means Tooltip should display "nice to have" but not essential information.',"\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,"For more information on what elements should be used to present different kinds of information, refer to ",l.createElement(i,{href:"/patterns/forms/form-building#providing-instructions"},"HDS Form pattern - Providing instructions guideline")),"\n"),"\n"),"\n",l.createElement(t.li,null,l.createElement(t.strong,null,"Be clear and consise in the Tooltip description.")," Keep the description as short as two to three sentences. If longer explanations are needed, provide a link to a separate page."),"\n",l.createElement(t.li,null,"HDS Tooltips come in two sizes; Default and Small. Only use the Small variant if the Tooltip text is less than 5 words long. Otherwise you should use the Default size variant."),"\n",l.createElement(t.li,null,"HDS Tooltip implementation has an automatic placement feature that is the recommended option. You may also override the Tooltip positioning manually but always remember to test that the Tooltip is fully visible on all screen sizes."),"\n"),"\n",l.createElement(t.h3,{id:"variations",style:{position:"relative"}},"Variations",l.createElement(t.a,{href:"#variations","aria-label":"variations permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.h4,{id:"default",style:{position:"relative"}},"Default",l.createElement(t.a,{href:"#default","aria-label":"default permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"The default size Tooltip variant works in most situations where the Tooltip description is longer than a few words."),"\n",l.createElement(a,null,l.createElement(s.T,null,l.createElement(t.p,null,'Tooltips contain "nice to have" information. Default Tooltip contents should not be longer than two to three\nsentences. For longer descriptions, provide a link to a separate page.'))),"\n",l.createElement(t.h4,{id:"small",style:{position:"relative"}},"Small",l.createElement(t.a,{href:"#small","aria-label":"small permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"A small size Tooltip variant can be used instead of the default one if the description is only a few words long (less than 5 words). Also, note that the small Tooltip should never replace labels (e.g. for icons). WCAG requires that labels are always visible and not hidden behind a Tooltip."),"\n",l.createElement(a,null,l.createElement(s.T,{small:!0},"Less than five words long")),"\n",l.createElement(t.h4,{id:"positioning",style:{position:"relative"}},"Positioning",l.createElement(t.a,{href:"#positioning","aria-label":"positioning permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement(t.p,null,"HDS Tooltip implementation has automatic placement feature. It will automatically try to keep the Tooltip in the view and dynamically updates the positioning if the screen size changes. Tooltip positioning can also be overridden manually."),"\n",l.createElement(t.p,null,"There are 15 available position settings. Please refer to the Code tab for all examples."),"\n",l.createElement(a,null,l.createElement(s.T,{placement:"top"},"Tooltip with top placement setting"),l.createElement(s.T,{placement:"bottom"},"Tooltip with bottom placement setting")))}function c(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){return void 0===e&&(e={}),l.createElement(r,e,l.createElement(o,e))}},38516:function(e,t,a){a.r(t);var n=a(11151),l=a(67294),s=a(83428),i=a(57674),r=a(89482),o=(a(18607),a(26127));function c(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,n.ah)(),e.components);return o.Z||d("PageTabs",!1),o.Z.Tab||d("PageTabs.Tab",!0),o.Z.TabList||d("PageTabs.TabList",!0),o.Z.TabPanel||d("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"tooltip",style:{position:"relative"}},"Tooltip",l.createElement(t.a,{href:"#tooltip","aria-label":"tooltip permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(s.S,{type:"info"},"Stable"),l.createElement(s.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(i.Z)),"\n",l.createElement(r.Z,null,"Tooltips are used to present context or background information to the user."),"\n",l.createElement(o.Z,{pageContext:e.pageContext},l.createElement(o.Z.TabList,null,l.createElement(o.Z.Tab,{href:"/"},"Usage"),l.createElement(o.Z.Tab,{href:"/code"},"Code"),l.createElement(o.Z.Tab,{href:"/accessibility"},"Accessibility")),l.createElement(o.Z.TabPanel,null,e.children)))}function d(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,n.ah)(),e.components);return t?l.createElement(t,e,l.createElement(c,e)):c(e)}},89482:function(e,t,a){var n=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:l={},children:s}=e;return n.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...l}},s)}},26127:function(e,t,a){var n=a(67294),l=a(14160),s=a(94671);const i="PageTabList",r="PageTabPanel",o="PageTab",c=e=>{var t;let{pageContext:a,children:c}=e;const d=a.frontmatter.slug,h=Array.isArray(c)?c:[c],m=h.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===i)),u=h.find((e=>(0,n.isValidElement)(e)&&e.type.componentName===r)),p=null===(t=m.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===o)),b=p.findIndex((e=>d.endsWith(e.props.href))),f=-1===b?0:b,g=0===f?d:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(d);return n.createElement(s.a,{initiallyActiveTab:f},n.createElement(s.a.TabList,{className:"page-tabs-list"},p.map((e=>n.createElement(s.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?g:g+e.props.href))},e.props.children)))),p.map(((e,t)=>n.createElement(s.a.TabPanel,{key:e.props.href},f===t?u.props.children:n.createElement("div",null)))))},d=e=>{let{children:t}=e;return n.createElement(s.a.TabList,null,t)};d.componentName=i;const h=e=>{let{href:t,slug:a,children:l}=e;return n.createElement(s.a.Tab,null,l)};h.componentName=o;const m=e=>{let{children:t}=e;return n.createElement(s.a.TabPanel,null,t)};m.componentName=r,c.TabList=d,c.Tab=h,c.TabPanel=m,t.Z=c},57674:function(e,t,a){var n=a(67294),l=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return n.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},n.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>n.createElement("li",{key:t},n.createElement("span",{className:"status-name"},t),n.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-components-tooltip-tabs-mdx-d366b5790aae1902bc71.js b/docs/hds-1817-stepbystep-docs/component---src-docs-components-tooltip-tabs-mdx-d366b5790aae1902bc71.js
new file mode 100644
index 00000000000..6f9395b3b82
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-components-tooltip-tabs-mdx-d366b5790aae1902bc71.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[5165],{83428:function(e,t,a){a.d(t,{S:function(){return i}});var s=a(80136),l=a(67294),n=a(7444),r=a(34300),o={statusLabel:"StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI",statusLabelWithIcon:"StatusLabel-module_statusLabelWithIcon__5lKVk status-label_hds-status-label--with-icon__3bHf6",statusLabelIcon:"StatusLabel-module_statusLabelIcon__2SAou status-label_hds-status-label-icon__3K58a",info:"StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H",success:"StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST",alert:"StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX",error:"StatusLabel-module_error__zNgn8 status-label_hds-status-label--error__2EYi4"};(0,n.s)(".status-label_hds-status-label__1L8YI{--status-label-background:var(--color-black-10);--status-label-color:var(--color-black-90);--status-label-height:32px;background-color:var(--status-label-background);border-radius:20px;color:var(--status-label-color);display:inline-block;font-size:var(--fontsize-body-s);line-height:var(--status-label-height);min-height:var(--status-label-height);padding:0 var(--spacing-2-xs);vertical-align:middle}.status-label_hds-status-label--with-icon__3bHf6{align-items:center;display:inline-flex;padding-left:var(--spacing-3-xs)}.status-label_hds-status-label-icon__3K58a{height:var(--spacing-m);margin-right:var(--spacing-3-xs);width:var(--spacing-m)}.status-label_hds-status-label--info__J28-H{--status-label-background:var(--color-info);--status-label-color:var(--color-white)}.status-label_hds-status-label--success__3jiST{--status-label-background:var(--color-success);--status-label-color:var(--color-white)}.status-label_hds-status-label--alert__1ecsX{--status-label-background:var(--color-alert)}.status-label_hds-status-label--error__2EYi4{--status-label-background:var(--color-error);--status-label-color:var(--color-white)}");const c=e=>{let{icon:t}=e;return l.createElement("span",{className:o.statusLabelIcon,"aria-hidden":"true"},t)},i=e=>{var{children:t,className:a,dataTestId:n,type:i="neutral",iconLeft:u}=e,b=(0,s._)(e,["children","className","dataTestId","type","iconLeft"]);return l.createElement("span",Object.assign({className:(0,r.c)(o.statusLabel,o[i],u&&o.statusLabelWithIcon,a),"data-testid":n},b),u&&l.createElement(c,{icon:u}),t)}},38516:function(e,t,a){a.r(t);var s=a(11151),l=a(67294),n=a(83428),r=a(57674),o=a(89482),c=(a(18607),a(26127));function i(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,s.ah)(),e.components);return c.Z||u("PageTabs",!1),c.Z.Tab||u("PageTabs.Tab",!0),c.Z.TabList||u("PageTabs.TabList",!0),c.Z.TabPanel||u("PageTabs.TabPanel",!0),l.createElement(l.Fragment,null,l.createElement(t.h1,{id:"tooltip",style:{position:"relative"}},"Tooltip",l.createElement(t.a,{href:"#tooltip","aria-label":"tooltip permalink",className:"header-anchor after"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",l.createElement("div",{class:"status-label-description"},l.createElement(n.S,{type:"info"},"Stable"),l.createElement(n.S,{type:"success",style:{marginLeft:"var(--spacing-xs)"}},"Accessible"),l.createElement(r.Z)),"\n",l.createElement(o.Z,null,"Tooltips are used to present context or background information to the user."),"\n",l.createElement(c.Z,{pageContext:e.pageContext},l.createElement(c.Z.TabList,null,l.createElement(c.Z.Tab,{href:"/"},"Usage"),l.createElement(c.Z.Tab,{href:"/code"},"Code"),l.createElement(c.Z.Tab,{href:"/accessibility"},"Accessibility")),l.createElement(c.Z.TabPanel,null,e.children)))}function u(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,s.ah)(),e.components);return t?l.createElement(t,e,l.createElement(i,e)):i(e)}},89482:function(e,t,a){var s=a(67294);t.Z=e=>{let{color:t="var(--color-black-90)",size:a="var(--fontsize-body-xl)",style:l={},children:n}=e;return s.createElement("p",{style:{fontSize:a,color:t,maxWidth:600,...l}},n)}},26127:function(e,t,a){var s=a(67294),l=a(14160),n=a(94671);const r="PageTabList",o="PageTabPanel",c="PageTab",i=e=>{var t;let{pageContext:a,children:i}=e;const u=a.frontmatter.slug,b=Array.isArray(i)?i:[i],d=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===r)),m=b.find((e=>(0,s.isValidElement)(e)&&e.type.componentName===o)),h=null===(t=d.props)||void 0===t?void 0:t.children.filter((e=>e.type.componentName===c)),p=h.findIndex((e=>u.endsWith(e.props.href))),_=-1===p?0:p,f=0===_?u:(e=>"/"+e.trim().split("/").filter((e=>!!e)).slice(0,-1).join("/"))(u);return s.createElement(n.a,{initiallyActiveTab:_},s.createElement(n.a.TabList,{className:"page-tabs-list"},h.map((e=>s.createElement(n.a.Tab,{key:e.props.href,onClick:()=>(0,l.navigate)(""+("/"===e.props.href?f:f+e.props.href))},e.props.children)))),h.map(((e,t)=>s.createElement(n.a.TabPanel,{key:e.props.href},_===t?m.props.children:s.createElement("div",null)))))},u=e=>{let{children:t}=e;return s.createElement(n.a.TabList,null,t)};u.componentName=r;const b=e=>{let{href:t,slug:a,children:l}=e;return s.createElement(n.a.Tab,null,l)};b.componentName=c;const d=e=>{let{children:t}=e;return s.createElement(n.a.TabPanel,null,t)};d.componentName=o,i.TabList=u,i.Tab=b,i.TabPanel=d,t.Z=i},57674:function(e,t,a){var s=a(67294),l=a(45422);t.Z=()=>{const e={Draft:"The component is work in progress",Beta:"The component is being tested",Stable:"The component has been tested and defects have been fixed",Accessible:"The component has been reviewed for accessibility",Deprecated:"The component will be removed"};return s.createElement(l.T,{placement:"right-end",className:"status-label-tooltip",boxShadow:!0},s.createElement("ul",{className:"status-label-definitions"},Object.keys(e).map((t=>s.createElement("li",{key:t},s.createElement("span",{className:"status-name"},t),s.createElement("span",null,e[t]))))))}}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-foundation-visual-assets-icons-list-mdx-d056be11b6d5144d24be.js b/docs/hds-1817-stepbystep-docs/component---src-docs-foundation-visual-assets-icons-list-mdx-d056be11b6d5144d24be.js
new file mode 100644
index 00000000000..a75b3e2a2b9
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-foundation-visual-assets-icons-list-mdx-d056be11b6d5144d24be.js
@@ -0,0 +1,2 @@
+/*! For license information please see component---src-docs-foundation-visual-assets-icons-list-mdx-d056be11b6d5144d24be.js.LICENSE.txt */
+(self.webpackChunksite=self.webpackChunksite||[]).push([[3013],{30547:function(e,t){var n;n=function(e){e.version="1.2.0";var t=function(){for(var e=0,t=new Array(256),n=0;256!=n;++n)e=1&(e=1&(e=1&(e=1&(e=1&(e=1&(e=1&(e=1&(e=n)?-306674912^e>>>1:e>>>1)?-306674912^e>>>1:e>>>1)?-306674912^e>>>1:e>>>1)?-306674912^e>>>1:e>>>1)?-306674912^e>>>1:e>>>1)?-306674912^e>>>1:e>>>1)?-306674912^e>>>1:e>>>1)?-306674912^e>>>1:e>>>1,t[n]=e;return"undefined"!=typeof Int32Array?new Int32Array(t):t}();e.table=t,e.bstr=function(e,n){for(var o=-1^n,r=e.length-1,l=0;l<r;)o=(o=o>>>8^t[255&(o^e.charCodeAt(l++))])>>>8^t[255&(o^e.charCodeAt(l++))];return l===r&&(o=o>>>8^t[255&(o^e.charCodeAt(l))]),-1^o},e.buf=function(e,n){if(e.length>1e4)return function(e,n){for(var o=-1^n,r=e.length-7,l=0;l<r;)o=(o=(o=(o=(o=(o=(o=(o=o>>>8^t[255&(o^e[l++])])>>>8^t[255&(o^e[l++])])>>>8^t[255&(o^e[l++])])>>>8^t[255&(o^e[l++])])>>>8^t[255&(o^e[l++])])>>>8^t[255&(o^e[l++])])>>>8^t[255&(o^e[l++])])>>>8^t[255&(o^e[l++])];for(;l<r+7;)o=o>>>8^t[255&(o^e[l++])];return-1^o}(e,n);for(var o=-1^n,r=e.length-3,l=0;l<r;)o=(o=(o=(o=o>>>8^t[255&(o^e[l++])])>>>8^t[255&(o^e[l++])])>>>8^t[255&(o^e[l++])])>>>8^t[255&(o^e[l++])];for(;l<r+3;)o=o>>>8^t[255&(o^e[l++])];return-1^o},e.str=function(e,n){for(var o,r,l=-1^n,a=0,i=e.length;a<i;)(o=e.charCodeAt(a++))<128?l=l>>>8^t[255&(l^o)]:o<2048?l=(l=l>>>8^t[255&(l^(192|o>>6&31))])>>>8^t[255&(l^(128|63&o))]:o>=55296&&o<57344?(o=64+(1023&o),r=1023&e.charCodeAt(a++),l=(l=(l=(l=l>>>8^t[255&(l^(240|o>>8&7))])>>>8^t[255&(l^(128|o>>2&63))])>>>8^t[255&(l^(128|r>>6&15|(3&o)<<4))])>>>8^t[255&(l^(128|63&r))]):l=(l=(l=l>>>8^t[255&(l^(224|o>>12&15))])>>>8^t[255&(l^(128|o>>6&63))])>>>8^t[255&(l^(128|63&o))];return-1^l}},"undefined"==typeof DO_NOT_EXPORT_CRC?n(t):n({})},90394:function(e,t,n){"use strict";var o,r=n(95103),l=(o=r)&&o.__esModule?o:{default:o};function a(e,t,n){try{Object.defineProperty(e,t,n)}catch(o){}}function i(e,t){Object.getOwnPropertyNames(e).forEach((function(n){return a(t,n,Object.getOwnPropertyDescriptor(e,n))}))}t.Z=function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},o=e;return i(t,e),e.length!==t.length&&i(o=(0,l.default)(t.length,e),t),n.hasOwnProperty("toString")?a(o,"toString",{configurable:!0,writable:!1,enumerable:!1,value:function(){return"function"==typeof n.toString?n.toString(t):n.toString}}):a(o,"toString",{configurable:!0,writable:!1,enumerable:!1,value:function(){return String(t)}}),n.hasOwnProperty("name")&&a(o,"name",{configurable:!0,writable:!1,enumerable:!1,value:"function"==typeof n.name?n.name(t):n.name}),o}},35447:function(e,t,n){var o=n(24023),r=Object.prototype.hasOwnProperty,l="undefined"!=typeof Map;function a(){this._array=[],this._set=l?new Map:Object.create(null)}a.fromArray=function(e,t){for(var n=new a,o=0,r=e.length;o<r;o++)n.add(e[o],t);return n},a.prototype.size=function(){return l?this._set.size:Object.getOwnPropertyNames(this._set).length},a.prototype.add=function(e,t){var n=l?e:o.toSetString(e),a=l?this.has(e):r.call(this._set,n),i=this._array.length;a&&!t||this._array.push(e),a||(l?this._set.set(e,i):this._set[n]=i)},a.prototype.has=function(e){if(l)return this._set.has(e);var t=o.toSetString(e);return r.call(this._set,t)},a.prototype.indexOf=function(e){if(l){var t=this._set.get(e);if(t>=0)return t}else{var n=o.toSetString(e);if(r.call(this._set,n))return this._set[n]}throw new Error('"'+e+'" is not in the set.')},a.prototype.at=function(e){if(e>=0&&e<this._array.length)return this._array[e];throw new Error("No element indexed by "+e)},a.prototype.toArray=function(){return this._array.slice()},t.I=a},62725:function(e,t,n){var o=n(4817);t.encode=function(e){var t,n="",r=function(e){return e<0?1+(-e<<1):0+(e<<1)}(e);do{t=31&r,(r>>>=5)>0&&(t|=32),n+=o.encode(t)}while(r>0);return n},t.decode=function(e,t,n){var r,l,a,i,c=e.length,s=0,u=0;do{if(t>=c)throw new Error("Expected more digits in base 64 VLQ value.");if(-1===(l=o.decode(e.charCodeAt(t++))))throw new Error("Invalid base64 digit: "+e.charAt(t-1));r=!!(32&l),s+=(l&=31)<<u,u+=5}while(r);n.value=(i=(a=s)>>1,1==(1&a)?-i:i),n.rest=t}},4817:function(e,t){var n="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/".split("");t.encode=function(e){if(0<=e&&e<n.length)return n[e];throw new TypeError("Must be between 0 and 63: "+e)},t.decode=function(e){return 65<=e&&e<=90?e-65:97<=e&&e<=122?e-97+26:48<=e&&e<=57?e-48+52:43==e?62:47==e?63:-1}},89106:function(e,t){function n(e,o,r,l,a,i){var c=Math.floor((o-e)/2)+e,s=a(r,l[c],!0);return 0===s?c:s>0?o-c>1?n(c,o,r,l,a,i):i==t.LEAST_UPPER_BOUND?o<l.length?o:-1:c:c-e>1?n(e,c,r,l,a,i):i==t.LEAST_UPPER_BOUND?c:e<0?-1:e}t.GREATEST_LOWER_BOUND=1,t.LEAST_UPPER_BOUND=2,t.search=function(e,o,r,l){if(0===o.length)return-1;var a=n(-1,o.length,e,o,r,l||t.GREATEST_LOWER_BOUND);if(a<0)return-1;for(;a-1>=0&&0===r(o[a],o[a-1],!0);)--a;return a}},68626:function(e,t,n){var o=n(24023);function r(){this._array=[],this._sorted=!0,this._last={generatedLine:-1,generatedColumn:0}}r.prototype.unsortedForEach=function(e,t){this._array.forEach(e,t)},r.prototype.add=function(e){var t,n,r,l,a,i;t=this._last,n=e,r=t.generatedLine,l=n.generatedLine,a=t.generatedColumn,i=n.generatedColumn,l>r||l==r&&i>=a||o.compareByGeneratedPositionsInflated(t,n)<=0?(this._last=e,this._array.push(e)):(this._sorted=!1,this._array.push(e))},r.prototype.toArray=function(){return this._sorted||(this._array.sort(o.compareByGeneratedPositionsInflated),this._sorted=!0),this._array},t.H=r},39213:function(e,t){function n(e,t,n){var o=e[t];e[t]=e[n],e[n]=o}function o(e,t,r,l){if(r<l){var a=r-1;n(e,(u=r,d=l,Math.round(u+Math.random()*(d-u))),l);for(var i=e[l],c=r;c<l;c++)t(e[c],i)<=0&&n(e,a+=1,c);n(e,a+1,c);var s=a+1;o(e,t,r,s-1),o(e,t,s+1,l)}var u,d}t.U=function(e,t){o(e,t,0,e.length-1)}},17447:function(e,t,n){var o=n(24023),r=n(89106),l=n(35447).I,a=n(62725),i=n(39213).U;function c(e,t){var n=e;return"string"==typeof e&&(n=o.parseSourceMapInput(e)),null!=n.sections?new d(n,t):new s(n,t)}function s(e,t){var n=e;"string"==typeof e&&(n=o.parseSourceMapInput(e));var r=o.getArg(n,"version"),a=o.getArg(n,"sources"),i=o.getArg(n,"names",[]),c=o.getArg(n,"sourceRoot",null),s=o.getArg(n,"sourcesContent",null),u=o.getArg(n,"mappings"),d=o.getArg(n,"file",null);if(r!=this._version)throw new Error("Unsupported version: "+r);c&&(c=o.normalize(c)),a=a.map(String).map(o.normalize).map((function(e){return c&&o.isAbsolute(c)&&o.isAbsolute(e)?o.relative(c,e):e})),this._names=l.fromArray(i.map(String),!0),this._sources=l.fromArray(a,!0),this._absoluteSources=this._sources.toArray().map((function(e){return o.computeSourceURL(c,e,t)})),this.sourceRoot=c,this.sourcesContent=s,this._mappings=u,this._sourceMapURL=t,this.file=d}function u(){this.generatedLine=0,this.generatedColumn=0,this.source=null,this.originalLine=null,this.originalColumn=null,this.name=null}function d(e,t){var n=e;"string"==typeof e&&(n=o.parseSourceMapInput(e));var r=o.getArg(n,"version"),a=o.getArg(n,"sections");if(r!=this._version)throw new Error("Unsupported version: "+r);this._sources=new l,this._names=new l;var i={line:-1,column:0};this._sections=a.map((function(e){if(e.url)throw new Error("Support for url field in sections not implemented.");var n=o.getArg(e,"offset"),r=o.getArg(n,"line"),l=o.getArg(n,"column");if(r<i.line||r===i.line&&l<i.column)throw new Error("Section offsets must be ordered and non-overlapping.");return i=n,{generatedOffset:{generatedLine:r+1,generatedColumn:l+1},consumer:new c(o.getArg(e,"map"),t)}}))}c.fromSourceMap=function(e,t){return s.fromSourceMap(e,t)},c.prototype._version=3,c.prototype.__generatedMappings=null,Object.defineProperty(c.prototype,"_generatedMappings",{configurable:!0,enumerable:!0,get:function(){return this.__generatedMappings||this._parseMappings(this._mappings,this.sourceRoot),this.__generatedMappings}}),c.prototype.__originalMappings=null,Object.defineProperty(c.prototype,"_originalMappings",{configurable:!0,enumerable:!0,get:function(){return this.__originalMappings||this._parseMappings(this._mappings,this.sourceRoot),this.__originalMappings}}),c.prototype._charIsMappingSeparator=function(e,t){var n=e.charAt(t);return";"===n||","===n},c.prototype._parseMappings=function(e,t){throw new Error("Subclasses must implement _parseMappings")},c.GENERATED_ORDER=1,c.ORIGINAL_ORDER=2,c.GREATEST_LOWER_BOUND=1,c.LEAST_UPPER_BOUND=2,c.prototype.eachMapping=function(e,t,n){var r,l=t||null;switch(n||c.GENERATED_ORDER){case c.GENERATED_ORDER:r=this._generatedMappings;break;case c.ORIGINAL_ORDER:r=this._originalMappings;break;default:throw new Error("Unknown order of iteration.")}var a=this.sourceRoot;r.map((function(e){var t=null===e.source?null:this._sources.at(e.source);return{source:t=o.computeSourceURL(a,t,this._sourceMapURL),generatedLine:e.generatedLine,generatedColumn:e.generatedColumn,originalLine:e.originalLine,originalColumn:e.originalColumn,name:null===e.name?null:this._names.at(e.name)}}),this).forEach(e,l)},c.prototype.allGeneratedPositionsFor=function(e){var t=o.getArg(e,"line"),n={source:o.getArg(e,"source"),originalLine:t,originalColumn:o.getArg(e,"column",0)};if(n.source=this._findSourceIndex(n.source),n.source<0)return[];var l=[],a=this._findMapping(n,this._originalMappings,"originalLine","originalColumn",o.compareByOriginalPositions,r.LEAST_UPPER_BOUND);if(a>=0){var i=this._originalMappings[a];if(void 0===e.column)for(var c=i.originalLine;i&&i.originalLine===c;)l.push({line:o.getArg(i,"generatedLine",null),column:o.getArg(i,"generatedColumn",null),lastColumn:o.getArg(i,"lastGeneratedColumn",null)}),i=this._originalMappings[++a];else for(var s=i.originalColumn;i&&i.originalLine===t&&i.originalColumn==s;)l.push({line:o.getArg(i,"generatedLine",null),column:o.getArg(i,"generatedColumn",null),lastColumn:o.getArg(i,"lastGeneratedColumn",null)}),i=this._originalMappings[++a]}return l},t.SourceMapConsumer=c,s.prototype=Object.create(c.prototype),s.prototype.consumer=c,s.prototype._findSourceIndex=function(e){var t,n=e;if(null!=this.sourceRoot&&(n=o.relative(this.sourceRoot,n)),this._sources.has(n))return this._sources.indexOf(n);for(t=0;t<this._absoluteSources.length;++t)if(this._absoluteSources[t]==e)return t;return-1},s.fromSourceMap=function(e,t){var n=Object.create(s.prototype),r=n._names=l.fromArray(e._names.toArray(),!0),a=n._sources=l.fromArray(e._sources.toArray(),!0);n.sourceRoot=e._sourceRoot,n.sourcesContent=e._generateSourcesContent(n._sources.toArray(),n.sourceRoot),n.file=e._file,n._sourceMapURL=t,n._absoluteSources=n._sources.toArray().map((function(e){return o.computeSourceURL(n.sourceRoot,e,t)}));for(var c=e._mappings.toArray().slice(),d=n.__generatedMappings=[],m=n.__originalMappings=[],p=0,h=c.length;p<h;p++){var f=c[p],_=new u;_.generatedLine=f.generatedLine,_.generatedColumn=f.generatedColumn,f.source&&(_.source=a.indexOf(f.source),_.originalLine=f.originalLine,_.originalColumn=f.originalColumn,f.name&&(_.name=r.indexOf(f.name)),m.push(_)),d.push(_)}return i(n.__originalMappings,o.compareByOriginalPositions),n},s.prototype._version=3,Object.defineProperty(s.prototype,"sources",{get:function(){return this._absoluteSources.slice()}}),s.prototype._parseMappings=function(e,t){for(var n,r,l,c,s,d=1,m=0,p=0,h=0,f=0,_=0,g=e.length,b=0,v={},E={},k=[],y=[];b<g;)if(";"===e.charAt(b))d++,b++,m=0;else if(","===e.charAt(b))b++;else{for((n=new u).generatedLine=d,c=b;c<g&&!this._charIsMappingSeparator(e,c);c++);if(l=v[r=e.slice(b,c)])b+=r.length;else{for(l=[];b<c;)a.decode(e,b,E),s=E.value,b=E.rest,l.push(s);if(2===l.length)throw new Error("Found a source, but no line and column");if(3===l.length)throw new Error("Found a source and line, but no column");v[r]=l}n.generatedColumn=m+l[0],m=n.generatedColumn,l.length>1&&(n.source=f+l[1],f+=l[1],n.originalLine=p+l[2],p=n.originalLine,n.originalLine+=1,n.originalColumn=h+l[3],h=n.originalColumn,l.length>4&&(n.name=_+l[4],_+=l[4])),y.push(n),"number"==typeof n.originalLine&&k.push(n)}i(y,o.compareByGeneratedPositionsDeflated),this.__generatedMappings=y,i(k,o.compareByOriginalPositions),this.__originalMappings=k},s.prototype._findMapping=function(e,t,n,o,l,a){if(e[n]<=0)throw new TypeError("Line must be greater than or equal to 1, got "+e[n]);if(e[o]<0)throw new TypeError("Column must be greater than or equal to 0, got "+e[o]);return r.search(e,t,l,a)},s.prototype.computeColumnSpans=function(){for(var e=0;e<this._generatedMappings.length;++e){var t=this._generatedMappings[e];if(e+1<this._generatedMappings.length){var n=this._generatedMappings[e+1];if(t.generatedLine===n.generatedLine){t.lastGeneratedColumn=n.generatedColumn-1;continue}}t.lastGeneratedColumn=1/0}},s.prototype.originalPositionFor=function(e){var t={generatedLine:o.getArg(e,"line"),generatedColumn:o.getArg(e,"column")},n=this._findMapping(t,this._generatedMappings,"generatedLine","generatedColumn",o.compareByGeneratedPositionsDeflated,o.getArg(e,"bias",c.GREATEST_LOWER_BOUND));if(n>=0){var r=this._generatedMappings[n];if(r.generatedLine===t.generatedLine){var l=o.getArg(r,"source",null);null!==l&&(l=this._sources.at(l),l=o.computeSourceURL(this.sourceRoot,l,this._sourceMapURL));var a=o.getArg(r,"name",null);return null!==a&&(a=this._names.at(a)),{source:l,line:o.getArg(r,"originalLine",null),column:o.getArg(r,"originalColumn",null),name:a}}}return{source:null,line:null,column:null,name:null}},s.prototype.hasContentsOfAllSources=function(){return!!this.sourcesContent&&(this.sourcesContent.length>=this._sources.size()&&!this.sourcesContent.some((function(e){return null==e})))},s.prototype.sourceContentFor=function(e,t){if(!this.sourcesContent)return null;var n=this._findSourceIndex(e);if(n>=0)return this.sourcesContent[n];var r,l=e;if(null!=this.sourceRoot&&(l=o.relative(this.sourceRoot,l)),null!=this.sourceRoot&&(r=o.urlParse(this.sourceRoot))){var a=l.replace(/^file:\/\//,"");if("file"==r.scheme&&this._sources.has(a))return this.sourcesContent[this._sources.indexOf(a)];if((!r.path||"/"==r.path)&&this._sources.has("/"+l))return this.sourcesContent[this._sources.indexOf("/"+l)]}if(t)return null;throw new Error('"'+l+'" is not in the SourceMap.')},s.prototype.generatedPositionFor=function(e){var t=o.getArg(e,"source");if((t=this._findSourceIndex(t))<0)return{line:null,column:null,lastColumn:null};var n={source:t,originalLine:o.getArg(e,"line"),originalColumn:o.getArg(e,"column")},r=this._findMapping(n,this._originalMappings,"originalLine","originalColumn",o.compareByOriginalPositions,o.getArg(e,"bias",c.GREATEST_LOWER_BOUND));if(r>=0){var l=this._originalMappings[r];if(l.source===n.source)return{line:o.getArg(l,"generatedLine",null),column:o.getArg(l,"generatedColumn",null),lastColumn:o.getArg(l,"lastGeneratedColumn",null)}}return{line:null,column:null,lastColumn:null}},d.prototype=Object.create(c.prototype),d.prototype.constructor=c,d.prototype._version=3,Object.defineProperty(d.prototype,"sources",{get:function(){for(var e=[],t=0;t<this._sections.length;t++)for(var n=0;n<this._sections[t].consumer.sources.length;n++)e.push(this._sections[t].consumer.sources[n]);return e}}),d.prototype.originalPositionFor=function(e){var t={generatedLine:o.getArg(e,"line"),generatedColumn:o.getArg(e,"column")},n=r.search(t,this._sections,(function(e,t){var n=e.generatedLine-t.generatedOffset.generatedLine;return n||e.generatedColumn-t.generatedOffset.generatedColumn})),l=this._sections[n];return l?l.consumer.originalPositionFor({line:t.generatedLine-(l.generatedOffset.generatedLine-1),column:t.generatedColumn-(l.generatedOffset.generatedLine===t.generatedLine?l.generatedOffset.generatedColumn-1:0),bias:e.bias}):{source:null,line:null,column:null,name:null}},d.prototype.hasContentsOfAllSources=function(){return this._sections.every((function(e){return e.consumer.hasContentsOfAllSources()}))},d.prototype.sourceContentFor=function(e,t){for(var n=0;n<this._sections.length;n++){var o=this._sections[n].consumer.sourceContentFor(e,!0);if(o)return o}if(t)return null;throw new Error('"'+e+'" is not in the SourceMap.')},d.prototype.generatedPositionFor=function(e){for(var t=0;t<this._sections.length;t++){var n=this._sections[t];if(-1!==n.consumer._findSourceIndex(o.getArg(e,"source"))){var r=n.consumer.generatedPositionFor(e);if(r)return{line:r.line+(n.generatedOffset.generatedLine-1),column:r.column+(n.generatedOffset.generatedLine===r.line?n.generatedOffset.generatedColumn-1:0)}}}return{line:null,column:null}},d.prototype._parseMappings=function(e,t){this.__generatedMappings=[],this.__originalMappings=[];for(var n=0;n<this._sections.length;n++)for(var r=this._sections[n],l=r.consumer._generatedMappings,a=0;a<l.length;a++){var c=l[a],s=r.consumer._sources.at(c.source);s=o.computeSourceURL(r.consumer.sourceRoot,s,this._sourceMapURL),this._sources.add(s),s=this._sources.indexOf(s);var u=null;c.name&&(u=r.consumer._names.at(c.name),this._names.add(u),u=this._names.indexOf(u));var d={source:s,generatedLine:c.generatedLine+(r.generatedOffset.generatedLine-1),generatedColumn:c.generatedColumn+(r.generatedOffset.generatedLine===c.generatedLine?r.generatedOffset.generatedColumn-1:0),originalLine:c.originalLine,originalColumn:c.originalColumn,name:u};this.__generatedMappings.push(d),"number"==typeof d.originalLine&&this.__originalMappings.push(d)}i(this.__generatedMappings,o.compareByGeneratedPositionsDeflated),i(this.__originalMappings,o.compareByOriginalPositions)}},5584:function(e,t,n){var o=n(62725),r=n(24023),l=n(35447).I,a=n(68626).H;function i(e){e||(e={}),this._file=r.getArg(e,"file",null),this._sourceRoot=r.getArg(e,"sourceRoot",null),this._skipValidation=r.getArg(e,"skipValidation",!1),this._sources=new l,this._names=new l,this._mappings=new a,this._sourcesContents=null}i.prototype._version=3,i.fromSourceMap=function(e){var t=e.sourceRoot,n=new i({file:e.file,sourceRoot:t});return e.eachMapping((function(e){var o={generated:{line:e.generatedLine,column:e.generatedColumn}};null!=e.source&&(o.source=e.source,null!=t&&(o.source=r.relative(t,o.source)),o.original={line:e.originalLine,column:e.originalColumn},null!=e.name&&(o.name=e.name)),n.addMapping(o)})),e.sources.forEach((function(o){var l=o;null!==t&&(l=r.relative(t,o)),n._sources.has(l)||n._sources.add(l);var a=e.sourceContentFor(o);null!=a&&n.setSourceContent(o,a)})),n},i.prototype.addMapping=function(e){var t=r.getArg(e,"generated"),n=r.getArg(e,"original",null),o=r.getArg(e,"source",null),l=r.getArg(e,"name",null);this._skipValidation||this._validateMapping(t,n,o,l),null!=o&&(o=String(o),this._sources.has(o)||this._sources.add(o)),null!=l&&(l=String(l),this._names.has(l)||this._names.add(l)),this._mappings.add({generatedLine:t.line,generatedColumn:t.column,originalLine:null!=n&&n.line,originalColumn:null!=n&&n.column,source:o,name:l})},i.prototype.setSourceContent=function(e,t){var n=e;null!=this._sourceRoot&&(n=r.relative(this._sourceRoot,n)),null!=t?(this._sourcesContents||(this._sourcesContents=Object.create(null)),this._sourcesContents[r.toSetString(n)]=t):this._sourcesContents&&(delete this._sourcesContents[r.toSetString(n)],0===Object.keys(this._sourcesContents).length&&(this._sourcesContents=null))},i.prototype.applySourceMap=function(e,t,n){var o=t;if(null==t){if(null==e.file)throw new Error('SourceMapGenerator.prototype.applySourceMap requires either an explicit source file, or the source map\'s "file" property. Both were omitted.');o=e.file}var a=this._sourceRoot;null!=a&&(o=r.relative(a,o));var i=new l,c=new l;this._mappings.unsortedForEach((function(t){if(t.source===o&&null!=t.originalLine){var l=e.originalPositionFor({line:t.originalLine,column:t.originalColumn});null!=l.source&&(t.source=l.source,null!=n&&(t.source=r.join(n,t.source)),null!=a&&(t.source=r.relative(a,t.source)),t.originalLine=l.line,t.originalColumn=l.column,null!=l.name&&(t.name=l.name))}var s=t.source;null==s||i.has(s)||i.add(s);var u=t.name;null==u||c.has(u)||c.add(u)}),this),this._sources=i,this._names=c,e.sources.forEach((function(t){var o=e.sourceContentFor(t);null!=o&&(null!=n&&(t=r.join(n,t)),null!=a&&(t=r.relative(a,t)),this.setSourceContent(t,o))}),this)},i.prototype._validateMapping=function(e,t,n,o){if(t&&"number"!=typeof t.line&&"number"!=typeof t.column)throw new Error("original.line and original.column are not numbers -- you probably meant to omit the original mapping entirely and only map the generated position. If so, pass null for the original mapping instead of an object with empty or null values.");if((!(e&&"line"in e&&"column"in e&&e.line>0&&e.column>=0)||t||n||o)&&!(e&&"line"in e&&"column"in e&&t&&"line"in t&&"column"in t&&e.line>0&&e.column>=0&&t.line>0&&t.column>=0&&n))throw new Error("Invalid mapping: "+JSON.stringify({generated:e,source:n,original:t,name:o}))},i.prototype._serializeMappings=function(){for(var e,t,n,l,a=0,i=1,c=0,s=0,u=0,d=0,m="",p=this._mappings.toArray(),h=0,f=p.length;h<f;h++){if(e="",(t=p[h]).generatedLine!==i)for(a=0;t.generatedLine!==i;)e+=";",i++;else if(h>0){if(!r.compareByGeneratedPositionsInflated(t,p[h-1]))continue;e+=","}e+=o.encode(t.generatedColumn-a),a=t.generatedColumn,null!=t.source&&(l=this._sources.indexOf(t.source),e+=o.encode(l-d),d=l,e+=o.encode(t.originalLine-1-s),s=t.originalLine-1,e+=o.encode(t.originalColumn-c),c=t.originalColumn,null!=t.name&&(n=this._names.indexOf(t.name),e+=o.encode(n-u),u=n)),m+=e}return m},i.prototype._generateSourcesContent=function(e,t){return e.map((function(e){if(!this._sourcesContents)return null;null!=t&&(e=r.relative(t,e));var n=r.toSetString(e);return Object.prototype.hasOwnProperty.call(this._sourcesContents,n)?this._sourcesContents[n]:null}),this)},i.prototype.toJSON=function(){var e={version:this._version,sources:this._sources.toArray(),names:this._names.toArray(),mappings:this._serializeMappings()};return null!=this._file&&(e.file=this._file),null!=this._sourceRoot&&(e.sourceRoot=this._sourceRoot),this._sourcesContents&&(e.sourcesContent=this._generateSourcesContent(e.sources,e.sourceRoot)),e},i.prototype.toString=function(){return JSON.stringify(this.toJSON())},t.SourceMapGenerator=i},61270:function(e,t,n){var o=n(5584).SourceMapGenerator,r=n(24023),l=/(\r?\n)/,a="$$$isSourceNode$$$";function i(e,t,n,o,r){this.children=[],this.sourceContents={},this.line=null==e?null:e,this.column=null==t?null:t,this.source=null==n?null:n,this.name=null==r?null:r,this[a]=!0,null!=o&&this.add(o)}i.fromStringWithSourceMap=function(e,t,n){var o=new i,a=e.split(l),c=0,s=function(){return e()+(e()||"");function e(){return c<a.length?a[c++]:void 0}},u=1,d=0,m=null;return t.eachMapping((function(e){if(null!==m){if(!(u<e.generatedLine)){var t=(n=a[c]||"").substr(0,e.generatedColumn-d);return a[c]=n.substr(e.generatedColumn-d),d=e.generatedColumn,p(m,t),void(m=e)}p(m,s()),u++,d=0}for(;u<e.generatedLine;)o.add(s()),u++;if(d<e.generatedColumn){var n=a[c]||"";o.add(n.substr(0,e.generatedColumn)),a[c]=n.substr(e.generatedColumn),d=e.generatedColumn}m=e}),this),c<a.length&&(m&&p(m,s()),o.add(a.splice(c).join(""))),t.sources.forEach((function(e){var l=t.sourceContentFor(e);null!=l&&(null!=n&&(e=r.join(n,e)),o.setSourceContent(e,l))})),o;function p(e,t){if(null===e||void 0===e.source)o.add(t);else{var l=n?r.join(n,e.source):e.source;o.add(new i(e.originalLine,e.originalColumn,l,t,e.name))}}},i.prototype.add=function(e){if(Array.isArray(e))e.forEach((function(e){this.add(e)}),this);else{if(!e[a]&&"string"!=typeof e)throw new TypeError("Expected a SourceNode, string, or an array of SourceNodes and strings. Got "+e);e&&this.children.push(e)}return this},i.prototype.prepend=function(e){if(Array.isArray(e))for(var t=e.length-1;t>=0;t--)this.prepend(e[t]);else{if(!e[a]&&"string"!=typeof e)throw new TypeError("Expected a SourceNode, string, or an array of SourceNodes and strings. Got "+e);this.children.unshift(e)}return this},i.prototype.walk=function(e){for(var t,n=0,o=this.children.length;n<o;n++)(t=this.children[n])[a]?t.walk(e):""!==t&&e(t,{source:this.source,line:this.line,column:this.column,name:this.name})},i.prototype.join=function(e){var t,n,o=this.children.length;if(o>0){for(t=[],n=0;n<o-1;n++)t.push(this.children[n]),t.push(e);t.push(this.children[n]),this.children=t}return this},i.prototype.replaceRight=function(e,t){var n=this.children[this.children.length-1];return n[a]?n.replaceRight(e,t):"string"==typeof n?this.children[this.children.length-1]=n.replace(e,t):this.children.push("".replace(e,t)),this},i.prototype.setSourceContent=function(e,t){this.sourceContents[r.toSetString(e)]=t},i.prototype.walkSourceContents=function(e){for(var t=0,n=this.children.length;t<n;t++)this.children[t][a]&&this.children[t].walkSourceContents(e);var o=Object.keys(this.sourceContents);for(t=0,n=o.length;t<n;t++)e(r.fromSetString(o[t]),this.sourceContents[o[t]])},i.prototype.toString=function(){var e="";return this.walk((function(t){e+=t})),e},i.prototype.toStringWithSourceMap=function(e){var t={code:"",line:1,column:0},n=new o(e),r=!1,l=null,a=null,i=null,c=null;return this.walk((function(e,o){t.code+=e,null!==o.source&&null!==o.line&&null!==o.column?(l===o.source&&a===o.line&&i===o.column&&c===o.name||n.addMapping({source:o.source,original:{line:o.line,column:o.column},generated:{line:t.line,column:t.column},name:o.name}),l=o.source,a=o.line,i=o.column,c=o.name,r=!0):r&&(n.addMapping({generated:{line:t.line,column:t.column}}),l=null,r=!1);for(var s=0,u=e.length;s<u;s++)10===e.charCodeAt(s)?(t.line++,t.column=0,s+1===u?(l=null,r=!1):r&&n.addMapping({source:o.source,original:{line:o.line,column:o.column},generated:{line:t.line,column:t.column},name:o.name})):t.column++})),this.walkSourceContents((function(e,t){n.setSourceContent(e,t)})),{code:t.code,map:n}},t.SourceNode=i},24023:function(e,t){t.getArg=function(e,t,n){if(t in e)return e[t];if(3===arguments.length)return n;throw new Error('"'+t+'" is a required argument.')};var n=/^(?:([\w+\-.]+):)?\/\/(?:(\w+:\w+)@)?([\w.-]*)(?::(\d+))?(.*)$/,o=/^data:.+\,.+$/;function r(e){var t=e.match(n);return t?{scheme:t[1],auth:t[2],host:t[3],port:t[4],path:t[5]}:null}function l(e){var t="";return e.scheme&&(t+=e.scheme+":"),t+="//",e.auth&&(t+=e.auth+"@"),e.host&&(t+=e.host),e.port&&(t+=":"+e.port),e.path&&(t+=e.path),t}function a(e){var n=e,o=r(e);if(o){if(!o.path)return e;n=o.path}for(var a,i=t.isAbsolute(n),c=n.split(/\/+/),s=0,u=c.length-1;u>=0;u--)"."===(a=c[u])?c.splice(u,1):".."===a?s++:s>0&&(""===a?(c.splice(u+1,s),s=0):(c.splice(u,2),s--));return""===(n=c.join("/"))&&(n=i?"/":"."),o?(o.path=n,l(o)):n}function i(e,t){""===e&&(e="."),""===t&&(t=".");var n=r(t),i=r(e);if(i&&(e=i.path||"/"),n&&!n.scheme)return i&&(n.scheme=i.scheme),l(n);if(n||t.match(o))return t;if(i&&!i.host&&!i.path)return i.host=t,l(i);var c="/"===t.charAt(0)?t:a(e.replace(/\/+$/,"")+"/"+t);return i?(i.path=c,l(i)):c}t.urlParse=r,t.urlGenerate=l,t.normalize=a,t.join=i,t.isAbsolute=function(e){return"/"===e.charAt(0)||n.test(e)},t.relative=function(e,t){""===e&&(e="."),e=e.replace(/\/$/,"");for(var n=0;0!==t.indexOf(e+"/");){var o=e.lastIndexOf("/");if(o<0)return t;if((e=e.slice(0,o)).match(/^([^\/]+:\/)?\/*$/))return t;++n}return Array(n+1).join("../")+t.substr(e.length+1)};var c=!("__proto__"in Object.create(null));function s(e){return e}function u(e){if(!e)return!1;var t=e.length;if(t<9)return!1;if(95!==e.charCodeAt(t-1)||95!==e.charCodeAt(t-2)||111!==e.charCodeAt(t-3)||116!==e.charCodeAt(t-4)||111!==e.charCodeAt(t-5)||114!==e.charCodeAt(t-6)||112!==e.charCodeAt(t-7)||95!==e.charCodeAt(t-8)||95!==e.charCodeAt(t-9))return!1;for(var n=t-10;n>=0;n--)if(36!==e.charCodeAt(n))return!1;return!0}function d(e,t){return e===t?0:null===e?1:null===t?-1:e>t?1:-1}t.toSetString=c?s:function(e){return u(e)?"$"+e:e},t.fromSetString=c?s:function(e){return u(e)?e.slice(1):e},t.compareByOriginalPositions=function(e,t,n){var o=d(e.source,t.source);return 0!==o||0!==(o=e.originalLine-t.originalLine)||0!==(o=e.originalColumn-t.originalColumn)||n||0!==(o=e.generatedColumn-t.generatedColumn)||0!==(o=e.generatedLine-t.generatedLine)?o:d(e.name,t.name)},t.compareByGeneratedPositionsDeflated=function(e,t,n){var o=e.generatedLine-t.generatedLine;return 0!==o||0!==(o=e.generatedColumn-t.generatedColumn)||n||0!==(o=d(e.source,t.source))||0!==(o=e.originalLine-t.originalLine)||0!==(o=e.originalColumn-t.originalColumn)?o:d(e.name,t.name)},t.compareByGeneratedPositionsInflated=function(e,t){var n=e.generatedLine-t.generatedLine;return 0!==n||0!==(n=e.generatedColumn-t.generatedColumn)||0!==(n=d(e.source,t.source))||0!==(n=e.originalLine-t.originalLine)||0!==(n=e.originalColumn-t.originalColumn)?n:d(e.name,t.name)},t.parseSourceMapInput=function(e){return JSON.parse(e.replace(/^\)]}'[^\n]*\n/,""))},t.computeSourceURL=function(e,t,n){if(t=t||"",e&&("/"!==e[e.length-1]&&"/"!==t[0]&&(e+="/"),t=e+t),n){var o=r(n);if(!o)throw new Error("sourceMapURL could not be parsed");if(o.path){var c=o.path.lastIndexOf("/");c>=0&&(o.path=o.path.substring(0,c+1))}t=i(l(o),t)}return a(t)}},45517:function(e,t,n){t.SourceMapGenerator=n(5584).SourceMapGenerator,t.SourceMapConsumer=n(17447).SourceMapConsumer,t.SourceNode=n(61270).SourceNode},95103:function(e){var t={};e.exports=function(e,n){if(!t[e]){var o=[];if("number"!=typeof e)throw new TypeError("Expected arity to be a number, got "+e);for(var r=0;r<e;r++)o.push("_"+r);t[e]=new Function("fn","return function arity"+e+" ("+o.join(", ")+") { return fn.apply(this, arguments); }")}return t[e](n)}},91685:function(e){var t=String,n=function(){return{isColorSupported:!1,reset:t,bold:t,dim:t,italic:t,underline:t,inverse:t,hidden:t,strikethrough:t,black:t,red:t,green:t,yellow:t,blue:t,magenta:t,cyan:t,white:t,gray:t,bgBlack:t,bgRed:t,bgGreen:t,bgYellow:t,bgBlue:t,bgMagenta:t,bgCyan:t,bgWhite:t}};e.exports=n(),e.exports.createColors=n},93245:function(e,t,n){"use strict";var o;t.__esModule=!0,t.default=void 0;var r=function(e){var t,n;function o(t){var n;return(n=e.call(this,t)||this).type="atrule",n}n=e,(t=o).prototype=Object.create(n.prototype),t.prototype.constructor=t,t.__proto__=n;var r=o.prototype;return r.append=function(){var t;this.nodes||(this.nodes=[]);for(var n=arguments.length,o=new Array(n),r=0;r<n;r++)o[r]=arguments[r];return(t=e.prototype.append).call.apply(t,[this].concat(o))},r.prepend=function(){var t;this.nodes||(this.nodes=[]);for(var n=arguments.length,o=new Array(n),r=0;r<n;r++)o[r]=arguments[r];return(t=e.prototype.prepend).call.apply(t,[this].concat(o))},o}(((o=n(22806))&&o.__esModule?o:{default:o}).default),l=r;t.default=l,e.exports=t.default},37699:function(e,t,n){"use strict";var o;t.__esModule=!0,t.default=void 0;var r=function(e){var t,n;function o(t){var n;return(n=e.call(this,t)||this).type="comment",n}return n=e,(t=o).prototype=Object.create(n.prototype),t.prototype.constructor=t,t.__proto__=n,o}(((o=n(26572))&&o.__esModule?o:{default:o}).default);t.default=r,e.exports=t.default},22806:function(e,t,n){"use strict";t.__esModule=!0,t.default=void 0;var o=l(n(39469)),r=l(n(37699));function l(e){return e&&e.__esModule?e:{default:e}}function a(e,t){var n;if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(n=function(e,t){if(!e)return;if("string"==typeof e)return i(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return i(e,t)}(e))||t&&e&&"number"==typeof e.length){n&&(e=n);var o=0;return function(){return o>=e.length?{done:!0}:{done:!1,value:e[o++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(n=e[Symbol.iterator]()).next.bind(n)}function i(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=new Array(t);n<t;n++)o[n]=e[n];return o}function c(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function s(e){return e.map((function(e){return e.nodes&&(e.nodes=s(e.nodes)),delete e.source,e}))}var u=function(e){var t,l;function i(){return e.apply(this,arguments)||this}l=e,(t=i).prototype=Object.create(l.prototype),t.prototype.constructor=t,t.__proto__=l;var u,d,m,p=i.prototype;return p.push=function(e){return e.parent=this,this.nodes.push(e),this},p.each=function(e){this.lastEach||(this.lastEach=0),this.indexes||(this.indexes={}),this.lastEach+=1;var t=this.lastEach;if(this.indexes[t]=0,this.nodes){for(var n,o;this.indexes[t]<this.nodes.length&&(n=this.indexes[t],!1!==(o=e(this.nodes[n],n)));)this.indexes[t]+=1;return delete this.indexes[t],o}},p.walk=function(e){return this.each((function(t,n){var o;try{o=e(t,n)}catch(l){if(l.postcssNode=t,l.stack&&t.source&&/\n\s{4}at /.test(l.stack)){var r=t.source;l.stack=l.stack.replace(/\n\s{4}at /,"$&"+r.input.from+":"+r.start.line+":"+r.start.column+"$&")}throw l}return!1!==o&&t.walk&&(o=t.walk(e)),o}))},p.walkDecls=function(e,t){return t?e instanceof RegExp?this.walk((function(n,o){if("decl"===n.type&&e.test(n.prop))return t(n,o)})):this.walk((function(n,o){if("decl"===n.type&&n.prop===e)return t(n,o)})):(t=e,this.walk((function(e,n){if("decl"===e.type)return t(e,n)})))},p.walkRules=function(e,t){return t?e instanceof RegExp?this.walk((function(n,o){if("rule"===n.type&&e.test(n.selector))return t(n,o)})):this.walk((function(n,o){if("rule"===n.type&&n.selector===e)return t(n,o)})):(t=e,this.walk((function(e,n){if("rule"===e.type)return t(e,n)})))},p.walkAtRules=function(e,t){return t?e instanceof RegExp?this.walk((function(n,o){if("atrule"===n.type&&e.test(n.name))return t(n,o)})):this.walk((function(n,o){if("atrule"===n.type&&n.name===e)return t(n,o)})):(t=e,this.walk((function(e,n){if("atrule"===e.type)return t(e,n)})))},p.walkComments=function(e){return this.walk((function(t,n){if("comment"===t.type)return e(t,n)}))},p.append=function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];for(var o=0,r=t;o<r.length;o++)for(var l,i=r[o],c=a(this.normalize(i,this.last));!(l=c()).done;){var s=l.value;this.nodes.push(s)}return this},p.prepend=function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];for(var o,r=a(t=t.reverse());!(o=r()).done;){for(var l,i=o.value,c=this.normalize(i,this.first,"prepend").reverse(),s=a(c);!(l=s()).done;){var u=l.value;this.nodes.unshift(u)}for(var d in this.indexes)this.indexes[d]=this.indexes[d]+c.length}return this},p.cleanRaws=function(t){if(e.prototype.cleanRaws.call(this,t),this.nodes)for(var n,o=a(this.nodes);!(n=o()).done;){n.value.cleanRaws(t)}},p.insertBefore=function(e,t){for(var n,o,r=0===(e=this.index(e))&&"prepend",l=this.normalize(t,this.nodes[e],r).reverse(),i=a(l);!(n=i()).done;){var c=n.value;this.nodes.splice(e,0,c)}for(var s in this.indexes)e<=(o=this.indexes[s])&&(this.indexes[s]=o+l.length);return this},p.insertAfter=function(e,t){e=this.index(e);for(var n,o,r=this.normalize(t,this.nodes[e]).reverse(),l=a(r);!(n=l()).done;){var i=n.value;this.nodes.splice(e+1,0,i)}for(var c in this.indexes)e<(o=this.indexes[c])&&(this.indexes[c]=o+r.length);return this},p.removeChild=function(e){var t;for(var n in e=this.index(e),this.nodes[e].parent=void 0,this.nodes.splice(e,1),this.indexes)(t=this.indexes[n])>=e&&(this.indexes[n]=t-1);return this},p.removeAll=function(){for(var e,t=a(this.nodes);!(e=t()).done;){e.value.parent=void 0}return this.nodes=[],this},p.replaceValues=function(e,t,n){return n||(n=t,t={}),this.walkDecls((function(o){t.props&&-1===t.props.indexOf(o.prop)||t.fast&&-1===o.value.indexOf(t.fast)||(o.value=o.value.replace(e,n))})),this},p.every=function(e){return this.nodes.every(e)},p.some=function(e){return this.nodes.some(e)},p.index=function(e){return"number"==typeof e?e:this.nodes.indexOf(e)},p.normalize=function(e,t){var l=this;if("string"==typeof e)e=s(n(74409)(e).nodes);else if(Array.isArray(e))for(var i,c=a(e=e.slice(0));!(i=c()).done;){var u=i.value;u.parent&&u.parent.removeChild(u,"ignore")}else if("root"===e.type)for(var d,m=a(e=e.nodes.slice(0));!(d=m()).done;){var p=d.value;p.parent&&p.parent.removeChild(p,"ignore")}else if(e.type)e=[e];else if(e.prop){if(void 0===e.value)throw new Error("Value field is missed in node creation");"string"!=typeof e.value&&(e.value=String(e.value)),e=[new o.default(e)]}else if(e.selector){e=[new(n(99878))(e)]}else if(e.name){e=[new(n(93245))(e)]}else{if(!e.text)throw new Error("Unknown node type in node creation");e=[new r.default(e)]}var h=e.map((function(e){return e.parent&&e.parent.removeChild(e),void 0===e.raws.before&&t&&void 0!==t.raws.before&&(e.raws.before=t.raws.before.replace(/[^\s]/g,"")),e.parent=l,e}));return h},u=i,(d=[{key:"first",get:function(){if(this.nodes)return this.nodes[0]}},{key:"last",get:function(){if(this.nodes)return this.nodes[this.nodes.length-1]}}])&&c(u.prototype,d),m&&c(u,m),i}(l(n(26572)).default),d=u;t.default=d,e.exports=t.default},49384:function(e,t,n){"use strict";t.__esModule=!0,t.default=void 0;var o=l(n(91685)),r=l(n(59430));function l(e){return e&&e.__esModule?e:{default:e}}function a(e){var t="function"==typeof Map?new Map:void 0;return a=function(e){if(null===e||(n=e,-1===Function.toString.call(n).indexOf("[native code]")))return e;var n;if("function"!=typeof e)throw new TypeError("Super expression must either be null or a function");if(void 0!==t){if(t.has(e))return t.get(e);t.set(e,o)}function o(){return i(e,arguments,s(this).constructor)}return o.prototype=Object.create(e.prototype,{constructor:{value:o,enumerable:!1,writable:!0,configurable:!0}}),c(o,e)},a(e)}function i(e,t,n){return i=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(e){return!1}}()?Reflect.construct:function(e,t,n){var o=[null];o.push.apply(o,t);var r=new(Function.bind.apply(e,o));return n&&c(r,n.prototype),r},i.apply(null,arguments)}function c(e,t){return c=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},c(e,t)}function s(e){return s=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)},s(e)}var u=function(e){var t,n;function l(t,n,o,r,a,i){var c;return(c=e.call(this,t)||this).name="CssSyntaxError",c.reason=t,a&&(c.file=a),r&&(c.source=r),i&&(c.plugin=i),void 0!==n&&void 0!==o&&(c.line=n,c.column=o),c.setMessage(),Error.captureStackTrace&&Error.captureStackTrace(function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(c),l),c}n=e,(t=l).prototype=Object.create(n.prototype),t.prototype.constructor=t,t.__proto__=n;var a=l.prototype;return a.setMessage=function(){this.message=this.plugin?this.plugin+": ":"",this.message+=this.file?this.file:"<css input>",void 0!==this.line&&(this.message+=":"+this.line+":"+this.column),this.message+=": "+this.reason},a.showSourceCode=function(e){var t=this;if(!this.source)return"";var n=this.source;r.default&&(void 0===e&&(e=o.default.isColorSupported),e&&(n=(0,r.default)(n)));var l=n.split(/\r?\n/),a=Math.max(this.line-3,0),i=Math.min(this.line+2,l.length),c=String(i).length;function s(t){return e&&o.default.red?o.default.red(o.default.bold(t)):t}function u(t){return e&&o.default.gray?o.default.gray(t):t}return l.slice(a,i).map((function(e,n){var o=a+1+n,r=" "+(" "+o).slice(-c)+" | ";if(o===t.line){var l=u(r.replace(/\d/g," "))+e.slice(0,t.column-1).replace(/[^\t]/g," ");return s(">")+u(r)+e+"\n "+l+s("^")}return" "+u(r)+e})).join("\n")},a.toString=function(){var e=this.showSourceCode();return e&&(e="\n\n"+e+"\n"),this.name+": "+this.message+e},l}(a(Error));t.default=u,e.exports=t.default},39469:function(e,t,n){"use strict";var o;t.__esModule=!0,t.default=void 0;var r=function(e){var t,n;function o(t){var n;return(n=e.call(this,t)||this).type="decl",n}return n=e,(t=o).prototype=Object.create(n.prototype),t.prototype.constructor=t,t.__proto__=n,o}(((o=n(26572))&&o.__esModule?o:{default:o}).default);t.default=r,e.exports=t.default},37642:function(e,t,n){"use strict";t.__esModule=!0,t.default=void 0;var o=a(n(3214)),r=a(n(49384)),l=a(n(48136));function a(e){return e&&e.__esModule?e:{default:e}}function i(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}var c=0,s=function(){function e(e,t){if(void 0===t&&(t={}),null==e||"object"==typeof e&&!e.toString)throw new Error("PostCSS received "+e+" instead of CSS string");this.css=e.toString(),"\ufeff"===this.css[0]||"￾"===this.css[0]?(this.hasBOM=!0,this.css=this.css.slice(1)):this.hasBOM=!1,t.from&&(/^\w+:\/\//.test(t.from)||o.default.isAbsolute(t.from)?this.file=t.from:this.file=o.default.resolve(t.from));var n=new l.default(this.css,t);if(n.text){this.map=n;var r=n.consumer().file;!this.file&&r&&(this.file=this.mapResolve(r))}this.file||(c+=1,this.id="<input css "+c+">"),this.map&&(this.map.file=this.from)}var t,n,a,s=e.prototype;return s.error=function(e,t,n,o){var l;void 0===o&&(o={});var a=this.origin(t,n);return(l=a?new r.default(e,a.line,a.column,a.source,a.file,o.plugin):new r.default(e,t,n,this.css,this.file,o.plugin)).input={line:t,column:n,source:this.css},this.file&&(l.input.file=this.file),l},s.origin=function(e,t){if(!this.map)return!1;var n=this.map.consumer(),o=n.originalPositionFor({line:e,column:t});if(!o.source)return!1;var r={file:this.mapResolve(o.source),line:o.line,column:o.column},l=n.sourceContentFor(o.source);return l&&(r.source=l),r},s.mapResolve=function(e){return/^\w+:\/\//.test(e)?e:o.default.resolve(this.map.consumer().sourceRoot||".",e)},t=e,(n=[{key:"from",get:function(){return this.file||this.id}}])&&i(t.prototype,n),a&&i(t,a),e}();t.default=s,e.exports=t.default},2333:function(e,t,n){"use strict";t.__esModule=!0,t.default=void 0;var o=i(n(98160)),r=i(n(50766)),l=(i(n(9717)),i(n(10191))),a=i(n(74409));function i(e){return e&&e.__esModule?e:{default:e}}function c(e,t){var n;if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(n=function(e,t){if(!e)return;if("string"==typeof e)return s(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return s(e,t)}(e))||t&&e&&"number"==typeof e.length){n&&(e=n);var o=0;return function(){return o>=e.length?{done:!0}:{done:!1,value:e[o++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(n=e[Symbol.iterator]()).next.bind(n)}function s(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=new Array(t);n<t;n++)o[n]=e[n];return o}function u(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function d(e){return"object"==typeof e&&"function"==typeof e.then}var m=function(){function e(t,n,o){var r;if(this.stringified=!1,this.processed=!1,"object"==typeof n&&null!==n&&"root"===n.type)r=n;else if(n instanceof e||n instanceof l.default)r=n.root,n.map&&(void 0===o.map&&(o.map={}),o.map.inline||(o.map.inline=!1),o.map.prev=n.map);else{var i=a.default;o.syntax&&(i=o.syntax.parse),o.parser&&(i=o.parser),i.parse&&(i=i.parse);try{r=i(n,o)}catch(c){this.error=c}}this.result=new l.default(t,r,o)}var t,n,i,s=e.prototype;return s.warnings=function(){return this.sync().warnings()},s.toString=function(){return this.css},s.then=function(e,t){return this.async().then(e,t)},s.catch=function(e){return this.async().catch(e)},s.finally=function(e){return this.async().then(e,e)},s.handleError=function(e,t){try{if(this.error=e,"CssSyntaxError"!==e.name||e.plugin){if(t.postcssVersion);}else e.plugin=t.postcssPlugin,e.setMessage()}catch(n){console&&console.error&&console.error(n)}},s.asyncTick=function(e,t){var n=this;if(this.plugin>=this.processor.plugins.length)return this.processed=!0,e();try{var o=this.processor.plugins[this.plugin],r=this.run(o);this.plugin+=1,d(r)?r.then((function(){n.asyncTick(e,t)})).catch((function(e){n.handleError(e,o),n.processed=!0,t(e)})):this.asyncTick(e,t)}catch(l){this.processed=!0,t(l)}},s.async=function(){var e=this;return this.processed?new Promise((function(t,n){e.error?n(e.error):t(e.stringify())})):(this.processing||(this.processing=new Promise((function(t,n){if(e.error)return n(e.error);e.plugin=0,e.asyncTick(t,n)})).then((function(){return e.processed=!0,e.stringify()}))),this.processing)},s.sync=function(){if(this.processed)return this.result;if(this.processed=!0,this.processing)throw new Error("Use process(css).then(cb) to work with async plugins");if(this.error)throw this.error;for(var e,t=c(this.result.processor.plugins);!(e=t()).done;){var n=e.value;if(d(this.run(n)))throw new Error("Use process(css).then(cb) to work with async plugins")}return this.result},s.run=function(e){this.result.lastPlugin=e;try{return e(this.result.root,this.result)}catch(t){throw this.handleError(t,e),t}},s.stringify=function(){if(this.stringified)return this.result;this.stringified=!0,this.sync();var e=this.result.opts,t=r.default;e.syntax&&(t=e.syntax.stringify),e.stringifier&&(t=e.stringifier),t.stringify&&(t=t.stringify);var n=new o.default(t,this.result.root,this.result.opts).generate();return this.result.css=n[0],this.result.map=n[1],this.result},t=e,(n=[{key:"processor",get:function(){return this.result.processor}},{key:"opts",get:function(){return this.result.opts}},{key:"css",get:function(){return this.stringify().css}},{key:"content",get:function(){return this.stringify().content}},{key:"map",get:function(){return this.stringify().map}},{key:"root",get:function(){return this.sync().root}},{key:"messages",get:function(){return this.sync().messages}}])&&u(t.prototype,n),i&&u(t,i),e}();t.default=m,e.exports=t.default},56427:function(e,t){"use strict";t.__esModule=!0,t.default=void 0;var n={split:function(e,t,n){for(var o=[],r="",l=!1,a=0,i=!1,c=!1,s=0;s<e.length;s++){var u=e[s];i?c?c=!1:"\\"===u?c=!0:u===i&&(i=!1):'"'===u||"'"===u?i=u:"("===u?a+=1:")"===u?a>0&&(a-=1):0===a&&-1!==t.indexOf(u)&&(l=!0),l?(""!==r&&o.push(r.trim()),r="",l=!1):r+=u}return(n||""!==r)&&o.push(r.trim()),o},space:function(e){return n.split(e,[" ","\n","\t"])},comma:function(e){return n.split(e,[","],!0)}},o=n;t.default=o,e.exports=t.default},98160:function(e,t,n){"use strict";t.__esModule=!0,t.default=void 0;var o=l(n(45517)),r=l(n(3214));function l(e){return e&&e.__esModule?e:{default:e}}function a(e,t){var n;if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(n=function(e,t){if(!e)return;if("string"==typeof e)return i(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return i(e,t)}(e))||t&&e&&"number"==typeof e.length){n&&(e=n);var o=0;return function(){return o>=e.length?{done:!0}:{done:!1,value:e[o++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(n=e[Symbol.iterator]()).next.bind(n)}function i(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=new Array(t);n<t;n++)o[n]=e[n];return o}var c=function(){function e(e,t,n){this.stringify=e,this.mapOpts=n.map||{},this.root=t,this.opts=n}var t=e.prototype;return t.isMap=function(){return void 0!==this.opts.map?!!this.opts.map:this.previous().length>0},t.previous=function(){var e=this;return this.previousMaps||(this.previousMaps=[],this.root.walk((function(t){if(t.source&&t.source.input.map){var n=t.source.input.map;-1===e.previousMaps.indexOf(n)&&e.previousMaps.push(n)}}))),this.previousMaps},t.isInline=function(){if(void 0!==this.mapOpts.inline)return this.mapOpts.inline;var e=this.mapOpts.annotation;return(void 0===e||!0===e)&&(!this.previous().length||this.previous().some((function(e){return e.inline})))},t.isSourcesContent=function(){return void 0!==this.mapOpts.sourcesContent?this.mapOpts.sourcesContent:!this.previous().length||this.previous().some((function(e){return e.withContent()}))},t.clearAnnotation=function(){if(!1!==this.mapOpts.annotation)for(var e,t=this.root.nodes.length-1;t>=0;t--)"comment"===(e=this.root.nodes[t]).type&&0===e.text.indexOf("# sourceMappingURL=")&&this.root.removeChild(t)},t.setSourcesContent=function(){var e=this,t={};this.root.walk((function(n){if(n.source){var o=n.source.input.from;if(o&&!t[o]){t[o]=!0;var r=e.relative(o);e.map.setSourceContent(r,n.source.input.css)}}}))},t.applyPrevMaps=function(){for(var e,t=a(this.previous());!(e=t()).done;){var n=e.value,l=this.relative(n.file),i=n.root||r.default.dirname(n.file),c=void 0;!1===this.mapOpts.sourcesContent?(c=new o.default.SourceMapConsumer(n.text)).sourcesContent&&(c.sourcesContent=c.sourcesContent.map((function(){return null}))):c=n.consumer(),this.map.applySourceMap(c,l,this.relative(i))}},t.isAnnotation=function(){return!!this.isInline()||(void 0!==this.mapOpts.annotation?this.mapOpts.annotation:!this.previous().length||this.previous().some((function(e){return e.annotation})))},t.toBase64=function(e){return Buffer?Buffer.from(e).toString("base64"):window.btoa(unescape(encodeURIComponent(e)))},t.addAnnotation=function(){var e;e=this.isInline()?"data:application/json;base64,"+this.toBase64(this.map.toString()):"string"==typeof this.mapOpts.annotation?this.mapOpts.annotation:this.outputFile()+".map";var t="\n";-1!==this.css.indexOf("\r\n")&&(t="\r\n"),this.css+=t+"/*# sourceMappingURL="+e+" */"},t.outputFile=function(){return this.opts.to?this.relative(this.opts.to):this.opts.from?this.relative(this.opts.from):"to.css"},t.generateMap=function(){return this.generateString(),this.isSourcesContent()&&this.setSourcesContent(),this.previous().length>0&&this.applyPrevMaps(),this.isAnnotation()&&this.addAnnotation(),this.isInline()?[this.css]:[this.css,this.map]},t.relative=function(e){if(0===e.indexOf("<"))return e;if(/^\w+:\/\//.test(e))return e;var t=this.opts.to?r.default.dirname(this.opts.to):".";return"string"==typeof this.mapOpts.annotation&&(t=r.default.dirname(r.default.resolve(t,this.mapOpts.annotation))),e=r.default.relative(t,e),"\\"===r.default.sep?e.replace(/\\/g,"/"):e},t.sourcePath=function(e){return this.mapOpts.from?this.mapOpts.from:this.relative(e.source.input.from)},t.generateString=function(){var e=this;this.css="",this.map=new o.default.SourceMapGenerator({file:this.outputFile()});var t,n,r=1,l=1;this.stringify(this.root,(function(o,a,i){if(e.css+=o,a&&"end"!==i&&(a.source&&a.source.start?e.map.addMapping({source:e.sourcePath(a),generated:{line:r,column:l-1},original:{line:a.source.start.line,column:a.source.start.column-1}}):e.map.addMapping({source:"<no source>",original:{line:1,column:0},generated:{line:r,column:l-1}})),(t=o.match(/\n/g))?(r+=t.length,n=o.lastIndexOf("\n"),l=o.length-n):l+=o.length,a&&"start"!==i){var c=a.parent||{raws:{}};("decl"!==a.type||a!==c.last||c.raws.semicolon)&&(a.source&&a.source.end?e.map.addMapping({source:e.sourcePath(a),generated:{line:r,column:l-2},original:{line:a.source.end.line,column:a.source.end.column-1}}):e.map.addMapping({source:"<no source>",original:{line:1,column:0},generated:{line:r,column:l-1}}))}}))},t.generate=function(){if(this.clearAnnotation(),this.isMap())return this.generateMap();var e="";return this.stringify(this.root,(function(t){e+=t})),[e]},e}();t.default=c,e.exports=t.default},26572:function(e,t,n){"use strict";t.__esModule=!0,t.default=void 0;var o=a(n(49384)),r=a(n(37417)),l=a(n(50766));function a(e){return e&&e.__esModule?e:{default:e}}function i(e,t){var n=new e.constructor;for(var o in e)if(e.hasOwnProperty(o)){var r=e[o],l=typeof r;"parent"===o&&"object"===l?t&&(n[o]=t):"source"===o?n[o]=r:r instanceof Array?n[o]=r.map((function(e){return i(e,n)})):("object"===l&&null!==r&&(r=i(r)),n[o]=r)}return n}var c=function(){function e(e){for(var t in void 0===e&&(e={}),this.raws={},e)this[t]=e[t]}var t=e.prototype;return t.error=function(e,t){if(void 0===t&&(t={}),this.source){var n=this.positionBy(t);return this.source.input.error(e,n.line,n.column,t)}return new o.default(e)},t.warn=function(e,t,n){var o={node:this};for(var r in n)o[r]=n[r];return e.warn(t,o)},t.remove=function(){return this.parent&&this.parent.removeChild(this),this.parent=void 0,this},t.toString=function(e){void 0===e&&(e=l.default),e.stringify&&(e=e.stringify);var t="";return e(this,(function(e){t+=e})),t},t.clone=function(e){void 0===e&&(e={});var t=i(this);for(var n in e)t[n]=e[n];return t},t.cloneBefore=function(e){void 0===e&&(e={});var t=this.clone(e);return this.parent.insertBefore(this,t),t},t.cloneAfter=function(e){void 0===e&&(e={});var t=this.clone(e);return this.parent.insertAfter(this,t),t},t.replaceWith=function(){if(this.parent){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];for(var o=0,r=t;o<r.length;o++){var l=r[o];this.parent.insertBefore(this,l)}this.remove()}return this},t.next=function(){if(this.parent){var e=this.parent.index(this);return this.parent.nodes[e+1]}},t.prev=function(){if(this.parent){var e=this.parent.index(this);return this.parent.nodes[e-1]}},t.before=function(e){return this.parent.insertBefore(this,e),this},t.after=function(e){return this.parent.insertAfter(this,e),this},t.toJSON=function(){var e={};for(var t in this)if(this.hasOwnProperty(t)&&"parent"!==t){var n=this[t];n instanceof Array?e[t]=n.map((function(e){return"object"==typeof e&&e.toJSON?e.toJSON():e})):"object"==typeof n&&n.toJSON?e[t]=n.toJSON():e[t]=n}return e},t.raw=function(e,t){return(new r.default).raw(this,e,t)},t.root=function(){for(var e=this;e.parent;)e=e.parent;return e},t.cleanRaws=function(e){delete this.raws.before,delete this.raws.after,e||delete this.raws.between},t.positionInside=function(e){for(var t=this.toString(),n=this.source.start.column,o=this.source.start.line,r=0;r<e;r++)"\n"===t[r]?(n=1,o+=1):n+=1;return{line:o,column:n}},t.positionBy=function(e){var t=this.source.start;if(e.index)t=this.positionInside(e.index);else if(e.word){var n=this.toString().indexOf(e.word);-1!==n&&(t=this.positionInside(n))}return t},e}(),s=c;t.default=s,e.exports=t.default},74409:function(e,t,n){"use strict";t.__esModule=!0,t.default=void 0;var o=l(n(37456)),r=l(n(37642));function l(e){return e&&e.__esModule?e:{default:e}}var a=function(e,t){var n=new r.default(e,t),l=new o.default(n);try{l.parse()}catch(a){throw a}return l.root};t.default=a,e.exports=t.default},37456:function(e,t,n){"use strict";t.__esModule=!0,t.default=void 0;var o=s(n(39469)),r=s(n(48680)),l=s(n(37699)),a=s(n(93245)),i=s(n(93870)),c=s(n(99878));function s(e){return e&&e.__esModule?e:{default:e}}var u=function(){function e(e){this.input=e,this.root=new i.default,this.current=this.root,this.spaces="",this.semicolon=!1,this.createTokenizer(),this.root.source={input:e,start:{line:1,column:1}}}var t=e.prototype;return t.createTokenizer=function(){this.tokenizer=(0,r.default)(this.input)},t.parse=function(){for(var e;!this.tokenizer.endOfFile();)switch((e=this.tokenizer.nextToken())[0]){case"space":this.spaces+=e[1];break;case";":this.freeSemicolon(e);break;case"}":this.end(e);break;case"comment":this.comment(e);break;case"at-word":this.atrule(e);break;case"{":this.emptyRule(e);break;default:this.other(e)}this.endFile()},t.comment=function(e){var t=new l.default;this.init(t,e[2],e[3]),t.source.end={line:e[4],column:e[5]};var n=e[1].slice(2,-2);if(/^\s*$/.test(n))t.text="",t.raws.left=n,t.raws.right="";else{var o=n.match(/^(\s*)([^]*[^\s])(\s*)$/);t.text=o[2],t.raws.left=o[1],t.raws.right=o[3]}},t.emptyRule=function(e){var t=new c.default;this.init(t,e[2],e[3]),t.selector="",t.raws.between="",this.current=t},t.other=function(e){for(var t=!1,n=null,o=!1,r=null,l=[],a=[],i=e;i;){if(n=i[0],a.push(i),"("===n||"["===n)r||(r=i),l.push("("===n?")":"]");else if(0===l.length){if(";"===n){if(o)return void this.decl(a);break}if("{"===n)return void this.rule(a);if("}"===n){this.tokenizer.back(a.pop()),t=!0;break}":"===n&&(o=!0)}else n===l[l.length-1]&&(l.pop(),0===l.length&&(r=null));i=this.tokenizer.nextToken()}if(this.tokenizer.endOfFile()&&(t=!0),l.length>0&&this.unclosedBracket(r),t&&o){for(;a.length&&("space"===(i=a[a.length-1][0])||"comment"===i);)this.tokenizer.back(a.pop());this.decl(a)}else this.unknownWord(a)},t.rule=function(e){e.pop();var t=new c.default;this.init(t,e[0][2],e[0][3]),t.raws.between=this.spacesAndCommentsFromEnd(e),this.raw(t,"selector",e),this.current=t},t.decl=function(e){var t=new o.default;this.init(t);var n,r=e[e.length-1];for(";"===r[0]&&(this.semicolon=!0,e.pop()),r[4]?t.source.end={line:r[4],column:r[5]}:t.source.end={line:r[2],column:r[3]};"word"!==e[0][0];)1===e.length&&this.unknownWord(e),t.raws.before+=e.shift()[1];for(t.source.start={line:e[0][2],column:e[0][3]},t.prop="";e.length;){var l=e[0][0];if(":"===l||"space"===l||"comment"===l)break;t.prop+=e.shift()[1]}for(t.raws.between="";e.length;){if(":"===(n=e.shift())[0]){t.raws.between+=n[1];break}"word"===n[0]&&/\w/.test(n[1])&&this.unknownWord([n]),t.raws.between+=n[1]}"_"!==t.prop[0]&&"*"!==t.prop[0]||(t.raws.before+=t.prop[0],t.prop=t.prop.slice(1)),t.raws.between+=this.spacesAndCommentsFromStart(e),this.precheckMissedSemicolon(e);for(var a=e.length-1;a>0;a--){if("!important"===(n=e[a])[1].toLowerCase()){t.important=!0;var i=this.stringFrom(e,a);" !important"!==(i=this.spacesFromEnd(e)+i)&&(t.raws.important=i);break}if("important"===n[1].toLowerCase()){for(var c=e.slice(0),s="",u=a;u>0;u--){var d=c[u][0];if(0===s.trim().indexOf("!")&&"space"!==d)break;s=c.pop()[1]+s}0===s.trim().indexOf("!")&&(t.important=!0,t.raws.important=s,e=c)}if("space"!==n[0]&&"comment"!==n[0])break}this.raw(t,"value",e),-1!==t.value.indexOf(":")&&this.checkMissedSemicolon(e)},t.atrule=function(e){var t,n,o=new a.default;o.name=e[1].slice(1),""===o.name&&this.unnamedAtrule(o,e),this.init(o,e[2],e[3]);for(var r=!1,l=!1,i=[];!this.tokenizer.endOfFile();){if(";"===(e=this.tokenizer.nextToken())[0]){o.source.end={line:e[2],column:e[3]},this.semicolon=!0;break}if("{"===e[0]){l=!0;break}if("}"===e[0]){if(i.length>0){for(t=i[n=i.length-1];t&&"space"===t[0];)t=i[--n];t&&(o.source.end={line:t[4],column:t[5]})}this.end(e);break}if(i.push(e),this.tokenizer.endOfFile()){r=!0;break}}o.raws.between=this.spacesAndCommentsFromEnd(i),i.length?(o.raws.afterName=this.spacesAndCommentsFromStart(i),this.raw(o,"params",i),r&&(e=i[i.length-1],o.source.end={line:e[4],column:e[5]},this.spaces=o.raws.between,o.raws.between="")):(o.raws.afterName="",o.params=""),l&&(o.nodes=[],this.current=o)},t.end=function(e){this.current.nodes&&this.current.nodes.length&&(this.current.raws.semicolon=this.semicolon),this.semicolon=!1,this.current.raws.after=(this.current.raws.after||"")+this.spaces,this.spaces="",this.current.parent?(this.current.source.end={line:e[2],column:e[3]},this.current=this.current.parent):this.unexpectedClose(e)},t.endFile=function(){this.current.parent&&this.unclosedBlock(),this.current.nodes&&this.current.nodes.length&&(this.current.raws.semicolon=this.semicolon),this.current.raws.after=(this.current.raws.after||"")+this.spaces},t.freeSemicolon=function(e){if(this.spaces+=e[1],this.current.nodes){var t=this.current.nodes[this.current.nodes.length-1];t&&"rule"===t.type&&!t.raws.ownSemicolon&&(t.raws.ownSemicolon=this.spaces,this.spaces="")}},t.init=function(e,t,n){this.current.push(e),e.source={start:{line:t,column:n},input:this.input},e.raws.before=this.spaces,this.spaces="","comment"!==e.type&&(this.semicolon=!1)},t.raw=function(e,t,n){for(var o,r,l,a,i=n.length,c="",s=!0,u=/^([.|#])?([\w])+/i,d=0;d<i;d+=1)"comment"!==(r=(o=n[d])[0])||"rule"!==e.type?"comment"===r||"space"===r&&d===i-1?s=!1:c+=o[1]:(a=n[d-1],l=n[d+1],"space"!==a[0]&&"space"!==l[0]&&u.test(a[1])&&u.test(l[1])?c+=o[1]:s=!1);if(!s){var m=n.reduce((function(e,t){return e+t[1]}),"");e.raws[t]={value:c,raw:m}}e[t]=c},t.spacesAndCommentsFromEnd=function(e){for(var t,n="";e.length&&("space"===(t=e[e.length-1][0])||"comment"===t);)n=e.pop()[1]+n;return n},t.spacesAndCommentsFromStart=function(e){for(var t,n="";e.length&&("space"===(t=e[0][0])||"comment"===t);)n+=e.shift()[1];return n},t.spacesFromEnd=function(e){for(var t="";e.length&&"space"===e[e.length-1][0];)t=e.pop()[1]+t;return t},t.stringFrom=function(e,t){for(var n="",o=t;o<e.length;o++)n+=e[o][1];return e.splice(t,e.length-t),n},t.colon=function(e){for(var t,n,o,r=0,l=0;l<e.length;l++){if("("===(n=(t=e[l])[0])&&(r+=1),")"===n&&(r-=1),0===r&&":"===n){if(o){if("word"===o[0]&&"progid"===o[1])continue;return l}this.doubleColon(t)}o=t}return!1},t.unclosedBracket=function(e){throw this.input.error("Unclosed bracket",e[2],e[3])},t.unknownWord=function(e){throw this.input.error("Unknown word",e[0][2],e[0][3])},t.unexpectedClose=function(e){throw this.input.error("Unexpected }",e[2],e[3])},t.unclosedBlock=function(){var e=this.current.source.start;throw this.input.error("Unclosed block",e.line,e.column)},t.doubleColon=function(e){throw this.input.error("Double colon",e[2],e[3])},t.unnamedAtrule=function(e,t){throw this.input.error("At-rule without name",t[2],t[3])},t.precheckMissedSemicolon=function(){},t.checkMissedSemicolon=function(e){var t=this.colon(e);if(!1!==t){for(var n,o=0,r=t-1;r>=0&&("space"===(n=e[r])[0]||2!==(o+=1));r--);throw this.input.error("Missed semicolon",n[2],n[3])}},e}();t.default=u,e.exports=t.default},51480:function(e,t,n){"use strict";t.__esModule=!0,t.default=void 0;var o=p(n(39469)),r=p(n(69761)),l=p(n(50766)),a=p(n(37699)),i=p(n(93245)),c=p(n(47231)),s=p(n(74409)),u=p(n(56427)),d=p(n(99878)),m=p(n(93870));function p(e){return e&&e.__esModule?e:{default:e}}function h(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return 1===t.length&&Array.isArray(t[0])&&(t=t[0]),new r.default(t)}h.plugin=function(e,t){function n(){var n=t.apply(void 0,arguments);return n.postcssPlugin=e,n.postcssVersion=(new r.default).version,n}var o;return Object.defineProperty(n,"postcss",{get:function(){return o||(o=n()),o}}),n.process=function(e,t,o){return h([n(o)]).process(e,t)},n},h.stringify=l.default,h.parse=s.default,h.vendor=c.default,h.list=u.default,h.comment=function(e){return new a.default(e)},h.atRule=function(e){return new i.default(e)},h.decl=function(e){return new o.default(e)},h.rule=function(e){return new d.default(e)},h.root=function(e){return new m.default(e)};var f=h;t.default=f,e.exports=t.default},48136:function(e,t,n){"use strict";t.__esModule=!0,t.default=void 0;var o=a(n(45517)),r=a(n(3214)),l=a(n(54849));function a(e){return e&&e.__esModule?e:{default:e}}var i=function(){function e(e,t){this.loadAnnotation(e),this.inline=this.startWith(this.annotation,"data:");var n=t.map?t.map.prev:void 0,o=this.loadMap(t.from,n);o&&(this.text=o)}var t=e.prototype;return t.consumer=function(){return this.consumerCache||(this.consumerCache=new o.default.SourceMapConsumer(this.text)),this.consumerCache},t.withContent=function(){return!!(this.consumer().sourcesContent&&this.consumer().sourcesContent.length>0)},t.startWith=function(e,t){return!!e&&e.substr(0,t.length)===t},t.getAnnotationURL=function(e){return e.match(/\/\*\s*# sourceMappingURL=((?:(?!sourceMappingURL=).)*)\*\//)[1].trim()},t.loadAnnotation=function(e){var t=e.match(/\/\*\s*# sourceMappingURL=(?:(?!sourceMappingURL=).)*\*\//gm);if(t&&t.length>0){var n=t[t.length-1];n&&(this.annotation=this.getAnnotationURL(n))}},t.decodeInline=function(e){var t,n="data:application/json,";if(this.startWith(e,n))return decodeURIComponent(e.substr(22));if(/^data:application\/json;charset=utf-?8;base64,/.test(e)||/^data:application\/json;base64,/.test(e))return t=e.substr(RegExp.lastMatch.length),Buffer?Buffer.from(t,"base64").toString():window.atob(t);var o=e.match(/data:application\/json;([^,]+),/)[1];throw new Error("Unsupported source map encoding "+o)},t.loadMap=function(e,t){if(!1===t)return!1;if(t){if("string"==typeof t)return t;if("function"==typeof t){var n=t(e);if(n&&l.default.existsSync&&l.default.existsSync(n))return l.default.readFileSync(n,"utf-8").toString().trim();throw new Error("Unable to load previous source map: "+n.toString())}if(t instanceof o.default.SourceMapConsumer)return o.default.SourceMapGenerator.fromSourceMap(t).toString();if(t instanceof o.default.SourceMapGenerator)return t.toString();if(this.isMap(t))return JSON.stringify(t);throw new Error("Unsupported previous source map format: "+t.toString())}if(this.inline)return this.decodeInline(this.annotation);if(this.annotation){var a=this.annotation;return e&&(a=r.default.join(r.default.dirname(e),a)),this.root=r.default.dirname(a),!(!l.default.existsSync||!l.default.existsSync(a))&&l.default.readFileSync(a,"utf-8").toString().trim()}},t.isMap=function(e){return"object"==typeof e&&("string"==typeof e.mappings||"string"==typeof e._mappings)},e}();t.default=i,e.exports=t.default},69761:function(e,t,n){"use strict";t.__esModule=!0,t.default=void 0;var o,r=(o=n(2333))&&o.__esModule?o:{default:o};function l(e,t){var n;if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(n=function(e,t){if(!e)return;if("string"==typeof e)return a(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return a(e,t)}(e))||t&&e&&"number"==typeof e.length){n&&(e=n);var o=0;return function(){return o>=e.length?{done:!0}:{done:!1,value:e[o++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(n=e[Symbol.iterator]()).next.bind(n)}function a(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=new Array(t);n<t;n++)o[n]=e[n];return o}var i=function(){function e(e){void 0===e&&(e=[]),this.version="7.0.39",this.plugins=this.normalize(e)}var t=e.prototype;return t.use=function(e){return this.plugins=this.plugins.concat(this.normalize([e])),this},t.process=function(e){function t(t){return e.apply(this,arguments)}return t.toString=function(){return e.toString()},t}((function(e,t){return void 0===t&&(t={}),0===this.plugins.length&&(t.parser,t.stringifier),new r.default(this,e,t)})),t.normalize=function(e){for(var t,n=[],o=l(e);!(t=o()).done;){var r=t.value;if(!0===r.postcss){var a=r();throw new Error("PostCSS plugin "+a.postcssPlugin+" requires PostCSS 8.\nMigration guide for end-users:\nhttps://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users")}if(r.postcss&&(r=r.postcss),"object"==typeof r&&Array.isArray(r.plugins))n=n.concat(r.plugins);else if("function"==typeof r)n.push(r);else{if("object"!=typeof r||!r.parse&&!r.stringify)throw"object"==typeof r&&r.postcssPlugin?new Error("PostCSS plugin "+r.postcssPlugin+" requires PostCSS 8.\nMigration guide for end-users:\nhttps://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users"):new Error(r+" is not a PostCSS plugin")}}return n},e}(),c=i;t.default=c,e.exports=t.default},10191:function(e,t,n){"use strict";t.__esModule=!0,t.default=void 0;var o,r=(o=n(64024))&&o.__esModule?o:{default:o};function l(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}var a=function(){function e(e,t,n){this.processor=e,this.messages=[],this.root=t,this.opts=n,this.css=void 0,this.map=void 0}var t,n,o,a=e.prototype;return a.toString=function(){return this.css},a.warn=function(e,t){void 0===t&&(t={}),t.plugin||this.lastPlugin&&this.lastPlugin.postcssPlugin&&(t.plugin=this.lastPlugin.postcssPlugin);var n=new r.default(e,t);return this.messages.push(n),n},a.warnings=function(){return this.messages.filter((function(e){return"warning"===e.type}))},t=e,(n=[{key:"content",get:function(){return this.css}}])&&l(t.prototype,n),o&&l(t,o),e}();t.default=a,e.exports=t.default},93870:function(e,t,n){"use strict";var o;function r(e,t){var n;if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(n=function(e,t){if(!e)return;if("string"==typeof e)return l(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return l(e,t)}(e))||t&&e&&"number"==typeof e.length){n&&(e=n);var o=0;return function(){return o>=e.length?{done:!0}:{done:!1,value:e[o++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(n=e[Symbol.iterator]()).next.bind(n)}function l(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=new Array(t);n<t;n++)o[n]=e[n];return o}t.__esModule=!0,t.default=void 0;var a=function(e){var t,o;function l(t){var n;return(n=e.call(this,t)||this).type="root",n.nodes||(n.nodes=[]),n}o=e,(t=l).prototype=Object.create(o.prototype),t.prototype.constructor=t,t.__proto__=o;var a=l.prototype;return a.removeChild=function(t,n){var o=this.index(t);return!n&&0===o&&this.nodes.length>1&&(this.nodes[1].raws.before=this.nodes[o].raws.before),e.prototype.removeChild.call(this,t)},a.normalize=function(t,n,o){var l=e.prototype.normalize.call(this,t);if(n)if("prepend"===o)this.nodes.length>1?n.raws.before=this.nodes[1].raws.before:delete n.raws.before;else if(this.first!==n)for(var a,i=r(l);!(a=i()).done;){a.value.raws.before=n.raws.before}return l},a.toResult=function(e){return void 0===e&&(e={}),new(n(2333))(new(n(69761)),this,e).stringify()},l}(((o=n(22806))&&o.__esModule?o:{default:o}).default);t.default=a,e.exports=t.default},99878:function(e,t,n){"use strict";t.__esModule=!0,t.default=void 0;var o=l(n(22806)),r=l(n(56427));function l(e){return e&&e.__esModule?e:{default:e}}function a(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}var i=function(e){var t,n,o,l,i;function c(t){var n;return(n=e.call(this,t)||this).type="rule",n.nodes||(n.nodes=[]),n}return n=e,(t=c).prototype=Object.create(n.prototype),t.prototype.constructor=t,t.__proto__=n,o=c,(l=[{key:"selectors",get:function(){return r.default.comma(this.selector)},set:function(e){var t=this.selector?this.selector.match(/,\s*/):null,n=t?t[0]:","+this.raw("between","beforeOpen");this.selector=e.join(n)}}])&&a(o.prototype,l),i&&a(o,i),c}(o.default);t.default=i,e.exports=t.default},37417:function(e,t){"use strict";t.__esModule=!0,t.default=void 0;var n={colon:": ",indent:"    ",beforeDecl:"\n",beforeRule:"\n",beforeOpen:" ",beforeClose:"\n",beforeComment:"\n",after:"\n",emptyBody:"",commentLeft:" ",commentRight:" ",semicolon:!1};var o=function(){function e(e){this.builder=e}var t=e.prototype;return t.stringify=function(e,t){this[e.type](e,t)},t.root=function(e){this.body(e),e.raws.after&&this.builder(e.raws.after)},t.comment=function(e){var t=this.raw(e,"left","commentLeft"),n=this.raw(e,"right","commentRight");this.builder("/*"+t+e.text+n+"*/",e)},t.decl=function(e,t){var n=this.raw(e,"between","colon"),o=e.prop+n+this.rawValue(e,"value");e.important&&(o+=e.raws.important||" !important"),t&&(o+=";"),this.builder(o,e)},t.rule=function(e){this.block(e,this.rawValue(e,"selector")),e.raws.ownSemicolon&&this.builder(e.raws.ownSemicolon,e,"end")},t.atrule=function(e,t){var n="@"+e.name,o=e.params?this.rawValue(e,"params"):"";if(void 0!==e.raws.afterName?n+=e.raws.afterName:o&&(n+=" "),e.nodes)this.block(e,n+o);else{var r=(e.raws.between||"")+(t?";":"");this.builder(n+o+r,e)}},t.body=function(e){for(var t=e.nodes.length-1;t>0&&"comment"===e.nodes[t].type;)t-=1;for(var n=this.raw(e,"semicolon"),o=0;o<e.nodes.length;o++){var r=e.nodes[o],l=this.raw(r,"before");l&&this.builder(l),this.stringify(r,t!==o||n)}},t.block=function(e,t){var n,o=this.raw(e,"between","beforeOpen");this.builder(t+o+"{",e,"start"),e.nodes&&e.nodes.length?(this.body(e),n=this.raw(e,"after")):n=this.raw(e,"after","emptyBody"),n&&this.builder(n),this.builder("}",e,"end")},t.raw=function(e,t,o){var r;if(o||(o=t),t&&void 0!==(r=e.raws[t]))return r;var l=e.parent;if("before"===o&&(!l||"root"===l.type&&l.first===e))return"";if(!l)return n[o];var a=e.root();if(a.rawCache||(a.rawCache={}),void 0!==a.rawCache[o])return a.rawCache[o];if("before"===o||"after"===o)return this.beforeAfter(e,o);var i,c="raw"+((i=o)[0].toUpperCase()+i.slice(1));return this[c]?r=this[c](a,e):a.walk((function(e){if(void 0!==(r=e.raws[t]))return!1})),void 0===r&&(r=n[o]),a.rawCache[o]=r,r},t.rawSemicolon=function(e){var t;return e.walk((function(e){if(e.nodes&&e.nodes.length&&"decl"===e.last.type&&void 0!==(t=e.raws.semicolon))return!1})),t},t.rawEmptyBody=function(e){var t;return e.walk((function(e){if(e.nodes&&0===e.nodes.length&&void 0!==(t=e.raws.after))return!1})),t},t.rawIndent=function(e){return e.raws.indent?e.raws.indent:(e.walk((function(n){var o=n.parent;if(o&&o!==e&&o.parent&&o.parent===e&&void 0!==n.raws.before){var r=n.raws.before.split("\n");return t=(t=r[r.length-1]).replace(/[^\s]/g,""),!1}})),t);var t},t.rawBeforeComment=function(e,t){var n;return e.walkComments((function(e){if(void 0!==e.raws.before)return-1!==(n=e.raws.before).indexOf("\n")&&(n=n.replace(/[^\n]+$/,"")),!1})),void 0===n?n=this.raw(t,null,"beforeDecl"):n&&(n=n.replace(/[^\s]/g,"")),n},t.rawBeforeDecl=function(e,t){var n;return e.walkDecls((function(e){if(void 0!==e.raws.before)return-1!==(n=e.raws.before).indexOf("\n")&&(n=n.replace(/[^\n]+$/,"")),!1})),void 0===n?n=this.raw(t,null,"beforeRule"):n&&(n=n.replace(/[^\s]/g,"")),n},t.rawBeforeRule=function(e){var t;return e.walk((function(n){if(n.nodes&&(n.parent!==e||e.first!==n)&&void 0!==n.raws.before)return-1!==(t=n.raws.before).indexOf("\n")&&(t=t.replace(/[^\n]+$/,"")),!1})),t&&(t=t.replace(/[^\s]/g,"")),t},t.rawBeforeClose=function(e){var t;return e.walk((function(e){if(e.nodes&&e.nodes.length>0&&void 0!==e.raws.after)return-1!==(t=e.raws.after).indexOf("\n")&&(t=t.replace(/[^\n]+$/,"")),!1})),t&&(t=t.replace(/[^\s]/g,"")),t},t.rawBeforeOpen=function(e){var t;return e.walk((function(e){if("decl"!==e.type&&void 0!==(t=e.raws.between))return!1})),t},t.rawColon=function(e){var t;return e.walkDecls((function(e){if(void 0!==e.raws.between)return t=e.raws.between.replace(/[^\s:]/g,""),!1})),t},t.beforeAfter=function(e,t){var n;n="decl"===e.type?this.raw(e,null,"beforeDecl"):"comment"===e.type?this.raw(e,null,"beforeComment"):"before"===t?this.raw(e,null,"beforeRule"):this.raw(e,null,"beforeClose");for(var o=e.parent,r=0;o&&"root"!==o.type;)r+=1,o=o.parent;if(-1!==n.indexOf("\n")){var l=this.raw(e,null,"indent");if(l.length)for(var a=0;a<r;a++)n+=l}return n},t.rawValue=function(e,t){var n=e[t],o=e.raws[t];return o&&o.value===n?o.raw:n},e}();t.default=o,e.exports=t.default},50766:function(e,t,n){"use strict";t.__esModule=!0,t.default=void 0;var o,r=(o=n(37417))&&o.__esModule?o:{default:o};var l=function(e,t){new r.default(t).stringify(e)};t.default=l,e.exports=t.default},48680:function(e,t){"use strict";t.__esModule=!0,t.default=function(e,t){void 0===t&&(t={});var C,I,S,L,A,z,D,j,T,N,O,B,M,H,R=e.css.valueOf(),P=t.ignoreErrors,F=R.length,U=-1,W=1,V=0,q=[],G=[];function Z(t){throw e.error("Unclosed "+t,W,V-U)}return{back:function(e){G.push(e)},nextToken:function(e){if(G.length)return G.pop();if(!(V>=F)){var t=!!e&&e.ignoreUnclosed;switch(((C=R.charCodeAt(V))===a||C===c||C===u&&R.charCodeAt(V+1)!==a)&&(U=V,W+=1),C){case a:case i:case s:case u:case c:I=V;do{I+=1,(C=R.charCodeAt(I))===a&&(U=I,W+=1)}while(C===i||C===a||C===s||C===u||C===c);H=["space",R.slice(V,I)],V=I-1;break;case d:case m:case f:case _:case v:case g:case h:var K=String.fromCharCode(C);H=[K,K,W,V-U];break;case p:if(B=q.length?q.pop()[1]:"",M=R.charCodeAt(V+1),"url"===B&&M!==n&&M!==o&&M!==i&&M!==a&&M!==s&&M!==c&&M!==u){I=V;do{if(N=!1,-1===(I=R.indexOf(")",I+1))){if(P||t){I=V;break}Z("bracket")}for(O=I;R.charCodeAt(O-1)===r;)O-=1,N=!N}while(N);H=["brackets",R.slice(V,I+1),W,V-U,W,I-U],V=I}else I=R.indexOf(")",V+1),z=R.slice(V,I+1),-1===I||x.test(z)?H=["(","(",W,V-U]:(H=["brackets",z,W,V-U,W,I-U],V=I);break;case n:case o:S=C===n?"'":'"',I=V;do{if(N=!1,-1===(I=R.indexOf(S,I+1))){if(P||t){I=V+1;break}Z("string")}for(O=I;R.charCodeAt(O-1)===r;)O-=1,N=!N}while(N);z=R.slice(V,I+1),L=z.split("\n"),(A=L.length-1)>0?(j=W+A,T=I-L[A].length):(j=W,T=U),H=["string",R.slice(V,I+1),W,V-U,j,I-T],U=T,W=j,V=I;break;case E:k.lastIndex=V+1,k.test(R),I=0===k.lastIndex?R.length-1:k.lastIndex-2,H=["at-word",R.slice(V,I+1),W,V-U,W,I-U],V=I;break;case r:for(I=V,D=!0;R.charCodeAt(I+1)===r;)I+=1,D=!D;if(C=R.charCodeAt(I+1),D&&C!==l&&C!==i&&C!==a&&C!==s&&C!==u&&C!==c&&(I+=1,w.test(R.charAt(I)))){for(;w.test(R.charAt(I+1));)I+=1;R.charCodeAt(I+1)===i&&(I+=1)}H=["word",R.slice(V,I+1),W,V-U,W,I-U],V=I;break;default:C===l&&R.charCodeAt(V+1)===b?(0===(I=R.indexOf("*/",V+2)+1)&&(P||t?I=R.length:Z("comment")),z=R.slice(V,I+1),L=z.split("\n"),(A=L.length-1)>0?(j=W+A,T=I-L[A].length):(j=W,T=U),H=["comment",z,W,V-U,j,I-T],U=T,W=j,V=I):(y.lastIndex=V+1,y.test(R),I=0===y.lastIndex?R.length-1:y.lastIndex-2,H=["word",R.slice(V,I+1),W,V-U,W,I-U],q.push(H),V=I)}return V++,H}},endOfFile:function(){return 0===G.length&&V>=F},position:function(){return V}}};var n="'".charCodeAt(0),o='"'.charCodeAt(0),r="\\".charCodeAt(0),l="/".charCodeAt(0),a="\n".charCodeAt(0),i=" ".charCodeAt(0),c="\f".charCodeAt(0),s="\t".charCodeAt(0),u="\r".charCodeAt(0),d="[".charCodeAt(0),m="]".charCodeAt(0),p="(".charCodeAt(0),h=")".charCodeAt(0),f="{".charCodeAt(0),_="}".charCodeAt(0),g=";".charCodeAt(0),b="*".charCodeAt(0),v=":".charCodeAt(0),E="@".charCodeAt(0),k=/[ \n\t\r\f{}()'"\\;/[\]#]/g,y=/[ \n\t\r\f(){}:;@!'"\\\][#]|\/(?=\*)/g,x=/.[\\/("'\n]/,w=/[a-f0-9]/i;e.exports=t.default},47231:function(e,t){"use strict";t.__esModule=!0,t.default=void 0;var n={prefix:function(e){var t=e.match(/^(-\w+-)/);return t?t[0]:""},unprefixed:function(e){return e.replace(/^-\w+-/,"")}};t.default=n,e.exports=t.default},9717:function(e,t){"use strict";t.__esModule=!0,t.default=function(e){if(n[e])return;n[e]=!0,"undefined"!=typeof console&&console.warn&&console.warn(e)};var n={};e.exports=t.default},64024:function(e,t){"use strict";t.__esModule=!0,t.default=void 0;var n=function(){function e(e,t){if(void 0===t&&(t={}),this.type="warning",this.text=e,t.node&&t.node.source){var n=t.node.positionBy(t);this.line=n.line,this.column=n.column}for(var o in t)this[o]=t[o]}return e.prototype.toString=function(){return this.node?this.node.error(this.text,{plugin:this.plugin,index:this.index,word:this.word}).message:this.plugin?this.plugin+": "+this.text:this.text},e}();t.default=n,e.exports=t.default},66625:function(e,t,n){"use strict";n.d(t,{A:function(){return g}});var o=n(67294),r=n(5871),l=n.n(r),a=n(26917),i=n(7444),c=n(34300),s=n(41380),u=n(97640),d=n(17882),m=n(56924),p=n(44961),h=(0,a.c)((function(e,t){var n="__lodash_hash_undefined__",o=1,r=2,l=1/0,i=9007199254740991,c="[object Arguments]",s="[object Array]",u="[object Boolean]",d="[object Date]",m="[object Error]",p="[object Function]",h="[object GeneratorFunction]",f="[object Map]",_="[object Number]",g="[object Object]",b="[object Promise]",v="[object RegExp]",E="[object Set]",k="[object String]",y="[object Symbol]",x="[object WeakMap]",w="[object ArrayBuffer]",C="[object DataView]",I=/\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/,S=/^\w*$/,L=/^\./,A=/[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g,z=/\\(\\)?/g,D=/^\[object .+?Constructor\]$/,j=/^(?:0|[1-9]\d*)$/,T={};T["[object Float32Array]"]=T["[object Float64Array]"]=T["[object Int8Array]"]=T["[object Int16Array]"]=T["[object Int32Array]"]=T["[object Uint8Array]"]=T["[object Uint8ClampedArray]"]=T["[object Uint16Array]"]=T["[object Uint32Array]"]=!0,T[c]=T[s]=T[w]=T[u]=T[C]=T[d]=T[m]=T[p]=T[f]=T[_]=T[g]=T[v]=T[E]=T[k]=T[x]=!1;var N="object"==typeof a.a&&a.a&&a.a.Object===Object&&a.a,O="object"==typeof self&&self&&self.Object===Object&&self,B=N||O||Function("return this")(),M=t&&!t.nodeType&&t,H=M&&e&&!e.nodeType&&e,R=H&&H.exports===M&&N.process,P=function(){try{return R&&R.binding("util")}catch(e){}}(),F=P&&P.isTypedArray;function U(e,t){for(var n=-1,o=t.length,r=e.length;++n<o;)e[r+n]=t[n];return e}function W(e,t){for(var n=-1,o=e?e.length:0;++n<o;)if(t(e[n],n,e))return!0;return!1}function V(e){var t=!1;if(null!=e&&"function"!=typeof e.toString)try{t=!!(e+"")}catch(e){}return t}function q(e){var t=-1,n=Array(e.size);return e.forEach((function(e,o){n[++t]=[o,e]})),n}function G(e,t){return function(n){return e(t(n))}}function Z(e){var t=-1,n=Array(e.size);return e.forEach((function(e){n[++t]=e})),n}var K,J=Array.prototype,Y=Function.prototype,Q=Object.prototype,X=B["__core-js_shared__"],$=(K=/[^.]+$/.exec(X&&X.keys&&X.keys.IE_PROTO||""))?"Symbol(src)_1."+K:"",ee=Y.toString,te=Q.hasOwnProperty,ne=Q.toString,oe=RegExp("^"+ee.call(te).replace(/[\\^$.*+?()[\]{}|]/g,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$"),re=B.Symbol,le=B.Uint8Array,ae=G(Object.getPrototypeOf,Object),ie=Q.propertyIsEnumerable,ce=J.splice,se=Object.getOwnPropertySymbols,ue=G(Object.keys,Object),de=He(B,"DataView"),me=He(B,"Map"),pe=He(B,"Promise"),he=He(B,"Set"),fe=He(B,"WeakMap"),_e=He(Object,"create"),ge=Je(de),be=Je(me),ve=Je(pe),Ee=Je(he),ke=Je(fe),ye=re?re.prototype:void 0,xe=ye?ye.valueOf:void 0,we=ye?ye.toString:void 0;function Ce(e){var t=-1,n=e?e.length:0;for(this.clear();++t<n;){var o=e[t];this.set(o[0],o[1])}}function Ie(e){var t=-1,n=e?e.length:0;for(this.clear();++t<n;){var o=e[t];this.set(o[0],o[1])}}function Se(e){var t=-1,n=e?e.length:0;for(this.clear();++t<n;){var o=e[t];this.set(o[0],o[1])}}function Le(e){var t=-1,n=e?e.length:0;for(this.__data__=new Se;++t<n;)this.add(e[t])}function Ae(e){this.__data__=new Ie(e)}function ze(e,t){var n=$e(e)||Xe(e)?function(e,t){for(var n=-1,o=Array(e);++n<e;)o[n]=t(n);return o}(e.length,String):[],o=n.length,r=!!o;for(var l in e)!t&&!te.call(e,l)||r&&("length"==l||Ue(l,o))||n.push(l);return n}function De(e,t){for(var n=e.length;n--;)if(Qe(e[n][0],t))return n;return-1}function je(e,t){for(var n=0,o=(t=We(t,e)?[t]:Oe(t)).length;null!=e&&n<o;)e=e[Ke(t[n++])];return n&&n==o?e:void 0}function Te(e,t){return null!=e&&t in Object(e)}function Ne(e,t,n,l,a){return e===t||(null==e||null==t||!ot(e)&&!rt(t)?e!=e&&t!=t:function(e,t,n,l,a,i){var p=$e(e),h=$e(t),b=s,x=s;p||(b=(b=Fe(e))==c?g:b),h||(x=(x=Fe(t))==c?g:x);var I=b==g&&!V(e),S=x==g&&!V(t),L=b==x;if(L&&!I)return i||(i=new Ae),p||it(e)?Be(e,t,n,l,a,i):function(e,t,n,l,a,i,c){switch(n){case C:if(e.byteLength!=t.byteLength||e.byteOffset!=t.byteOffset)return!1;e=e.buffer,t=t.buffer;case w:return!(e.byteLength!=t.byteLength||!l(new le(e),new le(t)));case u:case d:case _:return Qe(+e,+t);case m:return e.name==t.name&&e.message==t.message;case v:case k:return e==t+"";case f:var s=q;case E:var p=i&r;if(s||(s=Z),e.size!=t.size&&!p)return!1;var h=c.get(e);if(h)return h==t;i|=o,c.set(e,t);var g=Be(s(e),s(t),l,a,i,c);return c.delete(e),g;case y:if(xe)return xe.call(e)==xe.call(t)}return!1}(e,t,b,n,l,a,i);if(!(a&r)){var A=I&&te.call(e,"__wrapped__"),z=S&&te.call(t,"__wrapped__");if(A||z){var D=A?e.value():e,j=z?t.value():t;return i||(i=new Ae),n(D,j,l,a,i)}}return!!L&&(i||(i=new Ae),function(e,t,n,o,l,a){var i=l&r,c=ct(e),s=c.length;if(s!=ct(t).length&&!i)return!1;for(var u=s;u--;){var d=c[u];if(!(i?d in t:te.call(t,d)))return!1}var m=a.get(e);if(m&&a.get(t))return m==t;var p=!0;a.set(e,t),a.set(t,e);for(var h=i;++u<s;){var f=e[d=c[u]],_=t[d];if(o)var g=i?o(_,f,d,t,e,a):o(f,_,d,e,t,a);if(!(void 0===g?f===_||n(f,_,o,l,a):g)){p=!1;break}h||(h="constructor"==d)}if(p&&!h){var b=e.constructor,v=t.constructor;b==v||!("constructor"in e)||!("constructor"in t)||"function"==typeof b&&b instanceof b&&"function"==typeof v&&v instanceof v||(p=!1)}return a.delete(e),a.delete(t),p}(e,t,n,l,a,i))}(e,t,Ne,n,l,a))}function Oe(e){return $e(e)?e:Ze(e)}function Be(e,t,n,l,a,i){var c=a&r,s=e.length,u=t.length;if(s!=u&&!(c&&u>s))return!1;var d=i.get(e);if(d&&i.get(t))return d==t;var m=-1,p=!0,h=a&o?new Le:void 0;for(i.set(e,t),i.set(t,e);++m<s;){var f=e[m],_=t[m];if(l)var g=c?l(_,f,m,t,e,i):l(f,_,m,e,t,i);if(void 0!==g){if(g)continue;p=!1;break}if(h){if(!W(t,(function(e,t){if(!h.has(t)&&(f===e||n(f,e,l,a,i)))return h.add(t)}))){p=!1;break}}else if(f!==_&&!n(f,_,l,a,i)){p=!1;break}}return i.delete(e),i.delete(t),p}function Me(e,t){var n,o,r=e.__data__;return("string"==(o=typeof(n=t))||"number"==o||"symbol"==o||"boolean"==o?"__proto__"!==n:null===n)?r["string"==typeof t?"string":"hash"]:r.map}function He(e,t){var n=function(e,t){return null==e?void 0:e[t]}(e,t);return function(e){return!(!ot(e)||(t=e,$&&$ in t))&&(tt(e)||V(e)?oe:D).test(Je(e));var t}(n)?n:void 0}Ce.prototype.clear=function(){this.__data__=_e?_e(null):{}},Ce.prototype.delete=function(e){return this.has(e)&&delete this.__data__[e]},Ce.prototype.get=function(e){var t=this.__data__;if(_e){var o=t[e];return o===n?void 0:o}return te.call(t,e)?t[e]:void 0},Ce.prototype.has=function(e){var t=this.__data__;return _e?void 0!==t[e]:te.call(t,e)},Ce.prototype.set=function(e,t){return this.__data__[e]=_e&&void 0===t?n:t,this},Ie.prototype.clear=function(){this.__data__=[]},Ie.prototype.delete=function(e){var t=this.__data__,n=De(t,e);return!(n<0||(n==t.length-1?t.pop():ce.call(t,n,1),0))},Ie.prototype.get=function(e){var t=this.__data__,n=De(t,e);return n<0?void 0:t[n][1]},Ie.prototype.has=function(e){return De(this.__data__,e)>-1},Ie.prototype.set=function(e,t){var n=this.__data__,o=De(n,e);return o<0?n.push([e,t]):n[o][1]=t,this},Se.prototype.clear=function(){this.__data__={hash:new Ce,map:new(me||Ie),string:new Ce}},Se.prototype.delete=function(e){return Me(this,e).delete(e)},Se.prototype.get=function(e){return Me(this,e).get(e)},Se.prototype.has=function(e){return Me(this,e).has(e)},Se.prototype.set=function(e,t){return Me(this,e).set(e,t),this},Le.prototype.add=Le.prototype.push=function(e){return this.__data__.set(e,n),this},Le.prototype.has=function(e){return this.__data__.has(e)},Ae.prototype.clear=function(){this.__data__=new Ie},Ae.prototype.delete=function(e){return this.__data__.delete(e)},Ae.prototype.get=function(e){return this.__data__.get(e)},Ae.prototype.has=function(e){return this.__data__.has(e)},Ae.prototype.set=function(e,t){var n=this.__data__;if(n instanceof Ie){var o=n.__data__;if(!me||o.length<199)return o.push([e,t]),this;n=this.__data__=new Se(o)}return n.set(e,t),this};var Re=se?G(se,Object):dt,Pe=se?function(e){for(var t=[];e;)U(t,Re(e)),e=ae(e);return t}:dt,Fe=function(e){return ne.call(e)};function Ue(e,t){return!!(t=null==t?i:t)&&("number"==typeof e||j.test(e))&&e>-1&&e%1==0&&e<t}function We(e,t){if($e(e))return!1;var n=typeof e;return!("number"!=n&&"symbol"!=n&&"boolean"!=n&&null!=e&&!lt(e))||S.test(e)||!I.test(e)||null!=t&&e in Object(t)}function Ve(e){var t=e&&e.constructor;return e===("function"==typeof t&&t.prototype||Q)}function qe(e){return e==e&&!ot(e)}function Ge(e,t){return function(n){return null!=n&&n[e]===t&&(void 0!==t||e in Object(n))}}(de&&Fe(new de(new ArrayBuffer(1)))!=C||me&&Fe(new me)!=f||pe&&Fe(pe.resolve())!=b||he&&Fe(new he)!=E||fe&&Fe(new fe)!=x)&&(Fe=function(e){var t=ne.call(e),n=t==g?e.constructor:void 0,o=n?Je(n):void 0;if(o)switch(o){case ge:return C;case be:return f;case ve:return b;case Ee:return E;case ke:return x}return t});var Ze=Ye((function(e){var t;e=null==(t=e)?"":function(e){if("string"==typeof e)return e;if(lt(e))return we?we.call(e):"";var t=e+"";return"0"==t&&1/e==-l?"-0":t}(t);var n=[];return L.test(e)&&n.push(""),e.replace(A,(function(e,t,o,r){n.push(o?r.replace(z,"$1"):t||e)})),n}));function Ke(e){if("string"==typeof e||lt(e))return e;var t=e+"";return"0"==t&&1/e==-l?"-0":t}function Je(e){if(null!=e){try{return ee.call(e)}catch(e){}try{return e+""}catch(e){}}return""}function Ye(e,t){if("function"!=typeof e||t&&"function"!=typeof t)throw new TypeError("Expected a function");var n=function(){var o=arguments,r=t?t.apply(this,o):o[0],l=n.cache;if(l.has(r))return l.get(r);var a=e.apply(this,o);return n.cache=l.set(r,a),a};return n.cache=new(Ye.Cache||Se),n}function Qe(e,t){return e===t||e!=e&&t!=t}function Xe(e){return function(e){return rt(e)&&et(e)}(e)&&te.call(e,"callee")&&(!ie.call(e,"callee")||ne.call(e)==c)}Ye.Cache=Se;var $e=Array.isArray;function et(e){return null!=e&&nt(e.length)&&!tt(e)}function tt(e){var t=ot(e)?ne.call(e):"";return t==p||t==h}function nt(e){return"number"==typeof e&&e>-1&&e%1==0&&e<=i}function ot(e){var t=typeof e;return!!e&&("object"==t||"function"==t)}function rt(e){return!!e&&"object"==typeof e}function lt(e){return"symbol"==typeof e||rt(e)&&ne.call(e)==y}var at,it=F?(at=F,function(e){return at(e)}):function(e){return rt(e)&&nt(e.length)&&!!T[ne.call(e)]};function ct(e){return et(e)?ze(e):function(e){if(!Ve(e))return ue(e);var t=[];for(var n in Object(e))te.call(e,n)&&"constructor"!=n&&t.push(n);return t}(e)}function st(e){return et(e)?ze(e,!0):function(e){if(!ot(e))return function(e){var t=[];if(null!=e)for(var n in Object(e))t.push(n);return t}(e);var t=Ve(e),n=[];for(var o in e)("constructor"!=o||!t&&te.call(e,o))&&n.push(o);return n}(e)}function ut(e){return e}function dt(){return[]}e.exports=function(e,t){return null==e?{}:function(e,t,n){for(var o=-1,r=t.length,l={};++o<r;){var a=t[o],i=e[a];n(i,a)&&(l[a]=i)}return l}(e,function(e){return function(e,t,n){var o=t(e);return $e(e)?o:U(o,n(e))}(e,st,Pe)}(e),function(e){return"function"==typeof e?e:null==e?ut:"object"==typeof e?$e(e)?function(e,t){return We(e)&&qe(t)?Ge(Ke(e),t):function(n){var l=function(e,t,n){var o=null==e?void 0:je(e,t);return void 0===o?void 0:o}(n,e);return void 0===l&&l===t?function(e,t){return null!=e&&function(e,t,n){for(var o,r=-1,l=(t=We(t,e)?[t]:Oe(t)).length;++r<l;){var a=Ke(t[r]);if(!(o=null!=e&&n(e,a)))break;e=e[a]}return o||!!(l=e?e.length:0)&&nt(l)&&Ue(a,l)&&($e(e)||Xe(e))}(e,t,Te)}(n,e):Ne(t,l,void 0,o|r)}}(e[0],e[1]):function(e){var t=function(e){for(var t=ct(e),n=t.length;n--;){var o=t[n],r=e[o];t[n]=[o,r,qe(r)]}return t}(e);return 1==t.length&&t[0][2]?Ge(t[0][0],t[0][1]):function(n){return n===e||function(e,t,n,l){var a=n.length,i=a;if(null==e)return!i;for(e=Object(e);a--;){var c=n[a];if(c[2]?c[1]!==e[c[0]]:!(c[0]in e))return!1}for(;++a<i;){var s=(c=n[a])[0],u=e[s],d=c[1];if(c[2]){if(void 0===u&&!(s in e))return!1}else{var m,p=new Ae;if(!(void 0===m?Ne(d,u,l,o|r,p):m))return!1}}return!0}(n,0,t)}}(e):We(t=e)?(n=Ke(t),function(e){return null==e?void 0:e[n]}):function(e){return function(t){return je(t,e)}}(t);var t,n}(t))}})),f={accordion:"Accordion-module_accordion__2fPUT",card:"Accordion-module_card__1iRKx",border:"Accordion-module_border__2AgQd",accordionHeader:"Accordion-module_accordionHeader__3_uK7",s:"Accordion-module_s__8gw4g",closeButton:"Accordion-module_closeButton__1Qt8U",m:"Accordion-module_m__2k6QY",l:"Accordion-module_l__gPzdT",accordionContent:"Accordion-module_accordionContent__1umso",contentWithCloseButton:"Accordion-module_contentWithCloseButton__-einM",headingContainer:"Accordion-module_headingContainer__1DzX3",accordionButtonIcon:"Accordion-module_accordionButtonIcon__MQu2J"};(0,i.s)(".Accordion-module_accordion__2fPUT{--background-color:var(--color-white);--border-color:var(--color-black-60);--header-font-color:var(--color-black-90);--header-focus-outline-color:var(--color-coat-of-arms);--content-font-color:var(--color-black-90);--content-font-size:var(--fontsize-body-m);--content-line-height:var(--lineheight-l)}.Accordion-module_accordion__2fPUT:not(.Accordion-module_card__1iRKx){border-bottom:1px solid var(--border-color)}.Accordion-module_accordion__2fPUT.Accordion-module_card__1iRKx{background-color:var(--background-color);padding-left:var(--padding-horizontal);padding-right:var(--padding-horizontal)}.Accordion-module_accordion__2fPUT.Accordion-module_border__2AgQd{border:2px solid var(--border-color)}.Accordion-module_accordionHeader__3_uK7{align-items:center;color:var(--header-font-color);display:flex;font-size:var(--header-font-size);font-weight:var(--header-font-weight);justify-content:space-between;letter-spacing:var(--header-letter-spacing);line-height:var(--header-line-height);padding-bottom:var(--padding-vertical);padding-top:var(--padding-vertical);position:relative}.Accordion-module_accordionHeader__3_uK7>div{flex:1 1 auto}.Accordion-module_s__8gw4g{--header-font-size:var(--fontsize-heading-s);--padding-vertical:var(--spacing-s);--header-font-weight:700;--header-letter-spacing:0.2px;--header-line-height:1.4;--button-size:28px;--padding-horizontal:var(--spacing-2-xs)}.Accordion-module_s__8gw4g .Accordion-module_closeButton__1Qt8U div{margin-right:var(--spacing-4-xs)}.Accordion-module_m__2k6QY{--header-font-size:var(--fontsize-heading-m);--padding-vertical:var(--spacing-m);--header-font-weight:500;--header-letter-spacing:-0.2px;--header-line-height:32px;--button-size:36px;--padding-horizontal:var(--spacing-m)}.Accordion-module_m__2k6QY .Accordion-module_closeButton__1Qt8U div{margin-right:6px}.Accordion-module_l__gPzdT{--header-font-size:var(--fontsize-heading-l);--padding-vertical:var(--spacing-l);--header-font-weight:400;--header-letter-spacing:-0.4px;--header-line-height:var(--lineheight-s);--button-size:52px;--padding-horizontal:var(--spacing-l)}.Accordion-module_l__gPzdT .Accordion-module_closeButton__1Qt8U div{margin-right:var(--spacing-xs)}.Accordion-module_accordionContent__1umso{color:var(--content-font-color);font-size:var(--content-font-size);line-height:var(--content-line-height);padding-bottom:var(--spacing-m);position:relative}.Accordion-module_accordionContent__1umso .Accordion-module_closeButton__1Qt8U{bottom:0;color:var(--content-font-color);position:absolute;right:0}.Accordion-module_contentWithCloseButton__-einM{padding-bottom:44px}.Accordion-module_headingContainer__1DzX3{align-items:center;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:auto calc(var(--button-size));width:100%}.Accordion-module_headingContainer__1DzX3:focus{outline:2px solid var(--header-focus-outline-color,transparent)}.Accordion-module_accordionButtonIcon__MQu2J{border:2px solid transparent;box-sizing:border-box;height:var(--button-size)!important;margin:auto;width:var(--button-size)!important}");const _=e=>({en:"Close",fi:"Sulje",sv:"Stäng"}[e]),g=e=>{let{border:t=!1,card:n=!1,children:r,className:a,closeButtonClassName:i,closeButton:g=!0,heading:b,headingLevel:v=2,id:E,initiallyOpen:k=!1,language:y="fi",size:x="m",style:w,theme:C}=e;const I=(0,o.useRef)(null),[S,L]=(0,o.useState)(!1),[A]=(0,o.useState)(E||l()("accordion-")),z=C&&{"--background-color":C["--background-color"],"--border-color":C["--border-color"],"--header-font-color":C["--header-font-color"],"--header-focus-outline-color":C["--header-focus-outline-color"],"--content-font-color":C["--content-font-color"],"--content-font-size":C["--content-font-size"],"--content-line-height":C["--content-line-height"]},D=h(z),j=(0,u.u)(f.accordion,Object.keys(D).length>0?D:void 0),T=C&&{"--header-font-size":C["--header-font-size"],"--padding-vertical":C["--padding-vertical"],"--padding-horizontal":C["--padding-horizontal"],"--header-font-weight":C["--header-font-weight"],"--header-letter-spacing":C["--header-letter-spacing"],"--header-line-height":C["--header-line-height"],"--button-size":C["--button-size"]},N=h(T),O=(0,u.u)(f[x],Object.keys(N).length>0?N:void 0),{isOpen:B,buttonProps:M,contentProps:H}=(0,s.u)({initiallyOpen:k}),R=B?o.createElement(m.I,{"aria-hidden":!0,className:f.accordionButtonIcon}):o.createElement(p.I,{"aria-hidden":!0,className:f.accordionButtonIcon}),P=function(){const[e,t]=o.useState(!1);return o.useEffect((()=>{t(!0)}),[]),e}();(0,o.useEffect)((()=>{if(!P)return;const e=setTimeout((()=>{I.current.focus(),!0===S&&(L(!1),M.onClick())}),50);return()=>clearTimeout(e)}),[S]);const F=()=>{L(!0)};return o.createElement("div",{className:(0,c.c)(f.accordion,n&&f.card,n&&t&&f.border,B&&f.isOpen,f[x],j,O,a),style:w,id:A},o.createElement("div",{className:(0,c.c)(f.accordionHeader)},o.createElement("div",{role:"heading","aria-level":v,id:A+"-heading"},o.createElement("div",Object.assign({ref:I,role:"button",tabIndex:0,onKeyPress:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),M.onClick())},className:f.headingContainer,"aria-labelledby":A+"-heading"},M,S?{"aria-expanded":!1}:{}),o.createElement("span",{className:"label"},b),R))),o.createElement("div",Object.assign({},H,{id:A+"-content",role:"region",className:(0,c.c)(f.accordionContent,n&&f.card,g&&f.contentWithCloseButton),"aria-labelledby":A+"-heading"}),r,g&&o.createElement(d.B,{"data-testid":A+"-closeButton","aria-label":_(y)+" "+b,className:(0,c.c)(f.closeButton,i),theme:"black",size:"small",onKeyPress:e=>{" "===e.key&&F()},onClick:()=>{F()},variant:"supplementary",iconRight:o.createElement(m.I,{"aria-hidden":!0,size:"xs",className:f.accordionButtonIcon})},_(y))))}},58808:function(e,t,n){"use strict";n.d(t,{B:function(){return g}});var o=n(67294),r=n(7444),l=n(34300),a=n(97640),i=n(21662),c=n(12670),s=n(29928),u="Breadcrumb-module_breadcrumb__1m52F breadcrumb_hds-breadcrumb__3JFPo",d="Breadcrumb-module_list__3hw46 breadcrumb_hds-breadcrumb__list__3qyFn";(0,r.s)(".breadcrumb_hds-breadcrumb__3JFPo{--horizontal-margin-small:var(--spacing-layout-2-xs);--horizontal-margin-medium:var(--spacing-layout-xs);--horizontal-margin-large:var(--spacing-layout-xs);--horizontal-margin-x-large:var(--spacing-layout-s);--horizontal-margin:var(--horizontal-margin-small);display:flex;margin:0 var(--horizontal-margin);padding:var(--spacing-s) 0}.breadcrumb_hds-breadcrumb__list__3qyFn{align-items:center;flex-direction:row;word-wrap:break-word}.breadcrumb_hds-breadcrumb__list--mobile__3k5FD{display:flex}.breadcrumb_hds-breadcrumb__list--desktop__2mWwT{display:none}.breadcrumb_hds-breadcrumb__list-item__2IJfr{align-items:center;display:flex;line-height:var(--lineheight-l)}.breadcrumb_hds-breadcrumb__list-item--active__cHQPc{font-weight:700;padding:3px}.breadcrumb_hds-breadcrumb__link__mhqc3.breadcrumb_hds-breadcrumb__link__mhqc3{--link-visited-color:none;--link-color:var(--color-black-90)}.breadcrumb_hds-breadcrumb__link__mhqc3:focus,.breadcrumb_hds-breadcrumb__link__mhqc3:hover{-webkit-text-decoration-color:var(--color-black-90);text-decoration-color:var(--color-black-90)}.breadcrumb_hds-breadcrumb__list--mobile__3k5FD .breadcrumb_hds-breadcrumb__link__mhqc3{font-size:var(--fontsize-body-l)}.breadcrumb_hds-breadcrumb__back-arrow__S8SMr.breadcrumb_hds-breadcrumb__back-arrow__S8SMr{display:inline-flex;margin-left:-5px;margin-right:-3px;--icon-size:var(--spacing-m)}.breadcrumb_hds-breadcrumb__separator__2oJ4Y.breadcrumb_hds-breadcrumb__separator__2oJ4Y{display:inline-flex;padding-left:var(--spacing-3-xs);--icon-size:var(--spacing-s)}@media (min-width:768px){.breadcrumb_hds-breadcrumb__3JFPo{--horizontal-margin:var(--horizontal-margin-medium)}.breadcrumb_hds-breadcrumb__list--mobile__3k5FD{display:none}.breadcrumb_hds-breadcrumb__list--desktop__2mWwT{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0}}@media (min-width:992px){.breadcrumb_hds-breadcrumb__3JFPo{--horizontal-margin:var(--horizontal-margin-large)}}@media (min-width:1248px){.breadcrumb_hds-breadcrumb__3JFPo{--horizontal-margin:var(--horizontal-margin-x-large)}}.Breadcrumb-module_separator__3Xxu5.Breadcrumb-module_separator__3Xxu5{padding-left:2px;padding-right:2px}");const m=e=>{let{item:t}=e;return o.createElement(i.L,{href:t.path,className:"Breadcrumb-module_link__BSP1k breadcrumb_hds-breadcrumb__link__mhqc3"},t.title)},p=e=>{let{direction:t="right"}=e;const n="right"===t,r=n?c.I:s.I,l=n?"Breadcrumb-module_separator__3Xxu5 breadcrumb_hds-breadcrumb__separator__2oJ4Y":"Breadcrumb-module_backArrow__2eSmu breadcrumb_hds-breadcrumb__back-arrow__S8SMr",a=n?"xs":"s";return o.createElement("span",{className:l,"aria-hidden":!0},o.createElement(r,{size:a}))},h=e=>{let{item:t,showSeparator:n}=e;const r=null!==t.path;return o.createElement("li",{className:"Breadcrumb-module_listItem__2_AEc breadcrumb_hds-breadcrumb__list-item__2IJfr"},r?o.createElement(m,{item:t}):o.createElement("span",{"aria-current":!0,className:"Breadcrumb-module_activeListItem__2Gz5p breadcrumb_hds-breadcrumb__list-item--active__cHQPc"},t.title),n&&o.createElement(p,{key:"separator-"+t.title}))},f=e=>{let{item:t}=e;return o.createElement("div",{className:(0,l.c)(d,"Breadcrumb-module_mobileList__1rj5r breadcrumb_hds-breadcrumb__list--mobile__3k5FD")},o.createElement(p,{direction:"left"}),o.createElement(m,{item:t}))},_=e=>{let{list:t}=e;return o.createElement("ol",{className:(0,l.c)(d,"Breadcrumb-module_desktopList__3WHv- breadcrumb_hds-breadcrumb__list--desktop__2mWwT")},t.map(((e,n)=>o.createElement(o.Fragment,{key:e.title},o.createElement(h,{key:e.title,item:e,showSeparator:n<t.length-1})))))},g=e=>{let{list:t,ariaLabel:n,theme:r}=e;const i=(0,a.u)(u,r),c=t.reduceRight(((e,t)=>e||(t.path?t:void 0)),void 0);return c?o.createElement("nav",{"aria-label":n,className:(0,l.c)(u,i)},o.createElement(_,{list:t}),o.createElement(f,{item:c})):null}},84014:function(e,t,n){"use strict";n.d(t,{D:function(){return k}});var o=n(80136),r=n(67294),l=n(73935),a=n(7444),i=n(34300),c=n(97640),s=n(35828),u={"medium-up":"only screen and (min-width:768px)",dialogVisibleBodyWithHiddenScrollbars:"Dialog-module_dialogVisibleBodyWithHiddenScrollbars__3M__P",dialogBackdrop:"Dialog-module_dialogBackdrop__2Pg2X",dialog:"Dialog-module_dialog__2t3d4",dialogContainer:"Dialog-module_dialogContainer__10Y03",danger:"Dialog-module_danger__yTstu",dialogVisible:"Dialog-module_dialogVisible__6zvp4",dialogScrollable:"Dialog-module_dialogScrollable__3W-hK",boxShadow:"Dialog-module_boxShadow__3qt5w"};(0,a.s)(".Dialog-module_dialogVisibleBodyWithHiddenScrollbars__3M__P{overflow:hidden!important}.Dialog-module_dialogBackdrop__2Pg2X{inset:0;position:fixed}.Dialog-module_dialog__2t3d4{background:#fff;box-sizing:border-box;display:flex;flex-direction:column;margin:auto var(--spacing-s);max-width:100%;position:relative;visibility:hidden;z-index:900}.Dialog-module_dialogContainer__10Y03{--accent-line-color:var(--color-bus);--overlay-color:rgba(0,0,0,0.3);align-items:center;display:flex;inset:0;justify-content:center;overflow:auto;-webkit-overflow-scrolling:unset;overscroll-behavior:none;position:fixed;touch-action:none;z-index:800}.Dialog-module_dialogContainer__10Y03 .Dialog-module_dialogBackdrop__2Pg2X{background:var(--overlay-color)}.Dialog-module_dialogContainer__10Y03 .Dialog-module_dialog__2t3d4{border-top:10px solid var(--accent-line-color);width:558px}.Dialog-module_dialogContainer__10Y03 .Dialog-module_dialog__2t3d4.Dialog-module_danger__yTstu{border-top-color:var(--color-error)}.Dialog-module_dialogVisible__6zvp4{visibility:visible!important}.Dialog-module_dialogScrollable__3W-hK{max-height:calc(100% - 4rem);overflow:hidden}@media only screen and (min-width:768px){.Dialog-module_dialog__2t3d4{margin:auto}}.Dialog-module_boxShadow__3qt5w{box-shadow:var(--box-shadow-l)}");(0,a.s)(".DialogActionButtons-module_dialogActionButtons__5m7AC{display:block;padding:var(--spacing-s) var(--spacing-m) var(--spacing-m)}@media only screen and (min-width:768px){.DialogActionButtons-module_dialogActionButtons__5m7AC{padding-left:var(--spacing-l);padding-right:var(--spacing-l)}}.DialogActionButtons-module_dialogActionButtons__5m7AC>*{width:100%}.DialogActionButtons-module_dialogActionButtons__5m7AC>*+*{margin-top:var(--spacing-s)}@media only screen and (min-width:768px){.DialogActionButtons-module_dialogActionButtons__5m7AC{display:flex;flex-wrap:wrap;gap:var(--spacing-s)}.DialogActionButtons-module_dialogActionButtons__5m7AC>*{width:auto}.DialogActionButtons-module_dialogActionButtons__5m7AC>*+*{margin-top:0}}");const d=e=>{let{children:t,className:n}=e;return r.createElement("div",{className:(0,i.c)("DialogActionButtons-module_dialogActionButtons__5m7AC",n)},t)};d.componentName="DialogActionButtons";(0,a.s)('.DialogHeader-module_dialogHeaderClose__36wOz{background:none;border:none;color:inherit;cursor:pointer;font:inherit}.DialogHeader-module_dialogHeader__32Rho{padding-left:var(--spacing-m);padding-right:var(--spacing-m);display:block;padding-bottom:0;padding-top:var(--spacing-m)}@media only screen and (min-width:768px){.DialogHeader-module_dialogHeader__32Rho{padding-left:var(--spacing-l);padding-right:var(--spacing-l)}}.DialogHeader-module_dialogHeaderContent__3K4i2{align-items:flex-start;display:flex;justify-content:space-between;min-height:36px}.DialogHeader-module_dialogTitle__1GeH_{--outline-x-gutter:4px;--outline-y-gutter:2px;--outline-width:3px;align-items:flex-start;box-sizing:border-box;display:flex;font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:.4px;line-height:24px;margin:0;order:0;outline:none;padding-right:var(--spacing-3-xs);position:relative}.DialogHeader-module_dialogTitle__1GeH_:after{border:var(--outline-width) solid transparent;box-sizing:border-box;content:"";display:block;height:100%;left:calc((var(--outline-width) + var(--outline-x-gutter)) * -1);position:absolute;top:calc((var(--outline-width) + var(--outline-y-gutter)) * -1);width:100%}.DialogHeader-module_dialogTitle__1GeH_:focus:after{border-color:var(--color-coat-of-arms);height:calc(100% + (var(--outline-width) + var(--outline-y-gutter)) * 2);width:calc(100% + (var(--outline-width) + var(--outline-x-gutter)) * 2)}.DialogHeader-module_dialogTitle__1GeH_ .DialogHeader-module_dialogTitleLeftIcon__1xWhC{display:inline-flex;margin-right:var(--spacing-2-xs)}.DialogHeader-module_dialogHeaderClose__36wOz{color:var(--dialog-close-button-color);display:block;font-size:0;height:44px;line-height:1;margin-left:var(--spacing-2-xs);margin-top:calc(-1 * var(--spacing-2-xs));min-width:44px;order:1;padding:0;vertical-align:middle}.DialogHeader-module_dialogHeaderClose__36wOz:focus{box-shadow:0 0 0 3px var(--color-coat-of-arms);outline:none;text-decoration:none}@media only screen and (min-width:768px){.DialogHeader-module_dialogHeader__32Rho{padding-bottom:var(--spacing-3-xs)}}');const m=r.createContext({}),p=e=>{let{id:t,title:n,iconLeft:o}=e;const{close:l,closeButtonLabelText:a,isReadyToShowDialog:i}=(0,r.useContext)(m),c=r.useRef();return(0,r.useEffect)((()=>{c&&i&&c.current.focus()}),[c,i]),r.createElement("div",{className:"DialogHeader-module_dialogHeader__32Rho"},r.createElement("div",{className:"DialogHeader-module_dialogHeaderContent__3K4i2"},l&&r.createElement("button",{className:"DialogHeader-module_dialogHeaderClose__36wOz",type:"button","aria-label":a||"Close",onClick:()=>l()},r.createElement(s.I,{"aria-hidden":"true"})),r.createElement("h2",{id:t,tabIndex:-1,className:"DialogHeader-module_dialogTitle__1GeH_",ref:c},o&&r.createElement("span",{className:"DialogHeader-module_dialogTitleLeftIcon__1xWhC","aria-hidden":"true"},o),n)))};p.componentName="DialogHeader";(0,a.s)(".DialogContent-module_dialogContent__rNnIp{padding-left:var(--spacing-m);padding-right:var(--spacing-m);padding-bottom:var(--spacing-2-xs)}@media only screen and (min-width:768px){.DialogContent-module_dialogContent__rNnIp{padding-left:var(--spacing-l);padding-right:var(--spacing-l)}}.DialogContent-module_dialogContentScrollable__1oi2o{border-bottom:1px solid;border-top:1px solid;overflow-y:auto}");const h=e=>{let{id:t,children:n}=e;const{scrollable:o}=(0,r.useContext)(m);return r.createElement("div",{id:t,className:(0,i.c)("DialogContent-module_dialogContent__rNnIp",o&&"DialogContent-module_dialogContentScrollable__1oi2o")},n)};var f,_;h.componentName="DialogContent",(_=f||(f={})).top="top",_.bottom="bottom";const g={tabIndex:0,"aria-hidden":!0},b=(e,t)=>{if(t){const n=(e=>e.querySelectorAll('a, button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select'))(t);n.length&&n[e===f.top?0:n.length-1].focus()}},v=e=>{let{onFocus:t}=e;return r.createElement("div",Object.assign({},g,{onFocus:t}))},E=(e,t)=>{const n=document.createElement("div");return n.className="hds-dialog-tab-barrier",n.tabIndex=g.tabIndex,n["aria-hidden"]=g.tabIndex["aria-hidden"],n.addEventListener("focus",(()=>b(e,t))),e===f.top?document.body.insertBefore(n,document.body.firstChild):document.body.appendChild(n),n},k=e=>{var{boxShadow:t=!1,id:n,isOpen:a,children:s,close:d,closeButtonLabelText:p,focusAfterCloseElement:h,focusAfterCloseRef:_,scrollable:g,variant:k="primary",style:y,theme:x,className:w,targetElement:C}=e,I=(0,o._)(e,["boxShadow","id","isOpen","children","close","closeButtonLabelText","focusAfterCloseElement","focusAfterCloseRef","scrollable","variant","style","theme","className","targetElement"]);const[S,L]=(0,r.useState)(!1),A={isReadyToShowDialog:S,scrollable:g,close:d,closeButtonLabelText:p},z=(0,c.u)(u.dialogContainer,x),D=(0,r.createRef)(),j=(0,r.useRef)(null);(0,r.useEffect)((()=>{if(a&&void 0!==D)return E(f.top,D.current),E(f.bottom,D.current),()=>{document.querySelectorAll(".hds-dialog-tab-barrier").forEach((e=>{e.remove()}))}}),[D,a]);const{"aria-labelledby":T,"aria-describedby":N}=I,O=(0,r.useCallback)((e=>{d&&"Escape"===e.key&&d()}),[d]),B=(0,r.useCallback)((()=>h||_&&_.current),[h,_]);return(0,r.useEffect)((()=>{if(a){const e=window.innerWidth-document.body.offsetWidth;if(e>0){j.current=document.body.style.paddingRight;const t=parseInt(window.getComputedStyle(document.body).paddingRight,10);document.body.style.paddingRight=t+e+"px"}document.body.classList.add(u.dialogVisibleBodyWithHiddenScrollbars),document.documentElement.classList.add(u.dialogVisibleBodyWithHiddenScrollbars),document.addEventListener("keydown",O,!1),L(!0)}return()=>{if(a){L(!1),document.body.classList.remove(u.dialogVisibleBodyWithHiddenScrollbars),document.documentElement.classList.remove(u.dialogVisibleBodyWithHiddenScrollbars),document.removeEventListener("keydown",O,!1),document.body.style.paddingRight=j.current||"";const e=B();e&&e.focus()}}}),[a,B]),a?l.createPortal(r.createElement(m.Provider,{value:A},r.createElement("div",{className:(0,i.c)(u.dialogContainer,z)},r.createElement(v,{onFocus:()=>b(f.bottom,D.current)}),r.createElement("div",{tabIndex:-1,className:u.dialogBackdrop}),r.createElement("div",{ref:D,role:"dialog","aria-modal":"true",id:n,className:(0,i.c)(u.dialog,S&&u.dialogVisible,g&&u.dialogScrollable,u[k],t&&u.boxShadow,w),style:y,"aria-labelledby":T,"aria-describedby":N},s),r.createElement(v,{onFocus:()=>b(f.top,D.current)}))),C||document.body):null};k.Header=p,k.Content=h,k.ActionButtons=d},99665:function(e,t,n){"use strict";n.d(t,{E:function(){return c}});var o=n(67294),r=n(7661),l=n(7444),a=n(34300),i=n(41011);(0,l.s)(".ErrorSummary-module_errorSummaryBody__3WOh8{font-size:var(--fontsize-body-s);line-height:24px}.ErrorSummary-module_errorSummaryBody__3WOh8 ul{margin:0;padding:0 0 0 var(--spacing-s)}.ErrorSummary-module_errorSummaryBody__3WOh8 li{margin-bottom:.125rem}.ErrorSummary-module_errorSummaryBody__3WOh8 a{color:var(--color-bus)}.ErrorSummary-module_label__1fMZ9:focus{outline:3px solid var(--color-coat-of-arms)}");const c=o.forwardRef(((e,t)=>{let{autofocus:n=!1,className:l,label:c,size:s="default",style:u,children:d}=e;const m=(0,o.useRef)(null);return(0,o.useEffect)((()=>{!0===n&&m.current.focus()}),[n]),o.createElement("div",{ref:t,className:(0,a.c)(r.n.notification,r.n[s],r.n.error,l),style:u,"aria-label":"Error summary","aria-atomic":"true"},o.createElement("div",{className:r.n.content},o.createElement("div",{className:(0,a.c)(r.n.label,"ErrorSummary-module_label__1fMZ9"),role:"heading","aria-level":2,tabIndex:-1,ref:m},o.createElement(i.I,{className:r.n.icon,"aria-hidden":!0}),c),o.createElement("div",{className:"ErrorSummary-module_errorSummaryBody__3WOh8"},d)))}))},61538:function(e,t,n){"use strict";n.d(t,{F:function(){return c}});var o=n(80136),r=n(67294),l=n(7444),a=n(34300),i=n(45422);(0,l.s)('.fieldset_hds-fieldset__2FPi3{--border-style:0 none;--padding-top:4px;--padding-sides:0;--padding-bottom:var(--spacing-s);border:var(--border-style);box-sizing:border-box;padding:var(--padding-top) var(--padding-sides) var(--padding-bottom)}.fieldset_hds-fieldset-legend__2-X6z{font-weight:700;padding:0}.fieldset_hds-fieldset--border__3aSAk{--border-style:2px inset var(--color-black-90);--padding-top:2px;--padding-sides:12px}.fieldset_hds-fieldset--border__3aSAk>.fieldset_hds-fieldset-legend__2-X6z{margin-left:calc(var(--padding-sides) / -2);padding:0 6px}.helpers_visually-hidden__1wQpN{border:0;clip:"rect(0 0 0 0)";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.helpers_button-reset__1oMEE{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.helpers_text-body__cNGRV{color:var(--color-black-90);font-family:var(--font-default);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.helpers_text-medium__36w-m{font-family:var(--font-default);font-weight:500}.helpers_text-bold__3Mr-E{font-family:var(--font-default);font-weight:700}.helpers_text-xl__2Tx_B{font-size:var(--fontsize-heading-m)}.helpers_text-lg__cuO5Z{font-size:var(--fontsize-heading-s)}.helpers_text-md__tJ793{font-size:var(--fontsize-heading-xs)}.helpers_subtitle__2zu-B{font-size:var(--fontsize-body-m)}.helpers_text-sm__1Bfuk{font-size:var(--fontsize-body-s);line-height:var(--lineheight-xl)}.helpers_heading-xxl__2Lhb0{font-size:var(--fontsize-heading-xxl);font-weight:400;letter-spacing:-1.2px;line-height:var(--lineheight-s)}.helpers_heading-xl__1VOyZ{font-size:var(--fontsize-heading-xl);font-weight:400;letter-spacing:-1px;line-height:var(--lineheight-s)}.helpers_heading-xl-mobile__16ACR{font-size:var(--fontsize-heading-xl-mobile);font-weight:400;letter-spacing:-.8px;line-height:var(--lineheight-s)}.helpers_heading-l__3kdJ7{font-size:var(--fontsize-heading-l);font-weight:400;letter-spacing:-.4px;line-height:var(--lineheight-s)}.helpers_heading-m__3pwdU{font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-.2px;line-height:32px}.helpers_heading-s__1lQJG{font-size:var(--fontsize-heading-s);font-weight:500;letter-spacing:.2px;line-height:1.4}.helpers_heading-xs__U5AY1{font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:.4px;line-height:1.33}.helpers_heading-xxs__1-Y0n{font-size:var(--fontsize-heading-xxs);font-weight:700;letter-spacing:.4px;line-height:var(--lineheight-l)}.helpers_helper-text__1eU9U{color:var(--color-black-60);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs)}.Fieldset-module_legendWithTooltip__1fDha{align-items:center;display:flex;grid-column-gap:var(--spacing-2-xs);justify-content:flex-start}.Fieldset-module_tooltipButton__2lhCc{align-items:center;display:flex}');const c=e=>{var{heading:t,border:n,className:l,helperText:c,tooltipText:s,tooltipLabel:u,tooltipButtonLabel:d,children:m}=e,p=(0,o._)(e,["heading","border","className","helperText","tooltipText","tooltipLabel","tooltipButtonLabel","children"]);return r.createElement("fieldset",Object.assign({className:(0,a.c)("Fieldset-module_fieldset__2OtST fieldset_hds-fieldset__2FPi3",n&&"fieldset_hds-fieldset--border__3aSAk",l)},p),r.createElement("legend",{className:s?"Fieldset-module_legendWithTooltip__1fDha fieldset_hds-fieldset-legend__2-X6z":"Fieldset-module_legend__35Acm fieldset_hds-fieldset-legend__2-X6z"},t,s&&r.createElement(i.T,{className:"Fieldset-module_tooltipButton__2lhCc",tooltipLabel:u,buttonLabel:d},s)),m,c&&r.createElement("div",{className:"Fieldset-module_helperText__BZXwu helpers_helper-text__1eU9U"},c))}},96234:function(e,t,n){"use strict";n.d(t,{F:function(){return D},f:function(){return g}});var o=n(15785),r=n(67294),l=n(5871),a=n.n(l),i=n(37776),c=n(34300),s=n(93667),u=n(7444),d=n(52708),m=n(63483),p=n(35828),h=n(17882);(0,u.s)(".FileInput-module_fileInput__hClRc{border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.FileInput-module_dragAndDropHelperText__31Ljw{color:var(--label-color-default,var(--color-black-90));display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.FileInput-module_dragAndDrop__3d3xe{align-items:center;border:2px dotted var(--color-coat-of-arms);box-sizing:border-box;color:var(--color-coat-of-arms);cursor:pointer;display:flex;justify-content:center;margin-top:var(--spacing-xs);max-width:500px;padding:var(--spacing-s);width:100%}.FileInput-module_dragAndDropActive__3hREg{background-color:var(--color-silver-light);border-color:var(--color-coat-of-arms-dark);color:var(--color-coat-of-arms-dark)}.FileInput-module_dragAndDropDisabled__Ek-uE{border-color:var(--color-black-50);color:var(--color-black-50);cursor:not-allowed}.FileInput-module_dragAndDropLabel__1pDQN{align-items:center;display:flex}.FileInput-module_dragAndDropLabelText__3AJ4P{margin-left:var(--spacing-s)}.FileInput-module_dragAndDropHelperText__31Ljw{margin:var(--spacing-s) 0 var(--spacing-2-xs)}.FileInput-module_fileInputContainer__9N5TG{flex:1}.FileInput-module_fileInputWrapper__1E8Jf{display:inline-block;margin:var(--spacing-2-xs) 0;position:relative}.FileInput-module_fileInputWrapper__1E8Jf:focus-within>button:after{--size:calc(100% + calc(var(--outline-width) * 2 + var(--border-width) * 2 + var(--outline-gutter) * 2));border-color:var(--color-focus-outline)}.FileInput-module_fileList__drFD1{list-style:none;margin:var(--spacing-s) 0 0;padding:0}.FileInput-module_fileListItem__2fomf{align-items:flex-start;background-color:var(--color-info-light);border-bottom:2px dotted var(--color-coat-of-arms);box-sizing:border-box;display:flex;max-width:100%;padding:var(--spacing-s) var(--spacing-2-xs);width:500px}.FileInput-module_fileListItem__2fomf+.FileInput-module_fileListItem__2fomf{margin-top:var(--spacing-s)}.FileInput-module_fileListItemTitle__15-8y{align-items:flex-start;display:flex;flex:1;flex-wrap:nowrap;font-size:var(--fontsize-body-s);margin:2px var(--spacing-xs) 0 var(--spacing-2-xs)}.FileInput-module_fileListItemName__1BqM7{hyphens:auto;word-break:break-word}.FileInput-module_fileListItemSize__1ZMYb{margin-left:var(--spacing-2-xs);text-align:right;white-space:nowrap}.FileInput-module_fileListItemButton__3HfCX{--file-list-item-button-y-offset:calc(-1 * var(--spacing-2-xs) - 2px);display:flex;margin:var(--file-list-item-button-y-offset) auto var(--file-list-item-button-y-offset) 0}.FileInput-module_fileListItemButtonLabel__2FIPm{margin-left:var(--spacing-3-xs)}");const f=e=>({file:e,uiId:a()(e.name)}),_=e=>e.file,g=e=>{if(0===e)return"0 B";const t=Math.floor(Math.log(e)/Math.log(1024)),n=e/Math.pow(1024,t);return(t<2||n%1==0?Math.round(n):n.toFixed(1))+" "+["B","KB","MB","GB","TB"][t]},b=e=>({en:"No file has been selected.",fi:"Yhtään tiedostoa ei ole valittu.",sv:"Ingen fil har valts."}[e]),v=(e,t)=>({en:"Remove "+t+" from the added files.",fi:"Poista tiedosto "+t+" lisätyistä tiedostoista.",sv:"Ta bort "+t+" från filerna som lagts till."}[e]),E=(e,t)=>({en:(0===t?"1 file":t+" files")+" added.",fi:(0===t?"1 tiedosto":t+" tiedostoa")+" added.",sv:(0===t?"1 fil":t+" filer")+" har lagts till."}[e]),k=(e,t,n)=>{const o=t===n?t:t+"/"+n;return{en:o+" file(s) added.",fi:o+" tiedosto(a) lisätty.",sv:o+" fil(er) har lagts till."}[e]},y=(e,t)=>{const n=g(t);return{en:"The maximum file size is "+n+".",fi:"Suurin sallittu tiedostokoko on "+n+".",sv:"Den maximala filstorleken är "+n+"."}[e]},x=(e,t)=>{const n=e.split(",");if(1===n.length)return n.toString();const o=n.pop();return n.join(", ")+" "+t+" "+o},w=(e,t)=>({en:"Only "+x(t,"and")+" files.",fi:"Vain "+x(t,"ja")+" tiedostoja.",sv:"Endast "+x(t,"och")+" filer."}[e]),C=(e,t,n)=>{const o=w(e,n);return{en:"The file type, "+t.name+", is not supported. "+o,fi:"Tiedoston, "+t.name+", tyyppi ei vastaa hyväksyttyjä tiedostotyppejä. "+o,sv:"Filformatet, "+t.name+", stöds inte. "+o}[e]},I=(e,t,n)=>{const o=g(t.size);return{en:"File, "+t.name+", is too large ("+o+"). "+y(e,n),fi:"Tiedosto, "+t.name+" on liian suuri ("+o+"). "+y(e,n),sv:"Filen, "+t.name+", är för stor ("+o+"). "+y(e,n)}[e]};var S,L;(L=S||(S={})).accept="accept",L.maxSize="maxSize";const A=(e,t)=>n=>{const o=(e=>{if(!e||"string"!=typeof e||""===e)return console.warn("FileInput: Path must be a non-empty string. Path is now "+JSON.stringify(e)),"";const t=e.lastIndexOf(".");if(-1===t)return console.warn("FileInput: File is missing extension"),"";const n=e.substring(t);return n.length<=1?(console.warn("FileInput: File is missing extension"),""):n})(n.name),r=n.type,l=t.split(",").map((e=>e.trim())),a=!!l.find((e=>e.includes(r)||e.includes(r.split("/")[0]+"/*"))),i=!!l.find((e=>e===o));return a||i||{type:S.accept,text:C(e,n,t)}},z=(e,t)=>n=>n.size<=t||{type:S.maxSize,text:I(e,n,t)},D=e=>{let{id:t,label:n,buttonLabel:l,language:a="fi",defaultValue:u,disabled:x,dragAndDrop:C,dragAndDropLabel:I,dragAndDropInputLabel:S,maxSize:L,className:D="",successText:j,errorText:T,helperText:N,infoText:O,onChange:B,required:M,style:H,accept:R,multiple:P,tooltipLabel:F,tooltipButtonLabel:U,tooltipText:W}=e;const V=(0,r.useRef)(null),q=(0,r.useRef)(!1),[G,Z]=(0,r.useState)([]),[K,J]=(0,r.useState)(),[Y,Q]=(0,r.useState)(),[X,$]=(0,r.useState)(),ee=G&&G.length>0,te=t+"-list",ne=(0,r.useRef)(null),oe=(0,r.useRef)(),re=(0,r.useRef)(null),[le,ae]=(0,r.useState)(!1),ie=[R&&w(a,R),L&&y(a,L)].filter((e=>!!e)).join(" "),ce=N||ie,se=T||Y,ue=O||K,de={className:D,helperText:ce,successText:j||X,errorText:se,infoText:x?void 0:ue,id:t,label:n,required:M,style:H,tooltipLabel:F,tooltipButtonLabel:U,tooltipText:W},me=()=>{V.current&&V.current.click()},pe=()=>{V.current&&V.current.focus()},he=()=>{$(void 0),J(void 0),Q(void 0),oe.current=null},fe=[R?A(a,R):void 0,L?z(a,L):void 0].filter((e=>!!e)),_e=e=>0===fe.length?{validFiles:e,validationErrors:[]}:e.reduce(((e,t)=>{const n=fe.map((e=>e(t))).filter((e=>!0!==e));return n.length>0?Object.assign(Object.assign({},e),{validationErrors:[].concat((0,o.Z)(e.validationErrors),[n])}):Object.assign(Object.assign({},e),{validFiles:[].concat((0,o.Z)(e.validFiles),[t])})}),{validFiles:[],validationErrors:[]}),ge=(e,t)=>""+((e,t,n)=>{const o=t+"/"+n;return{en:"File processing failed for "+o+" files:\n",fi:"Tiedostonlisäys epäonnistui "+o+" tiedoston kohdalla:\n",sv:"Filprocesseringen av filerna "+o+" misslyckades:\n"}[e]})(a,e.length,t)+e.map((e=>"- "+e[0].text)).join("\n"),be=e=>{if(B){const t=e.map(_);B(t)}V.current&&(V.current.value="")},ve=e=>{he(),P?(e=>{if(e.length>0){const{validFiles:t,validationErrors:n}=_e(e);if(n.length>0&&Q(ge(n,e.length)),t.length>0){const n=t.map(f),r=[].concat((0,o.Z)(G),(0,o.Z)(n));Z(r),$(k(a,t.length,e.length)),be(r)}}})(e):(e=>{if(e.length>0){const{validFiles:t,validationErrors:n}=_e(e);if(n.length>0)Q(ge(n,1));else{const e=[f(t[0])];Z(e),$(k(a,1,1)),be(e)}}})(e)},Ee=e=>{e.preventDefault(),e.stopPropagation(),ae(!0)},ke=e=>{e.preventDefault(),e.stopPropagation(),ae(!1)};(0,r.useEffect)((()=>{q.current||(J(b(a)),q.current=!0)}),[J,a]),(0,r.useEffect)((()=>{if(!ee&&u&&V.current){const e=new DataTransfer;u.forEach((t=>{const n=new File([t],t.name,{type:t.type,lastModified:t.lastModified});e.items.add(n)})),V.current.files=e.files;const t=new Event("change",{bubbles:!0});V.current.dispatchEvent(t)}}),[u]);const ye=[(0,i.c)(t,ce,se,j,ue),ee&&te].filter((e=>!!e)).join(" ");return r.createElement(r.Fragment,null,r.createElement(s.I,Object.assign({},de),r.createElement("div",{className:"FileInput-module_fileInputContainer__9N5TG"},C&&r.createElement(r.Fragment,null,r.createElement("div",Object.assign({"aria-hidden":!0,className:(0,c.c)("FileInput-module_dragAndDrop__3d3xe",le&&"FileInput-module_dragAndDropActive__3hREg",x&&"FileInput-module_dragAndDropDisabled__Ek-uE"),ref:re},x?{}:{onClick:()=>me(),onDragEnter:Ee,onDragOver:Ee,onDragLeave:ke,onDrop:e=>{const{dataTransfer:t}=e;ke(e),ve(Array.from(t.files))}}),r.createElement("div",{className:"FileInput-module_dragAndDropLabel__1pDQN"},r.createElement(d.I,{"aria-hidden":!0}),r.createElement("span",{className:"FileInput-module_dragAndDropLabelText__3AJ4P"},I||(e=>({en:"Drag files here",fi:"Raahaa tiedostot tähän",sv:"Dra filerna hit"}[e]))(a)))),r.createElement("div",{className:"FileInput-module_dragAndDropHelperText__31Ljw"},S||(e=>({en:"or browse from your device",fi:"tai valitse tiedostot laitteeltasi",sv:"eller välj filerna från din enhet"}[e]))(a))),r.createElement("div",{className:"FileInput-module_fileInputWrapper__1E8Jf"},r.createElement(h.B,{"aria-hidden":!0,tabIndex:-1,variant:"secondary",iconLeft:r.createElement(m.I,{"aria-hidden":!0}),onClick:e=>{e.preventDefault(),e.stopPropagation(),pe(),me()},disabled:x},l||((e,t)=>({en:"Add "+(t?"files":"a file"),fi:"Lisää "+(t?"tiedostoja":"tiedosto"),sv:"Välj "+(t?"filer":"en fil")}[e]))(a,P)),r.createElement("input",Object.assign({type:"file",ref:V,id:t,disabled:x,required:M,"aria-describedby":ye,className:"FileInput-module_fileInput__hClRc",onChange:e=>{ve(Array.from(e.target.files))}},R?{accept:R}:{},P?{multiple:P}:{}))))),r.createElement("ul",{id:te,ref:ne,tabIndex:-1,className:"FileInput-module_fileList__drFD1","aria-label":ee?E(a,G.length):b(a)},G.map(((e,t)=>r.createElement("li",{key:e.uiId,className:"FileInput-module_fileListItem__2fomf",tabIndex:-1,ref:e=>{e&&ne.current&&oe.current===t&&e.focus()}},e.file.type.startsWith("image")?r.createElement(d.a,{"aria-hidden":!0}):r.createElement(d.b,{"aria-hidden":!0}),r.createElement("div",{className:"FileInput-module_fileListItemTitle__15-8y"},r.createElement("span",{className:"FileInput-module_fileListItemName__1BqM7"},e.file.name),r.createElement("span",{className:"FileInput-module_fileListItemSize__1ZMYb"},"(",g(e.file.size),")")),r.createElement(h.B,{onClick:n=>{n.preventDefault(),n.stopPropagation(),((e,t)=>{he();const n=G.filter((t=>t.uiId!==e.uiId));Z(n),n.length>0?(oe.current=t>0?t-1:0,J((e=>({en:"The file has been deleted.",fi:"Tiedosto poistettu.",sv:"Filen har tagits bort."}[e]))(a))):(pe(),J(b(a))),be(n)})(e,t)},variant:"supplementary",size:"small",theme:"black",iconLeft:r.createElement(p.I,null),"aria-label":v(a,e.file.name),className:"FileInput-module_fileListItemButton__3HfCX",disabled:x},(e=>({en:"Remove",fi:"Poista",sv:"Ta bort"}[e]))(a)))))))}},32454:function(e,t,n){"use strict";n.d(t,{H:function(){return c}});var o=n(67294),r=n(7444),l=n(34300),a=n(97640);(0,r.s)('/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--breakpoint-xs:320px;--breakpoint-s:576px;--breakpoint-m:768px;--breakpoint-l:992px;--breakpoint-xl:1248px;--container-width-xs:288px;--container-width-s:544px;--container-width-m:720px;--container-width-l:944px;--container-width-xl:1200px;--color-brick:#bd2719;--color-brick-light:#ffeeed;--color-brick-medium-light:#facbc8;--color-brick-dark:#800e04;--color-bus:#0000bf;--color-bus-light:#f0f0ff;--color-bus-medium-light:#ccf;--color-bus-dark:#00005e;--color-coat-of-arms:#0072c6;--color-coat-of-arms-light:#e6f4ff;--color-coat-of-arms-medium-light:#b5daf7;--color-coat-of-arms-dark:#005799;--color-copper:#00d7a7;--color-copper-light:#cffaf1;--color-copper-medium-light:#9ef0de;--color-copper-dark:#00a17d;--color-engel:#ffe977;--color-engel-light:#fff9db;--color-engel-medium-light:#fff3b8;--color-engel-dark:#dbc030;--color-fog:#9fc9eb;--color-fog-light:#e8f3fc;--color-fog-medium-light:#d0e6f7;--color-fog-dark:#72a5cf;--color-gold:#c2a251;--color-gold-light:#f7f2e4;--color-gold-medium-light:#e8d7a7;--color-gold-dark:#9e823c;--color-metro:#fd4f00;--color-metro-light:#ffeee6;--color-metro-medium-light:#ffcab3;--color-metro-dark:#bd2f00;--color-silver:#dedfe1;--color-silver-light:#f7f7f8;--color-silver-medium-light:#efeff0;--color-silver-dark:#b0b8bf;--color-summer:#ffc61e;--color-summer-light:#fff4d4;--color-summer-medium-light:#ffe49c;--color-summer-dark:#cc9200;--color-suomenlinna:#f5a3c7;--color-suomenlinna-light:#fff0f7;--color-suomenlinna-medium-light:#ffdbeb;--color-suomenlinna-dark:#e673a5;--color-tram:#008741;--color-tram-light:#dff7eb;--color-tram-medium-light:#a3e3c2;--color-tram-dark:#006631;--color-focus-outline:#0072c6;--color-black:#000;--color-white:#fff;--color-black-5:#f2f2f2;--color-black-10:#e6e6e6;--color-black-20:#ccc;--color-black-30:#b3b3b3;--color-black-40:#999;--color-black-50:grey;--color-black-60:#666;--color-black-70:#4d4d4d;--color-black-80:#333;--color-black-90:#1a1a1a;--color-error:#b01038;--color-error-light:#f6e2e6;--color-error-dark:#8d0d2d;--color-success:#007a64;--color-success-light:#e2f5f3;--color-success-dark:#006250;--color-alert:#ffda07;--color-alert-light:#fff4b4;--color-alert-dark:#d18200;--color-info:#0062b9;--color-info-light:#e5eff8;--color-info-dark:#004f94;--box-shadow-s:0px 2px 10px 0px rgba(0,0,0,0.07);--box-shadow-m:0px 2px 10px 0px rgba(0,0,0,0.1);--box-shadow-l:0px 2px 20px 0px rgba(0,0,0,0.2);--spacing-layout-2-xs:1rem;--spacing-layout-xs:1.5rem;--spacing-layout-s:2rem;--spacing-layout-m:3rem;--spacing-layout-l:4rem;--spacing-layout-xl:6rem;--spacing-layout-2-xl:8rem;--spacing-4-xs:0.125rem;--spacing-3-xs:0.25rem;--spacing-2-xs:0.5rem;--spacing-xs:0.75rem;--spacing-s:1rem;--spacing-m:1.5rem;--spacing-l:2rem;--spacing-xl:2.5rem;--spacing-2-xl:3.0rem;--spacing-3-xl:3.5rem;--spacing-4-xl:4rem;--spacing-5-xl:4.5rem;--fontsize-heading-xxl:4rem;--fontsize-heading-xl:3rem;--fontsize-heading-xl-mobile:2.5rem;--fontsize-heading-l:2rem;--fontsize-heading-m:1.5rem;--fontsize-heading-s:1.25rem;--fontsize-heading-xs:1.125rem;--fontsize-heading-xxs:1rem;--fontsize-body-s:0.875rem;--fontsize-body-m:1rem;--fontsize-body-l:1.125rem;--fontsize-body-xl:1.25rem;--font-default:HelsinkiGrotesk,Arial,sans-serif;--lineheight-s:1;--lineheight-m:1.2;--lineheight-l:1.5;--lineheight-xl:1.75}@keyframes base-min_fadeIn__1eL7b{0%{opacity:0}to{opacity:1}}.base-min_visually-hidden__2X9es{border:0;clip:"rect(0 0 0 0)";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.base-min_button-reset__1DpKC{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.base-min_text-body__3BoE9{color:var(--color-black-90);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.base-min_text-body__3BoE9,.base-min_text-medium__3mQy-{font-family:var(--font-default)}.base-min_text-medium__3mQy-{font-weight:500}.base-min_text-bold__3vbqu{font-family:var(--font-default);font-weight:700}.base-min_text-xl__otWNO{font-size:var(--fontsize-heading-m)}.base-min_text-lg__23w6P{font-size:var(--fontsize-heading-s)}.base-min_text-md__4FgZi{font-size:var(--fontsize-heading-xs)}.base-min_subtitle__1npRt{font-size:var(--fontsize-body-m)}.base-min_text-sm__1_dmI{font-size:var(--fontsize-body-s);line-height:var(--lineheight-xl)}.base-min_heading-xxl__DU1O5{font-size:var(--fontsize-heading-xxl);letter-spacing:-1.2px}.base-min_heading-xl__2X67k,.base-min_heading-xxl__DU1O5{font-weight:400;line-height:var(--lineheight-s)}.base-min_heading-xl__2X67k{font-size:var(--fontsize-heading-xl);letter-spacing:-1px}.base-min_heading-xl-mobile__wsjuU{font-size:var(--fontsize-heading-xl-mobile);letter-spacing:-.8px}.base-min_heading-l__2jPN5,.base-min_heading-xl-mobile__wsjuU{font-weight:400;line-height:var(--lineheight-s)}.base-min_heading-l__2jPN5{font-size:var(--fontsize-heading-l);letter-spacing:-.4px}.base-min_heading-m__rYAVF{font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-.2px;line-height:32px}.base-min_heading-s__3TqeA{font-size:var(--fontsize-heading-s);font-weight:500;letter-spacing:.2px;line-height:1.4}.base-min_heading-xs__tmFku{font-size:var(--fontsize-heading-xs);line-height:1.33}.base-min_heading-xs__tmFku,.base-min_heading-xxs__3Wb8h{font-weight:700;letter-spacing:.4px}.base-min_heading-xxs__3Wb8h{font-size:var(--fontsize-heading-xxs);line-height:var(--lineheight-l)}.base-min_helper-text__119xK{color:var(--color-black-60);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs)}');var i={highlight:"Highlight-module_highlight__iVprf highlight_hds-highlight___uE3p",highlightBlockquote:"Highlight-module_highlightBlockquote__Bhn4A highlight_hds-blockquote__1QLSQ",text:"Highlight-module_text__2OPbz highlight_hds-highlight__text__31xf_","size-s":"Highlight-module_size-s__AwvVr highlight_hds-highlight--small__11cWK","size-l":"Highlight-module_size-l__3i6ZU highlight_hds-highlight--large__1EjiL",quote:"Highlight-module_quote__elKVW highlight_hds-highlight__quote__3ed0C",reference:"Highlight-module_reference__ICH8J highlight_hds-highlight__reference__3_4ca"};(0,r.s)(".highlight_hds-highlight___uE3p{--accent-line-color:var(--color-bus);--text-color:var(--color-black-90);--size-width-s:264px;--size-width-m:536px;--size-width-l:680px;--width:var(--size-width-m);--margin:var(--spacing-m) 0;border-left:8px solid var(--accent-line-color);color:var(--text-color);display:flex;flex-direction:column;justify-content:center;margin:var(--margin);max-width:100%;padding:0;padding-left:var(--spacing-s);grid-row-gap:var(--spacing-m);row-gap:var(--spacing-m);width:var(--width)}.highlight_hds-blockquote__1QLSQ{margin:0;padding:0}.highlight_hds-highlight__text__31xf_{color:var(--text-color);font-size:var(--fontsize-heading-m);line-height:var(--lineheight-m);margin:0;padding:0}.highlight_hds-highlight--small__11cWK{--margin:var(--spacing-s) 0;--width:var(--size-width-s)}.highlight_hds-highlight--large__1EjiL{--margin:var(--spacing-l) 0;--width:var(--size-width-l)}.highlight_hds-highlight--large__1EjiL .highlight_hds-highlight__text__31xf_{font-size:var(--fontsize-heading-l);line-height:var(--lineheight-l)}.highlight_hds-highlight__quote__3ed0C:after,.highlight_hds-highlight__quote__3ed0C:before{content:'\"';display:inline}.highlight_hds-highlight__reference__3_4ca{font-size:var(--fontsize-heading-xs);line-height:var(--lineheight-m)}");const c=e=>{let{theme:t,size:n,type:r,text:c,reference:s}=e;const u=(0,a.u)(i.highlight,t||{}),d=r&&"quote"===r;return o.createElement("figure",{className:(0,l.c)(i.highlight,n&&i["size-"+n],u)},o.createElement("blockquote",{className:i.highlightBlockquote},o.createElement("p",{className:(0,l.c)(i.text,d&&i.quote)},c)),s&&o.createElement("figcaption",{className:i.reference},"—⁠",s))}},36870:function(e,t,n){"use strict";n.d(t,{I:function(){return l}});var o=n(67294),r=n(32719);const l=e=>{let{ariaLabel:t="arrow-right",ariaLabelledby:n,ariaHidden:l=!0,className:a="",color:i,size:c="s",style:s={}}=e;return o.createElement("svg",{className:[r.s.icon,r.s[c],a].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":n,"aria-hidden":l,color:i,style:s},o.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z",fill:"currentColor"}))}},87407:function(e,t,n){"use strict";n.d(t,{I:function(){return l}});var o=n(67294),r=n(32719);const l=e=>{let{ariaLabel:t="cross-circle-fill",ariaLabelledby:n,ariaHidden:l=!0,className:a="",color:i,size:c="s",style:s={}}=e;return o.createElement("svg",{className:[r.s.icon,r.s[c],a].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":n,"aria-hidden":l,color:i,style:s},o.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM15 7.5L16.5 9L13.5 12L16.5 15L15 16.5L12 13.5L9 16.5L7.5 15L10.5 12L7.5 9L9 7.5L12 10.5L15 7.5Z",fill:"currentColor"}))}},4112:function(e,t,n){"use strict";n.d(t,{I:function(){return a},a:function(){return l}});var o=n(67294),r=n(32719);const l=e=>{let{ariaLabel:t="eye",ariaLabelledby:n,ariaHidden:l=!0,className:a="",color:i,size:c="s",style:s={}}=e;return o.createElement("svg",{className:[r.s.icon,r.s[c],a].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":n,"aria-hidden":l,color:i,style:s},o.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M12 4.5C16.0501 4.5 19.7168 7 23 12C19.7168 17 16.0501 19.5 12 19.5C7.94991 19.5 4.28325 17 1 12C4.28325 7 7.94991 4.5 12 4.5ZM12 6.5C9.04854 6.5 6.2496 8.20372 3.57529 11.8024L3.43 12L3.57529 12.1976C6.19914 15.7284 8.94296 17.435 11.8331 17.4982L12 17.5C14.9515 17.5 17.7504 15.7963 20.4247 12.1976L20.5695 12L20.4247 11.8024C17.8009 8.27162 15.057 6.56497 12.1669 6.50182L12 6.5ZM12 8C14.2091 8 16 9.79086 16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8ZM12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10Z",fill:"currentColor"}))},a=e=>{let{ariaLabel:t="eye-crossed",ariaLabelledby:n,ariaHidden:l=!0,className:a="",color:i,size:c="s",style:s={}}=e;return o.createElement("svg",{className:[r.s.icon,r.s[c],a].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":n,"aria-hidden":l,color:i,style:s},o.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M19.7929 2.79291L21.2071 4.20712L4.70711 20.7071L3.29289 19.2929L19.7929 2.79291ZM19.6465 7.88777C20.8055 8.9897 21.9234 10.3604 23 12C19.7168 17 16.0501 19.5 12 19.5C10.8495 19.5 9.73001 19.2983 8.64142 18.8948L10.2433 17.2931C10.7683 17.4185 11.2982 17.4865 11.8331 17.4982L12 17.5C14.9515 17.5 17.7504 15.7963 20.4247 12.1976L20.5695 12L20.4247 11.8025C19.7033 10.8317 18.9728 9.99883 18.2328 9.3001L19.6465 7.88777ZM12 4.50001C13.1505 4.50001 14.27 4.70174 15.3586 5.10519L13.7577 6.70716C13.2323 6.58159 12.7021 6.51353 12.1669 6.50184L12 6.50001C9.04854 6.50001 6.2496 8.20374 3.57529 11.8025L3.43 12L3.57529 12.1976C4.29669 13.1683 5.02715 14.0012 5.76723 14.6999L4.35355 16.1123C3.19447 15.0103 2.07662 13.6396 1 12C4.28325 7.00001 7.94991 4.50001 12 4.50001ZM15.976 11.5592C15.9919 11.7039 16 11.851 16 12C16 14.2092 14.2091 16 12 16C11.851 16 11.7039 15.9919 11.5592 15.976L15.976 11.5592ZM12 8.00001C12.149 8.00001 12.2961 8.00816 12.4408 8.02403L8.02402 12.4409C8.00815 12.2961 8 12.149 8 12C8 9.79088 9.79086 8.00001 12 8.00001Z",fill:"currentColor"}))}},30695:function(e,t,n){"use strict";n.d(t,{I:function(){return l}});var o=n(67294),r=n(32719);const l=e=>{let{ariaLabel:t="minus",ariaLabelledby:n,ariaHidden:l=!0,className:a="",color:i,size:c="s",style:s={}}=e;return o.createElement("svg",{className:[r.s.icon,r.s[c],a].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":n,"aria-hidden":l,color:i,style:s},o.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M6 11H18V13H6V11Z",fill:"currentColor"}))}},7025:function(e,t,n){"use strict";n.d(t,{I:function(){return l},a:function(){return a}});var o=n(67294),r=n(32719);const l=e=>{let{ariaLabel:t="error",ariaLabelledby:n,ariaHidden:l=!0,className:a="",color:i,size:c="s",style:s={}}=e;return o.createElement("svg",{className:[r.s.icon,r.s[c],a].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":n,"aria-hidden":l,color:i,style:s},o.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M11.1284 2.50974C11.4971 1.85436 12.4201 1.83095 12.8284 2.43952L12.8716 2.50974L22.4341 19.5097C22.7965 20.1541 22.3585 20.9453 21.638 20.9973L21.5625 21H2.43749C1.69816 21 1.22338 20.2303 1.53125 19.5769L1.56592 19.5097L11.1284 2.50974ZM12 5.04L4.14699 19H19.8525L12 5.04ZM13 16V18H11V16H13ZM13 9.5V14.5H11V9.5H13Z",fill:"currentColor"}))},a=e=>{let{ariaLabel:t="playback-pause",ariaLabelledby:n,ariaHidden:l=!0,className:a="",color:i,size:c="s",style:s={}}=e;return o.createElement("svg",{className:[r.s.icon,r.s[c],a].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":n,"aria-hidden":l,color:i,style:s},o.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M17 5V19H14V5H17ZM10 5V19H7V5H10Z",fill:"currentColor"}))}},63483:function(e,t,n){"use strict";n.d(t,{I:function(){return l}});var o=n(67294),r=n(32719);const l=e=>{let{ariaLabel:t="plus",ariaLabelledby:n,ariaHidden:l=!0,className:a="",color:i,size:c="s",style:s={}}=e;return o.createElement("svg",{className:[r.s.icon,r.s[c],a].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":n,"aria-hidden":l,color:i,style:s},o.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M13 6V11H18V13H13V18H11V13H6V11H11V6H13Z",fill:"currentColor"}))}},52708:function(e,t,n){"use strict";n.d(t,{I:function(){return i},a:function(){return a},b:function(){return l}});var o=n(67294),r=n(32719);const l=e=>{let{ariaLabel:t="document",ariaLabelledby:n,ariaHidden:l=!0,className:a="",color:i,size:c="s",style:s={}}=e;return o.createElement("svg",{className:[r.s.icon,r.s[c],a].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":n,"aria-hidden":l,color:i,style:s},o.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M15 2L20 7V22H4V2H15ZM14 4V8H18L14 4ZM14.0083 4L18 8V20H6V4H14.0083ZM17 16H7V18H17V16ZM17 12H7V14H17V12ZM13 8H7V10H13V8Z",fill:"currentColor"}))},a=e=>{let{ariaLabel:t="photo",ariaLabelledby:n,ariaHidden:l=!0,className:a="",color:i,size:c="s",style:s={}}=e;return o.createElement("svg",{className:[r.s.icon,r.s[c],a].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":n,"aria-hidden":l,color:i,style:s},o.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M20 2V22H4V2H20ZM16 15C15.1401 15 14.7159 15.2223 13.88 16.0363L13.7071 16.2071C12.4113 17.5029 11.5828 18 10 18C8.50049 18 7.67799 17.5539 6.49379 16.4051L6 15.92V20H18V15.922L17.958 15.8813C17.2256 15.1936 16.8025 15 16 15ZM18 4H6L6.00114 13.4397C6.50287 13.6831 6.92886 14.0298 7.51078 14.5986L7.70711 14.7929C8.6613 15.7471 9.08282 16 10 16C10.8599 16 11.2841 15.7777 12.12 14.9637L12.2929 14.7929C13.5887 13.4971 14.4172 13 16 13C16.8098 13 17.4222 13.1301 18.0007 13.4308L18 4ZM10 6C11.6569 6 13 7.34315 13 9C13 10.6569 11.6569 12 10 12C8.34315 12 7 10.6569 7 9C7 7.34315 8.34315 6 10 6ZM10 8C9.44772 8 9 8.44772 9 9C9 9.55228 9.44772 10 10 10C10.5523 10 11 9.55228 11 9C11 8.44772 10.5523 8 10 8Z",fill:"currentColor"}))},i=e=>{let{ariaLabel:t="upload",ariaLabelledby:n,ariaHidden:l=!0,className:a="",color:i,size:c="s",style:s={}}=e;return o.createElement("svg",{className:[r.s.icon,r.s[c],a].filter((e=>e)).join(" "),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-label":t,"aria-labelledby":n,"aria-hidden":l,color:i,style:s},o.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M12 1.63605L17.6569 7.2929L16.2426 8.70712L13 5.46505V18H11V5.46505L7.75736 8.70712L6.34315 7.2929L12 1.63605ZM5 15V20H19V15H21V22H3V15H5Z",fill:"currentColor"}))}},72612:function(e,t,n){"use strict";n.d(t,{L:function(){return m}});var o=n(80136),r=n(67294),l=n(7444),a=n(34300),i=n(77516),c=n(36870),s="Linkbox-module_icon__1e7kG",u="Linkbox-module_iconWhenNoBackground__3RJw_",d="Linkbox-module_iconPositionForLinkboxLargeVariant__3vQvC";(0,l.s)('.helpers_visually-hidden__2yHIV{border:0;clip:"rect(0 0 0 0)";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.helpers_button-reset__3h-7X{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.helpers_text-body__3Ktbd{color:var(--color-black-90);font-family:var(--font-default);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.helpers_text-medium__5kads{font-family:var(--font-default);font-weight:500}.helpers_text-bold__2hO0s{font-family:var(--font-default);font-weight:700}.helpers_text-xl__3r8PW{font-size:var(--fontsize-heading-m)}.helpers_text-lg__2vaNo{font-size:var(--fontsize-heading-s)}.helpers_text-md__2uXml{font-size:var(--fontsize-heading-xs)}.helpers_subtitle__3gee2{font-size:var(--fontsize-body-m)}.helpers_text-sm__3mxQW{font-size:var(--fontsize-body-s);line-height:var(--lineheight-xl)}.helpers_heading-xxl__1uNdU{font-size:var(--fontsize-heading-xxl);font-weight:400;letter-spacing:-1.2px;line-height:var(--lineheight-s)}.helpers_heading-xl__k-Z6c{font-size:var(--fontsize-heading-xl);font-weight:400;letter-spacing:-1px;line-height:var(--lineheight-s)}.helpers_heading-xl-mobile__1PMGL{font-size:var(--fontsize-heading-xl-mobile);font-weight:400;letter-spacing:-.8px;line-height:var(--lineheight-s)}.helpers_heading-l__2DLQU{font-size:var(--fontsize-heading-l);font-weight:400;letter-spacing:-.4px;line-height:var(--lineheight-s)}.helpers_heading-m__3vHem{font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-.2px;line-height:32px}.helpers_heading-s__1HNlW{font-size:var(--fontsize-heading-s);font-weight:500;letter-spacing:.2px;line-height:1.4}.helpers_heading-xs__23mRf{font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:.4px;line-height:1.33}.helpers_heading-xxs__1Tc8t{font-size:var(--fontsize-heading-xxs);font-weight:700;letter-spacing:.4px;line-height:var(--lineheight-l)}.helpers_helper-text__2eYfy{color:var(--color-black-60);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs)}.Linkbox-module_linkbox__15LUm{cursor:pointer;position:relative}.Linkbox-module_linkbox__15LUm:focus-within{outline:var(--color-coat-of-arms) 3px solid}.Linkbox-module_withBackground__1xdbp{background-color:var(--color-white)}.Linkbox-module_withoutBackground__2p7A4{background:transparent;padding-bottom:var(--spacing-2-xl)!important;padding-left:0!important;padding-right:0!important}.Linkbox-module_paddingWithoutImageAndWithBackground__xar7n{padding-top:var(--spacing-m)}.Linkbox-module_paddingWithoutImageAndWithoutBackground__1zCpz{padding:0}.Linkbox-module_withMediumImage__O0JFd,.Linkbox-module_withSmallImage__3E12M{padding-top:var(--spacing-s)}.Linkbox-module_withLargeImage__3M-5l{padding-top:var(--spacing-m)}.Linkbox-module_contentMedium__naQyB,.Linkbox-module_contentSmall__2WG1n{padding-bottom:var(--spacing-4-xl);padding-left:var(--spacing-s);padding-right:var(--spacing-s)}.Linkbox-module_contentLarge__1j0J8{padding-bottom:var(--spacing-5-xl);padding-left:var(--spacing-m);padding-right:var(--spacing-m)}.Linkbox-module_icon__1e7kG{bottom:var(--spacing-s);left:var(--spacing-s);position:absolute;vertical-align:bottom}.Linkbox-module_border__3lfzt{border:2px solid var(--color-black-90)}.Linkbox-module_border__3lfzt:focus-within{border:2px solid var(--color-black-90)!important;outline:var(--color-coat-of-arms) 3px solid}.Linkbox-module_border__3lfzt .Linkbox-module_contentMedium__naQyB,.Linkbox-module_border__3lfzt .Linkbox-module_contentSmall__2WG1n{padding-bottom:62px;padding-left:14px;padding-right:14px}.Linkbox-module_border__3lfzt .Linkbox-module_contentLarge__1j0J8{padding-bottom:70px;padding-left:22px;padding-right:22px}.Linkbox-module_border__3lfzt .Linkbox-module_icon__1e7kG{bottom:14px;left:14px}.Linkbox-module_border__3lfzt .Linkbox-module_paddingWithoutImageAndWithBackground__xar7n{padding-top:22px}.Linkbox-module_text__2lkl4{color:var(--color-black-90);font-family:var(--font-default);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-bottom:var(--spacing-s);margin-top:var(--spacing-2-xs)}.Linkbox-module_contentLarge__1j0J8 .Linkbox-module_text__2lkl4{margin-bottom:var(--spacing-m)}.Linkbox-module_headingSmall__1-9yw{padding-bottom:0}.Linkbox-module_headingLarge__1IWlD{padding-bottom:var(--spacing-2-xs)}.Linkbox-module_link__3tFuW{color:var(--color-black-90);display:inline-block;height:100%;left:0;line-height:var(--lineheight-l);position:absolute;top:0;width:100%}.Linkbox-module_link__3tFuW:focus{border:none;outline:none}.Linkbox-module_iconWhenNoBackground__3RJw_{bottom:0;left:0}.Linkbox-module_iconPositionForLinkboxLargeVariant__3vQvC{bottom:22px;left:22px}.Linkbox-module_image__2GxFx{display:block;height:auto;object-fit:contain;width:100%}');const m=e=>{var{children:t,className:n,external:l=!1,heading:m,headingAriaLevel:p=2,href:h,imgProps:f,linkAriaLabel:_,linkboxAriaLabel:g,noBackground:b=!1,openInExternalDomainAriaLabel:v,openInNewTab:E=!1,openInNewTabAriaLabel:k,text:y,border:x=!1,size:w="medium"}=e,C=(0,o._)(e,["children","className","external","heading","headingAriaLevel","href","imgProps","linkAriaLabel","linkboxAriaLabel","noBackground","openInExternalDomainAriaLabel","openInNewTab","openInNewTabAriaLabel","text","border","size"]);const I=(0,r.useRef)(null),S=e=>{const t=E?k||"Avautuu uudessa välilehdessä.":"",n=l?v||"Siirtyy toiseen sivustoon.":"";let o="";return e&&"."!==e.slice(-1)&&(o=e+"."),[o,t,n].filter((e=>e)).join(" ")};return r.createElement("div",{role:"region",tabIndex:0,onKeyPress:e=>{"Enter"===e.key&&I.current.click()},onClick:()=>{I.current.click()},className:(0,a.c)("Linkbox-module_linkbox__15LUm",x&&"Linkbox-module_border__3lfzt",n),"aria-label":S(g)},f&&r.createElement("img",Object.assign({},f,{className:"Linkbox-module_image__2GxFx",alt:""})),r.createElement("div",{className:(0,a.c)(b&&"Linkbox-module_withoutBackground__2p7A4",!b&&"Linkbox-module_withBackground__1xdbp",b&&!f&&"Linkbox-module_paddingWithoutImageAndWithoutBackground__1zCpz",!b&&!f&&"Linkbox-module_paddingWithoutImageAndWithBackground__xar7n",f&&"small"===w&&"Linkbox-module_withSmallImage__3E12M",f&&"medium"===w&&"Linkbox-module_withMediumImage__O0JFd",f&&"large"===w&&"Linkbox-module_withLargeImage__3M-5l","small"===w&&"Linkbox-module_contentSmall__2WG1n","medium"===w&&"Linkbox-module_contentMedium__naQyB","large"===w&&"Linkbox-module_contentLarge__1j0J8")},m&&r.createElement("div",{role:"heading","aria-level":p,className:(0,a.c)("small"===w&&"Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW","medium"===w&&"Linkbox-module_headingMedium__3YUWb helpers_heading-m__3vHem","large"===w&&"Linkbox-module_headingLarge__1IWlD helpers_heading-l__2DLQU")},m),y&&r.createElement("p",{className:"Linkbox-module_text__2lkl4"},y),t),r.createElement("a",Object.assign({className:"Linkbox-module_link__3tFuW","aria-label":S(_),ref:I,tabIndex:-1,href:h},E&&{target:"_blank",rel:"noopener"},C),l?r.createElement(i.I,{className:(0,a.c)(s,b?u:"large"===w&&d),size:"l","aria-hidden":!0}):r.createElement(c.I,{className:(0,a.c)(s,b?u:"large"===w&&d),size:"l","aria-hidden":!0})))}},81916:function(e,t,n){"use strict";n.d(t,{N:function(){return T}});var o=n(80136),r=n(67294),l=n(39440),a=n(26917),i=n(7444),c=n(93667),s=n(34300),u=n(37776),d=n(94330),m=n(30695),p=n(63483),h="Expected a function",f=NaN,_="[object Symbol]",g=/^\s+|\s+$/g,b=/^[-+]0x[0-9a-f]+$/i,v=/^0b[01]+$/i,E=/^0o[0-7]+$/i,k=parseInt,y="object"==typeof a.a&&a.a&&a.a.Object===Object&&a.a,x="object"==typeof self&&self&&self.Object===Object&&self,w=y||x||Function("return this")(),C=Object.prototype.toString,I=Math.max,S=Math.min,L=function(){return w.Date.now()};function A(e){var t=typeof e;return!!e&&("object"==t||"function"==t)}function z(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return!!e&&"object"==typeof e}(e)&&C.call(e)==_}(e))return f;if(A(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=A(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(g,"");var n=v.test(e);return n||E.test(e)?k(e.slice(2),n?2:8):b.test(e)?f:+e}var D=function(e,t,n){var o=!0,r=!0;if("function"!=typeof e)throw new TypeError(h);return A(n)&&(o="leading"in n?!!n.leading:o,r="trailing"in n?!!n.trailing:r),function(e,t,n){var o,r,l,a,i,c,s=0,u=!1,d=!1,m=!0;if("function"!=typeof e)throw new TypeError(h);function p(t){var n=o,l=r;return o=r=void 0,s=t,a=e.apply(l,n)}function f(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-s>=l}function _(){var e=L();if(f(e))return g(e);i=setTimeout(_,function(e){var n=t-(e-c);return d?S(n,l-(e-s)):n}(e))}function g(e){return i=void 0,m&&o?p(e):(o=r=void 0,a)}function b(){var e=L(),n=f(e);if(o=arguments,r=this,c=e,n){if(void 0===i)return function(e){return s=e,i=setTimeout(_,t),u?p(e):a}(c);if(d)return i=setTimeout(_,t),p(c)}return void 0===i&&(i=setTimeout(_,t)),a}return t=z(t)||0,A(n)&&(u=!!n.leading,l=(d="maxWait"in n)?I(z(n.maxWait)||0,t):l,m="trailing"in n?!!n.trailing:m),b.cancel=function(){void 0!==i&&clearTimeout(i),s=0,o=c=r=i=void 0},b.flush=function(){return void 0===i?a:g(L())},b}(e,t,{leading:o,maxWait:t,trailing:r})},j="NumberInput-module_button__2Shu7";(0,i.s)(".NumberInput-module_numberInputContainer__hKNPp{width:100%}.NumberInput-module_numberInputContainer__hKNPp input::-webkit-inner-spin-button,.NumberInput-module_numberInputContainer__hKNPp input::-webkit-outer-spin-button{appearance:none!important;height:auto;margin:0!important}.NumberInput-module_numberInputContainer__hKNPp input[type=number]{appearance:textfield!important}.NumberInput-module_numberInputWithSteps__3q7N7{padding-left:68px!important;padding-right:68px!important;text-align:center}.NumberInput-module_minusButtonWrapper__3PHN9{border-right:1px solid #ccc}.NumberInput-module_minusButtonWrapper__3PHN9,.NumberInput-module_minusButtonWrapperWithoutBorder__2g42V{align-items:center;bottom:0;display:flex;font-size:1rem;justify-content:center;margin:2px;position:absolute;top:0;width:52px;z-index:1;left:0}.NumberInput-module_plusButtonWrapper__Wwq5t{border-left:1px solid #ccc}.NumberInput-module_plusButtonWrapper__Wwq5t,.NumberInput-module_plusButtonWrapperWithoutBorder__2xb6t{align-items:center;bottom:0;display:flex;font-size:1rem;justify-content:center;margin:2px;position:absolute;top:0;width:52px;z-index:1;right:0}.NumberInput-module_button__2Shu7{align-items:center;appearance:none;background:transparent;border:0;cursor:pointer;display:flex;font-size:1rem;height:100%;justify-content:center;overflow:hidden;padding:0;width:100%}.NumberInput-module_button__2Shu7:disabled{cursor:not-allowed}.NumberInput-module_button__2Shu7:focus{outline:3px solid var(--color-focus-outline);outline-offset:-5px}");const T=r.forwardRef(((e,t)=>{var{className:n="",disabled:a=!1,defaultValue:i,errorText:h,helperText:f,hideLabel:_,invalid:g,id:b,label:v,max:E,min:k,minusStepButtonAriaLabel:y,onChange:x=(()=>null),plusStepButtonAriaLabel:w,required:C,step:I,style:S,successText:L,infoText:A,tooltipLabel:z,tooltipText:T,tooltipButtonLabel:N,type:O="number",unit:B}=e,M=(0,o._)(e,["className","disabled","defaultValue","errorText","helperText","hideLabel","invalid","id","label","max","min","minusStepButtonAriaLabel","onChange","plusStepButtonAriaLabel","required","step","style","successText","infoText","tooltipLabel","tooltipText","tooltipButtonLabel","type","unit"]);const H={className:n,errorText:h,helperText:f,hideLabel:_,id:b,invalid:g,label:(W=v,V=B,!W&&V?"("+V+")":W&&V?W+" ("+V+")":W),required:C,style:S,successText:L,infoText:A,tooltipLabel:z,tooltipText:T,tooltipButtonLabel:N,labelId:I?b+"-label":void 0},R=(0,r.useRef)(null),[P,F]=(0,r.useState)(null),U=()=>{F(String(R.current.value))};var W,V;!function(e){let t=!1;const n=D((()=>{t=!1}),arguments.length>1&&void 0!==arguments[1]?arguments[1]:200);(0,r.useEffect)((()=>{const o=e=>{t&&e.preventDefault(),t=!0,n()};return e.current&&e.current.addEventListener("wheel",o,{passive:!1}),()=>{e.current&&e.current.removeEventListener("wheel",o)}}),[e])}(R),(0,r.useEffect)((()=>{t&&(0,d.m)(t,R)}),[R,t]);const q=()=>{Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value").set.call(R.current,R.current.value);const e=new Event("input",{bubbles:!0});R.current.dispatchEvent(e)},G=I?e=>{null!==P&&F(null),x(e)}:x,Z=(0,u.c)(b,f,h,L,A);return r.createElement(c.I,Object.assign({},H),r.createElement("div",Object.assign({className:"NumberInput-module_numberInputContainer__hKNPp"},I&&{role:"group","aria-labelledby":H.labelId}),r.createElement("input",Object.assign({className:(0,s.c)(c.t.input,I?"NumberInput-module_numberInputWithSteps__3q7N7":""),defaultValue:i,disabled:a,id:b,max:E,min:k,step:I,onChange:G,ref:R,required:C,type:O,"aria-describedby":Z.length>0?Z:null},M)),I&&r.createElement(r.Fragment,null,r.createElement("div",{className:a?"NumberInput-module_minusButtonWrapperWithoutBorder__2g42V":"NumberInput-module_minusButtonWrapper__3PHN9"},r.createElement("button",{className:j,disabled:a,type:"button",onClick:e=>{e.preventDefault(),R.current.stepDown(),q(),U()},"aria-label":y||"Decrease by one"},r.createElement(m.I,{"aria-hidden":"true"}))),r.createElement("div",{className:a?"NumberInput-module_plusButtonWrapperWithoutBorder__2xb6t":"NumberInput-module_plusButtonWrapper__Wwq5t"},r.createElement("button",{className:j,disabled:a,type:"button",onClick:e=>{e.preventDefault(),R.current.stepUp(),q(),U()},"aria-label":w||"Increase by one"},r.createElement(p.I,{"aria-hidden":"true"}))),null!==P&&r.createElement(l.T,null,r.createElement("span",{"aria-live":"assertive"},P)))))}))},2700:function(e,t,n){"use strict";n.d(t,{P:function(){return d}});var o=n(80136),r=n(67294),l=n(7444),a=n(93667),i=n(34300),c=n(37776),s=n(4112),u="PasswordInput-module_disabledShowPasswordButton__8eYej";(0,l.s)(".PasswordInput-module_disabledShowPasswordButton__8eYej{color:var(--color-black-40)}");const d=r.forwardRef(((e,t)=>{var{className:n,errorText:l,helperText:d,hideLabel:m,id:p,invalid:h,label:f,required:_,style:g,successText:b,infoText:v,tooltipLabel:E,tooltipText:k,tooltipButtonLabel:y,concealPasswordButtonAriaLabel:x,disabled:w=!1,includeShowPasswordButton:C=!0,initiallyRevealed:I=!1,onBlur:S,revealPasswordButtonAriaLabel:L,type:A}=e,z=(0,o._)(e,["className","errorText","helperText","hideLabel","id","invalid","label","required","style","successText","infoText","tooltipLabel","tooltipText","tooltipButtonLabel","concealPasswordButtonAriaLabel","disabled","includeShowPasswordButton","initiallyRevealed","onBlur","revealPasswordButtonAriaLabel","type"]);const D={className:n,errorText:l,helperText:d,hideLabel:m,id:p,invalid:h,label:f,required:_,style:g,successText:b,infoText:v,tooltipLabel:E,tooltipText:k,tooltipButtonLabel:y};let j,T;C&&([j,T]=(0,r.useState)(I));const N=(0,c.c)(p,d,l,b,v);return r.createElement(a.I,Object.assign({onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||C&&j&&T(!1),"function"==typeof S&&S(e)}},D),r.createElement("input",Object.assign({className:(0,i.c)(a.t.input,C&&a.t.hasButton),disabled:w,id:p,ref:t,required:_,type:C?j?"text":"password":A||"password","aria-describedby":N.length>0?N:null},z)),C&&r.createElement("div",{className:a.t.buttonWrapper},r.createElement("button",Object.assign({className:a.t.button,type:"button",disabled:w},j?{"aria-label":x,onClick:()=>T(!1)}:{"aria-label":L,onClick:()=>T(!0)}),j&&r.createElement(s.I,{"aria-hidden":!0,className:w?u:""}),!j&&r.createElement(s.a,{"aria-hidden":!0,className:w?u:""}))))}))},20968:function(e,t,n){"use strict";n.d(t,{P:function(){return i}});var o=n(80136),r=n(67294),l=n(93667),a=n(37776);const i=r.forwardRef(((e,t)=>{var{"aria-describedby":n,className:i="",disabled:c=!1,defaultValue:s,errorText:u,helperText:d,hideLabel:m,invalid:p,id:h,label:f,onChange:_=(()=>null),required:g,style:b,successText:v,infoText:E,tooltipLabel:k,tooltipText:y,tooltipButtonLabel:x,type:w="tel"}=e,C=(0,o._)(e,["aria-describedby","className","disabled","defaultValue","errorText","helperText","hideLabel","invalid","id","label","onChange","required","style","successText","infoText","tooltipLabel","tooltipText","tooltipButtonLabel","type"]);const I={className:i,errorText:u,helperText:d,hideLabel:m,id:h,invalid:p,label:f,required:g,style:b,successText:v,tooltipLabel:k,tooltipText:y,tooltipButtonLabel:x},S=[n,(0,a.c)(h,d,u,v,E)].filter((e=>e)).join(" ");return r.createElement(l.I,Object.assign({},I),r.createElement("input",Object.assign({className:l.t.input,defaultValue:s,disabled:c,id:h,onChange:_,ref:t,required:g,type:w,"aria-describedby":S.length>0?S:null,autoComplete:"tel"},C)))}))},29520:function(e,t,n){"use strict";n.d(t,{R:function(){return i}});var o=n(80136),r=n(67294),l=n(7444),a=n(34300);(0,l.s)('.radio-button_hds-radio-button__1kktv{--size:24px;--icon-scale:0.5;--border-width:2px;--outline-width:3px;--label-font-size:var(--fontsize-body-m);--label-padding:var(--spacing-2-xs);--background:var(--color-white);--background-hover:var(--color-white);--background-focus:var(--color-white);--background-unselected-disabled:var(--color-black-10);--background-selected-disabled:var(--color-white);--border-color-focus:var(--color-black-90);--border-color-selected:var(--color-bus);--border-color-selected-hover:var(--color-bus-dark);--border-color-selected-disabled:var(--color-black-20);--border-color-unselected:var(--color-black-50);--border-color-unselected-hover:var(--color-black-90);--border-color-unselected-disabled:var(--color-black-10);--icon-color-selected:var(--color-bus);--icon-color-unselected:transparent;--icon-color-hover:var(--color-bus-dark);--icon-color-disabled:var(--color-black-10);--label-color:var(--color-black-90);--label-color-disabled:var(--color-black-40);display:flex;flex-wrap:wrap;min-height:var(--size);position:relative}.radio-button_hds-radio-button__1kktv,.radio-button_hds-radio-button__1kktv *,.radio-button_hds-radio-button__1kktv :after,.radio-button_hds-radio-button__1kktv :before{box-sizing:border-box}.radio-button_hds-radio-button__1kktv:not(:first-of-type){margin-top:var(--spacing-2-xs)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__label__1XnIa:after,.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__label__1XnIa:before{border-radius:50%;content:"";left:0;position:absolute;top:0}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__label__1XnIa:after{background-clip:content-box;background-color:var(--icon-color-unselected);border:var(--border-width) solid var(--border-color-unselected);height:var(--size);padding:calc((var(--size) / 2 - var(--border-width) * 2) * (1 - var(--icon-scale)));width:var(--size)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:checked+.radio-button_hds-radio-button__label__1XnIa:after{background-color:var(--icon-color-selected);border-color:var(--border-color-selected)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:focus+.radio-button_hds-radio-button__label__1XnIa:after,.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:hover+.radio-button_hds-radio-button__label__1XnIa:after{transition:85ms ease-out;transition-property:background-color,border-color}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:disabled+.radio-button_hds-radio-button__label__1XnIa:after{border-color:var(--border-color-unselected-disabled)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:checked:disabled+.radio-button_hds-radio-button__label__1XnIa:after{background-color:var(--icon-color-disabled);border-color:var(--border-color-selected-disabled)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:not(:disabled):focus+.radio-button_hds-radio-button__label__1XnIa:after{border-color:var(--border-color-focus)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:not(:disabled):hover+.radio-button_hds-radio-button__label__1XnIa:after,.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:not(:disabled):hover:focus+.radio-button_hds-radio-button__label__1XnIa:after{border-color:var(--border-color-unselected-hover)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__label__1XnIa:before{background-color:var(--background);height:var(--size);width:var(--size)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:focus+.radio-button_hds-radio-button__label__1XnIa:before,.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:hover+.radio-button_hds-radio-button__label__1XnIa:before{transition:85ms ease-out;transition-property:background-color,box-shadow,transform}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6{font-family:inherit;font-size:100%;height:var(--size);left:0;line-height:1.15;margin:0;opacity:0;position:absolute;top:0;width:var(--size)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__label__1XnIa{color:var(--label-color);cursor:pointer;font-size:var(--label-font-size);line-height:var(--lineheight-m);padding-left:calc(var(--size) + var(--label-padding));padding-top:calc((var(--size) - (var(--label-font-size) * var(--lineheight-m))) / 2);position:relative}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:hover+.radio-button_hds-radio-button__label__1XnIa:before{background-color:var(--background-hover)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:focus+.radio-button_hds-radio-button__label__1XnIa:before{box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);transform:translateZ(0)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:not(:disabled):checked:hover+.radio-button_hds-radio-button__label__1XnIa:after,.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:not(:disabled):checked:hover:focus+.radio-button_hds-radio-button__label__1XnIa:after{background-color:var(--icon-color-hover);border-color:var(--border-color-selected-hover)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:disabled+.radio-button_hds-radio-button__label__1XnIa{color:var(--label-color-disabled)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:disabled+.radio-button_hds-radio-button__label__1XnIa:before{background-color:var(--background-unselected-disabled)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:checked:disabled+.radio-button_hds-radio-button__label__1XnIa:before{background-color:var(--background-selected-disabled)}.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:disabled,.radio-button_hds-radio-button__1kktv .radio-button_hds-radio-button__input__27sH6:disabled+.radio-button_hds-radio-button__label__1XnIa{cursor:not-allowed}.helpers_visually-hidden__2SQYx{border:0;clip:"rect(0 0 0 0)";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.helpers_button-reset__2Gr5D{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.helpers_text-body__1-RNd{color:var(--color-black-90);font-family:var(--font-default);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.helpers_text-medium__WvSD9{font-family:var(--font-default);font-weight:500}.helpers_text-bold__RHjJI{font-family:var(--font-default);font-weight:700}.helpers_text-xl__2rpQg{font-size:var(--fontsize-heading-m)}.helpers_text-lg__2dciy{font-size:var(--fontsize-heading-s)}.helpers_text-md__-y1dr{font-size:var(--fontsize-heading-xs)}.helpers_subtitle__3x21G{font-size:var(--fontsize-body-m)}.helpers_text-sm__238bH{font-size:var(--fontsize-body-s);line-height:var(--lineheight-xl)}.helpers_heading-xxl__1KEkh{font-size:var(--fontsize-heading-xxl);font-weight:400;letter-spacing:-1.2px;line-height:var(--lineheight-s)}.helpers_heading-xl__GYTuO{font-size:var(--fontsize-heading-xl);font-weight:400;letter-spacing:-1px;line-height:var(--lineheight-s)}.helpers_heading-xl-mobile__1Dfib{font-size:var(--fontsize-heading-xl-mobile);font-weight:400;letter-spacing:-.8px;line-height:var(--lineheight-s)}.helpers_heading-l__1BzbR{font-size:var(--fontsize-heading-l);font-weight:400;letter-spacing:-.4px;line-height:var(--lineheight-s)}.helpers_heading-m__2APFi{font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-.2px;line-height:32px}.helpers_heading-s__2adCF{font-size:var(--fontsize-heading-s);font-weight:500;letter-spacing:.2px;line-height:1.4}.helpers_heading-xs__uSPiv{font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:.4px;line-height:1.33}.helpers_heading-xxs__37xm2{font-size:var(--fontsize-heading-xxs);font-weight:700;letter-spacing:.4px;line-height:var(--lineheight-l)}.helpers_helper-text__awnLq{color:var(--color-black-60);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs)}');const i=r.forwardRef(((e,t)=>{var{checked:n=!1,className:l="",disabled:i=!1,helperText:c,id:s,label:u,onChange:d=(()=>null),style:m,value:p}=e,h=(0,o._)(e,["checked","className","disabled","helperText","id","label","onChange","style","value"]);return u&&"string"!=typeof u&&"number"!=typeof u&&console.warn("Using ReactElement as a label is against good usability and accessibility practices. Please prefer plain strings."),r.createElement("div",{className:(0,a.c)("RadioButton-module_radioButton__1xM1I radio-button_hds-radio-button__1kktv",l),style:m},r.createElement("input",Object.assign({ref:t,id:s,className:(0,a.c)("RadioButton-module_input__1cTWc radio-button_hds-radio-button__input__27sH6"),onChange:d,value:p,type:"radio",disabled:i,checked:n,"aria-describedby":c?s+"-helper":null},h)),r.createElement("label",{htmlFor:s,className:(0,a.c)("RadioButton-module_label__3Zij9 radio-button_hds-radio-button__label__1XnIa")},u),c&&r.createElement("div",{className:"RadioButton-module_helperText__321Ay helpers_helper-text__awnLq",id:s+"-helper"},c))}));i.displayName="RadioButton"},66016:function(e,t,n){"use strict";n.d(t,{S:function(){return d}});var o=n(80136),r=n(67294),l=n(7444),a=n(34300),i=n(91267),c=n(42215),s=n(45422),u={label:"SelectionGroup-module_label__qlluz",selectionGroup:"SelectionGroup-module_selectionGroup__6Jxu8",items:"SelectionGroup-module_items__28m_S",vertical:"SelectionGroup-module_vertical__3iorC",horizontal:"SelectionGroup-module_horizontal__2eiY9",tooltipButton:"SelectionGroup-module_tooltipButton__2ibjm",errorText:"SelectionGroup-module_errorText__3tOPD selection-group_hds-selection-group__error-text__1Ynb9",helperText:"SelectionGroup-module_helperText__2k_WY helpers_helper-text__3QI7A"};(0,l.s)(".selection-group_hds-selection-group__2bwsd{--spacing-col:1.25rem;--spacing-row:var(--spacing-s);--label-color-default:var(--color-black-90);--icon-size:var(--spacing-m);border:0;padding:0}.selection-group_hds-selection-group__2bwsd>:not(.selection-group_hds-selection-group__items__21yOL){float:left}.selection-group_hds-selection-group__legend__149U2{box-sizing:border-box;color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-row);max-width:100%;padding:0;white-space:normal}.selection-group_hds-selection-group__required__3XPYK{color:var(--label-color-default);display:inline-block;font-size:var(--fontsize-body-xl);line-height:1;margin-left:var(--spacing-2-xs);transform:translateY(var(--spacing-3-xs))}.selection-group_hds-selection-group__items__21yOL{clear:left;display:grid;grid-gap:var(--spacing-row) var(--spacing-col);gap:var(--spacing-row) var(--spacing-col);justify-content:start}.selection-group_hds-selection-group__items--vertical__1v39g{grid-auto-flow:row}.selection-group_hds-selection-group__items--horizontal__3-_1w{grid-auto-flow:column}.selection-group_hds-selection-group__error-text__1Ynb9{color:var(--color-error);display:block;font-size:var(--fontsize-body-m);margin-top:var(--spacing-xs);padding-left:calc(var(--icon-size) + var(--spacing-2-xs));position:relative}.selection-group_hds-selection-group__error-text__1Ynb9:before{background:var(--color-error);content:\"\";height:var(--icon-size);left:0;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E\");pointer-events:none;position:absolute;top:0;width:var(--icon-size)}.helpers_visually-hidden__8xzsB{border:0;clip:\"rect(0 0 0 0)\";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.helpers_button-reset__D5XBg{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.helpers_text-body__kuwbN{color:var(--color-black-90);font-family:var(--font-default);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.helpers_text-medium__3yuel{font-family:var(--font-default);font-weight:500}.helpers_text-bold__2m1Nh{font-family:var(--font-default);font-weight:700}.helpers_text-xl__3Q3g5{font-size:var(--fontsize-heading-m)}.helpers_text-lg__3N-Yu{font-size:var(--fontsize-heading-s)}.helpers_text-md__1iyYX{font-size:var(--fontsize-heading-xs)}.helpers_subtitle__28FvQ{font-size:var(--fontsize-body-m)}.helpers_text-sm__OuSWo{font-size:var(--fontsize-body-s);line-height:var(--lineheight-xl)}.helpers_heading-xxl__1KMqh{font-size:var(--fontsize-heading-xxl);font-weight:400;letter-spacing:-1.2px;line-height:var(--lineheight-s)}.helpers_heading-xl__G41Bl{font-size:var(--fontsize-heading-xl);font-weight:400;letter-spacing:-1px;line-height:var(--lineheight-s)}.helpers_heading-xl-mobile__uKZqQ{font-size:var(--fontsize-heading-xl-mobile);font-weight:400;letter-spacing:-.8px;line-height:var(--lineheight-s)}.helpers_heading-l__29CXO{font-size:var(--fontsize-heading-l);font-weight:400;letter-spacing:-.4px;line-height:var(--lineheight-s)}.helpers_heading-m__16IDL{font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-.2px;line-height:32px}.helpers_heading-s__17rm-{font-size:var(--fontsize-heading-s);font-weight:500;letter-spacing:.2px;line-height:1.4}.helpers_heading-xs__rPz00{font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:.4px;line-height:1.33}.helpers_heading-xxs__Onkxt{font-size:var(--fontsize-heading-xxs);font-weight:700;letter-spacing:.4px;line-height:var(--lineheight-l)}.helpers_helper-text__3QI7A{color:var(--color-black-60);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs)}.SelectionGroup-module_label__qlluz{color:var(--label-color-default,var(--color-black-90));display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.SelectionGroup-module_selectionGroup__6Jxu8{--spacing-col:1.25rem;--spacing-row:var(--spacing-s);--label-color-default:var(--color-black-90);--icon-size:var(--spacing-m);border:0;padding:0}.SelectionGroup-module_selectionGroup__6Jxu8>:not(.SelectionGroup-module_items__28m_S){float:left}.SelectionGroup-module_label__qlluz{margin-bottom:var(--spacing-row);padding:0}.SelectionGroup-module_items__28m_S{clear:left;display:grid;gap:var(--spacing-row) var(--spacing-col);justify-content:start}.SelectionGroup-module_items__28m_S.SelectionGroup-module_vertical__3iorC{grid-auto-flow:row}.SelectionGroup-module_items__28m_S.SelectionGroup-module_horizontal__2eiY9{grid-auto-flow:column}.SelectionGroup-module_tooltipButton__2ibjm{margin-left:var(--spacing-2-xs)}");const d=e=>{var{label:t,direction:n="vertical",errorText:l,helperText:d,required:m,tooltipLabel:p,tooltipButtonLabel:h,tooltipText:f,children:_,className:g}=e,b=(0,o._)(e,["label","direction","errorText","helperText","required","tooltipLabel","tooltipButtonLabel","tooltipText","children","className"]);const v=(0,c.a)(_);return(0,r.useEffect)((()=>{let e=!1,t=!1;v.forEach((n=>{const o=n,{displayName:r}=o.type;"RadioButton"===r&&(e=!0,!0===o.props.checked&&(t=!0))})),e&&!t&&console.warn("All radio buttons in a SelectionGroup are unchecked. One radio button should be checked by default.")}),[_]),r.createElement("fieldset",Object.assign({className:(0,a.c)(u.selectionGroup,g)},b),r.createElement("legend",{className:u.label},t," ",m&&r.createElement(i.R,null)),f&&r.createElement(s.T,{buttonClassName:u.tooltipButton,tooltipLabel:p,buttonLabel:h},f),r.createElement("div",{className:(0,a.c)(u.items,u[n])},v.map((e=>(0,r.isValidElement)(e)&&r.createElement("div",{key:e.props.id,className:u.item},e)))),l&&r.createElement("div",{className:u.errorText},l),d&&r.createElement("div",{className:u.helperText},d))}},73043:function(e,t,n){"use strict";n.d(t,{S:function(){return h}});var o=n(80136),r=n(67294),l=n(34300),a=n(7444),i=n(17882),c=n(21662),s={container:"StepByStep-module_container__2EXO7",stepsContainer:"StepByStep-module_stepsContainer__2VeMi step-by-step_hds-step-by-step__steps-container__3gYZa",stepItem:"StepByStep-module_stepItem__30zfm step-by-step_hds-step-by-step__step-item__2bods",stepItemTitle:"StepByStep-module_stepItemTitle__tgqFr step-by-step_hds-step-by-step__step-item-title__3vW57"};(0,a.s)('.step-by-step_hds-step-by-step__container__3ENCq{position:relative}.step-by-step_hds-step-by-step__container__3ENCq h1{font-size:2em;margin:.67em 0}.step-by-step_hds-step-by-step__steps-container__3gYZa{--title-font-size:var(--fontsize-heading-m);--title-line-height:var(--lineheight-xl);counter-reset:item;margin:0;padding:0}ol.step-by-step_hds-step-by-step__steps-container__3gYZa{--circle-size:48px;--step-left-padding:96px}.step-by-step_hds-step-by-step__step-item__2bods:after,.step-by-step_hds-step-by-step__step-item__2bods:before{box-sizing:border-box;content:"";display:block;left:calc(var(--circle-size) / 2 + var(--step-left-padding) / 2);position:absolute;top:calc(var(--spacing-l) + (var(--title-font-size) * var(--title-line-height) / 2) - (var(--circle-size) / 2))}.step-by-step_hds-step-by-step__step-item__2bods:after{background-color:#fff;border:3px solid #000;border-radius:50%;height:var(--circle-size);transform:translateX(-100%);width:var(--circle-size);z-index:2}ol.step-by-step_hds-step-by-step__steps-container__3gYZa .step-by-step_hds-step-by-step__step-item__2bods:after{--line-height:1.3;align-items:center;content:counter(item);counter-increment:item;display:flex;font-size:1.25rem;font-weight:500;justify-content:center;line-height:var(--line-height)}.step-by-step_hds-step-by-step__step-item__2bods{background-color:var(--color-coat-of-arms-light);list-style:none;margin:var(--spacing-l) 0;position:relative}.step-by-step_hds-step-by-step__step-item__2bods,ol.step-by-step_hds-step-by-step__steps-container__3gYZa .step-by-step_hds-step-by-step__step-item__2bods{padding:var(--spacing-l) var(--spacing-l) var(--spacing-l) var(--step-left-padding)}ul.step-by-step_hds-step-by-step__steps-container__3gYZa{--circle-size:18px;--step-left-padding:var(--spacing-5-xl)}.step-by-step_hds-step-by-step__step-item-title__3vW57{font-size:var(--title-font-size);font-weight:500;line-height:var(--title-line-height);margin:0 0 16px}.step-by-step_hds-step-by-step__step-item__2bods:before{background-color:#000;height:calc(100% + var(--spacing-l));transform:translateX(-50%) translateX(calc(-.5 * var(--circle-size)));width:2px;z-index:1}.step-by-step_hds-step-by-step__step-item__2bods:last-of-type:before{display:none}.StepByStep-module_container__2EXO7{position:relative}');const u=e=>t=>{const{children:n}=t,l=(0,o._)(t,["children"]);return r.createElement("p",{key:(a=t,a.key?a.key:"string"==typeof a.children?a.children:void 0)},r.createElement(e,Object.assign({},l),n));var a},d=u(c.L),m=u(i.B),p=e=>{let{title:t,description:n,buttons:o=[],links:l=[]}=e;return r.createElement("li",{className:s.stepItem},r.createElement("p",{className:s.stepItemTitle},t),r.createElement("div",null,n&&r.createElement("p",{key:"description"},n),o.map(m),l.map(d)))},h=e=>{let{className:t,title:n,helpText:o,steps:a=[],numberedList:i=!1,headerClassName:c,headerLevel:u=2}=e;const d=(0,l.c)(s.container,t),m=n&&r.createElement("h"+u,{className:(0,l.c)(s.title,c)},n);return r.createElement("div",{className:d},r.createElement("div",null,m,r.createElement("p",{className:s.description},o)),r.createElement(i?"ol":"ul",{className:s.stepsContainer},a.map((e=>r.createElement(p,Object.assign({key:e.key||e.title},e))))))}},19213:function(e,t,n){"use strict";n.d(t,{S:function(){return o},a:function(){return b}});var o,r,l=n(67294),a=n(7444),i=n(80136),c=n(34300),s=n(32659),u=n(7025),d=n(97640),m=n(29928),p=n(12670),h="Stepper-module_scrollButton__3V4LM",f="Stepper-module_stepperContainer__2sBZh";(0,a.s)('.helpers_visually-hidden__2-1w5{border:0;clip:"rect(0 0 0 0)";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.helpers_button-reset__pnX2v{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.helpers_text-body__M8y8G{color:var(--color-black-90);font-family:var(--font-default);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.helpers_text-medium__1_L74{font-family:var(--font-default);font-weight:500}.helpers_text-bold__280xr{font-family:var(--font-default);font-weight:700}.helpers_text-xl__2ojJT{font-size:var(--fontsize-heading-m)}.helpers_text-lg__2PYVI{font-size:var(--fontsize-heading-s)}.helpers_text-md__1Iyod{font-size:var(--fontsize-heading-xs)}.helpers_subtitle__3LFb6{font-size:var(--fontsize-body-m)}.helpers_text-sm__3txMR{font-size:var(--fontsize-body-s);line-height:var(--lineheight-xl)}.helpers_heading-xxl__3v6Ao{font-size:var(--fontsize-heading-xxl);font-weight:400;letter-spacing:-1.2px;line-height:var(--lineheight-s)}.helpers_heading-xl__3KfQm{font-size:var(--fontsize-heading-xl);font-weight:400;letter-spacing:-1px;line-height:var(--lineheight-s)}.helpers_heading-xl-mobile__3j-7b{font-size:var(--fontsize-heading-xl-mobile);font-weight:400;letter-spacing:-.8px;line-height:var(--lineheight-s)}.helpers_heading-l__2uC7A{font-size:var(--fontsize-heading-l);font-weight:400;letter-spacing:-.4px;line-height:var(--lineheight-s)}.helpers_heading-m__1HM0E{font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-.2px;line-height:32px}.helpers_heading-s__1CUUr{font-size:var(--fontsize-heading-s);font-weight:500;letter-spacing:.2px;line-height:1.4}.helpers_heading-xs__3v3Lg{font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:.4px;line-height:1.33}.helpers_heading-xxs__uXGc-{font-size:var(--fontsize-heading-xxs);font-weight:700;letter-spacing:.4px;line-height:var(--lineheight-l)}.helpers_helper-text__4m81c{color:var(--color-black-60);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs)}.Stepper-module_scrollButton__3V4LM button{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.Stepper-module_step__sJ_fq{font-family:inherit;font-size:100%;line-height:1.15;margin:0}.Stepper-module_stepperContainer__2sBZh{background-color:var(--hds-stepper-background-color);position:relative;--hds-stepper-color:var(--color-bus);--hds-stepper-background-color:var(--color-white);--hds-stepper-disabled-color:var(--color-black-20);--hds-selected-step-label-color:var(--color-black-90);--hds-not-selected-step-label-color:var(--color-bus);--hds-step-background-color:var(--color-white);--hds-step-content-color:var(--color-bus);--hds-stepper-focus-border-color:var(--color-coat-of-arms);--hds-step-width:120px;--circle-container-size:36px;--progress-line-height:2px}.Stepper-module_stepper__W0Ugt{align-items:flex-start;display:flex;justify-content:space-between;overflow:scroll;-ms-overflow-style:none;position:relative;scroll-behavior:smooth;scrollbar-width:none;width:100%}.Stepper-module_stepper__W0Ugt:focus{outline:var(--hds-stepper-focus-border-color) 3px solid}.Stepper-module_stepper__W0Ugt::-webkit-scrollbar{display:none}.Stepper-module_stepper__W0Ugt.Stepper-module_small__2k5x8{--hds-step-width:44px}.Stepper-module_stepContainer__3jt3J{background-color:var(--hds-stepper-background-color);box-sizing:border-box;display:flex;flex-shrink:0;justify-content:center;padding:3px;width:var(--hds-step-width)}.Stepper-module_label__V9Nx6{color:var(--hds-not-selected-step-label-color);font-size:var(--fontsize-body-m);font-weight:500;line-height:var(--lineheight-l);margin-bottom:0;margin-top:6px;padding-left:var(--spacing-4-xs);padding-right:var(--spacing-4-xs);text-decoration:underline}.Stepper-module_disabled__sxc_0 .Stepper-module_label__V9Nx6{color:var(--hds-stepper-disabled-color);text-decoration:none}.Stepper-module_circle__2sJm2{align-items:center;background-color:var(--hds-step-background-color);border:2px solid var(--hds-stepper-color);border-radius:16px;color:var(--hds-step-content-color);display:flex;height:28px;justify-content:center;outline:2px solid var(--hds-stepper-background-color);text-align:center;width:28px}.Stepper-module_disabled__sxc_0 .Stepper-module_circle__2sJm2{background-color:var(--hds-stepper-background-color);border:2px solid var(--hds-stepper-disabled-color);color:var(--hds-stepper-disabled-color)}.Stepper-module_selected__3yhqv .Stepper-module_circle__2sJm2{border:4px solid var(--hds-stepper-color);border-radius:18px;outline:none}.Stepper-module_selected__3yhqv .Stepper-module_label__V9Nx6{color:var(--hds-selected-step-label-color);font-weight:700;text-decoration:none}.Stepper-module_completedContainer__1Ko_a{background-color:var(--hds-stepper-color);border-radius:16px;outline:2px solid var(--hds-stepper-background-color);padding:4px}.Stepper-module_completedContainer__1Ko_a .Stepper-module_completedIcon__2UDJK{color:var(--hds-step-background-color);vertical-align:middle}.Stepper-module_step__sJ_fq{align-items:center;appearance:none;background:transparent;border:0;color:var(--hds-stepper-color);cursor:pointer;display:flex;flex-direction:column;height:100%;justify-content:center;outline:none;overflow:visible;padding:0;position:relative}.Stepper-module_step__sJ_fq:focus .Stepper-module_circle__2sJm2,.Stepper-module_step__sJ_fq:focus .Stepper-module_completedContainer__1Ko_a,.Stepper-module_step__sJ_fq:focus .Stepper-module_label__V9Nx6{outline:2px solid var(--hds-stepper-focus-border-color)}.Stepper-module_step__sJ_fq:focus-visible{outline:none}.Stepper-module_step__sJ_fq.Stepper-module_disabled__sxc_0{color:var(--hds-stepper-disabled-color);cursor:not-allowed}.Stepper-module_number__2bmDN{font-size:var(--fontsize-body-m);font-weight:500;line-height:1.15}.Stepper-module_circleContainer__VIzlQ{align-items:center;display:flex;height:var(--circle-container-size);justify-content:center;width:var(--circle-container-size);z-index:2}.Stepper-module_line__2-_Vl{display:inline;height:var(--progress-line-height);left:calc(var(--hds-step-width) / 2);line-height:var(--lineheight-l);position:absolute;transform:translateY(calc(var(--circle-container-size) / 2 + var(--progress-line-height) / 2));z-index:1}.Stepper-module_line__2-_Vl .Stepper-module_disabledLine__3Rc9w{display:inline-block;height:100%;position:relative;top:-15px;background-color:var(--hds-stepper-disabled-color)}.Stepper-module_line__2-_Vl .Stepper-module_enabledLine__2oFd_{display:inline-block;height:100%;position:relative;top:-15px;background-color:var(--hds-stepper-color)}.Stepper-module_heading__ZC5kr{margin-top:26px;width:fit-content}.Stepper-module_heading__ZC5kr:focus{border:none;outline:3px solid var(--hds-stepper-focus-border-color)}.Stepper-module_scrollButton__3V4LM{background-color:var(--hds-stepper-background-color);color:var(--hds-stepper-color);position:absolute;top:3px;z-index:10}.Stepper-module_scrollButton__3V4LM button{align-items:center;border:2px solid transparent;border-radius:unset;box-sizing:border-box;display:inline-flex;justify-content:center;overflow:hidden;width:100%}.Stepper-module_scrollButton__3V4LM button:focus{border:2px solid var(--hds-stepper-focus-border-color);outline:none}.Stepper-module_scrollButton__3V4LM.Stepper-module_scrollButtonPrevious__1LF1O{left:0}.Stepper-module_scrollButton__3V4LM.Stepper-module_scrollButtonNext__2OvI-{right:0}'),(r=o||(o={}))[r.available=0]="available",r[r.completed=1]="completed",r[r.disabled=2]="disabled",r[r.attention=3]="attention",r[r.paused=4]="paused";const _={available:{fi:"Valittavissa.",en:"Available.",sv:"Valbar."},completed:{fi:"Valmis.",en:"Completed.",sv:"Komplett."},attention:{fi:"Vaatii huomiota.",en:"Needs attention.",sv:"Behöver uppmärksamhet."},paused:{fi:"Keskeytetty.",en:"Paused.",sv:"Pausad."}},g=l.forwardRef(((e,t)=>{var{label:n,language:r="fi",index:a,renderCustomStepCountLabel:d,small:m=!1,state:p,selected:h,stepsTotal:f,renderCustomStateAriaLabel:g,onStepClick:b,dataTestId:v}=e,E=(0,i._)(e,["label","language","index","renderCustomStepCountLabel","small","state","selected","stepsTotal","renderCustomStateAriaLabel","onStepClick","dataTestId"]);return l.createElement("div",{className:"Stepper-module_stepContainer__3jt3J"},l.createElement("button",Object.assign({ref:t,type:"button",disabled:p===o.disabled,className:(0,c.c)("Stepper-module_step__sJ_fq",h&&"Stepper-module_selected__3yhqv",p===o.disabled&&"Stepper-module_disabled__sxc_0"),"aria-current":!!h&&"step","aria-label":(()=>{const e=d?d(a,f):((e,t,n)=>({en:"Step "+(t+1)+"/"+n+".",fi:"Vaihe "+(t+1)+"/"+n+".",sv:"Steg "+(t+1)+"/"+n+"."}[e]))(r,a,f);let t=g?g(a,p):((e,t)=>t===o.disabled?"":_[o[t]][e])(r,p);h&&p===o.available&&(t="");let l=n;return"."!==l.slice(-1)&&(l+="."),[l,e,t].filter((e=>e)).join(" ")})(),onClick:e=>b&&b(e,a),"data-testid":v},E),l.createElement("div",{className:"Stepper-module_circleContainer__VIzlQ"},p!==o.completed||h?l.createElement("div",{className:(0,c.c)("Stepper-module_circle__2sJm2")},p===o.attention&&l.createElement(u.I,{size:"xs","aria-hidden":!0}),p===o.paused&&l.createElement(u.a,{size:"xs","aria-hidden":!0}),(p===o.available||p===o.disabled||p===o.completed&&h)&&l.createElement("span",{className:"Stepper-module_number__2bmDN"},a+1)):l.createElement("div",{className:"Stepper-module_completedContainer__1Ko_a"},l.createElement(s.I,{className:"Stepper-module_completedIcon__2UDJK","aria-hidden":!0}))),!m&&l.createElement("p",{className:"Stepper-module_label__V9Nx6"},n)))})),b=e=>{let{className:t,language:n="fi",selectedStep:r,small:a=!1,renderCustomStepCountLabel:i,renderCustomStateAriaLabel:s,onStepClick:u,stepHeading:_,stepHeadingAriaLevel:b=2,headingClassName:v,dataTestId:E="hds-stepper",renderCustomStepHeading:k,steps:y,theme:x}=e;const w=y.length,C=(0,l.useRef)(!0),I=(0,l.useRef)(null),S=(0,l.useRef)(null),L=(0,l.useRef)([]),A=y.length,[z,D]=(0,l.useState)(!1),[j,T]=(0,l.useState)(!1),N=(0,d.u)(f,x);return L.current.length!==A&&(L.current=Array(A).fill(0).map(((e,t)=>L.current[t]||(0,l.createRef)()))),(0,l.useEffect)((()=>{if(!C.current){I.current&&I.current.focus();const e=S.current.scrollWidth/w;S.current.scrollLeft=e*(r+1)-e/2-S.current.parentNode.clientWidth/2}C.current=!1,S.current.scrollLeft>5?D(!0):D(!1),S.current.scrollWidth-(S.current.parentNode.clientWidth+S.current.scrollLeft)>5?T(!0):T(!1)}),[r]),l.createElement("div",{lang:n,className:(0,c.c)(f,N),"data-testid":E},z&&l.createElement("div",{className:(0,c.c)(h,"Stepper-module_scrollButtonPrevious__1LF1O"),"aria-hidden":"true"},l.createElement("button",{type:"button",onClick:()=>{const e=S.current.scrollWidth/w;S.current.scrollLeft-=e},tabIndex:-1},l.createElement(m.I,{size:"m"}))),j&&l.createElement("div",{className:(0,c.c)(h,"Stepper-module_scrollButtonNext__2OvI-"),"aria-hidden":"true"},l.createElement("button",{type:"button",onClick:()=>{const e=S.current.scrollWidth/w;S.current.scrollLeft+=e},tabIndex:-1},l.createElement(p.I,{size:"m"}))),l.createElement("div",{onScroll:e=>{e.target.scrollLeft&&e.target.scrollLeft>5?D(!0):D(!1),e.target.scrollWidth-(e.target.parentNode.clientWidth+e.target.scrollLeft)>5?T(!0):T(!1)},ref:S,className:(0,c.c)(t,"Stepper-module_stepper__W0Ugt",a&&"Stepper-module_small__2k5x8")},l.createElement("div",{className:"Stepper-module_line__2-_Vl","aria-hidden":!0,style:{width:"max( calc(100% - var(--hds-step-width)), calc("+w+" * var(--hds-step-width) - var(--hds-step-width) ))"}},y.map(((e,t)=>t===y.length-1?null:l.createElement("div",{key:e.label+"-"+t,style:{width:"calc( 100% / "+(w-1)+")"},className:y[t+1].state===o.disabled?"Stepper-module_disabledLine__3Rc9w":"Stepper-module_enabledLine__2oFd_"})))),y.map(((e,t)=>l.createElement(g,{ref:L.current[t],key:t+"-"+e.label,label:e.label,language:n,index:t,small:a,stepsTotal:w,selected:r===t,state:e.state,onStepClick:(e,t)=>{t===r&&_&&I.current.focus(),u(e,t)},renderCustomStepCountLabel:i,renderCustomStateAriaLabel:s,dataTestId:E+"-step-"+t})))),_&&l.createElement("div",{tabIndex:-1,ref:I,role:"heading","aria-level":b,className:(0,c.c)("Stepper-module_heading__ZC5kr helpers_heading-l__2uC7A",v)},k?k(r,w,y[r].label):((e,t,n,o)=>({en:"Step "+(t+1)+"/"+n+": "+o,fi:"Vaihe "+(t+1)+"/"+n+": "+o,sv:"Steg "+(t+1)+"/"+n+": "+o}[e]))(n,r,w,y[r].label)))}},3382:function(e,t,n){"use strict";n.d(t,{T:function(){return i}});var o=n(80136),r=n(67294),l=n(93667),a=n(37776);const i=r.forwardRef(((e,t)=>{var{className:n="",disabled:i=!1,defaultValue:c,errorText:s,helperText:u,hideLabel:d,invalid:m,id:p,label:h,onChange:f=(()=>null),required:_,style:g,successText:b,infoText:v,tooltipLabel:E,tooltipText:k,tooltipButtonLabel:y}=e,x=(0,o._)(e,["className","disabled","defaultValue","errorText","helperText","hideLabel","invalid","id","label","onChange","required","style","successText","infoText","tooltipLabel","tooltipText","tooltipButtonLabel"]);const w={className:n,errorText:s,helperText:u,hideLabel:d,id:p,invalid:m,label:h,required:_,style:g,successText:b,infoText:v,tooltipLabel:E,tooltipText:k,tooltipButtonLabel:y},C=(0,a.c)(p,u,s,b,v);return r.createElement(l.I,Object.assign({},w),r.createElement("textarea",Object.assign({className:l.t.input,defaultValue:c,disabled:i,id:p,onChange:f,ref:t,required:_,"aria-describedby":C.length>0?C:null},x)))}))},59096:function(e,t,n){"use strict";n.d(t,{T:function(){return _}});var o=n(80136),r=n(67294),l=n(93667),a=n(7444),i=n(34300),c=n(37776),s=n(94330),u="TimeInput-module_partialInput__1wN8K",d="TimeInput-module_partialInputLabel__30tUk";(0,a.s)(".TimeInput-module_fullInput__w1g3j,.TimeInput-module_partialInput__1wN8K{font-family:inherit;font-size:100%;line-height:1.15;margin:0}.TimeInput-module_partialInputLabel__30tUk{border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.TimeInput-module_timeInputFrame__gax8Y{align-items:center;display:inline-flex;padding:0 calc(var(--spacing-s) - 3px)}.TimeInput-module_timeInputFrame__gax8Y.TimeInput-module_disabled__23DEW{background-color:var(--input-background-disabled);border-color:var(--input-border-color-disabled);color:var(--input-color-disabled);cursor:not-allowed}.TimeInput-module_timeInputFrame__gax8Y.TimeInput-module_disabled__23DEW:hover{border-color:var(--input-border-color-disabled)}.TimeInput-module_fullInput__w1g3j{height:0;opacity:0;overflow:hidden;pointer-events:none;position:absolute;width:0}.TimeInput-module_divider__7JLmX,.TimeInput-module_partialInput__1wN8K{appearance:none;background:transparent;border:0;box-sizing:border-box;color:var(--input-color-default);font-size:1.125rem;line-height:normal;padding:0}.TimeInput-module_partialInput__1wN8K{overflow:visible;padding:0;text-align:center;width:1.4rem;will-change:transform,box-shadow}.TimeInput-module_partialInput__1wN8K:focus{box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);outline:none;transform:translateZ(0)}.TimeInput-module_partialInput__1wN8K:focus::placeholder{opacity:0}.TimeInput-module_divider__7JLmX{display:inline-block;margin:0 5px;pointer-events:none;width:auto}.TimeInput-module_input__1KAUR.TimeInput-module_disabled__23DEW .TimeInput-module_divider__7JLmX,.TimeInput-module_input__1KAUR.TimeInput-module_disabled__23DEW .TimeInput-module_partialInput__1wN8K{background-color:var(--input-background-disabled);border-color:var(--input-border-color-disabled);color:var(--input-color-disabled);cursor:not-allowed}");const m="0,1,2,3,4,5,6,7,8,9".split(","),p=e=>1===e.length?"0"+e:e,h=(e,t,n,o)=>Math.max(Math.min(n+o,t),e),f=e=>null!==e.match(/^(\d{1,2})?$/),_=r.forwardRef(((e,t)=>{var{className:n="",disabled:a=!1,defaultValue:_,value:g,errorText:b,helperText:v,hideLabel:E,invalid:k,id:y,label:x,hoursLabel:w,minutesLabel:C,onChange:I=(()=>null),required:S,style:L,successText:A,infoText:z,tooltipLabel:D,tooltipText:j,tooltipButtonLabel:T,type:N="text"}=e,O=(0,o._)(e,["className","disabled","defaultValue","value","errorText","helperText","hideLabel","invalid","id","label","hoursLabel","minutesLabel","onChange","required","style","successText","infoText","tooltipLabel","tooltipText","tooltipButtonLabel","type"]);_&&g&&console.warn("Use either defaultValue (for uncontrolled components) or value (for controlled components) in HDS TimeInput component.");const B=(e=>{const t=""+e;return e&&t.length>0&&t.match(/^\d{2}:\d{2}$/)?t.split(":"):null})(_||g),M=(0,r.useRef)(null),H=(0,r.useRef)(null),R=(0,r.useRef)(null),[P,F]=(0,r.useState)(B?B[0]:""),[U,W]=(0,r.useState)(B?B[1]:""),[V,q]=(0,r.useState)(B?B.join(":"):""),G={className:n,errorText:b,helperText:v,hideLabel:E,id:y,invalid:k,label:x,required:S,style:L,successText:A,infoText:z,tooltipLabel:D,tooltipText:j,tooltipButtonLabel:T},Z=(e,t)=>{F(e),W(t);const n=0===e.length&&0===t.length?"":e+":"+t;q(n),Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value").set.call(M.current,n);const o=new Event("input",{bubbles:!0});M.current.dispatchEvent(o)};(0,r.useEffect)((()=>{t&&(0,s.m)(t,M)}),[M,t]);const K=e=>{e.preventDefault(),e.target.select()},J=(0,c.c)(y,v,b,A,z),Y={className:(0,i.c)(l.t.input,"TimeInput-module_timeInputFrame__gax8Y",a&&"TimeInput-module_disabled__23DEW"),onClick:e=>{e.target!==H.current&&e.target!==R.current&&H.current.focus()}},Q=y+"-hours",X=y+"-minutes",$=y+"-label";return r.createElement(l.I,Object.assign({},G,{id:y,labelId:$,isAriaLabelledBy:!0}),r.createElement("div",Object.assign({},Y,{role:"group","aria-labelledby":$}),r.createElement("input",Object.assign({"aria-hidden":!0,readOnly:!0,className:"TimeInput-module_fullInput__w1g3j",disabled:a,id:y,onChange:I,ref:M,required:S,type:N,tabIndex:-1,value:V},O)),r.createElement("label",{htmlFor:Q,className:d},w),r.createElement("input",{className:u,type:"text",disabled:a,id:Q,ref:H,value:P,inputMode:"numeric",onChange:e=>{const t=e.target.value.slice(-2);return f(t)?(Z(t,U),!0):(e.preventDefault(),!1)},onKeyDown:e=>{if("ArrowRight"!==e.key||e.shiftKey||(e.preventDefault(),R.current.focus()),["ArrowUp","ArrowDown"].includes(e.key)&&!e.shiftKey){e.preventDefault();const t="ArrowUp"===e.key?1:-1,n=parseInt(P,10)||0,o=p(""+h(0,23,n,t));Z(o,U)}},onKeyUp:e=>{2===e.currentTarget.value.length&&"00"!==e.currentTarget.value&&m.includes(e.key)&&R.current.focus()},onFocus:K,onBlur:()=>{P.length>0&&Z(p(P),U)},"aria-describedby":J.length>0?J:void 0,placeholder:"--"}),r.createElement("div",{className:"TimeInput-module_divider__7JLmX"},":"),r.createElement("label",{htmlFor:X,className:d},C),r.createElement("input",{className:u,type:"text",disabled:a,id:X,ref:R,value:U,inputMode:"numeric",onChange:e=>{const t=e.target.value.slice(-2);return f(t)?(Z(P,t),!0):(e.preventDefault(),!1)},onKeyDown:e=>{if("ArrowLeft"!==e.key||e.shiftKey||(e.preventDefault(),H.current.focus()),["ArrowUp","ArrowDown"].includes(e.key)&&!e.shiftKey){e.preventDefault();const t="ArrowUp"===e.key?1:-1,n=parseInt(U,10)||0,o=p(""+h(0,59,n,t));Z(P,o)}},onFocus:K,onBlur:()=>{U.length>0&&Z(P,p(U))},"aria-describedby":J.length>0?J:void 0,placeholder:"--"})))}))},1751:function(e,t,n){"use strict";n.d(t,{T:function(){return m}});var o=n(67294),r=n(7444),l=n(34300),a=n(45422),i=n(97640),c=n(87407),s=n(8381),u="ToggleButton-module_toggleButtonContainer__2YMDa",d="ToggleButton-module_toggleButtonIcon__RXT8O";(0,r.s)('.ToggleButton-module_toggleButton__1-KAF{font-family:inherit;font-size:100%;line-height:1.15;margin:0}.ToggleButton-module_label__1dFTc{color:var(--label-color-default,var(--color-black-90));display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.ToggleButton-module_toggleButtonContainer__2YMDa{--toggle-button-color:var(--color-bus);--toggle-button-hover-color:var(--color-bus-dark);--toggle-button-unselected-color:var(--color-black-90)}.ToggleButton-module_onIcon__29twM{color:#fff;opacity:0}.ToggleButton-module_offIcon__bWWxh{color:var(--toggle-button-unselected-color);opacity:1}.ToggleButton-module_toggleButton__1-KAF{background:#fff;border:2px solid var(--toggle-button-unselected-color);border-radius:20px;cursor:pointer;display:inline-block;height:32px;inset:0;position:relative;transition:all .2s;width:56px}.ToggleButton-module_toggleButton__1-KAF:after{border-radius:25px;content:"";display:block;inset:-7px;position:absolute}.ToggleButton-module_toggleButton__1-KAF:focus{outline:none}.ToggleButton-module_toggleButton__1-KAF:focus:after{border:3px solid var(--color-coat-of-arms);box-sizing:content-box}.ToggleButton-module_toggleButton__1-KAF[aria-pressed=true]{background-color:var(--toggle-button-color);border-color:var(--toggle-button-color)}.ToggleButton-module_toggleButton__1-KAF[aria-pressed=true]:hover{background-color:var(--toggle-button-hover-color);border-color:var(--toggle-button-hover-color)}.ToggleButton-module_toggleButton__1-KAF[aria-pressed=true][disabled],.ToggleButton-module_toggleButton__1-KAF[aria-pressed=true][disabled]:hover{background-color:var(--color-black-10);border-color:var(--color-black-10)}.ToggleButton-module_toggleButton__1-KAF[aria-pressed=true] .ToggleButton-module_onIcon__29twM{margin-left:24px!important;opacity:1}.ToggleButton-module_toggleButton__1-KAF[aria-pressed=true] .ToggleButton-module_offIcon__bWWxh{margin-left:24px!important;opacity:0}.ToggleButton-module_toggleButton__1-KAF[disabled],.ToggleButton-module_toggleButton__1-KAF[disabled]:hover{border-color:var(--color-black-20);cursor:not-allowed}.ToggleButton-module_toggleButton__1-KAF[disabled] .ToggleButton-module_offIcon__bWWxh,.ToggleButton-module_toggleButton__1-KAF[disabled]:hover .ToggleButton-module_offIcon__bWWxh{color:var(--color-black-10)}.ToggleButton-module_toggleButtonContainerInlineVariant__1YSw9{align-items:center;display:flex;flex-wrap:wrap}.ToggleButton-module_toggleButtonContainerInlineVariant__1YSw9 .ToggleButton-module_label__1dFTc{margin-bottom:0}.ToggleButton-module_toggleButtonContainerInlineVariant__1YSw9 .ToggleButton-module_toggleButton__1-KAF{margin-left:auto}.ToggleButton-module_labelContainer__xg3OB{align-items:flex-start;display:flex}.ToggleButton-module_tooltipButton__1F3Sx{display:block;margin-left:var(--spacing-2-xs)}.ToggleButton-module_toggleButtonIcon__RXT8O{cursor:pointer;left:-2px;position:absolute;top:-2px;transition:all .2s}');const m=o.forwardRef(((e,t)=>{let{id:n,label:r,checked:m,disabled:p,onChange:h,tooltipLabel:f,tooltipButtonLabel:_,tooltipText:g,variant:b="default",theme:v}=e;const E=n+"-label",k=(0,i.u)(u,v);return o.createElement("div",{className:(0,l.c)(u,"inline"===b&&"ToggleButton-module_toggleButtonContainerInlineVariant__1YSw9",k)},o.createElement("div",{className:"ToggleButton-module_labelContainer__xg3OB"},o.createElement("label",{id:E,htmlFor:n,className:"ToggleButton-module_label__1dFTc"},r),g&&o.createElement(a.T,{buttonClassName:"ToggleButton-module_tooltipButton__1F3Sx",tooltipLabel:f,buttonLabel:_},g)),o.createElement("button",{id:n,ref:t,disabled:p,type:"button","aria-pressed":m,"aria-labelledby":E,className:"ToggleButton-module_toggleButton__1-KAF",onClick:()=>{h(m)}},o.createElement("div",{className:(0,l.c)(d,"ToggleButton-module_offIcon__bWWxh")},o.createElement(c.I,{size:"m","aria-hidden":"true"})),o.createElement("div",{className:(0,l.c)(d,"ToggleButton-module_onIcon__29twM")},o.createElement(s.I,{size:"m","aria-hidden":"true"}))))}))},41380:function(e,t,n){"use strict";n.d(t,{u:function(){return r}});var o=n(67294);const r=e=>{let{initiallyOpen:t=!1}=e;const[n,r]=(0,o.useState)(t),l=()=>{r(!0)},a=()=>{r(!1)},i=()=>{n?a():l()},c={onClick:i,"aria-expanded":n},s={};return!1===n&&(s.style={display:"none"}),{isOpen:n,openAccordion:l,closeAccordion:a,toggleAccordion:i,buttonProps:c,contentProps:s}}},28918:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return Wo}});var o={};n.r(o),n.d(o,{Accordion:function(){return _e.A},Breadcrumb:function(){return Ho.B},Button:function(){return be.B},Card:function(){return ve.C},Checkbox:function(){return Ee.C},Columns:function(){return xe},Combobox:function(){return oo.C},Container:function(){return we.C},CookieModal:function(){return Yn},CookiePage:function(){return Xn},DateInput:function(){return eo.D},Dialog:function(){return to.D},ErrorSummary:function(){return ro.E},Fieldset:function(){return lo.F},FileInput:function(){return ao.F},Footer:function(){return io.F},Header:function(){return co.H},Hero:function(){return Bo.H},Highlight:function(){return Mo.H},IconAlertCircle:function(){return q.I},IconAlertCircleFill:function(){return G.I},IconAngleDown:function(){return Z.I},IconAngleLeft:function(){return K.I},IconAngleRight:function(){return J.I},IconAngleUp:function(){return Y.I},IconArrowBottomLeft:function(){return q.a},IconArrowBottomRight:function(){return q.b},IconArrowDown:function(){return q.c},IconArrowLeft:function(){return q.d},IconArrowRedo:function(){return q.e},IconArrowRight:function(){return Q.I},IconArrowRightDashed:function(){return q.f},IconArrowTopLeft:function(){return q.g},IconArrowTopRight:function(){return q.h},IconArrowUndo:function(){return q.i},IconArrowUp:function(){return X.I},IconAtSign:function(){return q.j},IconBagCogwheel:function(){return q.k},IconBell:function(){return q.l},IconBellCrossed:function(){return q.m},IconBinoculars:function(){return q.n},IconCake:function(){return q.o},IconCalendar:function(){return $.I},IconCalendarClock:function(){return q.p},IconCalendarCross:function(){return q.q},IconCalendarEvent:function(){return q.r},IconCalendarPlus:function(){return q.s},IconCalendarRecurring:function(){return q.t},IconCamera:function(){return q.u},IconCheck:function(){return ee.I},IconCheckCircle:function(){return q.v},IconCheckCircleFill:function(){return te.I},IconChildren:function(){return q.w},IconClock:function(){return q.x},IconClockCross:function(){return q.y},IconClockPlus:function(){return q.z},IconCoffeeCupSaucer:function(){return q.A},IconCogwheel:function(){return q.B},IconCogwheels:function(){return q.C},IconCollapse:function(){return q.D},IconCompany:function(){return q.E},IconCopy:function(){return q.F},IconCross:function(){return ne.I},IconCrossCircle:function(){return oe.I},IconCrossCircleFill:function(){return re.I},IconCustomerBotNegative:function(){return q.G},IconCustomerBotNeutral:function(){return q.H},IconCustomerBotPositive:function(){return q.J},IconDiscord:function(){return q.K},IconDisplay:function(){return q.L},IconDocument:function(){return le.b},IconDownload:function(){return q.M},IconDownloadCloud:function(){return q.N},IconDrag:function(){return q.O},IconEntrepreneur:function(){return q.P},IconEnvelope:function(){return q.Q},IconError:function(){return ae.I},IconErrorFill:function(){return ie.a},IconEuroSign:function(){return q.R},IconEye:function(){return ce.a},IconEyeCrossed:function(){return ce.I},IconFaceNeutral:function(){return q.S},IconFaceSad:function(){return q.T},IconFaceSmile:function(){return q.U},IconFacebook:function(){return q.V},IconFamily:function(){return q.W},IconGlobe:function(){return se.a},IconGoogle:function(){return q.X},IconGraphColumns:function(){return q.Y},IconGroup:function(){return q.Z},IconHammers:function(){return q._},IconHeadphones:function(){return q.$},IconHeart:function(){return q.a0},IconHeartFill:function(){return q.a1},IconHistory:function(){return q.a2},IconHome:function(){return q.a3},IconHomeSmoke:function(){return q.a4},IconInfoCircle:function(){return q.a5},IconInfoCircleFill:function(){return ie.I},IconInstagram:function(){return q.a6},IconKey:function(){return q.a7},IconLayers:function(){return q.a8},IconLightbulb:function(){return q.a9},IconLink:function(){return q.aa},IconLinkExternal:function(){return ue.I},IconLinkedin:function(){return q.ab},IconLocate:function(){return q.ac},IconLocation:function(){return q.ad},IconLock:function(){return q.ae},IconLockOpen:function(){return q.af},IconMap:function(){return q.ag},IconMenuDots:function(){return q.ah},IconMenuHamburger:function(){return se.I},IconMicrophone:function(){return q.ai},IconMicrophoneCrossed:function(){return q.aj},IconMinus:function(){return de.I},IconMinusCircle:function(){return q.ak},IconMinusCircleFill:function(){return q.al},IconMobile:function(){return q.am},IconMoneyBag:function(){return q.an},IconMoneyBagFill:function(){return q.ao},IconMover:function(){return q.ap},IconOccupation:function(){return q.aq},IconPaperclip:function(){return q.ar},IconPen:function(){return q.as},IconPenLine:function(){return q.at},IconPersonFemale:function(){return q.au},IconPersonGenderless:function(){return q.av},IconPersonMale:function(){return q.aw},IconPersonWheelchair:function(){return q.ax},IconPhone:function(){return q.ay},IconPhoto:function(){return le.a},IconPhotoPlus:function(){return q.az},IconPlaybackFastforward:function(){return q.aA},IconPlaybackNext:function(){return q.aB},IconPlaybackPause:function(){return ae.a},IconPlaybackPlay:function(){return q.aC},IconPlaybackPrevious:function(){return q.aD},IconPlaybackRecord:function(){return q.aE},IconPlaybackRewind:function(){return q.aF},IconPlaybackStop:function(){return q.aG},IconPlus:function(){return me.I},IconPlusCircle:function(){return q.aH},IconPlusCircleFill:function(){return q.aI},IconPodcast:function(){return q.aJ},IconPrinter:function(){return q.aK},IconQuestionCircle:function(){return pe.I},IconQuestionCircleFill:function(){return q.aL},IconRefresh:function(){return q.aM},IconRestaurant:function(){return q.aN},IconRss:function(){return q.aO},IconSaveDiskette:function(){return q.aP},IconSaveDisketteFill:function(){return q.aQ},IconScroll:function(){return q.aR},IconScrollCogwheel:function(){return q.aS},IconScrollContent:function(){return q.aT},IconScrollGroup:function(){return q.aU},IconSearch:function(){return he.I},IconSenior:function(){return q.aV},IconShare:function(){return q.aW},IconShield:function(){return q.aX},IconShoppingCart:function(){return q.aY},IconSignin:function(){return q.aZ},IconSignout:function(){return q.a_},IconSitemap:function(){return q.a$},IconSliders:function(){return q.b0},IconSnapchat:function(){return q.b1},IconSort:function(){return fe.I},IconSortAlphabeticalAscending:function(){return fe.a},IconSortAlphabeticalDescending:function(){return fe.c},IconSortAscending:function(){return fe.b},IconSortDescending:function(){return fe.d},IconSpeechbubble:function(){return q.b2},IconSpeechbubbleText:function(){return q.b3},IconStar:function(){return q.b4},IconStarFill:function(){return q.b5},IconSwapUser:function(){return q.b6},IconTextBold:function(){return q.b7},IconTextItalic:function(){return q.b8},IconTextTool:function(){return q.b9},IconThumbsDown:function(){return q.ba},IconThumbsDownFill:function(){return q.bb},IconThumbsUp:function(){return q.bc},IconThumbsUpFill:function(){return q.bd},IconTicket:function(){return q.be},IconTiktok:function(){return q.bf},IconTrash:function(){return q.bg},IconTraveler:function(){return q.bh},IconTwitch:function(){return q.bi},IconTwitter:function(){return q.bj},IconUpload:function(){return le.I},IconUploadCloud:function(){return q.bk},IconUser:function(){return q.bl},IconVaccine:function(){return q.bm},IconVideocamera:function(){return q.bn},IconVideocameraCrossed:function(){return q.bo},IconVimeo:function(){return q.bp},IconVirus:function(){return q.bq},IconVolumeHigh:function(){return q.br},IconVolumeLow:function(){return q.bs},IconVolumeMinus:function(){return q.bt},IconVolumeMute:function(){return q.bu},IconVolumePlus:function(){return q.bv},IconWhatsapp:function(){return q.bw},IconWifi:function(){return q.bx},IconWifiCrossed:function(){return q.by},IconYle:function(){return q.bz},IconYouth:function(){return q.bA},IconYoutube:function(){return q.bB},IconZoomIn:function(){return q.bC},IconZoomOut:function(){return q.bD},IconZoomText:function(){return q.bE},ImageWithCard:function(){return so.I},Koros:function(){return uo.K},Link:function(){return mo.L},Linkbox:function(){return po.L},LoadingSpinner:function(){return ho.L},Logo:function(){return fo.L},Notification:function(){return Be.N},NumberInput:function(){return _o.N},Pagination:function(){return go.P},PasswordInput:function(){return bo.P},PhoneInput:function(){return vo.P},RadioButton:function(){return Eo.R},SearchInput:function(){return ko.S},Section:function(){return xo},Select:function(){return no.b},SelectionGroup:function(){return wo.S},SideNavigation:function(){return Co.S},StatusLabel:function(){return Io.S},StepByStep:function(){return So.S},StepState:function(){return Lo.S},Stepper:function(){return Lo.a},Tab:function(){return Ao.T},TabList:function(){return Ao.b},TabPanel:function(){return Ao.c},Table:function(){return Oe.T},Tabs:function(){return Ao.a},Tag:function(){return zo.T},TextArea:function(){return jo.T},TextInput:function(){return Do.T},TimeInput:function(){return To.T},TitleStyleType:function(){return co.T},ToggleButton:function(){return No.T},Tooltip:function(){return Oo.T},formatBytes:function(){return ao.f},getCriticalHdsRules:function(){return W},getCurrentMediaBreakpoint:function(){return V.g},getShapeHeight:function(){return uo.g},hdsStyles:function(){return Ro.Z},logoFi:function(){return fo.l},logoFiDark:function(){return fo.a},logoRu:function(){return fo.d},logoRuDark:function(){return fo.e},logoSv:function(){return fo.b},logoSvDark:function(){return fo.c},multiSelectReducer:function(){return no.m},onMultiSelectStateChange:function(){return no.o},useAccordion:function(){return ge.u},useCookies:function(){return $n},useMediaQueryGreaterThan:function(){return V.a},useMediaQueryLessThan:function(){return V.u}});var r,l=n(11151),a=n(67294),i=n(15785),c=n(80136),s=n(90394),u=function(e,t){return void 0===e&&(e=0),void 0===t&&(t=new WeakMap),{get:function(n){if(!((o=n[e])&&"object"==typeof o||"function"==typeof o))throw console.log("arguments given",n),new Error("Argument #"+e+" expected to be weak-mappable object, "+typeof n[e]+" given");var o,r=t.get(n[e]);if(r){var l=r.arguments;if(l.length===n.length){for(var a=0;a<l.length;++a)if(l[a]!==n[a])return;return{value:r.storedValue,index:e}}}},set:function(n,o){return t.set(n[e],{storedValue:o,arguments:n}),o}}},d=function(e){return"kashe-"+e},m=function(e,t){if(r){var n=r.get([e]);return n?n.value:r.set([e],t())}};function p(e,t){return void 0===e&&(e=u),function(n,o){void 0===o&&(o=e());var r={func:n};return(0,s.Z)((function(){for(var l=[],a=0;a<arguments.length;a++)l[a]=arguments[a];var i=m(r,e)||o,c=t?l.map(t):l,s=i.get(c);return s?s.value:i.set(c,n.apply(void 0,l))}),n,{name:d})}}var h=p(u);p(u,(function(e,t){return t>0?String(e):e}));h((function(e){return u()}));var f=n(51480),_=Number.isNaN||function(e){return"number"==typeof e&&e!=e};function g(e,t){if(e.length!==t.length)return!1;for(var n=0;n<e.length;n++)if(o=e[n],r=t[n],!(o===r||_(o)&&_(r)))return!1;var o,r;return!0}var b=function(e,t){var n;void 0===t&&(t=g);var o,r=[],l=!1;return function(){for(var a=[],i=0;i<arguments.length;i++)a[i]=arguments[i];return l&&n===this&&t(a,r)||(o=e.apply(this,a),l=!0,n=this,r=a),o}},v=n(30547);const E=h(((e,t)=>e.selector+" { "+(e=>e.map((e=>(e=>(0,f.decl)(e)+";")(e))).join(""))(t.rules)+" }")),k=(e,t)=>{let{bodies:n}=t;e.sort(((e,t)=>n[e.declaration].id-n[t.declaration].id));const o=[];let r=["",""];return e.forEach(((t,l)=>{const a=(e=>{let{media:t}=e;const n=[],o=[];return t.forEach((e=>{n.push("@media "+e+" {"),o.push("}")})),[n.join(""),o.join("")]})(t);a[0]!==r[0]&&(o.push(r[1]),r=a,o.push(r[0])),l<e.length-1&&t.declaration===e[l+1].declaration?o.push(t.selector+","):o.push(E(t,n[t.declaration]))})),o.push(r[1]),o.join("")},y=h(((e,t)=>Object.keys(e||{}).map((n=>{const o=((e,t)=>k(((e,t)=>{return(n=e.selectors,n.filter((e=>0===e.pieces.length))).filter((e=>!t||t(e.selector,e)));var n})(e,t),e)+(e=>e.atRules.reduce(((e,t)=>e+t.css),""))(e))(e[n],t);if(o)return{file:n,css:o}})).filter((e=>!!e)).map((e=>e)))),x=h(((e,t)=>{const{lookup:n,ast:o}=t,r={},l=new Set;return e.forEach((e=>{l.has(e)||(l.add(e),e.split(" ").forEach((e=>{const t=n[e];t&&t.forEach((t=>{r[t]||(r[t]={}),r[t][e]=!0}))})))})),{fetches:r,usage:Object.keys(o).filter((e=>!!r[e]))}})),w=(e,t,n)=>{const o=[],r=new Set(e);return o.push.apply(o,(0,i.Z)(((e,t)=>t.filter((t=>((e,t)=>e.pieces.length>0&&e.pieces.every((e=>t.has(e))))(t,e))))(r,t.selectors).filter((e=>!n||n(e.selector,e))))),k(o,t)},C=h(((e,t,n)=>{const{ast:o}=t,{fetches:r,usage:l}=x(e,t);return n&&n.introduceClasses&&n.introduceClasses((e=>{const t=new Set;for(const n of e)n.includes(" ")?n.split(" ").forEach((e=>t.add(e))):t.add(n);return Array.from(t.values())})(e)),l.map((e=>({file:e,css:w(Object.keys(r[e]),o[e],n)})))})),I=b((function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return t})),S=e=>{if(!("isReady"in e))throw new Error("used-styles: style definitions has to be created using discoverProjectStyles or loadStyleDefinitions");if(!e.isReady)throw new Error("used-styles: style definitions are not ready yet. You should `await discoverProjectStyles(...)`")},L=()=>!0,A=e=>"number"==typeof e||"string"==typeof e?+e:!0===e?0:Number.NaN,z=()=>{let e,t;const n=new Promise(((n,o)=>{e=n,t=o}));return{result:{isReady:!1,then:(e,t)=>n.then(e,t)},resolve:e,reject:t}},D=e=>e&&e.parent&&"name"in e.parent&&"media"===e.parent.name?D(e.parent).concat(e.parent.params):[],j=e=>!!e&&e.indexOf(".")>=0,T=e=>{const t=e.replace(/\(([^)])*\)/g,"").replace(/(\\\+)/g,"PLUS_SYMBOL").match(/\.([^>~+$:{[\s]+)?/g)||[];return t.reverse(),((t.find(j)||"").match(/(\.[^.>~+,$:{[\s]+)?/g)||[]).map((e=>e.replace(/[.\s.:]+/,"").replace(/PLUS_SYMBOL/g,"+"))).filter(Boolean)},N=e=>e.substr((e=>{const t=[e.indexOf(" "),e.indexOf(">"),e.indexOf("~"),e.indexOf("+"),e.indexOf(":")].filter((e=>e>0));return 0===t.length?e.length:Math.min.apply(Math,(0,i.Z)(t))||e.length})(e)).trim(),O=(e,t)=>({line:e,column:t}),B=(e,t)=>e.line===t.line&&e.column===t.column;let M=1;const H=e=>(0,v.str)(e).toString(32),R=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";const n=(0,f.parse)(e),o=[],r=[],l={},a=new Set;return n.walkAtRules((e=>{"charset"!==e.name&&"media"!==e.name&&(a.add(e),r.push({kind:e.name,id:e.params,css:e.toString()}))})),n.walkRules((e=>{a.has(e.parent)||e.selector.split(",").map((e=>e.trim())).forEach((t=>{const n={media:D(e),selector:t,pieces:T(t),postfix:N(t),declaration:0,hash:t},r=(e=>{const t=e.replace(/\(([^)])*\)/g,"").replace(/(\\\+)/g,"PLUS_SYMBOL").split(" ");return t.pop(),(t.join(" ").match(/\.([^>~+$:{[\s]+)?/g)||[]).filter(j).map((e=>e.replace(/[.\s.:]+/,"").replace(/PLUS_SYMBOL/g,"+"))).filter(Boolean)})(t);r.length>0&&(n.parents=r);const a={id:NaN,rules:[],start:O(1/0,1/0),end:O(0,0)};var i;e.walkDecls((e=>{let{prop:t,value:n,source:o,important:r}=e;var l,i;o&&(a.start=(l=a.start,i=o.start,l.line<i.line?l:l.line===i.line?{line:l.line,column:Math.min(l.column,i.column)}:Object.assign({},i)),a.end=((e,t)=>e.line>t.line?e:e.line===t.line?{line:e.line,column:Math.max(e.column,t.column)}:Object.assign({},t))(a.end,o.end),a.rules.push({prop:t,value:n,important:r}))})),n.declaration=((e,t)=>Object.values(t).find((t=>{return o=e,B((n=t).start,o.start)&&B(n.end,o.end);var n,o}))||(e.id=M++,t[e.id]=e,e))(a,l).id,n.hash=""+t+(i=a,H(JSON.stringify(i.rules)))+H(n.postfix)+H(n.media.join()),o.push(n)}))})),{file:t,selectors:o,bodies:l,atRules:r}},P=e=>Object.keys(e).reduce(((t,n)=>(t[n]=R(e[n],n),t)),{}),F=e=>Object.keys(e).reduce(((t,n)=>(e[n].selectors.forEach((e=>{e.pieces.forEach((e=>{t[e]||(t[e]=[]),t[e].push(n)}))})),t)),{});const U=function(e,t){let n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:(()=>{const e=new Set;return(t,n)=>!e.has(n.hash)&&(e.add(n.hash),!0)})();return S(t),[].concat((0,i.Z)(((e,t)=>y(e.ast,t))(t,n)),(0,i.Z)(((e,t,n)=>(S(t),C((e=>I.apply(void 0,(0,i.Z)((e=>(0,i.Z)(e.match(/class="([^"]+)"/g)||[]).map((e=>e.substr(7,e.length-7-1))))(e))))(e),t,n)))(e,t,n))).map((e=>{let{css:t,file:n}=e;return"\n/* "+n+" */\n"+t})).join("")};function W(e,t){return(0,c.a)(this,void 0,void 0,(function*(){if(e&&e.length>0&&t&&t.length>0){const n=function(e,t){let n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:L;const{resolve:o,reject:r,result:l}=z();return function(){return(0,c.a)(this,void 0,void 0,(function*(){const o=(yield e()).map((e=>({file:e,order:A(n(e))}))).filter((e=>{let{order:t}=e;return!Number.isNaN(t)})).sort(((e,t)=>e.order-t.order)).map((e=>{let{file:t}=e;return t})),r={};return o.map((e=>r[e]=void 0)),yield Promise.all(o.map((e=>(0,c.a)(this,void 0,void 0,(function*(){r[e]=yield t(e)}))))),function(e){const t=P(e);return{isReady:!0,lookup:F(t),ast:t}}(r)}))}().then((e=>{Object.assign(l,e),o()}),(e=>{throw r(e),console.error(e),new Error("used-styles failed to start")})),l}((()=>["index.css"]),(()=>t));return yield n,U(e,n)}return""}))}var V=n(42858),q=n(70476),G=n(41011),Z=n(44961),K=n(29928),J=n(12670),Y=n(56924),Q=n(36870),X=n(32152),$=n(62308),ee=n(32659),te=n(8381),ne=n(35828),oe=n(96293),re=n(87407),le=n(52708),ae=n(7025),ie=n(48915),ce=n(4112),se=n(67470),ue=n(77516),de=n(30695),me=n(63483),pe=n(89836),he=n(11303),fe=n(77956),_e=n(66625),ge=n(41380),be=n(17882),ve=n(45433),Ee=n(2592),ke=n(7444),ye={"column-count":"Columns-module_columns__JsDXe"};(0,ke.s)("@media (min-width:769px){.Columns-module_columns__JsDXe{display:grid;grid-template-columns:50% 50%}.Columns-module_columns__JsDXe>div{margin-left:1em;width:calc(100% - 3em)}}@media (max-width:768px){.Columns-module_columns__JsDXe>div{display:block;margin:0;width:100%}}");const xe=e=>{let{children:t}=e;return a.createElement("div",{className:ye.columns},t)};var we=n(44144),Ce=n(73935),Ie=n(39440),Se=n(34300),Le=n(5871),Ae=n.n(Le),ze=n(95324),De=n(15901),je=n(8944),Te=n(75905),Ne=n(26917),Oe=n(62872),Be=n(12818),Me=9007199254740991,He="[object Arguments]",Re="[object Function]",Pe="[object GeneratorFunction]",Fe="object"==typeof Ne.a&&Ne.a&&Ne.a.Object===Object&&Ne.a,Ue="object"==typeof self&&self&&self.Object===Object&&self,We=Fe||Ue||Function("return this")();function Ve(e,t){for(var n=-1,o=t.length,r=e.length;++n<o;)e[r+n]=t[n];return e}var qe=Object.prototype,Ge=qe.hasOwnProperty,Ze=qe.toString,Ke=We.Symbol,Je=qe.propertyIsEnumerable,Ye=Ke?Ke.isConcatSpreadable:void 0,Qe=Math.max;function Xe(e,t,n,o,r){var l=-1,a=e.length;for(n||(n=$e),r||(r=[]);++l<a;){var i=e[l];t>0&&n(i)?t>1?Xe(i,t-1,n,o,r):Ve(r,i):o||(r[r.length]=i)}return r}function $e(e){return tt(e)||function(e){return function(e){return nt(e)&&function(e){return null!=e&&function(e){return"number"==typeof e&&e>-1&&e%1==0&&e<=Me}(e.length)&&!function(e){var t=function(e){var t=typeof e;return!!e&&("object"==t||"function"==t)}(e)?Ze.call(e):"";return t==Re||t==Pe}(e)}(e)}(e)&&Ge.call(e,"callee")&&(!Je.call(e,"callee")||Ze.call(e)==He)}(e)||!!(Ye&&e&&e[Ye])}function et(e){if("string"==typeof e||function(e){return"symbol"==typeof e||nt(e)&&"[object Symbol]"==Ze.call(e)}(e))return e;var t=e+"";return"0"==t&&1/e==-1/0?"-0":t}var tt=Array.isArray;function nt(e){return!!e&&"object"==typeof e}var ot,rt,lt=(ot=function(e,t){return null==e?{}:function(e,t){return function(e,t,n){for(var o=-1,r=t.length,l={};++o<r;){var a=t[o],i=e[a];n(i,a)&&(l[a]=i)}return l}(e=Object(e),t,(function(t,n){return n in e}))}(e,function(e,t){for(var n=-1,o=e?e.length:0,r=Array(o);++n<o;)r[n]=t(e[n],n,e);return r}(Xe(t,1),et))},rt=Qe(void 0===rt?ot.length-1:rt,0),function(){for(var e=arguments,t=-1,n=Qe(e.length-rt,0),o=Array(n);++t<n;)o[t]=e[rt+t];t=-1;for(var r=Array(rt+1);++t<rt;)r[t]=e[t];return r[rt]=o,function(e,t,n){switch(n.length){case 0:return e.call(t);case 1:return e.call(t,n[0]);case 2:return e.call(t,n[0],n[1]);case 3:return e.call(t,n[0],n[1],n[2])}return e.apply(t,n)}(ot,this,r)}),at=function(e){return void 0===e},it=decodeURIComponent,ct=encodeURIComponent,st=/^[\u0009\u0020-\u007e\u0080-\u00ff]+$/;function ut(e,t){try{return t(e)}catch(t){return e}}var dt={parse:function(e,t){if("string"!=typeof e)throw new TypeError("argument str must be a string");for(var n={},o=t||{},r=e.split(";"),l=o.decode||it,a=0;a<r.length;a++){var i=r[a],c=i.indexOf("=");if(!(c<0)){var s=i.substring(0,c).trim();if(null==n[s]){var u=i.substring(c+1,i.length).trim();'"'===u[0]&&(u=u.slice(1,-1)),n[s]=ut(u,l)}}}return n},serialize:function(e,t,n){var o=n||{},r=o.encode||ct;if("function"!=typeof r)throw new TypeError("option encode is invalid");if(!st.test(e))throw new TypeError("argument name is invalid");var l=r(t);if(l&&!st.test(l))throw new TypeError("argument val is invalid");var a=e+"="+l;if(null!=o.maxAge){var i=o.maxAge-0;if(isNaN(i)||!isFinite(i))throw new TypeError("option maxAge is invalid");a+="; Max-Age="+Math.floor(i)}if(o.domain){if(!st.test(o.domain))throw new TypeError("option domain is invalid");a+="; Domain="+o.domain}if(o.path){if(!st.test(o.path))throw new TypeError("option path is invalid");a+="; Path="+o.path}if(o.expires){if("function"!=typeof o.expires.toUTCString)throw new TypeError("option expires is invalid");a+="; Expires="+o.expires.toUTCString()}if(o.httpOnly&&(a+="; HttpOnly"),o.secure&&(a+="; Secure"),o.sameSite)switch("string"==typeof o.sameSite?o.sameSite.toLowerCase():o.sameSite){case!0:a+="; SameSite=Strict";break;case"lax":a+="; SameSite=Lax";break;case"strict":a+="; SameSite=Strict";break;case"none":a+="; SameSite=None";break;default:throw new TypeError("option sameSite is invalid")}return a}};function mt(e,t){const n=Object.assign(Object.assign({},{path:"/",secure:!1,sameSite:"strict",maxAge:void 0}),e);return"undefined"==typeof window?{get:()=>"",set:()=>""}:{get:()=>function(e){return dt.parse(document.cookie)[e]}(t)||"",set:e=>{!function(e,t,n){document.cookie=dt.serialize(e,t,n)}(t,e,n)}}}const pt="city-of-helsinki-cookie-consents";function ht(e){return e.reduce(((e,t)=>(e[t]=!1,e)),{})}function ft(e,t,n){return Object.assign(Object.assign(Object.assign({},e),t),n)}function _t(e){if(!e||e.length<2||"{"!==e.charAt(0))return{};try{return JSON.parse(e)}catch(e){return{}}}const gt=()=>"undefined"==typeof window?"":window.location.hostname.split(".").slice(-2).join(".");function bt(e){!function(e){let{optionalConsents:t,requiredConsents:n}=e;n&&t&&n.forEach((e=>{if(t.includes(e))throw new Error("optional consent '"+e+"' found in requiredConsents.")}))}(e);const{optionalConsents:t=[],requiredConsents:n=[]}=e,o=[].concat((0,i.Z)(t),(0,i.Z)(n)),r=mt({maxAge:31536e3,domain:e.cookieDomain||gt()},pt),l=_t(r.get()),a=ft(ht(n),lt(l,n)),c=ft(ht(t),lt(l,t)),s=Object.keys(l).filter((e=>!o.includes(e))),u=function(e){let t=Object.assign({},e);const n=()=>t,o=(e,t)=>at(t.required[e])?at(t.optional[e])?void 0:t.optional:t.required,r=(e,n)=>{const r={optional:Object.assign({},t.optional),required:Object.assign({},t.required),unknown:Object.assign({},t.unknown)};return e.forEach((e=>{((e,t,n)=>{const r=o(t,e);if(!r)throw new Error("Unknown consent "+t);r[t]=n})(r,e,n)})),t=r,r};return{getAll:()=>n(),getConsentByName:e=>{const t=o(e,n());return!!t&&t[e]},approve:e=>r(e,!0),reject:e=>r(e,!1)}}({required:a,optional:c,unknown:s.length?lt(l,s):void 0});return{getRequired:()=>u.getAll().required,getOptional:()=>u.getAll().optional,update:(e,t)=>{const n=[e];t?u.approve(n):u.reject(n)},approveAll:()=>{u.approve(o)},approveRequired:()=>{u.approve(n)},getRequiredWithoutConsent:()=>n.filter((e=>!0!==u.getConsentByName(e))),rejectAll:()=>{u.reject(o)},getUnhandledConsents:()=>{const e=_t(r.get());return o.filter((t=>at(e[t])))},save:()=>{const e=u.getAll(),t=ft(e.required,e.optional,e.unknown);return r.set(function(e){return function(e){var t=typeof e;return!!e&&("object"==t||"function"==t)}(e)?JSON.stringify(e):"{}"}(t)),t}}}var vt,Et="__lodash_hash_undefined__",kt=1/0,yt="[object Function]",xt="[object GeneratorFunction]",wt="[object Symbol]",Ct=/\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/,It=/^\w*$/,St=/^\./,Lt=/[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g,At=/\\(\\)?/g,zt=/^\[object .+?Constructor\]$/,Dt="object"==typeof Ne.a&&Ne.a&&Ne.a.Object===Object&&Ne.a,jt="object"==typeof self&&self&&self.Object===Object&&self,Tt=Dt||jt||Function("return this")(),Nt=Array.prototype,Ot=Function.prototype,Bt=Object.prototype,Mt=Tt["__core-js_shared__"],Ht=(vt=/[^.]+$/.exec(Mt&&Mt.keys&&Mt.keys.IE_PROTO||""))?"Symbol(src)_1."+vt:"",Rt=Ot.toString,Pt=Bt.hasOwnProperty,Ft=Bt.toString,Ut=RegExp("^"+Rt.call(Pt).replace(/[\\^$.*+?()[\]{}|]/g,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$"),Wt=Tt.Symbol,Vt=Nt.splice,qt=en(Tt,"Map"),Gt=en(Object,"create"),Zt=Wt?Wt.prototype:void 0,Kt=Zt?Zt.toString:void 0;function Jt(e){var t=-1,n=e?e.length:0;for(this.clear();++t<n;){var o=e[t];this.set(o[0],o[1])}}function Yt(e){var t=-1,n=e?e.length:0;for(this.clear();++t<n;){var o=e[t];this.set(o[0],o[1])}}function Qt(e){var t=-1,n=e?e.length:0;for(this.clear();++t<n;){var o=e[t];this.set(o[0],o[1])}}function Xt(e,t){for(var n,o,r=e.length;r--;)if((n=e[r][0])===(o=t)||n!=n&&o!=o)return r;return-1}function $t(e,t){var n,o,r=e.__data__;return("string"==(o=typeof(n=t))||"number"==o||"symbol"==o||"boolean"==o?"__proto__"!==n:null===n)?r["string"==typeof t?"string":"hash"]:r.map}function en(e,t){var n=function(e,t){return null==e?void 0:e[t]}(e,t);return function(e){if(!ln(e)||function(e){return!!Ht&&Ht in e}(e))return!1;var t=function(e){var t=ln(e)?Ft.call(e):"";return t==yt||t==xt}(e)||function(e){var t=!1;if(null!=e&&"function"!=typeof e.toString)try{t=!!(e+"")}catch(e){}return t}(e)?Ut:zt;return t.test(function(e){if(null!=e){try{return Rt.call(e)}catch(e){}try{return e+""}catch(e){}}return""}(e))}(n)?n:void 0}Jt.prototype.clear=function(){this.__data__=Gt?Gt(null):{}},Jt.prototype.delete=function(e){return this.has(e)&&delete this.__data__[e]},Jt.prototype.get=function(e){var t=this.__data__;if(Gt){var n=t[e];return n===Et?void 0:n}return Pt.call(t,e)?t[e]:void 0},Jt.prototype.has=function(e){var t=this.__data__;return Gt?void 0!==t[e]:Pt.call(t,e)},Jt.prototype.set=function(e,t){return this.__data__[e]=Gt&&void 0===t?Et:t,this},Yt.prototype.clear=function(){this.__data__=[]},Yt.prototype.delete=function(e){var t=this.__data__,n=Xt(t,e);return!(n<0||(n==t.length-1?t.pop():Vt.call(t,n,1),0))},Yt.prototype.get=function(e){var t=this.__data__,n=Xt(t,e);return n<0?void 0:t[n][1]},Yt.prototype.has=function(e){return Xt(this.__data__,e)>-1},Yt.prototype.set=function(e,t){var n=this.__data__,o=Xt(n,e);return o<0?n.push([e,t]):n[o][1]=t,this},Qt.prototype.clear=function(){this.__data__={hash:new Jt,map:new(qt||Yt),string:new Jt}},Qt.prototype.delete=function(e){return $t(this,e).delete(e)},Qt.prototype.get=function(e){return $t(this,e).get(e)},Qt.prototype.has=function(e){return $t(this,e).has(e)},Qt.prototype.set=function(e,t){return $t(this,e).set(e,t),this};var tn=on((function(e){var t;e=null==(t=e)?"":function(e){if("string"==typeof e)return e;if(an(e))return Kt?Kt.call(e):"";var t=e+"";return"0"==t&&1/e==-kt?"-0":t}(t);var n=[];return St.test(e)&&n.push(""),e.replace(Lt,(function(e,t,o,r){n.push(o?r.replace(At,"$1"):t||e)})),n}));function nn(e){if("string"==typeof e||an(e))return e;var t=e+"";return"0"==t&&1/e==-kt?"-0":t}function on(e,t){if("function"!=typeof e||t&&"function"!=typeof t)throw new TypeError("Expected a function");var n=function(){var o=arguments,r=t?t.apply(this,o):o[0],l=n.cache;if(l.has(r))return l.get(r);var a=e.apply(this,o);return n.cache=l.set(r,a),a};return n.cache=new(on.Cache||Qt),n}on.Cache=Qt;var rn=Array.isArray;function ln(e){var t=typeof e;return!!e&&("object"==t||"function"==t)}function an(e){return"symbol"==typeof e||function(e){return!!e&&"object"==typeof e}(e)&&Ft.call(e)==wt}var cn=function(e,t,n){var o=null==e?void 0:function(e,t){var n;t=function(e,t){if(rn(e))return!1;var n=typeof e;return!("number"!=n&&"symbol"!=n&&"boolean"!=n&&null!=e&&!an(e))||It.test(e)||!Ct.test(e)||null!=t&&e in Object(t)}(t,e)?[t]:rn(n=t)?n:tn(n);for(var o=0,r=t.length;null!=e&&o<r;)e=e[nn(t[o++])];return o&&o==r?e:void 0}(e,t);return void 0===o?n:o};const sn=function(){const e={fi:{description:"Eväste vaaditaan jotta käyttäjän kielivalinta säilyisi.",expiration:"Istunto"},sv:{description:"Kakan krävs för att spara användarens språkval.",expiration:"Session"},en:{description:"Required to persist the user's chosen language.",expiration:"Session"}},t={fi:{description:"Tunnistautumisistunnon säilymiseksi vaadittu eväste.",expiration:"Istunto"},sv:{description:"Cookie som krävs för att bevara autentiseringssession.",expiration:"Session"},en:{description:"Required to persist the authentication session.",expiration:"Session"}},n={fi:{description:"Tietoturvakontrolli",expiration:"365 päivää"},sv:{description:"Datasäkerhetskontroll",expiration:"365 dagar"},en:{description:"A security control",expiration:"365 days"}},o={fi:{title:"Kirjautuminen",text:"Kirjautumisevästeitä käytetään käyttäjän kirjautuessa palveluun.",expandAriaLabel:"Näytä kirjautumiseen liittyvien evästeiden tiedot",checkboxAriaDescription:"Kirjautumisevästeitä käytetään käyttäjän kirjautuessa palveluun."},sv:{title:"Inloggning",text:"Inloggningskakor används när användaren loggar in på tjänsten.",expandAriaLabel:"Visa information om inloggningskakor",checkboxAriaDescription:"Inloggningskakor används när användaren loggar in på tjänsten."},en:{title:"Login",text:"Login cookies are used when the user logs in to the service.",expandAriaLabel:"Show cookie information related to login",checkboxAriaDescription:"Login cookies are used when the user logs in to the service."}},r="Eväste kerää tietoa kävijän liikkeistä sivustolla.",l="Statistiksystemets kaka samlar information om hur webbplatsen används.",a="This cookie is used to store a few details about the user such as the unique visitor ID.",i="api.hel.fi",c="tunnistus.hel.fi",s="suomi.fi";return{texts:{sections:{main:{fi:{title:"{{siteName}} käyttää evästeitä",text:"Tämä sivusto käyttää välttämättömiä evästeitä sivun perustoimintojen ja suorituskyvyn varmistamiseksi. Lisäksi käytämme kohdennusevästeitä käyttäjäkokemuksen parantamiseksi, analytiikkaan ja yksilöidyn sisällön näyttämiseen."},sv:{title:"{{siteName}} använder kakor",text:"Denna webbplats använder obligatoriska kakor för att säkerställa de grundläggande funktionerna och prestandan. Dessutom använder vi inriktningskakor för bättre användarupplevelse, analytik och individualiserat innehåll."},en:{title:"{{siteName}} uses cookies",text:"This website uses required cookies to ensure the basic functionality and performance. In addition, we use targeting cookies to improve the user experience, perform analytics and display personalised content."}},details:{fi:{title:"Tietoa sivustolla käytetyistä evästeistä",text:"Sivustolla käytetyt evästeet on luokiteltu käyttötarkoituksen mukaan. Alla voit lukea eri luokista ja sallia tai kieltää evästeiden käytön."},sv:{title:"Information om kakor som används på webbplatsen",text:"Kakorna som används på webbplatsen har klassificerats enligt användningsändamål. Du kan läsa om de olika klasserna och acceptera eller förbjuda användningen av kakor."},en:{title:"About the cookies used on the website",text:"The cookies used on the website have been classified according to their intended use. Below, you can read about the various categories and accept or reject the use of cookies."}}},ui:{fi:{showSettings:"Näytä evästeasetukset",hideSettings:"Piilota asetukset",approveAllConsents:"Hyväksy kaikki evästeet",approveRequiredAndSelectedConsents:"Hyväksy valitut evästeet",approveOnlyRequiredConsents:"Hyväksy vain välttämättömät evästeet",settingsSaved:"Asetukset tallennettu!",readMore:"Lue lisää"},sv:{showSettings:"Visa kakinställningarna",hideSettings:"Stänga kakinställningarna",approveAllConsents:"Acceptera alla kakor",approveRequiredAndSelectedConsents:"Acceptera valda kakor",approveOnlyRequiredConsents:"Acceptera endast nödvändiga",settingsSaved:"Inställningar sparade!",readMore:"Läs mer"},en:{showSettings:"Show cookie settings",hideSettings:"Hide cookie settings",approveAllConsents:"Accept all cookies",approveRequiredAndSelectedConsents:"Accept selected cookies",approveOnlyRequiredConsents:"Accept required cookies only",settingsSaved:"Settings saved!",readMore:"Read more"}},tableHeadings:{fi:{name:"Nimi",hostName:"Evästeen asettaja",description:"Käyttötarkoitus",expiration:"Voimassaoloaika"},sv:{name:"Namn",hostName:"Den som lagrat kakan",description:"Användning",expiration:"Giltighetstid"},en:{name:"Name",hostName:"Cookie set by",description:"Purpose of use",expiration:"Period of validity"}}},language:{languageOptions:[{code:"fi",label:"Suomeksi (FI)"},{code:"sv",label:"Svenska (SV)"},{code:"en",label:"English (EN)"}],languageSelectorAriaLabel:"Kieli: Suomi. Vaihda kieli. Change language. Ändra språk."},requiredCookies:{fi:{title:"Välttämättömät evästeet",text:"Välttämättömien evästeiden käyttöä ei voi kieltää. Ne mahdollistavat sivuston toiminnan ja vaikuttavat käytettävyyteen.",checkboxAriaDescription:"Välttämättömien evästeiden käyttöä ei voi kieltää. Ne mahdollistavat sivuston toiminnan ja vaikuttavat käytettävyyteen."},sv:{title:"Nödvändig kakor",text:"Du kan inte förbjuda användningen av nödvändiga kakorna. De möjliggör webbplatsens funktioner och påverkar användbarheten.",checkboxAriaDescription:"Du kan inte förbjuda användningen av nödvändiga kakorna. De möjliggör webbplatsens funktioner och påverkar användbarheten."},en:{title:"Necessary cookies",text:"Necessary cookies cannot be rejected. They enable the proper functioning of the website and affect the usability.",checkboxAriaDescription:"Necessary cookies cannot be rejected. They enable the proper functioning of the website and affect the usability."}},optionalCookies:{fi:{title:"Valinnaiset evästeet",text:"Voit hyväksyä tai kieltää valinnaiset evästeet.",checkboxAriaDescription:"Voit hyväksyä tai kieltää valinnaiset evästeet."},sv:{title:"Valfri kakor",text:"Du kan acceptera eller förbjuda de valfria kakorna.",checkboxAriaDescription:"Du kan acceptera eller förbjuda de valfria kakorna."},en:{title:"Optional cookies",text:"You can accept or reject optional cookies.",checkboxAriaDescription:"You can accept or reject optional cookies."}},commonGroups:{login:Object.assign({},o),marketing:{fi:{title:"Mainonta ja markkinointi",text:"Markkinointievästeiden avulla sivuston käyttäjille voidaan kohdentaa sisältöjä.",expandAriaLabel:"Näytä mainontaan ja markkinointiin liittyvien evästeiden tiedot",checkboxAriaDescription:"Markkinointievästeiden avulla sivuston käyttäjille voidaan kohdentaa sisältöjä."},sv:{title:"Reklam och marknadsföring",text:"Med hjälp av marknadsföringskakor kan innehåll riktas till webbplatsens användare.",expandAriaLabel:"Visa information om reklam- och marknadsföringskakor",checkboxAriaDescription:"Med hjälp av marknadsföringskakor kan innehåll riktas till webbplatsens användare."},en:{title:"Advertising and marketing",text:"Marketing cookies can be used to target content to users of the website.",expandAriaLabel:"Show cookie information related to advertising and marketing",checkboxAriaDescription:"Marketing cookies can be used to target content to users of the website."}},preferences:{fi:{title:"Mieltymykset",text:"Mieltymysevästeet mukauttavat sivuston ulkoasua ja toimintaa käyttäjän tekemien valintojen perusteella.",expandAriaLabel:"Näytä mieltymyksiin liittyvien evästeiden tiedot",checkboxAriaDescription:"Mieltymysevästeet mukauttavat sivuston ulkoasua ja toimintaa käyttäjän tekemien valintojen perusteella."},sv:{title:"Preferenser",text:"Preferenskakor ändrar webbplatsens utseende och funktioner enligt användarens tidigare val.",expandAriaLabel:"Visa information om preferenskakor",checkboxAriaDetextscription:"Preferenskakor ändrar webbplatsens utseende och funktioner enligt användarens tidigare val."},en:{title:"Preferences",text:"Preference cookies customise the layout and operation of the website based on the choices made by the user.",expandAriaLabel:"Show cookie information related to preferences",checkboxAriaDescription:"Preference cookies customise the layout and operation of the website based on the choices made by the user."}},userInputs:{fi:{title:"Käyttäjän syötteet",text:"Syöte-evästeillä voidaan tallentaa käyttäjän palveluun syöttämiä tietoja.",expandAriaLabel:"Näytä käyttäjän syötteisiin liittyvien evästeiden tiedot",checkboxAriaDescription:"Syöte-evästeillä voidaan tallentaa käyttäjän palveluun syöttämiä tietoja."},sv:{title:"Användarens input",text:"Med inputskakor kan man lagra information som användaren matar in i tjänsten.",expandAriaLabel:"Visa information om inputskakor",checkboxAriaDescription:"Med inputskakor kan man lagra information som användaren matar in i tjänsten."},en:{title:"User input",text:"User-input cookies can be used to store information entered by the user in the service.",expandAriaLabel:"Show cookie information related to the user's input",checkboxAriaDescription:"User-input cookies can be used to store information entered by the user in the service."}},informationSecurity:{fi:{title:"Tietoturva",text:"Tietoturvaevästeet mahdollistavat turvallisen tiedonsiirron käyttäjän ja palvelun välillä.",expandAriaLabel:"Näytä tietoturvaan liittyvien evästeiden tiedot",checkboxAriaDescription:"Tietoturvaevästeet mahdollistavat turvallisen tiedonsiirron käyttäjän ja palvelun välillä."},sv:{title:"Datasäkerhet",text:"Datasäkerhetskakor möjliggör en säker dataöverföring mellan användaren och tjänsten.",expandAriaLabel:"Visa information om datasäkerhetskakor",checkboxAriaDescription:"Datasäkerhetskakor möjliggör en säker dataöverföring mellan användaren och tjänsten."},en:{title:"Information security",text:"Security cookies enable secure data transfer between the user and the service.",expandAriaLabel:"Show cookie information related to information security",checkboxAriaDescription:"Security cookies enable secure data transfer between the user and the service."}},socialMedia:{fi:{title:"Sosiaalinen media",text:"Sosiaalisen median evästeet liittyvät erilaisten sosiaalisen median palveluiden ominaisuuksiin.",expandAriaLabel:"Näytä sosiaaliseen mediaan liittyvien evästeiden tiedot",checkboxAriaDescription:"Sosiaalisen median evästeet liittyvät erilaisten sosiaalisen median palveluiden ominaisuuksiin."},sv:{title:"Sociala medier",text:"Sociala medier-kakor förknippas med olika sociala medie-tjänsters egenskaper.",expandAriaLabel:"Visa information om kakor för sociala medier",checkboxAriaDescription:"Sociala medier-kakor förknippas med olika sociala medie-tjänsters egenskaper."},en:{title:"Social media",text:"Social media cookies are related to the characteristics of various social media services.",expandAriaLabel:"Show cookie information related to social media",checkboxAriaDescription:"Social media cookies are related to the characteristics of various social media services."}},accessibility:{fi:{title:"Saavutettavuus",text:"Saavutettavuusevästeet mahdollistavat palvelun joitakin saavutettavuusominaisuuksia.",expandAriaLabel:"Näytä saavutettavuuteen liittyvien evästeiden tiedot",checkboxAriaDescription:"Saavutettavuusevästeet mahdollistavat palvelun joitakin saavutettavuusominaisuuksia."},sv:{title:"Tillgänglighet",text:"Tillgänglighetskakor möjliggör vissa egenskaper för tjänstens tillgänglighet.",expandAriaLabel:"Visa information om tillgänglighetskakor",checkboxAriaDescription:"Tillgänglighetskakor möjliggör vissa egenskaper för tjänstens tillgänglighet."},en:{title:"Accessibility",text:"Accessibility cookies enable some of the service's accessibility features.",expandAriaLabel:"Show cookie information related to accessibility",checkboxAriaDescription:"Accessibility cookies enable some of the service's accessibility features."}},deviceInfo:{fi:{title:"Laitetiedot",text:"Laitetietoevästeet sisältävät sellaisia käyttäjän laitteelta kerättyjä tietoja, joilla varmistetaan palvelun toiminta.",expandAriaLabel:"Näytä laitetietoihin liittyvien evästeiden tiedot",checkboxAriaDescription:"Laitetietoevästeet sisältävät sellaisia käyttäjän laitteelta kerättyjä tietoja, joilla varmistetaan palvelun toiminta."},sv:{title:"Enhetsuppgifter",text:"Kakor för enhetsuppgifterna innehåller sådana uppgifter som samlats in från användarens enhet med vilka tjänstens funktioner säkerställs.",expandAriaLabel:"Visa information om kakor för enhetsuppgifterna",checkboxAriaDescription:"Kakor för enhetsuppgifterna innehåller sådana uppgifter som samlats in från användarens enhet med vilka tjänstens funktioner säkerställs."},en:{title:"Device information",text:"Device information cookies contain information collected from the user's device that ensures the functionality of the service.",expandAriaLabel:"Show cookie information related to device information",checkboxAriaDescription:"Device information cookies contain information collected from the user's device that ensures the functionality of the service."}},chat:{fi:{title:"Chat-palvelut",text:"Chat-palveluiden evästeet mahdollistavat yhteydenpidon käyttäjän ja palvelun välillä.",expandAriaLabel:"Näytä chat-palveluihin liittyvien evästeiden tiedot",checkboxAriaDescription:"Chat-palveluiden evästeet mahdollistavat yhteydenpidon käyttäjän ja palvelun välillä."},sv:{title:"Chattjänster",text:"Kakor för chattjänsterna möjliggör kontakten mellan användaren och tjänsten.",expandAriaLabel:"Visa information om kakor för chattjänsterna",checkboxAriaDescription:"Kakor för chattjänsterna möjliggör kontakten mellan användaren och tjänsten."},en:{title:"Chat services",text:"Chat service cookies enable communication between the user and the service.",expandAriaLabel:"Show cookie information related to chat services",checkboxAriaDescription:"Chat service cookies enable communication between the user and the service."}},thirdParty:{fi:{title:"Kolmannen osapuolen palvelut",text:"Evästeet mahdollistavat ulkopuolisten palvelujen (kuten sosiaalisen median alustojen) toiminnan tällä sivustolla.",expandAriaLabel:"Näytä kolmansiin osapuoliin liittyvien evästeiden tiedot",checkboxAriaDescription:"Evästeet mahdollistavat ulkopuolisten palvelujen (kuten sosiaalisen median alustojen) toiminnan tällä sivustolla."},sv:{title:"Tredje parts tjänster",text:"Kakor möjliggör utomstående tjänsters (såsom sociala medie-plattformar) funktioner på denna webbplats.",expandAriaLabel:"Visa information om tredjepartskakor",checkboxAriaDescription:"Kakor möjliggör utomstående tjänsters (såsom sociala medie-plattformar) funktioner på denna webbplats."},en:{title:"Third-party services",text:"Cookies allow external services (such as social media platforms) to operate on this website.",expandAriaLabel:"Show cookie information related to third parties",checkboxAriaDescription:"Cookies allow external services (such as social media platforms) to operate on this website."}},content:{fi:{title:"Sisällön esittäminen",text:"Evästeitä hyödynnetään erilaisten sisältöjen näyttämiseen käyttäjälle.",expandAriaLabel:"Näytä sisällön esittämiseen liittyvien evästeiden tiedot",checkboxAriaDescription:"Evästeitä hyödynnetään erilaisten sisältöjen näyttämiseen käyttäjälle."},sv:{title:"Visning av innehåll",text:"Kakor utnyttjas för att visa olika innehåll för användaren.",expandAriaLabel:"Visa information om kakor för visning av innehåll",checkboxAriaDescription:"Kakor utnyttjas för att visa olika innehåll för användaren."},en:{title:"Content presentation",text:"Cookies are used to display various types of content to the user.",expandAriaLabel:"Show cookie information related to content presentation",checkboxAriaDescription:"Cookies are used to display various types of content to the user."}},location:{fi:{title:"Sijainti",text:"Sijaintievästeiden avulla voidaan hyödyntää käyttäjän laitteelta saatua sijaintitietoa (GPS).",expandAriaLabel:"Näytä sijaintiin liittyvien evästeiden tiedot",checkboxAriaDescription:"Sijaintievästeiden avulla voidaan hyödyntää käyttäjän laitteelta saatua sijaintitietoa (GPS)."},sv:{title:"Läge",text:"Med hjälp av lägeskakor kan man utnyttja lägesdata som fåtts från användarens enhet (GPS).",expandAriaLabel:"Visa information om lägeskakor",checkboxAriaDescription:"Med hjälp av lägeskakor kan man utnyttja lägesdata som fåtts från användarens enhet (GPS)."},en:{title:"Location",text:"Location cookies can be used to utilise location information (GPS) received from the user's device.",expandAriaLabel:"Show cookie information related to location",checkboxAriaDescription:"Location cookies can be used to utilise location information (GPS) received from the user’s device."}},loadBalancing:{fi:{title:"Kuormantasaus",text:"Kuormantasausevästeiden avulla varmistetaan, että palvelu latautuu ja toimii nopeasti ja tehokkaasti.",expandAriaLabel:"Näytä kuormantasaukseen liittyvien evästeiden tiedot",checkboxAriaDescription:"Kuormantasausevästeiden avulla varmistetaan, että palvelu latautuu ja toimii nopeasti ja tehokkaasti."},sv:{title:"Belastningsutjämning",text:"Med hjälp av belastningsutjämningskakor säkerställer man att tjänsten laddas och fungerar snabbt och effektivt.",expandAriaLabel:"Visa information om belastningsutjämningskakor",checkboxAriaDescription:"Med hjälp av belastningsutjämningskakor säkerställer man att tjänsten laddas och fungerar snabbt och effektivt."},en:{title:"Load balancing",text:"Load-balancing cookies ensure that the service loads and works quickly and efficiently.",expandAriaLabel:"Show cookie information related to load-balancing",checkboxAriaDescription:"Load-balancing cookies ensure that the service loads and works quickly and efficiently."}},essential:{fi:{title:"Perustoimintoihin liittyvät evästeet",text:"Perustoimintoihin liittyviä evästeitä ei voi hylätä. Ne mahdollistavat sivuston kunnollisen toimivuuden ja vaikuttavat käytettävyyteen.",expandAriaLabel:"Näytä perustoimintoihin liittyvien evästeiden tiedot",checkboxAriaDescription:"Sivusto ei toimi ilman näitä"},sv:{title:"Kakor för grundläggande funktioner",text:"Du kan inte förbjuda användningen av kakor för grundläggande funktioner. De möjliggör webbplatsens funktioner och påverkar användbarheten.",expandAriaLabel:"Visa information om kakor för grundläggande funktioner",checkboxAriaDescription:"Du kan inte förbjuda användningen av kakor för grundläggande funktioner. De möjliggör webbplatsens funktioner och påverkar användbarheten."},en:{title:"Cookies related to basic functionalities",text:"Cookies related to basic functionalities cannot be rejected. They enable the proper functioning of the website and affect the usability.",expandAriaLabel:"Show cookie information related to basic functionalities",checkboxAriaDescription:"Cookies related to basic functionalities cannot be rejected. They enable the proper functioning of the website and affect the usability"}},statistics:{fi:{title:"Tilastointi",text:"Tilastointievästeiden keräämää tietoa käytetään verkkosivuston kehittämiseen.",expandAriaLabel:"Näytä tilastointiin liittyvien evästeiden tiedot",checkboxAriaDescription:"Tilastointievästeiden keräämää tietoa käytetään verkkosivuston kehittämiseen."},sv:{title:"Statistik",text:"Data från statistikkakorna används för att utveckla webbplatsen.",expandAriaLabel:"Visa information om statistikkakor",checkboxAriaDescription:"Data från statistikkakorna används för att utveckla webbplatsen."},en:{title:"Statistics",text:"The information collected by statistics cookies is used to develop the website.",expandAriaLabel:"Show cookie information related to statistics",checkboxAriaDescription:"The information collected by statistics cookies is used to develop the website."}},sharedConsents:{fi:{title:"Yhteiset evästeet",text:"Helsingin kaupungin palvelut käyttävät yhteisiä evästeitä. Tallennamme nämä suostumukset, jottei sinun tarvitse hyväksyä samoja evästeitä uudelleen kaupungin muissa palveluissa.",expandAriaLabel:"Näytä yhteisiin evästesuostumuksiin liittyvien evästeiden tiedot",checkboxAriaDescription:"Helsingin kaupungin palvelut käyttävät yhteisiä evästeitä. Tallennamme nämä suostumukset, jottei sinun tarvitse hyväksyä samoja evästeitä uudelleen muissa kaupungin palveluissa."},sv:{title:"Gemensamma kakor",text:"Helsingfors stads tjänster använder gemensamma kakor . Vi lagrar dessa samtycken så att du inte behöver godkänna samma kakor igen i stadens andra tjänster.",expandAriaLabel:"Visa information om kakor för gemensamt samtycke",checkboxAriaDescription:"Helsingfors stads tjänster använder gemensamma kakor . Vi lagrar dessa samtycken så att du inte behöver godkänna samma kakor igen i stadens andra tjänster."},en:{title:"Shared consent",text:"City of Helsinki services use shared consent. We will store these consents so that you do not have to accept the same cookies again on other City services.",expandAriaLabel:"Show cookie information related to shared cookie consent",checkboxAriaDescription:"City of Helsinki services use shared consent. We will store these consents so that you do not have to accept the same cookies again on other City services."}},language:{fi:{title:"Kielivalinnat",text:"Kielievästeisiin tallennetaan käyttäjän tekemät kielivalinnat, jotta valittu kieli säilyisi.",expandAriaLabel:"Näytä kielievästeisiin liittyvien evästeiden tiedot",checkboxAriaDescription:"Kielievästeisiin tallennetaan käyttäjän tekemät kielivalinnat, jotta valittu kieli säilyisi."},sv:{title:"Språkval",text:"I språkkakorna lagras användarens språkval för att minnas vilket språk som har valts.",expandAriaLabel:"Visa information om kakor för språkvalkakor",checkboxAriaDescription:"I språkkakorna lagras användarens språkval för att minnas vilket språk som har valts."},en:{title:"Language settings",text:"Language cookies store the language selections by the user to remember the preferred language.",expandAriaLabel:"Show cookie information related to language settings",checkboxAriaDescription:"Language cookies store the language selections by the user to remember the preferred language."}},tunnistamoLogin:Object.assign(Object.assign({},o),{cookies:[{commonCookie:"keycloak"},{commonCookie:"keycloak-legacy"},{commonCookie:"keycloak-generic"},{commonCookie:"tunnistamo"},{commonCookie:"tunnistamo-sessionid"},{commonCookie:"suomifi-session"},{commonCookie:"suomifi-saml"},{commonCookie:"suomifi-shibstate"},{commonCookie:"suomifi-shibsession"},{commonCookie:"suomifi-shib-idp-session"},{commonCookie:"suomifi-logtag"}]})},commonCookies:{helConsentCookie:{id:"SET_IN_CODE",hostName:"*.hel.fi",commonGroup:"SET_IN_CODE",fi:{name:"Evästesuostumukset",description:"Sivusto käyttää tätä evästettä tietojen tallentamiseen siitä, ovatko kävijät antaneet hyväksyntänsä tai kieltäytyneet evästeiden käytöstä.",expiration:"1 vuosi"},sv:{name:"Samtycken till kakor",description:"Webbplatsen använder denna kaka för att lagra information om huruvida besökare har godkänt användningen av kakor eller inte.",expiration:"Ett år"},en:{name:"Cookie consents",description:"Used by hel.fi to store information about whether visitors have given or declined the use of cookie categories used on the hel.fi site.",expiration:"1 year"}},cookiehub:{id:"cookiehub",hostName:"cookiehub.com",name:"cookiehub",fi:{description:"Mahdollistaa evästehallinnan hel.fi sivuilla.",expiration:"365 päivää"},sv:{description:"Möjliggör hantering av kakor på hel.fi webbplatsen.",expiration:"365 dagar"},en:{description:"Used by CookieHub to store information about whether visitors have given or declined the use of cookie categories used on the hel.fi site.",expiration:"365 days"}},keycloak:Object.assign({id:"keycloak",hostName:c,name:"AUTH_SESSION_ID"},t),matomo:{id:"matomo",hostName:"*.hel.fi",name:"_pk_id.*",fi:{description:r,expiration:"393 päivää"},sv:{description:l,expiration:"393 dagar"},en:{description:a,expiration:"393 days"}},matomoSession:{id:"matomo-session",hostName:"*.hel.fi",name:"_pk_ses*",fi:{description:r,expiration:"30 minuuttia"},sv:{description:l,expiration:"30 minuter"},en:{description:a,expiration:"30 minutes"}},matomoConsent:{id:"matomo-cookie-consent",hostName:"*.hel.fi",name:"mtm_.*",fi:{description:"Evästeeseen tallennetaan suostumus tilastointievästeisiin.",expiration:"400 päivää"},sv:{description:"Kakan lagrar samtycke för användning av statistikkakorna.",expiration:"400 dagar"},en:{description:"Cookie stores consent for using analytics cookies.",expiration:"400 days"}},"cms-session":{id:"cms-session",hostName:"hel.fi",name:"SSESS*",fi:{description:"Sisällönhallintajärjestelmän toimintaan liittyvä eväste.",expiration:"23 päivää"},sv:{description:"En kaka för driften av innehållshanteringssystemet.",expiration:"23 dagar"},en:{description:"A cookie related to the operation of the content management system.",expiration:"23 days"}},tunnistamo:Object.assign({id:"tunnistamo",hostName:i,name:"sso-sessionid"},t),"suomifi-session":Object.assign({id:"suomifi-session",hostName:s,name:"JSESSIONID"},t),"suomifi-logtag":Object.assign({id:"suomifi-logtag",hostName:s,name:"E-Identification-LogTag"},t),"suomifi-saml":Object.assign({id:"suomifi-saml",hostName:s,name:"_opensaml_req_cookie*"},t),"suomifi-shibstate":Object.assign({id:"suomifi-shibstate",hostName:s,name:"_shibstate_*"},t),"suomifi-shibsession":Object.assign({id:"suomifi-shibsession",hostName:s,name:"_shibsession_*"},t),"suomifi-shib-idp-session":Object.assign({id:"suomifi-shib-idp-session",hostName:s,name:"shib_idp_session"},t),"tunnistamo-sessionid":Object.assign({id:"tunnistamo-sessionid",hostName:i,name:"tunnistamo_prod-sessionid"},t),"keycloak-legacy":Object.assign({id:"keycloak-legacy",hostName:c,name:"AUTH_SESSION_ID_LEGACY"},t),"keycloak-generic":Object.assign({id:"keycloak-generic",hostName:c,name:"KC_*"},t),"tunnistamo-csrftoken":Object.assign({id:"tunnistamo-csrftoken",hostName:i,name:"tunnistamo_prod-csrftoken"},n),"profiili-csrftoken":Object.assign({id:"profiili-csrftoken",hostName:i,name:"profiili-prod-csrftoken"},n),"tunnistamo-login-loadbalancer":Object.assign({id:"tunnistamo-login-loadbalancer",hostName:i+", "+c},{fi:{name:"Satunnainen 32 merkin pituinen merkkijono",description:"Verkkoliikenteen tekninen reititys.",expiration:"Istunto"},sv:{name:"En slumpmässig teckensträng med 32 tecken",description:"Teknisk routning av webbtrafiken.",expiration:"Session"},en:{name:"A random 32-character long string",description:"Technical routing of requests.",expiration:"Session"}}),"keycloak-language":Object.assign({id:"keycloak-language",name:"KEYCLOAK_LOCALE",hostName:c},e),"suomifi-language":Object.assign({id:"suomifi-language",name:"E-Identification-Lang",hostName:s},e)}}}();function un(e,t){const{texts:n}=sn,o={sections:{main:Object.assign({},n.sections.main[e]),details:Object.assign({},n.sections.details[e])},ui:Object.assign({},n.ui[e]),tableHeadings:Object.assign({},n.tableHeadings[e])};return o.sections.main.title=o.sections.main.title.replace("{{siteName}}",t),o}function dn(e,t){const{language:n}=sn;return Object.assign(Object.assign(Object.assign({},n),{current:e,onLanguageChange:()=>{}}),t)}function mn(e){const{commonGroups:t}=sn;if(!t[e])throw new Error("Unknown common consent group "+e);return t[e]}function pn(e,t){const{commonCookies:n}=sn;if(!n[t])throw new Error("Unknown common cookie "+t);const o=n[t];return Object.assign({id:o.id,hostName:o.hostName,name:o.name},n[t][e])}function hn(e,t,n){n.forEach((n=>{const o=cn(t,n);if(o){const t=cn(e,n);!function(e,t,n){if(t.includes("_"))throw new Error('String "_" is not allowed in the path to avoid prototype pollution');const o=t.split("."),r=o.pop(),l=o.reduce(((e,t)=>(void 0===e[t]&&(e[t]=Object.create(null)),e[t])),e);r&&(l[r]=n)}(e,n,"string"==typeof o?o||t:Object.assign(Object.assign({},t),o))}}))}function fn(e){var t,n,o,r;const l=[],a=[],s=new Map,{currentLanguage:u,noCommonConsentCookie:d}=e;let m=!1;const p=(e,t)=>{let n;const o=e.commonGroup||e.id||e.title;if(n=s.get(o),!n){if(e.commonGroup){["title","text","expandAriaLabel","checkboxAriaDescription"].forEach((t=>{if(e[t])throw new Error("Common group texts cannot be overridden.")}));const t=(r=u,mn(e.commonGroup)[r]);n=Object.assign(Object.assign({},t),{cookies:[]})}else n={title:e.title,text:e.text,expandAriaLabel:e.expandAriaLabel,checkboxAriaDescription:e.checkboxAriaDescription,cookies:[]};s.set(o,n),t?l.push(n):a.push(n)}var r;const d=function(e){return[].concat((0,i.Z)(e.commonGroup&&mn(e.commonGroup).cookies||[]),(0,i.Z)(e.cookies||[]))}(e);d.length&&d.forEach((e=>{const t=e,{commonGroup:o,groupId:r,commonCookie:l}=t,a=(0,c._)(t,["commonGroup","groupId","commonCookie"]);l&&["id","name","hostName","description","expiration"].forEach((e=>{if(a[e])throw new Error("Common cookie properties cannot be overridden.")}));const i=l?pn(u,l):a;n.cookies.push(i)}))},h=(e,t)=>{const{commonGroup:n,groupId:o}=e;if(!n&&!o)throw new Error("Cannot add single cookie without a group");p({commonGroup:n,id:o,cookies:[e]},t)};if((null===(t=e.requiredCookies)||void 0===t?void 0:t.groups)&&e.requiredCookies.groups.forEach((e=>{p(e,!0)})),(null===(n=e.optionalCookies)||void 0===n?void 0:n.groups)&&e.optionalCookies.groups.forEach((e=>{p(e,!1)})),(null===(o=e.requiredCookies)||void 0===o?void 0:o.cookies)&&e.requiredCookies.cookies.forEach((e=>{h(e,!0),e.id===pt&&(m=!0)})),(null===(r=e.optionalCookies)||void 0===r?void 0:r.cookies)&&e.optionalCookies.cookies.forEach((e=>{h(e,!1),e.id===pt&&(m=!0)})),!d&&!m){const e=pn(u,"helConsentCookie");e.id=pt,p({commonGroup:"sharedConsents",cookies:[e]},!0)}return{requiredCookies:l,optionalCookies:a}}function _n(e,t,n){if(!(t||n&&n.length))return;const o=Object.assign({},e);return t&&hn(o,t,["title","text","checkboxAriaDescription"]),n&&(o.groups=n),o}const gn=(0,a.createContext)(Object.assign(Object.assign({},{language:{},texts:{}}),{callbacks:{}})),bn=e=>{const t=document.querySelector(e);t&&t.focus&&(t.focus(),document.activeElement!==t&&(t.setAttribute("tabindex","-1"),t.focus()))},vn=e=>{let{children:t,contentSource:n}=e;const o=n.currentLanguage,r=(0,a.useMemo)((()=>{const e=function(e){const{siteName:t,language:n,currentLanguage:o,optionalCookies:r,requiredCookies:l,focusTargetSelector:a}=e,i={texts:un(o,t),language:dn(o,n),focusTargetSelector:a};e.texts&&hn(i.texts,e.texts,["sections.main","sections.details","ui","tableHeadings"]);const c=fn(e),s=function(e){const{requiredCookies:t,optionalCookies:n}=sn;return{requiredCookies:t[e],optionalCookies:n[e]}}(o);return i.optionalCookies=_n(s.optionalCookies,r,c.optionalCookies),i.requiredCookies=_n(s.requiredCookies,l,c.requiredCookies),i}(n),t={onAllConsentsGiven:n.onAllConsentsGiven,onConsentsParsed:n.onConsentsParsed};return Object.assign(Object.assign({},e),{callbacks:t})}),[o]);return a.createElement(gn.Provider,{value:r},t)},En=()=>(0,a.useContext)(gn),kn=()=>En().texts.ui,yn=e=>En().texts.sections[e],xn=()=>En().texts.tableHeadings,wn=()=>En().language,Cn=(0,a.createContext)({hasUserHandledAllConsents:()=>!1,onAction:()=>{},getApprovalPercentageForOptional:()=>0,areGroupConsentsApproved:()=>!1}),In=e=>e.reduce(((e,t)=>(t.cookies.forEach((t=>{e.push(t.id)})),e)),[]),Sn=e=>{let{cookieDomain:t,children:n}=e;const o=En(),r=(0,a.useMemo)((()=>({requiredCookies:o.requiredCookies,optionalCookies:o.optionalCookies})),[]),l=r.requiredCookies?In(r.requiredCookies.groups):void 0,i=r.optionalCookies?In(r.optionalCookies.groups):void 0,c=(0,a.useMemo)((()=>bt({requiredConsents:l,optionalConsents:i,cookieDomain:t})),[]),[,s]=(0,a.useState)(0),u=(0,a.useCallback)((()=>{s((e=>e+1))}),[s]),d=(0,a.useMemo)((()=>{const e=()=>0===c.getRequiredWithoutConsent().length&&0===c.getUnhandledConsents().length,t=()=>Object.assign(Object.assign({},c.getRequired()),c.getOptional()),n=()=>{o.callbacks.onAllConsentsGiven&&e()&&o.callbacks.onAllConsentsGiven(t()),o.focusTargetSelector&&bn(o.focusTargetSelector)},r=e=>{Object.keys(c.getOptional()).forEach((t=>{c.update(t,e)}))},l=()=>{r(!1)};return{setOptional:r,areGroupConsentsApproved:e=>{const t=c.getOptional();return!e.reduce(((e,n)=>e||!0!==t[n.id]),!1)},getApprovalPercentageForOptional:()=>{let e=0,t=0;return Object.values(c.getOptional()).forEach((n=>{e+=1,n&&(t+=1)})),t/e},onAction:(e,t,o)=>{"approveAll"===e?(c.approveAll(),c.save(),n()):"approveRequired"===e?(l(),c.approveRequired(),c.save(),n()):"approveSelectedAndRequired"===e?(c.approveRequired(),c.save(),n()):"changeCookieGroupConsents"===e&&t?t.forEach((e=>{c.update(e,!!o)})):"approveOptional"===e?r(!0):"unapproveOptional"===e&&l(),u()},hasUserHandledAllConsents:e,mergeConsents:t}}),[c,u]),m={hasUserHandledAllConsents:d.hasUserHandledAllConsents,onAction:d.onAction,getApprovalPercentageForOptional:d.getApprovalPercentageForOptional,areGroupConsentsApproved:d.areGroupConsentsApproved};return o.callbacks.onConsentsParsed&&(o.callbacks.onConsentsParsed(d.mergeConsents(),d.hasUserHandledAllConsents()),o.callbacks.onConsentsParsed=void 0),a.createElement(Cn.Provider,{value:m},n)},Ln=()=>(0,a.useContext)(Cn),An=()=>(0,a.useContext)(Cn).onAction,zn=()=>{const{focusTargetSelector:e}=En();if(!e)throw new Error("Cookie consent modal requires a content.focusTargetSelector to be set");return(0,a.useCallback)((()=>{bn(e)}),[e])};function Dn(){const e=Ln(),t=En();return!(!t.optionalCookies||0===t.optionalCookies.groups.length||e.hasUserHandledAllConsents())}function jn(e){let{rootId:t,children:n}=e;const o=Dn(),r=(0,a.useRef)(null),l=(0,a.useRef)(!1),[i,c]=(0,a.useState)(!1),s=(0,a.useCallback)((()=>r.current||document.getElementById(t)),[t,r]),u=(0,a.useCallback)((()=>{const e=s();return e?e.childNodes.length:0}),[s]),d=(0,a.useCallback)((()=>{const e=r.current||document.getElementById(t);r.current=null,e&&!u()&&e.remove()}),[t,u]);return(0,a.useEffect)((()=>{if(!o)return d(),()=>{};let e=document.getElementById(t);return e||(e=document.createElement("div"),e.setAttribute("id",t),e.setAttribute("data-testid","html-cookie-consent-container"),document.body.insertBefore(e,document.body.firstChild)),r.current=e,c(!0),()=>{d()}}),[t,o,c,d]),"undefined"==typeof document?null:0!==u()||o&&i?u()>0&&!l.current?null:r.current?(l.current=!0,(0,Ce.createPortal)(a.createElement(a.Fragment,null,n),r.current)):null:null}var Tn={accordionButton:"CookieConsent-module_accordionButton__3R8Nn",container:"CookieConsent-module_container__1b4Lz",aligner:"CookieConsent-module_aligner__31kOx",animateIn:"CookieConsent-module_animateIn__3XGst",page:"CookieConsent-module_page__1BCN2",buttons:"CookieConsent-module_buttons__4uWoN",emulatedH1:"CookieConsent-module_emulatedH1__11RtZ helpers_heading-l__2_FMY",emulatedH2:"CookieConsent-module_emulatedH2__3BlmG helpers_heading-m__9vrUW",content:"CookieConsent-module_content__3QPI4",languageSwitcher:"CookieConsent-module_languageSwitcher__3yGdW",languageDropdown:"CookieConsent-module_languageDropdown__1aINI",mainContent:"CookieConsent-module_mainContent__35KR_",textContent:"CookieConsent-module_textContent__1H03u",list:"CookieConsent-module_list__145_H",detailsAccordionButton:"CookieConsent-module_detailsAccordionButton__1IpgB",accordionButtonSettingsClosed:"CookieConsent-module_accordionButtonSettingsClosed__hjrTJ",consentCategory:"CookieConsent-module_consentCategory__iJprz",consentGroup:"CookieConsent-module_consentGroup__2i8Av",consentGroupContent:"CookieConsent-module_consentGroupContent__1x4Uq",titleWithCheckbox:"CookieConsent-module_titleWithCheckbox__1QVs0",dataTableContainer:"CookieConsent-module_dataTableContainer__1cErs",saveNotification:"CookieConsent-module_saveNotification__GROzc",readMoreButton:"CookieConsent-module_readMoreButton__IPfMG",shrinkOnBlur:"CookieConsent-module_shrinkOnBlur__2FwjP",visuallyHiddenWithoutFocus:"CookieConsent-module_visuallyHiddenWithoutFocus__3M4c4",hiddenWithoutFocus:"CookieConsent-module_hiddenWithoutFocus__3CScq"};function Nn(e){let{detailsAreShown:t,onClick:n=(()=>{}),triggerAction:o}=e;const{approveRequiredAndSelectedConsents:r,approveOnlyRequiredConsents:l,approveAllConsents:i}=kn(),c=t?r:i,s=t?"approveSelectedAndRequired":"approveAll";return a.createElement("div",{className:(0,Se.c)(Tn.buttons,t?"":Tn.visuallyHiddenWithoutFocus)},a.createElement(be.B,{variant:"secondary",onClick:()=>{o(s),n()},"data-testid":"cookie-consent-approve-button"},c),a.createElement(be.B,{variant:"secondary",onClick:()=>{o("approveRequired"),n()},"data-testid":"cookie-consent-approve-required-button"},l))}(0,ke.s)('.helpers_visually-hidden__2Qwo3{border:0;clip:"rect(0 0 0 0)";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.helpers_button-reset__3CUTO{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.helpers_text-body__32LvA{color:var(--color-black-90);font-family:var(--font-default);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.helpers_text-medium__1FL3H{font-family:var(--font-default);font-weight:500}.helpers_text-bold__27qeO{font-family:var(--font-default);font-weight:700}.helpers_text-xl__1SsX7{font-size:var(--fontsize-heading-m)}.helpers_text-lg__3G-IT{font-size:var(--fontsize-heading-s)}.helpers_text-md__mZGnz{font-size:var(--fontsize-heading-xs)}.helpers_subtitle__3l42Z{font-size:var(--fontsize-body-m)}.helpers_text-sm__3RQnh{font-size:var(--fontsize-body-s);line-height:var(--lineheight-xl)}.helpers_heading-xxl___0erl{font-size:var(--fontsize-heading-xxl);font-weight:400;letter-spacing:-1.2px;line-height:var(--lineheight-s)}.helpers_heading-xl__qqgBd{font-size:var(--fontsize-heading-xl);font-weight:400;letter-spacing:-1px;line-height:var(--lineheight-s)}.helpers_heading-xl-mobile__OjRix{font-size:var(--fontsize-heading-xl-mobile);font-weight:400;letter-spacing:-.8px;line-height:var(--lineheight-s)}.helpers_heading-l__2_FMY{font-size:var(--fontsize-heading-l);font-weight:400;letter-spacing:-.4px;line-height:var(--lineheight-s)}.helpers_heading-m__9vrUW{font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-.2px;line-height:32px}.helpers_heading-s__pR_fi{font-size:var(--fontsize-heading-s);font-weight:500;letter-spacing:.2px;line-height:1.4}.helpers_heading-xs__3Gk4X{font-size:var(--fontsize-heading-xs);font-weight:700;letter-spacing:.4px;line-height:1.33}.helpers_heading-xxs__2g2cO{font-size:var(--fontsize-heading-xxs);font-weight:700;letter-spacing:.4px;line-height:var(--lineheight-l)}.helpers_helper-text__17nzy{color:var(--color-black-60);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs)}.CookieConsent-module_accordionButton__3R8Nn{font-family:inherit;font-size:100%;line-height:1.15;margin:0}.CookieConsent-module_container__1b4Lz{--common-spacing:var(--spacing-s);bottom:0;left:0;position:fixed;width:100vw;z-index:999}.CookieConsent-module_aligner__31kOx{background:var(--color-white);border-top:8px solid var(--color-bus);bottom:0;max-height:80vh;overflow-y:auto;position:absolute;width:100%;z-index:2}.CookieConsent-module_container__1b4Lz .CookieConsent-module_aligner__31kOx{transform:translateY(100%);transition:transform 1s}.CookieConsent-module_container__1b4Lz.CookieConsent-module_animateIn__3XGst .CookieConsent-module_aligner__31kOx{transform:translateY(0)}.CookieConsent-module_page__1BCN2{--common-spacing:var(--spacing-s)}.CookieConsent-module_buttons__4uWoN{display:flex;flex-direction:column;width:100%}.CookieConsent-module_buttons__4uWoN>:first-child{margin-right:var(--common-spacing)}.CookieConsent-module_buttons__4uWoN>*{margin:0 0 var(--common-spacing) 0;width:100%}.CookieConsent-module_emulatedH1__11RtZ{display:block;outline:none;padding:0}.CookieConsent-module_emulatedH1__11RtZ:focus{box-shadow:0 0 0 var(--outline-width) var(--focus-outline-color);transform:translateZ(0)}.CookieConsent-module_emulatedH2__3BlmG{display:block;padding:1.2em 0 .5em}.CookieConsent-module_content__3QPI4{--focus-outline-color:var(--color-focus-outline);--outline-width:3px;box-sizing:border-box;margin:0 auto;padding-left:var(--spacing-layout-2-xs);padding-right:var(--spacing-layout-2-xs);padding-top:var(--common-spacing);position:relative;width:100%}.CookieConsent-module_content__3QPI4 .CookieConsent-module_emulatedH1__11RtZ,.CookieConsent-module_content__3QPI4 .CookieConsent-module_emulatedH2__3BlmG,.CookieConsent-module_content__3QPI4 p{max-width:860px}@media (min-width:768px){.CookieConsent-module_content__3QPI4{padding-left:var(--spacing-layout-xs);padding-right:var(--spacing-layout-xs)}}@media (min-width:1248px){.CookieConsent-module_content__3QPI4{max-width:var(--container-width-xl);padding-left:0;padding-right:0}}.CookieConsent-module_page__1BCN2 .CookieConsent-module_content__3QPI4{padding-bottom:0;padding-top:0}.CookieConsent-module_languageSwitcher__3yGdW{left:calc(var(--common-spacing) - var(--spacing-3-xs));position:absolute;top:var(--common-spacing)}.CookieConsent-module_languageDropdown__1aINI{position:relative;right:unset}.CookieConsent-module_languageDropdown__1aINI button{padding-top:0}.CookieConsent-module_languageDropdown__1aINI.CookieConsent-module_languageDropdown__1aINI{--menu-button-focus-outline-color:var(--color-coat-of-arms)}.CookieConsent-module_languageDropdown__1aINI.CookieConsent-module_languageDropdown__1aINI>div{left:0;right:unset}@media (max-width:768px){.CookieConsent-module_languageDropdown__1aINI{position:absolute}}.CookieConsent-module_mainContent__35KR_,.CookieConsent-module_textContent__1H03u{padding:0}.CookieConsent-module_textContent__1H03u>p{padding-bottom:var(--spacing-l)}.CookieConsent-module_mainContent__35KR_{padding-top:calc(var(--common-spacing) * 2)}.CookieConsent-module_emulatedH2__3BlmG+p{margin:0}.CookieConsent-module_list__145_H{list-style:none;margin:0;padding-left:0}.CookieConsent-module_accordionButton__3R8Nn{align-items:center;background:transparent;border:none;color:var(--color-bus);color:var(--color-black-90);cursor:pointer;display:flex;outline:none;text-decoration:underline;text-decoration:none}.CookieConsent-module_accordionButton__3R8Nn:focus{box-shadow:0 0 0 var(--outline-width) var(--focus-outline-color);transform:translateZ(0)}.CookieConsent-module_detailsAccordionButton__1IpgB{margin-left:3px;padding:var(--spacing-xs);padding-left:0}.CookieConsent-module_detailsAccordionButton__1IpgB span{padding-left:var(--spacing-3-xs)}.CookieConsent-module_accordionButtonSettingsClosed__hjrTJ{margin-bottom:var(--common-spacing)}.CookieConsent-module_consentCategory__iJprz{display:flex;flex-direction:column;padding-bottom:var(--spacing-l)}.CookieConsent-module_consentCategory__iJprz>p{margin-bottom:0}.CookieConsent-module_consentGroup__2i8Av{border-bottom:1px solid var(--color-black);display:flex;flex-direction:column;margin-left:0;padding:var(--spacing-m) 0;position:relative}.CookieConsent-module_consentGroupContent__1x4Uq{display:flex;flex-direction:column;padding:0}.CookieConsent-module_consentGroupContent__1x4Uq p{margin:0;padding:var(--spacing-m) 0 0}.CookieConsent-module_consentGroupContent__1x4Uq button{outline:none;padding:var(--spacing-3-xs);position:absolute;right:0;top:var(--spacing-m)}.CookieConsent-module_consentGroupContent__1x4Uq button:focus{box-shadow:0 0 0 var(--outline-width) var(--focus-outline-color);transform:translateZ(0)}.CookieConsent-module_titleWithCheckbox__1QVs0{display:flex;margin-right:var(--spacing-2-xl)}.CookieConsent-module_container__1b4Lz .CookieConsent-module_content__3QPI4 .CookieConsent-module_consentCategory__iJprz .CookieConsent-module_titleWithCheckbox__1QVs0 label,.CookieConsent-module_page__1BCN2 .CookieConsent-module_content__3QPI4 .CookieConsent-module_consentCategory__iJprz .CookieConsent-module_titleWithCheckbox__1QVs0 label{color:var(--color-black);font-weight:500}.CookieConsent-module_dataTableContainer__1cErs{border-left:1px solid var(--color-black);border-right:1px solid var(--color-black);margin:var(--spacing-l) 0 var(--spacing-xs)}.CookieConsent-module_dataTableContainer__1cErs table tbody tr>*{min-width:120px;vertical-align:top;width:20%;word-break:break-word}.CookieConsent-module_dataTableContainer__1cErs table tbody tr>:nth-child(3){width:40%}.CookieConsent-module_saveNotification__GROzc{margin-bottom:var(--spacing-xl)}.CookieConsent-module_readMoreButton__IPfMG{display:none}.CookieConsent-module_shrinkOnBlur__2FwjP:not(:focus-within){--common-spacing:var(--spacing-xs);outline:none;padding-bottom:var(--common-spacing);padding-top:var(--common-spacing)}.CookieConsent-module_shrinkOnBlur__2FwjP:not(:focus-within) .CookieConsent-module_visuallyHiddenWithoutFocus__3M4c4{clip-path:inset(0 0 0 0);display:block;height:1px;left:-1000px;line-height:0;opacity:0;overflow:hidden;position:absolute;width:1px}.CookieConsent-module_shrinkOnBlur__2FwjP:not(:focus-within) .CookieConsent-module_hiddenWithoutFocus__3CScq{display:none}.CookieConsent-module_shrinkOnBlur__2FwjP:not(:focus-within) .CookieConsent-module_mainContent__35KR_{align-items:flex-start;display:flex;flex-direction:column;padding-top:0}.CookieConsent-module_shrinkOnBlur__2FwjP:not(:focus-within) .CookieConsent-module_mainContent__35KR_ .CookieConsent-module_emulatedH1__11RtZ{font-size:var(--fontsize-heading-xs);margin-right:0}.CookieConsent-module_shrinkOnBlur__2FwjP:not(:focus-within) .CookieConsent-module_mainContent__35KR_ .CookieConsent-module_readMoreButton__IPfMG{display:flex;padding:var(--common-spacing) 0 0}.CookieConsent-module_shrinkOnBlur__2FwjP:not(:focus-within) .CookieConsent-module_mainContent__35KR_ .CookieConsent-module_readMoreButton__IPfMG span{padding-right:var(--spacing-xs)}@media (min-width:768px){.CookieConsent-module_shrinkOnBlur__2FwjP:not(:focus-within){--common-spacing:var(--spacing-l)}.CookieConsent-module_shrinkOnBlur__2FwjP:not(:focus-within) .CookieConsent-module_mainContent__35KR_{align-items:center;flex-direction:row;justify-content:space-between}.CookieConsent-module_shrinkOnBlur__2FwjP:not(:focus-within) .CookieConsent-module_mainContent__35KR_ .CookieConsent-module_emulatedH1__11RtZ{font-size:var(--fontsize-heading-s)}.CookieConsent-module_shrinkOnBlur__2FwjP:not(:focus-within) .CookieConsent-module_mainContent__35KR_ .CookieConsent-module_readMoreButton__IPfMG{line-height:var(--fontsize-heading-s);padding:0 var(--spacing-xs)}}@media (min-width:768px){.CookieConsent-module_container__1b4Lz,.CookieConsent-module_page__1BCN2{--common-spacing:var(--spacing-l)}.CookieConsent-module_languageSwitcher__3yGdW{left:unset;padding-top:15px;right:var(--common-spacing);top:calc(var(--common-spacing) + 4px)}.CookieConsent-module_mainContent__35KR_{padding-top:0}.CookieConsent-module_textContent__1H03u>p{padding-bottom:var(--spacing-2-xl)}.CookieConsent-module_content__3QPI4 .CookieConsent-module_emulatedH1__11RtZ{margin-right:200px}.CookieConsent-module_consentCategory__iJprz{padding-bottom:var(--spacing-2-xl)}.CookieConsent-module_consentGroup__2i8Av{margin-left:var(--spacing-s);padding:var(--spacing-l) 0}.CookieConsent-module_consentGroupContent__1x4Uq p{padding:var(--spacing-l) 0 0}.CookieConsent-module_buttons__4uWoN{flex-direction:row}.CookieConsent-module_buttons__4uWoN>*{width:auto}}');const On=a.memo(Nn);function Bn(e){const t=xn(),{consents:n,id:o}=e,r=(0,a.useMemo)((()=>Object.entries(t).map((e=>{const[t,n]=e;return{key:t,headerName:n}}))),[t]),l=(0,a.useMemo)((()=>n.map((e=>e))),[n]);return a.createElement("div",{className:(0,Se.c)(Tn.dataTableContainer)},a.createElement(Oe.T,{id:o,"data-testid":o,cols:r,rows:l,indexKey:"id",renderIndexCol:!1,theme:{"--header-background-color":"var(--color-black-90)"},dense:!0}))}function Mn(e){const{group:t,isRequired:n,id:o}=e,{isOpen:r,buttonProps:l,contentProps:i}=(0,ge.u)({initiallyOpen:!1}),c=t.cookies,s=Ln(),u=An(),d=n||s.areGroupConsentsApproved(c),{title:m,text:p,checkboxAriaDescription:h,expandAriaLabel:f}=t,_=r?Y.I:Z.I,g=e=>o+"-"+e,b=g("checkbox"),v=g("description"),E={onChange:n?()=>{}:()=>u("changeCookieGroupConsents",c.map((e=>e.id)),!d),disabled:n,checked:d,id:b,"data-testid":b,name:b,label:m,"aria-describedby":v,style:{"--label-font-size":"var(--fontsize-heading-s)"}};return a.createElement("div",{className:Tn.consentGroup},a.createElement("div",{className:Tn.titleWithCheckbox},a.createElement(Ee.C,Object.assign({},E))),a.createElement("div",{className:Tn.consentGroupContent},a.createElement("p",{"aria-hidden":!0},p),a.createElement(Ie.T,{id:v},h||p),a.createElement("button",Object.assign({type:"button",className:Tn.accordionButton,"data-testid":g("details-toggler"),"aria-label":f},l),a.createElement(_,{"aria-hidden":!0})),a.createElement(ve.C,Object.assign({},i,{"aria-label":m,theme:{"--padding-horizontal":"0","--padding-vertical":"0"}}),a.createElement(Bn,{consents:c,id:g("table")}))))}function Hn(e){const{category:t,isRequired:n,triggerAction:o,selectPercentage:r=-1}=e;if(!t)return null;const l=n||1===r,{title:i,text:c,groups:s,checkboxAriaDescription:u}=t,d=n||l,m=n?"required":"optional",p=e=>m+"-consents-"+e,h=p("checkbox"),f=p("description"),_={onChange:o?()=>o(d?"unapproveOptional":"approveOptional"):()=>{},disabled:n,checked:d,indeterminate:!n&&!Number.isInteger(r),id:h,"data-testid":h,name:h,label:i,"aria-describedby":f,style:{"--label-font-size":"var(--fontsize-heading-m)"}};return a.createElement("div",{className:Tn.consentCategory},a.createElement("div",{className:Tn.titleWithCheckbox},a.createElement(Ee.C,Object.assign({},_))),a.createElement("p",{"aria-hidden":!0},c),a.createElement(Ie.T,{id:f},u||c),a.createElement("ul",{className:Tn.list},s.map(((e,t)=>a.createElement("li",{key:e.title},a.createElement(Mn,{group:e,isRequired:n,id:p("group-"+t)}))))))}const Rn=a.memo(Hn);function Pn(){const e=En(),t=Ln(),n=An(),o=t.getApprovalPercentageForOptional(),{title:r,text:l}=yn("details"),{requiredCookies:i,optionalCookies:c}=e;return a.createElement("div",{className:Tn.textContent,"data-testid":"cookie-consent-details"},a.createElement("span",{className:Tn.emulatedH2,role:"heading","aria-level":2},r),a.createElement("p",null,l),a.createElement(Rn,{category:i,isRequired:!0}),a.createElement(Rn,{category:c,triggerAction:n,selectPercentage:o}))}(0,ke.s)(".MenuButton-module_toggleButton__3WH1a{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.MenuButton-module_menuButton__3T9k9{--menu-border-width:1px;--menu-max-width:20rem;--menu-top-margin:0;--menu-item-min-height:var(--spacing-xl);--menu-button-focus-outline-color:var(--color-coat-of-arms);--menu-border-color:var(--color-black-90);--menu-item-background-color:var(--color-white);--menu-item-background-color-highlighted:var(--color-bus);--menu-item-color:var(--color-black-90);--menu-item-color-highlighted:var(--color-white);border-radius:0;position:relative}.MenuButton-module_menuButton__3T9k9:focus-within{box-shadow:0 0 0 3px var(--menu-button-focus-outline-color)}.MenuButton-module_toggleButton__3WH1a{align-items:center;display:flex;line-height:var(--lineheight-s);outline:none;padding:var(--spacing-3-xs) 0}.MenuButton-module_toggleButton__3WH1a>*{pointer-events:none}.MenuButton-module_toggleButtonLabel__3NiHR{margin:0 var(--spacing-3-xs)}@media only screen and (min-width:1248px){.MenuButton-module_toggleButtonLabel__3NiHR{margin:0 var(--spacing-2-xs)}}");(0,ke.s)(".Menu-module_menu__FuqT0:not(.Menu-module_open__RthSi){display:none}.Menu-module_menu__FuqT0.Menu-module_open__RthSi{background-color:var(--menu-item-background-color);border:var(--menu-border-width) solid var(--menu-border-color);left:0;margin:var(--menu-top-margin) 0 0;max-width:var(--menu-max-width);padding:var(--spacing-3-xs) 0;position:absolute;width:max-content}.Menu-module_item__3yQdE{align-items:center;box-sizing:border-box;color:var(--menu-item-color);display:flex;flex:1;line-height:var(--lineheight-m);min-height:var(--menu-item-min-height);outline:none;padding:var(--spacing-2-xs) var(--spacing-s);text-decoration:none}.Menu-module_item__3yQdE:focus,.Menu-module_item__3yQdE:hover{background-color:var(--menu-item-background-color-highlighted);color:var(--menu-item-color-highlighted)}");const Fn=e=>{var{children:t,menuContainerSize:n,menuOffset:o=0,menuOpen:r,onItemClick:l}=e,i=(0,c._)(e,["children","menuContainerSize","menuOffset","menuOpen","onItemClick"]);const s=(0,a.useRef)(null),[u,d]=(0,a.useState)({});return(0,a.useEffect)((()=>{const{height:e=0,width:t=0}=n;d({top:e+o,minWidth:190>=t?190:t})}),[n,o]),a.createElement("div",Object.assign({ref:s,role:"region",className:(0,Se.c)("Menu-module_menu__FuqT0",r&&"Menu-module_open__RthSi"),style:u},i),a.Children.toArray(t).map((e=>(0,a.isValidElement)(e)?(0,a.cloneElement)(e,{className:"Menu-module_item__3yQdE "+(e.props.className||""),onClick:t=>{"function"==typeof e.props.onClick&&e.props.onClick(t),"function"==typeof l&&l(t)}}):e)))},Un=e=>{let{buttonAriaLabel:t,buttonAriaLabelledby:n,children:o,className:r,closeOnItemClick:l=!1,icon:i,id:c,label:s,menuOffset:u,hoverAndClick:d=!1}=e;const[m,p]=(0,De.Z)({debounce:0,scroll:!1,polyfill:je.d}),[h,f]=(0,a.useState)(!1),_=(0,a.useRef)(null),g=(0,a.useRef)(c||Ae()("hds-menu-button-")).current,b=g+"-button",v=g+"-menu",E=(0,Te.u)();(0,a.useEffect)((()=>{const e=e=>{_.current&&h&&!_.current.contains(e.target)&&f(!1)};return document.addEventListener("click",e),()=>document.removeEventListener("click",e)}),[h]);const[k,y]=(0,a.useState)(!E&&d),x={onMouseOver:()=>f(!0),onMouseLeave:()=>f(!1)};return(0,a.useEffect)((()=>y(!E&&d)),[E]),a.createElement("div",Object.assign({ref:(0,ze.Z)([m,_]),className:(0,Se.c)("MenuButton-module_menuButton__3T9k9",r)},k&&x),d&&s,a.createElement("button",{type:"button",id:b,className:"MenuButton-module_toggleButton__3WH1a","aria-label":!n&&t,"aria-labelledby":n,"aria-haspopup":"true","aria-controls":v,"aria-expanded":h,onClick:()=>f(!h)},i,!d&&a.createElement("span",{className:"MenuButton-module_toggleButtonLabel__3NiHR"},s),h?a.createElement(Y.I,{"aria-hidden":!0}):a.createElement(Z.I,{"aria-hidden":!0})),a.createElement(Fn,{id:v,"aria-labelledby":null!=n?n:b,menuContainerSize:p,menuOffset:u,menuOpen:h,onItemClick:l?()=>f(!1):void 0},o))};var Wn={"x-small-down":"only screen and (max-width:575.98px)","small-down":"only screen and (max-width:767.98px)","small-only":"only screen and (min-width:576px) and (max-width:767.98px)","medium-only":"only screen and (min-width:768px) and (max-width:991.98px)","medium-up":"only screen and (min-width:768px)","large-only":"only screen and (min-width:992px) and (max-width:1247.98px)","large-up":"only screen and (min-width:992px)","x-large-only":"only screen and (min-width:1248px)","x-large-up":"only screen and (min-width:1248px)",rowItem:"LanguageSwitcherItem-module_rowItem__2z76T",supplementary:"LanguageSwitcherItem-module_supplementary__2nEPW button_hds-button__2ZUJx button_hds-button--fullwidth__1Or7k button_hds-button--small__1Xo7e button_hds-button--supplementary__6Yi7z",secondary:"LanguageSwitcherItem-module_secondary__EQOcO button_hds-button__2ZUJx button_hds-button--fullwidth__1Or7k button_hds-button--small__1Xo7e button_hds-button--secondary__20_I8",primary:"LanguageSwitcherItem-module_primary__1KCFc button_hds-button__2ZUJx button_hds-button--fullwidth__1Or7k button_hds-button--small__1Xo7e button_hds-button--primary__3n7lE",item:"LanguageSwitcherItem-module_item__2V_Ne button_hds-button__2ZUJx button_hds-button--fullwidth__1Or7k button_hds-button--small__1Xo7e",label:"LanguageSwitcherItem-module_label__3Gub1 button_hds-button__label__Qw_Jx",icon:"LanguageSwitcherItem-module_icon__3aKRE button_hds-icon__KLp4r",dropdownItem:"LanguageSwitcherItem-module_dropdownItem__eHUR9",dropdownLinkItem:"LanguageSwitcherItem-module_dropdownLinkItem__snkbq",active:"LanguageSwitcherItem-module_active__fJ-im"};(0,ke.s)('.button_hds-button__2ZUJx{--border-width:2px;--color:inherit;--min-size:44px;--outline-gutter:2px;--outline-width:3px;align-content:flex-start;align-items:center;-webkit-appearance:button;background-color:var(--background-color,transparent);border:var(--border-width) solid var(--border-color,transparent);border-radius:0;color:var(--color);cursor:pointer;display:inline-flex;font-family:inherit;font-size:100%;font-weight:500;justify-content:center;line-height:1.15;margin:0;min-height:var(--min-size);min-width:var(--min-size);padding:0 var(--spacing-2-xs);position:relative;text-decoration:none;text-transform:none;vertical-align:top}.button_hds-button__2ZUJx,.button_hds-button__2ZUJx *,.button_hds-button__2ZUJx:after,.button_hds-button__2ZUJx :after,.button_hds-button__2ZUJx:before,.button_hds-button__2ZUJx :before{box-sizing:border-box}.button_hds-button__2ZUJx[type=button],.button_hds-button__2ZUJx[type=reset],.button_hds-button__2ZUJx[type=submit]{-webkit-appearance:button}.button_hds-button__2ZUJx::-moz-focus-inner,.button_hds-button__2ZUJx[type=button]::-moz-focus-inner,.button_hds-button__2ZUJx[type=reset]::-moz-focus-inner,.button_hds-button__2ZUJx[type=submit]::-moz-focus-inner{border-style:none;padding:0}.button_hds-button__2ZUJx:-moz-focusring,.button_hds-button__2ZUJx[type=button]:-moz-focusring,.button_hds-button__2ZUJx[type=reset]:-moz-focusring,.button_hds-button__2ZUJx[type=submit]:-moz-focusring{outline:1px dotted ButtonText}.button_hds-button__2ZUJx.button_focus-visible__2Up1m,.button_hds-button__2ZUJx:focus-visible,.button_hds-button__2ZUJx:hover{transition-duration:85ms;transition-property:background-color,border-color,color;transition-timing-function:ease-out}.button_hds-button__2ZUJx:hover{background-color:var(--background-color-hover,transparent);color:var(--color-hover)}.button_hds-button__2ZUJx.button_focus-visible__2Up1m,.button_hds-button__2ZUJx:active,.button_hds-button__2ZUJx:focus-visible{background-color:var(--background-color-focus,transparent);color:var(--color-focus);outline:none}.button_hds-button__2ZUJx:not(:disabled){border-color:var(--border-color,transparent)}.button_hds-button__2ZUJx:disabled{background-color:var(--background-color-disabled,transparent);border-color:var(--border-color-disabled,transparent);color:var(--color-disabled);cursor:not-allowed}.button_hds-button__2ZUJx.button_focus-visible__2Up1m:hover,.button_hds-button__2ZUJx:active:hover,.button_hds-button__2ZUJx:focus-visible:hover{background-color:var(--background-color-hover-focus,transparent)}.button_hds-button__2ZUJx:not(:disabled):hover{border-color:var(--border-color-hover,transparent)}.button_hds-button__2ZUJx:not(:disabled).button_focus-visible__2Up1m,.button_hds-button__2ZUJx:not(:disabled):active,.button_hds-button__2ZUJx:not(:disabled):focus-visible{border-color:var(--border-color-focus,transparent)}.button_hds-button__2ZUJx:not(:disabled).button_focus-visible__2Up1m:hover,.button_hds-button__2ZUJx:not(:disabled):active:hover,.button_hds-button__2ZUJx:not(:disabled):focus-visible:hover{border-color:var(--border-color-hover-focus,transparent);color:var(--color-hover-focus)}.button_hds-button__2ZUJx:after{--size:100%;border:var(--outline-width) solid transparent;content:"";height:var(--size);position:absolute;width:var(--size)}.button_hds-button__2ZUJx.button_focus-visible__2Up1m:after,.button_hds-button__2ZUJx:active:after,.button_hds-button__2ZUJx:focus-visible:after{--size:calc(100% + calc(var(--outline-width) * 2 + var(--border-width) * 2 + var(--outline-gutter) * 2));border-color:var(--focus-outline-color)}.button_hds-button__label__Qw_Jx,input[type=submit].button_hds-button__2ZUJx{font-weight:inherit;line-height:1.25em;padding:var(--spacing-s)}input[type=submit].button_hds-button__2ZUJx{cursor:pointer;padding:var(--spacing-s) var(--spacing-l)}input[type=submit].button_hds-button__2ZUJx.button_focus-visible__2Up1m,input[type=submit].button_hds-button__2ZUJx:focus-visible{box-shadow:0 0 0 var(--outline-gutter) var(--submit-input-focus-gutter-color),0 0 0 calc(var(--outline-gutter) + var(--outline-width)) var(--focus-outline-color)}.button_hds-button__label__Qw_Jx:only-child{margin:0 var(--spacing-2-xs)}.button_hds-button--small__1Xo7e .button_hds-button__label__Qw_Jx,input[type=submit].button_hds-button--small__1Xo7e{line-height:var(--lineheight-s);padding:var(--spacing-2-xs) var(--spacing-xs)}.button_hds-button--supplementary__6Yi7z .button_hds-button__label__Qw_Jx:first-child{padding-right:var(--spacing-2-xs)}.button_hds-button--small__1Xo7e .button_hds-button__label__Qw_Jx:only-child{margin:0 var(--spacing-xs)}.button_hds-button--supplementary__6Yi7z .button_hds-icon__KLp4r+.button_hds-button__label__Qw_Jx:last-child{padding-left:var(--spacing-2-xs)}.button_hds-button--supplementary__6Yi7z .button_hds-icon__KLp4r+.button_hds-button__label__Qw_Jx:not(:last-child){padding-left:var(--spacing-2-xs);padding-right:var(--spacing-2-xs)}.button_hds-button--small__1Xo7e{padding:0}input[type=submit].button_hds-button--small__1Xo7e{padding:var(--spacing-2-xs) var(--spacing-m)}.button_hds-button--small__1Xo7e .button_hds-button__label__Qw_Jx:not(:first-of-type):not(:last-of-type){padding:var(--spacing-2-xs) var(--spacing-2-xs)}.button_hds-button--fullwidth__1Or7k{width:100%}.button_hds-button__2ZUJx .button_hds-icon__KLp4r{height:var(--spacing-m);margin-left:var(--spacing-s);width:var(--spacing-m)}.button_hds-button__label__Qw_Jx~.button_hds-icon__KLp4r{margin:0 var(--spacing-s) 0 0}.button_hds-button--small__1Xo7e .button_hds-icon__KLp4r{margin-left:var(--spacing-2-xs)}.button_hds-button__2ZUJx .button_hds-button--small__1Xo7e .button_hds-button__label__Qw_Jx~.button_hds-icon__KLp4r{margin:0 var(--spacing-2-xs) 0 0}.button_hds-button__2ZUJx .button_hds-icon__KLp4r:first-of-type:not(:last-of-type){margin:0 0 0 var(--spacing-2-xs)}.button_hds-button__2ZUJx .button_hds-icon__KLp4r:last-of-type:not(:first-of-type){margin:0 var(--spacing-2-xs) 0 0}.button_hds-button--small__1Xo7e .button_hds-icon__KLp4r:first-child:not(:last-of-type){margin:0 0 0 var(--spacing-2-xs)}.button_hds-button--small__1Xo7e .button_hds-icon__KLp4r:last-child:not(:first-of-type){margin:0 var(--spacing-2-xs) 0 0}.button_hds-button--primary__3n7lE{--background-color:var(--color-bus);--background-color-hover:var(--color-bus-dark);--background-color-focus:var(--color-bus);--background-color-hover-focus:var(--color-bus-dark);--background-color-disabled:var(--color-black-20);--border-color:var(--color-bus);--border-color-hover:var(--color-bus-dark);--border-color-focus:var(--color-bus);--border-color-hover-focus:var(--color-bus-dark);--border-color-disabled:var(--color-black-20);--color:var(--color-white);--color-hover:var(--color-white);--color-focus:var(--color-white);--color-hover-focus:var(--color-white);--color-disabled:var(--color-white)}.button_hds-button--primary__3n7lE,.button_hds-button--secondary__20_I8{--focus-outline-color:var(--color-focus-outline);--submit-input-focus-gutter-color:var(--color-white)}.button_hds-button--secondary__20_I8{--border-color:var(--color-bus);--border-color-hover:var(--color-bus-dark);--border-color-focus:var(--color-bus);--border-color-hover-focus:var(--color-bus-dark);--border-color-disabled:var(--color-black-50)}.button_hds-button--secondary__20_I8,.button_hds-button--supplementary__6Yi7z{--background-color:transparent;--background-color-hover:var(--color-bus-light);--background-color-focus:transparent;--background-color-hover-focus:var(--color-bus-light);--background-color-disabled:transparent;--color:var(--color-bus);--color-hover:var(--color-bus-dark);--color-focus:var(--color-bus);--color-hover-focus:var(--color-bus-dark);--color-disabled:var(--color-black-40)}.button_hds-button--supplementary__6Yi7z{--border-color:transparent;--border-color-hover:transparent;--border-color-focus:var(--color-focus-outline);--border-color-hover-focus:var(--color-focus-outline);--border-color-disabled:transparent;--focus-outline-color:transparent;--submit-input-focus-gutter-color:transparent}.button_hds-button--loading__3igPU{--background-color:transparent;--background-color-hover:transparent;--background-color-focus:transparent;--background-color-hover-focus:transparent;--background-color-disabled:transparent;--border-color:transparent;--border-color-hover:transparent;--border-color-focus:transparent;--border-color-hover-focus:transparent;--border-color-disabled:transparent;--color:var(--color-black-90);--color-hover:var(--color-black-90);--color-focus:var(--color-black-90);--color-hover-focus:var(--color-black-90);--color-disabled:var(--color-black-90);cursor:wait}.button_hds-button--success__RHXHV{--background-color:var(--color-success);--background-color-hover:var(--color-success-dark);--background-color-focus:var(--color-success);--background-color-hover-focus:var(--color-success-dark);--border-color:var(--color-success);--border-color-hover:var(--color-success-dark);--border-color-focus:var(--color-success);--border-color-hover-focus:var(--color-success-dark)}.button_hds-button--danger__1iO6I,.button_hds-button--success__RHXHV{--color:var(--color-white);--color-hover:var(--color-white);--color-focus:var(--color-white);--color-hover-focus:var(--color-white);--focus-outline-color:var(--color-focus-outline)}.button_hds-button--danger__1iO6I{--background-color:var(--color-error);--background-color-hover:var(--color-error-dark);--background-color-focus:var(--color-error);--background-color-hover-focus:var(--color-error-dark);--border-color:var(--color-error);--border-color-hover:var(--color-error-dark);--border-color-focus:var(--color-error);--border-color-hover-focus:var(--color-error-dark)}.button_hds-button--primary__3n7lE.button_hds-button--theme-coat__3yrWi{--background-color:var(--color-coat-of-arms);--background-color-hover:var(--color-coat-of-arms-dark);--background-color-focus:var(--color-coat-of-arms);--background-color-hover-focus:var(--color-coat-of-arms-dark);--color:var(--color-white);--color-hover:var(--color-white);--color-focus:var(--color-white);--color-hover-focus:var(--color-white)}.button_hds-button--primary__3n7lE.button_hds-button--theme-coat__3yrWi,.button_hds-button--secondary__20_I8.button_hds-button--theme-coat__3yrWi{--border-color:var(--color-coat-of-arms);--border-color-hover:var(--color-coat-of-arms-dark);--border-color-focus:var(--color-coat-of-arms);--border-color-hover-focus:var(--color-coat-of-arms-dark)}.button_hds-button--secondary__20_I8.button_hds-button--theme-coat__3yrWi,.button_hds-button--supplementary__6Yi7z.button_hds-button--theme-coat__3yrWi{--background-color:transparent;--background-color-hover:var(--color-coat-of-arms-light);--background-color-focus:transparent;--background-color-hover-focus:var(--color-coat-of-arms-light);--color:var(--color-coat-of-arms);--color-hover:var(--color-coat-of-arms);--color-focus:var(--color-coat-of-arms);--color-hover-focus:var(--color-coat-of-arms)}.button_hds-button--supplementary__6Yi7z.button_hds-button--theme-coat__3yrWi{--border-color:transparent;--border-color-hover:transparent;--border-color-focus:var(--color-focus-outline);--border-color-hover-focus:var(--color-focus-outline)}.button_hds-button--primary__3n7lE.button_hds-button--theme-black__1axR7{--background-color:var(--color-black);--background-color-hover:var(--color-black);--background-color-focus:var(--color-black);--background-color-hover-focus:var(--color-black);--color:var(--color-white);--color-hover:var(--color-white);--color-focus:var(--color-white);--color-hover-focus:var(--color-white)}.button_hds-button--primary__3n7lE.button_hds-button--theme-black__1axR7,.button_hds-button--secondary__20_I8.button_hds-button--theme-black__1axR7{--border-color:var(--color-black);--border-color-hover:var(--color-black);--border-color-focus:var(--color-black);--border-color-hover-focus:var(--color-black)}.button_hds-button--secondary__20_I8.button_hds-button--theme-black__1axR7,.button_hds-button--supplementary__6Yi7z.button_hds-button--theme-black__1axR7{--background-color:transparent;--background-color-hover:var(--color-black-5);--background-color-focus:transparent;--background-color-hover-focus:var(--color-black-5);--color:var(--color-black);--color-hover:var(--color-black);--color-focus:var(--color-black);--color-hover-focus:var(--color-black)}.button_hds-button--supplementary__6Yi7z.button_hds-button--theme-black__1axR7{--border-color:transparent;--border-color-hover:transparent;--border-color-focus:var(--color-focus-outline);--border-color-hover-focus:var(--color-focus-outline)}.LanguageSwitcherItem-module_rowItem__2z76T{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.LanguageSwitcherItem-module_item__2V_Ne,.LanguageSwitcherItem-module_primary__1KCFc,.LanguageSwitcherItem-module_secondary__EQOcO,.LanguageSwitcherItem-module_supplementary__2nEPW{text-decoration:none}.LanguageSwitcherItem-module_item__2V_Ne:focus{transition:none}.LanguageSwitcherItem-module_supplementary__2nEPW{--border-width:3px}.LanguageSwitcherItem-module_primary__1KCFc:focus,.LanguageSwitcherItem-module_secondary__EQOcO:focus,.LanguageSwitcherItem-module_supplementary__2nEPW:focus{transition:none}.LanguageSwitcherItem-module_icon__3aKRE.LanguageSwitcherItem-module_icon__3aKRE{display:flex;height:unset;width:unset}.LanguageSwitcherItem-module_label__3Gub1{padding:0}.LanguageSwitcherItem-module_dropdownItem__eHUR9,.LanguageSwitcherItem-module_dropdownLinkItem__snkbq,.LanguageSwitcherItem-module_rowItem__2z76T{align-items:center;box-sizing:border-box;color:inherit;display:flex;font-weight:500;outline:none;text-decoration:none}.LanguageSwitcherItem-module_rowItem__2z76T .LanguageSwitcherItem-module_icon__3aKRE{margin:0 var(--spacing-2-xs) 0 calc(var(--spacing-3-xs) * -1)}.LanguageSwitcherItem-module_rowItem__2z76T .LanguageSwitcherItem-module_label__3Gub1{line-height:var(--lineheight-s);margin:0}@media only screen and (max-width:767.98px){.LanguageSwitcherItem-module_rowItem__2z76T{height:var(--spacing-xl);padding:var(--spacing-2-xs)}.LanguageSwitcherItem-module_rowItem__2z76T:focus{box-shadow:0 0 0 3px var(--color-coat-of-arms)}.LanguageSwitcherItem-module_dropdownItem__eHUR9:not(:first-child),.LanguageSwitcherItem-module_dropdownLinkItem__snkbq:not(:first-child),.LanguageSwitcherItem-module_rowItem__2z76T:not(:first-child){margin-top:var(--spacing-2-xs)}.LanguageSwitcherItem-module_icon__3aKRE.LanguageSwitcherItem-module_icon__3aKRE{align-self:center}}@media only screen and (min-width:768px){.LanguageSwitcherItem-module_rowItem__2z76T{padding:var(--spacing-3-xs);position:relative}.LanguageSwitcherItem-module_dropdownItem__eHUR9:focus-within:before,.LanguageSwitcherItem-module_dropdownLinkItem__snkbq a:focus-within:before,.LanguageSwitcherItem-module_dropdownLinkItem__snkbq button:focus-within:before,.LanguageSwitcherItem-module_rowItem__2z76T:focus:before{border-radius:0;box-shadow:0 0 0 3px var(--color-coat-of-arms);content:"";height:calc(100% - 6px);left:0;pointer-events:none;position:absolute;top:0;transform:translateY(3px);width:100%;z-index:1}.LanguageSwitcherItem-module_dropdownLinkItem__snkbq a,.LanguageSwitcherItem-module_dropdownLinkItem__snkbq button{position:relative}.LanguageSwitcherItem-module_dropdownItem__eHUR9.LanguageSwitcherItem-module_active__fJ-im:before,.LanguageSwitcherItem-module_dropdownLinkItem__snkbq.LanguageSwitcherItem-module_active__fJ-im:before,.LanguageSwitcherItem-module_rowItem__2z76T.LanguageSwitcherItem-module_active__fJ-im:before,.LanguageSwitcherItem-module_rowItem__2z76T:active:before{height:calc(100% - 3px)}.LanguageSwitcherItem-module_dropdownItem__eHUR9.LanguageSwitcherItem-module_active__fJ-im:after,.LanguageSwitcherItem-module_dropdownItem__eHUR9:hover:not(:focus-within):after,.LanguageSwitcherItem-module_dropdownLinkItem__snkbq.LanguageSwitcherItem-module_active__fJ-im:after,.LanguageSwitcherItem-module_dropdownLinkItem__snkbq:hover:not(:focus-within):after,.LanguageSwitcherItem-module_rowItem__2z76T.LanguageSwitcherItem-module_active__fJ-im:after,.LanguageSwitcherItem-module_rowItem__2z76T:active:after,.LanguageSwitcherItem-module_rowItem__2z76T:hover:not(:focus):after{background-color:var(--color-black-90);bottom:0;content:"";height:var(--spacing-3-xs);left:0;pointer-events:none;position:absolute;width:100%}.LanguageSwitcherItem-module_dropdownItem__eHUR9:not(.LanguageSwitcherItem-module_icon__3aKRE){width:max-content}}');const Vn=e=>{var{active:t,as:n,children:o,className:r,icon:l,label:i,variant:s}=e,u=(0,c._)(e,["active","as","children","className","icon","label","variant"]);const d=(0,Te.u)(),m=n;return a.createElement(m,Object.assign({className:(0,Se.c)(d&&Wn[s],r)},t&&{"aria-current":"page"},u),l&&a.createElement("span",{className:Wn.icon},l),a.createElement("span",{className:Wn.label},i,o))};function qn(){const e="cookie-consent-language-selector",{current:t,languageOptions:n,languageSelectorAriaLabel:o,onLanguageChange:r}=wn(),l=n.find((e=>e.code===t));return a.createElement(Un,{className:(0,Se.c)(Tn.languageDropdown),id:e,label:l.label,menuOffset:10,buttonAriaLabel:o,closeOnItemClick:!0},n.map((n=>a.createElement(Vn,{href:"#",onClick:o=>((n,o)=>{if(o.preventDefault(),n!==t)r(n);else{const t=document.getElementById(e+"-button");t&&t.focus()}})(n.code,o),label:n.label,active:t===n.code,key:n.code,lang:n.code,"data-testid":"cookie-consent-language-option-"+n.code}))))}function Gn(e){(0,a.useEffect)((()=>{const t=t=>{const n=t.key||t.keyCode;"Escape"!==n&&"Esc"!==n&&27!==n||e(t)};return document.addEventListener("keyup",t),()=>{document.removeEventListener("keyup",t)}}),[e])}function Zn(){const{isOpen:e,buttonProps:t,contentProps:n,closeAccordion:o}=(0,ge.u)({initiallyOpen:!1}),{hideSettings:r,showSettings:l,readMore:i}=kn(),{title:c,text:s}=yn("main"),u=An(),d=(0,a.useRef)(),m=e?Y.I:Z.I,p=e?r:l,h=e?(0,Se.c)(Tn.detailsAccordionButton,Tn.accordionButton,Tn.hiddenWithoutFocus):(0,Se.c)(Tn.detailsAccordionButton,Tn.accordionButton,Tn.accordionButtonSettingsClosed,Tn.hiddenWithoutFocus),f=(0,a.useCallback)((()=>{c&&d.current&&d.current.focus()}),[d,c]);return(0,a.useEffect)((()=>{f()}),[f]),Gn(o),Gn(zn()),a.createElement("div",{className:(0,Se.c)(Tn.content,e?"":Tn.shrinkOnBlur),id:"cookie-consent-content",tabIndex:-1},a.createElement("div",{className:Tn.mainContent,"data-testid":"cookie-consent-information"},a.createElement("span",{className:Tn.emulatedH1,role:"heading","aria-level":1,tabIndex:-1,ref:d},c),a.createElement("div",{className:(0,Se.c)(Tn.languageSwitcher,Tn.visuallyHiddenWithoutFocus),"data-testid":"cookie-consent-language-switcher"},a.createElement(qn,null)),a.createElement("p",{className:Tn.visuallyHiddenWithoutFocus},s),a.createElement("button",{type:"button",className:(0,Se.c)(Tn.accordionButton,Tn.readMoreButton),onMouseDown:e=>{e.preventDefault(),f()}},a.createElement("span",null,i),a.createElement(Y.I,{"aria-hidden":!0}))),a.createElement("button",Object.assign({type:"button",className:h,"data-testid":"cookie-consent-settings-toggler"},t),a.createElement(m,{"aria-hidden":!0}),a.createElement("span",null,p)),a.createElement(ve.C,Object.assign({},n,{theme:{"--padding-horizontal":"0","--padding-vertical":"0"}}),a.createElement(Pn,null)),a.createElement(On,{detailsAreShown:e,triggerAction:u}))}function Kn(){const e=Dn(),[t]=(0,a.useState)(e),[n,o]=(0,a.useState)(!1),r=t&&!e,{settingsSaved:l}=kn(),i=function(){const e="HdsCookieConsentModalPlaceholder",t=(0,a.useRef)(null),n=(0,a.useRef)(null),o=(0,a.useRef)(null),r=(0,a.useCallback)((()=>{const t=document.createElement("div");return t.setAttribute("data-testid","html-cookie-consent-placeholder"),t.setAttribute("aria-hidden","true"),t.setAttribute("id",e),document.body.lastChild.after(t),t}),[]),l=(0,a.useCallback)(((e,t)=>{if(!e)return;const n=t?t.getBoundingClientRect().height:0;e.style.height=n+"px"}),[]),i=(0,a.useCallback)((e=>{e&&(e.style.transition="height 0.1s ease 0.2s")}),[]),c=(0,a.useCallback)((()=>{l(n.current,t.current)}),[l,n,t]),s=(0,a.useCallback)((()=>document.getElementById(e)),[e]),u=(0,a.useCallback)((()=>{o.current&&(o.current.disconnect(),o.current=null)}),[o]),d=(0,a.useCallback)((e=>{u(),o.current=new ResizeObserver(c),o.current.observe(e)}),[u,o,c]),m=(0,a.useCallback)((()=>{n.current&&(n.current.remove(),n.current=null)}),[n]),p=(0,a.useCallback)((()=>{n.current||(n.current=s()||r(),i(n.current))}),[n,s,r,i]),h=(0,a.useCallback)((()=>{u(),m()}),[u,m]),f=(0,a.useCallback)((e=>(e&&!n.current&&p(),t.current!==e&&(e?d(e):h(),t.current=e),t)),[n,h,t,d,p]);return(0,a.useEffect)((()=>()=>{h()}),[h]),f}();return(0,a.useEffect)((()=>{setTimeout((()=>o(!0)),500)}),[]),r?a.createElement(Ie.T,null,a.createElement("div",{role:"alert","data-testid":"cookie-consent-screen-reader-notification",tabIndex:-1},l)):e?a.createElement("div",{className:(0,Se.c)(Tn.container,Tn.modal,n&&Tn.animateIn),"data-testid":"cookie-consent"},a.createElement("div",{className:Tn.aligner,ref:i},n&&a.createElement(Zn,null))):null}function Jn(e){const{cookieDomain:t,contentSource:n,children:o}=e;return a.createElement(vn,{contentSource:n},a.createElement(Sn,{cookieDomain:t},o))}function Yn(e){let{contentSource:t,cookieDomain:n,rootId:o="HdsCookieConsentContainer"}=e;return a.createElement(Jn,{contentSource:t,cookieDomain:n},a.createElement(jn,{rootId:o},a.createElement(Kn,null)))}function Qn(){const e=En(),t=An(),{title:n,text:o}=e.texts.sections.main,{settingsSaved:r}=e.texts.ui,[l,i]=(0,a.useState)(!1),c=(0,a.useCallback)((()=>{i(!0)}),[i]);return a.createElement("div",{className:Tn.page,"data-testid":"cookie-consent"},a.createElement("div",{className:Tn.content,id:"cookie-consent-content"},a.createElement("div",{className:Tn.mainContent,"data-testid":"cookie-consent-information"},a.createElement("h1",{className:"heading-xl"},n),a.createElement("p",null,o)),a.createElement(Pn,null),l&&a.createElement(Be.N,{size:"small",type:"success",label:"Saved",dataTestId:"cookie-consent-save-notification",className:Tn.saveNotification},r),a.createElement(On,{detailsAreShown:!0,onClick:c,triggerAction:t})))}function Xn(e){const{cookieDomain:t,contentSource:n}=e;return a.createElement(Jn,{contentSource:n,cookieDomain:t},a.createElement(Qn,null))}function $n(e){const{cookieDomain:t,cookieName:n}=e||{};return(0,a.useMemo)((()=>{const e=mt({domain:t||gt()},n||pt),o=()=>e.get();return{getCookie:o,getAllConsents:()=>_t(o())}}),[t,n])}Vn.defaultProps={as:"a"};var eo=n(41737),to=n(84014),no=n(74458),oo=n(68477),ro=n(99665),lo=n(61538),ao=n(96234),io=n(41110),co=n(11167),so=n(19259),uo=n(55810),mo=n(21662),po=n(72612),ho=n(68201),fo=n(71015),_o=n(81916),go=n(1132),bo=n(2700),vo=n(20968),Eo=n(29520),ko=n(27945),yo={section:"Section-module_section__11UMY",withKoros:"Section-module_withKoros__3igcQ",content:"Section-module_content__1zko5",plain:"Section-module_plain__2LGd4",primary:"Section-module_primary__PCOSJ",secondary:"Section-module_secondary__21zO2",tertiary:"Section-module_tertiary__3-HvA",koros:"Section-module_koros__1eyqM",basic:"Section-module_basic__lpGss",topKoros:"Section-module_topKoros__3wEjr",beat:"Section-module_beat__3nhuM",pulse:"Section-module_pulse__3JqAl",wave:"Section-module_wave__3v_Be",vibration:"Section-module_vibration__Cxg94",bottomKoros:"Section-module_bottomKoros__2tMWb"};(0,ke.s)(".Section-module_section__11UMY{--section-background-plain:var(--color-white);--section-background-primary:var(--color-coat-of-arms);--section-background-secondary:var(--color-fog);--section-background-tertiary:var(--color-suomenlinna);--section-color-plain:var(--color-black-90);--section-color-primary:var(--color-white);--section-color-secondary:var(--color-black-90);--section-color-tertiary:var(--color-white);position:relative}.Section-module_section__11UMY.Section-module_withKoros__3igcQ{padding:2em 0;z-index:1}.Section-module_section__11UMY:not(.Section-module_withKoros__3igcQ){padding:4em 0}.Section-module_content__1zko5{margin:0 auto;max-width:72em;padding:var(--spacing-layout-s) var(--spacing-layout-xl);position:relative;z-index:1}.Section-module_section__11UMY.Section-module_plain__2LGd4{background-color:var(--section-background-plain);color:var(--section-color-plain)}.Section-module_section__11UMY.Section-module_primary__PCOSJ{background-color:var(--section-background-primary);color:var(--section-color-primary)}.Section-module_section__11UMY.Section-module_secondary__21zO2{background-color:var(--section-background-secondary);color:var(--section-color-secondary)}.Section-module_section__11UMY.Section-module_tertiary__3-HvA{background-color:var(--section-background-tertiary);color:var(--section-color-tertiary)}.Section-module_koros__1eyqM{position:absolute}.Section-module_section__11UMY.Section-module_plain__2LGd4 .Section-module_koros__1eyqM{fill:var(--section-background-plain)}.Section-module_section__11UMY.Section-module_primary__PCOSJ .Section-module_koros__1eyqM{fill:var(--section-background-primary)}.Section-module_section__11UMY.Section-module_secondary__21zO2 .Section-module_koros__1eyqM{fill:var(--section-background-secondary)}.Section-module_section__11UMY.Section-module_tertiary__3-HvA .Section-module_koros__1eyqM{fill:var(--section-background-tertiary)}.Section-module_koros__1eyqM.Section-module_basic__lpGss.Section-module_topKoros__3wEjr{top:-1em}.Section-module_koros__1eyqM.Section-module_beat__3nhuM.Section-module_topKoros__3wEjr{top:-4.5em}.Section-module_koros__1eyqM.Section-module_pulse__3JqAl.Section-module_topKoros__3wEjr{top:-2.2em}.Section-module_koros__1eyqM.Section-module_wave__3v_Be.Section-module_topKoros__3wEjr{top:-2.3em}.Section-module_koros__1eyqM.Section-module_vibration__Cxg94.Section-module_topKoros__3wEjr{top:-3.4em}.Section-module_koros__1eyqM.Section-module_basic__lpGss.Section-module_bottomKoros__2tMWb{bottom:-1em}.Section-module_koros__1eyqM.Section-module_beat__3nhuM.Section-module_bottomKoros__2tMWb{bottom:-4.5em}.Section-module_koros__1eyqM.Section-module_pulse__3JqAl.Section-module_bottomKoros__2tMWb{bottom:-2.2em}.Section-module_koros__1eyqM.Section-module_wave__3v_Be.Section-module_bottomKoros__2tMWb{bottom:-2.3em}.Section-module_koros__1eyqM.Section-module_vibration__Cxg94.Section-module_bottomKoros__2tMWb{bottom:-3.4em}@media (max-width:768px){.Section-module_content__1zko5{padding:.5em 1em}}");const xo=e=>{let{children:t,className:n="",color:o="plain",korosType:r=null}=e;const l=null!==r;return a.createElement("div",{className:(0,Se.c)(yo.section,yo[o],l&&yo.withKoros,n)},l&&a.createElement(uo.K,{type:r,className:yo.koros+" "+yo.topKoros+" "+yo[r]}),a.createElement("div",{className:yo.content},t),l&&a.createElement(uo.K,{flipVertical:!0,type:r,className:yo.koros+" "+yo.bottomKoros+" "+yo[r]}))};var wo=n(66016),Co=n(32384),Io=n(83428),So=n(73043),Lo=n(19213),Ao=n(94671),zo=n(3072),Do=n(24155),jo=n(3382),To=n(59096),No=n(1751),Oo=n(45422),Bo=n(46790),Mo=n(32454),Ho=n(58808),Ro=(n(91309),n(62004),n(32337),n(64338),n(66227)),Po=n(87138);const Fo=e=>{let{children:t,pageContext:n}=e;return a.createElement(Po.default,{pageContext:n},t)};function Uo(e){const t=Object.assign({h2:"h2",a:"a",span:"span",h3:"h3",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",code:"code"},(0,l.ah)(),e.components);return o||Vo("HDS",!1),q.I||Vo("HDS.IconAlertCircle",!0),G.I||Vo("HDS.IconAlertCircleFill",!0),Z.I||Vo("HDS.IconAngleDown",!0),K.I||Vo("HDS.IconAngleLeft",!0),J.I||Vo("HDS.IconAngleRight",!0),Y.I||Vo("HDS.IconAngleUp",!0),q.a||Vo("HDS.IconArrowBottomLeft",!0),q.b||Vo("HDS.IconArrowBottomRight",!0),q.c||Vo("HDS.IconArrowDown",!0),q.d||Vo("HDS.IconArrowLeft",!0),q.e||Vo("HDS.IconArrowRedo",!0),Q.I||Vo("HDS.IconArrowRight",!0),q.f||Vo("HDS.IconArrowRightDashed",!0),q.g||Vo("HDS.IconArrowTopLeft",!0),q.h||Vo("HDS.IconArrowTopRight",!0),q.i||Vo("HDS.IconArrowUndo",!0),X.I||Vo("HDS.IconArrowUp",!0),q.j||Vo("HDS.IconAtSign",!0),q.k||Vo("HDS.IconBagCogwheel",!0),q.l||Vo("HDS.IconBell",!0),q.m||Vo("HDS.IconBellCrossed",!0),q.n||Vo("HDS.IconBinoculars",!0),q.o||Vo("HDS.IconCake",!0),$.I||Vo("HDS.IconCalendar",!0),q.p||Vo("HDS.IconCalendarClock",!0),q.q||Vo("HDS.IconCalendarCross",!0),q.r||Vo("HDS.IconCalendarEvent",!0),q.s||Vo("HDS.IconCalendarPlus",!0),q.t||Vo("HDS.IconCalendarRecurring",!0),q.u||Vo("HDS.IconCamera",!0),ee.I||Vo("HDS.IconCheck",!0),q.v||Vo("HDS.IconCheckCircle",!0),te.I||Vo("HDS.IconCheckCircleFill",!0),q.w||Vo("HDS.IconChildren",!0),q.x||Vo("HDS.IconClock",!0),q.y||Vo("HDS.IconClockCross",!0),q.z||Vo("HDS.IconClockPlus",!0),q.A||Vo("HDS.IconCoffeeCupSaucer",!0),q.B||Vo("HDS.IconCogwheel",!0),q.C||Vo("HDS.IconCogwheels",!0),q.D||Vo("HDS.IconCollapse",!0),q.E||Vo("HDS.IconCompany",!0),q.F||Vo("HDS.IconCopy",!0),ne.I||Vo("HDS.IconCross",!0),oe.I||Vo("HDS.IconCrossCircle",!0),re.I||Vo("HDS.IconCrossCircleFill",!0),q.G||Vo("HDS.IconCustomerBotNegative",!0),q.H||Vo("HDS.IconCustomerBotNeutral",!0),q.J||Vo("HDS.IconCustomerBotPositive",!0),q.K||Vo("HDS.IconDiscord",!0),q.L||Vo("HDS.IconDisplay",!0),le.b||Vo("HDS.IconDocument",!0),q.M||Vo("HDS.IconDownload",!0),q.N||Vo("HDS.IconDownloadCloud",!0),q.O||Vo("HDS.IconDrag",!0),q.P||Vo("HDS.IconEntrepreneur",!0),q.Q||Vo("HDS.IconEnvelope",!0),ae.I||Vo("HDS.IconError",!0),ie.a||Vo("HDS.IconErrorFill",!0),q.R||Vo("HDS.IconEuroSign",!0),ce.a||Vo("HDS.IconEye",!0),ce.I||Vo("HDS.IconEyeCrossed",!0),q.S||Vo("HDS.IconFaceNeutral",!0),q.T||Vo("HDS.IconFaceSad",!0),q.U||Vo("HDS.IconFaceSmile",!0),q.V||Vo("HDS.IconFacebook",!0),q.W||Vo("HDS.IconFamily",!0),se.a||Vo("HDS.IconGlobe",!0),q.X||Vo("HDS.IconGoogle",!0),q.Y||Vo("HDS.IconGraphColumns",!0),q.Z||Vo("HDS.IconGroup",!0),q._||Vo("HDS.IconHammers",!0),q.$||Vo("HDS.IconHeadphones",!0),q.a0||Vo("HDS.IconHeart",!0),q.a1||Vo("HDS.IconHeartFill",!0),q.a2||Vo("HDS.IconHistory",!0),q.a3||Vo("HDS.IconHome",!0),q.a4||Vo("HDS.IconHomeSmoke",!0),q.a5||Vo("HDS.IconInfoCircle",!0),ie.I||Vo("HDS.IconInfoCircleFill",!0),q.a6||Vo("HDS.IconInstagram",!0),q.a7||Vo("HDS.IconKey",!0),q.a8||Vo("HDS.IconLayers",!0),q.a9||Vo("HDS.IconLightbulb",!0),q.aa||Vo("HDS.IconLink",!0),ue.I||Vo("HDS.IconLinkExternal",!0),q.ab||Vo("HDS.IconLinkedin",!0),q.ac||Vo("HDS.IconLocate",!0),q.ad||Vo("HDS.IconLocation",!0),q.ae||Vo("HDS.IconLock",!0),q.af||Vo("HDS.IconLockOpen",!0),q.ag||Vo("HDS.IconMap",!0),q.ah||Vo("HDS.IconMenuDots",!0),se.I||Vo("HDS.IconMenuHamburger",!0),q.ai||Vo("HDS.IconMicrophone",!0),q.aj||Vo("HDS.IconMicrophoneCrossed",!0),de.I||Vo("HDS.IconMinus",!0),q.ak||Vo("HDS.IconMinusCircle",!0),q.al||Vo("HDS.IconMinusCircleFill",!0),q.am||Vo("HDS.IconMobile",!0),q.an||Vo("HDS.IconMoneyBag",!0),q.ao||Vo("HDS.IconMoneyBagFill",!0),q.ap||Vo("HDS.IconMover",!0),q.aq||Vo("HDS.IconOccupation",!0),q.ar||Vo("HDS.IconPaperclip",!0),q.as||Vo("HDS.IconPen",!0),q.at||Vo("HDS.IconPenLine",!0),q.au||Vo("HDS.IconPersonFemale",!0),q.av||Vo("HDS.IconPersonGenderless",!0),q.aw||Vo("HDS.IconPersonMale",!0),q.ax||Vo("HDS.IconPersonWheelchair",!0),q.ay||Vo("HDS.IconPhone",!0),le.a||Vo("HDS.IconPhoto",!0),q.az||Vo("HDS.IconPhotoPlus",!0),q.aA||Vo("HDS.IconPlaybackFastforward",!0),q.aB||Vo("HDS.IconPlaybackNext",!0),ae.a||Vo("HDS.IconPlaybackPause",!0),q.aC||Vo("HDS.IconPlaybackPlay",!0),q.aD||Vo("HDS.IconPlaybackPrevious",!0),q.aE||Vo("HDS.IconPlaybackRecord",!0),q.aF||Vo("HDS.IconPlaybackRewind",!0),q.aG||Vo("HDS.IconPlaybackStop",!0),me.I||Vo("HDS.IconPlus",!0),q.aH||Vo("HDS.IconPlusCircle",!0),q.aI||Vo("HDS.IconPlusCircleFill",!0),q.aJ||Vo("HDS.IconPodcast",!0),q.aK||Vo("HDS.IconPrinter",!0),pe.I||Vo("HDS.IconQuestionCircle",!0),q.aL||Vo("HDS.IconQuestionCircleFill",!0),q.aM||Vo("HDS.IconRefresh",!0),q.aN||Vo("HDS.IconRestaurant",!0),q.aO||Vo("HDS.IconRss",!0),q.aP||Vo("HDS.IconSaveDiskette",!0),q.aQ||Vo("HDS.IconSaveDisketteFill",!0),q.aR||Vo("HDS.IconScroll",!0),q.aS||Vo("HDS.IconScrollCogwheel",!0),q.aT||Vo("HDS.IconScrollContent",!0),q.aU||Vo("HDS.IconScrollGroup",!0),he.I||Vo("HDS.IconSearch",!0),q.aV||Vo("HDS.IconSenior",!0),q.aW||Vo("HDS.IconShare",!0),q.aX||Vo("HDS.IconShield",!0),q.aY||Vo("HDS.IconShoppingCart",!0),q.aZ||Vo("HDS.IconSignin",!0),q.a_||Vo("HDS.IconSignout",!0),q.a$||Vo("HDS.IconSitemap",!0),q.b0||Vo("HDS.IconSliders",!0),q.b1||Vo("HDS.IconSnapchat",!0),fe.I||Vo("HDS.IconSort",!0),fe.a||Vo("HDS.IconSortAlphabeticalAscending",!0),fe.c||Vo("HDS.IconSortAlphabeticalDescending",!0),fe.b||Vo("HDS.IconSortAscending",!0),fe.d||Vo("HDS.IconSortDescending",!0),q.b2||Vo("HDS.IconSpeechbubble",!0),q.b3||Vo("HDS.IconSpeechbubbleText",!0),q.b4||Vo("HDS.IconStar",!0),q.b5||Vo("HDS.IconStarFill",!0),q.b6||Vo("HDS.IconSwapUser",!0),q.b7||Vo("HDS.IconTextBold",!0),q.b8||Vo("HDS.IconTextItalic",!0),q.b9||Vo("HDS.IconTextTool",!0),q.ba||Vo("HDS.IconThumbsDown",!0),q.bb||Vo("HDS.IconThumbsDownFill",!0),q.bc||Vo("HDS.IconThumbsUp",!0),q.bd||Vo("HDS.IconThumbsUpFill",!0),q.be||Vo("HDS.IconTicket",!0),q.bf||Vo("HDS.IconTiktok",!0),q.bg||Vo("HDS.IconTrash",!0),q.bh||Vo("HDS.IconTraveler",!0),q.bi||Vo("HDS.IconTwitch",!0),q.bj||Vo("HDS.IconTwitter",!0),le.I||Vo("HDS.IconUpload",!0),q.bk||Vo("HDS.IconUploadCloud",!0),q.bl||Vo("HDS.IconUser",!0),q.bm||Vo("HDS.IconVaccine",!0),q.bn||Vo("HDS.IconVideocamera",!0),q.bo||Vo("HDS.IconVideocameraCrossed",!0),q.bp||Vo("HDS.IconVimeo",!0),q.bq||Vo("HDS.IconVirus",!0),q.br||Vo("HDS.IconVolumeHigh",!0),q.bs||Vo("HDS.IconVolumeLow",!0),q.bt||Vo("HDS.IconVolumeMinus",!0),q.bu||Vo("HDS.IconVolumeMute",!0),q.bv||Vo("HDS.IconVolumePlus",!0),q.bw||Vo("HDS.IconWhatsapp",!0),q.bx||Vo("HDS.IconWifi",!0),q.by||Vo("HDS.IconWifiCrossed",!0),q.bz||Vo("HDS.IconYle",!0),q.bA||Vo("HDS.IconYouth",!0),q.bB||Vo("HDS.IconYoutube",!0),q.bC||Vo("HDS.IconZoomIn",!0),q.bD||Vo("HDS.IconZoomOut",!0),q.bE||Vo("HDS.IconZoomText",!0),a.createElement(a.Fragment,null,a.createElement(t.h2,{id:"list-of-all-icons",style:{position:"relative"}},"List of all icons",a.createElement(t.a,{href:"#list-of-all-icons","aria-label":"list of all icons permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.h3,{id:"arrows-and-operators",style:{position:"relative"}},"Arrows and operators",a.createElement(t.a,{href:"#arrows-and-operators","aria-label":"arrows and operators permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Icon"),a.createElement(t.th,null,"Core"),a.createElement(t.th,null,"React"),a.createElement(t.th,null,"Common Common usage"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(Z.I)),a.createElement(t.td,null,a.createElement(t.code,null,"angle-down")),a.createElement(t.td,null,a.createElement(t.code,null,"IconAngleDown")),a.createElement(t.td,null,"Dropdown open")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(K.I)),a.createElement(t.td,null,a.createElement(t.code,null,"angle-left")),a.createElement(t.td,null,a.createElement(t.code,null,"IconAngleLeft")),a.createElement(t.td)),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(J.I)),a.createElement(t.td,null,a.createElement(t.code,null,"angle-right")),a.createElement(t.td,null,a.createElement(t.code,null,"IconAngleRight")),a.createElement(t.td)),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(Y.I)),a.createElement(t.td,null,a.createElement(t.code,null,"angle-up")),a.createElement(t.td,null,a.createElement(t.code,null,"IconAngleUp")),a.createElement(t.td,null,"Dropdown close")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.c)),a.createElement(t.td,null,a.createElement(t.code,null,"arrow-down")),a.createElement(t.td,null,a.createElement(t.code,null,"IconArrowDown")),a.createElement(t.td)),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.d)),a.createElement(t.td,null,a.createElement(t.code,null,"arrow-left")),a.createElement(t.td,null,a.createElement(t.code,null,"IconArrowLeft")),a.createElement(t.td,null,"Previous")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(Q.I)),a.createElement(t.td,null,a.createElement(t.code,null,"arrow-right")),a.createElement(t.td,null,a.createElement(t.code,null,"IconArrowRight")),a.createElement(t.td,null,"Next")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.f)),a.createElement(t.td,null,a.createElement(t.code,null,"arrow-right-dashed")),a.createElement(t.td,null,a.createElement(t.code,null,"IconArrowRightDashed")),a.createElement(t.td)),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(X.I)),a.createElement(t.td,null,a.createElement(t.code,null,"arrow-up")),a.createElement(t.td,null,a.createElement(t.code,null,"IconArrowUp")),a.createElement(t.td)),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.a)),a.createElement(t.td,null,a.createElement(t.code,null,"arrow-bottom-left")),a.createElement(t.td,null,a.createElement(t.code,null,"IconArrowBottomLeft")),a.createElement(t.td)),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.b)),a.createElement(t.td,null,a.createElement(t.code,null,"arrow-bottom-right")),a.createElement(t.td,null,a.createElement(t.code,null,"IconArrowBottomRight")),a.createElement(t.td)),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.g)),a.createElement(t.td,null,a.createElement(t.code,null,"arrow-top-left")),a.createElement(t.td,null,a.createElement(t.code,null,"IconArrowTopLeft")),a.createElement(t.td)),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.h)),a.createElement(t.td,null,a.createElement(t.code,null,"arrow-top-right")),a.createElement(t.td,null,a.createElement(t.code,null,"IconArrowTopRight")),a.createElement(t.td)),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.D)),a.createElement(t.td,null,a.createElement(t.code,null,"collapse")),a.createElement(t.td,null,a.createElement(t.code,null,"IconCollapse")),a.createElement(t.td,null,"Collapse a group")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(ne.I)),a.createElement(t.td,null,a.createElement(t.code,null,"cross")),a.createElement(t.td,null,a.createElement(t.code,null,"IconCross")),a.createElement(t.td,null,"Close")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(oe.I)),a.createElement(t.td,null,a.createElement(t.code,null,"cross-circle ")),a.createElement(t.td,null,a.createElement(t.code,null,"IconCrossCircle")),a.createElement(t.td,null,"Remove")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(re.I)),a.createElement(t.td,null,a.createElement(t.code,null,"cross-circle-fill")),a.createElement(t.td,null,a.createElement(t.code,null,"IconCrossCircleFill")),a.createElement(t.td,null,"Remove alternative")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(de.I)),a.createElement(t.td,null,a.createElement(t.code,null,"minus ")),a.createElement(t.td,null,a.createElement(t.code,null,"IconMinus")),a.createElement(t.td)),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.ak)),a.createElement(t.td,null,a.createElement(t.code,null,"minus-circle")),a.createElement(t.td,null,a.createElement(t.code,null,"IconMinusCircle")),a.createElement(t.td)),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.al)),a.createElement(t.td,null,a.createElement(t.code,null,"minus-circle-fill")),a.createElement(t.td,null,a.createElement(t.code,null,"IconMinusCircleFill")),a.createElement(t.td)),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(me.I)),a.createElement(t.td,null,a.createElement(t.code,null,"plus")),a.createElement(t.td,null,a.createElement(t.code,null,"IconPlus")),a.createElement(t.td)),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.aH)),a.createElement(t.td,null,a.createElement(t.code,null,"plus-circle")),a.createElement(t.td,null,a.createElement(t.code,null,"IconPlusCircle")),a.createElement(t.td,null,"Add")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.aI)),a.createElement(t.td,null,a.createElement(t.code,null,"plus-circle-fill")),a.createElement(t.td,null,a.createElement(t.code,null,"IconPlusCircleFill")),a.createElement(t.td,null,"Add alternative")),a.createElement(t.tr,null,a.createElement(t.td,null,"[Table 1:Arrows and operators icons]"),a.createElement(t.td),a.createElement(t.td),a.createElement(t.td)))),"\n",a.createElement(t.h3,{id:"notifications-and-expressions",style:{position:"relative"}},"Notifications and expressions",a.createElement(t.a,{href:"#notifications-and-expressions","aria-label":"notifications and expressions permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Icon"),a.createElement(t.th,null,"Core"),a.createElement(t.th,null,"React"),a.createElement(t.th,null,"Common Common usage"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.I)),a.createElement(t.td,null,a.createElement(t.code,null,"alert-circle")),a.createElement(t.td,null,a.createElement(t.code,null,"IconAlertCircle")),a.createElement(t.td,null,"Alert")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(G.I)),a.createElement(t.td,null,a.createElement(t.code,null,"alert-circle-fill")),a.createElement(t.td,null,a.createElement(t.code,null,"IconAlertCircleFill")),a.createElement(t.td,null,"Alert alternative")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(ee.I)),a.createElement(t.td,null,a.createElement(t.code,null,"check")),a.createElement(t.td,null,a.createElement(t.code,null,"IconCheck")),a.createElement(t.td)),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.v)),a.createElement(t.td,null,a.createElement(t.code,null,"check-circle")),a.createElement(t.td,null,a.createElement(t.code,null,"IconCheckCircle")),a.createElement(t.td,null,"Success")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(te.I)),a.createElement(t.td,null,a.createElement(t.code,null,"check-circle-fill")),a.createElement(t.td,null,a.createElement(t.code,null,"IconCheckCircleFill")),a.createElement(t.td,null,"Success alternative")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.G)),a.createElement(t.td,null,a.createElement(t.code,null,"customer-bot-negative")),a.createElement(t.td,null,a.createElement(t.code,null,"IconCustomerBotNegative")),a.createElement(t.td,null,"Bot customer service, negative feedback")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.H)),a.createElement(t.td,null,a.createElement(t.code,null,"customer-bot-neutral")),a.createElement(t.td,null,a.createElement(t.code,null,"IconCustomerBotNeutral")),a.createElement(t.td,null,"Bot customer service, neutral feedback")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.J)),a.createElement(t.td,null,a.createElement(t.code,null,"customer-bot-positive")),a.createElement(t.td,null,a.createElement(t.code,null,"IconCustomerBotPositive")),a.createElement(t.td,null,"Bot customer service, positive feedback")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.a5)),a.createElement(t.td,null,a.createElement(t.code,null,"info-circle")),a.createElement(t.td,null,a.createElement(t.code,null,"IconInfoCircle")),a.createElement(t.td,null,"Information")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(ie.I)),a.createElement(t.td,null,a.createElement(t.code,null,"info-circle-fill")),a.createElement(t.td,null,a.createElement(t.code,null,"IconInfoCircleFill")),a.createElement(t.td,null,"Information alternative")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(ae.I)),a.createElement(t.td,null,a.createElement(t.code,null,"error")),a.createElement(t.td,null,a.createElement(t.code,null,"IconError")),a.createElement(t.td,null,"Error")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(ie.a)),a.createElement(t.td,null,a.createElement(t.code,null,"error-fill")),a.createElement(t.td,null,a.createElement(t.code,null,"IconErrorFill")),a.createElement(t.td,null,"Error alternative")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.S)),a.createElement(t.td,null,a.createElement(t.code,null,"face-neutral")),a.createElement(t.td,null,a.createElement(t.code,null,"IconFaceNeutral")),a.createElement(t.td)),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.T)),a.createElement(t.td,null,a.createElement(t.code,null,"face-sad")),a.createElement(t.td,null,a.createElement(t.code,null,"IconFaceSad")),a.createElement(t.td)),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.U)),a.createElement(t.td,null,a.createElement(t.code,null,"face-smile")),a.createElement(t.td,null,a.createElement(t.code,null,"IconFaceSmile")),a.createElement(t.td)),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.a0)),a.createElement(t.td,null,a.createElement(t.code,null,"heart")),a.createElement(t.td,null,a.createElement(t.code,null,"IconHeart")),a.createElement(t.td,null,"Like")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.a1)),a.createElement(t.td,null,a.createElement(t.code,null,"heart-fill")),a.createElement(t.td,null,a.createElement(t.code,null,"IconHeartFill")),a.createElement(t.td,null,"Like selected")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(pe.I)),a.createElement(t.td,null,a.createElement(t.code,null,"question-circle")),a.createElement(t.td,null,a.createElement(t.code,null,"IconQuestionCircle")),a.createElement(t.td,null,"Help, Tooltip")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.aL)),a.createElement(t.td,null,a.createElement(t.code,null,"question-circle-fill ")),a.createElement(t.td,null,a.createElement(t.code,null,"IconQuestionCircleFill ")),a.createElement(t.td,null,"Help alternative")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.b4)),a.createElement(t.td,null,a.createElement(t.code,null,"star")),a.createElement(t.td,null,a.createElement(t.code,null,"IconStar")),a.createElement(t.td,null,"Rating")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.b5)),a.createElement(t.td,null,a.createElement(t.code,null,"star-fill")),a.createElement(t.td,null,a.createElement(t.code,null,"IconStarFill")),a.createElement(t.td,null,"Rating selected")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.ba)),a.createElement(t.td,null,a.createElement(t.code,null,"thumbs-down")),a.createElement(t.td,null,a.createElement(t.code,null,"IconThumbsDown")),a.createElement(t.td,null,"Dislike, No (E.g. in voting)")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.bb)),a.createElement(t.td,null,a.createElement(t.code,null,"thumbs-down-fill")),a.createElement(t.td,null,a.createElement(t.code,null,"IconThumbsDownFill")),a.createElement(t.td,null,"Dislike, No (E.g. in voting)")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.bc)),a.createElement(t.td,null,a.createElement(t.code,null,"thumbs-up")),a.createElement(t.td,null,a.createElement(t.code,null,"IconThumbsUp")),a.createElement(t.td,null,"Like, Yes (E.g. in voting)")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.bd)),a.createElement(t.td,null,a.createElement(t.code,null,"thumbs-up-fill")),a.createElement(t.td,null,a.createElement(t.code,null,"IconThumbsUpFill")),a.createElement(t.td,null,"Like, Yes (E.g. in voting)")),a.createElement(t.tr,null,a.createElement(t.td,null,"[Table 2:Notifications and expressions icons]"),a.createElement(t.td),a.createElement(t.td),a.createElement(t.td)))),"\n",a.createElement(t.h3,{id:"navigation",style:{position:"relative"}},"Navigation",a.createElement(t.a,{href:"#navigation","aria-label":"navigation permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Icon"),a.createElement(t.th,null,"Core"),a.createElement(t.th,null,"React"),a.createElement(t.th,null,"Common usage"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.a3)),a.createElement(t.td,null,a.createElement(t.code,null,"home")),a.createElement(t.td,null,a.createElement(t.code,null,"IconHome")),a.createElement(t.td,null,"Home")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.a4)),a.createElement(t.td,null,a.createElement(t.code,null,"home-smoke")),a.createElement(t.td,null,a.createElement(t.code,null,"IconHomeSmoke")),a.createElement(t.td)),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(se.I)),a.createElement(t.td,null,a.createElement(t.code,null,"menu-hamburger")),a.createElement(t.td,null,a.createElement(t.code,null,"IconMenuHamburger")),a.createElement(t.td,null,"Mobile menu")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.ah)),a.createElement(t.td,null,a.createElement(t.code,null,"menu-dots")),a.createElement(t.td,null,a.createElement(t.code,null,"IconMenuDots")),a.createElement(t.td,null,"Additional operations")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.aM)),a.createElement(t.td,null,a.createElement(t.code,null,"refresh")),a.createElement(t.td,null,a.createElement(t.code,null,"IconRefresh")),a.createElement(t.td,null,"Refresh page or content")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.aZ)),a.createElement(t.td,null,a.createElement(t.code,null,"signin")),a.createElement(t.td,null,a.createElement(t.code,null,"IconSignin")),a.createElement(t.td,null,"Sign in")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.a_)),a.createElement(t.td,null,a.createElement(t.code,null,"signout")),a.createElement(t.td,null,a.createElement(t.code,null,"IconSignout")),a.createElement(t.td,null,"Sign out")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.a$)),a.createElement(t.td,null,a.createElement(t.code,null,"sitemap")),a.createElement(t.td,null,a.createElement(t.code,null,"IconSitemap")),a.createElement(t.td,null,"Sitemap")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(he.I)),a.createElement(t.td,null,a.createElement(t.code,null,"search")),a.createElement(t.td,null,a.createElement(t.code,null,"IconSearch")),a.createElement(t.td,null,"Search")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.bl)),a.createElement(t.td,null,a.createElement(t.code,null,"user")),a.createElement(t.td,null,a.createElement(t.code,null,"IconUser")),a.createElement(t.td,null,"Username")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.b6)),a.createElement(t.td,null,a.createElement(t.code,null,"swap-user")),a.createElement(t.td,null,a.createElement(t.code,null,"IconSwapUser")),a.createElement(t.td,null,"Changing user account or profile")),a.createElement(t.tr,null,a.createElement(t.td,null,"[Table 3:Navigation icons]"),a.createElement(t.td),a.createElement(t.td),a.createElement(t.td)))),"\n",a.createElement(t.h3,{id:"actions-and-settings",style:{position:"relative"}},"Actions and settings",a.createElement(t.a,{href:"#actions-and-settings","aria-label":"actions and settings permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Icon"),a.createElement(t.th,null,"Core"),a.createElement(t.th,null,"React"),a.createElement(t.th,null,"Common usage"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.k)),a.createElement(t.td,null,a.createElement(t.code,null,"bag-cogwheel")),a.createElement(t.td,null,a.createElement(t.code,null,"IconBagCogwheel")),a.createElement(t.td,null,"Manage budget or finances")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.l)),a.createElement(t.td,null,a.createElement(t.code,null,"bell")),a.createElement(t.td,null,a.createElement(t.code,null,"IconBell")),a.createElement(t.td,null,"Notification")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.m)),a.createElement(t.td,null,a.createElement(t.code,null,"bell-crossed")),a.createElement(t.td,null,a.createElement(t.code,null,"IconBellCrossed")),a.createElement(t.td,null,"Disable notifications")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.B)),a.createElement(t.td,null,a.createElement(t.code,null,"cogwheel")),a.createElement(t.td,null,a.createElement(t.code,null,"IconCogwheel")),a.createElement(t.td,null,"Settings")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.C)),a.createElement(t.td,null,a.createElement(t.code,null,"cogwheels")),a.createElement(t.td,null,a.createElement(t.code,null,"IconCogwheels")),a.createElement(t.td,null,"Manage, maintain, operate")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.F)),a.createElement(t.td,null,a.createElement(t.code,null,"copy")),a.createElement(t.td,null,a.createElement(t.code,null,"IconCopy")),a.createElement(t.td,null,"Copy")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.M)),a.createElement(t.td,null,a.createElement(t.code,null,"download")),a.createElement(t.td,null,a.createElement(t.code,null,"IconDownload")),a.createElement(t.td,null,"Download file to device")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.N)),a.createElement(t.td,null,a.createElement(t.code,null,"download-cloud")),a.createElement(t.td,null,a.createElement(t.code,null,"IconDownloadCloud")),a.createElement(t.td,null,"Download from cloud service")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.O)),a.createElement(t.td,null,a.createElement(t.code,null,"drag")),a.createElement(t.td,null,a.createElement(t.code,null,"IconDrag")),a.createElement(t.td,null,"Drag handle for draggable elements")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(ce.a)),a.createElement(t.td,null,a.createElement(t.code,null,"eye")),a.createElement(t.td,null,a.createElement(t.code,null,"IconEye")),a.createElement(t.td,null,"Show content")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(ce.I)),a.createElement(t.td,null,a.createElement(t.code,null,"eye-crossed")),a.createElement(t.td,null,a.createElement(t.code,null,"IconEyeCrossed")),a.createElement(t.td,null,"Hide content")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.a2)),a.createElement(t.td,null,a.createElement(t.code,null,"history")),a.createElement(t.td,null,a.createElement(t.code,null,"IconHistory")),a.createElement(t.td,null,"Browse history")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.ae)),a.createElement(t.td,null,a.createElement(t.code,null,"lock")),a.createElement(t.td,null,a.createElement(t.code,null,"IconLock")),a.createElement(t.td,null,"Content locked")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.af)),a.createElement(t.td,null,a.createElement(t.code,null,"lock-open")),a.createElement(t.td,null,a.createElement(t.code,null,"IconLockOpen")),a.createElement(t.td,null,"Content unlocked")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.aP)),a.createElement(t.td,null,a.createElement(t.code,null,"save-diskette")),a.createElement(t.td,null,a.createElement(t.code,null,"IconSaveDiskette")),a.createElement(t.td,null,"Saving")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.aQ)),a.createElement(t.td,null,a.createElement(t.code,null,"save-diskette-fill")),a.createElement(t.td,null,a.createElement(t.code,null,"IconSaveDisketteFill")),a.createElement(t.td,null,"Saving alternative")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.aS)),a.createElement(t.td,null,a.createElement(t.code,null,"scroll-cogwheel")),a.createElement(t.td,null,a.createElement(t.code,null,"IconScrollCogwheel")),a.createElement(t.td,null,"Manage project")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.aW)),a.createElement(t.td,null,a.createElement(t.code,null,"share")),a.createElement(t.td,null,a.createElement(t.code,null,"IconShare")),a.createElement(t.td,null,"Share content or link")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(le.I)),a.createElement(t.td,null,a.createElement(t.code,null,"upload")),a.createElement(t.td,null,a.createElement(t.code,null,"IconUpload")),a.createElement(t.td,null,"Upload file to server")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.bk)),a.createElement(t.td,null,a.createElement(t.code,null,"upload-cloud")),a.createElement(t.td,null,a.createElement(t.code,null,"IconUploadCloud")),a.createElement(t.td,null,"Upload to cloud service")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.bC)),a.createElement(t.td,null,a.createElement(t.code,null,"zoom-in")),a.createElement(t.td,null,a.createElement(t.code,null,"IconZoomIn")),a.createElement(t.td,null,"Increase zoom level")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.bD)),a.createElement(t.td,null,a.createElement(t.code,null,"zoom-out")),a.createElement(t.td,null,a.createElement(t.code,null,"IconZoomOut")),a.createElement(t.td,null,"Decrease zoom level")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.bE)),a.createElement(t.td,null,a.createElement(t.code,null,"zoom-text")),a.createElement(t.td,null,a.createElement(t.code,null,"IconZoomText")),a.createElement(t.td,null,"Text zoom settings")),a.createElement(t.tr,null,a.createElement(t.td,null,"[Table 4:Actions and settings icons]"),a.createElement(t.td),a.createElement(t.td),a.createElement(t.td)))),"\n",a.createElement(t.h3,{id:"forms-and-information",style:{position:"relative"}},"Forms and information",a.createElement(t.a,{href:"#forms-and-information","aria-label":"forms and information permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Icon"),a.createElement(t.th,null,"Core"),a.createElement(t.th,null,"React"),a.createElement(t.th,null,"Common usage"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.e)),a.createElement(t.td,null,a.createElement(t.code,null,"arrow-redo")),a.createElement(t.td,null,a.createElement(t.code,null,"IconArrowRedo")),a.createElement(t.td,null,"Redo edits")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.i)),a.createElement(t.td,null,a.createElement(t.code,null,"arrow-undo")),a.createElement(t.td,null,a.createElement(t.code,null,"IconArrowUndo")),a.createElement(t.td,null,"Undo edits")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.n)),a.createElement(t.td,null,a.createElement(t.code,null,"binoculars")),a.createElement(t.td,null,a.createElement(t.code,null,"IconBinoculars")),a.createElement(t.td,null,"Overview or a natural site")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement($.I)),a.createElement(t.td,null,a.createElement(t.code,null,"calendar")),a.createElement(t.td,null,a.createElement(t.code,null,"IconCalendar")),a.createElement(t.td,null,"Date")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.p)),a.createElement(t.td,null,a.createElement(t.code,null,"calendar-clock")),a.createElement(t.td,null,a.createElement(t.code,null,"IconCalendarClock")),a.createElement(t.td,null,"Date and time")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.q)),a.createElement(t.td,null,a.createElement(t.code,null,"calendar-cross")),a.createElement(t.td,null,a.createElement(t.code,null,"IconCalendarCross")),a.createElement(t.td,null,"Remove date")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.r)),a.createElement(t.td,null,a.createElement(t.code,null,"calendar-event")),a.createElement(t.td,null,a.createElement(t.code,null,"IconCalendarEvent")),a.createElement(t.td,null,"Event")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.s)),a.createElement(t.td,null,a.createElement(t.code,null,"calendar-plus")),a.createElement(t.td,null,a.createElement(t.code,null,"IconCalendarPlus")),a.createElement(t.td,null,"Add date")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.t)),a.createElement(t.td,null,a.createElement(t.code,null,"calendar-recurring")),a.createElement(t.td,null,a.createElement(t.code,null,"IconCalendarRecurring")),a.createElement(t.td,null,"Recurring date")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.w)),a.createElement(t.td,null,a.createElement(t.code,null,"children")),a.createElement(t.td,null,a.createElement(t.code,null,"IconChildren")),a.createElement(t.td,null,"Children")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.x)),a.createElement(t.td,null,a.createElement(t.code,null,"clock")),a.createElement(t.td,null,a.createElement(t.code,null,"IconClock")),a.createElement(t.td,null,"Time")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.y)),a.createElement(t.td,null,a.createElement(t.code,null,"clock-cross")),a.createElement(t.td,null,a.createElement(t.code,null,"IconClockCross")),a.createElement(t.td,null,"Remove time")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.z)),a.createElement(t.td,null,a.createElement(t.code,null,"clock-plus")),a.createElement(t.td,null,a.createElement(t.code,null,"IconClockPlus")),a.createElement(t.td,null,"Add time")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.E)),a.createElement(t.td,null,a.createElement(t.code,null,"company")),a.createElement(t.td,null,a.createElement(t.code,null,"IconCompany")),a.createElement(t.td,null,"Company name")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(le.b)),a.createElement(t.td,null,a.createElement(t.code,null,"document")),a.createElement(t.td,null,a.createElement(t.code,null,"IconDocument")),a.createElement(t.td,null,"Document / PDF")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.P)),a.createElement(t.td,null,a.createElement(t.code,null,"entrepreneur")),a.createElement(t.td,null,a.createElement(t.code,null,"IconEntrepreneur")),a.createElement(t.td,null,"Work status")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.Q)),a.createElement(t.td,null,a.createElement(t.code,null,"envelope")),a.createElement(t.td,null,a.createElement(t.code,null,"IconEnvelope")),a.createElement(t.td,null,"Email address / message")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.W)),a.createElement(t.td,null,a.createElement(t.code,null,"family")),a.createElement(t.td,null,a.createElement(t.code,null,"IconFamily")),a.createElement(t.td,null,"Information about family")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q._)),a.createElement(t.td,null,a.createElement(t.code,null,"hammers")),a.createElement(t.td,null,a.createElement(t.code,null,"IconHammers")),a.createElement(t.td,null,"Under construction")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(se.a)),a.createElement(t.td,null,a.createElement(t.code,null,"globe")),a.createElement(t.td,null,a.createElement(t.code,null,"IconGlobe")),a.createElement(t.td,null,"Web page address")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.Y)),a.createElement(t.td,null,a.createElement(t.code,null,"graph-columns")),a.createElement(t.td,null,a.createElement(t.code,null,"IconGraphColumns")),a.createElement(t.td,null,"Visualisation, column chart")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.Z)),a.createElement(t.td,null,a.createElement(t.code,null,"group")),a.createElement(t.td,null,a.createElement(t.code,null,"IconGroup")),a.createElement(t.td,null,"Group")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.a8)),a.createElement(t.td,null,a.createElement(t.code,null,"layers")),a.createElement(t.td,null,a.createElement(t.code,null,"IconLayers")),a.createElement(t.td,null,"Choose layers")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.a9)),a.createElement(t.td,null,a.createElement(t.code,null,"lightbulb")),a.createElement(t.td,null,a.createElement(t.code,null,"IconLightbulb")),a.createElement(t.td,null,"Idea or proposal")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.aa)),a.createElement(t.td,null,a.createElement(t.code,null,"link")),a.createElement(t.td,null,a.createElement(t.code,null,"IconLink")),a.createElement(t.td)),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(ue.I)),a.createElement(t.td,null,a.createElement(t.code,null,"link-external")),a.createElement(t.td,null,a.createElement(t.code,null,"IconLinkExternal")),a.createElement(t.td,null,"Link to another website / opens in other tab")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.ac)),a.createElement(t.td,null,a.createElement(t.code,null,"locate")),a.createElement(t.td,null,a.createElement(t.code,null,"IconLocate")),a.createElement(t.td,null,"Show users location")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.ad)),a.createElement(t.td,null,a.createElement(t.code,null,"location")),a.createElement(t.td,null,a.createElement(t.code,null,"IconLocation")),a.createElement(t.td,null,"Location")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.ag)),a.createElement(t.td,null,a.createElement(t.code,null,"map")),a.createElement(t.td,null,a.createElement(t.code,null,"IconMap")),a.createElement(t.td,null,"Map")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.ao)),a.createElement(t.td,null,a.createElement(t.code,null,"money-bag-fill")),a.createElement(t.td,null,a.createElement(t.code,null,"IconMoneyBagFill")),a.createElement(t.td,null,"Budget or amount of money")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.an)),a.createElement(t.td,null,a.createElement(t.code,null,"money-bag")),a.createElement(t.td,null,a.createElement(t.code,null,"IconMoneyBag")),a.createElement(t.td,null,"Budget or amount of money")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.ap)),a.createElement(t.td,null,a.createElement(t.code,null,"mover")),a.createElement(t.td,null,a.createElement(t.code,null,"IconMover")),a.createElement(t.td,null,"Immigrant information")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.aq)),a.createElement(t.td,null,a.createElement(t.code,null,"occupation")),a.createElement(t.td,null,a.createElement(t.code,null,"IconOccupation")),a.createElement(t.td,null,"Occupation")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.ar)),a.createElement(t.td,null,a.createElement(t.code,null,"paperclip")),a.createElement(t.td,null,a.createElement(t.code,null,"IconPaperclip")),a.createElement(t.td,null,"Attachment")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.as)),a.createElement(t.td,null,a.createElement(t.code,null,"pen")),a.createElement(t.td,null,a.createElement(t.code,null,"IconPen")),a.createElement(t.td,null,"Edit content")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.at)),a.createElement(t.td,null,a.createElement(t.code,null,"pen-line")),a.createElement(t.td,null,a.createElement(t.code,null,"IconPenLine")),a.createElement(t.td,null,"Fill content")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.au)),a.createElement(t.td,null,a.createElement(t.code,null,"person-female")),a.createElement(t.td,null,a.createElement(t.code,null,"IconPersonFemale")),a.createElement(t.td,null,"Gender female")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.av)),a.createElement(t.td,null,a.createElement(t.code,null,"person-genderless")),a.createElement(t.td,null,a.createElement(t.code,null,"IconPersonGenderless")),a.createElement(t.td,null,"Non-binary gender")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.aw)),a.createElement(t.td,null,a.createElement(t.code,null,"person-male")),a.createElement(t.td,null,a.createElement(t.code,null,"IconPersonMale")),a.createElement(t.td,null,"Gender male")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.ax)),a.createElement(t.td,null,a.createElement(t.code,null,"person-wheelchair")),a.createElement(t.td,null,a.createElement(t.code,null,"IconPersonWheelchair")),a.createElement(t.td,null,"Accessibility")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.ay)),a.createElement(t.td,null,a.createElement(t.code,null,"phone")),a.createElement(t.td,null,a.createElement(t.code,null,"IconPhone")),a.createElement(t.td,null,"Phone number")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(le.a)),a.createElement(t.td,null,a.createElement(t.code,null,"photo")),a.createElement(t.td,null,a.createElement(t.code,null,"IconPhoto")),a.createElement(t.td,null,"Photo or image file")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.az)),a.createElement(t.td,null,a.createElement(t.code,null,"photo-plus")),a.createElement(t.td,null,a.createElement(t.code,null,"IconPhotoPlus")),a.createElement(t.td,null,"Add photo or image file")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.aT)),a.createElement(t.td,null,a.createElement(t.code,null,"scroll-content")),a.createElement(t.td,null,a.createElement(t.code,null,"IconScrollContent")),a.createElement(t.td,null,"Project plan or instructions")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.aU)),a.createElement(t.td,null,a.createElement(t.code,null,"scroll-group")),a.createElement(t.td,null,a.createElement(t.code,null,"IconScrollGroup")),a.createElement(t.td,null,"Group of projects or blueprints")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.aR)),a.createElement(t.td,null,a.createElement(t.code,null,"scroll")),a.createElement(t.td,null,a.createElement(t.code,null,"IconScroll")),a.createElement(t.td,null,"Project or blueprint")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.aV)),a.createElement(t.td,null,a.createElement(t.code,null,"senior")),a.createElement(t.td,null,a.createElement(t.code,null,"IconSenior")),a.createElement(t.td,null,"Senior")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.aX)),a.createElement(t.td,null,a.createElement(t.code,null,"shield")),a.createElement(t.td,null,a.createElement(t.code,null,"IconShield")),a.createElement(t.td,null,"Protected or under warranty")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.b0)),a.createElement(t.td,null,a.createElement(t.code,null,"sliders")),a.createElement(t.td,null,a.createElement(t.code,null,"IconSliders")),a.createElement(t.td,null,"Filter settings")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(fe.I)),a.createElement(t.td,null,a.createElement(t.code,null,"sort")),a.createElement(t.td,null,a.createElement(t.code,null,"IconSort")),a.createElement(t.td,null,"Toggle sorting")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(fe.b)),a.createElement(t.td,null,a.createElement(t.code,null,"sort-ascending")),a.createElement(t.td,null,a.createElement(t.code,null,"IconSortAscending")),a.createElement(t.td,null,"Sorting from smallest to largest")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(fe.d)),a.createElement(t.td,null,a.createElement(t.code,null,"sort-descending")),a.createElement(t.td,null,a.createElement(t.code,null,"IconSortDescending")),a.createElement(t.td,null,"Sorting from largest to smallest")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(fe.a)),a.createElement(t.td,null,a.createElement(t.code,null,"sort-alphabetical-ascending")),a.createElement(t.td,null,a.createElement(t.code,null,"IconSortAlphabeticalAscending")),a.createElement(t.td,null,"Alphabetical sorting from A to Z")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(fe.c)),a.createElement(t.td,null,a.createElement(t.code,null,"sort-alphabetical-descending")),a.createElement(t.td,null,a.createElement(t.code,null,"IconSortAlphabeticalDescending")),a.createElement(t.td,null,"Alphabetical sorting from Z to A")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.b2)),a.createElement(t.td,null,a.createElement(t.code,null,"speechbubble")),a.createElement(t.td,null,a.createElement(t.code,null,"IconSpeechbubble")),a.createElement(t.td,null,"Chat / comment")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.b3)),a.createElement(t.td,null,a.createElement(t.code,null,"speechbubble-text")),a.createElement(t.td,null,a.createElement(t.code,null,"IconSpeechbubbleText")),a.createElement(t.td,null,"Chat / comment")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.b7)),a.createElement(t.td,null,a.createElement(t.code,null,"text-bold")),a.createElement(t.td,null,a.createElement(t.code,null,"IconTextBold")),a.createElement(t.td,null,"Text bold")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.b8)),a.createElement(t.td,null,a.createElement(t.code,null,"text-italic")),a.createElement(t.td,null,a.createElement(t.code,null,"IconTextItalic")),a.createElement(t.td,null,"Text italic")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.b9)),a.createElement(t.td,null,a.createElement(t.code,null,"text-tool")),a.createElement(t.td,null,a.createElement(t.code,null,"IconTextTool")),a.createElement(t.td,null,"Enable text editing")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.bg)),a.createElement(t.td,null,a.createElement(t.code,null,"trash")),a.createElement(t.td,null,a.createElement(t.code,null,"IconTrash")),a.createElement(t.td,null,"Trash")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.bh)),a.createElement(t.td,null,a.createElement(t.code,null,"traveler")),a.createElement(t.td,null,a.createElement(t.code,null,"IconTraveler")),a.createElement(t.td,null,"Traveler")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.bA)),a.createElement(t.td,null,a.createElement(t.code,null,"youth")),a.createElement(t.td,null,a.createElement(t.code,null,"IconYouth")),a.createElement(t.td,null,"Youth")),a.createElement(t.tr,null,a.createElement(t.td,null,"[Table 5:Forms and information icons]"),a.createElement(t.td),a.createElement(t.td),a.createElement(t.td)))),"\n",a.createElement(t.h3,{id:"media-and-devices",style:{position:"relative"}},"Media and devices",a.createElement(t.a,{href:"#media-and-devices","aria-label":"media and devices permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Icon"),a.createElement(t.th,null,"Core"),a.createElement(t.th,null,"React"),a.createElement(t.th,null,"Common usage"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.u)),a.createElement(t.td,null,a.createElement(t.code,null,"camera")),a.createElement(t.td,null,a.createElement(t.code,null,"IconCamera")),a.createElement(t.td,null,"Take photo")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.L)),a.createElement(t.td,null,a.createElement(t.code,null,"display")),a.createElement(t.td,null,a.createElement(t.code,null,"IconDisplay")),a.createElement(t.td,null,"Display / desktop version")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.$)),a.createElement(t.td,null,a.createElement(t.code,null,"headphones")),a.createElement(t.td,null,a.createElement(t.code,null,"IconHeadphones")),a.createElement(t.td,null,"Human customer service")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.ai)),a.createElement(t.td,null,a.createElement(t.code,null,"microphone")),a.createElement(t.td,null,a.createElement(t.code,null,"IconMicrophone")),a.createElement(t.td,null,"Microphone / sound recording")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.aj)),a.createElement(t.td,null,a.createElement(t.code,null,"microphone-crossed")),a.createElement(t.td,null,a.createElement(t.code,null,"IconMicrophoneCrossed")),a.createElement(t.td,null,"Microphone disabled")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.am)),a.createElement(t.td,null,a.createElement(t.code,null,"mobile")),a.createElement(t.td,null,a.createElement(t.code,null,"IconMobile")),a.createElement(t.td,null,"Mobile device / version")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.aA)),a.createElement(t.td,null,a.createElement(t.code,null,"playback-fastforward")),a.createElement(t.td,null,a.createElement(t.code,null,"IconPlaybackFastforward")),a.createElement(t.td,null,"Fast forward")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.aB)),a.createElement(t.td,null,a.createElement(t.code,null,"playback-next")),a.createElement(t.td,null,a.createElement(t.code,null,"IconPlaybackNext")),a.createElement(t.td,null,"Skip to next track")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(ae.a)),a.createElement(t.td,null,a.createElement(t.code,null,"playback-pause")),a.createElement(t.td,null,a.createElement(t.code,null,"IconPlaybackPause")),a.createElement(t.td,null,"Pause")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.aC)),a.createElement(t.td,null,a.createElement(t.code,null,"playback-play")),a.createElement(t.td,null,a.createElement(t.code,null,"IconPlaybackPlay")),a.createElement(t.td,null,"Play")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.aD)),a.createElement(t.td,null,a.createElement(t.code,null,"playback-previous")),a.createElement(t.td,null,a.createElement(t.code,null,"IconPlaybackPrevious")),a.createElement(t.td,null,"Skip to previous track")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.aE)),a.createElement(t.td,null,a.createElement(t.code,null,"playback-record")),a.createElement(t.td,null,a.createElement(t.code,null,"IconPlaybackRecord")),a.createElement(t.td,null,"Record")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.aF)),a.createElement(t.td,null,a.createElement(t.code,null,"playback-rewind")),a.createElement(t.td,null,a.createElement(t.code,null,"IconPlaybackRewind")),a.createElement(t.td,null,"Rewind")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.aG)),a.createElement(t.td,null,a.createElement(t.code,null,"playback-stop")),a.createElement(t.td,null,a.createElement(t.code,null,"IconPlaybackStop")),a.createElement(t.td,null,"Stop")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.aJ)),a.createElement(t.td,null,a.createElement(t.code,null,"podcast")),a.createElement(t.td,null,a.createElement(t.code,null,"IconPodcast")),a.createElement(t.td,null,"Podcast")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.aK)),a.createElement(t.td,null,a.createElement(t.code,null,"printer")),a.createElement(t.td,null,a.createElement(t.code,null,"IconPrinter")),a.createElement(t.td,null,"Print")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.bn)),a.createElement(t.td,null,a.createElement(t.code,null,"videocamera")),a.createElement(t.td,null,a.createElement(t.code,null,"IconVideocamera")),a.createElement(t.td,null,"Video")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.bo)),a.createElement(t.td,null,a.createElement(t.code,null,"videocamera-crossed")),a.createElement(t.td,null,a.createElement(t.code,null,"IconVideocameraCrossed")),a.createElement(t.td,null,"Video disabled")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.br)),a.createElement(t.td,null,a.createElement(t.code,null,"volume-high")),a.createElement(t.td,null,a.createElement(t.code,null,"IconVolumeHigh")),a.createElement(t.td,null,"Volume control / Volume level set to high")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.bs)),a.createElement(t.td,null,a.createElement(t.code,null,"volume-low")),a.createElement(t.td,null,a.createElement(t.code,null,"IconVolumeLow")),a.createElement(t.td,null,"Volume level set to low")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.bt)),a.createElement(t.td,null,a.createElement(t.code,null,"volume-minus")),a.createElement(t.td,null,a.createElement(t.code,null,"IconVolumeMinus")),a.createElement(t.td,null,"Decrease volume level")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.bu)),a.createElement(t.td,null,a.createElement(t.code,null,"volume-mute")),a.createElement(t.td,null,a.createElement(t.code,null,"IconVolumeMute")),a.createElement(t.td,null,"Mute volume / volume level set to mute")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.bv)),a.createElement(t.td,null,a.createElement(t.code,null,"volume-plus")),a.createElement(t.td,null,a.createElement(t.code,null,"IconVolumePlus")),a.createElement(t.td,null,"Increase volume level")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.bx)),a.createElement(t.td,null,a.createElement(t.code,null,"wifi")),a.createElement(t.td,null,a.createElement(t.code,null,"IconWifi")),a.createElement(t.td,null,"Wifi connection")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.by)),a.createElement(t.td,null,a.createElement(t.code,null,"wifi-crossed")),a.createElement(t.td,null,a.createElement(t.code,null,"IconWifiCrossed")),a.createElement(t.td,null,"No wifi connection")),a.createElement(t.tr,null,a.createElement(t.td,null,"[Table 6:Media and devices icons]"),a.createElement(t.td),a.createElement(t.td),a.createElement(t.td)))),"\n",a.createElement(t.h3,{id:"other",style:{position:"relative"}},"Other",a.createElement(t.a,{href:"#other","aria-label":"other permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Icon"),a.createElement(t.th,null,"Core"),a.createElement(t.th,null,"React"),a.createElement(t.th,null,"Common usage"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.j)),a.createElement(t.td,null,a.createElement(t.code,null,"at")),a.createElement(t.td,null,a.createElement(t.code,null,"IconAtSign")),a.createElement(t.td,null,"E-mail, mention user")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.R)),a.createElement(t.td,null,a.createElement(t.code,null,"euro")),a.createElement(t.td,null,a.createElement(t.code,null,"IconEuroSign")),a.createElement(t.td)),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.be)),a.createElement(t.td,null,a.createElement(t.code,null,"ticket")),a.createElement(t.td,null,a.createElement(t.code,null,"IconTicket")),a.createElement(t.td)),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.o)),a.createElement(t.td,null,a.createElement(t.code,null,"cake")),a.createElement(t.td,null,a.createElement(t.code,null,"IconCake")),a.createElement(t.td,null,"Date of birth")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.A)),a.createElement(t.td,null,a.createElement(t.code,null,"coffee-cup-saucer")),a.createElement(t.td,null,a.createElement(t.code,null,"IconCoffeeCupSaucer")),a.createElement(t.td,null,"Coffee")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.a7)),a.createElement(t.td,null,a.createElement(t.code,null,"key")),a.createElement(t.td,null,a.createElement(t.code,null,"IconKey")),a.createElement(t.td,null,"Key")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.aY)),a.createElement(t.td,null,a.createElement(t.code,null,"shopping-cart")),a.createElement(t.td,null,a.createElement(t.code,null,"IconShoppingCart")),a.createElement(t.td,null,"Shopping, retail")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.aN)),a.createElement(t.td,null,a.createElement(t.code,null,"restaurant")),a.createElement(t.td,null,a.createElement(t.code,null,"IconRestaurant")),a.createElement(t.td,null,"Restaurant")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.bm)),a.createElement(t.td,null,a.createElement(t.code,null,"vaccine")),a.createElement(t.td,null,a.createElement(t.code,null,"IconVaccine")),a.createElement(t.td,null,"Vaccine")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.bq)),a.createElement(t.td,null,a.createElement(t.code,null,"virus")),a.createElement(t.td,null,a.createElement(t.code,null,"IconVirus")),a.createElement(t.td,null,"Virus")),a.createElement(t.tr,null,a.createElement(t.td,null,"[Table 7:Other icons]"),a.createElement(t.td),a.createElement(t.td),a.createElement(t.td)))),"\n",a.createElement(t.h3,{id:"social-media",style:{position:"relative"}},"Social media",a.createElement(t.a,{href:"#social-media","aria-label":"social media permalink",className:"header-anchor after"},a.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",a.createElement(t.table,null,a.createElement(t.thead,null,a.createElement(t.tr,null,a.createElement(t.th,null,"Icon"),a.createElement(t.th,null,"Core"),a.createElement(t.th,null,"React"),a.createElement(t.th,null,"Common usage"))),a.createElement(t.tbody,null,a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.K)),a.createElement(t.td,null,a.createElement(t.code,null,"discord")),a.createElement(t.td,null,a.createElement(t.code,null,"IconDiscord")),a.createElement(t.td)),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.V)),a.createElement(t.td,null,a.createElement(t.code,null,"facebook")),a.createElement(t.td,null,a.createElement(t.code,null,"IconFacebook")),a.createElement(t.td)),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.X)),a.createElement(t.td,null,a.createElement(t.code,null,"google")),a.createElement(t.td,null,a.createElement(t.code,null,"IconGoogle")),a.createElement(t.td,null,"Google account login")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.a6)),a.createElement(t.td,null,a.createElement(t.code,null,"instagram")),a.createElement(t.td,null,a.createElement(t.code,null,"IconInstagram")),a.createElement(t.td)),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.ab)),a.createElement(t.td,null,a.createElement(t.code,null,"linkedin")),a.createElement(t.td,null,a.createElement(t.code,null,"IconLinkedin")),a.createElement(t.td)),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.aO)),a.createElement(t.td,null,a.createElement(t.code,null,"rss")),a.createElement(t.td,null,a.createElement(t.code,null,"IconRss")),a.createElement(t.td)),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.b1)),a.createElement(t.td,null,a.createElement(t.code,null,"snapchat")),a.createElement(t.td,null,a.createElement(t.code,null,"IconSnapchat")),a.createElement(t.td)),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.bf)),a.createElement(t.td,null,a.createElement(t.code,null,"tiktok")),a.createElement(t.td,null,a.createElement(t.code,null,"IconTiktok")),a.createElement(t.td)),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.bi)),a.createElement(t.td,null,a.createElement(t.code,null,"twitch")),a.createElement(t.td,null,a.createElement(t.code,null,"IconTwitch")),a.createElement(t.td)),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.bj)),a.createElement(t.td,null,a.createElement(t.code,null,"twitter")),a.createElement(t.td,null,a.createElement(t.code,null,"IconTwitter")),a.createElement(t.td)),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.bp)),a.createElement(t.td,null,a.createElement(t.code,null,"vimeo")),a.createElement(t.td,null,a.createElement(t.code,null,"IconVimeo")),a.createElement(t.td)),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.bw)),a.createElement(t.td,null,a.createElement(t.code,null,"whatsapp")),a.createElement(t.td,null,a.createElement(t.code,null,"IconWhatsapp")),a.createElement(t.td)),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.bz)),a.createElement(t.td,null,a.createElement(t.code,null,"yle")),a.createElement(t.td,null,a.createElement(t.code,null,"IconYle")),a.createElement(t.td,null,"Yle-tunnus account")),a.createElement(t.tr,null,a.createElement(t.td,null,a.createElement(q.bB)),a.createElement(t.td,null,a.createElement(t.code,null,"youtube")),a.createElement(t.td,null,a.createElement(t.code,null,"IconYoutube")),a.createElement(t.td)),a.createElement(t.tr,null,a.createElement(t.td,null,"[Table 8:Social media icons]"),a.createElement(t.td),a.createElement(t.td),a.createElement(t.td)))))}var Wo=function(e){return void 0===e&&(e={}),a.createElement(Fo,e,a.createElement(Uo,e))};function Vo(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}},87138:function(e,t,n){"use strict";n.r(t);var o=n(11151),r=n(67294),l=n(89482),a=(n(18607),n(26127));function i(e){const t=Object.assign({h1:"h1",a:"a",span:"span"},(0,o.ah)(),e.components);return a.Z||c("PageTabs",!1),a.Z.Tab||c("PageTabs.Tab",!0),a.Z.TabList||c("PageTabs.TabList",!0),a.Z.TabPanel||c("PageTabs.TabPanel",!0),r.createElement(r.Fragment,null,r.createElement(t.h1,{id:"icons",style:{position:"relative"}},"Icons",r.createElement(t.a,{href:"#icons","aria-label":"icons permalink",className:"header-anchor after"},r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span>'}}))),"\n",r.createElement(l.Z,null,"The HDS icon library is a set of icons specially designed for use in digital user interfaces."),"\n",r.createElement(a.Z,{pageContext:e.pageContext},r.createElement(a.Z.TabList,null,r.createElement(a.Z.Tab,{href:"/"},"Usage"),r.createElement(a.Z.Tab,{href:"/list"},"Icons")),r.createElement(a.Z.TabPanel,null,e.children)))}function c(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,o.ah)(),e.components);return t?r.createElement(t,e,r.createElement(i,e)):i(e)}},59430:function(){}}]);
\ No newline at end of file
diff --git a/docs/hds-1817-stepbystep-docs/component---src-docs-foundation-visual-assets-icons-list-mdx-d056be11b6d5144d24be.js.LICENSE.txt b/docs/hds-1817-stepbystep-docs/component---src-docs-foundation-visual-assets-icons-list-mdx-d056be11b6d5144d24be.js.LICENSE.txt
new file mode 100644
index 00000000000..8d392d0db8d
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/component---src-docs-foundation-visual-assets-icons-list-mdx-d056be11b6d5144d24be.js.LICENSE.txt
@@ -0,0 +1,6 @@
+/*!
+ * cookie
+ * Copyright(c) 2012-2014 Roman Shtylman
+ * Copyright(c) 2015 Douglas Christopher Wilson
+ * MIT Licensed
+ */
diff --git a/docs/hds-1817-stepbystep-docs/components/accordion/accessibility/index.html b/docs/hds-1817-stepbystep-docs/components/accordion/accessibility/index.html
index 4f37fa96c8e..e512d87bcef 100644
--- a/docs/hds-1817-stepbystep-docs/components/accordion/accessibility/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/accordion/accessibility/index.html
@@ -66,7 +66,7 @@ <h3 id="pay-attention-to" style="position:relative" class="page-heading-3 headin
 </ul>
 </li>
 <li>Make sure that the keyboard user can navigate out of the accordion area without closing the accordion. See <a aria-label="WCAG 2.1.2 No Keyboard Trap guideline. Opens a different website." class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="https://www.w3.org/TR/WCAG21/#no-keyboard-trap">WCAG 2.1.2 No Keyboard Trap guideline<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Link-module_icon__3ReCc link_icon__i_HqN Link-module_verticalAlignMediumIcon__12PVa link_vertical-align-medium-icon__3IWi1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="link-external" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z" fill="currentColor"></path></svg></a> for more information.</li>
-</ul></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-104" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-104)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+</ul></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-102" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-102)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/accordion/customisation/index.html b/docs/hds-1817-stepbystep-docs/components/accordion/customisation/index.html
index b991bf0b4ae..6eb98d5746c 100644
--- a/docs/hds-1817-stepbystep-docs/components/accordion/customisation/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/accordion/customisation/index.html
@@ -140,7 +140,7 @@ <h3 id="customisation-example" style="position:relative" class="page-heading-3 h
     color: transparent !important;
   }
 }
-</style></div></div></div></div></div><div class="playground-block-buttons"><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS Button-module_size-small__3lizH button_hds-button--small__2NFef"><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Copy code</span></button><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS Button-module_size-small__3lizH button_hds-button--small__2NFef"><div class="Button-module_icon__O-h7R button_hds-icon__17j8Z" aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-undo" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 10C16.2091 10 18 11.7909 18 14C18 16.2091 16.2091 18 14 18H10V20H14.0364L14.188 19.9981C17.4131 19.9171 20 17.2611 20 14C20 10.7389 17.4131 8.08285 14.188 8.0019L8.5 8L12 4.5L10.5 3L4.5 9L10.5 15L12 13.5L8.5 10H14Z" fill="currentColor"></path></svg></div><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Reset example</span></button></div></div></div></div></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-99" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-99)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+</style></div></div></div></div></div><div class="playground-block-buttons"><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS Button-module_size-small__3lizH button_hds-button--small__2NFef"><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Copy code</span></button><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS Button-module_size-small__3lizH button_hds-button--small__2NFef"><div class="Button-module_icon__O-h7R button_hds-icon__17j8Z" aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-undo" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 10C16.2091 10 18 11.7909 18 14C18 16.2091 16.2091 18 14 18H10V20H14.0364L14.188 19.9981C17.4131 19.9171 20 17.2611 20 14C20 10.7389 17.4131 8.08285 14.188 8.0019L8.5 8L12 4.5L10.5 3L4.5 9L10.5 15L12 13.5L8.5 10H14Z" fill="currentColor"></path></svg></div><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Reset example</span></button></div></div></div></div></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-98" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-98)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/accordion/tabs/index.html b/docs/hds-1817-stepbystep-docs/components/accordion/tabs/index.html
index 3948bf6e685..07f6e73c3cc 100644
--- a/docs/hds-1817-stepbystep-docs/components/accordion/tabs/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/accordion/tabs/index.html
@@ -56,7 +56,7 @@
   </script><link rel="manifest" href="/hds-demo/hds-1817-stepbystep-docs/manifest.webmanifest" crossorigin="anonymous"/><link rel="apple-touch-icon" sizes="any" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/favicon-32x32.ico"/><link rel="apple-touch-icon" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/apple-touch-icon.png"/><link rel="apple-touch-icon" sizes="192x192" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/favicon-192x192.png"/><link rel="apple-touch-icon" sizes="512x512" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/favicon-512x512.png"/><link rel="preconnect" href="https://webanalytics.digiaiiris.com/js"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="page text-body"><header class="hds-header Header-module_header__291GF pageHeader" id="page-header"><div class="Header-module_headerBackgroundWrapper__KsFy2"><a href="#content" class="SkipLink-module_skipLink__1knzF"><span class="SkipLink-module_skipLinkLabel__21n5B">Skip to content</span></a><div class="HeaderActionBar-module_headerActionBarContainer__5tfj-"><div class="HeaderActionBar-module_headerActionBar__lPeGE"><a href="https://hds.hel.fi" aria-label="City of Helsinki Logo" class="HeaderActionBar-module_titleAndLogoContainer__2LEAb HeaderActionBar-module_logo__2r2T0"><span class="HeaderActionBarLogo-module_logoWrapper__8NgfS"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></span></a><a href="https://hds.hel.fi" aria-label="Helsinki: Helsinki Design System" class="HeaderActionBar-module_titleAndLogoContainer__2LEAb HeaderActionBar-module_title__opzt9 HeaderActionBar-module_normal__3B4qi"><span class="HeaderActionBar-module_title__opzt9"><div class="page-header-title"><div>Helsinki Design System</div><div class="page-header-title-badge"><img style="filter:invert(1)" alt="HDS version number: 2.15.0" src="https://img.shields.io/github/v/release/City-of-Helsinki/helsinki-design-system?label=&amp;style=for-the-badge&amp;color=1a1a1a"/></div></div></span></a><div class="HeaderActionBar-module_headerActions__3lNnM"></div></div></div><div class="HeaderNavigationMenu-module_headerNavigationMenuContainer__2nK9z"><nav class="HeaderNavigationMenu-module_headerNavigationMenu__3G6-N"><ul class="HeaderNavigationMenu-module_headerNavigationMenuList__3HIzx"></ul></nav></div></div></header><div class="page-content"><aside class="side-content"><nav class="SideNavigation-module_sideNavigation__3X-9P" id="side-navigation" aria-label="Components"><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS Button-module_fullWidth__31eVK button_hds-button--fullwidth__1_hG9 SideNavigation-module_toggleButton__10tXH" aria-controls="side-navigation-menu" aria-expanded="false" aria-haspopup="true"><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Navigate to page</span><div class="Button-module_icon__O-h7R button_hds-icon__17j8Z" aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-down" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 13.5L17 8.5L18.5 10L12 16.5L5.5 10L7 8.5L12 13.5Z" fill="currentColor"></path></svg></div></button><ul class="SideNavigation-module_mainLevelList__SLZKQ" aria-label="Navigate to page" id="side-navigation-menu"><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Overview" id="side-nav-components" href="/hds-demo/hds-1817-stepbystep-docs/components"><span class="MainLevel-module_label__uWKJ7">Overview</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_active__3IkdI MainLevel-module_open__2yWFj"><a aria-current="page" aria-label="Accordion" id="side-nav-components-accordion" href="/hds-demo/hds-1817-stepbystep-docs/components/accordion"><span class="MainLevel-module_label__uWKJ7">Accordion</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Breadcrumb" id="side-nav-components-breadcrumb" href="/hds-demo/hds-1817-stepbystep-docs/components/breadcrumb"><span class="MainLevel-module_label__uWKJ7">Breadcrumb</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Button" id="side-nav-components-buttons" href="/hds-demo/hds-1817-stepbystep-docs/components/buttons"><span class="MainLevel-module_label__uWKJ7">Button</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Card" id="side-nav-components-card" href="/hds-demo/hds-1817-stepbystep-docs/components/card"><span class="MainLevel-module_label__uWKJ7">Card</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Checkbox" id="side-nav-components-checkbox" href="/hds-demo/hds-1817-stepbystep-docs/components/checkbox"><span class="MainLevel-module_label__uWKJ7">Checkbox</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="CookieConsent" id="side-nav-components-cookie-consent" href="/hds-demo/hds-1817-stepbystep-docs/components/cookie-consent"><span class="MainLevel-module_label__uWKJ7">CookieConsent</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="DateInput" id="side-nav-components-date-input" href="/hds-demo/hds-1817-stepbystep-docs/components/date-input"><span class="MainLevel-module_label__uWKJ7">DateInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Dialog" id="side-nav-components-dialog" href="/hds-demo/hds-1817-stepbystep-docs/components/dialog"><span class="MainLevel-module_label__uWKJ7">Dialog</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Dropdown" id="side-nav-components-dropdown" href="/hds-demo/hds-1817-stepbystep-docs/components/dropdown"><span class="MainLevel-module_label__uWKJ7">Dropdown</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Fieldset" id="side-nav-components-fieldset" href="/hds-demo/hds-1817-stepbystep-docs/components/fieldset"><span class="MainLevel-module_label__uWKJ7">Fieldset</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="FileInput" id="side-nav-components-file-input" href="/hds-demo/hds-1817-stepbystep-docs/components/file-input"><span class="MainLevel-module_label__uWKJ7">FileInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Footer" id="side-nav-components-footer" href="/hds-demo/hds-1817-stepbystep-docs/components/footer"><span class="MainLevel-module_label__uWKJ7">Footer</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Header" id="side-nav-components-header" href="/hds-demo/hds-1817-stepbystep-docs/components/header"><span class="MainLevel-module_label__uWKJ7">Header</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Hero" id="side-nav-components-hero" href="/hds-demo/hds-1817-stepbystep-docs/components/hero"><span class="MainLevel-module_label__uWKJ7">Hero</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Highlight" id="side-nav-components-highlight" href="/hds-demo/hds-1817-stepbystep-docs/components/highlight"><span class="MainLevel-module_label__uWKJ7">Highlight</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Icon" id="side-nav-components-icon" href="/hds-demo/hds-1817-stepbystep-docs/components/icon"><span class="MainLevel-module_label__uWKJ7">Icon</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Koros" id="side-nav-components-koros" href="/hds-demo/hds-1817-stepbystep-docs/components/koros"><span class="MainLevel-module_label__uWKJ7">Koros</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Link" id="side-nav-components-link" href="/hds-demo/hds-1817-stepbystep-docs/components/link"><span class="MainLevel-module_label__uWKJ7">Link</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Linkbox" id="side-nav-components-linkbox" href="/hds-demo/hds-1817-stepbystep-docs/components/linkbox"><span class="MainLevel-module_label__uWKJ7">Linkbox</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="LoadingSpinner" id="side-nav-components-loading-spinner" href="/hds-demo/hds-1817-stepbystep-docs/components/loading-spinner"><span class="MainLevel-module_label__uWKJ7">LoadingSpinner</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Logo" id="side-nav-components-logo" href="/hds-demo/hds-1817-stepbystep-docs/components/logo"><span class="MainLevel-module_label__uWKJ7">Logo</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Notification" id="side-nav-components-notification" href="/hds-demo/hds-1817-stepbystep-docs/components/notification"><span class="MainLevel-module_label__uWKJ7">Notification</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="NumberInput" id="side-nav-components-number-input" href="/hds-demo/hds-1817-stepbystep-docs/components/number-input"><span class="MainLevel-module_label__uWKJ7">NumberInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Pagination" id="side-nav-components-pagination" href="/hds-demo/hds-1817-stepbystep-docs/components/pagination"><span class="MainLevel-module_label__uWKJ7">Pagination</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="PasswordInput" id="side-nav-components-password-input" href="/hds-demo/hds-1817-stepbystep-docs/components/password-input"><span class="MainLevel-module_label__uWKJ7">PasswordInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="PhoneInput" id="side-nav-components-phone-input" href="/hds-demo/hds-1817-stepbystep-docs/components/phone-input"><span class="MainLevel-module_label__uWKJ7">PhoneInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="RadioButton" id="side-nav-components-radio-button" href="/hds-demo/hds-1817-stepbystep-docs/components/radio-button"><span class="MainLevel-module_label__uWKJ7">RadioButton</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="SearchInput" id="side-nav-components-search-input" href="/hds-demo/hds-1817-stepbystep-docs/components/search-input"><span class="MainLevel-module_label__uWKJ7">SearchInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="SelectionGroup" id="side-nav-components-selection-group" href="/hds-demo/hds-1817-stepbystep-docs/components/selection-group"><span class="MainLevel-module_label__uWKJ7">SelectionGroup</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="SideNavigation" id="side-nav-components-side-navigation" href="/hds-demo/hds-1817-stepbystep-docs/components/side-navigation"><span class="MainLevel-module_label__uWKJ7">SideNavigation</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="StatusLabel" id="side-nav-components-status-label" href="/hds-demo/hds-1817-stepbystep-docs/components/status-label"><span class="MainLevel-module_label__uWKJ7">StatusLabel</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="StepByStep" id="side-nav-components-step-by-step" href="/hds-demo/hds-1817-stepbystep-docs/components/step-by-step"><span class="MainLevel-module_label__uWKJ7">StepByStep</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Stepper" id="side-nav-components-stepper" href="/hds-demo/hds-1817-stepbystep-docs/components/stepper"><span class="MainLevel-module_label__uWKJ7">Stepper</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Table" id="side-nav-components-table" href="/hds-demo/hds-1817-stepbystep-docs/components/table"><span class="MainLevel-module_label__uWKJ7">Table</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Tabs" id="side-nav-components-tabs" href="/hds-demo/hds-1817-stepbystep-docs/components/tabs"><span class="MainLevel-module_label__uWKJ7">Tabs</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Tag" id="side-nav-components-tag" href="/hds-demo/hds-1817-stepbystep-docs/components/tag"><span class="MainLevel-module_label__uWKJ7">Tag</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="TextArea" id="side-nav-components-text-area" href="/hds-demo/hds-1817-stepbystep-docs/components/text-area"><span class="MainLevel-module_label__uWKJ7">TextArea</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="TextInput" id="side-nav-components-text-input" href="/hds-demo/hds-1817-stepbystep-docs/components/text-input"><span class="MainLevel-module_label__uWKJ7">TextInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="TimeInput" id="side-nav-components-time-input" href="/hds-demo/hds-1817-stepbystep-docs/components/time-input"><span class="MainLevel-module_label__uWKJ7">TimeInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="ToggleButton" id="side-nav-components-toggle-button" href="/hds-demo/hds-1817-stepbystep-docs/components/toggle-button"><span class="MainLevel-module_label__uWKJ7">ToggleButton</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Tooltip" id="side-nav-components-tooltip" href="/hds-demo/hds-1817-stepbystep-docs/components/tooltip"><span class="MainLevel-module_label__uWKJ7">Tooltip</span></a></li></ul></nav></aside><main id="content" class="main-content"><h1 id="accordion" style="position:relative" class="page-heading-1 heading-xl-mobile">Accordion<a href="#accordion" aria-label="accordion permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h1>
 <div class="status-label-description"><span class="StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H">Stable</span><span class="StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST" style="margin-left:var(--spacing-xs)">Accessible</span><div class="Tooltip-module_root__1Yo9t status-label-tooltip"><button type="button" class="Tooltip-module_button__2x9m0" title="Tooltip" aria-label="Tooltip" aria-expanded="false"><span aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="question-circle" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM13 16V18H11V16H13ZM12.0437 5.75C14.0343 5.75 15.7173 7.29464 15.7173 9.42361C15.7173 10.7806 15.2461 11.489 14.161 12.306L13.9187 12.4844C13.1753 13.0295 12.9556 13.3359 12.9386 14.142L12.9375 14.25H10.9375C10.9375 12.6746 11.4591 11.8378 12.6143 10.9622L12.8618 10.7796C13.5685 10.2628 13.7173 10.0539 13.7173 9.42361C13.7173 8.43934 12.9662 7.75 12.0437 7.75C11.1907 7.75 10.4785 8.34077 10.3816 9.20835L10.3734 9.30587L8.37663 9.19182C8.49191 7.17347 10.1344 5.75 12.0437 5.75Z" fill="currentColor"></path></svg></span></button></div></div>
 <p style="font-size:var(--fontsize-body-xl);color:var(--color-black-90);max-width:600px">Accordions can be used to hide and reveal information. When used correctly, they are a good way to make a higher amount of information easier to digest for the user.</p>
-<div class="Tabs-module_tabs__2Ww5F"><div class="Tabs-module_tablistBar__elMv9 page-tabs-list"><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-left" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 12L15.5 17L14 18.5L7.5 12L14 5.5L15.5 7L10.5 12Z" fill="currentColor"></path></svg></button></div><div class="Tabs-module_tablist__1iuDO"><ul role="tablist" style="width:0px"><li role="tab" aria-selected="true" aria-controls="tab-0-panel" tabindex="0" id="tab-0-button" class="Tabs-module_tab__3oOoX Tabs-module_active__1Ic3B"><span>Usage</span></li><li role="tab" aria-selected="false" aria-controls="tab-1-panel" tabindex="-1" id="tab-1-button" class="Tabs-module_tab__3oOoX"><span>Code</span></li><li role="tab" aria-selected="false" aria-controls="tab-2-panel" tabindex="-1" id="tab-2-button" class="Tabs-module_tab__3oOoX"><span>Accessibility</span></li><li role="tab" aria-selected="false" aria-controls="tab-3-panel" tabindex="-1" id="tab-3-button" class="Tabs-module_tab__3oOoX"><span>Customisation</span></li></ul></div><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z" fill="currentColor"></path></svg></button></div></div><div id="tab-0-panel" role="tabpanel" aria-labelledby="tab-0-button"></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-83" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-83)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="Tabs-module_tabs__2Ww5F"><div class="Tabs-module_tablistBar__elMv9 page-tabs-list"><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-left" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 12L15.5 17L14 18.5L7.5 12L14 5.5L15.5 7L10.5 12Z" fill="currentColor"></path></svg></button></div><div class="Tabs-module_tablist__1iuDO"><ul role="tablist" style="width:0px"><li role="tab" aria-selected="true" aria-controls="tab-0-panel" tabindex="0" id="tab-0-button" class="Tabs-module_tab__3oOoX Tabs-module_active__1Ic3B"><span>Usage</span></li><li role="tab" aria-selected="false" aria-controls="tab-1-panel" tabindex="-1" id="tab-1-button" class="Tabs-module_tab__3oOoX"><span>Code</span></li><li role="tab" aria-selected="false" aria-controls="tab-2-panel" tabindex="-1" id="tab-2-button" class="Tabs-module_tab__3oOoX"><span>Accessibility</span></li><li role="tab" aria-selected="false" aria-controls="tab-3-panel" tabindex="-1" id="tab-3-button" class="Tabs-module_tab__3oOoX"><span>Customisation</span></li></ul></div><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z" fill="currentColor"></path></svg></button></div></div><div id="tab-0-panel" role="tabpanel" aria-labelledby="tab-0-button"></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-70" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-70)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/breadcrumb/code/index.html b/docs/hds-1817-stepbystep-docs/components/breadcrumb/code/index.html
index 7c5f640963f..7b262d1086c 100644
--- a/docs/hds-1817-stepbystep-docs/components/breadcrumb/code/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/breadcrumb/code/index.html
@@ -117,7 +117,7 @@ <h3 id="packages" style="position:relative" class="page-heading-3 heading-m">Pac
 <div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><thead><tr class="hds-table__header-row dark"><th scope="col">Package</th><th scope="col">Included</th><th scope="col">Storybook link</th><th scope="col">Source link</th></tr></thead><tbody class="hds-table__content"><tr><td><strong>HDS React</strong></td><td><div style="display:flex;gap:var(--spacing-3-xs)"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="check-circle-fill" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM16.5 8L18 9.5L10.5 17L6 12.5L7.5 11L10.5 14L16.5 8Z" fill="currentColor"></path></svg> Yes </div></td><td><a aria-label="View in Storybook. Opens in a new tab" class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/storybook/react/?path=/story/components-breadcrumb--example" target="_blank" rel="noopener">View in Storybook</a></td><td><a aria-label="View source. Opens in a new tab Opens a different website." class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/react/src/components/breadcrumb" target="_blank" rel="noopener">View source<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Link-module_icon__3ReCc link_icon__i_HqN Link-module_verticalAlignMediumIcon__12PVa link_vertical-align-medium-icon__3IWi1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="link-external" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z" fill="currentColor"></path></svg></a></td></tr><tr><td><strong>HDS Core</strong></td><td><div style="display:flex;gap:var(--spacing-3-xs)"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="check-circle-fill" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM16.5 8L18 9.5L10.5 17L6 12.5L7.5 11L10.5 14L16.5 8Z" fill="currentColor"></path></svg> Yes </div></td><td><a aria-label="View in Storybook. Opens in a new tab" class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/storybook/core/?path=/story/components-breadcrumb--breadcrumb" target="_blank" rel="noopener">View in Storybook</a></td><td><a aria-label="View source. Opens in a new tab Opens a different website." class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/core/src/components/breadcrumb" target="_blank" rel="noopener">View source<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Link-module_icon__3ReCc link_icon__i_HqN Link-module_verticalAlignMediumIcon__12PVa link_vertical-align-medium-icon__3IWi1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="link-external" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z" fill="currentColor"></path></svg></a></td></tr></tbody></table></div>
 <h3 id="properties" style="position:relative" class="page-heading-3 heading-m">Properties<a href="#properties" aria-label="properties permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h3>
 <p>Note! You can find the full list of properties in the <a aria-label="React Storybook. Opens in a new tab" class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/storybook/react/?path=/story/components-breadcrumb--example" target="_blank" rel="noopener">React Storybook.</a></p>
-<div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><thead><tr class="hds-table__header-row dark"><th scope="col">Property</th><th scope="col">Description</th><th scope="col">Values</th><th scope="col">Default value</th></tr></thead><tbody class="hds-table__content"><tr><td><code>ariaLabel</code></td><td><code>aria-label</code> of the <code>&lt;nav&gt;</code> element created by the component</td><td><code>string</code></td><td>-</td></tr><tr><td><code>list</code></td><td>Array of breadcrumb items. Each item is an object with <code>title</code> and <code>path</code></td><td><code>BreadcrumbListItem[]</code></td><td>-</td></tr></tbody></table></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-66" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-66)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><thead><tr class="hds-table__header-row dark"><th scope="col">Property</th><th scope="col">Description</th><th scope="col">Values</th><th scope="col">Default value</th></tr></thead><tbody class="hds-table__content"><tr><td><code>ariaLabel</code></td><td><code>aria-label</code> of the <code>&lt;nav&gt;</code> element created by the component</td><td><code>string</code></td><td>-</td></tr><tr><td><code>list</code></td><td>Array of breadcrumb items. Each item is an object with <code>title</code> and <code>path</code></td><td><code>BreadcrumbListItem[]</code></td><td>-</td></tr></tbody></table></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-65" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-65)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/breadcrumb/customisation/index.html b/docs/hds-1817-stepbystep-docs/components/breadcrumb/customisation/index.html
index 80705ad7434..3b7d113ed07 100644
--- a/docs/hds-1817-stepbystep-docs/components/breadcrumb/customisation/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/breadcrumb/customisation/index.html
@@ -127,7 +127,7 @@ <h3 id="customisation-example" style="position:relative" class="page-heading-3 h
     color: transparent !important;
   }
 }
-</style></div></div></div></div></div><div class="playground-block-buttons"><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS Button-module_size-small__3lizH button_hds-button--small__2NFef"><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Copy code</span></button><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS Button-module_size-small__3lizH button_hds-button--small__2NFef"><div class="Button-module_icon__O-h7R button_hds-icon__17j8Z" aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-undo" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 10C16.2091 10 18 11.7909 18 14C18 16.2091 16.2091 18 14 18H10V20H14.0364L14.188 19.9981C17.4131 19.9171 20 17.2611 20 14C20 10.7389 17.4131 8.08285 14.188 8.0019L8.5 8L12 4.5L10.5 3L4.5 9L10.5 15L12 13.5L8.5 10H14Z" fill="currentColor"></path></svg></div><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Reset example</span></button></div></div></div></div></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-64" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-64)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+</style></div></div></div></div></div><div class="playground-block-buttons"><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS Button-module_size-small__3lizH button_hds-button--small__2NFef"><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Copy code</span></button><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS Button-module_size-small__3lizH button_hds-button--small__2NFef"><div class="Button-module_icon__O-h7R button_hds-icon__17j8Z" aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-undo" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 10C16.2091 10 18 11.7909 18 14C18 16.2091 16.2091 18 14 18H10V20H14.0364L14.188 19.9981C17.4131 19.9171 20 17.2611 20 14C20 10.7389 17.4131 8.08285 14.188 8.0019L8.5 8L12 4.5L10.5 3L4.5 9L10.5 15L12 13.5L8.5 10H14Z" fill="currentColor"></path></svg></div><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Reset example</span></button></div></div></div></div></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-66" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-66)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/breadcrumb/index.html b/docs/hds-1817-stepbystep-docs/components/breadcrumb/index.html
index f115e94817f..d35367a21ad 100644
--- a/docs/hds-1817-stepbystep-docs/components/breadcrumb/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/breadcrumb/index.html
@@ -65,7 +65,7 @@ <h3 id="principles" style="position:relative" class="page-heading-3 heading-m">P
 <li>The breadcrumb may show the current page as the last item on the list. The current page should not be a link.</li>
 <li>The mobile version shows only one item which is a link to one step upward in the path.</li>
 <li>If there are no links to parent pages, breadcrumb should not be visible.</li>
-</ul></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-62" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-62)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+</ul></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-61" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-61)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/breadcrumb/tabs/index.html b/docs/hds-1817-stepbystep-docs/components/breadcrumb/tabs/index.html
index 25c91da4bfe..81c8b5ebced 100644
--- a/docs/hds-1817-stepbystep-docs/components/breadcrumb/tabs/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/breadcrumb/tabs/index.html
@@ -57,7 +57,7 @@
 <div class="status-label-description"><span class="StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX">Beta</span><span class="StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST" style="margin-left:var(--spacing-xs)">Accessible</span><div class="Tooltip-module_root__1Yo9t status-label-tooltip"><button type="button" class="Tooltip-module_button__2x9m0" title="Tooltip" aria-label="Tooltip" aria-expanded="false"><span aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="question-circle" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM13 16V18H11V16H13ZM12.0437 5.75C14.0343 5.75 15.7173 7.29464 15.7173 9.42361C15.7173 10.7806 15.2461 11.489 14.161 12.306L13.9187 12.4844C13.1753 13.0295 12.9556 13.3359 12.9386 14.142L12.9375 14.25H10.9375C10.9375 12.6746 11.4591 11.8378 12.6143 10.9622L12.8618 10.7796C13.5685 10.2628 13.7173 10.0539 13.7173 9.42361C13.7173 8.43934 12.9662 7.75 12.0437 7.75C11.1907 7.75 10.4785 8.34077 10.3816 9.20835L10.3734 9.30587L8.37663 9.19182C8.49191 7.17347 10.1344 5.75 12.0437 5.75Z" fill="currentColor"></path></svg></span></button></div></div>
 <p style="font-size:var(--fontsize-body-xl);color:var(--color-black-90);max-width:600px">Breadcrumb is a navigational element that provides links back to each previous page the user navigated through and
 shows the user&#x27;s current location on a website.</p>
-<div class="Tabs-module_tabs__2Ww5F"><div class="Tabs-module_tablistBar__elMv9 page-tabs-list"><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-left" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 12L15.5 17L14 18.5L7.5 12L14 5.5L15.5 7L10.5 12Z" fill="currentColor"></path></svg></button></div><div class="Tabs-module_tablist__1iuDO"><ul role="tablist" style="width:0px"><li role="tab" aria-selected="true" aria-controls="tab-0-panel" tabindex="0" id="tab-0-button" class="Tabs-module_tab__3oOoX Tabs-module_active__1Ic3B"><span>Usage</span></li><li role="tab" aria-selected="false" aria-controls="tab-1-panel" tabindex="-1" id="tab-1-button" class="Tabs-module_tab__3oOoX"><span>Code</span></li><li role="tab" aria-selected="false" aria-controls="tab-2-panel" tabindex="-1" id="tab-2-button" class="Tabs-module_tab__3oOoX"><span>Accessibility</span></li><li role="tab" aria-selected="false" aria-controls="tab-3-panel" tabindex="-1" id="tab-3-button" class="Tabs-module_tab__3oOoX"><span>Customisation</span></li></ul></div><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z" fill="currentColor"></path></svg></button></div></div><div id="tab-0-panel" role="tabpanel" aria-labelledby="tab-0-button"></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-60" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-60)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="Tabs-module_tabs__2Ww5F"><div class="Tabs-module_tablistBar__elMv9 page-tabs-list"><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-left" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 12L15.5 17L14 18.5L7.5 12L14 5.5L15.5 7L10.5 12Z" fill="currentColor"></path></svg></button></div><div class="Tabs-module_tablist__1iuDO"><ul role="tablist" style="width:0px"><li role="tab" aria-selected="true" aria-controls="tab-0-panel" tabindex="0" id="tab-0-button" class="Tabs-module_tab__3oOoX Tabs-module_active__1Ic3B"><span>Usage</span></li><li role="tab" aria-selected="false" aria-controls="tab-1-panel" tabindex="-1" id="tab-1-button" class="Tabs-module_tab__3oOoX"><span>Code</span></li><li role="tab" aria-selected="false" aria-controls="tab-2-panel" tabindex="-1" id="tab-2-button" class="Tabs-module_tab__3oOoX"><span>Accessibility</span></li><li role="tab" aria-selected="false" aria-controls="tab-3-panel" tabindex="-1" id="tab-3-button" class="Tabs-module_tab__3oOoX"><span>Customisation</span></li></ul></div><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z" fill="currentColor"></path></svg></button></div></div><div id="tab-0-panel" role="tabpanel" aria-labelledby="tab-0-button"></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-62" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-62)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/buttons/accessibility/index.html b/docs/hds-1817-stepbystep-docs/components/buttons/accessibility/index.html
index e1441359fe1..a8f8248eac7 100644
--- a/docs/hds-1817-stepbystep-docs/components/buttons/accessibility/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/buttons/accessibility/index.html
@@ -73,7 +73,7 @@ <h3 id="related-accessibility-requirements" style="position:relative" class="pag
 <li>
 <a aria-label="WCAG 3.2.2 - On input. Opens a different website." class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="https://www.w3.org/TR/WCAG21/#on-input">WCAG 3.2.2 - On input<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Link-module_icon__3ReCc link_icon__i_HqN Link-module_verticalAlignMediumIcon__12PVa link_vertical-align-medium-icon__3IWi1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="link-external" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z" fill="currentColor"></path></svg></a>
 </li>
-</ul></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-58" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-58)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+</ul></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-57" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-57)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/buttons/code/index.html b/docs/hds-1817-stepbystep-docs/components/buttons/code/index.html
index 00052f555e1..74e457e76f3 100644
--- a/docs/hds-1817-stepbystep-docs/components/buttons/code/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/buttons/code/index.html
@@ -483,7 +483,7 @@ <h3 id="packages" style="position:relative" class="page-heading-3 heading-m">Pac
 <div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><thead><tr class="hds-table__header-row dark"><th scope="col">Package</th><th scope="col">Included</th><th scope="col">Storybook link</th><th scope="col">Source link</th></tr></thead><tbody class="hds-table__content"><tr><td><strong>HDS React</strong></td><td><div style="display:flex;gap:var(--spacing-3-xs)"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="check-circle-fill" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM16.5 8L18 9.5L10.5 17L6 12.5L7.5 11L10.5 14L16.5 8Z" fill="currentColor"></path></svg> Yes </div></td><td><a aria-label="View in Storybook. Opens in a new tab" class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/storybook/react/?path=/story/components-button--primary" target="_blank" rel="noopener">View in Storybook</a></td><td><a aria-label="View source. Opens in a new tab Opens a different website." class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/react/src/components/button" target="_blank" rel="noopener">View source<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Link-module_icon__3ReCc link_icon__i_HqN Link-module_verticalAlignMediumIcon__12PVa link_vertical-align-medium-icon__3IWi1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="link-external" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z" fill="currentColor"></path></svg></a></td></tr><tr><td><strong>HDS Core</strong></td><td><div style="display:flex;gap:var(--spacing-3-xs)"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="check-circle-fill" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM16.5 8L18 9.5L10.5 17L6 12.5L7.5 11L10.5 14L16.5 8Z" fill="currentColor"></path></svg> Yes </div></td><td><a aria-label="View in Storybook. Opens in a new tab" class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/storybook/core/?path=/story/components-button--primary" target="_blank" rel="noopener">View in Storybook</a></td><td><a aria-label="View source. Opens in a new tab Opens a different website." class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/core/src/components/button" target="_blank" rel="noopener">View source<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Link-module_icon__3ReCc link_icon__i_HqN Link-module_verticalAlignMediumIcon__12PVa link_vertical-align-medium-icon__3IWi1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="link-external" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z" fill="currentColor"></path></svg></a></td></tr></tbody></table></div>
 <h3 id="properties" style="position:relative" class="page-heading-3 heading-m">Properties<a href="#properties" aria-label="properties permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h3>
 <p>Note! You can find the full list of properties in the <a aria-label="React Storybook. Opens in a new tab" class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/storybook/react/?path=/docs/components-button--primary" target="_blank" rel="noopener">React Storybook.</a></p>
-<div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><thead><tr class="hds-table__header-row dark"><th scope="col">Property</th><th scope="col">Description</th><th scope="col">Values</th><th scope="col">Default value</th></tr></thead><tbody class="hds-table__content"><tr><td><code>variant</code></td><td>Variant of the button.</td><td><code>&quot;primary&quot;</code> <code>&quot;secondary&quot;</code> <code>&quot;supplementary&quot;</code> <code>&quot;success&quot;</code> <code>&quot;danger&quot;</code></td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>size</code></td><td>Size of the button.</td><td><code>&quot;default&quot;</code> <code>&quot;small&quot;</code></td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>iconLeft</code></td><td>Icon placed on the left side of the button label.</td><td><code>ReactNode</code></td><td>-</td></tr><tr><td><code>iconRight</code></td><td>Icon placed on the right side of the button label.</td><td><code>ReactNode</code></td><td>-</td></tr><tr><td><code>fullWidth</code></td><td>If set to true, the button will take full width of its container.</td><td><code>boolean</code></td><td>false</td></tr><tr><td><code>isLoading</code></td><td>If set to true, a loading spinner is displayed inside the button.</td><td><code>boolean</code></td><td>false</td></tr><tr><td><code>loadingText</code></td><td>Visible loading text to be shown next to the loading spinner.</td><td><code>string</code></td><td>-</td></tr></tbody></table></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-56" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-56)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><thead><tr class="hds-table__header-row dark"><th scope="col">Property</th><th scope="col">Description</th><th scope="col">Values</th><th scope="col">Default value</th></tr></thead><tbody class="hds-table__content"><tr><td><code>variant</code></td><td>Variant of the button.</td><td><code>&quot;primary&quot;</code> <code>&quot;secondary&quot;</code> <code>&quot;supplementary&quot;</code> <code>&quot;success&quot;</code> <code>&quot;danger&quot;</code></td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>size</code></td><td>Size of the button.</td><td><code>&quot;default&quot;</code> <code>&quot;small&quot;</code></td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>iconLeft</code></td><td>Icon placed on the left side of the button label.</td><td><code>ReactNode</code></td><td>-</td></tr><tr><td><code>iconRight</code></td><td>Icon placed on the right side of the button label.</td><td><code>ReactNode</code></td><td>-</td></tr><tr><td><code>fullWidth</code></td><td>If set to true, the button will take full width of its container.</td><td><code>boolean</code></td><td>false</td></tr><tr><td><code>isLoading</code></td><td>If set to true, a loading spinner is displayed inside the button.</td><td><code>boolean</code></td><td>false</td></tr><tr><td><code>loadingText</code></td><td>Visible loading text to be shown next to the loading spinner.</td><td><code>string</code></td><td>-</td></tr></tbody></table></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-58" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-58)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/buttons/index.html b/docs/hds-1817-stepbystep-docs/components/buttons/index.html
index 37faff40206..0213f13f8c8 100644
--- a/docs/hds-1817-stepbystep-docs/components/buttons/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/buttons/index.html
@@ -111,7 +111,7 @@ <h4 id="loading" style="position:relative" class="page-heading-4 heading-s">Load
 <div style="margin-top:var(--spacing-m)" class="playground-block-preview playground-block-preview-light"><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_primary__2LfKB button_hds-button--primary__2NVvO"><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Save form</span></button></div>
 <h4 id="used-as-a-link" style="position:relative" class="page-heading-4 heading-s">Used as a link<a href="#used-as-a-link" aria-label="used as a link permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h4>
 <p>If the button is used as a link instead of an action, a <code>role=&quot;link&quot;</code> attribute should be added to the button.</p>
-<div class="playground-block-preview playground-block-preview-light"><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_primary__2LfKB button_hds-button--primary__2NVvO" role="link"><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Button</span></button></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-52" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-52)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="playground-block-preview playground-block-preview-light"><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_primary__2LfKB button_hds-button--primary__2NVvO" role="link"><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Button</span></button></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-53" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-53)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/buttons/tabs/index.html b/docs/hds-1817-stepbystep-docs/components/buttons/tabs/index.html
index 37302a44b2c..e96b25f9d0c 100644
--- a/docs/hds-1817-stepbystep-docs/components/buttons/tabs/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/buttons/tabs/index.html
@@ -57,7 +57,7 @@
 <div class="status-label-description"><span class="StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H">Stable</span><span class="StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST" style="margin-left:var(--spacing-xs)">Accessible</span><div class="Tooltip-module_root__1Yo9t status-label-tooltip"><button type="button" class="Tooltip-module_button__2x9m0" title="Tooltip" aria-label="Tooltip" aria-expanded="false"><span aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="question-circle" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM13 16V18H11V16H13ZM12.0437 5.75C14.0343 5.75 15.7173 7.29464 15.7173 9.42361C15.7173 10.7806 15.2461 11.489 14.161 12.306L13.9187 12.4844C13.1753 13.0295 12.9556 13.3359 12.9386 14.142L12.9375 14.25H10.9375C10.9375 12.6746 11.4591 11.8378 12.6143 10.9622L12.8618 10.7796C13.5685 10.2628 13.7173 10.0539 13.7173 9.42361C13.7173 8.43934 12.9662 7.75 12.0437 7.75C11.1907 7.75 10.4785 8.34077 10.3816 9.20835L10.3734 9.30587L8.37663 9.19182C8.49191 7.17347 10.1344 5.75 12.0437 5.75Z" fill="currentColor"></path></svg></span></button></div></div>
 <p style="font-size:var(--fontsize-body-xl);color:var(--color-black-90);max-width:600px">Buttons are meant to make actions easily visible and understandable to the user. HDS offers different kinds of button
 variations which each suit for different needs.</p>
-<div class="Tabs-module_tabs__2Ww5F"><div class="Tabs-module_tablistBar__elMv9 page-tabs-list"><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-left" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 12L15.5 17L14 18.5L7.5 12L14 5.5L15.5 7L10.5 12Z" fill="currentColor"></path></svg></button></div><div class="Tabs-module_tablist__1iuDO"><ul role="tablist" style="width:0px"><li role="tab" aria-selected="true" aria-controls="tab-0-panel" tabindex="0" id="tab-0-button" class="Tabs-module_tab__3oOoX Tabs-module_active__1Ic3B"><span>Usage</span></li><li role="tab" aria-selected="false" aria-controls="tab-1-panel" tabindex="-1" id="tab-1-button" class="Tabs-module_tab__3oOoX"><span>Code</span></li><li role="tab" aria-selected="false" aria-controls="tab-2-panel" tabindex="-1" id="tab-2-button" class="Tabs-module_tab__3oOoX"><span>Accessibility</span></li><li role="tab" aria-selected="false" aria-controls="tab-3-panel" tabindex="-1" id="tab-3-button" class="Tabs-module_tab__3oOoX"><span>Customisation</span></li></ul></div><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z" fill="currentColor"></path></svg></button></div></div><div id="tab-0-panel" role="tabpanel" aria-labelledby="tab-0-button"></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-50" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-50)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="Tabs-module_tabs__2Ww5F"><div class="Tabs-module_tablistBar__elMv9 page-tabs-list"><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-left" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 12L15.5 17L14 18.5L7.5 12L14 5.5L15.5 7L10.5 12Z" fill="currentColor"></path></svg></button></div><div class="Tabs-module_tablist__1iuDO"><ul role="tablist" style="width:0px"><li role="tab" aria-selected="true" aria-controls="tab-0-panel" tabindex="0" id="tab-0-button" class="Tabs-module_tab__3oOoX Tabs-module_active__1Ic3B"><span>Usage</span></li><li role="tab" aria-selected="false" aria-controls="tab-1-panel" tabindex="-1" id="tab-1-button" class="Tabs-module_tab__3oOoX"><span>Code</span></li><li role="tab" aria-selected="false" aria-controls="tab-2-panel" tabindex="-1" id="tab-2-button" class="Tabs-module_tab__3oOoX"><span>Accessibility</span></li><li role="tab" aria-selected="false" aria-controls="tab-3-panel" tabindex="-1" id="tab-3-button" class="Tabs-module_tab__3oOoX"><span>Customisation</span></li></ul></div><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z" fill="currentColor"></path></svg></button></div></div><div id="tab-0-panel" role="tabpanel" aria-labelledby="tab-0-button"></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-49" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-49)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/card/accessibility/index.html b/docs/hds-1817-stepbystep-docs/components/card/accessibility/index.html
index ecb28e2e8ed..218704c8ca3 100644
--- a/docs/hds-1817-stepbystep-docs/components/card/accessibility/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/card/accessibility/index.html
@@ -62,7 +62,7 @@ <h3 id="pay-attention-to" style="position:relative" class="page-heading-3 headin
 <li>Card must have either a visual heading or <code>aria-label</code> as a title. This describes the Card&#x27;s content for assistive technologies.</li>
 <li>If you use buttons in your cards, pay attention to the button role. If you use the button as a link instead of an action (i.e. the button press causes a page load), you must specify a <code>role=&quot;link&quot;</code> attribute to the button.</li>
 <li>The colour contrast between the Card and its background must comply with <a aria-label="WCAG AA Level contrast ratios. Opens a different website." class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="https://www.w3.org/TR/WCAG21/#contrast-minimum">WCAG AA Level contrast ratios<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Link-module_icon__3ReCc link_icon__i_HqN Link-module_verticalAlignMediumIcon__12PVa link_vertical-align-medium-icon__3IWi1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="link-external" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z" fill="currentColor"></path></svg></a>. If needed, you may use a Card border to increase the contrast to its background.</li>
-</ul></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-48" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-48)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+</ul></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-50" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-50)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/card/customisation/index.html b/docs/hds-1817-stepbystep-docs/components/card/customisation/index.html
index 1311ba3aedf..9471d406909 100644
--- a/docs/hds-1817-stepbystep-docs/components/card/customisation/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/card/customisation/index.html
@@ -120,7 +120,7 @@ <h3 id="customisation-example" style="position:relative" class="page-heading-3 h
     color: transparent !important;
   }
 }
-</style></div></div></div></div></div><div class="playground-block-buttons"><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS Button-module_size-small__3lizH button_hds-button--small__2NFef"><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Copy code</span></button><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS Button-module_size-small__3lizH button_hds-button--small__2NFef"><div class="Button-module_icon__O-h7R button_hds-icon__17j8Z" aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-undo" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 10C16.2091 10 18 11.7909 18 14C18 16.2091 16.2091 18 14 18H10V20H14.0364L14.188 19.9981C17.4131 19.9171 20 17.2611 20 14C20 10.7389 17.4131 8.08285 14.188 8.0019L8.5 8L12 4.5L10.5 3L4.5 9L10.5 15L12 13.5L8.5 10H14Z" fill="currentColor"></path></svg></div><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Reset example</span></button></div></div></div></div></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-44" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-44)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+</style></div></div></div></div></div><div class="playground-block-buttons"><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS Button-module_size-small__3lizH button_hds-button--small__2NFef"><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Copy code</span></button><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS Button-module_size-small__3lizH button_hds-button--small__2NFef"><div class="Button-module_icon__O-h7R button_hds-icon__17j8Z" aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-undo" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 10C16.2091 10 18 11.7909 18 14C18 16.2091 16.2091 18 14 18H10V20H14.0364L14.188 19.9981C17.4131 19.9171 20 17.2611 20 14C20 10.7389 17.4131 8.08285 14.188 8.0019L8.5 8L12 4.5L10.5 3L4.5 9L10.5 15L12 13.5L8.5 10H14Z" fill="currentColor"></path></svg></div><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Reset example</span></button></div></div></div></div></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-45" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-45)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/card/tabs/index.html b/docs/hds-1817-stepbystep-docs/components/card/tabs/index.html
index 546e137007d..f9566edbb71 100644
--- a/docs/hds-1817-stepbystep-docs/components/card/tabs/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/card/tabs/index.html
@@ -56,7 +56,7 @@
   </script><link rel="manifest" href="/hds-demo/hds-1817-stepbystep-docs/manifest.webmanifest" crossorigin="anonymous"/><link rel="apple-touch-icon" sizes="any" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/favicon-32x32.ico"/><link rel="apple-touch-icon" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/apple-touch-icon.png"/><link rel="apple-touch-icon" sizes="192x192" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/favicon-192x192.png"/><link rel="apple-touch-icon" sizes="512x512" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/favicon-512x512.png"/><link rel="preconnect" href="https://webanalytics.digiaiiris.com/js"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="page text-body"><header class="hds-header Header-module_header__291GF pageHeader" id="page-header"><div class="Header-module_headerBackgroundWrapper__KsFy2"><a href="#content" class="SkipLink-module_skipLink__1knzF"><span class="SkipLink-module_skipLinkLabel__21n5B">Skip to content</span></a><div class="HeaderActionBar-module_headerActionBarContainer__5tfj-"><div class="HeaderActionBar-module_headerActionBar__lPeGE"><a href="https://hds.hel.fi" aria-label="City of Helsinki Logo" class="HeaderActionBar-module_titleAndLogoContainer__2LEAb HeaderActionBar-module_logo__2r2T0"><span class="HeaderActionBarLogo-module_logoWrapper__8NgfS"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></span></a><a href="https://hds.hel.fi" aria-label="Helsinki: Helsinki Design System" class="HeaderActionBar-module_titleAndLogoContainer__2LEAb HeaderActionBar-module_title__opzt9 HeaderActionBar-module_normal__3B4qi"><span class="HeaderActionBar-module_title__opzt9"><div class="page-header-title"><div>Helsinki Design System</div><div class="page-header-title-badge"><img style="filter:invert(1)" alt="HDS version number: 2.15.0" src="https://img.shields.io/github/v/release/City-of-Helsinki/helsinki-design-system?label=&amp;style=for-the-badge&amp;color=1a1a1a"/></div></div></span></a><div class="HeaderActionBar-module_headerActions__3lNnM"></div></div></div><div class="HeaderNavigationMenu-module_headerNavigationMenuContainer__2nK9z"><nav class="HeaderNavigationMenu-module_headerNavigationMenu__3G6-N"><ul class="HeaderNavigationMenu-module_headerNavigationMenuList__3HIzx"></ul></nav></div></div></header><div class="page-content"><aside class="side-content"><nav class="SideNavigation-module_sideNavigation__3X-9P" id="side-navigation" aria-label="Components"><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS Button-module_fullWidth__31eVK button_hds-button--fullwidth__1_hG9 SideNavigation-module_toggleButton__10tXH" aria-controls="side-navigation-menu" aria-expanded="false" aria-haspopup="true"><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Navigate to page</span><div class="Button-module_icon__O-h7R button_hds-icon__17j8Z" aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-down" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 13.5L17 8.5L18.5 10L12 16.5L5.5 10L7 8.5L12 13.5Z" fill="currentColor"></path></svg></div></button><ul class="SideNavigation-module_mainLevelList__SLZKQ" aria-label="Navigate to page" id="side-navigation-menu"><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Overview" id="side-nav-components" href="/hds-demo/hds-1817-stepbystep-docs/components"><span class="MainLevel-module_label__uWKJ7">Overview</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Accordion" id="side-nav-components-accordion" href="/hds-demo/hds-1817-stepbystep-docs/components/accordion"><span class="MainLevel-module_label__uWKJ7">Accordion</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Breadcrumb" id="side-nav-components-breadcrumb" href="/hds-demo/hds-1817-stepbystep-docs/components/breadcrumb"><span class="MainLevel-module_label__uWKJ7">Breadcrumb</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Button" id="side-nav-components-buttons" href="/hds-demo/hds-1817-stepbystep-docs/components/buttons"><span class="MainLevel-module_label__uWKJ7">Button</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_active__3IkdI MainLevel-module_open__2yWFj"><a aria-current="page" aria-label="Card" id="side-nav-components-card" href="/hds-demo/hds-1817-stepbystep-docs/components/card"><span class="MainLevel-module_label__uWKJ7">Card</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Checkbox" id="side-nav-components-checkbox" href="/hds-demo/hds-1817-stepbystep-docs/components/checkbox"><span class="MainLevel-module_label__uWKJ7">Checkbox</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="CookieConsent" id="side-nav-components-cookie-consent" href="/hds-demo/hds-1817-stepbystep-docs/components/cookie-consent"><span class="MainLevel-module_label__uWKJ7">CookieConsent</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="DateInput" id="side-nav-components-date-input" href="/hds-demo/hds-1817-stepbystep-docs/components/date-input"><span class="MainLevel-module_label__uWKJ7">DateInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Dialog" id="side-nav-components-dialog" href="/hds-demo/hds-1817-stepbystep-docs/components/dialog"><span class="MainLevel-module_label__uWKJ7">Dialog</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Dropdown" id="side-nav-components-dropdown" href="/hds-demo/hds-1817-stepbystep-docs/components/dropdown"><span class="MainLevel-module_label__uWKJ7">Dropdown</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Fieldset" id="side-nav-components-fieldset" href="/hds-demo/hds-1817-stepbystep-docs/components/fieldset"><span class="MainLevel-module_label__uWKJ7">Fieldset</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="FileInput" id="side-nav-components-file-input" href="/hds-demo/hds-1817-stepbystep-docs/components/file-input"><span class="MainLevel-module_label__uWKJ7">FileInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Footer" id="side-nav-components-footer" href="/hds-demo/hds-1817-stepbystep-docs/components/footer"><span class="MainLevel-module_label__uWKJ7">Footer</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Header" id="side-nav-components-header" href="/hds-demo/hds-1817-stepbystep-docs/components/header"><span class="MainLevel-module_label__uWKJ7">Header</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Hero" id="side-nav-components-hero" href="/hds-demo/hds-1817-stepbystep-docs/components/hero"><span class="MainLevel-module_label__uWKJ7">Hero</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Highlight" id="side-nav-components-highlight" href="/hds-demo/hds-1817-stepbystep-docs/components/highlight"><span class="MainLevel-module_label__uWKJ7">Highlight</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Icon" id="side-nav-components-icon" href="/hds-demo/hds-1817-stepbystep-docs/components/icon"><span class="MainLevel-module_label__uWKJ7">Icon</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Koros" id="side-nav-components-koros" href="/hds-demo/hds-1817-stepbystep-docs/components/koros"><span class="MainLevel-module_label__uWKJ7">Koros</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Link" id="side-nav-components-link" href="/hds-demo/hds-1817-stepbystep-docs/components/link"><span class="MainLevel-module_label__uWKJ7">Link</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Linkbox" id="side-nav-components-linkbox" href="/hds-demo/hds-1817-stepbystep-docs/components/linkbox"><span class="MainLevel-module_label__uWKJ7">Linkbox</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="LoadingSpinner" id="side-nav-components-loading-spinner" href="/hds-demo/hds-1817-stepbystep-docs/components/loading-spinner"><span class="MainLevel-module_label__uWKJ7">LoadingSpinner</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Logo" id="side-nav-components-logo" href="/hds-demo/hds-1817-stepbystep-docs/components/logo"><span class="MainLevel-module_label__uWKJ7">Logo</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Notification" id="side-nav-components-notification" href="/hds-demo/hds-1817-stepbystep-docs/components/notification"><span class="MainLevel-module_label__uWKJ7">Notification</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="NumberInput" id="side-nav-components-number-input" href="/hds-demo/hds-1817-stepbystep-docs/components/number-input"><span class="MainLevel-module_label__uWKJ7">NumberInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Pagination" id="side-nav-components-pagination" href="/hds-demo/hds-1817-stepbystep-docs/components/pagination"><span class="MainLevel-module_label__uWKJ7">Pagination</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="PasswordInput" id="side-nav-components-password-input" href="/hds-demo/hds-1817-stepbystep-docs/components/password-input"><span class="MainLevel-module_label__uWKJ7">PasswordInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="PhoneInput" id="side-nav-components-phone-input" href="/hds-demo/hds-1817-stepbystep-docs/components/phone-input"><span class="MainLevel-module_label__uWKJ7">PhoneInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="RadioButton" id="side-nav-components-radio-button" href="/hds-demo/hds-1817-stepbystep-docs/components/radio-button"><span class="MainLevel-module_label__uWKJ7">RadioButton</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="SearchInput" id="side-nav-components-search-input" href="/hds-demo/hds-1817-stepbystep-docs/components/search-input"><span class="MainLevel-module_label__uWKJ7">SearchInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="SelectionGroup" id="side-nav-components-selection-group" href="/hds-demo/hds-1817-stepbystep-docs/components/selection-group"><span class="MainLevel-module_label__uWKJ7">SelectionGroup</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="SideNavigation" id="side-nav-components-side-navigation" href="/hds-demo/hds-1817-stepbystep-docs/components/side-navigation"><span class="MainLevel-module_label__uWKJ7">SideNavigation</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="StatusLabel" id="side-nav-components-status-label" href="/hds-demo/hds-1817-stepbystep-docs/components/status-label"><span class="MainLevel-module_label__uWKJ7">StatusLabel</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="StepByStep" id="side-nav-components-step-by-step" href="/hds-demo/hds-1817-stepbystep-docs/components/step-by-step"><span class="MainLevel-module_label__uWKJ7">StepByStep</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Stepper" id="side-nav-components-stepper" href="/hds-demo/hds-1817-stepbystep-docs/components/stepper"><span class="MainLevel-module_label__uWKJ7">Stepper</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Table" id="side-nav-components-table" href="/hds-demo/hds-1817-stepbystep-docs/components/table"><span class="MainLevel-module_label__uWKJ7">Table</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Tabs" id="side-nav-components-tabs" href="/hds-demo/hds-1817-stepbystep-docs/components/tabs"><span class="MainLevel-module_label__uWKJ7">Tabs</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Tag" id="side-nav-components-tag" href="/hds-demo/hds-1817-stepbystep-docs/components/tag"><span class="MainLevel-module_label__uWKJ7">Tag</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="TextArea" id="side-nav-components-text-area" href="/hds-demo/hds-1817-stepbystep-docs/components/text-area"><span class="MainLevel-module_label__uWKJ7">TextArea</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="TextInput" id="side-nav-components-text-input" href="/hds-demo/hds-1817-stepbystep-docs/components/text-input"><span class="MainLevel-module_label__uWKJ7">TextInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="TimeInput" id="side-nav-components-time-input" href="/hds-demo/hds-1817-stepbystep-docs/components/time-input"><span class="MainLevel-module_label__uWKJ7">TimeInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="ToggleButton" id="side-nav-components-toggle-button" href="/hds-demo/hds-1817-stepbystep-docs/components/toggle-button"><span class="MainLevel-module_label__uWKJ7">ToggleButton</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Tooltip" id="side-nav-components-tooltip" href="/hds-demo/hds-1817-stepbystep-docs/components/tooltip"><span class="MainLevel-module_label__uWKJ7">Tooltip</span></a></li></ul></nav></aside><main id="content" class="main-content"><h1 id="card" style="position:relative" class="page-heading-1 heading-xl-mobile">Card<a href="#card" aria-label="card permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h1>
 <div class="status-label-description"><span class="StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H">Stable</span><span class="StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST" style="margin-left:var(--spacing-xs)">Accessible</span><div class="Tooltip-module_root__1Yo9t status-label-tooltip"><button type="button" class="Tooltip-module_button__2x9m0" title="Tooltip" aria-label="Tooltip" aria-expanded="false"><span aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="question-circle" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM13 16V18H11V16H13ZM12.0437 5.75C14.0343 5.75 15.7173 7.29464 15.7173 9.42361C15.7173 10.7806 15.2461 11.489 14.161 12.306L13.9187 12.4844C13.1753 13.0295 12.9556 13.3359 12.9386 14.142L12.9375 14.25H10.9375C10.9375 12.6746 11.4591 11.8378 12.6143 10.9622L12.8618 10.7796C13.5685 10.2628 13.7173 10.0539 13.7173 9.42361C13.7173 8.43934 12.9662 7.75 12.0437 7.75C11.1907 7.75 10.4785 8.34077 10.3816 9.20835L10.3734 9.30587L8.37663 9.19182C8.49191 7.17347 10.1344 5.75 12.0437 5.75Z" fill="currentColor"></path></svg></span></button></div></div>
 <p style="font-size:var(--fontsize-body-xl);color:var(--color-black-90);max-width:600px">Cards can be used to divide and organise interface content for better understandability and readability. When used correctly, Cards can help your users to scan through vast amounts of information quicker.</p>
-<div class="Tabs-module_tabs__2Ww5F"><div class="Tabs-module_tablistBar__elMv9 page-tabs-list"><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-left" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 12L15.5 17L14 18.5L7.5 12L14 5.5L15.5 7L10.5 12Z" fill="currentColor"></path></svg></button></div><div class="Tabs-module_tablist__1iuDO"><ul role="tablist" style="width:0px"><li role="tab" aria-selected="true" aria-controls="tab-0-panel" tabindex="0" id="tab-0-button" class="Tabs-module_tab__3oOoX Tabs-module_active__1Ic3B"><span>Usage</span></li><li role="tab" aria-selected="false" aria-controls="tab-1-panel" tabindex="-1" id="tab-1-button" class="Tabs-module_tab__3oOoX"><span>Code</span></li><li role="tab" aria-selected="false" aria-controls="tab-2-panel" tabindex="-1" id="tab-2-button" class="Tabs-module_tab__3oOoX"><span>Accessibility</span></li><li role="tab" aria-selected="false" aria-controls="tab-3-panel" tabindex="-1" id="tab-3-button" class="Tabs-module_tab__3oOoX"><span>Customisation</span></li></ul></div><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z" fill="currentColor"></path></svg></button></div></div><div id="tab-0-panel" role="tabpanel" aria-labelledby="tab-0-button"></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-40" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-40)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="Tabs-module_tabs__2Ww5F"><div class="Tabs-module_tablistBar__elMv9 page-tabs-list"><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-left" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 12L15.5 17L14 18.5L7.5 12L14 5.5L15.5 7L10.5 12Z" fill="currentColor"></path></svg></button></div><div class="Tabs-module_tablist__1iuDO"><ul role="tablist" style="width:0px"><li role="tab" aria-selected="true" aria-controls="tab-0-panel" tabindex="0" id="tab-0-button" class="Tabs-module_tab__3oOoX Tabs-module_active__1Ic3B"><span>Usage</span></li><li role="tab" aria-selected="false" aria-controls="tab-1-panel" tabindex="-1" id="tab-1-button" class="Tabs-module_tab__3oOoX"><span>Code</span></li><li role="tab" aria-selected="false" aria-controls="tab-2-panel" tabindex="-1" id="tab-2-button" class="Tabs-module_tab__3oOoX"><span>Accessibility</span></li><li role="tab" aria-selected="false" aria-controls="tab-3-panel" tabindex="-1" id="tab-3-button" class="Tabs-module_tab__3oOoX"><span>Customisation</span></li></ul></div><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z" fill="currentColor"></path></svg></button></div></div><div id="tab-0-panel" role="tabpanel" aria-labelledby="tab-0-button"></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-41" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-41)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/checkbox/accessibility/index.html b/docs/hds-1817-stepbystep-docs/components/checkbox/accessibility/index.html
index 9c8c8e09ce2..347eb1dbb0a 100644
--- a/docs/hds-1817-stepbystep-docs/components/checkbox/accessibility/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/checkbox/accessibility/index.html
@@ -61,7 +61,7 @@ <h3 id="pay-attention-to" style="position:relative" class="page-heading-3 headin
 <ul>
 <li><strong>It is advisable to use colour combinations provided by the implementation.</strong> These combinations are ensured to comply with WCAG AA requirements. When customising colors, refer to <a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/hds-demo/hds-1817-stepbystep-docs/foundation/design-tokens/colour">colour guidelines</a> to ensure accessibility.</li>
 <li>When multiple Checkboxes are related to each other, group them together using <a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/hds-demo/hds-1817-stepbystep-docs/components/selection-group">HDS Selection group</a>. Selection group also includes a title for the group.</li>
-</ul></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-38" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-38)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+</ul></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-37" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-37)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/checkbox/code/index.html b/docs/hds-1817-stepbystep-docs/components/checkbox/code/index.html
index 40778f2d776..584866c05df 100644
--- a/docs/hds-1817-stepbystep-docs/components/checkbox/code/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/checkbox/code/index.html
@@ -465,7 +465,7 @@ <h3 id="packages" style="position:relative" class="page-heading-3 heading-m">Pac
 <div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><thead><tr class="hds-table__header-row dark"><th scope="col">Package</th><th scope="col">Included</th><th scope="col">Storybook link</th><th scope="col">Source link</th></tr></thead><tbody class="hds-table__content"><tr><td><strong>HDS React</strong></td><td><div style="display:flex;gap:var(--spacing-3-xs)"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="check-circle-fill" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM16.5 8L18 9.5L10.5 17L6 12.5L7.5 11L10.5 14L16.5 8Z" fill="currentColor"></path></svg> Yes </div></td><td><a aria-label="View in Storybook. Opens in a new tab" class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/storybook/react/?path=/story/components-checkbox--default" target="_blank" rel="noopener">View in Storybook</a></td><td><a aria-label="View source. Opens in a new tab Opens a different website." class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="https://github.com/City-of-Helsinki/helsinki-design-system/blob/master/packages/react/src/components/checkbox/Checkbox.tsx" target="_blank" rel="noopener">View source<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Link-module_icon__3ReCc link_icon__i_HqN Link-module_verticalAlignMediumIcon__12PVa link_vertical-align-medium-icon__3IWi1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="link-external" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z" fill="currentColor"></path></svg></a></td></tr><tr><td><strong>HDS Core</strong></td><td><div style="display:flex;gap:var(--spacing-3-xs)"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="check-circle-fill" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM16.5 8L18 9.5L10.5 17L6 12.5L7.5 11L10.5 14L16.5 8Z" fill="currentColor"></path></svg> Yes </div></td><td><a aria-label="View in Storybook. Opens in a new tab" class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/storybook/core/?path=/story/components-checkbox--default" target="_blank" rel="noopener">View in Storybook</a></td><td><a aria-label="View source. Opens in a new tab Opens a different website." class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/core/src/components/checkbox" target="_blank" rel="noopener">View source<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Link-module_icon__3ReCc link_icon__i_HqN Link-module_verticalAlignMediumIcon__12PVa link_vertical-align-medium-icon__3IWi1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="link-external" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z" fill="currentColor"></path></svg></a></td></tr></tbody></table></div>
 <h3 id="properties" style="position:relative" class="page-heading-3 heading-m">Properties<a href="#properties" aria-label="properties permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h3>
 <p>Note! You can find the full list of properties in the <a aria-label="React Storybook. Opens in a new tab" class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/storybook/react/?path=/story/components-checkbox--default" target="_blank" rel="noopener">React Storybook.</a></p>
-<div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><thead><tr class="hds-table__header-row dark"><th scope="col">Property</th><th scope="col">Description</th><th scope="col">Values</th><th scope="col">Default value</th></tr></thead><tbody class="hds-table__content"><tr><td><code>checked</code></td><td>If set to true, the component is checked.</td><td><code>boolean</code></td><td>false</td></tr><tr><td><code>disabled</code></td><td>If set to true, the component is disabled.</td><td><code>boolean</code></td><td>false</td></tr><tr><td><code>indeterminate</code></td><td>If set to true, the component is in indeterminate state.</td><td><code>boolean</code></td><td>false</td></tr><tr><td><code>label</code></td><td>A text label for the checkbox.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>errorText</code></td><td>The error text content that will be shown below the checkbox.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>helperText</code></td><td>The helper text content that will be shown below the checkbox.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>tooltipLabel</code></td><td>The aria-label text for the tooltip.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>tooltipButtonLabel</code></td><td>The aria-label text for the tooltip trigger button.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>tooltipText</code></td><td>The text content of the tooltip.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>onChange</code></td><td>Callback fired when the state is changed.</td><td><code>function</code></td><td>-</td></tr></tbody></table></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-36" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-36)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><thead><tr class="hds-table__header-row dark"><th scope="col">Property</th><th scope="col">Description</th><th scope="col">Values</th><th scope="col">Default value</th></tr></thead><tbody class="hds-table__content"><tr><td><code>checked</code></td><td>If set to true, the component is checked.</td><td><code>boolean</code></td><td>false</td></tr><tr><td><code>disabled</code></td><td>If set to true, the component is disabled.</td><td><code>boolean</code></td><td>false</td></tr><tr><td><code>indeterminate</code></td><td>If set to true, the component is in indeterminate state.</td><td><code>boolean</code></td><td>false</td></tr><tr><td><code>label</code></td><td>A text label for the checkbox.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>errorText</code></td><td>The error text content that will be shown below the checkbox.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>helperText</code></td><td>The helper text content that will be shown below the checkbox.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>tooltipLabel</code></td><td>The aria-label text for the tooltip.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>tooltipButtonLabel</code></td><td>The aria-label text for the tooltip trigger button.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>tooltipText</code></td><td>The text content of the tooltip.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>onChange</code></td><td>Callback fired when the state is changed.</td><td><code>function</code></td><td>-</td></tr></tbody></table></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-38" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-38)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/cookie-consent/code/index.html b/docs/hds-1817-stepbystep-docs/components/cookie-consent/code/index.html
index 779618d88b3..c5b1a3016b0 100644
--- a/docs/hds-1817-stepbystep-docs/components/cookie-consent/code/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/cookie-consent/code/index.html
@@ -75,7 +75,7 @@ <h3 id="packages" style="position:relative" class="page-heading-3 heading-m">Pac
 <h3 id="properties" style="position:relative" class="page-heading-3 heading-m">Properties<a href="#properties" aria-label="properties permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h3>
 <p>Note! You can find the full list of properties in the <a aria-label="React Storybook. Opens in a new tab" class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/storybook/react/?path=/story/components-cookieconsent--english-modal-version" target="_blank" rel="noopener">React Storybook.</a>
 Also, you can find a detailed description of the <code>contentSource</code> property in the <a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/hds-demo/hds-1817-stepbystep-docs/components/cookie-consent/api">API tab</a>.</p>
-<div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><thead><tr class="hds-table__header-row dark"><th scope="col">Property</th><th scope="col">Description</th><th scope="col">Values</th><th scope="col">Default value</th></tr></thead><tbody class="hds-table__content"><tr><td><code>contentSource</code></td><td>Main configurations of the Cookie Consent.</td><td><code>object</code></td><td>-</td></tr><tr><td><code>cookieDomain</code></td><td>A string representing the domain of the cookie.</td><td><code>string</code></td><td>Default value is the current domain</td></tr></tbody></table></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-15" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-15)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><thead><tr class="hds-table__header-row dark"><th scope="col">Property</th><th scope="col">Description</th><th scope="col">Values</th><th scope="col">Default value</th></tr></thead><tbody class="hds-table__content"><tr><td><code>contentSource</code></td><td>Main configurations of the Cookie Consent.</td><td><code>object</code></td><td>-</td></tr><tr><td><code>cookieDomain</code></td><td>A string representing the domain of the cookie.</td><td><code>string</code></td><td>Default value is the current domain</td></tr></tbody></table></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-16" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-16)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/cookie-consent/index.html b/docs/hds-1817-stepbystep-docs/components/cookie-consent/index.html
index 428edc3e279..3401f89733d 100644
--- a/docs/hds-1817-stepbystep-docs/components/cookie-consent/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/cookie-consent/index.html
@@ -84,7 +84,7 @@ <h3 id="modal" style="position:relative" class="page-heading-3 heading-m">Modal<
 <a aria-label="View modal example in Storybook. Opens in a new tab" class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/storybook/react/?path=/story/components-cookieconsent--english-modal-version" target="_blank" rel="noopener"><p>View modal example in Storybook</p></a>
 <h3 id="rendered-on-a-page" style="position:relative" class="page-heading-3 heading-m">Rendered on a page<a href="#rendered-on-a-page" aria-label="rendered on a page permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h3>
 <p>The cookie consent expanded settings page can be rendered as a separate page. This is used to create a cookie page that the user can access via a link in the <a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/hds-demo/hds-1817-stepbystep-docs/components/footer">Footer</a> element. This allows the user to view or edit cookie settings after the initial consent has been given.</p>
-<a aria-label="View page example in Storybook. Opens in a new tab" class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/storybook/react/?path=/story/components-cookieconsent--page-version" target="_blank" rel="noopener"><p>View page example in Storybook</p></a></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-16" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-16)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<a aria-label="View page example in Storybook. Opens in a new tab" class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/storybook/react/?path=/story/components-cookieconsent--page-version" target="_blank" rel="noopener"><p>View page example in Storybook</p></a></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-14" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-14)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/dialog/accessibility/index.html b/docs/hds-1817-stepbystep-docs/components/dialog/accessibility/index.html
index 721c8bc830f..0e31e5ef7ba 100644
--- a/docs/hds-1817-stepbystep-docs/components/dialog/accessibility/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/dialog/accessibility/index.html
@@ -66,7 +66,7 @@ <h3 id="pay-attention-to" style="position:relative" class="page-heading-3 headin
 </li>
 <li>When the dialog is active, everything outside of the dialog should be inaccessible to the user.</li>
 <li>Pay attention to the roles of buttons of your dialog. If you use the button as a link instead of an action (i.e. the button press opens a new page), you must specify a <code>role=&quot;link&quot;</code> attribute to the button.</li>
-</ul></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-11" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-11)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+</ul></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-10" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-10)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/dialog/customisation/index.html b/docs/hds-1817-stepbystep-docs/components/dialog/customisation/index.html
index a303b48c8f0..e3b9991e62d 100644
--- a/docs/hds-1817-stepbystep-docs/components/dialog/customisation/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/dialog/customisation/index.html
@@ -178,7 +178,7 @@ <h3 id="customisation-example" style="position:relative" class="page-heading-3 h
     color: transparent !important;
   }
 }
-</style></div></div></div></div></div><div class="playground-block-buttons"><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS Button-module_size-small__3lizH button_hds-button--small__2NFef"><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Copy code</span></button><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS Button-module_size-small__3lizH button_hds-button--small__2NFef"><div class="Button-module_icon__O-h7R button_hds-icon__17j8Z" aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-undo" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 10C16.2091 10 18 11.7909 18 14C18 16.2091 16.2091 18 14 18H10V20H14.0364L14.188 19.9981C17.4131 19.9171 20 17.2611 20 14C20 10.7389 17.4131 8.08285 14.188 8.0019L8.5 8L12 4.5L10.5 3L4.5 9L10.5 15L12 13.5L8.5 10H14Z" fill="currentColor"></path></svg></div><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Reset example</span></button></div></div></div></div></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-7" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-7)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+</style></div></div></div></div></div><div class="playground-block-buttons"><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS Button-module_size-small__3lizH button_hds-button--small__2NFef"><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Copy code</span></button><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS Button-module_size-small__3lizH button_hds-button--small__2NFef"><div class="Button-module_icon__O-h7R button_hds-icon__17j8Z" aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-undo" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 10C16.2091 10 18 11.7909 18 14C18 16.2091 16.2091 18 14 18H10V20H14.0364L14.188 19.9981C17.4131 19.9171 20 17.2611 20 14C20 10.7389 17.4131 8.08285 14.188 8.0019L8.5 8L12 4.5L10.5 3L4.5 9L10.5 15L12 13.5L8.5 10H14Z" fill="currentColor"></path></svg></div><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Reset example</span></button></div></div></div></div></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-6" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-6)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/dialog/index.html b/docs/hds-1817-stepbystep-docs/components/dialog/index.html
index 837c0279706..6c4e9356668 100644
--- a/docs/hds-1817-stepbystep-docs/components/dialog/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/dialog/index.html
@@ -105,7 +105,7 @@ <h4 id="danger-dialog" style="position:relative" class="page-heading-4 heading-s
 <h4 id="scrollable-dialog" style="position:relative" class="page-heading-4 heading-s">Scrollable dialog<a href="#scrollable-dialog" aria-label="scrollable dialog permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h4>
 <p>While not recommended, HDS supports scrollable dialogs if there is a large amount of content (e.g. terms of use). <strong>It is recommended to consider other options than a dialog to present the same data since it can be difficult for the user to form a clear understanding of the presented content.</strong></p>
 <!-- -->
-<div class="playground-block-preview playground-block-preview-light"><div></div><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_primary__2LfKB button_hds-button--primary__2NVvO"><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Open Terms dialog</span></button></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-132" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-132)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="playground-block-preview playground-block-preview-light"><div></div><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_primary__2LfKB button_hds-button--primary__2NVvO"><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Open Terms dialog</span></button></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-131" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-131)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/dialog/tabs/index.html b/docs/hds-1817-stepbystep-docs/components/dialog/tabs/index.html
index 7ff3379ecc7..4ebc68b868e 100644
--- a/docs/hds-1817-stepbystep-docs/components/dialog/tabs/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/dialog/tabs/index.html
@@ -56,7 +56,7 @@
   </script><link rel="manifest" href="/hds-demo/hds-1817-stepbystep-docs/manifest.webmanifest" crossorigin="anonymous"/><link rel="apple-touch-icon" sizes="any" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/favicon-32x32.ico"/><link rel="apple-touch-icon" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/apple-touch-icon.png"/><link rel="apple-touch-icon" sizes="192x192" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/favicon-192x192.png"/><link rel="apple-touch-icon" sizes="512x512" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/favicon-512x512.png"/><link rel="preconnect" href="https://webanalytics.digiaiiris.com/js"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="page text-body"><header class="hds-header Header-module_header__291GF pageHeader" id="page-header"><div class="Header-module_headerBackgroundWrapper__KsFy2"><a href="#content" class="SkipLink-module_skipLink__1knzF"><span class="SkipLink-module_skipLinkLabel__21n5B">Skip to content</span></a><div class="HeaderActionBar-module_headerActionBarContainer__5tfj-"><div class="HeaderActionBar-module_headerActionBar__lPeGE"><a href="https://hds.hel.fi" aria-label="City of Helsinki Logo" class="HeaderActionBar-module_titleAndLogoContainer__2LEAb HeaderActionBar-module_logo__2r2T0"><span class="HeaderActionBarLogo-module_logoWrapper__8NgfS"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></span></a><a href="https://hds.hel.fi" aria-label="Helsinki: Helsinki Design System" class="HeaderActionBar-module_titleAndLogoContainer__2LEAb HeaderActionBar-module_title__opzt9 HeaderActionBar-module_normal__3B4qi"><span class="HeaderActionBar-module_title__opzt9"><div class="page-header-title"><div>Helsinki Design System</div><div class="page-header-title-badge"><img style="filter:invert(1)" alt="HDS version number: 2.15.0" src="https://img.shields.io/github/v/release/City-of-Helsinki/helsinki-design-system?label=&amp;style=for-the-badge&amp;color=1a1a1a"/></div></div></span></a><div class="HeaderActionBar-module_headerActions__3lNnM"></div></div></div><div class="HeaderNavigationMenu-module_headerNavigationMenuContainer__2nK9z"><nav class="HeaderNavigationMenu-module_headerNavigationMenu__3G6-N"><ul class="HeaderNavigationMenu-module_headerNavigationMenuList__3HIzx"></ul></nav></div></div></header><div class="page-content"><aside class="side-content"><nav class="SideNavigation-module_sideNavigation__3X-9P" id="side-navigation" aria-label="Components"><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS Button-module_fullWidth__31eVK button_hds-button--fullwidth__1_hG9 SideNavigation-module_toggleButton__10tXH" aria-controls="side-navigation-menu" aria-expanded="false" aria-haspopup="true"><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Navigate to page</span><div class="Button-module_icon__O-h7R button_hds-icon__17j8Z" aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-down" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 13.5L17 8.5L18.5 10L12 16.5L5.5 10L7 8.5L12 13.5Z" fill="currentColor"></path></svg></div></button><ul class="SideNavigation-module_mainLevelList__SLZKQ" aria-label="Navigate to page" id="side-navigation-menu"><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Overview" id="side-nav-components" href="/hds-demo/hds-1817-stepbystep-docs/components"><span class="MainLevel-module_label__uWKJ7">Overview</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Accordion" id="side-nav-components-accordion" href="/hds-demo/hds-1817-stepbystep-docs/components/accordion"><span class="MainLevel-module_label__uWKJ7">Accordion</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Breadcrumb" id="side-nav-components-breadcrumb" href="/hds-demo/hds-1817-stepbystep-docs/components/breadcrumb"><span class="MainLevel-module_label__uWKJ7">Breadcrumb</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Button" id="side-nav-components-buttons" href="/hds-demo/hds-1817-stepbystep-docs/components/buttons"><span class="MainLevel-module_label__uWKJ7">Button</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Card" id="side-nav-components-card" href="/hds-demo/hds-1817-stepbystep-docs/components/card"><span class="MainLevel-module_label__uWKJ7">Card</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Checkbox" id="side-nav-components-checkbox" href="/hds-demo/hds-1817-stepbystep-docs/components/checkbox"><span class="MainLevel-module_label__uWKJ7">Checkbox</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="CookieConsent" id="side-nav-components-cookie-consent" href="/hds-demo/hds-1817-stepbystep-docs/components/cookie-consent"><span class="MainLevel-module_label__uWKJ7">CookieConsent</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="DateInput" id="side-nav-components-date-input" href="/hds-demo/hds-1817-stepbystep-docs/components/date-input"><span class="MainLevel-module_label__uWKJ7">DateInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_active__3IkdI MainLevel-module_open__2yWFj"><a aria-current="page" aria-label="Dialog" id="side-nav-components-dialog" href="/hds-demo/hds-1817-stepbystep-docs/components/dialog"><span class="MainLevel-module_label__uWKJ7">Dialog</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Dropdown" id="side-nav-components-dropdown" href="/hds-demo/hds-1817-stepbystep-docs/components/dropdown"><span class="MainLevel-module_label__uWKJ7">Dropdown</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Fieldset" id="side-nav-components-fieldset" href="/hds-demo/hds-1817-stepbystep-docs/components/fieldset"><span class="MainLevel-module_label__uWKJ7">Fieldset</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="FileInput" id="side-nav-components-file-input" href="/hds-demo/hds-1817-stepbystep-docs/components/file-input"><span class="MainLevel-module_label__uWKJ7">FileInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Footer" id="side-nav-components-footer" href="/hds-demo/hds-1817-stepbystep-docs/components/footer"><span class="MainLevel-module_label__uWKJ7">Footer</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Header" id="side-nav-components-header" href="/hds-demo/hds-1817-stepbystep-docs/components/header"><span class="MainLevel-module_label__uWKJ7">Header</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Hero" id="side-nav-components-hero" href="/hds-demo/hds-1817-stepbystep-docs/components/hero"><span class="MainLevel-module_label__uWKJ7">Hero</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Highlight" id="side-nav-components-highlight" href="/hds-demo/hds-1817-stepbystep-docs/components/highlight"><span class="MainLevel-module_label__uWKJ7">Highlight</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Icon" id="side-nav-components-icon" href="/hds-demo/hds-1817-stepbystep-docs/components/icon"><span class="MainLevel-module_label__uWKJ7">Icon</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Koros" id="side-nav-components-koros" href="/hds-demo/hds-1817-stepbystep-docs/components/koros"><span class="MainLevel-module_label__uWKJ7">Koros</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Link" id="side-nav-components-link" href="/hds-demo/hds-1817-stepbystep-docs/components/link"><span class="MainLevel-module_label__uWKJ7">Link</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Linkbox" id="side-nav-components-linkbox" href="/hds-demo/hds-1817-stepbystep-docs/components/linkbox"><span class="MainLevel-module_label__uWKJ7">Linkbox</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="LoadingSpinner" id="side-nav-components-loading-spinner" href="/hds-demo/hds-1817-stepbystep-docs/components/loading-spinner"><span class="MainLevel-module_label__uWKJ7">LoadingSpinner</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Logo" id="side-nav-components-logo" href="/hds-demo/hds-1817-stepbystep-docs/components/logo"><span class="MainLevel-module_label__uWKJ7">Logo</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Notification" id="side-nav-components-notification" href="/hds-demo/hds-1817-stepbystep-docs/components/notification"><span class="MainLevel-module_label__uWKJ7">Notification</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="NumberInput" id="side-nav-components-number-input" href="/hds-demo/hds-1817-stepbystep-docs/components/number-input"><span class="MainLevel-module_label__uWKJ7">NumberInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Pagination" id="side-nav-components-pagination" href="/hds-demo/hds-1817-stepbystep-docs/components/pagination"><span class="MainLevel-module_label__uWKJ7">Pagination</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="PasswordInput" id="side-nav-components-password-input" href="/hds-demo/hds-1817-stepbystep-docs/components/password-input"><span class="MainLevel-module_label__uWKJ7">PasswordInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="PhoneInput" id="side-nav-components-phone-input" href="/hds-demo/hds-1817-stepbystep-docs/components/phone-input"><span class="MainLevel-module_label__uWKJ7">PhoneInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="RadioButton" id="side-nav-components-radio-button" href="/hds-demo/hds-1817-stepbystep-docs/components/radio-button"><span class="MainLevel-module_label__uWKJ7">RadioButton</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="SearchInput" id="side-nav-components-search-input" href="/hds-demo/hds-1817-stepbystep-docs/components/search-input"><span class="MainLevel-module_label__uWKJ7">SearchInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="SelectionGroup" id="side-nav-components-selection-group" href="/hds-demo/hds-1817-stepbystep-docs/components/selection-group"><span class="MainLevel-module_label__uWKJ7">SelectionGroup</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="SideNavigation" id="side-nav-components-side-navigation" href="/hds-demo/hds-1817-stepbystep-docs/components/side-navigation"><span class="MainLevel-module_label__uWKJ7">SideNavigation</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="StatusLabel" id="side-nav-components-status-label" href="/hds-demo/hds-1817-stepbystep-docs/components/status-label"><span class="MainLevel-module_label__uWKJ7">StatusLabel</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="StepByStep" id="side-nav-components-step-by-step" href="/hds-demo/hds-1817-stepbystep-docs/components/step-by-step"><span class="MainLevel-module_label__uWKJ7">StepByStep</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Stepper" id="side-nav-components-stepper" href="/hds-demo/hds-1817-stepbystep-docs/components/stepper"><span class="MainLevel-module_label__uWKJ7">Stepper</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Table" id="side-nav-components-table" href="/hds-demo/hds-1817-stepbystep-docs/components/table"><span class="MainLevel-module_label__uWKJ7">Table</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Tabs" id="side-nav-components-tabs" href="/hds-demo/hds-1817-stepbystep-docs/components/tabs"><span class="MainLevel-module_label__uWKJ7">Tabs</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Tag" id="side-nav-components-tag" href="/hds-demo/hds-1817-stepbystep-docs/components/tag"><span class="MainLevel-module_label__uWKJ7">Tag</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="TextArea" id="side-nav-components-text-area" href="/hds-demo/hds-1817-stepbystep-docs/components/text-area"><span class="MainLevel-module_label__uWKJ7">TextArea</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="TextInput" id="side-nav-components-text-input" href="/hds-demo/hds-1817-stepbystep-docs/components/text-input"><span class="MainLevel-module_label__uWKJ7">TextInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="TimeInput" id="side-nav-components-time-input" href="/hds-demo/hds-1817-stepbystep-docs/components/time-input"><span class="MainLevel-module_label__uWKJ7">TimeInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="ToggleButton" id="side-nav-components-toggle-button" href="/hds-demo/hds-1817-stepbystep-docs/components/toggle-button"><span class="MainLevel-module_label__uWKJ7">ToggleButton</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Tooltip" id="side-nav-components-tooltip" href="/hds-demo/hds-1817-stepbystep-docs/components/tooltip"><span class="MainLevel-module_label__uWKJ7">Tooltip</span></a></li></ul></nav></aside><main id="content" class="main-content"><h1 id="dialog" style="position:relative" class="page-heading-1 heading-xl-mobile">Dialog<a href="#dialog" aria-label="dialog permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h1>
 <div class="status-label-description"><span class="StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H">Stable</span><span class="StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST" style="margin-left:var(--spacing-xs)">Accessible</span><div class="Tooltip-module_root__1Yo9t status-label-tooltip"><button type="button" class="Tooltip-module_button__2x9m0" title="Tooltip" aria-label="Tooltip" aria-expanded="false"><span aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="question-circle" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM13 16V18H11V16H13ZM12.0437 5.75C14.0343 5.75 15.7173 7.29464 15.7173 9.42361C15.7173 10.7806 15.2461 11.489 14.161 12.306L13.9187 12.4844C13.1753 13.0295 12.9556 13.3359 12.9386 14.142L12.9375 14.25H10.9375C10.9375 12.6746 11.4591 11.8378 12.6143 10.9622L12.8618 10.7796C13.5685 10.2628 13.7173 10.0539 13.7173 9.42361C13.7173 8.43934 12.9662 7.75 12.0437 7.75C11.1907 7.75 10.4785 8.34077 10.3816 9.20835L10.3734 9.30587L8.37663 9.19182C8.49191 7.17347 10.1344 5.75 12.0437 5.75Z" fill="currentColor"></path></svg></span></button></div></div>
 <p style="font-size:var(--fontsize-body-xl);color:var(--color-black-90);max-width:600px">Dialogs initiate a conversation between the service and the user. They are used when an input or a confirmation is needed from the user or when important information needs to be conveyed.</p>
-<div class="Tabs-module_tabs__2Ww5F"><div class="Tabs-module_tablistBar__elMv9 page-tabs-list"><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-left" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 12L15.5 17L14 18.5L7.5 12L14 5.5L15.5 7L10.5 12Z" fill="currentColor"></path></svg></button></div><div class="Tabs-module_tablist__1iuDO"><ul role="tablist" style="width:0px"><li role="tab" aria-selected="true" aria-controls="tab-0-panel" tabindex="0" id="tab-0-button" class="Tabs-module_tab__3oOoX Tabs-module_active__1Ic3B"><span>Usage</span></li><li role="tab" aria-selected="false" aria-controls="tab-1-panel" tabindex="-1" id="tab-1-button" class="Tabs-module_tab__3oOoX"><span>Code</span></li><li role="tab" aria-selected="false" aria-controls="tab-2-panel" tabindex="-1" id="tab-2-button" class="Tabs-module_tab__3oOoX"><span>Accessibility</span></li><li role="tab" aria-selected="false" aria-controls="tab-3-panel" tabindex="-1" id="tab-3-button" class="Tabs-module_tab__3oOoX"><span>Customisation</span></li></ul></div><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z" fill="currentColor"></path></svg></button></div></div><div id="tab-0-panel" role="tabpanel" aria-labelledby="tab-0-button"></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-131" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-131)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="Tabs-module_tabs__2Ww5F"><div class="Tabs-module_tablistBar__elMv9 page-tabs-list"><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-left" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 12L15.5 17L14 18.5L7.5 12L14 5.5L15.5 7L10.5 12Z" fill="currentColor"></path></svg></button></div><div class="Tabs-module_tablist__1iuDO"><ul role="tablist" style="width:0px"><li role="tab" aria-selected="true" aria-controls="tab-0-panel" tabindex="0" id="tab-0-button" class="Tabs-module_tab__3oOoX Tabs-module_active__1Ic3B"><span>Usage</span></li><li role="tab" aria-selected="false" aria-controls="tab-1-panel" tabindex="-1" id="tab-1-button" class="Tabs-module_tab__3oOoX"><span>Code</span></li><li role="tab" aria-selected="false" aria-controls="tab-2-panel" tabindex="-1" id="tab-2-button" class="Tabs-module_tab__3oOoX"><span>Accessibility</span></li><li role="tab" aria-selected="false" aria-controls="tab-3-panel" tabindex="-1" id="tab-3-button" class="Tabs-module_tab__3oOoX"><span>Customisation</span></li></ul></div><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z" fill="currentColor"></path></svg></button></div></div><div id="tab-0-panel" role="tabpanel" aria-labelledby="tab-0-button"></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-132" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-132)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/dropdown/code/index.html b/docs/hds-1817-stepbystep-docs/components/dropdown/code/index.html
index f0744c76bd8..b1a8ecdfaed 100644
--- a/docs/hds-1817-stepbystep-docs/components/dropdown/code/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/dropdown/code/index.html
@@ -443,7 +443,7 @@ <h3 id="packages" style="position:relative" class="page-heading-3 heading-m">Pac
 <h3 id="properties" style="position:relative" class="page-heading-3 heading-m">Properties<a href="#properties" aria-label="properties permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h3>
 <p>Note! You can find the full list of properties in the <a aria-label="React Storybook. Opens in a new tab" class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/storybook/react/?path=/docs/components-dropdowns-combobox--default" target="_blank" rel="noopener">React Storybook.</a></p>
 <p>Also, note that this component is an input. All features supported by the HDS TextInput are also supported by this component. See <a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/hds-demo/hds-1817-stepbystep-docs/components/text-input">TextInput documentation page</a> for more information.</p>
-<div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><thead><tr class="hds-table__header-row dark"><th scope="col">Property</th><th scope="col">Description</th><th scope="col">Values</th><th scope="col">Default value</th></tr></thead><tbody class="hds-table__content"><tr><td><code>clearable</code></td><td>If set to true, the clear selections button is enabled.</td><td><code>boolean</code></td><td>false</td></tr><tr><td><code>disabled</code></td><td>If set to true, the dropdown is disabled.</td><td><code>boolean</code></td><td>false</td></tr><tr><td><code>helper</code></td><td>Helper text to be displayed below the input.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>error</code></td><td>Error text to be displayed below the input.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>icon</code></td><td>An icon to be shown in the beginning of the input.</td><td><code>ReactNode</code></td><td>-</td></tr><tr><td><code>label</code></td><td>A text label for the input.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>options</code></td><td>The array of options shown in the input.</td><td><code>OptionType[]</code></td><td>-</td></tr><tr><td><code>placeholder</code></td><td>Short hint displayed in the input before the user enters a value.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>required</code></td><td>If set to true, the input is marked as required.</td><td><code>boolean</code></td><td>false</td></tr><tr><td><code>multiselect</code></td><td>If set to true, the user can select multiple values.</td><td><code>boolean</code></td><td>false</td></tr></tbody></table></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-337" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-337)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><thead><tr class="hds-table__header-row dark"><th scope="col">Property</th><th scope="col">Description</th><th scope="col">Values</th><th scope="col">Default value</th></tr></thead><tbody class="hds-table__content"><tr><td><code>clearable</code></td><td>If set to true, the clear selections button is enabled.</td><td><code>boolean</code></td><td>false</td></tr><tr><td><code>disabled</code></td><td>If set to true, the dropdown is disabled.</td><td><code>boolean</code></td><td>false</td></tr><tr><td><code>helper</code></td><td>Helper text to be displayed below the input.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>error</code></td><td>Error text to be displayed below the input.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>icon</code></td><td>An icon to be shown in the beginning of the input.</td><td><code>ReactNode</code></td><td>-</td></tr><tr><td><code>label</code></td><td>A text label for the input.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>options</code></td><td>The array of options shown in the input.</td><td><code>OptionType[]</code></td><td>-</td></tr><tr><td><code>placeholder</code></td><td>Short hint displayed in the input before the user enters a value.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>required</code></td><td>If set to true, the input is marked as required.</td><td><code>boolean</code></td><td>false</td></tr><tr><td><code>multiselect</code></td><td>If set to true, the user can select multiple values.</td><td><code>boolean</code></td><td>false</td></tr></tbody></table></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-338" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-338)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/dropdown/customisation/index.html b/docs/hds-1817-stepbystep-docs/components/dropdown/customisation/index.html
index 5484f93b8b9..8462d0e2a00 100644
--- a/docs/hds-1817-stepbystep-docs/components/dropdown/customisation/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/dropdown/customisation/index.html
@@ -196,7 +196,7 @@ <h3 id="customisation-example" style="position:relative" class="page-heading-3 h
     color: transparent !important;
   }
 }
-</style></div></div></div></div></div><div class="playground-block-buttons"><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS Button-module_size-small__3lizH button_hds-button--small__2NFef"><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Copy code</span></button><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS Button-module_size-small__3lizH button_hds-button--small__2NFef"><div class="Button-module_icon__O-h7R button_hds-icon__17j8Z" aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-undo" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 10C16.2091 10 18 11.7909 18 14C18 16.2091 16.2091 18 14 18H10V20H14.0364L14.188 19.9981C17.4131 19.9171 20 17.2611 20 14C20 10.7389 17.4131 8.08285 14.188 8.0019L8.5 8L12 4.5L10.5 3L4.5 9L10.5 15L12 13.5L8.5 10H14Z" fill="currentColor"></path></svg></div><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Reset example</span></button></div></div></div></div></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-338" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-338)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+</style></div></div></div></div></div><div class="playground-block-buttons"><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS Button-module_size-small__3lizH button_hds-button--small__2NFef"><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Copy code</span></button><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS Button-module_size-small__3lizH button_hds-button--small__2NFef"><div class="Button-module_icon__O-h7R button_hds-icon__17j8Z" aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-undo" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 10C16.2091 10 18 11.7909 18 14C18 16.2091 16.2091 18 14 18H10V20H14.0364L14.188 19.9981C17.4131 19.9171 20 17.2611 20 14C20 10.7389 17.4131 8.08285 14.188 8.0019L8.5 8L12 4.5L10.5 3L4.5 9L10.5 15L12 13.5L8.5 10H14Z" fill="currentColor"></path></svg></div><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Reset example</span></button></div></div></div></div></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-337" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-337)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/fieldset/accessibility/index.html b/docs/hds-1817-stepbystep-docs/components/fieldset/accessibility/index.html
index 04fb0c78783..3c1fbbbf0fd 100644
--- a/docs/hds-1817-stepbystep-docs/components/fieldset/accessibility/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/fieldset/accessibility/index.html
@@ -61,7 +61,7 @@ <h3 id="pay-attention-to" style="position:relative" class="page-heading-3 headin
 <ul>
 <li>Note that the heading is programmatically attached to each form element it contains. When assistive technologies focus a form element inside a Fieldset, they will announce the Fieldset heading in addition to the focused element information.</li>
 <li>Fieldset heading does not replace form element labels. Each form element still must have their own label. For more information, refer to <a aria-label="WCAG 3.3.2 Labels and Instructions guideline. Opens a different website." class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions.html">WCAG 3.3.2 Labels and Instructions guideline<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Link-module_icon__3ReCc link_icon__i_HqN Link-module_verticalAlignMediumIcon__12PVa link_vertical-align-medium-icon__3IWi1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="link-external" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z" fill="currentColor"></path></svg></a>.</li>
-</ul></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-318" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-318)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+</ul></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-316" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-316)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/fieldset/code/index.html b/docs/hds-1817-stepbystep-docs/components/fieldset/code/index.html
index b7760ff8eef..dc7fc2f3b31 100644
--- a/docs/hds-1817-stepbystep-docs/components/fieldset/code/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/fieldset/code/index.html
@@ -262,7 +262,7 @@ <h3 id="packages" style="position:relative" class="page-heading-3 heading-m">Pac
 <div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><thead><tr class="hds-table__header-row dark"><th scope="col">Package</th><th scope="col">Included</th><th scope="col">Storybook link</th><th scope="col">Source link</th></tr></thead><tbody class="hds-table__content"><tr><td><strong>HDS React</strong></td><td><div style="display:flex;gap:var(--spacing-3-xs)"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="check-circle-fill" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM16.5 8L18 9.5L10.5 17L6 12.5L7.5 11L10.5 14L16.5 8Z" fill="currentColor"></path></svg> Yes </div></td><td><a aria-label="View in Storybook. Opens in a new tab" class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/storybook/react/?path=/story/components-fieldset--default" target="_blank" rel="noopener">View in Storybook</a></td><td><a aria-label="View source. Opens in a new tab Opens a different website." class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="https://github.com/City-of-Helsinki/helsinki-design-system/blob/master/packages/react/src/components/fieldset/Fieldset.tsx" target="_blank" rel="noopener">View source<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Link-module_icon__3ReCc link_icon__i_HqN Link-module_verticalAlignMediumIcon__12PVa link_vertical-align-medium-icon__3IWi1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="link-external" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z" fill="currentColor"></path></svg></a></td></tr><tr><td><strong>HDS Core</strong></td><td><div style="display:flex;gap:var(--spacing-3-xs)"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="check-circle-fill" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM16.5 8L18 9.5L10.5 17L6 12.5L7.5 11L10.5 14L16.5 8Z" fill="currentColor"></path></svg> Yes </div></td><td><a aria-label="View in Storybook. Opens in a new tab" class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/storybook/core/?path=/story/components-fieldset--default" target="_blank" rel="noopener">View in Storybook</a></td><td><a aria-label="View source. Opens in a new tab Opens a different website." class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/core/src/components/fieldset" target="_blank" rel="noopener">View source<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Link-module_icon__3ReCc link_icon__i_HqN Link-module_verticalAlignMediumIcon__12PVa link_vertical-align-medium-icon__3IWi1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="link-external" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z" fill="currentColor"></path></svg></a></td></tr></tbody></table></div>
 <h3 id="properties" style="position:relative" class="page-heading-3 heading-m">Properties<a href="#properties" aria-label="properties permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h3>
 <p>Note! You can find the full list of properties in the <a aria-label="React Storybook. Opens in a new tab" class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/storybook/react/?path=/story/components-dropdowns-select--default" target="_blank" rel="noopener">React Storybook.</a></p>
-<div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><thead><tr class="hds-table__header-row dark"><th scope="col">Property</th><th scope="col">Description</th><th scope="col">Values</th><th scope="col">Default value</th></tr></thead><tbody class="hds-table__content"><tr><td><code>heading</code></td><td>Heading of the fieldset element.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>border</code></td><td>If set to true, a border is drawn around the fieldset.</td><td><code>boolean</code></td><td>false</td></tr><tr><td><code>helperText</code></td><td>The help text content that will be shown below the fieldset content.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>tooltipLabel</code></td><td>The aria-label text for the tooltip.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>tooltipButtonLabel</code></td><td>The aria-label text for the tooltip trigger button.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>tooltipText</code></td><td>The text content of the tooltip.</td><td><code>string</code></td><td>-</td></tr></tbody></table></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-317" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-317)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><thead><tr class="hds-table__header-row dark"><th scope="col">Property</th><th scope="col">Description</th><th scope="col">Values</th><th scope="col">Default value</th></tr></thead><tbody class="hds-table__content"><tr><td><code>heading</code></td><td>Heading of the fieldset element.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>border</code></td><td>If set to true, a border is drawn around the fieldset.</td><td><code>boolean</code></td><td>false</td></tr><tr><td><code>helperText</code></td><td>The help text content that will be shown below the fieldset content.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>tooltipLabel</code></td><td>The aria-label text for the tooltip.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>tooltipButtonLabel</code></td><td>The aria-label text for the tooltip trigger button.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>tooltipText</code></td><td>The text content of the tooltip.</td><td><code>string</code></td><td>-</td></tr></tbody></table></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-318" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-318)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/file-input/code/index.html b/docs/hds-1817-stepbystep-docs/components/file-input/code/index.html
index 87ff6ab036d..bc2b6ad51b8 100644
--- a/docs/hds-1817-stepbystep-docs/components/file-input/code/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/file-input/code/index.html
@@ -234,7 +234,7 @@ <h3 id="packages" style="position:relative" class="page-heading-3 heading-m">Pac
 <h3 id="properties" style="position:relative" class="page-heading-3 heading-m">Properties<a href="#properties" aria-label="properties permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h3>
 <p>Note! This component is an input. Therefore it supports the same features that all HDS form components do. The below table only lists properties distinctive for this particular component. You can find the full list of properties in the <a aria-label="React Storybook. Opens in a new tab" class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/storybook/react/?path=/story/components-fileinput--single" target="_blank" rel="noopener">React Storybook.</a></p>
 <p>Also, note that this component is an input. All features supported by the HDS TextInput are also supported by this component. See <a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/hds-demo/hds-1817-stepbystep-docs/components/text-input">TextInput documentation page</a> for more information.</p>
-<div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><thead><tr class="hds-table__header-row dark"><th scope="col">Property</th><th scope="col">Description</th><th scope="col">Values</th><th scope="col">Default value</th></tr></thead><tbody class="hds-table__content"><tr><td><code>accept</code></td><td>A comma-separated list of unique file type specifiers describing file types to allow. If present, the filename extension or filetype property is validated against the list.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>buttonLabel</code></td><td>The label for the file button. Overrides default text. The button is not visible for assistive technology.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>defaultValue</code></td><td>If set, pre-fill the file(s) selection</td><td><code>File[]</code></td><td>-</td></tr><tr><td><code>dragAndDrop</code></td><td>If set to true, the input will show a drag and rop area.</td><td><code>boolean</code></td><td>false</td></tr><tr><td><code>language</code></td><td>The language of the component. It affects which language is used to present component-specific messages, labels, and aria-labels.</td><td><code>string</code> (fi, en, sv)</td><td>fi</td></tr><tr><td><code>maxSize</code></td><td>Maximum file size in bytes.</td><td><code>number</code></td><td>-</td></tr><tr><td><code>multiple</code></td><td>If set to true, the input allows selecting multiple files.</td><td><code>boolean</code></td><td>false</td></tr></tbody></table></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-308" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-308)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><thead><tr class="hds-table__header-row dark"><th scope="col">Property</th><th scope="col">Description</th><th scope="col">Values</th><th scope="col">Default value</th></tr></thead><tbody class="hds-table__content"><tr><td><code>accept</code></td><td>A comma-separated list of unique file type specifiers describing file types to allow. If present, the filename extension or filetype property is validated against the list.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>buttonLabel</code></td><td>The label for the file button. Overrides default text. The button is not visible for assistive technology.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>defaultValue</code></td><td>If set, pre-fill the file(s) selection</td><td><code>File[]</code></td><td>-</td></tr><tr><td><code>dragAndDrop</code></td><td>If set to true, the input will show a drag and rop area.</td><td><code>boolean</code></td><td>false</td></tr><tr><td><code>language</code></td><td>The language of the component. It affects which language is used to present component-specific messages, labels, and aria-labels.</td><td><code>string</code> (fi, en, sv)</td><td>fi</td></tr><tr><td><code>maxSize</code></td><td>Maximum file size in bytes.</td><td><code>number</code></td><td>-</td></tr><tr><td><code>multiple</code></td><td>If set to true, the input allows selecting multiple files.</td><td><code>boolean</code></td><td>false</td></tr></tbody></table></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-309" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-309)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/footer/accessibility/index.html b/docs/hds-1817-stepbystep-docs/components/footer/accessibility/index.html
index ac547fc697a..b28a4633adb 100644
--- a/docs/hds-1817-stepbystep-docs/components/footer/accessibility/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/footer/accessibility/index.html
@@ -62,7 +62,7 @@ <h3 id="pay-attention-to" style="position:relative" class="page-heading-3 headin
 <li>HDS Footer is designed to support many different brand colours. When customising colours, refer to <a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/hds-demo/hds-1817-stepbystep-docs/foundation/design-tokens/colour">colour guidelines</a> to ensure accessibility.</li>
 <li><strong>When designing the footer link hierarchy, always think about keyboard and screen reader users.</strong> Remember that keyboard users need to manually navigate to each element.</li>
 <li>Footer landmark is provided automatically by the wrapping <code>&lt;footer&gt;</code> element. In case you want more landmarks, all the Footer sub components support <code>role</code> prop which should be used together with a descriptive <code>ariaLabel</code> prop. Just remember that landmarks should be used sparingly in order to avoid &quot;noise&quot; for screen readers and making the overall page layout difficult to understand.</li>
-</ul></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-301" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-301)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+</ul></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-300" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-300)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/footer/customisation/index.html b/docs/hds-1817-stepbystep-docs/components/footer/customisation/index.html
index a847e6b52b7..d85a3e9dc78 100644
--- a/docs/hds-1817-stepbystep-docs/components/footer/customisation/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/footer/customisation/index.html
@@ -235,7 +235,7 @@ <h3 id="custom-section" style="position:relative" class="page-heading-3 heading-
     color: transparent !important;
   }
 }
-</style></div></div></div></div></div><div class="playground-block-buttons"><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS Button-module_size-small__3lizH button_hds-button--small__2NFef"><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Copy code</span></button><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS Button-module_size-small__3lizH button_hds-button--small__2NFef"><div class="Button-module_icon__O-h7R button_hds-icon__17j8Z" aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-undo" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 10C16.2091 10 18 11.7909 18 14C18 16.2091 16.2091 18 14 18H10V20H14.0364L14.188 19.9981C17.4131 19.9171 20 17.2611 20 14C20 10.7389 17.4131 8.08285 14.188 8.0019L8.5 8L12 4.5L10.5 3L4.5 9L10.5 15L12 13.5L8.5 10H14Z" fill="currentColor"></path></svg></div><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Reset example</span></button></div></div></div></div></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-297" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-297)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+</style></div></div></div></div></div><div class="playground-block-buttons"><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS Button-module_size-small__3lizH button_hds-button--small__2NFef"><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Copy code</span></button><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS Button-module_size-small__3lizH button_hds-button--small__2NFef"><div class="Button-module_icon__O-h7R button_hds-icon__17j8Z" aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-undo" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 10C16.2091 10 18 11.7909 18 14C18 16.2091 16.2091 18 14 18H10V20H14.0364L14.188 19.9981C17.4131 19.9171 20 17.2611 20 14C20 10.7389 17.4131 8.08285 14.188 8.0019L8.5 8L12 4.5L10.5 3L4.5 9L10.5 15L12 13.5L8.5 10H14Z" fill="currentColor"></path></svg></div><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Reset example</span></button></div></div></div></div></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-296" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-296)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/header/accessibility/index.html b/docs/hds-1817-stepbystep-docs/components/header/accessibility/index.html
index 6cd9b89e246..5182fcbf074 100644
--- a/docs/hds-1817-stepbystep-docs/components/header/accessibility/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/header/accessibility/index.html
@@ -66,7 +66,7 @@ <h3 id="pay-attention-to" style="position:relative" class="page-heading-3 headin
 <li>Landmarks are provided by the wrapping <code>&lt;header&gt;</code> element, <code>&lt;nav&gt;</code> element in the Header.NavigationMenu component and with <code>role=&quot;search&quot;</code> attribute on the Header.HeaderSearch component. In case you want more landmarks, the Header.UniversalBar, Header.ActionBar and Header.HeaderSearch components support <code>role</code> prop which should be used together with a descriptive <code>ariaLabel</code> prop. Just remember that landmarks should be used sparingly in order to avoid &quot;noise&quot; for screen readers and making the overall page layout difficult to understand.</li>
 <li>Header.NavigationMenu&#x27;s dropdowns open only by clicking them. They don&#x27;t open from hovering with the mouse as it can be difficult to navigate for people with motor and seeing challenges.</li>
 <li>Only use the elements you need. Avoid clutter.</li>
-</ul></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-272" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-272)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+</ul></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-273" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-273)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/hero/accessibility/index.html b/docs/hds-1817-stepbystep-docs/components/hero/accessibility/index.html
index 53190b2c7b8..41c08220689 100644
--- a/docs/hds-1817-stepbystep-docs/components/hero/accessibility/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/hero/accessibility/index.html
@@ -63,7 +63,7 @@ <h3 id="pay-attention-to" style="position:relative" class="page-heading-3 headin
 <li>The hero component is not interactable and does not have a focus state.</li>
 <li>If the Hero&#x27;s CTA button is used as a link, remember to set &#x27;role=&quot;link&quot;&#x27; to the button.</li>
 <li>Images in the hero component are hidden from assistive technologies and have an empty alt-text.</li>
-</ul></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-262" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-262)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+</ul></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-261" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-261)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/hero/code/index.html b/docs/hds-1817-stepbystep-docs/components/hero/code/index.html
index 67d2eae007e..7705d6154ad 100644
--- a/docs/hds-1817-stepbystep-docs/components/hero/code/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/hero/code/index.html
@@ -140,7 +140,7 @@ <h3 id="packages" style="position:relative" class="page-heading-3 heading-m">Pac
 <div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><thead><tr class="hds-table__header-row dark"><th scope="col">Package</th><th scope="col">Included</th><th scope="col">Storybook link</th><th scope="col">Source link</th></tr></thead><tbody class="hds-table__content"><tr><td><strong>HDS React</strong></td><td><div style="display:flex;gap:var(--spacing-3-xs)"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="check-circle-fill" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM16.5 8L18 9.5L10.5 17L6 12.5L7.5 11L10.5 14L16.5 8Z" fill="currentColor"></path></svg> Yes </div></td><td><a aria-label="View in Storybook. Opens in a new tab" class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/storybook/react/?path=?path=/story/components-hero--diagonal-koros" target="_blank" rel="noopener">View in Storybook</a></td><td><a aria-label="View source. Opens in a new tab Opens a different website." class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="https://github.com/City-of-Helsinki/helsinki-design-system/blob/master/packages/react/src/components/hero/Hero.tsx" target="_blank" rel="noopener">View source<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Link-module_icon__3ReCc link_icon__i_HqN Link-module_verticalAlignMediumIcon__12PVa link_vertical-align-medium-icon__3IWi1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="link-external" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z" fill="currentColor"></path></svg></a></td></tr><tr><td><strong>HDS Core</strong></td><td><div style="display:flex;gap:var(--spacing-3-xs)"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="check-circle-fill" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM16.5 8L18 9.5L10.5 17L6 12.5L7.5 11L10.5 14L16.5 8Z" fill="currentColor"></path></svg> Yes </div></td><td><a aria-label="View in Storybook. Opens in a new tab" class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/storybook/core/?path=/story/components-hero--diagonal-koros" target="_blank" rel="noopener">View in Storybook</a></td><td><a aria-label="View source. Opens in a new tab Opens a different website." class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/core/src/components/hero" target="_blank" rel="noopener">View source<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Link-module_icon__3ReCc link_icon__i_HqN Link-module_verticalAlignMediumIcon__12PVa link_vertical-align-medium-icon__3IWi1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="link-external" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z" fill="currentColor"></path></svg></a></td></tr></tbody></table></div>
 <h3 id="properties" style="position:relative" class="page-heading-3 heading-m">Properties<a href="#properties" aria-label="properties permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h3>
 <p>Note! You can find the full list of properties in the <a aria-label="React Storybook. Opens in a new tab" class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/storybook/react/?path=/story/components-hero--diagonal-koros" target="_blank" rel="noopener">React Storybook.</a></p>
-<div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><thead><tr class="hds-table__header-row dark"><th scope="col">Property</th><th scope="col">Description</th><th scope="col">Values</th><th scope="col">Default value</th></tr></thead><tbody class="hds-table__content"><tr><td><code>theme</code></td><td>Theme prop for customisation of the Hero component.</td><td><code>object</code></td><td><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/components/hero/customisation">See customisation</a></td></tr><tr><td><code>koros</code></td><td>Koros prop for customisation of the Koros of the Hero component.</td><td><code>object</code></td><td><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/components/koros/customisation">See koros</a></td></tr><tr><td><code>imageSrc</code></td><td>Url of the image</td><td><code>string</code></td><td>-</td></tr><tr><td><code>centerContent</code></td><td>Should the text be aligned to center</td><td><code>boolean</code></td><td>false</td></tr><tr><td><code>variant</code></td><td>Which variant to render. The default value is <code>noImage</code> if <code>imageSrc</code> is not set. Otherwise default is <code>imageLeft</code></td><td><code>imageLeft, imageRight, backgroundImage, imageBottom,diagonalKoros, noImage</code></td><td><code>noImage</code> or <code>imageLeft</code></td></tr></tbody></table></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-260" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-260)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><thead><tr class="hds-table__header-row dark"><th scope="col">Property</th><th scope="col">Description</th><th scope="col">Values</th><th scope="col">Default value</th></tr></thead><tbody class="hds-table__content"><tr><td><code>theme</code></td><td>Theme prop for customisation of the Hero component.</td><td><code>object</code></td><td><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/components/hero/customisation">See customisation</a></td></tr><tr><td><code>koros</code></td><td>Koros prop for customisation of the Koros of the Hero component.</td><td><code>object</code></td><td><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/components/koros/customisation">See koros</a></td></tr><tr><td><code>imageSrc</code></td><td>Url of the image</td><td><code>string</code></td><td>-</td></tr><tr><td><code>centerContent</code></td><td>Should the text be aligned to center</td><td><code>boolean</code></td><td>false</td></tr><tr><td><code>variant</code></td><td>Which variant to render. The default value is <code>noImage</code> if <code>imageSrc</code> is not set. Otherwise default is <code>imageLeft</code></td><td><code>imageLeft, imageRight, backgroundImage, imageBottom,diagonalKoros, noImage</code></td><td><code>noImage</code> or <code>imageLeft</code></td></tr></tbody></table></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-262" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-262)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/hero/customisation/index.html b/docs/hds-1817-stepbystep-docs/components/hero/customisation/index.html
index 1a18bd61097..dfbf95d5f74 100644
--- a/docs/hds-1817-stepbystep-docs/components/hero/customisation/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/hero/customisation/index.html
@@ -139,7 +139,7 @@ <h3 id="customisation-example" style="position:relative" class="page-heading-3 h
     color: transparent !important;
   }
 }
-</style></div></div></div></div></div><div class="playground-block-buttons"><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS Button-module_size-small__3lizH button_hds-button--small__2NFef"><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Copy code</span></button><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS Button-module_size-small__3lizH button_hds-button--small__2NFef"><div class="Button-module_icon__O-h7R button_hds-icon__17j8Z" aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-undo" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 10C16.2091 10 18 11.7909 18 14C18 16.2091 16.2091 18 14 18H10V20H14.0364L14.188 19.9981C17.4131 19.9171 20 17.2611 20 14C20 10.7389 17.4131 8.08285 14.188 8.0019L8.5 8L12 4.5L10.5 3L4.5 9L10.5 15L12 13.5L8.5 10H14Z" fill="currentColor"></path></svg></div><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Reset example</span></button></div></div></div></div></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-258" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-258)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+</style></div></div></div></div></div><div class="playground-block-buttons"><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS Button-module_size-small__3lizH button_hds-button--small__2NFef"><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Copy code</span></button><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS Button-module_size-small__3lizH button_hds-button--small__2NFef"><div class="Button-module_icon__O-h7R button_hds-icon__17j8Z" aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-undo" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 10C16.2091 10 18 11.7909 18 14C18 16.2091 16.2091 18 14 18H10V20H14.0364L14.188 19.9981C17.4131 19.9171 20 17.2611 20 14C20 10.7389 17.4131 8.08285 14.188 8.0019L8.5 8L12 4.5L10.5 3L4.5 9L10.5 15L12 13.5L8.5 10H14Z" fill="currentColor"></path></svg></div><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Reset example</span></button></div></div></div></div></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-245" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-245)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/hero/index.html b/docs/hds-1817-stepbystep-docs/components/hero/index.html
index 5bde1709237..6bdfdf7736a 100644
--- a/docs/hds-1817-stepbystep-docs/components/hero/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/hero/index.html
@@ -58,7 +58,7 @@
 <p style="font-size:var(--fontsize-body-xl);color:var(--color-black-90);max-width:600px">Hero elements are used below the main navigation as the first content element. They can be used for different purposes, but most often, they shortly describe the page&#x27;s role and offer the page&#x27;s essential function as a call-to-action button.</p>
 <div class="Tabs-module_tabs__2Ww5F"><div class="Tabs-module_tablistBar__elMv9 page-tabs-list"><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-left" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 12L15.5 17L14 18.5L7.5 12L14 5.5L15.5 7L10.5 12Z" fill="currentColor"></path></svg></button></div><div class="Tabs-module_tablist__1iuDO"><ul role="tablist" style="width:0px"><li role="tab" aria-selected="true" aria-controls="tab-0-panel" tabindex="0" id="tab-0-button" class="Tabs-module_tab__3oOoX Tabs-module_active__1Ic3B"><span>Usage</span></li><li role="tab" aria-selected="false" aria-controls="tab-1-panel" tabindex="-1" id="tab-1-button" class="Tabs-module_tab__3oOoX"><span>Code</span></li><li role="tab" aria-selected="false" aria-controls="tab-2-panel" tabindex="-1" id="tab-2-button" class="Tabs-module_tab__3oOoX"><span>Accessibility</span></li><li role="tab" aria-selected="false" aria-controls="tab-3-panel" tabindex="-1" id="tab-3-button" class="Tabs-module_tab__3oOoX"><span>Customisation</span></li></ul></div><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z" fill="currentColor"></path></svg></button></div></div><div id="tab-0-panel" role="tabpanel" aria-labelledby="tab-0-button"><h2 id="usage" style="position:relative" class="page-heading-2 heading-l">Usage<a href="#usage" aria-label="usage permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h2>
 <h3 id="example" style="position:relative" class="page-heading-3 heading-m">Example<a href="#example" aria-label="example permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h3>
-<div class="playground-block-preview playground-block-preview-light"><div class="Hero-module_hero__1VoHZ hero_hds-hero__2NmPy custom-theme-243"><div class="Hero-module_container__3HfYy hero_hds-hero__container__1Di91"><div class="Hero-module_content__3qNYZ hero_hds-hero__content__1Gtc5 Hero-module_singleColumn__b0Sxw hero_hds-hero__content--single-column__iqfBL"><div class="Hero-module_card__JuJeG hero_hds-hero__card__3TyQe"><h1 class="Hero-module_title__3-FB4 hero_hds-hero__title__3Ue67">Hero without an image</h1><p class="Hero-module_text__ZzYyT hero_hds-hero__text__3K95k">This is an introduction text. The length is circa two sentences. The suitable total length of the title and introduction is around 230 characters, including spaces. The intro ends with a period.</p><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS" role="link" style="--background-color:#fff;--color:var(--color-bus);--border-color:#fff"><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-"><p>Call to action</p></span></button></div></div></div><div class="Hero-module_korosContainerOverflowBottom__2aHz0 hero_hds-hero__koros-container--overflow-bottom__1sOA8"><div class="Koros-module_koros__1r3rg" style="fill:var(--koros-color);transform:scaleY(-1)"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_pulse-244" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 10v75h32v-75c-8 0-8-10-16-10s-8 10-16 10z"></path></pattern></defs><rect fill="url(#koros_pulse-244)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div></div></div></div>
+<div class="playground-block-preview playground-block-preview-light"><div class="Hero-module_hero__1VoHZ hero_hds-hero__2NmPy custom-theme-246"><div class="Hero-module_container__3HfYy hero_hds-hero__container__1Di91"><div class="Hero-module_content__3qNYZ hero_hds-hero__content__1Gtc5 Hero-module_singleColumn__b0Sxw hero_hds-hero__content--single-column__iqfBL"><div class="Hero-module_card__JuJeG hero_hds-hero__card__3TyQe"><h1 class="Hero-module_title__3-FB4 hero_hds-hero__title__3Ue67">Hero without an image</h1><p class="Hero-module_text__ZzYyT hero_hds-hero__text__3K95k">This is an introduction text. The length is circa two sentences. The suitable total length of the title and introduction is around 230 characters, including spaces. The intro ends with a period.</p><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS" role="link" style="--background-color:#fff;--color:var(--color-bus);--border-color:#fff"><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-"><p>Call to action</p></span></button></div></div></div><div class="Hero-module_korosContainerOverflowBottom__2aHz0 hero_hds-hero__koros-container--overflow-bottom__1sOA8"><div class="Koros-module_koros__1r3rg" style="fill:var(--koros-color);transform:scaleY(-1)"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_pulse-247" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 10v75h32v-75c-8 0-8-10-16-10s-8 10-16 10z"></path></pattern></defs><rect fill="url(#koros_pulse-247)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div></div></div></div>
 <h3 id="principles" style="position:relative" class="page-heading-3 heading-m">Principles<a href="#principles" aria-label="principles permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h3>
 <ul>
 <li>Hero is primarily intended only for landing pages.</li>
@@ -87,19 +87,19 @@ <h4 id="herotext" style="position:relative" class="page-heading-4 heading-s">Her
 <h3 id="variations" style="position:relative" class="page-heading-3 heading-m">Variations<a href="#variations" aria-label="variations permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h3>
 <h4 id="image-left-or-right" style="position:relative" class="page-heading-4 heading-s">Image left or right<a href="#image-left-or-right" aria-label="image left or right permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h4>
 <p>Use when you want to support the title&#x27;s message with an image. Don&#x27;t use an image just for illustrative purposes.</p>
-<div class="playground-block-preview playground-block-preview-light"><div class="Hero-module_hero__1VoHZ hero_hds-hero__2NmPy custom-theme-245 Hero-module_imageRight__CJzYp hero_hds-hero--image-right__3r8N5"><div class="Hero-module_container__3HfYy hero_hds-hero__container__1Di91"><div class="Hero-module_content__3qNYZ hero_hds-hero__content__1Gtc5 Hero-module_twoColumns__3wl_x hero_hds-hero__content--two-columns__3Q1x5"><div class="Hero-module_card__JuJeG hero_hds-hero__card__3TyQe"><h1 class="Hero-module_title__3-FB4 hero_hds-hero__title__3Ue67">Hero image on the right</h1><p class="Hero-module_text__ZzYyT hero_hds-hero__text__3K95k"><p>This is an introduction text. The length is circa two sentences. The suitable total length of the title and introduction is around 230 characters, including spaces. The intro ends with a period.</p></p><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS" role="link" style="--background-color:#000;--color:#fff;--border-color:#000"><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-"><p>Call to action</p></span></button></div><div class="Hero-module_twoColumnsImageContainer__3jDE3 hero_hds-hero__content--two-columns__image-container__2CX-9"><img class="Hero-module_image__VwcrU hero_hds-hero__image__ZfJbX" src="https://hds.hel.fi/images/homepage/amos58.jpg" aria-hidden="true" alt=""/></div></div></div><div class="Hero-module_korosAndImageContainer__Phyhg hero_hds-hero__koros-and-image-container__2-9vj"><div class="Hero-module_korosContainer__2UG8F hero_hds-hero__koros-container__2Ab9n"><div class="Koros-module_koros__1r3rg" style="fill:var(--koros-color);transform:scaleY(-1)"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-246" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-246)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div></div><div class="Hero-module_imageBelowKoros__30i8S hero_hds-hero__image-below-koros__1LSUL"><img class="Hero-module_image__VwcrU hero_hds-hero__image__ZfJbX" src="https://hds.hel.fi/images/homepage/amos58.jpg" aria-hidden="true" alt=""/></div></div></div></div>
+<div class="playground-block-preview playground-block-preview-light"><div class="Hero-module_hero__1VoHZ hero_hds-hero__2NmPy custom-theme-248 Hero-module_imageRight__CJzYp hero_hds-hero--image-right__3r8N5"><div class="Hero-module_container__3HfYy hero_hds-hero__container__1Di91"><div class="Hero-module_content__3qNYZ hero_hds-hero__content__1Gtc5 Hero-module_twoColumns__3wl_x hero_hds-hero__content--two-columns__3Q1x5"><div class="Hero-module_card__JuJeG hero_hds-hero__card__3TyQe"><h1 class="Hero-module_title__3-FB4 hero_hds-hero__title__3Ue67">Hero image on the right</h1><p class="Hero-module_text__ZzYyT hero_hds-hero__text__3K95k"><p>This is an introduction text. The length is circa two sentences. The suitable total length of the title and introduction is around 230 characters, including spaces. The intro ends with a period.</p></p><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS" role="link" style="--background-color:#000;--color:#fff;--border-color:#000"><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-"><p>Call to action</p></span></button></div><div class="Hero-module_twoColumnsImageContainer__3jDE3 hero_hds-hero__content--two-columns__image-container__2CX-9"><img class="Hero-module_image__VwcrU hero_hds-hero__image__ZfJbX" src="https://hds.hel.fi/images/homepage/amos58.jpg" aria-hidden="true" alt=""/></div></div></div><div class="Hero-module_korosAndImageContainer__Phyhg hero_hds-hero__koros-and-image-container__2-9vj"><div class="Hero-module_korosContainer__2UG8F hero_hds-hero__koros-container__2Ab9n"><div class="Koros-module_koros__1r3rg" style="fill:var(--koros-color);transform:scaleY(-1)"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-249" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-249)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div></div><div class="Hero-module_imageBelowKoros__30i8S hero_hds-hero__image-below-koros__1LSUL"><img class="Hero-module_image__VwcrU hero_hds-hero__image__ZfJbX" src="https://hds.hel.fi/images/homepage/amos58.jpg" aria-hidden="true" alt=""/></div></div></div></div>
 <h4 id="image-as-a-background" style="position:relative" class="page-heading-4 heading-s">Image as a background<a href="#image-as-a-background" aria-label="image as a background permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h4>
 <p>Use when you want to fill the background area with an image. Use an image that works when the title and intro container covers part of the image.</p>
-<div style="background-color:var(--color-black-5)" class="playground-block-preview playground-block-preview-light"><div class="Hero-module_hero__1VoHZ hero_hds-hero__2NmPy custom-theme-247 Hero-module_backgroundImage__dSqiQ hero_hds-hero--background-image__2Wse1"><div class="Hero-module_withBackgroundContainer__2jIxP hero_hds-hero--with-background__container__1jpi7"><div class="Hero-module_withBackgroundBackground__Hv69M hero_hds-hero--with-background__background__JEVuN"><img class="Hero-module_image__VwcrU hero_hds-hero__image__ZfJbX" src="https://hds.hel.fi/images/homepage/amos58.jpg" aria-hidden="true" alt=""/><div class="Hero-module_backgroundImageKoros__1yXtL hero_hds-hero--background-image__koros__2nudG"><div class="Koros-module_koros__1r3rg" style="fill:var(--koros-color)"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-248" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-248)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div></div></div><div class="Hero-module_content__3qNYZ hero_hds-hero__content__1Gtc5"><div class="Hero-module_card__JuJeG hero_hds-hero__card__3TyQe"><h1 class="Hero-module_title__3-FB4 hero_hds-hero__title__3Ue67">Hero image as a background</h1><p class="Hero-module_text__ZzYyT hero_hds-hero__text__3K95k"><p>This is an introduction text. The length is circa two sentences. The suitable total length of the title and introduction is around 230 characters, including spaces. The intro ends with a period.</p></p><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS" role="link" style="--background-color:#000;--color:#fff;--border-color:#000"><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-"><p>Call to action</p></span></button></div><div class="Hero-module_emptyColumn__3_c4m hero_hds-hero--with-background__empty-column__21yM0"></div></div></div></div></div>
+<div style="background-color:var(--color-black-5)" class="playground-block-preview playground-block-preview-light"><div class="Hero-module_hero__1VoHZ hero_hds-hero__2NmPy custom-theme-250 Hero-module_backgroundImage__dSqiQ hero_hds-hero--background-image__2Wse1"><div class="Hero-module_withBackgroundContainer__2jIxP hero_hds-hero--with-background__container__1jpi7"><div class="Hero-module_withBackgroundBackground__Hv69M hero_hds-hero--with-background__background__JEVuN"><img class="Hero-module_image__VwcrU hero_hds-hero__image__ZfJbX" src="https://hds.hel.fi/images/homepage/amos58.jpg" aria-hidden="true" alt=""/><div class="Hero-module_backgroundImageKoros__1yXtL hero_hds-hero--background-image__koros__2nudG"><div class="Koros-module_koros__1r3rg" style="fill:var(--koros-color)"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-251" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-251)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div></div></div><div class="Hero-module_content__3qNYZ hero_hds-hero__content__1Gtc5"><div class="Hero-module_card__JuJeG hero_hds-hero__card__3TyQe"><h1 class="Hero-module_title__3-FB4 hero_hds-hero__title__3Ue67">Hero image as a background</h1><p class="Hero-module_text__ZzYyT hero_hds-hero__text__3K95k"><p>This is an introduction text. The length is circa two sentences. The suitable total length of the title and introduction is around 230 characters, including spaces. The intro ends with a period.</p></p><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS" role="link" style="--background-color:#000;--color:#fff;--border-color:#000"><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-"><p>Call to action</p></span></button></div><div class="Hero-module_emptyColumn__3_c4m hero_hds-hero--with-background__empty-column__21yM0"></div></div></div></div></div>
 <h4 id="diagonal-koro-shape-and-image-as-a-background" style="position:relative" class="page-heading-4 heading-s">Diagonal koro shape and image as a background<a href="#diagonal-koro-shape-and-image-as-a-background" aria-label="diagonal koro shape and image as a background permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h4>
 <p>Use when you want to create a dynamic Hero layout on your page. Ensure the image adapts to various screen sizes to prevent clipping, especially with faces in the picture. On desktop, it&#x27;s on the sides, while on mobile, it&#x27;s below. Validate this for all screen sizes.</p>
-<div style="background-color:var(--color-black-5)" class="playground-block-preview playground-block-preview-light"><div class="Hero-module_hero__1VoHZ hero_hds-hero__2NmPy custom-theme-249 Hero-module_diagonalKoros__Yj-M5 hero_hds-hero--diagonal-koros__1gvD8"><div class="Hero-module_diagonalKorosWithBackgroundContainer__79wsC hero_hds-hero--diagonal-koros__1gvD8 hero_hds-hero--with-background__container__1jpi7"><div class="Hero-module_content__3qNYZ hero_hds-hero__content__1Gtc5"><div class="Hero-module_contentColums__2GK_9 hero_hds-hero--with-background__content-columns__1NT1u"><div class="Hero-module_card__JuJeG hero_hds-hero__card__3TyQe"><h1 class="Hero-module_title__3-FB4 hero_hds-hero__title__3Ue67">Hero with a diagonal koro shape</h1><p class="Hero-module_text__ZzYyT hero_hds-hero__text__3K95k"><p>This is an introduction text. The length is circa two sentences. The suitable total length of the title and introduction is around 230 characters, including spaces. The intro ends with a period.</p></p><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS" role="link" style="--background-color:#000;--color:#fff;--border-color:#000"><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-"><p>Call to action</p></span></button></div><div class="Hero-module_emptyColumn__3_c4m hero_hds-hero--with-background__empty-column__21yM0"></div></div></div><div class="Hero-module_korosAligner__2Y1UK hero_hds-hero--diagonal-koros__koros-aligner__80AA4"><div class="Hero-module_diagonalKorosAndBackground__1rGzm hero_hds-hero--diagonal-koros__koros-and-background__1U31N"><div class="Hero-module_korosContainer__2UG8F hero_hds-hero__koros-container__2Ab9n"><div class="Koros-module_koros__1r3rg" style="fill:var(--koros-color)"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-250" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-250)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div></div></div></div><div class="Hero-module_withBackgroundBackground__Hv69M hero_hds-hero--with-background__background__JEVuN"><img class="Hero-module_image__VwcrU hero_hds-hero__image__ZfJbX" src="https://hds.hel.fi/images/homepage/amos58.jpg" aria-hidden="true" alt=""/></div></div></div></div>
+<div style="background-color:var(--color-black-5)" class="playground-block-preview playground-block-preview-light"><div class="Hero-module_hero__1VoHZ hero_hds-hero__2NmPy custom-theme-252 Hero-module_diagonalKoros__Yj-M5 hero_hds-hero--diagonal-koros__1gvD8"><div class="Hero-module_diagonalKorosWithBackgroundContainer__79wsC hero_hds-hero--diagonal-koros__1gvD8 hero_hds-hero--with-background__container__1jpi7"><div class="Hero-module_content__3qNYZ hero_hds-hero__content__1Gtc5"><div class="Hero-module_contentColums__2GK_9 hero_hds-hero--with-background__content-columns__1NT1u"><div class="Hero-module_card__JuJeG hero_hds-hero__card__3TyQe"><h1 class="Hero-module_title__3-FB4 hero_hds-hero__title__3Ue67">Hero with a diagonal koro shape</h1><p class="Hero-module_text__ZzYyT hero_hds-hero__text__3K95k"><p>This is an introduction text. The length is circa two sentences. The suitable total length of the title and introduction is around 230 characters, including spaces. The intro ends with a period.</p></p><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS" role="link" style="--background-color:#000;--color:#fff;--border-color:#000"><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-"><p>Call to action</p></span></button></div><div class="Hero-module_emptyColumn__3_c4m hero_hds-hero--with-background__empty-column__21yM0"></div></div></div><div class="Hero-module_korosAligner__2Y1UK hero_hds-hero--diagonal-koros__koros-aligner__80AA4"><div class="Hero-module_diagonalKorosAndBackground__1rGzm hero_hds-hero--diagonal-koros__koros-and-background__1U31N"><div class="Hero-module_korosContainer__2UG8F hero_hds-hero__koros-container__2Ab9n"><div class="Koros-module_koros__1r3rg" style="fill:var(--koros-color)"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-253" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-253)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div></div></div></div><div class="Hero-module_withBackgroundBackground__Hv69M hero_hds-hero--with-background__background__JEVuN"><img class="Hero-module_image__VwcrU hero_hds-hero__image__ZfJbX" src="https://hds.hel.fi/images/homepage/amos58.jpg" aria-hidden="true" alt=""/></div></div></div></div>
 <h4 id="wide-bottom-image" style="position:relative" class="page-heading-4 heading-s">Wide bottom image<a href="#wide-bottom-image" aria-label="wide bottom image permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h4>
 <p>Use when you want to emphasize the title and introduction text content over the image. Ensure the image adapts to various screen sizes to prevent clipping, especially with faces in the picture. On desktop, it&#x27;s on the right side, while on mobile, it&#x27;s below. Validate this for all screen sizes.</p>
-<div style="background-color:var(--color-black-5)" class="playground-block-preview playground-block-preview-light"><div class="Hero-module_hero__1VoHZ hero_hds-hero__2NmPy custom-theme-251"><div class="Hero-module_container__3HfYy hero_hds-hero__container__1Di91"><div class="Hero-module_content__3qNYZ hero_hds-hero__content__1Gtc5 Hero-module_singleColumn__b0Sxw hero_hds-hero__content--single-column__iqfBL"><div class="Hero-module_card__JuJeG hero_hds-hero__card__3TyQe"><h1 class="Hero-module_title__3-FB4 hero_hds-hero__title__3Ue67">Hero image below the title</h1><p class="Hero-module_text__ZzYyT hero_hds-hero__text__3K95k"><p>This is an introduction text. The length is circa two sentences. The suitable total length of the title and introduction is around 230 characters, including spaces. The intro ends with a period.</p></p><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS" role="link" style="--background-color:#000;--color:#fff;--border-color:#000"><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-"><p>Call to action</p></span></button></div></div></div><div class="Hero-module_korosAndImageContainer__Phyhg hero_hds-hero__koros-and-image-container__2-9vj"><div class="Hero-module_korosContainer__2UG8F hero_hds-hero__koros-container__2Ab9n"><div class="Koros-module_koros__1r3rg" style="fill:var(--koros-color);transform:scaleY(-1)"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-252" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-252)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div></div><div class="Hero-module_imageBelowKoros__30i8S hero_hds-hero__image-below-koros__1LSUL"><img class="Hero-module_image__VwcrU hero_hds-hero__image__ZfJbX" src="https://hds.hel.fi/images/homepage/amos58.jpg" aria-hidden="true" alt=""/></div></div></div></div>
+<div style="background-color:var(--color-black-5)" class="playground-block-preview playground-block-preview-light"><div class="Hero-module_hero__1VoHZ hero_hds-hero__2NmPy custom-theme-254"><div class="Hero-module_container__3HfYy hero_hds-hero__container__1Di91"><div class="Hero-module_content__3qNYZ hero_hds-hero__content__1Gtc5 Hero-module_singleColumn__b0Sxw hero_hds-hero__content--single-column__iqfBL"><div class="Hero-module_card__JuJeG hero_hds-hero__card__3TyQe"><h1 class="Hero-module_title__3-FB4 hero_hds-hero__title__3Ue67">Hero image below the title</h1><p class="Hero-module_text__ZzYyT hero_hds-hero__text__3K95k"><p>This is an introduction text. The length is circa two sentences. The suitable total length of the title and introduction is around 230 characters, including spaces. The intro ends with a period.</p></p><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS" role="link" style="--background-color:#000;--color:#fff;--border-color:#000"><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-"><p>Call to action</p></span></button></div></div></div><div class="Hero-module_korosAndImageContainer__Phyhg hero_hds-hero__koros-and-image-container__2-9vj"><div class="Hero-module_korosContainer__2UG8F hero_hds-hero__koros-container__2Ab9n"><div class="Koros-module_koros__1r3rg" style="fill:var(--koros-color);transform:scaleY(-1)"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-255" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-255)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div></div><div class="Hero-module_imageBelowKoros__30i8S hero_hds-hero__image-below-koros__1LSUL"><img class="Hero-module_image__VwcrU hero_hds-hero__image__ZfJbX" src="https://hds.hel.fi/images/homepage/amos58.jpg" aria-hidden="true" alt=""/></div></div></div></div>
 <h4 id="no-image" style="position:relative" class="page-heading-4 heading-s">No image<a href="#no-image" aria-label="no image permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h4>
 <p>Use when you don&#x27;t have a suitable image to support the title section&#x27;s message – or in a situation – where you want to emphasize a visual piece of content right after the Hero component.</p>
-<div style="background-color:var(--color-black-5)" class="playground-block-preview playground-block-preview-light"><div class="Hero-module_hero__1VoHZ hero_hds-hero__2NmPy custom-theme-253"><div class="Hero-module_container__3HfYy hero_hds-hero__container__1Di91"><div class="Hero-module_content__3qNYZ hero_hds-hero__content__1Gtc5 Hero-module_singleColumn__b0Sxw hero_hds-hero__content--single-column__iqfBL"><div class="Hero-module_card__JuJeG hero_hds-hero__card__3TyQe"><h1 class="Hero-module_title__3-FB4 hero_hds-hero__title__3Ue67">Hero without an image</h1><p class="Hero-module_text__ZzYyT hero_hds-hero__text__3K95k">This is an introduction text. The length is circa two sentences. The suitable total length of the title and introduction is around 230 characters, including spaces. The intro ends with a period.</p><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS" role="link" style="--background-color:#000;--color:#fff;--border-color:#000"><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-"><p>Call to action</p></span></button></div></div></div><div class="Hero-module_korosContainerInwardKoros__L0Vt_ hero_hds-hero__koros-container--inward-koros__3hMd7"><div class="Koros-module_koros__1r3rg" style="fill:var(--koros-color)"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_pulse-254" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 10v75h32v-75c-8 0-8-10-16-10s-8 10-16 10z"></path></pattern></defs><rect fill="url(#koros_pulse-254)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div></div></div></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-255" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-255)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div style="background-color:var(--color-black-5)" class="playground-block-preview playground-block-preview-light"><div class="Hero-module_hero__1VoHZ hero_hds-hero__2NmPy custom-theme-256"><div class="Hero-module_container__3HfYy hero_hds-hero__container__1Di91"><div class="Hero-module_content__3qNYZ hero_hds-hero__content__1Gtc5 Hero-module_singleColumn__b0Sxw hero_hds-hero__content--single-column__iqfBL"><div class="Hero-module_card__JuJeG hero_hds-hero__card__3TyQe"><h1 class="Hero-module_title__3-FB4 hero_hds-hero__title__3Ue67">Hero without an image</h1><p class="Hero-module_text__ZzYyT hero_hds-hero__text__3K95k">This is an introduction text. The length is circa two sentences. The suitable total length of the title and introduction is around 230 characters, including spaces. The intro ends with a period.</p><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS" role="link" style="--background-color:#000;--color:#fff;--border-color:#000"><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-"><p>Call to action</p></span></button></div></div></div><div class="Hero-module_korosContainerInwardKoros__L0Vt_ hero_hds-hero__koros-container--inward-koros__3hMd7"><div class="Koros-module_koros__1r3rg" style="fill:var(--koros-color)"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_pulse-257" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 10v75h32v-75c-8 0-8-10-16-10s-8 10-16 10z"></path></pattern></defs><rect fill="url(#koros_pulse-257)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div></div></div></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-258" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-258)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/hero/tabs/index.html b/docs/hds-1817-stepbystep-docs/components/hero/tabs/index.html
index ee052405328..7effc6ff841 100644
--- a/docs/hds-1817-stepbystep-docs/components/hero/tabs/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/hero/tabs/index.html
@@ -56,7 +56,7 @@
   </script><link rel="manifest" href="/hds-demo/hds-1817-stepbystep-docs/manifest.webmanifest" crossorigin="anonymous"/><link rel="apple-touch-icon" sizes="any" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/favicon-32x32.ico"/><link rel="apple-touch-icon" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/apple-touch-icon.png"/><link rel="apple-touch-icon" sizes="192x192" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/favicon-192x192.png"/><link rel="apple-touch-icon" sizes="512x512" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/favicon-512x512.png"/><link rel="preconnect" href="https://webanalytics.digiaiiris.com/js"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="page text-body"><header class="hds-header Header-module_header__291GF pageHeader" id="page-header"><div class="Header-module_headerBackgroundWrapper__KsFy2"><a href="#content" class="SkipLink-module_skipLink__1knzF"><span class="SkipLink-module_skipLinkLabel__21n5B">Skip to content</span></a><div class="HeaderActionBar-module_headerActionBarContainer__5tfj-"><div class="HeaderActionBar-module_headerActionBar__lPeGE"><a href="https://hds.hel.fi" aria-label="City of Helsinki Logo" class="HeaderActionBar-module_titleAndLogoContainer__2LEAb HeaderActionBar-module_logo__2r2T0"><span class="HeaderActionBarLogo-module_logoWrapper__8NgfS"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></span></a><a href="https://hds.hel.fi" aria-label="Helsinki: Helsinki Design System" class="HeaderActionBar-module_titleAndLogoContainer__2LEAb HeaderActionBar-module_title__opzt9 HeaderActionBar-module_normal__3B4qi"><span class="HeaderActionBar-module_title__opzt9"><div class="page-header-title"><div>Helsinki Design System</div><div class="page-header-title-badge"><img style="filter:invert(1)" alt="HDS version number: 2.15.0" src="https://img.shields.io/github/v/release/City-of-Helsinki/helsinki-design-system?label=&amp;style=for-the-badge&amp;color=1a1a1a"/></div></div></span></a><div class="HeaderActionBar-module_headerActions__3lNnM"></div></div></div><div class="HeaderNavigationMenu-module_headerNavigationMenuContainer__2nK9z"><nav class="HeaderNavigationMenu-module_headerNavigationMenu__3G6-N"><ul class="HeaderNavigationMenu-module_headerNavigationMenuList__3HIzx"></ul></nav></div></div></header><div class="page-content"><aside class="side-content"><nav class="SideNavigation-module_sideNavigation__3X-9P" id="side-navigation" aria-label="Components"><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS Button-module_fullWidth__31eVK button_hds-button--fullwidth__1_hG9 SideNavigation-module_toggleButton__10tXH" aria-controls="side-navigation-menu" aria-expanded="false" aria-haspopup="true"><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Navigate to page</span><div class="Button-module_icon__O-h7R button_hds-icon__17j8Z" aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-down" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 13.5L17 8.5L18.5 10L12 16.5L5.5 10L7 8.5L12 13.5Z" fill="currentColor"></path></svg></div></button><ul class="SideNavigation-module_mainLevelList__SLZKQ" aria-label="Navigate to page" id="side-navigation-menu"><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Overview" id="side-nav-components" href="/hds-demo/hds-1817-stepbystep-docs/components"><span class="MainLevel-module_label__uWKJ7">Overview</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Accordion" id="side-nav-components-accordion" href="/hds-demo/hds-1817-stepbystep-docs/components/accordion"><span class="MainLevel-module_label__uWKJ7">Accordion</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Breadcrumb" id="side-nav-components-breadcrumb" href="/hds-demo/hds-1817-stepbystep-docs/components/breadcrumb"><span class="MainLevel-module_label__uWKJ7">Breadcrumb</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Button" id="side-nav-components-buttons" href="/hds-demo/hds-1817-stepbystep-docs/components/buttons"><span class="MainLevel-module_label__uWKJ7">Button</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Card" id="side-nav-components-card" href="/hds-demo/hds-1817-stepbystep-docs/components/card"><span class="MainLevel-module_label__uWKJ7">Card</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Checkbox" id="side-nav-components-checkbox" href="/hds-demo/hds-1817-stepbystep-docs/components/checkbox"><span class="MainLevel-module_label__uWKJ7">Checkbox</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="CookieConsent" id="side-nav-components-cookie-consent" href="/hds-demo/hds-1817-stepbystep-docs/components/cookie-consent"><span class="MainLevel-module_label__uWKJ7">CookieConsent</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="DateInput" id="side-nav-components-date-input" href="/hds-demo/hds-1817-stepbystep-docs/components/date-input"><span class="MainLevel-module_label__uWKJ7">DateInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Dialog" id="side-nav-components-dialog" href="/hds-demo/hds-1817-stepbystep-docs/components/dialog"><span class="MainLevel-module_label__uWKJ7">Dialog</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Dropdown" id="side-nav-components-dropdown" href="/hds-demo/hds-1817-stepbystep-docs/components/dropdown"><span class="MainLevel-module_label__uWKJ7">Dropdown</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Fieldset" id="side-nav-components-fieldset" href="/hds-demo/hds-1817-stepbystep-docs/components/fieldset"><span class="MainLevel-module_label__uWKJ7">Fieldset</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="FileInput" id="side-nav-components-file-input" href="/hds-demo/hds-1817-stepbystep-docs/components/file-input"><span class="MainLevel-module_label__uWKJ7">FileInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Footer" id="side-nav-components-footer" href="/hds-demo/hds-1817-stepbystep-docs/components/footer"><span class="MainLevel-module_label__uWKJ7">Footer</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Header" id="side-nav-components-header" href="/hds-demo/hds-1817-stepbystep-docs/components/header"><span class="MainLevel-module_label__uWKJ7">Header</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_active__3IkdI MainLevel-module_open__2yWFj"><a aria-current="page" aria-label="Hero" id="side-nav-components-hero" href="/hds-demo/hds-1817-stepbystep-docs/components/hero"><span class="MainLevel-module_label__uWKJ7">Hero</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Highlight" id="side-nav-components-highlight" href="/hds-demo/hds-1817-stepbystep-docs/components/highlight"><span class="MainLevel-module_label__uWKJ7">Highlight</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Icon" id="side-nav-components-icon" href="/hds-demo/hds-1817-stepbystep-docs/components/icon"><span class="MainLevel-module_label__uWKJ7">Icon</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Koros" id="side-nav-components-koros" href="/hds-demo/hds-1817-stepbystep-docs/components/koros"><span class="MainLevel-module_label__uWKJ7">Koros</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Link" id="side-nav-components-link" href="/hds-demo/hds-1817-stepbystep-docs/components/link"><span class="MainLevel-module_label__uWKJ7">Link</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Linkbox" id="side-nav-components-linkbox" href="/hds-demo/hds-1817-stepbystep-docs/components/linkbox"><span class="MainLevel-module_label__uWKJ7">Linkbox</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="LoadingSpinner" id="side-nav-components-loading-spinner" href="/hds-demo/hds-1817-stepbystep-docs/components/loading-spinner"><span class="MainLevel-module_label__uWKJ7">LoadingSpinner</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Logo" id="side-nav-components-logo" href="/hds-demo/hds-1817-stepbystep-docs/components/logo"><span class="MainLevel-module_label__uWKJ7">Logo</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Notification" id="side-nav-components-notification" href="/hds-demo/hds-1817-stepbystep-docs/components/notification"><span class="MainLevel-module_label__uWKJ7">Notification</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="NumberInput" id="side-nav-components-number-input" href="/hds-demo/hds-1817-stepbystep-docs/components/number-input"><span class="MainLevel-module_label__uWKJ7">NumberInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Pagination" id="side-nav-components-pagination" href="/hds-demo/hds-1817-stepbystep-docs/components/pagination"><span class="MainLevel-module_label__uWKJ7">Pagination</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="PasswordInput" id="side-nav-components-password-input" href="/hds-demo/hds-1817-stepbystep-docs/components/password-input"><span class="MainLevel-module_label__uWKJ7">PasswordInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="PhoneInput" id="side-nav-components-phone-input" href="/hds-demo/hds-1817-stepbystep-docs/components/phone-input"><span class="MainLevel-module_label__uWKJ7">PhoneInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="RadioButton" id="side-nav-components-radio-button" href="/hds-demo/hds-1817-stepbystep-docs/components/radio-button"><span class="MainLevel-module_label__uWKJ7">RadioButton</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="SearchInput" id="side-nav-components-search-input" href="/hds-demo/hds-1817-stepbystep-docs/components/search-input"><span class="MainLevel-module_label__uWKJ7">SearchInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="SelectionGroup" id="side-nav-components-selection-group" href="/hds-demo/hds-1817-stepbystep-docs/components/selection-group"><span class="MainLevel-module_label__uWKJ7">SelectionGroup</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="SideNavigation" id="side-nav-components-side-navigation" href="/hds-demo/hds-1817-stepbystep-docs/components/side-navigation"><span class="MainLevel-module_label__uWKJ7">SideNavigation</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="StatusLabel" id="side-nav-components-status-label" href="/hds-demo/hds-1817-stepbystep-docs/components/status-label"><span class="MainLevel-module_label__uWKJ7">StatusLabel</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="StepByStep" id="side-nav-components-step-by-step" href="/hds-demo/hds-1817-stepbystep-docs/components/step-by-step"><span class="MainLevel-module_label__uWKJ7">StepByStep</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Stepper" id="side-nav-components-stepper" href="/hds-demo/hds-1817-stepbystep-docs/components/stepper"><span class="MainLevel-module_label__uWKJ7">Stepper</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Table" id="side-nav-components-table" href="/hds-demo/hds-1817-stepbystep-docs/components/table"><span class="MainLevel-module_label__uWKJ7">Table</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Tabs" id="side-nav-components-tabs" href="/hds-demo/hds-1817-stepbystep-docs/components/tabs"><span class="MainLevel-module_label__uWKJ7">Tabs</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Tag" id="side-nav-components-tag" href="/hds-demo/hds-1817-stepbystep-docs/components/tag"><span class="MainLevel-module_label__uWKJ7">Tag</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="TextArea" id="side-nav-components-text-area" href="/hds-demo/hds-1817-stepbystep-docs/components/text-area"><span class="MainLevel-module_label__uWKJ7">TextArea</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="TextInput" id="side-nav-components-text-input" href="/hds-demo/hds-1817-stepbystep-docs/components/text-input"><span class="MainLevel-module_label__uWKJ7">TextInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="TimeInput" id="side-nav-components-time-input" href="/hds-demo/hds-1817-stepbystep-docs/components/time-input"><span class="MainLevel-module_label__uWKJ7">TimeInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="ToggleButton" id="side-nav-components-toggle-button" href="/hds-demo/hds-1817-stepbystep-docs/components/toggle-button"><span class="MainLevel-module_label__uWKJ7">ToggleButton</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Tooltip" id="side-nav-components-tooltip" href="/hds-demo/hds-1817-stepbystep-docs/components/tooltip"><span class="MainLevel-module_label__uWKJ7">Tooltip</span></a></li></ul></nav></aside><main id="content" class="main-content"><h1 id="hero" style="position:relative" class="page-heading-1 heading-xl-mobile">Hero<a href="#hero" aria-label="hero permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h1>
 <div class="status-label-description"><span class="StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H" variant="rounded">Stable</span><span class="StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST" variant="rounded" style="margin-left:var(--spacing-xs)">Accessible</span><div class="Tooltip-module_root__1Yo9t status-label-tooltip"><button type="button" class="Tooltip-module_button__2x9m0" title="Tooltip" aria-label="Tooltip" aria-expanded="false"><span aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="question-circle" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM13 16V18H11V16H13ZM12.0437 5.75C14.0343 5.75 15.7173 7.29464 15.7173 9.42361C15.7173 10.7806 15.2461 11.489 14.161 12.306L13.9187 12.4844C13.1753 13.0295 12.9556 13.3359 12.9386 14.142L12.9375 14.25H10.9375C10.9375 12.6746 11.4591 11.8378 12.6143 10.9622L12.8618 10.7796C13.5685 10.2628 13.7173 10.0539 13.7173 9.42361C13.7173 8.43934 12.9662 7.75 12.0437 7.75C11.1907 7.75 10.4785 8.34077 10.3816 9.20835L10.3734 9.30587L8.37663 9.19182C8.49191 7.17347 10.1344 5.75 12.0437 5.75Z" fill="currentColor"></path></svg></span></button></div></div>
 <p style="font-size:var(--fontsize-body-xl);color:var(--color-black-90);max-width:600px">Hero elements are used below the main navigation as the first content element. They can be used for different purposes, but most often, they shortly describe the page&#x27;s role and offer the page&#x27;s essential function as a call-to-action button.</p>
-<div class="Tabs-module_tabs__2Ww5F"><div class="Tabs-module_tablistBar__elMv9 page-tabs-list"><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-left" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 12L15.5 17L14 18.5L7.5 12L14 5.5L15.5 7L10.5 12Z" fill="currentColor"></path></svg></button></div><div class="Tabs-module_tablist__1iuDO"><ul role="tablist" style="width:0px"><li role="tab" aria-selected="true" aria-controls="tab-0-panel" tabindex="0" id="tab-0-button" class="Tabs-module_tab__3oOoX Tabs-module_active__1Ic3B"><span>Usage</span></li><li role="tab" aria-selected="false" aria-controls="tab-1-panel" tabindex="-1" id="tab-1-button" class="Tabs-module_tab__3oOoX"><span>Code</span></li><li role="tab" aria-selected="false" aria-controls="tab-2-panel" tabindex="-1" id="tab-2-button" class="Tabs-module_tab__3oOoX"><span>Accessibility</span></li><li role="tab" aria-selected="false" aria-controls="tab-3-panel" tabindex="-1" id="tab-3-button" class="Tabs-module_tab__3oOoX"><span>Customisation</span></li></ul></div><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z" fill="currentColor"></path></svg></button></div></div><div id="tab-0-panel" role="tabpanel" aria-labelledby="tab-0-button"></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-256" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-256)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="Tabs-module_tabs__2Ww5F"><div class="Tabs-module_tablistBar__elMv9 page-tabs-list"><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-left" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 12L15.5 17L14 18.5L7.5 12L14 5.5L15.5 7L10.5 12Z" fill="currentColor"></path></svg></button></div><div class="Tabs-module_tablist__1iuDO"><ul role="tablist" style="width:0px"><li role="tab" aria-selected="true" aria-controls="tab-0-panel" tabindex="0" id="tab-0-button" class="Tabs-module_tab__3oOoX Tabs-module_active__1Ic3B"><span>Usage</span></li><li role="tab" aria-selected="false" aria-controls="tab-1-panel" tabindex="-1" id="tab-1-button" class="Tabs-module_tab__3oOoX"><span>Code</span></li><li role="tab" aria-selected="false" aria-controls="tab-2-panel" tabindex="-1" id="tab-2-button" class="Tabs-module_tab__3oOoX"><span>Accessibility</span></li><li role="tab" aria-selected="false" aria-controls="tab-3-panel" tabindex="-1" id="tab-3-button" class="Tabs-module_tab__3oOoX"><span>Customisation</span></li></ul></div><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z" fill="currentColor"></path></svg></button></div></div><div id="tab-0-panel" role="tabpanel" aria-labelledby="tab-0-button"></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-230" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-230)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/highlight/accessibility/index.html b/docs/hds-1817-stepbystep-docs/components/highlight/accessibility/index.html
index bfcce42e13c..04a1d5b270d 100644
--- a/docs/hds-1817-stepbystep-docs/components/highlight/accessibility/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/highlight/accessibility/index.html
@@ -59,7 +59,7 @@
 <div class="Tabs-module_tabs__2Ww5F"><div class="Tabs-module_tablistBar__elMv9 page-tabs-list"><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-left" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 12L15.5 17L14 18.5L7.5 12L14 5.5L15.5 7L10.5 12Z" fill="currentColor"></path></svg></button></div><div class="Tabs-module_tablist__1iuDO"><ul role="tablist" style="width:0px"><li role="tab" aria-selected="false" aria-controls="tab-0-panel" tabindex="-1" id="tab-0-button" class="Tabs-module_tab__3oOoX"><span>Usage</span></li><li role="tab" aria-selected="false" aria-controls="tab-1-panel" tabindex="-1" id="tab-1-button" class="Tabs-module_tab__3oOoX"><span>Code</span></li><li role="tab" aria-selected="true" aria-controls="tab-2-panel" tabindex="0" id="tab-2-button" class="Tabs-module_tab__3oOoX Tabs-module_active__1Ic3B"><span>Accessibility</span></li><li role="tab" aria-selected="false" aria-controls="tab-3-panel" tabindex="-1" id="tab-3-button" class="Tabs-module_tab__3oOoX"><span>Customisation</span></li></ul></div><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z" fill="currentColor"></path></svg></button></div></div><div id="tab-2-panel" role="tabpanel" aria-labelledby="tab-2-button"><h2 id="accessibility" style="position:relative" class="page-heading-2 heading-l">Accessibility<a href="#accessibility" aria-label="accessibility permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h2>
 <ul>
 <li>Both the Quote and Highlight elements are non-interactable and therefore do not have any special keyboard functionality.</li>
-</ul></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-228" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-228)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+</ul></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-229" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-229)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/highlight/code/index.html b/docs/hds-1817-stepbystep-docs/components/highlight/code/index.html
index 7fee2b770c4..1a3e549f904 100644
--- a/docs/hds-1817-stepbystep-docs/components/highlight/code/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/highlight/code/index.html
@@ -199,7 +199,7 @@ <h3 id="packages" style="position:relative" class="page-heading-3 heading-m">Pac
 <div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><thead><tr class="hds-table__header-row dark"><th scope="col">Package</th><th scope="col">Included</th><th scope="col">Storybook link</th><th scope="col">Source link</th></tr></thead><tbody class="hds-table__content"><tr><td><strong>HDS React</strong></td><td><div style="display:flex;gap:var(--spacing-3-xs)"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="check-circle-fill" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM16.5 8L18 9.5L10.5 17L6 12.5L7.5 11L10.5 14L16.5 8Z" fill="currentColor"></path></svg> Yes </div></td><td><a aria-label="View in Storybook. Opens in a new tab" class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/storybook/react/?path=?path=/story/components-highlight--default-highlight" target="_blank" rel="noopener">View in Storybook</a></td><td><a aria-label="View source. Opens in a new tab Opens a different website." class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="https://github.com/City-of-Helsinki/helsinki-design-system/blob/master/packages/react/src/components/highlight/Highlight.tsx" target="_blank" rel="noopener">View source<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Link-module_icon__3ReCc link_icon__i_HqN Link-module_verticalAlignMediumIcon__12PVa link_vertical-align-medium-icon__3IWi1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="link-external" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z" fill="currentColor"></path></svg></a></td></tr><tr><td><strong>HDS Core</strong></td><td><div style="display:flex;gap:var(--spacing-3-xs)"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="check-circle-fill" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM16.5 8L18 9.5L10.5 17L6 12.5L7.5 11L10.5 14L16.5 8Z" fill="currentColor"></path></svg> Yes </div></td><td><a aria-label="View in Storybook. Opens in a new tab" class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/storybook/core/?path=/story/components-highlight--default-highlight" target="_blank" rel="noopener">View in Storybook</a></td><td><a aria-label="View source. Opens in a new tab Opens a different website." class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/core/src/components/highlight" target="_blank" rel="noopener">View source<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Link-module_icon__3ReCc link_icon__i_HqN Link-module_verticalAlignMediumIcon__12PVa link_vertical-align-medium-icon__3IWi1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="link-external" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z" fill="currentColor"></path></svg></a></td></tr></tbody></table></div>
 <h3 id="properties" style="position:relative" class="page-heading-3 heading-m">Properties<a href="#properties" aria-label="properties permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h3>
 <p>Note! You can find the full list of properties in the <a aria-label="React Storybook. Opens in a new tab" class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/storybook/react/?path=?path=/story/components-highlight--default-highlight" target="_blank" rel="noopener">React Storybook.</a></p>
-<div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><thead><tr class="hds-table__header-row dark"><th scope="col">Property</th><th scope="col">Description</th><th scope="col">Values</th><th scope="col">Default value</th></tr></thead><tbody class="hds-table__content"><tr><td><code>text</code></td><td>Text for the Highlight/quote</td><td>-</td><td>-</td></tr><tr><td><code>size</code></td><td>Highlight size</td><td><code>&quot;s&quot;</code> <code>&quot;m&quot;</code> <code>&quot;l&quot;</code></td><td><code>&quot;m&quot;</code></td></tr><tr><td><code>type</code></td><td>Type of the Highlight</td><td><code>&quot;highlight&quot;</code> <code>&quot;quote&quot;</code></td><td><code>&quot;highlight&quot;</code></td></tr></tbody></table></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-227" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-227)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><thead><tr class="hds-table__header-row dark"><th scope="col">Property</th><th scope="col">Description</th><th scope="col">Values</th><th scope="col">Default value</th></tr></thead><tbody class="hds-table__content"><tr><td><code>text</code></td><td>Text for the Highlight/quote</td><td>-</td><td>-</td></tr><tr><td><code>size</code></td><td>Highlight size</td><td><code>&quot;s&quot;</code> <code>&quot;m&quot;</code> <code>&quot;l&quot;</code></td><td><code>&quot;m&quot;</code></td></tr><tr><td><code>type</code></td><td>Type of the Highlight</td><td><code>&quot;highlight&quot;</code> <code>&quot;quote&quot;</code></td><td><code>&quot;highlight&quot;</code></td></tr></tbody></table></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-226" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-226)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/highlight/customisation/index.html b/docs/hds-1817-stepbystep-docs/components/highlight/customisation/index.html
index 90f15f95bd7..56f4ce012f5 100644
--- a/docs/hds-1817-stepbystep-docs/components/highlight/customisation/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/highlight/customisation/index.html
@@ -110,7 +110,7 @@ <h3 id="customisation-example" style="position:relative" class="page-heading-3 h
     color: transparent !important;
   }
 }
-</style></div></div></div></div></div><div class="playground-block-buttons"><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS Button-module_size-small__3lizH button_hds-button--small__2NFef"><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Copy code</span></button><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS Button-module_size-small__3lizH button_hds-button--small__2NFef"><div class="Button-module_icon__O-h7R button_hds-icon__17j8Z" aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-undo" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 10C16.2091 10 18 11.7909 18 14C18 16.2091 16.2091 18 14 18H10V20H14.0364L14.188 19.9981C17.4131 19.9171 20 17.2611 20 14C20 10.7389 17.4131 8.08285 14.188 8.0019L8.5 8L12 4.5L10.5 3L4.5 9L10.5 15L12 13.5L8.5 10H14Z" fill="currentColor"></path></svg></div><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Reset example</span></button></div></div></div></div></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-224" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-224)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+</style></div></div></div></div></div><div class="playground-block-buttons"><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS Button-module_size-small__3lizH button_hds-button--small__2NFef"><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Copy code</span></button><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS Button-module_size-small__3lizH button_hds-button--small__2NFef"><div class="Button-module_icon__O-h7R button_hds-icon__17j8Z" aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-undo" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 10C16.2091 10 18 11.7909 18 14C18 16.2091 16.2091 18 14 18H10V20H14.0364L14.188 19.9981C17.4131 19.9171 20 17.2611 20 14C20 10.7389 17.4131 8.08285 14.188 8.0019L8.5 8L12 4.5L10.5 3L4.5 9L10.5 15L12 13.5L8.5 10H14Z" fill="currentColor"></path></svg></div><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Reset example</span></button></div></div></div></div></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-225" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-225)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/highlight/index.html b/docs/hds-1817-stepbystep-docs/components/highlight/index.html
index 279847e4330..0fe1fc66268 100644
--- a/docs/hds-1817-stepbystep-docs/components/highlight/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/highlight/index.html
@@ -58,7 +58,7 @@
 <p style="font-size:var(--fontsize-body-xl);color:var(--color-black-90);max-width:600px">Highlight component allows lifting an excerpt from a longer text for emphasis. Highlight supports two types: highlight (default) and quotation. The Quote element has a reference to the quote source. The Highlight element is an excerpt from the text without the source information.</p>
 <div class="Tabs-module_tabs__2Ww5F"><div class="Tabs-module_tablistBar__elMv9 page-tabs-list"><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-left" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 12L15.5 17L14 18.5L7.5 12L14 5.5L15.5 7L10.5 12Z" fill="currentColor"></path></svg></button></div><div class="Tabs-module_tablist__1iuDO"><ul role="tablist" style="width:0px"><li role="tab" aria-selected="true" aria-controls="tab-0-panel" tabindex="0" id="tab-0-button" class="Tabs-module_tab__3oOoX Tabs-module_active__1Ic3B"><span>Usage</span></li><li role="tab" aria-selected="false" aria-controls="tab-1-panel" tabindex="-1" id="tab-1-button" class="Tabs-module_tab__3oOoX"><span>Code</span></li><li role="tab" aria-selected="false" aria-controls="tab-2-panel" tabindex="-1" id="tab-2-button" class="Tabs-module_tab__3oOoX"><span>Accessibility</span></li><li role="tab" aria-selected="false" aria-controls="tab-3-panel" tabindex="-1" id="tab-3-button" class="Tabs-module_tab__3oOoX"><span>Customisation</span></li></ul></div><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z" fill="currentColor"></path></svg></button></div></div><div id="tab-0-panel" role="tabpanel" aria-labelledby="tab-0-button"><h2 id="usage" style="position:relative" class="page-heading-2 heading-l">Usage<a href="#usage" aria-label="usage permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h2>
 <h3 id="example" style="position:relative" class="page-heading-3 heading-m">Example<a href="#example" aria-label="example permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h3>
-<div class="playground-block-preview playground-block-preview-light"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ultrices tincidunt nunc, porttitor pretium enim vestibulum eget. Suspendisse ac tempor ante. Nullam at convallis ex. Integer mattis sagittis interdum. Suspendisse viverra sit amet mauris non interdum. In porttitor tempus diam vel venenatis. Aenean elementum sem vitae tempus tempor. </p><figure class="Highlight-module_highlight__iVprf highlight_hds-highlight___uE3p custom-theme-208"><blockquote class="Highlight-module_highlightBlockquote__Bhn4A highlight_hds-blockquote__1QLSQ"><p class="Highlight-module_text__2OPbz highlight_hds-highlight__text__31xf_">You may select an highlight from the article to be displayed here. Select an excerpt that you want the user to pay attention to.</p></blockquote></figure><p>Sed quis massa elementum, pulvinar lacus at, efficitur velit. Nam nec ornare augue. Aliquam pellentesque dictum nisl, a commodo arcu dapibus id.</p><figure class="Highlight-module_highlight__iVprf highlight_hds-highlight___uE3p custom-theme-209"><blockquote class="Highlight-module_highlightBlockquote__Bhn4A highlight_hds-blockquote__1QLSQ"><p class="Highlight-module_text__2OPbz highlight_hds-highlight__text__31xf_ Highlight-module_quote__elKVW highlight_hds-highlight__quote__3ed0C">Add an interesting quote here</p></blockquote><figcaption class="Highlight-module_reference__ICH8J highlight_hds-highlight__reference__3_4ca">—⁠<!-- -->First name Last name. Title.</figcaption></figure><p>Sed mollis mauris nec dui condimentum pulvinar. Suspendisse vitae aliquet nisi. Donec libero ipsum, fermentum ut augue id, scelerisque lobortis orci.</p></div>
+<div class="playground-block-preview playground-block-preview-light"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ultrices tincidunt nunc, porttitor pretium enim vestibulum eget. Suspendisse ac tempor ante. Nullam at convallis ex. Integer mattis sagittis interdum. Suspendisse viverra sit amet mauris non interdum. In porttitor tempus diam vel venenatis. Aenean elementum sem vitae tempus tempor. </p><figure class="Highlight-module_highlight__iVprf highlight_hds-highlight___uE3p custom-theme-207"><blockquote class="Highlight-module_highlightBlockquote__Bhn4A highlight_hds-blockquote__1QLSQ"><p class="Highlight-module_text__2OPbz highlight_hds-highlight__text__31xf_">You may select an highlight from the article to be displayed here. Select an excerpt that you want the user to pay attention to.</p></blockquote></figure><p>Sed quis massa elementum, pulvinar lacus at, efficitur velit. Nam nec ornare augue. Aliquam pellentesque dictum nisl, a commodo arcu dapibus id.</p><figure class="Highlight-module_highlight__iVprf highlight_hds-highlight___uE3p custom-theme-208"><blockquote class="Highlight-module_highlightBlockquote__Bhn4A highlight_hds-blockquote__1QLSQ"><p class="Highlight-module_text__2OPbz highlight_hds-highlight__text__31xf_ Highlight-module_quote__elKVW highlight_hds-highlight__quote__3ed0C">Add an interesting quote here</p></blockquote><figcaption class="Highlight-module_reference__ICH8J highlight_hds-highlight__reference__3_4ca">—⁠<!-- -->First name Last name. Title.</figcaption></figure><p>Sed mollis mauris nec dui condimentum pulvinar. Suspendisse vitae aliquet nisi. Donec libero ipsum, fermentum ut augue id, scelerisque lobortis orci.</p></div>
 <h3 id="principles" style="position:relative" class="page-heading-3 heading-m">Principles<a href="#principles" aria-label="principles permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h3>
 <ul>
 <li>Highlights are designed to capture users&#x27; attention. <strong>Therefore, they should be used sparingly.</strong></li>
@@ -68,22 +68,22 @@ <h3 id="principles" style="position:relative" class="page-heading-3 heading-m">P
 </ul>
 <h3 id="type-variations" style="position:relative" class="page-heading-3 heading-m">Type variations<a href="#type-variations" aria-label="type variations permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h3>
 <h5 id="highlight" style="position:relative" class="page-heading-5 heading-xs">Highlight<a href="#highlight" aria-label="highlight permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h5>
-<div class="playground-block-preview playground-block-preview-light"><figure class="Highlight-module_highlight__iVprf highlight_hds-highlight___uE3p custom-theme-210"><blockquote class="Highlight-module_highlightBlockquote__Bhn4A highlight_hds-blockquote__1QLSQ"><p class="Highlight-module_text__2OPbz highlight_hds-highlight__text__31xf_">You may select an highlight from the article to be displayed here. Select an excerpt that you want the user to pay attention to.</p></blockquote></figure></div>
+<div class="playground-block-preview playground-block-preview-light"><figure class="Highlight-module_highlight__iVprf highlight_hds-highlight___uE3p custom-theme-209"><blockquote class="Highlight-module_highlightBlockquote__Bhn4A highlight_hds-blockquote__1QLSQ"><p class="Highlight-module_text__2OPbz highlight_hds-highlight__text__31xf_">You may select an highlight from the article to be displayed here. Select an excerpt that you want the user to pay attention to.</p></blockquote></figure></div>
 <h5 id="quote" style="position:relative" class="page-heading-5 heading-xs">Quote<a href="#quote" aria-label="quote permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h5>
 <p><strong>In Core package</strong> remember to insert the em-dash character — (HTML code <code>&amp;#8212</code>) before the reference text.</p>
-<div class="playground-block-preview playground-block-preview-light"><figure class="Highlight-module_highlight__iVprf highlight_hds-highlight___uE3p custom-theme-211"><blockquote class="Highlight-module_highlightBlockquote__Bhn4A highlight_hds-blockquote__1QLSQ"><p class="Highlight-module_text__2OPbz highlight_hds-highlight__text__31xf_ Highlight-module_quote__elKVW highlight_hds-highlight__quote__3ed0C">Add an interesting quote here</p></blockquote><figcaption class="Highlight-module_reference__ICH8J highlight_hds-highlight__reference__3_4ca">—⁠<!-- -->First name Last name. Title.</figcaption></figure></div>
+<div class="playground-block-preview playground-block-preview-light"><figure class="Highlight-module_highlight__iVprf highlight_hds-highlight___uE3p custom-theme-210"><blockquote class="Highlight-module_highlightBlockquote__Bhn4A highlight_hds-blockquote__1QLSQ"><p class="Highlight-module_text__2OPbz highlight_hds-highlight__text__31xf_ Highlight-module_quote__elKVW highlight_hds-highlight__quote__3ed0C">Add an interesting quote here</p></blockquote><figcaption class="Highlight-module_reference__ICH8J highlight_hds-highlight__reference__3_4ca">—⁠<!-- -->First name Last name. Title.</figcaption></figure></div>
 <h3 id="size-variations" style="position:relative" class="page-heading-3 heading-m">Size variations<a href="#size-variations" aria-label="size variations permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h3>
 <h5 id="large" style="position:relative" class="page-heading-5 heading-xs">Large<a href="#large" aria-label="large permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h5>
-<div class="playground-block-preview playground-block-preview-light"><figure class="Highlight-module_highlight__iVprf highlight_hds-highlight___uE3p Highlight-module_size-l__3i6ZU highlight_hds-highlight--large__1EjiL custom-theme-212"><blockquote class="Highlight-module_highlightBlockquote__Bhn4A highlight_hds-blockquote__1QLSQ"><p class="Highlight-module_text__2OPbz highlight_hds-highlight__text__31xf_">You may select an highlight from the article to be displayed here. Select an excerpt that you want the user to pay attention to.</p></blockquote></figure><figure class="Highlight-module_highlight__iVprf highlight_hds-highlight___uE3p Highlight-module_size-l__3i6ZU highlight_hds-highlight--large__1EjiL custom-theme-213"><blockquote class="Highlight-module_highlightBlockquote__Bhn4A highlight_hds-blockquote__1QLSQ"><p class="Highlight-module_text__2OPbz highlight_hds-highlight__text__31xf_ Highlight-module_quote__elKVW highlight_hds-highlight__quote__3ed0C">Add an interesting quote here</p></blockquote><figcaption class="Highlight-module_reference__ICH8J highlight_hds-highlight__reference__3_4ca">—⁠<!-- -->First name Last name. Title.</figcaption></figure></div>
+<div class="playground-block-preview playground-block-preview-light"><figure class="Highlight-module_highlight__iVprf highlight_hds-highlight___uE3p Highlight-module_size-l__3i6ZU highlight_hds-highlight--large__1EjiL custom-theme-211"><blockquote class="Highlight-module_highlightBlockquote__Bhn4A highlight_hds-blockquote__1QLSQ"><p class="Highlight-module_text__2OPbz highlight_hds-highlight__text__31xf_">You may select an highlight from the article to be displayed here. Select an excerpt that you want the user to pay attention to.</p></blockquote></figure><figure class="Highlight-module_highlight__iVprf highlight_hds-highlight___uE3p Highlight-module_size-l__3i6ZU highlight_hds-highlight--large__1EjiL custom-theme-212"><blockquote class="Highlight-module_highlightBlockquote__Bhn4A highlight_hds-blockquote__1QLSQ"><p class="Highlight-module_text__2OPbz highlight_hds-highlight__text__31xf_ Highlight-module_quote__elKVW highlight_hds-highlight__quote__3ed0C">Add an interesting quote here</p></blockquote><figcaption class="Highlight-module_reference__ICH8J highlight_hds-highlight__reference__3_4ca">—⁠<!-- -->First name Last name. Title.</figcaption></figure></div>
 <h4 id="default" style="position:relative" class="page-heading-4 heading-s">Default<a href="#default" aria-label="default permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h4>
-<div class="playground-block-preview playground-block-preview-light"><figure class="Highlight-module_highlight__iVprf highlight_hds-highlight___uE3p custom-theme-214"><blockquote class="Highlight-module_highlightBlockquote__Bhn4A highlight_hds-blockquote__1QLSQ"><p class="Highlight-module_text__2OPbz highlight_hds-highlight__text__31xf_">You may select an highlight from the article to be displayed here. Select an excerpt that you want the user to pay attention to.</p></blockquote></figure><figure class="Highlight-module_highlight__iVprf highlight_hds-highlight___uE3p custom-theme-215"><blockquote class="Highlight-module_highlightBlockquote__Bhn4A highlight_hds-blockquote__1QLSQ"><p class="Highlight-module_text__2OPbz highlight_hds-highlight__text__31xf_ Highlight-module_quote__elKVW highlight_hds-highlight__quote__3ed0C">Add an interesting quote here</p></blockquote><figcaption class="Highlight-module_reference__ICH8J highlight_hds-highlight__reference__3_4ca">—⁠<!-- -->First name Last name. Title.</figcaption></figure></div>
+<div class="playground-block-preview playground-block-preview-light"><figure class="Highlight-module_highlight__iVprf highlight_hds-highlight___uE3p custom-theme-213"><blockquote class="Highlight-module_highlightBlockquote__Bhn4A highlight_hds-blockquote__1QLSQ"><p class="Highlight-module_text__2OPbz highlight_hds-highlight__text__31xf_">You may select an highlight from the article to be displayed here. Select an excerpt that you want the user to pay attention to.</p></blockquote></figure><figure class="Highlight-module_highlight__iVprf highlight_hds-highlight___uE3p custom-theme-214"><blockquote class="Highlight-module_highlightBlockquote__Bhn4A highlight_hds-blockquote__1QLSQ"><p class="Highlight-module_text__2OPbz highlight_hds-highlight__text__31xf_ Highlight-module_quote__elKVW highlight_hds-highlight__quote__3ed0C">Add an interesting quote here</p></blockquote><figcaption class="Highlight-module_reference__ICH8J highlight_hds-highlight__reference__3_4ca">—⁠<!-- -->First name Last name. Title.</figcaption></figure></div>
 <h4 id="small" style="position:relative" class="page-heading-4 heading-s">Small<a href="#small" aria-label="small permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h4>
-<div class="playground-block-preview playground-block-preview-light"><figure class="Highlight-module_highlight__iVprf highlight_hds-highlight___uE3p Highlight-module_size-s__AwvVr highlight_hds-highlight--small__11cWK custom-theme-216"><blockquote class="Highlight-module_highlightBlockquote__Bhn4A highlight_hds-blockquote__1QLSQ"><p class="Highlight-module_text__2OPbz highlight_hds-highlight__text__31xf_">You may select an highlight from the article to be displayed here. Select an excerpt that you want the user to pay attention to.</p></blockquote></figure><figure class="Highlight-module_highlight__iVprf highlight_hds-highlight___uE3p Highlight-module_size-s__AwvVr highlight_hds-highlight--small__11cWK custom-theme-217"><blockquote class="Highlight-module_highlightBlockquote__Bhn4A highlight_hds-blockquote__1QLSQ"><p class="Highlight-module_text__2OPbz highlight_hds-highlight__text__31xf_ Highlight-module_quote__elKVW highlight_hds-highlight__quote__3ed0C">Add an interesting quote here</p></blockquote><figcaption class="Highlight-module_reference__ICH8J highlight_hds-highlight__reference__3_4ca">—⁠<!-- -->First name Last name. Title.</figcaption></figure></div>
+<div class="playground-block-preview playground-block-preview-light"><figure class="Highlight-module_highlight__iVprf highlight_hds-highlight___uE3p Highlight-module_size-s__AwvVr highlight_hds-highlight--small__11cWK custom-theme-215"><blockquote class="Highlight-module_highlightBlockquote__Bhn4A highlight_hds-blockquote__1QLSQ"><p class="Highlight-module_text__2OPbz highlight_hds-highlight__text__31xf_">You may select an highlight from the article to be displayed here. Select an excerpt that you want the user to pay attention to.</p></blockquote></figure><figure class="Highlight-module_highlight__iVprf highlight_hds-highlight___uE3p Highlight-module_size-s__AwvVr highlight_hds-highlight--small__11cWK custom-theme-216"><blockquote class="Highlight-module_highlightBlockquote__Bhn4A highlight_hds-blockquote__1QLSQ"><p class="Highlight-module_text__2OPbz highlight_hds-highlight__text__31xf_ Highlight-module_quote__elKVW highlight_hds-highlight__quote__3ed0C">Add an interesting quote here</p></blockquote><figcaption class="Highlight-module_reference__ICH8J highlight_hds-highlight__reference__3_4ca">—⁠<!-- -->First name Last name. Title.</figcaption></figure></div>
 <h3 id="theming" style="position:relative" class="page-heading-3 heading-m">Theming<a href="#theming" aria-label="theming permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h3>
 <h4 id="custom-accent-line-colour" style="position:relative" class="page-heading-4 heading-s">Custom accent line colour<a href="#custom-accent-line-colour" aria-label="custom accent line colour permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h4>
-<div class="playground-block-preview playground-block-preview-light"><figure class="Highlight-module_highlight__iVprf highlight_hds-highlight___uE3p custom-theme-218"><blockquote class="Highlight-module_highlightBlockquote__Bhn4A highlight_hds-blockquote__1QLSQ"><p class="Highlight-module_text__2OPbz highlight_hds-highlight__text__31xf_">You may select an highlight from the article to be displayed here. Select an excerpt that you want the user to pay attention to.</p></blockquote></figure><figure class="Highlight-module_highlight__iVprf highlight_hds-highlight___uE3p custom-theme-219"><blockquote class="Highlight-module_highlightBlockquote__Bhn4A highlight_hds-blockquote__1QLSQ"><p class="Highlight-module_text__2OPbz highlight_hds-highlight__text__31xf_ Highlight-module_quote__elKVW highlight_hds-highlight__quote__3ed0C">Add an interesting quote here</p></blockquote><figcaption class="Highlight-module_reference__ICH8J highlight_hds-highlight__reference__3_4ca">—⁠<!-- -->First name Last name. Title.</figcaption></figure></div>
+<div class="playground-block-preview playground-block-preview-light"><figure class="Highlight-module_highlight__iVprf highlight_hds-highlight___uE3p custom-theme-217"><blockquote class="Highlight-module_highlightBlockquote__Bhn4A highlight_hds-blockquote__1QLSQ"><p class="Highlight-module_text__2OPbz highlight_hds-highlight__text__31xf_">You may select an highlight from the article to be displayed here. Select an excerpt that you want the user to pay attention to.</p></blockquote></figure><figure class="Highlight-module_highlight__iVprf highlight_hds-highlight___uE3p custom-theme-218"><blockquote class="Highlight-module_highlightBlockquote__Bhn4A highlight_hds-blockquote__1QLSQ"><p class="Highlight-module_text__2OPbz highlight_hds-highlight__text__31xf_ Highlight-module_quote__elKVW highlight_hds-highlight__quote__3ed0C">Add an interesting quote here</p></blockquote><figcaption class="Highlight-module_reference__ICH8J highlight_hds-highlight__reference__3_4ca">—⁠<!-- -->First name Last name. Title.</figcaption></figure></div>
 <h4 id="custom-text-colour" style="position:relative" class="page-heading-4 heading-s">Custom text colour<a href="#custom-text-colour" aria-label="custom text colour permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h4>
-<div class="playground-block-preview playground-block-preview-light"><figure class="Highlight-module_highlight__iVprf highlight_hds-highlight___uE3p custom-theme-220"><blockquote class="Highlight-module_highlightBlockquote__Bhn4A highlight_hds-blockquote__1QLSQ"><p class="Highlight-module_text__2OPbz highlight_hds-highlight__text__31xf_">You may select an highlight from the article to be displayed here. Select an excerpt that you want the user to pay attention to.</p></blockquote></figure><figure class="Highlight-module_highlight__iVprf highlight_hds-highlight___uE3p custom-theme-221"><blockquote class="Highlight-module_highlightBlockquote__Bhn4A highlight_hds-blockquote__1QLSQ"><p class="Highlight-module_text__2OPbz highlight_hds-highlight__text__31xf_ Highlight-module_quote__elKVW highlight_hds-highlight__quote__3ed0C">Add an interesting quote here</p></blockquote><figcaption class="Highlight-module_reference__ICH8J highlight_hds-highlight__reference__3_4ca">—⁠<!-- -->First name Last name. Title.</figcaption></figure></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-222" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-222)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="playground-block-preview playground-block-preview-light"><figure class="Highlight-module_highlight__iVprf highlight_hds-highlight___uE3p custom-theme-219"><blockquote class="Highlight-module_highlightBlockquote__Bhn4A highlight_hds-blockquote__1QLSQ"><p class="Highlight-module_text__2OPbz highlight_hds-highlight__text__31xf_">You may select an highlight from the article to be displayed here. Select an excerpt that you want the user to pay attention to.</p></blockquote></figure><figure class="Highlight-module_highlight__iVprf highlight_hds-highlight___uE3p custom-theme-220"><blockquote class="Highlight-module_highlightBlockquote__Bhn4A highlight_hds-blockquote__1QLSQ"><p class="Highlight-module_text__2OPbz highlight_hds-highlight__text__31xf_ Highlight-module_quote__elKVW highlight_hds-highlight__quote__3ed0C">Add an interesting quote here</p></blockquote><figcaption class="Highlight-module_reference__ICH8J highlight_hds-highlight__reference__3_4ca">—⁠<!-- -->First name Last name. Title.</figcaption></figure></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-221" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-221)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/highlight/tabs/index.html b/docs/hds-1817-stepbystep-docs/components/highlight/tabs/index.html
index 89528c81669..a8b1473f87b 100644
--- a/docs/hds-1817-stepbystep-docs/components/highlight/tabs/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/highlight/tabs/index.html
@@ -56,7 +56,7 @@
   </script><link rel="manifest" href="/hds-demo/hds-1817-stepbystep-docs/manifest.webmanifest" crossorigin="anonymous"/><link rel="apple-touch-icon" sizes="any" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/favicon-32x32.ico"/><link rel="apple-touch-icon" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/apple-touch-icon.png"/><link rel="apple-touch-icon" sizes="192x192" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/favicon-192x192.png"/><link rel="apple-touch-icon" sizes="512x512" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/favicon-512x512.png"/><link rel="preconnect" href="https://webanalytics.digiaiiris.com/js"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="page text-body"><header class="hds-header Header-module_header__291GF pageHeader" id="page-header"><div class="Header-module_headerBackgroundWrapper__KsFy2"><a href="#content" class="SkipLink-module_skipLink__1knzF"><span class="SkipLink-module_skipLinkLabel__21n5B">Skip to content</span></a><div class="HeaderActionBar-module_headerActionBarContainer__5tfj-"><div class="HeaderActionBar-module_headerActionBar__lPeGE"><a href="https://hds.hel.fi" aria-label="City of Helsinki Logo" class="HeaderActionBar-module_titleAndLogoContainer__2LEAb HeaderActionBar-module_logo__2r2T0"><span class="HeaderActionBarLogo-module_logoWrapper__8NgfS"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></span></a><a href="https://hds.hel.fi" aria-label="Helsinki: Helsinki Design System" class="HeaderActionBar-module_titleAndLogoContainer__2LEAb HeaderActionBar-module_title__opzt9 HeaderActionBar-module_normal__3B4qi"><span class="HeaderActionBar-module_title__opzt9"><div class="page-header-title"><div>Helsinki Design System</div><div class="page-header-title-badge"><img style="filter:invert(1)" alt="HDS version number: 2.15.0" src="https://img.shields.io/github/v/release/City-of-Helsinki/helsinki-design-system?label=&amp;style=for-the-badge&amp;color=1a1a1a"/></div></div></span></a><div class="HeaderActionBar-module_headerActions__3lNnM"></div></div></div><div class="HeaderNavigationMenu-module_headerNavigationMenuContainer__2nK9z"><nav class="HeaderNavigationMenu-module_headerNavigationMenu__3G6-N"><ul class="HeaderNavigationMenu-module_headerNavigationMenuList__3HIzx"></ul></nav></div></div></header><div class="page-content"><aside class="side-content"><nav class="SideNavigation-module_sideNavigation__3X-9P" id="side-navigation" aria-label="Components"><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS Button-module_fullWidth__31eVK button_hds-button--fullwidth__1_hG9 SideNavigation-module_toggleButton__10tXH" aria-controls="side-navigation-menu" aria-expanded="false" aria-haspopup="true"><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Navigate to page</span><div class="Button-module_icon__O-h7R button_hds-icon__17j8Z" aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-down" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 13.5L17 8.5L18.5 10L12 16.5L5.5 10L7 8.5L12 13.5Z" fill="currentColor"></path></svg></div></button><ul class="SideNavigation-module_mainLevelList__SLZKQ" aria-label="Navigate to page" id="side-navigation-menu"><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Overview" id="side-nav-components" href="/hds-demo/hds-1817-stepbystep-docs/components"><span class="MainLevel-module_label__uWKJ7">Overview</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Accordion" id="side-nav-components-accordion" href="/hds-demo/hds-1817-stepbystep-docs/components/accordion"><span class="MainLevel-module_label__uWKJ7">Accordion</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Breadcrumb" id="side-nav-components-breadcrumb" href="/hds-demo/hds-1817-stepbystep-docs/components/breadcrumb"><span class="MainLevel-module_label__uWKJ7">Breadcrumb</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Button" id="side-nav-components-buttons" href="/hds-demo/hds-1817-stepbystep-docs/components/buttons"><span class="MainLevel-module_label__uWKJ7">Button</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Card" id="side-nav-components-card" href="/hds-demo/hds-1817-stepbystep-docs/components/card"><span class="MainLevel-module_label__uWKJ7">Card</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Checkbox" id="side-nav-components-checkbox" href="/hds-demo/hds-1817-stepbystep-docs/components/checkbox"><span class="MainLevel-module_label__uWKJ7">Checkbox</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="CookieConsent" id="side-nav-components-cookie-consent" href="/hds-demo/hds-1817-stepbystep-docs/components/cookie-consent"><span class="MainLevel-module_label__uWKJ7">CookieConsent</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="DateInput" id="side-nav-components-date-input" href="/hds-demo/hds-1817-stepbystep-docs/components/date-input"><span class="MainLevel-module_label__uWKJ7">DateInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Dialog" id="side-nav-components-dialog" href="/hds-demo/hds-1817-stepbystep-docs/components/dialog"><span class="MainLevel-module_label__uWKJ7">Dialog</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Dropdown" id="side-nav-components-dropdown" href="/hds-demo/hds-1817-stepbystep-docs/components/dropdown"><span class="MainLevel-module_label__uWKJ7">Dropdown</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Fieldset" id="side-nav-components-fieldset" href="/hds-demo/hds-1817-stepbystep-docs/components/fieldset"><span class="MainLevel-module_label__uWKJ7">Fieldset</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="FileInput" id="side-nav-components-file-input" href="/hds-demo/hds-1817-stepbystep-docs/components/file-input"><span class="MainLevel-module_label__uWKJ7">FileInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Footer" id="side-nav-components-footer" href="/hds-demo/hds-1817-stepbystep-docs/components/footer"><span class="MainLevel-module_label__uWKJ7">Footer</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Header" id="side-nav-components-header" href="/hds-demo/hds-1817-stepbystep-docs/components/header"><span class="MainLevel-module_label__uWKJ7">Header</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Hero" id="side-nav-components-hero" href="/hds-demo/hds-1817-stepbystep-docs/components/hero"><span class="MainLevel-module_label__uWKJ7">Hero</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_active__3IkdI MainLevel-module_open__2yWFj"><a aria-current="page" aria-label="Highlight" id="side-nav-components-highlight" href="/hds-demo/hds-1817-stepbystep-docs/components/highlight"><span class="MainLevel-module_label__uWKJ7">Highlight</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Icon" id="side-nav-components-icon" href="/hds-demo/hds-1817-stepbystep-docs/components/icon"><span class="MainLevel-module_label__uWKJ7">Icon</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Koros" id="side-nav-components-koros" href="/hds-demo/hds-1817-stepbystep-docs/components/koros"><span class="MainLevel-module_label__uWKJ7">Koros</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Link" id="side-nav-components-link" href="/hds-demo/hds-1817-stepbystep-docs/components/link"><span class="MainLevel-module_label__uWKJ7">Link</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Linkbox" id="side-nav-components-linkbox" href="/hds-demo/hds-1817-stepbystep-docs/components/linkbox"><span class="MainLevel-module_label__uWKJ7">Linkbox</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="LoadingSpinner" id="side-nav-components-loading-spinner" href="/hds-demo/hds-1817-stepbystep-docs/components/loading-spinner"><span class="MainLevel-module_label__uWKJ7">LoadingSpinner</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Logo" id="side-nav-components-logo" href="/hds-demo/hds-1817-stepbystep-docs/components/logo"><span class="MainLevel-module_label__uWKJ7">Logo</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Notification" id="side-nav-components-notification" href="/hds-demo/hds-1817-stepbystep-docs/components/notification"><span class="MainLevel-module_label__uWKJ7">Notification</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="NumberInput" id="side-nav-components-number-input" href="/hds-demo/hds-1817-stepbystep-docs/components/number-input"><span class="MainLevel-module_label__uWKJ7">NumberInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Pagination" id="side-nav-components-pagination" href="/hds-demo/hds-1817-stepbystep-docs/components/pagination"><span class="MainLevel-module_label__uWKJ7">Pagination</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="PasswordInput" id="side-nav-components-password-input" href="/hds-demo/hds-1817-stepbystep-docs/components/password-input"><span class="MainLevel-module_label__uWKJ7">PasswordInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="PhoneInput" id="side-nav-components-phone-input" href="/hds-demo/hds-1817-stepbystep-docs/components/phone-input"><span class="MainLevel-module_label__uWKJ7">PhoneInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="RadioButton" id="side-nav-components-radio-button" href="/hds-demo/hds-1817-stepbystep-docs/components/radio-button"><span class="MainLevel-module_label__uWKJ7">RadioButton</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="SearchInput" id="side-nav-components-search-input" href="/hds-demo/hds-1817-stepbystep-docs/components/search-input"><span class="MainLevel-module_label__uWKJ7">SearchInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="SelectionGroup" id="side-nav-components-selection-group" href="/hds-demo/hds-1817-stepbystep-docs/components/selection-group"><span class="MainLevel-module_label__uWKJ7">SelectionGroup</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="SideNavigation" id="side-nav-components-side-navigation" href="/hds-demo/hds-1817-stepbystep-docs/components/side-navigation"><span class="MainLevel-module_label__uWKJ7">SideNavigation</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="StatusLabel" id="side-nav-components-status-label" href="/hds-demo/hds-1817-stepbystep-docs/components/status-label"><span class="MainLevel-module_label__uWKJ7">StatusLabel</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="StepByStep" id="side-nav-components-step-by-step" href="/hds-demo/hds-1817-stepbystep-docs/components/step-by-step"><span class="MainLevel-module_label__uWKJ7">StepByStep</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Stepper" id="side-nav-components-stepper" href="/hds-demo/hds-1817-stepbystep-docs/components/stepper"><span class="MainLevel-module_label__uWKJ7">Stepper</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Table" id="side-nav-components-table" href="/hds-demo/hds-1817-stepbystep-docs/components/table"><span class="MainLevel-module_label__uWKJ7">Table</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Tabs" id="side-nav-components-tabs" href="/hds-demo/hds-1817-stepbystep-docs/components/tabs"><span class="MainLevel-module_label__uWKJ7">Tabs</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Tag" id="side-nav-components-tag" href="/hds-demo/hds-1817-stepbystep-docs/components/tag"><span class="MainLevel-module_label__uWKJ7">Tag</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="TextArea" id="side-nav-components-text-area" href="/hds-demo/hds-1817-stepbystep-docs/components/text-area"><span class="MainLevel-module_label__uWKJ7">TextArea</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="TextInput" id="side-nav-components-text-input" href="/hds-demo/hds-1817-stepbystep-docs/components/text-input"><span class="MainLevel-module_label__uWKJ7">TextInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="TimeInput" id="side-nav-components-time-input" href="/hds-demo/hds-1817-stepbystep-docs/components/time-input"><span class="MainLevel-module_label__uWKJ7">TimeInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="ToggleButton" id="side-nav-components-toggle-button" href="/hds-demo/hds-1817-stepbystep-docs/components/toggle-button"><span class="MainLevel-module_label__uWKJ7">ToggleButton</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Tooltip" id="side-nav-components-tooltip" href="/hds-demo/hds-1817-stepbystep-docs/components/tooltip"><span class="MainLevel-module_label__uWKJ7">Tooltip</span></a></li></ul></nav></aside><main id="content" class="main-content"><h1 id="highlight" style="position:relative" class="page-heading-1 heading-xl-mobile">Highlight<a href="#highlight" aria-label="highlight permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h1>
 <div class="status-label-description"><span class="StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI StatusLabel-module_alert__2VR8r status-label_hds-status-label--alert__1ecsX" variant="rounded">Beta</span><span class="StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST" variant="rounded" style="margin-left:var(--spacing-xs)">Accessible</span><div class="Tooltip-module_root__1Yo9t status-label-tooltip"><button type="button" class="Tooltip-module_button__2x9m0" title="Tooltip" aria-label="Tooltip" aria-expanded="false"><span aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="question-circle" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM13 16V18H11V16H13ZM12.0437 5.75C14.0343 5.75 15.7173 7.29464 15.7173 9.42361C15.7173 10.7806 15.2461 11.489 14.161 12.306L13.9187 12.4844C13.1753 13.0295 12.9556 13.3359 12.9386 14.142L12.9375 14.25H10.9375C10.9375 12.6746 11.4591 11.8378 12.6143 10.9622L12.8618 10.7796C13.5685 10.2628 13.7173 10.0539 13.7173 9.42361C13.7173 8.43934 12.9662 7.75 12.0437 7.75C11.1907 7.75 10.4785 8.34077 10.3816 9.20835L10.3734 9.30587L8.37663 9.19182C8.49191 7.17347 10.1344 5.75 12.0437 5.75Z" fill="currentColor"></path></svg></span></button></div></div>
 <p style="font-size:var(--fontsize-body-xl);color:var(--color-black-90);max-width:600px">Highlight component allows lifting an excerpt from a longer text for emphasis. Highlight supports two types: highlight (default) and quotation. The Quote element has a reference to the quote source. The Highlight element is an excerpt from the text without the source information.</p>
-<div class="Tabs-module_tabs__2Ww5F"><div class="Tabs-module_tablistBar__elMv9 page-tabs-list"><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-left" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 12L15.5 17L14 18.5L7.5 12L14 5.5L15.5 7L10.5 12Z" fill="currentColor"></path></svg></button></div><div class="Tabs-module_tablist__1iuDO"><ul role="tablist" style="width:0px"><li role="tab" aria-selected="true" aria-controls="tab-0-panel" tabindex="0" id="tab-0-button" class="Tabs-module_tab__3oOoX Tabs-module_active__1Ic3B"><span>Usage</span></li><li role="tab" aria-selected="false" aria-controls="tab-1-panel" tabindex="-1" id="tab-1-button" class="Tabs-module_tab__3oOoX"><span>Code</span></li><li role="tab" aria-selected="false" aria-controls="tab-2-panel" tabindex="-1" id="tab-2-button" class="Tabs-module_tab__3oOoX"><span>Accessibility</span></li><li role="tab" aria-selected="false" aria-controls="tab-3-panel" tabindex="-1" id="tab-3-button" class="Tabs-module_tab__3oOoX"><span>Customisation</span></li></ul></div><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z" fill="currentColor"></path></svg></button></div></div><div id="tab-0-panel" role="tabpanel" aria-labelledby="tab-0-button"></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-192" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-192)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="Tabs-module_tabs__2Ww5F"><div class="Tabs-module_tablistBar__elMv9 page-tabs-list"><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-left" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 12L15.5 17L14 18.5L7.5 12L14 5.5L15.5 7L10.5 12Z" fill="currentColor"></path></svg></button></div><div class="Tabs-module_tablist__1iuDO"><ul role="tablist" style="width:0px"><li role="tab" aria-selected="true" aria-controls="tab-0-panel" tabindex="0" id="tab-0-button" class="Tabs-module_tab__3oOoX Tabs-module_active__1Ic3B"><span>Usage</span></li><li role="tab" aria-selected="false" aria-controls="tab-1-panel" tabindex="-1" id="tab-1-button" class="Tabs-module_tab__3oOoX"><span>Code</span></li><li role="tab" aria-selected="false" aria-controls="tab-2-panel" tabindex="-1" id="tab-2-button" class="Tabs-module_tab__3oOoX"><span>Accessibility</span></li><li role="tab" aria-selected="false" aria-controls="tab-3-panel" tabindex="-1" id="tab-3-button" class="Tabs-module_tab__3oOoX"><span>Customisation</span></li></ul></div><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z" fill="currentColor"></path></svg></button></div></div><div id="tab-0-panel" role="tabpanel" aria-labelledby="tab-0-button"></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-222" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-222)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/icon/index.html b/docs/hds-1817-stepbystep-docs/components/icon/index.html
index 1e0ced6fa8a..2064c2de96d 100644
--- a/docs/hds-1817-stepbystep-docs/components/icon/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/icon/index.html
@@ -73,7 +73,7 @@ <h4 id="icon-sizes" style="position:relative" class="page-heading-4 heading-s">I
 <div class="playground-block-preview playground-block-preview-light"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_xs__3kAOj icon_hds-icon--size-xs__3dAMZ" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="face-smile" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM8.89722 13.5584C9.47797 14.7384 10.6738 15.5 12.0054 15.5C13.2846 15.5 14.4388 14.7973 15.0426 13.695L15.1052 13.5754L16.8948 14.4683C15.9757 16.3104 14.0966 17.5 12.0054 17.5C9.95612 17.5 8.11104 16.3576 7.17312 14.5796L7.10278 14.4416L8.89722 13.5584ZM8.5 8C9.32843 8 10 8.67157 10 9.5C10 10.3284 9.32843 11 8.5 11C7.67157 11 7 10.3284 7 9.5C7 8.67157 7.67157 8 8.5 8ZM15.5 8C16.3284 8 17 8.67157 17 9.5C17 10.3284 16.3284 11 15.5 11C14.6716 11 14 10.3284 14 9.5C14 8.67157 14.6716 8 15.5 8Z" fill="currentColor"></path></svg><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="face-smile" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM8.89722 13.5584C9.47797 14.7384 10.6738 15.5 12.0054 15.5C13.2846 15.5 14.4388 14.7973 15.0426 13.695L15.1052 13.5754L16.8948 14.4683C15.9757 16.3104 14.0966 17.5 12.0054 17.5C9.95612 17.5 8.11104 16.3576 7.17312 14.5796L7.10278 14.4416L8.89722 13.5584ZM8.5 8C9.32843 8 10 8.67157 10 9.5C10 10.3284 9.32843 11 8.5 11C7.67157 11 7 10.3284 7 9.5C7 8.67157 7.67157 8 8.5 8ZM15.5 8C16.3284 8 17 8.67157 17 9.5C17 10.3284 16.3284 11 15.5 11C14.6716 11 14 10.3284 14 9.5C14 8.67157 14.6716 8 15.5 8Z" fill="currentColor"></path></svg><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_m__3edUY icon_hds-icon--size-m__1mcHv" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="face-smile" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM8.89722 13.5584C9.47797 14.7384 10.6738 15.5 12.0054 15.5C13.2846 15.5 14.4388 14.7973 15.0426 13.695L15.1052 13.5754L16.8948 14.4683C15.9757 16.3104 14.0966 17.5 12.0054 17.5C9.95612 17.5 8.11104 16.3576 7.17312 14.5796L7.10278 14.4416L8.89722 13.5584ZM8.5 8C9.32843 8 10 8.67157 10 9.5C10 10.3284 9.32843 11 8.5 11C7.67157 11 7 10.3284 7 9.5C7 8.67157 7.67157 8 8.5 8ZM15.5 8C16.3284 8 17 8.67157 17 9.5C17 10.3284 16.3284 11 15.5 11C14.6716 11 14 10.3284 14 9.5C14 8.67157 14.6716 8 15.5 8Z" fill="currentColor"></path></svg><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="face-smile" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM8.89722 13.5584C9.47797 14.7384 10.6738 15.5 12.0054 15.5C13.2846 15.5 14.4388 14.7973 15.0426 13.695L15.1052 13.5754L16.8948 14.4683C15.9757 16.3104 14.0966 17.5 12.0054 17.5C9.95612 17.5 8.11104 16.3576 7.17312 14.5796L7.10278 14.4416L8.89722 13.5584ZM8.5 8C9.32843 8 10 8.67157 10 9.5C10 10.3284 9.32843 11 8.5 11C7.67157 11 7 10.3284 7 9.5C7 8.67157 7.67157 8 8.5 8ZM15.5 8C16.3284 8 17 8.67157 17 9.5C17 10.3284 16.3284 11 15.5 11C14.6716 11 14 10.3284 14 9.5C14 8.67157 14.6716 8 15.5 8Z" fill="currentColor"></path></svg><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_xl__1M6cO icon_hds-icon--size-xl__1Jes8" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="face-smile" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM8.89722 13.5584C9.47797 14.7384 10.6738 15.5 12.0054 15.5C13.2846 15.5 14.4388 14.7973 15.0426 13.695L15.1052 13.5754L16.8948 14.4683C15.9757 16.3104 14.0966 17.5 12.0054 17.5C9.95612 17.5 8.11104 16.3576 7.17312 14.5796L7.10278 14.4416L8.89722 13.5584ZM8.5 8C9.32843 8 10 8.67157 10 9.5C10 10.3284 9.32843 11 8.5 11C7.67157 11 7 10.3284 7 9.5C7 8.67157 7.67157 8 8.5 8ZM15.5 8C16.3284 8 17 8.67157 17 9.5C17 10.3284 16.3284 11 15.5 11C14.6716 11 14 10.3284 14 9.5C14 8.67157 14.6716 8 15.5 8Z" fill="currentColor"></path></svg></div>
 <h3 id="icon-visible-for-assistive-technologies" style="position:relative" class="page-heading-3 heading-m">Icon visible for assistive technologies<a href="#icon-visible-for-assistive-technologies" aria-label="icon visible for assistive technologies permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h3>
 <p>If the icon has a meaning or is used as an interactive element, it should not be hidden from assistive technologies. This is important if, for example, you are using icons as buttons.</p>
-<div class="playground-block-preview playground-block-preview-light"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="plus-circle" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM13 7V11H17V13H13V17H11V13H7V11H11V7H13Z" fill="currentColor"></path></svg></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-185" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-185)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="playground-block-preview playground-block-preview-light"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="plus-circle" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM13 7V11H17V13H13V17H11V13H7V11H11V7H13Z" fill="currentColor"></path></svg></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-184" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-184)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/index.html b/docs/hds-1817-stepbystep-docs/components/index.html
index af90b596296..f01cb139aea 100644
--- a/docs/hds-1817-stepbystep-docs/components/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/index.html
@@ -55,7 +55,7 @@
     })
   </script><link rel="manifest" href="/hds-demo/hds-1817-stepbystep-docs/manifest.webmanifest" crossorigin="anonymous"/><link rel="apple-touch-icon" sizes="any" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/favicon-32x32.ico"/><link rel="apple-touch-icon" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/apple-touch-icon.png"/><link rel="apple-touch-icon" sizes="192x192" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/favicon-192x192.png"/><link rel="apple-touch-icon" sizes="512x512" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/favicon-512x512.png"/><link rel="preconnect" href="https://webanalytics.digiaiiris.com/js"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="page text-body"><header class="hds-header Header-module_header__291GF pageHeader" id="page-header"><div class="Header-module_headerBackgroundWrapper__KsFy2"><a href="#content" class="SkipLink-module_skipLink__1knzF"><span class="SkipLink-module_skipLinkLabel__21n5B">Skip to content</span></a><div class="HeaderActionBar-module_headerActionBarContainer__5tfj-"><div class="HeaderActionBar-module_headerActionBar__lPeGE"><a href="https://hds.hel.fi" aria-label="City of Helsinki Logo" class="HeaderActionBar-module_titleAndLogoContainer__2LEAb HeaderActionBar-module_logo__2r2T0"><span class="HeaderActionBarLogo-module_logoWrapper__8NgfS"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></span></a><a href="https://hds.hel.fi" aria-label="Helsinki: Helsinki Design System" class="HeaderActionBar-module_titleAndLogoContainer__2LEAb HeaderActionBar-module_title__opzt9 HeaderActionBar-module_normal__3B4qi"><span class="HeaderActionBar-module_title__opzt9"><div class="page-header-title"><div>Helsinki Design System</div><div class="page-header-title-badge"><img style="filter:invert(1)" alt="HDS version number: 2.15.0" src="https://img.shields.io/github/v/release/City-of-Helsinki/helsinki-design-system?label=&amp;style=for-the-badge&amp;color=1a1a1a"/></div></div></span></a><div class="HeaderActionBar-module_headerActions__3lNnM"></div></div></div><div class="HeaderNavigationMenu-module_headerNavigationMenuContainer__2nK9z"><nav class="HeaderNavigationMenu-module_headerNavigationMenu__3G6-N"><ul class="HeaderNavigationMenu-module_headerNavigationMenuList__3HIzx"></ul></nav></div></div></header><div class="page-content"><aside class="side-content"><nav class="SideNavigation-module_sideNavigation__3X-9P" id="side-navigation" aria-label="Components"><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS Button-module_fullWidth__31eVK button_hds-button--fullwidth__1_hG9 SideNavigation-module_toggleButton__10tXH" aria-controls="side-navigation-menu" aria-expanded="false" aria-haspopup="true"><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Navigate to page</span><div class="Button-module_icon__O-h7R button_hds-icon__17j8Z" aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-down" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 13.5L17 8.5L18.5 10L12 16.5L5.5 10L7 8.5L12 13.5Z" fill="currentColor"></path></svg></div></button><ul class="SideNavigation-module_mainLevelList__SLZKQ" aria-label="Navigate to page" id="side-navigation-menu"><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_active__3IkdI MainLevel-module_open__2yWFj"><a aria-current="page" aria-label="Overview" id="side-nav-components" href="/hds-demo/hds-1817-stepbystep-docs/components"><span class="MainLevel-module_label__uWKJ7">Overview</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Accordion" id="side-nav-components-accordion" href="/hds-demo/hds-1817-stepbystep-docs/components/accordion"><span class="MainLevel-module_label__uWKJ7">Accordion</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Breadcrumb" id="side-nav-components-breadcrumb" href="/hds-demo/hds-1817-stepbystep-docs/components/breadcrumb"><span class="MainLevel-module_label__uWKJ7">Breadcrumb</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Button" id="side-nav-components-buttons" href="/hds-demo/hds-1817-stepbystep-docs/components/buttons"><span class="MainLevel-module_label__uWKJ7">Button</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Card" id="side-nav-components-card" href="/hds-demo/hds-1817-stepbystep-docs/components/card"><span class="MainLevel-module_label__uWKJ7">Card</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Checkbox" id="side-nav-components-checkbox" href="/hds-demo/hds-1817-stepbystep-docs/components/checkbox"><span class="MainLevel-module_label__uWKJ7">Checkbox</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="CookieConsent" id="side-nav-components-cookie-consent" href="/hds-demo/hds-1817-stepbystep-docs/components/cookie-consent"><span class="MainLevel-module_label__uWKJ7">CookieConsent</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="DateInput" id="side-nav-components-date-input" href="/hds-demo/hds-1817-stepbystep-docs/components/date-input"><span class="MainLevel-module_label__uWKJ7">DateInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Dialog" id="side-nav-components-dialog" href="/hds-demo/hds-1817-stepbystep-docs/components/dialog"><span class="MainLevel-module_label__uWKJ7">Dialog</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Dropdown" id="side-nav-components-dropdown" href="/hds-demo/hds-1817-stepbystep-docs/components/dropdown"><span class="MainLevel-module_label__uWKJ7">Dropdown</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Fieldset" id="side-nav-components-fieldset" href="/hds-demo/hds-1817-stepbystep-docs/components/fieldset"><span class="MainLevel-module_label__uWKJ7">Fieldset</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="FileInput" id="side-nav-components-file-input" href="/hds-demo/hds-1817-stepbystep-docs/components/file-input"><span class="MainLevel-module_label__uWKJ7">FileInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Footer" id="side-nav-components-footer" href="/hds-demo/hds-1817-stepbystep-docs/components/footer"><span class="MainLevel-module_label__uWKJ7">Footer</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Header" id="side-nav-components-header" href="/hds-demo/hds-1817-stepbystep-docs/components/header"><span class="MainLevel-module_label__uWKJ7">Header</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Hero" id="side-nav-components-hero" href="/hds-demo/hds-1817-stepbystep-docs/components/hero"><span class="MainLevel-module_label__uWKJ7">Hero</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Highlight" id="side-nav-components-highlight" href="/hds-demo/hds-1817-stepbystep-docs/components/highlight"><span class="MainLevel-module_label__uWKJ7">Highlight</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Icon" id="side-nav-components-icon" href="/hds-demo/hds-1817-stepbystep-docs/components/icon"><span class="MainLevel-module_label__uWKJ7">Icon</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Koros" id="side-nav-components-koros" href="/hds-demo/hds-1817-stepbystep-docs/components/koros"><span class="MainLevel-module_label__uWKJ7">Koros</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Link" id="side-nav-components-link" href="/hds-demo/hds-1817-stepbystep-docs/components/link"><span class="MainLevel-module_label__uWKJ7">Link</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Linkbox" id="side-nav-components-linkbox" href="/hds-demo/hds-1817-stepbystep-docs/components/linkbox"><span class="MainLevel-module_label__uWKJ7">Linkbox</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="LoadingSpinner" id="side-nav-components-loading-spinner" href="/hds-demo/hds-1817-stepbystep-docs/components/loading-spinner"><span class="MainLevel-module_label__uWKJ7">LoadingSpinner</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Logo" id="side-nav-components-logo" href="/hds-demo/hds-1817-stepbystep-docs/components/logo"><span class="MainLevel-module_label__uWKJ7">Logo</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Notification" id="side-nav-components-notification" href="/hds-demo/hds-1817-stepbystep-docs/components/notification"><span class="MainLevel-module_label__uWKJ7">Notification</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="NumberInput" id="side-nav-components-number-input" href="/hds-demo/hds-1817-stepbystep-docs/components/number-input"><span class="MainLevel-module_label__uWKJ7">NumberInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Pagination" id="side-nav-components-pagination" href="/hds-demo/hds-1817-stepbystep-docs/components/pagination"><span class="MainLevel-module_label__uWKJ7">Pagination</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="PasswordInput" id="side-nav-components-password-input" href="/hds-demo/hds-1817-stepbystep-docs/components/password-input"><span class="MainLevel-module_label__uWKJ7">PasswordInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="PhoneInput" id="side-nav-components-phone-input" href="/hds-demo/hds-1817-stepbystep-docs/components/phone-input"><span class="MainLevel-module_label__uWKJ7">PhoneInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="RadioButton" id="side-nav-components-radio-button" href="/hds-demo/hds-1817-stepbystep-docs/components/radio-button"><span class="MainLevel-module_label__uWKJ7">RadioButton</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="SearchInput" id="side-nav-components-search-input" href="/hds-demo/hds-1817-stepbystep-docs/components/search-input"><span class="MainLevel-module_label__uWKJ7">SearchInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="SelectionGroup" id="side-nav-components-selection-group" href="/hds-demo/hds-1817-stepbystep-docs/components/selection-group"><span class="MainLevel-module_label__uWKJ7">SelectionGroup</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="SideNavigation" id="side-nav-components-side-navigation" href="/hds-demo/hds-1817-stepbystep-docs/components/side-navigation"><span class="MainLevel-module_label__uWKJ7">SideNavigation</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="StatusLabel" id="side-nav-components-status-label" href="/hds-demo/hds-1817-stepbystep-docs/components/status-label"><span class="MainLevel-module_label__uWKJ7">StatusLabel</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="StepByStep" id="side-nav-components-step-by-step" href="/hds-demo/hds-1817-stepbystep-docs/components/step-by-step"><span class="MainLevel-module_label__uWKJ7">StepByStep</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Stepper" id="side-nav-components-stepper" href="/hds-demo/hds-1817-stepbystep-docs/components/stepper"><span class="MainLevel-module_label__uWKJ7">Stepper</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Table" id="side-nav-components-table" href="/hds-demo/hds-1817-stepbystep-docs/components/table"><span class="MainLevel-module_label__uWKJ7">Table</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Tabs" id="side-nav-components-tabs" href="/hds-demo/hds-1817-stepbystep-docs/components/tabs"><span class="MainLevel-module_label__uWKJ7">Tabs</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Tag" id="side-nav-components-tag" href="/hds-demo/hds-1817-stepbystep-docs/components/tag"><span class="MainLevel-module_label__uWKJ7">Tag</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="TextArea" id="side-nav-components-text-area" href="/hds-demo/hds-1817-stepbystep-docs/components/text-area"><span class="MainLevel-module_label__uWKJ7">TextArea</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="TextInput" id="side-nav-components-text-input" href="/hds-demo/hds-1817-stepbystep-docs/components/text-input"><span class="MainLevel-module_label__uWKJ7">TextInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="TimeInput" id="side-nav-components-time-input" href="/hds-demo/hds-1817-stepbystep-docs/components/time-input"><span class="MainLevel-module_label__uWKJ7">TimeInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="ToggleButton" id="side-nav-components-toggle-button" href="/hds-demo/hds-1817-stepbystep-docs/components/toggle-button"><span class="MainLevel-module_label__uWKJ7">ToggleButton</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Tooltip" id="side-nav-components-tooltip" href="/hds-demo/hds-1817-stepbystep-docs/components/tooltip"><span class="MainLevel-module_label__uWKJ7">Tooltip</span></a></li></ul></nav></aside><main id="content" class="main-content"><h1 id="components-overview" style="position:relative" class="page-heading-1 heading-xl-mobile">Components overview<a href="#components-overview" aria-label="components overview permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h1>
 <p>This section lists all components currently available in HDS.</p>
-<div class="linkbox-list "><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="Accordion component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/accordion@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">Accordion</div><p class="Linkbox-module_text__2lkl4">Accordions can be used to hide and reveal information.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the Accordion component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/accordion"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="Breadcrumb component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/breadcrumbs@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">Breadcrumb</div><p class="Linkbox-module_text__2lkl4">Breadcrumb provides links back to each previous page and shows the user&#x27;s current location on a website.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the Breadcrumb component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/breadcrumb"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="Button component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/button@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">Button</div><p class="Linkbox-module_text__2lkl4">Buttons are meant to make actions easily visible and understandable to the user.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the Button component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/buttons"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="Card component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/card@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">Card</div><p class="Linkbox-module_text__2lkl4">Cards can be used to divide and organise interface content.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the Card component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/card"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="Checkbox component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/checkbox@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">Checkbox</div><p class="Linkbox-module_text__2lkl4">Checkboxes are used to select from one of more options.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the Checkbox component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/checkbox"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="CookieConsent components."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/cookieconsent@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">CookieConsent</div><p class="Linkbox-module_text__2lkl4">The cookie compliance components informs users about cookie usage.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the CookieConsent components page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/cookie-consent"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="DateInput component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/dateinput@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">DateInput</div><p class="Linkbox-module_text__2lkl4">Date input allows the user to easily input a specific date or a date range. </p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the DateInput component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/date-input"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="Dialog component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/dialog@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">Dialog</div><p class="Linkbox-module_text__2lkl4">Dialogs initiate a conversation between the service and the user.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the Dialog component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/dialog"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="Dropdown component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/dropdown@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">Dropdown</div><p class="Linkbox-module_text__2lkl4">A dropdown offers a user a list of options, of which one or multiple can be selected.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the Dropdown component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/dropdown"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="Fieldset component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/fieldset@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">Fieldset</div><p class="Linkbox-module_text__2lkl4">Fieldset groups multiple related form input fields together.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the Fieldset component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/fieldset"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="FileInput component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/fileinput@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">FileInput</div><p class="Linkbox-module_text__2lkl4">A file input helps to browse and select files to be uploaded to the service.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the FileInput component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/file-input"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="Footer component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/footer@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">Footer</div><p class="Linkbox-module_text__2lkl4">The footer is located at the bottom of the page below the main body content.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the Footer component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/footer"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="Header component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/header@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">Header</div><p class="Linkbox-module_text__2lkl4">Header is a wrapper component for all navigation elements.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the Header component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/header"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="Hero component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/hero@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">Hero</div><p class="Linkbox-module_text__2lkl4">Hero is used below the main navigation as the first content element.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the Hero component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/hero"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="Header component."><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_paddingWithoutImageAndWithBackground__xar7n Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">Header</div><p class="Linkbox-module_text__2lkl4">Header is a wrapper component for all navigation elements.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the Header component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/header"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="Highlight component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/highlight@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">Highlight</div><p class="Linkbox-module_text__2lkl4">Quote and highlight allow lifting an excerpt from a longer text to emphasize.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the Highlight component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/highlight"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="Icon component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/icon@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">Icon</div><p class="Linkbox-module_text__2lkl4">Icons are used for providing visual cues and highlighting actions.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the Icon component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/icon"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="Koros component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/koros@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">Koros</div><p class="Linkbox-module_text__2lkl4">Koros, also known as Wave motifs, are part of the visual identity of City of Helsinki.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the Koros component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/koros"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="Link component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/link@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">Link</div><p class="Linkbox-module_text__2lkl4">Links are used as navigational elements and can be standalone or inline.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the Link component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/link"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="Linkbox component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/linkbox@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">Linkbox</div><p class="Linkbox-module_text__2lkl4">Linkboxes are used to combine elements into a single interactable element.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the Linkbox component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/linkbox"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="LoadingSpinner component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/loadingspinner@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">LoadingSpinner</div><p class="Linkbox-module_text__2lkl4">Loading spinner is used for notifying users that their action is being processed.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the LoadingSpinner component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/loading-spinner"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="Logo component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/logo@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">Logo</div><p class="Linkbox-module_text__2lkl4">The logo is used to identify the service as an official City of Helsinki service.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the Logo component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/logo"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="Notification component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/notification@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">Notification</div><p class="Linkbox-module_text__2lkl4">Notifications are used to present timely information to the user.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the Notification component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/notification"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="NumberInput component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/numberinput@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">NumberInput</div><p class="Linkbox-module_text__2lkl4">A number input allows the user to enter numeric values.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the NumberInput component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/number-input"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="Pagination component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/pagination@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">Pagination</div><p class="Linkbox-module_text__2lkl4">The pagination component allows the user to navigate between pages.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the Pagination component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/pagination"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="PasswordInput component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/passwordinput@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">PasswordInput</div><p class="Linkbox-module_text__2lkl4">A password field is an input field component that is used to input password data.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the PasswordInput component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/password-input"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="PhoneInput component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/phoneinput@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">PhoneInput</div><p class="Linkbox-module_text__2lkl4">A phone input allows the user to enter phone number values.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the PhoneInput component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/phone-input"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="RadioButton component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/radiobutton@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">RadioButton</div><p class="Linkbox-module_text__2lkl4">Radio buttons are used to pick an option when only one option can be chosen.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the RadioButton component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/radio-button"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="SearchInput component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/searchinput@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">SearchInput</div><p class="Linkbox-module_text__2lkl4">A search input allows the user to find relevant content.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the SearchInput component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/search-input"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="SelectionGroup component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/selectiongroup@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">SelectionGroup</div><p class="Linkbox-module_text__2lkl4">Selection group allows grouping form selection elements to each other.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the SelectionGroup component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/selection-group"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="SideNavigation component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/sidenavigation@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">SideNavigation</div><p class="Linkbox-module_text__2lkl4">A side navigation is an additional navigation located on the left of the viewport.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the SideNavigation component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/side-navigation"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="StatusLabel component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/statuslabel@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">StatusLabel</div><p class="Linkbox-module_text__2lkl4">Status labels can be used to highlight different statuses or items to the user.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the StatusLabel component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/status-label"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="StepByStep component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/stepbystep@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">StepByStep</div><p class="Linkbox-module_text__2lkl4">StepByStep component is useful for visualising a process in steps.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the StepByStep component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/step-by-step"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="Stepper component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/stepper@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">Stepper</div><p class="Linkbox-module_text__2lkl4">The stepper helps to see the progression and to navigate between form steps.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the Stepper component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/stepper"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="Table component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/table@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">Table</div><p class="Linkbox-module_text__2lkl4">Tables are used to present tabulated data to the user in a consistent manner.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the Table component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/table"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="Tabs component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/tabs@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">Tabs</div><p class="Linkbox-module_text__2lkl4">Tabs are used to navigate between contents that have a relation.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the Tabs component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/tabs"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="Tag component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/tag@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">Tag</div><p class="Linkbox-module_text__2lkl4">Tags are used to show attributes of an object or element such as categories.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the Tag component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/tag"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="TextArea component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/textarea@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">TextArea</div><p class="Linkbox-module_text__2lkl4">A text area is an input used for multiline answers.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the TextArea component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/text-area"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="TextInput component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/textinput@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">TextInput</div><p class="Linkbox-module_text__2lkl4">A text field is an input field that the user can use to input content and data.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the TextInput component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/text-input"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="TimeInput component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/timeinput@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">TimeInput</div><p class="Linkbox-module_text__2lkl4">A time input helps the user select a specific time.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the TimeInput component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/time-input"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="ToggleButton component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/togglebutton@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">ToggleButton</div><p class="Linkbox-module_text__2lkl4">Toggle button allows to switch between two states such as &quot;On&quot; and &quot;Off&quot;.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the ToggleButton component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/toggle-button"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="Tooltip component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/tooltip@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">Tooltip</div><p class="Linkbox-module_text__2lkl4">Tooltips are used to present context or background information to the user.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the Tooltip component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/tooltip"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-122" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-122)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a aria-current="page" class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="linkbox-list "><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="Accordion component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/accordion@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">Accordion</div><p class="Linkbox-module_text__2lkl4">Accordions can be used to hide and reveal information.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the Accordion component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/accordion"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="Breadcrumb component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/breadcrumbs@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">Breadcrumb</div><p class="Linkbox-module_text__2lkl4">Breadcrumb provides links back to each previous page and shows the user&#x27;s current location on a website.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the Breadcrumb component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/breadcrumb"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="Button component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/button@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">Button</div><p class="Linkbox-module_text__2lkl4">Buttons are meant to make actions easily visible and understandable to the user.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the Button component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/buttons"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="Card component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/card@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">Card</div><p class="Linkbox-module_text__2lkl4">Cards can be used to divide and organise interface content.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the Card component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/card"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="Checkbox component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/checkbox@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">Checkbox</div><p class="Linkbox-module_text__2lkl4">Checkboxes are used to select from one of more options.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the Checkbox component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/checkbox"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="CookieConsent components."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/cookieconsent@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">CookieConsent</div><p class="Linkbox-module_text__2lkl4">The cookie compliance components informs users about cookie usage.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the CookieConsent components page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/cookie-consent"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="DateInput component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/dateinput@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">DateInput</div><p class="Linkbox-module_text__2lkl4">Date input allows the user to easily input a specific date or a date range. </p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the DateInput component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/date-input"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="Dialog component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/dialog@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">Dialog</div><p class="Linkbox-module_text__2lkl4">Dialogs initiate a conversation between the service and the user.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the Dialog component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/dialog"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="Dropdown component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/dropdown@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">Dropdown</div><p class="Linkbox-module_text__2lkl4">A dropdown offers a user a list of options, of which one or multiple can be selected.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the Dropdown component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/dropdown"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="Fieldset component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/fieldset@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">Fieldset</div><p class="Linkbox-module_text__2lkl4">Fieldset groups multiple related form input fields together.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the Fieldset component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/fieldset"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="FileInput component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/fileinput@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">FileInput</div><p class="Linkbox-module_text__2lkl4">A file input helps to browse and select files to be uploaded to the service.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the FileInput component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/file-input"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="Footer component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/footer@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">Footer</div><p class="Linkbox-module_text__2lkl4">The footer is located at the bottom of the page below the main body content.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the Footer component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/footer"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="Header component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/header@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">Header</div><p class="Linkbox-module_text__2lkl4">Header is a wrapper component for all navigation elements.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the Header component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/header"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="Hero component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/hero@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">Hero</div><p class="Linkbox-module_text__2lkl4">Hero is used below the main navigation as the first content element.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the Hero component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/hero"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="Header component."><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_paddingWithoutImageAndWithBackground__xar7n Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">Header</div><p class="Linkbox-module_text__2lkl4">Header is a wrapper component for all navigation elements.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the Header component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/header"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="Highlight component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/highlight@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">Highlight</div><p class="Linkbox-module_text__2lkl4">Quote and highlight allow lifting an excerpt from a longer text to emphasize.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the Highlight component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/highlight"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="Icon component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/icon@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">Icon</div><p class="Linkbox-module_text__2lkl4">Icons are used for providing visual cues and highlighting actions.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the Icon component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/icon"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="Koros component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/koros@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">Koros</div><p class="Linkbox-module_text__2lkl4">Koros, also known as Wave motifs, are part of the visual identity of City of Helsinki.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the Koros component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/koros"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="Link component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/link@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">Link</div><p class="Linkbox-module_text__2lkl4">Links are used as navigational elements and can be standalone or inline.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the Link component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/link"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="Linkbox component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/linkbox@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">Linkbox</div><p class="Linkbox-module_text__2lkl4">Linkboxes are used to combine elements into a single interactable element.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the Linkbox component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/linkbox"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="LoadingSpinner component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/loadingspinner@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">LoadingSpinner</div><p class="Linkbox-module_text__2lkl4">Loading spinner is used for notifying users that their action is being processed.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the LoadingSpinner component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/loading-spinner"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="Logo component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/logo@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">Logo</div><p class="Linkbox-module_text__2lkl4">The logo is used to identify the service as an official City of Helsinki service.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the Logo component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/logo"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="Notification component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/notification@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">Notification</div><p class="Linkbox-module_text__2lkl4">Notifications are used to present timely information to the user.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the Notification component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/notification"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="NumberInput component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/numberinput@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">NumberInput</div><p class="Linkbox-module_text__2lkl4">A number input allows the user to enter numeric values.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the NumberInput component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/number-input"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="Pagination component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/pagination@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">Pagination</div><p class="Linkbox-module_text__2lkl4">The pagination component allows the user to navigate between pages.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the Pagination component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/pagination"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="PasswordInput component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/passwordinput@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">PasswordInput</div><p class="Linkbox-module_text__2lkl4">A password field is an input field component that is used to input password data.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the PasswordInput component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/password-input"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="PhoneInput component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/phoneinput@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">PhoneInput</div><p class="Linkbox-module_text__2lkl4">A phone input allows the user to enter phone number values.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the PhoneInput component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/phone-input"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="RadioButton component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/radiobutton@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">RadioButton</div><p class="Linkbox-module_text__2lkl4">Radio buttons are used to pick an option when only one option can be chosen.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the RadioButton component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/radio-button"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="SearchInput component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/searchinput@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">SearchInput</div><p class="Linkbox-module_text__2lkl4">A search input allows the user to find relevant content.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the SearchInput component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/search-input"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="SelectionGroup component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/selectiongroup@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">SelectionGroup</div><p class="Linkbox-module_text__2lkl4">Selection group allows grouping form selection elements to each other.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the SelectionGroup component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/selection-group"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="SideNavigation component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/sidenavigation@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">SideNavigation</div><p class="Linkbox-module_text__2lkl4">A side navigation is an additional navigation located on the left of the viewport.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the SideNavigation component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/side-navigation"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="StatusLabel component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/statuslabel@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">StatusLabel</div><p class="Linkbox-module_text__2lkl4">Status labels can be used to highlight different statuses or items to the user.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the StatusLabel component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/status-label"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="StepByStep component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/stepbystep@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">StepByStep</div><p class="Linkbox-module_text__2lkl4">StepByStep component is useful for visualising a process in steps.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the StepByStep component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/step-by-step"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="Stepper component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/stepper@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">Stepper</div><p class="Linkbox-module_text__2lkl4">The stepper helps to see the progression and to navigate between form steps.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the Stepper component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/stepper"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="Table component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/table@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">Table</div><p class="Linkbox-module_text__2lkl4">Tables are used to present tabulated data to the user in a consistent manner.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the Table component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/table"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="Tabs component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/tabs@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">Tabs</div><p class="Linkbox-module_text__2lkl4">Tabs are used to navigate between contents that have a relation.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the Tabs component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/tabs"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="Tag component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/tag@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">Tag</div><p class="Linkbox-module_text__2lkl4">Tags are used to show attributes of an object or element such as categories.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the Tag component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/tag"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="TextArea component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/textarea@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">TextArea</div><p class="Linkbox-module_text__2lkl4">A text area is an input used for multiline answers.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the TextArea component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/text-area"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="TextInput component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/textinput@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">TextInput</div><p class="Linkbox-module_text__2lkl4">A text field is an input field that the user can use to input content and data.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the TextInput component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/text-input"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="TimeInput component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/timeinput@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">TimeInput</div><p class="Linkbox-module_text__2lkl4">A time input helps the user select a specific time.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the TimeInput component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/time-input"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="ToggleButton component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/togglebutton@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">ToggleButton</div><p class="Linkbox-module_text__2lkl4">Toggle button allows to switch between two states such as &quot;On&quot; and &quot;Off&quot;.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the ToggleButton component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/toggle-button"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div class="linkbox-list-item"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm Linkbox-module_border__3lfzt linkbox-list-link" aria-label="Tooltip component."><img src="/hds-demo/hds-1817-stepbystep-docs/images/components/overview/tooltip@2x.png" alt="" height="180" width="280" class="Linkbox-module_image__2GxFx"/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">Tooltip</div><p class="Linkbox-module_text__2lkl4">Tooltips are used to present context or background information to the user.</p></div><a class="Linkbox-module_link__3tFuW" aria-label="Go to the Tooltip component page." tabindex="-1" href="/hds-demo/hds-1817-stepbystep-docs/components/tooltip"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-121" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-121)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a aria-current="page" class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/linkbox/code/index.html b/docs/hds-1817-stepbystep-docs/components/linkbox/code/index.html
index e20c378d00d..3305ea8466b 100644
--- a/docs/hds-1817-stepbystep-docs/components/linkbox/code/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/linkbox/code/index.html
@@ -503,7 +503,7 @@ <h3 id="packages" style="position:relative" class="page-heading-3 heading-m">Pac
 <div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><thead><tr class="hds-table__header-row dark"><th scope="col">Package</th><th scope="col">Included</th><th scope="col">Storybook link</th><th scope="col">Source link</th></tr></thead><tbody class="hds-table__content"><tr><td><strong>HDS React</strong></td><td><div style="display:flex;gap:var(--spacing-3-xs)"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="check-circle-fill" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM16.5 8L18 9.5L10.5 17L6 12.5L7.5 11L10.5 14L16.5 8Z" fill="currentColor"></path></svg> Yes </div></td><td><a aria-label="View in Storybook. Opens in a new tab" class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/storybook/react/?path=/story/components-linkbox-empty-for-custom-content--default" target="_blank" rel="noopener">View in Storybook</a></td><td><a aria-label="View source. Opens in a new tab Opens a different website." class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/react/src/components/link" target="_blank" rel="noopener">View source<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Link-module_icon__3ReCc link_icon__i_HqN Link-module_verticalAlignMediumIcon__12PVa link_vertical-align-medium-icon__3IWi1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="link-external" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z" fill="currentColor"></path></svg></a></td></tr><tr><td><strong>HDS Core</strong></td><td><div style="display:flex;gap:var(--spacing-3-xs)"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="cross-circle" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM15 7.5L16.5 9L13.5 12L16.5 15L15 16.5L12 13.5L9 16.5L7.5 15L10.5 12L7.5 9L9 7.5L12 10.5L15 7.5Z" fill="currentColor"></path></svg> No </div></td><td>-</td><td>-</td></tr></tbody></table></div>
 <h3 id="properties" style="position:relative" class="page-heading-3 heading-m">Properties<a href="#properties" aria-label="properties permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h3>
 <p>Note! You can find the full list of properties in the <a aria-label="React Storybook. Opens in a new tab" class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/storybook/react/?path=/story/components-linkbox-empty-for-custom-content--default" target="_blank" rel="noopener">React Storybook.</a></p>
-<div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><thead><tr class="hds-table__header-row dark"><th scope="col">Property</th><th scope="col">Description</th><th scope="col">Values</th><th scope="col">Default value</th></tr></thead><tbody class="hds-table__content"><tr><td><code>heading</code></td><td>Heading of the Linkbox (uses the built-in heading)</td><td><code>string</code></td><td>-</td></tr><tr><td><code>headingAriaLevel</code></td><td>Controls the aria-level of the built-in heading.</td><td><code>number</code></td><td>2</td></tr><tr><td><code>external</code></td><td>If set to true, the link is marked as external (points outside of the domain).</td><td><code>boolean</code></td><td>false</td></tr><tr><td><code>openInExternalDomainAriaLabel</code></td><td>Aria-label which is read if the link is external.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>openInNewTab</code></td><td>If set to true, the link opens in a new tab.</td><td><code>boolean</code></td><td>false</td></tr><tr><td><code>openInNewTabAriaLabel</code></td><td>Aria-label which is read if the link is opened in a new tab.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>size</code></td><td>Controls the size of the Linkbox.</td><td><code>&quot;small&quot;</code>, <code>&quot;medium&quot;</code>, <code>&quot;large&quot;</code></td><td><code>&quot;medium&quot;</code></td></tr><tr><td><code>href</code></td><td>Hypertext reference of the link.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>linkAriaLabel</code></td><td>Aria-label for the link (arrow or external icon) that is located at the bottom of the linkbox.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>linkboxAriaLabel</code></td><td>Aria label for the whole linkbox region. Remember to tell users of assistive technology that they are inside a linkbox. Check storybook examples on how it can be done.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>border</code></td><td>If set to true, a border will be drawn around the card.</td><td><code>boolean</code></td><td>false</td></tr></tbody></table></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-344" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-344)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><thead><tr class="hds-table__header-row dark"><th scope="col">Property</th><th scope="col">Description</th><th scope="col">Values</th><th scope="col">Default value</th></tr></thead><tbody class="hds-table__content"><tr><td><code>heading</code></td><td>Heading of the Linkbox (uses the built-in heading)</td><td><code>string</code></td><td>-</td></tr><tr><td><code>headingAriaLevel</code></td><td>Controls the aria-level of the built-in heading.</td><td><code>number</code></td><td>2</td></tr><tr><td><code>external</code></td><td>If set to true, the link is marked as external (points outside of the domain).</td><td><code>boolean</code></td><td>false</td></tr><tr><td><code>openInExternalDomainAriaLabel</code></td><td>Aria-label which is read if the link is external.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>openInNewTab</code></td><td>If set to true, the link opens in a new tab.</td><td><code>boolean</code></td><td>false</td></tr><tr><td><code>openInNewTabAriaLabel</code></td><td>Aria-label which is read if the link is opened in a new tab.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>size</code></td><td>Controls the size of the Linkbox.</td><td><code>&quot;small&quot;</code>, <code>&quot;medium&quot;</code>, <code>&quot;large&quot;</code></td><td><code>&quot;medium&quot;</code></td></tr><tr><td><code>href</code></td><td>Hypertext reference of the link.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>linkAriaLabel</code></td><td>Aria-label for the link (arrow or external icon) that is located at the bottom of the linkbox.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>linkboxAriaLabel</code></td><td>Aria label for the whole linkbox region. Remember to tell users of assistive technology that they are inside a linkbox. Check storybook examples on how it can be done.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>border</code></td><td>If set to true, a border will be drawn around the card.</td><td><code>boolean</code></td><td>false</td></tr></tbody></table></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-343" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-343)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/linkbox/index.html b/docs/hds-1817-stepbystep-docs/components/linkbox/index.html
index 1c022395422..8ffc2a32980 100644
--- a/docs/hds-1817-stepbystep-docs/components/linkbox/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/linkbox/index.html
@@ -102,7 +102,7 @@ <h4 id="linkbox-size-variants" style="position:relative" class="page-heading-4 h
 <p>HDS Linkbox includes three (3) size variants; small, default, and large.
 You can use different sizes depending on the screen size or use case.
 Size variants differ in (default) heading size and inner spacing. Use the size property to alter the size.</p>
-<div style="background-color:var(--color-black-5)" class="playground-block-preview playground-block-preview-light"><div style="max-width:284px"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm" aria-label="Linkbox: Helsinki Design System."><img src="/hds-demo/hds-1817-stepbystep-docs/images/foundation/visual-assets/placeholders/image-m@3x.png" width="284" height="181" class="Linkbox-module_image__2GxFx" alt=""/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">Linkbox title</div><p class="Linkbox-module_text__2lkl4">Linkbox text</p></div><a class="Linkbox-module_link__3tFuW" aria-label="HDS." tabindex="-1" href="https://hds.hel.fi"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div style="max-width:384px;margin-top:var(--spacing-s)"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm" aria-label="Linkbox: Helsinki Design System."><img src="/hds-demo/hds-1817-stepbystep-docs/images/foundation/visual-assets/placeholders/image-m@3x.png" width="384" height="245" class="Linkbox-module_image__2GxFx" alt=""/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withMediumImage__O0JFd Linkbox-module_contentMedium__naQyB"><div role="heading" aria-level="2" class="Linkbox-module_headingMedium__3YUWb helpers_heading-m__3vHem">Linkbox title</div><p class="Linkbox-module_text__2lkl4">Linkbox text</p></div><a class="Linkbox-module_link__3tFuW" aria-label="HDS." tabindex="-1" href="https://hds.hel.fi"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div style="max-width:567px;margin-top:var(--spacing-s)"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm" aria-label="Linkbox: Helsinki Design System."><img src="/hds-demo/hds-1817-stepbystep-docs/images/foundation/visual-assets/placeholders/image-m@3x.png" width="567" height="363" class="Linkbox-module_image__2GxFx" alt=""/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withLargeImage__3M-5l Linkbox-module_contentLarge__1j0J8"><div role="heading" aria-level="2" class="Linkbox-module_headingLarge__1IWlD helpers_heading-l__2DLQU">Linkbox title</div><p class="Linkbox-module_text__2lkl4">Linkbox text</p></div><a class="Linkbox-module_link__3tFuW" aria-label="HDS." tabindex="-1" href="https://hds.hel.fi"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG Linkbox-module_iconPositionForLinkboxLargeVariant__3vQvC" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-343" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-343)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div style="background-color:var(--color-black-5)" class="playground-block-preview playground-block-preview-light"><div style="max-width:284px"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm" aria-label="Linkbox: Helsinki Design System."><img src="/hds-demo/hds-1817-stepbystep-docs/images/foundation/visual-assets/placeholders/image-m@3x.png" width="284" height="181" class="Linkbox-module_image__2GxFx" alt=""/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withSmallImage__3E12M Linkbox-module_contentSmall__2WG1n"><div role="heading" aria-level="2" class="Linkbox-module_headingSmall__1-9yw helpers_heading-s__1HNlW">Linkbox title</div><p class="Linkbox-module_text__2lkl4">Linkbox text</p></div><a class="Linkbox-module_link__3tFuW" aria-label="HDS." tabindex="-1" href="https://hds.hel.fi"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div style="max-width:384px;margin-top:var(--spacing-s)"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm" aria-label="Linkbox: Helsinki Design System."><img src="/hds-demo/hds-1817-stepbystep-docs/images/foundation/visual-assets/placeholders/image-m@3x.png" width="384" height="245" class="Linkbox-module_image__2GxFx" alt=""/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withMediumImage__O0JFd Linkbox-module_contentMedium__naQyB"><div role="heading" aria-level="2" class="Linkbox-module_headingMedium__3YUWb helpers_heading-m__3vHem">Linkbox title</div><p class="Linkbox-module_text__2lkl4">Linkbox text</p></div><a class="Linkbox-module_link__3tFuW" aria-label="HDS." tabindex="-1" href="https://hds.hel.fi"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div><div style="max-width:567px;margin-top:var(--spacing-s)"><div role="region" tabindex="0" class="Linkbox-module_linkbox__15LUm" aria-label="Linkbox: Helsinki Design System."><img src="/hds-demo/hds-1817-stepbystep-docs/images/foundation/visual-assets/placeholders/image-m@3x.png" width="567" height="363" class="Linkbox-module_image__2GxFx" alt=""/><div class="Linkbox-module_withBackground__1xdbp Linkbox-module_withLargeImage__3M-5l Linkbox-module_contentLarge__1j0J8"><div role="heading" aria-level="2" class="Linkbox-module_headingLarge__1IWlD helpers_heading-l__2DLQU">Linkbox title</div><p class="Linkbox-module_text__2lkl4">Linkbox text</p></div><a class="Linkbox-module_link__3tFuW" aria-label="HDS." tabindex="-1" href="https://hds.hel.fi"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_l__1TDQL icon_hds-icon--size-l__3Zczy Linkbox-module_icon__1e7kG Linkbox-module_iconPositionForLinkboxLargeVariant__3vQvC" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.5L12.5 7L16.5 11H4V13H16.5L12.5 17L14 18.5L20.5 12L14 5.5Z" fill="currentColor"></path></svg></a></div></div></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-344" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-344)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/loading-spinner/accessibility/index.html b/docs/hds-1817-stepbystep-docs/components/loading-spinner/accessibility/index.html
index 63763129dc5..f67c6e7b46c 100644
--- a/docs/hds-1817-stepbystep-docs/components/loading-spinner/accessibility/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/loading-spinner/accessibility/index.html
@@ -68,7 +68,7 @@ <h3 id="pay-attention-to" style="position:relative" class="page-heading-3 headin
 <li>If the spinner also has a visual label, it can be hidden from assistive technologies to avoid description to be read twice.</li>
 </ul>
 </li>
-</ul></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-453" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-453)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+</ul></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-452" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-452)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/notification/code/index.html b/docs/hds-1817-stepbystep-docs/components/notification/code/index.html
index 7c532da4952..08797db7276 100644
--- a/docs/hds-1817-stepbystep-docs/components/notification/code/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/notification/code/index.html
@@ -286,7 +286,7 @@ <h3 id="packages" style="position:relative" class="page-heading-3 heading-m">Pac
 <div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><thead><tr class="hds-table__header-row dark"><th scope="col">Package</th><th scope="col">Included</th><th scope="col">Storybook link</th><th scope="col">Source link</th></tr></thead><tbody class="hds-table__content"><tr><td><strong>HDS React</strong></td><td><div style="display:flex;gap:var(--spacing-3-xs)"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="check-circle-fill" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM16.5 8L18 9.5L10.5 17L6 12.5L7.5 11L10.5 14L16.5 8Z" fill="currentColor"></path></svg> Yes </div></td><td><a aria-label="View in Storybook. Opens in a new tab" class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/storybook/react/?path=/story/components-notification--default" target="_blank" rel="noopener">View in Storybook</a></td><td><a aria-label="View source. Opens in a new tab Opens a different website." class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/react/src/components/notification" target="_blank" rel="noopener">View source<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Link-module_icon__3ReCc link_icon__i_HqN Link-module_verticalAlignMediumIcon__12PVa link_vertical-align-medium-icon__3IWi1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="link-external" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z" fill="currentColor"></path></svg></a></td></tr><tr><td><strong>HDS Core</strong></td><td><div style="display:flex;gap:var(--spacing-3-xs)"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="check-circle-fill" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM16.5 8L18 9.5L10.5 17L6 12.5L7.5 11L10.5 14L16.5 8Z" fill="currentColor"></path></svg> Yes </div></td><td><a aria-label="View in Storybook. Opens in a new tab" class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/storybook/core/?path=/story/components-notification--default" target="_blank" rel="noopener">View in Storybook</a></td><td><a aria-label="View source. Opens in a new tab Opens a different website." class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/core/src/components/notification" target="_blank" rel="noopener">View source<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Link-module_icon__3ReCc link_icon__i_HqN Link-module_verticalAlignMediumIcon__12PVa link_vertical-align-medium-icon__3IWi1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="link-external" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z" fill="currentColor"></path></svg></a></td></tr></tbody></table></div>
 <h3 id="properties" style="position:relative" class="page-heading-3 heading-m">Properties<a href="#properties" aria-label="properties permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h3>
 <p>Note! You can find the full list of properties in the <a aria-label="React Storybook. Opens in a new tab" class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/storybook/react/?path=/story/components-notification--default" target="_blank" rel="noopener">React Storybook.</a></p>
-<div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><caption class="hds-table__caption"><b>Table 1</b>: <!-- -->Notification properties</caption><thead><tr class="hds-table__header-row dark"><th scope="col">Property</th><th scope="col">Description</th><th scope="col">Values</th><th scope="col">Default value</th></tr></thead><tbody class="hds-table__content"><tr><td><code>autoClose</code></td><td>If set to true, the Toast notification will be closed automatically after a certain time.</td><td><code>boolean</code></td><td>false</td></tr><tr><td><code>boxShadow</code></td><td>If set to true, the notification will have a box shadow.</td><td><code>boolean</code></td><td>false</td></tr><tr><td><code>displayAutoCloseProgress</code></td><td>If set to true, a progress is displayed on top of the Toast notification.</td><td><code>boolean</code></td><td>true</td></tr><tr><td><code>invisible</code></td><td>If set to true, the notification will be visually hidden. Useful when notification should only be &quot;seen&quot; by screen readers.</td><td><code>boolean</code></td><td>false</td></tr><tr><td><code>label</code></td><td>The label of the notification.</td><td><code>ReactNode</code></td><td>-</td></tr><tr><td><code>notificationAriaLabel</code></td><td>The aria-label of the notification section element.</td><td><code>string</code></td><td><code>&quot;Notification&quot;</code></td></tr><tr><td><code>onClose</code></td><td>Callback fired when the notification is closed</td><td><code>function</code></td><td>-</td></tr><tr><td><code>type</code></td><td>The type of the notification. Affects the colour and icon of the notification.</td><td><code>&quot;info&quot;</code>, <code>&quot;success&quot;</code>, <code>&quot;alert&quot;</code>, <code>&quot;error&quot;</code></td><td><code>&quot;info&quot;</code></td></tr><tr><td><code>position</code></td><td>The position of the notification.</td><td><code>&quot;inline&quot;</code>, <code>&quot;top-left&quot;</code>, <code>&quot;top-center&quot;</code>, <code>&quot;top-right&quot;</code>, <code>&quot;bottom-left&quot;</code>, <code>&quot;bottom-center&quot;</code>, <code>&quot;bottom-right&quot;</code></td><td><code>&quot;inline&quot;</code></td></tr><tr><td><code>size</code></td><td>The size of the notification.</td><td><code>&quot;small&quot;</code>, <code>&quot;default&quot;</code>, <code>&quot;large&quot;</code></td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>dismissible</code></td><td>If set to true, the notification can be closed.</td><td><code>boolean</code></td><td>false</td></tr><tr><td><code>closeButtonLabelText</code></td><td>The aria-label and title for the close button.</td><td><code>string</code></td><td>-</td></tr></tbody></table></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-414" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-414)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><caption class="hds-table__caption"><b>Table 1</b>: <!-- -->Notification properties</caption><thead><tr class="hds-table__header-row dark"><th scope="col">Property</th><th scope="col">Description</th><th scope="col">Values</th><th scope="col">Default value</th></tr></thead><tbody class="hds-table__content"><tr><td><code>autoClose</code></td><td>If set to true, the Toast notification will be closed automatically after a certain time.</td><td><code>boolean</code></td><td>false</td></tr><tr><td><code>boxShadow</code></td><td>If set to true, the notification will have a box shadow.</td><td><code>boolean</code></td><td>false</td></tr><tr><td><code>displayAutoCloseProgress</code></td><td>If set to true, a progress is displayed on top of the Toast notification.</td><td><code>boolean</code></td><td>true</td></tr><tr><td><code>invisible</code></td><td>If set to true, the notification will be visually hidden. Useful when notification should only be &quot;seen&quot; by screen readers.</td><td><code>boolean</code></td><td>false</td></tr><tr><td><code>label</code></td><td>The label of the notification.</td><td><code>ReactNode</code></td><td>-</td></tr><tr><td><code>notificationAriaLabel</code></td><td>The aria-label of the notification section element.</td><td><code>string</code></td><td><code>&quot;Notification&quot;</code></td></tr><tr><td><code>onClose</code></td><td>Callback fired when the notification is closed</td><td><code>function</code></td><td>-</td></tr><tr><td><code>type</code></td><td>The type of the notification. Affects the colour and icon of the notification.</td><td><code>&quot;info&quot;</code>, <code>&quot;success&quot;</code>, <code>&quot;alert&quot;</code>, <code>&quot;error&quot;</code></td><td><code>&quot;info&quot;</code></td></tr><tr><td><code>position</code></td><td>The position of the notification.</td><td><code>&quot;inline&quot;</code>, <code>&quot;top-left&quot;</code>, <code>&quot;top-center&quot;</code>, <code>&quot;top-right&quot;</code>, <code>&quot;bottom-left&quot;</code>, <code>&quot;bottom-center&quot;</code>, <code>&quot;bottom-right&quot;</code></td><td><code>&quot;inline&quot;</code></td></tr><tr><td><code>size</code></td><td>The size of the notification.</td><td><code>&quot;small&quot;</code>, <code>&quot;default&quot;</code>, <code>&quot;large&quot;</code></td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>dismissible</code></td><td>If set to true, the notification can be closed.</td><td><code>boolean</code></td><td>false</td></tr><tr><td><code>closeButtonLabelText</code></td><td>The aria-label and title for the close button.</td><td><code>string</code></td><td>-</td></tr></tbody></table></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-416" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-416)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/notification/index.html b/docs/hds-1817-stepbystep-docs/components/notification/index.html
index a033f3c6071..de7693b0b6e 100644
--- a/docs/hds-1817-stepbystep-docs/components/notification/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/notification/index.html
@@ -90,7 +90,7 @@ <h4 id="notification-sizes" style="position:relative" class="page-heading-4 head
 <div class="playground-block-preview playground-block-preview-light"><section class="Notification-module_notification__2hN3H notification_hds-notification__2DQPN Notification-module_large__3RTFp notification_hds-notification--large__260Qm" aria-label="Notification"><div class="Notification-module_content__ZZKvE notification_hds-notification__content__5ylSS"><div class="Notification-module_label__1bhNu notification_hds-notification__label__2t1lR" role="heading" aria-level="2"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Notification-module_icon__1ans7 notification_hds-icon__29HQM" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="info-circle-fill" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM13 10V16.5H15V18H9V16.5H11V11.5H9V10H13ZM11.8125 6C12.5374 6 13.125 6.5876 13.125 7.3125C13.125 8.03735 12.5374 8.625 11.8125 8.625C11.0876 8.625 10.5 8.03735 10.5 7.3125C10.5 6.5876 11.0876 6 11.8125 6Z" fill="currentColor"></path></svg>New messages</div><div class="Notification-module_body__9BSAD notification_hds-notification__body__3cobH"><p>You have received new messages.</p></div></div></section><section style="margin-top:var(--spacing-s)" class="Notification-module_notification__2hN3H notification_hds-notification__2DQPN" aria-label="Notification"><div class="Notification-module_content__ZZKvE notification_hds-notification__content__5ylSS"><div class="Notification-module_label__1bhNu notification_hds-notification__label__2t1lR" role="heading" aria-level="2"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Notification-module_icon__1ans7 notification_hds-icon__29HQM" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="info-circle-fill" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM13 10V16.5H15V18H9V16.5H11V11.5H9V10H13ZM11.8125 6C12.5374 6 13.125 6.5876 13.125 7.3125C13.125 8.03735 12.5374 8.625 11.8125 8.625C11.0876 8.625 10.5 8.03735 10.5 7.3125C10.5 6.5876 11.0876 6 11.8125 6Z" fill="currentColor"></path></svg>New messages</div><div class="Notification-module_body__9BSAD notification_hds-notification__body__3cobH"><p>You have received new messages.</p></div></div></section><section style="margin-top:var(--spacing-s)" class="Notification-module_notification__2hN3H notification_hds-notification__2DQPN Notification-module_small__pCXa_ notification_hds-notification--small__1wVl6" aria-label="Notification"><div class="Notification-module_content__ZZKvE notification_hds-notification__content__5ylSS"><div class="Notification-module_label__1bhNu notification_hds-notification__label__2t1lR" role="heading" aria-level="2"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Notification-module_icon__1ans7 notification_hds-icon__29HQM" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="info-circle-fill" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM13 10V16.5H15V18H9V16.5H11V11.5H9V10H13ZM11.8125 6C12.5374 6 13.125 6.5876 13.125 7.3125C13.125 8.03735 12.5374 8.625 11.8125 8.625C11.0876 8.625 10.5 8.03735 10.5 7.3125C10.5 6.5876 11.0876 6 11.8125 6Z" fill="currentColor"></path></svg><div style="border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap">New messages</div></div><div class="Notification-module_body__9BSAD notification_hds-notification__body__3cobH"><p>You have received new messages.</p></div></div></section></div>
 <h4 id="invisible" style="position:relative" class="page-heading-4 heading-s">Invisible<a href="#invisible" aria-label="invisible permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h4>
 <p>Invisible notifications do not show up on screen and they are meant to aid screen reader users. Some updates to system status may be apparent to regular users through animations etc. However, screen readers can easily ignore this type of feedback. Invisible notifications are not visible to regular users but screen readers detect them. Use them to improve user experience for screen reader users.</p>
-<div class="playground-block-preview playground-block-preview-light"><div style="border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap"><section class="Notification-module_notification__2hN3H notification_hds-notification__2DQPN" aria-label="Notification" role="alert"><div class="Notification-module_content__ZZKvE notification_hds-notification__content__5ylSS"><div class="Notification-module_label__1bhNu notification_hds-notification__label__2t1lR"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Notification-module_icon__1ans7 notification_hds-icon__29HQM" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="info-circle-fill" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM13 10V16.5H15V18H9V16.5H11V11.5H9V10H13ZM11.8125 6C12.5374 6 13.125 6.5876 13.125 7.3125C13.125 8.03735 12.5374 8.625 11.8125 8.625C11.0876 8.625 10.5 8.03735 10.5 7.3125C10.5 6.5876 11.0876 6 11.8125 6Z" fill="currentColor"></path></svg>New messages</div><div class="Notification-module_body__9BSAD notification_hds-notification__body__3cobH"><p>You have received new messages. This notification is invisible.</p></div></div></section></div></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-416" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-416)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="playground-block-preview playground-block-preview-light"><div style="border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap"><section class="Notification-module_notification__2hN3H notification_hds-notification__2DQPN" aria-label="Notification" role="alert"><div class="Notification-module_content__ZZKvE notification_hds-notification__content__5ylSS"><div class="Notification-module_label__1bhNu notification_hds-notification__label__2t1lR"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Notification-module_icon__1ans7 notification_hds-icon__29HQM" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="info-circle-fill" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM13 10V16.5H15V18H9V16.5H11V11.5H9V10H13ZM11.8125 6C12.5374 6 13.125 6.5876 13.125 7.3125C13.125 8.03735 12.5374 8.625 11.8125 8.625C11.0876 8.625 10.5 8.03735 10.5 7.3125C10.5 6.5876 11.0876 6 11.8125 6Z" fill="currentColor"></path></svg>New messages</div><div class="Notification-module_body__9BSAD notification_hds-notification__body__3cobH"><p>You have received new messages. This notification is invisible.</p></div></div></section></div></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-415" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-415)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/notification/tabs/index.html b/docs/hds-1817-stepbystep-docs/components/notification/tabs/index.html
index aae38baf59c..b009522058a 100644
--- a/docs/hds-1817-stepbystep-docs/components/notification/tabs/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/notification/tabs/index.html
@@ -56,7 +56,7 @@
   </script><link rel="manifest" href="/hds-demo/hds-1817-stepbystep-docs/manifest.webmanifest" crossorigin="anonymous"/><link rel="apple-touch-icon" sizes="any" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/favicon-32x32.ico"/><link rel="apple-touch-icon" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/apple-touch-icon.png"/><link rel="apple-touch-icon" sizes="192x192" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/favicon-192x192.png"/><link rel="apple-touch-icon" sizes="512x512" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/favicon-512x512.png"/><link rel="preconnect" href="https://webanalytics.digiaiiris.com/js"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="page text-body"><header class="hds-header Header-module_header__291GF pageHeader" id="page-header"><div class="Header-module_headerBackgroundWrapper__KsFy2"><a href="#content" class="SkipLink-module_skipLink__1knzF"><span class="SkipLink-module_skipLinkLabel__21n5B">Skip to content</span></a><div class="HeaderActionBar-module_headerActionBarContainer__5tfj-"><div class="HeaderActionBar-module_headerActionBar__lPeGE"><a href="https://hds.hel.fi" aria-label="City of Helsinki Logo" class="HeaderActionBar-module_titleAndLogoContainer__2LEAb HeaderActionBar-module_logo__2r2T0"><span class="HeaderActionBarLogo-module_logoWrapper__8NgfS"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></span></a><a href="https://hds.hel.fi" aria-label="Helsinki: Helsinki Design System" class="HeaderActionBar-module_titleAndLogoContainer__2LEAb HeaderActionBar-module_title__opzt9 HeaderActionBar-module_normal__3B4qi"><span class="HeaderActionBar-module_title__opzt9"><div class="page-header-title"><div>Helsinki Design System</div><div class="page-header-title-badge"><img style="filter:invert(1)" alt="HDS version number: 2.15.0" src="https://img.shields.io/github/v/release/City-of-Helsinki/helsinki-design-system?label=&amp;style=for-the-badge&amp;color=1a1a1a"/></div></div></span></a><div class="HeaderActionBar-module_headerActions__3lNnM"></div></div></div><div class="HeaderNavigationMenu-module_headerNavigationMenuContainer__2nK9z"><nav class="HeaderNavigationMenu-module_headerNavigationMenu__3G6-N"><ul class="HeaderNavigationMenu-module_headerNavigationMenuList__3HIzx"></ul></nav></div></div></header><div class="page-content"><aside class="side-content"><nav class="SideNavigation-module_sideNavigation__3X-9P" id="side-navigation" aria-label="Components"><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS Button-module_fullWidth__31eVK button_hds-button--fullwidth__1_hG9 SideNavigation-module_toggleButton__10tXH" aria-controls="side-navigation-menu" aria-expanded="false" aria-haspopup="true"><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Navigate to page</span><div class="Button-module_icon__O-h7R button_hds-icon__17j8Z" aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-down" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 13.5L17 8.5L18.5 10L12 16.5L5.5 10L7 8.5L12 13.5Z" fill="currentColor"></path></svg></div></button><ul class="SideNavigation-module_mainLevelList__SLZKQ" aria-label="Navigate to page" id="side-navigation-menu"><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Overview" id="side-nav-components" href="/hds-demo/hds-1817-stepbystep-docs/components"><span class="MainLevel-module_label__uWKJ7">Overview</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Accordion" id="side-nav-components-accordion" href="/hds-demo/hds-1817-stepbystep-docs/components/accordion"><span class="MainLevel-module_label__uWKJ7">Accordion</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Breadcrumb" id="side-nav-components-breadcrumb" href="/hds-demo/hds-1817-stepbystep-docs/components/breadcrumb"><span class="MainLevel-module_label__uWKJ7">Breadcrumb</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Button" id="side-nav-components-buttons" href="/hds-demo/hds-1817-stepbystep-docs/components/buttons"><span class="MainLevel-module_label__uWKJ7">Button</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Card" id="side-nav-components-card" href="/hds-demo/hds-1817-stepbystep-docs/components/card"><span class="MainLevel-module_label__uWKJ7">Card</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Checkbox" id="side-nav-components-checkbox" href="/hds-demo/hds-1817-stepbystep-docs/components/checkbox"><span class="MainLevel-module_label__uWKJ7">Checkbox</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="CookieConsent" id="side-nav-components-cookie-consent" href="/hds-demo/hds-1817-stepbystep-docs/components/cookie-consent"><span class="MainLevel-module_label__uWKJ7">CookieConsent</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="DateInput" id="side-nav-components-date-input" href="/hds-demo/hds-1817-stepbystep-docs/components/date-input"><span class="MainLevel-module_label__uWKJ7">DateInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Dialog" id="side-nav-components-dialog" href="/hds-demo/hds-1817-stepbystep-docs/components/dialog"><span class="MainLevel-module_label__uWKJ7">Dialog</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Dropdown" id="side-nav-components-dropdown" href="/hds-demo/hds-1817-stepbystep-docs/components/dropdown"><span class="MainLevel-module_label__uWKJ7">Dropdown</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Fieldset" id="side-nav-components-fieldset" href="/hds-demo/hds-1817-stepbystep-docs/components/fieldset"><span class="MainLevel-module_label__uWKJ7">Fieldset</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="FileInput" id="side-nav-components-file-input" href="/hds-demo/hds-1817-stepbystep-docs/components/file-input"><span class="MainLevel-module_label__uWKJ7">FileInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Footer" id="side-nav-components-footer" href="/hds-demo/hds-1817-stepbystep-docs/components/footer"><span class="MainLevel-module_label__uWKJ7">Footer</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Header" id="side-nav-components-header" href="/hds-demo/hds-1817-stepbystep-docs/components/header"><span class="MainLevel-module_label__uWKJ7">Header</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Hero" id="side-nav-components-hero" href="/hds-demo/hds-1817-stepbystep-docs/components/hero"><span class="MainLevel-module_label__uWKJ7">Hero</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Highlight" id="side-nav-components-highlight" href="/hds-demo/hds-1817-stepbystep-docs/components/highlight"><span class="MainLevel-module_label__uWKJ7">Highlight</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Icon" id="side-nav-components-icon" href="/hds-demo/hds-1817-stepbystep-docs/components/icon"><span class="MainLevel-module_label__uWKJ7">Icon</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Koros" id="side-nav-components-koros" href="/hds-demo/hds-1817-stepbystep-docs/components/koros"><span class="MainLevel-module_label__uWKJ7">Koros</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Link" id="side-nav-components-link" href="/hds-demo/hds-1817-stepbystep-docs/components/link"><span class="MainLevel-module_label__uWKJ7">Link</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Linkbox" id="side-nav-components-linkbox" href="/hds-demo/hds-1817-stepbystep-docs/components/linkbox"><span class="MainLevel-module_label__uWKJ7">Linkbox</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="LoadingSpinner" id="side-nav-components-loading-spinner" href="/hds-demo/hds-1817-stepbystep-docs/components/loading-spinner"><span class="MainLevel-module_label__uWKJ7">LoadingSpinner</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Logo" id="side-nav-components-logo" href="/hds-demo/hds-1817-stepbystep-docs/components/logo"><span class="MainLevel-module_label__uWKJ7">Logo</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_active__3IkdI MainLevel-module_open__2yWFj"><a aria-current="page" aria-label="Notification" id="side-nav-components-notification" href="/hds-demo/hds-1817-stepbystep-docs/components/notification"><span class="MainLevel-module_label__uWKJ7">Notification</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="NumberInput" id="side-nav-components-number-input" href="/hds-demo/hds-1817-stepbystep-docs/components/number-input"><span class="MainLevel-module_label__uWKJ7">NumberInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Pagination" id="side-nav-components-pagination" href="/hds-demo/hds-1817-stepbystep-docs/components/pagination"><span class="MainLevel-module_label__uWKJ7">Pagination</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="PasswordInput" id="side-nav-components-password-input" href="/hds-demo/hds-1817-stepbystep-docs/components/password-input"><span class="MainLevel-module_label__uWKJ7">PasswordInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="PhoneInput" id="side-nav-components-phone-input" href="/hds-demo/hds-1817-stepbystep-docs/components/phone-input"><span class="MainLevel-module_label__uWKJ7">PhoneInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="RadioButton" id="side-nav-components-radio-button" href="/hds-demo/hds-1817-stepbystep-docs/components/radio-button"><span class="MainLevel-module_label__uWKJ7">RadioButton</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="SearchInput" id="side-nav-components-search-input" href="/hds-demo/hds-1817-stepbystep-docs/components/search-input"><span class="MainLevel-module_label__uWKJ7">SearchInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="SelectionGroup" id="side-nav-components-selection-group" href="/hds-demo/hds-1817-stepbystep-docs/components/selection-group"><span class="MainLevel-module_label__uWKJ7">SelectionGroup</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="SideNavigation" id="side-nav-components-side-navigation" href="/hds-demo/hds-1817-stepbystep-docs/components/side-navigation"><span class="MainLevel-module_label__uWKJ7">SideNavigation</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="StatusLabel" id="side-nav-components-status-label" href="/hds-demo/hds-1817-stepbystep-docs/components/status-label"><span class="MainLevel-module_label__uWKJ7">StatusLabel</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="StepByStep" id="side-nav-components-step-by-step" href="/hds-demo/hds-1817-stepbystep-docs/components/step-by-step"><span class="MainLevel-module_label__uWKJ7">StepByStep</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Stepper" id="side-nav-components-stepper" href="/hds-demo/hds-1817-stepbystep-docs/components/stepper"><span class="MainLevel-module_label__uWKJ7">Stepper</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Table" id="side-nav-components-table" href="/hds-demo/hds-1817-stepbystep-docs/components/table"><span class="MainLevel-module_label__uWKJ7">Table</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Tabs" id="side-nav-components-tabs" href="/hds-demo/hds-1817-stepbystep-docs/components/tabs"><span class="MainLevel-module_label__uWKJ7">Tabs</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Tag" id="side-nav-components-tag" href="/hds-demo/hds-1817-stepbystep-docs/components/tag"><span class="MainLevel-module_label__uWKJ7">Tag</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="TextArea" id="side-nav-components-text-area" href="/hds-demo/hds-1817-stepbystep-docs/components/text-area"><span class="MainLevel-module_label__uWKJ7">TextArea</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="TextInput" id="side-nav-components-text-input" href="/hds-demo/hds-1817-stepbystep-docs/components/text-input"><span class="MainLevel-module_label__uWKJ7">TextInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="TimeInput" id="side-nav-components-time-input" href="/hds-demo/hds-1817-stepbystep-docs/components/time-input"><span class="MainLevel-module_label__uWKJ7">TimeInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="ToggleButton" id="side-nav-components-toggle-button" href="/hds-demo/hds-1817-stepbystep-docs/components/toggle-button"><span class="MainLevel-module_label__uWKJ7">ToggleButton</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Tooltip" id="side-nav-components-tooltip" href="/hds-demo/hds-1817-stepbystep-docs/components/tooltip"><span class="MainLevel-module_label__uWKJ7">Tooltip</span></a></li></ul></nav></aside><main id="content" class="main-content"><h1 id="notification" style="position:relative" class="page-heading-1 heading-xl-mobile">Notification<a href="#notification" aria-label="notification permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h1>
 <div class="status-label-description"><span class="StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H">Stable</span><span class="StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST" style="margin-left:var(--spacing-xs)">Accessible</span><div class="Tooltip-module_root__1Yo9t status-label-tooltip"><button type="button" class="Tooltip-module_button__2x9m0" title="Tooltip" aria-label="Tooltip" aria-expanded="false"><span aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="question-circle" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM13 16V18H11V16H13ZM12.0437 5.75C14.0343 5.75 15.7173 7.29464 15.7173 9.42361C15.7173 10.7806 15.2461 11.489 14.161 12.306L13.9187 12.4844C13.1753 13.0295 12.9556 13.3359 12.9386 14.142L12.9375 14.25H10.9375C10.9375 12.6746 11.4591 11.8378 12.6143 10.9622L12.8618 10.7796C13.5685 10.2628 13.7173 10.0539 13.7173 9.42361C13.7173 8.43934 12.9662 7.75 12.0437 7.75C11.1907 7.75 10.4785 8.34077 10.3816 9.20835L10.3734 9.30587L8.37663 9.19182C8.49191 7.17347 10.1344 5.75 12.0437 5.75Z" fill="currentColor"></path></svg></span></button></div></div>
 <p style="font-size:var(--fontsize-body-xl);color:var(--color-black-90);max-width:600px">Notifications are used to present timely information to the user. HDS offers two types of notifications for different use cases.</p>
-<div class="Tabs-module_tabs__2Ww5F"><div class="Tabs-module_tablistBar__elMv9 page-tabs-list"><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-left" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 12L15.5 17L14 18.5L7.5 12L14 5.5L15.5 7L10.5 12Z" fill="currentColor"></path></svg></button></div><div class="Tabs-module_tablist__1iuDO"><ul role="tablist" style="width:0px"><li role="tab" aria-selected="true" aria-controls="tab-0-panel" tabindex="0" id="tab-0-button" class="Tabs-module_tab__3oOoX Tabs-module_active__1Ic3B"><span>Usage</span></li><li role="tab" aria-selected="false" aria-controls="tab-1-panel" tabindex="-1" id="tab-1-button" class="Tabs-module_tab__3oOoX"><span>Code</span></li><li role="tab" aria-selected="false" aria-controls="tab-2-panel" tabindex="-1" id="tab-2-button" class="Tabs-module_tab__3oOoX"><span>Accessibility</span></li></ul></div><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z" fill="currentColor"></path></svg></button></div></div><div id="tab-0-panel" role="tabpanel" aria-labelledby="tab-0-button"></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-412" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-412)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="Tabs-module_tabs__2Ww5F"><div class="Tabs-module_tablistBar__elMv9 page-tabs-list"><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-left" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 12L15.5 17L14 18.5L7.5 12L14 5.5L15.5 7L10.5 12Z" fill="currentColor"></path></svg></button></div><div class="Tabs-module_tablist__1iuDO"><ul role="tablist" style="width:0px"><li role="tab" aria-selected="true" aria-controls="tab-0-panel" tabindex="0" id="tab-0-button" class="Tabs-module_tab__3oOoX Tabs-module_active__1Ic3B"><span>Usage</span></li><li role="tab" aria-selected="false" aria-controls="tab-1-panel" tabindex="-1" id="tab-1-button" class="Tabs-module_tab__3oOoX"><span>Code</span></li><li role="tab" aria-selected="false" aria-controls="tab-2-panel" tabindex="-1" id="tab-2-button" class="Tabs-module_tab__3oOoX"><span>Accessibility</span></li></ul></div><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z" fill="currentColor"></path></svg></button></div></div><div id="tab-0-panel" role="tabpanel" aria-labelledby="tab-0-button"></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-410" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-410)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/number-input/accessibility/index.html b/docs/hds-1817-stepbystep-docs/components/number-input/accessibility/index.html
index 5c1b57a9f5c..4c280d5cb71 100644
--- a/docs/hds-1817-stepbystep-docs/components/number-input/accessibility/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/number-input/accessibility/index.html
@@ -63,7 +63,7 @@ <h3 id="pay-attention-to" style="position:relative" class="page-heading-3 headin
 <li>If steppers are used, provide descriptive aria labels for both increase and decrease actions by using <code>minusStepButtonAriaLabel</code> and <code>plusStepButtonAriaLabel</code> props.</li>
 <li>If the number needs to follow a specific format, remember to specify it in the assistive text.</li>
 <li>Placeholders in number inputs should be avoided. Different screen readers announce placeholders in different ways. It can be very difficult for a screen reader user to differentiate the placeholder from the actual value.</li>
-</ul></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-411" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-411)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+</ul></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-412" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-412)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/number-input/code/index.html b/docs/hds-1817-stepbystep-docs/components/number-input/code/index.html
index 14164ef3c6b..24989d5f1e1 100644
--- a/docs/hds-1817-stepbystep-docs/components/number-input/code/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/number-input/code/index.html
@@ -241,7 +241,7 @@ <h3 id="packages" style="position:relative" class="page-heading-3 heading-m">Pac
 <h3 id="properties" style="position:relative" class="page-heading-3 heading-m">Properties<a href="#properties" aria-label="properties permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h3>
 <p>Note! You can find the full list of properties in the <a aria-label="React Storybook. Opens in a new tab" class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/storybook/react/?path=/story/components-numberinput--default" target="_blank" rel="noopener">React Storybook.</a></p>
 <p>Also, note that this component is an input. All features supported by the HDS TextInput are also supported by this component. See <a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/hds-demo/hds-1817-stepbystep-docs/components/text-input">TextInput documentation page</a> for more information.</p>
-<div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><caption class="hds-table__caption"><b>Table 1</b>: <!-- -->NumberInput properties</caption><thead><tr class="hds-table__header-row dark"><th scope="col">Property</th><th scope="col">Description</th><th scope="col">Values</th><th scope="col">Default value</th></tr></thead><tbody class="hds-table__content"><tr><td><code>id</code></td><td>The id for the input.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>label</code></td><td>The label for the input.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>value</code></td><td>The value of the input element, required for a controlled component.</td><td><code>number</code></td><td>-</td></tr><tr><td><code>defaultValue</code></td><td>The default input element value. Use when the component is not controlled.</td><td><code>number</code></td><td>-</td></tr><tr><td><code>minusStepButtonAriaLabel</code></td><td>The aria label for minus step button.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>plusStepButtonAriaLabel</code></td><td>The aria label for plus step button.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>unit</code></td><td>Unit characters of the input. Example: €</td><td><code>string</code></td><td>-</td></tr></tbody></table></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-408" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-408)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><caption class="hds-table__caption"><b>Table 1</b>: <!-- -->NumberInput properties</caption><thead><tr class="hds-table__header-row dark"><th scope="col">Property</th><th scope="col">Description</th><th scope="col">Values</th><th scope="col">Default value</th></tr></thead><tbody class="hds-table__content"><tr><td><code>id</code></td><td>The id for the input.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>label</code></td><td>The label for the input.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>value</code></td><td>The value of the input element, required for a controlled component.</td><td><code>number</code></td><td>-</td></tr><tr><td><code>defaultValue</code></td><td>The default input element value. Use when the component is not controlled.</td><td><code>number</code></td><td>-</td></tr><tr><td><code>minusStepButtonAriaLabel</code></td><td>The aria label for minus step button.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>plusStepButtonAriaLabel</code></td><td>The aria label for plus step button.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>unit</code></td><td>Unit characters of the input. Example: €</td><td><code>string</code></td><td>-</td></tr></tbody></table></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-407" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-407)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/number-input/index.html b/docs/hds-1817-stepbystep-docs/components/number-input/index.html
index 1904c7d7239..57f2ce9d787 100644
--- a/docs/hds-1817-stepbystep-docs/components/number-input/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/number-input/index.html
@@ -91,7 +91,7 @@ <h4 id="with-steppers" style="position:relative" class="page-heading-4 heading-s
 <h4 id="with-min-and-max-values" style="position:relative" class="page-heading-4 heading-s">With min and max values<a href="#with-min-and-max-values" aria-label="with min and max values permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h4>
 <p>Steppers can be enabled by providing a <code>step</code> property. Use this variant when value changes are small and you can determine logical amounts for an increase and a decrease step.</p>
 <p>If your input has special requirements, it is a good practice to describe them in the assistive text.</p>
-<div class="playground-block-preview playground-block-preview-light"><div class="TextInput-module_root__2CMNr text-input_hds-text-input__2LODq" style="max-width:320px"><label id="stepper-minmax-label" for="stepper-minmax" class="FieldLabel-module_label__1zrXK ">Number of attendees</label><div class="TextInput-module_inputWrapper__3Rvel text-input_hds-text-input__input-wrapper__1OqYG"><div class="NumberInput-module_numberInputContainer__hKNPp" role="group" aria-labelledby="stepper-minmax-label"><input class="TextInput-module_input__1BlHi text-input_hds-text-input__input__GJm5C NumberInput-module_numberInputWithSteps__3q7N7" id="stepper-minmax" max="99" min="3" step="1" type="number" aria-describedby="stepper-minmax-helper" value="3"/><div class="NumberInput-module_minusButtonWrapper__3PHN9"><button class="NumberInput-module_button__2Shu7" type="button" aria-label="Decrease by one"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="minus" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 11H18V13H6V11Z" fill="currentColor"></path></svg></button></div><div class="NumberInput-module_plusButtonWrapper__Wwq5t"><button class="NumberInput-module_button__2Shu7" type="button" aria-label="Increase by one"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="plus" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M13 6V11H18V13H13V18H11V13H6V11H11V6H13Z" fill="currentColor"></path></svg></button></div></div></div><div class="TextInput-module_helperText__2dLR6 text-input_hds-text-input__helper-text__3V2KM" id="stepper-minmax-helper">At least 3 attendees are required</div></div></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-407" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-407)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="playground-block-preview playground-block-preview-light"><div class="TextInput-module_root__2CMNr text-input_hds-text-input__2LODq" style="max-width:320px"><label id="stepper-minmax-label" for="stepper-minmax" class="FieldLabel-module_label__1zrXK ">Number of attendees</label><div class="TextInput-module_inputWrapper__3Rvel text-input_hds-text-input__input-wrapper__1OqYG"><div class="NumberInput-module_numberInputContainer__hKNPp" role="group" aria-labelledby="stepper-minmax-label"><input class="TextInput-module_input__1BlHi text-input_hds-text-input__input__GJm5C NumberInput-module_numberInputWithSteps__3q7N7" id="stepper-minmax" max="99" min="3" step="1" type="number" aria-describedby="stepper-minmax-helper" value="3"/><div class="NumberInput-module_minusButtonWrapper__3PHN9"><button class="NumberInput-module_button__2Shu7" type="button" aria-label="Decrease by one"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="minus" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 11H18V13H6V11Z" fill="currentColor"></path></svg></button></div><div class="NumberInput-module_plusButtonWrapper__Wwq5t"><button class="NumberInput-module_button__2Shu7" type="button" aria-label="Increase by one"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="plus" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M13 6V11H18V13H13V18H11V13H6V11H11V6H13Z" fill="currentColor"></path></svg></button></div></div></div><div class="TextInput-module_helperText__2dLR6 text-input_hds-text-input__helper-text__3V2KM" id="stepper-minmax-helper">At least 3 attendees are required</div></div></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-408" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-408)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/number-input/tabs/index.html b/docs/hds-1817-stepbystep-docs/components/number-input/tabs/index.html
index 0e213c3e021..4aa3459ff9c 100644
--- a/docs/hds-1817-stepbystep-docs/components/number-input/tabs/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/number-input/tabs/index.html
@@ -56,7 +56,7 @@
   </script><link rel="manifest" href="/hds-demo/hds-1817-stepbystep-docs/manifest.webmanifest" crossorigin="anonymous"/><link rel="apple-touch-icon" sizes="any" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/favicon-32x32.ico"/><link rel="apple-touch-icon" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/apple-touch-icon.png"/><link rel="apple-touch-icon" sizes="192x192" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/favicon-192x192.png"/><link rel="apple-touch-icon" sizes="512x512" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/favicon-512x512.png"/><link rel="preconnect" href="https://webanalytics.digiaiiris.com/js"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="page text-body"><header class="hds-header Header-module_header__291GF pageHeader" id="page-header"><div class="Header-module_headerBackgroundWrapper__KsFy2"><a href="#content" class="SkipLink-module_skipLink__1knzF"><span class="SkipLink-module_skipLinkLabel__21n5B">Skip to content</span></a><div class="HeaderActionBar-module_headerActionBarContainer__5tfj-"><div class="HeaderActionBar-module_headerActionBar__lPeGE"><a href="https://hds.hel.fi" aria-label="City of Helsinki Logo" class="HeaderActionBar-module_titleAndLogoContainer__2LEAb HeaderActionBar-module_logo__2r2T0"><span class="HeaderActionBarLogo-module_logoWrapper__8NgfS"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></span></a><a href="https://hds.hel.fi" aria-label="Helsinki: Helsinki Design System" class="HeaderActionBar-module_titleAndLogoContainer__2LEAb HeaderActionBar-module_title__opzt9 HeaderActionBar-module_normal__3B4qi"><span class="HeaderActionBar-module_title__opzt9"><div class="page-header-title"><div>Helsinki Design System</div><div class="page-header-title-badge"><img style="filter:invert(1)" alt="HDS version number: 2.15.0" src="https://img.shields.io/github/v/release/City-of-Helsinki/helsinki-design-system?label=&amp;style=for-the-badge&amp;color=1a1a1a"/></div></div></span></a><div class="HeaderActionBar-module_headerActions__3lNnM"></div></div></div><div class="HeaderNavigationMenu-module_headerNavigationMenuContainer__2nK9z"><nav class="HeaderNavigationMenu-module_headerNavigationMenu__3G6-N"><ul class="HeaderNavigationMenu-module_headerNavigationMenuList__3HIzx"></ul></nav></div></div></header><div class="page-content"><aside class="side-content"><nav class="SideNavigation-module_sideNavigation__3X-9P" id="side-navigation" aria-label="Components"><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS Button-module_fullWidth__31eVK button_hds-button--fullwidth__1_hG9 SideNavigation-module_toggleButton__10tXH" aria-controls="side-navigation-menu" aria-expanded="false" aria-haspopup="true"><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Navigate to page</span><div class="Button-module_icon__O-h7R button_hds-icon__17j8Z" aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-down" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 13.5L17 8.5L18.5 10L12 16.5L5.5 10L7 8.5L12 13.5Z" fill="currentColor"></path></svg></div></button><ul class="SideNavigation-module_mainLevelList__SLZKQ" aria-label="Navigate to page" id="side-navigation-menu"><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Overview" id="side-nav-components" href="/hds-demo/hds-1817-stepbystep-docs/components"><span class="MainLevel-module_label__uWKJ7">Overview</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Accordion" id="side-nav-components-accordion" href="/hds-demo/hds-1817-stepbystep-docs/components/accordion"><span class="MainLevel-module_label__uWKJ7">Accordion</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Breadcrumb" id="side-nav-components-breadcrumb" href="/hds-demo/hds-1817-stepbystep-docs/components/breadcrumb"><span class="MainLevel-module_label__uWKJ7">Breadcrumb</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Button" id="side-nav-components-buttons" href="/hds-demo/hds-1817-stepbystep-docs/components/buttons"><span class="MainLevel-module_label__uWKJ7">Button</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Card" id="side-nav-components-card" href="/hds-demo/hds-1817-stepbystep-docs/components/card"><span class="MainLevel-module_label__uWKJ7">Card</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Checkbox" id="side-nav-components-checkbox" href="/hds-demo/hds-1817-stepbystep-docs/components/checkbox"><span class="MainLevel-module_label__uWKJ7">Checkbox</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="CookieConsent" id="side-nav-components-cookie-consent" href="/hds-demo/hds-1817-stepbystep-docs/components/cookie-consent"><span class="MainLevel-module_label__uWKJ7">CookieConsent</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="DateInput" id="side-nav-components-date-input" href="/hds-demo/hds-1817-stepbystep-docs/components/date-input"><span class="MainLevel-module_label__uWKJ7">DateInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Dialog" id="side-nav-components-dialog" href="/hds-demo/hds-1817-stepbystep-docs/components/dialog"><span class="MainLevel-module_label__uWKJ7">Dialog</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Dropdown" id="side-nav-components-dropdown" href="/hds-demo/hds-1817-stepbystep-docs/components/dropdown"><span class="MainLevel-module_label__uWKJ7">Dropdown</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Fieldset" id="side-nav-components-fieldset" href="/hds-demo/hds-1817-stepbystep-docs/components/fieldset"><span class="MainLevel-module_label__uWKJ7">Fieldset</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="FileInput" id="side-nav-components-file-input" href="/hds-demo/hds-1817-stepbystep-docs/components/file-input"><span class="MainLevel-module_label__uWKJ7">FileInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Footer" id="side-nav-components-footer" href="/hds-demo/hds-1817-stepbystep-docs/components/footer"><span class="MainLevel-module_label__uWKJ7">Footer</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Header" id="side-nav-components-header" href="/hds-demo/hds-1817-stepbystep-docs/components/header"><span class="MainLevel-module_label__uWKJ7">Header</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Hero" id="side-nav-components-hero" href="/hds-demo/hds-1817-stepbystep-docs/components/hero"><span class="MainLevel-module_label__uWKJ7">Hero</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Highlight" id="side-nav-components-highlight" href="/hds-demo/hds-1817-stepbystep-docs/components/highlight"><span class="MainLevel-module_label__uWKJ7">Highlight</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Icon" id="side-nav-components-icon" href="/hds-demo/hds-1817-stepbystep-docs/components/icon"><span class="MainLevel-module_label__uWKJ7">Icon</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Koros" id="side-nav-components-koros" href="/hds-demo/hds-1817-stepbystep-docs/components/koros"><span class="MainLevel-module_label__uWKJ7">Koros</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Link" id="side-nav-components-link" href="/hds-demo/hds-1817-stepbystep-docs/components/link"><span class="MainLevel-module_label__uWKJ7">Link</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Linkbox" id="side-nav-components-linkbox" href="/hds-demo/hds-1817-stepbystep-docs/components/linkbox"><span class="MainLevel-module_label__uWKJ7">Linkbox</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="LoadingSpinner" id="side-nav-components-loading-spinner" href="/hds-demo/hds-1817-stepbystep-docs/components/loading-spinner"><span class="MainLevel-module_label__uWKJ7">LoadingSpinner</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Logo" id="side-nav-components-logo" href="/hds-demo/hds-1817-stepbystep-docs/components/logo"><span class="MainLevel-module_label__uWKJ7">Logo</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Notification" id="side-nav-components-notification" href="/hds-demo/hds-1817-stepbystep-docs/components/notification"><span class="MainLevel-module_label__uWKJ7">Notification</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="NumberInput" id="side-nav-components-number-input" href="/hds-demo/hds-1817-stepbystep-docs/components/number-input"><span class="MainLevel-module_label__uWKJ7">NumberInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Pagination" id="side-nav-components-pagination" href="/hds-demo/hds-1817-stepbystep-docs/components/pagination"><span class="MainLevel-module_label__uWKJ7">Pagination</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="PasswordInput" id="side-nav-components-password-input" href="/hds-demo/hds-1817-stepbystep-docs/components/password-input"><span class="MainLevel-module_label__uWKJ7">PasswordInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="PhoneInput" id="side-nav-components-phone-input" href="/hds-demo/hds-1817-stepbystep-docs/components/phone-input"><span class="MainLevel-module_label__uWKJ7">PhoneInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="RadioButton" id="side-nav-components-radio-button" href="/hds-demo/hds-1817-stepbystep-docs/components/radio-button"><span class="MainLevel-module_label__uWKJ7">RadioButton</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="SearchInput" id="side-nav-components-search-input" href="/hds-demo/hds-1817-stepbystep-docs/components/search-input"><span class="MainLevel-module_label__uWKJ7">SearchInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="SelectionGroup" id="side-nav-components-selection-group" href="/hds-demo/hds-1817-stepbystep-docs/components/selection-group"><span class="MainLevel-module_label__uWKJ7">SelectionGroup</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="SideNavigation" id="side-nav-components-side-navigation" href="/hds-demo/hds-1817-stepbystep-docs/components/side-navigation"><span class="MainLevel-module_label__uWKJ7">SideNavigation</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="StatusLabel" id="side-nav-components-status-label" href="/hds-demo/hds-1817-stepbystep-docs/components/status-label"><span class="MainLevel-module_label__uWKJ7">StatusLabel</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="StepByStep" id="side-nav-components-step-by-step" href="/hds-demo/hds-1817-stepbystep-docs/components/step-by-step"><span class="MainLevel-module_label__uWKJ7">StepByStep</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Stepper" id="side-nav-components-stepper" href="/hds-demo/hds-1817-stepbystep-docs/components/stepper"><span class="MainLevel-module_label__uWKJ7">Stepper</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Table" id="side-nav-components-table" href="/hds-demo/hds-1817-stepbystep-docs/components/table"><span class="MainLevel-module_label__uWKJ7">Table</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Tabs" id="side-nav-components-tabs" href="/hds-demo/hds-1817-stepbystep-docs/components/tabs"><span class="MainLevel-module_label__uWKJ7">Tabs</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Tag" id="side-nav-components-tag" href="/hds-demo/hds-1817-stepbystep-docs/components/tag"><span class="MainLevel-module_label__uWKJ7">Tag</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="TextArea" id="side-nav-components-text-area" href="/hds-demo/hds-1817-stepbystep-docs/components/text-area"><span class="MainLevel-module_label__uWKJ7">TextArea</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="TextInput" id="side-nav-components-text-input" href="/hds-demo/hds-1817-stepbystep-docs/components/text-input"><span class="MainLevel-module_label__uWKJ7">TextInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="TimeInput" id="side-nav-components-time-input" href="/hds-demo/hds-1817-stepbystep-docs/components/time-input"><span class="MainLevel-module_label__uWKJ7">TimeInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="ToggleButton" id="side-nav-components-toggle-button" href="/hds-demo/hds-1817-stepbystep-docs/components/toggle-button"><span class="MainLevel-module_label__uWKJ7">ToggleButton</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Tooltip" id="side-nav-components-tooltip" href="/hds-demo/hds-1817-stepbystep-docs/components/tooltip"><span class="MainLevel-module_label__uWKJ7">Tooltip</span></a></li></ul></nav></aside><main id="content" class="main-content"><h1 id="numberinput" style="position:relative" class="page-heading-1 heading-xl-mobile">NumberInput<a href="#numberinput" aria-label="numberinput permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h1>
 <div class="status-label-description"><span class="StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H">Stable</span><span class="StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST" style="margin-left:var(--spacing-xs)">Accessible</span><div class="Tooltip-module_root__1Yo9t status-label-tooltip"><button type="button" class="Tooltip-module_button__2x9m0" title="Tooltip" aria-label="Tooltip" aria-expanded="false"><span aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="question-circle" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM13 16V18H11V16H13ZM12.0437 5.75C14.0343 5.75 15.7173 7.29464 15.7173 9.42361C15.7173 10.7806 15.2461 11.489 14.161 12.306L13.9187 12.4844C13.1753 13.0295 12.9556 13.3359 12.9386 14.142L12.9375 14.25H10.9375C10.9375 12.6746 11.4591 11.8378 12.6143 10.9622L12.8618 10.7796C13.5685 10.2628 13.7173 10.0539 13.7173 9.42361C13.7173 8.43934 12.9662 7.75 12.0437 7.75C11.1907 7.75 10.4785 8.34077 10.3816 9.20835L10.3734 9.30587L8.37663 9.19182C8.49191 7.17347 10.1344 5.75 12.0437 5.75Z" fill="currentColor"></path></svg></span></button></div></div>
 <p style="font-size:var(--fontsize-body-xl);color:var(--color-black-90);max-width:600px">  A number input allows the user to enter numeric values. It also features optional steppers for increasing or decreasing the value by a set amount.</p>
-<div class="Tabs-module_tabs__2Ww5F"><div class="Tabs-module_tablistBar__elMv9 page-tabs-list"><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-left" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 12L15.5 17L14 18.5L7.5 12L14 5.5L15.5 7L10.5 12Z" fill="currentColor"></path></svg></button></div><div class="Tabs-module_tablist__1iuDO"><ul role="tablist" style="width:0px"><li role="tab" aria-selected="true" aria-controls="tab-0-panel" tabindex="0" id="tab-0-button" class="Tabs-module_tab__3oOoX Tabs-module_active__1Ic3B"><span>Usage</span></li><li role="tab" aria-selected="false" aria-controls="tab-1-panel" tabindex="-1" id="tab-1-button" class="Tabs-module_tab__3oOoX"><span>Code</span></li><li role="tab" aria-selected="false" aria-controls="tab-2-panel" tabindex="-1" id="tab-2-button" class="Tabs-module_tab__3oOoX"><span>Accessibility</span></li></ul></div><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z" fill="currentColor"></path></svg></button></div></div><div id="tab-0-panel" role="tabpanel" aria-labelledby="tab-0-button"></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-403" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-403)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="Tabs-module_tabs__2Ww5F"><div class="Tabs-module_tablistBar__elMv9 page-tabs-list"><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-left" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 12L15.5 17L14 18.5L7.5 12L14 5.5L15.5 7L10.5 12Z" fill="currentColor"></path></svg></button></div><div class="Tabs-module_tablist__1iuDO"><ul role="tablist" style="width:0px"><li role="tab" aria-selected="true" aria-controls="tab-0-panel" tabindex="0" id="tab-0-button" class="Tabs-module_tab__3oOoX Tabs-module_active__1Ic3B"><span>Usage</span></li><li role="tab" aria-selected="false" aria-controls="tab-1-panel" tabindex="-1" id="tab-1-button" class="Tabs-module_tab__3oOoX"><span>Code</span></li><li role="tab" aria-selected="false" aria-controls="tab-2-panel" tabindex="-1" id="tab-2-button" class="Tabs-module_tab__3oOoX"><span>Accessibility</span></li></ul></div><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z" fill="currentColor"></path></svg></button></div></div><div id="tab-0-panel" role="tabpanel" aria-labelledby="tab-0-button"></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-404" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-404)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/password-input/accessibility/index.html b/docs/hds-1817-stepbystep-docs/components/password-input/accessibility/index.html
index 5cc6806b2ec..90aed6b2d5d 100644
--- a/docs/hds-1817-stepbystep-docs/components/password-input/accessibility/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/password-input/accessibility/index.html
@@ -62,7 +62,7 @@ <h3 id="pay-attention-to" style="position:relative" class="page-heading-3 headin
 <li>In the case of an insufficient password, aim to provide clear instructions to the user on how to correct the mistake. Always provide a text description of the error.</li>
 <li>It is required to use <code>autocomplete</code> attribute if input control is listed in the common input purposes list. You can read the full list of common input purposes at <a aria-label="WCAG 2.1 documentation website. Opens a different website." class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="https://www.w3.org/TR/WCAG21/#input-purposes">WCAG 2.1 documentation website<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Link-module_icon__3ReCc link_icon__i_HqN Link-module_verticalAlignMediumIcon__12PVa link_vertical-align-medium-icon__3IWi1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="link-external" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z" fill="currentColor"></path></svg></a>. You can read more about the requirement from <a aria-label="WCAG 2.1 Identify Input Purpose guideline. Opens a different website." class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose">WCAG 2.1 Identify Input Purpose guideline<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Link-module_icon__3ReCc link_icon__i_HqN Link-module_verticalAlignMediumIcon__12PVa link_vertical-align-medium-icon__3IWi1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="link-external" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z" fill="currentColor"></path></svg></a>.</li>
 <li>Place sign-in in its own <code>form</code> element and use <code>landmark</code> region to mark the login area. This allows assistive technologies to quickly locate and skip to the login section.</li>
-</ul></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-404" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-404)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+</ul></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-403" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-403)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/password-input/code/index.html b/docs/hds-1817-stepbystep-docs/components/password-input/code/index.html
index 35e7bdac407..0b9c4deaf62 100644
--- a/docs/hds-1817-stepbystep-docs/components/password-input/code/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/password-input/code/index.html
@@ -201,7 +201,7 @@ <h3 id="packages" style="position:relative" class="page-heading-3 heading-m">Pac
 <h3 id="properties" style="position:relative" class="page-heading-3 heading-m">Properties<a href="#properties" aria-label="properties permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h3>
 <p>Note! You can find the full list of properties in the <a aria-label="React Storybook. Opens in a new tab" class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/storybook/react/?path=/story/components-passwordinput--default" target="_blank" rel="noopener">React Storybook.</a></p>
 <p>Also, note that this component is an input. All features supported by the HDS TextInput are also supported by this component. See <a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/hds-demo/hds-1817-stepbystep-docs/components/text-input">TextInput documentation page</a> for more information.</p>
-<div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><caption class="hds-table__caption"><b>Table 1</b>: <!-- -->PasswordInput properties</caption><thead><tr class="hds-table__header-row dark"><th scope="col">Property</th><th scope="col">Description</th><th scope="col">Values</th><th scope="col">Default value</th></tr></thead><tbody class="hds-table__content"><tr><td><code>label</code></td><td>The label for the input.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>type</code></td><td>Type of the password input. Only applied when <code>includeShowPasswordButton</code> is false. Use this if you wish to not have show password button, or you wish to apply external show password button.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>concealPasswordButtonAriaLabel</code></td><td>The aria-label for conceal password button.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>includeShowPasswordButton</code></td><td>If set to true, the component will include show / hide password button.</td><td><code>boolean</code></td><td>true</td></tr><tr><td><code>initiallyRevealed</code></td><td>If set to true, the component will initially reveal the password. Only applied when <code>includeShowPasswordButton</code> is true.</td><td><code>boolean</code></td><td>false</td></tr><tr><td><code>revealPasswordButtonAriaLabel</code></td><td>The aria-label for the reveal password button.</td><td><code>string</code></td><td>-</td></tr></tbody></table></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-399" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-399)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><caption class="hds-table__caption"><b>Table 1</b>: <!-- -->PasswordInput properties</caption><thead><tr class="hds-table__header-row dark"><th scope="col">Property</th><th scope="col">Description</th><th scope="col">Values</th><th scope="col">Default value</th></tr></thead><tbody class="hds-table__content"><tr><td><code>label</code></td><td>The label for the input.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>type</code></td><td>Type of the password input. Only applied when <code>includeShowPasswordButton</code> is false. Use this if you wish to not have show password button, or you wish to apply external show password button.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>concealPasswordButtonAriaLabel</code></td><td>The aria-label for conceal password button.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>includeShowPasswordButton</code></td><td>If set to true, the component will include show / hide password button.</td><td><code>boolean</code></td><td>true</td></tr><tr><td><code>initiallyRevealed</code></td><td>If set to true, the component will initially reveal the password. Only applied when <code>includeShowPasswordButton</code> is true.</td><td><code>boolean</code></td><td>false</td></tr><tr><td><code>revealPasswordButtonAriaLabel</code></td><td>The aria-label for the reveal password button.</td><td><code>string</code></td><td>-</td></tr></tbody></table></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-400" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-400)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/password-input/index.html b/docs/hds-1817-stepbystep-docs/components/password-input/index.html
index 7efef0bfafd..a3ca8a1a535 100644
--- a/docs/hds-1817-stepbystep-docs/components/password-input/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/password-input/index.html
@@ -74,7 +74,7 @@ <h4 id="default" style="position:relative" class="page-heading-4 heading-s">Defa
 <h4 id="with-an-external-button" style="position:relative" class="page-heading-4 heading-s">With an external button<a href="#with-an-external-button" aria-label="with an external button permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h4>
 <p>If necessary, the mask/unmask icon can be removed and the feature controlled with an external button element.</p>
 <!-- -->
-<div class="playground-block-preview playground-block-preview-light"><div style="display:grid;grid-template-columns:320px 240px;gap:var(--spacing-s)"><div class="TextInput-module_root__2CMNr text-input_hds-text-input__2LODq" style="max-width:320px"><label for="password-input-3" class="FieldLabel-module_label__1zrXK ">Password<span class="RequiredIndicator-module_indicator__Pt7GX text-input_hds-text-input__required__2K-Bs">*</span></label><div class="TextInput-module_inputWrapper__3Rvel text-input_hds-text-input__input-wrapper__1OqYG"><input class="TextInput-module_input__1BlHi text-input_hds-text-input__input__GJm5C" id="password-input-3" required="" type="password" aria-describedby="password-input-3-helper"/></div><div class="TextInput-module_helperText__2dLR6 text-input_hds-text-input__helper-text__3V2KM" id="password-input-3-helper">Assistive text</div></div><div style="display:flex;justify-content:center;flex-direction:column"><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_supplementary__3YKiS button_hds-button--supplementary__GcHcV"><div class="Button-module_icon__O-h7R button_hds-icon__17j8Z" aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="eye" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 4.5C16.0501 4.5 19.7168 7 23 12C19.7168 17 16.0501 19.5 12 19.5C7.94991 19.5 4.28325 17 1 12C4.28325 7 7.94991 4.5 12 4.5ZM12 6.5C9.04854 6.5 6.2496 8.20372 3.57529 11.8024L3.43 12L3.57529 12.1976C6.19914 15.7284 8.94296 17.435 11.8331 17.4982L12 17.5C14.9515 17.5 17.7504 15.7963 20.4247 12.1976L20.5695 12L20.4247 11.8024C17.8009 8.27162 15.057 6.56497 12.1669 6.50182L12 6.5ZM12 8C14.2091 8 16 9.79086 16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8ZM12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10Z" fill="currentColor"></path></svg></div><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Show password</span></button></div></div></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-400" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-400)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="playground-block-preview playground-block-preview-light"><div style="display:grid;grid-template-columns:320px 240px;gap:var(--spacing-s)"><div class="TextInput-module_root__2CMNr text-input_hds-text-input__2LODq" style="max-width:320px"><label for="password-input-3" class="FieldLabel-module_label__1zrXK ">Password<span class="RequiredIndicator-module_indicator__Pt7GX text-input_hds-text-input__required__2K-Bs">*</span></label><div class="TextInput-module_inputWrapper__3Rvel text-input_hds-text-input__input-wrapper__1OqYG"><input class="TextInput-module_input__1BlHi text-input_hds-text-input__input__GJm5C" id="password-input-3" required="" type="password" aria-describedby="password-input-3-helper"/></div><div class="TextInput-module_helperText__2dLR6 text-input_hds-text-input__helper-text__3V2KM" id="password-input-3-helper">Assistive text</div></div><div style="display:flex;justify-content:center;flex-direction:column"><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_supplementary__3YKiS button_hds-button--supplementary__GcHcV"><div class="Button-module_icon__O-h7R button_hds-icon__17j8Z" aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="eye" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 4.5C16.0501 4.5 19.7168 7 23 12C19.7168 17 16.0501 19.5 12 19.5C7.94991 19.5 4.28325 17 1 12C4.28325 7 7.94991 4.5 12 4.5ZM12 6.5C9.04854 6.5 6.2496 8.20372 3.57529 11.8024L3.43 12L3.57529 12.1976C6.19914 15.7284 8.94296 17.435 11.8331 17.4982L12 17.5C14.9515 17.5 17.7504 15.7963 20.4247 12.1976L20.5695 12L20.4247 11.8024C17.8009 8.27162 15.057 6.56497 12.1669 6.50182L12 6.5ZM12 8C14.2091 8 16 9.79086 16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8ZM12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10Z" fill="currentColor"></path></svg></div><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Show password</span></button></div></div></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-399" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-399)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/password-input/tabs/index.html b/docs/hds-1817-stepbystep-docs/components/password-input/tabs/index.html
index 702b618e015..6e3ca852f6e 100644
--- a/docs/hds-1817-stepbystep-docs/components/password-input/tabs/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/password-input/tabs/index.html
@@ -56,7 +56,7 @@
   </script><link rel="manifest" href="/hds-demo/hds-1817-stepbystep-docs/manifest.webmanifest" crossorigin="anonymous"/><link rel="apple-touch-icon" sizes="any" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/favicon-32x32.ico"/><link rel="apple-touch-icon" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/apple-touch-icon.png"/><link rel="apple-touch-icon" sizes="192x192" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/favicon-192x192.png"/><link rel="apple-touch-icon" sizes="512x512" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/favicon-512x512.png"/><link rel="preconnect" href="https://webanalytics.digiaiiris.com/js"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="page text-body"><header class="hds-header Header-module_header__291GF pageHeader" id="page-header"><div class="Header-module_headerBackgroundWrapper__KsFy2"><a href="#content" class="SkipLink-module_skipLink__1knzF"><span class="SkipLink-module_skipLinkLabel__21n5B">Skip to content</span></a><div class="HeaderActionBar-module_headerActionBarContainer__5tfj-"><div class="HeaderActionBar-module_headerActionBar__lPeGE"><a href="https://hds.hel.fi" aria-label="City of Helsinki Logo" class="HeaderActionBar-module_titleAndLogoContainer__2LEAb HeaderActionBar-module_logo__2r2T0"><span class="HeaderActionBarLogo-module_logoWrapper__8NgfS"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></span></a><a href="https://hds.hel.fi" aria-label="Helsinki: Helsinki Design System" class="HeaderActionBar-module_titleAndLogoContainer__2LEAb HeaderActionBar-module_title__opzt9 HeaderActionBar-module_normal__3B4qi"><span class="HeaderActionBar-module_title__opzt9"><div class="page-header-title"><div>Helsinki Design System</div><div class="page-header-title-badge"><img style="filter:invert(1)" alt="HDS version number: 2.15.0" src="https://img.shields.io/github/v/release/City-of-Helsinki/helsinki-design-system?label=&amp;style=for-the-badge&amp;color=1a1a1a"/></div></div></span></a><div class="HeaderActionBar-module_headerActions__3lNnM"></div></div></div><div class="HeaderNavigationMenu-module_headerNavigationMenuContainer__2nK9z"><nav class="HeaderNavigationMenu-module_headerNavigationMenu__3G6-N"><ul class="HeaderNavigationMenu-module_headerNavigationMenuList__3HIzx"></ul></nav></div></div></header><div class="page-content"><aside class="side-content"><nav class="SideNavigation-module_sideNavigation__3X-9P" id="side-navigation" aria-label="Components"><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS Button-module_fullWidth__31eVK button_hds-button--fullwidth__1_hG9 SideNavigation-module_toggleButton__10tXH" aria-controls="side-navigation-menu" aria-expanded="false" aria-haspopup="true"><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Navigate to page</span><div class="Button-module_icon__O-h7R button_hds-icon__17j8Z" aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-down" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 13.5L17 8.5L18.5 10L12 16.5L5.5 10L7 8.5L12 13.5Z" fill="currentColor"></path></svg></div></button><ul class="SideNavigation-module_mainLevelList__SLZKQ" aria-label="Navigate to page" id="side-navigation-menu"><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Overview" id="side-nav-components" href="/hds-demo/hds-1817-stepbystep-docs/components"><span class="MainLevel-module_label__uWKJ7">Overview</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Accordion" id="side-nav-components-accordion" href="/hds-demo/hds-1817-stepbystep-docs/components/accordion"><span class="MainLevel-module_label__uWKJ7">Accordion</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Breadcrumb" id="side-nav-components-breadcrumb" href="/hds-demo/hds-1817-stepbystep-docs/components/breadcrumb"><span class="MainLevel-module_label__uWKJ7">Breadcrumb</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Button" id="side-nav-components-buttons" href="/hds-demo/hds-1817-stepbystep-docs/components/buttons"><span class="MainLevel-module_label__uWKJ7">Button</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Card" id="side-nav-components-card" href="/hds-demo/hds-1817-stepbystep-docs/components/card"><span class="MainLevel-module_label__uWKJ7">Card</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Checkbox" id="side-nav-components-checkbox" href="/hds-demo/hds-1817-stepbystep-docs/components/checkbox"><span class="MainLevel-module_label__uWKJ7">Checkbox</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="CookieConsent" id="side-nav-components-cookie-consent" href="/hds-demo/hds-1817-stepbystep-docs/components/cookie-consent"><span class="MainLevel-module_label__uWKJ7">CookieConsent</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="DateInput" id="side-nav-components-date-input" href="/hds-demo/hds-1817-stepbystep-docs/components/date-input"><span class="MainLevel-module_label__uWKJ7">DateInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Dialog" id="side-nav-components-dialog" href="/hds-demo/hds-1817-stepbystep-docs/components/dialog"><span class="MainLevel-module_label__uWKJ7">Dialog</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Dropdown" id="side-nav-components-dropdown" href="/hds-demo/hds-1817-stepbystep-docs/components/dropdown"><span class="MainLevel-module_label__uWKJ7">Dropdown</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Fieldset" id="side-nav-components-fieldset" href="/hds-demo/hds-1817-stepbystep-docs/components/fieldset"><span class="MainLevel-module_label__uWKJ7">Fieldset</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="FileInput" id="side-nav-components-file-input" href="/hds-demo/hds-1817-stepbystep-docs/components/file-input"><span class="MainLevel-module_label__uWKJ7">FileInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Footer" id="side-nav-components-footer" href="/hds-demo/hds-1817-stepbystep-docs/components/footer"><span class="MainLevel-module_label__uWKJ7">Footer</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Header" id="side-nav-components-header" href="/hds-demo/hds-1817-stepbystep-docs/components/header"><span class="MainLevel-module_label__uWKJ7">Header</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Hero" id="side-nav-components-hero" href="/hds-demo/hds-1817-stepbystep-docs/components/hero"><span class="MainLevel-module_label__uWKJ7">Hero</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Highlight" id="side-nav-components-highlight" href="/hds-demo/hds-1817-stepbystep-docs/components/highlight"><span class="MainLevel-module_label__uWKJ7">Highlight</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Icon" id="side-nav-components-icon" href="/hds-demo/hds-1817-stepbystep-docs/components/icon"><span class="MainLevel-module_label__uWKJ7">Icon</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Koros" id="side-nav-components-koros" href="/hds-demo/hds-1817-stepbystep-docs/components/koros"><span class="MainLevel-module_label__uWKJ7">Koros</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Link" id="side-nav-components-link" href="/hds-demo/hds-1817-stepbystep-docs/components/link"><span class="MainLevel-module_label__uWKJ7">Link</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Linkbox" id="side-nav-components-linkbox" href="/hds-demo/hds-1817-stepbystep-docs/components/linkbox"><span class="MainLevel-module_label__uWKJ7">Linkbox</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="LoadingSpinner" id="side-nav-components-loading-spinner" href="/hds-demo/hds-1817-stepbystep-docs/components/loading-spinner"><span class="MainLevel-module_label__uWKJ7">LoadingSpinner</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Logo" id="side-nav-components-logo" href="/hds-demo/hds-1817-stepbystep-docs/components/logo"><span class="MainLevel-module_label__uWKJ7">Logo</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Notification" id="side-nav-components-notification" href="/hds-demo/hds-1817-stepbystep-docs/components/notification"><span class="MainLevel-module_label__uWKJ7">Notification</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="NumberInput" id="side-nav-components-number-input" href="/hds-demo/hds-1817-stepbystep-docs/components/number-input"><span class="MainLevel-module_label__uWKJ7">NumberInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Pagination" id="side-nav-components-pagination" href="/hds-demo/hds-1817-stepbystep-docs/components/pagination"><span class="MainLevel-module_label__uWKJ7">Pagination</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_active__3IkdI MainLevel-module_open__2yWFj"><a aria-current="page" aria-label="PasswordInput" id="side-nav-components-password-input" href="/hds-demo/hds-1817-stepbystep-docs/components/password-input"><span class="MainLevel-module_label__uWKJ7">PasswordInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="PhoneInput" id="side-nav-components-phone-input" href="/hds-demo/hds-1817-stepbystep-docs/components/phone-input"><span class="MainLevel-module_label__uWKJ7">PhoneInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="RadioButton" id="side-nav-components-radio-button" href="/hds-demo/hds-1817-stepbystep-docs/components/radio-button"><span class="MainLevel-module_label__uWKJ7">RadioButton</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="SearchInput" id="side-nav-components-search-input" href="/hds-demo/hds-1817-stepbystep-docs/components/search-input"><span class="MainLevel-module_label__uWKJ7">SearchInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="SelectionGroup" id="side-nav-components-selection-group" href="/hds-demo/hds-1817-stepbystep-docs/components/selection-group"><span class="MainLevel-module_label__uWKJ7">SelectionGroup</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="SideNavigation" id="side-nav-components-side-navigation" href="/hds-demo/hds-1817-stepbystep-docs/components/side-navigation"><span class="MainLevel-module_label__uWKJ7">SideNavigation</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="StatusLabel" id="side-nav-components-status-label" href="/hds-demo/hds-1817-stepbystep-docs/components/status-label"><span class="MainLevel-module_label__uWKJ7">StatusLabel</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="StepByStep" id="side-nav-components-step-by-step" href="/hds-demo/hds-1817-stepbystep-docs/components/step-by-step"><span class="MainLevel-module_label__uWKJ7">StepByStep</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Stepper" id="side-nav-components-stepper" href="/hds-demo/hds-1817-stepbystep-docs/components/stepper"><span class="MainLevel-module_label__uWKJ7">Stepper</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Table" id="side-nav-components-table" href="/hds-demo/hds-1817-stepbystep-docs/components/table"><span class="MainLevel-module_label__uWKJ7">Table</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Tabs" id="side-nav-components-tabs" href="/hds-demo/hds-1817-stepbystep-docs/components/tabs"><span class="MainLevel-module_label__uWKJ7">Tabs</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Tag" id="side-nav-components-tag" href="/hds-demo/hds-1817-stepbystep-docs/components/tag"><span class="MainLevel-module_label__uWKJ7">Tag</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="TextArea" id="side-nav-components-text-area" href="/hds-demo/hds-1817-stepbystep-docs/components/text-area"><span class="MainLevel-module_label__uWKJ7">TextArea</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="TextInput" id="side-nav-components-text-input" href="/hds-demo/hds-1817-stepbystep-docs/components/text-input"><span class="MainLevel-module_label__uWKJ7">TextInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="TimeInput" id="side-nav-components-time-input" href="/hds-demo/hds-1817-stepbystep-docs/components/time-input"><span class="MainLevel-module_label__uWKJ7">TimeInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="ToggleButton" id="side-nav-components-toggle-button" href="/hds-demo/hds-1817-stepbystep-docs/components/toggle-button"><span class="MainLevel-module_label__uWKJ7">ToggleButton</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Tooltip" id="side-nav-components-tooltip" href="/hds-demo/hds-1817-stepbystep-docs/components/tooltip"><span class="MainLevel-module_label__uWKJ7">Tooltip</span></a></li></ul></nav></aside><main id="content" class="main-content"><h1 id="passwordinput" style="position:relative" class="page-heading-1 heading-xl-mobile">PasswordInput<a href="#passwordinput" aria-label="passwordinput permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h1>
 <div class="status-label-description"><span class="StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H">Stable</span><span class="StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST" style="margin-left:var(--spacing-xs)">Accessible</span><div class="Tooltip-module_root__1Yo9t status-label-tooltip"><button type="button" class="Tooltip-module_button__2x9m0" title="Tooltip" aria-label="Tooltip" aria-expanded="false"><span aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="question-circle" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM13 16V18H11V16H13ZM12.0437 5.75C14.0343 5.75 15.7173 7.29464 15.7173 9.42361C15.7173 10.7806 15.2461 11.489 14.161 12.306L13.9187 12.4844C13.1753 13.0295 12.9556 13.3359 12.9386 14.142L12.9375 14.25H10.9375C10.9375 12.6746 11.4591 11.8378 12.6143 10.9622L12.8618 10.7796C13.5685 10.2628 13.7173 10.0539 13.7173 9.42361C13.7173 8.43934 12.9662 7.75 12.0437 7.75C11.1907 7.75 10.4785 8.34077 10.3816 9.20835L10.3734 9.30587L8.37663 9.19182C8.49191 7.17347 10.1344 5.75 12.0437 5.75Z" fill="currentColor"></path></svg></span></button></div></div>
 <p style="font-size:var(--fontsize-body-xl);color:var(--color-black-90);max-width:600px">A password field is a foundational input field component that the user can interact with and specifically input password data.</p>
-<div class="Tabs-module_tabs__2Ww5F"><div class="Tabs-module_tablistBar__elMv9 page-tabs-list"><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-left" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 12L15.5 17L14 18.5L7.5 12L14 5.5L15.5 7L10.5 12Z" fill="currentColor"></path></svg></button></div><div class="Tabs-module_tablist__1iuDO"><ul role="tablist" style="width:0px"><li role="tab" aria-selected="true" aria-controls="tab-0-panel" tabindex="0" id="tab-0-button" class="Tabs-module_tab__3oOoX Tabs-module_active__1Ic3B"><span>Usage</span></li><li role="tab" aria-selected="false" aria-controls="tab-1-panel" tabindex="-1" id="tab-1-button" class="Tabs-module_tab__3oOoX"><span>Code</span></li><li role="tab" aria-selected="false" aria-controls="tab-2-panel" tabindex="-1" id="tab-2-button" class="Tabs-module_tab__3oOoX"><span>Accessibility</span></li><li role="tab" aria-selected="false" aria-controls="tab-3-panel" tabindex="-1" id="tab-3-button" class="Tabs-module_tab__3oOoX"><span>Security</span></li></ul></div><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z" fill="currentColor"></path></svg></button></div></div><div id="tab-0-panel" role="tabpanel" aria-labelledby="tab-0-button"></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-395" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-395)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="Tabs-module_tabs__2Ww5F"><div class="Tabs-module_tablistBar__elMv9 page-tabs-list"><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-left" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 12L15.5 17L14 18.5L7.5 12L14 5.5L15.5 7L10.5 12Z" fill="currentColor"></path></svg></button></div><div class="Tabs-module_tablist__1iuDO"><ul role="tablist" style="width:0px"><li role="tab" aria-selected="true" aria-controls="tab-0-panel" tabindex="0" id="tab-0-button" class="Tabs-module_tab__3oOoX Tabs-module_active__1Ic3B"><span>Usage</span></li><li role="tab" aria-selected="false" aria-controls="tab-1-panel" tabindex="-1" id="tab-1-button" class="Tabs-module_tab__3oOoX"><span>Code</span></li><li role="tab" aria-selected="false" aria-controls="tab-2-panel" tabindex="-1" id="tab-2-button" class="Tabs-module_tab__3oOoX"><span>Accessibility</span></li><li role="tab" aria-selected="false" aria-controls="tab-3-panel" tabindex="-1" id="tab-3-button" class="Tabs-module_tab__3oOoX"><span>Security</span></li></ul></div><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z" fill="currentColor"></path></svg></button></div></div><div id="tab-0-panel" role="tabpanel" aria-labelledby="tab-0-button"></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-394" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-394)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/phone-input/code/index.html b/docs/hds-1817-stepbystep-docs/components/phone-input/code/index.html
index 86648b295e4..c92b1b6e9c8 100644
--- a/docs/hds-1817-stepbystep-docs/components/phone-input/code/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/phone-input/code/index.html
@@ -201,7 +201,7 @@ <h3 id="packages" style="position:relative" class="page-heading-3 heading-m">Pac
 <h3 id="properties" style="position:relative" class="page-heading-3 heading-m">Properties<a href="#properties" aria-label="properties permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h3>
 <p>Note! You can find the full list of properties in the <a aria-label="React Storybook. Opens in a new tab" class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/storybook/react/?path=/story/components-phoneinput--default" target="_blank" rel="noopener">React Storybook.</a></p>
 <p>Also, note that this component is an input. All features supported by the HDS TextInput are also supported by this component. See <a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/hds-demo/hds-1817-stepbystep-docs/components/text-input">TextInput documentation page</a> for more information.</p>
-<div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><caption class="hds-table__caption"><b>Table 1</b>: <!-- -->PhoneInput properties</caption><thead><tr class="hds-table__header-row dark"><th scope="col">Property</th><th scope="col">Description</th><th scope="col">Values</th><th scope="col">Default value</th></tr></thead><tbody class="hds-table__content"><tr><td><code>label</code></td><td>The label for the input.</td><td><code>string</code></td><td>-</td></tr></tbody></table></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-380" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-380)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><caption class="hds-table__caption"><b>Table 1</b>: <!-- -->PhoneInput properties</caption><thead><tr class="hds-table__header-row dark"><th scope="col">Property</th><th scope="col">Description</th><th scope="col">Values</th><th scope="col">Default value</th></tr></thead><tbody class="hds-table__content"><tr><td><code>label</code></td><td>The label for the input.</td><td><code>string</code></td><td>-</td></tr></tbody></table></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-379" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-379)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/phone-input/index.html b/docs/hds-1817-stepbystep-docs/components/phone-input/index.html
index ec4e6abeae3..5f5f58d207c 100644
--- a/docs/hds-1817-stepbystep-docs/components/phone-input/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/phone-input/index.html
@@ -87,7 +87,7 @@ <h4 id="with-a-country-code-selection" style="position:relative" class="page-hea
 <p>If a country code is a required input (or otherwise critical), it should be asked in a separate input using <a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/hds-demo/hds-1817-stepbystep-docs/components/dropdown#combobox-single-selection">HDS Combobox.</a></p>
 <p>These two input are linked together using a fieldset title and <code>aria-desribedby</code> attribute. This way is is clear for screen readers which phone number these two inputs relate to.</p>
 <!-- -->
-<div class="playground-block-preview playground-block-preview-light"><p id="work-phone" style="font-size:18px;font-weight:bold">Work phone</p><div style="display:grid;grid-template-columns:200px 300px;column-gap:16px"><div class="Combobox-module_root__Hs8Hg"><label id="combobox1-label" for="combobox1-input" class="FieldLabel-module_label__1zrXK ">Country code<span class="RequiredIndicator-module_indicator__Pt7GX text-input_hds-text-input__required__2K-Bs">*</span></label><div class="Combobox-module_wrapper__3kVTg"><input id="combobox1-input" aria-autocomplete="list" aria-controls="combobox1-menu" aria-labelledby="combobox1-label combobox1-helper combobox1-input" autoComplete="off" type="text" required="" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-owns="combobox1-menu" aria-describedby="work-phone" class="Combobox-module_input__Dcmdn" autoCorrect="off" value="Finland (+358)"/><button type="button" id="combobox1-toggle-button" tabindex="-1" class="Combobox-module_button__1W9PN" aria-label="Country code: Choose country code" aria-expanded="false"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Combobox-module_angleIcon__10DvA" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-down" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 13.5L17 8.5L18.5 10L12 16.5L5.5 10L7 8.5L12 13.5Z" fill="currentColor"></path></svg></button><ul id="combobox1-menu" role="listbox" aria-labelledby="combobox1-label" aria-required="true" style="max-height:260px" class="Combobox-module_menu__3jA0e"></ul></div><div id="combobox1-helper" class="Combobox-module_helperText__1qPYf" aria-hidden="true">Assistive text</div></div><div class="TextInput-module_root__2CMNr text-input_hds-text-input__2LODq"><label for="input2" class="FieldLabel-module_label__1zrXK ">Phone number<span class="RequiredIndicator-module_indicator__Pt7GX text-input_hds-text-input__required__2K-Bs">*</span></label><div class="TextInput-module_inputWrapper__3Rvel text-input_hds-text-input__input-wrapper__1OqYG"><input class="TextInput-module_input__1BlHi text-input_hds-text-input__input__GJm5C" id="input2" required="" type="tel" aria-describedby="work-phone" autoComplete="tel" value="0451234567"/></div></div></div></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-378" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-378)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="playground-block-preview playground-block-preview-light"><p id="work-phone" style="font-size:18px;font-weight:bold">Work phone</p><div style="display:grid;grid-template-columns:200px 300px;column-gap:16px"><div class="Combobox-module_root__Hs8Hg"><label id="combobox1-label" for="combobox1-input" class="FieldLabel-module_label__1zrXK ">Country code<span class="RequiredIndicator-module_indicator__Pt7GX text-input_hds-text-input__required__2K-Bs">*</span></label><div class="Combobox-module_wrapper__3kVTg"><input id="combobox1-input" aria-autocomplete="list" aria-controls="combobox1-menu" aria-labelledby="combobox1-label combobox1-helper combobox1-input" autoComplete="off" type="text" required="" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-owns="combobox1-menu" aria-describedby="work-phone" class="Combobox-module_input__Dcmdn" autoCorrect="off" value="Finland (+358)"/><button type="button" id="combobox1-toggle-button" tabindex="-1" class="Combobox-module_button__1W9PN" aria-label="Country code: Choose country code" aria-expanded="false"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Combobox-module_angleIcon__10DvA" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-down" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 13.5L17 8.5L18.5 10L12 16.5L5.5 10L7 8.5L12 13.5Z" fill="currentColor"></path></svg></button><ul id="combobox1-menu" role="listbox" aria-labelledby="combobox1-label" aria-required="true" style="max-height:260px" class="Combobox-module_menu__3jA0e"></ul></div><div id="combobox1-helper" class="Combobox-module_helperText__1qPYf" aria-hidden="true">Assistive text</div></div><div class="TextInput-module_root__2CMNr text-input_hds-text-input__2LODq"><label for="input2" class="FieldLabel-module_label__1zrXK ">Phone number<span class="RequiredIndicator-module_indicator__Pt7GX text-input_hds-text-input__required__2K-Bs">*</span></label><div class="TextInput-module_inputWrapper__3Rvel text-input_hds-text-input__input-wrapper__1OqYG"><input class="TextInput-module_input__1BlHi text-input_hds-text-input__input__GJm5C" id="input2" required="" type="tel" aria-describedby="work-phone" autoComplete="tel" value="0451234567"/></div></div></div></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-380" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-380)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/phone-input/tabs/index.html b/docs/hds-1817-stepbystep-docs/components/phone-input/tabs/index.html
index a9d7af3e393..3f1c614b237 100644
--- a/docs/hds-1817-stepbystep-docs/components/phone-input/tabs/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/phone-input/tabs/index.html
@@ -56,7 +56,7 @@
   </script><link rel="manifest" href="/hds-demo/hds-1817-stepbystep-docs/manifest.webmanifest" crossorigin="anonymous"/><link rel="apple-touch-icon" sizes="any" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/favicon-32x32.ico"/><link rel="apple-touch-icon" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/apple-touch-icon.png"/><link rel="apple-touch-icon" sizes="192x192" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/favicon-192x192.png"/><link rel="apple-touch-icon" sizes="512x512" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/favicon-512x512.png"/><link rel="preconnect" href="https://webanalytics.digiaiiris.com/js"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="page text-body"><header class="hds-header Header-module_header__291GF pageHeader" id="page-header"><div class="Header-module_headerBackgroundWrapper__KsFy2"><a href="#content" class="SkipLink-module_skipLink__1knzF"><span class="SkipLink-module_skipLinkLabel__21n5B">Skip to content</span></a><div class="HeaderActionBar-module_headerActionBarContainer__5tfj-"><div class="HeaderActionBar-module_headerActionBar__lPeGE"><a href="https://hds.hel.fi" aria-label="City of Helsinki Logo" class="HeaderActionBar-module_titleAndLogoContainer__2LEAb HeaderActionBar-module_logo__2r2T0"><span class="HeaderActionBarLogo-module_logoWrapper__8NgfS"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></span></a><a href="https://hds.hel.fi" aria-label="Helsinki: Helsinki Design System" class="HeaderActionBar-module_titleAndLogoContainer__2LEAb HeaderActionBar-module_title__opzt9 HeaderActionBar-module_normal__3B4qi"><span class="HeaderActionBar-module_title__opzt9"><div class="page-header-title"><div>Helsinki Design System</div><div class="page-header-title-badge"><img style="filter:invert(1)" alt="HDS version number: 2.15.0" src="https://img.shields.io/github/v/release/City-of-Helsinki/helsinki-design-system?label=&amp;style=for-the-badge&amp;color=1a1a1a"/></div></div></span></a><div class="HeaderActionBar-module_headerActions__3lNnM"></div></div></div><div class="HeaderNavigationMenu-module_headerNavigationMenuContainer__2nK9z"><nav class="HeaderNavigationMenu-module_headerNavigationMenu__3G6-N"><ul class="HeaderNavigationMenu-module_headerNavigationMenuList__3HIzx"></ul></nav></div></div></header><div class="page-content"><aside class="side-content"><nav class="SideNavigation-module_sideNavigation__3X-9P" id="side-navigation" aria-label="Components"><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS Button-module_fullWidth__31eVK button_hds-button--fullwidth__1_hG9 SideNavigation-module_toggleButton__10tXH" aria-controls="side-navigation-menu" aria-expanded="false" aria-haspopup="true"><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Navigate to page</span><div class="Button-module_icon__O-h7R button_hds-icon__17j8Z" aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-down" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 13.5L17 8.5L18.5 10L12 16.5L5.5 10L7 8.5L12 13.5Z" fill="currentColor"></path></svg></div></button><ul class="SideNavigation-module_mainLevelList__SLZKQ" aria-label="Navigate to page" id="side-navigation-menu"><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Overview" id="side-nav-components" href="/hds-demo/hds-1817-stepbystep-docs/components"><span class="MainLevel-module_label__uWKJ7">Overview</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Accordion" id="side-nav-components-accordion" href="/hds-demo/hds-1817-stepbystep-docs/components/accordion"><span class="MainLevel-module_label__uWKJ7">Accordion</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Breadcrumb" id="side-nav-components-breadcrumb" href="/hds-demo/hds-1817-stepbystep-docs/components/breadcrumb"><span class="MainLevel-module_label__uWKJ7">Breadcrumb</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Button" id="side-nav-components-buttons" href="/hds-demo/hds-1817-stepbystep-docs/components/buttons"><span class="MainLevel-module_label__uWKJ7">Button</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Card" id="side-nav-components-card" href="/hds-demo/hds-1817-stepbystep-docs/components/card"><span class="MainLevel-module_label__uWKJ7">Card</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Checkbox" id="side-nav-components-checkbox" href="/hds-demo/hds-1817-stepbystep-docs/components/checkbox"><span class="MainLevel-module_label__uWKJ7">Checkbox</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="CookieConsent" id="side-nav-components-cookie-consent" href="/hds-demo/hds-1817-stepbystep-docs/components/cookie-consent"><span class="MainLevel-module_label__uWKJ7">CookieConsent</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="DateInput" id="side-nav-components-date-input" href="/hds-demo/hds-1817-stepbystep-docs/components/date-input"><span class="MainLevel-module_label__uWKJ7">DateInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Dialog" id="side-nav-components-dialog" href="/hds-demo/hds-1817-stepbystep-docs/components/dialog"><span class="MainLevel-module_label__uWKJ7">Dialog</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Dropdown" id="side-nav-components-dropdown" href="/hds-demo/hds-1817-stepbystep-docs/components/dropdown"><span class="MainLevel-module_label__uWKJ7">Dropdown</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Fieldset" id="side-nav-components-fieldset" href="/hds-demo/hds-1817-stepbystep-docs/components/fieldset"><span class="MainLevel-module_label__uWKJ7">Fieldset</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="FileInput" id="side-nav-components-file-input" href="/hds-demo/hds-1817-stepbystep-docs/components/file-input"><span class="MainLevel-module_label__uWKJ7">FileInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Footer" id="side-nav-components-footer" href="/hds-demo/hds-1817-stepbystep-docs/components/footer"><span class="MainLevel-module_label__uWKJ7">Footer</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Header" id="side-nav-components-header" href="/hds-demo/hds-1817-stepbystep-docs/components/header"><span class="MainLevel-module_label__uWKJ7">Header</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Hero" id="side-nav-components-hero" href="/hds-demo/hds-1817-stepbystep-docs/components/hero"><span class="MainLevel-module_label__uWKJ7">Hero</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Highlight" id="side-nav-components-highlight" href="/hds-demo/hds-1817-stepbystep-docs/components/highlight"><span class="MainLevel-module_label__uWKJ7">Highlight</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Icon" id="side-nav-components-icon" href="/hds-demo/hds-1817-stepbystep-docs/components/icon"><span class="MainLevel-module_label__uWKJ7">Icon</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Koros" id="side-nav-components-koros" href="/hds-demo/hds-1817-stepbystep-docs/components/koros"><span class="MainLevel-module_label__uWKJ7">Koros</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Link" id="side-nav-components-link" href="/hds-demo/hds-1817-stepbystep-docs/components/link"><span class="MainLevel-module_label__uWKJ7">Link</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Linkbox" id="side-nav-components-linkbox" href="/hds-demo/hds-1817-stepbystep-docs/components/linkbox"><span class="MainLevel-module_label__uWKJ7">Linkbox</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="LoadingSpinner" id="side-nav-components-loading-spinner" href="/hds-demo/hds-1817-stepbystep-docs/components/loading-spinner"><span class="MainLevel-module_label__uWKJ7">LoadingSpinner</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Logo" id="side-nav-components-logo" href="/hds-demo/hds-1817-stepbystep-docs/components/logo"><span class="MainLevel-module_label__uWKJ7">Logo</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Notification" id="side-nav-components-notification" href="/hds-demo/hds-1817-stepbystep-docs/components/notification"><span class="MainLevel-module_label__uWKJ7">Notification</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="NumberInput" id="side-nav-components-number-input" href="/hds-demo/hds-1817-stepbystep-docs/components/number-input"><span class="MainLevel-module_label__uWKJ7">NumberInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Pagination" id="side-nav-components-pagination" href="/hds-demo/hds-1817-stepbystep-docs/components/pagination"><span class="MainLevel-module_label__uWKJ7">Pagination</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="PasswordInput" id="side-nav-components-password-input" href="/hds-demo/hds-1817-stepbystep-docs/components/password-input"><span class="MainLevel-module_label__uWKJ7">PasswordInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_active__3IkdI MainLevel-module_open__2yWFj"><a aria-current="page" aria-label="PhoneInput" id="side-nav-components-phone-input" href="/hds-demo/hds-1817-stepbystep-docs/components/phone-input"><span class="MainLevel-module_label__uWKJ7">PhoneInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="RadioButton" id="side-nav-components-radio-button" href="/hds-demo/hds-1817-stepbystep-docs/components/radio-button"><span class="MainLevel-module_label__uWKJ7">RadioButton</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="SearchInput" id="side-nav-components-search-input" href="/hds-demo/hds-1817-stepbystep-docs/components/search-input"><span class="MainLevel-module_label__uWKJ7">SearchInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="SelectionGroup" id="side-nav-components-selection-group" href="/hds-demo/hds-1817-stepbystep-docs/components/selection-group"><span class="MainLevel-module_label__uWKJ7">SelectionGroup</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="SideNavigation" id="side-nav-components-side-navigation" href="/hds-demo/hds-1817-stepbystep-docs/components/side-navigation"><span class="MainLevel-module_label__uWKJ7">SideNavigation</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="StatusLabel" id="side-nav-components-status-label" href="/hds-demo/hds-1817-stepbystep-docs/components/status-label"><span class="MainLevel-module_label__uWKJ7">StatusLabel</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="StepByStep" id="side-nav-components-step-by-step" href="/hds-demo/hds-1817-stepbystep-docs/components/step-by-step"><span class="MainLevel-module_label__uWKJ7">StepByStep</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Stepper" id="side-nav-components-stepper" href="/hds-demo/hds-1817-stepbystep-docs/components/stepper"><span class="MainLevel-module_label__uWKJ7">Stepper</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Table" id="side-nav-components-table" href="/hds-demo/hds-1817-stepbystep-docs/components/table"><span class="MainLevel-module_label__uWKJ7">Table</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Tabs" id="side-nav-components-tabs" href="/hds-demo/hds-1817-stepbystep-docs/components/tabs"><span class="MainLevel-module_label__uWKJ7">Tabs</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Tag" id="side-nav-components-tag" href="/hds-demo/hds-1817-stepbystep-docs/components/tag"><span class="MainLevel-module_label__uWKJ7">Tag</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="TextArea" id="side-nav-components-text-area" href="/hds-demo/hds-1817-stepbystep-docs/components/text-area"><span class="MainLevel-module_label__uWKJ7">TextArea</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="TextInput" id="side-nav-components-text-input" href="/hds-demo/hds-1817-stepbystep-docs/components/text-input"><span class="MainLevel-module_label__uWKJ7">TextInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="TimeInput" id="side-nav-components-time-input" href="/hds-demo/hds-1817-stepbystep-docs/components/time-input"><span class="MainLevel-module_label__uWKJ7">TimeInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="ToggleButton" id="side-nav-components-toggle-button" href="/hds-demo/hds-1817-stepbystep-docs/components/toggle-button"><span class="MainLevel-module_label__uWKJ7">ToggleButton</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Tooltip" id="side-nav-components-tooltip" href="/hds-demo/hds-1817-stepbystep-docs/components/tooltip"><span class="MainLevel-module_label__uWKJ7">Tooltip</span></a></li></ul></nav></aside><main id="content" class="main-content"><h1 id="phoneinput" style="position:relative" class="page-heading-1 heading-xl-mobile">PhoneInput<a href="#phoneinput" aria-label="phoneinput permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h1>
 <div class="status-label-description"><span class="StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H">Stable</span><span class="StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST" style="margin-left:var(--spacing-xs)">Accessible</span><div class="Tooltip-module_root__1Yo9t status-label-tooltip"><button type="button" class="Tooltip-module_button__2x9m0" title="Tooltip" aria-label="Tooltip" aria-expanded="false"><span aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="question-circle" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM13 16V18H11V16H13ZM12.0437 5.75C14.0343 5.75 15.7173 7.29464 15.7173 9.42361C15.7173 10.7806 15.2461 11.489 14.161 12.306L13.9187 12.4844C13.1753 13.0295 12.9556 13.3359 12.9386 14.142L12.9375 14.25H10.9375C10.9375 12.6746 11.4591 11.8378 12.6143 10.9622L12.8618 10.7796C13.5685 10.2628 13.7173 10.0539 13.7173 9.42361C13.7173 8.43934 12.9662 7.75 12.0437 7.75C11.1907 7.75 10.4785 8.34077 10.3816 9.20835L10.3734 9.30587L8.37663 9.19182C8.49191 7.17347 10.1344 5.75 12.0437 5.75Z" fill="currentColor"></path></svg></span></button></div></div>
 <p style="font-size:var(--fontsize-body-xl);color:var(--color-black-90);max-width:600px">A phone input allows the user to enter phone number values. </p>
-<div class="Tabs-module_tabs__2Ww5F"><div class="Tabs-module_tablistBar__elMv9 page-tabs-list"><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-left" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 12L15.5 17L14 18.5L7.5 12L14 5.5L15.5 7L10.5 12Z" fill="currentColor"></path></svg></button></div><div class="Tabs-module_tablist__1iuDO"><ul role="tablist" style="width:0px"><li role="tab" aria-selected="true" aria-controls="tab-0-panel" tabindex="0" id="tab-0-button" class="Tabs-module_tab__3oOoX Tabs-module_active__1Ic3B"><span>Usage</span></li><li role="tab" aria-selected="false" aria-controls="tab-1-panel" tabindex="-1" id="tab-1-button" class="Tabs-module_tab__3oOoX"><span>Code</span></li><li role="tab" aria-selected="false" aria-controls="tab-2-panel" tabindex="-1" id="tab-2-button" class="Tabs-module_tab__3oOoX"><span>Accessibility</span></li></ul></div><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z" fill="currentColor"></path></svg></button></div></div><div id="tab-0-panel" role="tabpanel" aria-labelledby="tab-0-button"></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-377" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-377)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="Tabs-module_tabs__2Ww5F"><div class="Tabs-module_tablistBar__elMv9 page-tabs-list"><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-left" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 12L15.5 17L14 18.5L7.5 12L14 5.5L15.5 7L10.5 12Z" fill="currentColor"></path></svg></button></div><div class="Tabs-module_tablist__1iuDO"><ul role="tablist" style="width:0px"><li role="tab" aria-selected="true" aria-controls="tab-0-panel" tabindex="0" id="tab-0-button" class="Tabs-module_tab__3oOoX Tabs-module_active__1Ic3B"><span>Usage</span></li><li role="tab" aria-selected="false" aria-controls="tab-1-panel" tabindex="-1" id="tab-1-button" class="Tabs-module_tab__3oOoX"><span>Code</span></li><li role="tab" aria-selected="false" aria-controls="tab-2-panel" tabindex="-1" id="tab-2-button" class="Tabs-module_tab__3oOoX"><span>Accessibility</span></li></ul></div><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z" fill="currentColor"></path></svg></button></div></div><div id="tab-0-panel" role="tabpanel" aria-labelledby="tab-0-button"></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-376" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-376)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/search-input/code/index.html b/docs/hds-1817-stepbystep-docs/components/search-input/code/index.html
index 1be6574d94e..8017ef43dbc 100644
--- a/docs/hds-1817-stepbystep-docs/components/search-input/code/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/search-input/code/index.html
@@ -279,7 +279,7 @@ <h3 id="packages" style="position:relative" class="page-heading-3 heading-m">Pac
 <div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><thead><tr class="hds-table__header-row dark"><th scope="col">Package</th><th scope="col">Included</th><th scope="col">Storybook link</th><th scope="col">Source link</th></tr></thead><tbody class="hds-table__content"><tr><td><strong>HDS React</strong></td><td><div style="display:flex;gap:var(--spacing-3-xs)"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="check-circle-fill" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM16.5 8L18 9.5L10.5 17L6 12.5L7.5 11L10.5 14L16.5 8Z" fill="currentColor"></path></svg> Yes </div></td><td><a aria-label="View in Storybook. Opens in a new tab" class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/storybook/react/?path=/story/components-searchinput--default" target="_blank" rel="noopener">View in Storybook</a></td><td><a aria-label="View source. Opens in a new tab Opens a different website." class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/react/src/components/searchInput" target="_blank" rel="noopener">View source<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Link-module_icon__3ReCc link_icon__i_HqN Link-module_verticalAlignMediumIcon__12PVa link_vertical-align-medium-icon__3IWi1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="link-external" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z" fill="currentColor"></path></svg></a></td></tr><tr><td><strong>HDS Core</strong></td><td><div style="display:flex;gap:var(--spacing-3-xs)"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="check-circle-fill" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM16.5 8L18 9.5L10.5 17L6 12.5L7.5 11L10.5 14L16.5 8Z" fill="currentColor"></path></svg> Yes </div></td><td><a aria-label="View in Storybook. Opens in a new tab" class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/storybook/core/?path=/story/components-search-input--default" target="_blank" rel="noopener">View in Storybook</a></td><td><a aria-label="View source. Opens in a new tab Opens a different website." class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/core/src/components/search-input" target="_blank" rel="noopener">View source<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Link-module_icon__3ReCc link_icon__i_HqN Link-module_verticalAlignMediumIcon__12PVa link_vertical-align-medium-icon__3IWi1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="link-external" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z" fill="currentColor"></path></svg></a></td></tr></tbody></table></div>
 <h3 id="properties" style="position:relative" class="page-heading-3 heading-m">Properties<a href="#properties" aria-label="properties permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h3>
 <p>Note! You can find the full list of properties in the <a aria-label="React Storybook. Opens in a new tab" class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/storybook/react/?path=/docs/components-searchinput--default" target="_blank" rel="noopener">React Storybook.</a></p>
-<div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><caption class="hds-table__caption"><b>Table 1</b>: <!-- -->SearchInput properties</caption><thead><tr class="hds-table__header-row dark"><th scope="col">Property</th><th scope="col">Description</th><th scope="col">Values</th><th scope="col">Default value</th></tr></thead><tbody class="hds-table__content"><tr><td><code>clearButtonAriaLabel</code></td><td>The aria-label for the clear button.</td><td><code>string</code></td><td>&quot;Clear&quot;</td></tr><tr><td><code>getSuggestions</code></td><td>Callback function fired every time the input content changes. Receives the input value as a parameter. Must return a promise which resolves to an array of SuggestionItems.</td><td><code>function</code></td><td>-</td></tr><tr><td><code>highlightSuggestions</code></td><td>If set to true, the matching part of a suggestion will be highlighted.</td><td><code>boolean</code></td><td>false</td></tr><tr><td><code>label</code></td><td>The label for the search field.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>loadingSpinnerText</code></td><td>Text to show for screen readers when loading spinner is visible.</td><td><code>string</code></td><td>&quot;Loading suggestions&quot;</td></tr><tr><td><code>loadingSpinnerFinishedText</code></td><td>Text to show for screen readers when loading spinner is no longer visible.</td><td><code>string</code></td><td>&quot;Finished loading suggestions&quot;</td></tr><tr><td><code>searchButtonAriaLabel</code></td><td>The aria-label for the search button.</td><td><code>string</code></td><td>&quot;Search&quot;</td></tr><tr><td><code>hideSearchButton</code></td><td>If set to true, the search button will be hidden.</td><td><code>boolean</code></td><td>false</td></tr><tr><td><code>suggestionLabelField</code></td><td>Field of the SuggestionItem that represents the item label. E.g. an <code>suggestionLabelField</code> value of <code>&#x27;foo&#x27;</code> and a suggestion item <code>{ foo: &#x27;Label&#x27;, bar: &#x27;value&#x27; }</code>, would display <code>&#x27;Label&#x27;</code> in the menu for that specific suggestion.</td><td><code>string</code> <code>number</code> <code>symbol</code></td><td>false</td></tr><tr><td><code>visibleSuggestions</code></td><td>The number of suggestions that are visible in the menu before it becomes scrollable.</td><td><code>number</code></td><td>8</td></tr></tbody></table></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-363" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-363)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><caption class="hds-table__caption"><b>Table 1</b>: <!-- -->SearchInput properties</caption><thead><tr class="hds-table__header-row dark"><th scope="col">Property</th><th scope="col">Description</th><th scope="col">Values</th><th scope="col">Default value</th></tr></thead><tbody class="hds-table__content"><tr><td><code>clearButtonAriaLabel</code></td><td>The aria-label for the clear button.</td><td><code>string</code></td><td>&quot;Clear&quot;</td></tr><tr><td><code>getSuggestions</code></td><td>Callback function fired every time the input content changes. Receives the input value as a parameter. Must return a promise which resolves to an array of SuggestionItems.</td><td><code>function</code></td><td>-</td></tr><tr><td><code>highlightSuggestions</code></td><td>If set to true, the matching part of a suggestion will be highlighted.</td><td><code>boolean</code></td><td>false</td></tr><tr><td><code>label</code></td><td>The label for the search field.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>loadingSpinnerText</code></td><td>Text to show for screen readers when loading spinner is visible.</td><td><code>string</code></td><td>&quot;Loading suggestions&quot;</td></tr><tr><td><code>loadingSpinnerFinishedText</code></td><td>Text to show for screen readers when loading spinner is no longer visible.</td><td><code>string</code></td><td>&quot;Finished loading suggestions&quot;</td></tr><tr><td><code>searchButtonAriaLabel</code></td><td>The aria-label for the search button.</td><td><code>string</code></td><td>&quot;Search&quot;</td></tr><tr><td><code>hideSearchButton</code></td><td>If set to true, the search button will be hidden.</td><td><code>boolean</code></td><td>false</td></tr><tr><td><code>suggestionLabelField</code></td><td>Field of the SuggestionItem that represents the item label. E.g. an <code>suggestionLabelField</code> value of <code>&#x27;foo&#x27;</code> and a suggestion item <code>{ foo: &#x27;Label&#x27;, bar: &#x27;value&#x27; }</code>, would display <code>&#x27;Label&#x27;</code> in the menu for that specific suggestion.</td><td><code>string</code> <code>number</code> <code>symbol</code></td><td>false</td></tr><tr><td><code>visibleSuggestions</code></td><td>The number of suggestions that are visible in the menu before it becomes scrollable.</td><td><code>number</code></td><td>8</td></tr></tbody></table></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-362" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-362)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/search-input/index.html b/docs/hds-1817-stepbystep-docs/components/search-input/index.html
index 2e925ed123d..0984dd2c1ab 100644
--- a/docs/hds-1817-stepbystep-docs/components/search-input/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/search-input/index.html
@@ -89,7 +89,7 @@ <h4 id="with-suggestions-and-highlighting" style="position:relative" class="page
 <p>Suggestion highlighting is activated with <code>highlightSuggestions</code> property and it becomes visible after at least three characters are typed into the input.</p>
 <p>Note! This feature is experimental and we are looking to improve it after project feedback.</p>
 <!-- -->
-<div class="playground-block-preview playground-block-preview-light"><div style="font-size:var(--fontsize-body-m);margin-bottom:var(--spacing-m)">To see highlighting in action, search for &quot;education&quot;.</div><div class="SearchInput-module_root__sMwrY" style="max-width:320px"><label id="downshift-19-label" for="downshift-18-input" class="FieldLabel-module_label__1zrXK ">Search education services</label><div class="SearchInput-module_wrapper__114JK"><input id="downshift-18-input" aria-autocomplete="list" aria-controls="downshift-19-menu" aria-labelledby="downshift-19-label" autoComplete="off" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-owns="downshift-19-menu" class="SearchInput-module_input__Addns" enterKeyHint="search" value=""/><div class="SearchInput-module_buttons__2O_2t search-input_hds-search-input__buttons__3PawT"><button type="button" aria-label="Search" class="SearchInput-module_button__z7NIp search-input_hds-search-input__button__1-cj-"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik SearchInput-module_searchIcon__l1_S4" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="search" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M15 1C19.4183 1 23 4.58172 23 9C23 13.4183 19.4183 17 15 17C13.2001 17 11.539 16.4056 10.2023 15.4023L3.80101 21.8021L2.21002 20.2111L8.60822 13.8117C7.59861 12.4726 7.00002 10.8062 7.00002 9C7.00002 4.58172 10.5817 1 15 1ZM15 3C11.6863 3 9.00002 5.68629 9.00002 9C9.00002 12.3137 11.6863 15 15 15C18.3137 15 21 12.3137 21 9C21 5.68629 18.3137 3 15 3Z" fill="currentColor"></path></svg></button></div><ul id="downshift-19-menu" role="listbox" aria-labelledby="downshift-19-label" style="max-height:416px" class="SearchInput-module_menu__2P8CO"></ul></div><div class="SearchInput-module_helperText__2AWSL">Assistive text</div></div></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-360" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-360)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="playground-block-preview playground-block-preview-light"><div style="font-size:var(--fontsize-body-m);margin-bottom:var(--spacing-m)">To see highlighting in action, search for &quot;education&quot;.</div><div class="SearchInput-module_root__sMwrY" style="max-width:320px"><label id="downshift-19-label" for="downshift-18-input" class="FieldLabel-module_label__1zrXK ">Search education services</label><div class="SearchInput-module_wrapper__114JK"><input id="downshift-18-input" aria-autocomplete="list" aria-controls="downshift-19-menu" aria-labelledby="downshift-19-label" autoComplete="off" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-owns="downshift-19-menu" class="SearchInput-module_input__Addns" enterKeyHint="search" value=""/><div class="SearchInput-module_buttons__2O_2t search-input_hds-search-input__buttons__3PawT"><button type="button" aria-label="Search" class="SearchInput-module_button__z7NIp search-input_hds-search-input__button__1-cj-"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik SearchInput-module_searchIcon__l1_S4" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="search" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M15 1C19.4183 1 23 4.58172 23 9C23 13.4183 19.4183 17 15 17C13.2001 17 11.539 16.4056 10.2023 15.4023L3.80101 21.8021L2.21002 20.2111L8.60822 13.8117C7.59861 12.4726 7.00002 10.8062 7.00002 9C7.00002 4.58172 10.5817 1 15 1ZM15 3C11.6863 3 9.00002 5.68629 9.00002 9C9.00002 12.3137 11.6863 15 15 15C18.3137 15 21 12.3137 21 9C21 5.68629 18.3137 3 15 3Z" fill="currentColor"></path></svg></button></div><ul id="downshift-19-menu" role="listbox" aria-labelledby="downshift-19-label" style="max-height:416px" class="SearchInput-module_menu__2P8CO"></ul></div><div class="SearchInput-module_helperText__2AWSL">Assistive text</div></div></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-359" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-359)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/search-input/tabs/index.html b/docs/hds-1817-stepbystep-docs/components/search-input/tabs/index.html
index bb18cd332f6..b583225c467 100644
--- a/docs/hds-1817-stepbystep-docs/components/search-input/tabs/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/search-input/tabs/index.html
@@ -56,7 +56,7 @@
   </script><link rel="manifest" href="/hds-demo/hds-1817-stepbystep-docs/manifest.webmanifest" crossorigin="anonymous"/><link rel="apple-touch-icon" sizes="any" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/favicon-32x32.ico"/><link rel="apple-touch-icon" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/apple-touch-icon.png"/><link rel="apple-touch-icon" sizes="192x192" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/favicon-192x192.png"/><link rel="apple-touch-icon" sizes="512x512" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/favicon-512x512.png"/><link rel="preconnect" href="https://webanalytics.digiaiiris.com/js"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="page text-body"><header class="hds-header Header-module_header__291GF pageHeader" id="page-header"><div class="Header-module_headerBackgroundWrapper__KsFy2"><a href="#content" class="SkipLink-module_skipLink__1knzF"><span class="SkipLink-module_skipLinkLabel__21n5B">Skip to content</span></a><div class="HeaderActionBar-module_headerActionBarContainer__5tfj-"><div class="HeaderActionBar-module_headerActionBar__lPeGE"><a href="https://hds.hel.fi" aria-label="City of Helsinki Logo" class="HeaderActionBar-module_titleAndLogoContainer__2LEAb HeaderActionBar-module_logo__2r2T0"><span class="HeaderActionBarLogo-module_logoWrapper__8NgfS"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></span></a><a href="https://hds.hel.fi" aria-label="Helsinki: Helsinki Design System" class="HeaderActionBar-module_titleAndLogoContainer__2LEAb HeaderActionBar-module_title__opzt9 HeaderActionBar-module_normal__3B4qi"><span class="HeaderActionBar-module_title__opzt9"><div class="page-header-title"><div>Helsinki Design System</div><div class="page-header-title-badge"><img style="filter:invert(1)" alt="HDS version number: 2.15.0" src="https://img.shields.io/github/v/release/City-of-Helsinki/helsinki-design-system?label=&amp;style=for-the-badge&amp;color=1a1a1a"/></div></div></span></a><div class="HeaderActionBar-module_headerActions__3lNnM"></div></div></div><div class="HeaderNavigationMenu-module_headerNavigationMenuContainer__2nK9z"><nav class="HeaderNavigationMenu-module_headerNavigationMenu__3G6-N"><ul class="HeaderNavigationMenu-module_headerNavigationMenuList__3HIzx"></ul></nav></div></div></header><div class="page-content"><aside class="side-content"><nav class="SideNavigation-module_sideNavigation__3X-9P" id="side-navigation" aria-label="Components"><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS Button-module_fullWidth__31eVK button_hds-button--fullwidth__1_hG9 SideNavigation-module_toggleButton__10tXH" aria-controls="side-navigation-menu" aria-expanded="false" aria-haspopup="true"><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Navigate to page</span><div class="Button-module_icon__O-h7R button_hds-icon__17j8Z" aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-down" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 13.5L17 8.5L18.5 10L12 16.5L5.5 10L7 8.5L12 13.5Z" fill="currentColor"></path></svg></div></button><ul class="SideNavigation-module_mainLevelList__SLZKQ" aria-label="Navigate to page" id="side-navigation-menu"><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Overview" id="side-nav-components" href="/hds-demo/hds-1817-stepbystep-docs/components"><span class="MainLevel-module_label__uWKJ7">Overview</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Accordion" id="side-nav-components-accordion" href="/hds-demo/hds-1817-stepbystep-docs/components/accordion"><span class="MainLevel-module_label__uWKJ7">Accordion</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Breadcrumb" id="side-nav-components-breadcrumb" href="/hds-demo/hds-1817-stepbystep-docs/components/breadcrumb"><span class="MainLevel-module_label__uWKJ7">Breadcrumb</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Button" id="side-nav-components-buttons" href="/hds-demo/hds-1817-stepbystep-docs/components/buttons"><span class="MainLevel-module_label__uWKJ7">Button</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Card" id="side-nav-components-card" href="/hds-demo/hds-1817-stepbystep-docs/components/card"><span class="MainLevel-module_label__uWKJ7">Card</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Checkbox" id="side-nav-components-checkbox" href="/hds-demo/hds-1817-stepbystep-docs/components/checkbox"><span class="MainLevel-module_label__uWKJ7">Checkbox</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="CookieConsent" id="side-nav-components-cookie-consent" href="/hds-demo/hds-1817-stepbystep-docs/components/cookie-consent"><span class="MainLevel-module_label__uWKJ7">CookieConsent</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="DateInput" id="side-nav-components-date-input" href="/hds-demo/hds-1817-stepbystep-docs/components/date-input"><span class="MainLevel-module_label__uWKJ7">DateInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Dialog" id="side-nav-components-dialog" href="/hds-demo/hds-1817-stepbystep-docs/components/dialog"><span class="MainLevel-module_label__uWKJ7">Dialog</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Dropdown" id="side-nav-components-dropdown" href="/hds-demo/hds-1817-stepbystep-docs/components/dropdown"><span class="MainLevel-module_label__uWKJ7">Dropdown</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Fieldset" id="side-nav-components-fieldset" href="/hds-demo/hds-1817-stepbystep-docs/components/fieldset"><span class="MainLevel-module_label__uWKJ7">Fieldset</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="FileInput" id="side-nav-components-file-input" href="/hds-demo/hds-1817-stepbystep-docs/components/file-input"><span class="MainLevel-module_label__uWKJ7">FileInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Footer" id="side-nav-components-footer" href="/hds-demo/hds-1817-stepbystep-docs/components/footer"><span class="MainLevel-module_label__uWKJ7">Footer</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Header" id="side-nav-components-header" href="/hds-demo/hds-1817-stepbystep-docs/components/header"><span class="MainLevel-module_label__uWKJ7">Header</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Hero" id="side-nav-components-hero" href="/hds-demo/hds-1817-stepbystep-docs/components/hero"><span class="MainLevel-module_label__uWKJ7">Hero</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Highlight" id="side-nav-components-highlight" href="/hds-demo/hds-1817-stepbystep-docs/components/highlight"><span class="MainLevel-module_label__uWKJ7">Highlight</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Icon" id="side-nav-components-icon" href="/hds-demo/hds-1817-stepbystep-docs/components/icon"><span class="MainLevel-module_label__uWKJ7">Icon</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Koros" id="side-nav-components-koros" href="/hds-demo/hds-1817-stepbystep-docs/components/koros"><span class="MainLevel-module_label__uWKJ7">Koros</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Link" id="side-nav-components-link" href="/hds-demo/hds-1817-stepbystep-docs/components/link"><span class="MainLevel-module_label__uWKJ7">Link</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Linkbox" id="side-nav-components-linkbox" href="/hds-demo/hds-1817-stepbystep-docs/components/linkbox"><span class="MainLevel-module_label__uWKJ7">Linkbox</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="LoadingSpinner" id="side-nav-components-loading-spinner" href="/hds-demo/hds-1817-stepbystep-docs/components/loading-spinner"><span class="MainLevel-module_label__uWKJ7">LoadingSpinner</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Logo" id="side-nav-components-logo" href="/hds-demo/hds-1817-stepbystep-docs/components/logo"><span class="MainLevel-module_label__uWKJ7">Logo</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Notification" id="side-nav-components-notification" href="/hds-demo/hds-1817-stepbystep-docs/components/notification"><span class="MainLevel-module_label__uWKJ7">Notification</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="NumberInput" id="side-nav-components-number-input" href="/hds-demo/hds-1817-stepbystep-docs/components/number-input"><span class="MainLevel-module_label__uWKJ7">NumberInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Pagination" id="side-nav-components-pagination" href="/hds-demo/hds-1817-stepbystep-docs/components/pagination"><span class="MainLevel-module_label__uWKJ7">Pagination</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="PasswordInput" id="side-nav-components-password-input" href="/hds-demo/hds-1817-stepbystep-docs/components/password-input"><span class="MainLevel-module_label__uWKJ7">PasswordInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="PhoneInput" id="side-nav-components-phone-input" href="/hds-demo/hds-1817-stepbystep-docs/components/phone-input"><span class="MainLevel-module_label__uWKJ7">PhoneInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="RadioButton" id="side-nav-components-radio-button" href="/hds-demo/hds-1817-stepbystep-docs/components/radio-button"><span class="MainLevel-module_label__uWKJ7">RadioButton</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_active__3IkdI MainLevel-module_open__2yWFj"><a aria-current="page" aria-label="SearchInput" id="side-nav-components-search-input" href="/hds-demo/hds-1817-stepbystep-docs/components/search-input"><span class="MainLevel-module_label__uWKJ7">SearchInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="SelectionGroup" id="side-nav-components-selection-group" href="/hds-demo/hds-1817-stepbystep-docs/components/selection-group"><span class="MainLevel-module_label__uWKJ7">SelectionGroup</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="SideNavigation" id="side-nav-components-side-navigation" href="/hds-demo/hds-1817-stepbystep-docs/components/side-navigation"><span class="MainLevel-module_label__uWKJ7">SideNavigation</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="StatusLabel" id="side-nav-components-status-label" href="/hds-demo/hds-1817-stepbystep-docs/components/status-label"><span class="MainLevel-module_label__uWKJ7">StatusLabel</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="StepByStep" id="side-nav-components-step-by-step" href="/hds-demo/hds-1817-stepbystep-docs/components/step-by-step"><span class="MainLevel-module_label__uWKJ7">StepByStep</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Stepper" id="side-nav-components-stepper" href="/hds-demo/hds-1817-stepbystep-docs/components/stepper"><span class="MainLevel-module_label__uWKJ7">Stepper</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Table" id="side-nav-components-table" href="/hds-demo/hds-1817-stepbystep-docs/components/table"><span class="MainLevel-module_label__uWKJ7">Table</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Tabs" id="side-nav-components-tabs" href="/hds-demo/hds-1817-stepbystep-docs/components/tabs"><span class="MainLevel-module_label__uWKJ7">Tabs</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Tag" id="side-nav-components-tag" href="/hds-demo/hds-1817-stepbystep-docs/components/tag"><span class="MainLevel-module_label__uWKJ7">Tag</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="TextArea" id="side-nav-components-text-area" href="/hds-demo/hds-1817-stepbystep-docs/components/text-area"><span class="MainLevel-module_label__uWKJ7">TextArea</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="TextInput" id="side-nav-components-text-input" href="/hds-demo/hds-1817-stepbystep-docs/components/text-input"><span class="MainLevel-module_label__uWKJ7">TextInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="TimeInput" id="side-nav-components-time-input" href="/hds-demo/hds-1817-stepbystep-docs/components/time-input"><span class="MainLevel-module_label__uWKJ7">TimeInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="ToggleButton" id="side-nav-components-toggle-button" href="/hds-demo/hds-1817-stepbystep-docs/components/toggle-button"><span class="MainLevel-module_label__uWKJ7">ToggleButton</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Tooltip" id="side-nav-components-tooltip" href="/hds-demo/hds-1817-stepbystep-docs/components/tooltip"><span class="MainLevel-module_label__uWKJ7">Tooltip</span></a></li></ul></nav></aside><main id="content" class="main-content"><h1 id="searchinput" style="position:relative" class="page-heading-1 heading-xl-mobile">SearchInput<a href="#searchinput" aria-label="searchinput permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h1>
 <div class="status-label-description"><span class="StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H">Stable</span><span class="StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST" style="margin-left:var(--spacing-xs)">Accessible</span><div class="Tooltip-module_root__1Yo9t status-label-tooltip"><button type="button" class="Tooltip-module_button__2x9m0" title="Tooltip" aria-label="Tooltip" aria-expanded="false"><span aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="question-circle" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM13 16V18H11V16H13ZM12.0437 5.75C14.0343 5.75 15.7173 7.29464 15.7173 9.42361C15.7173 10.7806 15.2461 11.489 14.161 12.306L13.9187 12.4844C13.1753 13.0295 12.9556 13.3359 12.9386 14.142L12.9375 14.25H10.9375C10.9375 12.6746 11.4591 11.8378 12.6143 10.9622L12.8618 10.7796C13.5685 10.2628 13.7173 10.0539 13.7173 9.42361C13.7173 8.43934 12.9662 7.75 12.0437 7.75C11.1907 7.75 10.4785 8.34077 10.3816 9.20835L10.3734 9.30587L8.37663 9.19182C8.49191 7.17347 10.1344 5.75 12.0437 5.75Z" fill="currentColor"></path></svg></span></button></div></div>
 <p style="font-size:var(--fontsize-body-xl);color:var(--color-black-90);max-width:600px">A search input allows the user to find relevant content. The user can filter content using different words or phrases as keywords.</p>
-<div class="Tabs-module_tabs__2Ww5F"><div class="Tabs-module_tablistBar__elMv9 page-tabs-list"><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-left" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 12L15.5 17L14 18.5L7.5 12L14 5.5L15.5 7L10.5 12Z" fill="currentColor"></path></svg></button></div><div class="Tabs-module_tablist__1iuDO"><ul role="tablist" style="width:0px"><li role="tab" aria-selected="true" aria-controls="tab-0-panel" tabindex="0" id="tab-0-button" class="Tabs-module_tab__3oOoX Tabs-module_active__1Ic3B"><span>Usage</span></li><li role="tab" aria-selected="false" aria-controls="tab-1-panel" tabindex="-1" id="tab-1-button" class="Tabs-module_tab__3oOoX"><span>Code</span></li><li role="tab" aria-selected="false" aria-controls="tab-2-panel" tabindex="-1" id="tab-2-button" class="Tabs-module_tab__3oOoX"><span>Accessibility</span></li></ul></div><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z" fill="currentColor"></path></svg></button></div></div><div id="tab-0-panel" role="tabpanel" aria-labelledby="tab-0-button"></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-359" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-359)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="Tabs-module_tabs__2Ww5F"><div class="Tabs-module_tablistBar__elMv9 page-tabs-list"><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-left" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 12L15.5 17L14 18.5L7.5 12L14 5.5L15.5 7L10.5 12Z" fill="currentColor"></path></svg></button></div><div class="Tabs-module_tablist__1iuDO"><ul role="tablist" style="width:0px"><li role="tab" aria-selected="true" aria-controls="tab-0-panel" tabindex="0" id="tab-0-button" class="Tabs-module_tab__3oOoX Tabs-module_active__1Ic3B"><span>Usage</span></li><li role="tab" aria-selected="false" aria-controls="tab-1-panel" tabindex="-1" id="tab-1-button" class="Tabs-module_tab__3oOoX"><span>Code</span></li><li role="tab" aria-selected="false" aria-controls="tab-2-panel" tabindex="-1" id="tab-2-button" class="Tabs-module_tab__3oOoX"><span>Accessibility</span></li></ul></div><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z" fill="currentColor"></path></svg></button></div></div><div id="tab-0-panel" role="tabpanel" aria-labelledby="tab-0-button"></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-360" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-360)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/selection-group/code/index.html b/docs/hds-1817-stepbystep-docs/components/selection-group/code/index.html
index cc280aef7e3..eeb27d7bd86 100644
--- a/docs/hds-1817-stepbystep-docs/components/selection-group/code/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/selection-group/code/index.html
@@ -294,7 +294,7 @@ <h3 id="packages" style="position:relative" class="page-heading-3 heading-m">Pac
 <div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><thead><tr class="hds-table__header-row dark"><th scope="col">Package</th><th scope="col">Included</th><th scope="col">Storybook link</th><th scope="col">Source link</th></tr></thead><tbody class="hds-table__content"><tr><td><strong>HDS React</strong></td><td><div style="display:flex;gap:var(--spacing-3-xs)"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="check-circle-fill" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM16.5 8L18 9.5L10.5 17L6 12.5L7.5 11L10.5 14L16.5 8Z" fill="currentColor"></path></svg> Yes </div></td><td><a aria-label="View in Storybook. Opens in a new tab" class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/storybook/react/?path=/story/components-selectiongroup--default" target="_blank" rel="noopener">View in Storybook</a></td><td><a aria-label="View source. Opens in a new tab Opens a different website." class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/react/src/components/selectionGroup" target="_blank" rel="noopener">View source<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Link-module_icon__3ReCc link_icon__i_HqN Link-module_verticalAlignMediumIcon__12PVa link_vertical-align-medium-icon__3IWi1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="link-external" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z" fill="currentColor"></path></svg></a></td></tr><tr><td><strong>HDS Core</strong></td><td><div style="display:flex;gap:var(--spacing-3-xs)"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="check-circle-fill" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM16.5 8L18 9.5L10.5 17L6 12.5L7.5 11L10.5 14L16.5 8Z" fill="currentColor"></path></svg> Yes </div></td><td><a aria-label="View in Storybook. Opens in a new tab" class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/storybook/core/?path=/story/components-selection-group--default" target="_blank" rel="noopener">View in Storybook</a></td><td><a aria-label="View source. Opens in a new tab Opens a different website." class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/core/src/components/selection-group" target="_blank" rel="noopener">View source<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Link-module_icon__3ReCc link_icon__i_HqN Link-module_verticalAlignMediumIcon__12PVa link_vertical-align-medium-icon__3IWi1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="link-external" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z" fill="currentColor"></path></svg></a></td></tr></tbody></table></div>
 <h3 id="properties" style="position:relative" class="page-heading-3 heading-m">Properties<a href="#properties" aria-label="properties permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h3>
 <p>Note! You can find the full list of properties in the <a aria-label="React Storybook. Opens in a new tab" class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/storybook/react/?path=/docs/components-selectiongroup--default" target="_blank" rel="noopener">React Storybook.</a></p>
-<div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><caption class="hds-table__caption"><b>Table 1</b>: <!-- -->SelectionGroup properties</caption><thead><tr class="hds-table__header-row dark"><th scope="col">Property</th><th scope="col">Description</th><th scope="col">Values</th><th scope="col">Default value</th></tr></thead><tbody class="hds-table__content"><tr><td><code>label</code></td><td>The label for the selection group.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>direction</code></td><td>The direction in which child components should be rendered in.</td><td><code>&quot;vertical&quot;</code> <code>&quot;horizontal&quot;</code></td><td><code>&quot;vertical&quot;</code></td></tr><tr><td><code>helperText</code></td><td>The help text content that will be shown below the selection group content.</td><td><code>string</code></td><td>-</td></tr></tbody></table></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-354" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-354)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><caption class="hds-table__caption"><b>Table 1</b>: <!-- -->SelectionGroup properties</caption><thead><tr class="hds-table__header-row dark"><th scope="col">Property</th><th scope="col">Description</th><th scope="col">Values</th><th scope="col">Default value</th></tr></thead><tbody class="hds-table__content"><tr><td><code>label</code></td><td>The label for the selection group.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>direction</code></td><td>The direction in which child components should be rendered in.</td><td><code>&quot;vertical&quot;</code> <code>&quot;horizontal&quot;</code></td><td><code>&quot;vertical&quot;</code></td></tr><tr><td><code>helperText</code></td><td>The help text content that will be shown below the selection group content.</td><td><code>string</code></td><td>-</td></tr></tbody></table></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-355" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-355)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/side-navigation/index.html b/docs/hds-1817-stepbystep-docs/components/side-navigation/index.html
index b8db3a05514..f439787b0b0 100644
--- a/docs/hds-1817-stepbystep-docs/components/side-navigation/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/side-navigation/index.html
@@ -110,7 +110,7 @@ <h4 id="with-skip-link" style="position:relative" class="page-heading-4 heading-
 <li>Using the SideNavigation.SkipLink component is optional. Use the skip link component to help keyboard-only users skip the navigation links and jump to the main content.</li>
 <li>See Example for SideNavigation.SkipLink <a aria-label="in Storybook. Opens in a new tab" class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/storybook/react/?path=/story/components-sidenavigation--with-skip-link" target="_blank" rel="noopener">in Storybook</a></li>
 <li>The SideNavigation.SkipLink supports ariaLabel which gives possibility to define more informative text for screen readers</li>
-</ul></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-456" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-456)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+</ul></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-457" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-457)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/status-label/accessibility/index.html b/docs/hds-1817-stepbystep-docs/components/status-label/accessibility/index.html
index fbc9ddc5c90..85d03849a2a 100644
--- a/docs/hds-1817-stepbystep-docs/components/status-label/accessibility/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/status-label/accessibility/index.html
@@ -61,7 +61,7 @@ <h3 id="pay-attention-to" style="position:relative" class="page-heading-3 headin
 <ul>
 <li><strong>It is advisable to use colour combinations provided by the implementation.</strong> These combinations are ensured to comply with WCAG AA requirements. When customising colours, refer to <a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/hds-demo/hds-1817-stepbystep-docs/foundation/design-tokens/colour">colour guidelines</a> to ensure accessibility.</li>
 <li>Remember that colour should never be the only way of conveying information. Make sure the meaning of the status label is clearly described by the label text. Refer to <a aria-label="WCAG 2.1 Use of Color guideline. Opens a different website." class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html">WCAG 2.1 Use of Color guideline<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Link-module_icon__3ReCc link_icon__i_HqN Link-module_verticalAlignMediumIcon__12PVa link_vertical-align-medium-icon__3IWi1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="link-external" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z" fill="currentColor"></path></svg></a> for more information.</li>
-</ul></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-552" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-552)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+</ul></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-551" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-551)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/status-label/code/index.html b/docs/hds-1817-stepbystep-docs/components/status-label/code/index.html
index 6a08940b7a8..08ae6460099 100644
--- a/docs/hds-1817-stepbystep-docs/components/status-label/code/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/status-label/code/index.html
@@ -160,7 +160,7 @@ <h3 id="packages" style="position:relative" class="page-heading-3 heading-m">Pac
 <div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><thead><tr class="hds-table__header-row dark"><th scope="col">Package</th><th scope="col">Included</th><th scope="col">Storybook link</th><th scope="col">Source link</th></tr></thead><tbody class="hds-table__content"><tr><td><strong>HDS React</strong></td><td><div style="display:flex;gap:var(--spacing-3-xs)"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="check-circle-fill" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM16.5 8L18 9.5L10.5 17L6 12.5L7.5 11L10.5 14L16.5 8Z" fill="currentColor"></path></svg> Yes </div></td><td><a aria-label="View in Storybook. Opens in a new tab" class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/storybook/react/?path=/story/components-statuslabel--neutral" target="_blank" rel="noopener">View in Storybook</a></td><td><a aria-label="View source. Opens in a new tab Opens a different website." class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/react/src/components/statusLabel" target="_blank" rel="noopener">View source<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Link-module_icon__3ReCc link_icon__i_HqN Link-module_verticalAlignMediumIcon__12PVa link_vertical-align-medium-icon__3IWi1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="link-external" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z" fill="currentColor"></path></svg></a></td></tr><tr><td><strong>HDS Core</strong></td><td><div style="display:flex;gap:var(--spacing-3-xs)"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="check-circle-fill" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM16.5 8L18 9.5L10.5 17L6 12.5L7.5 11L10.5 14L16.5 8Z" fill="currentColor"></path></svg> Yes </div></td><td><a aria-label="View in Storybook. Opens in a new tab" class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/storybook/core/?path=/story/components-status-label--default" target="_blank" rel="noopener">View in Storybook</a></td><td><a aria-label="View source. Opens in a new tab Opens a different website." class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/core/src/components/status-label" target="_blank" rel="noopener">View source<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Link-module_icon__3ReCc link_icon__i_HqN Link-module_verticalAlignMediumIcon__12PVa link_vertical-align-medium-icon__3IWi1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="link-external" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z" fill="currentColor"></path></svg></a></td></tr></tbody></table></div>
 <h3 id="properties" style="position:relative" class="page-heading-3 heading-m">Properties<a href="#properties" aria-label="properties permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h3>
 <p>Note! You can find the full list of properties in the <a aria-label="React Storybook. Opens in a new tab" class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/storybook/react/?path=/docs/components-statuslabel--neutral" target="_blank" rel="noopener">React Storybook.</a></p>
-<div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><caption class="hds-table__caption"><b>Table 1</b>: <!-- -->StatusLabel properties</caption><thead><tr class="hds-table__header-row dark"><th scope="col">Property</th><th scope="col">Description</th><th scope="col">Values</th><th scope="col">Default value</th></tr></thead><tbody class="hds-table__content"><tr><td><code>type</code></td><td>The type of the status label.</td><td><code>&quot;neutral&quot;</code> <code>&quot;success&quot;</code> <code>&quot;info&quot;</code> <code>&quot;alert&quot;</code> <code>&quot;error&quot;</code></td><td><code>&quot;neutral&quot;</code></td></tr><tr><td><code>iconLeft</code></td><td>Element placed on the left side of the status label.</td><td><code>ReactNode</code></td><td>-</td></tr></tbody></table></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-550" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-550)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><caption class="hds-table__caption"><b>Table 1</b>: <!-- -->StatusLabel properties</caption><thead><tr class="hds-table__header-row dark"><th scope="col">Property</th><th scope="col">Description</th><th scope="col">Values</th><th scope="col">Default value</th></tr></thead><tbody class="hds-table__content"><tr><td><code>type</code></td><td>The type of the status label.</td><td><code>&quot;neutral&quot;</code> <code>&quot;success&quot;</code> <code>&quot;info&quot;</code> <code>&quot;alert&quot;</code> <code>&quot;error&quot;</code></td><td><code>&quot;neutral&quot;</code></td></tr><tr><td><code>iconLeft</code></td><td>Element placed on the left side of the status label.</td><td><code>ReactNode</code></td><td>-</td></tr></tbody></table></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-552" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-552)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/status-label/tabs/index.html b/docs/hds-1817-stepbystep-docs/components/status-label/tabs/index.html
index 17f7b263f16..2a85f2f5bf8 100644
--- a/docs/hds-1817-stepbystep-docs/components/status-label/tabs/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/status-label/tabs/index.html
@@ -56,7 +56,7 @@
   </script><link rel="manifest" href="/hds-demo/hds-1817-stepbystep-docs/manifest.webmanifest" crossorigin="anonymous"/><link rel="apple-touch-icon" sizes="any" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/favicon-32x32.ico"/><link rel="apple-touch-icon" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/apple-touch-icon.png"/><link rel="apple-touch-icon" sizes="192x192" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/favicon-192x192.png"/><link rel="apple-touch-icon" sizes="512x512" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/favicon-512x512.png"/><link rel="preconnect" href="https://webanalytics.digiaiiris.com/js"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="page text-body"><header class="hds-header Header-module_header__291GF pageHeader" id="page-header"><div class="Header-module_headerBackgroundWrapper__KsFy2"><a href="#content" class="SkipLink-module_skipLink__1knzF"><span class="SkipLink-module_skipLinkLabel__21n5B">Skip to content</span></a><div class="HeaderActionBar-module_headerActionBarContainer__5tfj-"><div class="HeaderActionBar-module_headerActionBar__lPeGE"><a href="https://hds.hel.fi" aria-label="City of Helsinki Logo" class="HeaderActionBar-module_titleAndLogoContainer__2LEAb HeaderActionBar-module_logo__2r2T0"><span class="HeaderActionBarLogo-module_logoWrapper__8NgfS"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></span></a><a href="https://hds.hel.fi" aria-label="Helsinki: Helsinki Design System" class="HeaderActionBar-module_titleAndLogoContainer__2LEAb HeaderActionBar-module_title__opzt9 HeaderActionBar-module_normal__3B4qi"><span class="HeaderActionBar-module_title__opzt9"><div class="page-header-title"><div>Helsinki Design System</div><div class="page-header-title-badge"><img style="filter:invert(1)" alt="HDS version number: 2.15.0" src="https://img.shields.io/github/v/release/City-of-Helsinki/helsinki-design-system?label=&amp;style=for-the-badge&amp;color=1a1a1a"/></div></div></span></a><div class="HeaderActionBar-module_headerActions__3lNnM"></div></div></div><div class="HeaderNavigationMenu-module_headerNavigationMenuContainer__2nK9z"><nav class="HeaderNavigationMenu-module_headerNavigationMenu__3G6-N"><ul class="HeaderNavigationMenu-module_headerNavigationMenuList__3HIzx"></ul></nav></div></div></header><div class="page-content"><aside class="side-content"><nav class="SideNavigation-module_sideNavigation__3X-9P" id="side-navigation" aria-label="Components"><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS Button-module_fullWidth__31eVK button_hds-button--fullwidth__1_hG9 SideNavigation-module_toggleButton__10tXH" aria-controls="side-navigation-menu" aria-expanded="false" aria-haspopup="true"><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Navigate to page</span><div class="Button-module_icon__O-h7R button_hds-icon__17j8Z" aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-down" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 13.5L17 8.5L18.5 10L12 16.5L5.5 10L7 8.5L12 13.5Z" fill="currentColor"></path></svg></div></button><ul class="SideNavigation-module_mainLevelList__SLZKQ" aria-label="Navigate to page" id="side-navigation-menu"><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Overview" id="side-nav-components" href="/hds-demo/hds-1817-stepbystep-docs/components"><span class="MainLevel-module_label__uWKJ7">Overview</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Accordion" id="side-nav-components-accordion" href="/hds-demo/hds-1817-stepbystep-docs/components/accordion"><span class="MainLevel-module_label__uWKJ7">Accordion</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Breadcrumb" id="side-nav-components-breadcrumb" href="/hds-demo/hds-1817-stepbystep-docs/components/breadcrumb"><span class="MainLevel-module_label__uWKJ7">Breadcrumb</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Button" id="side-nav-components-buttons" href="/hds-demo/hds-1817-stepbystep-docs/components/buttons"><span class="MainLevel-module_label__uWKJ7">Button</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Card" id="side-nav-components-card" href="/hds-demo/hds-1817-stepbystep-docs/components/card"><span class="MainLevel-module_label__uWKJ7">Card</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Checkbox" id="side-nav-components-checkbox" href="/hds-demo/hds-1817-stepbystep-docs/components/checkbox"><span class="MainLevel-module_label__uWKJ7">Checkbox</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="CookieConsent" id="side-nav-components-cookie-consent" href="/hds-demo/hds-1817-stepbystep-docs/components/cookie-consent"><span class="MainLevel-module_label__uWKJ7">CookieConsent</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="DateInput" id="side-nav-components-date-input" href="/hds-demo/hds-1817-stepbystep-docs/components/date-input"><span class="MainLevel-module_label__uWKJ7">DateInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Dialog" id="side-nav-components-dialog" href="/hds-demo/hds-1817-stepbystep-docs/components/dialog"><span class="MainLevel-module_label__uWKJ7">Dialog</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Dropdown" id="side-nav-components-dropdown" href="/hds-demo/hds-1817-stepbystep-docs/components/dropdown"><span class="MainLevel-module_label__uWKJ7">Dropdown</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Fieldset" id="side-nav-components-fieldset" href="/hds-demo/hds-1817-stepbystep-docs/components/fieldset"><span class="MainLevel-module_label__uWKJ7">Fieldset</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="FileInput" id="side-nav-components-file-input" href="/hds-demo/hds-1817-stepbystep-docs/components/file-input"><span class="MainLevel-module_label__uWKJ7">FileInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Footer" id="side-nav-components-footer" href="/hds-demo/hds-1817-stepbystep-docs/components/footer"><span class="MainLevel-module_label__uWKJ7">Footer</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Header" id="side-nav-components-header" href="/hds-demo/hds-1817-stepbystep-docs/components/header"><span class="MainLevel-module_label__uWKJ7">Header</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Hero" id="side-nav-components-hero" href="/hds-demo/hds-1817-stepbystep-docs/components/hero"><span class="MainLevel-module_label__uWKJ7">Hero</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Highlight" id="side-nav-components-highlight" href="/hds-demo/hds-1817-stepbystep-docs/components/highlight"><span class="MainLevel-module_label__uWKJ7">Highlight</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Icon" id="side-nav-components-icon" href="/hds-demo/hds-1817-stepbystep-docs/components/icon"><span class="MainLevel-module_label__uWKJ7">Icon</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Koros" id="side-nav-components-koros" href="/hds-demo/hds-1817-stepbystep-docs/components/koros"><span class="MainLevel-module_label__uWKJ7">Koros</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Link" id="side-nav-components-link" href="/hds-demo/hds-1817-stepbystep-docs/components/link"><span class="MainLevel-module_label__uWKJ7">Link</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Linkbox" id="side-nav-components-linkbox" href="/hds-demo/hds-1817-stepbystep-docs/components/linkbox"><span class="MainLevel-module_label__uWKJ7">Linkbox</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="LoadingSpinner" id="side-nav-components-loading-spinner" href="/hds-demo/hds-1817-stepbystep-docs/components/loading-spinner"><span class="MainLevel-module_label__uWKJ7">LoadingSpinner</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Logo" id="side-nav-components-logo" href="/hds-demo/hds-1817-stepbystep-docs/components/logo"><span class="MainLevel-module_label__uWKJ7">Logo</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Notification" id="side-nav-components-notification" href="/hds-demo/hds-1817-stepbystep-docs/components/notification"><span class="MainLevel-module_label__uWKJ7">Notification</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="NumberInput" id="side-nav-components-number-input" href="/hds-demo/hds-1817-stepbystep-docs/components/number-input"><span class="MainLevel-module_label__uWKJ7">NumberInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Pagination" id="side-nav-components-pagination" href="/hds-demo/hds-1817-stepbystep-docs/components/pagination"><span class="MainLevel-module_label__uWKJ7">Pagination</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="PasswordInput" id="side-nav-components-password-input" href="/hds-demo/hds-1817-stepbystep-docs/components/password-input"><span class="MainLevel-module_label__uWKJ7">PasswordInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="PhoneInput" id="side-nav-components-phone-input" href="/hds-demo/hds-1817-stepbystep-docs/components/phone-input"><span class="MainLevel-module_label__uWKJ7">PhoneInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="RadioButton" id="side-nav-components-radio-button" href="/hds-demo/hds-1817-stepbystep-docs/components/radio-button"><span class="MainLevel-module_label__uWKJ7">RadioButton</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="SearchInput" id="side-nav-components-search-input" href="/hds-demo/hds-1817-stepbystep-docs/components/search-input"><span class="MainLevel-module_label__uWKJ7">SearchInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="SelectionGroup" id="side-nav-components-selection-group" href="/hds-demo/hds-1817-stepbystep-docs/components/selection-group"><span class="MainLevel-module_label__uWKJ7">SelectionGroup</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="SideNavigation" id="side-nav-components-side-navigation" href="/hds-demo/hds-1817-stepbystep-docs/components/side-navigation"><span class="MainLevel-module_label__uWKJ7">SideNavigation</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_active__3IkdI MainLevel-module_open__2yWFj"><a aria-current="page" aria-label="StatusLabel" id="side-nav-components-status-label" href="/hds-demo/hds-1817-stepbystep-docs/components/status-label"><span class="MainLevel-module_label__uWKJ7">StatusLabel</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="StepByStep" id="side-nav-components-step-by-step" href="/hds-demo/hds-1817-stepbystep-docs/components/step-by-step"><span class="MainLevel-module_label__uWKJ7">StepByStep</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Stepper" id="side-nav-components-stepper" href="/hds-demo/hds-1817-stepbystep-docs/components/stepper"><span class="MainLevel-module_label__uWKJ7">Stepper</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Table" id="side-nav-components-table" href="/hds-demo/hds-1817-stepbystep-docs/components/table"><span class="MainLevel-module_label__uWKJ7">Table</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Tabs" id="side-nav-components-tabs" href="/hds-demo/hds-1817-stepbystep-docs/components/tabs"><span class="MainLevel-module_label__uWKJ7">Tabs</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Tag" id="side-nav-components-tag" href="/hds-demo/hds-1817-stepbystep-docs/components/tag"><span class="MainLevel-module_label__uWKJ7">Tag</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="TextArea" id="side-nav-components-text-area" href="/hds-demo/hds-1817-stepbystep-docs/components/text-area"><span class="MainLevel-module_label__uWKJ7">TextArea</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="TextInput" id="side-nav-components-text-input" href="/hds-demo/hds-1817-stepbystep-docs/components/text-input"><span class="MainLevel-module_label__uWKJ7">TextInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="TimeInput" id="side-nav-components-time-input" href="/hds-demo/hds-1817-stepbystep-docs/components/time-input"><span class="MainLevel-module_label__uWKJ7">TimeInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="ToggleButton" id="side-nav-components-toggle-button" href="/hds-demo/hds-1817-stepbystep-docs/components/toggle-button"><span class="MainLevel-module_label__uWKJ7">ToggleButton</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Tooltip" id="side-nav-components-tooltip" href="/hds-demo/hds-1817-stepbystep-docs/components/tooltip"><span class="MainLevel-module_label__uWKJ7">Tooltip</span></a></li></ul></nav></aside><main id="content" class="main-content"><h1 id="statuslabel" style="position:relative" class="page-heading-1 heading-xl-mobile">StatusLabel<a href="#statuslabel" aria-label="statuslabel permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h1>
 <div class="status-label-description"><span class="StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H">Stable</span><span class="StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST" style="margin-left:var(--spacing-xs)">Accessible</span><div class="Tooltip-module_root__1Yo9t status-label-tooltip"><button type="button" class="Tooltip-module_button__2x9m0" title="Tooltip" aria-label="Tooltip" aria-expanded="false"><span aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="question-circle" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM13 16V18H11V16H13ZM12.0437 5.75C14.0343 5.75 15.7173 7.29464 15.7173 9.42361C15.7173 10.7806 15.2461 11.489 14.161 12.306L13.9187 12.4844C13.1753 13.0295 12.9556 13.3359 12.9386 14.142L12.9375 14.25H10.9375C10.9375 12.6746 11.4591 11.8378 12.6143 10.9622L12.8618 10.7796C13.5685 10.2628 13.7173 10.0539 13.7173 9.42361C13.7173 8.43934 12.9662 7.75 12.0437 7.75C11.1907 7.75 10.4785 8.34077 10.3816 9.20835L10.3734 9.30587L8.37663 9.19182C8.49191 7.17347 10.1344 5.75 12.0437 5.75Z" fill="currentColor"></path></svg></span></button></div></div>
 <p style="font-size:var(--fontsize-body-xl);color:var(--color-black-90);max-width:600px">  Status labels can be used to highlight different statuses or items to the user. Status labels cannot be interacted with and they are only meant to convey relevant information.</p>
-<div class="Tabs-module_tabs__2Ww5F"><div class="Tabs-module_tablistBar__elMv9 page-tabs-list"><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-left" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 12L15.5 17L14 18.5L7.5 12L14 5.5L15.5 7L10.5 12Z" fill="currentColor"></path></svg></button></div><div class="Tabs-module_tablist__1iuDO"><ul role="tablist" style="width:0px"><li role="tab" aria-selected="true" aria-controls="tab-0-panel" tabindex="0" id="tab-0-button" class="Tabs-module_tab__3oOoX Tabs-module_active__1Ic3B"><span>Usage</span></li><li role="tab" aria-selected="false" aria-controls="tab-1-panel" tabindex="-1" id="tab-1-button" class="Tabs-module_tab__3oOoX"><span>Code</span></li><li role="tab" aria-selected="false" aria-controls="tab-2-panel" tabindex="-1" id="tab-2-button" class="Tabs-module_tab__3oOoX"><span>Accessibility</span></li></ul></div><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z" fill="currentColor"></path></svg></button></div></div><div id="tab-0-panel" role="tabpanel" aria-labelledby="tab-0-button"></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-546" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-546)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="Tabs-module_tabs__2Ww5F"><div class="Tabs-module_tablistBar__elMv9 page-tabs-list"><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-left" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 12L15.5 17L14 18.5L7.5 12L14 5.5L15.5 7L10.5 12Z" fill="currentColor"></path></svg></button></div><div class="Tabs-module_tablist__1iuDO"><ul role="tablist" style="width:0px"><li role="tab" aria-selected="true" aria-controls="tab-0-panel" tabindex="0" id="tab-0-button" class="Tabs-module_tab__3oOoX Tabs-module_active__1Ic3B"><span>Usage</span></li><li role="tab" aria-selected="false" aria-controls="tab-1-panel" tabindex="-1" id="tab-1-button" class="Tabs-module_tab__3oOoX"><span>Code</span></li><li role="tab" aria-selected="false" aria-controls="tab-2-panel" tabindex="-1" id="tab-2-button" class="Tabs-module_tab__3oOoX"><span>Accessibility</span></li></ul></div><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z" fill="currentColor"></path></svg></button></div></div><div id="tab-0-panel" role="tabpanel" aria-labelledby="tab-0-button"></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-547" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-547)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/step-by-step/accessibility/index.html b/docs/hds-1817-stepbystep-docs/components/step-by-step/accessibility/index.html
index c903fcfa8ab..c2121d04112 100644
--- a/docs/hds-1817-stepbystep-docs/components/step-by-step/accessibility/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/step-by-step/accessibility/index.html
@@ -60,7 +60,7 @@
 <h3 id="pay-attention-to" style="position:relative" class="page-heading-3 heading-m">Pay attention to<a href="#pay-attention-to" aria-label="pay attention to permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h3>
 <ul>
 <li>Make sure that that the main heading for StepByStep is in accordance to your page&#x27;s heading ranks. The default value for the <code>headerLevel</code> prop in the HDS react component is 2.</li>
-</ul></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-545" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-545)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+</ul></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-544" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-544)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/stepper/index.html b/docs/hds-1817-stepbystep-docs/components/stepper/index.html
index 213714844e2..d6a880eb14e 100644
--- a/docs/hds-1817-stepbystep-docs/components/stepper/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/stepper/index.html
@@ -113,7 +113,7 @@ <h4 id="step-states" style="position:relative" class="page-heading-4 heading-s">
 <li><code>paused</code> state for steps that require the user&#x27;s attention (e.g. waiting for a review from officials)</li>
 <li><code>disabled</code> state for steps that are not available yet (e.g. require a previous step to be completed first)</li>
 </ul>
-<div class="playground-block-preview playground-block-preview-light"><div lang="en" class="Stepper-module_stepperContainer__2sBZh" data-testid="hds-stepper"><div class="Stepper-module_stepper__W0Ugt"><div class="Stepper-module_line__2-_Vl" aria-hidden="true" style="width:max( calc(100% - var(--hds-step-width)), calc(6 * var(--hds-step-width) - var(--hds-step-width) ))"><div style="width:calc( 100% / 5)" class="Stepper-module_enabledLine__2oFd_"></div><div style="width:calc( 100% / 5)" class="Stepper-module_enabledLine__2oFd_"></div><div style="width:calc( 100% / 5)" class="Stepper-module_enabledLine__2oFd_"></div><div style="width:calc( 100% / 5)" class="Stepper-module_enabledLine__2oFd_"></div><div style="width:calc( 100% / 5)" class="Stepper-module_disabledLine__3Rc9w"></div></div><div class="Stepper-module_stepContainer__3jt3J"><button type="button" class="Stepper-module_step__sJ_fq" aria-current="false" aria-label="Completed. Step 1/6. Completed." data-testid="hds-stepper-step-0"><div class="Stepper-module_circleContainer__VIzlQ"><div class="Stepper-module_completedContainer__1Ko_a"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Stepper-module_completedIcon__2UDJK" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="check" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M21 7L10 18L4.5 12.5L6 11L10 15L19.5 5.5L21 7Z" fill="currentColor"></path></svg></div></div><p class="Stepper-module_label__V9Nx6">Completed</p></button></div><div class="Stepper-module_stepContainer__3jt3J"><button type="button" class="Stepper-module_step__sJ_fq Stepper-module_selected__3yhqv" aria-current="step" aria-label="Current. Step 2/6." data-testid="hds-stepper-step-1"><div class="Stepper-module_circleContainer__VIzlQ"><div class="Stepper-module_circle__2sJm2"><span class="Stepper-module_number__2bmDN">2</span></div></div><p class="Stepper-module_label__V9Nx6">Current</p></button></div><div class="Stepper-module_stepContainer__3jt3J"><button type="button" class="Stepper-module_step__sJ_fq" aria-current="false" aria-label="Available. Step 3/6. Available." data-testid="hds-stepper-step-2"><div class="Stepper-module_circleContainer__VIzlQ"><div class="Stepper-module_circle__2sJm2"><span class="Stepper-module_number__2bmDN">3</span></div></div><p class="Stepper-module_label__V9Nx6">Available</p></button></div><div class="Stepper-module_stepContainer__3jt3J"><button type="button" class="Stepper-module_step__sJ_fq" aria-current="false" aria-label="Needs attention. Step 4/6. Needs attention." data-testid="hds-stepper-step-3"><div class="Stepper-module_circleContainer__VIzlQ"><div class="Stepper-module_circle__2sJm2"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_xs__3kAOj icon_hds-icon--size-xs__3dAMZ" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="error" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.1284 2.50974C11.4971 1.85436 12.4201 1.83095 12.8284 2.43952L12.8716 2.50974L22.4341 19.5097C22.7965 20.1541 22.3585 20.9453 21.638 20.9973L21.5625 21H2.43749C1.69816 21 1.22338 20.2303 1.53125 19.5769L1.56592 19.5097L11.1284 2.50974ZM12 5.04L4.14699 19H19.8525L12 5.04ZM13 16V18H11V16H13ZM13 9.5V14.5H11V9.5H13Z" fill="currentColor"></path></svg></div></div><p class="Stepper-module_label__V9Nx6">Needs attention</p></button></div><div class="Stepper-module_stepContainer__3jt3J"><button type="button" class="Stepper-module_step__sJ_fq" aria-current="false" aria-label="Paused. Step 5/6. Paused." data-testid="hds-stepper-step-4"><div class="Stepper-module_circleContainer__VIzlQ"><div class="Stepper-module_circle__2sJm2"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_xs__3kAOj icon_hds-icon--size-xs__3dAMZ" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="playback-pause" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M17 5V19H14V5H17ZM10 5V19H7V5H10Z" fill="currentColor"></path></svg></div></div><p class="Stepper-module_label__V9Nx6">Paused</p></button></div><div class="Stepper-module_stepContainer__3jt3J"><button type="button" disabled="" class="Stepper-module_step__sJ_fq Stepper-module_disabled__sxc_0" aria-current="false" aria-label="Disabled. Step 6/6." data-testid="hds-stepper-step-5"><div class="Stepper-module_circleContainer__VIzlQ"><div class="Stepper-module_circle__2sJm2"><span class="Stepper-module_number__2bmDN">6</span></div></div><p class="Stepper-module_label__V9Nx6">Disabled</p></button></div></div></div></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-531" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-531)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="playground-block-preview playground-block-preview-light"><div lang="en" class="Stepper-module_stepperContainer__2sBZh" data-testid="hds-stepper"><div class="Stepper-module_stepper__W0Ugt"><div class="Stepper-module_line__2-_Vl" aria-hidden="true" style="width:max( calc(100% - var(--hds-step-width)), calc(6 * var(--hds-step-width) - var(--hds-step-width) ))"><div style="width:calc( 100% / 5)" class="Stepper-module_enabledLine__2oFd_"></div><div style="width:calc( 100% / 5)" class="Stepper-module_enabledLine__2oFd_"></div><div style="width:calc( 100% / 5)" class="Stepper-module_enabledLine__2oFd_"></div><div style="width:calc( 100% / 5)" class="Stepper-module_enabledLine__2oFd_"></div><div style="width:calc( 100% / 5)" class="Stepper-module_disabledLine__3Rc9w"></div></div><div class="Stepper-module_stepContainer__3jt3J"><button type="button" class="Stepper-module_step__sJ_fq" aria-current="false" aria-label="Completed. Step 1/6. Completed." data-testid="hds-stepper-step-0"><div class="Stepper-module_circleContainer__VIzlQ"><div class="Stepper-module_completedContainer__1Ko_a"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Stepper-module_completedIcon__2UDJK" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="check" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M21 7L10 18L4.5 12.5L6 11L10 15L19.5 5.5L21 7Z" fill="currentColor"></path></svg></div></div><p class="Stepper-module_label__V9Nx6">Completed</p></button></div><div class="Stepper-module_stepContainer__3jt3J"><button type="button" class="Stepper-module_step__sJ_fq Stepper-module_selected__3yhqv" aria-current="step" aria-label="Current. Step 2/6." data-testid="hds-stepper-step-1"><div class="Stepper-module_circleContainer__VIzlQ"><div class="Stepper-module_circle__2sJm2"><span class="Stepper-module_number__2bmDN">2</span></div></div><p class="Stepper-module_label__V9Nx6">Current</p></button></div><div class="Stepper-module_stepContainer__3jt3J"><button type="button" class="Stepper-module_step__sJ_fq" aria-current="false" aria-label="Available. Step 3/6. Available." data-testid="hds-stepper-step-2"><div class="Stepper-module_circleContainer__VIzlQ"><div class="Stepper-module_circle__2sJm2"><span class="Stepper-module_number__2bmDN">3</span></div></div><p class="Stepper-module_label__V9Nx6">Available</p></button></div><div class="Stepper-module_stepContainer__3jt3J"><button type="button" class="Stepper-module_step__sJ_fq" aria-current="false" aria-label="Needs attention. Step 4/6. Needs attention." data-testid="hds-stepper-step-3"><div class="Stepper-module_circleContainer__VIzlQ"><div class="Stepper-module_circle__2sJm2"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_xs__3kAOj icon_hds-icon--size-xs__3dAMZ" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="error" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.1284 2.50974C11.4971 1.85436 12.4201 1.83095 12.8284 2.43952L12.8716 2.50974L22.4341 19.5097C22.7965 20.1541 22.3585 20.9453 21.638 20.9973L21.5625 21H2.43749C1.69816 21 1.22338 20.2303 1.53125 19.5769L1.56592 19.5097L11.1284 2.50974ZM12 5.04L4.14699 19H19.8525L12 5.04ZM13 16V18H11V16H13ZM13 9.5V14.5H11V9.5H13Z" fill="currentColor"></path></svg></div></div><p class="Stepper-module_label__V9Nx6">Needs attention</p></button></div><div class="Stepper-module_stepContainer__3jt3J"><button type="button" class="Stepper-module_step__sJ_fq" aria-current="false" aria-label="Paused. Step 5/6. Paused." data-testid="hds-stepper-step-4"><div class="Stepper-module_circleContainer__VIzlQ"><div class="Stepper-module_circle__2sJm2"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_xs__3kAOj icon_hds-icon--size-xs__3dAMZ" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="playback-pause" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M17 5V19H14V5H17ZM10 5V19H7V5H10Z" fill="currentColor"></path></svg></div></div><p class="Stepper-module_label__V9Nx6">Paused</p></button></div><div class="Stepper-module_stepContainer__3jt3J"><button type="button" disabled="" class="Stepper-module_step__sJ_fq Stepper-module_disabled__sxc_0" aria-current="false" aria-label="Disabled. Step 6/6." data-testid="hds-stepper-step-5"><div class="Stepper-module_circleContainer__VIzlQ"><div class="Stepper-module_circle__2sJm2"><span class="Stepper-module_number__2bmDN">6</span></div></div><p class="Stepper-module_label__V9Nx6">Disabled</p></button></div></div></div></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-530" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-530)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/table/accessibility/index.html b/docs/hds-1817-stepbystep-docs/components/table/accessibility/index.html
index 9c367dc86ab..2f54aa0042d 100644
--- a/docs/hds-1817-stepbystep-docs/components/table/accessibility/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/table/accessibility/index.html
@@ -68,7 +68,7 @@ <h3 id="pay-attention-to" style="position:relative" class="page-heading-3 headin
 </ul>
 </li>
 <li>If your table includes empty column header cells, make sure they have a <code>role=“presentation”</code> attribute.</li>
-</ul></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-526" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-526)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+</ul></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-525" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-525)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/table/code/index.html b/docs/hds-1817-stepbystep-docs/components/table/code/index.html
index 2c14d0157f6..be6c905f458 100644
--- a/docs/hds-1817-stepbystep-docs/components/table/code/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/table/code/index.html
@@ -896,7 +896,7 @@ <h3 id="packages" style="position:relative" class="page-heading-3 heading-m">Pac
 <div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><thead><tr class="hds-table__header-row dark"><th scope="col">Package</th><th scope="col">Included</th><th scope="col">Storybook link</th><th scope="col">Source link</th></tr></thead><tbody class="hds-table__content"><tr><td><strong>HDS React</strong></td><td><div style="display:flex;gap:var(--spacing-3-xs)"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="check-circle-fill" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM16.5 8L18 9.5L10.5 17L6 12.5L7.5 11L10.5 14L16.5 8Z" fill="currentColor"></path></svg> Yes </div></td><td><a aria-label="View in Storybook. Opens in a new tab" class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/storybook/react/?path=/story/components-table--default" target="_blank" rel="noopener">View in Storybook</a></td><td><a aria-label="View source. Opens in a new tab Opens a different website." class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/react/src/components/table" target="_blank" rel="noopener">View source<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Link-module_icon__3ReCc link_icon__i_HqN Link-module_verticalAlignMediumIcon__12PVa link_vertical-align-medium-icon__3IWi1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="link-external" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z" fill="currentColor"></path></svg></a></td></tr><tr><td><strong>HDS Core</strong></td><td><div style="display:flex;gap:var(--spacing-3-xs)"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="check-circle-fill" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM16.5 8L18 9.5L10.5 17L6 12.5L7.5 11L10.5 14L16.5 8Z" fill="currentColor"></path></svg> Yes </div></td><td><a aria-label="View in Storybook. Opens in a new tab" class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/storybook/core/?path=/story/components-table--dark" target="_blank" rel="noopener">View in Storybook</a></td><td><a aria-label="View source. Opens in a new tab Opens a different website." class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/core/src/components/table" target="_blank" rel="noopener">View source<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Link-module_icon__3ReCc link_icon__i_HqN Link-module_verticalAlignMediumIcon__12PVa link_vertical-align-medium-icon__3IWi1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="link-external" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z" fill="currentColor"></path></svg></a></td></tr></tbody></table></div>
 <h3 id="properties" style="position:relative" class="page-heading-3 heading-m">Properties<a href="#properties" aria-label="properties permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h3>
 <p>Note! You can find the full list of properties in the <a aria-label="React Storybook. Opens in a new tab" class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/storybook/react/?path=/docs/components-table--default" target="_blank" rel="noopener">React Storybook.</a></p>
-<div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><caption class="hds-table__caption"><b>Table 1</b>: <!-- -->Table properties</caption><thead><tr class="hds-table__header-row dark"><th scope="col">Property</th><th scope="col">Description</th><th scope="col">Values</th><th scope="col">Default value</th></tr></thead><tbody class="hds-table__content"><tr><td><code>ariaLabelCheckboxSelection</code></td><td>Aria-label for checkbox selection.</td><td><code>string</code></td><td>&quot;Rivin valinta&quot;</td></tr><tr><td><code>ariaLabelSortButtonAscending</code></td><td>Aria-label for sort button in ascending state.</td><td><code>string</code></td><td>&quot;Järjestetty nousevaan järjestykseen&quot;</td></tr><tr><td><code>ariaLabelSortButtonDescending</code></td><td>Aria-label for sort button in descending state.</td><td><code>string</code></td><td>&quot;Järjestetty laskevaan järjestykseen&quot;</td></tr><tr><td><code>ariaLabelSortButtonUnset</code></td><td>Aria-label for sort button in the unordered state.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>caption</code></td><td>The caption of the table.</td><td><code>ReactNode</code></td><td>-</td></tr><tr><td><code>checkboxSelection</code></td><td>If set to true, the table displays the checkbox selection column to select rows.</td><td><code>boolean</code></td><td>false</td></tr><tr><td><code>clearSelectionsText</code></td><td>Text for clear selected rows button.</td><td><code>string</code></td><td>&quot;Tyhjennä valinnat&quot;</td></tr><tr><td><code>cols</code></td><td>Columns of the table header row. Defines header name, optional sort icon type and optional cell row transform function.</td><td><code>Header[]</code></td><td>-</td></tr><tr><td><code>customActionButtons</code></td><td>Custom action buttons to place on top of the table.</td><td><code>ReactNode[]</code></td><td>-</td></tr><tr><td><code>dense</code></td><td>If set to true, the dense variant of the table is used.</td><td><code>boolean</code></td><td>false</td></tr><tr><td><code>heading</code></td><td>The table heading.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>headingAriaLevel</code></td><td>The table heading aria-level.</td><td><code>number</code></td><td>2</td></tr><tr><td><code>headingId</code></td><td>Table heading id. Used to name table to assistive technologies. Only applicable when heading prop is used.</td><td><code>string</code></td><td>&quot;hds-table-heading-id&quot;</td></tr><tr><td><code>indexKey</code></td><td>Column key used as a unique identifier for a row</td><td><code>string</code></td><td>-</td></tr><tr><td><code>initialSortingColumnKey</code></td><td>Key indicating a column that you wish to be initially sorted. Use undefined to have no column initially sorted.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>initialSortingOrder</code></td><td>Sorting order applied for initial sorting.</td><td><code>&quot;asc&quot;</code> <code>&quot;desc&quot;</code></td><td>-</td></tr><tr><td><code>onSort</code></td><td>Function for providing side effects before or after the sort. If you want to use the component&#x27;s own sorting function, call the handleSort callback function.</td><td><code>function</code></td><td>-</td></tr><tr><td><code>renderIndexCol</code></td><td>If set to true, the index column is rendered in the table.</td><td><code>boolean</code></td><td>true</td></tr><tr><td><code>rows</code></td><td>Table rows. An array of objects where keys map with the keys of col.</td><td><code>object[]</code></td><td>-</td></tr><tr><td><code>selectAllRowsText</code></td><td>Text for the select all rows button.</td><td><code>string</code></td><td>&quot;Valitse kaikki rivit&quot;</td></tr><tr><td><code>selectedRows</code></td><td>Selected table rows.</td><td><code>SelectedRow[]</code></td><td>-</td></tr><tr><td><code>setSelectedRows</code></td><td>Callback that updates selected rows.</td><td><code>function</code></td><td>-</td></tr><tr><td><code>textAlignContentRight</code></td><td>When set to true, table data cell text content is aligned right. When set to false (default), the text is aligned to left.</td><td><code>boolean</code></td><td>false</td></tr><tr><td><code>variant</code></td><td>Table variant. Use dark for dark brand background colors, and light for light brand background colors.</td><td><code>&quot;light&quot;</code> <code>&quot;dark&quot;</code></td><td><code>&quot;dark&quot;</code></td></tr><tr><td><code>verticalHeaders</code></td><td>Vertical headers of the table.</td><td><code>Header[]</code></td><td>-</td></tr><tr><td><code>verticalLines</code></td><td>If set to true, the table displays vertical lines on columns.</td><td><code>boolean</code></td><td>false</td></tr><tr><td><code>zebra</code></td><td>If set to true, the table uses alternating row colors zebra style.</td><td><code>boolean</code></td><td>false</td></tr></tbody></table></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-524" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-524)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><caption class="hds-table__caption"><b>Table 1</b>: <!-- -->Table properties</caption><thead><tr class="hds-table__header-row dark"><th scope="col">Property</th><th scope="col">Description</th><th scope="col">Values</th><th scope="col">Default value</th></tr></thead><tbody class="hds-table__content"><tr><td><code>ariaLabelCheckboxSelection</code></td><td>Aria-label for checkbox selection.</td><td><code>string</code></td><td>&quot;Rivin valinta&quot;</td></tr><tr><td><code>ariaLabelSortButtonAscending</code></td><td>Aria-label for sort button in ascending state.</td><td><code>string</code></td><td>&quot;Järjestetty nousevaan järjestykseen&quot;</td></tr><tr><td><code>ariaLabelSortButtonDescending</code></td><td>Aria-label for sort button in descending state.</td><td><code>string</code></td><td>&quot;Järjestetty laskevaan järjestykseen&quot;</td></tr><tr><td><code>ariaLabelSortButtonUnset</code></td><td>Aria-label for sort button in the unordered state.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>caption</code></td><td>The caption of the table.</td><td><code>ReactNode</code></td><td>-</td></tr><tr><td><code>checkboxSelection</code></td><td>If set to true, the table displays the checkbox selection column to select rows.</td><td><code>boolean</code></td><td>false</td></tr><tr><td><code>clearSelectionsText</code></td><td>Text for clear selected rows button.</td><td><code>string</code></td><td>&quot;Tyhjennä valinnat&quot;</td></tr><tr><td><code>cols</code></td><td>Columns of the table header row. Defines header name, optional sort icon type and optional cell row transform function.</td><td><code>Header[]</code></td><td>-</td></tr><tr><td><code>customActionButtons</code></td><td>Custom action buttons to place on top of the table.</td><td><code>ReactNode[]</code></td><td>-</td></tr><tr><td><code>dense</code></td><td>If set to true, the dense variant of the table is used.</td><td><code>boolean</code></td><td>false</td></tr><tr><td><code>heading</code></td><td>The table heading.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>headingAriaLevel</code></td><td>The table heading aria-level.</td><td><code>number</code></td><td>2</td></tr><tr><td><code>headingId</code></td><td>Table heading id. Used to name table to assistive technologies. Only applicable when heading prop is used.</td><td><code>string</code></td><td>&quot;hds-table-heading-id&quot;</td></tr><tr><td><code>indexKey</code></td><td>Column key used as a unique identifier for a row</td><td><code>string</code></td><td>-</td></tr><tr><td><code>initialSortingColumnKey</code></td><td>Key indicating a column that you wish to be initially sorted. Use undefined to have no column initially sorted.</td><td><code>string</code></td><td>-</td></tr><tr><td><code>initialSortingOrder</code></td><td>Sorting order applied for initial sorting.</td><td><code>&quot;asc&quot;</code> <code>&quot;desc&quot;</code></td><td>-</td></tr><tr><td><code>onSort</code></td><td>Function for providing side effects before or after the sort. If you want to use the component&#x27;s own sorting function, call the handleSort callback function.</td><td><code>function</code></td><td>-</td></tr><tr><td><code>renderIndexCol</code></td><td>If set to true, the index column is rendered in the table.</td><td><code>boolean</code></td><td>true</td></tr><tr><td><code>rows</code></td><td>Table rows. An array of objects where keys map with the keys of col.</td><td><code>object[]</code></td><td>-</td></tr><tr><td><code>selectAllRowsText</code></td><td>Text for the select all rows button.</td><td><code>string</code></td><td>&quot;Valitse kaikki rivit&quot;</td></tr><tr><td><code>selectedRows</code></td><td>Selected table rows.</td><td><code>SelectedRow[]</code></td><td>-</td></tr><tr><td><code>setSelectedRows</code></td><td>Callback that updates selected rows.</td><td><code>function</code></td><td>-</td></tr><tr><td><code>textAlignContentRight</code></td><td>When set to true, table data cell text content is aligned right. When set to false (default), the text is aligned to left.</td><td><code>boolean</code></td><td>false</td></tr><tr><td><code>variant</code></td><td>Table variant. Use dark for dark brand background colors, and light for light brand background colors.</td><td><code>&quot;light&quot;</code> <code>&quot;dark&quot;</code></td><td><code>&quot;dark&quot;</code></td></tr><tr><td><code>verticalHeaders</code></td><td>Vertical headers of the table.</td><td><code>Header[]</code></td><td>-</td></tr><tr><td><code>verticalLines</code></td><td>If set to true, the table displays vertical lines on columns.</td><td><code>boolean</code></td><td>false</td></tr><tr><td><code>zebra</code></td><td>If set to true, the table uses alternating row colors zebra style.</td><td><code>boolean</code></td><td>false</td></tr></tbody></table></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-526" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-526)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/tabs/tabs/index.html b/docs/hds-1817-stepbystep-docs/components/tabs/tabs/index.html
index eb32f358bd7..7c8c1c92984 100644
--- a/docs/hds-1817-stepbystep-docs/components/tabs/tabs/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/tabs/tabs/index.html
@@ -56,7 +56,7 @@
   </script><link rel="manifest" href="/hds-demo/hds-1817-stepbystep-docs/manifest.webmanifest" crossorigin="anonymous"/><link rel="apple-touch-icon" sizes="any" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/favicon-32x32.ico"/><link rel="apple-touch-icon" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/apple-touch-icon.png"/><link rel="apple-touch-icon" sizes="192x192" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/favicon-192x192.png"/><link rel="apple-touch-icon" sizes="512x512" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/favicon-512x512.png"/><link rel="preconnect" href="https://webanalytics.digiaiiris.com/js"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="page text-body"><header class="hds-header Header-module_header__291GF pageHeader" id="page-header"><div class="Header-module_headerBackgroundWrapper__KsFy2"><a href="#content" class="SkipLink-module_skipLink__1knzF"><span class="SkipLink-module_skipLinkLabel__21n5B">Skip to content</span></a><div class="HeaderActionBar-module_headerActionBarContainer__5tfj-"><div class="HeaderActionBar-module_headerActionBar__lPeGE"><a href="https://hds.hel.fi" aria-label="City of Helsinki Logo" class="HeaderActionBar-module_titleAndLogoContainer__2LEAb HeaderActionBar-module_logo__2r2T0"><span class="HeaderActionBarLogo-module_logoWrapper__8NgfS"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></span></a><a href="https://hds.hel.fi" aria-label="Helsinki: Helsinki Design System" class="HeaderActionBar-module_titleAndLogoContainer__2LEAb HeaderActionBar-module_title__opzt9 HeaderActionBar-module_normal__3B4qi"><span class="HeaderActionBar-module_title__opzt9"><div class="page-header-title"><div>Helsinki Design System</div><div class="page-header-title-badge"><img style="filter:invert(1)" alt="HDS version number: 2.15.0" src="https://img.shields.io/github/v/release/City-of-Helsinki/helsinki-design-system?label=&amp;style=for-the-badge&amp;color=1a1a1a"/></div></div></span></a><div class="HeaderActionBar-module_headerActions__3lNnM"></div></div></div><div class="HeaderNavigationMenu-module_headerNavigationMenuContainer__2nK9z"><nav class="HeaderNavigationMenu-module_headerNavigationMenu__3G6-N"><ul class="HeaderNavigationMenu-module_headerNavigationMenuList__3HIzx"></ul></nav></div></div></header><div class="page-content"><aside class="side-content"><nav class="SideNavigation-module_sideNavigation__3X-9P" id="side-navigation" aria-label="Components"><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS Button-module_fullWidth__31eVK button_hds-button--fullwidth__1_hG9 SideNavigation-module_toggleButton__10tXH" aria-controls="side-navigation-menu" aria-expanded="false" aria-haspopup="true"><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Navigate to page</span><div class="Button-module_icon__O-h7R button_hds-icon__17j8Z" aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-down" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 13.5L17 8.5L18.5 10L12 16.5L5.5 10L7 8.5L12 13.5Z" fill="currentColor"></path></svg></div></button><ul class="SideNavigation-module_mainLevelList__SLZKQ" aria-label="Navigate to page" id="side-navigation-menu"><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Overview" id="side-nav-components" href="/hds-demo/hds-1817-stepbystep-docs/components"><span class="MainLevel-module_label__uWKJ7">Overview</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Accordion" id="side-nav-components-accordion" href="/hds-demo/hds-1817-stepbystep-docs/components/accordion"><span class="MainLevel-module_label__uWKJ7">Accordion</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Breadcrumb" id="side-nav-components-breadcrumb" href="/hds-demo/hds-1817-stepbystep-docs/components/breadcrumb"><span class="MainLevel-module_label__uWKJ7">Breadcrumb</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Button" id="side-nav-components-buttons" href="/hds-demo/hds-1817-stepbystep-docs/components/buttons"><span class="MainLevel-module_label__uWKJ7">Button</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Card" id="side-nav-components-card" href="/hds-demo/hds-1817-stepbystep-docs/components/card"><span class="MainLevel-module_label__uWKJ7">Card</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Checkbox" id="side-nav-components-checkbox" href="/hds-demo/hds-1817-stepbystep-docs/components/checkbox"><span class="MainLevel-module_label__uWKJ7">Checkbox</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="CookieConsent" id="side-nav-components-cookie-consent" href="/hds-demo/hds-1817-stepbystep-docs/components/cookie-consent"><span class="MainLevel-module_label__uWKJ7">CookieConsent</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="DateInput" id="side-nav-components-date-input" href="/hds-demo/hds-1817-stepbystep-docs/components/date-input"><span class="MainLevel-module_label__uWKJ7">DateInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Dialog" id="side-nav-components-dialog" href="/hds-demo/hds-1817-stepbystep-docs/components/dialog"><span class="MainLevel-module_label__uWKJ7">Dialog</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Dropdown" id="side-nav-components-dropdown" href="/hds-demo/hds-1817-stepbystep-docs/components/dropdown"><span class="MainLevel-module_label__uWKJ7">Dropdown</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Fieldset" id="side-nav-components-fieldset" href="/hds-demo/hds-1817-stepbystep-docs/components/fieldset"><span class="MainLevel-module_label__uWKJ7">Fieldset</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="FileInput" id="side-nav-components-file-input" href="/hds-demo/hds-1817-stepbystep-docs/components/file-input"><span class="MainLevel-module_label__uWKJ7">FileInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Footer" id="side-nav-components-footer" href="/hds-demo/hds-1817-stepbystep-docs/components/footer"><span class="MainLevel-module_label__uWKJ7">Footer</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Header" id="side-nav-components-header" href="/hds-demo/hds-1817-stepbystep-docs/components/header"><span class="MainLevel-module_label__uWKJ7">Header</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Hero" id="side-nav-components-hero" href="/hds-demo/hds-1817-stepbystep-docs/components/hero"><span class="MainLevel-module_label__uWKJ7">Hero</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Highlight" id="side-nav-components-highlight" href="/hds-demo/hds-1817-stepbystep-docs/components/highlight"><span class="MainLevel-module_label__uWKJ7">Highlight</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Icon" id="side-nav-components-icon" href="/hds-demo/hds-1817-stepbystep-docs/components/icon"><span class="MainLevel-module_label__uWKJ7">Icon</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Koros" id="side-nav-components-koros" href="/hds-demo/hds-1817-stepbystep-docs/components/koros"><span class="MainLevel-module_label__uWKJ7">Koros</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Link" id="side-nav-components-link" href="/hds-demo/hds-1817-stepbystep-docs/components/link"><span class="MainLevel-module_label__uWKJ7">Link</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Linkbox" id="side-nav-components-linkbox" href="/hds-demo/hds-1817-stepbystep-docs/components/linkbox"><span class="MainLevel-module_label__uWKJ7">Linkbox</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="LoadingSpinner" id="side-nav-components-loading-spinner" href="/hds-demo/hds-1817-stepbystep-docs/components/loading-spinner"><span class="MainLevel-module_label__uWKJ7">LoadingSpinner</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Logo" id="side-nav-components-logo" href="/hds-demo/hds-1817-stepbystep-docs/components/logo"><span class="MainLevel-module_label__uWKJ7">Logo</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Notification" id="side-nav-components-notification" href="/hds-demo/hds-1817-stepbystep-docs/components/notification"><span class="MainLevel-module_label__uWKJ7">Notification</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="NumberInput" id="side-nav-components-number-input" href="/hds-demo/hds-1817-stepbystep-docs/components/number-input"><span class="MainLevel-module_label__uWKJ7">NumberInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Pagination" id="side-nav-components-pagination" href="/hds-demo/hds-1817-stepbystep-docs/components/pagination"><span class="MainLevel-module_label__uWKJ7">Pagination</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="PasswordInput" id="side-nav-components-password-input" href="/hds-demo/hds-1817-stepbystep-docs/components/password-input"><span class="MainLevel-module_label__uWKJ7">PasswordInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="PhoneInput" id="side-nav-components-phone-input" href="/hds-demo/hds-1817-stepbystep-docs/components/phone-input"><span class="MainLevel-module_label__uWKJ7">PhoneInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="RadioButton" id="side-nav-components-radio-button" href="/hds-demo/hds-1817-stepbystep-docs/components/radio-button"><span class="MainLevel-module_label__uWKJ7">RadioButton</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="SearchInput" id="side-nav-components-search-input" href="/hds-demo/hds-1817-stepbystep-docs/components/search-input"><span class="MainLevel-module_label__uWKJ7">SearchInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="SelectionGroup" id="side-nav-components-selection-group" href="/hds-demo/hds-1817-stepbystep-docs/components/selection-group"><span class="MainLevel-module_label__uWKJ7">SelectionGroup</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="SideNavigation" id="side-nav-components-side-navigation" href="/hds-demo/hds-1817-stepbystep-docs/components/side-navigation"><span class="MainLevel-module_label__uWKJ7">SideNavigation</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="StatusLabel" id="side-nav-components-status-label" href="/hds-demo/hds-1817-stepbystep-docs/components/status-label"><span class="MainLevel-module_label__uWKJ7">StatusLabel</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="StepByStep" id="side-nav-components-step-by-step" href="/hds-demo/hds-1817-stepbystep-docs/components/step-by-step"><span class="MainLevel-module_label__uWKJ7">StepByStep</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Stepper" id="side-nav-components-stepper" href="/hds-demo/hds-1817-stepbystep-docs/components/stepper"><span class="MainLevel-module_label__uWKJ7">Stepper</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Table" id="side-nav-components-table" href="/hds-demo/hds-1817-stepbystep-docs/components/table"><span class="MainLevel-module_label__uWKJ7">Table</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_active__3IkdI MainLevel-module_open__2yWFj"><a aria-current="page" aria-label="Tabs" id="side-nav-components-tabs" href="/hds-demo/hds-1817-stepbystep-docs/components/tabs"><span class="MainLevel-module_label__uWKJ7">Tabs</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Tag" id="side-nav-components-tag" href="/hds-demo/hds-1817-stepbystep-docs/components/tag"><span class="MainLevel-module_label__uWKJ7">Tag</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="TextArea" id="side-nav-components-text-area" href="/hds-demo/hds-1817-stepbystep-docs/components/text-area"><span class="MainLevel-module_label__uWKJ7">TextArea</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="TextInput" id="side-nav-components-text-input" href="/hds-demo/hds-1817-stepbystep-docs/components/text-input"><span class="MainLevel-module_label__uWKJ7">TextInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="TimeInput" id="side-nav-components-time-input" href="/hds-demo/hds-1817-stepbystep-docs/components/time-input"><span class="MainLevel-module_label__uWKJ7">TimeInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="ToggleButton" id="side-nav-components-toggle-button" href="/hds-demo/hds-1817-stepbystep-docs/components/toggle-button"><span class="MainLevel-module_label__uWKJ7">ToggleButton</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Tooltip" id="side-nav-components-tooltip" href="/hds-demo/hds-1817-stepbystep-docs/components/tooltip"><span class="MainLevel-module_label__uWKJ7">Tooltip</span></a></li></ul></nav></aside><main id="content" class="main-content"><h1 id="tabs" style="position:relative" class="page-heading-1 heading-xl-mobile">Tabs<a href="#tabs" aria-label="tabs permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h1>
 <div class="status-label-description"><span class="StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H">Stable</span><span class="StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST" style="margin-left:var(--spacing-xs)">Accessible</span><div class="Tooltip-module_root__1Yo9t status-label-tooltip"><button type="button" class="Tooltip-module_button__2x9m0" title="Tooltip" aria-label="Tooltip" aria-expanded="false"><span aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="question-circle" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM13 16V18H11V16H13ZM12.0437 5.75C14.0343 5.75 15.7173 7.29464 15.7173 9.42361C15.7173 10.7806 15.2461 11.489 14.161 12.306L13.9187 12.4844C13.1753 13.0295 12.9556 13.3359 12.9386 14.142L12.9375 14.25H10.9375C10.9375 12.6746 11.4591 11.8378 12.6143 10.9622L12.8618 10.7796C13.5685 10.2628 13.7173 10.0539 13.7173 9.42361C13.7173 8.43934 12.9662 7.75 12.0437 7.75C11.1907 7.75 10.4785 8.34077 10.3816 9.20835L10.3734 9.30587L8.37663 9.19182C8.49191 7.17347 10.1344 5.75 12.0437 5.75Z" fill="currentColor"></path></svg></span></button></div></div>
 <p style="font-size:var(--fontsize-body-xl);color:var(--color-black-90);max-width:600px">Tabs are used to help the user browse and navigate between information contents that have a relation.</p>
-<div class="Tabs-module_tabs__2Ww5F"><div class="Tabs-module_tablistBar__elMv9 page-tabs-list"><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-left" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 12L15.5 17L14 18.5L7.5 12L14 5.5L15.5 7L10.5 12Z" fill="currentColor"></path></svg></button></div><div class="Tabs-module_tablist__1iuDO"><ul role="tablist" style="width:0px"><li role="tab" aria-selected="true" aria-controls="tab-0-panel" tabindex="0" id="tab-0-button" class="Tabs-module_tab__3oOoX Tabs-module_active__1Ic3B"><span>Usage</span></li><li role="tab" aria-selected="false" aria-controls="tab-1-panel" tabindex="-1" id="tab-1-button" class="Tabs-module_tab__3oOoX"><span>Code</span></li><li role="tab" aria-selected="false" aria-controls="tab-2-panel" tabindex="-1" id="tab-2-button" class="Tabs-module_tab__3oOoX"><span>Accessibility</span></li><li role="tab" aria-selected="false" aria-controls="tab-3-panel" tabindex="-1" id="tab-3-button" class="Tabs-module_tab__3oOoX"><span>Customisation</span></li></ul></div><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z" fill="currentColor"></path></svg></button></div></div><div id="tab-0-panel" role="tabpanel" aria-labelledby="tab-0-button"></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-508" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-508)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="Tabs-module_tabs__2Ww5F"><div class="Tabs-module_tablistBar__elMv9 page-tabs-list"><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-left" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 12L15.5 17L14 18.5L7.5 12L14 5.5L15.5 7L10.5 12Z" fill="currentColor"></path></svg></button></div><div class="Tabs-module_tablist__1iuDO"><ul role="tablist" style="width:0px"><li role="tab" aria-selected="true" aria-controls="tab-0-panel" tabindex="0" id="tab-0-button" class="Tabs-module_tab__3oOoX Tabs-module_active__1Ic3B"><span>Usage</span></li><li role="tab" aria-selected="false" aria-controls="tab-1-panel" tabindex="-1" id="tab-1-button" class="Tabs-module_tab__3oOoX"><span>Code</span></li><li role="tab" aria-selected="false" aria-controls="tab-2-panel" tabindex="-1" id="tab-2-button" class="Tabs-module_tab__3oOoX"><span>Accessibility</span></li><li role="tab" aria-selected="false" aria-controls="tab-3-panel" tabindex="-1" id="tab-3-button" class="Tabs-module_tab__3oOoX"><span>Customisation</span></li></ul></div><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z" fill="currentColor"></path></svg></button></div></div><div id="tab-0-panel" role="tabpanel" aria-labelledby="tab-0-button"></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-507" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-507)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/tag/accessibility/index.html b/docs/hds-1817-stepbystep-docs/components/tag/accessibility/index.html
index 993fd6efcc5..829be2e5389 100644
--- a/docs/hds-1817-stepbystep-docs/components/tag/accessibility/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/tag/accessibility/index.html
@@ -73,7 +73,7 @@ <h3 id="which-role-attribute-should-be-used-with-tags" style="position:relative"
 <li>If, however, the tag will result in the page&#x27;s content being dynamically changed (i.e. Tag triggers an action), use <code>role=“button”</code>. Example: Clicking the tag will cause a search below to be filtered.</li>
 </ul>
 </li>
-</ul></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-507" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-507)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+</ul></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-508" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-508)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/text-area/accessibility/index.html b/docs/hds-1817-stepbystep-docs/components/text-area/accessibility/index.html
index d72990076a1..d717941fd0d 100644
--- a/docs/hds-1817-stepbystep-docs/components/text-area/accessibility/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/text-area/accessibility/index.html
@@ -62,7 +62,7 @@ <h3 id="pay-attention-to" style="position:relative" class="page-heading-3 headin
 <li>Placeholder text can be used to give hints and examples to the user what should be entered to the field. <strong>However, all assistive technologies do not threat placeholder texts as labels and therefore they may ignore them completely.</strong> Aim to provide the sufficient information to fill the input in the label.</li>
 <li>It is required to use <code>autocomplete</code> attribute if input control is listed in the common input purposes list. You can read the full list of common input purposes at <a aria-label="WCAG 2.1 documentation website. Opens a different website." class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="https://www.w3.org/TR/WCAG21/#input-purposes">WCAG 2.1 documentation website<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Link-module_icon__3ReCc link_icon__i_HqN Link-module_verticalAlignMediumIcon__12PVa link_vertical-align-medium-icon__3IWi1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="link-external" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z" fill="currentColor"></path></svg></a>. You can read more about the requirement from <a aria-label="WCAG 2.1 Identify Input Purpose guideline. Opens a different website." class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose">WCAG 2.1 Identify Input Purpose guideline<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Link-module_icon__3ReCc link_icon__i_HqN Link-module_verticalAlignMediumIcon__12PVa link_vertical-align-medium-icon__3IWi1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="link-external" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z" fill="currentColor"></path></svg></a>.</li>
 <li>In the case of an erroneous input, aim to provide clear instructions to the user on how to correct the mistake. Always provide a text description of the error.</li>
-</ul></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-496" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-496)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+</ul></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-497" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-497)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/text-input/accessibility/index.html b/docs/hds-1817-stepbystep-docs/components/text-input/accessibility/index.html
index 8a218c94f96..81683aeb74b 100644
--- a/docs/hds-1817-stepbystep-docs/components/text-input/accessibility/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/text-input/accessibility/index.html
@@ -62,7 +62,7 @@ <h3 id="pay-attention-to" style="position:relative" class="page-heading-3 headin
 <li>Placeholder text can be used to give hints and examples to the user what should be entered to the field. <strong>However, all assistive technologies do not treat placeholder texts as labels and therefore they may ignore them completely.</strong> Aim to provide the sufficient information to fill the input in the label.</li>
 <li>It is required to use <code>autocomplete</code> attribute if input control is listed in the common input purposes list. You can read the full list of common input purposes at <a aria-label="WCAG 2.1 documentation website. Opens a different website." class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="https://www.w3.org/TR/WCAG21/#input-purposes">WCAG 2.1 documentation website<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Link-module_icon__3ReCc link_icon__i_HqN Link-module_verticalAlignMediumIcon__12PVa link_vertical-align-medium-icon__3IWi1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="link-external" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z" fill="currentColor"></path></svg></a>. You can read more about the requirement from <a aria-label="WCAG 2.1 Identify Input Purpose guideline. Opens a different website." class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose">WCAG 2.1 Identify Input Purpose guideline<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Link-module_icon__3ReCc link_icon__i_HqN Link-module_verticalAlignMediumIcon__12PVa link_vertical-align-medium-icon__3IWi1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="link-external" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z" fill="currentColor"></path></svg></a>.</li>
 <li>In the case of an erroneous input, aim to provide clear instructions to the user on how to correct the mistake. Always provide a text description of the error.</li>
-</ul></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-489" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-489)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+</ul></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-488" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-488)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/text-input/index.html b/docs/hds-1817-stepbystep-docs/components/text-input/index.html
index 33e581bae75..7d9d1035c11 100644
--- a/docs/hds-1817-stepbystep-docs/components/text-input/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/text-input/index.html
@@ -78,7 +78,7 @@ <h4 id="read-only" style="position:relative" class="page-heading-4 heading-s">Re
 <div class="playground-block-preview playground-block-preview-light"><div class="TextInput-module_root__2CMNr text-input_hds-text-input__2LODq" style="max-width:320px"><label for="textinput-readonly" class="FieldLabel-module_label__1zrXK ">Label</label><div class="TextInput-module_inputWrapper__3Rvel text-input_hds-text-input__input-wrapper__1OqYG"><input class="TextInput-module_input__1BlHi text-input_hds-text-input__input__GJm5C" id="textinput-readonly" type="text" aria-describedby="textinput-readonly-helper" readonly="" value="Read-only value"/></div><div class="TextInput-module_helperText__2dLR6 text-input_hds-text-input__helper-text__3V2KM" id="textinput-readonly-helper">Assistive text</div></div></div>
 <h4 id="with-tooltip" style="position:relative" class="page-heading-4 heading-s">With tooltip<a href="#with-tooltip" aria-label="with tooltip permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h4>
 <p>A text input can be provided with additional tooltip. Tooltip information should be considered as extra information, for example, why this information is gathered or how is it used. The user should have sufficient information on how to fill the input field in label and assistive text. You can find more information about Tooltips how they are used from the <a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/hds-demo/hds-1817-stepbystep-docs/components/tooltip">Tooltip documentation page</a>.</p>
-<div class="playground-block-preview playground-block-preview-light"><div class="TextInput-module_root__2CMNr text-input_hds-text-input__2LODq" style="max-width:320px"><label for="textinput-tooltip" class="FieldLabel-module_label__1zrXK ">Label</label><div class="Tooltip-module_root__1Yo9t"><button type="button" class="Tooltip-module_button__2x9m0 FieldLabel-module_tooltipButton__1My3f" title="Tooltip button label" aria-label="Tooltip button label" aria-expanded="false"><span aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="question-circle" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM13 16V18H11V16H13ZM12.0437 5.75C14.0343 5.75 15.7173 7.29464 15.7173 9.42361C15.7173 10.7806 15.2461 11.489 14.161 12.306L13.9187 12.4844C13.1753 13.0295 12.9556 13.3359 12.9386 14.142L12.9375 14.25H10.9375C10.9375 12.6746 11.4591 11.8378 12.6143 10.9622L12.8618 10.7796C13.5685 10.2628 13.7173 10.0539 13.7173 9.42361C13.7173 8.43934 12.9662 7.75 12.0437 7.75C11.1907 7.75 10.4785 8.34077 10.3816 9.20835L10.3734 9.30587L8.37663 9.19182C8.49191 7.17347 10.1344 5.75 12.0437 5.75Z" fill="currentColor"></path></svg></span></button></div><div class="TextInput-module_inputWrapper__3Rvel text-input_hds-text-input__input-wrapper__1OqYG"><input class="TextInput-module_input__1BlHi text-input_hds-text-input__input__GJm5C" id="textinput-tooltip" type="text" placeholder="Placeholder"/></div></div></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-485" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-485)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="playground-block-preview playground-block-preview-light"><div class="TextInput-module_root__2CMNr text-input_hds-text-input__2LODq" style="max-width:320px"><label for="textinput-tooltip" class="FieldLabel-module_label__1zrXK ">Label</label><div class="Tooltip-module_root__1Yo9t"><button type="button" class="Tooltip-module_button__2x9m0 FieldLabel-module_tooltipButton__1My3f" title="Tooltip button label" aria-label="Tooltip button label" aria-expanded="false"><span aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="question-circle" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM13 16V18H11V16H13ZM12.0437 5.75C14.0343 5.75 15.7173 7.29464 15.7173 9.42361C15.7173 10.7806 15.2461 11.489 14.161 12.306L13.9187 12.4844C13.1753 13.0295 12.9556 13.3359 12.9386 14.142L12.9375 14.25H10.9375C10.9375 12.6746 11.4591 11.8378 12.6143 10.9622L12.8618 10.7796C13.5685 10.2628 13.7173 10.0539 13.7173 9.42361C13.7173 8.43934 12.9662 7.75 12.0437 7.75C11.1907 7.75 10.4785 8.34077 10.3816 9.20835L10.3734 9.30587L8.37663 9.19182C8.49191 7.17347 10.1344 5.75 12.0437 5.75Z" fill="currentColor"></path></svg></span></button></div><div class="TextInput-module_inputWrapper__3Rvel text-input_hds-text-input__input-wrapper__1OqYG"><input class="TextInput-module_input__1BlHi text-input_hds-text-input__input__GJm5C" id="textinput-tooltip" type="text" placeholder="Placeholder"/></div></div></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-484" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-484)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/time-input/accessibility/index.html b/docs/hds-1817-stepbystep-docs/components/time-input/accessibility/index.html
index b85a892860a..88ef8d8c16a 100644
--- a/docs/hds-1817-stepbystep-docs/components/time-input/accessibility/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/time-input/accessibility/index.html
@@ -62,7 +62,7 @@ <h3 id="pay-attention-to" style="position:relative" class="page-heading-3 headin
 <li><strong>Note! <code>hoursLabel</code> and <code>minutesLabel</code> are required properties.</strong> They improve component navigation for screen reader users.</li>
 <li>HDS time input allows the user to input the date manually. Whenever you require the user to input times, you should also allow the manual input.</li>
 <li>Be wary of automatically correcting input for the user. If this is done, the user (especially with screen readers) needs to be clearly notified about the change.</li>
-</ul></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-481" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-481)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+</ul></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-480" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-480)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/tooltip/accessibility/index.html b/docs/hds-1817-stepbystep-docs/components/tooltip/accessibility/index.html
index 21e527468c8..f22848ac62e 100644
--- a/docs/hds-1817-stepbystep-docs/components/tooltip/accessibility/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/tooltip/accessibility/index.html
@@ -62,7 +62,7 @@ <h3 id="pay-attention-to" style="position:relative" class="page-heading-3 headin
 <li>Even though HDS Tooltip does not include a visual title, one must be included for screen readers via using <code>aria-label</code>. The label can be as simple as &quot;Info&quot; but it can also feature more detailed description such as &quot;More information about filling your personal details&quot;.</li>
 <li>If a Tooltip contains a link, always open them to a new window, so that the process of filling the form is not interrupted.</li>
 <li>Do not make the tooltip open on hover. The user should be able to select the text inside the tooltip element.</li>
-</ul></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-463" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-463)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+</ul></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-462" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-462)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/tooltip/index.html b/docs/hds-1817-stepbystep-docs/components/tooltip/index.html
index ef7212820d7..062cd5b5f1b 100644
--- a/docs/hds-1817-stepbystep-docs/components/tooltip/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/tooltip/index.html
@@ -80,7 +80,7 @@ <h4 id="small" style="position:relative" class="page-heading-4 heading-s">Small<
 <h4 id="positioning" style="position:relative" class="page-heading-4 heading-s">Positioning<a href="#positioning" aria-label="positioning permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h4>
 <p>HDS Tooltip implementation has automatic placement feature. It will automatically try to keep the Tooltip in the view and dynamically updates the positioning if the screen size changes. Tooltip positioning can also be overridden manually.</p>
 <p>There are 15 available position settings. Please refer to the Code tab for all examples.</p>
-<div class="playground-block-preview playground-block-preview-light"><div class="Tooltip-module_root__1Yo9t"><button type="button" class="Tooltip-module_button__2x9m0" title="Tooltip" aria-label="Tooltip" aria-expanded="false"><span aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="question-circle" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM13 16V18H11V16H13ZM12.0437 5.75C14.0343 5.75 15.7173 7.29464 15.7173 9.42361C15.7173 10.7806 15.2461 11.489 14.161 12.306L13.9187 12.4844C13.1753 13.0295 12.9556 13.3359 12.9386 14.142L12.9375 14.25H10.9375C10.9375 12.6746 11.4591 11.8378 12.6143 10.9622L12.8618 10.7796C13.5685 10.2628 13.7173 10.0539 13.7173 9.42361C13.7173 8.43934 12.9662 7.75 12.0437 7.75C11.1907 7.75 10.4785 8.34077 10.3816 9.20835L10.3734 9.30587L8.37663 9.19182C8.49191 7.17347 10.1344 5.75 12.0437 5.75Z" fill="currentColor"></path></svg></span></button></div><div class="Tooltip-module_root__1Yo9t"><button type="button" class="Tooltip-module_button__2x9m0" title="Tooltip" aria-label="Tooltip" aria-expanded="false"><span aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="question-circle" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM13 16V18H11V16H13ZM12.0437 5.75C14.0343 5.75 15.7173 7.29464 15.7173 9.42361C15.7173 10.7806 15.2461 11.489 14.161 12.306L13.9187 12.4844C13.1753 13.0295 12.9556 13.3359 12.9386 14.142L12.9375 14.25H10.9375C10.9375 12.6746 11.4591 11.8378 12.6143 10.9622L12.8618 10.7796C13.5685 10.2628 13.7173 10.0539 13.7173 9.42361C13.7173 8.43934 12.9662 7.75 12.0437 7.75C11.1907 7.75 10.4785 8.34077 10.3816 9.20835L10.3734 9.30587L8.37663 9.19182C8.49191 7.17347 10.1344 5.75 12.0437 5.75Z" fill="currentColor"></path></svg></span></button></div></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-557" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-557)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="playground-block-preview playground-block-preview-light"><div class="Tooltip-module_root__1Yo9t"><button type="button" class="Tooltip-module_button__2x9m0" title="Tooltip" aria-label="Tooltip" aria-expanded="false"><span aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="question-circle" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM13 16V18H11V16H13ZM12.0437 5.75C14.0343 5.75 15.7173 7.29464 15.7173 9.42361C15.7173 10.7806 15.2461 11.489 14.161 12.306L13.9187 12.4844C13.1753 13.0295 12.9556 13.3359 12.9386 14.142L12.9375 14.25H10.9375C10.9375 12.6746 11.4591 11.8378 12.6143 10.9622L12.8618 10.7796C13.5685 10.2628 13.7173 10.0539 13.7173 9.42361C13.7173 8.43934 12.9662 7.75 12.0437 7.75C11.1907 7.75 10.4785 8.34077 10.3816 9.20835L10.3734 9.30587L8.37663 9.19182C8.49191 7.17347 10.1344 5.75 12.0437 5.75Z" fill="currentColor"></path></svg></span></button></div><div class="Tooltip-module_root__1Yo9t"><button type="button" class="Tooltip-module_button__2x9m0" title="Tooltip" aria-label="Tooltip" aria-expanded="false"><span aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="question-circle" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM13 16V18H11V16H13ZM12.0437 5.75C14.0343 5.75 15.7173 7.29464 15.7173 9.42361C15.7173 10.7806 15.2461 11.489 14.161 12.306L13.9187 12.4844C13.1753 13.0295 12.9556 13.3359 12.9386 14.142L12.9375 14.25H10.9375C10.9375 12.6746 11.4591 11.8378 12.6143 10.9622L12.8618 10.7796C13.5685 10.2628 13.7173 10.0539 13.7173 9.42361C13.7173 8.43934 12.9662 7.75 12.0437 7.75C11.1907 7.75 10.4785 8.34077 10.3816 9.20835L10.3734 9.30587L8.37663 9.19182C8.49191 7.17347 10.1344 5.75 12.0437 5.75Z" fill="currentColor"></path></svg></span></button></div></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-558" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-558)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/components/tooltip/tabs/index.html b/docs/hds-1817-stepbystep-docs/components/tooltip/tabs/index.html
index c1dbb9b27a7..bc21ef2f182 100644
--- a/docs/hds-1817-stepbystep-docs/components/tooltip/tabs/index.html
+++ b/docs/hds-1817-stepbystep-docs/components/tooltip/tabs/index.html
@@ -56,7 +56,7 @@
   </script><link rel="manifest" href="/hds-demo/hds-1817-stepbystep-docs/manifest.webmanifest" crossorigin="anonymous"/><link rel="apple-touch-icon" sizes="any" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/favicon-32x32.ico"/><link rel="apple-touch-icon" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/apple-touch-icon.png"/><link rel="apple-touch-icon" sizes="192x192" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/favicon-192x192.png"/><link rel="apple-touch-icon" sizes="512x512" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/favicon-512x512.png"/><link rel="preconnect" href="https://webanalytics.digiaiiris.com/js"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="page text-body"><header class="hds-header Header-module_header__291GF pageHeader" id="page-header"><div class="Header-module_headerBackgroundWrapper__KsFy2"><a href="#content" class="SkipLink-module_skipLink__1knzF"><span class="SkipLink-module_skipLinkLabel__21n5B">Skip to content</span></a><div class="HeaderActionBar-module_headerActionBarContainer__5tfj-"><div class="HeaderActionBar-module_headerActionBar__lPeGE"><a href="https://hds.hel.fi" aria-label="City of Helsinki Logo" class="HeaderActionBar-module_titleAndLogoContainer__2LEAb HeaderActionBar-module_logo__2r2T0"><span class="HeaderActionBarLogo-module_logoWrapper__8NgfS"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></span></a><a href="https://hds.hel.fi" aria-label="Helsinki: Helsinki Design System" class="HeaderActionBar-module_titleAndLogoContainer__2LEAb HeaderActionBar-module_title__opzt9 HeaderActionBar-module_normal__3B4qi"><span class="HeaderActionBar-module_title__opzt9"><div class="page-header-title"><div>Helsinki Design System</div><div class="page-header-title-badge"><img style="filter:invert(1)" alt="HDS version number: 2.15.0" src="https://img.shields.io/github/v/release/City-of-Helsinki/helsinki-design-system?label=&amp;style=for-the-badge&amp;color=1a1a1a"/></div></div></span></a><div class="HeaderActionBar-module_headerActions__3lNnM"></div></div></div><div class="HeaderNavigationMenu-module_headerNavigationMenuContainer__2nK9z"><nav class="HeaderNavigationMenu-module_headerNavigationMenu__3G6-N"><ul class="HeaderNavigationMenu-module_headerNavigationMenuList__3HIzx"></ul></nav></div></div></header><div class="page-content"><aside class="side-content"><nav class="SideNavigation-module_sideNavigation__3X-9P" id="side-navigation" aria-label="Components"><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS Button-module_fullWidth__31eVK button_hds-button--fullwidth__1_hG9 SideNavigation-module_toggleButton__10tXH" aria-controls="side-navigation-menu" aria-expanded="false" aria-haspopup="true"><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Navigate to page</span><div class="Button-module_icon__O-h7R button_hds-icon__17j8Z" aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-down" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 13.5L17 8.5L18.5 10L12 16.5L5.5 10L7 8.5L12 13.5Z" fill="currentColor"></path></svg></div></button><ul class="SideNavigation-module_mainLevelList__SLZKQ" aria-label="Navigate to page" id="side-navigation-menu"><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Overview" id="side-nav-components" href="/hds-demo/hds-1817-stepbystep-docs/components"><span class="MainLevel-module_label__uWKJ7">Overview</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Accordion" id="side-nav-components-accordion" href="/hds-demo/hds-1817-stepbystep-docs/components/accordion"><span class="MainLevel-module_label__uWKJ7">Accordion</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Breadcrumb" id="side-nav-components-breadcrumb" href="/hds-demo/hds-1817-stepbystep-docs/components/breadcrumb"><span class="MainLevel-module_label__uWKJ7">Breadcrumb</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Button" id="side-nav-components-buttons" href="/hds-demo/hds-1817-stepbystep-docs/components/buttons"><span class="MainLevel-module_label__uWKJ7">Button</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Card" id="side-nav-components-card" href="/hds-demo/hds-1817-stepbystep-docs/components/card"><span class="MainLevel-module_label__uWKJ7">Card</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Checkbox" id="side-nav-components-checkbox" href="/hds-demo/hds-1817-stepbystep-docs/components/checkbox"><span class="MainLevel-module_label__uWKJ7">Checkbox</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="CookieConsent" id="side-nav-components-cookie-consent" href="/hds-demo/hds-1817-stepbystep-docs/components/cookie-consent"><span class="MainLevel-module_label__uWKJ7">CookieConsent</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="DateInput" id="side-nav-components-date-input" href="/hds-demo/hds-1817-stepbystep-docs/components/date-input"><span class="MainLevel-module_label__uWKJ7">DateInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Dialog" id="side-nav-components-dialog" href="/hds-demo/hds-1817-stepbystep-docs/components/dialog"><span class="MainLevel-module_label__uWKJ7">Dialog</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Dropdown" id="side-nav-components-dropdown" href="/hds-demo/hds-1817-stepbystep-docs/components/dropdown"><span class="MainLevel-module_label__uWKJ7">Dropdown</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Fieldset" id="side-nav-components-fieldset" href="/hds-demo/hds-1817-stepbystep-docs/components/fieldset"><span class="MainLevel-module_label__uWKJ7">Fieldset</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="FileInput" id="side-nav-components-file-input" href="/hds-demo/hds-1817-stepbystep-docs/components/file-input"><span class="MainLevel-module_label__uWKJ7">FileInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Footer" id="side-nav-components-footer" href="/hds-demo/hds-1817-stepbystep-docs/components/footer"><span class="MainLevel-module_label__uWKJ7">Footer</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Header" id="side-nav-components-header" href="/hds-demo/hds-1817-stepbystep-docs/components/header"><span class="MainLevel-module_label__uWKJ7">Header</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Hero" id="side-nav-components-hero" href="/hds-demo/hds-1817-stepbystep-docs/components/hero"><span class="MainLevel-module_label__uWKJ7">Hero</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Highlight" id="side-nav-components-highlight" href="/hds-demo/hds-1817-stepbystep-docs/components/highlight"><span class="MainLevel-module_label__uWKJ7">Highlight</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Icon" id="side-nav-components-icon" href="/hds-demo/hds-1817-stepbystep-docs/components/icon"><span class="MainLevel-module_label__uWKJ7">Icon</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Koros" id="side-nav-components-koros" href="/hds-demo/hds-1817-stepbystep-docs/components/koros"><span class="MainLevel-module_label__uWKJ7">Koros</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Link" id="side-nav-components-link" href="/hds-demo/hds-1817-stepbystep-docs/components/link"><span class="MainLevel-module_label__uWKJ7">Link</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Linkbox" id="side-nav-components-linkbox" href="/hds-demo/hds-1817-stepbystep-docs/components/linkbox"><span class="MainLevel-module_label__uWKJ7">Linkbox</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="LoadingSpinner" id="side-nav-components-loading-spinner" href="/hds-demo/hds-1817-stepbystep-docs/components/loading-spinner"><span class="MainLevel-module_label__uWKJ7">LoadingSpinner</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Logo" id="side-nav-components-logo" href="/hds-demo/hds-1817-stepbystep-docs/components/logo"><span class="MainLevel-module_label__uWKJ7">Logo</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Notification" id="side-nav-components-notification" href="/hds-demo/hds-1817-stepbystep-docs/components/notification"><span class="MainLevel-module_label__uWKJ7">Notification</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="NumberInput" id="side-nav-components-number-input" href="/hds-demo/hds-1817-stepbystep-docs/components/number-input"><span class="MainLevel-module_label__uWKJ7">NumberInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Pagination" id="side-nav-components-pagination" href="/hds-demo/hds-1817-stepbystep-docs/components/pagination"><span class="MainLevel-module_label__uWKJ7">Pagination</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="PasswordInput" id="side-nav-components-password-input" href="/hds-demo/hds-1817-stepbystep-docs/components/password-input"><span class="MainLevel-module_label__uWKJ7">PasswordInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="PhoneInput" id="side-nav-components-phone-input" href="/hds-demo/hds-1817-stepbystep-docs/components/phone-input"><span class="MainLevel-module_label__uWKJ7">PhoneInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="RadioButton" id="side-nav-components-radio-button" href="/hds-demo/hds-1817-stepbystep-docs/components/radio-button"><span class="MainLevel-module_label__uWKJ7">RadioButton</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="SearchInput" id="side-nav-components-search-input" href="/hds-demo/hds-1817-stepbystep-docs/components/search-input"><span class="MainLevel-module_label__uWKJ7">SearchInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="SelectionGroup" id="side-nav-components-selection-group" href="/hds-demo/hds-1817-stepbystep-docs/components/selection-group"><span class="MainLevel-module_label__uWKJ7">SelectionGroup</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="SideNavigation" id="side-nav-components-side-navigation" href="/hds-demo/hds-1817-stepbystep-docs/components/side-navigation"><span class="MainLevel-module_label__uWKJ7">SideNavigation</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="StatusLabel" id="side-nav-components-status-label" href="/hds-demo/hds-1817-stepbystep-docs/components/status-label"><span class="MainLevel-module_label__uWKJ7">StatusLabel</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="StepByStep" id="side-nav-components-step-by-step" href="/hds-demo/hds-1817-stepbystep-docs/components/step-by-step"><span class="MainLevel-module_label__uWKJ7">StepByStep</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Stepper" id="side-nav-components-stepper" href="/hds-demo/hds-1817-stepbystep-docs/components/stepper"><span class="MainLevel-module_label__uWKJ7">Stepper</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Table" id="side-nav-components-table" href="/hds-demo/hds-1817-stepbystep-docs/components/table"><span class="MainLevel-module_label__uWKJ7">Table</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Tabs" id="side-nav-components-tabs" href="/hds-demo/hds-1817-stepbystep-docs/components/tabs"><span class="MainLevel-module_label__uWKJ7">Tabs</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Tag" id="side-nav-components-tag" href="/hds-demo/hds-1817-stepbystep-docs/components/tag"><span class="MainLevel-module_label__uWKJ7">Tag</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="TextArea" id="side-nav-components-text-area" href="/hds-demo/hds-1817-stepbystep-docs/components/text-area"><span class="MainLevel-module_label__uWKJ7">TextArea</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="TextInput" id="side-nav-components-text-input" href="/hds-demo/hds-1817-stepbystep-docs/components/text-input"><span class="MainLevel-module_label__uWKJ7">TextInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="TimeInput" id="side-nav-components-time-input" href="/hds-demo/hds-1817-stepbystep-docs/components/time-input"><span class="MainLevel-module_label__uWKJ7">TimeInput</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="ToggleButton" id="side-nav-components-toggle-button" href="/hds-demo/hds-1817-stepbystep-docs/components/toggle-button"><span class="MainLevel-module_label__uWKJ7">ToggleButton</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_active__3IkdI MainLevel-module_open__2yWFj"><a aria-current="page" aria-label="Tooltip" id="side-nav-components-tooltip" href="/hds-demo/hds-1817-stepbystep-docs/components/tooltip"><span class="MainLevel-module_label__uWKJ7">Tooltip</span></a></li></ul></nav></aside><main id="content" class="main-content"><h1 id="tooltip" style="position:relative" class="page-heading-1 heading-xl-mobile">Tooltip<a href="#tooltip" aria-label="tooltip permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h1>
 <div class="status-label-description"><span class="StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H">Stable</span><span class="StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI StatusLabel-module_success__2BfdX status-label_hds-status-label--success__3jiST" style="margin-left:var(--spacing-xs)">Accessible</span><div class="Tooltip-module_root__1Yo9t status-label-tooltip"><button type="button" class="Tooltip-module_button__2x9m0" title="Tooltip" aria-label="Tooltip" aria-expanded="false"><span aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="question-circle" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM13 16V18H11V16H13ZM12.0437 5.75C14.0343 5.75 15.7173 7.29464 15.7173 9.42361C15.7173 10.7806 15.2461 11.489 14.161 12.306L13.9187 12.4844C13.1753 13.0295 12.9556 13.3359 12.9386 14.142L12.9375 14.25H10.9375C10.9375 12.6746 11.4591 11.8378 12.6143 10.9622L12.8618 10.7796C13.5685 10.2628 13.7173 10.0539 13.7173 9.42361C13.7173 8.43934 12.9662 7.75 12.0437 7.75C11.1907 7.75 10.4785 8.34077 10.3816 9.20835L10.3734 9.30587L8.37663 9.19182C8.49191 7.17347 10.1344 5.75 12.0437 5.75Z" fill="currentColor"></path></svg></span></button></div></div>
 <p style="font-size:var(--fontsize-body-xl);color:var(--color-black-90);max-width:600px">Tooltips are used to present context or background information to the user.</p>
-<div class="Tabs-module_tabs__2Ww5F"><div class="Tabs-module_tablistBar__elMv9 page-tabs-list"><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-left" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 12L15.5 17L14 18.5L7.5 12L14 5.5L15.5 7L10.5 12Z" fill="currentColor"></path></svg></button></div><div class="Tabs-module_tablist__1iuDO"><ul role="tablist" style="width:0px"><li role="tab" aria-selected="true" aria-controls="tab-0-panel" tabindex="0" id="tab-0-button" class="Tabs-module_tab__3oOoX Tabs-module_active__1Ic3B"><span>Usage</span></li><li role="tab" aria-selected="false" aria-controls="tab-1-panel" tabindex="-1" id="tab-1-button" class="Tabs-module_tab__3oOoX"><span>Code</span></li><li role="tab" aria-selected="false" aria-controls="tab-2-panel" tabindex="-1" id="tab-2-button" class="Tabs-module_tab__3oOoX"><span>Accessibility</span></li></ul></div><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z" fill="currentColor"></path></svg></button></div></div><div id="tab-0-panel" role="tabpanel" aria-labelledby="tab-0-button"></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-558" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-558)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="Tabs-module_tabs__2Ww5F"><div class="Tabs-module_tablistBar__elMv9 page-tabs-list"><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-left" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 12L15.5 17L14 18.5L7.5 12L14 5.5L15.5 7L10.5 12Z" fill="currentColor"></path></svg></button></div><div class="Tabs-module_tablist__1iuDO"><ul role="tablist" style="width:0px"><li role="tab" aria-selected="true" aria-controls="tab-0-panel" tabindex="0" id="tab-0-button" class="Tabs-module_tab__3oOoX Tabs-module_active__1Ic3B"><span>Usage</span></li><li role="tab" aria-selected="false" aria-controls="tab-1-panel" tabindex="-1" id="tab-1-button" class="Tabs-module_tab__3oOoX"><span>Code</span></li><li role="tab" aria-selected="false" aria-controls="tab-2-panel" tabindex="-1" id="tab-2-button" class="Tabs-module_tab__3oOoX"><span>Accessibility</span></li></ul></div><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z" fill="currentColor"></path></svg></button></div></div><div id="tab-0-panel" role="tabpanel" aria-labelledby="tab-0-button"></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-557" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-557)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/foundation/design-tokens/breakpoints/index.html b/docs/hds-1817-stepbystep-docs/foundation/design-tokens/breakpoints/index.html
index baddfc10f82..c5c58577350 100644
--- a/docs/hds-1817-stepbystep-docs/foundation/design-tokens/breakpoints/index.html
+++ b/docs/hds-1817-stepbystep-docs/foundation/design-tokens/breakpoints/index.html
@@ -86,7 +86,7 @@ <h3 id="using-breakpoint-tokens" style="position:relative" class="page-heading-3
 <li><strong>Container width token</strong> defines maximum container width.</li>
 </ul>
 <p>When breakpoints change the left and right padding of the container changes. It is recommended to use the provided padding values because they match with <a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/hds-demo/hds-1817-stepbystep-docs/components/navigation">HDS Navigation</a> and <a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/hds-demo/hds-1817-stepbystep-docs/components/footer">HDS Footer</a> paddings. You can find these paddings on the <a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/hds-demo/hds-1817-stepbystep-docs/foundation/design-tokens/breakpoints/tokens">HDS Breakpoints tokens tab.</a></p>
-<p>The maximum content container width is always <code>--container-width-xl</code> (1200px). When the viewport width is below this value, the content container always takes all available space.</p></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-587" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-587)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<p>The maximum content container width is always <code>--container-width-xl</code> (1200px). When the viewport width is below this value, the content container always takes all available space.</p></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-586" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-586)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/foundation/design-tokens/colour/tabs/index.html b/docs/hds-1817-stepbystep-docs/foundation/design-tokens/colour/tabs/index.html
index c862b7f2544..5dd79b3cc85 100644
--- a/docs/hds-1817-stepbystep-docs/foundation/design-tokens/colour/tabs/index.html
+++ b/docs/hds-1817-stepbystep-docs/foundation/design-tokens/colour/tabs/index.html
@@ -56,7 +56,7 @@
   </script><link rel="manifest" href="/hds-demo/hds-1817-stepbystep-docs/manifest.webmanifest" crossorigin="anonymous"/><link rel="apple-touch-icon" sizes="any" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/favicon-32x32.ico"/><link rel="apple-touch-icon" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/apple-touch-icon.png"/><link rel="apple-touch-icon" sizes="192x192" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/favicon-192x192.png"/><link rel="apple-touch-icon" sizes="512x512" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/favicon-512x512.png"/><link rel="preconnect" href="https://webanalytics.digiaiiris.com/js"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="page text-body"><header class="hds-header Header-module_header__291GF pageHeader" id="page-header"><div class="Header-module_headerBackgroundWrapper__KsFy2"><a href="#content" class="SkipLink-module_skipLink__1knzF"><span class="SkipLink-module_skipLinkLabel__21n5B">Skip to content</span></a><div class="HeaderActionBar-module_headerActionBarContainer__5tfj-"><div class="HeaderActionBar-module_headerActionBar__lPeGE"><a href="https://hds.hel.fi" aria-label="City of Helsinki Logo" class="HeaderActionBar-module_titleAndLogoContainer__2LEAb HeaderActionBar-module_logo__2r2T0"><span class="HeaderActionBarLogo-module_logoWrapper__8NgfS"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></span></a><a href="https://hds.hel.fi" aria-label="Helsinki: Helsinki Design System" class="HeaderActionBar-module_titleAndLogoContainer__2LEAb HeaderActionBar-module_title__opzt9 HeaderActionBar-module_normal__3B4qi"><span class="HeaderActionBar-module_title__opzt9"><div class="page-header-title"><div>Helsinki Design System</div><div class="page-header-title-badge"><img style="filter:invert(1)" alt="HDS version number: 2.15.0" src="https://img.shields.io/github/v/release/City-of-Helsinki/helsinki-design-system?label=&amp;style=for-the-badge&amp;color=1a1a1a"/></div></div></span></a><div class="HeaderActionBar-module_headerActions__3lNnM"></div></div></div><div class="HeaderNavigationMenu-module_headerNavigationMenuContainer__2nK9z"><nav class="HeaderNavigationMenu-module_headerNavigationMenu__3G6-N"><ul class="HeaderNavigationMenu-module_headerNavigationMenuList__3HIzx"></ul></nav></div></div></header><div class="page-content"><aside class="side-content"><nav class="SideNavigation-module_sideNavigation__3X-9P" id="side-navigation" aria-label="Foundation"><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS Button-module_fullWidth__31eVK button_hds-button--fullwidth__1_hG9 SideNavigation-module_toggleButton__10tXH" aria-controls="side-navigation-menu" aria-expanded="false" aria-haspopup="true"><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Navigate to page</span><div class="Button-module_icon__O-h7R button_hds-icon__17j8Z" aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-down" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 13.5L17 8.5L18.5 10L12 16.5L5.5 10L7 8.5L12 13.5Z" fill="currentColor"></path></svg></div></button><ul class="SideNavigation-module_mainLevelList__SLZKQ" aria-label="Navigate to page" id="side-navigation-menu"><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Overview" id="side-nav-foundation" href="/hds-demo/hds-1817-stepbystep-docs/foundation"><span class="MainLevel-module_label__uWKJ7">Overview</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_mainLevelWithDivider__1knXE MainLevel-module_open__2yWFj"><button type="button" aria-label="Design tokens" aria-current="false" aria-expanded="true" id="side-nav-foundation-design-tokens"><span class="MainLevel-module_label__uWKJ7">Design tokens</span><span class="MainLevel-module_rightIcon__2D9o7" aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 11.5L17 16.5L18.5 15L12 8.5L5.5 15L7 16.5L12 11.5Z" fill="currentColor"></path></svg></span></button><ul class="MainLevel-module_mainLevelListMenu__FG6Ed" id="side-nav-foundation-design-tokens-menu" aria-hidden="false" aria-labelledby="side-nav-foundation-design-tokens"><li class="SubLevel-module_subLevel__2TvTK"><a aria-current="false" href="/hds-demo/hds-1817-stepbystep-docs/foundation/design-tokens/breakpoints">Breakpoints</a></li><li class="SubLevel-module_subLevel__2TvTK"><a aria-current="false" href="/hds-demo/hds-1817-stepbystep-docs/foundation/design-tokens/colour">Colour</a></li><li class="SubLevel-module_subLevel__2TvTK"><a aria-current="false" href="/hds-demo/hds-1817-stepbystep-docs/foundation/design-tokens/spacing">Spacing</a></li><li class="SubLevel-module_subLevel__2TvTK"><a aria-current="false" href="/hds-demo/hds-1817-stepbystep-docs/foundation/design-tokens/typography">Typography</a></li></ul></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><button type="button" aria-label="Visual assets" aria-current="false" aria-expanded="true" id="side-nav-foundation-visual-assets"><span class="MainLevel-module_label__uWKJ7">Visual assets</span><span class="MainLevel-module_rightIcon__2D9o7" aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 11.5L17 16.5L18.5 15L12 8.5L5.5 15L7 16.5L12 11.5Z" fill="currentColor"></path></svg></span></button><ul class="MainLevel-module_mainLevelListMenu__FG6Ed" id="side-nav-foundation-visual-assets-menu" aria-hidden="false" aria-labelledby="side-nav-foundation-visual-assets"><li class="SubLevel-module_subLevel__2TvTK"><a aria-current="false" href="/hds-demo/hds-1817-stepbystep-docs/foundation/visual-assets/favicon">Favicon</a></li><li class="SubLevel-module_subLevel__2TvTK"><a aria-current="false" href="/hds-demo/hds-1817-stepbystep-docs/foundation/visual-assets/icons">Icons</a></li><li class="SubLevel-module_subLevel__2TvTK"><a aria-current="false" href="/hds-demo/hds-1817-stepbystep-docs/foundation/visual-assets/logo">Logo</a></li><li class="SubLevel-module_subLevel__2TvTK"><a aria-current="false" href="/hds-demo/hds-1817-stepbystep-docs/foundation/visual-assets/placeholders">Placeholders</a></li><li class="SubLevel-module_subLevel__2TvTK"><a aria-current="false" href="/hds-demo/hds-1817-stepbystep-docs/foundation/visual-assets/wave-motifs">Wave motifs</a></li></ul></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><button type="button" aria-label="Guidelines" aria-current="false" aria-expanded="true" id="side-nav-foundation-guidelines"><span class="MainLevel-module_label__uWKJ7">Guidelines</span><span class="MainLevel-module_rightIcon__2D9o7" aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 11.5L17 16.5L18.5 15L12 8.5L5.5 15L7 16.5L12 11.5Z" fill="currentColor"></path></svg></span></button><ul class="MainLevel-module_mainLevelListMenu__FG6Ed" id="side-nav-foundation-guidelines-menu" aria-hidden="false" aria-labelledby="side-nav-foundation-guidelines"><li class="SubLevel-module_subLevel__2TvTK"><a aria-current="false" href="/hds-demo/hds-1817-stepbystep-docs/foundation/guidelines/checkbox-radiobutton-toggle">Checkboxes, radio buttons, or toggles?</a></li><li class="SubLevel-module_subLevel__2TvTK"><a aria-current="false" href="/hds-demo/hds-1817-stepbystep-docs/foundation/guidelines/data-formats">Data formats</a></li><li class="SubLevel-module_subLevel__2TvTK"><a aria-current="false" href="/hds-demo/hds-1817-stepbystep-docs/foundation/guidelines/grid">Grid</a></li><li class="SubLevel-module_subLevel__2TvTK"><a aria-current="false" href="/hds-demo/hds-1817-stepbystep-docs/foundation/guidelines/inclusivity">Inclusivity</a></li><li class="SubLevel-module_subLevel__2TvTK"><a aria-current="false" href="/hds-demo/hds-1817-stepbystep-docs/foundation/guidelines/localisation">Localisation</a></li><li class="SubLevel-module_subLevel__2TvTK"><a aria-current="false" href="/hds-demo/hds-1817-stepbystep-docs/foundation/guidelines/photography">Photography</a></li><li class="SubLevel-module_subLevel__2TvTK"><a aria-current="false" href="/hds-demo/hds-1817-stepbystep-docs/foundation/guidelines/server-side-rendering">Server-side rendering</a></li></ul></li></ul></nav></aside><main id="content" class="main-content"><h1 id="colour" style="position:relative" class="page-heading-1 heading-xl-mobile">Colour<a href="#colour" aria-label="colour permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h1>
 <span class="StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H">Stable</span>
 <p style="font-size:var(--fontsize-body-xl);color:var(--color-black-90);max-width:600px">Colour tokens store the colour variables for styling elements.</p>
-<div class="Tabs-module_tabs__2Ww5F"><div class="Tabs-module_tablistBar__elMv9 page-tabs-list"><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-left" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 12L15.5 17L14 18.5L7.5 12L14 5.5L15.5 7L10.5 12Z" fill="currentColor"></path></svg></button></div><div class="Tabs-module_tablist__1iuDO"><ul role="tablist" style="width:0px"><li role="tab" aria-selected="true" aria-controls="tab-0-panel" tabindex="0" id="tab-0-button" class="Tabs-module_tab__3oOoX Tabs-module_active__1Ic3B"><span>Usage</span></li><li role="tab" aria-selected="false" aria-controls="tab-1-panel" tabindex="-1" id="tab-1-button" class="Tabs-module_tab__3oOoX"><span>Accessibility</span></li><li role="tab" aria-selected="false" aria-controls="tab-2-panel" tabindex="-1" id="tab-2-button" class="Tabs-module_tab__3oOoX"><span>Tokens</span></li></ul></div><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z" fill="currentColor"></path></svg></button></div></div><div id="tab-0-panel" role="tabpanel" aria-labelledby="tab-0-button"></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-576" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-576)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="Tabs-module_tabs__2Ww5F"><div class="Tabs-module_tablistBar__elMv9 page-tabs-list"><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-left" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 12L15.5 17L14 18.5L7.5 12L14 5.5L15.5 7L10.5 12Z" fill="currentColor"></path></svg></button></div><div class="Tabs-module_tablist__1iuDO"><ul role="tablist" style="width:0px"><li role="tab" aria-selected="true" aria-controls="tab-0-panel" tabindex="0" id="tab-0-button" class="Tabs-module_tab__3oOoX Tabs-module_active__1Ic3B"><span>Usage</span></li><li role="tab" aria-selected="false" aria-controls="tab-1-panel" tabindex="-1" id="tab-1-button" class="Tabs-module_tab__3oOoX"><span>Accessibility</span></li><li role="tab" aria-selected="false" aria-controls="tab-2-panel" tabindex="-1" id="tab-2-button" class="Tabs-module_tab__3oOoX"><span>Tokens</span></li></ul></div><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z" fill="currentColor"></path></svg></button></div></div><div id="tab-0-panel" role="tabpanel" aria-labelledby="tab-0-button"></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-575" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-575)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/foundation/design-tokens/colour/tokens/index.html b/docs/hds-1817-stepbystep-docs/foundation/design-tokens/colour/tokens/index.html
index 2ac4732e5fd..e1e5db44b43 100644
--- a/docs/hds-1817-stepbystep-docs/foundation/design-tokens/colour/tokens/index.html
+++ b/docs/hds-1817-stepbystep-docs/foundation/design-tokens/colour/tokens/index.html
@@ -61,7 +61,7 @@
 <div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><caption class="hds-table__caption"><b>Table 2</b>: <!-- -->Brand colour variation tokens</caption><thead><tr class="hds-table__header-row dark"><th scope="col">CSS variable</th><th scope="col">SASS variable</th><th scope="col">HEX value</th><th scope="col">Example</th></tr></thead><tbody class="hds-table__content"><tr><td><code>--color-brick-dark</code></td><td><code>$color-brick-dark</code></td><td><code>#800e04</code></td><td><div aria-label="Brick example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-brick-dark);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-brick-dark)"></div></div></td></tr><tr><td><code>--color-brick-medium-light</code></td><td><code>$color-brick-medium-light</code></td><td><code>#facbc8</code></td><td><div aria-label="Brick example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-brick-medium-light);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-brick-medium-light)"></div></div></td></tr><tr><td><code>--color-brick-light</code></td><td><code>$color-brick-light</code></td><td><code>#ffeeed</code></td><td><div aria-label="Brick example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-brick-light);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-brick-light)"></div></div></td></tr><tr><td><code>--color-bus-dark</code></td><td><code>$color-bus-dark</code></td><td><code>#00005e</code></td><td><div aria-label="Bus example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-bus-dark);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-bus-dark)"></div></div></td></tr><tr><td><code>--color-bus-medium-light</code></td><td><code>$color-bus-medium-light</code></td><td><code>#ccccff</code></td><td><div aria-label="Bus example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-bus-medium-light);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-bus-medium-light)"></div></div></td></tr><tr><td><code>--color-bus-light</code></td><td><code>$color-bus-light</code></td><td><code>#f0f0ff</code></td><td><div aria-label="Bus example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-bus-light);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-bus-light)"></div></div></td></tr><tr><td><code>--color-coat-of-arms-dark</code></td><td><code>$color-coat-of-arms-dark</code></td><td><code>#005799</code></td><td><div aria-label="Coat of Arms example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-coat-of-arms-dark);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-coat-of-arms-dark)"></div></div></td></tr><tr><td><code>--color-coat-of-arms-medium-light</code></td><td><code>$color-coat-of-arms-medium-light</code></td><td><code>#b5daf7</code></td><td><div aria-label="Coat of Arms example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-coat-of-arms-medium-light);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-coat-of-arms-medium-light)"></div></div></td></tr><tr><td><code>--color-coat-of-arms-light</code></td><td><code>$color-coat-of-arms-light</code></td><td><code>#e6f4ff</code></td><td><div aria-label="Coat of Arms example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-coat-of-arms-light);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-coat-of-arms-light)"></div></div></td></tr><tr><td><code>--color-gold-dark</code></td><td><code>$color-gold-dark</code></td><td><code>#9e823c</code></td><td><div aria-label="Gold example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-gold-dark);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-gold-dark)"></div></div></td></tr><tr><td><code>--color-gold-medium-light</code></td><td><code>$color-gold-medium-light</code></td><td><code>#e8d7a7</code></td><td><div aria-label="Gold example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-gold-medium-light);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-gold-medium-light)"></div></div></td></tr><tr><td><code>--color-gold-light</code></td><td><code>$color-gold-light</code></td><td><code>#f7f2e4</code></td><td><div aria-label="Gold example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-gold-light);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-gold-light)"></div></div></td></tr><tr><td><code>--color-silver-dark</code></td><td><code>$color-silver-dark</code></td><td><code>#b0b8bf</code></td><td><div aria-label="Silver example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-silver-dark);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-silver-dark)"></div></div></td></tr><tr><td><code>--color-silver-medium-light</code></td><td><code>$color-silver-medium-light</code></td><td><code>#efeff0</code></td><td><div aria-label="Silver example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-silver-medium-light);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-silver-medium-light)"></div></div></td></tr><tr><td><code>--color-silver-light</code></td><td><code>$color-silver-light</code></td><td><code>#f7f7f8</code></td><td><div aria-label="Silver example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-silver-light);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-silver-light)"></div></div></td></tr><tr><td><code>--color-copper-dark</code></td><td><code>$color-copper-dark</code></td><td><code>#00a17d</code></td><td><div aria-label="Copper example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-copper-dark);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-copper-dark)"></div></div></td></tr><tr><td><code>--color-copper-medium-light</code></td><td><code>$color-copper-medium-light</code></td><td><code>#9ef0de</code></td><td><div aria-label="Copper example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-copper-medium-light);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-copper-medium-light)"></div></div></td></tr><tr><td><code>--color-copper-light</code></td><td><code>$color-copper-light</code></td><td><code>#cffaf1</code></td><td><div aria-label="Copper example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-copper-light);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-copper-light)"></div></div></td></tr><tr><td><code>--color-engel-dark</code></td><td><code>$color-engel-dark</code></td><td><code>#dbc030</code></td><td><div aria-label="Engel example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-engel-dark);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-engel-dark)"></div></div></td></tr><tr><td><code>--color-engel-medium-light</code></td><td><code>$color-engel-medium-light</code></td><td><code>#fff3b8</code></td><td><div aria-label="Engel example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-engel-medium-light);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-engel-medium-light)"></div></div></td></tr><tr><td><code>--color-engel-light</code></td><td><code>$color-engel-light</code></td><td><code>#fff9db</code></td><td><div aria-label="Engel example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-engel-light);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-engel-light)"></div></div></td></tr><tr><td><code>--color-fog-dark</code></td><td><code>$color-fog-dark</code></td><td><code>#72a5cf</code></td><td><div aria-label="Fog example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-fog-dark);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-fog-dark)"></div></div></td></tr><tr><td><code>--color-fog-medium-light</code></td><td><code>$color-fog-medium-light</code></td><td><code>#d0e6f7</code></td><td><div aria-label="Fog example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-fog-medium-light);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-fog-medium-light)"></div></div></td></tr><tr><td><code>--color-fog-light</code></td><td><code>$color-fog-light</code></td><td><code>#e8f3fc</code></td><td><div aria-label="Fog example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-fog-light);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-fog-light)"></div></div></td></tr><tr><td><code>--color-metro-dark</code></td><td><code>$color-metro-dark</code></td><td><code>#bd2f00</code></td><td><div aria-label="Metro example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-metro-dark);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-metro-dark)"></div></div></td></tr><tr><td><code>--color-metro-medium-light</code></td><td><code>$color-metro-medium-light</code></td><td><code>#ffcab3</code></td><td><div aria-label="Metro example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-metro-medium-light);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-metro-medium-light)"></div></div></td></tr><tr><td><code>--color-metro-light</code></td><td><code>$color-metro-light</code></td><td><code>#ffeee6</code></td><td><div aria-label="Metro example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-metro-light);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-metro-light)"></div></div></td></tr><tr><td><code>--color-summer-dark</code></td><td><code>$color-summer-dark</code></td><td><code>#cc9200</code></td><td><div aria-label="Summer example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-summer-dark);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-summer-dark)"></div></div></td></tr><tr><td><code>--color-summer-medium-light</code></td><td><code>$color-summer-medium-light</code></td><td><code>#ffe49c</code></td><td><div aria-label="Summer example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-summer-medium-light);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-summer-medium-light)"></div></div></td></tr><tr><td><code>--color-summer-light</code></td><td><code>$color-summer-light</code></td><td><code>#fff4d4</code></td><td><div aria-label="Summer example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-summer-light);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-summer-light)"></div></div></td></tr><tr><td><code>--color-suomenlinna-dark</code></td><td><code>$color-suomenlinna-dark</code></td><td><code>#e673a5</code></td><td><div aria-label="Suomenlinna example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-suomenlinna-dark);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-suomenlinna-dark)"></div></div></td></tr><tr><td><code>--color-suomenlinna-medium-light</code></td><td><code>$color-suomenlinna-medium-light</code></td><td><code>#ffdbeb</code></td><td><div aria-label="Suomenlinna example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-suomenlinna-medium-light);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-suomenlinna-medium-light)"></div></div></td></tr><tr><td><code>--color-suomenlinna-light</code></td><td><code>$color-suomenlinna-light</code></td><td><code>#fff0f7</code></td><td><div aria-label="Suomenlinna example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-suomenlinna-light);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-suomenlinna-light)"></div></div></td></tr><tr><td><code>--color-tram-dark</code></td><td><code>$color-tram-dark</code></td><td><code>#006631</code></td><td><div aria-label="Tram example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-tram-dark);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-tram-dark)"></div></div></td></tr><tr><td><code>--color-tram-medium-light</code></td><td><code>$color-tram-medium-light</code></td><td><code>#a3e3c2</code></td><td><div aria-label="Tram example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-tram-medium-light);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-tram-medium-light)"></div></div></td></tr><tr><td><code>--color-tram-light</code></td><td><code>$color-tram-light</code></td><td><code>#dff7eb</code></td><td><div aria-label="Tram example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-tram-light);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-tram-light)"></div></div></td></tr></tbody></table></div>
 <div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><caption class="hds-table__caption"><b>Table 3</b>: <!-- -->UI colour tokens</caption><thead><tr class="hds-table__header-row dark"><th scope="col">CSS variable</th><th scope="col">SASS variable</th><th scope="col">HEX value</th><th scope="col">Example</th></tr></thead><tbody class="hds-table__content"><tr><td><code>--color-info</code></td><td><code>$color-info</code></td><td><code>#0062b9</code></td><td><div aria-label="Info example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-info);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-info)"></div></div></td></tr><tr><td><code>--color-success</code></td><td><code>$color-success</code></td><td><code>#007a64</code></td><td><div aria-label="Success example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-success);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-success)"></div></div></td></tr><tr><td><code>--color-alert</code></td><td><code>$color-alert</code></td><td><code>#ffda07</code></td><td><div aria-label="Alert example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-alert);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-alert)"></div></div></td></tr><tr><td><code>--color-error</code></td><td><code>$color-error</code></td><td><code>#b01038</code></td><td><div aria-label="Error example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-error);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-error)"></div></div></td></tr><tr><td><code>--color-focus-outline</code></td><td><code>$color-focus-outline</code></td><td><code>#0072c6</code></td><td><div aria-label="Visualized focus example" role="img" style="font-size:var(--fontsize-body-l);align-items:center;justify-content:flex-start;display:flex;background:undefined"><div style="border:3px solid;display:flex;justify-content:center;align-items:center;padding:0.25rem;border-color:var(--color-focus-outline)"><div style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-focus-outline);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-focus-outline)"></div></div></div></div></td></tr></tbody></table></div>
 <div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><caption class="hds-table__caption"><b>Table 4</b>: <!-- -->UI colour variation tokens</caption><thead><tr class="hds-table__header-row dark"><th scope="col">CSS variable</th><th scope="col">SASS variable</th><th scope="col">HEX value</th><th scope="col">Example</th></tr></thead><tbody class="hds-table__content"><tr><td><code>--color-info-dark</code></td><td><code>$color-info-dark</code></td><td><code>#004f94</code></td><td><div aria-label="Info dark variant example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-info-dark);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-info-dark)"></div></div></td></tr><tr><td><code>--color-info-light</code></td><td><code>$color-info-light</code></td><td><code>#e5eff8</code></td><td><div aria-label="Info light variant example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-info-light);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-info-light)"></div></div></td></tr><tr><td><code>--color-success-dark</code></td><td><code>$color-success-dark</code></td><td><code>#006250</code></td><td><div aria-label="Success dark variant example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-success-dark);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-success-dark)"></div></div></td></tr><tr><td><code>--color-success-light</code></td><td><code>$color-success-light</code></td><td><code>#e2f5f3</code></td><td><div aria-label="Success light variant example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-success-light);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-success-light)"></div></div></td></tr><tr><td><code>--color-alert-dark</code></td><td><code>$color-alert-dark</code></td><td><code>#d18200</code></td><td><div aria-label="Alert dark variant example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-alert-dark);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-alert-dark)"></div></div></td></tr><tr><td><code>--color-alert-light</code></td><td><code>$color-alert-light</code></td><td><code>#fff4b4</code></td><td><div aria-label="Alert light variant example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-alert-light);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-alert-light)"></div></div></td></tr><tr><td><code>--color-error-dark</code></td><td><code>$color-error-dark</code></td><td><code>#8d0d2d</code></td><td><div aria-label="Error dark variant example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-error-dark);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-error-dark)"></div></div></td></tr><tr><td><code>--color-error-light</code></td><td><code>$color-error-light</code></td><td><code>#f6e2e6</code></td><td><div aria-label="Error light variant example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-error-light);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-error-light)"></div></div></td></tr></tbody></table></div>
-<div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><caption class="hds-table__caption"><b>Table 5</b>: <!-- -->Grayscale tokens</caption><thead><tr class="hds-table__header-row dark"><th scope="col">CSS variable</th><th scope="col">SASS variable</th><th scope="col">HEX value</th><th scope="col">Example</th></tr></thead><tbody class="hds-table__content"><tr><td><code>--color-black</code></td><td><code>$color-black</code></td><td><code>#000000</code></td><td><div aria-label="Black example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-black);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-black)"></div></div></td></tr><tr><td><code>--color-black-90</code></td><td><code>$color-black-90</code></td><td><code>#1a1a1a</code></td><td><div aria-label="Black-90 example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-black-90);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-black-90)"></div></div></td></tr><tr><td><code>--color-black-80</code></td><td><code>$color-black-80</code></td><td><code>#333333</code></td><td><div aria-label="Black-80 example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-black-80);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-black-80)"></div></div></td></tr><tr><td><code>--color-black-70</code></td><td><code>$color-black-70</code></td><td><code>#4d4d4d</code></td><td><div aria-label="Black-70 example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-black-70);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-black-70)"></div></div></td></tr><tr><td><code>--color-black-60</code></td><td><code>$color-black-60</code></td><td><code>#666666</code></td><td><div aria-label="Black-60 example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-black-60);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-black-60)"></div></div></td></tr><tr><td><code>--color-black-50</code></td><td><code>$color-black-50</code></td><td><code>#808080</code></td><td><div aria-label="Black-50 example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-black-50);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-black-50)"></div></div></td></tr><tr><td><code>--color-black-40</code></td><td><code>$color-black-40</code></td><td><code>#999999</code></td><td><div aria-label="Black-40 example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-black-40);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-black-40)"></div></div></td></tr><tr><td><code>--color-black-30</code></td><td><code>$color-black-30</code></td><td><code>#b3b3b3</code></td><td><div aria-label="Black-30 example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-black-30);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-black-30)"></div></div></td></tr><tr><td><code>--color-black-20</code></td><td><code>$color-black-20</code></td><td><code>#cccccc</code></td><td><div aria-label="Black-20 example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-black-20);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-black-20)"></div></div></td></tr><tr><td><code>--color-black-10</code></td><td><code>$color-black-10</code></td><td><code>#e6e6e6</code></td><td><div aria-label="Black-10 example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-black-10);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-black-10)"></div></div></td></tr><tr><td><code>--color-black-5</code></td><td><code>$color-black-5</code></td><td><code>#f2f2f2</code></td><td><div aria-label="Black-5 example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-black-5);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-black-5)"></div></div></td></tr><tr><td><code>--color-white</code></td><td><code>$color-white</code></td><td><code>#ffffff</code></td><td><div aria-label="White example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-white);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-white)"></div></div></td></tr></tbody></table></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-574" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-574)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><caption class="hds-table__caption"><b>Table 5</b>: <!-- -->Grayscale tokens</caption><thead><tr class="hds-table__header-row dark"><th scope="col">CSS variable</th><th scope="col">SASS variable</th><th scope="col">HEX value</th><th scope="col">Example</th></tr></thead><tbody class="hds-table__content"><tr><td><code>--color-black</code></td><td><code>$color-black</code></td><td><code>#000000</code></td><td><div aria-label="Black example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-black);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-black)"></div></div></td></tr><tr><td><code>--color-black-90</code></td><td><code>$color-black-90</code></td><td><code>#1a1a1a</code></td><td><div aria-label="Black-90 example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-black-90);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-black-90)"></div></div></td></tr><tr><td><code>--color-black-80</code></td><td><code>$color-black-80</code></td><td><code>#333333</code></td><td><div aria-label="Black-80 example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-black-80);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-black-80)"></div></div></td></tr><tr><td><code>--color-black-70</code></td><td><code>$color-black-70</code></td><td><code>#4d4d4d</code></td><td><div aria-label="Black-70 example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-black-70);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-black-70)"></div></div></td></tr><tr><td><code>--color-black-60</code></td><td><code>$color-black-60</code></td><td><code>#666666</code></td><td><div aria-label="Black-60 example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-black-60);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-black-60)"></div></div></td></tr><tr><td><code>--color-black-50</code></td><td><code>$color-black-50</code></td><td><code>#808080</code></td><td><div aria-label="Black-50 example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-black-50);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-black-50)"></div></div></td></tr><tr><td><code>--color-black-40</code></td><td><code>$color-black-40</code></td><td><code>#999999</code></td><td><div aria-label="Black-40 example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-black-40);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-black-40)"></div></div></td></tr><tr><td><code>--color-black-30</code></td><td><code>$color-black-30</code></td><td><code>#b3b3b3</code></td><td><div aria-label="Black-30 example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-black-30);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-black-30)"></div></div></td></tr><tr><td><code>--color-black-20</code></td><td><code>$color-black-20</code></td><td><code>#cccccc</code></td><td><div aria-label="Black-20 example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-black-20);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-black-20)"></div></div></td></tr><tr><td><code>--color-black-10</code></td><td><code>$color-black-10</code></td><td><code>#e6e6e6</code></td><td><div aria-label="Black-10 example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-black-10);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-black-10)"></div></div></td></tr><tr><td><code>--color-black-5</code></td><td><code>$color-black-5</code></td><td><code>#f2f2f2</code></td><td><div aria-label="Black-5 example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-black-5);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-black-5)"></div></div></td></tr><tr><td><code>--color-white</code></td><td><code>$color-white</code></td><td><code>#ffffff</code></td><td><div aria-label="White example" style="align-items:center;display:flex"><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-white);margin-right:var(--spacing-2-xs)">Aa</span><div aria-label="Visualized example: undefined" role="img" style="display:inline-block;width:40px;height:40px;background:var(--color-white)"></div></div></td></tr></tbody></table></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-576" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-576)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/foundation/design-tokens/spacing/index.html b/docs/hds-1817-stepbystep-docs/foundation/design-tokens/spacing/index.html
index cf075ffe396..6b52edeba67 100644
--- a/docs/hds-1817-stepbystep-docs/foundation/design-tokens/spacing/index.html
+++ b/docs/hds-1817-stepbystep-docs/foundation/design-tokens/spacing/index.html
@@ -70,7 +70,7 @@ <h3 id="using-spacing-tokens" style="position:relative" class="page-heading-3 he
 <li><strong>Spacing tokens</strong> are used for component-level spacing, and allow a more detailed fine tuning.</li>
 <li><strong>Layout spacing tokens</strong> are used for page layouts. They help keeping pages consistent and ensure that you are not making layouts too dense.</li>
 </ul>
-<p>Token values can be multiplied and divided using even numbers.</p></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-573" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-573)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<p>Token values can be multiplied and divided using even numbers.</p></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-571" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-571)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/foundation/design-tokens/spacing/tabs/index.html b/docs/hds-1817-stepbystep-docs/foundation/design-tokens/spacing/tabs/index.html
index 04d7616aa57..68e62c6c59a 100644
--- a/docs/hds-1817-stepbystep-docs/foundation/design-tokens/spacing/tabs/index.html
+++ b/docs/hds-1817-stepbystep-docs/foundation/design-tokens/spacing/tabs/index.html
@@ -56,7 +56,7 @@
   </script><link rel="manifest" href="/hds-demo/hds-1817-stepbystep-docs/manifest.webmanifest" crossorigin="anonymous"/><link rel="apple-touch-icon" sizes="any" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/favicon-32x32.ico"/><link rel="apple-touch-icon" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/apple-touch-icon.png"/><link rel="apple-touch-icon" sizes="192x192" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/favicon-192x192.png"/><link rel="apple-touch-icon" sizes="512x512" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/favicon-512x512.png"/><link rel="preconnect" href="https://webanalytics.digiaiiris.com/js"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="page text-body"><header class="hds-header Header-module_header__291GF pageHeader" id="page-header"><div class="Header-module_headerBackgroundWrapper__KsFy2"><a href="#content" class="SkipLink-module_skipLink__1knzF"><span class="SkipLink-module_skipLinkLabel__21n5B">Skip to content</span></a><div class="HeaderActionBar-module_headerActionBarContainer__5tfj-"><div class="HeaderActionBar-module_headerActionBar__lPeGE"><a href="https://hds.hel.fi" aria-label="City of Helsinki Logo" class="HeaderActionBar-module_titleAndLogoContainer__2LEAb HeaderActionBar-module_logo__2r2T0"><span class="HeaderActionBarLogo-module_logoWrapper__8NgfS"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></span></a><a href="https://hds.hel.fi" aria-label="Helsinki: Helsinki Design System" class="HeaderActionBar-module_titleAndLogoContainer__2LEAb HeaderActionBar-module_title__opzt9 HeaderActionBar-module_normal__3B4qi"><span class="HeaderActionBar-module_title__opzt9"><div class="page-header-title"><div>Helsinki Design System</div><div class="page-header-title-badge"><img style="filter:invert(1)" alt="HDS version number: 2.15.0" src="https://img.shields.io/github/v/release/City-of-Helsinki/helsinki-design-system?label=&amp;style=for-the-badge&amp;color=1a1a1a"/></div></div></span></a><div class="HeaderActionBar-module_headerActions__3lNnM"></div></div></div><div class="HeaderNavigationMenu-module_headerNavigationMenuContainer__2nK9z"><nav class="HeaderNavigationMenu-module_headerNavigationMenu__3G6-N"><ul class="HeaderNavigationMenu-module_headerNavigationMenuList__3HIzx"></ul></nav></div></div></header><div class="page-content"><aside class="side-content"><nav class="SideNavigation-module_sideNavigation__3X-9P" id="side-navigation" aria-label="Foundation"><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS Button-module_fullWidth__31eVK button_hds-button--fullwidth__1_hG9 SideNavigation-module_toggleButton__10tXH" aria-controls="side-navigation-menu" aria-expanded="false" aria-haspopup="true"><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Navigate to page</span><div class="Button-module_icon__O-h7R button_hds-icon__17j8Z" aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-down" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 13.5L17 8.5L18.5 10L12 16.5L5.5 10L7 8.5L12 13.5Z" fill="currentColor"></path></svg></div></button><ul class="SideNavigation-module_mainLevelList__SLZKQ" aria-label="Navigate to page" id="side-navigation-menu"><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><a aria-current="false" aria-label="Overview" id="side-nav-foundation" href="/hds-demo/hds-1817-stepbystep-docs/foundation"><span class="MainLevel-module_label__uWKJ7">Overview</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_mainLevelWithDivider__1knXE MainLevel-module_open__2yWFj"><button type="button" aria-label="Design tokens" aria-current="false" aria-expanded="true" id="side-nav-foundation-design-tokens"><span class="MainLevel-module_label__uWKJ7">Design tokens</span><span class="MainLevel-module_rightIcon__2D9o7" aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 11.5L17 16.5L18.5 15L12 8.5L5.5 15L7 16.5L12 11.5Z" fill="currentColor"></path></svg></span></button><ul class="MainLevel-module_mainLevelListMenu__FG6Ed" id="side-nav-foundation-design-tokens-menu" aria-hidden="false" aria-labelledby="side-nav-foundation-design-tokens"><li class="SubLevel-module_subLevel__2TvTK"><a aria-current="false" href="/hds-demo/hds-1817-stepbystep-docs/foundation/design-tokens/breakpoints">Breakpoints</a></li><li class="SubLevel-module_subLevel__2TvTK"><a aria-current="false" href="/hds-demo/hds-1817-stepbystep-docs/foundation/design-tokens/colour">Colour</a></li><li class="SubLevel-module_subLevel__2TvTK"><a aria-current="false" href="/hds-demo/hds-1817-stepbystep-docs/foundation/design-tokens/spacing">Spacing</a></li><li class="SubLevel-module_subLevel__2TvTK"><a aria-current="false" href="/hds-demo/hds-1817-stepbystep-docs/foundation/design-tokens/typography">Typography</a></li></ul></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><button type="button" aria-label="Visual assets" aria-current="false" aria-expanded="true" id="side-nav-foundation-visual-assets"><span class="MainLevel-module_label__uWKJ7">Visual assets</span><span class="MainLevel-module_rightIcon__2D9o7" aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 11.5L17 16.5L18.5 15L12 8.5L5.5 15L7 16.5L12 11.5Z" fill="currentColor"></path></svg></span></button><ul class="MainLevel-module_mainLevelListMenu__FG6Ed" id="side-nav-foundation-visual-assets-menu" aria-hidden="false" aria-labelledby="side-nav-foundation-visual-assets"><li class="SubLevel-module_subLevel__2TvTK"><a aria-current="false" href="/hds-demo/hds-1817-stepbystep-docs/foundation/visual-assets/favicon">Favicon</a></li><li class="SubLevel-module_subLevel__2TvTK"><a aria-current="false" href="/hds-demo/hds-1817-stepbystep-docs/foundation/visual-assets/icons">Icons</a></li><li class="SubLevel-module_subLevel__2TvTK"><a aria-current="false" href="/hds-demo/hds-1817-stepbystep-docs/foundation/visual-assets/logo">Logo</a></li><li class="SubLevel-module_subLevel__2TvTK"><a aria-current="false" href="/hds-demo/hds-1817-stepbystep-docs/foundation/visual-assets/placeholders">Placeholders</a></li><li class="SubLevel-module_subLevel__2TvTK"><a aria-current="false" href="/hds-demo/hds-1817-stepbystep-docs/foundation/visual-assets/wave-motifs">Wave motifs</a></li></ul></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><button type="button" aria-label="Guidelines" aria-current="false" aria-expanded="true" id="side-nav-foundation-guidelines"><span class="MainLevel-module_label__uWKJ7">Guidelines</span><span class="MainLevel-module_rightIcon__2D9o7" aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 11.5L17 16.5L18.5 15L12 8.5L5.5 15L7 16.5L12 11.5Z" fill="currentColor"></path></svg></span></button><ul class="MainLevel-module_mainLevelListMenu__FG6Ed" id="side-nav-foundation-guidelines-menu" aria-hidden="false" aria-labelledby="side-nav-foundation-guidelines"><li class="SubLevel-module_subLevel__2TvTK"><a aria-current="false" href="/hds-demo/hds-1817-stepbystep-docs/foundation/guidelines/checkbox-radiobutton-toggle">Checkboxes, radio buttons, or toggles?</a></li><li class="SubLevel-module_subLevel__2TvTK"><a aria-current="false" href="/hds-demo/hds-1817-stepbystep-docs/foundation/guidelines/data-formats">Data formats</a></li><li class="SubLevel-module_subLevel__2TvTK"><a aria-current="false" href="/hds-demo/hds-1817-stepbystep-docs/foundation/guidelines/grid">Grid</a></li><li class="SubLevel-module_subLevel__2TvTK"><a aria-current="false" href="/hds-demo/hds-1817-stepbystep-docs/foundation/guidelines/inclusivity">Inclusivity</a></li><li class="SubLevel-module_subLevel__2TvTK"><a aria-current="false" href="/hds-demo/hds-1817-stepbystep-docs/foundation/guidelines/localisation">Localisation</a></li><li class="SubLevel-module_subLevel__2TvTK"><a aria-current="false" href="/hds-demo/hds-1817-stepbystep-docs/foundation/guidelines/photography">Photography</a></li><li class="SubLevel-module_subLevel__2TvTK"><a aria-current="false" href="/hds-demo/hds-1817-stepbystep-docs/foundation/guidelines/server-side-rendering">Server-side rendering</a></li></ul></li></ul></nav></aside><main id="content" class="main-content"><h1 id="spacing" style="position:relative" class="page-heading-1 heading-xl-mobile">Spacing<a href="#spacing" aria-label="spacing permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h1>
 <span class="StatusLabel-module_statusLabel__3R2J2 status-label_hds-status-label__1L8YI StatusLabel-module_info__3YrAe status-label_hds-status-label--info__J28-H">Stable</span>
 <p style="font-size:var(--fontsize-body-xl);color:var(--color-black-90);max-width:600px">Spacing tokens are used for positioning elements on the page layout and in components.</p>
-<div class="Tabs-module_tabs__2Ww5F"><div class="Tabs-module_tablistBar__elMv9 page-tabs-list"><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-left" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 12L15.5 17L14 18.5L7.5 12L14 5.5L15.5 7L10.5 12Z" fill="currentColor"></path></svg></button></div><div class="Tabs-module_tablist__1iuDO"><ul role="tablist" style="width:0px"><li role="tab" aria-selected="true" aria-controls="tab-0-panel" tabindex="0" id="tab-0-button" class="Tabs-module_tab__3oOoX Tabs-module_active__1Ic3B"><span>Usage</span></li><li role="tab" aria-selected="false" aria-controls="tab-1-panel" tabindex="-1" id="tab-1-button" class="Tabs-module_tab__3oOoX"><span>Tokens</span></li></ul></div><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z" fill="currentColor"></path></svg></button></div></div><div id="tab-0-panel" role="tabpanel" aria-labelledby="tab-0-button"></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-570" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-570)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="Tabs-module_tabs__2Ww5F"><div class="Tabs-module_tablistBar__elMv9 page-tabs-list"><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-left" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 12L15.5 17L14 18.5L7.5 12L14 5.5L15.5 7L10.5 12Z" fill="currentColor"></path></svg></button></div><div class="Tabs-module_tablist__1iuDO"><ul role="tablist" style="width:0px"><li role="tab" aria-selected="true" aria-controls="tab-0-panel" tabindex="0" id="tab-0-button" class="Tabs-module_tab__3oOoX Tabs-module_active__1Ic3B"><span>Usage</span></li><li role="tab" aria-selected="false" aria-controls="tab-1-panel" tabindex="-1" id="tab-1-button" class="Tabs-module_tab__3oOoX"><span>Tokens</span></li></ul></div><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z" fill="currentColor"></path></svg></button></div></div><div id="tab-0-panel" role="tabpanel" aria-labelledby="tab-0-button"></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-572" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-572)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/foundation/design-tokens/spacing/tokens/index.html b/docs/hds-1817-stepbystep-docs/foundation/design-tokens/spacing/tokens/index.html
index 5516acf688d..0a2743978e1 100644
--- a/docs/hds-1817-stepbystep-docs/foundation/design-tokens/spacing/tokens/index.html
+++ b/docs/hds-1817-stepbystep-docs/foundation/design-tokens/spacing/tokens/index.html
@@ -58,7 +58,7 @@
 <p style="font-size:var(--fontsize-body-xl);color:var(--color-black-90);max-width:600px">Spacing tokens are used for positioning elements on the page layout and in components.</p>
 <div class="Tabs-module_tabs__2Ww5F"><div class="Tabs-module_tablistBar__elMv9 page-tabs-list"><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-left" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 12L15.5 17L14 18.5L7.5 12L14 5.5L15.5 7L10.5 12Z" fill="currentColor"></path></svg></button></div><div class="Tabs-module_tablist__1iuDO"><ul role="tablist" style="width:0px"><li role="tab" aria-selected="false" aria-controls="tab-0-panel" tabindex="-1" id="tab-0-button" class="Tabs-module_tab__3oOoX"><span>Usage</span></li><li role="tab" aria-selected="true" aria-controls="tab-1-panel" tabindex="0" id="tab-1-button" class="Tabs-module_tab__3oOoX Tabs-module_active__1Ic3B"><span>Tokens</span></li></ul></div><div class="Tabs-module_scrollButton__3ufhP" aria-hidden="true"><button type="button" tabindex="-1"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-right" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z" fill="currentColor"></path></svg></button></div></div><div id="tab-1-panel" role="tabpanel" aria-labelledby="tab-1-button"><h2 id="tokens" style="position:relative" class="page-heading-2 heading-l">Tokens<a href="#tokens" aria-label="tokens permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h2>
 <div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><caption class="hds-table__caption"><b>Table 1</b>: <!-- -->Spacing tokens</caption><thead><tr class="hds-table__header-row dark"><th scope="col">CSS variable</th><th scope="col">SASS variable</th><th scope="col">PX value</th><th scope="col">REM value</th><th scope="col">Example</th></tr></thead><tbody class="hds-table__content"><tr><td><code>--spacing-4-xs</code></td><td><code>$spacing-4-xs</code></td><td align="right">2px</td><td align="right">0.125rem</td><td><span aria-label="Visualized example" role="img" style="background-color:var(--color-black-50);display:block;height:var(--spacing-4-xs);width:var(--spacing-4-xs)"></span></td></tr><tr><td><code>--spacing-3-xs</code></td><td><code>$spacing-3-xs</code></td><td align="right">4px</td><td align="right">0.24rem</td><td><span aria-label="Visualized example" role="img" style="background-color:var(--color-black-50);display:block;height:var(--spacing-3-xs);width:var(--spacing-3-xs)"></span></td></tr><tr><td><code>--spacing-2-xs</code></td><td><code>$spacing-2-xs</code></td><td align="right">8px</td><td align="right">0.5rem</td><td><span aria-label="Visualized example" role="img" style="background-color:var(--color-black-50);display:block;height:var(--spacing-2-xs);width:var(--spacing-2-xs)"></span></td></tr><tr><td><code>--spacing-xs</code></td><td><code>$spacing-xs</code></td><td align="right">12px</td><td align="right">0.75rem</td><td><span aria-label="Visualized example" role="img" style="background-color:var(--color-black-50);display:block;height:var(--spacing-xs);width:var(--spacing-xs)"></span></td></tr><tr><td><code>--spacing-s</code></td><td><code>$spacing-s</code></td><td align="right">16px</td><td align="right">1rem</td><td><span aria-label="Visualized example" role="img" style="background-color:var(--color-black-50);display:block;height:var(--spacing-s);width:var(--spacing-s)"></span></td></tr><tr><td><code>--spacing-m</code></td><td><code>$spacing-m</code></td><td align="right">24px</td><td align="right">1.5rem</td><td><span aria-label="Visualized example" role="img" style="background-color:var(--color-black-50);display:block;height:var(--spacing-m);width:var(--spacing-m)"></span></td></tr><tr><td><code>--spacing-l</code></td><td><code>$spacing-l</code></td><td align="right">32px</td><td align="right">2rem</td><td><span aria-label="Visualized example" role="img" style="background-color:var(--color-black-50);display:block;height:var(--spacing-l);width:var(--spacing-l)"></span></td></tr><tr><td><code>--spacing-xl</code></td><td><code>$spacing-xl</code></td><td align="right">40px</td><td align="right">2.5rem</td><td><span aria-label="Visualized example" role="img" style="background-color:var(--color-black-50);display:block;height:var(--spacing-xl);width:var(--spacing-xl)"></span></td></tr><tr><td><code>--spacing-2-xl</code></td><td><code>$spacing-2-xl</code></td><td align="right">48px</td><td align="right">3rem</td><td><span aria-label="Visualized example" role="img" style="background-color:var(--color-black-50);display:block;height:var(--spacing-2-xl);width:var(--spacing-2-xl)"></span></td></tr><tr><td><code>--spacing-3-xl</code></td><td><code>$spacing-3-xl</code></td><td align="right">56px</td><td align="right">3.5rem</td><td><span aria-label="Visualized example" role="img" style="background-color:var(--color-black-50);display:block;height:var(--spacing-3-xl);width:var(--spacing-3-xl)"></span></td></tr><tr><td><code>--spacing-4-xl</code></td><td><code>$spacing-4-xl</code></td><td align="right">64px</td><td align="right">4rem</td><td><span aria-label="Visualized example" role="img" style="background-color:var(--color-black-50);display:block;height:var(--spacing-4-xl);width:var(--spacing-4-xl)"></span></td></tr><tr><td><code>--spacing-5-xl</code></td><td><code>$spacing-5-xl</code></td><td align="right">72px</td><td align="right">4.5rem</td><td><span aria-label="Visualized example" role="img" style="background-color:var(--color-black-50);display:block;height:var(--spacing-5-xl);width:var(--spacing-5-xl)"></span></td></tr></tbody></table></div>
-<div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><caption class="hds-table__caption"><b>Table 2</b>: <!-- -->Layout tokens</caption><thead><tr class="hds-table__header-row dark"><th scope="col">CSS variable</th><th scope="col">SASS variable</th><th scope="col">PX value</th><th scope="col">REM value</th><th scope="col">Example</th></tr></thead><tbody class="hds-table__content"><tr><td><code>--spacing-layout-2-xs</code></td><td><code>$spacing-layout-2-xs</code></td><td align="right">16px</td><td align="right">1rem</td><td><span aria-label="Visualized example" role="img" style="background-color:var(--color-black-50);display:block;height:var(--spacing-layout-2-xs);width:var(--spacing-layout-2-xs)"></span></td></tr><tr><td><code>--spacing-layout-xs</code></td><td><code>$spacing-layout-xs</code></td><td align="right">24px</td><td align="right">1.5rem</td><td><span aria-label="Visualized example" role="img" style="background-color:var(--color-black-50);display:block;height:var(--spacing-layout-xs);width:var(--spacing-layout-xs)"></span></td></tr><tr><td><code>--spacing-layout-s</code></td><td><code>$spacing-layout-s</code></td><td align="right">32px</td><td align="right">2rem</td><td><span aria-label="Visualized example" role="img" style="background-color:var(--color-black-50);display:block;height:var(--spacing-layout-s);width:var(--spacing-layout-s)"></span></td></tr><tr><td><code>--spacing-layout-m</code></td><td><code>$spacing-layout-m</code></td><td align="right">48px</td><td align="right">3rem</td><td><span aria-label="Visualized example" role="img" style="background-color:var(--color-black-50);display:block;height:var(--spacing-layout-m);width:var(--spacing-layout-m)"></span></td></tr><tr><td><code>--spacing-layout-l</code></td><td><code>$spacing-layout-l</code></td><td align="right">64px</td><td align="right">4rem</td><td><span aria-label="Visualized example" role="img" style="background-color:var(--color-black-50);display:block;height:var(--spacing-layout-l);width:var(--spacing-layout-l)"></span></td></tr><tr><td><code>--spacing-layout-xl</code></td><td><code>$spacing-layout-xl</code></td><td align="right">96px</td><td align="right">6rem</td><td><span aria-label="Visualized example" role="img" style="background-color:var(--color-black-50);display:block;height:var(--spacing-layout-xl);width:var(--spacing-layout-xl)"></span></td></tr><tr><td><code>--spacing-layout-2-xl</code></td><td><code>$spacing-layout-2-xl</code></td><td align="right">128px</td><td align="right">8rem</td><td><span aria-label="Visualized example" role="img" style="background-color:var(--color-black-50);display:block;height:var(--spacing-layout-2-xl);width:var(--spacing-layout-2-xl)"></span></td></tr></tbody></table></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-568" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-568)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><caption class="hds-table__caption"><b>Table 2</b>: <!-- -->Layout tokens</caption><thead><tr class="hds-table__header-row dark"><th scope="col">CSS variable</th><th scope="col">SASS variable</th><th scope="col">PX value</th><th scope="col">REM value</th><th scope="col">Example</th></tr></thead><tbody class="hds-table__content"><tr><td><code>--spacing-layout-2-xs</code></td><td><code>$spacing-layout-2-xs</code></td><td align="right">16px</td><td align="right">1rem</td><td><span aria-label="Visualized example" role="img" style="background-color:var(--color-black-50);display:block;height:var(--spacing-layout-2-xs);width:var(--spacing-layout-2-xs)"></span></td></tr><tr><td><code>--spacing-layout-xs</code></td><td><code>$spacing-layout-xs</code></td><td align="right">24px</td><td align="right">1.5rem</td><td><span aria-label="Visualized example" role="img" style="background-color:var(--color-black-50);display:block;height:var(--spacing-layout-xs);width:var(--spacing-layout-xs)"></span></td></tr><tr><td><code>--spacing-layout-s</code></td><td><code>$spacing-layout-s</code></td><td align="right">32px</td><td align="right">2rem</td><td><span aria-label="Visualized example" role="img" style="background-color:var(--color-black-50);display:block;height:var(--spacing-layout-s);width:var(--spacing-layout-s)"></span></td></tr><tr><td><code>--spacing-layout-m</code></td><td><code>$spacing-layout-m</code></td><td align="right">48px</td><td align="right">3rem</td><td><span aria-label="Visualized example" role="img" style="background-color:var(--color-black-50);display:block;height:var(--spacing-layout-m);width:var(--spacing-layout-m)"></span></td></tr><tr><td><code>--spacing-layout-l</code></td><td><code>$spacing-layout-l</code></td><td align="right">64px</td><td align="right">4rem</td><td><span aria-label="Visualized example" role="img" style="background-color:var(--color-black-50);display:block;height:var(--spacing-layout-l);width:var(--spacing-layout-l)"></span></td></tr><tr><td><code>--spacing-layout-xl</code></td><td><code>$spacing-layout-xl</code></td><td align="right">96px</td><td align="right">6rem</td><td><span aria-label="Visualized example" role="img" style="background-color:var(--color-black-50);display:block;height:var(--spacing-layout-xl);width:var(--spacing-layout-xl)"></span></td></tr><tr><td><code>--spacing-layout-2-xl</code></td><td><code>$spacing-layout-2-xl</code></td><td align="right">128px</td><td align="right">8rem</td><td><span aria-label="Visualized example" role="img" style="background-color:var(--color-black-50);display:block;height:var(--spacing-layout-2-xl);width:var(--spacing-layout-2-xl)"></span></td></tr></tbody></table></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-567" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-567)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/foundation/design-tokens/typography/index.html b/docs/hds-1817-stepbystep-docs/foundation/design-tokens/typography/index.html
index 8b373fa208b..c0e561f5bb9 100644
--- a/docs/hds-1817-stepbystep-docs/foundation/design-tokens/typography/index.html
+++ b/docs/hds-1817-stepbystep-docs/foundation/design-tokens/typography/index.html
@@ -90,7 +90,7 @@ <h3 id="line-height" style="position:relative" class="page-heading-3 heading-m">
 <div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><caption class="hds-table__caption"><b>Table 4</b>: <!-- -->Line height sizes</caption><thead><tr class="hds-table__header-row dark"><th scope="col">Line height size</th><th scope="col">Ratio</th><th scope="col">Usage</th></tr></thead><tbody class="hds-table__content"><tr><td><strong>Line height S</strong></td><td align="right">1</td><td>Buttons, navigation, and other UI components.</td></tr><tr><td><strong>Line height M</strong></td><td align="right">1.2</td><td>Lead texts and short paragraphs (no longer than 2-3 sentences).</td></tr><tr><td><strong>Line height L</strong></td><td align="right">1.5</td><td>Optimal for longer text content and extended reading.</td></tr><tr><td><strong>Line height XL</strong></td><td align="right">1.75</td><td>Smaller text sizes or if you need to emphasise text (i.e. quotes).</td></tr></tbody></table></div>
 <h3 id="font-weights" style="position:relative" class="page-heading-3 heading-m">Font weights<a href="#font-weights" aria-label="font weights permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h3>
 <p>HDS typography uses three font weights.</p>
-<div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><caption class="hds-table__caption"><b>Table 5</b>: <!-- -->Font weights</caption><thead><tr class="hds-table__header-row dark"><th scope="col">Weight name</th><th scope="col">CSS font-weight</th><th scope="col">Usage</th></tr></thead><tbody class="hds-table__content"><tr><td><strong>Regular</strong></td><td align="right">400</td><td>Body text default.</td></tr><tr><td><strong>Medium</strong></td><td align="right">500</td><td>Used for labels in components e.g. Button and form components.</td></tr><tr><td><strong>Bold</strong></td><td align="right">700</td><td>Used to emphasise text.</td></tr></tbody></table></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-566" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-566)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><caption class="hds-table__caption"><b>Table 5</b>: <!-- -->Font weights</caption><thead><tr class="hds-table__header-row dark"><th scope="col">Weight name</th><th scope="col">CSS font-weight</th><th scope="col">Usage</th></tr></thead><tbody class="hds-table__content"><tr><td><strong>Regular</strong></td><td align="right">400</td><td>Body text default.</td></tr><tr><td><strong>Medium</strong></td><td align="right">500</td><td>Used for labels in components e.g. Button and form components.</td></tr><tr><td><strong>Bold</strong></td><td align="right">700</td><td>Used to emphasise text.</td></tr></tbody></table></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-568" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-568)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/foundation/design-tokens/typography/tokens/index.html b/docs/hds-1817-stepbystep-docs/foundation/design-tokens/typography/tokens/index.html
index 729f0058fba..481511aa94f 100644
--- a/docs/hds-1817-stepbystep-docs/foundation/design-tokens/typography/tokens/index.html
+++ b/docs/hds-1817-stepbystep-docs/foundation/design-tokens/typography/tokens/index.html
@@ -60,7 +60,7 @@
 <section class="Notification-module_notification__2hN3H notification_hds-notification__2DQPN siteNotification" aria-label="Notification"><div class="Notification-module_content__ZZKvE notification_hds-notification__content__5ylSS"><div class="Notification-module_label__1bhNu notification_hds-notification__label__2t1lR" role="heading" aria-level="2"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Notification-module_icon__1ans7 notification_hds-icon__29HQM" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="info-circle-fill" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM13 10V16.5H15V18H9V16.5H11V11.5H9V10H13ZM11.8125 6C12.5374 6 13.125 6.5876 13.125 7.3125C13.125 8.03735 12.5374 8.625 11.8125 8.625C11.0876 8.625 10.5 8.03735 10.5 7.3125C10.5 6.5876 11.0876 6 11.8125 6Z" fill="currentColor"></path></svg>Consider using helper classes</div><div class="Notification-module_body__9BSAD notification_hds-notification__body__3cobH"><p>Instead of using tokens directly to style your typography, consider using <a aria-label="helper classes provided in the Core package. Opens a different website." class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkS__3wxtt link_hds-link--small__2ldrg" href="https://github.com/City-of-Helsinki/helsinki-design-system/tree/master/packages/core/src/utils/helpers.css">helper classes provided in the Core package<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_xs__3kAOj icon_hds-icon--size-xs__3dAMZ Link-module_icon__3ReCc link_icon__i_HqN Link-module_verticalAlignSmallIcon__2IwL7 link_vertical-align-small-icon__3lxhH" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="link-external" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z" fill="currentColor"></path></svg></a>. In these classes, you do not need to worry about matching the correct font weight, line height and letter spacing are matched to the chosen font size.</p></div></div></section>
 <div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><caption class="hds-table__caption"><b>Table 1</b>: <!-- -->Font tokens</caption><thead><tr class="hds-table__header-row dark"><th scope="col">CSS</th><th scope="col">SASS</th><th scope="col">Value</th></tr></thead><tbody class="hds-table__content"><tr><td><code>--font-default</code></td><td><code>$font-default</code></td><td>HelsinkiGrotesk</td></tr></tbody></table></div>
 <div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><caption class="hds-table__caption"><b>Table 2</b>: <!-- -->Font size tokens</caption><thead><tr class="hds-table__header-row dark"><th scope="col">CSS variable</th><th scope="col">SASS variable</th><th scope="col">REM value</th><th scope="col">Example</th></tr></thead><tbody class="hds-table__content"><tr><td><code>--fontsize-heading-xxl</code></td><td><code>$fontsize-heading-xxl</code></td><td>4rem</td><td><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-xxl);font-weight:400;color:var(--color-black-90)">Aa</span></td></tr><tr><td><code>--fontsize-heading-xl</code></td><td><code>$fontsize-heading-xl</code></td><td>3rem</td><td><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-xl);font-weight:400;color:var(--color-black-90)">Aa</span></td></tr><tr><td><code>--fontsize-heading-xl-mobile</code></td><td><code>$fontsize-heading-xl-mobile</code></td><td>2.5rem</td><td><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-xl-mobile);font-weight:400;color:var(--color-black-90)">Aa</span></td></tr><tr><td><code>--fontsize-heading-l</code></td><td><code>$fontsize-heading-l</code></td><td>2rem</td><td><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-l);font-weight:400;color:var(--color-black-90)">Aa</span></td></tr><tr><td><code>--fontsize-heading-m</code></td><td><code>$fontsize-heading-m</code></td><td>1.5rem</td><td><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-m);font-weight:400;color:var(--color-black-90)">Aa</span></td></tr><tr><td><code>--fontsize-heading-s</code></td><td><code>$fontsize-heading-s</code></td><td>1.25rem</td><td><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-s);font-weight:400;color:var(--color-black-90)">Aa</span></td></tr><tr><td><code>--fontsize-heading-xs</code></td><td><code>$fontsize-heading-xs</code></td><td>1.125rem</td><td><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-xs);font-weight:400;color:var(--color-black-90)">Aa</span></td></tr><tr><td><code>--fontsize-heading-xxs</code></td><td><code>$fontsize-heading-xxs</code></td><td>1rem</td><td><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-heading-xxs);font-weight:400;color:var(--color-black-90)">Aa</span></td></tr><tr><td><code>--fontsize-body-xl</code></td><td><code>$fontsize-body-xl</code></td><td>1.25rem</td><td><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-body-xl);font-weight:400;color:var(--color-black-90)">Aa</span></td></tr><tr><td><code>--fontsize-body-l</code></td><td><code>$fontsize-body-l</code></td><td>1.125rem</td><td><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-body-l);font-weight:400;color:var(--color-black-90)">Aa</span></td></tr><tr><td><code>--fontsize-body-m</code></td><td><code>$fontsize-body-m</code></td><td>1rem</td><td><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-body-m);font-weight:400;color:var(--color-black-90)">Aa</span></td></tr><tr><td><code>--fontsize-body-s</code></td><td><code>$fontsize-body-s</code></td><td>0.875rem</td><td><span aria-label="Visualized example" role="img" style="font-size:var(--fontsize-body-s);font-weight:400;color:var(--color-black-90)">Aa</span></td></tr></tbody></table></div>
-<div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><caption class="hds-table__caption"><b>Table 3</b>: <!-- -->Line height tokens</caption><thead><tr class="hds-table__header-row dark"><th scope="col">CSS variable</th><th scope="col">SASS variable</th><th scope="col">Value (ratio)</th></tr></thead><tbody class="hds-table__content"><tr><td><code>--lineheight-s</code></td><td><code>$lineheight-s</code></td><td>1</td></tr><tr><td><code>--lineheight-m</code></td><td><code>$lineheight-m</code></td><td>1.2</td></tr><tr><td><code>--lineheight-l</code></td><td><code>$lineheight-l</code></td><td>1.5</td></tr><tr><td><code>--lineheight-xl</code></td><td><code>$lineheight-xl</code></td><td>1.75</td></tr></tbody></table></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-562" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-562)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><caption class="hds-table__caption"><b>Table 3</b>: <!-- -->Line height tokens</caption><thead><tr class="hds-table__header-row dark"><th scope="col">CSS variable</th><th scope="col">SASS variable</th><th scope="col">Value (ratio)</th></tr></thead><tbody class="hds-table__content"><tr><td><code>--lineheight-s</code></td><td><code>$lineheight-s</code></td><td>1</td></tr><tr><td><code>--lineheight-m</code></td><td><code>$lineheight-m</code></td><td>1.2</td></tr><tr><td><code>--lineheight-l</code></td><td><code>$lineheight-l</code></td><td>1.5</td></tr><tr><td><code>--lineheight-xl</code></td><td><code>$lineheight-xl</code></td><td>1.75</td></tr></tbody></table></div></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-563" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-563)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/foundation/guidelines/photography/index.html b/docs/hds-1817-stepbystep-docs/foundation/guidelines/photography/index.html
index 3775083df61..3db0a7857a1 100644
--- a/docs/hds-1817-stepbystep-docs/foundation/guidelines/photography/index.html
+++ b/docs/hds-1817-stepbystep-docs/foundation/guidelines/photography/index.html
@@ -63,7 +63,7 @@
 <li><strong>Original Helsinki:</strong> Helsinki is a city where dissimilarity is appreciated. Here, everyone can be themselves, no matter how eccentric or regular you are.</li>
 </ul>
 <p>In user interfaces, photographs can be used for example in hero elements, text/photo modules or card components.</p>
-<p>See the <a aria-label="Visual Identity Guidelines - Photograph guidelines. Opens a different website." class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="https://brand.hel.fi/en/photograph-guidelines/">Visual Identity Guidelines - Photograph guidelines<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Link-module_icon__3ReCc link_icon__i_HqN Link-module_verticalAlignMediumIcon__12PVa link_vertical-align-medium-icon__3IWi1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="link-external" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z" fill="currentColor"></path></svg></a> for more information on using photographs.</p></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-741" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-741)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<p>See the <a aria-label="Visual Identity Guidelines - Photograph guidelines. Opens a different website." class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="https://brand.hel.fi/en/photograph-guidelines/">Visual Identity Guidelines - Photograph guidelines<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Link-module_icon__3ReCc link_icon__i_HqN Link-module_verticalAlignMediumIcon__12PVa link_vertical-align-medium-icon__3IWi1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="link-external" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z" fill="currentColor"></path></svg></a> for more information on using photographs.</p></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-740" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-740)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/foundation/visual-assets/favicon/index.html b/docs/hds-1817-stepbystep-docs/foundation/visual-assets/favicon/index.html
index 4fde2a3f69e..bee6fbe4fab 100644
--- a/docs/hds-1817-stepbystep-docs/foundation/visual-assets/favicon/index.html
+++ b/docs/hds-1817-stepbystep-docs/foundation/visual-assets/favicon/index.html
@@ -92,7 +92,7 @@ <h2 id="installation" style="position:relative" class="page-heading-2 heading-l"
 <p><strong>Note</strong> All favicons and app icons have a specific purpose, but you are by no means required to use all of them.</p>
 <h3 id="download" style="position:relative" class="page-heading-3 heading-m">Download<a href="#download" aria-label="download permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h3>
 <p>The favicon for the City of Helsinki digital services is a minimised version of the Helsinki logo. Various favicons are available as a downloadable ZIP package.</p>
-<p>You can <a aria-label="download the latest HDS Favicon kit from the HDS GitHub repository. Opens a different website." class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="https://github.com/City-of-Helsinki/helsinki-design-system/releases/latest/download/hds-favicon-kit.zip">download the latest HDS Favicon kit from the HDS GitHub repository<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Link-module_icon__3ReCc link_icon__i_HqN Link-module_verticalAlignMediumIcon__12PVa link_vertical-align-medium-icon__3IWi1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="link-external" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z" fill="currentColor"></path></svg></a>.</p></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-733" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-733)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<p>You can <a aria-label="download the latest HDS Favicon kit from the HDS GitHub repository. Opens a different website." class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="https://github.com/City-of-Helsinki/helsinki-design-system/releases/latest/download/hds-favicon-kit.zip">download the latest HDS Favicon kit from the HDS GitHub repository<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Link-module_icon__3ReCc link_icon__i_HqN Link-module_verticalAlignMediumIcon__12PVa link_vertical-align-medium-icon__3IWi1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="link-external" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z" fill="currentColor"></path></svg></a>.</p></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-728" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-728)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/foundation/visual-assets/icons/index.html b/docs/hds-1817-stepbystep-docs/foundation/visual-assets/icons/index.html
index bd2de466fc7..6a2a0022f09 100644
--- a/docs/hds-1817-stepbystep-docs/foundation/visual-assets/icons/index.html
+++ b/docs/hds-1817-stepbystep-docs/foundation/visual-assets/icons/index.html
@@ -83,7 +83,7 @@ <h3 id="colour" style="position:relative" class="page-heading-3 heading-m">Colou
 <ul>
 <li>Other colours should be used sparingly and serve a clear purpose, preferably only highlighting errors and other system statuses.</li>
 <li>See <a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/hds-demo/hds-1817-stepbystep-docs/foundation/design-tokens/colour">colour guidelines</a> for further information.</li>
-</ul></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-561" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-561)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+</ul></div></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-560" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-560)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/foundation/visual-assets/logo/index.html b/docs/hds-1817-stepbystep-docs/foundation/visual-assets/logo/index.html
index a63c7837aa5..c07e5876f72 100644
--- a/docs/hds-1817-stepbystep-docs/foundation/visual-assets/logo/index.html
+++ b/docs/hds-1817-stepbystep-docs/foundation/visual-assets/logo/index.html
@@ -78,7 +78,7 @@ <h3 id="colour" style="position:relative" class="page-heading-3 heading-m">Colou
 <ul>
 <li>Check that the colour contrast of the logo and its background is compliant with <a aria-label="AA Level contrast ratios. Opens a different website." class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="https://www.w3.org/TR/WCAG21/#contrast-minimum">AA Level contrast ratios<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Link-module_icon__3ReCc link_icon__i_HqN Link-module_verticalAlignMediumIcon__12PVa link_vertical-align-medium-icon__3IWi1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="link-external" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z" fill="currentColor"></path></svg></a>.</li>
 <li>For more information, see the <a aria-label="Visual Identity Guidelines - Colours. Opens a different website." class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="https://brand.hel.fi/en/colours/">Visual Identity Guidelines - Colours<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Link-module_icon__3ReCc link_icon__i_HqN Link-module_verticalAlignMediumIcon__12PVa link_vertical-align-medium-icon__3IWi1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="link-external" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z" fill="currentColor"></path></svg></a>.</li>
-</ul></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-725" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-725)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+</ul></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-726" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-726)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/foundation/visual-assets/placeholders/index.html b/docs/hds-1817-stepbystep-docs/foundation/visual-assets/placeholders/index.html
index a17d370fb2a..05f8690223c 100644
--- a/docs/hds-1817-stepbystep-docs/foundation/visual-assets/placeholders/index.html
+++ b/docs/hds-1817-stepbystep-docs/foundation/visual-assets/placeholders/index.html
@@ -74,7 +74,7 @@ <h3 id="image-placeholders" style="position:relative" class="page-heading-3 head
 <h3 id="user-image-placeholders" style="position:relative" class="page-heading-3 heading-m">User image placeholders<a href="#user-image-placeholders" aria-label="user image placeholders permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h3>
 <p>User image placeholders are used only for replacing missing user profile images.</p>
 <p>You can <a aria-label="download the user image placeholder package (a .zip file). Opens a different website." class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/images/foundation/visual-assets/placeholders/HDS-placeholder-user-image.zip">download the user image placeholder package (a .zip file)<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Link-module_icon__3ReCc link_icon__i_HqN Link-module_verticalAlignMediumIcon__12PVa link_vertical-align-medium-icon__3IWi1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="link-external" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z" fill="currentColor"></path></svg></a>, or just specific image files by clicking images in the table below and saving them.</p>
-<div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><caption class="hds-table__caption"><b>Table 2</b>: <!-- -->User image placeholders</caption><thead><tr class="hds-table__header-row dark"><th scope="col">Image</th><th scope="col">Size</th><th scope="col">Dimensions</th><th scope="col">Scale</th><th scope="col">Pixel size</th></tr></thead><tbody class="hds-table__content"><tr><td><div class="image-container"><a class="image-container-link" href="/hds-demo/hds-1817-stepbystep-docs/images/foundation/visual-assets/placeholders/user-image-s.png" title="Open placeholder user image Small" style="width:100%;maxwidth:42px"><img class="image-container-image" alt="Open placeholder user image Small" src="/hds-demo/hds-1817-stepbystep-docs/images/foundation/visual-assets/placeholders/user-image-s.png" style="width:100%;maxwidth:42px"/></a></div></td><td><strong>Small</strong></td><td>42 x 42 dp</td><td></td><td>42 x 42 px</td></tr><tr><td><div class="image-container"><a class="image-container-link" href="/hds-demo/hds-1817-stepbystep-docs/images/foundation/visual-assets/placeholders/user-image-s@2x.png" title="Open placeholder user image Small @2x scale" style="width:100%;maxwidth:42px"><img class="image-container-image" alt="Open placeholder user image Small @2x scale" src="/hds-demo/hds-1817-stepbystep-docs/images/foundation/visual-assets/placeholders/user-image-s@2x.png" style="width:100%;maxwidth:42px"/></a></div></td><td><strong>Small</strong></td><td>42 x 42 dp</td><td>@2x</td><td>84 x 84 px</td></tr><tr><td><div class="image-container"><a class="image-container-link" href="/hds-demo/hds-1817-stepbystep-docs/images/foundation/visual-assets/placeholders/user-image-s@3x.png" title="Open placeholder user image Small @3x scale" style="width:100%;maxwidth:42px"><img class="image-container-image" alt="Open placeholder user image Small @3x scale" src="/hds-demo/hds-1817-stepbystep-docs/images/foundation/visual-assets/placeholders/user-image-s@3x.png" style="width:100%;maxwidth:42px"/></a></div></td><td><strong>Small</strong></td><td>42 x 42 dp</td><td>@3x</td><td>126 x 126 px</td></tr><tr><td><div class="image-container"><a class="image-container-link" href="/hds-demo/hds-1817-stepbystep-docs/images/foundation/visual-assets/placeholders/user-image-m.png" title="Open placeholder user image Medium" style="width:100%;maxwidth:96px"><img class="image-container-image" alt="Open placeholder user image Medium" src="/hds-demo/hds-1817-stepbystep-docs/images/foundation/visual-assets/placeholders/user-image-m.png" style="width:100%;maxwidth:96px"/></a></div></td><td><strong>Medium</strong></td><td>96 x 96 dp</td><td></td><td>96 x 96 px</td></tr><tr><td><div class="image-container"><a class="image-container-link" href="/hds-demo/hds-1817-stepbystep-docs/images/foundation/visual-assets/placeholders/user-image-m@2x.png" title="Open placeholder user image Medium @2x scale" style="width:100%;maxwidth:96px"><img class="image-container-image" alt="Open placeholder user image Medium @2x scale" src="/hds-demo/hds-1817-stepbystep-docs/images/foundation/visual-assets/placeholders/user-image-m@2x.png" style="width:100%;maxwidth:96px"/></a></div></td><td><strong>Medium</strong></td><td>96 x 96 dp</td><td>@2x</td><td>192 x 192 px</td></tr><tr><td><div class="image-container"><a class="image-container-link" href="/hds-demo/hds-1817-stepbystep-docs/images/foundation/visual-assets/placeholders/user-image-m@3x.png" title="Open placeholder user image Medium @3x scale" style="width:100%;maxwidth:96px"><img class="image-container-image" alt="Open placeholder user image Medium @3x scale" src="/hds-demo/hds-1817-stepbystep-docs/images/foundation/visual-assets/placeholders/user-image-m@3x.png" style="width:100%;maxwidth:96px"/></a></div></td><td><strong>Medium</strong></td><td>96 x 96 dp</td><td>@3x</td><td>288 x 288 px</td></tr><tr><td><div class="image-container"><a class="image-container-link" href="/hds-demo/hds-1817-stepbystep-docs/images/foundation/visual-assets/placeholders/user-image-l.png" title="Open placeholder user image Large" style="width:100%;maxwidth:128px"><img class="image-container-image" alt="Open placeholder user image Large" src="/hds-demo/hds-1817-stepbystep-docs/images/foundation/visual-assets/placeholders/user-image-l.png" style="width:100%;maxwidth:128px"/></a></div></td><td><strong>Large</strong></td><td>128 x 128 dp</td><td></td><td>128 x 128 px</td></tr><tr><td><div class="image-container"><a class="image-container-link" href="/hds-demo/hds-1817-stepbystep-docs/images/foundation/visual-assets/placeholders/user-image-l@2x.png" title="Open placeholder user image Large @2x scale" style="width:100%;maxwidth:128px"><img class="image-container-image" alt="Open placeholder user image Large @2x scale" src="/hds-demo/hds-1817-stepbystep-docs/images/foundation/visual-assets/placeholders/user-image-l@2x.png" style="width:100%;maxwidth:128px"/></a></div></td><td><strong>Large</strong></td><td>128 x 128 dp</td><td>@2x</td><td>256 x 256 px</td></tr><tr><td><div class="image-container"><a class="image-container-link" href="/hds-demo/hds-1817-stepbystep-docs/images/foundation/visual-assets/placeholders/user-image-l@3x.png" title="Open placeholder user image Large @3x scale" style="width:100%;maxwidth:128px"><img class="image-container-image" alt="Open placeholder user image Large @3x scale" src="/hds-demo/hds-1817-stepbystep-docs/images/foundation/visual-assets/placeholders/user-image-l@3x.png" style="width:100%;maxwidth:128px"/></a></div></td><td><strong>Large</strong></td><td>128 x 128 dp</td><td>@3x</td><td>384 x 384 px</td></tr></tbody></table></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-726" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-726)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="hds-table-container" tabindex="0" style="margin-bottom:var(--spacing-layout-xs)"><table class="hds-table hds-table--dark" aria-label="Service users (dark variant)"><caption class="hds-table__caption"><b>Table 2</b>: <!-- -->User image placeholders</caption><thead><tr class="hds-table__header-row dark"><th scope="col">Image</th><th scope="col">Size</th><th scope="col">Dimensions</th><th scope="col">Scale</th><th scope="col">Pixel size</th></tr></thead><tbody class="hds-table__content"><tr><td><div class="image-container"><a class="image-container-link" href="/hds-demo/hds-1817-stepbystep-docs/images/foundation/visual-assets/placeholders/user-image-s.png" title="Open placeholder user image Small" style="width:100%;maxwidth:42px"><img class="image-container-image" alt="Open placeholder user image Small" src="/hds-demo/hds-1817-stepbystep-docs/images/foundation/visual-assets/placeholders/user-image-s.png" style="width:100%;maxwidth:42px"/></a></div></td><td><strong>Small</strong></td><td>42 x 42 dp</td><td></td><td>42 x 42 px</td></tr><tr><td><div class="image-container"><a class="image-container-link" href="/hds-demo/hds-1817-stepbystep-docs/images/foundation/visual-assets/placeholders/user-image-s@2x.png" title="Open placeholder user image Small @2x scale" style="width:100%;maxwidth:42px"><img class="image-container-image" alt="Open placeholder user image Small @2x scale" src="/hds-demo/hds-1817-stepbystep-docs/images/foundation/visual-assets/placeholders/user-image-s@2x.png" style="width:100%;maxwidth:42px"/></a></div></td><td><strong>Small</strong></td><td>42 x 42 dp</td><td>@2x</td><td>84 x 84 px</td></tr><tr><td><div class="image-container"><a class="image-container-link" href="/hds-demo/hds-1817-stepbystep-docs/images/foundation/visual-assets/placeholders/user-image-s@3x.png" title="Open placeholder user image Small @3x scale" style="width:100%;maxwidth:42px"><img class="image-container-image" alt="Open placeholder user image Small @3x scale" src="/hds-demo/hds-1817-stepbystep-docs/images/foundation/visual-assets/placeholders/user-image-s@3x.png" style="width:100%;maxwidth:42px"/></a></div></td><td><strong>Small</strong></td><td>42 x 42 dp</td><td>@3x</td><td>126 x 126 px</td></tr><tr><td><div class="image-container"><a class="image-container-link" href="/hds-demo/hds-1817-stepbystep-docs/images/foundation/visual-assets/placeholders/user-image-m.png" title="Open placeholder user image Medium" style="width:100%;maxwidth:96px"><img class="image-container-image" alt="Open placeholder user image Medium" src="/hds-demo/hds-1817-stepbystep-docs/images/foundation/visual-assets/placeholders/user-image-m.png" style="width:100%;maxwidth:96px"/></a></div></td><td><strong>Medium</strong></td><td>96 x 96 dp</td><td></td><td>96 x 96 px</td></tr><tr><td><div class="image-container"><a class="image-container-link" href="/hds-demo/hds-1817-stepbystep-docs/images/foundation/visual-assets/placeholders/user-image-m@2x.png" title="Open placeholder user image Medium @2x scale" style="width:100%;maxwidth:96px"><img class="image-container-image" alt="Open placeholder user image Medium @2x scale" src="/hds-demo/hds-1817-stepbystep-docs/images/foundation/visual-assets/placeholders/user-image-m@2x.png" style="width:100%;maxwidth:96px"/></a></div></td><td><strong>Medium</strong></td><td>96 x 96 dp</td><td>@2x</td><td>192 x 192 px</td></tr><tr><td><div class="image-container"><a class="image-container-link" href="/hds-demo/hds-1817-stepbystep-docs/images/foundation/visual-assets/placeholders/user-image-m@3x.png" title="Open placeholder user image Medium @3x scale" style="width:100%;maxwidth:96px"><img class="image-container-image" alt="Open placeholder user image Medium @3x scale" src="/hds-demo/hds-1817-stepbystep-docs/images/foundation/visual-assets/placeholders/user-image-m@3x.png" style="width:100%;maxwidth:96px"/></a></div></td><td><strong>Medium</strong></td><td>96 x 96 dp</td><td>@3x</td><td>288 x 288 px</td></tr><tr><td><div class="image-container"><a class="image-container-link" href="/hds-demo/hds-1817-stepbystep-docs/images/foundation/visual-assets/placeholders/user-image-l.png" title="Open placeholder user image Large" style="width:100%;maxwidth:128px"><img class="image-container-image" alt="Open placeholder user image Large" src="/hds-demo/hds-1817-stepbystep-docs/images/foundation/visual-assets/placeholders/user-image-l.png" style="width:100%;maxwidth:128px"/></a></div></td><td><strong>Large</strong></td><td>128 x 128 dp</td><td></td><td>128 x 128 px</td></tr><tr><td><div class="image-container"><a class="image-container-link" href="/hds-demo/hds-1817-stepbystep-docs/images/foundation/visual-assets/placeholders/user-image-l@2x.png" title="Open placeholder user image Large @2x scale" style="width:100%;maxwidth:128px"><img class="image-container-image" alt="Open placeholder user image Large @2x scale" src="/hds-demo/hds-1817-stepbystep-docs/images/foundation/visual-assets/placeholders/user-image-l@2x.png" style="width:100%;maxwidth:128px"/></a></div></td><td><strong>Large</strong></td><td>128 x 128 dp</td><td>@2x</td><td>256 x 256 px</td></tr><tr><td><div class="image-container"><a class="image-container-link" href="/hds-demo/hds-1817-stepbystep-docs/images/foundation/visual-assets/placeholders/user-image-l@3x.png" title="Open placeholder user image Large @3x scale" style="width:100%;maxwidth:128px"><img class="image-container-image" alt="Open placeholder user image Large @3x scale" src="/hds-demo/hds-1817-stepbystep-docs/images/foundation/visual-assets/placeholders/user-image-l@3x.png" style="width:100%;maxwidth:128px"/></a></div></td><td><strong>Large</strong></td><td>128 x 128 dp</td><td>@3x</td><td>384 x 384 px</td></tr></tbody></table></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-724" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-724)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/foundation/visual-assets/wave-motifs/index.html b/docs/hds-1817-stepbystep-docs/foundation/visual-assets/wave-motifs/index.html
index 45bf31357d0..a7561a8901b 100644
--- a/docs/hds-1817-stepbystep-docs/foundation/visual-assets/wave-motifs/index.html
+++ b/docs/hds-1817-stepbystep-docs/foundation/visual-assets/wave-motifs/index.html
@@ -141,7 +141,7 @@ <h2 id="further-reading" style="position:relative" class="page-heading-2 heading
 <li>
 <a aria-label="Helsinki Brand - Downloadable animations. Opens a different website." class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="https://brand.hel.fi/en/downloadable-animations/">Helsinki Brand - Downloadable animations<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Link-module_icon__3ReCc link_icon__i_HqN Link-module_verticalAlignMediumIcon__12PVa link_vertical-align-medium-icon__3IWi1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="link-external" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z" fill="currentColor"></path></svg></a>
 </li>
-</ul></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-721" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-721)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+</ul></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-722" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-722)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/getting-started/contributing/design/index.html b/docs/hds-1817-stepbystep-docs/getting-started/contributing/design/index.html
index 7a988e995d8..466b39d1fd7 100644
--- a/docs/hds-1817-stepbystep-docs/getting-started/contributing/design/index.html
+++ b/docs/hds-1817-stepbystep-docs/getting-started/contributing/design/index.html
@@ -332,7 +332,7 @@ <h3 id="symbols-and-overrides" style="position:relative" class="page-heading-3 h
 <li>Text fields scale inappropriate directions when content is customised.</li>
 </ul>
 </li>
-</ul></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-722" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-722)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+</ul></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-720" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-720)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/getting-started/index.html b/docs/hds-1817-stepbystep-docs/getting-started/index.html
index f1ffa7370a2..f83f282df2a 100644
--- a/docs/hds-1817-stepbystep-docs/getting-started/index.html
+++ b/docs/hds-1817-stepbystep-docs/getting-started/index.html
@@ -63,7 +63,7 @@
 <li><strong>For developers</strong>, HDS offers component libraries (Core and React) that provide modular, accessible components for building scalable digital services efficiently.</li>
 <li><strong>For all</strong>, HDS offers visual assets like icons and logos to help keep the visual language consistent.</li>
 <li><strong>For all</strong>, HDS offers a documentation site that collects detailed information on how to use the HDS components, design tokens, and visual assets in practice, including design principles, accessibility and usage guidelines, examples, interactive demos, and API descriptions.</li>
-</ul></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-107" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-107)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a aria-current="page" class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+</ul></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-109" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-109)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a aria-current="page" class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/getting-started/tutorials/abstract-tutorial/index.html b/docs/hds-1817-stepbystep-docs/getting-started/tutorials/abstract-tutorial/index.html
index c1a9be407ba..abf1d197e0d 100644
--- a/docs/hds-1817-stepbystep-docs/getting-started/tutorials/abstract-tutorial/index.html
+++ b/docs/hds-1817-stepbystep-docs/getting-started/tutorials/abstract-tutorial/index.html
@@ -133,7 +133,7 @@ <h2 id="abstract-resources" style="position:relative" class="page-heading-2 head
 <li>
 <a aria-label="Abstract documentation - Troubleshooting in branches. Opens a different website." class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="https://help.abstract.com/hc/en-us/sections/360012371291-Troubleshooting-in-Branches">Abstract documentation - Troubleshooting in branches<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Link-module_icon__3ReCc link_icon__i_HqN Link-module_verticalAlignMediumIcon__12PVa link_vertical-align-medium-icon__3IWi1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="link-external" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z" fill="currentColor"></path></svg></a>
 </li>
-</ul></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-613" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-613)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+</ul></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-612" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-612)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/getting-started/tutorials/migrate-to-3.0.0/index.html b/docs/hds-1817-stepbystep-docs/getting-started/tutorials/migrate-to-3.0.0/index.html
index 64b9cb55080..7a4c1a899c5 100644
--- a/docs/hds-1817-stepbystep-docs/getting-started/tutorials/migrate-to-3.0.0/index.html
+++ b/docs/hds-1817-stepbystep-docs/getting-started/tutorials/migrate-to-3.0.0/index.html
@@ -122,7 +122,7 @@ <h2 id="instructions-for-designers-using-sketch" style="position:relative" class
 <p>Also, if needed, old versions of the library can be found in <a aria-label="the design kit of each release. Opens in a new tab. Opens a different website." class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="https://github.com/City-of-Helsinki/helsinki-design-system/releases" target="_blank" rel="noopener">the design kit of each release.<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Link-module_icon__3ReCc link_icon__i_HqN Link-module_verticalAlignMediumIcon__12PVa link_vertical-align-medium-icon__3IWi1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="link-external" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z" fill="currentColor"></path></svg></a></p>
 <h2 id="instructions-for-designers-using-figma" style="position:relative" class="page-heading-2 heading-l">Instructions for designers using Figma<a href="#instructions-for-designers-using-figma" aria-label="instructions for designers using figma permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h2>
 <p>There is a brand new Figma library available. The licences are checked and provided separately, and currently available for a limited time. But if you&#x27;re intrested in switching to Figma, contact HDS team.
-It will be available with Helsinki licenses and in the future also as a community file.</p></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-609" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-609)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+It will be available with Helsinki licenses and in the future also as a community file.</p></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-611" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-611)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/getting-started/versioning/index.html b/docs/hds-1817-stepbystep-docs/getting-started/versioning/index.html
index b6e12c6cfc9..d0eafded9c6 100644
--- a/docs/hds-1817-stepbystep-docs/getting-started/versioning/index.html
+++ b/docs/hds-1817-stepbystep-docs/getting-started/versioning/index.html
@@ -94,7 +94,7 @@ <h3 id="implementation" style="position:relative" class="page-heading-3 heading-
 <li>new optional properties or features are added</li>
 <li>bug fixes that don’t change the names of the properties or remove functionality</li>
 <li>marking something deprecated. It will a become breaking change when it is actually removed</li>
-</ul></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-108" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-108)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+</ul></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-106" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-106)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/patterns/cookies/basics/index.html b/docs/hds-1817-stepbystep-docs/patterns/cookies/basics/index.html
index 371e458eafb..dd4e8f6ae32 100644
--- a/docs/hds-1817-stepbystep-docs/patterns/cookies/basics/index.html
+++ b/docs/hds-1817-stepbystep-docs/patterns/cookies/basics/index.html
@@ -96,7 +96,7 @@ <h4 id="can-i-use-a-custom-category" style="position:relative" class="page-headi
 <h4 id="we-only-have-a-handful-of-cookies-do-we-still-have-to-categorize-them" style="position:relative" class="page-heading-4 heading-s">We only have a handful of cookies. Do we still have to categorize them?<a href="#we-only-have-a-handful-of-cookies-do-we-still-have-to-categorize-them" aria-label="we only have a handful of cookies do we still have to categorize them permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h4>
 <p>Yes, cookies always have to be put into a category. If you have a small number of cookies you can consider grouping them into a single category. Also, if most of the cookies are related to a single third-party service, you can group them per service (E.g. &quot;Service: YouTube&quot;).</p>
 <h3 id="prepare-your-cookieconsent-cookiemodalcookiepage-component" style="position:relative" class="page-heading-3 heading-m">Prepare your CookieConsent (CookieModal/CookiePage) component<a href="#prepare-your-cookieconsent-cookiemodalcookiepage-component" aria-label="prepare your cookieconsent cookiemodalcookiepage component permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h3>
-<p>Now that you have gathered and categorised a list of cookies for your service, it is a time to learn how the HDS CookieConsent is used. To read more about the component, please refer to the <a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/hds-demo/hds-1817-stepbystep-docs/patterns/cookies/using-the-cookieconsent">Using the CookieConsent page.</a></p></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-610" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-610)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<p>Now that you have gathered and categorised a list of cookies for your service, it is a time to learn how the HDS CookieConsent is used. To read more about the component, please refer to the <a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/hds-demo/hds-1817-stepbystep-docs/patterns/cookies/using-the-cookieconsent">Using the CookieConsent page.</a></p></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-608" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-608)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/patterns/forms/form-building/index.html b/docs/hds-1817-stepbystep-docs/patterns/forms/form-building/index.html
index 749de9affc4..d2756c7047a 100644
--- a/docs/hds-1817-stepbystep-docs/patterns/forms/form-building/index.html
+++ b/docs/hds-1817-stepbystep-docs/patterns/forms/form-building/index.html
@@ -376,7 +376,7 @@ <h3 id="an-example-focus-order-for-a-multi-page-form" style="position:relative"
 <h2 id="gender-neutrality-in-forms" style="position:relative" class="page-heading-2 heading-l">Gender-neutrality in forms<a href="#gender-neutrality-in-forms" aria-label="gender neutrality in forms permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h2>
 <h3 id="asking-for-gender" style="position:relative" class="page-heading-3 heading-m">Asking for gender<a href="#asking-for-gender" aria-label="asking for gender permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h3>
 <p>When asking for the user&#x27;s gender, <code>Other</code> and <code>Do not want to answer</code> options must be provided. If these options are ordered, use order <code>Woman → Man → Other → Do not want to answer</code> since it is statistically the most probable. Using the <a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/hds-demo/hds-1817-stepbystep-docs/components/selection-group">Selection group component</a> with radio buttons is recommended for this purpose.</p>
-<div class="image-container"><a class="image-container-link" href="/hds-demo/hds-1817-stepbystep-docs/images/patterns/form/building/form-asking-for-gender-example@2x.png" title="An example of asking the user&#x27;s gender" style="max-width:432px"><img class="image-container-image" alt="An example of asking the user&#x27;s gender" src="/hds-demo/hds-1817-stepbystep-docs/images/patterns/form/building/form-asking-for-gender-example@2x.png" style="max-width:432px"/></a></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-601" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-601)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="image-container"><a class="image-container-link" href="/hds-demo/hds-1817-stepbystep-docs/images/patterns/form/building/form-asking-for-gender-example@2x.png" title="An example of asking the user&#x27;s gender" style="max-width:432px"><img class="image-container-image" alt="An example of asking the user&#x27;s gender" src="/hds-demo/hds-1817-stepbystep-docs/images/patterns/form/building/form-asking-for-gender-example@2x.png" style="max-width:432px"/></a></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-602" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-602)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/patterns/forms/form-multi-page/index.html b/docs/hds-1817-stepbystep-docs/patterns/forms/form-multi-page/index.html
index 3e054c36ff0..11a6f1f173e 100644
--- a/docs/hds-1817-stepbystep-docs/patterns/forms/form-multi-page/index.html
+++ b/docs/hds-1817-stepbystep-docs/patterns/forms/form-multi-page/index.html
@@ -130,7 +130,7 @@ <h2 id="handling-errors" style="position:relative" class="page-heading-2 heading
 <a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/hds-demo/hds-1817-stepbystep-docs/components/notification"> Inline Notification</a> for this.</p></li><li><p>If it is possible that there are errors in previous steps when the user reaches the end of the form, offer a
 clear summary page of all errors are provide links to relevant pages to fix the errors.</p></li></ul></li></ul></div>
 <h2 id="end-of-the-form" style="position:relative" class="page-heading-2 heading-l">End of the form<a href="#end-of-the-form" aria-label="end of the form permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h2>
-<p>When the user reaches the end of the form, it is recommended to offer a review page as the last step of the form. This allows the user to review the information they are about to submit and potentially fix errors in the data. The review step is especially important for longer forms.</p></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-602" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-602)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<p>When the user reaches the end of the form, it is recommended to offer a review page as the last step of the form. This allows the user to review the information they are about to submit and potentially fix errors in the data. The review step is especially important for longer forms.</p></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-601" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-601)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/patterns/index.html b/docs/hds-1817-stepbystep-docs/patterns/index.html
index 44d45ad0f12..f2e381cd6a6 100644
--- a/docs/hds-1817-stepbystep-docs/patterns/index.html
+++ b/docs/hds-1817-stepbystep-docs/patterns/index.html
@@ -56,7 +56,7 @@
   </script><link rel="manifest" href="/hds-demo/hds-1817-stepbystep-docs/manifest.webmanifest" crossorigin="anonymous"/><link rel="apple-touch-icon" sizes="any" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/favicon-32x32.ico"/><link rel="apple-touch-icon" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/apple-touch-icon.png"/><link rel="apple-touch-icon" sizes="192x192" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/favicon-192x192.png"/><link rel="apple-touch-icon" sizes="512x512" href="/hds-demo/hds-1817-stepbystep-docs/favicon/light/favicon-512x512.png"/><link rel="preconnect" href="https://webanalytics.digiaiiris.com/js"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="page text-body"><header class="hds-header Header-module_header__291GF pageHeader" id="page-header"><div class="Header-module_headerBackgroundWrapper__KsFy2"><a href="#content" class="SkipLink-module_skipLink__1knzF"><span class="SkipLink-module_skipLinkLabel__21n5B">Skip to content</span></a><div class="HeaderActionBar-module_headerActionBarContainer__5tfj-"><div class="HeaderActionBar-module_headerActionBar__lPeGE"><a href="https://hds.hel.fi" aria-label="City of Helsinki Logo" class="HeaderActionBar-module_titleAndLogoContainer__2LEAb HeaderActionBar-module_logo__2r2T0"><span class="HeaderActionBarLogo-module_logoWrapper__8NgfS"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></span></a><a href="https://hds.hel.fi" aria-label="Helsinki: Helsinki Design System" class="HeaderActionBar-module_titleAndLogoContainer__2LEAb HeaderActionBar-module_title__opzt9 HeaderActionBar-module_normal__3B4qi"><span class="HeaderActionBar-module_title__opzt9"><div class="page-header-title"><div>Helsinki Design System</div><div class="page-header-title-badge"><img style="filter:invert(1)" alt="HDS version number: 2.15.0" src="https://img.shields.io/github/v/release/City-of-Helsinki/helsinki-design-system?label=&amp;style=for-the-badge&amp;color=1a1a1a"/></div></div></span></a><div class="HeaderActionBar-module_headerActions__3lNnM"></div></div></div><div class="HeaderNavigationMenu-module_headerNavigationMenuContainer__2nK9z"><nav class="HeaderNavigationMenu-module_headerNavigationMenu__3G6-N"><ul class="HeaderNavigationMenu-module_headerNavigationMenuList__3HIzx"></ul></nav></div></div></header><div class="page-content"><aside class="side-content"><nav class="SideNavigation-module_sideNavigation__3X-9P" id="side-navigation" aria-label="Patterns"><button type="button" class="Button-module_button__1msFE button_hds-button__2A0je Button-module_secondary__1nABp button_hds-button--secondary__1NOWS Button-module_fullWidth__31eVK button_hds-button--fullwidth__1_hG9 SideNavigation-module_toggleButton__10tXH" aria-controls="side-navigation-menu" aria-expanded="false" aria-haspopup="true"><span class="Button-module_label__a4np1 button_hds-button__label__2EQa-">Navigate to page</span><div class="Button-module_icon__O-h7R button_hds-icon__17j8Z" aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-down" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 13.5L17 8.5L18.5 10L12 16.5L5.5 10L7 8.5L12 13.5Z" fill="currentColor"></path></svg></div></button><ul class="SideNavigation-module_mainLevelList__SLZKQ" aria-label="Navigate to page" id="side-navigation-menu"><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_active__3IkdI MainLevel-module_open__2yWFj"><a aria-current="page" aria-label="Overview" id="side-nav-patterns" href="/hds-demo/hds-1817-stepbystep-docs/patterns"><span class="MainLevel-module_label__uWKJ7">Overview</span></a></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><button type="button" aria-label="Forms" aria-current="false" aria-expanded="true" id="side-nav-patterns-forms"><span class="MainLevel-module_label__uWKJ7">Forms</span><span class="MainLevel-module_rightIcon__2D9o7" aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 11.5L17 16.5L18.5 15L12 8.5L5.5 15L7 16.5L12 11.5Z" fill="currentColor"></path></svg></span></button><ul class="MainLevel-module_mainLevelListMenu__FG6Ed" id="side-nav-patterns-forms-menu" aria-hidden="false" aria-labelledby="side-nav-patterns-forms"><li class="SubLevel-module_subLevel__2TvTK"><a aria-current="false" href="/hds-demo/hds-1817-stepbystep-docs/patterns/forms/form-building">Building forms</a></li><li class="SubLevel-module_subLevel__2TvTK"><a aria-current="false" href="/hds-demo/hds-1817-stepbystep-docs/patterns/forms/form-validation">Form validation</a></li><li class="SubLevel-module_subLevel__2TvTK"><a aria-current="false" href="/hds-demo/hds-1817-stepbystep-docs/patterns/forms/form-multi-page">Multi-page forms</a></li></ul></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><button type="button" aria-label="Cookies" aria-current="false" aria-expanded="true" id="side-nav-patterns-cookies"><span class="MainLevel-module_label__uWKJ7">Cookies</span><span class="MainLevel-module_rightIcon__2D9o7" aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 11.5L17 16.5L18.5 15L12 8.5L5.5 15L7 16.5L12 11.5Z" fill="currentColor"></path></svg></span></button><ul class="MainLevel-module_mainLevelListMenu__FG6Ed" id="side-nav-patterns-cookies-menu" aria-hidden="false" aria-labelledby="side-nav-patterns-cookies"><li class="SubLevel-module_subLevel__2TvTK"><a aria-current="false" href="/hds-demo/hds-1817-stepbystep-docs/patterns/cookies/basics">Basics</a></li><li class="SubLevel-module_subLevel__2TvTK"><a aria-current="false" href="/hds-demo/hds-1817-stepbystep-docs/patterns/cookies/common-helsinki-cookies">Common Helsinki cookies</a></li><li class="SubLevel-module_subLevel__2TvTK"><a aria-current="false" href="/hds-demo/hds-1817-stepbystep-docs/patterns/cookies/using-the-cookieconsent">Using the CookieConsent</a></li></ul></li><li class="MainLevel-module_mainLevel__2QZi_ MainLevel-module_open__2yWFj"><button type="button" aria-label="Navigation" aria-current="false" aria-expanded="true" id="side-nav-patterns-navigation"><span class="MainLevel-module_label__uWKJ7">Navigation</span><span class="MainLevel-module_rightIcon__2D9o7" aria-hidden="true"><svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="angle-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 11.5L17 16.5L18.5 15L12 8.5L5.5 15L7 16.5L12 11.5Z" fill="currentColor"></path></svg></span></button><ul class="MainLevel-module_mainLevelListMenu__FG6Ed" id="side-nav-patterns-navigation-menu" aria-hidden="false" aria-labelledby="side-nav-patterns-navigation"><li class="SubLevel-module_subLevel__2TvTK"><a aria-current="false" href="/hds-demo/hds-1817-stepbystep-docs/patterns/navigation/building-navigation">Building navigation</a></li><li class="SubLevel-module_subLevel__2TvTK"><a aria-current="false" href="/hds-demo/hds-1817-stepbystep-docs/patterns/navigation/examples">Examples</a></li></ul></li></ul></nav></aside><main id="content" class="main-content"><h1 id="patterns-overview" style="position:relative" class="page-heading-1 heading-xl-mobile">Patterns overview<a href="#patterns-overview" aria-label="patterns overview permalink" class="header-anchor after"><span><span class="hds-anchor-icon hds-icon hds-icon--link hds-icon--size-xs" aria-hidden="true" style="vertical-align: middle"></span></span></a></h1>
 <p style="font-size:var(--fontsize-body-xl);color:var(--color-black-90);max-width:600px">Patterns are a collection of design principles and solutions. They consist of guidelines and component examples of how to to build pages for specific user flows.</p>
 <p>Patterns describe how <a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F" href="/hds-demo/hds-1817-stepbystep-docs/components/">HDS components</a> are used together to build solutions that are coherent across the whole city.</p>
-<div class="image-container"><a class="image-container-link" href="/hds-demo/hds-1817-stepbystep-docs/images/patterns/patterns.svg" title="The HDS Foundation page image with HDS and HKI texts and design system icons" style="width:100%;maxwidth:650px;margin:var(--spacing-layout-2-xs) 0"><img class="image-container-image" alt="The HDS Foundation page image with HDS and HKI texts and design system icons" src="/hds-demo/hds-1817-stepbystep-docs/images/patterns/patterns.svg" style="width:100%;maxwidth:650px;margin:var(--spacing-layout-2-xs) 0"/></a></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-103" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-103)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a aria-current="page" class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
+<div class="image-container"><a class="image-container-link" href="/hds-demo/hds-1817-stepbystep-docs/images/patterns/patterns.svg" title="The HDS Foundation page image with HDS and HKI texts and design system icons" style="width:100%;maxwidth:650px;margin:var(--spacing-layout-2-xs) 0"><img class="image-container-image" alt="The HDS Foundation page image with HDS and HKI texts and design system icons" src="/hds-demo/hds-1817-stepbystep-docs/images/patterns/patterns.svg" style="width:100%;maxwidth:650px;margin:var(--spacing-layout-2-xs) 0"/></a></div></main></div><footer class="Footer-module_footer__1aD3T page-footer"><div class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W Footer-module_basic__2VejY"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85"><defs><pattern id="koros_basic-104" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse"><path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z"></path></pattern></defs><rect fill="url(#koros_basic-104)" width="100%" height="85" style="shape-rendering:crispEdges"></rect></svg></div><div class="Footer-module_footerContent__3MC14"><div class="Footer-module_footerSections__2nrr8"><h2 class="Footer-module_title__269y7">Helsinki Design System</h2><div class="FooterNavigation-module_navigation__1gS9g"><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/"><span>Getting started</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/foundation/"><span>Foundation</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/components/"><span>Components</span></a><a aria-current="page" class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/patterns/"><span>Patterns</span></a><a class="FooterLink-module_item__3Ig3B FooterLink-module_navigation__1pNfs" href="/hds-demo/hds-1817-stepbystep-docs/about/"><span>About</span></a></div><div class="FooterBase-module_base__2f0eu"><hr class="FooterBase-module_divider__3sz3q" aria-hidden="true"/><div class="FooterBase-module_logoWrapper__3BI7d"><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B" tabindex="0"><img alt="Helsingin kaupunki" class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="/></a></div><div class="FooterBase-module_copyright__2iiev"><span>© <!-- -->Copyright<!-- --> <!-- -->2023</span></div><div class="FooterBase-module_baseActions__1hCiR"><div class="FooterBase-module_links__3lfLo"><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/getting-started/contributing/how-to-contribute"><span>Contribution</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="/hds-demo/hds-1817-stepbystep-docs/about/accessibility/statement"><span>Accessibility</span></a><span class="FooterBase-module_separator__cwQTe">|</span><a class="Link-module_link__TeBQo link_hds-link__5Oxo- Link-module_linkM__30gsY link_hds-link--medium__xEU_F FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj" href="https://github.com/City-of-Helsinki/helsinki-design-system"><span>GitHub</span></a></div><button type="button" role="link" class="FooterBase-module_backToTopButton__hXTHm">Back to top<svg class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="arrow-up" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5L18.5 10L17 11.5L13 7.5V20H11V7.5L7 11.5L5.5 10L12 3.5Z" fill="currentColor"></path></svg></button></div></div></div></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script>
     window.dev = undefined
     if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
       window._paq = window._paq || [];
diff --git a/docs/hds-1817-stepbystep-docs/webpack-runtime-fff134004fb7c0f7023b.js b/docs/hds-1817-stepbystep-docs/webpack-runtime-fff134004fb7c0f7023b.js
new file mode 100644
index 00000000000..b16fd87933a
--- /dev/null
+++ b/docs/hds-1817-stepbystep-docs/webpack-runtime-fff134004fb7c0f7023b.js
@@ -0,0 +1 @@
+!function(){"use strict";var o,c,n,e,s,d={},t={};function m(o){var c=t[o];if(void 0!==c)return c.exports;var n=t[o]={id:o,loaded:!1,exports:{}};return d[o].call(n.exports,n,n.exports,m),n.loaded=!0,n.exports}m.m=d,m.c=t,o=[],m.O=function(c,n,e,s){if(!n){var d=1/0;for(p=0;p<o.length;p++){n=o[p][0],e=o[p][1],s=o[p][2];for(var t=!0,a=0;a<n.length;a++)(!1&s||d>=s)&&Object.keys(m.O).every((function(o){return m.O[o](n[a])}))?n.splice(a--,1):(t=!1,s<d&&(d=s));if(t){o.splice(p--,1);var i=e();void 0!==i&&(c=i)}}return c}s=s||0;for(var p=o.length;p>0&&o[p-1][2]>s;p--)o[p]=o[p-1];o[p]=[n,e,s]},m.n=function(o){var c=o&&o.__esModule?function(){return o.default}:function(){return o};return m.d(c,{a:c}),c},n=Object.getPrototypeOf?function(o){return Object.getPrototypeOf(o)}:function(o){return o.__proto__},m.t=function(o,e){if(1&e&&(o=this(o)),8&e)return o;if("object"==typeof o&&o){if(4&e&&o.__esModule)return o;if(16&e&&"function"==typeof o.then)return o}var s=Object.create(null);m.r(s);var d={};c=c||[null,n({}),n([]),n(n)];for(var t=2&e&&o;"object"==typeof t&&!~c.indexOf(t);t=n(t))Object.getOwnPropertyNames(t).forEach((function(c){d[c]=function(){return o[c]}}));return d.default=function(){return o},m.d(s,d),s},m.d=function(o,c){for(var n in c)m.o(c,n)&&!m.o(o,n)&&Object.defineProperty(o,n,{enumerable:!0,get:c[n]})},m.f={},m.e=function(o){return Promise.all(Object.keys(m.f).reduce((function(c,n){return m.f[n](o,c),c}),[]))},m.u=function(o){return{198:"component---src-docs-components-number-input-tabs-mdx",237:"component---src-docs-components-tooltip-index-mdx",328:"component---src-docs-components-loading-spinner-accessibility-mdx",348:"component---src-docs-components-index-mdx",363:"component---src-docs-components-table-customisation-mdx",399:"component---src-docs-components-checkbox-code-mdx",411:"component---src-docs-patterns-forms-form-building-mdx",488:"component---src-docs-components-phone-input-code-mdx",513:"component---src-docs-foundation-design-tokens-colour-tabs-mdx",571:"component---src-docs-components-logo-tabs-mdx",598:"component---src-docs-foundation-index-mdx",623:"component---src-docs-components-icon-tabs-mdx",626:"component---src-docs-getting-started-faq-code-mdx",630:"component---src-docs-components-text-area-tabs-mdx",636:"component---src-docs-components-side-navigation-tabs-mdx",677:"component---src-docs-components-status-label-index-mdx",689:"component---src-docs-components-logo-index-mdx",733:"component---src-docs-components-icon-code-mdx",750:"component---src-docs-components-hero-customisation-mdx",761:"component---src-docs-components-breadcrumb-customisation-mdx",773:"component---src-docs-about-accessibility-statement-mdx",791:"component---src-docs-patterns-forms-form-multi-page-mdx",795:"component---src-docs-components-checkbox-index-mdx",930:"365f5350290ffe2f11a1902290de23beed7d24c4",963:"component---src-docs-components-highlight-code-mdx",965:"component---src-docs-components-notification-tabs-mdx",1042:"component---src-docs-foundation-design-tokens-spacing-tokens-mdx",1125:"component---src-docs-components-checkbox-accessibility-mdx",1176:"component---src-docs-components-stepper-index-mdx",1287:"component---src-docs-patterns-cookies-basics-mdx",1323:"component---src-docs-about-index-mdx",1332:"component---src-docs-components-dropdown-customisation-mdx",1352:"component---src-docs-components-selection-group-tabs-mdx",1372:"component---src-docs-components-stepper-accessibility-mdx",1441:"component---src-docs-components-footer-index-mdx",1457:"component---src-docs-components-tabs-code-mdx",1635:"component---src-docs-components-search-input-index-mdx",1645:"component---src-docs-components-hero-accessibility-mdx",1665:"component---src-docs-components-status-label-code-mdx",1722:"component---src-docs-foundation-guidelines-server-side-rendering-mdx",1779:"component---src-docs-components-koros-code-mdx",1817:"component---src-docs-components-stepper-code-mdx",1966:"component---src-docs-components-file-input-code-mdx",1969:"component---src-docs-components-date-input-code-mdx",1993:"component---src-docs-components-tag-code-mdx",1999:"component---src-docs-foundation-guidelines-checkbox-radiobutton-toggle-mdx",2105:"component---src-docs-components-radio-button-accessibility-mdx",2151:"component---src-docs-components-koros-customisation-mdx",2166:"component---src-docs-components-cookie-consent-tabs-mdx",2190:"component---src-docs-foundation-design-tokens-breakpoints-tabs-mdx",2237:"component---src-docs-getting-started-designer-mdx",2256:"component---src-docs-patterns-cookies-using-the-cookieconsent-mdx",2291:"component---src-docs-components-breadcrumb-tabs-mdx",2395:"component---src-docs-components-dialog-customisation-mdx",2406:"component---src-docs-index-mdx",2423:"component---src-docs-foundation-visual-assets-placeholders-mdx",2453:"component---src-docs-foundation-guidelines-grid-mdx",2456:"component---src-docs-components-side-navigation-index-mdx",2506:"component---src-docs-components-accordion-customisation-mdx",2595:"component---src-docs-foundation-guidelines-data-formats-mdx",2609:"component---src-docs-components-toggle-button-index-mdx",2629:"component---src-docs-components-password-input-index-mdx",2707:"cad73618753cbcba4fffc4995fc64d64bf78d438",2739:"component---src-docs-components-selection-group-code-mdx",2761:"component---src-docs-components-date-input-tabs-mdx",2783:"component---src-docs-components-password-input-security-mdx",2786:"component---src-docs-components-accordion-code-mdx",2798:"component---src-docs-components-cookie-consent-accessibility-mdx",2862:"component---src-docs-components-toggle-button-tabs-mdx",2962:"component---src-docs-getting-started-developer-mdx",2965:"component---src-docs-components-file-input-tabs-mdx",2981:"component---src-docs-components-phone-input-accessibility-mdx",3013:"component---src-docs-foundation-visual-assets-icons-list-mdx",3098:"component---src-docs-components-pagination-customisation-mdx",3154:"component---src-docs-components-radio-button-code-mdx",3204:"component---src-docs-foundation-design-tokens-typography-index-mdx",3223:"component---src-docs-components-buttons-tabs-mdx",3245:"component---src-docs-components-text-area-accessibility-mdx",3346:"component---src-docs-components-tabs-index-mdx",3361:"component---src-docs-components-table-code-mdx",3423:"component---src-docs-foundation-visual-assets-icons-index-mdx",3424:"component---src-docs-components-text-input-tabs-mdx",3429:"component---src-docs-components-koros-accessibility-mdx",3524:"component---src-docs-components-header-code-mdx",3528:"component---src-docs-components-icon-index-mdx",3609:"component---src-docs-getting-started-tutorials-migrate-to-3-0-0-mdx",3675:"component---src-docs-foundation-design-tokens-spacing-tabs-mdx",3676:"component---src-docs-components-linkbox-tabs-mdx",3723:"component---src-docs-getting-started-tutorials-abstract-tutorial-mdx",3733:"component---src-docs-components-table-tabs-mdx",3775:"component---src-docs-foundation-visual-assets-wave-motifs-mdx",3776:"component---src-docs-components-loading-spinner-tabs-mdx",3872:"component---src-docs-components-tabs-tabs-mdx",3877:"component---src-docs-404-mdx",3906:"component---src-docs-components-pagination-tabs-mdx",4095:"component---src-docs-components-linkbox-code-mdx",4124:"component---src-docs-foundation-design-tokens-breakpoints-tokens-mdx",4174:"component---src-docs-components-table-accessibility-mdx",4201:"component---src-docs-components-step-by-step-tabs-mdx",4360:"component---src-docs-components-status-label-accessibility-mdx",4365:"component---src-docs-components-hero-index-mdx",4393:"component---src-docs-components-dialog-code-mdx",4408:"4d739130fd770bad238e467e54f6980d0e7e343b",4428:"component---src-docs-components-number-input-accessibility-mdx",4442:"component---src-docs-components-step-by-step-index-mdx",4544:"component---src-docs-components-notification-accessibility-mdx",4563:"component---src-docs-patterns-navigation-examples-mdx",4592:"component---src-docs-components-link-index-mdx",4602:"component---src-docs-components-accordion-accessibility-mdx",4605:"component---src-docs-getting-started-faq-tabs-mdx",4614:"component---src-docs-components-table-index-mdx",4618:"component---src-docs-components-footer-tabs-mdx",4740:"component---src-docs-components-time-input-tabs-mdx",4744:"component---src-docs-components-search-input-tabs-mdx",4763:"component---src-docs-components-password-input-accessibility-mdx",4782:"component---src-docs-components-checkbox-customisation-mdx",4799:"component---src-docs-patterns-index-mdx",4834:"component---src-docs-components-radio-button-index-mdx",4910:"component---src-docs-components-number-input-code-mdx",4918:"component---src-docs-components-accordion-index-mdx",4929:"component---src-docs-components-number-input-index-mdx",4984:"component---src-docs-about-resources-mdx",5066:"component---src-docs-getting-started-contributing-implementation-mdx",5111:"component---src-docs-components-card-code-mdx",5117:"component---src-docs-components-header-index-mdx",5165:"component---src-docs-components-tooltip-tabs-mdx",5166:"component---src-docs-components-phone-input-index-mdx",5189:"component---src-docs-components-file-input-index-mdx",5203:"component---src-docs-components-card-index-mdx",5234:"component---src-docs-foundation-design-tokens-spacing-index-mdx",5322:"component---src-docs-foundation-design-tokens-colour-index-mdx",5387:"component---src-docs-components-header-tabs-mdx",5394:"component---src-docs-components-linkbox-index-mdx",5407:"component---src-docs-components-date-input-accessibility-mdx",5421:"component---src-docs-patterns-cookies-common-helsinki-cookies-mdx",5445:"component---src-docs-getting-started-contributing-documentation-mdx",5467:"component---src-docs-components-password-input-code-mdx",5490:"component---src-docs-components-linkbox-accessibility-mdx",5574:"component---src-docs-components-fieldset-accessibility-mdx",5681:"component---src-docs-foundation-visual-assets-icons-tabs-mdx",5684:"component---src-docs-components-link-accessibility-mdx",5706:"component---src-docs-components-dropdown-accessibility-mdx",5757:"component---src-docs-components-side-navigation-code-mdx",5831:"component---src-docs-components-search-input-accessibility-mdx",5882:"component---src-docs-components-side-navigation-accessibility-mdx",5932:"component---src-docs-components-step-by-step-accessibility-mdx",6043:"component---src-docs-components-dialog-tabs-mdx",6046:"component---src-docs-components-dropdown-tabs-mdx",6064:"component---src-docs-components-breadcrumb-accessibility-mdx",6136:"b123bb55",6145:"component---src-docs-components-loading-spinner-customisation-mdx",6165:"component---src-docs-components-tabs-accessibility-mdx",6188:"component---src-docs-foundation-design-tokens-typography-tokens-mdx",6260:"component---src-docs-components-loading-spinner-index-mdx",6351:"component---src-docs-components-card-customisation-mdx",6377:"component---src-docs-components-tag-index-mdx",6401:"component---src-docs-getting-started-index-mdx",6408:"component---src-docs-components-buttons-customisation-mdx",6448:"component---src-docs-components-breadcrumb-code-mdx",6496:"component---src-docs-about-releases-mdx",6497:"component---src-docs-components-highlight-index-mdx",6544:"component---src-docs-components-tooltip-code-mdx",6573:"7ab03d60c6dfbbe958e883b3349cfc88d87f8480",6606:"component---src-docs-components-side-navigation-customisation-mdx",6725:"component---src-docs-components-stepper-tabs-mdx",6909:"component---src-docs-foundation-visual-assets-favicon-mdx",6944:"component---src-docs-components-text-input-code-mdx",6958:"component---src-docs-components-file-input-security-mdx",6978:"b192c7df83cc63c115c47db8cdb288825a93073a",6982:"component---src-docs-patterns-navigation-building-navigation-mdx",6987:"component---src-docs-components-icon-customisation-mdx",7002:"component---src-docs-components-phone-input-tabs-mdx",7011:"component---src-docs-components-step-by-step-code-mdx",7056:"component---src-docs-components-dialog-index-mdx",7102:"component---src-docs-components-dropdown-index-mdx",7173:"component---src-docs-getting-started-faq-index-mdx",7187:"component---src-docs-components-password-input-tabs-mdx",7247:"component---src-docs-foundation-design-tokens-breakpoints-index-mdx",7348:"component---src-docs-components-radio-button-customisation-mdx",7383:"component---src-docs-components-tooltip-accessibility-mdx",7390:"component---src-docs-components-date-input-index-mdx",7407:"component---src-docs-components-accordion-tabs-mdx",7445:"component---src-docs-components-footer-customisation-mdx",7487:"component---src-docs-components-radio-button-tabs-mdx",7553:"component---src-docs-components-highlight-tabs-mdx",7557:"component---src-docs-components-notification-index-mdx",7586:"component---src-docs-components-footer-code-mdx",7587:"component---src-docs-components-highlight-customisation-mdx",7618:"component---src-docs-components-selection-group-index-mdx",7680:"component---src-docs-getting-started-faq-design-mdx",7685:"component---src-docs-components-buttons-code-mdx",7720:"component---src-docs-patterns-forms-form-validation-mdx",7770:"component---src-docs-components-tag-tabs-mdx",7846:"component---src-docs-components-text-input-index-mdx",7922:"component---src-docs-components-notification-code-mdx",7944:"component---src-docs-foundation-visual-assets-logo-mdx",7996:"component---src-docs-getting-started-contributing-how-to-contribute-mdx",8087:"component---src-docs-components-buttons-index-mdx",8236:"component---src-docs-components-tag-accessibility-mdx",8247:"component---src-docs-components-card-tabs-mdx",8362:"component---src-docs-components-time-input-index-mdx",8365:"component---src-docs-components-koros-tabs-mdx",8403:"component---src-docs-foundation-design-tokens-colour-accessibility-mdx",8433:"component---src-docs-components-text-area-code-mdx",8438:"component---src-docs-foundation-design-tokens-colour-tokens-mdx",8444:"component---src-docs-foundation-guidelines-inclusivity-mdx",8492:"component---src-docs-components-checkbox-tabs-mdx",8541:"28e14f2bd2d36fbecf7ddea45c84183309b7aed0",8552:"component---src-docs-components-text-area-index-mdx",8595:"component---src-docs-components-logo-code-mdx",8619:"component---src-docs-components-status-label-tabs-mdx",8624:"component---src-docs-about-accessibility-hds-accessibility-mdx",8632:"component---src-docs-foundation-guidelines-photography-mdx",8644:"component---src-docs-components-dropdown-code-mdx",8690:"component---src-docs-components-pagination-code-mdx",8726:"component---src-docs-components-breadcrumb-index-mdx",8735:"component---src-docs-components-header-accessibility-mdx",8751:"component---src-docs-components-logo-customisation-mdx",8824:"component---src-docs-components-stepper-customisation-mdx",8863:"component---src-docs-components-buttons-accessibility-mdx",8976:"component---src-docs-foundation-design-tokens-typography-tabs-mdx",9047:"component---src-docs-components-koros-index-mdx",9065:"component---src-docs-components-fieldset-code-mdx",9081:"component---src-docs-components-text-input-accessibility-mdx",9098:"component---src-docs-components-fieldset-index-mdx",9153:"component---src-docs-components-highlight-accessibility-mdx",9166:"component---src-docs-components-file-input-accessibility-mdx",9175:"component---src-docs-getting-started-faq-accessibility-mdx",9195:"component---src-docs-components-link-tabs-mdx",9235:"component---src-docs-components-cookie-consent-api-mdx",9245:"component---src-docs-components-footer-accessibility-mdx",9274:"component---src-docs-components-time-input-accessibility-mdx",9358:"component---src-docs-components-tabs-customisation-mdx",9367:"component---src-docs-components-toggle-button-customisation-mdx",9379:"component---src-docs-components-cookie-consent-code-mdx",9416:"component---src-docs-components-link-code-mdx",9418:"component---src-docs-components-time-input-code-mdx",9438:"component---src-docs-getting-started-contributing-icons-mdx",9441:"component---src-docs-components-toggle-button-accessibility-mdx",9459:"component---src-docs-foundation-guidelines-localisation-mdx",9526:"component---src-docs-getting-started-contributing-design-mdx",9559:"component---src-docs-components-logo-accessibility-mdx",9574:"component---src-docs-components-search-input-code-mdx",9598:"component---src-docs-components-hero-tabs-mdx",9677:"component---src-docs-about-this-is-hds-index-jsx",9679:"component---src-docs-components-tag-customisation-mdx",9697:"component---src-docs-components-dialog-accessibility-mdx",9700:"component---src-docs-components-selection-group-accessibility-mdx",9708:"component---src-docs-components-pagination-index-mdx",9711:"component---src-docs-components-loading-spinner-code-mdx",9745:"component---src-docs-components-hero-code-mdx",9772:"component---src-docs-components-toggle-button-code-mdx",9787:"component---src-docs-components-card-accessibility-mdx",9805:"component---src-docs-components-cookie-consent-index-mdx",9860:"component---src-docs-getting-started-versioning-mdx",9922:"component---src-docs-components-icon-accessibility-mdx",9933:"component---src-docs-components-fieldset-tabs-mdx",9992:"component---src-docs-components-pagination-accessibility-mdx"}[o]+"-"+{198:"3eadc8cc203869f43551",237:"b6b32a144ad268de98cd",328:"babe224836b244e251f1",348:"010e530c56fb2e655d18",363:"e2c837c267de3a745e6f",399:"b55bb52441b6f2aaa262",411:"665025371ec9ab6a072f",488:"62f6c51179f66ba584a4",513:"0b7ad319531aca2d95ef",571:"119154cafc54a421d304",598:"f6fa62eb5677896d50ee",623:"b50236435e5bcca0d28b",626:"ae37929b45eb4e4f8195",630:"539fb0ddf9270349e94f",636:"c26b05d39a47011f85ca",677:"ced499d8706f162fe755",689:"5166603a8e5a241d0601",733:"6d62697d568f0841e2d8",750:"570db8e0c8d7e0d9a63a",761:"056818ca5baea2516dc3",773:"d09bcb9e2fc5e77f72a5",791:"ac8450a0041e9aeac50b",795:"87268f0ebf26c7581711",930:"e206c1b377e434c0a87a",963:"336b7ef939e4e9856398",965:"2bf54cf9a0316852189f",1042:"eb479584e4bccb3d3001",1125:"85bf8a499b94a6020682",1176:"6ff34e81c1651e65531f",1287:"33cd8599e70f27f7deca",1323:"88a35b9abffba8e3bb1d",1332:"2804aba885c47e989972",1352:"fecc0d9ca66d7324e72b",1372:"13c4800e70fa24d2b836",1441:"3dfb5aa9719f31603352",1457:"4b171782325aadb7d4c7",1635:"e3e961e1ed7141f5652f",1645:"d6db9703b8a1c4068b9e",1665:"040c6e1eb351a22b76d0",1722:"4eb635f0cfc4410f1d7b",1779:"94b36bd444522e7e62ea",1817:"c9939bc02af03f12bc15",1966:"27937b20aa4ddfd28fc6",1969:"5351cb0b41fba022b084",1993:"b967625ec20fe2894f94",1999:"7754b60733c366580eae",2105:"8adc96e274231a4100e8",2151:"7e6bc8d932947dc1d2b7",2166:"46255b8dbf76459e0c65",2190:"83e071bc7663abae60ff",2237:"267ff52258d3df151d89",2256:"cf604c48938de88222cf",2291:"fee2c2763290a354e310",2395:"2f40bcfe758a28669b24",2406:"8367a4ba67f368e53424",2423:"5cf9b1bd4f61294142f4",2453:"04deb87933ef97642131",2456:"6b0058724b5260487127",2506:"57e8811d082cf9e65d84",2595:"9e12c99f0e06d22e0aba",2609:"b9a9febc66e456514d0f",2629:"b68f9f18b964f6b5f21d",2707:"09c6855bfcb2c8d525c6",2739:"1ac1d57bdabaa673db84",2761:"48b5a1f56d2f89619665",2783:"96a4352b3d8e6114ee8d",2786:"ee2418ec85b8653bba26",2798:"6dc8a978256393ab3556",2862:"4194c23478e22682f5ee",2962:"d67d0445c0d52873e46a",2965:"c6bbffabae8144a29e19",2981:"c215ec57e23dfa8f9e9a",3013:"d056be11b6d5144d24be",3098:"a62e3e65aef79bddea7c",3154:"b0d613eb5f42eddf8af2",3204:"f6daff5e5c0826e1e8fb",3223:"cd46fdc2009425fae19e",3245:"364d7aa3269d4ef667f7",3346:"8782ff503ef92732b123",3361:"be0e6d2a8e9800302b59",3423:"af81bf87bc6fe1bc3230",3424:"11983b3b3153be014b29",3429:"14688330bea14d22ebe4",3524:"cddb16dd87adbbc7f3c6",3528:"3ca1a10ae69d919facdc",3609:"3b962131d9231dda0d61",3675:"0829d5ab8700dcaa5305",3676:"05d110462d65a9cb1b85",3723:"52aacc85b5ef7ff48f5c",3733:"763625a9deea99710da9",3775:"741f9fb8abef25462d60",3776:"c3d588c37579fbd35dfd",3872:"cfa726333d859683b4a0",3877:"63b1db6da09517d6ee25",3906:"9a722e4d8436c9376fa5",4095:"be15f5a1db16db2f0902",4124:"7a5aa717625c1aee67d3",4174:"1c7a19df24e5a59f47d3",4201:"786b11a2b8fcbd547796",4360:"01089f21663f4019779e",4365:"0a1c95c57d7ddbbc7ea4",4393:"f12b1f7bfd7382b5d33b",4408:"734ec1f53a8f0f01da79",4428:"d24e3b3737341ad00370",4442:"f333ef34817be266858a",4544:"258cc9b160dfc59efde1",4563:"ed983af097252f0452bc",4592:"ad8615f3fe019db7b0ff",4602:"2d600c846f83f5259de1",4605:"a4617755fe3c08fa0fb1",4614:"87fc955581f4b14d0ded",4618:"04d6453ba70a5d91ca08",4740:"c00e66b91d296ca87027",4744:"3feb0982dacb4376e011",4763:"e5ade55fd3f84033da91",4782:"89fc13f983456262e82f",4799:"b70be0e64741d9daf9db",4834:"102fd9f1d4937e3879f6",4910:"d1f7ea026176c4955c5a",4918:"fd8a3c41cd86641ad2f9",4929:"98791155329a577e5e88",4984:"44e37ff8c3e7a276cca1",5066:"0251db6a4b21b4ad9af6",5111:"b8ba56226c3f22a1cd50",5117:"977359c9187b2489f566",5165:"d366b5790aae1902bc71",5166:"54968bef4866d6aee90b",5189:"02335fc112a408ca1d0b",5203:"352fbad1dc2b65901a7d",5234:"6a207902d6f9787583cb",5322:"706ecc5b33824a18bbc2",5387:"e296284a31b64f02f630",5394:"b7dc38ddf301199aaeee",5407:"dfa81df2f8badb5be261",5421:"f2e83626553c698a9c3d",5445:"8e95bb80bb1fe308f551",5467:"95447e1fa1b962d32445",5490:"e50ed38f2cae42e43c46",5574:"853e7c84d150d8d6b165",5681:"50796204498bbaba2feb",5684:"470a31f6af432d37a8e7",5706:"fd916ac3793f5e79062f",5757:"fd7025e87ed55b429189",5831:"6a0bd2f56d0b6b0045dd",5882:"1798eaf70cc8af6ecd78",5932:"b09ed3b674e32ffd3167",6043:"72a4bd9691e003de9e05",6046:"5386e0b7c1774dae3239",6064:"c29db5ea73fef9ffbad7",6136:"73388f463f51189e5870",6145:"f30f95a548442fb1b82e",6165:"f1a18c8969414ada9019",6188:"8137125bb077f8f5aff3",6260:"18636b85d38f0830659e",6351:"b09b840bea7366669e84",6377:"d6bb1662e2ba27e2632b",6401:"7d4d6bbc6d46f9b1eb8d",6408:"aad900d3f10e2d745c68",6448:"823b5b268a1e4b6c21df",6496:"9ef512d493f6a3d10246",6497:"f899ecdb3e789b65f195",6544:"750d33168d5ac1f44e2e",6573:"9d9f736a120aa3c57347",6606:"e44dd3ada4a40fce64e6",6725:"c15571dc8d9b7cd53380",6909:"e4cbbce661297bc893aa",6944:"5b7c91fa9a15bda3673c",6958:"25028be6a8c6b2887220",6978:"6841b5670b9f68d41f55",6982:"0b8c283cfc70005ee4a5",6987:"d3c4900073d9b3081b05",7002:"d648ebcc20832dba9301",7011:"7852d84171a184ece306",7056:"ecb967e43f7048fb128d",7102:"23f7572fdb6c20007d82",7173:"7fdada037b72b814b530",7187:"851cef695b43c7e90b26",7247:"0e020a7932aa083f6fa4",7348:"d505420946831f1692f0",7383:"feaf6711dd9ce70f939f",7390:"55b0753e837fbc90c993",7407:"964ab68c8cbe69db4a36",7445:"7a9a78f8d1a538f63ad4",7487:"b3cabd376f8765451c20",7553:"62b00cdc5af80915cf11",7557:"0fbdbe9fb7787b697f58",7586:"55b9823f4a7f6567fb79",7587:"e65d914e751283f4e684",7618:"f61a79e5815595bb210f",7680:"55f1c75a8c1298c6e60f",7685:"fb6949b2d38e1b97b673",7720:"d930191dd06162fec3fc",7770:"15c6e1e156d18d68fd24",7846:"8fa395ef09bc1151b6af",7922:"c3b30ea9e9636c4d0501",7944:"050b92ab1fa69bd0c231",7996:"30e1adaab494837a5346",8087:"87b2da23a0923d27cfe5",8236:"afcd8ceeaea9b34ab588",8247:"a3420096c837975e0721",8362:"206b1227bcd550ed3586",8365:"33cd1d9ccdfad6075f07",8403:"dedd64e3980c75ec2d89",8433:"5b87d908305ccc103b0c",8438:"83ba2713ad7baef6a346",8444:"2ffa07dfe89bd713f486",8492:"bf8fd04b07ef1ff2be21",8541:"703923a7fd3aece26f8b",8552:"cd72c17638193c051f15",8595:"d0cdbd45f0d1a52e5a59",8619:"d8c239d36f6a193de0e1",8624:"8e4d46e1b8decedbf234",8632:"cfff3bdbc142f8d542f6",8644:"20c39054bafa0f3a0f1c",8690:"8d0a5b2d0f615a61d2e5",8726:"679117619f6885e3d2fc",8735:"30f50becfde708c94cb6",8751:"3274e1826421da1ef866",8824:"daa4feb96b55d6e1671a",8863:"26f0df0885e580f26a39",8976:"1c7053457876c009fa2b",9047:"3c13cd869bcb5507d276",9065:"6de86d7d500160a87ae8",9081:"e1395c517162e5b3f97c",9098:"1ee096092d1f6fa88f17",9153:"25792d7ec08a56555a5c",9166:"cb5929d6e7acc9074e4a",9175:"61cb1e3461080e6c6545",9195:"c19b97c7b74eaebb68de",9235:"2f85b9ab59b456a272cb",9245:"98232604165254f65c5b",9274:"0f511b6045e1df9fb7d5",9358:"0059209907b7636e727a",9367:"e9fc540ba000b22d3f0a",9379:"59226ca090fda1c505c3",9416:"b12bbc38300893378aeb",9418:"33b0f9ccf83f665a60fa",9438:"7a4b6c2eb900f67c6f94",9441:"9ee0e61d8f2ebcdd6b6b",9459:"995151115b9897fcbb8c",9526:"bb52d9ef64bc8e29e277",9559:"3445c03d9f5e2d4d239b",9574:"e82316afb5b7ff03a913",9598:"e2e494c73555e7efb725",9677:"474696f930c9736b09de",9679:"f1ff9dc9e9a41545d8d5",9697:"d372732094ab19775b42",9700:"5c398654d8a316a5ce75",9708:"1731dbeb41318cdfdded",9711:"65191ad2cbd04d5e8349",9745:"09de62be2348ed264be4",9772:"37b09a6dd33ce1be5b49",9787:"3bb0e67c26ae23674fc2",9805:"e539e10bee02de9fe7af",9860:"fc3707f14cf90099e6d6",9922:"d647bce5e2ea82a6a8b0",9933:"0bc05792c89bbb9ffb2b",9992:"11d5627154c9c6a9d408"}[o]+".js"},m.miniCssF=function(o){return"styles.02a1c2e09db554bc04db.css"},m.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(o){if("object"==typeof window)return window}}(),m.hmd=function(o){return(o=Object.create(o)).children||(o.children=[]),Object.defineProperty(o,"exports",{enumerable:!0,set:function(){throw new Error("ES Modules may not assign module.exports or exports.*, Use ESM export syntax, instead: "+o.id)}}),o},m.o=function(o,c){return Object.prototype.hasOwnProperty.call(o,c)},e={},s="site:",m.l=function(o,c,n,d){if(e[o])e[o].push(c);else{var t,a;if(void 0!==n)for(var i=document.getElementsByTagName("script"),p=0;p<i.length;p++){var r=i[p];if(r.getAttribute("src")==o||r.getAttribute("data-webpack")==s+n){t=r;break}}t||(a=!0,(t=document.createElement("script")).charset="utf-8",t.timeout=120,m.nc&&t.setAttribute("nonce",m.nc),t.setAttribute("data-webpack",s+n),t.src=o),e[o]=[c];var b=function(c,n){t.onerror=t.onload=null,clearTimeout(f);var s=e[o];if(delete e[o],t.parentNode&&t.parentNode.removeChild(t),s&&s.forEach((function(o){return o(n)})),c)return c(n)},f=setTimeout(b.bind(null,void 0,{type:"timeout",target:t}),12e4);t.onerror=b.bind(null,t.onerror),t.onload=b.bind(null,t.onload),a&&document.head.appendChild(t)}},m.r=function(o){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(o,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(o,"__esModule",{value:!0})},m.nmd=function(o){return o.paths=[],o.children||(o.children=[]),o},m.p="/hds-demo/hds-1817-stepbystep-docs/",function(){var o={6658:0,532:0};m.f.j=function(c,n){var e=m.o(o,c)?o[c]:void 0;if(0!==e)if(e)n.push(e[2]);else if(/^(532|6658)$/.test(c))o[c]=0;else{var s=new Promise((function(n,s){e=o[c]=[n,s]}));n.push(e[2]=s);var d=m.p+m.u(c),t=new Error;m.l(d,(function(n){if(m.o(o,c)&&(0!==(e=o[c])&&(o[c]=void 0),e)){var s=n&&("load"===n.type?"missing":n.type),d=n&&n.target&&n.target.src;t.message="Loading chunk "+c+" failed.\n("+s+": "+d+")",t.name="ChunkLoadError",t.type=s,t.request=d,e[1](t)}}),"chunk-"+c,c)}},m.O.j=function(c){return 0===o[c]};var c=function(c,n){var e,s,d=n[0],t=n[1],a=n[2],i=0;if(d.some((function(c){return 0!==o[c]}))){for(e in t)m.o(t,e)&&(m.m[e]=t[e]);if(a)var p=a(m)}for(c&&c(n);i<d.length;i++)s=d[i],m.o(o,s)&&o[s]&&o[s][0](),o[s]=0;return m.O(p)},n=self.webpackChunksite=self.webpackChunksite||[];n.forEach(c.bind(null,0)),n.push=c.bind(null,n.push.bind(n))}()}();
\ No newline at end of file